/* 
   CYBERPUNK NEON THEME
   Replaces previous visual overhaul
*/

:root {
    --bg-base: #000000;
    --bg-glass: rgba(255, 255, 255, 0.03);
    --border-glass: rgba(255, 255, 255, 0.08);
    --glow-primary: rgba(0, 255, 255, 0.4);
    --accent-cyan: #00FFFF;
    --accent-orange: #FF8000;
}

/* Override site's .dark theme variables (html.dark > .dark in specificity).
   The site generates green colors; we replace them with cyberpunk cyan palette. */
html.dark,
html.dark :root {
    --primary: #00FFFF !important;
    --primary-foreground: #000000 !important;
    --ring: #00FFFF !important;
    --accent: #252836 !important;
    --accent-foreground: #e0e0e0 !important;
    --border: rgba(255, 255, 255, 0.10) !important;
    --background: #0a0a0c !important;
    --foreground: #e0e0e0 !important;
    --card: #161618 !important;
    --card-foreground: #e0e0e0 !important;
    --popover: #161618 !important;
    --popover-foreground: #e0e0e0 !important;
    --muted: #252836 !important;
    --muted-foreground: #888888 !important;
    --input: rgba(255, 255, 255, 0.08) !important;
    --input-background: #161618 !important;
    --exchange-amount-background: #161618 !important;
    --exchange-text-background: #1e1e22 !important;
    --exchange-amount-foreground: #e0e0e0 !important;
    --exchange-text-foreground: #888888 !important;
    --exchange-text-border: rgba(255, 255, 255, 0.08) !important;
    --section-background: #0d0d0f !important;
}

/* Background & Global */
.main-background {
    /* The actual background image is loaded elsewhere. We just ensure positioning. */
    position: relative;
}

.main-background::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Dark semi-transparent overlay to ensure neon text remains readable on top of the image */
    background:
        radial-gradient(circle at 10% 90%, rgba(0, 255, 255, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 10%, rgba(255, 128, 0, 0.05) 0%, transparent 40%),
        rgba(0, 0, 0, 0.85);
}


/* New Animations */
@keyframes cyberPulse {

    0%,
    100% {
        opacity: 0.1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(1.05);
    }
}

@keyframes neonFlicker {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.2) drop-shadow(0 0 10px var(--accent-cyan));
    }
}

@keyframes scanline {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100vh);
    }
}

/* Glow orbs replaced with cyber lines/shapes */
.koralchange-glow-orb {
    position: fixed;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

.koralchange-glow-orb--1 {
    width: 2px;
    height: 100vh;
    left: 20%;
    background: linear-gradient(to bottom, transparent, var(--accent-cyan), transparent);
    animation: scanline 8s linear infinite;
}

.koralchange-glow-orb--2 {
    width: 100vw;
    height: 2px;
    top: 30%;
    background: linear-gradient(to right, transparent, var(--accent-orange), transparent);
    animation: scanline 12s linear infinite;
    animation-direction: reverse;
}

.koralchange-glow-orb--3 {
    width: 300px;
    height: 300px;
    border: 1px solid var(--accent-cyan);
    border-radius: 50%;
    top: 10%;
    right: 10%;
    animation: cyberPulse 10s ease-in-out infinite;
}

/* Grouped Glassmorphism Selectors (massively condensed) */
.exchange__from,
.exchange__to,
.exchange__form,
app-banners .rounded-3xl:not(.banner-card),
exchange-advantages [class*="grid"]>div,
exchange-advantages [class*="flex"]>div,
div.absolute.shadow-lg.rounded-xl.z-50 {
    background: var(--bg-glass) !important;
    background-color: var(--bg-glass) !important;
    /* backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; */
    border: 1px solid var(--border-glass) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
    border-radius: 8px !important;
    /* sharper edges for cyber look */
    position: relative;
    height: fit-content !important;
}

/* Footer,
Reserves & Static Pages solid background to match forms on black bg and prevent coral transparency */
app-footer>div,
app-footer footer,
exchange-reserves>div,
partner-links section,
exchange-reviews section,
docs-pages [class*="bg-(--section-bg)"],
faq-page [class*="bg-(--section-bg)"],
contacts-page [class*="bg-(--section-bg)"],
app-partners [class*="bg-(--section-bg)"],
app-cards [class*="bg-(--section-bg)"],
app-settings [class*="bg-(--section-bg)"],
app-auth [class*="bg-(--section-bg)"],
order-pay-details [class*="bg-(--section-bg)"],
app-order [class*="bg-(--section-bg)"],
docs-pages [class*="bg-(--background)"],
faq-page [class*="bg-(--background)"],
contacts-page [class*="bg-(--background)"],
app-partners [class*="bg-(--background)"],
app-cards [class*="bg-(--background)"],
app-settings [class*="bg-(--background)"],
app-auth [class*="bg-(--background)"],
order-pay-details [class*="bg-(--background)"],
app-order [class*="bg-(--background)"],
app-order [class*="bg-card"],
aside [class*="bg-card"],
section[class*="bg-card"],
article[class*="bg-card"],
div[class*="bg-card"],
ui-card[class*="bg-card"],
ui-card,
a[class*="bg-card"],
.partner-card,
[class*="bg-exchange-text"],
section[class*="bg-(--background)"],
div[class*="hover:border-primary/30"],
.account-layout__nav-item,
app-requisites section,
app-partners div[class*="bg-primary"],
app-partners section.space-y-4,
app-orders section.space-y-3,
faq-page div.border-b,
ui-accordion-item,
app-order div[class*="bg-linear"],
app-partners [class*="bg-linear-to-r"],
.exchange-grid-card,
app-partners div[class*="bg-background"],
app-partners div[class*="bg-section-bg"],
div.rounded-2xl.border-border.bg-background {
    background: #161618 !important;
    /* Lighter dark grey to match forms */
    background-color: #161618 !important;
    border: 1px solid var(--border-glass) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.02) !important;
    border-radius: 1.5rem !important;
    position: relative;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}

/* Ensure naked sections that were turned into glass panels have padding */
app-requisites section,
app-partners section.space-y-4,
app-orders section.space-y-3,
faq-page div.border-b {
    padding: 24px !important;
}

