/* =====================================================================
   Cache × Cookiebot — Swift/Edge banner restyle  (v5: variable-driven)
   ---------------------------------------------------------------------
   ▸ EDIT THE CONTROL PANEL BELOW to resize/repad everything. You can also
     paste a block straight out of the visual tuner — it overrides these.
   ▸ Every selector is specificity-hardened (html body … / doubled id) so
     it wins even when Cookiebot's stylesheet loads after this one.
   ===================================================================== */

/* ============== CONTROL PANEL — edit these values ================== */
html body #CybotCookiebotDialog{
  /* — sizing & spacing — */
  --cb-width:480px;          /* card width                              */
  --cb-radius:16px;          /* corner radius                           */
  --cb-pad-x:24px;           /* card side padding (compact view)        */
  --cb-pad-top:24px;         /* card top padding                        */
  --cb-pad-bottom:20px;      /* card bottom padding                     */
  --cb-row-gap:10px;         /* gap in the button row                   */
  --cb-btn-pad-y:11px;       /* button padding — vertical               */
  --cb-btn-pad-x:14px;       /* button padding — horizontal             */
  --cb-title-size:16px;      /* heading font size                       */
  --cb-text-size:13px;       /* body font size                          */
  --cb-detail-pad-x:24px;    /* card side padding when details are open */

  /* — brand colours / font — */
  --cache-cream:#F2F0EA;
  --cache-white:#FFFFFF;
  --cache-bronze:#A8843C;
  --cache-ink:#141414;
  --cache-ink-soft:#6B6660;
  --cache-line:#E6E1D6;
  --cache-font:inherit;      /* inherit the website's font (e.g. Lausanne) */
}
/* ============== END CONTROL PANEL ================================== */

/* Inherit the site font on every node so the banner matches the page. */
html body #CybotCookiebotDialog,
html body #CybotCookiebotDialog *{ font-family:inherit !important; }

/* ---- Card: position + shell -------------------------------------- */
/* bottom-LEFT (clears the Intercom bubble). For bottom-RIGHT swap inset
   to:  inset:auto 24px 24px auto !important;                          */
html body #CybotCookiebotDialog.CybotEdge{
  position:fixed !important;
  inset:auto auto 24px 24px !important;
  transform:none !important;                 /* kill the slideup translate-centering */
  width:var(--cb-width) !important;
  max-width:calc(100vw - 48px) !important;
  max-height:calc(100vh - 48px) !important;
  margin:0 !important;
  background:var(--cache-white) !important;
  border:1px solid var(--cache-line) !important;
  border-radius:var(--cb-radius) !important;
  box-shadow:0 24px 48px -28px rgba(20,18,14,.4) !important;
  overflow:hidden !important;
}
html body #CybotCookiebotDialogBodyUnderlay{ background:rgba(20,18,14,.28) !important; }

/* ---- THE inset control: padding lives on the card itself ---------
   Everything inside (text, buttons, tabs, detail content) aligns to this
   single padding, so the detail text always matches the button block.
   The doubled id beats Cookiebot's own padding; it is NOT scoped to
   .CybotEdge because Cookiebot drops that class when details open.     */
html body #CybotCookiebotDialog#CybotCookiebotDialog{
  box-sizing:border-box !important;
  padding:var(--cb-pad-top) var(--cb-pad-x) var(--cb-pad-bottom) !important;
}
html body #CybotCookiebotDialog#CybotCookiebotDialog.cache-detail-open{
  padding-left:var(--cb-detail-pad-x) !important;
  padding-right:var(--cb-detail-pad-x) !important;
}
/* Zero Cookiebot's own inner insets so the card padding is the ONLY
   horizontal/vertical inset (otherwise they stack and double up).      */
html body #CybotCookiebotDialog .CybotCookiebotDialogContentWrapper{ margin:0 !important; padding:0 !important; }
html body #CybotCookiebotDialogHeader{ display:none !important; }
html body #CybotCookiebotDialogPoweredbyLink{ display:none !important; }
html body #CybotCookiebotDialogPoweredbyImage{ width:24px !important; height:auto !important; }
html body #CybotCookiebotDialogBody,
html body #CybotCookiebotDialogBodyContent,
html body #CybotCookiebotDialogTabContent{ padding-left:0 !important; padding-right:0 !important; }
html body #CybotCookiebotDialog #CybotCookiebotDialogTabContent{ margin-left:0 !important; margin-right:0 !important; }
html body #CybotCookiebotDialog .CybotCookiebotScrollContainer{ padding:0 !important; }
html body #CybotCookiebotDialogFooter{ padding:0 !important; }
html body #CybotCookiebotDialogDetailFooter{ padding:0 !important; }

