/* Bike picker, booking detail and the bottom navigation. Primitives: ui.css. */

/* Booking dialogs share ui.css's shell; these rules describe their contents. */
#mech-terms-overlay { z-index: var(--cg-layer-dialog-child); }
#duration-chat-overlay { z-index: var(--cg-layer-dialog-advisor); }
#time-sheet-summary { margin: 0; font: 600 var(--cg-text-body)/1.5 var(--cg-font-body); }
#time-sheet-overlay .cg-dialog-footer .time-sheet-continue { margin: 0; }
#mech-terms-body p { margin: 0 0 var(--cg-space-md); }
.duration-chat-messages { display: flex; flex-direction: column; gap: var(--cg-space-sm); min-height: 100px; }
.duration-chat-input-row { flex-direction: row; gap: var(--cg-space-xs); }
.duration-chat-input-row .cg-field { flex: 1; }
.duration-chat-input-row .cg-button { width: 48px; min-height: 48px; padding: 0; flex-shrink: 0; }
.dchat-msg { max-width: 90%; padding: var(--cg-space-sm); border-radius: var(--cg-radius-media); overflow-wrap: anywhere; }
.dchat-msg-ai { align-self: flex-start; background: var(--cg-ink); color: var(--cg-paper); }
.dchat-msg-user { align-self: flex-end; background: var(--cg-red); color: var(--cg-paper); }
.dchat-actions { display: flex; flex-wrap: wrap; gap: var(--cg-space-xs); }
.dchat-action-btn { min-height: 44px; padding: var(--cg-space-xs) var(--cg-space-sm); border: 1px solid var(--cg-line-strong); background: none; color: var(--cg-ink); font: 500 var(--cg-text-small)/1.5 var(--cg-font-body); cursor: pointer; }
.dchat-action-btn.recommended { border-color: var(--cg-red); color: var(--cg-red); }
.dchat-typing { display: flex; gap: 4px; padding: var(--cg-space-sm); }
.dchat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--cg-ink); animation: typing-bounce 1.2s infinite; }
.dchat-typing span:nth-child(2) { animation-delay: .2s; }
.dchat-typing span:nth-child(3) { animation-delay: .4s; }
.notes-chips { display: flex; flex-wrap: wrap; gap: var(--cg-space-xs); margin: var(--cg-space-md) 0; }
.notes-chip { min-height: 44px; padding: var(--cg-space-xs) var(--cg-space-sm); border: 1px solid var(--cg-line); background: none; color: var(--cg-ink); font: 500 var(--cg-text-small)/1.4 var(--cg-font-body); cursor: pointer; }
.notes-chip.active { background: var(--cg-ink); color: var(--cg-paper); border-color: var(--cg-ink); }
#notes-modal-input { display: block; resize: vertical; min-height: 96px; }
.notes-modal-footer { flex-direction: row; align-items: center; justify-content: space-between; }
.notes-modal-footer .cg-button { width: auto; }
.notes-modal-footer .cg-dialog-eyebrow { margin: 0; color: var(--cg-muted); }
@media (prefers-reduced-motion:reduce) { .dchat-typing span { animation: none; } }

