/*
 Theme Name:   Kadence Child
 Theme URI:    https://zakatindonesia.or.id/
 Description:  Child theme untuk Kadence
 Author:       Zakat Indonesia Team
 Author URI:   https://zakatindonesia.or.id/
 Template:     kadence
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
*/

/* ------------------------------------------------------------------
Masukkan semua CSS kustom Anda dari Kustomisasi di bawah baris ini
------------------------------------------------------------------
*/
/* Container Utama untuk Plugin Donasi Kreatif */
.dk-container {
    width: 100%; /* Lebar responsif */
    max-width: 1140px; /* Lebar maksimum konten di layar besar, sesuaikan jika perlu */
    margin-left: auto; /* Trik untuk membuat container ke tengah */
    margin-right: auto; /* Trik untuk membuat container ke tengah */
    padding-left: 20px; /* Jarak aman dari tepi kiri layar */
    padding-right: 20px; /* Jarak aman dari tepi kanan layar */
    box-sizing: border-box;
}

/* Styling untuk Halaman Arsip Campaign */
.campaign-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.campaign-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s ease-in-out;
}

.campaign-item:hover {
    transform: translateY(-5px);
}

.campaign-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.campaign-content {
    padding: 20px;
}

.campaign-title {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 10px;
}

.campaign-goal {
    font-weight: bold;
    color: #2b6cb0; /* Warna biru, bisa disesuaikan */
    margin-bottom: 15px;
}

.campaign-item .button {
    display: inline-block;
    background-color: #ed2529; /* Warna biru, bisa disesuaikan */
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
/* Styling untuk Halaman Single Campaign */
.campaign-single-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 20px;
}

.campaign-main-content {
    flex: 2; /* Kolom kiri lebih besar */
    min-width: 300px;
}

.campaign-sidebar {
    flex: 1; /* Kolom kanan lebih kecil */
    min-width: 280px;
}

.campaign-stats-box {
    background-color: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 25px;
    position: sticky;
    top: 40px; /* Membuat box "mengambang" saat di-scroll */
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.stat-item .amount {
    font-size: 1.5rem;
    font-weight: bold;
    color: #2d3748;
}

.stat-item.terkumpul .amount {
    color: #2b6cb0;
}

.stat-item .label {
    font-size: 0.9rem;
    color: #718096;
}

.progress-bar-container {
    margin: 15px 0;
}

.progress-bar-bg {
    width: 100%;
    height: 12px;
    background-color: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: #3182ce;
    border-radius: 6px;
    transition: width 0.5s ease-in-out;
}

.button-donasi-utama {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #dd6b20 !important; /* Warna oranye, !important agar menimpa style tema */
    color: #fff !important;
    text-align: center;
    font-size: 1.2rem !important;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 20px;
}

/* Styling untuk Daftar Donatur */
.donator-list-section {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}
.donator-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.donator-list li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.donator-list .donator-name {
    font-style: italic;
    color: #555;
}
.donator-list .donator-amount {
    font-weight: bold;
}

/* Styling untuk Hitung Mundur Waktu */
.stat-item.time-remaining {
    background-color: #fff;
    padding: 15px;
    margin-top: 15px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    justify-content: center;
    text-align: center;
}

.stat-item.time-remaining .dashicons {
    font-size: 28px;
    color: #999;
    margin-right: 10px;
}

.stat-item.time-remaining .time-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.time-info .days-left {
    font-size: 24px;
    font-weight: bold;
    color: #dd6b20; /* Oranye */
}
.time-info .label {
    font-size: 14px;
    color: #555;
}
.time-info .label-ended,
.time-info .label-ongoing {
    font-size: 16px;
    font-weight: bold;
    color: #718096; /* Abu-abu */
}

/* Style untuk tombol yang non-aktif */
.button-donasi-utama:disabled {
    background-color: #a0aec0 !important;
    cursor: not-allowed;
}

/* Styling untuk Tampilan Tanggal Dinamis di Header */
#dynamic-date-display {
  font-size: 14px; /* Sesuaikan ukuran font jika perlu */
  color: #ffffff; /* Ganti dengan warna teks header Anda, misalnya #333333 untuk header terang */
  text-align: right; /* Ganti ke 'left' jika diletakkan di kiri */
  padding: 5px 0;
}