app-footer>div:hover,
app-footer footer:hover,
exchange-reserves>div:hover,
partner-links section:hover,
exchange-reviews section:hover,
docs-pages [class*="bg-(--section-bg)"]:hover,
faq-page [class*="bg-(--section-bg)"]:hover,
contacts-page [class*="bg-(--section-bg)"]:hover,
app-partners [class*="bg-(--section-bg)"]:hover,
app-cards [class*="bg-(--section-bg)"]:hover,
app-settings [class*="bg-(--section-bg)"]:hover,
app-auth [class*="bg-(--section-bg)"]:hover,
order-pay-details [class*="bg-(--section-bg)"]:hover,
app-order [class*="bg-(--section-bg)"]:hover,
docs-pages [class*="bg-(--background)"]:hover,
faq-page [class*="bg-(--background)"]:hover,
contacts-page [class*="bg-(--background)"]:hover,
app-partners [class*="bg-(--background)"]:hover,
app-cards [class*="bg-(--background)"]:hover,
app-settings [class*="bg-(--background)"]:hover,
app-auth [class*="bg-(--background)"]:hover,
order-pay-details [class*="bg-(--background)"]:hover,
app-order [class*="bg-(--background)"]:hover,
app-order [class*="bg-card"]:hover,
aside [class*="bg-card"]:hover,
section[class*="bg-card"]:hover,
article[class*="bg-card"]:hover,
div[class*="bg-card"]:hover,
ui-card[class*="bg-card"]:hover,
ui-card:hover,
a[class*="bg-card"]:hover,
.partner-card:hover,
[class*="bg-exchange-text"]:hover,
section[class*="bg-(--background)"]:hover,
div[class*="hover:border-primary/30"]:hover,
.account-layout__nav-item:hover,
app-requisites section:hover,
app-partners div[class*="bg-primary"]:hover,
app-partners section.space-y-4:hover,
app-orders section.space-y-3:hover,
faq-page div.border-b:hover,
ui-accordion-item:hover,
app-order div[class*="bg-linear"]:hover,
app-partners [class*="bg-linear-to-r"]:hover,
.exchange-grid-card:hover,
app-partners div[class*="bg-background"]:hover,
app-partners div[class*="bg-section-bg"]:hover,
div.rounded-2xl.border-border.bg-background:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2), inset 0 0 15px rgba(0, 255, 255, 0.1) !important;
}

/* Hover effects for glass elements */
.exchange__from:hover,
.exchange__to:hover,
.exchange__form:hover,
app-banners .rounded-3xl:hover:not(.banner-card),
exchange-advantages [class*="grid"]>div:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2), inset 0 0 15px rgba(0, 255, 255, 0.1) !important;
}

/* Top accent lines for cyber style */
app-banners .rounded-3xl:not(.banner-card)::before,
app-footer>div::before,
app-footer footer::before,
exchange-reserves>div::before,
partner-links section::before,
exchange-reviews section::before,
docs-pages [class*="bg-(--section-bg)"]::before,
faq-page [class*="bg-(--section-bg)"]::before,
contacts-page [class*="bg-(--section-bg)"]::before,
app-partners [class*="bg-(--section-bg)"]::before,
app-cards [class*="bg-(--section-bg)"]::before,
app-settings [class*="bg-(--section-bg)"]::before,
app-auth [class*="bg-(--section-bg)"]::before,
order-pay-details [class*="bg-(--section-bg)"]::before,
app-order [class*="bg-(--section-bg)"]::before,
docs-pages [class*="bg-(--background)"]::before,
faq-page [class*="bg-(--background)"]::before,
contacts-page [class*="bg-(--background)"]::before,
app-partners [class*="bg-(--background)"]::before,
app-cards [class*="bg-(--background)"]::before,
app-settings [class*="bg-(--background)"]::before,
app-auth [class*="bg-(--background)"]::before,
order-pay-details [class*="bg-(--background)"]::before,
app-order [class*="bg-(--background)"]::before,
app-order [class*="bg-card"]::before,
aside [class*="bg-card"]::before,
section[class*="bg-card"]::before,
article[class*="bg-card"]::before,
div[class*="bg-card"]::before,
ui-card[class*="bg-card"]::before,
ui-card::before,
[class*="bg-exchange-text"]::before,
section[class*="bg-(--background)"]::before,
div[class*="hover:border-primary/30"]::before,
.account-layout__nav-item::before,
app-requisites section::before,
app-partners div[class*="bg-primary"]::before,
app-partners section.space-y-4::before,
app-orders section.space-y-3::before,
faq-page div.border-b::before,
ui-accordion-item::before,
app-order div[class*="bg-linear"]::before,
app-partners [class*="bg-linear-to-r"]::before,
.exchange-grid-card::before,
app-partners div[class*="bg-background"]::before,
app-partners div[class*="bg-section-bg"]::before,
div[class*="formatting__text"][class*="bg-muted"]::before,
div.rounded-2xl.border-border.bg-background::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    opacity: 0.5;
    transition: opacity 0.3s;
}

.exchange__from:hover::before,
.exchange__to:hover::before,
app-banners .rounded-3xl:hover:not(.banner-card)::before,
app-footer>div:hover::before,
app-footer footer:hover::before,
exchange-reserves>div:hover::before,
partner-links section:hover::before,
exchange-reviews section:hover::before,
docs-pages [class*="bg-(--section-bg)"]:hover::before,
faq-page [class*="bg-(--section-bg)"]:hover::before,
contacts-page [class*="bg-(--section-bg)"]:hover::before,
app-partners [class*="bg-(--section-bg)"]:hover::before,
app-cards [class*="bg-(--section-bg)"]:hover::before,
app-settings [class*="bg-(--section-bg)"]:hover::before,
app-auth [class*="bg-(--section-bg)"]:hover::before,
order-pay-details [class*="bg-(--section-bg)"]:hover::before,
app-order [class*="bg-(--section-bg)"]:hover::before,
docs-pages [class*="bg-(--background)"]:hover::before,
faq-page [class*="bg-(--background)"]:hover::before,
contacts-page [class*="bg-(--background)"]:hover::before,
app-partners [class*="bg-(--background)"]:hover::before,
app-cards [class*="bg-(--background)"]:hover::before,
app-settings [class*="bg-(--background)"]:hover::before,
app-auth [class*="bg-(--background)"]:hover::before,
order-pay-details [class*="bg-(--background)"]:hover::before,
app-order [class*="bg-(--background)"]:hover::before,
app-order [class*="bg-card"]:hover::before,
aside [class*="bg-card"]:hover::before,
section[class*="bg-card"]:hover::before,
div[class*="bg-card"]:hover::before,
ui-card[class*="bg-card"]:hover::before,
ui-card:hover::before,
[class*="bg-exchange-text"]:hover::before,
section[class*="bg-(--background)"]:hover::before,
app-partners [class*="bg-linear-to-r"]:hover::before,
.exchange-grid-card:hover::before,
app-partners div[class*="bg-background"]:hover::before,
app-partners div[class*="bg-section-bg"]:hover::before,
div.rounded-2xl.border-border.bg-background:hover::before {
    opacity: 1;
}

/* Force transparency where needed */
.exchange__form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    --exchange-block-bg: transparent;
    --mat-form-field-filled-container-color: transparent;
}

app-banners .rounded-3xl:not(.banner-card) *:not(a):not(button):not(img):not(svg):not(path):not(span) {
    background: transparent !important;
}

