/**
 * ZxAcc — Light Liquid-Glass Header/Footer + palette-matched surfaces
 * ------------------------------------------------------------------
 * Additive layer, loaded right after theme-cream-blue-palette.css.
 *
 * 1) HEADER: turns the already-translucent sticky header into a proper
 *    "liquid glass" surface — deeper blur+saturation, a soft moving
 *    light sheen, a hairline glass border, and the same glass treatment
 *    extended to every floating panel that drops from it (mega menu,
 *    language/notification dropdowns, search overlay, mobile drawer).
 * 2) FOOTER: the footer/newsletter/bottom-nav were built dark
 *    (violet-on-near-black). This section relights every one of those
 *    surfaces — including the hardcoded (non var()) colors baked into
 *    custom.css and pro.css — to the new cream/white/navy palette, so
 *    header and footer read as one consistent, light, glassy system.
 *
 * Nothing here removes a selector; it only restates colors/backgrounds
 * for selectors that already exist. Safe to remove this file's
 * wp_enqueue_style() call (or delete the file) to fully revert.
 */

/* =====================================================================
   1) HEADER — liquid glass
   ===================================================================== */

.beiten-topbar {
    background: linear-gradient(120deg, var(--bg-dark) 0%, var(--primary-dark) 55%, var(--primary) 130%);
    border-bottom: 1px solid rgba(82,132,176,0.25);
}

.beiten-header {
    position: sticky;
    background:
        linear-gradient(120deg, rgba(255,255,255,0.35) 20%, rgba(255,255,255,0.75) 45%, rgba(255,255,255,0.35) 70%),
        linear-gradient(180deg, rgba(255,255,255,0.66) 0%, rgba(249,245,236,0.58) 100%);
    background-size: 220% 100%, 100% 100%;
    background-position: -40% 0, 0 0;
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 30px -18px rgba(53,94,136,0.35);
    transition: background-position 6s ease, box-shadow 0.4s ease, background 0.4s ease;
}
.beiten-header::after {
    /* hairline liquid highlight along the very top edge */
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
    pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
    .beiten-header { animation: beitenGlassSheen 9s ease-in-out infinite; }
}
@keyframes beitenGlassSheen {
    0%, 100% { background-position: -40% 0, 0 0; }
    50% { background-position: 140% 0, 0 0; }
}
.beiten-header.scrolled {
    background:
        linear-gradient(120deg, rgba(255,255,255,0.35) 20%, rgba(255,255,255,0.88) 45%, rgba(255,255,255,0.35) 70%),
        linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(249,245,236,0.8) 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, var(--shadow-lg);
    border-bottom-color: rgba(82,132,176,0.22);
}

/* Glass card treatment shared by every floating panel under the header */
.lang-dropdown,
.notif-dropdown,
.mega-menu-panel,
.search-overlay,
.mobile-nav {
    background: linear-gradient(165deg, rgba(255,255,255,0.92) 0%, rgba(249,245,236,0.88) 100%) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-border) !important;
}
.lang-dropdown { box-shadow: var(--shadow-xl); }
.notif-dropdown { box-shadow: var(--shadow-xl); }
.search-overlay { background: linear-gradient(180deg, rgba(12,20,29,0.72), rgba(12,20,29,0.86)) !important; backdrop-filter: blur(14px); }
.search-overlay .search-input-large { color: var(--text-primary); }
.mobile-nav-header { border-bottom: 1px solid var(--border); }
.mobile-nav-footer { border-top: 1px solid var(--border); }

/* Mega menu trigger + top-level links pick up the new brand blue */
.mega-menu-trigger:hover,
.header-nav > ul > li > a:hover { color: var(--primary); }

/* =====================================================================
   2) FOOTER — relight from dark-violet to light cream/navy
   ===================================================================== */

/* -- design tokens the pro/custom layers read (redefined, not removed) -- */
:root {
    --pro-accent: var(--primary);
    --pro-accent-2: var(--accent);
    --pro-pink: var(--accent);
    --pro-ink: var(--bg-secondary);
    --pro-muted: var(--text-secondary);
    --pro-line: var(--border);
    --pro-glass: rgba(255,255,255,0.55);
}

