footer{
	background-color:#E65100; /* Oranye gelap, earthy tone */
	margin-top:30px;
}

.logo,
.color{
	color:#E65100; /* Menggunakan oranye gelap yang sama */
}
footer a,
.logo a {
	color:#FB8C00; /* Oranye sedang, sedikit lebih terang untuk link */
}

.logo a:hover,
footer a:hover{
	color:white; /* Tetap putih saat hover untuk kontras yang baik */
	text-decoration:none;
}

.logo a:hover{
	color:#E65100; /* Kembali ke oranye gelap saat hover pada logo */
}

#loading{
	text-align:center;
}

/* Override Background Color */
.bg-dark {
    background-color: #212121 !important; /* Abu-abu sangat gelap, mendekati hitam */
}
body {
    background-color: #212121; /* Pastikan juga body memiliki warna dasar ini */
    color: #f0f0f0; /* Warna teks umum (di luar kartu), label, dan elemen lain */
}

/* NEW: Perbaikan untuk teks di dalam card (kartu) */
.card-body {
    background-color: white !important; /* Memastikan background card-body putih */
    color: #333 !important; /* Warna teks gelap untuk kontras di dalam kartu */
}

.card-body h5,
.card-body h4,
.card-body p,
.card-body label,
.card-body center {
    color: #333 !important; /* Pastikan semua teks di dalam card-body berwarna gelap */
}


/* New additions for Bootstrap overrides */
.tab-content{
    border:1px solid #FFB74D; /* Lighter orange for tab border, to match new theme */
    border-top:none;
    padding-bottom:30px;
    padding-top:10px;
}

/* Nav Tabs - untuk memastikan warna terlihat pada background gelap */
.nav-tabs .nav-item .nav-link {
    color: #E65100 !important; /* DEFAULT: Oranye gelap di latar belakang putih card-body */
}
.nav-tabs .nav-item .nav-link.active {
    color: white !important;
    background-color: #FB8C00 !important; /* Oranye sedang untuk background tab aktif */
    border-color: #FB8C00 #FB8C00 white !important; /* Sesuaikan border tab aktif */
}
.nav-tabs .nav-item .nav-link:hover:not(.active) { /* Hover untuk link non-aktif */
    color: white !important;
    background-color: #E65100 !important; /* Oranye gelap saat hover */
}


/* Buttons - Dengan !important untuk menimpa Bootstrap */
.btn-success {
    background-color: #FB8C00 !important; /* Oranye utama untuk tombol sukses */
    border-color: #FB8C00 !important;
    color: white;
}
.btn-success:hover {
    background-color: #E65100 !important; /* Oranye gelap saat hover */
    border-color: #E65100 !important;
}
.btn-success:active, /* Untuk state 'active' (setelah diklik) */
.btn-success:focus {
    background-color: #E65100 !important;
    border-color: #E65100 !important;
    box-shadow: 0 0 0 0.2rem rgba(251, 140, 0, 0.5) !important; /* Efek shadow oranye saat fokus/klik */
}


/* Badges - Sudah menggunakan !important */
.badge-info {
    background-color: #FFB74D !important; /* Oranye lebih terang untuk badge info */
    color: #333 !important; /* Teks gelap untuk kontras */
}

.badge-success {
    background-color: #FB8C00 !important; /* Oranye utama untuk badge sukses */
    color: white !important;
}

/* Tetap menggunakan merah untuk badge danger agar jelas sebagai indikator error */
.badge-danger {
    background-color: #dc3545 !important;
    color: white !important;
}

/* Style for jQuery UI Autocomplete suggestions */
.ui-autocomplete {
    list-style: none; /* Menghilangkan bulatan kecil */
    padding: 0;
    margin: 0;
    border: 1px solid #ccc; /* Tambah border tipis */
    background-color: white; /* Pastikan latar belakang saran putih */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Tambah bayangan tipis */
}

.ui-menu-item a {
    color: black !important; /* Jadikan teks saran hitam */
    padding: 5px 10px;
    display: block;
    text-decoration: none;
}

.ui-menu-item a.ui-state-focus,
.ui-menu-item a.ui-state-active {
    background-color: #FB8C00 !important; /* Latar belakang oranye untuk item yang sedang fokus/aktif */
    color: white !important; /* Teks putih di latar belakang oranye */
}

/* ANIMATION FOR PROMO TEXT - JUMPING EFFECT */
@keyframes jump-text {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-8px); /* Lompat lebih tinggi */
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-4px); /* Lompatan lebih kecil/pantulan */
    }
}

.animated-promo {
    display: inline-block; /* Penting agar transform bekerja dengan andal */
    animation: jump-text 1.2s ease-out infinite; /* Animasi melompat 1.2 detik, dengan percepatan di akhir, berulang tak terbatas */
}