:root{
  /* Surfaces & text */
  --cb-bg: #0f1218;
  --cb-bg-2: #131826;
  --cb-text: #f3f6ff;
  --cb-muted: #b7c2d6;
  --cb-line: rgba(255,255,255,.12);
  --cb-overlay: rgba(6,8,12,.55);

  /* Accents */
  --cb-accent: #8b5cf6;     /* primary accent */
  --cb-accent-2: #22c1c3;   /* subtle secondary for gradients */
  --cb-accept: #16a34a;
  --cb-accept-2: #22c55e;
  --cb-reject: #2b2f3c;

  /* Shape & effects */
  --cb-radius: 16px;
  --cb-radius-lg: 20px;
  --cb-blur: 14px;
  --cb-shadow: 0 24px 80px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.04) inset;

  /* Spacing */
  --cb-pad-x: clamp(16px, 3vw, 26px);
  --cb-pad-y: clamp(14px, 2.2vw, 22px);
  --cb-gap: clamp(12px, 2vw, 18px);

  /* Typography */
  --cb-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;

  /* Z-index */
  --cb-z: 2147483000; /* very high to sit above most UI */
}

/* Utility: visually hidden (used by live region) */
.visually-hidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* Print: hide */
@media print{
  #cookie-banner,
  #cookie-preferences,
  #cookie-overlay{ display:none !important; }
}

/* -------------------------
   Overlay
   ------------------------- */
.cookie-overlay{
  position:fixed; inset:0;
  background:var(--cb-overlay);
  -webkit-backdrop-filter:saturate(140%) blur(2px);
  backdrop-filter:saturate(140%) blur(2px);
  opacity:0; visibility:hidden;
  transition:opacity .28s ease, visibility .28s ease;
  z-index:calc(var(--cb-z) - 1);
}
.cookie-overlay.visible{
  opacity:1; visibility:visible;
}

/* -------------------------
   Banner (bottom, floating card)
   ------------------------- */
.cookie-banner{
  position:fixed;
  left: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px);
  z-index:var(--cb-z);
  font-family:var(--cb-font);
  pointer-events:none;
  opacity:0;
  transform: translateY(18px) scale(.98);
  transition: transform .38s cubic-bezier(.2,.9,.2,1), opacity .38s ease;
      width: fit-content;
    justify-self: center;
}
.cookie-banner.visible{
  pointer-events:auto;
  opacity:1;
  transform: translateY(0) scale(1);
}
.cookie-banner .cookie-popup{
  color:var(--cb-text);
  background: #0a0716;
  border:1px solid var(--cb-line);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow);
  -webkit-backdrop-filter: blur(var(--cb-blur));
  backdrop-filter: blur(var(--cb-blur));
  padding: var(--cb-pad-y) var(--cb-pad-x);
  display:grid;
  gap: var(--cb-gap);
  justify-self: center;
}

/* Content */
#cookie-banner-desc {
  line-height:1.6;
  font-size: clamp(14px, 1.6vw, 16px);
  color:var(--cb-text);
  margin-bottom: 20px;
}
#cookie-banner .cookie-credit{
  color:var(--cb-muted) !important;
  font-size:12px !important;
  line-height:1.4;
  justify-self: center;
  padding: 7px;
  border: 1px solid #27004f;
  border-radius: 9px;
  background: #0e1231;
}
#cookie-banner .cookie-credit a{
  color:inherit;
  text-decoration: none;
}

/* Actions layout */
.cookie-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top: 2px;
  justify-self: center;
}

/* Buttons — base */
.cookie-actions button,
#saveCookiePreferences,
#cookie-preferences button{
  -webkit-tap-highlight-color: transparent;
  appearance:none;
  border:0;
  border-radius:12px;
  padding:11px 14px;
  font-family:var(--cb-font);
  font-weight:600;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  will-change: transform;
  outline: none;
  width: fit-content;
  justify-self: center;
  color:white;

}

/* Button variants */
#acceptCookies{
  background: rebeccapurple;
  color:white;
}
#acceptCookies:hover{ transform: translateY(-1px); }
#acceptCookies:active{ transform: translateY(0); }

