/* =====================================================================
   zxacc — PRO LAYER  (loaded after custom.css)
   [UPGRADE] Pro footer · newsletter states · bottom app-bar · back-to-top ring
             tablet & phone polish · accessibility · reduced motion
   Selectors are intentionally more specific than custom.css so the
   !important rules there are refined, not deleted.
   ===================================================================== */

:root {
    --pro-accent: #8b5cf6;
    --pro-accent-2: #6366f1;
    --pro-pink: #a855f7;
    --pro-ink: #030712;
    --pro-muted: #94a3b8;
    --pro-line: rgba(255, 255, 255, .07);
    --pro-glass: rgba(255, 255, 255, .03);
    --pro-radius: 16px;
    --bottom-nav-h: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Fonts: English pages used an unloaded 'DM Sans' on body ---------- */
html:not([lang^="fa"]) body:not(.rtl) { font-family: var(--beiten-font-en, 'Inter'), system-ui, sans-serif !important; }

/* ---------- Accessibility basics ---------- */
.screen-reader-text {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.beiten-skip-link {
    position: fixed; top: -100px; inset-inline-start: 16px; z-index: 1000000;
    background: #111827; color: #fff; padding: 12px 18px; border-radius: 12px;
    font-weight: 700; text-decoration: none; transition: top .2s;
}
.beiten-skip-link:focus { top: 16px; outline: 3px solid var(--pro-accent); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--pro-accent) !important;
    outline-offset: 2px !important;
}
.beiten-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* =====================================================================
   NEWSLETTER — states
   ===================================================================== */
.newsletter-section .beiten-newsletter-form { flex: 1 1 420px; max-width: 520px; }
.newsletter-section .newsletter-input-group input { font-size: 16px; min-height: 52px; }
.newsletter-section .newsletter-submit { position: relative; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.newsletter-section .nl-spinner {
    display: none; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: proSpin .7s linear infinite;
}
.beiten-newsletter-form.is-loading .nl-spinner { display: inline-block; }
.beiten-newsletter-form.is-loading .nl-btn-text { opacity: .6; }
@keyframes proSpin { to { transform: rotate(360deg); } }
.newsletter-status { min-height: 1.4em; margin: 10px 4px 0; font-size: 14px; font-weight: 600; }
.newsletter-status.is-success { color: #10b981; }
.newsletter-status.is-error { color: #ef4444; }
.beiten-newsletter-form input[aria-invalid="true"] { border-color: #ef4444 !important; box-shadow: 0 0 0 4px rgba(239,68,68,.12) !important; }
.newsletter-privacy { display: flex; align-items: center; gap: 6px; margin: 6px 4px 0; font-size: 12px; opacity: .65; }

/* =====================================================================
   FOOTER — PRO
   ===================================================================== */
.beiten-footer--pro { position: relative; background: var(--pro-ink); }
html[dir="ltr"]:not([lang^="fa"]) .beiten-footer--pro .footer-top,
html[dir="ltr"]:not([lang^="fa"]) .beiten-footer--pro .footer-bottom,
html:not([dir="rtl"]):not([lang^="fa"]) body:not(.rtl) .beiten-footer--pro .footer-top,
html:not([dir="rtl"]):not([lang^="fa"]) body:not(.rtl) .beiten-footer--pro .footer-bottom { direction: ltr !important; }

/* Trust strip */
.beiten-footer--pro .footer-trust {
    background: linear-gradient(180deg, #0b0f1f, var(--pro-ink));
    border-top: 1px solid var(--pro-line);
    padding: 28px 0;
}
.footer-trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.footer-trust-item {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px;
    background: var(--pro-glass); border: 1px solid var(--pro-line); border-radius: var(--pro-radius);
    transition: border-color .3s, transform .3s, background .3s;
}
.footer-trust-item:hover { border-color: rgba(139,92,246,.35); background: rgba(139,92,246,.06); transform: translateY(-2px); }
.footer-trust-item .ft-icon {
    flex: 0 0 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #fff;
    background: linear-gradient(135deg, var(--pro-accent-2), var(--pro-pink));
    box-shadow: 0 8px 22px rgba(99,102,241,.3);
}
.footer-trust-item .ft-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.footer-trust-item strong { color: #f8fafc; font-size: 15px; font-weight: 800; }
.footer-trust-item small { color: var(--pro-muted); font-size: 12.5px; }

/* Grid: 5 columns (brand · quick · categories · support · contact) */
.beiten-footer--pro .footer-top .footer-grid.footer-grid--pro {
    grid-template-columns: minmax(0, 2.1fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr) !important;
    gap: 40px !important;
}
.beiten-footer--pro .footer-brand { max-width: none !important; padding-left: 0 !important; }
.beiten-footer--pro .footer-logo img { object-fit: cover; }
.beiten-footer--pro .footer-title { font-size: 16px !important; margin-bottom: 22px !important; line-height: 1.4; }

/* Title as accordion button (behaves like plain text on desktop) */
.footer-title-toggle {
    all: unset; display: flex; align-items: center; gap: 10px; width: 100%;
    cursor: default; color: inherit; font: inherit;
}
.footer-title-toggle .ftt-chevron { display: none; }
.footer-links .fl-count {
    font-size: 11px; font-weight: 700; color: #c4b5fd; background: rgba(139,92,246,.12);
    border-radius: 999px; padding: 1px 8px; margin-inline-start: 8px;
}

/* Online support badge */
.footer-support-status {
    display: inline-flex; align-items: center; gap: 10px; margin: -8px 0 22px;
    padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
    color: #d1fae5 !important; text-decoration: none !important;
    background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); transition: background .3s;
}
.footer-support-status:hover { background: rgba(16,185,129,.16); }
.fss-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: proPulse 2s infinite; }
@keyframes proPulse { 70% { box-shadow: 0 0 0 10px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }

.beiten-footer--pro .footer-social { flex-wrap: wrap; }

/* Contact extras */
.beiten-footer--pro .footer-contact li { position: relative; flex-wrap: nowrap; min-width: 0; }
.beiten-footer--pro .footer-contact a { overflow-wrap: anywhere; }
.fc-hours { color: #cbd5e1; font-weight: 600; }
.fc-copy {
    margin-inline-start: auto; flex: 0 0 32px; height: 32px; display: grid; place-items: center;
    background: transparent; border: 1px solid var(--pro-line); border-radius: 10px; color: var(--pro-muted); cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}
.fc-copy:hover { color: #fff; border-color: var(--pro-accent); }
.fc-copy.is-copied { color: #10b981; border-color: #10b981; background: rgba(16,185,129,.1); }

.beiten-footer--pro .payment-icons { align-items: center; }
.beiten-footer--pro .payment-cryptomus {
    height: 34px; width: auto; padding: 6px 10px; border-radius: 10px;
    background: #fff; border: 1px solid var(--pro-line);
}

/* Bottom bar */
.beiten-footer--pro .footer-bottom-inner.footer-bottom-inner--pro { justify-content: space-between !important; gap: 16px; flex-wrap: wrap; }
.beiten-footer--pro .footer-bottom-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; }
.beiten-footer--pro .footer-bottom-menu a { color: #64748b; font-size: 13px; font-weight: 600; text-decoration: none; transition: color .2s; }
.beiten-footer--pro .footer-bottom-menu a:hover { color: #fff; }
.fbm-lang { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--pro-line); border-radius: 999px; }
.fbm-lang a { padding: 3px 10px; border-radius: 999px; }
.fbm-lang a.active { background: linear-gradient(135deg, var(--pro-accent-2), var(--pro-pink)); color: #fff !important; }

/* =====================================================================
   BACK TO TOP with progress ring
   ===================================================================== */
.back-to-top { position: fixed; overflow: visible; border-radius: 50% !important; }
.back-to-top .btt-ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); transform: rotate(-90deg); color: #c084fc; pointer-events: none; }
.back-to-top .btt-ring circle { transition: stroke-dashoffset .1s linear; }

/* =====================================================================
   MOBILE BOTTOM NAVIGATION (app bar)
   ===================================================================== */
.beiten-bottom-nav { display: none; }

/* =====================================================================
   TABLET  (769px – 1100px)
   ===================================================================== */
@media (max-width: 1200px) {
    .beiten-footer--pro .footer-top .footer-grid.footer-grid--pro {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 36px !important;
    }
    .beiten-footer--pro .footer-brand { grid-column: 1 / -1 !important; }
}
@media (max-width: 1024px) {
    .newsletter-section .beiten-newsletter-form { flex: 0 0 auto; width: 100%; max-width: 560px; margin-inline: auto; }
    .footer-trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .beiten-footer--pro .footer-brand { text-align: center !important; display: flex; flex-direction: column; align-items: center; }
    .beiten-footer--pro .footer-desc { max-width: 560px; }
    .beiten-footer--pro .footer-col--contact { grid-column: 1 / -1; }
    .beiten-footer--pro .footer-col--contact .footer-contact { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .beiten-footer--pro .footer-col--contact .payment-methods { text-align: center; }
    .beiten-footer--pro .footer-col--contact .payment-icons { justify-content: center; }

    /* Touch targets on tablets */
    .beiten-header .action-btn, .beiten-header .mobile-toggle { min-width: 44px; min-height: 44px; }
    .woocommerce table.shop_table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* =====================================================================
   PHONE  (≤ 768px)
   ===================================================================== */
@media (max-width: 768px) {
    /* bottom app-bar */
    .beiten-bottom-nav {
        display: grid; grid-template-columns: repeat(5, 1fr);
        position: fixed; inset-inline: 0; bottom: 0; z-index: 9990;
        height: calc(var(--bottom-nav-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
        background: rgba(10, 8, 22, .88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
        border-top: 1px solid rgba(255,255,255,.08); box-shadow: 0 -10px 30px rgba(0,0,0,.25);
    }
    .bbn-item {
        all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        color: #94a3b8; font-size: 11px; font-weight: 700; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent;
    }
    .bbn-item svg { transition: transform .2s; }
    .bbn-item:active svg { transform: scale(.88); }
    .bbn-item.is-active { color: #fff; }
    .bbn-item.is-active::before {
        content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 4px 4px;
        background: linear-gradient(90deg, var(--pro-accent-2), var(--pro-pink));
    }
    .bbn-icon-wrap { position: relative; display: inline-flex; }
    .bbn-badge {
        position: absolute; top: -6px; inset-inline-end: -10px; min-width: 18px; height: 18px; padding: 0 5px;
        border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; line-height: 18px; text-align: center;
    }
    body.has-bottom-nav { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom)); }
    body.has-bottom-nav .back-to-top { bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 14px) !important; }
    body.nav-open .beiten-bottom-nav { transform: translateY(110%); }
    .beiten-bottom-nav { transition: transform .3s; }

    /* footer trust strip → horizontal swipe */
    .beiten-footer--pro .footer-trust { padding: 18px 0; }
    .footer-trust-list {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
        padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .footer-trust-list::-webkit-scrollbar { display: none; }
    .footer-trust-item { flex: 0 0 78%; scroll-snap-align: start; padding: 14px; }

    /* footer grid → stacked accordion */
    .beiten-footer--pro .footer-top { padding: 44px 0 24px !important; }
    .beiten-footer--pro .footer-top .footer-grid.footer-grid--pro { grid-template-columns: 1fr !important; gap: 0 !important; }
    .beiten-footer--pro .footer-brand { padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--pro-line); }
    .beiten-footer--pro .footer-col--collapsible { border-bottom: 1px solid var(--pro-line); }
    .beiten-footer--pro .footer-col--collapsible .footer-title { margin: 0 !important; justify-content: stretch !important; }
    .beiten-footer--pro .footer-col--collapsible .footer-title::before { display: none !important; }
    .footer-title-toggle { direction: inherit; text-align: start; cursor: pointer; padding: 18px 2px; justify-content: space-between; min-height: 44px; }
    .footer-title-toggle .ftt-chevron {
        display: block; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: rotate(45deg); transition: transform .3s; opacity: .7; margin-top: -4px;
    }
    .footer-title-toggle[aria-expanded="true"] .ftt-chevron { transform: rotate(-135deg); margin-top: 4px; }
    .beiten-footer--pro .footer-col--collapsible .footer-links {
        overflow: hidden; max-height: 600px; transition: max-height .35s ease, padding .35s ease, opacity .3s;
        padding-bottom: 18px !important; opacity: 1; align-items: stretch !important;
    }
    .beiten-footer--pro .footer-col--collapsible .footer-links.is-collapsed { max-height: 0; padding-bottom: 0 !important; opacity: 0; }
    .beiten-footer--pro .footer-col--collapsible .footer-links li { text-align: start !important; }
    .beiten-footer--pro .footer-col--collapsible .footer-links li a { display: flex !important; width: 100%; justify-content: flex-start !important; padding: 6px 0; min-height: 36px; }
    .beiten-footer--pro .footer-col--contact { padding-top: 28px; }
    .beiten-footer--pro .footer-col--contact .footer-title { justify-content: flex-start !important; }
    .beiten-footer--pro .footer-col--contact .footer-contact { grid-template-columns: 1fr; }
    .beiten-footer--pro .footer-col--contact .payment-methods,
    .beiten-footer--pro .footer-col--contact .payment-icons { text-align: start; justify-content: flex-start; }
    .beiten-footer--pro .footer-bottom-inner.footer-bottom-inner--pro { flex-direction: column; justify-content: center !important; text-align: center; }
    .beiten-footer--pro .footer-bottom-menu { justify-content: center; }

    /* newsletter on phones */
    .newsletter-section { padding: 36px 0 !important; }
    .newsletter-section .newsletter-input-group { flex-direction: column; min-width: 0 !important; width: 100%; }
    .newsletter-section .newsletter-input-group .btn { width: 100%; }

    /* iOS: inputs below 16px trigger auto-zoom */
    input[type="text"], input[type="email"], input[type="search"], input[type="password"],
    input[type="tel"], input[type="number"], select, textarea { font-size: 16px !important; }

    /* never allow sideways scroll */
    .beiten-main img, .beiten-main video, .beiten-main iframe { max-width: 100%; height: auto; }
    .entry-content table { display: block; overflow-x: auto; }

    /* auth screen: dynamic viewport height & tighter card */
    #beiten-auth-wrapper { height: 100dvh !important; overflow-y: auto !important; align-items: flex-start !important; padding: 16px !important; }
    .beiten-auth-card { padding: 32px 22px !important; border-radius: 22px !important; margin: auto !important; }
    .beiten-auth-title { font-size: 23px !important; }

    /* search overlay input */
    .search-overlay .search-input-large { font-size: 18px !important; }
}

@media (max-width: 380px) {
    .bbn-item span:not(.bbn-icon-wrap):not(.bbn-badge) { font-size: 10px; }
    .footer-trust-item { flex-basis: 88%; }
    .container { padding-left: 14px !important; padding-right: 14px !important; }
}

/* Hide app-bar on the full-screen login page */
body.page-template-default #beiten-auth-wrapper ~ .beiten-bottom-nav,
body:has(#beiten-auth-wrapper) .beiten-bottom-nav,
body:has(#beiten-auth-modern) .beiten-bottom-nav { display: none !important; }
body:has(#beiten-auth-wrapper), body:has(#beiten-auth-modern) { padding-bottom: 0 !important; }

/* Landscape phones: slimmer app-bar */
@media (max-width: 900px) and (max-height: 450px) and (orientation: landscape) {
    :root { --bottom-nav-h: 52px; }
    .bbn-item span:not(.bbn-icon-wrap):not(.bbn-badge) { display: none; }
}

/* =====================================================================
   Reduced motion & print
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
    .beiten-bottom-nav, .back-to-top, .newsletter-section, .footer-trust, .beiten-topbar, .search-overlay { display: none !important; }
}