exchange-advantages>div,
exchange-advantages>section,
.exchange__finally>.mt-8,
partner-links {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Buttons & CTA (Cyber gradient: Cyan to Orange) */
app-banners a[class*="bg-(--background)"],
order-pay-footer button,
order-pay-details button[class*="bg-primary"],
app-order button[class*="bg-primary"],
app-order .grid.grid-cols-2 button,
submit-button button[type="submit"],
app-auth button[type="submit"],
app-auth button[data-slot="button"],
app-auth form button,
app-login button[type="submit"],
app-login button[data-slot="button"],
app-login form button,
app-register button[type="submit"],
app-register button[data-slot="button"],
app-register form button,
app-account-layout button,
app-scroll-up button,
app-user-menu button,
app-partners button,
app-partners a.inline-flex,
button[aria-label="Поменять валюты местами"],
button.bg-primary[type="submit"],
button[data-slot="button"][type="submit"],
.bg-popover button.bg-primary,
[role="dialog"] button.bg-primary,
form button.bg-primary {
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-orange), var(--accent-cyan)) !important;
    background-color: transparent !important;
    background-size: 200% 100% !important;
    border-radius: 30px !important;
    border: none !important;
    color: #000 !important;
    font-weight: bold !important;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(255, 128, 0, 0.3) !important;
    animation: neonFlicker 3s infinite alternate !important;
    transition: transform 0.3s cubic-bezier(0.1, 0.7, 0.1, 1), filter 0.3s !important;
}

/* Force black text on child label to override Tailwind layered !important utilities */
app-banners a[class*="bg-(--background)"] span,
order-pay-footer button span,
order-pay-footer button,
order-pay-details button[class*="bg-primary"] span,
order-pay-details button[class*="bg-primary"],
app-order button[class*="bg-primary"] span,
app-order button[class*="bg-primary"],
app-order .grid.grid-cols-2 button span,
app-order .grid.grid-cols-2 button,
submit-button button[type="submit"] span,
submit-button button[type="submit"],
app-auth button[type="submit"],
app-auth button[data-slot="button"],
app-auth button[data-slot="button"] span,
app-auth form button,
app-auth form button span,
app-login button[type="submit"],
app-login button[data-slot="button"],
app-login button[data-slot="button"] span,
app-login form button,
app-login form button span,
app-register button[type="submit"],
app-register button[data-slot="button"],
app-register button[data-slot="button"] span,
app-register form button,
app-register form button span,
app-account-layout button span,
app-scroll-up button span,
app-user-menu button span,
app-partners button span,
app-partners a.inline-flex span,
app-account-layout button,
app-scroll-up button,
app-user-menu button,
app-partners button,
app-partners a.inline-flex,
button[aria-label="Поменять валюты местами"],
button.bg-primary[type="submit"],
button.bg-primary[type="submit"] span,
button[data-slot="button"][type="submit"],
button[data-slot="button"][type="submit"] span,
.bg-popover button.bg-primary,
.bg-popover button.bg-primary span,
[role="dialog"] button.bg-primary,
[role="dialog"] button.bg-primary span,
form button.bg-primary,
form button.bg-primary span {
    color: #000 !important;
}

app-banners a[class*="bg-(--background)"]:hover,
submit-button button[type="submit"]:hover,
order-pay-footer button:hover,
order-pay-details button[class*="bg-primary"]:hover,
app-order button[class*="bg-primary"]:hover,
app-order .grid.grid-cols-2 button:hover,
app-auth button[type="submit"]:hover,
app-auth button[data-slot="button"]:hover,
app-auth form button:hover,
app-login button[type="submit"]:hover,
app-login button[data-slot="button"]:hover,
app-login form button:hover,
app-register button[type="submit"]:hover,
app-register button[data-slot="button"]:hover,
app-register form button:hover,
app-account-layout button:hover,
app-scroll-up button:hover,
app-user-menu button:hover,
app-partners button:hover,
app-partners a.inline-flex:hover,
button[aria-label="Поменять валюты местами"]:hover,
button.bg-primary[type="submit"]:hover,
button[data-slot="button"][type="submit"]:hover,
.bg-popover button.bg-primary:hover,
[role="dialog"] button.bg-primary:hover,
form button.bg-primary:hover {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.2) contrast(1.1) !important;
}

/* Header / Toolbar styling to match the dark grey cyber theme */
app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

app-header ui-toolbar-shell,
.bg-toolbar {
    background: #161618 !important;
    background-color: #161618 !important;
    border: none !important; /* Removed border to fix cut-off frame */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; /* Subtle bottom separator */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.02) !important;
    backdrop-filter: none !important;
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}

app-header ui-toolbar-shell:hover,
.bg-toolbar:hover {
    /* Removed border-color to prevent full frame on hover */
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.15), inset 0 0 15px rgba(0, 255, 255, 0.05) !important;
}

/* Scrolled / Floating Header State */
.bg-toolbar\/80 {
    background: #161618 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.5), 
        inset 0 0 10px rgba(0, 255, 255, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}

.bg-toolbar\/80:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.6), 
        inset 0 0 10px rgba(255, 255, 255, 0.02) !important;
}

app-header a[uinavigationmenulink]:hover,
app-header a[data-slot="navigation-menu-item"]:hover,
ui-navigation-menu a:hover,
ui-navigation-menu-item a:hover,
li.list-none>a[uinavigationmenulink]:hover,
a[data-slot="navigation-menu-item"]:hover,
.bg-popover a:hover,
[role="dialog"] a:hover,
.bg-popover button:hover,
[role="dialog"] button:hover {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 8px var(--accent-cyan), 0 0 15px var(--accent-cyan) !important;
    background: transparent !important;
}

app-header a[uinavigationmenulink][data-active="true"],
app-header a[data-slot="navigation-menu-item"][data-active="true"],
ui-navigation-menu a[data-active="true"],
ui-navigation-menu-item a[data-active="true"],
li.list-none>a[uinavigationmenulink][data-active="true"],
a[data-slot="navigation-menu-item"][data-active="true"],
app-header a[uinavigationmenulink][aria-current="page"],
app-header a[data-slot="navigation-menu-item"][aria-current="page"],
ui-navigation-menu a[aria-current="page"],
ui-navigation-menu-item a[aria-current="page"],
li.list-none>a[uinavigationmenulink][aria-current="page"],
a[data-slot="navigation-menu-item"][aria-current="page"] {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 8px var(--accent-cyan), 0 0 15px var(--accent-cyan) !important;
    background: transparent !important;
}



/* Override all links in the order block to fix the AML link and others */
app-order a,
aside a,
.exchange-grid-form-stack a {
    color: var(--accent-cyan) !important;
    text-decoration-color: var(--accent-cyan) !important;
}

