/* ============================================================
   Cookie consent banner — matched to Likely's existing palette:
     --purple:  #9112BC  (brand purple used in navbar/footer/borders)
     --mint:    #C8F7C5  (emphasis/CTA color, e.g. .emphasisbutton)
   Font follows the site default (Arial, Helvetica, sans-serif).

   The banner sits ON a white card, not the purple footer color,
   so it reads clearly as a separate, temporary overlay rather
   than blending into the footer or navbar. The purple top border
   and purple-outlined buttons keep it visually part of the same
   family without repeating a full block of purple right above
   the (already purple) footer.
   ============================================================ */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080;
  background-color: #ffffff;
  border-top: 3px solid #9112BC;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.12);
  font-family: Arial, Helvetica, sans-serif;
  padding: 16px 24px;

  /* Fixed elements size to their content, and since this is
     anchored to bottom:0 with no top, that content grows
     upward. Cap the whole banner so it can never grow past
     the top of the screen. Only the text block scrolls
     internally (see .cookie-banner-text) — the action
     buttons live outside that scroll area, in their own
     flex row, so they're always visible without the user
     having to scroll first. */
  max-height: 45vh;
  display: flex;
  flex-direction: column;
}

.cookie-banner-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 0;
}

.cookie-banner-text {
  flex: 1 1 420px;
  min-height: 0;
  overflow-y: auto;
}

.cookie-banner-text p {
  font-size: 15px;
  line-height: 1.5;
  color: #333333;
  margin: 0;
}

.cookie-banner-text a {
  color: #9112BC;
  text-decoration: underline;
  font-weight: 600;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}

/* Shared button base — mirrors the site's existing
   .optionbutton / .getstartedbutton lift-and-scale pattern */
.cookie-btn {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  border: 1px solid #9112BC;
  padding: 10px 22px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.cookie-btn:hover {
  transform: scale(1.05);
}

/* Secondary actions: Reject / Manage preferences —
   same white/purple outline treatment as .optionbutton */
.cookie-btn-outline {
  background: #ffffff;
  color: #9112BC;
}

.cookie-btn-outline:hover {
  background-color: #9112BC;
  color: #ffffff;
}

/* Primary action: Accept All / Save Preferences —
   mint-green "emphasis" treatment, same as .emphasisbutton,
   so it visually reads as the recommended choice without
   introducing a new color to the site */
.cookie-btn-emphasis {
  background-color: #C8F7C5;
  color: #9112BC;
}

.cookie-btn-emphasis:hover {
  background-color: #9112BC;
  color: #ffffff;
}

/* ---- Preferences modal, matched to the existing
   .card-header treatment (white bg, 2px purple border,
   purple title text) rather than Bootstrap's defaults ---- */
.cookie-modal-content {
  border: 2px solid #9112BC;
  border-radius: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.cookie-modal-header {
  background-color: #ffffff;
  border-bottom: 1px solid #9112BC;
  color: #9112BC;
}

.cookie-modal-header .modal-title {
  color: #9112BC;
  font-weight: 700;
}

@media (max-width: 576px) {
  .cookie-banner {
    padding: 14px 16px;
    /* A bit more room than desktop, since text and actions
       stack vertically here, but still capped well short of
       the viewport so it can never crowd out the top of the
       page. */
    max-height: 62vh;
  }
  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cookie-banner-text {
    /* Let the paragraph scroll on its own if it's ever long
       enough to need it, but keep it short enough that the
       buttons below are always on-screen without scrolling. */
    max-height: 22vh;
  }
  .cookie-banner-actions {
    flex-direction: column;
    justify-content: stretch;
  }
  .cookie-btn {
    flex: 1 1 auto;
    text-align: center;
  }
}