.cookies-modal{--navy:#1c3a55;--orange:#f38523;--font-body:"Montserrat", system-ui, sans-serif;--font-head:"Inria Serif", Georgia, serif;}.cookies-modal,.cookies-modal *{box-sizing:border-box}.cookies-modal [hidden]{display:none!important}
/* Cookie consent modal — copied from the original #cookies-modal (visual).
   LOC-2033: the element is a native <dialog> now, so this block also has to
   undo the UA stylesheet, which hands every dialog `position: absolute`,
   `width/height: fit-content`, `margin: auto`, `border: solid`, `padding: 1em`
   and — once modal — a `max-width/max-height: calc(100% - 6px - 2em)` cap. The
   painted result is unchanged from before: live's scrim is rgba(0,0,0,.5)
   (`bg-black bg-opacity-50`, measured 2026-08-21) and the card is centred in a
   24px gutter, exactly as it was. */
.cookies-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  border: 0;
  /* The UA's own value for a dialog, restated because everything around it here
     is an override. The card is capped at 86vh and centres inside a 24px
     gutter, so this never engages above a ~343px-tall viewport; below that (a
     phone in landscape) a dialog that scrolls beats one that clips. */
  overflow: auto;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* A <dialog> is display:none until it is open — but the UA's `dialog:not([open])`
   is a single type selector, so the `display: flex` above outranks it and the
   dialog would paint on every page with nothing to consent to. Say it here. */
.cookies-modal:not([open]) {
  display: none;
}
/* showModal() paints a UA backdrop (rgba(0,0,0,.1)) UNDER the dialog box. The
   scrim already lives on the dialog itself, so leaving the UA one would stack a
   second wash on top of live's measured .5 and darken the page past it. This
   removes an ornament, it does not add one (hard rule #4b). */
.cookies-modal::backdrop {
  background: transparent;
}
.cookies-modal__card {
  background: #fff;
  border-radius: 14px;
  max-width: 920px;
  width: 100%;
  max-height: 86vh;
  overflow: auto;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
@media (min-width: 1024px) {
  .cookies-modal__card {
    flex-direction: row;
    align-items: flex-start;
  }
}
.cookies-modal__body {
  flex: 1;
}
.cookies-modal__title {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 14px;
}
.cookies-modal__text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: #5a5a5a;
  margin: 0 0 12px;
}
.cookies-modal__link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
  margin-bottom: 14px;
}
.cookies-modal__choose {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--navy);
  font-size: 14px;
  margin: 6px 0 4px;
}
.cookies-cat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #ececec;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--navy);
}
.cookies-cat input {
  width: 18px;
  height: 18px;
  accent-color: var(--orange);
}
.cookies-modal__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  /* LOC-1993: the card is the scroll container, and this row is its LAST child,
     so on a phone the whole button column — Reject included — started below the
     fold and consent could only be given or refused after scrolling. Hard rule
     #3: reject has to be exactly as reachable as accept.
     Live solves it by pinning this row inside the scrolling card, and this is
     that mechanism cloned, not an invention of ours. Measured on
     villagrancanaria.com/ (2026-08-20, 412x780) on the element that carries the
     three buttons — `div.…grid.gap-2.mt-6.sticky.bottom-0.bg-white`:
         position: sticky · bottom: 0px · background: rgb(255, 255, 255)
         box-shadow: none  · rect 554→732 inside a card whose box is 32→748
     The background is load-bearing, not decoration: without it the text keeps
     scrolling visibly UNDER the buttons. It is the same #fff the card above
     already paints, and it is what live computes here. */
  position: sticky;
  bottom: 0;
  background: #fff;
}
@media (min-width: 1024px) {
  .cookies-modal__buttons {
    min-width: 210px;
  }
}
.cookies-btn {
  padding: 10px 22px;
  border-radius: 9999px;
  border: 1.5px solid var(--navy);
  background: #fff;
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.cookies-btn--primary {
  background: var(--navy);
  color: #fff;
}
.cookies-btn--ghost {
  border-color: #cfcfcf;
  color: #7a7a7a;
}