app-order a:hover,
aside a:hover,
.exchange-grid-form-stack a:hover {
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5) !important;
}

/* Override purple text links to cyber cyan */
a.text-primary,
.text-primary {
    color: var(--accent-cyan) !important;
    text-decoration-color: var(--accent-cyan) !important;
}

a.text-primary:hover,
.text-primary:hover {
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5) !important;
}

/* Text glow for contact links and working hours */
a.group[href*="t.me"]:hover div.text-muted-foreground,
a.group[href^="mailto:"]:hover div.text-muted-foreground,
div.flex.items-center.gap-3.px-4.py-3:hover div.text-muted-foreground {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 8px var(--accent-cyan), 0 0 15px var(--accent-cyan) !important;
    transition: all 0.2s ease-in-out;
}

app-header a[href*="auth"],
app-header a[routerlink*="auth"] {
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-orange), var(--accent-cyan)) !important;
    background-size: 200% 100% !important;
    color: #000 !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 30px !important;
    animation: neonFlicker 3s infinite alternate !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

app-header a[href*="auth"]:hover,
app-header a[routerlink*="auth"]:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 25px rgba(255, 128, 0, 0.6) !important;
}

app-header a[href*="auth"]::after,
app-header a[routerlink*="auth"]::after {
    display: none !important;
}

/* Logo Animation */
app-logo img,
app-header a[routerlink="/"] img {
    animation: neonFlicker 3s infinite alternate;
    border-radius: 0 !important;
}

app-logo:hover img {
    filter: drop-shadow(0 0 15px var(--accent-cyan)) brightness(1.5);
}

/* Currency Items */
.item-anim-wrapper {
    border-radius: 4px !important;
    transition: all 0.2s !important;
    border-left: 2px solid transparent;
    padding: 2px 4px !important;
    position: relative;
    overflow: hidden !important;
}

.item-anim-wrapper:hover {
    background: rgba(0, 255, 255, 0.1) !important;
    border-left-color: var(--accent-cyan);
    transform: translateX(5px);
}

.item-anim-wrapper:has(.text-green-500),
.item-anim-wrapper:has([style*="color"]) {
    background: rgba(255, 128, 0, 0.1) !important;
    border-left-color: var(--accent-orange);
}

[class*="bg-(--input-background)"],
ui-input-group,
button[class*="border-input"]:not([data-variant="outline"]),
[class*="bg-input-background"] {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}

/* Outline buttons: solid grey background (not transparent) */
button[data-variant="outline"],
button[data-slot="button"][data-variant="outline"] {
    background: #252836 !important;
    background-color: #252836 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

button[data-variant="outline"]:hover,
button[data-slot="button"][data-variant="outline"]:hover {
    background: #2d3044 !important;
    background-color: #2d3044 !important;
    border-color: rgba(0, 255, 255, 0.4) !important;
}

/* Force dark background for search inputs on transparent container pages so they are readable */
faq-page ui-input-group,
docs-pages ui-input-group,
contacts-page ui-input-group {
    background: #161618 !important;
}

[class*="bg-(--ex-search-input-bg)"] {
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}

[class*="bg-(--input-background)"]:hover,
[class*="bg-(--ex-search-input-bg)"]:hover,
[class*="bg-input-background"]:hover,
ui-input-group:hover,
button[class*="border-input"]:hover,
[class*="bg-(--input-background)"]:focus-within,
[class*="bg-(--ex-search-input-bg)"]:focus-within,
[class*="bg-(--ex-search-input-bg)"]:focus,
[class*="bg-input-background"]:focus-within,
ui-input-group:focus-within,
button[class*="border-input"]:focus,
button[class*="border-input"]:focus-visible,
button[class*="border-input"][aria-expanded="true"] {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3) !important;
    outline: none !important;
}

/* Fix invisible form inputs across the app (like right panel exchange form) */
ui-form-control>div>input:not([type="checkbox"]):not([type="radio"]),
[data-slot="form-control"]>div>input:not([type="checkbox"]):not([type="radio"]),
ui-form-control>input:not([type="checkbox"]):not([type="radio"]),
[data-slot="form-control"]>input:not([type="checkbox"]):not([type="radio"]) {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

ui-input-group input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

ui-form-control>div>input:not([type="checkbox"]):not([type="radio"]):focus,
[data-slot="form-control"]>div>input:not([type="checkbox"]):not([type="radio"]):focus,
ui-form-control>input:not([type="checkbox"]):not([type="radio"]):focus,
[data-slot="form-control"]>input:not([type="checkbox"]):not([type="radio"]):focus {
    border-color: var(--accent-cyan) !important;
    background: rgba(0, 255, 255, 0.05) !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2) !important;
    outline: none !important;
}

/* Main exchange amount input row */
.flex.items-center.gap-3:has(> .min-w-0 > input[inputmode="decimal"]) {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 16px !important;
    padding: 4px 8px !important;
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}

.flex.items-center.gap-3:has(> .min-w-0 > input[inputmode="decimal"]):hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2), inset 0 0 15px rgba(0, 255, 255, 0.1) !important;
}

.flex.items-center.gap-3:has(> .min-w-0 > input[inputmode="decimal"]):focus-within {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3), inset 0 0 5px rgba(0, 255, 255, 0.1) !important;
    background: rgba(0, 255, 255, 0.05) !important;
}

/* Disable purple focus ring on the big raw input */
input[inputmode="decimal"]:focus,
input[inputmode="decimal"]:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

/* Ticker */
.koralchange-ticker {
    background: #000;
    border-bottom: 1px solid var(--accent-cyan);
    height: 30px;
}

.koralchange-ticker-symbol {
    color: var(--accent-cyan);
}

.koralchange-ticker-change--up {
    color: var(--accent-cyan);
}

.koralchange-ticker-change--down {
    color: var(--accent-orange);
}

/* Preloader */
.koralchange-preloader {
    background: #000;
}

.koralchange-preloader-bar {
    background: #333;
    border-radius: 0;
}

.koralchange-preloader-bar::after {
    background: var(--accent-cyan);
    animation: scanline 1.5s infinite;
}

/* Overrides for specific sections */
.exchange__from,
.exchange__to,
.exchange__form {
    border-radius: 1.5rem !important;
}

.exchange__from [class*="bg-(--secondary-bg)"],
.exchange__to [class*="bg-(--secondary-bg)"] {
    border-radius: 1.5rem !important;
}

order-details>div,
app-order>div.container>div,
app-order>div.container>div>div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

app-order [class*="bg-(--background)"],
app-order [class*="bg-(--section-bg)"],
app-order div.bg-card.rounded-3xl:not(order-info *):not(order-details *),
app-order div.bg-card.rounded-3xl:not(order-info *):not(order-details *) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Style the timer block to match the main dark blocks */
.exchange__rates,
.exchange__rates.flex {
    background: var(--exchange-block-bg) !important;
    background-color: var(--exchange-block-bg) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}

