/* ============================================================================
 * glass.css — DESIGN SYSTEM COMUN (tokens + primitive glass + chrome header/footer)
 * Consumat de TOATE stream-urile (sandbox/blog/cont/pagini). Se incarca INAINTEA
 * lui hero.css. PROPRIETAR: stream sandbox — NU edita din alt stream fara acord.
 * Contine: variabile tema, footer glass box, card + cta, header pill/social/cont/
 * disc/logo, refractie liquid-glass, dark-mode glass, toggle tema, ink, underline.
 * ============================================================================ */

/* ============ TEMA: LIGHT / DARK (variabile) ============
 * Comutata prin html[data-theme="light|dark"] (JS: localStorage + system pref).
 * Glass-ul + culoarea continutului din pill-uri se iau din aceste variabile,
 * ca sa avem doua "moduri" de sticla care se potrivesc cu tema. */
:root,
html[data-theme="light"] {
  --glass-bg:        rgba(255, 255, 255, 0.50);   /* glass alb translucid (header + footer) */
  --glass-border:    rgba(255, 255, 255, 0.55);   /* muchie mai definita */
  --glass-highlight: rgba(255, 255, 255, 0.60);   /* luciu de sus mai clar */
  --glass-shadow:    rgba(9, 16, 44, 0.20);
  --glass-blur:      22px;
  --glass-ink:       #121a4c;   /* continutul pill-urilor (text/iconite) */
  --hero-overlay:    rgba(18, 26, 76, 0.30);
  --page-bg:         #ffffff;    /* fundal pagini simple (non-homepage) - LIGHT */
}
html[data-theme="dark"] {
  --glass-bg:        rgb(151 151 151 / 50%);   /* glass gri translucid (header + footer) */
  --glass-border:    rgba(255, 255, 255, 0.24);
  --glass-highlight: rgba(255, 255, 255, 0.30);
  --glass-shadow:    rgba(0, 0, 0, 0.45);
  --glass-blur:      22px;
  --glass-ink:       #f3f5ff;
  --hero-overlay:    rgba(6, 10, 32, 0.52);
  --page-bg:         #0b1024;    /* fundal pagini simple - DARK (navy inchis) */
}

/* Banc de test / pagini simple: fundal plin controlat de tema (nu transparent ca
 * homepage-ul cu video). Bate regula globala "background: transparent" prin
 * specificitate (body.cb-plain-bg > body). */
body.cb-plain-bg { background: var(--page-bg) !important; min-height: 100vh; }

/* ============ FOOTER: fara bg; link-uri in GLASS BOX; brand plain ============ */
/* Kill bg-ul temei (#efefef) - specificitate mai mare (body ...) ca sa bata regula
 * temei care se incarca dupa hero.css. Include si .full-page-inner-wrap. */
body #footer-outer,
body #footer-outer .full-page-inner-wrap,
#footer-outer #footer-widgets {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* footer FULL WIDTH; continutul aliniat stanga cu logo-ul din header (~30px) */
#footer-outer #footer-widgets .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 30px;
  padding-right: 40px;
}
/* randul: [glass box link-uri, stanga] .......... [brand plain, dreapta] */
#footer-outer #footer-widgets .container .row {
  display: flex !important;
  align-items: center;
  justify-content: center;   /* box-ul de footer CENTRAT */
  gap: 28px;
  flex-wrap: wrap;
  margin: 0 !important;
}
/* GLASS BOX cu coloanele de link-uri (WIDGET-URILE TEMEI - scalarea lor ramane) */
.cb-foot-links {
  flex: 0 1 auto;
  display: flex;
  gap: 90px;
  padding: 42px 90px;
  border-radius: 42px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
          backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 5px 28px #080d2a3b;
}
.cb-foot-links > .col.span_3 { width: auto !important; flex: 0 0 auto; margin: 0 !important; }

