/* Low Altitude Analytics cookie notice. Uses the theme's tokens (style.css :root), with the same values as fallbacks.
   A compact card, bottom left, so it never covers the chat button at the bottom right. On phones it spans the width
   at the bottom, and sits just above the chat button when the chat is on (consent.js measures it).
   z-index 40: below the sticky header (50) and the chat (60). The Book a call pop-up is a modal dialog, so it's above everything. */
.laa-consent[hidden], .laa-consent-prefs[hidden] { display: none !important; }

.laa-consent {
  position: fixed;
  z-index: 40;
  left: max(20px, env(safe-area-inset-left, 0px));
  bottom: var(--laa-consent-bottom, calc(20px + env(safe-area-inset-bottom, 0px)));
  width: min(400px, calc(100vw - 260px));
  /* Never reaches up to the header. consent.js sets --laa-consent-top from the header's real height. */
  max-height: calc(100vh - var(--laa-consent-top, 96px) - var(--laa-consent-bottom, 20px) - 12px);
  max-height: calc(100dvh - var(--laa-consent-top, 96px) - var(--laa-consent-bottom, 20px) - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 16px 18px 18px;
  background: var(--card, #1b212a);
  color: var(--text, #e7ebf0);
  border: 1px solid var(--line, #2a323d);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  font-family: var(--font-body, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif);
  font-size: .9375rem;
  line-height: 1.5;
  text-align: left;
}
.laa-consent:focus { outline: none; }
.laa-consent:focus-visible { outline: 3px solid var(--amber, #f2a93b); outline-offset: 2px; }

.laa-consent .laa-consent__title {
  margin: 0 40px 8px 0;
  font: 600 .75rem/1.4 var(--font-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber, #f2a93b);
  text-wrap: wrap;
}
.laa-consent .laa-consent__text { margin: 0 0 14px; color: var(--text, #e7ebf0); overflow-wrap: break-word; }
.laa-consent .laa-consent__text a { color: var(--amber, #f2a93b); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.laa-consent .laa-consent__text a:hover { color: #ffc56e; }
.laa-consent .laa-consent__note { margin: -4px 0 14px; color: var(--muted, #98a3b2); font-size: .875rem; }
.laa-consent .laa-consent__status { margin: -4px 0 14px; color: var(--danger, #ff8a80); font-weight: 600; font-size: .875rem; }
.laa-consent .laa-consent__status:empty { display: none; }

/* Equal buttons: same size, colour and weight, so neither answer is pushed. */
.laa-consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.laa-consent .laa-consent__choice {
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 2px solid var(--amber, #f2a93b);
  border-radius: 7px;
  background: transparent;
  color: var(--text, #e7ebf0);
  font: 600 1rem/1.2 var(--font-body, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif);
  cursor: pointer;
}
.laa-consent .laa-consent__choice:hover { background: rgba(242, 169, 59, .14); }

.laa-consent .laa-consent__close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #98a3b2);
  font: 400 28px/1 var(--font-body, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif);
  cursor: pointer;
}
.laa-consent .laa-consent__close:hover { color: var(--text, #e7ebf0); background: rgba(255, 255, 255, .06); border-color: var(--line, #2a323d); }

.laa-consent a:focus-visible,
.laa-consent button:focus-visible,
.laa-consent-prefs:focus-visible { outline: 3px solid var(--amber, #f2a93b); outline-offset: 2px; border-radius: 7px; }

/* Phones: full width at the bottom. */
@media (max-width: 640px) {
  .laa-consent {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: var(--laa-consent-bottom, calc(12px + env(safe-area-inset-bottom, 0px)));
    width: auto;
    padding: 14px 14px 16px;
  }
  .laa-consent .laa-consent__choice { min-height: 48px; }
}

/* Shortcode button: [laa_cookie_preferences] */
.laa-consent-prefs {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--field-line, #707b8b);
  border-radius: 7px;
  background: transparent;
  color: var(--text, #e7ebf0);
  font: 600 1rem/1.2 var(--font-body, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif);
  cursor: pointer;
}
.laa-consent-prefs:hover { border-color: var(--amber, #f2a93b); }

.laa-consent-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: no-preference) {
  .laa-consent { animation: laa-consent-in .2s ease-out; }
}
@keyframes laa-consent-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media print { .laa-consent { display: none !important; } }

/* Settings screen preview: the same card, in place. */
.laa-consent-previews { display: flex; flex-wrap: wrap; gap: 24px; margin: 12px 0 8px; }
.laa-consent-preview { margin: 0; padding: 16px; background: #12161c; border-radius: 10px; }
.laa-consent-preview figcaption { margin: 0 0 10px; color: #e7ebf0; font-weight: 600; }
.laa-consent.laa-consent--preview { position: relative; left: auto; bottom: auto; width: 380px; max-width: 100%; max-height: none; animation: none; box-shadow: none; }
