/**
 * Cookie Consent Banner.
 *
 * Colours come from CSS variables written inline by the plugin from the theme
 * preset (see Ccb_Renderer::assets), so overriding a brand colour is a settings
 * change, not a stylesheet edit.
 *
 * `!important` is used on the button and container properties on purpose. This
 * markup lands inside somebody else's theme — WoodMart, Astra, a page builder —
 * and a parent theme's `.button { background: … }` winning here is not a
 * cosmetic problem: it is how a "Reject" button ends up looking like the cheap
 * option, which is the exact dark pattern regulators fine.
 */

:root {
  --ccb-bg: #1a1a1a;
  --ccb-fg: #ffffff;
  --ccb-accent: #c4a456;
  --ccb-accent-hover: #d6a457;
  --ccb-on-accent: #000000;
  --ccb-radius: 6px;
  --ccb-font: inherit;
}

.CookieBanner[hidden],
.CookieSettings[hidden],
.CookieBanner__float-button[hidden],
.CookieCategory__list[hidden] {
  display: none !important;
}

/* ── Banner ───────────────────────────────────────────────────────────── */
.CookieBanner {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 99999;
  background: var(--ccb-bg) !important;
  color: var(--ccb-fg) !important;
  font-family: var(--ccb-font);
  /* Pinned, not merely set. A theme that declares `font-weight: 700` on a
     container makes every paragraph in here bold, which reads as shouting and
     was measured doing exactly that on a live build. Size and leading are
     pinned for the same reason: inheriting them means the banner is whatever
     the last theme update decided. */
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);
}

.CookieBanner--bottom { bottom: 0; }
.CookieBanner--top { top: 0; }

.CookieBanner__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.CookieBanner__text { flex: 1 1 420px; }

.CookieBanner__title {
  margin: 0 0 6px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ccb-fg) !important;
}

.CookieBanner__message {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--ccb-fg) !important;
  opacity: 0.85;
}

.CookieBanner__link {
  color: var(--ccb-accent) !important;
  text-decoration: underline !important;
}

.CookieBanner__controller {
  margin: 8px 0 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--ccb-fg) !important;
  opacity: 0.7;
}

.CookieBanner__controller-name { font-weight: 600; }

.CookieBanner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/**
 * Every action button — three in the banner, four in the modal — shares one
 * style: same size, same weight, same fill.
 *
 * For the ACCEPT/REJECT pair that is a compliance requirement, not a preference.
 * The CNIL's December 2021 decisions against Google and Meta turned on a Reject
 * that was harder to reach than Accept, and CC6 in the audit pack measures it
 * (area ratio, font-weight, and whether both are painted at all). Differentiate
 * that pair by hue if the brand needs it; never by whether it is painted.
 *
 * Extending the same style to "Settings" and "Save" is a DELIBERATE CHOICE, not
 * a rule: neither records a consent answer, and CC6 does not compare them. It is
 * done because seven identical buttons cannot be broken by a parent theme
 * restyling one of them — which is also why every property below is !important.
 * A project that wants a quieter "Settings" or a highlighted "Save" can do that
 * without failing anything; keep Accept and Reject identical to each other.
 */
