/* Calm, consistent functional UI; display typography remains available for artwork. */
.btn { min-height: 46px; letter-spacing: -.01em; }
button, input, textarea { font-family: var(--font-body); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.app-page-header { letter-spacing: -.025em; }
.booking-card { border: 1px solid var(--border); box-shadow: 0 2px 8px #120f0d05; margin-bottom: 0; padding: 18px 16px; }
.booking-card--upcoming { box-shadow: 0 2px 8px #120f0d05; }
.booking-card__heading { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.booking-status { display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; padding: 6px 9px; margin-bottom: 12px; border-radius: 8px; font: 600 11px/1.3 var(--font-body); letter-spacing: 0; }
.booking-status--pending { background: #fff6e5; color: #85500c; }
.booking-status--confirmed, .booking-status--completed { background: var(--success-surface, #edf7f1); color: #246044; }
.booking-status--cancelled { background: var(--surface-2, #f4f0ee); color: var(--text-2); }
.booking-wait-spinner { display: inline-block; flex-shrink: 0; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
.booking-awaiting { display: flex; gap: 10px; padding: 12px; margin: 12px 0; border: 1px solid #f1dfbd; border-radius: 12px; background: #fffbf3; color: #85500c; text-align: left; width: 100%; }
.booking-awaiting > .booking-wait-spinner { margin-top: 3px; }
.booking-awaiting strong { font-size: 12px; font-weight: 600; }
.booking-awaiting p { font-size: 12px; color: var(--text-2); line-height: 1.5; margin-top: 3px; }
.success-circle--waiting { background: #fff6e5; color: #85500c; box-shadow: none; }
.success-circle--declined { background: var(--error); box-shadow: 0 8px 24px var(--error-border); }
.success-circle--waiting .booking-wait-spinner { width: 32px; height: 32px; border-width: 3px; }
.booking-items { margin-top: 14px; border-top: 1px solid var(--border); }
.booking-items > summary { cursor: pointer; padding: 12px 0; font-size: 13px; line-height: 1.5; color: var(--text); }
.booking-items > summary > span { display: block; color: var(--text-3); font-size: 11px; margin-top: 3px; }
.booking-items[open] > summary > span { display: none; }
.booking-items__content { padding-bottom: 8px; }
.booking-total { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 12px; color: var(--text-2); }
.booking-total strong { color: var(--text); font-size: 17px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .booking-wait-spinner { animation: none; border-style: dotted; } }
.booking-card button { min-height: 44px; }
.booking-card button:active { transform: translateY(1px); }
@media (max-width: 380px) {
  .booking-card { padding: 14px; }
  .booking-total strong { font-size: 16px; }
}

.booking-contact { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.booking-call { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; }
button.booking-call { background: none; border: 0; font-family: inherit; cursor: pointer; }
.booking-contact > span { font-size: 11px; color: var(--text-3); }
.svc-chevron svg { width: 14px; height: 14px; }
.svc-chevron { color: var(--text-3); }
.svc-chevron--detail { background: transparent; border-color: var(--border); }
.svc-chevron--detail:hover { background: var(--surface-2); }