/* ─────────────────────────────────────────────────────────────────────────
   Services & bookings — /book/:username, /bookings, /bookings/:id.

   Deliberately shares the commerce vocabulary (.card, .order-layout, .tl,
   .act-bar) so an appointment feels like part of the same product as an
   order, not a bolted-on second system.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Provider booking page ────────────────────────────────────────────── */
.book-hero {
  display: flex; align-items: center; gap: 16px; margin: 22px 0 16px;
  padding: 18px; background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.book-hero-tx { flex: 1; min-width: 0; }
.book-hero-name { font-size: 22px; font-weight: 900; letter-spacing: -.025em; color: var(--ink); line-height: 1.2; }
.book-hero-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }

.book-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; margin-bottom: 60px; }
.book-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.book-side { position: sticky; top: 76px; }
.book-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; color: var(--body); line-height: 1.5; }
.book-steps b { color: var(--ink); }

/* ── Service card ─────────────────────────────────────────────────────── */
.svc-head { display: flex; align-items: flex-start; gap: 14px; justify-content: space-between; }
.svc-headtx { min-width: 0; }
.svc-title { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.018em; line-height: 1.25; }
.svc-cat { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .05em; }
.svc-price { font-size: 17px; font-weight: 900; color: var(--ink); white-space: nowrap; }
.svc-desc { font-size: 14px; color: var(--body); line-height: 1.6; margin-top: 10px; white-space: pre-wrap; }
.svc-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.svc-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 11px; font-size: 12.5px; color: var(--muted); }
.svc-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.svc-contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.svc-contact .chip:hover { border-color: var(--accent); color: var(--accent-2); }

