/* --- THEME & COLOR VARIABLES --- */
        :root {
            --color-bg-primary: #ffffff;
            --color-bg-secondary: #f3f4f6;
            --color-bg-secondary-rgb: 243, 244, 246;
            --color-bg-input: #ffffff;
            --color-border: #d1d5db;
            --color-border-rgb: 209, 213, 219;
            --color-accent: #f59e0b; /* Amber */
            --color-accent-rgb: 245, 158, 11;
            --color-text-primary: #1f2937;
            --color-text-secondary: #6b7280;
            --color-success: #16a34a;
            --color-error: #ef4444;
            --color-warning: #f59e0b;
            --color-danger: #dc2626;
            --color-accent-start: #f7971e; /* Gold Gradient */
            --color-accent-end: #ffd200;
        }

        /* --- BASE & LAYOUT STYLES --- */
        html, body {
            height: 100%;
            overflow-y: auto; 
            overflow-x: hidden;
        }
        body {
            display: flex;
            flex-direction: column;
            background-color: var(--color-bg-primary);
            color: var(--color-text-primary);
            font-family: 'Roboto', sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        main {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        header {
            background-color: rgba(var(--color-bg-secondary-rgb), 0.8);
            transition: background-color 0.3s ease;
        }
        h1, h2, h3 {
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
        }
        
        /* --- MODAL STYLES --- */
        .mfp-bg {
            background: rgba(17, 24, 39, 0.8);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .mfp-zoom-in .mfp-content {
            opacity: 0;
            transform: scale(0.95);
            transition: all 0.45s ease-in-out;
        }
        .mfp-zoom-in.mfp-ready .mfp-content {
            opacity: 1;
            transform: scale(1);
        }
        .mfp-zoom-in.mfp-removing .mfp-content {
            opacity: 0;
            transform: scale(0.95);
        }
        #modal-container {
            background: transparent;
            border: none;
            box-shadow: none;
            transition: opacity 0.3s ease-in-out, max-width 0.3s ease;
        }
        #modal-container.is-hiding { opacity: 0; }
        
        /* --- FINAL VERIFICATION MODAL STYLES --- */
        .modal-outline-container {
            --login-box-color: #1f2937;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            background: var(--login-box-color);
            border-radius: 24px;
            width: 100%;
            max-width: 420px;
            margin: 0 auto;
            z-index: 8;
            transition: opacity 0.45s ease-in-out;
        }
        .modal-inner-box {
            background: var(--login-box-color);
            border-radius: 24px;
            padding: 28px;
            width: calc(100% - 2px);
            height: calc(100% - 2px);
            position: relative;
            z-index: 10;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            box-shadow: inset 0 20px 40px -8px rgba(255, 255, 255, 0.08);
        }
        @keyframes icon-pulse-animation {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        .icon-pulse {
            animation: icon-pulse-animation 2s infinite cubic-bezier(0.36, 0.07, 0.19, 0.97);
        }
        #countdown-timer.urgent { color: var(--color-danger); animation: pulse-urgent 1s infinite; }
        @keyframes pulse-urgent { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
        
        /* --- PACKAGE CARD STYLES --- */
        .package-item {
            background-color: var(--color-bg-input);
            transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }
        .package-item:hover {
            border-color: var(--color-accent);
            transform: translateY(-2px);
        }
        .package-item.selected {
             border-color: var(--color-accent);
             box-shadow: 0 0 15px rgba(var(--color-accent-rgb), 0.4);
             transform: scale(1.02);
        }
        .package-item.selected.premium {
            border-color: #ef4444; /* Red for selected premium jackpot */
            box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
        }
        
        /* --- CHECKMARK ANIMATION --- */
        .checkmark {
            opacity: 0;
            transform: scale(0.5);
            transition: all .3s ease-in-out;
            color: var(--color-success);
        }
        .checklist-item.completed .checkmark {
            opacity: 1;
            transform: scale(1);
        }
        .checklist-item.completed i { color: var(--color-success); }


        /* --- NEW LOADER/SPINNER STYLES --- */
        .loader {
            display: block;
            --height-of-loader: 6px;
            width: 100%;
            height: var(--height-of-loader);
            border-radius: 30px;
            background-color: var(--color-bg-input);
            position: relative;
            border: 1px solid var(--color-border);
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        .loader::before {
            content: "";
            position: absolute;
            background: linear-gradient(90deg, var(--color-accent-start), var(--color-accent-end));
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            border-radius: 30px;
            animation: moving 2s ease-in-out infinite;
        }
        @keyframes moving {
            50% {
                width: 100%;
            }
            100% {
                width: 0;
                right: 0;
                left: unset;
            }
        }