/* =========================================================
   Dark Mode - Halaman Pelanggan
   ========================================================= */

/* ===== Tombol toggle (bulan/matahari) ===== */
.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    margin-left: 16px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.32);
    transform: translateY(-2px);
}

/* Ikon: bulan di mode terang, matahari di mode gelap */
.dark-mode-toggle .icon-sun,
.dark-mode-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .dark-mode-toggle .icon-sun,
[data-theme="dark"] .dark-mode-toggle .theme-icon-sun { display: inline-block; }
[data-theme="dark"] .dark-mode-toggle .icon-moon,
[data-theme="dark"] .dark-mode-toggle .theme-icon-moon { display: none; }

/* ===== Variabel Mode Gelap ===== */
[data-theme="dark"] {
    --background: #0e1420;
    --card-bg: #182030;
    --text-color: #e6eaf2;
    --text-muted: #94a3b8;
    --light: #182030;
    --dark: #e6eaf2;
    --card-shadow: 0 10px 20px rgba(0, 0, 0, 0.35), 0 6px 6px rgba(0, 0, 0, 0.25);
    --card-hover-shadow: 0 14px 28px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] body {
    background-color: var(--background);
    color: var(--text-color);
}

[data-theme="dark"] .payment-card,
[data-theme="dark"] .status-card,
[data-theme="dark"] .package-card,
[data-theme="dark"] .how-it-works {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .category-badge {
    background-color: rgba(65, 111, 255, 0.16);
}

[data-theme="dark"] .footer {
    background-color: var(--card-bg);
    border-top-color: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

[data-theme="dark"] .detail-item {
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .detail-item .label {
    color: var(--text-muted);
}

[data-theme="dark"] .copy-field {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .copy-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}
[data-theme="dark"] .copy-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text-color);
}

/* Form controls */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #141c2a;
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-color);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #141c2a;
    border-color: var(--primary);
    color: var(--text-color);
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}
[data-theme="dark"] .input-group-text {
    background-color: #1d2739;
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
}
[data-theme="dark"] .form-text {
    color: var(--text-muted);
}

/* Teks muted bootstrap */
[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

/* QRIS tetap putih agar bisa discan */
[data-theme="dark"] .qr-container {
    background-color: #ffffff;
}

/* Menu mobile */
[data-theme="dark"] .mobile-menu {
    background-color: var(--card-bg);
}
[data-theme="dark"] .mobile-menu-header {
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .mobile-menu-links a {
    color: var(--text-color);
}
[data-theme="dark"] .mobile-menu-links a:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

/* Alert dengan warna disesuaikan */
[data-theme="dark"] .alert-info {
    background-color: rgba(52, 152, 219, 0.14);
    color: #8ec9f0;
}
[data-theme="dark"] .alert-warning {
    background-color: rgba(241, 196, 15, 0.12);
    color: #ecc94b;
}
[data-theme="dark"] .alert-success {
    background-color: rgba(46, 204, 113, 0.12);
    color: #58d68d;
}
[data-theme="dark"] .alert-danger {
    background-color: rgba(231, 76, 60, 0.12);
    color: #ff8a80;
}
[data-theme="dark"] .btn-outline-secondary {
    border-color: var(--primary);
    color: var(--primary);
}
[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--primary);
    color: #fff;
}

/* Halaman maintenance */
[data-theme="dark"] body.maintenance-page {
    background: #0e1420;
}
[data-theme="dark"] .maintenance-card {
    background: #182030;
}
[data-theme="dark"] .maintenance-sub {
    color: #94a3b8;
}
[data-theme="dark"] .maintenance-footer {
    color: #94a3b8;
}
[data-theme="dark"] .maintenance-badge {
    background: rgba(241, 196, 15, 0.12);
    border-color: rgba(241, 196, 15, 0.25);
    color: #ecc94b;
}