.CookieBanner__button,
.CookieSettings__button {
  font-family: var(--ccb-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding: 10px 20px !important;
  border-radius: var(--ccb-radius) !important;
  border: 1px solid var(--ccb-accent) !important;
  background: var(--ccb-accent) !important;
  color: var(--ccb-on-accent) !important;
  cursor: pointer !important;
  text-transform: none !important;
  box-shadow: none !important;
  /* min-width/margin reset for the same reason as the floating button: a theme
     that stretches one of these breaks the Accept/Reject parity CC6 measures. */
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  transition: background 0.2s ease;
}

.CookieBanner__button:hover,
.CookieSettings__button:hover {
  background: var(--ccb-accent-hover) !important;
  border-color: var(--ccb-accent-hover) !important;
}

.CookieBanner__button:focus-visible,
.CookieSettings__button:focus-visible,
.CookieBanner__float-button:focus-visible {
  outline: 2px solid var(--ccb-fg) !important;
  outline-offset: 2px;
}

/* ── Floating reopen button ───────────────────────────────────────────── */
/* bottom-LEFT by default: chat widgets (Intercom, Tidio, Crisp) anchor
   bottom-right, and two round buttons in one corner is a support ticket. */
/* Every box property here carries !important, and that is not paranoia: a theme
   rule as ordinary as `button { padding: 12px 32px; min-width: 160px }` turns a
   46x46 circle into a flattened ellipse, because border-radius:50% follows the
   box it is given. width/height alone do not save it — padding and min-width
   have to be reset too, and box-sizing pinned, or the padding is simply added
   on the outside. Seen in the wild on an Elementor build. */
.CookieBanner__float-button {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  right: auto !important;
  top: auto !important;
  z-index: 99998;
  box-sizing: border-box !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Flex rather than line-height: an emoji glyph does not sit on the text
     baseline the way a letter does, so centring it by line-height leaves it
     visibly high or low depending on the platform's emoji font. */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1px solid var(--ccb-accent) !important;
  background: var(--ccb-bg) !important;
  color: var(--ccb-fg) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  text-transform: none !important;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* ── Settings modal ───────────────────────────────────────────────────── */
.CookieSettings {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.CookieSettings__modal {
  background: var(--ccb-bg) !important;
  color: var(--ccb-fg) !important;
  font-family: var(--ccb-font);
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  width: 100%;
  max-width: 640px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
}

.CookieSettings__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.CookieSettings__title {
  margin: 0 !important;
  font-size: 17px !important;
  color: var(--ccb-fg) !important;
}

.CookieSettings__close {
  background: none !important;
  border: none !important;
  color: var(--ccb-fg) !important;
  font-size: 26px !important;
  line-height: 1 !important;
  cursor: pointer;
  padding: 0 4px !important;
}

.CookieSettings__content {
  padding: 8px 24px 16px;
  overflow-y: auto;
}

.CookieSettings__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 24px 22px;
  border-top: 1px solid rgba(128, 128, 128, 0.25);
}

.CookieSettings__button { flex: 1 1 auto; }

/* ── Category ─────────────────────────────────────────────────────────── */
.CookieCategory {
  padding: 14px 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}

.CookieCategory:last-child { border-bottom: none; }

.CookieCategory__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* A <label> is a form element, and themes style form elements. Measured on a
   live Elementor build: this label and the name inside it both rendered at
   32px with a 48px line-height, roughly three times the badge beside them,
   because nothing here declared a size. Everything the theme can reach is now
   declared. */
.CookieCategory__label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.CookieCategory__checkbox { width: 16px; height: 16px; }

.CookieCategory__name {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ccb-fg) !important;
}

.CookieCategory__badge {
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  opacity: 0.6;
  white-space: nowrap;
}

.CookieCategory__toggle {
  background: none !important;
  border: none !important;
  color: var(--ccb-fg) !important;
  cursor: pointer;
  font-size: 14px !important;
  padding: 2px 6px !important;
}

.CookieCategory__description {
  margin: 6px 0 0 26px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--ccb-fg) !important;
  opacity: 0.7;
}

.CookieCategory__list {
  list-style: none !important;
  margin: 10px 0 0 26px !important;
  padding: 8px 0 0 !important;
  border-top: 1px solid rgba(128, 128, 128, 0.18);
}

/* Four facts per row. Wrapping rather than crushing: a lifetime clipped to
   "2 la" discloses nothing, and the lifetime is the point of the row. */
.CookieCategory__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.12);
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

.CookieCategory__item:last-child { border-bottom: none; }

.CookieCategory__item-service {
  font-weight: 600;
  color: var(--ccb-fg) !important;
  flex: 1 1 130px;
}

.CookieCategory__item-cookies {
  font-family: ui-monospace, "Courier New", monospace;
  opacity: 0.55;
}

.CookieCategory__item-duration { opacity: 0.75; white-space: nowrap; }

.CookieCategory__item-policy {
  color: var(--ccb-accent) !important;
  text-decoration: underline;
  white-space: nowrap;
}

/* A first-party row still carries the slot, so the four facts stay aligned and
   the absence of a link reads as a statement rather than an omission. */
.CookieCategory__item-policy[data-cc-first-party] {
  color: var(--ccb-fg) !important;
  text-decoration: none;
  opacity: 0.45;
}

.CookieCategory__item--empty { opacity: 0.6; font-style: italic; }

/**
 * Phones. This block is where the Accept/Reject parity is actually won or lost.
 *
 * `flex: 1 1 auto` looks harmless and is not: with wrapping, the button whose
 * label happens to be longer ("Akceptuj wszystkie") takes a whole row while the
 * other two share one, and Accept ends up ~70% wider than Reject. Measured on a
 * 390px viewport before this rule existed: 14891px^2 against 8613px^2, a 42%
 * difference — a textbook dark pattern produced by nothing but flex-wrap.
 *
 * So the PAIR gets one row at an explicit 50/50, and "Settings" — which records
 * no consent answer and which CC6 does not compare — takes its own row. Sizing
 * the pair by basis instead of by content is what makes the geometry independent
 * of how long the two labels are in a given language.
 */
