/* --- THEME & COLOR VARIABLES --- */
        :root {
            --color-bg-primary: #121212;
            --color-bg-secondary: #1E1E1E;
            --color-bg-secondary-rgb: 30, 30, 30;
            --color-bg-input: #2A2A2A;
            --color-border: #3A3A3A;
            --color-border-rgb: 58, 58, 58;
            --color-accent: #E1306C;
            --color-accent-rgb: 225, 48, 108;
            --color-text-primary: #F5F5F5;
            --color-text-secondary: #A8A8A8;
            --color-success: #28a745;
            --color-error: #f87171;
            --color-warning: #facc15;
            --color-danger: #ff4d4f;
            --color-accent-start: #8A2BE2; 
            --color-accent-end: #FF1493;
        }

        /* --- 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: 'Poppins', sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
            background: #121212 radial-gradient(circle at 100% 100%, rgba(225, 48, 108, 0.15), rgba(225, 48, 108, 0) 40%),
                        radial-gradient(circle at 0% 0%, rgba(138, 35, 135, 0.15), rgba(138, 35, 135, 0) 40%);
        }
        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(18, 18, 18, 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 --- */
        .ldr-loader { display: flex; position: relative; justify-items: center; align-items: center; gap: 1rem; height: 55px; width: 200px; overflow: hidden; margin-top: 2rem; }
        .ldr-container { width: 100%; display: flex; flex-direction: column; height: 200px; position: relative; align-items: center; }
        .ldr-carousel { display: flex; gap: 1rem; flex-direction: column; position: absolute; width: 100%; transform-origin: center; animation-delay: 2s; }
        .ldr-loader .ldr-container:nth-child(3) { justify-content: flex-start; justify-items: flex-start; animation: scroll-up 4s infinite ease-in-out; animation-delay: 3s; }
        .ldr-loader .ldr-container:nth-child(2) { justify-content: flex-end; justify-items: flex-end; animation: scroll-down 4s infinite ease-in-out; animation-delay: 3s; }
        .ldr-loader .ldr-container:nth-child(1) { justify-content: flex-end; justify-items: flex-end; animation: scroll-down 3s infinite ease-in-out; animation-delay: 3s; }
        .ldr-love { background: #E1306C; display: flex; width: 30px; height: 30px; position: relative; align-items: center; justify-content: center; left: 8px; margin: 0.8rem 4px; transform: rotate(45deg); animation-delay: 2s; }
        .ldr-love::before, .ldr-love::after { content: ''; position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #E1306C; }
        .ldr-love::before { left: -16px; } .ldr-love::after { top: -16px; }
        .ldr-death { display: flex; width: 100%; height: 55px; position: relative; align-items: center; justify-content: center; animation: rotation 3s infinite ease-in-out; animation-delay: 1s; }
        .ldr-death:after, .ldr-death:before { content: ''; height: 60px; position: absolute; border-left: 12px solid #C13584; border-radius: 8px; }
        .ldr-death:after { transform: rotate(45deg); top: -2px; } .ldr-death:before { transform: rotate(-45deg); }
        .ldr-robots { display: flex; width: 100%; height: 55px; justify-content: space-between; background-color: #F56040; border-radius: 0 8px 8px; padding: 8px; animation-delay: 5s; }
        .ldr-robots::after, .ldr-robots::before { content: ''; width: 12px; height: 12px; background-color: #ffffff; border-radius: 50%; animation-delay: 2s; animation: blink 0.5s 2 forwards; }
        @keyframes scroll-up { 0% { transform: translateY(0); filter: blur(0); } 30% { transform: translateY(-150%); filter: blur(10px); } 60% { transform: translateY(0); filter: blur(0px); } }
        @keyframes scroll-down { 0% { transform: translateY(0); filter: blur(0); } 30% { transform: translateY(150%); filter: blur(10px); } 60% { transform: translateY(0); filter: blur(0px); } }
        @keyframes rotation { 20%, 100% { transform: rotate(180deg); } }
        @keyframes blink { 0% { height: 0; } 20% { height: 12px; } 100% { height: 12px; } }

        /* --- 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;
            }
        }