/* ---- Typography --------------------------------------------------- */
html body #CybotCookiebotDialogBodyContentTitle,
html body #CybotCookiebotDialogDetailBodyContentTitle{
  color:var(--cache-ink) !important;
  font-weight:500 !important;
  font-size:var(--cb-title-size) !important;
  letter-spacing:-.015em !important;
  margin:0 0 8px !important;
}
html body #CybotCookiebotDialogBodyContentText,
html body #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonDescription,
html body #CybotCookiebotDialogDetailBodyContentTextOverview{
  color:var(--cache-ink-soft) !important;
  font-size:var(--cb-text-size) !important;
  line-height:1.6 !important;
}

/* ---- Links + "Show details" -------------------------------------- */
html body #CybotCookiebotDialog a,
html body #CybotCookiebotDialog .CybotCookiebotDialogBodyLink,
html body #CybotCookiebotDialogBodyEdgeMoreDetailsLink{
  color:var(--cache-bronze) !important;
  text-decoration:none !important;
  font-size:12.5px !important;
  font-weight:500 !important;
}
html body #CybotCookiebotDialog a:hover{ text-decoration:underline !important; }
/* "Show details" — leftmost item in the button row, muted text link.
   The companion JS moves this node INTO the button box; order:0 keeps it
   on the far left, the pills group fills the rest on the right.        */
/* Hidden until the companion JS relocates it INTO the button row. This
   kills the flash where Cookiebot first paints it on its own line above
   the buttons, then it jumps into the row when the script runs.          */
html body #CybotCookiebotDialog #CybotCookiebotDialogBodyEdgeMoreDetails{
  display:none !important;
}
html body #CybotCookiebotDialog #CybotCookiebotDialogBodyButtons #CybotCookiebotDialogBodyEdgeMoreDetails{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  flex:0 0 auto !important;
  width:auto !important;
  order:0 !important;
  margin:0 !important;
  white-space:nowrap !important;
}
html body #CybotCookiebotDialog #CybotCookiebotDialogBodyEdgeMoreDetailsLink{
  color:var(--cache-ink-soft) !important;
  font-weight:500 !important;
}
html body #CybotCookiebotDialog #CybotCookiebotDialogBodyEdgeMoreDetailsLink:hover{
  color:var(--cache-ink) !important;
}
/* Remove Cookiebot's clunky chevron after "Show details" (the ::after
   border-arrow plus any svg/img icon) — keep it minimal, just the text. */
html body #CybotCookiebotDialog #CybotCookiebotDialogBodyEdgeMoreDetailsLink::after,
html body #CybotCookiebotDialog #CybotCookiebotDialogBodyEdgeMoreDetailsLink::before{
  display:none !important;
  content:none !important;
}
html body #CybotCookiebotDialog #CybotCookiebotDialogBodyEdgeMoreDetails svg,
html body #CybotCookiebotDialog #CybotCookiebotDialogBodyEdgeMoreDetailsLink svg,
html body #CybotCookiebotDialog #CybotCookiebotDialogBodyEdgeMoreDetails img{
  display:none !important;
}

/* ---- Layout: stack text OVER buttons at every width -------------- */
/* :not(.CybotCookiebotDialogHide) is critical — without it we force the
   Consent panel visible on the Details/About tabs too (it leaks in). */
html body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBody:not(.CybotCookiebotDialogHide),
html body #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogContentWrapper,
html body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyContent{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  float:none !important;
}
html body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyContentText,
html body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyContentTitle{
  width:auto !important;
  max-width:100% !important;
}
html body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter{
  display:block !important;
  position:static !important;
  width:100% !important;
  max-width:100% !important;
  float:none !important;
}

/* ---- Button row: [Show details]  [Deny] [Allow all] -------------- */
html body #CybotCookiebotDialog #CybotCookiebotDialogBodyButtons{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;        /* keep all three on one line */
  align-items:center !important;
  gap:var(--cb-row-gap) !important;
  width:100% !important;
  max-width:100% !important;
  position:static !important;
  float:none !important;
}
html body #CybotCookiebotDialogBodyButtonsWrapper{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:var(--cb-row-gap) !important;
  order:1 !important;
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;             /* allow the pills to shrink to fit */
}
html body #CybotCookiebotDialog #CybotCookiebotDialogBodyButtonsWrapper .CybotCookiebotDialogBodyButton{
  flex:1 1 0 !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  border-radius:999px !important;
  font-weight:500 !important;
  font-size:13px !important;
  padding:var(--cb-btn-pad-y) var(--cb-btn-pad-x) !important;
  white-space:nowrap !important;
  min-height:0 !important;
  cursor:pointer !important;
  transition:all .15s ease !important;
}

/* Primary — Allow all / Allow selection: solid ink, sits on the right */
html body #CybotCookiebotDialogBodyButtonAccept,
html body #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection{
  background:var(--cache-ink) !important;
  color:var(--cache-white) !important;
  border:1px solid var(--cache-ink) !important;
  order:2 !important;
}
html body #CybotCookiebotDialogBodyButtonAccept:hover,
html body #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover{ opacity:.92 !important; }