#rejectCookies{
  background: rebeccapurple;
  color: white;
  border:1px solid rgba(255,255,255,.06);
}
#rejectCookies:hover{ transform: translateY(-1px); }
#rejectCookies:active{ transform: translateY(0); }

#openPreferences{
  background: rebeccapurple;
  color: white;
  border:1px solid var(--cb-line);
}
#openPreferences:hover{
  border-color:rgba(255,255,255,.22);
  transform: translateY(-1px);
}
#openPreferences:active{ transform: translateY(0); }

#cookie-policy-link{
  background: transparent;
  color: var(--cb-muted);
  border:1px dashed rgba(255,255,255,.18);
}
#cookie-policy-link:hover{
  color: var(--cb-text);
  border-style: solid;
  transform: translateY(-1px);
}
#cookie-policy-link:active{ transform: translateY(0); }

/* Focus styles */
.cookie-actions button:focus-visible,
#saveCookiePreferences:focus-visible,
#openPreferences:focus-visible,
#rejectCookies:focus-visible,
#acceptCookies:focus-visible,
#cookie-policy-link:focus-visible{
  outline: 2px solid transparent;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.12),
    0 0 0 4px color-mix(in oklab, var(--cb-accent) 70%, white 30%);
}

/* -------------------------
   Preferences Dialog (centered modal)
   ------------------------- */
.cookie-preferences{
  position: fixed;
  z-index: var(--cb-z);
  top: 50%;
  left: 50%;
  width: min(820px, calc(100vw - 28px));
  max-height: min(86vh, 820px);
  transform: translate(-50%, calc(-50% + 8px)) scale(.985);
  opacity: 0;
  visibility: hidden;
  pointer-events:none;

  display:grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;

  color: var(--cb-text);
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(139,92,246,.09) 0%, rgba(139,92,246,0) 60%),
    var(--cb-bg);
  border:1px solid var(--cb-line);
  border-radius: clamp(16px, 2.6vw, 22px);
  box-shadow: var(--cb-shadow);
  -webkit-backdrop-filter: blur(var(--cb-blur));
  backdrop-filter: blur(var(--cb-blur));

  overflow: hidden;
  transition: opacity .28s ease, transform .34s cubic-bezier(.2,.9,.2,1), visibility .28s ease;
  font-family: var(--cb-font);
  padding: 0; /* inner sections manage their own paddings */
}

/* Open state */
.cookie-preferences.open{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events:auto;
}

/* Header (h2) */
#cookie-prefs-title{
  margin:0;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height:1.25;
  letter-spacing:.2px;
  padding: calc(var(--cb-pad-y) + 2px) var(--cb-pad-x);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 80%),
    linear-gradient(90deg, color-mix(in oklab, var(--cb-accent) 40%, transparent) 0%, transparent 60%);
  border-bottom: 1px solid var(--cb-line);
  color: white;
}

/* Header description */
#cookie-prefs-desc{
  margin:0;
  padding: 6px var(--cb-pad-x) 6px var(--cb-pad-x);
  color: var(--cb-muted);
  font-size: clamp(13px, 1.5vw, 14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Scrollable content area (no box on groups — clean layout) */
.cookie-group{
  margin: 0;
  padding: calc(var(--cb-pad-y) + 2px) var(--cb-pad-x) var(--cb-pad-y) var(--cb-pad-x);
  border:0;
  min-height: 0;
  overflow:auto;
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px 0;
}
.cookie-group legend{ display:none; }

/* Toggle rows */
.cookie-toggle-label{
  display:flex;
  align-items:center;
  gap: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 0 8px 0;
  user-select:none;
  position:relative;
  isolation:isolate;
}
.cookie-toggle-label:hover{
  color: var(--cb-text);
}
.cookie-toggle-label:focus-within{
  outline: 2px solid transparent;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.08),
    0 0 0 6px color-mix(in oklab, var(--cb-accent) 55%, white 25%);
  border-radius: 14px;
  padding-left: 8px;
  margin-left: -8px;
}

/* Toggle description */
.cookie-desc{
  margin: 0 0 10px 56px; 
  color: var(--cb-muted);
  font-size: 13px;
  line-height:1.55;
}

