/* ═══════════════════════════════════════════════════════════════
   Slate — Shared overlay styles.
   Loaded by both the CMS editor preview and the display kiosks, so
   what you see in the editor === what ships on screens.

   Overlay layouts render alongside species content (not over it) in
   a dedicated layer. All overlays use .cp-overlay as their base and
   one of the 5 variant classes + a position class.
   ═══════════════════════════════════════════════════════════════ */
.cp-overlay {
  position:absolute; pointer-events:none;
  font-family:'Inter',system-ui,sans-serif; color:#fff;
  z-index:40;
  animation:cpOverlayIn .35s cubic-bezier(.22,.7,.3,1);
}
@keyframes cpOverlayIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Position classes */
.cp-overlay-pos-top-left     { top:2.4vw;    left:2.4vw; }
.cp-overlay-pos-top-right    { top:2.4vw;    right:2.4vw; }
.cp-overlay-pos-bottom-left  { bottom:2.4vw; left:2.4vw; }
.cp-overlay-pos-bottom-right { bottom:2.4vw; right:2.4vw; }
.cp-overlay-pos-top          { top:0;     left:0; right:0; }
.cp-overlay-pos-bottom       { bottom:0;  left:0; right:0; }

/* Corner card */
.cp-overlay-card {
  width:22vw; min-width:280px; max-width:420px;
  padding:1.2vw 1.4vw; border-radius:14px;
  background:rgba(10,20,40,0.88); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 8px 28px rgba(0,0,0,0.45);
}
.cp-overlay-card .cp-ov-title { font-size:1.4vw; font-weight:700; line-height:1.15; margin-bottom:0.4em; }
.cp-overlay-card .cp-ov-body  { font-size:0.95vw; line-height:1.45; opacity:0.85; margin-bottom:0.7em; }
.cp-overlay-card .cp-ov-cta {
  display:inline-block; padding:0.5em 1em; border-radius:99px;
  font-weight:700; font-size:0.8vw; text-transform:uppercase; letter-spacing:.06em; color:#001a3d;
}