.exchange__rates:hover,
.exchange__rates.flex:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2), inset 0 0 15px rgba(0, 255, 255, 0.1) !important;
}

/* Checkbox group block */
div:has(> dynamic-checkbox) {
    background: var(--exchange-block-bg) !important;
    background-color: var(--exchange-block-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 1.5rem !important;
    padding: 1rem 1.5rem !important;
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}

div:has(> dynamic-checkbox):hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2), inset 0 0 15px rgba(0, 255, 255, 0.1) !important;
}

/* ===== CHECKBOX: Brand gradient when checked ===== */
ui-checkbox span[data-state="checked"],
[data-slot="checkbox"] span[data-state="checked"],
ui-checkbox button[data-state="checked"],
[data-slot="checkbox"] button[data-state="checked"],
span[data-slot="checkbox"][data-state="checked"],
button[data-slot="checkbox"][data-state="checked"] {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-orange)) !important;
    background-size: 200% 200% !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.4), 0 0 4px rgba(255, 128, 0, 0.3) !important;
    animation: neonFlicker 3s infinite alternate !important;
    transition: all 0.3s ease !important;
}

/* Checkmark icon stays black for contrast */
ui-checkbox span[data-state="checked"] svg,
[data-slot="checkbox"] span[data-state="checked"] svg,
ui-checkbox button[data-state="checked"] svg,
[data-slot="checkbox"] button[data-state="checked"] svg,
span[data-slot="checkbox"][data-state="checked"] svg,
button[data-slot="checkbox"][data-state="checked"] svg {
    color: #000 !important;
}

/* Unchecked: subtle glass border */
ui-checkbox span[data-state="unchecked"],
[data-slot="checkbox"] span[data-state="unchecked"],
ui-checkbox button[data-state="unchecked"],
[data-slot="checkbox"] button[data-state="unchecked"],
span[data-slot="checkbox"][data-state="unchecked"],
button[data-slot="checkbox"][data-state="unchecked"] {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transition: all 0.3s ease !important;
}

ui-checkbox span[data-state="unchecked"]:hover,
[data-slot="checkbox"] span[data-state="unchecked"]:hover,
ui-checkbox button[data-state="unchecked"]:hover,
[data-slot="checkbox"] button[data-state="unchecked"]:hover,
span[data-slot="checkbox"][data-state="unchecked"]:hover,
button[data-slot="checkbox"][data-state="unchecked"]:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.2) !important;
}

/* Force strip borders from the main wrappers */
app-order>.container,
app-order>div>.container,
app-order>.max-w-7xl,
app-order>div>.max-w-7xl,
app-order>div>.grid,
app-order div.bg-card.rounded-3xl:not(order-info *):not(order-details *),
div:has(> order-info),
div:has(> order-details),
div:has(> div > order-info) {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

[class*="aml"] {
    border-color: var(--accent-orange) !important;
    background: rgba(255, 128, 0, 0.1) !important;
}

/* FAB, chat widgets */
iframe[src="about:blank"][width*="60"],
iframe[src="about:blank"][width*="64"] {
    filter: drop-shadow(0 0 10px var(--accent-cyan)) drop-shadow(0 0 20px rgba(255, 128, 0, 0.4)) !important;
    transition: all 0.3s ease !important;
}

iframe[src="about:blank"][width*="60"]:hover,
iframe[src="about:blank"][width*="64"]:hover {
    filter: drop-shadow(0 0 15px var(--accent-cyan)) drop-shadow(0 0 30px var(--accent-orange)) brightness(1.2) !important;
    transform: scale(1.05) !important;
}

/* Misc */
::selection {
    background: var(--accent-cyan);
    color: #000;
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: var(--accent-cyan);
}

app-scroll-up {
    left: auto !important;
    right: 24px !important;
}


/* Mobile optimization */
@media (max-width: 768px) {
    .koralchange-glow-orb {
        display: none !important;
    }

    .koralchange-ticker {
        display: none !important;
    }

    .main-background::before {
        position: absolute !important;
    }

    html,
    body {
        overflow-x: clip !important;
        max-width: 100vw !important;
    }
}

/* Operator Online Badge */
div.bg-green-200.text-green-600.rounded-xl {
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-orange), var(--accent-cyan)) !important;
    background-size: 200% 100% !important;
    color: #000 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4), 0 0 15px rgba(255, 128, 0, 0.4) !important;
    animation: neonFlicker 3s infinite alternate !important;
}

/* Top contact links hover neon effect */
div.flex.items-center.whitespace-nowrap.text-sm .text-header-foreground,
div.flex.items-center.whitespace-nowrap.text-sm .text-toolbar-foreground,
div.flex.items-center.whitespace-nowrap.text-sm img {
    transition: all 0.3s ease !important;
}

div.flex.items-center.whitespace-nowrap.text-sm:hover .text-header-foreground,
div.flex.items-center.whitespace-nowrap.text-sm:hover .text-toolbar-foreground {
    color: var(--accent-cyan) !important;
    text-decoration: none !important;
    text-shadow: 0 0 8px var(--accent-cyan), 0 0 15px var(--accent-cyan) !important;
}

div.flex.items-center.whitespace-nowrap.text-sm:hover img {
    filter: drop-shadow(0 0 5px var(--accent-cyan)) brightness(1.2) !important;
}

/* Contacts page cards hover */
contacts-page div.border.p-3.rounded-2xl {
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}

contacts-page div.border.p-3.rounded-2xl:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2), inset 0 0 15px rgba(0, 255, 255, 0.1) !important;
    background: rgba(0, 255, 255, 0.05) !important;
}

contacts-page div.border.p-3.rounded-2xl img,
contacts-page div.border.p-3.rounded-2xl a,
contacts-page div.border.p-3.rounded-2xl span {
    transition: all 0.3s ease !important;
}

contacts-page div.border.p-3.rounded-2xl img:hover {
    filter: drop-shadow(0 0 5px var(--accent-cyan)) brightness(1.2) !important;
}

contacts-page div.border.p-3.rounded-2xl a:hover,
contacts-page div.border.p-3.rounded-2xl span:hover {
    color: var(--accent-cyan) !important;
    text-decoration: none !important;
    text-shadow: 0 0 8px var(--accent-cyan), 0 0 15px var(--accent-cyan) !important;
}

.item-anim-wrapper,
.item-anim-wrapper * {
    border-radius: 12px !important;
}

.item-anim-wrapper,
exchange-option {
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    transform: none !important;
    outline: none !important;
}

exchange-option::before,
exchange-option::after,
.item-anim-wrapper::before,
.item-anim-wrapper::after {
    display: none !important;
}

.exchange__item {
    border: 1px solid transparent !important;
    border-width: 1px !important;
    border-radius: 12px !important;
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    overflow: hidden !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    transform: none !important;
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}

