/* Booking UI — the markup booking-embed.js and the checkout inject.
   Same tokens as styles.css; these classes only exist because the booking
   flow builds its own DOM. Restyled 29 September 2026 to the bike-site
   language: white cards on hairlines, bronze for the one action, mono figures. */

.bk{color:var(--ink)}
.bk-embed,.booking-embed-slot{display:block}

/* The search bar: a white card with the fields in a row and the bronze button. */
.bk-fields{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;padding:20px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.bk-fields>div{display:flex;flex-direction:column;gap:6px;flex:1 1 190px;min-width:0}
.bk-fields label{margin:0;font-size:var(--t-caption);font-weight:600;color:var(--ink-soft)}
.bk-fields input,.bk-fields select{margin-top:0;min-height:52px;background:var(--card)}
.bk-fields button{min-height:52px;padding:0 28px;border:2px solid var(--accent);border-radius:var(--radius-sm);
  background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transition:background .18s,border-color .18s,transform .15s,box-shadow .15s}
.bk-fields button:hover,.bk-fields button:focus-visible{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.bk-fields>div:last-child{flex:0 0 auto}

.bk-summary,.bk-hint{margin:12px 0 0;font-size:var(--t-body);color:var(--ink-soft)}
.bk-note{margin:10px 0 0;font-size:var(--t-body);color:var(--danger);font-weight:600}
.bk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bk-count{margin:28px 0 4px;font-size:var(--t-head);font-weight:800;letter-spacing:-0.01em;color:var(--ink);font-family:var(--sans)}
.bk-results{display:block}

/* One car per card: photo to the edge, copy in the padding, action on the same
   line across the row. */
.bk-cars{display:grid;gap:clamp(16px,2vw,24px);margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr))}
.bk-car{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2vw,24px);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .2s,box-shadow .2s,transform .2s}
.bk-car:hover,.bk-car:focus-within{border-color:var(--border-hover);box-shadow:var(--shadow-md);transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.bk-car:hover,.bk-car:focus-within{transform:none}}
.bk-car .bk-preview{margin:calc(-1 * clamp(18px,2vw,24px)) calc(-1 * clamp(18px,2vw,24px)) 4px;
  width:auto;border-radius:var(--radius) var(--radius) 0 0;border:0;border-bottom:1px solid var(--line)}
.bk-car>a:last-child,.bk-car .button,.bk-car .bk-link{margin-top:auto;align-self:flex-start}
.bk-cars>li{display:flex}
.bk-car{width:100%}
.bk-preview,.bk-car img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-sm);
  background:var(--surface);display:block}
.bk-car h3,.bk-car strong.bk-variant{font-size:var(--t-title);font-weight:700;letter-spacing:-0.01em}
.bk-variant{font-size:var(--t-caption);font-weight:400;color:var(--ink-faint)}
.bk-price{font-size:var(--t-body);color:var(--ink)}
.bk-price b,.bk-price strong{font-weight:700;color:var(--accent);font-size:var(--t-title)}
.bk-price span{margin-left:6px;color:var(--ink-soft)}
.bk-perday{margin:0;font-size:var(--t-body);color:var(--ink-soft)}
.bk-spec{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;
  font-size:var(--t-caption);color:var(--ink-faint)}
.bk-spec li,.bk-spec>div{display:flex;align-items:center;gap:6px}
.bk-terms{margin:0;font-size:var(--t-caption);color:var(--ink-faint);line-height:1.5}
.bk-bond{margin:0;font-size:var(--t-caption);color:var(--ink-faint);line-height:1.5}
.bk-car .button,.bk-car .bk-link{margin-top:2px;align-self:flex-start}

.bk-empty,.bk-skeleton{padding:26px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--ink-soft)}
.bk-fleet{display:grid;gap:16px;margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}

/* Checkout: form on the left, the quote beside it, both in view. */
.bk-cols{display:grid;gap:clamp(20px,2.6vw,32px);align-items:start;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:980px){.bk-cols{grid-template-columns:minmax(0,1fr) 400px}}
.bk-panel,.bk-side{padding:clamp(22px,2.6vw,30px);background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius)}
.bk-panel{display:flex;flex-direction:column;gap:18px}
.bk-panel h2{font-size:var(--t-title)}
.bk-pair{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
.bk-field{display:flex;flex-direction:column;gap:0}
.bk-field label{font-size:var(--t-caption);font-weight:600;color:var(--ink-soft)}
.bk-side,.bk-summary{display:flex;flex-direction:column;gap:16px}
.bk-side-head{margin:0;font-size:var(--t-label)}
.bk-sides{display:flex;flex-direction:column;gap:16px}
.bk-rule{height:1px;margin:0;border:0;background:var(--line)}
/* The quote panel is a two-column ledger: label on the left, figure right. */
.bk-summary dl,.bk-side dl{display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:11px 16px;margin:0}
.bk-summary dl>dt,.bk-side dl>dt{font-size:var(--t-body);color:var(--ink-soft);font-family:var(--sans)}
.bk-summary dl>dd,.bk-side dl>dd{margin:0;font-size:var(--t-body);font-weight:700;text-align:right}
.bk-summary h2{font-size:var(--t-title)}
.bk-summary .bk-hint,.bk-summary .bk-bond{margin:0;font-size:var(--t-caption);color:var(--ink-faint);line-height:1.55}
.bk-big{font-size:var(--t-title);font-weight:700;color:var(--accent)}
.bk-ref{font-size:var(--t-body);font-weight:700;color:var(--ink)}

.bk-banner{padding:15px 17px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--ink);font-size:var(--t-body)}
.bk-banner.bad{border-left-color:var(--danger);background:#fbeae7;color:var(--danger)}
.bk-banner a{color:inherit;text-decoration:underline;text-underline-offset:3px;font-weight:700}

.bk-todo{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.bk-todo li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-body);color:var(--ink-soft)}
.bk-tick{color:var(--accent);font-weight:700;flex-shrink:0}

#bk-card,.bk-card{min-height:52px;padding:15px 14px;border:1px solid var(--line-control);
  border-radius:var(--radius-sm);background:var(--card)}

@media(max-width:620px){
  .bk-fields{padding:16px}
  .bk-fields>div,.bk-fields>div:last-child{flex:1 1 100%;min-width:0}
  /* "Ver o que está disponível" is 311px on one line: wider than a 320px
     screen. The button wraps on phones instead of running past the edge. */
  .bk-fields button{width:100%;white-space:normal;padding:12px 16px;line-height:1.3}
}