/* Booking page (book.html). Reuses the hero from track.css and the steps and confirmation from flow.css;
   this file adds the shipment form (route, parcel lines, totals, cargo) and the contact grid, which
   declare.html shares. */

/* Form panel: wider than the tracking search, in numbered sections. */
.book-form { display: grid; gap: var(--space-6); max-width: 960px; }
.book-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.book-section + .book-section { padding-top: var(--space-6); border-top: 1px solid var(--line); }
/* Floated so the legend sits inside the section, not on its top border. */
.book-section__title { float: left; width: 100%; display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); padding: 0; font-size: 18px; line-height: 28px; font-weight: 700; }
.book-section__step { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--action); color: var(--on-action); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.book-section__title + * { clear: both; }
.book-section__help { margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.book-form .px-field { max-width: none; }

/* Route: From, swap, To. */
.book-route { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: start; }
.book-airport { min-height: 52px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; }
.book-airport::placeholder { text-transform: none; }
.book-route__swap { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: 32px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.book-route__swap:hover { background: var(--signal); border-color: var(--ink); }
.book-route__swap:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.book-route__swap svg { width: 20px; height: 20px; }
@media (max-width: 639px) {
  .book-route { grid-template-columns: 1fr; gap: var(--space-2); }
  .book-route__swap { justify-self: center; margin: 0; transform: rotate(90deg); }
}

/* Parcel lines */
.book-parcels { display: grid; gap: var(--space-4); }
.book-parcel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.book-parcel__head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.book-parcel__title { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.book-parcel__remove { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.book-parcel__remove:hover { background: var(--surface-alt); }
.book-parcel__remove:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.book-parcel__remove svg { width: 16px; height: 16px; }
.book-parcel__field { gap: 4px; }
.book-parcel__field--quantity, .book-parcel__field--weightKg { grid-column: span 3; }
.book-parcel__field--lengthCm, .book-parcel__field--widthCm, .book-parcel__field--heightCm { grid-column: span 2; }
.book-parcel .px-label { font-size: 13px; line-height: 18px; }
.book-unit { font-weight: 400; color: var(--ink-muted); }
.book-num { font-variant-numeric: tabular-nums; }
@media (min-width: 720px) {
  .book-parcel { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .book-parcel__field { grid-column: auto !important; }
}

.book-add { justify-self: start; margin-top: var(--space-4); }
.book-add svg { width: 16px; height: 16px; }

/* Running totals: dark bar with the chargeable weight as an amber chip. */
.book-totals { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2) var(--space-6); margin: var(--space-4) 0 var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--action); color: var(--on-action); }
.book-totals__item { display: flex; flex-direction: column; justify-content: center; }
.book-totals dt { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--line); }
.book-totals dd { margin: 0; font-size: 18px; line-height: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.book-totals__item--chargeable { margin-left: auto; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); background: var(--signal); color: var(--ink); }
.book-totals__item--chargeable dt { color: var(--ink); }
@media (max-width: 639px) { .book-totals__item--chargeable { flex: 1 1 100%; margin-left: 0; } }

/* Checkboxes: the DG option as a selectable card, the consent as a plain row. */
.book-check { display: flex; gap: var(--space-4); align-items: flex-start; cursor: pointer; }
.book-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--action); cursor: pointer; }
.book-check input:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.book-check--card { padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); }
.book-check--card:hover { background: var(--surface); }
.book-check--card:has(input:checked) { border-color: var(--ink); background: var(--signal); }
.book-check__title { display: block; font-weight: 700; }
.book-check__text { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.book-check--card:has(input:checked) .book-check__text { color: var(--ink); }

.book-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.book-form__submit { min-height: 52px; padding: 0 var(--space-6); font-size: 16px; }
.book-form__submit svg, .book-form__actions .px-btn svg { width: 18px; height: 18px; }
@media (max-width: 520px) { .book-form__submit { flex: 1 1 100%; } }

/* Incoterms and notes, under the DG option */
.book-terms { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
@media (min-width: 720px) { .book-terms { grid-template-columns: 1fr 1fr; align-items: start; } }
.book-select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315181d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; cursor: pointer; }
.book-terms textarea.px-input { min-height: 44px; }

/* Contact details, also used on declare.html */
.book-contact { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .book-contact { grid-template-columns: 1fr 1fr; } }