/* ---------- Dinner scenario: Parking Availability flow ---------- */

/* ---------- Intro ---------- */

#screen-dinner-intro {
  background: #1e1e1e;
  overflow: hidden;
}

/* Reuses the .pa-* classes from family.css (same background/glow/content
   pattern as My Family's parking-availability intro) — just a narrower
   content column per this flow's own Figma frame, and a second pill tag. */
#screen-dinner-intro .dinner-intro-content {
  top: 312px;
  width: 526px;
}

.tag-row {
  display: flex;
  gap: 12px;
}

#screen-dinner-intro.is-revealed .pa-content {
  opacity: 1;
}

/* ---------- Shared across Step 1 / 2A / 2B ---------- */

#screen-dinner-step1,
#screen-dinner-step2a,
#screen-dinner-step2b,
#screen-dinner-step3a {
  background: #000;
  overflow: hidden;
}

.dinner-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 1220px;
  height: 710px;
  object-fit: cover;
  pointer-events: none;
}

.dinner-step2a-phone,
.dinner-step2b-phone {
  position: absolute;
  left: 707px;
  top: 103px;
  width: 366px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 380ms ease-out, transform 380ms ease-out;
  transition-delay: 140ms;
}

.dinner-step3a-phone {
  position: absolute;
  left: 707px;
  top: 103px;
  width: 372px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 380ms ease-out, transform 380ms ease-out;
  transition-delay: 140ms;
}

/* Slightly different native size than the other two phones (372 vs 366 —
   a cleaner, higher-res export with no baked marker icons, see
   parking-step1.js/parking-data.js for why the markers are real HTML). */
.dinner-step1-phone {
  position: absolute;
  left: 707px;
  top: 103px;
  width: 372px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 380ms ease-out, transform 380ms ease-out;
  transition-delay: 140ms;
}

#screen-dinner-step1.is-revealed .dinner-step1-phone,
#screen-dinner-step2a.is-revealed .dinner-step2a-phone,
#screen-dinner-step2b.is-revealed .dinner-step2b-phone,
#screen-dinner-step3a.is-revealed .dinner-step3a-phone {
  opacity: 1;
  transform: translateY(0);
}

#screen-dinner-step1 .pagination,
#screen-dinner-step2a .pagination,
#screen-dinner-step2b .pagination,
#screen-dinner-step3a .pagination {
  position: absolute;
  left: 72px;
  top: 612px;
}

/* ---------- Step 1: map markers ---------- */

.parking-markers-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.parking-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 8;
}

/* Everything that should wiggle (icon + busyness bar) — kept separate from
   the stem below it so the hint animation, applied only here, never moves
   the vertical line with it. */
.parking-marker-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.parking-marker-icon {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: linear-gradient(91deg, #217fde 4%, #5ac1d8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.parking-marker-icon img {
  width: 18px;
  height: 18px;
}

.parking-marker-bar {
  width: 26px;
  height: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.parking-marker-bar-fill {
  height: 100%;
  border-radius: 5px;
}

/* The vertical connector down to street level, behind the icon+bar (its
   height is set per-marker inline — see parking-step1.js). Gray at rest;
   turns green and thickens slightly while this spot's popup is open, per
   the Figma reference (1C). */
.parking-marker-stem {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  transition: background 250ms ease, width 250ms ease;
}

.parking-marker.is-selected .parking-marker-stem {
  width: 3px;
  background: #2fd0ab;
}

/* Idle "hint" wiggle — replayed periodically (see parking-step1.js) to
   nudge the user toward tapping a marker; paused while a popup is open.
   Targets only .parking-marker-head (icon + bar), never the stem. */
.parking-marker.is-hint .parking-marker-head {
  animation: parking-marker-wiggle 650ms ease-in-out;
}

@keyframes parking-marker-wiggle {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-9deg) scale(1.08);
  }
  50% {
    transform: rotate(9deg) scale(1.08);
  }
  75% {
    transform: rotate(-4deg) scale(1.03);
  }
}

/* ---------- Parking spot popup (Step 1 + Step 2A) ---------- */

.parking-popup-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* "Liquid glass": translucent + heavily blurred backdrop rather than a
   solid panel, matching the frosted look used elsewhere in this app
   (.invite-modal, .permissions-panel in family.css) — a thin light border
   and inset highlight sell the glass edge. */
.parking-popup {
  position: absolute;
  width: 310px;
  background: rgba(18, 30, 32, 0.45);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 15px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  pointer-events: auto;
  z-index: 20;
}

