/*
 * SafeLagoon cookie banner skin for CookieConsent v3.1.0.
 * Visuals follow the Product Design spec of 22 Oct 2026
 * (/workspace/cookie-consent/design/SPEC.md, build/cookie-consent.css),
 * mapped onto CookieConsent's markup. Vendor CSS stays untouched.
 *
 * Desktop (>=768px): 400px card bottom-right, above the HelpCrunch launcher.
 * Mobile (<=767px): full-width bottom bar; settings open as a bottom sheet.
 * One button style for every button (equal weight). No floating icon.
 */
#cc-main {
  --sl-cc-font: "IBM Plex Sans", Arial, sans-serif;
  --sl-cc-ink: #2D2C32;
  --sl-cc-ink-2: #4A4F5C;
  --sl-cc-brand: #B97CFF;
  --sl-cc-brand-ink: #5909B5;
  --sl-cc-brand-strong: #7829D2;
  --sl-cc-btn-bg: #F3EAFF;
  --sl-cc-btn-bg-hover: #E6D3FF;
  --sl-cc-btn-bg-active: #D9BFFF;
  --sl-cc-line: #E4E6EB;
  --sl-cc-off: #7C8190;
  --sl-cc-focus: #2F77EE;
  --sl-cc-radius-card: 20px;
  --sl-cc-radius-btn: 10px;
  --sl-cc-shadow: 0 14px 30px rgba(62, 62, 80, .25);
  --sl-cc-launcher-h: 60px; /* HelpCrunch launcher today; 48px once the smaller one ships */
  --sl-cc-gap: 16px;

  --cc-font-family: var(--sl-cc-font);
  --cc-bg: #FFFFFF;
  --cc-primary-color: var(--sl-cc-ink);
  --cc-secondary-color: var(--sl-cc-ink-2);
  --cc-link-color: var(--sl-cc-brand-ink);
  --cc-modal-border-radius: var(--sl-cc-radius-card);
  --cc-btn-border-radius: var(--sl-cc-radius-btn);
  --cc-z-index: 2147483000; /* above HelpCrunch (16777000) */
  --cc-overlay-bg: rgba(6, 30, 71, .45);
  --cc-separator-border-color: var(--sl-cc-line);

  --cc-btn-primary-bg: var(--sl-cc-btn-bg);
  --cc-btn-primary-color: var(--sl-cc-brand-ink);
  --cc-btn-primary-border-color: var(--sl-cc-brand);
  --cc-btn-primary-hover-bg: var(--sl-cc-btn-bg-hover);
  --cc-btn-primary-hover-color: var(--sl-cc-brand-ink);
  --cc-btn-primary-hover-border-color: var(--sl-cc-brand-strong);
  --cc-btn-secondary-bg: var(--sl-cc-btn-bg);
  --cc-btn-secondary-color: var(--sl-cc-brand-ink);
  --cc-btn-secondary-border-color: var(--sl-cc-brand);
  --cc-btn-secondary-hover-bg: var(--sl-cc-btn-bg-hover);
  --cc-btn-secondary-hover-color: var(--sl-cc-brand-ink);
  --cc-btn-secondary-hover-border-color: var(--sl-cc-brand-strong);

  --cc-toggle-on-bg: var(--sl-cc-brand-strong);
  --cc-toggle-off-bg: #FFFFFF;
  --cc-toggle-on-knob-bg: #FFFFFF;
  --cc-toggle-off-knob-bg: var(--sl-cc-off);
  --cc-toggle-readonly-bg: #FFFFFF;
  --cc-toggle-readonly-knob-bg: var(--sl-cc-off);
  --cc-pm-toggle-border-radius: 999px;
  --cc-cookie-category-block-bg: transparent;
  --cc-cookie-category-block-border: transparent;
  --cc-cookie-category-block-hover-bg: transparent;
  --cc-cookie-category-block-hover-border: transparent;
  --cc-footer-bg: #FFFFFF;
  --cc-footer-border-color: var(--sl-cc-line);
}
#cc-main, #cc-main * { letter-spacing: 0; }

/* ---------- links ---------- */
#cc-main a.sl-cc-link {
  color: var(--sl-cc-brand-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  background: none;
  border-radius: 4px;
}
#cc-main a.sl-cc-link:hover { text-decoration-thickness: 2px; }

/* ---------- the ONE button style (first layer + settings) ---------- */
#cc-main .cm__btn,
#cc-main .pm__btn {
  min-height: 44px;
  height: auto;
  margin: 0 !important;
  padding: 6px 8px;
  min-width: 0;
  font: 600 15px/1.15 var(--sl-cc-font);
  overflow-wrap: anywhere;
  hyphens: auto;
  color: var(--sl-cc-brand-ink);
  background: var(--sl-cc-btn-bg);
  border: 1.5px solid var(--sl-cc-brand);
  border-radius: var(--sl-cc-radius-btn);
  white-space: normal;
  text-transform: none;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