/* (banda brand separata eliminata: copyright/rights/by stau acum sub logo, in .cb-foot-brandcol) */
/* LOGO icon+text = prima coloana IN box (.cb-foot-brandcol), stivuite.
 * SVG-urile au DOAR viewBox (fara width/height intrinsec) -> width:auto ar colapsa la 0
 * intr-o coloana shrink-to-fit. Fixam latimea prin aspect-ratio (din viewBox) + height. */
#footer-outer .cb-foot-brandwidget { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
/* SVG-urile au DOAR viewBox (fara width/height) -> dimensiuni EXPLICITE in px (40px inaltime,
 * latimea din raportul viewBox). !important + specificitate ca sa batem regulile temei pe
 * imaginile din footer-widget; opacity:1 in caz ca nectar le anima la 0. */
#footer-outer .cb-foot-brandcol img.cb-logo-icon,
#footer-outer .cb-foot-brandcol img.cb-logo-text {
  display: block !important; margin: 0 !important; max-width: none !important;
  height: 40px !important; opacity: 1 !important;
}
#footer-outer .cb-foot-brandcol img.cb-logo-icon { width: 59px !important; margin-bottom: 10px !important; }    /* 40 * 178.63/120.77 */
#footer-outer .cb-foot-brandcol img.cb-logo-text { width: 174px !important; }   /* 40 * 532.4/122.11 */
/* meta (copyright / rights / by) sub logo in .cb-foot-brandcol: stivuit vertical, stanga, discret */
.cb-foot-brandcol .cb-brand-meta { margin-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cb-foot-brandcol .cb-brand-meta p { font-size: 13px; line-height: 1.5; }
.cb-brand-meta-left, .cb-brand-meta-right { text-align: left; margin-top: 10px; }
#footer-outer #footer-widgets .col p { padding-bottom: 0 !important; }
.cb-brand-copy   { margin: 0; font-weight: 500; padding: 0; }
.cb-brand-rights { margin: 4px 0 0; font-weight: 500; }   /* copy -> rights (br) */
.cb-brand-by     { margin: 0; font-weight: 500; opacity: .7; }
.cb-foot-pay { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; }
.cb-pay { display: inline-flex; line-height: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.12)); }

/* ===== FOOTER RESPONSIVE (desktop = fix; sub 1000px stivuim si micsoram distantele) ===== */
@media (max-width: 999px) {
  #footer-outer #footer-widgets .container { padding-left: 20px; padding-right: 20px; }
  /* stiva verticala: glass box de link-uri SUS, brand DEDESUBT, centrate */
  #footer-outer #footer-widgets .container .row { flex-direction: column; align-items: stretch; gap: 32px; }
  /* coloanele de link-uri se rup 2x2 in interiorul glass box-ului */
  .cb-foot-links { flex-wrap: wrap; gap: 32px 48px; padding: 32px 36px; justify-content: space-between; }
  .cb-foot-links > .col.span_3 { flex: 1 1 40%; min-width: 160px; }
}
@media (max-width: 600px) {
  #footer-outer #footer-widgets .container { padding-left: 16px; padding-right: 16px; }
  /* coloanele stivuite una sub alta (o singura coloana) */
  .cb-foot-links { flex-direction: column; gap: 28px; padding: 28px 24px; border-radius: 28px; }
  .cb-foot-links > .col.span_3 { flex: 1 1 100%; min-width: 0; }
  .cb-foot-pay { justify-content: flex-start; }
}

/* CARD glass (theme-aware, in stilul nostru): imagine + corp (text + CTA) */
.cb-card {
  display: flex;
  gap: 18px;
  height: 100%;
  padding: 25px;
  border-radius: 30px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
          backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 5px 28px #080d2a3b;
}
.cb-card-media { flex: 0 0 33%; }
.cb-card-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 15px; display: block; }
.cb-card-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 10px; }
.cb-card-text { color: var(--glass-ink); font-size: 16px; line-height: 1.4; margin: 0; font-weight: 700; }

