/*
 * Cookiebot-parity consent dialog (Global Constraints "Dialog parity" — cookiebot-styles.json).
 * Scoped to #novo-consent/.novo-cc; only [hidden] and body.novo-cc-open touch anything outside it.
 */

/* Scoped to the dialog: a plugin stylesheet must not reset [hidden] for the whole page (the theme's
   Tailwind preflight owns that rule sitewide). #novo-consent[hidden] is the dialog root itself. */
#novo-consent[hidden],
.novo-cc [hidden] {
  display: none !important;
}

body.novo-cc-open {
  overflow: hidden;
}

.novo-cc {
  --novo-cc-accent: #1032cf;
  --novo-cc-ink: #141414;
  --novo-cc-line: #d6d6d6;
  --novo-cc-radius: 8px;
  --novo-cc-shadow: 0 32px 68px rgba(0, 0, 0, 0.3);

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2147483631;
  display: flex;
  flex-direction: column;
  width: 900px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  background: #fff;
  color: var(--novo-cc-ink);
  border-radius: var(--novo-cc-radius);
  box-shadow: var(--novo-cc-shadow);
  font-family: sans-serif;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.1px;
}

.novo-cc,
.novo-cc *,
.novo-cc *::before,
.novo-cc *::after {
  box-sizing: border-box;
}

/*
 * Isolation from the host theme: the theme's own typography rules (h2/h3/h4/a, etc.) target these
 * elements directly and beat plain inheritance from `.novo-cc`, regardless of load order — so every
 * text/colour-bearing element gets an explicit, non-inherited declaration here instead of relying on
 * inheritance. `!important` is deliberate: this is an embedded widget on a page we don't control.
 */
.novo-cc,
.novo-cc * {
  font-family: sans-serif !important;
}

.novo-cc h2,
.novo-cc h3,
.novo-cc h4,
.novo-cc .novo-cc__cat-toggle,
.novo-cc .novo-cc__cookie-name,
.novo-cc .novo-cc__cookie-purpose,
.novo-cc dl,
.novo-cc a {
  color: var(--novo-cc-ink) !important;
}

.novo-cc__header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 22.5px;
  border-bottom: 1px solid var(--novo-cc-line);
}

.novo-cc__logo {
  display: block;
  height: 32px;
  width: auto;
}

.novo-cc__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--novo-cc-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.novo-cc__tabs {
  flex: none;
  display: flex;
  border-bottom: 1px solid var(--novo-cc-line);
}

.novo-cc__tab {
  flex: 0 0 300px;
  width: 300px;
  height: 57px;
  padding: 15px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--novo-cc-ink);
  cursor: pointer;
}

.novo-cc__tab[aria-selected='true'] {
  color: var(--novo-cc-accent) !important;
  border-bottom-color: var(--novo-cc-accent);
}

.novo-cc__panels {
  flex: 1 1 auto;
  overflow-y: auto;
}

.novo-cc__panel {
  /* Horizontal inset matches the header/footer/details-card content column (900px dialog, 855px
     content — see logoWrap/buttons/catCard in cookiebot-styles.json, all (900-855)/2 = 22.5px). */
  padding: 16.875px 22.5px;
}

#novo-cc-title {
  margin: 0 0 7.5px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.25px;
}

.novo-cc__intro-wrap {
  position: relative;
}

.novo-cc__intro {
  margin: 0;
  letter-spacing: 0.5px;
}

.novo-cc__levels {
  display: flex;
  /* Breaks out of .novo-cc__panel's 22.5px side padding: the category-cell row spans the dialog's
     full width edge to edge (4 x levelCell 225px = 900px), unlike the title/intro text above it. */
  margin: 16px -22.5px 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--novo-cc-line);
}

.novo-cc__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.novo-cc__level {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 225px;
  height: 112px;
  padding: 22.5px 15px;
  text-align: center;
  border-right: 1px solid var(--novo-cc-line);
}

.novo-cc__level:last-child {
  border-right: 0;
}

.novo-cc__level label {
  font-size: 15px;
  font-weight: 700;
}

.novo-cc__switch-wrap {
  position: relative;
  display: inline-block;
  flex: none;
  width: 57px;
  height: 32px;
}

