/* public/consent.css — the skin for the Klaro consent layer (see public/js/consent.js).
 *
 * First layer = a NON-BLOCKING bottom bar (`noticeAsModal: false`), which is rentcarscrete.gr's
 * shape — owner decision 2026-09-26, "do the same set up as rentcarscrete exactly". This file:
 *   1. lifts the whole Klaro layer above every site element (the mobile CTA bar is z 300, the
 *      header 200; Klaro ships at 1000 — kept far above anything a page may add later);
 *   2. lays the bar out full width with three controls — "Accept All" (brand yellow, filled),
 *      "Reject All" (outlined) and "Customise" (text link). Same layer, same size, one click each:
 *      reject is exactly as easy as accept (DSGVO/TTDSG; EDPB 03/2022), which is also how
 *      rentcarscrete presents it.
 *
 * 🪤 EVERY RULE BELOW IS SCOPED TO `.cookie-notice`, NOT `.cookie-notice`.
 * That double selector was the WALL, and Klaro only adds `cookie-modal-notice` when
 * `noticeAsModal` is true — so leaving it scoped that way silently dropped the entire brand skin
 * and shipped stock Klaro. It costs nothing to keep the plain selector: if the wall ever returns,
 * these rules still apply to it.
 *
 * There is deliberately NO scroll lock. `html.hcc-consent-open` used to be toggled here and is
 * gone with the wall — Klaro renders the bar as `.cookie-notice` too, so a surviving lock would
 * have frozen the page behind a notice the visitor is free to ignore.
 *
 * The per-purpose toggles modal (second layer: "Customise", footer "Cookie settings") keeps Klaro's
 * stock layout; only the z-index and backdrop rules below apply to it.
 */

.klaro .cookie-modal {
  z-index: 2147483000 !important;
}

.klaro .cookie-modal .cm-bg {
  background: rgba(10, 10, 10, 0.72) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* ── First layer: the wall card ────────────────────────────────────────────── */
.klaro .cookie-notice {
  background: #ffffff !important;
  color: #0a0a0a;
  border-radius: 0;
  border-top: 4px solid #ffd100;            /* --brand */
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.22);
  /* A full-width bar, not a card: left/right/bottom are pinned by Klaro's `bottom` theme, and the
     safe-area inset keeps it clear of the iOS home indicator. */
  width: 100%;
  max-width: none;
  max-height: 60vh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px 24px calc(16px + env(safe-area-inset-bottom, 0px));
  font-family: inherit;
}

.klaro .cookie-notice .cn-body {
  margin: 0;
  padding: 0;
}

.klaro .cookie-notice h2 {
  margin: 0 0 10px;
  font-size: 1.4rem;
  line-height: 1.2;
  color: #0a0a0a;
}

.klaro .cookie-notice p {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #3a3a3a;                            /* --ink-3 */
}

.klaro .cookie-notice p a {
  color: #0a0a0a;
  text-decoration: underline;
}

/* Klaro's DOM order is [Customise] [Only necessary] [Accept all]; the two reversals put "Accept all"
 * on top, "Only necessary" directly under it at identical size, and "Customise" last as a link. */
.klaro .cookie-notice .cn-ok {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 6px;
  margin: 4px 0 0;
}

.klaro .cookie-notice .cn-buttons {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}

.klaro .cookie-notice .cm-btn {
  width: 100%;
  margin: 0;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.klaro .cookie-notice .cm-btn.cm-btn-success {
  background: #ffd100 !important;           /* --brand */
  color: #0a0a0a !important;
  border: 2px solid #ffd100;
}

.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:focus-visible {
  background: #e8bd00 !important;           /* --brand-dark */
  border-color: #e8bd00;
}

.klaro .cookie-notice .cm-btn.cm-btn-danger.cn-decline {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border: 2px solid #1f1f1f;                /* --ink-2 */
}

.klaro .cookie-notice .cm-btn.cm-btn-danger.cn-decline:hover,
.klaro .cookie-notice .cm-btn.cm-btn-danger.cn-decline:focus-visible {
  background: #f4f3ee !important;           /* --paper-3 */
}

.klaro .cookie-notice .cm-btn.cm-btn-lern-more {
  width: auto;
  align-self: center;
  padding: 8px 4px 0;
  border: 0;
  background: none !important;
  color: #595959 !important;                /* --muted */
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: underline;
}

.klaro .cookie-notice .cm-btn:focus-visible {
  outline: 3px solid #0a0a0a;
  outline-offset: 2px;
}