.exchange__item::before,
.exchange__item::after {
    display: none !important;
}

/* Cyber style for SELECTED active item */
.exchange__item.bg-accent {
    background: rgba(0, 255, 255, 0.1) !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.15) !important;
}

.account-layout__nav-item.bg-accent {
    background-color: #161618 !important;
    background-image: linear-gradient(rgba(0, 255, 255, 0.1), rgba(0, 255, 255, 0.1)) !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.15) !important;
}

.exchange__item:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2), inset 0 0 15px rgba(0, 255, 255, 0.1) !important;
    background: rgba(0, 255, 255, 0.05) !important;
}

/* Force dark grey background on order pay details */
app-order div.bg-\(--background\).shadow.rounded-3xl,
order-pay-details div.bg-\(--background\).shadow.rounded-3xl {
    background: #161618 !important;
    background-color: #161618 !important;
    opacity: 1 !important;
}

/* Force dark grey background on order pay details */
app-order div.bg-\(--background\).shadow.rounded-3xl,
order-pay-details div.bg-\(--background\).shadow.rounded-3xl {
    background: #161618 !important;
    background-color: #161618 !important;
    opacity: 1 !important;
}

/* Auth links (like Forgot Password) neon hover effect */
app-auth a,
app-login a,
app-register a {
    transition: all 0.3s ease !important;
}

app-auth a:hover,
app-login a:hover,
app-register a:hover {
    color: var(--accent-cyan) !important;
    text-decoration: none !important;
    text-shadow: 0 0 8px var(--accent-cyan), 0 0 15px var(--accent-cyan) !important;
}

/* Fix partner cards inner overlays causing blue tint */
.partner-card span {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.partner-card span[class*="bg-gradient"],
.partner-card span.pointer-events-none {
    display: none !important;
}

/* Ensure consistent vertical margins between major sections */
exchange-reserves>div,
partner-links section,
exchange-reviews section,
app-footer>div,
app-footer>footer {
    margin-top: 24px !important;
}

/* Remove redundant container bottom margin to prevent double-spacing with footer */
main {
    margin-bottom: 0 !important;
}

/* ===== 19. ПРЕЛОАДЕР с логотипом (CSS-only, по таймеру) =====
   Не требует изменения HTML. Создает полноэкранный прелоадер.
   Разделен на body::before (черный фон) и body::after (прозрачная плашка с логотипом),
   чтобы неоновое свечение drop-shadow ложилось ровно на контур букв логотипа, а не на экран. */

/* 1. Полноэкранный темный фон прелоадера */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 999998;
    background: radial-gradient(ellipse at center, #001111 0%, #000000 70%);
    pointer-events: auto;
    animation: cyberPreloaderFade 0.5s ease-out 2.2s 1 forwards;
    will-change: opacity;
}

/* 2. Прозрачный слой с логотипом по центру и точечным неоновым свечением вокруг букв */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: url("https://koralchange.com/images/logotype/logotype_dark-ff31173a-dd35-43df-ae0a-c690ab2d479e.webp") center / 220px auto no-repeat;
    pointer-events: none;
    animation:
        cyberPreloaderLogo 3.0s ease-in-out 1 forwards,
        cyberPreloaderFade 0.5s ease-out 2.2s 1 forwards;
    will-change: opacity, filter, transform;
}

@keyframes cyberPreloaderLogo {
    0% {
        filter: brightness(0.85) drop-shadow(0 0 0 rgba(0, 255, 255, 0));
        transform: scale(0.98);
    }

    50% {
        filter: brightness(1.25) drop-shadow(0 0 25px rgba(0, 255, 255, 0.85)) drop-shadow(0 0 12px rgba(255, 128, 0, 0.5));
        transform: scale(1.02);
    }

    100% {
        filter: brightness(1.05) drop-shadow(0 0 15px rgba(0, 255, 255, 0.5)) drop-shadow(0 0 6px rgba(255, 128, 0, 0.3));
        transform: scale(1.0);
    }
}

@keyframes cyberPreloaderFade {
    0% {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    99% {
        opacity: 0;
        pointer-events: none;
        visibility: visible;
    }

    100% {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {

    body::before,
    body::after {
        animation-duration: 0.2s, 0.2s;
        animation-delay: 0s, 0.2s;
    }
}

/* ===== 20. POP-UP MENUS / DROPDOWNS (CYBERPUNK NEON GLOW) =====
   Styles the bg-popover and ui-popover-content dropdown dialogs with the
   brand solid grey background, neon cyan border, and matching glowing box-shadow. */
.bg-popover,
.ui-popover-content,
[role="dialog"].bg-popover {
    background: #161618 !important;
    background-color: #161618 !important;
    border: 1px solid var(--accent-cyan) !important;
    box-shadow: 0 4px 25px rgba(0, 255, 255, 0.25), inset 0 0 15px rgba(0, 255, 255, 0.1) !important;
    border-radius: 1rem !important;
}

/* Ensure bright, highly readable text inside the popover */
.bg-popover,
.bg-popover a,
.bg-popover button,
.bg-popover span,
.bg-popover div,
.bg-popover p,
.bg-popover label {
    color: #e2e2ff !important;
    transition: all 0.25s ease !important;
}

/* Exclude icon files or specialized svg elements if any from standard colors */
.bg-popover svg path {
    stroke: currentColor;
}

/* ===== 21. FOOTER LINKS (CYBER NEON GLOW ON HOVER) =====
   Overrides default purple hover colors on footer links to neon cyan with text-shadow glow
   and adds matching neon glow to the active dot indicator. */
app-footer a,
.footer-link,
a.footer-link {
    transition: all 0.3s ease !important;
}

app-footer a:hover,
.footer-link:hover,
a.footer-link:hover {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 8px var(--accent-cyan), 0 0 15px var(--accent-cyan) !important;
}

app-footer a:hover .footer-link_mark,
.footer-link:hover .footer-link_mark,
a.footer-link:hover .footer-link_mark {
    background-color: var(--accent-cyan) !important;
    box-shadow: 0 0 8px var(--accent-cyan), 0 0 15px var(--accent-cyan) !important;
}

/* ===== 22. APP-NOTIFICATIONS (CYBERPUNK NEON STYLE) ===== */
app-notifications .rounded-3xl {
    background: #161618 !important;
    background-color: #161618 !important;
    border: 1px solid var(--border-glass) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.02) !important;
    border-radius: 1.5rem !important;
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

app-notifications .rounded-3xl,
app-notifications .rounded-3xl p,
app-notifications .rounded-3xl span:not(a),
app-notifications .rounded-3xl div {
    color: #e2e2ff !important;
}

/* Hover effect */
app-notifications .rounded-3xl:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2), inset 0 0 15px rgba(0, 255, 255, 0.1) !important;
}

/* Top horizontal neon accent line */
app-notifications .rounded-3xl::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    opacity: 0.5;
    transition: opacity 0.3s;
    z-index: 20;
}