/* CTA = pastila glass cu sageata in disc (hover: sageata pleaca diagonal) */
.cb-cta {
  display: inline-flex; align-items: center; gap: 14px; align-self: flex-start;
  text-decoration: none; color: var(--glass-ink);
  padding: 5px 6px 5px 20px; border-radius: 100px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
          backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
}
.cb-cta__label { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.cb-cta__arrow {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--glass-ink); color: var(--page-bg, #fff);
}
.cb-cta__arrow svg { width: 18px; height: 18px; fill: currentColor; transition: transform .3s ease; }
.cb-cta:hover .cb-cta__arrow svg { transform: translate(3px, -3px); }

/* refractie liquid-glass pe card + CTA (ca restul), doar unde e suportat */
@supports (backdrop-filter: url("#cb-liquid-glass")) or (-webkit-backdrop-filter: url("#cb-liquid-glass")) {
  .cb-card,
  .cb-cta { backdrop-filter: url(#cb-liquid-glass) blur(calc(var(--glass-blur) * 0.5)) saturate(185%); }
}
/* cerneala footer = tema (navy in light, alb in dark); scalarea/fontul raman ale temei */
#footer-outer,
#footer-outer a,
#footer-outer h4,
#footer-outer p,
#footer-outer li { color: var(--glass-ink) !important; }
/* logo din footer adaptiv la tema (ca in header): amandoua piesele contin "logoCB" */
html[data-theme="dark"] #footer-outer img[src*="logoCB"] { filter: brightness(0) invert(1); }
/* ============ HEADER "3 PILL-URI + CERC" (logo | meniu | social | search) ============
 * Logo-ul nou (logoCB.svg) isi aduce pill-ul propriu in SVG: rect rotunjit
 * complet #f3f5ff cu continut navy. Restul componentelor primesc acelasi
 * fundal-pill si continut #121a4c. Bara de header = transparenta MEREU
 * (pill-urile plutesc, identice la top si la scroll - fara switch-ul alb). */

/* reglajele lui Daniel (DevTools), verbatim */
@media only screen and (min-width: 1000px) {
  #header-outer[data-full-width="true"] header > .container {
    padding: 0 40px 0 10px !important;
  }
  #header-outer #logo, #header-outer .logo-spacing {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    margin-left: 20px;
    position: relative !important;
  }
}
/* material: scoate margin-ul default de pe butoanele din header (social/search) */
body.material #header-outer:not([data-format=left-header]) #top nav > .buttons > li {
  margin: 0;
}
/* material: pozitia grupului de social (dreapta) - reglajul lui Daniel */
body.material #header-outer[data-full-width=true]:not([data-format=left-header]) #top nav > .buttons {
  margin-left: 28px;
  margin-top: 10px;
}
/* logo-spacing (spacer invizibil) ramane la 60px; logo-ul VIZIBIL e dimensionat
 * in pill mai jos (nu-l fortam la 60px aici, ca sa se vada glass-ul in jur). */
#header-outer .logo-spacing img { height: 60px !important; }

/* bara transparenta in ORICE stare (si scrollat) */
#header-outer,
#header-outer:not(.transparent) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

