/* Cookie notice + preference centre for the public pages (markup:
   components/welcome/cookie-consent.blade.php, behaviour: assets/js/cookie-consent.js).
   Same copy, layout, position and motion as the NiWE-MA sites (ported from niwema-frontend /
   niwe-ma_offline), in this site's primary (#122667, style.css .home-five) instead of NiWE-MA's red/orange. The
   motion is CSS keyframes on the same choreography and timings (no GSAP here). */

.cb,
.cd {
  /* Above the site header and Bootstrap's fixed elements (1030); the drawer above the bar. */
  --nw-z-backdrop: 1040;
  --nw-z-dialog: 1050;
  --nw-surface-base: #ffffff;
  --nw-surface-soft: #f7f7f7;
  --nw-text-primary: #131312;
  --nw-text-muted-70: rgba(19, 19, 18, 0.7);
  /* This site's navy (style.css .home-five), not NiWE-MA's red/orange. */
  --nw-brand-primary: #122667;
  --nw-brand-primary-dark: #0b1a4a;
  --nw-text-link: var(--nw-brand-primary);
  --nw-text-inverse: #ffffff;
  --nw-color-white: #ffffff;
  --nw-border-subtle: #f0f0f0;
  --nw-focus-color: var(--nw-brand-primary);
  --nw-gradient-border: linear-gradient(90deg, var(--nw-brand-primary-dark) 0%, var(--nw-brand-primary) 100%);
  --nw-shadow-dialog: 0 16px 48px rgb(19 19 18 / 18%);
  --nw-layout-max: 1312px;
  --nw-layout-gutter-lg: 64px;
  --nw-layout-gutter-md: 24px;
  --nw-layout-gutter-sm: 16px;
  --nw-space-4: 16px;
  --nw-radius-control: 8px;
  --nw-motion-duration-quick: 150ms;
  --nw-motion-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --nw-motion-ease-move: cubic-bezier(0.4, 0, 0.2, 1);
  --nw-motion-ease-exit: cubic-bezier(0.55, 0.085, 0.68, 0.53);

  font-family: inherit;
  box-sizing: border-box;
}

.cb *,
.cd * {
  box-sizing: border-box;
}

.cb[hidden],
.cd[hidden] {
  display: none;
}

/* ═══ Notice bar ═════════════════════════════════════════════════════════
   Docked flush to the bottom edge, full width; its contents line up with
   the site's container, like the header. */
.cb {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--nw-z-backdrop);
  background: var(--nw-surface-base);
  box-shadow: 0 -4px 18px rgb(19 19 18 / 12%);
  color: var(--nw-text-primary);
}

/* Brand rule along the top edge, drawn across on entry. */
.cb__rule {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--nw-gradient-border);
  transform-origin: left center;
}

.cb__inner {
  display: flex;
  align-items: center;
  gap: 16px 24px;
  max-width: var(--nw-layout-max);
  margin: 0 auto;
  padding: 14px var(--nw-layout-gutter-lg);
}

.cb__mark {
  flex-shrink: 0;
  overflow: visible;
}

.cb__text {
  flex: 1;
  max-width: 680px;
  margin: 0 auto 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--nw-text-muted-70);
}

.cb__link {
  color: var(--nw-text-link);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cb__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The two choices carry equal size and weight; Settings sits quieter. */
.cb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  height: 40px;
  padding: 0 var(--nw-space-4);
  border-radius: var(--nw-radius-control);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  /* The original's v-button-motion (hover lift, press squeeze), in CSS. */
  transition: transform 0.25s cubic-bezier(0.33, 1, 0.68, 1), background-color 0.15s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cb__btn:hover {
    transform: translateY(-3px) scale(1.04);
  }

  .cb__btn:active {
    transform: scale(0.96);
    transition-duration: 0.1s;
  }
}

.cb__btn--primary {
  border: none;
  background: var(--nw-brand-primary);
  color: var(--nw-text-inverse);
}

.cb__btn--primary:hover {
  background: var(--nw-brand-primary-dark);
}

.cb__btn--outline {
  border: 1.5px solid var(--nw-brand-primary);
  background: var(--nw-surface-base);
  color: var(--nw-brand-primary);
}

.cb__settings {
  height: 40px;
  padding: 0 10px;
  border: none;
  border-radius: var(--nw-radius-control);
  background: none;
  color: var(--nw-brand-primary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--nw-motion-duration-quick) var(--nw-motion-ease-enter);
}

