/* Online booking (reserver.html) — extends fare-calculator.css */

/* The layout classes set display:grid/flex, which would otherwise win over
   the hidden attribute used to switch between views. */
#main [hidden]{display:none !important;}

.book-gate{max-width:560px;}
.book-gate h2{font-size:22px; margin:0 0 8px;}
.book-gate .fare-actions{margin-top:18px;}
.book-phone{margin-top:14px;}

.book-input{
  width:100%; box-sizing:border-box; font:inherit; font-size:15px; color:var(--ink);
  padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper);
}
.book-input:focus{outline:none; border-color:var(--nordique-blue); box-shadow:0 0 0 3px rgba(0,123,185,.15); background:#fff;}
select.book-input{appearance:auto;}

.book-fieldset{border:0; padding:0; margin:0 0 16px;}
.book-fieldset legend{font-size:12px; font-weight:600; color:var(--ink-dim); margin-bottom:6px; padding:0;}
.book-options{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.book-options-inline{margin-bottom:8px;}
.book-option{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:var(--paper);
  font-size:14px; color:var(--ink);
}
.book-option:has(input:checked){border-color:var(--nordique-blue); background:rgba(0,123,185,.06); font-weight:600;}
.book-option input{accent-color:var(--nordique-blue); margin:0;}

.book-check{display:flex; align-items:center; gap:8px; font-size:14px; margin:0 0 12px; cursor:pointer;}
.book-check input{accent-color:var(--nordique-blue);}
.book-other{padding:4px 0 0;}

.book-availability{
  margin:0 0 14px; padding:10px 12px; border-radius:10px; font-size:14px; font-weight:600;
}
.book-availability.ok{color:#0f6b3d; background:rgba(30,150,90,.10);}
.book-availability.none{color:var(--danger); background:rgba(217,72,59,.08); font-weight:500;}

.book-status{max-width:640px;}
.book-status-head{display:flex; align-items:center; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--line);}
.book-status-head h2{font-size:22px; margin:0 0 4px;}
.book-status-head p{margin:0;}
.book-spinner{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--nordique-blue);
  animation:book-spin .9s linear infinite;
}
@keyframes book-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.book-spinner{animation:none;}}

.book-status-details{margin:16px 0; display:grid; gap:10px;}
.book-status-details div{display:grid; grid-template-columns:140px 1fr; gap:12px; font-size:14px;}
.book-status-details dt{color:var(--ink-faint);}
.book-status-details dd{margin:0; color:var(--ink); font-weight:600;}
.book-status .fare-error{margin:0 0 14px;}

@media (max-width: 560px){
  .book-options{grid-template-columns:1fr;}
  .book-options-inline{grid-template-columns:1fr 1fr;}
  .book-status-details div{grid-template-columns:1fr; gap:2px;}
}