/* Wiggles in exactly like the My Family Step 3 invite modal — reuses that
   keyframe by name (CSS @keyframes aren't scoped to the stylesheet that
   defines them, so this works across files without redefining it). */
.parking-popup--floating.is-playing {
  animation: modal-wiggle-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.parking-popup-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.parking-popup-tags {
  display: flex;
  gap: 8px;
}

.parking-popup-tag {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  padding: 3px 6px;
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #a6a6a6;
  white-space: nowrap;
}

.parking-popup-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.parking-popup-title {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #fcfcfc;
  margin: 0;
}

.parking-popup-close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
}

.parking-popup-close img {
  width: 16px;
  height: 16px;
}

.parking-popup-status {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: 13px;
  margin: 0;
}

/* The one non-navigable marker (the map's "no parking" icon) gets a
   shorter card — no tags/nav button/chart, just what it is and why. */
.parking-popup--restricted {
  gap: 4px;
}

.parking-popup-restricted-note {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: #ccc;
  margin: 0;
}

.parking-popup-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  cursor: pointer;
}

.parking-popup-nav-btn img {
  width: 18px;
  height: 18px;
}

.parking-popup-nav-btn span {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #fcfcfc;
}

.parking-popup-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
}

.parking-popup-trend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.parking-popup-trend-label {
  font-family: "Lato", sans-serif;
  font-size: 12px;
  color: #a6a6a6;
  margin: 0;
}

.parking-popup-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 55px;
  gap: 3px;
}

.parking-popup-bar {
  width: 6px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.parking-popup-chart-labels {
  display: flex;
  justify-content: space-between;
}

.parking-popup-chart-labels span {
  font-family: "Lato", sans-serif;
  font-size: 11px;
  color: #a6a6a6;
}

/* ---------- Step 3A: timer + feedback ---------- */

/* Everything on the phone is baked into step3-phone.png except these three
   live values (the ring's digits and the two card values below it) — same
   "baked chrome, live data" split as Step 1's markers, just inverted (here
   almost everything is baked and only the data points are real HTML). */
.parking-timer-value {
  position: absolute;
  left: 825px;
  top: 411px;
  width: 130px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.5px;
  color: #fcfcfc;
  margin: 0;
  pointer-events: none;
}

.parking-type-value,
.parking-price-value {
  position: absolute;
  top: 635px;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fcfcfc;
  margin: 0;
  white-space: nowrap;
  pointer-events: none;
}

.parking-type-value {
  left: 739px;
}

.parking-price-value {
  left: 906px;
}

/* The feedback widget — one "liquid glass" card (same look as
   .parking-popup) whose content swaps in place between the question (3B)
   and the thanks confirmation (3C); it wiggles in exactly like the Step
   1/2A spot popups by reusing that same .parking-popup--floating.is-playing
   rule (dinner.css above), just on a wider/taller card. */
.parking-feedback-card {
  position: absolute;
  left: 678px;
  top: 315px;
  width: 422px;
  background: rgba(18, 30, 32, 0.45);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 30px 26px 26px;
  z-index: 25;
  pointer-events: auto;
}

.parking-feedback-headline {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: #fcfcfc;
  text-align: center;
  margin: 0 0 24px;
}

.parking-feedback-options {
  display: flex;
  gap: 18px;
}

.parking-feedback-option {
  flex: 1;
  background: rgba(255, 255, 255, 0.07);
  border: none;
  border-radius: 12px;
  padding: 22px 6px 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.parking-feedback-option span {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fcfcfc;
  margin-bottom: 22px;
}

.parking-feedback-option-bar {
  width: 100%;
  height: 3px;
  border-radius: 2px 2px 0 0;
}

.parking-feedback-option--easy .parking-feedback-option-bar {
  background: #2fd0ab;
}

.parking-feedback-option--moderate .parking-feedback-option-bar {
  background: #f59e0b;
}

.parking-feedback-option--hard .parking-feedback-option-bar {
  background: #e54d66;
}

/* The thanks confirmation (3C) reuses .parking-feedback-card itself —
   this is just its inner content, swapped in on any option click. */
.parking-thanks-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2fd0ab;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.parking-thanks-badge svg {
  width: 20px;
  height: 20px;
  color: #10221d;
}

.parking-thanks-headline {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #fcfcfc;
  text-align: center;
  margin: 0 0 12px;
}

.parking-thanks-body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  margin: 0;
}