/* Inner Circle Huniverse — organisms/cookie-banner.css
   Süti banner stílusa — a BMSoft1024_Kviz consent-popup.js-hez tartozó CSS, az ICH saját
   design tokenjeivel, de SAJÁT (nem .glass) háttérrel a jobb olvashatóság érdekében: a `.glass`
   7%-os opacitása a színes hero-háttéren szinte teljesen áttetsző lett volna, ezért itt egy
   közel-átlátszatlan sötét kártya-hátteret használunk. A gombok elrendezése (Beállítások fent,
   Elfogadom alatta, mindkettő teljes szélességű) a kvíz projekt mobilmenü-mintáját követi. */
#cookieBanner{position:fixed;left:0;right:0;bottom:env(safe-area-inset-bottom,0px);z-index:2147483647;padding:var(--sp-md);
  padding-bottom:calc(var(--sp-md) + env(safe-area-inset-bottom,0px));
  display:flex;justify-content:center;align-items:flex-end;
  max-height:100vh;max-height:100dvh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* Scroll-through megelőzés: a banneren belüli görgetés NE terjedjen át az oldalra.
     touch-action:none = a banner külső része (padding) nem indít scroll-t.
     overscroll-behavior:contain = a banner görgetése nem "chain-el" a body-ra. */
  touch-action:none;overscroll-behavior:contain}
#cookieBanner .banner-inner{max-width:1180px;width:100%;margin:0 auto;
  background:rgba(18,13,8,.97);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 -10px 40px -10px rgba(0,0,0,.6);
  max-height:calc(100vh - var(--sp-md) * 2);overflow-y:auto;
  /* A belső kártya engedje a függőleges görgetést (ha túl magas), de ne chain-eljen. */
  touch-action:pan-y;overscroll-behavior:contain}
@supports (max-height:100dvh){
  #cookieBanner{max-height:100dvh}
  #cookieBanner .banner-inner{max-height:calc(100dvh - var(--sp-md) * 2)}
}
#cookieBanner .banner-title{font-size:var(--fs-lg);font-weight:700;margin:0 0 var(--sp-sm);color:var(--text)}
#cookieBanner .banner-text{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-md);line-height:1.6}

/* Gombok: a kvíz projekt mintájára flex-wrap, jobbra igazítva (széles bannerben sorba kerülnek). */
#cookieBanner .banner-actions{display:flex;flex-wrap:wrap;gap:var(--sp-sm);align-items:center;justify-content:flex-end}
#cookieBanner .banner-actions .btn{justify-content:center}

#cookieBanner .banner-settings{display:none;margin-top:var(--sp-md);padding-top:var(--sp-md);border-top:1px solid var(--line)}
#cookieBanner.open-settings .banner-settings{display:block}
#cookieBanner .setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md);padding:var(--sp-sm) 0}
#cookieBanner .setting-row.locked{opacity:.6}
#cookieBanner .setting-label{font-weight:600;color:var(--text)}
#cookieBanner .setting-desc{font-size:var(--fs-xs);color:var(--muted)}
#cookieBanner .setting-toggle{display:flex;align-items:center;gap:var(--sp-xs);flex-shrink:0}

/* Toggle switch komponens (atoms-szintű, de csak itt használt egyelőre) */
.switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch-track{position:absolute;inset:0;background:var(--glass-2);border:1px solid var(--line);
  border-radius:var(--r-full);cursor:pointer;transition:background .15s}
.switch-track::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:2px;
  background:var(--muted);border-radius:50%;transition:transform .15s,background .15s}
.switch input:checked + .switch-track{background:var(--grad-brand);border-color:transparent}
.switch input:checked + .switch-track::before{transform:translateX(20px);background:#1a1005}
.switch input:disabled + .switch-track{cursor:not-allowed;opacity:.7}

@media(max-width:640px){
  #cookieBanner{padding:var(--sp-sm);padding-bottom:calc(var(--sp-sm) + env(safe-area-inset-bottom,0px))}
  #cookieBanner .banner-inner{max-width:100%;padding:var(--sp-md);max-height:calc(100vh - var(--sp-sm) * 2)}
  #cookieBanner .banner-title{font-size:var(--fs-base)}
  #cookieBanner .banner-text{font-size:var(--fs-xs);margin-bottom:var(--sp-sm)}
  #cookieBanner .banner-actions{flex-direction:column;align-items:stretch;gap:var(--sp-xs)}
  #cookieBanner .banner-actions .btn{width:100%;justify-content:center}
  #cookieBanner .setting-desc{font-size:var(--fs-xs)}
  #cookieBanner .setting-row{padding:var(--sp-xs) 0}
}
@supports (max-height:100dvh) and (max-width:640px){
  #cookieBanner .banner-inner{max-height:calc(100dvh - var(--sp-sm) * 2)}
}