/* Hide native checkbox, keep accessibility */
.cookie-toggle-label > input[type="checkbox"]{
  position:absolute;
  opacity:0;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px; border:0; padding:0;
}

/* Switch */
.toggle-switch{
  --h: 24px;
  --w: 44px;
  inline-size: var(--w);
  block-size: var(--h);
  border-radius: calc(var(--h) * 0.75);
  background: #1b2233;
  border:1px solid rgba(255,255,255,.12);
  position:relative;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
  flex: 0 0 var(--w);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.04);
}
.toggle-switch::after{
  --size: 18px;
  content:"";
  position:absolute;
  top: 50%;
  left: 3px;
  translate: 0 -50%;
  inline-size: var(--size);
  block-size: var(--size);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #cfd8ea 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: left .22s ease, background .22s ease, box-shadow .22s ease;
}

/* Checked */
.cookie-toggle-label > input[type="checkbox"]:checked + .toggle-switch{
  background: linear-gradient(180deg, color-mix(in oklab, var(--cb-accent) 70%, #000 0%) 0%, color-mix(in oklab, var(--cb-accent) 55%, #000 0%) 100%);
  border-color: color-mix(in oklab, var(--cb-accent) 60%, white 10%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 2px rgba(139,92,246,.18);
}
.cookie-toggle-label > input[type="checkbox"]:checked + .toggle-switch::after{
  left: calc(100% - 3px - 18px);
}

/* Disabled (e.g., necessary cookies) */
.cookie-toggle-label > input[disabled] + .toggle-switch{
  filter: grayscale(.2) brightness(.9);
  opacity:.8;
  cursor: not-allowed;
}
.cookie-toggle-label > input[disabled] ~ *{
  cursor: not-allowed;
}

/* Footer actions (Save button area) */
#saveCookiePreferences{
  margin: 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--cb-accent) 88%, white 0%) 0%, color-mix(in oklab, var(--cb-accent) 68%, black 0%) 100%);
  color: #0a0912;
  box-shadow: 0 10px 28px color-mix(in oklab, var(--cb-accent) 25%, black 75%);
  border-radius: 0 0 clamp(16px, 2.6vw, 22px) clamp(16px, 2.6vw, 22px);
  padding: 14px 18px;
  font-size: 15px;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.07);
}
#saveCookiePreferences:hover{ transform: translateY(-1px); }
#saveCookiePreferences:active{ transform: translateY(0); }

/* Credit area inside preferences (already present in HTML) */
.cookie-preferences .cookie-credit{
  color: var(--cb-muted) !important;
  padding: 10px var(--cb-pad-x) 14px var(--cb-pad-x);
  margin: 0;
  border-top: none;
  background: none;
  font-size: 12px !important;
}

/* -------------------------
   Responsive adjustments
   ------------------------- */
@media (max-width: 720px){
  .cookie-actions{
    gap:8px;
  }
  .cookie-actions button{
    flex: 1 1 auto;
    min-width: 42%;
    text-align:center;
    padding: 12px 14px;
  }
  #cookie-policy-link{
    flex-basis: 100%;
    order: 4;
  }
  .cookie-desc{
    margin-left: 0; 
  }
}

/* -------------------------
   Motion preferences
   ------------------------- */
@media (prefers-reduced-motion: reduce){
  .cookie-banner,
  .cookie-preferences,
  .cookie-overlay,
  .cookie-actions button,
  #saveCookiePreferences{
    transition: none !important;
  }
  .cookie-banner{
    transform:none !important; opacity:1 !important;
  }
  .cookie-preferences{
    transform: translate(-50%, -50%) !important;
  }
}

/* -------------------------
   Small polish & states
   ------------------------- */
#cookie-banner a{
  color: color-mix(in oklab, var(--cb-accent) 75%, white 25%);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#cookie-banner a:hover{
  color: var(--cb-text);
}

#cookie-banner [data-reveal],
#cookie-preferences [data-reveal]{
  will-change: transform, opacity;
}

@media (max-width: 380px){
  .cookie-banner{
    left: 10px; right: 10px; bottom: 10px;
  }
}


