/* ===================================
       ZATCA PORTAL - UNIFIED THEME CSS
       =================================== */
    
    /* ---------- CSS Variables ---------- */
    :root {
        /* Primary Colors */
        --bs-primary: #6366f1;         /* Indigo 500 - More vibrant */
        --bs-primary-rgb: 99, 102, 241;
        --bs-primary-dark: #4f46e5;    /* Indigo 600 */
        --bs-primary-bg-subtle: rgba(99, 102, 241, 0.05);
        
        /* Status Colors */
        --bs-success: #22c55e;         /* Green 500 - More vivid */
        --bs-success-rgb: 34, 197, 94;
        --bs-warning: #eab308;         /* Yellow 500 */
        --bs-warning-rgb: 234, 179, 8;
        --bs-danger: #ef4444;          /* Red 500 */
        --bs-danger-rgb: 239, 68, 68;
        --bs-info: #3b82f6;           /* Blue 500 */
        --bs-info-rgb: 59, 130, 246;
        
        /* Light Theme Colors */
        --bs-body-bg: #f8fafc;         /* Slate 50 */
        --bs-body-color: #1e293b;      /* Slate 800 - Darker for better contrast */
        --card-bg: #ffffff;
        --input-bg: #ffffff;
        --border-color: #e2e8f0;       /* Slate 200 */
        --text-muted: #64748b;         /* Slate 500 */
        --text-secondary: #475569;     /* Slate 600 */
        
        /* Gradients */
        --header-bg: linear-gradient(135deg, #6366f1, #818cf8);  /* More vibrant */
        --success-gradient: linear-gradient(135deg, #22c55e, #34d399);
        --danger-gradient: linear-gradient(135deg, #ef4444, #f87171);
        --warning-gradient: linear-gradient(135deg, #eab308, #fbbf24);
        
        /* Typography */
        --base-font-family: 'Inter', system-ui, -apple-system, sans-serif;
        --mono-font-family: 'JetBrains Mono', 'Fira Code', monospace;
        --base-font-size: 14px;
        --small-font-size: 0.875rem;
        --xs-font-size: 0.75rem;
    }
    
    /* ---------- Dark Theme ---------- */
    [data-bs-theme="dark"] {
        /* Dark Theme Colors - More contrast & vibrancy */
        --bs-body-bg: #0f172a;          /* Slate 900 */
        --bs-body-color: #f1f5f9;       /* Slate 100 */
        --card-bg: #1e293b;             /* Slate 800 */
        --input-bg: #1e293b;            /* Slate 800 */
        --border-color: #334155;        /* Slate 700 */
        --text-muted: #94a3b8;          /* Slate 400 - Brighter */
        --text-secondary: #cbd5e1;      /* Slate 300 - More visible */
        
        /* Dark Theme Adjustments */
        --bs-primary-bg-subtle: rgba(99, 102, 241, 0.1);
        --header-bg: linear-gradient(135deg, #4f46e5, #6366f1);
        
        /* Shadow Adjustments */
        --shadow-color: rgba(0, 0, 0, 0.3);
    }
    
    /* ---------- Base Styles ---------- */
    * {
        box-sizing: border-box;
    }
    
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: var(--base-font-family);
        font-size: var(--base-font-size);
        line-height: 1.5;
        color: var(--bs-body-color);
        background-color: var(--bs-body-bg);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* ---------- Base Layout ---------- */
    .main-wrapper {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    .content-container {
        flex: 1 0 auto;  /* Changed to flex-grow: 1, flex-shrink: 0 */
        padding: 1.5rem;
        width: 100%;
        margin: 0 auto;
    }
    
    /* Form container width control */
    .form-container {
        max-width: var(--form-max-width);
        margin: 0 auto;
    }
    
    /* ---------- Header ---------- */
    .header-gradient {
        background: linear-gradient(135deg, #6366f1, #818cf8);
        color: white;
        padding: 1.25rem 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .header-icon {
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    
    .header-gradient h1 {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
    }
    
    .header-gradient .subtitle {
        font-size: var(--small-font-size);
        opacity: 0.9;
    }
    
    /* ---------- Cards ---------- */
    .card {
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        margin-bottom: 1.5rem;
    }
    
    .card-header {
        background-color: rgba(var(--bs-primary-rgb), 0.05);
        border-bottom: 1px solid var(--border-color);
        padding: 1rem 1.25rem;
        font-weight: 600;
    }
    
    .card-body {
        padding: 1.25rem;
    }
    
    .card-footer {
        background-color: rgba(var(--bs-primary-rgb), 0.03);
        border-top: 1px solid var(--border-color);
        padding: 1rem 1.25rem;
    }
    
    /* ---------- Forms ---------- */
    .form-label {
        font-size: var(--xs-font-size);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        margin-bottom: 0.375rem;
    }
    
    .form-control,
    .form-select {
        background-color: var(--input-bg);
        border: 1px solid var(--border-color);
        color: var(--bs-body-color);
        font-size: var(--small-font-size);
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        transition: all 0.2s ease;
    }
    
    .form-control:focus,
    .form-select:focus {
        background-color: var(--input-bg);
        border-color: var(--bs-primary);
        color: var(--bs-body-color);
        box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
    }
    
    .form-control-sm,
    .form-select-sm {
        padding: 0.375rem 0.625rem;
        font-size: var(--xs-font-size);
    }
    
    /* ---------- Read-only and Disabled Forms ---------- */
    .form-control:read-only,
    .form-control:disabled,
    .form-control[readonly] {
        background-color: var(--bs-tertiary-bg) !important;
        opacity: 0.8;
        cursor: default;
    }
    
    /* Dark theme adjustments for readonly controls */
[data-bs-theme="dark"] .form-control:read-only,
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
    color: var(--text-secondary) !important;
    background-color: rgba(var(--bs-tertiary-bg), 0.03) !important;
    border-color: var(--border-color);
}
    
    /* Textarea code specific readonly state */
    [data-bs-theme="dark"] .textarea-code[readonly] {
        color: var(--text-secondary) !important;
        opacity: 0.9;
    }
    
    /* ---------- Buttons ---------- */
    .btn {
        font-size: var(--small-font-size);
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        transition: all 0.2s ease;
    }
    
    .btn-sm {
        font-size: var(--xs-font-size);
        padding: 0.375rem 0.75rem;
    }
    
    .btn-primary {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
        color: white;
    }
    
    .btn-primary:hover {
        background-color: var(--bs-primary-dark);
        border-color: var(--bs-primary-dark);
    }
    
    .btn-outline-primary {
        color: var(--bs-primary);
        border-color: var(--bs-primary);
    }
    
    .btn-outline-primary:hover {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

.btn-paypal {
    text-decoration: none; /* hilangkan garis bawah */
    font-size: 24px; /* perbesar emoji */
    line-height: 1; /* rapikan posisi */
}
   
    
    /* Textarea specific */
    textarea.form-control {
        font-family: var(--mono-font-family);
        font-size: var(--xs-font-size);
        line-height: 1.4;
        resize: vertical;
    }
    
    .textarea-code {
        min-height: 150px;
        background-color: var(--input-bg);
        padding: 1rem;
        font-family: var(--mono-font-family);
        font-size: var(--xs-font-size);
        line-height: 1.4;
        color: var(--bs-body-color);
        border: 1px solid var(--border-color);
    }
    
    /* ---------- Tabs Styling ---------- */
    .nav-pills .nav-link {
        padding: 0.25rem 0.75rem;  /* Smaller like btn-sm */
        font-size: 0.875rem;
        color: var(--text-secondary);
        border-radius: 0.375rem;
        transition: all 0.2s ease;
    }
    
    .nav-pills .nav-link:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.1);
    }
    
    .nav-pills .nav-link.active {
        background-color: var(--bs-primary);
        color: white;
    }
    
    /* ---------- Tables ---------- */
    .table {
        font-size: var(--small-font-size);
    }
    
    .table th {
        font-weight: 600;
        text-transform: uppercase;
        font-size: var(--xs-font-size);
        letter-spacing: 0.5px;
        color: var(--text-muted);
    }
    
    /* ---------- Modals ---------- */
    .modal {
        display: none;
    }
    
    .modal.show {
        display: block;
    }
    
    .modal-dialog-centered {
        display: flex !important;
        align-items: center;
        min-height: calc(100% - 3.5rem);
        margin: 1.75rem auto;
        width: 400px;
    }
    
    .modal-content {
        position: relative;
        width: 100%;
        margin: 0 auto;
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    
    .modal-header.header-gradient {
        padding: 0.75rem 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        background: linear-gradient(135deg, var(--bs-primary), #818cf8);
    }
    
    .modal-header .btn-close {
        padding: 0.5rem;
        margin: -0.5rem -0.5rem -0.5rem auto;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 0.375rem;
        opacity: 0.8;
        transition: all 0.2s ease;
        font-size: 0.78rem;
    }
    
    .modal-header .btn-close:hover {
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.3);
    }
    
    /* ---------- QR Code Styling ---------- */
    .qr-container {
        background-color: white;
        padding: 1rem;
        border-radius: 1rem;
        display: inline-block;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        text-align: center;
    }
    
    .qr-container img {
        width: 200px;
        height: 200px;
        display: block;
        margin: 0 auto;
    }
    
    /* Copy chip styling for mobile-friendly displays */
    .copy-chip {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem;
        background: var(--bs-tertiary-bg);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-bottom: 0.5rem;
    }
    
    .copy-chip:hover {
        background: var(--bs-primary-bg-subtle);
        border-color: var(--bs-primary);
    }
    
    .copy-chip .value {
        flex: 1;
        font-family: var(--mono-font-family);
        font-size: var(--small-font-size);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .copy-chip i {
        font-size: 0.875rem;
        opacity: 0.5;
    }
    
    .copy-chip:hover i {
        opacity: 1;
    }
    
    /* Copy feedback animation */
    @keyframes copyFeedback {
        50% { 
            background-color: rgba(16, 185, 129, 0.1);
            border-color: var(--bs-success);
        }
    }
    
    .copy-feedback {
        animation: copyFeedback 0.5s ease;
    }
    
    /* Modal QR specific updates */
    .qr-modal-container {
        text-align: center;
        margin-bottom: 1.5rem;
    }
    
    #qrcode-modal {
        background-color: white;
        padding: 1.25rem;
        border-radius: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        margin: 0 auto 1rem;
        width: 220px;
        height: 220px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #qrcode-modal img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    
    /* Success gradient for cards */
    .success-gradient {
        background: linear-gradient(135deg, var(--bs-success), #20c997);
        color: white;
        padding: 1rem;
    }
    
    /* Info section in modals */
    .info-section {
        padding: 0.5rem;
    }
    
    .info-section .text-muted {
        font-size: var(--xs-font-size);
        font-weight: 500;
        margin-bottom: 0.25rem;
    }
    
    /* ---------- Textarea Code ---------- */
    .textarea-code {
        font-family: var(--mono-font-family);
        font-size: var(--xs-font-size);
        line-height: 1.4;
        min-height: 200px !important;
        padding: 1rem;
        background-color: var(--input-bg);
        color: var(--bs-body-color);
        border: 1px solid var(--border-color);
    }
    
    /* ---------- Footer ---------- */
    .footer-fixed {
        flex-shrink: 0;     /* Prevent footer from shrinking */
        width: 100%;
        padding: 1rem 0;
        background-color: var(--bs-body-bg);
        border-top: 1px solid var(--border-color);
        margin-top: auto;   /* Push footer to bottom */
    }
    
    /* ---------- Loading Overlay ---------- */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 19999;
}
    
    .loading-overlay.show {
        display: flex !important;
    }
    
    .loading-overlay .card {
        min-width: 250px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }
    
    /* ---------- Utilities ---------- */
    .text-muted {
        color: var(--text-muted) !important;
    }

    .bg-body {
        --bs-bg-opacity: 1;
        background-color: var(--bs-card-color) !important;
    }
        
    .bg-body-tertiary {
        background-color: rgba(var(--bs-primary-rgb), 0.03) !important;
    }
    
    .font-monospace {
        font-family: var(--mono-font-family) !important;
    }

 
    /* ---------- SweetAlert2 Custom Styling ---------- */
    /* Base popup styling */
    .swal2-popup {
        font-family: var(--base-font-family) !important;
        font-size: var(--base-font-size) !important;
        background-color: var(--card-bg) !important;
        color: var(--bs-body-color) !important;
        border-radius: 0.75rem !important;
        box-shadow: 0 0 0 1px var(--border-color), 
                    0 10px 30px rgba(0, 0, 0, 0.3) !important;
        padding: 1.2em !important;
    }
    
    /* Title & Message */
    .swal2-title {
        color: var(--bs-body-color) !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.75em !important;
    }
    
    .swal2-html-container {
        color: var(--bs-body-color) !important;
        font-size: var(--small-font-size) !important;
        line-height: 1.5 !important;
        margin: 0.5em 0 !important;
    }
    
    /* Status Colors */
    .swal2-popup[class*="swal2-icon-success"] .swal2-title,
    .swal2-title-custom.success { color: var(--bs-success) !important; }
    
    .swal2-popup[class*="swal2-icon-error"] .swal2-title,
    .swal2-title-custom.error { color: var(--bs-danger) !important; }
    
    .swal2-popup[class*="swal2-icon-warning"] .swal2-title,
    .swal2-title-custom.warning { color: var(--bs-warning) !important; }
    
    .swal2-popup[class*="swal2-icon-info"] .swal2-title,
    .swal2-title-custom.info { color: var(--bs-info) !important; }
    
    /* Buttons */
    .swal2-actions { gap: 0.5rem; }
    
    .swal2-styled {
        font-size: var(--small-font-size) !important;
        font-weight: 500 !important;
        padding: 0.5rem 1rem !important;
        border-radius: 0.375rem !important;
        min-width: 100px !important;
    }
    
    .swal2-confirm {
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
        color: white !important;
    }
    
    .swal2-confirm:hover {
        background-color: var(--bs-primary-dark) !important;
        border-color: var(--bs-primary-dark) !important;
    }
    
    /* Toast Styling */
    .swal2-toast {
        padding: 1rem !important;
        margin: 1rem !important;
        border-radius: 0.5rem !important;
    }
    
    .swal2-toast .swal2-title {
        font-size: var(--small-font-size) !important;
        margin: 0 !important;
    }
    
    /* Toast Status Indicators */
    .swal2-toast.swal2-status-success { border-left: 4px solid var(--bs-success) !important; }
    .swal2-toast.swal2-status-error { border-left: 4px solid var(--bs-danger) !important; }
    .swal2-toast.swal2-status-warning { border-left: 4px solid var(--bs-warning) !important; }
    .swal2-toast.swal2-status-info { border-left: 4px solid var(--bs-info) !important; }
    
    /* Dark Theme Adjustments */
    [data-bs-theme="dark"] .swal2-popup {
        border: 1px solid var(--border-color) !important;
    }
    
    [data-bs-theme="dark"] .swal2-html-container {
        color: rgba(255, 255, 255, 0.9) !important;
    }