/* --- THEME & COLOR VARIABLES --- */
        :root {
            --color-bg-primary: #0F0F0F;
            --color-bg-secondary: #212121;
            --color-bg-secondary-rgb: 33, 33, 33;
            --color-bg-input: #121212;
            --color-border: #3D3D3D;
            --color-border-rgb: 61, 61, 61;
            --color-accent: #FF0000;
            --color-accent-rgb: 255, 0, 0;
            --color-text-primary: #F1F1F1;
            --color-text-secondary: #AAAAAA;
            --color-success: #28a745;
            --color-error: #f87171;
            --color-warning: #facc15;
            --color-danger: #ff4d4f;
            --color-accent-start: #FF0000; 
            --color-accent-end: #CC0000;
        }

        /* --- BASE & LAYOUT STYLES --- */
        html, body {
            height: 100%;
            overflow: 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;
        }
        
        /* --- MODAL STYLES --- */
        .mfp-bg {
            background: rgba(15, 15, 15, 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: #272727;
            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-outline-container::before {
            content: "";
            position: absolute;
            inset: -80px;
            z-index: -2;
            background: conic-gradient(from 45deg, transparent 75%, var(--color-accent-start), transparent 100%);
            animation: spin 4s ease-in-out infinite;
        }
        @keyframes spin { 100% { transform: rotate(360deg); } }
        .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; } }
        
        /* --- LOADER STYLES --- */
        .simple-loader {
            width: 48px;
            height: 48px;
            border: 5px solid var(--color-text-primary);
            border-bottom-color: var(--color-accent);
            border-radius: 50%;
            display: inline-block;
            box-sizing: border-box;
            animation: rotation 1s linear infinite;
            margin: 2rem 0;
        }
        @keyframes rotation {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* --- 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: #facc15; /* gold color for selected premium */
            box-shadow: 0 0 20px rgba(250, 204, 21, 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: var(--color-accent);
            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; }
        }