/* Shared UI components: landing page, banners and video scenes.
   Requires the :root tokens from templates/partials/tokens.html.j2 */

/* ---------- status pill ---------- */
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--success-container); color: var(--success);
  font-weight: 700; font-size: .9rem; white-space: nowrap;
}
.status-pill__dot {
  width: 9px; height: 9px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .25);
}
.status-pill--sm { padding: 3px 9px; font-size: .68rem; gap: 5px; }
.status-pill--sm .status-pill__dot { width: 6px; height: 6px; box-shadow: none; }

/* ---------- phone mockup ---------- */
.phone {
  position: relative; width: 300px; aspect-ratio: 9 / 18.5;
  background: #11131c; border-radius: 44px; padding: 12px;
  box-shadow: 0 30px 60px -20px rgba(26, 30, 46, .45), 0 0 0 2px #2a2e3d inset;
  transform: rotate(-3deg);
  text-align: start;
}
.phone__notch {
  position: absolute; top: 18px; left: 50%; translate: -50% 0; z-index: 2;
  width: 90px; height: 24px; border-radius: 14px; background: #11131c;
}
.phone__screen {
  height: 100%; border-radius: 34px; background: var(--surface);
  padding: 52px 14px 16px; display: flex; flex-direction: column; gap: 12px; overflow: hidden;
}
.app-bar { display: flex; align-items: center; gap: 8px; }
.app-bar__logo { width: 26px; height: 26px; }
.app-bar__title { font-weight: 800; font-size: .95rem; flex: 1; white-space: nowrap; }
.spots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.spot {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  background: var(--surface-lowest); border-radius: 16px;
  box-shadow: 0 4px 12px -4px rgba(43, 52, 55, .12);
}
.spot__icon {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--primary);
}
.spot--taken .spot__icon { background: #9aa3b5; }
.spot__body { display: flex; flex-direction: column; line-height: 1.25; font-size: .74rem; flex: 1; min-width: 0; }
.spot__body strong { font-size: .85rem; }
.spot__body span { color: var(--muted); }
.spot__hours { color: var(--on-surface) !important; font-weight: 500; white-space: nowrap; }
.spot__tag { font-size: .66rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.spot--free .spot__tag { background: var(--success-container); color: var(--success); }
.spot--taken .spot__tag { background: var(--surface-low); color: var(--muted); }
.app-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.app-btn {
  border: 0; border-radius: 14px; padding: 12px; font: 700 .85rem var(--font);
  background: var(--primary-container); color: var(--primary);
}
.app-btn--primary { background: var(--primary); color: #fff; }