#cc-main .cm__btn:hover,
#cc-main .pm__btn:hover {
  background: var(--sl-cc-btn-bg-hover);
  border-color: var(--sl-cc-brand-strong);
  color: var(--sl-cc-brand-ink);
}
#cc-main .cm__btn:active,
#cc-main .pm__btn:active { background: var(--sl-cc-btn-bg-active); }
#cc-main .cm__btn:focus-visible,
#cc-main .pm__btn:focus-visible,
#cc-main .pm__close-btn:focus-visible,
#cc-main a.sl-cc-link:focus-visible,
#cc-main .section__toggle:focus-visible ~ .toggle__icon {
  outline: 3px solid var(--sl-cc-focus);
  outline-offset: 2px;
}

/* ---------- first layer: desktop card ---------- */
#cc-main .cm.cm--box {
  width: 400px;
  max-width: calc(100vw - 48px) !important;
  right: 24px;
  bottom: calc(var(--sl-cc-launcher-h) + var(--sl-cc-gap));
  border: 1px solid var(--sl-cc-line);
  border-radius: var(--sl-cc-radius-card);
  box-shadow: var(--sl-cc-shadow);
}
#cc-main .cm .cm__body { flex-direction: column; padding: 20px; }
#cc-main .cm .cm__texts { padding: 0; }
#cc-main .cm .cm__title {
  margin: 0 0 6px;
  padding: 0;
  font: 600 16px/22px var(--sl-cc-font);
  color: var(--sl-cc-ink);
}
#cc-main .cm .cm__title + .cm__desc { margin-top: 0; }
#cc-main .cm .cm__desc {
  margin: 0;
  padding: 0;
  max-height: none;
  font: 400 14px/20px var(--sl-cc-font);
  color: var(--sl-cc-ink-2);
}
#cc-main .cm .cm__btns {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
  padding: 0 !important;
  border: 0 !important;
}
#cc-main .cm .cm__btn-group { display: contents !important; }
#cc-main .cm .cm__btn,
#cc-main .cm .cm__btn + .cm__btn { width: 100%; flex: none !important; }

/* ---------- settings: desktop modal ---------- */
#cc-main .pm.pm--box {
  width: 520px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  height: auto;
  border-radius: var(--sl-cc-radius-card);
  box-shadow: var(--sl-cc-shadow);
}
#cc-main .pm .pm__header {
  padding: 24px 24px 0;
  border: 0;
  align-items: flex-start;
}
#cc-main .pm .pm__title { font: 600 20px/28px var(--sl-cc-font); color: var(--sl-cc-ink); }
#cc-main .pm .pm__close-btn {
  width: 44px;
  height: 44px;
  margin: -8px -10px 0 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
}
#cc-main .pm .pm__close-btn:hover { background: #F2F3F6; }
#cc-main .pm .pm__close-btn svg { stroke: var(--sl-cc-ink); }
#cc-main .pm .pm__body { padding: 4px 24px 8px; overscroll-behavior: contain; }
#cc-main .pm .pm__section { margin: 0; padding: 0; border: 0; }
#cc-main .pm .pm__section-desc,
#cc-main .pm .pm__section > .pm__section-desc-wrapper > .pm__section-desc {
  margin: 4px 0 8px;
  font: 400 14px/20px var(--sl-cc-font);
  color: var(--sl-cc-ink-2);
}
#cc-main .pm .pm__section-toggles + .pm__section { margin-top: 8px; }

/* category rows: name + description, switch on the right, divider between */
#cc-main .pm .pm__section--toggle {
  margin: 0;
  background: transparent;
  border-top: 1px solid var(--sl-cc-line);
  border-radius: 0;
}
#cc-main .pm .pm__section-toggles > .pm__section--toggle:first-child { border-top: 0; }
#cc-main .pm .pm__section--toggle .pm__section-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 14px 72px 14px 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  text-align: start;
  cursor: default;
}
#cc-main .pm .pm__section-arrow { display: none; }
#cc-main .sl-cc-row__name { display: block; font: 600 15px/20px var(--sl-cc-font); color: var(--sl-cc-ink); }
#cc-main .sl-cc-row__desc { display: block; font: 400 13px/18px var(--sl-cc-font); color: var(--sl-cc-ink-2); }

/* switch: 48x28 track, ON #7829D2 + white knob, OFF white track + grey outline/knob */
#cc-main .pm .section__toggle-wrapper,
#cc-main .pm .section__toggle,
#cc-main .pm .toggle__icon,
#cc-main .pm .toggle__label { width: 48px; height: 28px; }
#cc-main .pm .section__toggle-wrapper { right: 0; top: 50%; transform: translateY(-50%); }
#cc-main .pm .toggle__icon { box-shadow: inset 0 0 0 2px var(--sl-cc-off); }
#cc-main .pm .toggle__icon-circle { width: 20px; height: 20px; top: 4px; left: 4px; box-shadow: none; }
#cc-main .pm .toggle__icon-off svg { stroke: #FFFFFF; }
#cc-main .pm .section__toggle:checked ~ .toggle__icon { box-shadow: inset 0 0 0 2px var(--sl-cc-brand-strong); }
#cc-main .pm .section__toggle:checked ~ .toggle__icon .toggle__icon-circle { transform: translateX(20px); }
#cc-main .pm .section__toggle:checked ~ .toggle__icon .toggle__icon-on svg { stroke: var(--sl-cc-brand-strong); }

