@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
    --vp-bg: #09090b;
    --vp-card: rgba(255, 255, 255, 0.04);
    --vp-card-hover: rgba(255, 255, 255, 0.08);
    --vp-border: rgba(255, 255, 255, 0.1);
    --vp-accent-1: #7c3aed;
    --vp-accent-2: #06b6d4;
    --vp-text-main: #ffffff;
    --vp-text-muted: #a1a1aa;
    --vp-glow: 0 0 20px rgba(124, 58, 237, 0.5);
    --vp-btn-grad: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
}

/* Base Overrides */
body {
    background: var(--vp-bg) !important;
    color: var(--vp-text-main) !important;
    font-family: 'Manrope', -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
}

h1, h2, h3, h4, h5, h6, .intro-title, .calc-title, .section-title, .offer-name {
    color: var(--vp-text-main) !important;
    font-family: 'Manrope', -apple-system, sans-serif !important;
    font-weight: 800 !important;
}

/* Gradient Titles */
.intro-title, .seo-text h1, .seo-text h2 {
    background: linear-gradient(135deg, #fff 0%, #a1a1aa 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    letter-spacing: -0.02em !important;
}

/* Header Re-styling */
.header {
    background: rgba(9, 9, 11, 0.7) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--vp-border) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.1) !important;
}

.header-nav ul li a, .sidebar-list a {
    color: var(--vp-text-muted) !important;
    text-transform: uppercase !important;
    font-size: 0.9rem !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
}

.header-nav ul li.active a, .header-nav ul li a:hover, .sidebar-list li.active a {
    color: var(--vp-accent-2) !important;
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.4) !important;
}

/* Logo inversion */
.header-logo img, .sidebar-logo img {
    filter: brightness(10) contrast(1.2) drop-shadow(0 0 5px rgba(255,255,255,0.3)) !important;
}

/* Intro Section */
.home-intro {
    background: radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.15), transparent 60%) !important;
    padding-top: 120px !important;
}

.bannerOne {
    background: var(--vp-card) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--vp-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
    isolation: isolate !important;
}
.bannerOne .circle {
    background: var(--vp-btn-grad) !important;
    opacity: 0.2 !important;
    filter: blur(40px) !important;
}
.bannerOne .text p {
    color: var(--vp-text-muted) !important;
}

/* Calculator Glassmorphism */
.calculator {
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--vp-border) !important;
    border-radius: 28px !important;
    box-shadow: 0 24px 50px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
    padding: 3rem 2rem !important;
}

