/* Shared by public HTML and the browser SPA. Never reset global .btn/.wrap.
   Two light layers after pilulka.cz: a floating card (.cookie-bar) and the
   Nastavení modal (<dialog>.cookie-dialog). Literal colors: the SPA maps --ink
   to its own theme, and a dark theme must not turn this text white on white.
   Sizes are rem so the SPA font scale applies. */
/* Keep the page usable before a choice, including short mobile login pages. */
html:has(#cm-cookie-bar:not([hidden])){scroll-padding-bottom:calc(var(--cm-cookie-bar-space,70vh) + 24px)}
body:has(#cm-cookie-bar:not([hidden])){padding-bottom:calc(var(--cm-cookie-bar-space,70vh) + 24px)}

/* ---- card ---- */
.cookie-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:60;box-sizing:border-box;width:min(47.5rem,calc(100% - 48px));max-height:calc(100vh - 48px);overflow-y:auto;padding:24px 28px 20px;background:#fff;color:#334155;border-radius:20px;box-shadow:0 12px 40px rgba(20,40,33,.18);font-family:var(--sans,'Hanken Grotesk',system-ui,sans-serif);font-size:0.875rem;line-height:1.5;text-align:left}
.cookie-bar[hidden]{display:none}
.cookie-bar h2{margin:0 0 8px;padding-right:40px;font-family:inherit;font-size:1.125rem;font-weight:700;line-height:1.4;color:#17130f}
.cookie-bar p{margin:0;font-size:0.875rem;line-height:1.5}
.cookie-bar a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* ODMÍTNOUT: a real button that reads as an underlined word in the sentence. */
.cookie-bar .cookie-inline{position:relative;display:inline;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;text-transform:uppercase;cursor:pointer}
/* × of a card opened while a choice is stored; same look as the dialog's. */
.cookie-bar .cookie-close{position:absolute;top:12px;right:12px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:8px;background:none;color:#475569;font-family:inherit;font-size:1.25rem;line-height:1;cursor:pointer}
.cookie-bar .cookie-close:hover{background:#f1f5f9}
.cookie-bar .cookie-close[hidden]{display:none}
/* Hit area of the inline word on touch screens: 44px tall, look and layout unchanged. */
.cookie-bar .cookie-actions{display:flex;align-items:center;gap:12px;margin-top:18px}
.cookie-bar .cookie-details{margin-right:auto;font-size:0.8125rem;color:#475569}
.cookie-bar .cookie-status{margin-top:10px}

/* ---- buttons (card and dialog) ---- */
:is(.cookie-bar,.cookie-dialog) .btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:11.25rem;height:44px;min-height:44px;padding:0 20px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#17130f;font-family:inherit;font-size:0.9375rem;font-weight:700;line-height:1;white-space:nowrap;text-align:center;cursor:pointer;box-shadow:none}
:is(.cookie-bar,.cookie-dialog) .btn:hover{background:#f8fafc}
:is(.cookie-bar,.cookie-dialog) .btn.cookie-brand{border:2px solid #0073a8;color:#0073a8}
:is(.cookie-bar,.cookie-dialog) .btn.cookie-brand:hover{background:#f0f9ff}
.cookie-dialog .btn[hidden]{display:none}
:is(.cookie-bar,.cookie-dialog) :is(a,button,input):focus-visible{outline:2px solid #0073a8;outline-offset:2px}
.cookie-status{border-left:3px solid #0096dc;padding:2px 0 2px 10px;font-size:0.8125rem;color:#17130f}
.cookie-status[hidden]{display:none}

/* ---- Nastavení dialog ---- */
.cookie-dialog:not([open]){display:none}
/* Header and footer stay pinned; only the middle scrolls on short viewports. */
.cookie-dialog[open]{display:flex;flex-direction:column}
.cookie-dialog{box-sizing:border-box;inset:0;margin:auto;width:min(40rem,calc(100% - 32px));max-width:none;max-height:calc(100% - 32px);padding:0;border:0;border-radius:12px;background:#fff;color:#333;box-shadow:0 8px 32px rgba(0,0,0,.18);overflow:hidden;font-family:var(--sans,'Hanken Grotesk',system-ui,sans-serif);text-align:left}
.cookie-dialog::backdrop{background:rgba(0,0,0,.5)}
.cookie-dialog-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e2e8f0}
.cookie-dialog-head h2{margin:0;font-family:inherit;font-size:1rem;font-weight:600;line-height:1.4;color:#17130f}
.cookie-dialog-close{box-sizing:border-box;flex:none;width:44px;height:44px;margin:-12px -12px -12px 0;padding:0;border:0;border-radius:8px;background:none;color:#475569;font-family:inherit;font-size:1.25rem;line-height:1;cursor:pointer}
.cookie-dialog-close:hover{background:#f1f5f9}
.cookie-dialog-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 24px}
.cookie-dialog-body .cookie-status{margin:14px 0 4px}
.cookie-dialog .cookie-purpose{display:flex;gap:24px;align-items:flex-start;padding:18px 0;border-bottom:1px solid #eef2f6;font-size:0.8125rem;line-height:1.6}
.cookie-dialog .cookie-purpose-text{flex:1;margin:0}
.cookie-dialog .cookie-purpose-text b{color:#17130f}
.cookie-dialog .cookie-purpose-text label{cursor:pointer}
.cookie-dialog .cookie-note{margin:0;padding:14px 0;font-size:0.75rem;line-height:1.55;color:#4a453d}
.cookie-dialog .cookie-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Native checkbox drawn as a switch. The unchecked track is #857f75 (3.9:1
   against white, WCAG 1.4.11); the checked track is the brand blue. */
.cookie-dialog .cookie-switch{appearance:none;-webkit-appearance:none;flex:none;margin:2px 0 0;width:44px;height:26px;border-radius:999px;background:#857f75;position:relative;cursor:pointer;transition:background .15s}
.cookie-dialog .cookie-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.cookie-dialog .cookie-switch:checked{background:#0096dc}
.cookie-dialog .cookie-switch:checked::after{left:21px}
/* Uložit výběr (quiet) on the left, Odmítnout volitelné and Povolit vše (brand) on the
   right; DOM order = that visual order. Phones stack them in reverse (column-reverse):
   Povolit vše, Odmítnout volitelné, Uložit výběr. */
.cookie-dialog-actions{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 24px 20px;border-top:1px solid #e2e8f0}
.cookie-dialog-actions #cm-cookie-save{margin-right:auto}

/* Server-sync error inside the application: the dialog opens without `showModal`
   (no backdrop, page stays usable) and sits at the bottom like the card. */
.cookie-dialog:not(:modal){position:fixed;inset:auto auto 24px 50%;transform:translateX(-50%);margin:0;z-index:61;box-shadow:0 12px 40px rgba(20,40,33,.28)}
@media(pointer:coarse){
  .cookie-bar .cookie-inline::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .cookie-bar .cookie-details{display:inline-flex;align-items:center;min-height:44px}
  /* 44px hit area around the 44x26 track: transparent border, painted track unchanged */
  .cookie-dialog .cookie-switch{box-sizing:content-box;border:9px solid transparent;background-clip:padding-box;margin:-7px -9px -9px -9px}
}
@media(max-width:640px){
  html:has(#cm-cookie-bar:not([hidden])){scroll-padding-bottom:var(--cm-cookie-bar-space,70vh)}
  body:has(#cm-cookie-bar:not([hidden])){padding-bottom:var(--cm-cookie-bar-space,70vh)}
  .cookie-bar{left:0;right:0;bottom:0;transform:none;width:auto;max-height:80vh;padding:20px 16px 16px;border-radius:20px 20px 0 0}
  .cookie-bar .cookie-close{top:8px;right:8px}
  .cookie-bar .cookie-actions{flex-direction:column;align-items:stretch;gap:10px}
  .cookie-bar .btn{width:100%;min-width:0}
  .cookie-bar #cm-cookie-accept{order:1}
  .cookie-bar #cm-cookie-settings{order:2}
  .cookie-bar .cookie-details{order:3;margin:4px auto 0;text-align:center;justify-content:center}
  .cookie-dialog{width:100%;max-height:82%;margin:auto 0 0;border-radius:20px 20px 0 0}
  .cookie-dialog:not(:modal){inset:auto 0 0 0;transform:none;width:100%;margin:0}
  .cookie-dialog-actions{flex-direction:column-reverse;align-items:stretch}
  .cookie-dialog .btn{width:100%;min-width:0}
}