.beiten-footer,
.beiten-footer--pro {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-secondary) 45%, #F3EEE2 100%);
    color: var(--text-secondary);
    overflow: hidden;
}
/* soft frosted color blobs behind the footer — the "liquid" in liquid glass */
.beiten-footer::before,
.beiten-footer::after {
    content: '';
    position: absolute;
    width: 480px; height: 480px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
}
.beiten-footer::before { top: -220px; inset-inline-start: -120px; background: var(--primary); }
.beiten-footer::after { bottom: -260px; inset-inline-end: -140px; background: var(--accent); }
.beiten-footer > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
    .beiten-footer::before { animation: fxDriftA 16s ease-in-out infinite; }
    .beiten-footer::after { animation: fxDriftB 19s ease-in-out infinite; }
}

.footer-top { border-bottom: 1px solid var(--border); }
.beiten-footer--pro .footer-trust {
    background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent);
    border-top: 1px solid var(--border);
}
.footer-trust-item {
    background: rgba(255,255,255,0.6) !important;
    border: 1px solid var(--border) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-sm);
}
.footer-trust-item:hover {
    border-color: rgba(82,132,176,0.35) !important;
    background: rgba(255,255,255,0.85) !important;
    box-shadow: var(--shadow-md);
}
.footer-trust-item .ft-icon {
    background: var(--gradient-primary);
    box-shadow: 0 8px 22px rgba(53,94,136,0.28);
    color: #fff;
}
.footer-trust-item strong { color: var(--text-primary) !important; }
.footer-trust-item small { color: var(--text-secondary) !important; }

.footer-logo img { background: transparent; }
.footer-logo-text { color: var(--text-primary) !important; }
.footer-desc { color: var(--text-secondary) !important; }

.footer-support-status {
    color: #06603f !important;
    background: rgba(16,185,129,0.10) !important;
    border: 1px solid rgba(16,185,129,0.28) !important;
}
.footer-support-status:hover { background: rgba(16,185,129,0.18) !important; }

.footer-social .social-link,
.social-link {
    background: rgba(53,94,136,0.06) !important;
    border: 1px solid var(--border) !important;
    color: var(--primary) !important;
    backdrop-filter: blur(8px);
}
.footer-social .social-link:hover,
.social-link:hover {
    background: var(--gradient-primary) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 25px rgba(53,94,136,0.32) !important;
}

.footer-title,
.beiten-footer--pro .footer-title {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border);
}
.footer-title::before { background: var(--accent) !important; box-shadow: 0 0 10px rgba(82,132,176,0.6) !important; }

.footer-links a,
.footer-links li a {
    color: var(--text-secondary) !important;
}
.footer-links a:hover,
.footer-links li a:hover {
    color: var(--primary) !important;
}
.footer-links li a::after { background: var(--gradient-primary) !important; }
.footer-links .fl-count { color: var(--primary) !important; background: rgba(53,94,136,0.10) !important; }