/* Membuat tampilan lebih rapi di layar kecil */
@media (max-width: 768px) {
  #dynamic-date-display {
    text-align: center; /* Tengahkan di layar mobile */
    font-size: 13px;
  }
}

#zakat-result {
    margin-top: 20px;
    padding: 15px;
    background-color: #e8f5e9; /* Latar hijau muda */
    border-left: 4px solid #4caf50; /* Garis hijau */
    color: #2e7d32;
}

/* Styling untuk Multi-Tab Kalkulator Zakat */
.zakat-multi-calculator .dk-modal-box {
    max-width: 600px; /* Lebarkan modal sedikit */
}

.zakat-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}

.zakat-tab-link {
    padding: 10px 15px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
}

.zakat-tab-link:hover {
    background-color: #f0f0f0;
}

.zakat-tab-link.active {
    border-bottom-color: #2251A1; /* Warna biru primer Anda */
    font-weight: bold;
    color: #2251A1;
}

.zakat-tab-content {
    display: none;
    animation: fadeIn 0.5s;
}

.zakat-tab-content.active {
    display: block;
}

#zakat-calculator-modal form label {
    margin-top: 10px;
}

.zakat-result-wrapper {
    display: none;
}

.zakat-result {
    margin-top: 20px;
    padding: 15px;
    background-color: #e8f5e9;
    border-left: 4px solid #4caf50;
    color: #2e7d32;
}

.zakat-note {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dashed #ccc;
    font-size: 12px;
    color: #777;
    text-align: center;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================= */
/* == STYLING UNTUK SEMUA MODAL POP-UP PLUGIN == */
/* ============================================= */

/* Lapisan latar belakang gelap */
.dk-modal-overlay {
    display: none; /* WAJIB: Sembunyikan secara default */
    position: fixed; /* Tetap di posisi yang sama saat di-scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Latar belakang gelap transparan */
    z-index: 99999; /* Pastikan di atas semua elemen lain */
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto; /* Izinkan scroll jika kontennya panjang */
}

/* Kotak putih di tengah */
.dk-modal-box {
    background-color: #fff;
    padding: 30px 35px;
    border-radius: 8px;
    max-width: 600px; /* Lebar maksimum pop-up */
    width: 100%;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    text-align: left;
}

/* Tombol close (X) */
.dk-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2.5rem;
    cursor: pointer;
    color: #aaa;
    line-height: 1;
    padding: 0;
}
.dk-modal-close:hover {
    color: #333;
}

/* Styling umum untuk form di dalam modal */
.dk-modal-box form label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
}

.dk-modal-box form input,
.dk-modal-box form textarea,
.dk-modal-box form select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.dk-modal-box form button[type="submit"] {
    width: 100%;
    margin-top: 20px;
}

/* ============================================= */
/* == PERBAIKAN WARNA TAB KALKULATOR ZAKAT == */
/* ============================================= */

/* Atur warna dasar untuk tombol tab */
.zakat-tab-link {
    color: #555555; /* Warna teks abu-abu gelap agar terlihat */
    background-color: #f0f0f0; /* Latar belakang abu-abu muda */
    border-bottom: 3px solid #ddd; /* Garis bawah abu-abu */
    margin-right: 5px; /* Beri sedikit jarak antar tab */
    margin-bottom: 5px;
    border-radius: 5px 5px 0 0; /* Sedikit lengkungan di atas */
}

/* Atur warna saat kursor mouse di atas tab */
.zakat-tab-link:hover {
    background-color: #e0e0e0; /* Sedikit lebih gelap saat di-hover */
    color: #000000;
}

/* Atur warna untuk tab yang sedang aktif */
.zakat-tab-link.active {
    color: #FFFFFF; /* Warna teks putih */
    background-color: #2251A1; /* Warna latar biru primer Anda */
    border-bottom-color: #FF0000; /* Garis bawah kuning sebagai aksen */
}

.tunaikan-wrapper {
    margin-top: 20px;
    text-align: center;
}
.button.button-tunaikan {
    background-color: #28a745 !important; /* Warna hijau sukses */
    color: #fff !important;
    font-weight: bold;
    padding: 12px 25px;
    display: inline-block;
    width: auto;
    border-radius: 5px;
    text-decoration: none;
}
.button.button-tunaikan:hover {
    background-color: #218838 !important;
}