.calc-output.calc-summ {
    font-size: 3.5rem !important;
    font-weight: 800 !important;
    color: var(--vp-text-main) !important;
    text-shadow: 0 0 20px rgba(255,255,255,0.2) !important;
}
.calc-output.calc-summ span {
    background: var(--vp-btn-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Range Slider */
.irs--flat .irs-line {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
}
.irs--flat .irs-bar {
    background: var(--vp-btn-grad) !important;
    border-radius: 10px !important;
}
.irs--flat .irs-handle > i:first-child {
    background: #fff !important;
    border: 2px solid var(--vp-accent-2) !important;
    box-shadow: 0 0 15px var(--vp-accent-2) !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    top: -5px !important;
    margin-left: -5px !important;
}

/* Buttons High Conversion */
.btn-blue, .btn {
    background: var(--vp-btn-grad) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    padding: 16px 32px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: var(--vp-glow) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.btn-blue::before, .btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: linear-gradient(135deg, #06b6d4 0%, #7c3aed 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: -1 !important;
}

.btn-blue:hover::before, .btn:hover::before {
    opacity: 1 !important;
}

.btn-blue:hover, .btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(6, 182, 212, 0.6) !important;
    color: #fff !important;
}

/* Offer Cards */
.offer {
    background: var(--vp-card) !important;
    border: 1px solid var(--vp-border) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    margin-bottom: 25px !important; /* Space for notifications */
}

.offer:hover {
    background: var(--vp-card-hover) !important;
    border-color: var(--vp-accent-1) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4), var(--vp-glow) !important;
}

.offer-logo {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.offer-name {
    font-size: 1.25rem !important;
}
.offer-name span {
    color: var(--vp-accent-2) !important;
    font-weight: 800 !important;
}

.offer-info ul li {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    color: var(--vp-text-muted) !important;
}
.offer-info ul li .big {
    color: #fff !important;
    font-weight: 700 !important;
}

/* Offer Labels */
.label.green {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important;
    border: none !important;
    border-radius: 20px !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
}

.label.purple {
    background: linear-gradient(90deg, #8b5cf6 0%, #6d28d9 100%) !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4) !important;
    border: none !important;
    border-radius: 20px !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
}

/* Services section */
.services-item {
    background: var(--vp-card) !important;
    border: 1px solid var(--vp-border) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(8px) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.services-item:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
.services-title {
    font-size: 1.5rem !important;
    color: #fff !important;
}
.services-text p {
    color: var(--vp-text-muted) !important;
}

/* Home News */
.news-item {
    background: var(--vp-card) !important;
    border: 1px solid var(--vp-border) !important;
    border-radius: 20px !important;
    transition: transform 0.3s !important;
    overflow: hidden !important;
}
.news-item:hover {
    transform: translateY(-5px) !important;
    border-color: var(--vp-accent-2) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
}

.news-title {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 1.2rem !important;
}

/* Sidebars / Modals */
.sidebar, .sidebar-background {
    background: rgba(9, 9, 11, 0.95) !important;
    backdrop-filter: blur(20px) !important;
}
.sidebar-list-heading {
    color: #fff !important;
}

/* Base Form Inputs */
input[type="text"], input[type="tel"], input[type="email"] {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid var(--vp-border) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 12px !important;
}
input:focus, textarea:focus, select:focus {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    border-color: var(--vp-accent-2) !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.3) !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Texts and Footers */
.seo-text p, .seo-text li {
    color: var(--vp-text-muted) !important;
    line-height: 1.8 !important;
}

.footer {
    background: #050508 !important;
    border-top: 1px solid var(--vp-border) !important;
    margin-top: 40px !important;
    padding: 40px 0 !important;
}
.footer * {
    color: var(--vp-text-muted) !important;
}

/* Breadcrumbs or minor texts */
.breadcrumb li a {
    color: var(--vp-text-muted) !important;
}
.breadcrumb li.active {
    color: var(--vp-accent-2) !important;
}

/* Landings Extra */
.landing, .landing-intro, .landing-about, .landing-steps, .landing-features, .landing-cta, .page-header, .credits-offers, .bottom-content {
    background: transparent !important;
}
.step-item, .features-item, .accordion-item, .filters-wrap, .page-header {
    background: var(--vp-card) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--vp-border) !important;
    color: var(--vp-text-main) !important;
    border-radius: 20px !important;
}
.page-header.lg-padding-bottom {
    padding-bottom: 30px !important;
    padding-top: 30px !important;
    margin-bottom: 0 !important;
    border-radius: 20px !important;
}
.credits-offers {
    padding-top: 20px !important;
}
.landing-intro .content, .landing-inner .form {
    background: var(--vp-card) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--vp-border) !important;
    color: var(--vp-text-main) !important;
    border-radius: 24px !important;
    padding: 24px !important;
}
.landing-inner {
    border: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
.step-item h5, .features-item h5, .accordion-title {
    color: var(--vp-text-main) !important;
}
.landing-inner .form .form-text {
    color: var(--vp-text-main) !important;
}
.landing-inner .form button[type="submit"] {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border: 1px solid var(--vp-border) !important;
}
.accordion-content { background: transparent !important; color: var(--vp-text-muted) !important; }

/* Misc texts inside blocks */
.subtitle, .accordion-content p, .landing-about p, .features-item p, .step-item p, .landing-cta p {
    color: var(--vp-text-muted) !important;
}

/* --- Screenshot Bug Fixes --- */

/* 1. Landing "Amount" Selection Buttons */
.landing-inner .form form button {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid var(--vp-border) !important;
    border-radius: 12px !important;
    text-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.landing-inner .form form button:hover, .landing-inner .form form button:focus, .landing-inner .form form button:active {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: var(--vp-accent-2) !important;
    color: #ffffff !important;
}

/* 2. Order Form Page (User Data / SMS code) */
.section-order .content {
    background: var(--vp-card) !important;
    border: 1px solid var(--vp-border) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    backdrop-filter: blur(10px) !important;
}
.section-order .content h4, .section-order .content p {
    color: var(--vp-text-main) !important;
}
.checkbox-control {
    color: var(--vp-text-muted) !important;
}
.user-form input, #sms-code-input {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid var(--vp-border) !important;
    border-radius: 8px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.user-form input:focus, #sms-code-input:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}
.form-amount .input-holder input {
    color: #ffffff !important;
}
.form-amount .input-holder input:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* 3. Credits All Page (Offers List View) */
html, body {
    background: var(--vp-bg) !important;
}
.banks-offers, .sort-view-wrap {
    background: transparent !important;
}
.sort-view-wrap .select select {
    background: transparent !important;
    color: var(--vp-text-main) !important;
}
.filters-wrap {
    background: var(--vp-card) !important;
    border: 1px solid var(--vp-border) !important;
    background-color: var(--vp-card) !important;
}

/* Offer Images fix globally */
.offer-image img, .offer-logo img {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
}
.offer-info ul li { border-bottom: 1px solid rgba(255,255,255,0.05) !important; }

/* Force High Specificity Overrides */
#reg-form-card, #reg-ivr-card {
    background: var(--vp-card) !important;
    border: 1px solid var(--vp-border) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(15px) !important;
    padding: 30px !important;
}
#reg-form-card h4, #reg-form-card p, #reg-ivr-card h4, #reg-ivr-card p, #reg-ivr-card label {
    color: var(--vp-text-main) !important;
}

#amount, #user_phone, #sms-code-input, #user_fio, #user_email {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid var(--vp-border) !important;
    border-radius: 8px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
#amount:focus, #user_phone:focus, #sms-code-input:focus, #user_fio:focus, #user_email:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: var(--vp-accent-2) !important;
}

div.form-buttons form button[type="submit"] {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid var(--vp-border) !important;
    text-shadow: none !important;
}
div.form-buttons form button[type="submit"]:hover, div.form-buttons form button[type="submit"]:active {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: var(--vp-accent-2) !important;
}

div.banks-offers .offer, div#offers .offer, div.top-offers-mfo .offer, div.top-offers-cards .offer, div.offers-view .offer {
    background: var(--vp-card) !important;
    border: 1px solid var(--vp-border) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(15px) !important;
}