.cb__settings:hover,
.cb__close:hover {
  background: var(--nw-surface-soft);
}

.cb__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: -6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--nw-text-primary);
  cursor: pointer;
  transition: background-color var(--nw-motion-duration-quick) var(--nw-motion-ease-enter);
}

.cb__btn:focus-visible,
.cb__settings:focus-visible,
.cb__close:focus-visible,
.cb__link:focus-visible {
  outline: 2px solid var(--nw-focus-color);
  outline-offset: 2px;
}

/* ── Bar entrance (the original's GSAP timeline, as keyframes) ─────────────
   Every piece starts after --cb-delay: 0s the bar slides up · 0.15s the rule
   draws across · 0.2s the mark turns upright as its outline draws round ·
   0.28s the sentence fades up · 0.4s the buttons follow in turn · 0.5s the chips
   appear one by one. `backwards` holds the start state through the delay and then
   lets go, so hover transforms and the exit transition still apply afterwards. */
.cb {
  animation: cb-rise 0.6s var(--nw-motion-ease-enter) var(--cb-delay, 0s) backwards;
}

.cb__rule {
  animation: cb-draw-across 0.7s var(--nw-motion-ease-move) calc(var(--cb-delay, 0s) + 0.15s) backwards;
}

.cb__mark {
  animation: cb-turn-upright 0.7s var(--nw-motion-ease-enter) calc(var(--cb-delay, 0s) + 0.2s) backwards;
}

.cb-outline {
  stroke: var(--nw-brand-primary-dark);
  stroke-dasharray: 1;
  animation: cb-draw-round 0.6s var(--nw-motion-ease-move) calc(var(--cb-delay, 0s) + 0.2s) backwards;
}

.cb-chip-stop--from {
  stop-color: var(--nw-brand-primary-dark);
}

.cb-chip-stop--to {
  stop-color: var(--nw-brand-primary);
}

.cb-chip {
  transform-box: fill-box;
  transform-origin: center;
  animation: cb-pop 0.3s var(--nw-motion-ease-enter) calc(var(--cb-delay, 0s) + 0.5s) backwards;
}

.cb-chip:nth-of-type(2) { animation-delay: calc(var(--cb-delay, 0s) + 0.56s); }
.cb-chip:nth-of-type(3) { animation-delay: calc(var(--cb-delay, 0s) + 0.62s); }
.cb-chip:nth-of-type(4) { animation-delay: calc(var(--cb-delay, 0s) + 0.68s); }

.cb__text {
  animation: cb-fade-up 0.45s var(--nw-motion-ease-enter) calc(var(--cb-delay, 0s) + 0.28s) backwards;
}

.cb__actions > *,
.cb__close {
  animation: cb-fade-up 0.4s var(--nw-motion-ease-enter) calc(var(--cb-delay, 0s) + 0.4s) backwards;
}

.cb__actions > :nth-child(2) { animation-delay: calc(var(--cb-delay, 0s) + 0.46s); }
.cb__actions > :nth-child(3) { animation-delay: calc(var(--cb-delay, 0s) + 0.52s); }
.cb__close { animation-delay: calc(var(--cb-delay, 0s) + 0.58s); }

@keyframes cb-rise {
  from { opacity: 0; visibility: hidden; transform: translateY(100%); }
  to { opacity: 1; visibility: visible; transform: none; }
}

@keyframes cb-draw-across {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes cb-turn-upright {
  from { transform: rotate(-40deg); }
  to { transform: none; }
}

@keyframes cb-draw-round {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes cb-pop {
  from { transform: scale(0); }
  to { transform: none; }
}

@keyframes cb-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Exit: sinks and fades out (js adds .is-leaving, then hides it). */
.cb.is-leaving {
  animation: none;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.25s var(--nw-motion-ease-exit), opacity 0.25s var(--nw-motion-ease-exit);
}

@media (max-width: 1023px) {
  .cb__inner {
    padding-inline: var(--nw-layout-gutter-md);
  }
}

/* Tablets and phones: the sentence (with ✕ beside it) on top, choices beneath. */
@media (max-width: 899px) {
  .cb__inner {
    flex-wrap: wrap;
    gap: 12px;
  }

  .cb__text {
    flex: 1 1 calc(100% - 92px);
    max-width: none;
    margin: 0;
  }

  .cb__close {
    order: 2;
    align-self: flex-start;
    margin: -4px -6px 0 0;
  }

  .cb__actions {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-end;
  }
}

/* Phones: two equal choices side by side, Settings beneath. */
@media (max-width: 639px) {
  .cb__inner {
    padding: 14px var(--nw-layout-gutter-sm) calc(14px + env(safe-area-inset-bottom));
  }

  .cb__mark {
    width: 22px;
    height: 22px;
    align-self: flex-start;
  }

  .cb__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .cb__btn {
    min-width: 0;
  }

  .cb__settings {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 32px;
  }
}

/* ═══ Preferences drawer ═════════════════════════════════════════════════ */
.cd {
  position: fixed;
  inset: 0;
  z-index: var(--nw-z-dialog);
}

.cd__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(19 19 18 / 40%);
  opacity: 0;
  transition: opacity 0.28s var(--nw-motion-ease-exit);
}

.cd__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  background: var(--nw-surface-base);
  box-shadow: var(--nw-shadow-dialog);
  color: var(--nw-text-primary);
  transform: translateX(100%);
  transition: transform 0.28s var(--nw-motion-ease-exit);
}

