/* ==========================================================================
   BOOK FORMS (2026-10-28): /book/<product> (templates/travel/order_form.html).
   Photo hero, numbered cards, icon labels, a summary price card and a send
   bar under the thumb on phones. Built on et-blocks.css + orders.css.
   Brand tokens only. Phone first.
   ========================================================================== */
.bk-page { --bk-blue: var(--eb-blue, #2563eb); --bk-soft: var(--eb-soft, #f5f7fa); --bk-line: var(--eb-line, #e5e5e7);
           --bk-muted: var(--eb-muted, #4f5a6b); --bk-ok: var(--eb-ok, #1f7a4d); }
.bk-page .eb-hero { margin-top: 4px; }
.bk-page .eb-hero .et-i { width: 1.05em; height: 1.05em; }

/* The form: no outer card, each step is its own card */
.bk-form { min-width: 0; }
.bk-card { padding: 18px 16px; }
@media (min-width: 641px) { .bk-card { padding: 22px 24px; } }
.bk-card .eb-card__head { margin-bottom: 16px; }
.bk-card .eb-card__head > div { flex: 1 1 auto; min-width: 0; }
.bk-card .eb-card__head h2 { margin: 0; font-size: 1.08rem; }
.bk-head-ico { width: 38px; height: 38px; }
.to-form .bk-card h2 + .form-grid { margin-bottom: 0; }
.bk-card > .form-grid + .to-more, .bk-card > .form-grid + .to-extra { margin-top: 16px; }
.bk-card > .to-more:last-child { margin-bottom: 0; }

/* Fields: icon labels; dates and numbers pair up on a phone */
.bk-grid { gap: 14px 14px; }
.bk-form .f-field { min-width: 0; }
.bk-form .f-field > label.eb-label { display: flex; margin-bottom: 7px; font-size: .86rem; flex-wrap: wrap; row-gap: 2px; }
.bk-form .f-field > label.eb-label .et-i { width: 16px; height: 16px; color: var(--bk-blue); }
.bk-form .f-field > label.eb-label .to-opt { margin-left: 2px; }
.bk-form .f-field input, .bk-form .f-field select, .bk-form .f-field textarea { border-radius: 12px; min-height: 48px; }
.bk-form .f-field input:focus, .bk-form .f-field select:focus, .bk-form .f-field textarea:focus {
    border-color: var(--bk-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.bk-form .f-field input[type="date"] { -webkit-appearance: none; appearance: none; text-align: left; }
@media (max-width: 640px) {
    .bk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bk-grid > .f-field { grid-column: 1 / -1; }
    .bk-grid > .f-field.bk-half { grid-column: auto; }
    .bk-grid > .f-field.bk-half input { padding-left: 12px; padding-right: 10px; }
}

/* Optional folds */
.bk-form .to-more { border-radius: 14px; background: var(--bk-soft); border-color: transparent; padding: 0 14px; }
.bk-form .to-more > summary { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 10px 0; }
.bk-form .to-more > summary::after { margin-left: auto; color: var(--bk-blue); font-size: 1.2rem; line-height: 1; }
.bk-form .to-more .form-grid { padding-bottom: 2px; }
.bk-form .to-more .f-field input, .bk-form .to-more .f-field select, .bk-form .to-more .f-field textarea { background-color: #fff; }
.bk-form .to-check input { accent-color: var(--bk-blue); }
.bk-form .to-watch { border-radius: 14px; }
.bk-form .to-pax { border-radius: 14px; }
.bk-form .to-readback { border-left: 4px solid var(--bk-blue); background: var(--eb-blue-soft, #eef4ff); }

/* Pay choice as two cards */
.bk-form .to-paychoice { margin: 0; }
.bk-form .to-paychoice label { border-radius: 14px; padding: 14px; transition: border-color .2s, background .2s; }
.bk-form .to-paychoice label:has(input:checked) { border-color: var(--bk-blue); background: var(--eb-blue-soft, #eef4ff); }
.bk-form .to-paychoice input { accent-color: var(--bk-blue); }

/* Send: the note, then the button (a bar under the thumb on phones) */

.bk-send__note { margin: 4px 0 12px; font-size: .88rem; }
.bk-go { display: flex; align-items: center; gap: 14px; }
.bk-go__sum { display: none; }
.bk-go .et-btn { min-height: 52px; padding-left: 28px; padding-right: 28px; }
@media (max-width: 860px) {
    .bk-go { position: sticky; z-index: 40; bottom: 10px; justify-content: space-between; gap: 10px;
             padding: 8px 8px 8px 14px; border-radius: 18px; background: rgba(255, 255, 255, .96);
             backdrop-filter: blur(10px); border: 1px solid var(--bk-line); box-shadow: 0 10px 30px rgba(15, 26, 44, .18); }
    body.has-tabbar .bk-go { bottom: calc(var(--tab-h, 62px) + 10px + env(safe-area-inset-bottom)); }
    /* The chat and guide buttons rise above the send bar instead of covering its button. */
    body.has-tabbar:has(.bk-go) .al-fab, body:has(.bk-go) .al-fab.is-lifted,
    body:has(.bk-go) .lg-launcher.is-lifted { bottom: calc(var(--tab-h, 62px) + 94px + env(safe-area-inset-bottom)); }
    .bk-go__sum { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1 1 auto; }
    .bk-go__sum small { color: var(--bk-muted); font-size: .74rem; }
    .bk-go__sum b { font-size: .98rem; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bk-go .et-btn { flex: 0 1 auto; min-height: 48px; padding: 10px 16px; font-size: .95rem; white-space: normal; text-align: center; line-height: 1.2; max-width: 62%; }
}

/* The side: price summary card, how it works, promise */
.bk-page .to-side .pg-card { border: 1px solid var(--bk-line); border-radius: var(--eb-r, 18px); box-shadow: var(--eb-sh); }
.bk-sum { border-left: 1px solid var(--bk-line); background: linear-gradient(180deg, var(--eb-blue-soft, #eef4ff), #fff 75%); }
.bk-sum.is-instant { border-color: var(--bk-ok); box-shadow: 0 0 0 1px var(--bk-ok), var(--eb-sh); }
.bk-sum.is-manual { border-left-color: var(--bk-line); }
.bk-sum__head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.bk-sum__head h2 { margin: 0 !important; }
.bk-sum__head .eb-ico { width: 36px; height: 36px; background: #fff; }
.bk-sum .to-price td { border-bottom-color: rgba(15, 26, 44, .08); font-size: .92rem; }
.bk-sum .to-price td:first-child { overflow-wrap: anywhere; padding-right: 10px; }
.bk-sum .to-price tr.to-total td { color: var(--eb-ink, #0f1a2c); font-size: 1.2rem; font-weight: 800; }
.bk-sum .to-fine { margin: 6px 0 0; }
.bk-side-card h2 { display: flex; align-items: center; gap: 8px; }
.bk-side-card h2 .et-i { color: var(--bk-blue); width: 1.1em; height: 1.1em; }
.bk-page .to-steps b { background: var(--bk-blue); flex-basis: 28px; height: 28px; }
.bk-page .to-side .et-btn--outline { display: inline-flex; align-items: center; gap: 8px; }
@media (min-width: 861px) { .bk-page .to-side { position: sticky; top: calc(var(--nav-h, 48px) + 16px); } }
@media (max-width: 860px) { .bk-page .to-side { margin-top: 4px; } }

.bk-page .eb-trust { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .bk-form .to-paychoice label { transition: none; } }