#sms-verify-btn {
    background: var(--vp-btn-grad) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
}
#sms-resend-btn {
    color: var(--vp-text-muted) !important;
    border-color: var(--vp-border) !important;
}

/* Hard-Strip inner wrapper white backgrounds */
.form-buttons, .form-amount, .form-buttons form, .form-amount form {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.landing-intro .form .form-buttons, .landing-intro .form .form-amount,
.landing-inner .form .form-buttons, .landing-inner .form .form-amount {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.form-amount .input-holder {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.offer-logo, .offer-image {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Fix Native Section Backgrounds (Mobile SEO area) */
section, .section, .section-seo, .section-intro, .bottom-content, .seo-text {
    background: transparent !important;
    box-shadow: none !important;
}
.seo-text h1, .seo-text h2, .seo-text h3 {
    color: var(--vp-text-main) !important;
}

/* FAQ Accordion Spacing */
.accordion-item {
    padding: 18px 20px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
}
.accordion-title {
    font-size: 15px !important;
    line-height: 1.4 !important;
}
.accordion-content {
    padding-top: 12px !important;
}
.accordion-content p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--vp-text-muted) !important;
}
.section-title-sm {
    margin-bottom: 20px !important;
}
.bottom-content {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* Page header same width as offer cards */
.page-header.lg-padding-bottom {
    margin-left: 15px !important;
    margin-right: 15px !important;
    margin-top: 15px !important;
    width: auto !important;
}
@media (min-width: 769px) {
    .page-header.lg-padding-bottom {
        max-width: 1170px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* CSS 3D HERO GRAPHICS */
.css-hero-graphic {
    position: absolute;
    width: 100%; height: 100%;
    top: 0; right: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    border-radius: 24px;
}
.glowing-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.5;
    animation: floatOrb 6s ease-in-out infinite alternate;
}
.glowing-orb.cyan {
    width: 140px; height: 140px;
    background: var(--vp-accent-2);
    top: -10px; right: -20px;
    opacity: 0.7;
}
.glowing-orb.purple {
    width: 160px; height: 160px;
    background: var(--vp-accent-1);
    bottom: -20px; right: 20px;
    animation-delay: -3s;
    opacity: 0.7;
}
.glass-card-3d {
    position: absolute;
    width: 200px; height: 130px;
    top: 50%; right: 5%;
    transform: translateY(-50%) rotate(-12deg) rotateX(12deg) rotateY(-10deg);
    background: linear-gradient(135deg, rgba(110, 86, 207, 0.35), rgba(0, 209, 255, 0.2));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255,255,255,0.4);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(110, 86, 207, 0.3), 0 0 30px rgba(0, 209, 255, 0.15), inset 0 0 25px rgba(255,255,255,0.1);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 16px;
    animation: floatCard 7s ease-in-out infinite alternate;
}
.glass-card-3d::before {
    content: ''; position: absolute;
    top: 20px; left: 20px; width: 40px; height: 30px;
    background: linear-gradient(135deg, rgba(255,210,80,0.6), rgba(255,180,50,0.3)); border-radius: 6px; border: 1px solid rgba(255,210,80,0.5);
}
.glass-card-3d::after {
    content: '))))'; position: absolute;
    top: 23px; right: 20px; color: rgba(255,255,255,0.6); font-weight: 800; font-size: 1rem; letter-spacing: 2px;
}
.glass-card-text { font-size: 1.1rem; font-weight: 800; color: rgba(255,255,255,0.95); letter-spacing: 4px; text-shadow: 0 0 10px rgba(0, 209, 255, 0.4); }

@keyframes floatOrb {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-30px) scale(1.1); }
}
@keyframes floatCard {
    0% { transform: translateY(-50%) rotate(-12deg) rotateX(12deg) rotateY(-10deg) translateY(0); }
    100% { transform: translateY(-50%) rotate(-12deg) rotateX(12deg) rotateY(-10deg) translateY(-15px); }
}

/* Mobile Layout Fixes */
@media (max-width: 768px) {
    .filters-wrap, .sort-view-wrap {
        display: none !important;
    }
    .page-header.lg-padding-bottom {
        padding: 20px 0 20px !important;
    }
    .page-header .title h4 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }
    .page-header .title p {
        font-size: 13px !important;
    }
    .btn-blue, .btn {
        padding: 12px 14px !important;
        font-size: 0.95rem !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.2 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .calculator { padding: 1.5rem !important; }
    .calc-output.calc-summ { font-size: 2.2rem !important; margin-bottom: 10px !important; }
    .calc-title { font-size: 1.2rem !important; margin-bottom: 15px !important; }
    /* Glass card: visible on mobile */
    .glass-card-3d {
        width: 130px; height: 85px;
        right: 5%; top: 50%;
        transform: translateY(-50%) rotate(-10deg) scale(1);
        padding: 10px;
        border: 1.5px solid rgba(255,255,255,0.45);
        box-shadow: 0 12px 30px rgba(110, 86, 207, 0.35), 0 0 20px rgba(0, 209, 255, 0.2), inset 0 0 15px rgba(255,255,255,0.12);
    }
    .glass-card-3d::before { top: 8px; left: 8px; width: 22px; height: 16px; border-radius: 4px; }
    .glass-card-3d::after { top: 8px; right: 8px; font-size: 0.65rem; }
    .glass-card-text { font-size: 0.7rem; letter-spacing: 2px; }
    .glowing-orb.cyan { width: 100px; height: 100px; opacity: 0.7; }
    .glowing-orb.purple { width: 120px; height: 120px; opacity: 0.7; }
    /* Landing banner: shrink min-height on mobile */
    .landing-intro .content .banner {
        min-height: 180px !important;
    }
}