@media only screen and (min-width: 1000px) {
  /* toate componentele au INALTIMEA pill-ului de logo: 60px, aliniate cu
   * marginile lui (10px). Meniul se STRANGE pe continut (nu slab pe toata banda:
   * ul-ul era display:block in formatul centered-menu al temei). */

  /* 2. MENIU = pill CENTRAT (format centered-menu al temei). Contine linkurile +
   * cercurile search & tema in interior (PILL-IN-PILL). */
  #header-outer[data-format=centered-menu] #top .span_9 nav .sf-menu:not(.buttons) {
    display: flex !important;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    height: 60px;
    margin: 10px auto;   /* centrat singur (butonul Contul meu e ascuns, perechea margin-auto nu mai exista) */
    border-radius: 999px;
    padding: 0 10px 0 10px;     /* simetric: primul element e acum cercul home, ca cercurile din dreapta */
  }
  /* doar linkurile de meniu (au <a> direct in li); search/tema au <div><a>, nu prind */
  #header-outer nav > ul.sf-menu:not(.buttons) > li > a {
    line-height: 60px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 3. HOME + SEARCH + TEMA = cercuri glass IN pilula de meniu (pill-in-pill) */
  #header-outer .sf-menu:not(.buttons) > #home-btn,
  #header-outer .sf-menu:not(.buttons) > #search-btn,
  #header-outer .sf-menu:not(.buttons) > #theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    height: 60px;
    margin: 0 0 0 8px;
    list-style: none;
  }
  /* home = primul element -> margine la DREAPTA (separa de "MISIUNEA MEA"), nu la stanga */
  #header-outer .sf-menu:not(.buttons) > #home-btn { margin: 0 6px 0 0; }
  #header-outer .sf-menu:not(.buttons) > #home-btn > div,
  #header-outer .sf-menu:not(.buttons) > #search-btn > div,
  #header-outer .sf-menu:not(.buttons) > #theme-toggle-btn > div { display: inline-flex; }
  #header-outer .sf-menu:not(.buttons) > #home-btn a,
  #header-outer .sf-menu:not(.buttons) > #search-btn a,
  #header-outer .sf-menu:not(.buttons) > #theme-toggle-btn a {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    /* doar icon in cerc: fara border/umbra/glass; discul se adapteaza la rand
     * (navy-translucid pe rand deschis, albastru pe rand inchis) via --icon-disc */
    background: var(--icon-disc, rgba(255, 255, 255, 0.3)) !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }

  /* 4. SOCIAL = pill glass, in dreapta (pozitionat nativ de tema) */
  #header-outer #social-in-menu {
    display: inline-flex;
    align-items: center;
    height: 60px;
    border-radius: 999px;
    padding: 0 22px;
  }

  /* ===== GLASS (plat, modern): frost + refractie + hairline subtire. FARA sheen
   * gradient si FARA bevel inset (aia faceau butonul glossy anii 2000). ===== */
  #header-outer[data-format=centered-menu] #top .span_9 nav .sf-menu:not(.buttons),
  #header-outer #social-in-menu {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
            backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 5px 28px #080d2a3b;   /* umbra (reglaj Daniel) */
  }

  /* REFRACTIE REALA (ca Apple): backdrop-filter cu filtrul SVG feDisplacementMap
   * -> fundalul se INDOAIE prin sticla. DOAR unde e suportat (Chrome/Edge). Safari/
   * Firefox raman pe frost (-webkit-backdrop-filter de sus, neatins). */
  @supports (backdrop-filter: url("#cb-liquid-glass")) or (-webkit-backdrop-filter: url("#cb-liquid-glass")) {
    #header-outer[data-format=centered-menu] #top .span_9 nav .sf-menu:not(.buttons),
    #header-outer #social-in-menu {
      backdrop-filter: url(#cb-liquid-glass) blur(calc(var(--glass-blur) * 0.5)) saturate(185%);
    }
  }

  /* pill CONT = al doilea ul.sf-menu (primeste glass + forma pill AUTOMAT ca meniul).
   * Override pozitie: meniul are margin-left:auto, cont-menu margin-right:auto ->
   * autourile centreaza grupul [meniu][cont]; social ramane impins dreapta.
   * padding stramt dreapta (discul isi are marginea lui). */
  #header-outer[data-format=centered-menu] #top .span_9 nav .sf-menu.cb-cont-menu {
    margin: 10px;
    padding: 0 10px 0 10px;
  }

  /* 1. LOGO = FARA pill. Doar logo-ul (navy in light, alb in dark), vizibil mereu
   * (tema il tine la opacity:0 pana la scroll -> fortam opacity/visibility). */
  #header-outer #logo {
    display: inline-flex !important;
    align-items: center;
    height: 60px;
    box-sizing: border-box;
    opacity: 1 !important;
    visibility: visible !important;
  }
  #header-outer #logo img.stnd {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  #header-outer #logo img.starting-logo,
  #header-outer #logo img.dark-version { display: none !important; }
  #header-outer #logo img { height: 40px !important; width: auto !important; }
}