/* Strictly necessary: lock + "Always on" text instead of a switch */
#cc-main .pm .section__toggle-wrapper:has(input[value="necessary"]) { display: none; }
#cc-main .sl-cc-always {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 13px/1 var(--sl-cc-font);
  color: var(--sl-cc-ink-2);
  white-space: nowrap;
}
#cc-main .pm .pm__section--toggle:has(.sl-cc-always) .pm__section-title { padding-right: 110px; }

/* footer: Reject all / Accept all / Save choices in one equal row */
#cc-main .pm .pm__footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--sl-cc-line);
}
/* !important: the vendor's <=640px rules stack the groups with !important. */
#cc-main .pm .pm__btn-group { display: contents !important; }
#cc-main .pm .pm__btn,
#cc-main .pm .pm__btn + .pm__btn,
#cc-main .pm .pm__btn-group + .pm__btn-group { width: 100%; flex: none; margin: 0 !important; }

/* ---------- mobile (<=767px): bottom bar + bottom sheet ---------- */
@media screen and (max-width: 767px) {
  #cc-main .cm.cm--box {
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border-width: 1px 0 0;
    border-radius: var(--sl-cc-radius-card) var(--sl-cc-radius-card) 0 0;
  }
  #cc-main .cm .cm__body { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) !important; }
  #cc-main .cm .cm__title {
    position: absolute !important;
    width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  #cc-main .cm .cm__desc,
  #cc-main .cm .cm__title { padding-left: 0 !important; padding-right: 0 !important; }
  #cc-main .cm .cm__btns {
    flex-direction: row !important;
    margin-top: 12px;
    padding: 0 !important;
    border-top: 0 !important;
  }
  #cc-main .cm .cm__btn,
  #cc-main .cm .cm__btn + .cm__btn { margin: 0 !important; }

  #cc-main .pm.pm--box {
    left: 0; right: 0; top: auto; bottom: 0;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: var(--sl-cc-radius-card) var(--sl-cc-radius-card) 0 0;
  }
  #cc-main .pm .pm__header { padding: 20px 16px 0 !important; }
  #cc-main .pm .pm__body { padding: 4px 16px 8px !important; }
  #cc-main .pm .pm__footer {
    flex-direction: row !important;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom)) !important;
  }
  #cc-main .pm .pm__btn { font-size: 14px; padding: 6px; }
}

/* HelpCrunch offset (designer rule): on mobile the launcher sits on top of the
   bar while it is visible. Only position changes; HelpCrunch loading is untouched. */
@media screen and (max-width: 767px) {
  html.sl-cc-bar-open .helpcrunch-iframe-wrapper iframe,
  html.sl-cc-bar-open iframe[name="helpcrunch-iframe"] {
    bottom: var(--sl-cc-bar-h, 0px) !important;
    transition: bottom .22s ease-out;
  }
}

/* ---------- RTL (/he/): mirror the card and the row layout ---------- */
#cc-main.cc--rtl .pm .pm__section--toggle .pm__section-title { padding: 14px 0 14px 72px; }
#cc-main.cc--rtl .pm .pm__section--toggle:has(.sl-cc-always) .pm__section-title { padding-left: 110px; padding-right: 0; }
#cc-main.cc--rtl .pm .section__toggle-wrapper { right: auto; left: 0; }
#cc-main.cc--rtl .sl-cc-always { right: auto; left: 0; }
#cc-main.cc--rtl .pm .pm__close-btn { margin: -8px 0 0 -10px; }

@media (prefers-reduced-motion: reduce) {
  #cc-main *, html.sl-cc-bar-open iframe { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  #cc-main .cm__btn, #cc-main .pm__btn, #cc-main .toggle__icon { border: 1px solid ButtonText; }
}

/* ---------- footer link for layouts without the site footer ---------- */
.sl-cc-minifooter {
  text-align: center;
  padding: 12px 16px 20px;
  font: 400 13px/18px "IBM Plex Sans", Arial, sans-serif;
}
.sl-cc-minifooter a { color: var(--sl-cc-ink-2, #4A4F5C); text-decoration: underline; }
.sl-cc-minifooter a:hover { text-decoration-thickness: 2px; }
.sl-cc-minifooter a:focus-visible,
.footer a[data-cc="show-preferencesModal"]:focus-visible { outline: 3px solid #7FB0FF; outline-offset: 2px; }