/* Open: slides in from its edge over a fading backdrop (js toggles .is-open). */
.cd.is-open .cd__backdrop {
  opacity: 1;
  transition: opacity 0.3s var(--nw-motion-ease-enter);
}

.cd.is-open .cd__panel {
  transform: none;
  transition: transform 0.4s var(--nw-motion-ease-enter);
}

.cd__panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--nw-gradient-border);
}

.cd__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 24px 12px;
}

.cd__title {
  flex: 1;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--nw-text-primary);
}

.cd__title:focus {
  outline: none;
}

.cd__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: -6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--nw-text-muted-70);
  cursor: pointer;
  transition: background-color var(--nw-motion-duration-quick) var(--nw-motion-ease-enter);
}

.cd__close:hover {
  background: var(--nw-surface-soft);
}

.cd__close:focus-visible,
.cd__switch:focus-visible {
  outline: 2px solid var(--nw-focus-color);
  outline-offset: 2px;
}

.cd__body {
  flex: 1;
  min-height: 0;
  padding: 0 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cd__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--nw-text-muted-70);
}

.cd__list {
  margin: 16px 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--nw-border-subtle);
}

.cd__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--nw-border-subtle);
}

.cd__row-text {
  flex: 1;
  display: grid;
  gap: 2px;
}

.cd__row-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.cd__row-body {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--nw-text-muted-70);
}

.cd__switch {
  flex-shrink: 0;
  position: relative;
  width: 40px;
  height: 24px;
  margin-top: 2px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: #c9c9d3;
  cursor: pointer;
  transition: background-color 200ms var(--nw-motion-ease-move);
}

.cd__switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--nw-color-white);
  box-shadow: 0 1px 2px rgb(19 19 18 / 20%);
  transition: transform 200ms var(--nw-motion-ease-move);
}

.cd__switch[aria-checked='true'] {
  background: var(--nw-brand-primary);
}

.cd__switch[aria-checked='true'] .cd__switch-thumb {
  transform: translateX(16px);
}

/* Locked on: strictly necessary cookies cannot be turned off. */
.cd__switch:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.cd__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--nw-border-subtle);
}

.cd__foot .cb__btn {
  min-width: 0;
  height: 44px;
}

/* Phones: a sheet up from the bottom. */
@media (max-width: 639px) {
  .cd__panel {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 85svh;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    transform: translateY(100%);
  }

  .cd__head {
    padding: 20px 20px 10px;
  }

  .cd__body {
    padding: 0 20px;
  }

  .cd__foot {
    padding: 14px 20px calc(20px + env(safe-area-inset-bottom));
  }
}

/* Footer "Cookie settings": reads as a link next to the others. */
.footer-cookie-settings {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .cb,
  .cb *,
  .cd *,
  .cd__switch,
  .cd__switch-thumb,
  .cb__btn,
  .cb__settings,
  .cd__close {
    animation: none !important;
    transition: none !important;
  }
}

/* Footer: "Cookie Policy" + "Cookie settings" in the footer's third column, on the dark bar. */
.footer-cookie-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 20px;
}

.footer-cookie-links a,
.footer-cookie-links .footer-cookie-settings {
  color: #ffffff;
  font-size: 14px;
}

.footer-cookie-links a:hover,
.footer-cookie-links .footer-cookie-settings:hover {
  color: #ffd600;
}

@media (max-width: 767px) {
  .footer-cookie-links {
    justify-content: center;
    margin-top: 12px;
  }
}