/* ADAPTARE LA FUNDAL (la scroll), NU la tema. Scriptul din _glass_toggle.php pune
 * pe #header-outer clasa cb-on-dark (rand inchis) / cb-on-light (rand deschis).
 * TOT continutul header-ului (text meniu, iconite, underline, logo) urmeaza:
 * fundal inchis -> cerneala deschisa; fundal deschis -> cerneala navy.
 * Realizat prin suprascrierea --glass-ink (mai specific decat tema -> castiga). */
#header-outer.cb-on-dark  { --glass-ink: #121a4c; --icon-disc: #14141429; }
#header-outer.cb-on-light { --glass-ink: #121a4c; --icon-disc: #121a4c29; }
/* logo (SVG <img>) urmeaza aceeasi clasa, dar prin filter (nu prin color) */
#header-outer.cb-on-dark  #logo img { filter: brightness(0) invert(1) !important; }
#header-outer.cb-on-light #logo img { filter: none !important; }

/* ===== DARK mode: glass-ul (header + footer) = text/logo/iconite/meniu ALB (#fff) +
 * refractie liquid-glass. Doar tenta de fundal ramane neagra. Cerinta Daniel. ===== */
html[data-theme="dark"] #header-outer.cb-on-dark,
html[data-theme="dark"] #footer-outer {
  --glass-ink: #ffffff;
  --icon-disc: #9c9c9cbd;
}
html[data-theme="dark"] #header-outer.cb-on-dark #logo img { filter: brightness(0) invert(1) !important; }
@media only screen and (min-width: 1000px) {
  @supports (backdrop-filter: url("#cb-liquid-glass")) or (-webkit-backdrop-filter: url("#cb-liquid-glass")) {
    html[data-theme="dark"] .cb-foot-links {
      backdrop-filter: url(#cb-liquid-glass) blur(calc(var(--glass-blur) * 0.5)) saturate(185%);
    }
  }
}
/* footer dark: underline link-uri ALB + heading-uri (h4) ALB (scopat pe dark). */
html[data-theme="dark"] #footer-outer[data-link-hover="underline"][data-custom-color="true"] #footer-widgets ul:not([class*="nectar_blog_posts"]) a:not(.tag-cloud-link):not(.nectar-button),
html[data-theme="dark"] #footer-outer[data-link-hover="underline"] #footer-widgets .textwidget a:not(.nectar-button) {
  background-image: linear-gradient(to right, #fff 0, #fff 100%);
}
html[data-theme="dark"] #footer-outer #footer-widgets .widget h4,
html[data-theme="dark"] #footer-outer .col .widget_recent_entries span,
html[data-theme="dark"] #footer-outer .col .recent_posts_extra_widget .post-widget-text span {
  color: #ffffff !important;
}
html[data-theme="dark"] #footer-outer,
html[data-theme="dark"] #footer-outer a:not(.nectar-button) {
  color: #ffffff !important;
}

/* iconita soare/luna dupa tema (arata ce comuti). SVG bold, ia --glass-ink. */
.cb-theme-toggle { display: inline-flex; align-items: center; justify-content: center; }
.cb-theme-toggle .cb-ico-sun,
.cb-theme-toggle .cb-ico-moon { display: inline-flex; color: var(--glass-ink); }
/* iconul home (cerc ca search) = ia cerneala temei */
#home-btn .cb-ico-home { display: inline-flex; color: var(--glass-ink); }
html[data-theme="light"] .cb-theme-toggle .cb-ico-sun { display: none; }
html[data-theme="dark"]  .cb-theme-toggle .cb-ico-moon { display: none; }

/* continutul pill-urilor: culoarea de "cerneala" a temei (navy in light, deschis
 * in dark) -> se potriveste cu glass-ul indiferent de mod */