/* Secondary — Deny / Customize: ghost pill */
html body #CybotCookiebotDialogBodyButtonDecline,
html body #CybotCookiebotDialogBodyLevelButtonCustomize{
  background:transparent !important;
  color:var(--cache-ink) !important;
  border:1px solid var(--cache-line) !important;
  order:1 !important;
}
html body #CybotCookiebotDialogBodyButtonDecline:hover,
html body #CybotCookiebotDialogBodyLevelButtonCustomize:hover{ background:var(--cache-cream) !important; }

/* ---- Toggles: ON = bronze, OFF = warm gray ----------------------- */
html body #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider{ background-color:#DEDACF !important; }
html body #CybotCookiebotDialog input:checked+.CybotCookiebotDialogBodyLevelButtonSlider{ background-color:var(--cache-bronze) !important; }
html body #CybotCookiebotDialog input:disabled:checked+.CybotCookiebotDialogBodyLevelButtonSlider{ background-color:var(--cache-bronze) !important; opacity:.55 !important; }

/* ---- Detail view tabs (Consent / Details / About) ---------------- */
html body #CybotCookiebotDialog .CybotCookiebotDialogNavItemLink{
  color:var(--cache-ink-soft) !important;
  font-size:12.5px !important;
  border-bottom:2px solid transparent !important;
}
html body #CybotCookiebotDialog .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive{
  color:var(--cache-ink) !important;
  border-bottom-color:var(--cache-bronze) !important;
}

/* ---- Cleanups ----------------------------------------------------- */
html body #CybotCookiebotDialogPoweredbyLink,
html body #CybotCookiebotDialog .CybotCookiebotDialogPoweredbyLink{ opacity:.38 !important; }
html body .CybotCookiebotScrollbarContainer{ display:none !important; }
html body #CybotCookiebotDialog .CybotCookiebotScrollArea{ scrollbar-width:none !important; }
html body #CybotCookiebotDialog .CybotCookiebotScrollArea::-webkit-scrollbar{ display:none !important; }

/* ---- Hold the compact card together at >=1280px ------------------ */
/* Cookiebot's Edge banner switches to a full-width BAR at >=1280px; the
   doubled id outranks its @media rules and keeps our compact card.     */
html body #CybotCookiebotDialog#CybotCookiebotDialog.CybotEdge{
  min-width:0 !important;
  width:var(--cb-width) !important;
  right:auto !important;
  inset:auto auto 24px 24px !important;
  transform:none !important;
  max-width:calc(100vw - 48px) !important;
  max-height:calc(100vh - 48px) !important;
}
@media (min-width:1280px){
  html body #CybotCookiebotDialog#CybotCookiebotDialog.CybotEdge{
    min-width:0 !important;
    width:var(--cb-width) !important;
    right:auto !important;
    inset:auto auto 24px 24px !important;
    transform:none !important;
  }
  html body #CybotCookiebotDialog#CybotCookiebotDialog .CybotCookiebotDialogContentWrapper{
    width:100% !important; max-width:100% !important; min-width:0 !important;
  }
  html body #CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBody:not(.CybotCookiebotDialogHide){ display:block !important; }
  html body #CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogFooter{
    position:static !important; width:100% !important; max-width:100% !important;
  }
  html body #CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyButtons{
    position:static !important; width:100% !important; max-width:100% !important; flex-direction:row !important;
  }
  html body #CybotCookiebotDialog#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonsWrapper{
    width:100% !important; flex-direction:row !important;
  }
}

/* ---- Detail / "Show details" view: stay anchored in the corner ---- */
/* Cookiebot drops the .CybotEdge class when details open, so these rules
   must NOT depend on it. We keep the panel in the SAME bottom-left corner
   (no centering) and let it grow upward and scroll internally.         */
@media (min-width:601px){
  html body #CybotCookiebotDialog#CybotCookiebotDialog.cache-detail-open{
    width:var(--cb-width) !important;
    max-width:calc(100vw - 48px) !important;
    max-height:calc(100vh - 48px) !important;
    inset:auto auto 24px 24px !important;
    right:auto !important;
    transform:none !important;
    margin:0 !important;
  }
  html body #CybotCookiebotDialog.cache-detail-open .CybotCookiebotDialogContentWrapper,
  html body #CybotCookiebotDialog.cache-detail-open #CybotCookiebotDialogDetailBody,
  html body #CybotCookiebotDialog.cache-detail-open #CybotCookiebotDialogDetailBodyContent{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  html body #CybotCookiebotDialog.cache-detail-open #CybotCookiebotDialogDetailBody{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}
@media (min-width:1280px){
  html body #CybotCookiebotDialog#CybotCookiebotDialog.cache-detail-open{
    width:var(--cb-width) !important;
    right:auto !important;
    inset:auto auto 24px 24px !important;
    transform:none !important;
    margin:0 !important;
  }
}

/* ---- Mobile: full-width card ------------------------------------- */
@media (max-width:600px){
  html body #CybotCookiebotDialog.CybotEdge{
    inset:auto 12px 12px 12px !important;
    width:auto !important;
    max-width:none !important;
    border-radius:var(--cb-radius) !important;
  }
}
