/* 
   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;
}
/* 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,
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"],
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"] {
    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,
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 {
    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,
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::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,
[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 {
    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::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,
[class*="bg-exchange-text"]:hover::before,
section[class*="bg-(--background)"]:hover::before,
app-partners [class*="bg-linear-to-r"]: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(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,
app-order .grid.grid-cols-2 button,
submit-button button[type="submit"],
app-auth button[type="submit"],
app-login button[type="submit"],
app-register button[type="submit"],
app-account-layout button,
app-scroll-up button,
app-user-menu button,
app-partners button,
button[aria-label="Поменять валюты местами"] {
    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;
}
/* 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,
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-login button[type="submit"],
app-register button[type="submit"],
app-account-layout button span,
app-scroll-up button span,
app-user-menu button span,
app-partners button span,
app-account-layout button,
app-scroll-up button,
app-user-menu button,
app-partners button,
button[aria-label="Поменять валюты местами"] {
    color: #000 !important;
}
app-banners a[class*="bg-(--background)"]:hover,
submit-button button[type="submit"]:hover,
order-pay-footer button:hover,
app-order .grid.grid-cols-2 button:hover,
app-auth button[type="submit"]:hover,
app-login button[type="submit"]:hover,
app-register button[type="submit"]:hover,
app-account-layout button:hover,
app-scroll-up button:hover,
app-user-menu button:hover,
app-partners button:hover,
button[aria-label="Поменять валюты местами"]:hover {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.2) contrast(1.1) !important;
}
/* Secondary / Cancel buttons exception removed by user request */
app-header {
    background: rgba(0, 0, 0, 0.8) !important; 
    border-bottom: 2px solid var(--accent-cyan) !important;
    backdrop-filter: blur(10px) !important; 
    box-shadow: 0 5px 20px rgba(0,255,255,0.2) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !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;
}



/* 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,
[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;
}
[class*="bg-(--ex-search-input-bg)"] {
    transition: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}
[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 { 
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3) !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;
}
/* 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-821b863e-312e-4149-9d7d-e911f591dee6.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;
}