app-notifications .rounded-3xl:hover::before {
    opacity: 1;
}

/* Status variants: warning/error/alert (Orange) */
app-notifications .rounded-3xl[class*="warning"],
app-notifications .rounded-3xl[class*="error"],
app-notifications .rounded-3xl[class*="destructive"],
app-notifications .rounded-3xl[class*="danger"],
app-notifications .rounded-3xl:has([class*="warning"]),
app-notifications .rounded-3xl:has([class*="error"]),
app-notifications .rounded-3xl:has([class*="destructive"]) {
    border-color: rgba(255, 128, 0, 0.3) !important;
}

app-notifications .rounded-3xl[class*="warning"]::before,
app-notifications .rounded-3xl[class*="error"]::before,
app-notifications .rounded-3xl[class*="destructive"]::before,
app-notifications .rounded-3xl[class*="danger"]::before,
app-notifications .rounded-3xl:has([class*="warning"])::before,
app-notifications .rounded-3xl:has([class*="error"])::before,
app-notifications .rounded-3xl:has([class*="destructive"])::before {
    background: linear-gradient(90deg, transparent, var(--accent-orange), transparent) !important;
}

app-notifications .rounded-3xl[class*="warning"]:hover,
app-notifications .rounded-3xl[class*="error"]:hover,
app-notifications .rounded-3xl[class*="destructive"]:hover,
app-notifications .rounded-3xl[class*="danger"]:hover {
    border-color: var(--accent-orange) !important;
    box-shadow: 0 4px 20px rgba(255, 128, 0, 0.2), inset 0 0 15px rgba(255, 128, 0, 0.1) !important;
}

/* Ensure links inside notifications match the theme */
app-notifications a {
    color: var(--accent-cyan) !important;
    text-decoration: none !important;
}

app-notifications a:hover {
    text-shadow: 0 0 8px var(--accent-cyan), 0 0 15px var(--accent-cyan) !important;
}

/* ===== 23. ACTIVE TOGGLE BUTTON (CYBER GRADIENT) =====
   Style the sliding background indicator (the animating capsule) and the active button text. */

/* Style the actual animating/sliding indicator element with the gradient */
ui-segmented-control [class*="indicator"],
ui-segmented-control [class*="slider"],
ui-segmented-control [class*="thumb"],
ui-segmented-control [class*="selection"],
ui-segmented-control>div>div:not(button),
ui-segmented-control>div>span:not(button),
[data-slot="segmented-control"] [class*="indicator"],
[data-slot="segmented-control"] [class*="slider"],
[data-slot="segmented-control"] [class*="thumb"],
[data-slot="segmented-control"] [class*="selection"],
[data-slot="segmented-control"]>div>div:not(button),
[data-slot="segmented-control"]>div>span:not(button) {
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-orange), var(--accent-cyan)) !important;
    background-size: 200% 100% !important;
    box-shadow: 0 4px 15px rgba(255, 128, 0, 0.3) !important;
    animation: neonFlicker 3s infinite alternate !important;
}

/* Make the checked button's background transparent so the sliding indicator behind it is visible */
ui-segmented-control button[data-state="checked"],
[data-slot="segmented-control"] button[data-state="checked"] {
    background: transparent !important;
    color: #000 !important;
    font-weight: bold !important;
    box-shadow: none !important;
    animation: none !important;
    transition: transform 0.3s cubic-bezier(0.1, 0.7, 0.1, 1), filter 0.3s !important;
}

/* Ensure active text and span contents are black */
ui-segmented-control button[data-state="checked"] span,
[data-slot="segmented-control"] button[data-state="checked"] span,
ui-segmented-control button[data-state="checked"] *,
[data-slot="segmented-control"] button[data-state="checked"] * {
    color: #000 !important;
}

/* ===== 24. TOOLTIP POPUPS (CYBER GRADIENT) =====
   Styles the tooltips (like "Комиссия: 10%") with our brand gradient background and black text. */
.ui-tooltip-content,
[role="tooltip"].ui-tooltip-content {
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-orange), var(--accent-cyan)) !important;
    background-size: 200% 100% !important;
    color: #000 !important;
    font-weight: bold !important;
    box-shadow: 0 4px 15px rgba(255, 128, 0, 0.3) !important;
    border: none !important;
}

.ui-tooltip-content *,
[role="tooltip"].ui-tooltip-content * {
    color: #000 !important;
}

.ui-tooltip-arrow {
    background: var(--accent-cyan) !important;
    /* solid cyan for the arrow pointer matches the tooltip edge */
}

/* ===== 25. MORE DETAILS BUTTON (NEON BORDER ON HOVER) =====
   Styles the "Подробнее" outline dropdown toggle button with a neon border and glow on hover. */
toggle-type-rate button[variant="outline"],
[data-slot="toggle-type-rate"] button[variant="outline"],
toggle-type-rate div.mt-3 button,
[data-slot="toggle-type-rate"] div.mt-3 button {
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}

toggle-type-rate button[variant="outline"]:hover,
[data-slot="toggle-type-rate"] button[variant="outline"]:hover,
toggle-type-rate div.mt-3 button:hover,
[data-slot="toggle-type-rate"] div.mt-3 button:hover {
    border-color: var(--accent-cyan) !important;
    background: rgba(0, 255, 255, 0.05) !important;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2), inset 0 0 5px rgba(0, 255, 255, 0.1) !important;
    color: var(--accent-cyan) !important;
}

toggle-type-rate button[variant="outline"]:hover *,
[data-slot="toggle-type-rate"] button[variant="outline"]:hover *,
toggle-type-rate div.mt-3 button:hover *,
[data-slot="toggle-type-rate"] div.mt-3 button:hover * {
    color: var(--accent-cyan) !important;
}

/* ===== 26. RATE WARNING BLOCK (NEON BORDER ON HOVER) =====
   Styles specifically the floating rate warning block with a neon border on hover. */
toggle-type-rate .formatting__text,
[data-slot="toggle-type-rate"] .formatting__text {
    border: 1px solid var(--border-glass) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 8px !important;
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}

toggle-type-rate .formatting__text:hover,
[data-slot="toggle-type-rate"] .formatting__text:hover {
    border-color: var(--accent-cyan) !important;
    background: rgba(0, 255, 255, 0.05) !important;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.15), inset 0 0 10px rgba(0, 255, 255, 0.02) !important;
}