.novo-cc__switch {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.novo-cc__switch:disabled {
  cursor: default;
}

.novo-cc__slider {
  position: absolute;
  inset: 0;
  background: var(--novo-cc-ink);
  border-radius: 32px;
  pointer-events: none;
  transition: background-color 0.15s ease;
}

.novo-cc__slider::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.novo-cc__switch:checked + .novo-cc__slider {
  background: var(--novo-cc-accent);
}

.novo-cc__switch:checked + .novo-cc__slider::before {
  transform: translateX(26px);
}

.novo-cc__switch:focus-visible + .novo-cc__slider {
  outline: 2px solid var(--novo-cc-accent);
  outline-offset: 2px;
}

/* Details / accordion (Részletek) */

.novo-cc__cat {
  /* 22.5px above and below the row+description, plus the 1px border to the next card, gives the
     reference's measured 165px row-to-row spacing (22.5 + 119 + 22.5 + 1 = 165). */
  padding: 22.5px 0;
  border-top: 1px solid var(--novo-cc-line);
}

/* The reference has no separator (or the 22.5px pitch that goes with it) above the first card — it
   starts right under the tabs, at whatever gap the panel's own top padding already gives. */
.novo-cc__cat:first-child {
  padding-top: 0;
  border-top: 0;
}

.novo-cc__cat:last-child {
  border-bottom: 1px solid var(--novo-cc-line);
}

.novo-cc__cat-row {
  display: flex;
  align-items: center;
}

/*
 * The disclosure control for self::providers()'s cookie list (below), which is what
 * aria-controls/aria-expanded point at. Its own accessible name is just chevron+name+count — the
 * description (a sibling .novo-cc__cat-desc, always visible) and the switch (a sibling of this row,
 * never inside the button) deliberately stay outside it, unlike a <details>/<summary> would allow.
 */
.novo-cc__cat-toggle {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.novo-cc__chevron {
  flex: none;
  width: 8px;
  height: 8px;
  /* 32px gap from the chevron's left edge to the name (measured on the reference: chevron x=292,
     name x=332 at the desktop 22.5px content inset) — not a shared row `gap`, since the smaller
     name-to-count spacing below is deliberately different. */
  margin-right: 32px;
  border-right: 2px solid var(--novo-cc-ink);
  border-bottom: 2px solid var(--novo-cc-ink);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.novo-cc__cat-toggle[aria-expanded='true'] .novo-cc__chevron {
  transform: rotate(-135deg);
}

.novo-cc__cat-name {
  margin-right: 11.25px;
  font-size: 15px;
  font-weight: 700;
}

.novo-cc__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #ececec;
  font-size: 12px;
  font-weight: 700;
}

.novo-cc__cat-row .novo-cc__switch-wrap {
  margin-left: auto;
}

.novo-cc__cat-desc {
  margin: 0;
  padding: 15px 0 0 45px;
}

.novo-cc__provider {
  padding: 15px 0 0 45px;
}

.novo-cc__provider h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}

.novo-cc__cookie {
  padding: 8px 0;
  border-top: 1px solid var(--novo-cc-line);
}

.novo-cc__cookie:first-child {
  border-top: 0;
}

.novo-cc__cookie-name {
  display: block;
  font-size: 14px;
}

.novo-cc__cookie-purpose {
  margin: 4px 0;
  font-size: 13px;
}

.novo-cc__cookie dl {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 4px 0 0;
  font-size: 12px;
}

.novo-cc__cookie dt {
  font-weight: 700;
}

.novo-cc__cookie dt::after {
  content: ':';
  margin-right: 4px;
}

.novo-cc__cookie dd {
  margin: 0;
}

.novo-cc__declaration {
  margin: 0;
  padding: 0 30px 16.875px;
  font-size: 15px;
  letter-spacing: 0.3px;
  border-top: 1px solid var(--novo-cc-line);
}

/*
 * Desktop only: the Részletek tab caps its own content to a fixed, independently-scrolling region
 * (tabContentDetails: 482px in cookiebot-styles.json) instead of growing the dialog to fit every
 * category's cookie list — the declaration line above scrolls with it, as the last thing inside.
 * Below 800px the sheet already scrolls the whole panel within the viewport (.novo-cc__panels).
 */
@media (min-width: 800px) {
  #novo-cc-panel-details {
    height: 482px;
    overflow-y: auto;
  }

  /* The reference fades the last visible lines of that scroll region into white (bottom only — the
     first category row is sharp at the top). Same sticky-pseudo technique as .novo-cc__intro-wrap on
     mobile: it rides the bottom of the scrollport and is pulled back over the content by a negative
     margin, so it adds no height and takes no clicks. */
  #novo-cc-panel-details::after {
    content: '';
    position: sticky;
    display: block;
    left: 0;
    bottom: -16.875px;
    width: 100%;
    height: 64px;
    margin-top: -64px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
  }
}

