/**
 * Cookie consent banner — both brand variants from the Figma brand system
 * ("🟢 Cookie banner - Better Place & Foundation", node 4015:10038):
 *
 *   Better Place (default)      Foundation (.bp-cc-banner--foundation)
 *   text #5A5A70 "bp/muted"     text #436366 "bpff/woodland"
 *   accent #1A1040              accent #1F927D "bpff/spirulina"
 *     "bp/midnight"             hover #197564 (ASSUMED darker shade — no
 *   hover #3787FF "bp/horizon"    Foundation hover state exists in the
 *     (confirmed: the hover       Figma file; override via the widget's
 *     button pair on the canvas)  hover controls if brand says otherwise)
 *   card/button radius 24px     card/button radius 8px
 *     (pills)
 *
 * Per the Figma frames the ONLY brand differences are those colors and the
 * radii — construction, spacing and type are shared: white card, 24px
 * padding, 0 4px 8px 16% shadow, Dada Grotesk 14/22 text (1% tracking) +
 * 16/26 buttons (0 tracking), filled accept + outlined decline, centered at
 * the bottom. The brand is chosen with the widget's "Brand" control. This
 * stylesheet is the SINGLE source of the Figma values; widget style controls
 * only emit CSS when an editor overrides. "Dada Grotesk" is the brand font
 * the theme already loads.
 *
 * Every descendant rule is written as ".bp-cc-banner .bp-cc-banner__*"
 * (specificity 0,2,0) on purpose: the banner renders inside the footer
 * template, where Elementor kit globals (".elementor-kit-N button/a",
 * 0,1,1) and theme styles outrank single-class selectors and were
 * repainting the buttons/link. 0,2,0 beats those while staying below the
 * widget style-control selectors ("{{WRAPPER}} .bp-cc-banner__*", 0,3,0),
 * so editor overrides still win. Don't use !important here — it would
 * break that override contract.
 */

.bp-cc-banner {
  --bp-cc-text-color: #5a5a70;
  --bp-cc-accent: #1a1040;
  --bp-cc-accent-contrast: #ffffff;
  --bp-cc-hover: #3787ff;
  --bp-cc-card-radius: 24px;
  --bp-cc-btn-radius: 24px;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  padding: 0 20px 48px;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.bp-cc-banner--foundation {
  --bp-cc-text-color: #436366;
  --bp-cc-accent: #1f927d;
  --bp-cc-hover: #197564;
  --bp-cc-card-radius: 8px;
  --bp-cc-btn-radius: 8px;
}

.bp-cc-banner--visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.bp-cc-banner[hidden] {
  display: none;
}

/* In the Elementor editor the banner sits inline where it's dropped, so it
   can be selected and styled without covering the editor UI (the widget
   always pairs this with --visible). */
.bp-cc-banner--editor {
  position: static;
}

.bp-cc-banner .bp-cc-banner__inner {
  max-width: 680px;
  background: #ffffff;
  border-radius: var(--bp-cc-card-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.bp-cc-banner .bp-cc-banner__text {
  margin: 0;
  font-family: "Dada Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.01em;
  color: var(--bp-cc-text-color);
  flex: 1 1 auto;
}

.bp-cc-banner .bp-cc-banner__link,
.bp-cc-banner .bp-cc-banner__link:hover,
.bp-cc-banner .bp-cc-banner__link:focus {
  color: inherit;
  text-decoration: underline;
}

.bp-cc-banner .bp-cc-banner__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.bp-cc-banner .bp-cc-banner__btn {
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  text-transform: none;
  margin: 0;
  font-family: "Dada Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: normal;
  padding: 8px 24px;
  border-radius: var(--bp-cc-btn-radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bp-cc-banner .bp-cc-banner__btn--accept {
  background: var(--bp-cc-accent);
  color: var(--bp-cc-accent-contrast);
  border-color: var(--bp-cc-accent);
}

.bp-cc-banner .bp-cc-banner__btn--accept:hover,
.bp-cc-banner .bp-cc-banner__btn--accept:focus-visible {
  background: var(--bp-cc-hover);
  border-color: var(--bp-cc-hover);
  color: var(--bp-cc-accent-contrast);
}

.bp-cc-banner .bp-cc-banner__btn--reject {
  background: transparent;
  color: var(--bp-cc-accent);
  border-color: var(--bp-cc-accent);
}

.bp-cc-banner .bp-cc-banner__btn--reject:hover,
.bp-cc-banner .bp-cc-banner__btn--reject:focus-visible {
  background: transparent;
  color: var(--bp-cc-hover);
  border-color: var(--bp-cc-hover);
}

@media (prefers-reduced-motion: reduce) {
  .bp-cc-banner,
  .bp-cc-banner .bp-cc-banner__btn {
    transition: none;
  }
}

/* Mobile (Figma): card stacks vertically, text centered, the two buttons
   stay side by side, 20px bottom margin. */
@media (max-width: 640px) {
  .bp-cc-banner {
    padding: 0 20px 20px;
  }

  .bp-cc-banner .bp-cc-banner__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .bp-cc-banner .bp-cc-banner__actions {
    justify-content: center;
  }
}