@media (max-width: 782px) {
  .CookieBanner__container { padding: 12px 16px; gap: 10px; }
  .CookieBanner__actions { width: 100%; gap: 8px; }

  .CookieBanner__button {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
  }

  .CookieBanner__button[data-cc="settings"] {
    flex: 1 1 100% !important;
  }

  /* A fixed banner that eats 44% of a phone screen is not a notice, it is an
     interstitial. Measured at 289px on a 664px viewport before this block. */
  .CookieBanner__title { font-size: 14px !important; margin-bottom: 4px !important; }
  .CookieBanner__message { font-size: 13px !important; line-height: 1.4 !important; }
  .CookieBanner__controller { font-size: 11px !important; margin-top: 6px !important; }

  /* The street address goes; the name and the e-mail stay. Art. 13(1)(a) asks
     for identity and contact details, and those two answer it — the postal
     address is layer 2, and on a phone it costs two full lines. */
  .CookieBanner__controller-address { display: none; }
}

/* ── Modal on a phone ──────────────────────────────────────────────────
   Nothing below is decoration. The desktop scale renders unchanged on a
   390px screen otherwise, and the measured result was a modal whose content
   was 3.9x taller than its own viewport. */
@media (max-width: 600px) {
  .CookieSettings { padding: 0; align-items: flex-end; }

  .CookieSettings__modal {
    max-height: 92vh;
    border-radius: 12px 12px 0 0;
  }

  .CookieSettings__header { padding: 14px 16px; }
  .CookieSettings__title { font-size: 15px !important; }
  .CookieSettings__content { padding: 4px 16px 12px; }
  .CookieSettings__actions { padding: 12px 16px 16px; gap: 8px; }

  /* Four buttons at flex:1 get too narrow to read on a phone, so they go two
     per row. Accept and Reject land on different rows but at identical width,
     which is what parity asks for — equal, not adjacent. */
  .CookieSettings__button { flex: 1 1 calc(50% - 4px) !important; }

  .CookieCategory { padding: 10px 0; }
  .CookieCategory__name { font-size: 14px !important; }
  .CookieCategory__description {
    margin: 4px 0 0 26px !important;
    font-size: 12px !important;
  }

  /* Indent dropped: 26px of the 390px screen spent on alignment is 26px the
     cookie names then have to wrap for. */
  .CookieCategory__list { margin: 8px 0 0 !important; }

  /**
   * Four flex children on one line wrap wherever the text happens to end, so
   * the same list rendered rows between 57px and 97px tall with the duration
   * column starting at x=57 on one row and x=283 on the next. A grid fixes
   * both: two columns, two lines, every row the same shape.
   *
   *   service   |   lifetime
   *   names     |   policy
   */
  .CookieCategory__item {
    display: grid;
    /* The right column is a FIXED width, not `auto`. Each row is its own grid
       container, so `auto` sizes column two to that row's own content and the
       lifetimes end up starting at a different x on every line — measured at
       x=299 on one row and x=278 on the next, which is precisely the "floating"
       look. A fixed track makes the column a column. */
    grid-template-columns: minmax(0, 1fr) 104px;
    align-items: baseline;
    gap: 1px 8px;
    padding: 5px 0;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  /* Explicit rows, not auto-placement. The DOM order is service, cookies,
     duration, policy — so auto-placement drops `cookies` into row 2 (row 1
     column 1 being taken) and pushes `duration` down with it, leaving `service`
     alone on a line and the row three lines tall. Naming the cell each field
     belongs in is what makes it two:
         service   |  lifetime
         names     |  policy                                                  */
  .CookieCategory__item-service { grid-column: 1; grid-row: 1; flex: none; }
  .CookieCategory__item-duration {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    font-size: 11px !important;
    white-space: nowrap;
  }

  /* Cookie names are the one field that legitimately needs to wrap, so it gets
     the smaller size and permission to break mid-token — `wp-settings-time-*`
     has no space to break at, and without this it pushes the whole grid wider. */
  .CookieCategory__item-cookies {
    grid-column: 1;
    grid-row: 2;
    font-size: 10.5px !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Sized to fit the provider-policy label on ONE line. At 11.5px the label
     wrapped inside the fixed column and every row grew a third line — the
     column width and this font-size are a pair, change one and re-measure. */
  .CookieCategory__item-policy {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    white-space: normal;
  }
}