.footer-contact li {
    background: rgba(255,255,255,0.55) !important;
    border: 1px solid var(--border) !important;
}
.footer-contact li:hover { background: rgba(255,255,255,0.85) !important; border-color: rgba(82,132,176,0.3) !important; }
.footer-contact-icon { color: var(--accent) !important; }
.footer-contact a,
.footer-contact span,
.fc-hours { color: var(--text-primary) !important; }
.fc-copy { color: var(--text-secondary) !important; border-color: var(--border) !important; }
.fc-copy:hover { color: var(--primary) !important; border-color: var(--primary) !important; background: rgba(53,94,136,0.06) !important; }
.fc-copy.is-copied { color: #06603f !important; border-color: #06603f !important; background: rgba(16,185,129,0.1) !important; }

.payment-title { color: var(--text-muted) !important; }
.payment-icon {
    background: rgba(53,94,136,0.06) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    gap: 6px !important;
    padding: 6px 12px 6px 8px !important;
    border-radius: 999px !important;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease, background .3s ease !important;
}
.payment-icon .beiten-pay-icon { flex-shrink: 0; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12)); }
.payment-icon em { font-style: normal; font-weight: 700; font-size: 12px; letter-spacing: .2px; }
.payment-icon:hover {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: rgba(53,94,136,0.1) !important;
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 10px 22px rgba(53,94,136,0.18) !important;
}
.payment-icon:hover .beiten-pay-icon { animation: beitenPayPulse 0.6s ease; }
@keyframes beitenPayPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.15) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
    .payment-icon:hover .beiten-pay-icon { animation: none; }
}
.payment-cryptomus,
.beiten-footer--pro .payment-cryptomus { background: #fff !important; border: 1px solid var(--border) !important; }

.footer-bottom { border-top: 1px solid var(--border); }
.footer-bottom p,
.footer-copyright { color: var(--text-secondary) !important; }
.footer-bottom p strong { color: var(--text-primary) !important; }
.footer-bottom-menu a,
.beiten-footer--pro .footer-bottom-menu a { color: var(--text-secondary) !important; }
.footer-bottom-menu a:hover,
.beiten-footer--pro .footer-bottom-menu a:hover { color: var(--primary) !important; }
.fbm-lang { border-color: var(--border) !important; }
.fbm-lang a.active { background: var(--gradient-primary) !important; color: #fff !important; }

/* -- Newsletter card: glass panel on the cream section -- */
.newsletter-card {
    background: rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border) !important;
}
.newsletter-card::before {
    background: radial-gradient(circle, rgba(82,132,176,0.14) 0%, transparent 70%) !important;
}
.newsletter-badge { color: var(--primary) !important; background: rgba(53,94,136,0.08) !important; }
.newsletter-input-group input:focus { box-shadow: 0 0 0 4px rgba(82,132,176,0.14) !important; }

/* -- Back to top: glass pill in brand colors -- */
.back-to-top {
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--glass-border);
    color: var(--primary);
    box-shadow: var(--shadow-lg);
}
.back-to-top:hover { background: var(--gradient-primary); color: #fff; }
.back-to-top .btt-ring { color: var(--accent); }

/* -- Mobile app bar: light glass instead of near-black -- */
@media (max-width: 768px) {
    .beiten-bottom-nav {
        background: rgba(255,255,255,0.78) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border-top: 1px solid var(--glass-border) !important;
        box-shadow: 0 -10px 30px rgba(53,94,136,0.10) !important;
    }
    .bbn-item { color: var(--text-muted) !important; }
    .bbn-item.is-active { color: var(--primary) !important; }
    .bbn-item.is-active::before { background: var(--gradient-primary) !important; }
}

/* -----------------------------------------------------------------------
   Floating Telegram support button — single circle, bottom-left, mirrors
   .back-to-top's fixed-position treatment on the opposite corner. Replaces
   the old inline "support is online" text pill in the footer brand column.
   ----------------------------------------------------------------------- */
.support-fab {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #26A5E4;
    color: #fff;
    box-shadow: 0 10px 28px -6px rgba(38,165,228,0.55), 0 0 0 1px rgba(255,255,255,0.25) inset;
    z-index: 900;
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
}
.support-fab:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 16px 34px -6px rgba(38,165,228,0.6), 0 0 0 1px rgba(255,255,255,0.3) inset;
    color: #fff;
}
.support-fab svg { flex-shrink: 0; }

@media (max-width: 768px) {
    .support-fab { bottom: 20px; left: 20px; width: 44px; height: 44px; }
    body.has-bottom-nav .support-fab { bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 14px) !important; }
}
@media (max-width: 480px) {
    .support-fab { bottom: 20px; left: 20px; width: 42px; height: 42px; }
}
body:has(#beiten-auth-wrapper) .support-fab,
body:has(#beiten-auth-modern) .support-fab { display: none !important; }
@media print {
    .support-fab { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .support-fab { transition: none; }
}