/* About (A sütikről) */

#novo-cc-panel-about p {
  margin: 0 0 16px;
}

#novo-cc-panel-about a {
  color: var(--novo-cc-accent) !important;
}

/* Footer buttons */

.novo-cc__footer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7.5px;
  height: 90px;
  /* Same 22.5px content-column inset as the header/panel (see .novo-cc__panel above). */
  padding: 0 22.5px;
  border-top: 1px solid var(--novo-cc-line);
}

.novo-cc__btn {
  width: 280px;
  height: 51px;
  border-radius: 3.75px;
  border: 1px solid var(--novo-cc-accent);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.novo-cc__btn--outline {
  background: transparent;
  color: var(--novo-cc-ink);
}

.novo-cc__btn--primary {
  background: var(--novo-cc-accent);
  color: #fff;
}

.novo-cc button:focus-visible,
.novo-cc a:focus-visible {
  outline: 2px solid var(--novo-cc-accent);
  outline-offset: 2px;
}

/* Initial focus lands on the dialog itself (tabindex="-1"), not on a control — no ring for that. */
.novo-cc:focus {
  outline: none;
}

/* Mobile sheet (< 800px) */

@media (max-width: 799.98px) {
  .novo-cc {
    position: fixed;
    inset: 8px;
    width: auto;
    max-width: none;
    height: auto;
    /* vh first as a fallback for browsers that don't know dvh; dvh (when supported) then wins and
       accounts for a mobile browser's address bar collapsing/expanding without clipping the footer. */
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    transform: none;
  }

  /* The reference shows a compact header (its own Cookiebot icon, not our wordmark logo — that
     substitution is a documented, deliberate difference, docs/migration/reference/consent/README.md)
     and tabs row on the narrow viewport; matching its proportions here even though our logo is a
     wider wordmark rather than a small icon. */
  .novo-cc__header {
    height: 58px;
    padding: 16px 22.5px;
  }

  .novo-cc__logo {
    height: 26px;
  }

  .novo-cc__tab {
    flex: 1 1 33.33%;
    width: auto;
    height: 54px;
  }

  .novo-cc__panels {
    overflow: auto;
  }

  /* The reference's mobile body starts noticeably lower under the tabs than the desktop panel's
     16.875px top padding would give (title ink measured ~37px below the tabs' bottom border). */
  .novo-cc__panel {
    padding-top: 30px;
  }

  /*
   * The intro is capped to a fixed height with its own scroll and a fade at the bottom, instead of
   * pushing the category switches down and off-screen under the footer (reference parity: the intro
   * is visibly cropped with a white fade before the first category row).
   */
  .novo-cc__intro-wrap {
    max-height: 206px;
    overflow-y: auto;
  }

  .novo-cc__intro-wrap::after {
    content: '';
    position: sticky;
    display: block;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 24px;
    margin-top: -24px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
  }

  .novo-cc__levels {
    flex-direction: column;
  }

  /* Inset (not edge-to-edge like desktop's levelCell row) with no separator between rows — the
     reference shows only the one separator above the whole block (.novo-cc__levels' border-top). */
  .novo-cc__level {
    flex-direction: row;
    width: auto;
    height: auto;
    justify-content: space-between;
    align-items: center;
    padding: 15px 15px 15px 17px;
    text-align: left;
    border-right: 0;
  }

  /* Desktop keeps the 45px indent (under the chevron+name); the reference's mobile description
     starts flush with the chevron instead. */
  .novo-cc__cat-desc {
    padding-left: 0;
  }

  .novo-cc__footer {
    flex-direction: column-reverse;
    height: auto;
    padding: 15px;
  }

  .novo-cc__btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .novo-cc,
  .novo-cc *,
  .novo-cc *::before,
  .novo-cc *::after {
    transition: none !important;
    animation: none !important;
  }
}