/* ── Day strip + time grid ────────────────────────────────────────────── */
.cal { margin-top: 16px; border-top: 1px solid var(--divider); padding-top: 15px; }
.cal-days {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
}
.cal-days::-webkit-scrollbar { display: none; }
.cal-day {
  flex: 0 0 auto; width: 68px; padding: 9px 6px; border-radius: var(--r-md);
  background: var(--bg-2); border: 1.5px solid transparent;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  transition: border-color .12s, background .12s;
}
.cal-day:hover { background: var(--paper); }
.cal-day.on { background: var(--paper); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.cal-dow { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cal-num { font-size: 19px; font-weight: 900; color: var(--ink); line-height: 1.1; }
.cal-open { font-size: 10.5px; font-weight: 700; color: var(--green); }
.cal-open.none { color: var(--subtle); }

.cal-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 9px; margin-top: 14px;
}
.tslot {
  display: flex; align-items: center; gap: 8px; padding: 11px 13px; text-align: left;
  border-radius: var(--r-md); background: var(--paper);
  border: 1.5px solid var(--hairline); transition: border-color .12s, box-shadow .12s;
}
.tslot:hover:not(.full):not(.mine) { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.tslot-time { font-size: 14px; font-weight: 800; color: var(--ink); }
.tslot-sub { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.tslot-go { color: var(--subtle); display: inline-flex; }
.tslot-go svg { width: 15px; height: 15px; }
/* A time already taken, and one the viewer already holds, must not look like
   an invitation to book again. */
.tslot.full { opacity: .55; border-style: dashed; cursor: not-allowed; }
.tslot.mine { border-color: var(--accent); background: var(--accent-soft); flex-wrap: wrap; }
.tslot.mine .tslot-sub { margin-left: 0; }
.book-empty { margin-top: 14px; }

/* ── Request modal ────────────────────────────────────────────────────── */
.bk-when {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border-radius: var(--r-md); background: var(--accent-soft);
  color: var(--accent-2);
}
.bk-when svg { width: 20px; height: 20px; flex-shrink: 0; }
.bk-when-day { font-size: 15px; font-weight: 800; color: var(--ink); }
.bk-when-time { font-size: 12.5px; color: var(--body); margin-top: 1px; }
.bk-price {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--divider);
  font-size: 18px; font-weight: 900; color: var(--ink);
}
.bk-price-sub { font-size: 12px; font-weight: 600; color: var(--muted); }

/* ── Bookings list ────────────────────────────────────────────────────── */
.bk-rows { display: flex; flex-direction: column; gap: 10px; }
.bk-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: border-color .12s, box-shadow .12s;
}
.bk-row:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.bk-date {
  width: 62px; flex-shrink: 0; text-align: center; padding: 7px 4px;
  border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--hairline);
}
.bk-date .mon { display: block; font-size: 10.5px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .05em; }
.bk-date .day { display: block; font-size: 20px; font-weight: 900; color: var(--ink); line-height: 1.1; }
.bk-date .at { display: block; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.bk-date.empty { display: grid; place-items: center; color: var(--subtle); min-height: 58px; }
.bk-date.empty svg { width: 20px; height: 20px; }
.bk-tx { flex: 1; min-width: 0; }
.bk-title { font-size: 14.5px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-sub { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: 3px; min-width: 0; }
.bk-sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-queue { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 11.5px; font-weight: 700; color: var(--type-biz-2); }
.bk-queue svg { width: 12px; height: 12px; }
.bk-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.bk-price { font-size: 13px; font-weight: 800; color: var(--ink); }
.bk-when { font-size: 11px; color: var(--subtle); }
.bk-row .lr-go { color: var(--subtle); flex-shrink: 0; }
.bk-row .lr-go svg { width: 16px; height: 16px; }

/* ── Booking detail ───────────────────────────────────────────────────── */
.bkd-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.bkd-kicker { font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.bkd-title { font-size: 24px; font-weight: 900; letter-spacing: -.026em; color: var(--ink); line-height: 1.2; margin-top: 3px; }
.bkd-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.bkd-hero .bkd-when {
  display: flex; align-items: center; gap: 13px; margin-top: 16px; padding: 14px 16px;
  border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--hairline);
  font-size: inherit; color: inherit;
}
.bkd-hero .bkd-when > svg { width: 22px; height: 22px; color: var(--accent-2); flex-shrink: 0; }
.bkd-when-day { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.bkd-when-time { font-size: 13px; color: var(--muted); margin-top: 1px; }
.bkd-hero .bkd-when .btn { margin-left: auto; flex-shrink: 0; }

.bkd-party { display: flex; align-items: center; gap: 12px; }
.bkd-party-tx { flex: 1; min-width: 0; }
.bkd-party-name { font-size: 15px; font-weight: 800; color: var(--ink); }
.bkd-party-sub { font-size: 12.5px; color: var(--muted); }

.bkd-note { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--hairline); }
.bkd-note.private { border-style: dashed; }
.bkd-note-k { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.bkd-note-k svg { width: 13px; height: 13px; }
.bkd-note-hint { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--subtle); }
.bkd-note-v { font-size: 13.5px; color: var(--body); line-height: 1.55; margin-top: 6px; white-space: pre-wrap; }

/* ── Payment methods ──────────────────────────────────────────────────── */
/* Reuses .paymethod / .pm-* from commerce.css so a booking and an order
   describe payment identically.

   Layout note: commerce.css lays a method out as one flex row (38px icon +
   text + actions). That row lives in a 320px sidebar on the booking page —
   roughly 280px of usable width — where an icon, a label, a UPI id, a QR and a
   Copy button cannot all share a line. So inside .paycard the row *wraps* by
   default and is promoted back to a single line by a container query, once the
   container genuinely has the width for it. Sizing on the container rather than
   the viewport is what makes the same markup correct in both the narrow aside
   and the wide booking-detail column. */
.paycard { margin-top: 16px; }
.paycard.lead { margin-top: 0; margin-bottom: 16px; }
.paycard .card-body { container-type: inline-size; }

.paycard .paymethod { flex-wrap: wrap; row-gap: 10px; align-items: flex-start; }
.paymethod.attached { background: var(--accent-soft); }

/* Its own line: inline, an uppercase letter-spaced chip and the method label
   fight over the same ~200px and both end up truncated. */
.pm-tag {
  flex: 0 0 100%; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; width: fit-content;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.pm-tag svg { width: 11px; height: 11px; }

.paycard .pm-tx { display: flex; flex-direction: column; gap: 2px; }
.paycard .pm-k { line-height: 1.35; }
.paycard .pm-v { line-height: 1.4; overflow-wrap: anywhere; }
/* A masked value is not payable — it must not look like something to type in. */
.pm-v.partial { color: var(--muted); letter-spacing: .04em; font-weight: 600; }
.pm-hint { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }

.pm-actions { flex: 0 0 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* The QR is the payable artifact, so it is shown at a scannable size and opens
   full-screen in the lightbox for an actual phone camera. Scoped to .paycard so
   it doesn't clobber the unscoped .pm-qr rule commerce.css already ships. */
.paycard .pm-qr {
  width: 76px; height: 76px; flex-shrink: 0; padding: 5px;
  border-radius: var(--r-sm); background: #fff;
  border: 1px solid var(--hairline); overflow: hidden;
  transition: transform .12s, box-shadow .12s;
}
.paycard .pm-qr:hover { transform: scale(1.04); box-shadow: var(--shadow-md); }
.paycard .pm-qr img { width: 100%; height: 100%; object-fit: contain; }

/* Wide enough for one line: pull the badge up beside the label and put the QR
   and Copy back on the right. */
@container (min-width: 430px) {
  .paycard .paymethod { flex-wrap: nowrap; align-items: center; }
  .pm-tag { flex: 0 0 auto; order: 3; margin-left: auto; }
  .pm-actions { flex: 0 0 auto; order: 4; }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .book-layout { grid-template-columns: 1fr; }
  .book-side { position: static; }
}
@media (max-width: 600px) {
  .book-hero { flex-wrap: wrap; }
  .bk-row { flex-wrap: wrap; gap: 10px; }
  .bk-right { flex-direction: row; align-items: center; flex-wrap: wrap; width: 100%; }
  .cal-slots { grid-template-columns: 1fr 1fr; }
  .bkd-title { font-size: 20px; }
}