#header-outer .sf-menu > li > a,
#header-outer .sf-menu > li > a .menu-title-text,
#header-outer #social-in-menu a i,
#header-outer #search-btn a,
#header-outer #search-btn a span,
#header-outer #search-btn a span[class*="search"]:before,
#header-outer .mobile-search span[class*="search"] {
  color: var(--glass-ink) !important;
}
/* underline-ul animat al meniului (Salient animated_underline) = culoarea temei
 * (#121a4c hardcodat, specificitate MARE: 2 ID-uri + .transparent). Il legam de
 * --glass-ink -> navy in light, ALB in dark. Prefix html[data-theme] ca sa batem
 * specificitatea regulii temei; acoperim si starea scrollata (fara .transparent). */
html[data-theme] #header-outer[data-lhe="animated_underline"].transparent #top nav > ul > li > a .menu-title-text:after,
html[data-theme] #header-outer[data-lhe="animated_underline"] #top nav > ul > li > a .menu-title-text:after,
html[data-theme] #header-outer.transparent #top nav > ul > li[class*="button_bordered"] > a:before,
html[data-theme] #header-outer #top nav > ul > li[class*="button_bordered"] > a:before,
html[data-theme] #header-outer.transparent .nectar-mobile-only.mobile-header li a .menu-title-text:after,
html[data-theme] #header-outer .nectar-mobile-only.mobile-header li a .menu-title-text:after {
  border-color: var(--glass-ink) !important;
  background-color: var(--glass-ink) !important;
}

/* ===== PILULA CONT (public): logat -> avatar, IDENTIC cu zona de cont =====
 * Aceleasi valori ca account.css (care nu se incarca pe public) -> pilula arata la fel
 * pe public si in contul-meu. Fara accent inventat: evidentierea = avatarul, ca in cont. */
#header-outer[data-lhe=animated_underline] #top nav .sf-menu.cb-cont-menu > li > a {
  display: inline-flex; align-items: center; gap: 9px;
  margin-left: 10px; margin-right: 0;
}
#header-outer .cb-cont-avatar {
  width: 40px; height: 40px; border-radius: 999px; flex: 0 0 auto;
  object-fit: cover; border: 1px solid var(--glass-border);
  margin-bottom: 0;   /* tema pune margin-bottom pe img -> anulat ca avatarul sa nu impinga pilula */
}
/* neautentificat: acelasi cerc+icon ca home (disc --icon-disc, cerneala temei), cu icon user */
#header-outer .cb-cont-icon {
  width: 40px; height: 40px; border-radius: 999px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--icon-disc, rgba(255, 255, 255, 0.3));
  color: var(--glass-ink);
}
/* underline animat suprimat pe pilula de cont (ca in zona de cont) */
#header-outer #top nav .sf-menu.cb-cont-menu > li > a .menu-title-text:after { display: none !important; }

/* ===== BANNER COOKIE CONSENT (apare doar cand consent_enabled ON; fixed jos, glass in tema) ===== */
.cb-consent {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 100001; width: min(680px, calc(100% - 32px));
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
          backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 40px #080d2a4a;
  border-radius: 20px; color: var(--glass-ink);
}
.cb-consent[hidden] { display: none; }
.cb-consent__inner {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 20px;
}
.cb-consent__text { margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.5; color: var(--glass-ink); }
.cb-consent__text a { color: var(--glass-ink); text-decoration: underline; }
.cb-consent__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cb-consent__btn {
  padding: 10px 22px; border-radius: 100px; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; cursor: pointer; border: 1px solid var(--glass-border);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cb-consent__btn:hover { transform: translateY(-1px); }
.cb-consent__btn--ghost  { background: transparent; color: var(--glass-ink); }
.cb-consent__btn--accept { background: var(--glass-ink); color: var(--page-bg, #fff); border-color: var(--glass-ink); }
@media (max-width: 600px) {
  .cb-consent__inner { padding: 14px 16px; }
  .cb-consent__actions { width: 100%; }
  .cb-consent__btn { flex: 1 1 auto; }
}