/* ==========================================================================
   WebAR Video Overlay — Shared Styles
   ==========================================================================
   One stylesheet for every client/campaign. Colors/fonts here apply to the
   permission/loading/error screens (the "app chrome"), not to the video
   itself. CHANGE THIS: the two color variables below are the easiest way
   to re-skin the whole app to match a client's brand.
   ========================================================================== */

:root {
  /* CHANGE THIS: brand accent color used on the main button + spinner */
  --accent-color: #ff3366;
  --bg-color: #0b0b0f;
  --text-color: #ffffff;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-color);
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden; /* AR view should never scroll on a phone */
}

#app {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Full-screen screens (permission / error / loading) ---------- */

.screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: radial-gradient(circle at top, #1a1a22, #0b0b0f 70%);
}

.hidden {
  display: none !important;
}

.card {
  max-width: 420px;
  width: 100%;
}

.card h1 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #cfcfd6;
  margin-bottom: 24px;
}

button {
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 28px;
  border: none;
  border-radius: 999px;
  background: var(--accent-color);
  color: #fff;
  cursor: pointer;
  min-height: 48px; /* comfortable tap target on mobile */
  transition: transform 0.15s ease, opacity 0.15s ease;
}

button:active {
  transform: scale(0.97);
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---------- Info screen (sample expired / trial over / paused) ----------
   This is the screen a client's customer lands on when a preview has run
   out. It is the last thing they see, so it reads as an invitation rather
   than an error: the wording all comes from site-config.json. */

.info-cta {
  color: #fff;
  font-weight: 600;
  margin-bottom: 16px;
}

.call-btn {
  display: inline-block;
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--accent-color);
  color: #fff;
  text-decoration: none;
  min-height: 48px;
  line-height: 20px;
}

.call-btn:active {
  transform: scale(0.97);
}

.interest {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.interest label {
  display: block;
  font-size: 0.85rem;
  color: #cfcfd6;
  margin-bottom: 10px;
}

.interest-row {
  display: flex;
  gap: 8px;
}

.interest input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.interest input::placeholder {
  color: #7c7c88;
}

.interest input:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 1px;
}

.interest button {
  padding: 12px 22px;
  font-size: 0.95rem;
  min-height: 0;
}

.interest-msg {
  margin: 12px 0 0;
  font-size: 0.88rem;
  color: #7ee0a8;
}

/* ---------- Sign-up form (shop posters) ---------- */

.fld {
  display: block;
  text-align: left;
  margin-bottom: 14px;
}

.fld > span {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9a9aa6;
  margin-bottom: 6px;
}

.fld input,
.phone-row input,
.phone-row select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  min-height: 48px;
}

.fld input::placeholder,
.phone-row input::placeholder {
  color: #7c7c88;
}

.fld input:focus,
.phone-row input:focus,
.phone-row select:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 1px;
}

/* Country is a fixed list, never free text, so the stored number always
   has exactly one shape and duplicate-checking actually works. */
.phone-row {
  display: flex;
  gap: 8px;
}

.phone-row select {
  width: auto;
  flex: 0 0 auto;
  max-width: 42%;
}

.phone-row input {
  flex: 1;
  min-width: 0;
  /* Digits line up predictably while typing a fixed-length number. */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

#signup-form button {
  width: 100%;
  margin-top: 4px;
}

.form-error {
  background: rgba(255, 77, 121, 0.12);
  border: 1px solid rgba(255, 77, 121, 0.45);
  color: #ffc2d1;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 0.87rem;
  margin: 0 0 14px;
  text-align: left;
}

.consent {
  font-size: 0.76rem;
  color: #8a8a96;
  line-height: 1.45;
  margin: 14px 0 0;
}

/* ---------- Remaining-preview countdown ---------- */

.trial-pill {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  background: rgba(11, 11, 15, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.82rem;
  color: #cfcfd6;
  white-space: nowrap;
  pointer-events: none;
}

.trial-pill strong {
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Last minute: make it obvious the clock is nearly up. */
.trial-pill.urgent {
  border-color: rgba(255, 77, 121, 0.6);
}

.trial-pill.urgent strong {
  color: #ff4d79;
}

/* ---------- Per-poster sound buttons ----------
   Campaigns with several posters get one round button per poster, showing
   that poster's own picture with a speaker badge. A button is only visible
   while its poster is in the camera view, but keeps its place in the row so
   nothing shifts under a finger. */

.poster-audio {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  padding: 0 12px;
  pointer-events: none; /* only the buttons themselves take taps */
}

.audio-chip {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 68px;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.15;
}

.audio-chip.away {
  visibility: hidden;
  pointer-events: none;
}

.audio-chip .thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1b1f2c;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.audio-chip.on .thumb {
  border-color: var(--accent-color);
}

.audio-chip .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Shown only if the poster's picture could not be loaded. */
.audio-chip .num {
  display: none;
  font-size: 1.3rem;
  font-weight: 800;
}

.audio-chip .thumb.noimg .num {
  display: block;
}

.audio-chip .badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audio-chip.on .badge {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.audio-chip .cap {
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* ---------- Landscape phones ----------
   A phone held sideways has very little height, so the permission card
   and the instruction pill need to be more compact or they overflow.
   Only applies to short screens, so tablets/desktop are unaffected. */

@media (orientation: landscape) and (max-height: 500px) {
  .screen {
    padding: 12px 16px;
    overflow-y: auto; /* never trap content off-screen */
  }

  .card h1 {
    font-size: 1.15rem;
    margin-bottom: 8px;
  }

  .card p {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 14px;
  }

  button {
    padding: 10px 24px;
    min-height: 44px;
    font-size: 0.95rem;
  }

  .spinner {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
  }

  .overlay {
    bottom: 14px;
  }

  .instruction-pill {
    padding: 8px 16px;
  }

  .instruction-pill p {
    font-size: 0.82rem;
  }
}

/* ---------- Loading spinner (pure CSS, no image file needed) ---------- */

.spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent-color);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- In-AR instruction overlay ---------- */

.overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 32px;
  z-index: 40;
  display: flex;
  justify-content: center;
  pointer-events: none; /* never block taps on the camera view below it */
  padding: 0 16px;
}

.instruction-pill {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: 10px 20px;
}

.instruction-pill p {
  margin: 0;
  font-size: 0.9rem;
}

/* ---------- Mute button ---------- */

#mute-btn {
  position: fixed;
  top: env(safe-area-inset-top, 16px);
  right: 16px;
  z-index: 40;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- AR container / MindAR video element ---------- */

#ar-container,
#ar-container a-scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* MindAR injects its own <video> feed element into the DOM; make sure it
   always fills the screen and sits behind the AR canvas/overlays. */
#ar-container video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- "camera" campaigns (no tracking) ----------
   The live camera fills the screen, and the campaign video floats in the
   middle of it with the camera still visible above, below and to both
   sides. Nothing here affects tracked (AR) campaigns. */

#ar-container .live-camera {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 10;
}

#ar-container .live-stage {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* taps pass through to the mute button */
}

/* The floating video panel, centred with the live camera visible on all
   four sides. The selector is deliberately more specific than the
   "#ar-container video" rule above, which would otherwise pin it to the
   top-left corner.
   width/height are auto and the size caps come from meta.json, so the
   video shrinks to fit while always keeping its own shape. */
#ar-container .live-stage .live-content {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  background: #000;
}