/* Cookie bar as the cream hotel ticket (D-17), compact on phones (D-16), equal choices (D-18).
   Loaded AFTER assets/vendor/cookieconsent.css. Every selector starts with #cc-main, tokens only.
   The vendor phone block (max-width 640px) uses !important, so the layout rules here repeat it with a
   higher specificity (#cc-main .cm ...). Budget: open bar <= 200 px tall, every button >= 48 px. */

#cc-main {
  --cc-font-family: var(--mh-font-body);
  --cc-modal-border-radius: var(--mh-radius-lg);
  --cc-btn-border-radius: var(--mh-radius-md);
  --cc-modal-margin: 0;
  --cc-z-index: 2147483647;            /* above the prototype label (10) and the debug panel (1) */

  --cc-bg: var(--mh-paper);
  --cc-primary-color: var(--mh-ink);
  --cc-secondary-color: var(--mh-ink-soft);
  --cc-link-color: var(--mh-link-on-paper);
  --cc-separator-border-color: var(--mh-paper-edge);

  /* "Prijmout vse" and "Odmitnout vse" both use the primary button: one set of variables, identical by construction */
  --cc-btn-primary-bg: var(--mh-ink);
  --cc-btn-primary-color: var(--mh-paper);
  --cc-btn-primary-border-color: var(--mh-ink);
  --cc-btn-primary-hover-bg: var(--mh-ink-deep);
  --cc-btn-primary-hover-color: var(--mh-paper);
  --cc-btn-primary-hover-border-color: var(--mh-ink-deep);
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--mh-ink);
  --cc-btn-secondary-border-color: transparent;
  --cc-btn-secondary-hover-bg: var(--mh-paper-edge);
  --cc-btn-secondary-hover-color: var(--mh-ink);
  --cc-btn-secondary-hover-border-color: var(--mh-paper-edge);

  /* second layer: toggles and category blocks on paper */
  --cc-toggle-on-bg: var(--mh-ink);
  --cc-toggle-off-bg: var(--mh-ink-muted);
  --cc-toggle-on-knob-bg: var(--mh-paper);
  --cc-toggle-off-knob-bg: var(--mh-paper);
  --cc-toggle-enabled-icon-color: var(--mh-paper);
  --cc-toggle-disabled-icon-color: var(--mh-paper);
  --cc-toggle-readonly-bg: var(--mh-ink-muted);
  --cc-toggle-readonly-knob-bg: var(--mh-paper);
  --cc-toggle-readonly-knob-icon-color: var(--mh-ink-muted);
  --cc-section-category-border: var(--mh-paper-edge);
  --cc-cookie-category-block-bg: var(--mh-paper-edge);
  --cc-cookie-category-block-border: var(--mh-paper-edge);
  --cc-cookie-category-block-hover-bg: var(--mh-paper-edge);
  --cc-cookie-category-block-hover-border: var(--mh-paper-edge);
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: var(--mh-paper-edge);
  --cc-overlay-bg: var(--mh-scrim);
  --cc-webkit-scrollbar-bg: var(--mh-paper-edge);
  --cc-webkit-scrollbar-hover-bg: var(--mh-ink-muted);
}

/* ---- first layer: the ticket, full width at the bottom of a phone ---- */
#cc-main .cm.cm--box {
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  border-radius: var(--mh-radius-lg) var(--mh-radius-lg) 0 0;
  box-shadow: var(--mh-shadow-ticket);
  outline: 2px dashed var(--mh-paper-edge);   /* ticket edge, decorative only */
  outline-offset: -6px;
}

#cc-main .cm .cm__body {
  display: flex;
  flex-direction: column;
  padding: 0;
}

#cc-main .cm .cm__texts {
  padding: 12px 16px 0;
}

#cc-main .cm .cm__title {
  margin: 0;
  padding: 0;
  font-family: var(--mh-font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

#cc-main .cm .cm__title + .cm__desc {
  margin-top: 2px;
}

#cc-main .cm .cm__desc {
  max-height: none;
  margin-bottom: 0;
  padding: 0;
  overflow: visible;
  font-size: 0.8125rem;
  line-height: 1.35;
}

#cc-main .cm .cc__link {
  color: var(--mh-link-on-paper);
}

/* perforation between the ticket text and its buttons */
#cc-main .cm .cm__btns {
  margin: 6px 16px 0;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 2px dashed var(--mh-paper-edge) !important;
  border-left: none !important;
  gap: 2px;
}

#cc-main .cm .cm__btn-group {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px;
  margin: 0 !important;
}

#cc-main .cm .cm__btn-group + .cm__btn-group {
  margin: 0 !important;
}

#cc-main .cm .cm__btn {
  flex: 1 1 0 !important;               /* equal flex basis: Accept and Reject are always the same size */
  min-height: 48px;
  margin: 0 !important;
  padding: 0 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}

/* "Nastaveni" is the quiet third choice: link-styled but still a 48 px target */
#cc-main .cm .cm__btn--secondary {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* the library puts show--consent on <html> while the bar is open: keep the end of the page (footer) reachable above it */
.show--consent .mh-page {
  padding-bottom: 12.5rem;
}

#cc-main button:focus-visible,
#cc-main a:focus-visible {
  outline: 3px solid var(--mh-link-on-paper);
  outline-offset: 2px;
}

/* ---- second layer: preferences ---- */
#cc-main .pm__title {
  font-family: var(--mh-font-display);
  font-weight: 700;
}

#cc-main .pm .pm__section--toggle .pm__section-title {
  min-height: 58px;
}

/* the switch keeps its 50 x 23 px look, but its click area (the transparent input on top of it) is 48 px tall: WCAG 2.5.8 asks 24 px, the thumb rule 48 px.
   The focus ring moves from the tall input to the visible switch next to it. */
#cc-main .pm .section__toggle {
  height: 48px;
  top: -12.5px;
}

#cc-main .pm .section__toggle:focus-visible {
  outline: none;
}

#cc-main .pm .section__toggle:focus-visible ~ .toggle__icon {
  outline: 3px solid var(--mh-link-on-paper);
  outline-offset: 2px;
}

#cc-main .pm .pm__footer {
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}

#cc-main .pm .pm__btn-group {
  gap: 8px;
}

#cc-main .pm .pm__btn {
  min-height: 48px;
  font-size: 0.875rem;
}

#cc-main .pm .pm__btn--secondary {
  border-color: var(--mh-ink);          /* the save button keeps a visible edge (WCAG 1.4.11) */
}

#cc-main .pm .pm__close-btn {
  width: 48px;
  height: 48px;
}

/* ---- wider screens: a ticket centred above the bottom edge ---- */
@media screen and (min-width: 640px) {
  #cc-main .cm.cm--box {
    bottom: 16px;
    left: 0;
    right: 0;
    max-width: 34rem !important;
    margin: 0 auto;
    border-radius: var(--mh-radius-lg);
  }
}