/* Ticker strip */
.cp-overlay-ticker {
  height:3.2vw; min-height:42px;
  background:linear-gradient(90deg, rgba(6,9,15,0.95), rgba(6,9,15,0.85));
  border-top:1px solid rgba(255,255,255,0.06);
  overflow:hidden; display:flex; align-items:center;
}
.cp-overlay-ticker.cp-overlay-pos-top {
  border-top:none; border-bottom:1px solid rgba(255,255,255,0.06);
}
.cp-ov-ticker-track {
  display:flex; gap:3em; padding-left:100%;
  animation:cpTickerScroll 28s linear infinite; white-space:nowrap;
}
.cp-ov-ticker-msg { font-size:1.2vw; font-weight:600; }
.cp-ov-ticker-cta { font-size:1.2vw; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
@keyframes cpTickerScroll { to { transform:translateX(-100%); } }

/* QR badge */
.cp-overlay-qr {
  width:9.5vw; min-width:132px; max-width:182px;
  padding:0.75vw; border-radius:13px;
  background:rgba(10,20,40,0.92); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 8px 28px rgba(0,0,0,0.45);
  text-align:center;
}
.cp-overlay-qr .cp-ov-qr-img {
  width:100%; aspect-ratio:1/1; background:#fff; border-radius:8px; display:block;
}
.cp-overlay-qr .cp-ov-qr-placeholder {
  display:flex; align-items:center; justify-content:center;
  color:#000; font-family: var(--aqos-ff-sans, 'Inter', system-ui, sans-serif); font-size:0.9vw;
}
.cp-overlay-qr .cp-ov-qr-label { font-size:0.8vw; margin-top:0.5em; opacity:0.88; }
/* Photo variant: QR + photo as two equal squares side by side, caption
   centred underneath both. */
.cp-overlay-qr.has-photo { width:auto; max-width:none; text-align:center; }
.cp-overlay-qr .cp-ov-qr-row { display:flex; gap:0.6vw; align-items:stretch; }
.cp-overlay-qr.has-photo .cp-ov-qr-main {
  flex:0 0 auto; width:8.5vw; min-width:116px; max-width:160px;
}
.cp-overlay-qr.has-photo .cp-ov-qr-main .cp-ov-qr-img { width:100%; aspect-ratio:1/1; }
.cp-overlay-qr .cp-ov-qr-photo { flex:0 0 auto; width:8.5vw; min-width:116px; max-width:160px; }
.cp-overlay-qr .cp-ov-qr-photo img {
  width:100%; aspect-ratio:1/1; height:auto; object-fit:cover; display:block;
  border-radius:8px; border:1px solid rgba(255,255,255,0.12);
}

/* Offer mode — EMBEDDED promo. No card, no scrim: type sits directly on
   the live kiosk scene (legibility from text-shadows). Compact cluster —
   offer text left, QR chip right. Price is the hero; the SAVE sticker +
   strike appear only with a was-price. Ribbon + SAVE use --cp-save, which
   the creative's accent colour drives. (2026-06-14) */
.cp-overlay-qr.is-offer {
  --cp-save:#ff6a55;
  display:flex; align-items:center; justify-content:flex-start; gap:2.6vw;
  width:auto; max-width:48%; text-align:left;
  padding:0;
  background:none; border:0; box-shadow:none; border-radius:0; backdrop-filter:none;
}
.cp-overlay-qr .cp-ov-of-body { display:flex; flex-direction:column; min-width:0; }
.cp-overlay-qr .cp-ov-of-ribbon {
  align-self:flex-start; font:800 0.64vw/1 var(--aqos-ff-sans,'Inter',system-ui,sans-serif);
  letter-spacing:0.05em; text-transform:uppercase; color:#fff;
  padding:0.5em 0.75em; border-radius:0.5em; margin-bottom:0.55em; transform:rotate(-2deg);
  background:var(--cp-save); box-shadow:0 0.4em 1em -0.3em rgba(255,106,85,.55);
}
.cp-overlay-qr .cp-ov-of-ribbon:not(.is-deal) { background:rgba(255,255,255,.18); box-shadow:none; transform:none; }
.cp-overlay-qr .cp-ov-of-name { font:800 1.55vw/1 var(--aqos-ff-display,'Inter Tight','Inter',sans-serif); letter-spacing:-0.03em; color:#fff; text-shadow:0 0.08em 0.7em rgba(0,0,0,.7); }
.cp-overlay-qr .cp-ov-of-pricerow { display:flex; align-items:flex-end; gap:0.8vw; margin-top:0.2em; flex-wrap:wrap; }
.cp-overlay-qr .cp-ov-of-price { font:800 2.4vw/0.9 var(--aqos-ff-display,'Inter Tight','Inter',sans-serif); letter-spacing:-0.04em; color:#fff; text-shadow:0 0.1em 0.8em rgba(0,0,0,.7); }
.cp-overlay-qr .cp-ov-of-was { font:600 0.95vw/1 var(--aqos-ff-sans,'Inter',sans-serif); color:rgba(255,255,255,.7); text-decoration:line-through; text-decoration-thickness:0.16em; margin-bottom:0.45em; text-shadow:0 0.08em 0.6em rgba(0,0,0,.7); }
.cp-overlay-qr .cp-ov-of-save { align-self:center; font:800 0.68vw/1 var(--aqos-ff-sans,'Inter',sans-serif); color:#fff; background:var(--cp-save); padding:0.5em 0.65em; border-radius:999px; white-space:nowrap; transform:rotate(3deg); }
/* The QR IMAGE (not the column) centres vertically against the offer, so
   it sits level with the price hero. The caption is taken out of flow
   (absolutely positioned under the QR) so its height can't push the QR up. */
.cp-overlay-qr .cp-ov-of-qr {
  flex:0 0 auto; position:relative; display:flex; align-items:center; justify-content:center;
  border-left:0; padding-left:0;
}
.cp-overlay-qr .cp-ov-of-qr .cp-ov-qr-img {
  width:4.4vw; min-width:56px; max-width:88px; aspect-ratio:1/1;
  border-radius:0.6em; box-shadow:0 0.6em 1.6em -0.4em rgba(0,0,0,.55);
}
.cp-overlay-qr .cp-ov-of-qr .cp-ov-qr-label {
  position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:0.5em;
  font:700 0.6vw/1.1 var(--aqos-ff-sans,'Inter',sans-serif); letter-spacing:0.05em;
  text-transform:uppercase; white-space:nowrap; color:rgba(255,255,255,.85); opacity:1;
  text-align:center; text-shadow:0 0.08em 0.6em rgba(0,0,0,.7);
}

/* Event / booking badge — offer-badge skeleton (text left, QR right,
   embedded, accent-driven) carrying countdown content: name hero, live
   countdown, next start time, a CTA/price ribbon, QR to book. Reuses the
   .cp-ov-of-qr column above for the QR + caption. (2026-06-15) */
.cp-overlay-qr.is-event {
  --cp-save:#2dd4bf;
  display:flex; align-items:center; justify-content:flex-start; gap:2.6vw;
  width:auto; max-width:52%; text-align:left;
  padding:0; background:none; border:0; box-shadow:none; border-radius:0; backdrop-filter:none;
}
.cp-overlay-qr .cp-ov-ev-body { display:flex; flex-direction:column; min-width:0; }
.cp-overlay-qr .cp-ov-ev-ribbon {
  align-self:flex-start; font:800 0.64vw/1 var(--aqos-ff-sans,'Inter',system-ui,sans-serif);
  letter-spacing:0.06em; text-transform:uppercase; color:#fff;
  padding:0.5em 0.8em; border-radius:0.5em; margin-bottom:0.7em;
  background:var(--cp-save); box-shadow:0 0.4em 1em -0.3em rgba(0,0,0,.45);
  display:inline-flex; align-items:center; gap:0.5em;
}
.cp-overlay-qr .cp-ov-ev-live { display:none; }
.cp-overlay-qr.is-live .cp-ov-ev-cta { display:none; }
.cp-overlay-qr.is-live .cp-ov-ev-live { display:inline-flex; }
.cp-overlay-qr.is-live .cp-ov-ev-pre { display:none; }
.cp-overlay-qr .cp-ov-ev-pulse { width:0.55em; height:0.55em; border-radius:50%; background:#fff; animation:cpEvPulse 1.6s infinite; }
@keyframes cpEvPulse { 0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)} 70%{box-shadow:0 0 0 0.6em rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} }
.cp-overlay-qr .cp-ov-ev-name { font:800 1.9vw/1 var(--aqos-ff-display,'Inter Tight','Inter',sans-serif); letter-spacing:-0.03em; color:#fff; text-shadow:0 0.08em 0.7em rgba(0,0,0,.7); }
.cp-overlay-qr .cp-ov-ev-meta { display:flex; align-items:baseline; gap:0.7vw; margin-top:0.6em; flex-wrap:wrap; }
.cp-overlay-qr .cp-ov-ev-count { font:700 1.15vw/1 var(--aqos-ff-sans,'Inter',sans-serif); color:rgba(255,255,255,.92); text-shadow:0 0.08em 0.6em rgba(0,0,0,.7); }
.cp-overlay-qr .cp-ov-ev-count b { color:var(--cp-save); font-weight:800; }
.cp-overlay-qr .cp-ov-ev-sep { opacity:0.45; }
.cp-overlay-qr .cp-ov-ev-time { font:700 1.15vw/1 var(--aqos-ff-sans,'Inter',sans-serif); color:rgba(255,255,255,.7); text-shadow:0 0.08em 0.6em rgba(0,0,0,.7); }

/* Countdown pill — Phase 58e: single-line layout AND pill grows
   to fit. Earlier attempt truncated long titles with an ellipsis
   ("REEF RE…") to keep the pill width capped — curator wanted
   the full title visible instead. Now: nowrap on every child,
   no max-width on the label, no overflow-hidden — the pill
   simply expands as wide as the content needs to read in full. */
.cp-overlay-pill {
  display:inline-flex; align-items:center; gap:0.8em;
  padding:0.7vw 1.2vw; border-radius:99px;
  background:rgba(10,20,40,0.92); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  white-space:nowrap;
  flex-wrap:nowrap;
  width:max-content;
  max-width:none;
}
.cp-overlay-pill .cp-ov-pill-label {
  font-size:0.95vw; opacity:0.8; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  white-space:nowrap;
  flex-shrink:0;
}
.cp-overlay-pill .cp-ov-pill-clock {
  font-size:1.6vw; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-0.02em;
  color:var(--cp-accent,#00c8b4);
  white-space:nowrap;
  flex-shrink:0;
}

/* Conservation badge — Phase 58e: trimmed height. Curators
   reported the strip felt too tall. Padding cut roughly in half
   (0.5vw vs 0.9vw vertical), title + stat now sit on a single
   row with a slim divider, and the percent text drops from 1vw
   to 0.85vw. Strip lands at ~5% of viewport height instead of
   ~8%. */
.cp-overlay-cons {
  display:flex; align-items:center; gap:1.6vw;
  padding:0.5vw 2vw;
  background:linear-gradient(90deg, rgba(10,77,62,0.96), rgba(10,20,40,0.92));
  border-top:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(8px);
}
.cp-overlay-cons.cp-overlay-pos-top {
  border-top:none; border-bottom:1px solid rgba(255,255,255,0.08);
}
.cp-overlay-cons .cp-ov-cons-left {
  flex-shrink:0;
  display:flex; align-items:baseline; gap:0.8vw;
}
.cp-overlay-cons .cp-ov-cons-title {
  font-size:0.85vw; text-transform:uppercase; letter-spacing:.08em; opacity:0.7;
}
.cp-overlay-cons .cp-ov-cons-stat { font-size:1.1vw; font-weight:700; margin-top:0; }
.cp-overlay-cons .cp-ov-cons-stat span { font-size:0.7em; opacity:0.7; font-weight:500; }
.cp-overlay-cons .cp-ov-cons-right { flex:1; display:flex; align-items:center; gap:0.9vw; }
.cp-overlay-cons .cp-ov-cons-track {
  flex:1; height:6px; border-radius:99px; background:rgba(255,255,255,0.15); overflow:hidden;
}
.cp-overlay-cons .cp-ov-cons-fill { height:100%; }
.cp-overlay-cons .cp-ov-cons-pct {
  font-size:0.85vw; font-weight:700; min-width:3em; text-align:right;
}

#aquaosOverlayLayer { position:fixed; inset:0; pointer-events:none; z-index:30; }

/* Uploaded full-screen takeover */
.cp-uploaded-takeover {
  background:#000;
}
.cp-uploaded-takeover .cp-uploaded-media {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  display:block;
}
.cp-uploaded-takeover .cp-uploaded-placeholder {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.8em;
  width:100%;
  height:100%;
  color:rgba(255,255,255,0.72);
  background:radial-gradient(circle at 50% 40%, rgba(0,200,180,0.16), rgba(0,0,0,0.92) 62%);
  font-size:1.2vw;
  text-align:center;
}
.cp-uploaded-takeover .cp-uploaded-placeholder-icon {
  padding:0.7em 1.1em;
  border:1px dashed rgba(255,255,255,0.35);
  border-radius:999px;
  color:#fff;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

/* Phase 31+: the editor preview renders overlays at intrinsic kiosk
   resolution (1920×1080 etc.) and CSS-scales the frame to fit the pane.
   The production overlay CSS uses `vw` units, but inside the scaled frame
   `vw` still refers to the browser window — not the frame's intrinsic
   width. Use `cqw` (container query width) for the overlay layer inside
   the editor frame, which has `container-type: size`. This maps 1cqw to
   1% of the frame's intrinsic width, matching the kiosk's `vw` behaviour. */
/* No entry animation in the editor: the overlay HTML is re-injected on
   every edit (accent drag, slot text), and replaying cpOverlayIn made the
   overlay flash/fade-in repeatedly. The animation belongs on the live
   kiosk, not the editing surface. */
.ce-preview-overlay-layer .cp-overlay { animation:none !important; }
.ce-preview-overlay-layer .cp-overlay-card {
  width:22cqw; min-width:280px; max-width:420px;
  padding:1.2cqw 1.4cqw; border-radius:14px;
}
.ce-preview-overlay-layer .cp-overlay-card .cp-ov-title { font-size:1.4cqw; }
.ce-preview-overlay-layer .cp-overlay-card .cp-ov-body  { font-size:0.95cqw; }
.ce-preview-overlay-layer .cp-overlay-card .cp-ov-cta   { font-size:0.8cqw; padding:0.5em 1em; }
.ce-preview-overlay-layer .cp-overlay-ticker { height:3.2cqw; min-height:42px; }
.ce-preview-overlay-layer .cp-overlay-ticker .cp-ov-ticker-msg,
.ce-preview-overlay-layer .cp-overlay-ticker .cp-ov-ticker-cta { font-size:1.2cqw; }
.ce-preview-overlay-layer .cp-overlay-qr {
  width:9.5cqw; min-width:132px; max-width:182px; padding:0.75cqw;
}
.ce-preview-overlay-layer .cp-overlay-qr.has-photo { width:auto; max-width:none; }
.ce-preview-overlay-layer .cp-overlay-qr.has-photo .cp-ov-qr-main { width:8.5cqw; min-width:116px; max-width:160px; }
.ce-preview-overlay-layer .cp-overlay-qr .cp-ov-qr-photo { width:8.5cqw; min-width:116px; max-width:160px; }
.ce-preview-overlay-layer .cp-overlay-qr .cp-ov-qr-label { font-size:0.8cqw; }
.ce-preview-overlay-layer .cp-overlay-qr.is-offer { gap:2.6cqw; }
.ce-preview-overlay-layer .cp-overlay-qr.is-event { gap:2.6cqw; }
.ce-preview-overlay-layer .cp-overlay-qr .cp-ov-ev-ribbon { font-size:0.64cqw; }
.ce-preview-overlay-layer .cp-overlay-qr .cp-ov-ev-name { font-size:1.9cqw; }
.ce-preview-overlay-layer .cp-overlay-qr .cp-ov-ev-meta { gap:0.7cqw; }
.ce-preview-overlay-layer .cp-overlay-qr .cp-ov-ev-count,
.ce-preview-overlay-layer .cp-overlay-qr .cp-ov-ev-time { font-size:1.15cqw; }

.ce-preview-overlay-layer .cp-overlay-qr .cp-ov-of-ribbon { font-size:0.64cqw; }
.ce-preview-overlay-layer .cp-overlay-qr .cp-ov-of-name { font-size:1.55cqw; }
.ce-preview-overlay-layer .cp-overlay-qr .cp-ov-of-pricerow { gap:0.8cqw; }
.ce-preview-overlay-layer .cp-overlay-qr .cp-ov-of-price { font-size:2.4cqw; }
.ce-preview-overlay-layer .cp-overlay-qr .cp-ov-of-was { font-size:0.95cqw; }
.ce-preview-overlay-layer .cp-overlay-qr .cp-ov-of-save { font-size:0.68cqw; }
.ce-preview-overlay-layer .cp-overlay-qr .cp-ov-of-qr .cp-ov-qr-img { width:4.4cqw; min-width:56px; max-width:88px; }
.ce-preview-overlay-layer .cp-overlay-qr .cp-ov-of-qr .cp-ov-qr-label { font-size:0.6cqw; }
.ce-preview-overlay-layer .cp-overlay-pill { padding:0.7cqw 1.2cqw; }
.ce-preview-overlay-layer .cp-overlay-pill .cp-ov-pill-label { font-size:0.95cqw; }
.ce-preview-overlay-layer .cp-overlay-pill .cp-ov-pill-clock { font-size:1.6cqw; }
.ce-preview-overlay-layer .cp-overlay-cons { padding:0.5cqw 2cqw; gap:1.6cqw; }
.ce-preview-overlay-layer .cp-overlay-cons .cp-ov-cons-title { font-size:0.85cqw; }
.ce-preview-overlay-layer .cp-overlay-cons .cp-ov-cons-stat  { font-size:1.1cqw; }
.ce-preview-overlay-layer .cp-overlay-cons .cp-ov-cons-pct   { font-size:0.85cqw; }