/* ── Shared modal shell ──────────────────────────────────────────────── */
:is(#screen-select, #screen-booking-detail) { background: color-mix(in srgb, var(--cg-ink) 60.00%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
:is(#screen-select, #screen-booking-detail) .modal-content { border: 0; border-top: 4px solid var(--cg-red); border-radius: 0; background: var(--cg-paper); color: var(--cg-ink); padding: 28px 24px calc(32px + env(safe-area-inset-bottom)); }
#screen-select .modal-content { border-radius: var(--cg-radius-media) var(--cg-radius-media) 0 0; }
#screen-booking-detail { background: var(--cg-paper); }
:is(#screen-select, #screen-booking-detail) .app-header { justify-content: flex-start; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--cg-ink); }
:is(#screen-select, #screen-booking-detail) .header-center { position: static; transform: none; text-align: left; }
:is(#screen-select, #screen-booking-detail) .app-header h2 { color: var(--cg-ink); font: 400 clamp(28px,7vw,36px)/1.05 var(--cg-font-display); letter-spacing: -.01em; }
:is(#screen-select, #screen-booking-detail) .accent-text { color: var(--cg-red); }

/* ── Bike picker ─────────────────────────────────────────────────────── */
#screen-select .model-grid { gap: 0; margin-top: 0; }
#screen-select .model-card { display: grid; grid-template-columns: minmax(0,1fr) 18px; align-items: center; gap: 16px; min-height: 88px; padding: 18px 0; border: 0; border-bottom: 1px solid var(--cg-line); border-radius: 0; background: none; color: var(--cg-ink); }
#screen-select .model-card:active { transform: none; background: var(--cg-line-soft); border-color: var(--cg-red); }
#screen-select .model-card strong { color: var(--cg-ink); font: 600 var(--cg-text-lead)/1.4 var(--cg-font-body); letter-spacing: 0; }

/* ── Booking detail ──────────────────────────────────────────────────── */
#screen-booking-detail .booking-detail-status-badge { padding: 8px 12px; border: 1px solid var(--cg-ink); border-radius: var(--cg-radius-sm); background: none; color: var(--cg-ink); font: 600 var(--cg-text-micro)/1.4 var(--cg-font-body); letter-spacing: .09em; }
#screen-booking-detail .booking-detail-card { margin-bottom: 24px; border: 0; border-top: 1px solid var(--cg-line); border-radius: 0; background: none; }
#screen-booking-detail .booking-detail-row { padding: 14px 0; border-bottom: 1px solid var(--cg-line-soft); }
#screen-booking-detail .booking-detail-row:last-child { border-bottom: 1px solid var(--cg-line-soft); }
#screen-booking-detail .detail-label { color: var(--cg-ink); font: 400 var(--cg-text-detail)/1.5 var(--cg-font-body); letter-spacing: 0; text-transform: none; }
#screen-booking-detail .detail-value { color: var(--cg-ink); font: 600 var(--cg-text-body)/1.4 var(--cg-font-body); }
#screen-booking-detail .detail-value.accent-text { color: var(--cg-red); }
#screen-booking-detail .booking-actions-grid { gap: 1px; background: var(--cg-line); border: 1px solid var(--cg-line); border-radius: var(--cg-radius-media); overflow: hidden; }
#screen-booking-detail .booking-action-btn { gap: 8px; min-height: 88px; border: 0; border-radius: 0; background: var(--cg-paper); color: var(--cg-ink); font: 600 var(--cg-text-detail)/1.4 var(--cg-font-body); }
#screen-booking-detail .booking-action-btn:active { transform: none; background: var(--cg-line-soft); }
#screen-booking-detail .booking-action-btn.danger { color: var(--cg-red); }
#screen-booking-detail .action-icon { font-size: var(--cg-text-large); }
#screen-booking-detail .cancel-policy { gap: 10px; margin-top: 20px; padding: 14px 0 0; border: 0; border-top: 1px solid var(--cg-line); border-radius: 0; background: none; }
#screen-booking-detail .cancel-policy-icon { display: none; }
#screen-booking-detail .cancel-policy-text { color: var(--cg-ink); font: 400 var(--cg-text-small)/1.6 var(--cg-font-body); }
#screen-booking-detail .cancel-policy-text strong { color: var(--cg-ink); font-weight: 600; }
#screen-booking-detail .cancel-policy-text a { color: var(--cg-red); text-decoration: underline; text-underline-offset: 3px; }
#screen-booking-detail .bd-add-cal-row { gap: 8px; margin-top: 16px; }
#screen-booking-detail .bd-add-cal-btn { min-height: 48px; padding: 12px 10px; border: 1px solid var(--cg-line-strong); border-radius: var(--cg-radius); background: none; color: var(--cg-ink); font: 500 var(--cg-text-small)/1.4 var(--cg-font-body); letter-spacing: 0; }
#screen-booking-detail .bd-add-cal-btn:active { transform: none; background: var(--cg-line-soft); }

/* Profile achievement details share the booking dialog's focus and Back rules;
   their look lives in profile.css. */
#ach-sheet-content { white-space: pre-line; }
@media (max-width:599px) {
  #ach-description-sheet .cg-dialog-body { padding-bottom: max(var(--cg-dialog-padding), calc(var(--cg-safe-bottom) + 16px)); }
}

/* One navigation surface across Home, Book, Profile and Shop. */
#bottom-nav { width: min(100%,var(--cg-content-width)); height: var(--cg-bottom-nav-height); bottom: 0; padding: 0 max(12px,env(safe-area-inset-right)) var(--cg-safe-bottom) max(12px,env(safe-area-inset-left)); border: 0; border-top: 1px solid var(--cg-line-soft); border-radius: 0; background: var(--cg-paper); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
#bottom-nav .nav-item { --cg-focus: var(--cg-ink); flex: 1 1 0; min-width: 0; min-height: 56px; padding: 6px 2px; border-radius: 0; gap: 4px; color: var(--cg-ink); transition: none; }
#bottom-nav .nav-item.active { color: var(--cg-red); }
#bottom-nav .nav-item svg { width: 22px; height: 22px; flex-shrink: 0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: none; transition: none; }
#bottom-nav .nav-item span { font: 500 var(--cg-text-caption)/1.4 var(--cg-font-body); letter-spacing: 0; text-transform: none; opacity: 1; }

@media (hover:hover) and (pointer:fine) {
  #screen-select .model-card:hover { color: var(--cg-red); }
  #screen-booking-detail .booking-action-btn:hover { background: var(--cg-line-soft); border: 0; }
  #screen-booking-detail .bd-add-cal-btn:hover { border-color: var(--cg-red); color: var(--cg-red); background: none; }
  #bottom-nav .nav-item:hover { color: var(--cg-red); }
}
@media (min-width:800px) {
  :is(#screen-select, #screen-booking-detail) .modal-content { max-width: 720px; margin: 0 auto; width: 100%; padding: 40px 48px 56px; }
}

/* Walk-in from the garage screen (#walkin-overlay) */
.walkin-body { display: flex; flex-direction: column; gap: var(--cg-space-sm); }
.walkin-lead { margin: 0; font: 400 var(--cg-text-lead)/1.45 var(--cg-font-body); color: var(--cg-ink); }
.walkin-small { margin: 0; font: 400 var(--cg-text-detail)/1.4 var(--cg-font-body); color: var(--cg-muted); }
.walkin-options { display: grid; gap: var(--cg-space-sm); margin: var(--cg-space-sm) 0; }
.walkin-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 16px;
  border: 1px solid var(--cg-line); border-radius: var(--cg-radius); background: transparent; color: var(--cg-ink);
  font: 500 var(--cg-text-control)/1.2 var(--cg-font-body); text-align: left; }
.walkin-option strong { font: 400 22px/1 var(--cg-font-display); white-space: nowrap; }
.walkin-option s { font: 400 var(--cg-text-detail)/1 var(--cg-font-body); color: var(--cg-muted); }
.walkin-option[aria-checked="true"] { border-color: var(--cg-red); background: var(--cg-red); color: var(--cg-paper); }
.walkin-option[aria-checked="true"] s { color: var(--cg-inverse-muted); }
.walkin-error { margin: 0; font: 500 var(--cg-text-body)/1.4 var(--cg-font-body); color: var(--cg-red); }
.walkin-done-title { margin: 0; font: 400 var(--cg-title-section)/1 var(--cg-font-display); color: var(--cg-ink); }