/* Import Font Profesional dari Google */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* --- Variabel Warna Kustom (Disimplifikasi dan Disempurnakan) --- */
:root {
    --bs-primary: #0d6efd; /* Biru Bootstrap standar untuk kesan bersih */
    --bs-secondary: #6c757d;
    --bs-success: #198754; /* Hijau sukses standar Bootstrap */
    --bs-info: #0dcaf0; /* Info/Cyan standar Bootstrap */
    --bs-warning: #ffc107; /* Kuning peringatan standar Bootstrap */
    --bs-danger: #dc3545; /* Merah bahaya standar Bootstrap */

    --bs-dark: #212529; /* Latar belakang paling gelap */
    --bs-dark-subtle: #2c3034; /* Sedikit lebih terang dari dark */
    --bs-dark-emphasis: #343a40; /* Untuk header kartu dan elemen lainnya */
    
    --bs-white: #f8f9fa; /* Putih terang */
    --bs-light: #ced4da; /* Abu-abu terang */

    /* Warna Aksesori / Highlight */
    --custom-accent-blue: #0dcaf0; /* Cyan lembut untuk aksen */
    --custom-accent-border: rgba(206, 212, 218, 0.2); /* Border lebih lembut */
    --custom-accent-glow: rgba(13, 202, 240, 0.1); /* Efek glow yang sangat halus */
    --custom-success-amount: #198754; /* Hijau sukses standar Bootstrap */

    /* Variabel khusus untuk modal QRIS gelap */
    --qris-modal-bg: var(--bs-dark-subtle); /* Latar belakang modal QRIS akan mengikuti warna kartu */
    --qris-modal-border: var(--bs-dark-emphasis); /* Border modal QRIS */
    --qris-modal-text: var(--bs-light); /* Teks di dalam modal QRIS */
    --qris-modal-title-color: var(--bs-white); /* Warna judul modal QRIS */
    --qris-modal-close-icon-filter: invert(1); /* Untuk membuat ikon close putih */
    --qris-image-container-bg: var(--bs-dark-subtle); /* Changed to dark subtle */
    --qris-image-container-border: var(--bs-dark-emphasis); /* Border container gambar QRIS */
}

/* --- Style Dasar --- */
body {
    background-color: var(--bs-dark); /* Latar belakang body utama */
    font-family: 'Poppins', sans-serif;
    color: var(--bs-white);
}

/* Navbar & Footer */
.navbar, .footer {
    background-color: var(--bs-dark) !important; /* Warna gelap solid */
    backdrop-filter: none; /* Hapus efek blur */
    border-color: rgba(255, 255, 255, 0.05) !important; /* Border sangat tipis */
}
.navbar-brand { color: var(--bs-white) !important; }

/* Tombol Umum */
.btn-outline-primary {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    transition: all 0.2s ease;
}
.btn-outline-primary:hover {
    background-color: var(--bs-primary);
    color: var(--bs-white);
}
.btn-primary {
    background-color: var(--bs-primary);
    border: none;
    font-weight: 500;
    padding: 0.7rem 1.5rem;
    transition: all 0.2s ease;
    box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--bs-primary) !important;
    filter: brightness(1.05);
    transform: none;
    box-shadow: none;
}
.btn-success {
    background-color: var(--custom-success-amount);
    border-color: var(--custom-success-amount);
}
.btn-success:hover {
    background-color: #157347 !important;
    border-color: #146c43 !important;
}
.btn:disabled {
    background: var(--bs-dark-emphasis) !important;
    opacity: 0.7;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed;
}


/* --- Kartu Umum Aplikasi --- */
.card {
    background: var(--bs-dark-subtle); /* Gunakan warna subtle untuk latar kartu */
    border-radius: 0.5rem;
    border: 1px solid var(--custom-accent-border);
    box-shadow: none;
}
.card-header {
    background-color: var(--bs-dark-emphasis) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--bs-white); /* Pastikan teks header putih */
}
.card-header h5 {
    margin-bottom: 0;
}

/* --- Style Spesifik untuk Opsi Top-up (Kartu Pilih Paket) --- */
.topup-option-card {
    border: 1px solid var(--custom-accent-border);
    transition: all 0.15s ease-in-out;
    box-shadow: none;
    background-color: var(--bs-dark-subtle);
    border-radius: 0.5rem;
    cursor: pointer;
    overflow: hidden;
}

.topup-option-card:hover {
    transform: none;
    box-shadow: 0 0 0 2px var(--custom-accent-blue);
    border-color: var(--custom-accent-blue);
}

.topup-option-card .card-title {
    color: var(--custom-accent-blue);
    font-weight: 600;
    font-size: 1.6rem;
}
.topup-option-card .card-text {
    color: var(--bs-light);
    font-size: 0.9rem;
}
.topup-option-card h3 {
    color: var(--custom-success-amount);
    font-weight: 700;
    font-size: 2.2rem;
}

/* Style untuk tombol "Pilih & Bayar" di dalam kartu */
.topup-option-card .btn-primary {
    border-radius: 0.25rem;
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
}
.topup-option-card .btn-primary:hover {
    filter: brightness(1.1);
}

/* --- Style KHUSUS untuk Modal QRIS --- */
#qris-modal .modal-content {
    background-color: var(--qris-modal-bg) !important; /* Ini yang paling penting, pakai !important */
    border: 1px solid var(--qris-modal-border);
    border-radius: 0.75rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
#qris-modal .modal-header {
    border-bottom: 1px solid var(--qris-modal-border) !important;
    padding: 1rem 1.5rem;
}
#qris-modal .modal-title {
    color: var(--qris-modal-title-color);
    font-weight: 600;
    font-size: 1.5rem;
}
#qris-modal .btn-close-white {
    filter: var(--qris-modal-close-icon-filter);
    color: var(--qris-modal-title-color) !important;
}

#qris-modal .modal-body {
    padding: 1.5rem;
}
#qris-modal .modal-body p {
    color: var(--qris-modal-text);
    font-size: 0.95rem;
}

#qris-modal #qris-image-container {
    background-color: var(--qris-image-container-bg) !important;
    padding: 1rem !important;
    border: 1px solid var(--qris-image-container-border);
    border-radius: 0.5rem;
    box-shadow: none;
    display: inline-block;
    max-width: 90%;
}
#qris-modal #qris-image-container img {
    display: block;
    max-width: 100%;
    height: auto;
}

#qris-modal h4.text-success {
    color: var(--custom-accent-blue) !important;
    font-size: 2rem;
    font-weight: 700;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
}
#qris-modal p.text-warning {
    color: var(--bs-warning) !important;
    font-size: 0.85rem;
}
#qris-modal p.text-white-50 {
    color: var(--qris-modal-text) !important;
    font-size: 0.85rem;
}