/* Extracted from inline styles - index.html */

body:not(.loaded) { overflow: hidden; }
        body:not(.loaded) > *:not(#loadingScreen) { visibility: hidden; }
        #loadingScreen { opacity: 1; transition: opacity 0.5s ease; }
        body.loaded #loadingScreen { opacity: 0; pointer-events: none; }

/* ================================ */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

        :root {
            --font-size-adjust: 0px;
            --logo-scale: 1;
        }

        .light-mode {
            --divide-color: #c2c7d1;
            --bg-primary: #F8FBFB;
            --bg-secondary: #ffffff;
            --bg-tertiary: #F3F4F6;
            --text-primary: #111827;
            --text-secondary: #6b7280;
            --text-tertiary: #6B7280;
            --border-color: #e5e7eb;
            --icon-color: #6B7280;
            --accent-color: #14d46b;
            --accent-color-70: #14d46bb3;
        }

        .dark-mode {
            --divide-color: #4B5563;
            --bg-overlay: #131618;
            --bg-primary: #212529;
            --bg-secondary: #2B2E35;
            --bg-tertiary: #3a3e49;
            --text-primary: #ffffff;
            --text-secondary: #9ca3af;
            --text-tertiary: #9CA3AF;
            --border-color: #32363D;
            --icon-color: #9CA3AF;
            --accent-color: #14d46b;
            --accent-color-70: #14d46bb3;
        }


        body {
            font-family: "Lexend", sans-serif !important;
        }

        @media (max-width: 639px) {
            html {
                font-size: calc(15.5px + var(--font-size-adjust, 0px)) !important;
            }

            .light-mode {
                --header-bg: #ffffff;
            }

            .dark-mode {
                --header-bg: #2B2E35;
            }
        }

        @media (min-width: 768px) {
            html {
                font-size: calc(14.5px + var(--font-size-adjust, 0px)) !important;
            }
        }

        .theme-accent-bg {
            background-color: var(--accent-color);
            transition: background-color 0.3s ease;
        }

        .theme-accent-text {
            color: var(--accent-color);
            transition: color 0.3s ease;
        }

        .theme-accent-border {
            border-color: var(--accent-color-70);
            transition: border-color 0.3s ease;
        }

        .theme-divide {
            border-color: var(--divide-color);
            transition: border-color 0.3s ease;
        }

        .theme-header {
            background-color: var(--header-bg);
            transition: background-color 0.3s ease;
        }

        .theme-bg-primary {
            background-color: var(--bg-primary);
            transition: background-color 0.3s ease;
        }

        .theme-bg-secondary {
            background-color: var(--bg-secondary);
            transition: background-color 0.3s ease;
        }

        .theme-bg-tertiary {
            background-color: var(--bg-tertiary);
            transition: background-color 0.3s ease;
        }

        .theme-text-primary {
            color: var(--text-primary);
            transition: color 0.3s ease;
        }

        .theme-text-tertiary {
            color: var(--text-tertiary);
            transition: color 0.3s ease;
        }


        .icon-color {
            color: var(--icon-color);
            transition: color 0.3s ease;
        }

        .theme-text-secondary {
            color: var(--text-secondary);
            transition: color 0.3s ease;
        }

        .theme-border {
            border-color: var(--border-color);
            transition: border-color 0.3s ease;
        }

        #themeToggle {
            transition: all 0.3s ease;
        }

        #sunIcon,
        #moonIcon {
            transition: opacity 0.3s ease;
        }

        .light-mode-logo,
        .dark-mode-logo {
            width: calc(100% * var(--logo-scale));
            height: calc(100% * var(--logo-scale));
            max-width: calc(9rem * var(--logo-scale));
            max-height: calc(4rem * var(--logo-scale));
            transition: width 0.3s ease, height 0.3s ease, max-width 0.3s ease, max-height 0.3s ease, opacity 0.3s ease;
        }

        input::placeholder {
            color: var(--text-secondary);
            opacity: 1;
            /* Optional: Tailwind sets opacity 0.5 by default */
        }

        .contentLoader {
            width: 3.5rem;
            padding: 4px;
            aspect-ratio: 1;
            border-radius: 50%;
            background: #25b09b;
            --_m:
                conic-gradient(#0000 10%, #000),
                linear-gradient(#000 0 0) content-box;
            -webkit-mask: var(--_m);
            mask: var(--_m);
            -webkit-mask-composite: source-out;
            mask-composite: subtract;
            animation: l3 1s infinite linear;
        }

        @keyframes l3 {
            to {
                transform: rotate(2turn)
            }
        }

/* ================================ */

[x-cloak] {
            display: none !important;
        }

/* ================================ */

[x-cloak] { display: none !important; }

/* ================================ */

@media (max-width: 767px) {
        body { padding-bottom: var(--mobile-nav-height, 60px); }
        [data-mobile-menu-toggle] { display: none !important; }
    }

/* ================================ */

#loadingScreen .light-mode-logo, #loadingScreen .dark-mode-logo { transition: none !important; }

/* ================================ */

.custom-scrollbar::-webkit-scrollbar { width: 8px; }
        .light-mode .custom-scrollbar { color-scheme: light; }
        .dark-mode .custom-scrollbar { color-scheme: dark; }
        .custom-scrollbar { scrollbar-width: thin; }
        @keyframes rotatenow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .animate-rotatenow { animation: rotatenow 3s linear infinite; }
        @keyframes bounce-in { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
        .bounce-in { animation: bounce-in 0.6s ease forwards; }
        @keyframes bounce-in-section { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
        .bounce-in-section { animation: bounce-in-section 0.8s ease forwards; }
        .modal-overlay { position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
        .modal-body { padding: 1.5rem 2.5rem; overflow-y: auto; flex: 1; }
        .coupon-modal { width: 100%; max-width: 600px; background: var(--bg-primary); border-radius: 1rem; box-shadow: 0 20px 40px rgba(0,0,0,0.2); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 2rem); }
        .download-proccess { padding: 4rem; }
        .modal-header { background-color: var(--bg-secondary); border-bottom: 1px solid var(--border-color); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 2rem 2.5rem; min-height: 160px; min-width: 550px; }
        .modal-footer { background: var(--bg-secondary); padding: 1rem 2.5rem; border-top: 1px solid var(--border-color); }
        @media (max-width: 640px) { .modal-overlay { padding: 0.5rem; } .modal-header, .modal-body, .modal-footer, .backBtn { padding: 1rem; } .coupon-modal { max-height: calc(100vh - 1rem); } }
        @media (max-width: 768px) { .modal-overlay { padding: 0; } .modal-header { min-width: auto; } .coupon-modal { height: calc(var(--vh,1vh)*100); max-height: none; max-width: none; border-radius: 0; display: flex; flex-direction: column; position: fixed; top: 0; right: 0; width: 100%; } .download-proccess { padding: 0; min-height: 70%; } .modal-body { flex: 1; overflow-y: auto; flex-direction: column; display: flex; } .modal-body.mb-s1 { padding-top: 1.5rem; } .modal-footer { position: sticky; bottom: 0; z-index: 10; padding: 1rem; } }
        @media (max-width: 375px) { .modal-header { min-height: 120px; padding-bottom: 2.4rem; } .modal-body.mb-s1 { padding-top: 2rem; } }
        @media (min-width: 480px) and (max-width: 768px) { .modal-overlay { position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; } }