/* =====================================================================
   Guest flow — per-screen component layer on concierge2.css ("Coastline").
   The guest templates (browse/select/auction) already carry the prototype
   class names (.acard/.match/.window/.dial/.offer …) but the per-screen
   component CSS lived only in the prototype <style> blocks — this file
   ports it into the shared surface. Loaded AFTER concierge2.css.
   ===================================================================== */

/* ---------- Browse (screen 2): editorial activity cards ---------- */
.grid{ display:flex; flex-direction:column; gap:14px; padding:16px 20px 6px }
.acard{ overflow:hidden }
.acard .cover{ position:relative; height:120px; display:flex; align-items:flex-end; padding:12px 14px;
  background:var(--sunset); background-size:cover; background-position:center }
/* distinct per-activity color (from Activity.theme); a provider photo overrides it via inline style */
.acard[data-theme="sunset"] .cover{ background-image:var(--sunset) }
.acard[data-theme="teal"]   .cover{ background-image:var(--teal-grad) }
.acard[data-theme="coral"]  .cover{ background-image:linear-gradient(140deg,#E0552B,#BC3D17) }
.acard[data-theme="gold"]   .cover{ background-image:linear-gradient(140deg,#EAA84A,#C2852B) }
.acard[data-theme="ink"]    .cover{ background-image:linear-gradient(140deg,#3A4256,#1B2230) }
.acard .cover .glyph{ position:absolute; top:12px; right:15px; font-size:34px;
  filter:drop-shadow(0 3px 7px rgba(20,28,40,.28)) }
.acard .cover .tag{ position:relative; font-size:10px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:#fff; background:rgba(20,28,40,.36); padding:4px 10px;
  border-radius:var(--pill); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px) }
.acard .body{ padding:14px 16px 16px }
/* small vignette photo (when a provider uploaded one) — overlaps the colored header into the body */
.acard.has-photo .body{ padding-top:36px }
.acard .vignette{ position:absolute; right:14px; bottom:-26px; width:66px; height:66px; border-radius:16px;
  object-fit:cover; border:3px solid var(--surface); box-shadow:var(--shadow-md); background:var(--surface) }
.acard .body h3{ font-size:17px; font-weight:600; letter-spacing:-.01em; line-height:1.25 }
.acard .desc{ font-size:13px; color:var(--soft); margin-top:6px; line-height:1.5 }
.acard .meta{ display:flex; align-items:center; justify-content:space-between; margin-top:13px }
.acard .from{ font-size:12.5px; color:var(--soft) }
.acard .from b{ font-family:var(--display); font-weight:400; font-size:21px; color:var(--ink);
  font-feature-settings:"tnum"; margin-left:3px }

/* ---------- Select (screen 3): matches / dropped / window ---------- */
.matches{ display:flex; flex-direction:column; gap:10px; padding:8px 20px 2px }
.match{ display:flex; align-items:center; gap:13px; padding:12px 14px }
.match .ic{ width:46px; height:46px; border-radius:13px; flex:0 0 auto; display:grid; place-items:center;
  font-size:22px; background:var(--teal-grad); box-shadow:var(--shadow) }
.match .m-main{ flex:1 1 auto; min-width:0 }
.match .m-main h3{ font-size:16px; font-weight:600; letter-spacing:-.005em; line-height:1.25 }
.match .from{ flex:0 0 auto; font-size:11.5px; color:var(--soft); text-align:right; white-space:nowrap }
.match .from b{ display:block; font-family:var(--display); font-weight:400; font-size:19px; color:var(--ink);
  font-feature-settings:"tnum"; margin-top:2px }

.dropped{ padding:8px 20px 6px }
.dropped:empty{ padding:0 }
.dropped-intro{ font-size:12px; color:var(--faint); margin-bottom:7px }
.drop-item{ font-size:13px; color:var(--soft); padding:4px 0; line-height:1.5 }
.drop-reason{ color:var(--faint) }

.window{ padding:16px 20px 6px }
.window h2{ font-size:16px; font-weight:600; letter-spacing:-.005em }
.window .lead{ font-size:13px; color:var(--soft); margin-top:5px; line-height:1.5 }
.dial{ display:flex; flex-direction:column; gap:10px; margin-top:14px }
.dial .opt{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  font-family:var(--body); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:14px 16px; transition:all var(--t); box-shadow:var(--shadow) }
.dial .opt:hover{ border-color:var(--teal); background:var(--teal-soft) }
.dial .opt.on{ border-color:var(--teal); background:var(--teal-soft); box-shadow:var(--ring-teal) }
.dial .opt:active{ transform:translateY(1px) }
.dial .opt .badge-time{ flex:0 0 auto; font-family:var(--display); font-weight:400; font-size:19px;
  color:var(--teal-deep); font-feature-settings:"tnum" }
.dial .opt .o-txt{ flex:1 1 auto; min-width:0 }
.dial .opt .o-txt b{ display:block; font-size:14px; font-weight:600; color:var(--ink) }
.dial .opt .o-txt span{ font-size:12px; color:var(--soft) }

/* ---------- Qualify (party capture): group chips + steppers + day/time chips ----------
   The .choice / .choice-row / .stepper / .stepper-row components come from concierge2; this
   just adds the section wrappers and tightens the header. */
.mast--tight{ padding:22px 24px 16px }
.qualify .block{ padding:16px 24px 2px }
.qualify .blabel{ font-size:12px; font-weight:600; color:var(--soft); margin-bottom:11px }
.qualify .block .stepper-row{ padding:12px 0 }
.qualify .block .stepper-row:last-child{ border-bottom:none }
.qualify .choice{ font-size:13.5px }
.qualify .ages{ display:flex; gap:8px }
.qualify .ages input{ text-align:center }

/* fine-tune time picker (16:00 + clock + hint) */
.qualify .pickin{ display:flex; align-items:center; gap:12px; margin-top:12px; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface) }
.qualify .pickin .clock{ font-size:20px; flex:0 0 auto }
.qualify .pickin .pickmid{ flex:1 1 auto; min-width:0 }
.qualify .set-time{ border:none; background:transparent; padding:0; width:auto; color:var(--ink);
  font-family:var(--display); font-size:22px; font-feature-settings:"tnum" }
.qualify .set-time:focus{ outline:none }
.qualify .pickhint{ font-size:11.5px; color:var(--faint); margin-top:2px; line-height:1.4 }

/* live recap of the selection */
.qualify .recap{ font-size:12px; color:var(--soft); text-align:center; line-height:1.55;
  margin-top:14px; padding:0 6px }
.qualify .recap:empty{ display:none }

/* The slide-up sheet as a centered bottom modal at ALL widths (concierge2 only pins it fixed <=480px,
   so inside the framed desktop shell it would render off-screen). Keeps concierge2's radius/padding/
   max-height; overrides only position + transform. */
.sheet{ position:fixed; left:50%; right:auto; bottom:0; width:min(440px,100%); z-index:60;
  transform:translate(-50%, 102%) }
.sheet.on{ transform:translate(-50%, 0) }
@media(max-width:480px){
  .sheet{ left:0; right:0; width:100%; transform:translateY(102%) }
  .sheet.on{ transform:translateY(0) }
}

/* party form inside the welcome slide-up sheet: the sheet supplies the side padding, and the submit
   sits at the end of the form (not a sticky page action bar) */
.sheet .seal{ margin-top:2px }
.sheet .qualify{ margin-top:6px }
.sheet .qualify .block{ padding:14px 0 2px }
.sheet .qualify .actionbar{ position:static; padding:20px 0 4px; margin-top:4px }

/* ---------- Auction (screen 4): live offer cards ---------- */
.offers{ display:flex; flex-direction:column; gap:14px; padding:10px 20px 22px }
/* The foot is a STACK, not two columns. concierge2 declares `display:grid; grid-template-columns:1fr
   auto` for the two cells it was born with — price | meta — but later stages appended the proposed slot,
   the extras chips, the two cancellation lines and the CTA into the same container. Auto-placement then
   dealt them alternately into the two columns: the slot label got the 1fr column and wrapped a word per
   line, while the cancellation sentence sat in the `auto` column, where max-content track sizing starved
   1fr further.

   Placing each child explicitly would fix today's card and break on the next one appended — the failure
   mode is the container's shape, not any one child. provider-addresses proved it within a day: it swapped
   the ~12-character ETA chip ("~12 min walk") for a postal address ("Strada Uzinei 12, Călimănești" ·
   Directions ≈ 245px of max-content), which alone would have re-starved the price column. So the
   container changes shape instead. `.o-cta` and `.scarcity` keep their `grid-column:1/-1` from
   concierge2; both are inert under flex and both were already full-width. */
.offer .o-foot{ display:flex; flex-direction:column; align-items:stretch; gap:10px;
  padding:14px 16px 16px }
.offer .o-meta{ text-align:left }
/* The service address (provider-addresses Stage 2) shipped without a rule. It is a line of prose, not a
   right-rail chip: `overflow-wrap` so a long single-token street name can never push the card sideways. */
.offer .o-addr{ color:var(--ink); font-weight:600; overflow-wrap:anywhere }
.offer .price .now{ font-size:26px }
.offer .o-meta .rate{ color:var(--ink); font-weight:600 }
.offer .o-meta .rate .s{ color:var(--gold) }
.offer .o-meta a{ color:var(--teal-deep); text-decoration:none }
.offer .o-meta a:hover{ text-decoration:underline }
.offer .o-cta{ margin-top:4px }
.offer .o-cta form{ width:100% }
.no-offers{ text-align:center; font-size:13px; color:var(--soft); padding:26px 20px; line-height:1.55 }
.auction-supply{ margin:0 20px 4px; font-size:12.5px; font-weight:600; padding:10px 14px;
  border-radius:var(--r-sm); line-height:1.4 }
.auction-supply.single{ color:var(--teal-deep); background:var(--teal-soft) }
.auction-supply.none{ color:var(--coral-deep); background:var(--coral-soft) }

/* The strike gate (booking-outcomes Stage 5). Sits where the countdown would be, so it carries the
   same margins as .auction-supply — but heavier, because it is a block, not a status line. The tone is
   deliberately NOT alarm-red: this is self-lifting and the guest is being told how, so it reads as an
   instruction rather than a punishment. */
.auction-gated{ margin:0 20px 12px; padding:16px 18px; border-radius:var(--r-sm);
  background:var(--coral-soft); color:var(--coral-deep) }
.auction-gated h2{ margin:0 0 6px; font-size:16px; font-weight:700; letter-spacing:-.01em }
.auction-gated p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--ink) }

/* --- offer-card identity block (queue item 2: who offers, for what) ------------------------- */
.o-id { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; }
.o-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--sea, #2b6777); color: #fff;
}
.o-avatar--initial {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
}
.o-who { display: flex; flex-direction: column; min-width: 0; }
.o-provider { font-weight: 600; }
.o-verified {
  font-size: 11px; font-weight: 600; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: rgba(43, 103, 119, .12); color: var(--sea, #2b6777); white-space: nowrap;
}
.o-sub { font-size: 12px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rate--new { font-weight: 600; color: var(--sea, #2b6777); }

/* --- composed offer card (offer-composer Stage 2: proposed slot · extras chips · struck price) --- */
.offer .o-slot { margin: 2px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ink); }
/* The struck full price, only rendered on a discounted offer — muted, so the final price stays loud. */
.offer .price .was { margin-right: 6px; font-size: 16px; font-weight: 500; color: var(--soft); }
.offer .o-extras { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.offer .o-chip {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--teal-soft); color: var(--teal-deep);
}

/* --- cancellation terms on the offer card (booking-outcomes) -------------------------------------
   These four <p>s reached the card with no rule at all, so they rendered at the browser's default
   16px/black — the "free-cancellation window has passed" sentence came out heavier than the price it
   sat beside, which inverts the card's hierarchy. They are terms, not headlines: footnote size, and
   only the ALREADY-PASSED case earns a coral field, because that one changes what the tap costs. */
/* `.o-cancel-by`/`.cancel-by` and `.o-cancel-passed`/`.cancel-passed` are the SAME two lines under two
   names — the auction card prefixes them, `booking_confirm.html` does not. Both doors into a booking
   must state the same terms in the same voice, so both names get the same rule until the markup is
   reconciled onto one. */
.offer .o-cancel-by, .cancel-by{ font-size:11.5px; font-weight:600; color:var(--ink);
  font-feature-settings:"tnum"; display:flex; align-items:center; gap:6px; line-height:1.45 }
.offer .o-cancel-by::before, .cancel-by::before{ content:"⌛"; font-size:11px }
.cancel-note{ font-size:11.5px; color:var(--faint); line-height:1.45 }
.offer .o-cancel-passed, .cancel-passed{ font-size:11.5px; font-weight:600; color:var(--coral-deep);
  background:var(--coral-soft); padding:8px 11px; border-radius:var(--r-sm); line-height:1.45 }
/* The always-true half, at the foot of the whole list — a flex item of .offers, so it needs no margin. */
.no-show-note{ font-size:11px; color:var(--faint); line-height:1.5; padding:0 4px }
.offer .o-meta .rate .count{ color:var(--faint); font-weight:400 }

/* --- the guest's reservation block ("Rezervarea ta") ----------------------------------------------
   `bookings/_guest_reservation.html` shipped with only `.res-rate` styled (reviews-loop Stage 2); the
   block itself and every other `.res-*` had no rule, so a booked guest saw flush-left unstyled text and
   a raw browser <button> where the cancel action should be. The margin lives on `.reservation`, not on
   the `.reservation-wrap` section, because the wrapper is an HTMX target that renders whitespace — not
   nothing — while unbooked, so `:empty` would not hold back the padding.
   Teal rail: this is the settled outcome, and in this system teal = trust, coral = act. */
.reservation{ margin:12px 20px 2px; padding:14px 16px 15px }
.reservation .eyebrow{ margin-bottom:9px }
.res-when{ font-size:12.5px; font-weight:600; color:var(--soft); font-feature-settings:"tnum" }
.res-activity{ font-family:var(--display); font-weight:400; font-size:24px; line-height:1.15;
  letter-spacing:-.01em; margin-top:3px }
.res-price{ font-size:15px; font-weight:600; color:var(--ink); font-feature-settings:"tnum"; margin-top:6px }
/* Since provider-addresses Stage 2 this line carries the postal address AND, on a second line, the maps
   link — so it needs a type size of its own; before, it was a bare anchor and inherited the body's 16px. */
.res-maps{ margin-top:10px; font-size:13px; color:var(--soft); line-height:1.5; overflow-wrap:anywhere }
.res-maps a{ font-weight:600; color:var(--teal-deep); text-decoration:none }
.res-maps a:hover{ text-decoration:underline }
.res-confirmed{ display:inline-block; margin-top:11px; font-size:12px; font-weight:600;
  color:var(--teal-deep); background:var(--teal-soft); padding:6px 11px; border-radius:var(--pill) }
.res-cancelled{ font-size:13.5px; color:var(--soft); line-height:1.5 }

/* A text-weight button for secondary actions inside a card (cancel, back, submit a rating). The system
   had only `.btn`, so these three rendered as the browser's default grey chrome button. */
.linkbtn{ font-family:var(--body); font-size:13px; font-weight:600; color:var(--soft); background:none;
  border:none; padding:8px 0; cursor:pointer; text-decoration:none; display:inline-flex;
  align-items:center; gap:6px; transition:color var(--t) }
.linkbtn:hover{ color:var(--ink); text-decoration:underline }
/* Cancelling is destructive and reversible only by re-booking — quiet by default, coral on intent. */
.res-cancel{ color:var(--faint); margin-top:4px }
.res-cancel:hover{ color:var(--coral-deep) }
.res-rate-submit{ color:var(--teal-deep) }
.res-rate-submit:hover{ color:var(--teal) }

/* Guest star-rating form on a CONFIRMED reservation block (reviews-loop Stage 2). Scoped to .res-rate. */
.res-rate { margin-top: 10px; }
.res-rate .rate-prompt { margin: 0 0 4px; font-weight: 700; font-size: 13.5px; }
.res-rate .stars { display: inline-flex; flex-direction: row-reverse; gap: 3px; }
.res-rate .stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.res-rate .stars label { font-size: 26px; line-height: 1; color: #d8d2c4; cursor: pointer; transition: color .12s; }
.res-rate .stars input:checked ~ label,
.res-rate .stars label:hover,
.res-rate .stars label:hover ~ label { color: #e0a615; }
.res-rate .stars input:focus-visible + label { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.res-rate .rate-comment {
  width: 100%; box-sizing: border-box; margin: 8px 0; padding: 7px 10px;
  border: 1px solid #d8d2c4; border-radius: 8px; font: inherit;
}
.res-rated { margin-top: 8px; font-weight: 600; }
.res-rated .res-stars { color: #e0a615; letter-spacing: 1px; margin-right: 6px; }