/* ============================================================
   Simply-FX · Glass Theme Override (2026-01)
   Drop-in override for legacy styles.css
   - Keep HTML/JS intact (only visual upgrade)
   - Uses modern CSS: tokens, clamp(), :where(), focus-visible, safe-area
   - Progressive enhancement for backdrop-filter
   ============================================================ */

@layer fxglass {

  :root{
    /* Base */
    --bg:#080808;
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.58);
    --stroke: rgba(255,255,255,.08);

    /* Accent palette (RGB) */
    --rgb-sky: 56, 189, 248;       /* primary accents */
    --rgb-emerald: 52, 211, 153;   /* success / categories */
    --rgb-amber: 251, 191, 36;     /* warnings / highlights */
    --rgb-red: 239, 68, 68;        /* errors */

    /* Layout */
    --wrap: 1220px;
    --r: 20px;
    --gap: 14px;

    /* Motion */
    --ease: cubic-bezier(.2, .95, .25, 1);
    --speed: .62s;

    /* Safe areas */
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);

    /* Common sticky offset (top nav + safe area) */
    --stickyTop: calc(10px + var(--safe-top));
    --catStickyTop: calc(78px + var(--safe-top));

    /* Type */
    --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Sanchez", ui-serif, Georgia, serif;
  }

  /* ---------------------------
     Base + background glow
  --------------------------- */
  html{
    color-scheme: dark;
    text-rendering: optimizeLegibility;
  }

  /* keep your existing flex layout on body/html, just re-skin it */
  :where(html, body){
    background: radial-gradient(900px 620px at 20% 18%, rgba(var(--rgb-sky), .14), transparent 55%),
                radial-gradient(780px 520px at 80% 15%, rgba(var(--rgb-emerald), .10), transparent 60%),
                radial-gradient(900px 620px at 50% 92%, rgba(var(--rgb-amber), .10), transparent 55%),
                var(--bg) !important;
    color: var(--text);
  }

  body{
    font-family: var(--font-sans) !important;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    padding-bottom: var(--safe-bottom);
  }

  :where(h1,h2,h3,h4,h5){
    font-family: var(--font-display);
    letter-spacing: -.02em;
  }

  :where(p, li, label, small){
    color: var(--muted);
  }

  :where(a){
    color: rgba(var(--rgb-sky), .95);
    text-decoration: none;
    text-underline-offset: .22em;
  }
  :where(a:hover){ text-decoration: underline; }

  ::selection{
    background: rgba(var(--rgb-sky), .22);
    color: rgba(255,255,255,.96);
  }

  /* ---------------------------
     Layout helpers (optional)
  --------------------------- */
  .wrap{
    max-width: var(--wrap);
    margin: 0 auto;
    padding: clamp(18px, 4vw, 44px) clamp(14px, 2.4vw, 18px) clamp(68px, 8vw, 90px);
    min-width: 0;
  }

  /* Make your legacy .content behave nicer */
  :where(.content){
    gap: clamp(14px, 2vw, 22px);
    align-items: flex-start;
    min-width: 0;
  }
  @media (max-width: 980px){
    :where(.content){
      flex-direction: column;
      margin-left: 0 !important;
    }
  }

  /* ---------------------------
     Glass primitives
  --------------------------- */
  .glass{
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r);
    box-shadow: 0 18px 60px rgba(0,0,0,.30);
    overflow: hidden;
    position: relative;
    isolation: isolate;
  }

  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    .glass{
      -webkit-backdrop-filter: blur(14px) saturate(170%);
      backdrop-filter: blur(14px) saturate(170%);
    }
  }

  .glass::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background: radial-gradient(500px 260px at 30% 0%, rgba(255,255,255,.06), transparent 60%);
    opacity:.85;
    mix-blend-mode: screen;
  }

  .glass-soft{
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: calc(var(--r) - 6px);
  }

  /* ---------------------------
     Top bar / navigation
     (maps to your legacy .title-nav and also supports .topnav if used)
  --------------------------- */
  :where(.title-nav, .topnav){
    position: sticky;
    top: 0;
    z-index: 90;
    padding-top: var(--stickyTop);
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(8,8,8,.55);
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    :where(.title-nav, .topnav){
      -webkit-backdrop-filter: blur(18px) saturate(170%);
      backdrop-filter: blur(18px) saturate(170%);
    }
  }

  /* Better nav link legibility */
  :where(nav p, nav a){
    color: rgba(255,255,255,.76) !important;
  }

  /* ---------------------------
     Menus (slide panels)
  --------------------------- */
  :where(.menu, .user-menu){
    background: rgba(255,255,255,.03) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.55) !important;
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    :where(.menu, .user-menu){
      -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
      backdrop-filter: blur(16px) saturate(170%) !important;
    }
  }

  :where(.menu a, .user-menu a){
    border-radius: 14px;
    color: rgba(255,255,255,.86) !important;
    transition: transform .18s ease, background .2s ease, border-color .2s ease;
  }
  :where(.menu a:hover, .user-menu a:hover){
    transform: translateY(-1px);
    background: rgba(255,255,255,.05) !important;
  }

  /* ---------------------------
     Buttons (non-destructive, maps to your existing CTA/cookie buttons)
  --------------------------- */
  :where(button, input[type="submit"], input[type="button"], .cta-button, .phone-button,
         .accept-button-cookies-banner, .reject-button-cookies-banner, .preferences-button-cookies-banner,
         .about-button-cookies-banner, .button-cookies){
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.86);
    font-weight: 900;
    letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  :where(button:hover, input[type="submit"]:hover, input[type="button"]:hover,
         .cta-button:hover, .phone-button:hover,
         .accept-button-cookies-banner:hover, .reject-button-cookies-banner:hover,
         .preferences-button-cookies-banner:hover, .about-button-cookies-banner:hover,
         .button-cookies:hover){
    transform: translateY(-2px);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.16);
  }
  :where(button:active, input[type="submit"]:active, input[type="button"]:active,
         .cta-button:active, .phone-button:active,
         .accept-button-cookies-banner:active, .reject-button-cookies-banner:active,
         .preferences-button-cookies-banner:active, .about-button-cookies-banner:active,
         .button-cookies:active){
    transform: translateY(0) scale(.99);
  }

  /* Primary “accept” intent */
  :where(.accept-button-cookies-banner){
    border-color: rgba(var(--rgb-sky), .26) !important;
    background: rgba(var(--rgb-sky), .10) !important;
  }
  :where(.accept-button-cookies-banner:hover){
    border-color: rgba(var(--rgb-sky), .36) !important;
    background: rgba(var(--rgb-sky), .14) !important;
  }

  /* Secondary / reject intent */
  :where(.reject-button-cookies-banner){
    border-color: rgba(var(--rgb-red), .20) !important;
    background: rgba(var(--rgb-red), .10) !important;
  }
  :where(.reject-button-cookies-banner:hover){
    border-color: rgba(var(--rgb-red), .32) !important;
    background: rgba(var(--rgb-red), .14) !important;
  }

  /* ---------------------------
     Inputs
  --------------------------- */
  :where(input, select, textarea){
    color: rgba(255,255,255,.92);
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  :where(input::placeholder, textarea::placeholder){
    color: rgba(255,255,255,.45);
  }
  :where(input:focus, select:focus, textarea:focus){
    border-color: rgba(var(--rgb-sky), .35);
    box-shadow: 0 0 0 4px rgba(var(--rgb-sky), .10);
    background: rgba(0,0,0,.16);
  }

  /* ---------------------------
     Dropdowns
  --------------------------- */
  :where(.dropdown-content){
    background: rgba(10,10,10,.70);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    box-shadow: 0 22px 90px rgba(0,0,0,.55);
    overflow: hidden;
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    :where(.dropdown-content){
      -webkit-backdrop-filter: blur(16px) saturate(170%);
      backdrop-filter: blur(16px) saturate(170%);
    }
  }

  /* ---------------------------
     FAQ + Help widgets (turn into glass cards)
  --------------------------- */
  :where(.help-widget, .help-content, .open-faq-item, .faq-item, .faq-master-toggle){
    background: rgba(255,255,255,.03) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: var(--r) !important;
    box-shadow: 0 18px 60px rgba(0,0,0,.30) !important;
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    :where(.help-widget, .help-content, .open-faq-item, .faq-item, .faq-master-toggle){
      -webkit-backdrop-filter: blur(14px) saturate(170%) !important;
      backdrop-filter: blur(14px) saturate(170%) !important;
    }
  }
  :where(.help-widget:hover, .open-faq-item:hover){
    background: rgba(var(--rgb-sky), .07) !important;
    border-color: rgba(var(--rgb-sky), .26) !important;
    transform: translateY(-1px);
  }

  /* ---------------------------
     Modal (2FA, etc.)
  --------------------------- */
  :where(.modal){
    background-color: rgba(0,0,0,.65) !important;
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    :where(.modal){
      -webkit-backdrop-filter: blur(8px) saturate(140%);
      backdrop-filter: blur(8px) saturate(140%);
    }
  }
  :where(.modal-content){
    background: rgba(255,255,255,.03) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 22px !important;
    box-shadow: 0 30px 120px rgba(0,0,0,.70) !important;
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    :where(.modal-content){
      -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
      backdrop-filter: blur(18px) saturate(170%) !important;
    }
  }

  /* ---------------------------
     Footer
  --------------------------- */
  :where(footer, .footer-nav){
    color: rgba(255,255,255,.62) !important;
  }

  /* ---------------------------
     Focus / a11y
  --------------------------- */
  :where(a, button, input, select, textarea, summary):focus-visible{
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--rgb-sky), .10);
    border-color: rgba(var(--rgb-sky), .35);
  }

  /* ---------------------------
     Small screens polish
  --------------------------- */
  @media (max-width: 520px){
    :root{ --gap: 12px; --r: 18px; }
    :where(.title-nav){ padding-top: calc(8px + var(--safe-top)); }
    :where(.dropdown-content){ border-radius: 14px; }
    :where(input, select, textarea){ border-radius: 12px; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
  }
}
/* end @layer fxglass */