/* ================================================================
   AidersPlus cookie consent — banner + dialog
   ================================================================ */

/* ---------- Banner ---------- */
/* z-index: 300 → sits above the site-wide .mobile-cta sticky bar (z:200 in
   site.css). Without this, on ≤620px viewports the mobile-cta covers the
   cookie banner's buttons and users can't accept or customize. */
.cookie-banner {
  position: fixed; z-index: 300;
  left: 20px; right: 20px; bottom: 20px;
  max-width: 1120px; margin: auto;
  background: #12241e; color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 20px 70px rgba(0,0,0,.3);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner h2 { font: 700 22px/1.15 Georgia, serif; margin: 0 0 6px; }
.cookie-banner p  { margin: 0; color: #d5e2dc; font-size: 14px; line-height: 1.5; max-width: 680px; }
.cookie-banner a  { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.cookie-copy { min-width: 0; }

/* ---------- Actions ---------- */
.cookie-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.cookie-action {
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 11px 20px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;                 /* accessibility: min touch target */
  transition: background .12s, border-color .12s, color .12s;
}
/* Button variants — the BANNER sits on a dark green surface so its buttons
   invert (white primary, translucent-white secondary). The DIALOG sits on a
   WHITE surface, so the same classes need the opposite treatment — a dark
   filled primary and dark-outlined secondary. We scope by parent
   (.cookie-dialog) so one class name works in both contexts. */

/* Banner context (dark surface) */
.cookie-action.primary   { background: #fff;        color: #123c2f; border-color: #fff; }
.cookie-action.primary:hover { background: #e8f0eb; border-color: #e8f0eb; }
.cookie-action.secondary { background: transparent; color: #fff;    border-color: rgba(255,255,255,.55); }
.cookie-action.secondary:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.cookie-action.tertiary  { background: transparent; color: #6d7f77; border-color: #cfd9d3; }
.cookie-action.tertiary:hover { color: #123c2f; border-color: #123c2f; }

/* Dialog context (white surface) — same classes, inverted colours */
.cookie-dialog .cookie-action.primary {
  background: #123c2f; color: #fff; border-color: #123c2f;
}
.cookie-dialog .cookie-action.primary:hover {
  background: #0e3b2e; border-color: #0e3b2e;
}
.cookie-dialog .cookie-action.secondary {
  background: transparent; color: #192720; border-color: #cfd9d3;
}
.cookie-dialog .cookie-action.secondary:hover {
  background: #f4f7f5; border-color: #96a89f;
}
/* Tertiary in the dialog keeps its subtle outlined look — no override needed. */

/* ---------- Dialog ---------- */
.cookie-dialog {
  width: min(660px, calc(100% - 32px));
  border: 0; border-radius: 18px;
  padding: 0; color: #192720;
  box-shadow: 0 30px 90px rgba(0,0,0,.38);
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
.cookie-dialog::backdrop { background: rgba(9,20,16,.62); }
.cookie-dialog form      { padding: 24px; }
.cookie-dialog h2        { font: 700 26px/1.15 Georgia, serif; margin: 0; }
.cookie-dialog .dialog-intro { color: #5e6f67; margin: 8px 0 20px; line-height: 1.5; }

.preference-list { display: grid; gap: 10px; }
.preference-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: center;
  padding: 14px 16px;
  border: 1px solid #dce5e0;
  border-radius: 12px;
}
.preference-row strong { display: block; font-size: 14px; }
.preference-row small  { display: block; color: #63736b; margin-top: 3px; font-size: 12px; line-height: 1.5; }
.preference-row input {
  width: 22px; height: 22px;
  accent-color: #124d3c;
  cursor: pointer;
}
.preference-row input:disabled { opacity: .7; cursor: not-allowed; }

.dialog-actions {
  display: flex; justify-content: flex-end;
  gap: 10px; margin-top: 22px;
  flex-wrap: wrap;
}
.dialog-actions [data-cookie-reject] { margin-right: auto; }  /* pushes Reject to the left */
.cookie-status {
  font-size: 12px; color: #496057;
  margin-top: 12px; min-height: 18px;
}

/* ================================================================
   Responsive breakpoints
   ================================================================ */

/* Tablet — banner still side-by-side but tightens padding */
@media (max-width: 900px) {
  .cookie-banner { padding: 18px 20px; gap: 16px; }
  .cookie-banner h2 { font-size: 20px; }
  .cookie-action { padding: 10px 16px; font-size: 13.5px; }
}

/* Phone — stack banner content over actions; buttons go full-width.
   NOTE: at ≤620px the site renders a .mobile-cta sticky bar (site.css, ~68-76px
   tall including safe-area). We push the banner above it so both are usable.
   Between 620-720px there's no mobile-cta, so the reduced bottom offset applies. */
@media (max-width: 720px) {
  .cookie-banner {
    left: 12px; right: 12px; bottom: 12px;
    padding: 18px;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cookie-banner h2 { font-size: 18px; margin-bottom: 4px; }
  .cookie-banner p  { font-size: 13.5px; }
  .cookie-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* Customize | Accept side-by-side */
    gap: 10px;
  }
  .cookie-action {
    padding: 12px 12px;
    font-size: 14px;
    width: 100%;
  }
  /* Dialog: fill the phone screen with breathing room */
  .cookie-dialog { width: calc(100% - 20px); }
  .cookie-dialog form { padding: 20px; }
  .cookie-dialog h2 { font-size: 22px; }
  .preference-row { padding: 12px 14px; grid-template-columns: 1fr auto; gap: 12px; }
  .dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px;
  }
  .dialog-actions [data-cookie-reject] { margin-right: 0; }
  .dialog-actions .cookie-action { width: 100%; }
  /* Reorder: Save primary at top, Cancel middle, Reject at bottom.
     Puts affirmation first (natural thumb reach), reject last but visible. */
  .dialog-actions [data-cookie-save]   { order: 1; }
  .dialog-actions [value="cancel"]     { order: 2; }
  .dialog-actions [data-cookie-reject] { order: 3; }
}

/* Coordinated with site.css .mobile-cta breakpoint (max-width:620px).
   Push the banner above the sticky "Browse equipment | Menu" bar so its buttons
   remain tappable. Height calc:
     10px top padding + 48px button + 10px bottom padding + safe-area ≈ 68–76px
   +12px gap between banner and mobile-cta. */
@media (max-width: 620px) {
  .cookie-banner {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* Very small phones (≤380px, iPhone SE) — stack the banner buttons too */
@media (max-width: 380px) {
  .cookie-actions { grid-template-columns: 1fr; }
}

@media print {
  .cookie-banner, .cookie-dialog { display: none !important; }
}

/* ---------- Ancillary: footer buttons that open the dialog ---------- */
.footer-link-button,
.legal-footer .link-button {
  border: 0; background: none; color: inherit;
  padding: 0; font: inherit; cursor: pointer;
}
.footer-link-button:hover,
.legal-footer .link-button:hover { text-decoration: underline; }