/* ===== 27. BANNER-CARD NEON FRAME ON HOVER ===== */
article.banner-card.banner-card,
article.banner-card.banner-card[class*="soft-gradient"],
article.banner-card.banner-card.bg-background {
    transition: box-shadow 0.3s cubic-bezier(0.1, 0.7, 0.1, 1), border-color 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 1.75rem !important;
    background: #161618 !important;
    background-color: #161618 !important;
    background-image: none !important;
    position: relative;
    z-index: 10;
    
    /* Safari rendering bug fixes for sharp corners on hover */
    overflow: visible !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    isolation: isolate;
    outline: none !important;
}

@media (min-width: 1024px) {
    article.banner-card.banner-card,
    article.banner-card.banner-card[class*="soft-gradient"],
    article.banner-card.banner-card.bg-background {
        border-radius: 2rem !important;
    }
}

article.banner-card.banner-card::after,
article.banner-card.banner-card[class*="soft-gradient"]::after {
    display: none !important;
    content: none !important;
}

/* Neon top accent line for banner-card (overflow:visible is already set) */
article.banner-card::before,
article.banner-card.banner-card::before,
article.banner-card.banner-card[class*="soft-gradient"]::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: -1px !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent) !important;
    z-index: 20 !important;
}

article.banner-card.banner-card:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow:
        0 0 10px rgba(0, 255, 255, 0.4),
        0 0 25px rgba(0, 255, 255, 0.2),
        inset 0 0 15px rgba(0, 255, 255, 0.1) !important;
}

/* Clear parent carousel and child background leakage */
ui-carousel,
ui-carousel-content,
ui-carousel-item,
ui-carousel-content > div,
.ui-carousel__container-horizontal {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
article.banner-card > div {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: inherit !important;
}

/* Button inside banner-card: match brand gradient */
article.banner-card a[data-slot="button"],
article.banner-card a.rounded-full {
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-orange), var(--accent-cyan)) !important;
    background-size: 200% 100% !important;
    border-radius: 30px !important;
    border: none !important;
    color: #000 !important;
    font-weight: bold !important;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(255, 128, 0, 0.3) !important;
    animation: neonFlicker 3s infinite alternate !important;
    transition: transform 0.3s cubic-bezier(0.1, 0.7, 0.1, 1), filter 0.3s !important;
}

article.banner-card a[data-slot="button"] *,
article.banner-card a.rounded-full * {
    color: #000 !important;
}

article.banner-card a[data-slot="button"]:hover,
article.banner-card a.rounded-full:hover {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.2) contrast(1.1) !important;
}

/* ===== 28. ORDER COUNTDOWN PROGRESS BAR (ANIMATED CYBER GRADIENT) =====
   Replaces the default purple bg-primary progress bar with an animated cyan-to-orange shimmer. */
@keyframes progressShimmer {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

order-countdown [role="progressbar"]>div,
order-countdown div.bg-primary,
order-countdown [role="progressbar"] div[class*="bg-primary"] {
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-orange), var(--accent-cyan), var(--accent-orange), var(--accent-cyan)) !important;
    background-size: 300% 100% !important;
    animation: progressShimmer 3s linear infinite !important;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.4), 0 0 15px rgba(255, 128, 0, 0.3) !important;
    border-radius: inherit !important;
}

/* Style the track (background bar) */
order-countdown [role="progressbar"],
order-countdown div.bg-muted {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

/* Exchange amount card & currency button – inherit parent card color */
.exchange-grid-amount-card {
    background: transparent !important;
    background-color: transparent !important;
}

.exchange-grid-currency-button {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 0.75rem !important;
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}
.exchange-grid-currency-button:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 10px rgba(0,255,255,0.3), inset 0 0 8px rgba(0,255,255,0.1) !important;
    background: rgba(0,255,255,0.05) !important;
}
/* Exchange card muted buttons (От, Макс, Сбросить) */
.exchange-grid-amount-card button.bg-muted,
.exchange-grid-card button.bg-muted {
    background: rgba(255,255,255,0.06) !important;
    background-color: rgba(255,255,255,0.06) !important;
    border: 1px solid var(--border-glass) !important;
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}
.exchange-grid-amount-card button.bg-muted:hover,
.exchange-grid-card button.bg-muted:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 10px rgba(0,255,255,0.3), inset 0 0 8px rgba(0,255,255,0.1) !important;
    background: rgba(0,255,255,0.05) !important;
}
/* Exchange card swap icon – animated gradient like CTA buttons */
.exchange-grid-card .bg-muted,
.exchange-grid-amount-card .bg-muted {
    background: rgba(255,255,255,0.06) !important;
    background-color: rgba(255,255,255,0.06) !important;
}
app-grid-theme div.rounded-full.bg-muted {
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-orange), var(--accent-cyan)) !important;
    background-size: 200% 100% !important;
    animation: neonFlicker 3s infinite alternate !important;
    box-shadow: 0 0 12px rgba(0,255,255,0.4), 0 0 20px rgba(255,128,0,0.3) !important;
    color: #000 !important;
}
/* Reserve items – remove blue background & add neon hover */
article.reserve-item {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 1rem !important;
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}
article.reserve-item .reserve-item__surface,
article.reserve-item .reserve-item__amount,
article.reserve-item .reserve-item__icon {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
article.reserve-item:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 10px rgba(0,255,255,0.3), inset 0 0 8px rgba(0,255,255,0.1) !important;
    background: rgba(0,255,255,0.05) !important;
}

/* Filter chip buttons: grey background (use html.dark prefix + bright value to guarantee override) */
html.dark button.filter-form__chip,
html.dark button.currency-iso-filter-button {
    background: #2d2f38 !important;
    background-color: #2d2f38 !important;
}

/* Active filter chip: same grey + cyan ring */
html.dark button.filter-form__chip[data-state="active"],
html.dark button.filter-form__chip[aria-pressed="true"],
html.dark button.currency-iso-filter-button[data-active="true"] {
    background: #2d2f38 !important;
    background-color: #2d2f38 !important;
    border-color: var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.25) !important;
}

/* Hover state */
html.dark button.filter-form__chip:hover,
html.dark button.currency-iso-filter-button:hover {
    background: #353744 !important;
    background-color: #353744 !important;
    border-color: rgba(0, 255, 255, 0.5) !important;
    color: var(--accent-cyan) !important;
}

/* Fix transparent bg-muted/15 block on order completion page */
div[class*="formatting__text"][class*="bg-muted"],
[class*="bg-muted"][class*="formatting"] {
    background: #161618 !important;
    background-color: #161618 !important;
    border: 1px solid transparent !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

div[class*="formatting__text"][class*="bg-muted"]:hover,
[class*="bg-muted"][class*="formatting"]:hover {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.25), inset 0 0 10px rgba(0, 255, 255, 0.05) !important;
}

/* Fix transparent online chat widget */
order-online-chat,
order-online-chat > div,
[class*="order-online-chat"],
div:has(> div > [class*="Онлайн чат"]) {
    background: #161618 !important;
    background-color: #161618 !important;
}