.cookie-banner :where(a):focus-visible,
.cookie-preferences :where(a):focus-visible{
  outline: 2px solid transparent;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.12),
    0 0 0 4px color-mix(in oklab, var(--cb-accent) 70%, white 30%);
  border-radius: 8px;
}


html.scroll-lock, body.scroll-lock{
  overflow: hidden;
}




#manage-cookies-inline{
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: yellow;
  color: black;
  font: 600 14px/1 var(--cb-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif);
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 10px 26px rgba(255,214,10,.28),
    0 1px 0 rgba(255,255,255,.35) inset;
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease, background-color .2s ease;
}

#manage-cookies-inline::before{
  content: "";
  inline-size: 16px;
  block-size: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M4 3h11l5 5v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v16h14V9h-5a1 1 0 0 1-1-1V5H5zm9 0v2h2V5h-2zM7 13h10v6H7v-6z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M4 3h11l5 5v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v16h14V9h-5a1 1 0 0 1-1-1V5H5zm9 0v2h2V5h-2zM7 13h10v6H7v-6z'/></svg>") no-repeat center / contain;
}


#manage-cookies-inline:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 32px rgba(255,214,10,.34),
    0 1px 0 rgba(255,255,255,.45) inset;
  filter: saturate(1.05);
}
#manage-cookies-inline:active{
  transform: translateY(0);
  box-shadow:
    0 6px 18px rgba(255,214,10,.28),
    0 0 0 rgba(0,0,0,0) inset;
}


#manage-cookies-inline:focus-visible{
  outline: 2px solid transparent;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.18),
    0 0 0 5px var(--cb-inline-ring),
    0 10px 26px rgba(255,214,10,.28);
}


#manage-cookies-inline[disabled],
#manage-cookies-inline[aria-disabled="true"]{
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


@media (max-width: 520px){
  #manage-cookies-inline{
    width: 100%;
    justify-content: center;
  }
}



:root{

  --cb-z-root: 2147483000;

  --cb-z-banner: 2147483700; 
  --cb-z-overlay: 2147483600; 
  --cb-z-dialog: 2147483800; 
}

.cookie-banner{ z-index: var(--cb-z-banner) !important; }
.cookie-overlay{ z-index: var(--cb-z-overlay) !important; }
.cookie-preferences{ z-index: var(--cb-z-dialog) !important; }

.cookie-preferences.open ~ #cookie-banner{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(6px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}


#cookie-banner,
#cookie-banner:focus,
#cookie-banner:focus-visible,
#cookie-banner .cookie-popup:focus,
#cookie-banner .cookie-popup:focus-visible{
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important; 
}







.cookie-preferences{
  visibility: visible !important;               
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, calc(-50% + 8px)) scale(.985) !important;
  transition: opacity .34s cubic-bezier(.2,.9,.2,1),
              transform .34s cubic-bezier(.2,.9,.2,1) !important;
}
.cookie-preferences.open{
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.cookie-preferences.open ~ #cookie-banner{
  visibility: visible !important;            
  opacity: 0 !important;                       
  pointer-events: none !important;              
  transform: translateY(6px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}




html:has(.cookie-overlay.visible),
html:has(.cookie-preferences.open){
  overflow: hidden !important;
}


html.scroll-lock:not(:has(.cookie-overlay.visible)):not(:has(.cookie-preferences.open)){
  overflow: auto !important;
}
body.scroll-lock:not(:has(.cookie-overlay.visible)):not(:has(.cookie-preferences.open)){
  overflow: auto !important;
}



/* inert-fallback: kui brauser ei toeta 'inert', väldi klikke ja TABimist */
[inert] { pointer-events: none !important; }
[inert] * { pointer-events: none !important; }


/* Hide the focus border/ring on the preferences panel (only the panel) */
.cookie-preferences:focus,
.cookie-preferences:focus-visible{
  outline: none !important;
  box-shadow: var(--cb-shadow) !important; /* keep base shadow, drop focus ring layers */
}

/* If you previously highlighted the whole panel when any child is focused, neutralize it */
.cookie-preferences.open:has(:focus),
.cookie-preferences.open:has(:focus-visible){
  box-shadow: var(--cb-shadow) !important;
}