/**
 * Cookiebot banner — Travinger skin.
 *
 * Cookiebot's Free plan has no banner theming in the dashboard, so the default
 * ships as generic blue system-font boxes that look nothing like the storefront.
 * The dialog is ordinary DOM though, so it can be restyled from here.
 *
 * `!important` is used liberally and on purpose: Cookiebot injects its own
 * stylesheet after the theme's and sets several of these properties inline, so
 * ordinary specificity loses. Every rule below is cosmetic — no positioning,
 * z-index, or display logic is touched, because those carry the dialog's focus
 * trapping and its show/hide behaviour.
 *
 * Selectors are Cookiebot's stable public IDs (they have survived their 3.x/4.x
 * releases). If a vendor update ever renames them the banner falls back to
 * Cookiebot's own styling — ugly, but never broken or invisible.
 */

/* ---- Shell ------------------------------------------------------------- */

#CybotCookiebotDialog {
  font-family: var(--smyk-font) !important;
  border-radius: var(--smyk-radius-lg) !important;
  border: 1px solid var(--smyk-border) !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .18) !important;
  overflow: hidden !important;
  color: var(--smyk-navy) !important;
}

#CybotCookiebotDialog * {
  font-family: var(--smyk-font) !important;
}

/* Cookiebot's own logo block — keep it (attribution is required on Free) but
   stop it competing with the brand for attention. */
#CybotCookiebotDialogPoweredbyLink,
.CybotCookiebotDialogPoweredbyLink {
  opacity: .45 !important;
}

/* ---- Type -------------------------------------------------------------- */

#CybotCookiebotDialogBodyContentTitle {
  color: var(--smyk-navy) !important;
  font-weight: var(--fw-bold, 700) !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
}

#CybotCookiebotDialogBodyContentText,
#CybotCookiebotDialogDetailBodyContentTextAbout {
  color: var(--smyk-gray) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* ---- Tabs (Consent / Details / About) ---------------------------------- */

#CybotCookiebotDialogNav {
  border-bottom: 1px solid var(--smyk-border) !important;
}

.CybotCookiebotDialogNavItemLink {
  color: var(--smyk-gray) !important;
  font-weight: var(--fw-semibold, 600) !important;
  border-bottom: 2px solid transparent !important;
}

.CybotCookiebotDialogNavItemLink:hover {
  color: var(--smyk-navy) !important;
}

.CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
  color: var(--smyk-orange) !important;
  border-bottom-color: var(--smyk-orange) !important;
}

/* ---- Category toggles -------------------------------------------------- */

.CybotCookiebotDialogBodyLevelButtonDescription {
  color: var(--smyk-navy) !important;
  font-weight: var(--fw-semibold, 600) !important;
  font-size: 14px !important;
}

.CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #c9c9c9 !important;
  border-radius: var(--smyk-radius-pill) !important;
}

input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: var(--smyk-orange) !important;
}

/* "Necessary" is locked on. Showing it in full brand crimson implies it is a
   choice the visitor made; muted reads as "always on", which is the truth. */
#CybotCookiebotDialogBodyLevelButtonNecessary:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #b9b9b9 !important;
}

/* ---- Buttons ----------------------------------------------------------- */

#CybotCookiebotDialogBodyButtonDecline,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialogBodyLevelButtonAccept,
#CybotCookiebotDialogBodyButtonAccept {
  border-radius: var(--smyk-radius-pill) !important;
  min-height: 48px !important;
  padding: 12px 26px !important;
  font-weight: var(--fw-bold, 700) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  transition: background-color .15s ease, color .15s ease !important;
}

/* Primary — the accept path. */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialogBodyLevelButtonAccept,
#CybotCookiebotDialogBodyButtonAccept {
  background-color: var(--smyk-orange) !important;
  border-color: var(--smyk-orange) !important;
  color: var(--smyk-white) !important;
}

#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover,
#CybotCookiebotDialogBodyLevelButtonAccept:hover,
#CybotCookiebotDialogBodyButtonAccept:hover {
  background-color: var(--smyk-orange-hover) !important;
  border-color: var(--smyk-orange-hover) !important;
}

/* Secondary — Deny and Allow selection.
   Deliberately given equal visual weight to each other and left clearly legible
   rather than greyed out. A decline that is harder to see than accept is a dark
   pattern, and regulators treat it as one. */
#CybotCookiebotDialogBodyButtonDecline,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
  background-color: var(--smyk-white) !important;
  border-color: var(--smyk-border) !important;
  color: var(--smyk-navy) !important;
}

#CybotCookiebotDialogBodyButtonDecline:hover,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover {
  background-color: var(--smyk-gray-light) !important;
  border-color: #d0d0d0 !important;
}

/* ---- Links + focus ----------------------------------------------------- */

#CybotCookiebotDialog a,
#CybotCookiebotDialogBodyEdgeMoreDetailsLink {
  color: var(--smyk-orange) !important;
  text-underline-offset: 2px !important;
}

#CybotCookiebotDialog a:hover {
  color: var(--smyk-orange-hover) !important;
}

/* Keyboard users must still be able to see where they are. */
#CybotCookiebotDialog button:focus-visible,
#CybotCookiebotDialog a:focus-visible,
#CybotCookiebotDialog input:focus-visible + .CybotCookiebotDialogBodyLevelButtonSlider {
  outline: 3px solid var(--smyk-navy) !important;
  outline-offset: 2px !important;
}

/* ---- Floating "renew consent" badge — hidden --------------------------- */

/*
 * Cookiebot drops a fixed circular badge in the bottom-left corner once consent
 * has been given, so the visitor can reopen the dialog. On this site it sits
 * directly on top of the sticky add-to-cart bar on product pages, covering the
 * price and plan.
 *
 * Hiding it is only safe because the withdraw-consent path still exists: the
 * footer "Cookie Settings" link calls Cookiebot.renew() via
 * assets/js/simyak-cookiebot-bridge.js. Do NOT remove that link while this rule
 * is in place — a consent banner with no way to change your mind afterwards is
 * a compliance problem, not a tidier layout.
 *
 * Several id/class spellings are covered because Cookiebot has renamed this
 * element across releases.
 */
#CookiebotWidget,
.CookiebotWidget,
[id^="CookiebotWidget"],
#CookiebotWidget-widgetContent {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---- Small screens ----------------------------------------------------- */

@media (max-width: 749px) {
  #CybotCookiebotDialog {
    border-radius: var(--smyk-radius-lg) var(--smyk-radius-lg) 0 0 !important;
  }

  #CybotCookiebotDialogBodyContentTitle {
    font-size: 18px !important;
  }

  /* Full-width stacked buttons: 48px tall and edge to edge is the reliable
     mobile tap target, and it stops "Deny" being squeezed narrower than the
     other two on a 375px screen. */
  #CybotCookiebotDialogBodyButtonDecline,
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
    width: 100% !important;
    margin: 4px 0 !important;
  }
}