/**
 * BalanSense consent bar.
 *
 * Layout follows the Shopify pattern the studio asked for: a dark bar across
 * the bottom, body copy with an inline policy link, then "manage preferences"
 * as a plain text link on the left and two IDENTICAL bordered buttons on the
 * right.
 *
 * Accept and Decline share one rule with no modifier between them — same size,
 * border, weight, colour, padding. That is the compliance-critical part of this
 * file, not a style choice: a de-emphasised refusal is the dark pattern the
 * EDPB Cookie Banner Taskforce report treats as equivalent to having no refusal
 * at all. If anyone ever restyles one of them, restyle both.
 *
 * "Manage preferences" uses that same button rule. Three identical controls is
 * not a dark pattern - the EDPB requirement is that REFUSING be as easy and as
 * prominent as ACCEPTING, and three equals satisfies that as well as two do.
 * What must never happen is one of them being made quieter than the others.
 */

.bs-consent[hidden] { display: none !important; }

.bs-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483000;   /* above the theme's sticky header and Elementor */
  background: #1c1a1b;
  color: #ececec;
  font-family: 'Bellota Text', Georgia, serif;
  font-size: 15px;
  line-height: 1.55;
  box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.3);
  max-height: 88vh;
  overflow-y: auto;
}

/* No backdrop: this is a bar, not a modal, and the page stays usable behind it.
   Kept in the markup as an inert element so the JS needs no branching. */
.bs-consent__backdrop { display: none; }

.bs-consent__box {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 28px 24px;
}

.bs-consent__title {
  font-family: 'Bellota', 'Bellota Text', sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}

.bs-consent__body {
  margin: 0 0 20px;
  max-width: 88ch;
  color: #d8d5d6;
}

.bs-consent__body a,
.bs-consent__policy a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- categories (revealed by "manage preferences") ---------- */

.bs-consent__cats {
  margin: 0 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 88ch;
}

.bs-consent__cat {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 14px;
  color: #cfcbcc;
  cursor: pointer;
}

.bs-consent__cat input {
  margin-top: 3px;
  flex: none;
  width: 17px;
  height: 17px;
  accent-color: #C385AE;
}
.bs-consent__cat input:disabled { cursor: not-allowed; opacity: 0.55; }
.bs-consent__cat strong { color: #fff; font-weight: 700; }
.bs-consent__cat em {
  font-style: normal;
  opacity: 0.55;
  font-size: 12px;
  margin-left: 6px;
}

/* ---------- actions ---------- */

.bs-consent__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Accept and Decline. One rule, no modifier. See the header note. */
.bs-consent__btn {
  min-width: 210px;
  font-family: 'Bellota', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 26px;
  background: #2b2829;
  color: #fff;
  border: 1px solid #6d6768;
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.bs-consent__btn:hover { background: #3a3637; border-color: #9a9394; }
.bs-consent__btn:focus-visible { outline: 2px solid #C385AE; outline-offset: 3px; }

/* The third path. Same box as the two answers, pushed to the other end.
 *
 * It used to be a bare underlined link (min-width:0, no horizontal padding, no
 * background). That was wrong here: the theme paints its own shape behind every
 * <button>, sized to the button's box, so shrinking the box shrank the shape and
 * left a stray mauve stub behind the word. Matching the box makes the decoration
 * match too, without this file having to know how the theme draws it.
 *
 * `margin-right: auto` is the ONLY difference from .bs-consent__btn, and it is
 * position, not emphasis. */
.bs-consent__btn--quiet { margin-right: auto; }

/* Save sits with the buttons once preferences are open, so it reads as an
   action rather than a fourth answer. Inherits .bs-consent__btn wholesale. */
.bs-consent__btn--save { margin-right: 0; }

.bs-consent__policy { margin: 16px 0 0; font-size: 13px; color: #b9b5b6; }

/* ---------- the withdrawal control ---------- */
/* Small, but permanent and on every page: withdrawing consent has to be as
   easy as giving it (GDPR Art. 7(3)). */

.bs-consent-manage {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 2147482000;
  font-family: 'Bellota', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #1c1a1b;
  color: #ececec;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.bs-consent-manage[hidden] { display: none !important; }
.bs-consent-manage:hover { background: #2b2829; }
.bs-consent-manage:focus-visible { outline: 2px solid #C385AE; outline-offset: 3px; }

@media (max-width: 760px) {
  .bs-consent__box { padding: 20px 18px 18px; }
  .bs-consent__title { font-size: 19px; }
  .bs-consent__body { font-size: 14px; margin-bottom: 16px; }
  .bs-consent__actions { gap: 10px; }
  /* Full width and stacked, but still identical to each other. */
  .bs-consent__btn { min-width: 0; flex: 1 1 100%; }
  .bs-consent__btn--quiet { margin-right: 0; }
}