/* ═══════════════════════════════════════════════════════════════
   Cam-Itinerary — Request Quote & Book (checkout) styles
   All values reference Sambor design tokens.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Page wrap (two-column: main + sticky summary) ─── */
.co-wrap { display: grid; grid-template-columns: 1fr 372px; gap: 32px; max-width: 1200px; margin: 0 auto; padding: 28px 32px 72px; align-items: start; }
.co-wrap.solo { grid-template-columns: 1fr; max-width: 860px; }

/* ─── Room picker (stay booking step 1) ─── */
.room-pick { display: flex; flex-direction: column; gap: 12px; }
.rp { display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; align-items: center; padding: 12px; border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-lg); cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); background: white; }
.rp:hover { border-color: var(--color-forest-300); }
.rp.on { border-color: var(--color-forest-500); background: var(--color-forest-50); }
.rp .rp-img { width: 92px; height: 72px; border-radius: var(--radius-md); background-size: cover; background-position: center; background-color: var(--color-gray-100); }
.rp .rp-name { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -0.01em; margin-bottom: 4px; }
.rp .rp-facts { font-size: 12px; color: var(--fg-3); line-height: 1.4; }
.rp .rp-rail { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rp .rp-price { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--fg-1); }
.rp .rp-price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--fg-3); }
.rp .rp-radio { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--color-gray-300); display: grid; place-items: center; }
.rp.on .rp-radio { border-color: var(--color-forest-500); }
.rp.on .rp-radio::after { content: ''; width: 10px; height: 10px; border-radius: 999px; background: var(--color-forest-500); }
@media (max-width: 560px) { .rp { grid-template-columns: 72px 1fr; } .rp .rp-rail { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } }

/* ─── Stepper ─── */
.bk-stepper { display: flex; align-items: center; margin: 0 0 28px; }
.bk-stepper .st { display: flex; align-items: center; gap: 11px; }
.bk-stepper .st .n { width: 38px; height: 38px; border-radius: 999px; background: white; border: 2px solid var(--color-gray-200); color: var(--fg-3); font-family: var(--font-display); font-weight: 800; font-size: 15px; display: grid; place-items: center; flex-shrink: 0; transition: all var(--dur-base) var(--ease-out); }
.bk-stepper .st .n svg { width: 17px; height: 17px; stroke-width: 3; }
.bk-stepper .st.done .n { background: var(--color-forest-500); border-color: var(--color-forest-500); color: white; }
.bk-stepper .st.active .n { background: white; border-color: var(--color-forest-500); color: var(--color-forest-600); box-shadow: 0 0 0 4px var(--color-forest-50); }
.bk-stepper .st .lbl { font-size: 13px; font-weight: 700; color: var(--fg-3); white-space: nowrap; }
.bk-stepper .st.done .lbl, .bk-stepper .st.active .lbl { color: var(--fg-1); }
.bk-stepper .bar { flex: 1; height: 2px; background: var(--color-gray-200); margin: 0 14px; border-radius: 2px; transition: background var(--dur-base) var(--ease-out); }
.bk-stepper .bar.done { background: var(--color-forest-500); }

/* ─── Step card / panel ─── */
.bk-card { background: white; border: 1px solid var(--color-gray-100); border-radius: var(--radius-2xl); box-shadow: var(--shadow-1); padding: 30px 32px; }
.bk-card + .bk-card { margin-top: 18px; }
.bk-step { display: none; animation: bkFade var(--dur-enter) var(--ease-out); }
.bk-step.on { display: block; }
@keyframes bkFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.bk-h { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 6px; }
.bk-sub { font-size: 14.5px; color: var(--fg-2); line-height: 1.5; margin: 0 0 24px; }
.bk-eyebrow { font-family: var(--font-sub); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-sub); color: var(--color-forest-500); margin-bottom: 10px; }
.bk-block { margin-bottom: 26px; }
.bk-block:last-child { margin-bottom: 0; }
.bk-block > .lbl { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -0.01em; margin: 0 0 13px; display: flex; align-items: center; gap: 8px; }
.bk-block > .lbl svg { width: 17px; height: 17px; color: var(--color-forest-500); stroke-width: 2; }
.bk-block > .lbl .opt { font-family: var(--font-body); font-weight: 600; font-size: 12px; color: var(--fg-3); margin-left: auto; }

/* ─── Form fields ─── */
.fld { margin-bottom: 16px; }
.fld:last-child { margin-bottom: 0; }
.fld > label { display: block; font-size: 12.5px; font-weight: 700; color: var(--fg-2); margin-bottom: 7px; }
.fld > label .req { color: var(--color-red-500); margin-left: 2px; }
.fld input, .fld select, .fld textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 14.5px; color: var(--fg-1); background: white; transition: all var(--dur-base) var(--ease-out); }
.fld textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--fg-3); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--color-forest-300); box-shadow: 0 0 0 3px var(--color-forest-50); }
.fld .hint { font-size: 11.5px; color: var(--fg-3); margin-top: 6px; }
.fld input.err, .fld textarea.err, .fld select.err { border-color: var(--color-red-500); box-shadow: 0 0 0 3px var(--color-red-50); }
.terms.err { outline: 1.5px solid var(--color-red-300); }
.fld .with-pre { position: relative; display: flex; align-items: center; }
.fld .with-pre .pre { position: absolute; left: 13px; font-size: 14px; font-weight: 700; color: var(--fg-3); pointer-events: none; }
.fld .with-pre input { padding-left: 30px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row2, .row3 { grid-template-columns: 1fr; } }

.charcount { font-size: 11.5px; color: var(--fg-3); text-align: right; margin-top: 6px; font-family: var(--font-mono); }

/* ─── Counters (travellers) ─── */
.counter-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--color-gray-100); }
.counter-row:last-child { border-bottom: 0; }
.counter-row .cr-l .t { font-weight: 700; font-size: 14.5px; color: var(--fg-1); }
.counter-row .cr-l .s { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.counter { display: inline-flex; align-items: center; gap: 4px; }
.counter button { width: 36px; height: 36px; border-radius: 999px; border: 1.5px solid var(--color-gray-200); background: white; color: var(--color-forest-600); display: grid; place-items: center; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.counter button:hover:not(:disabled) { border-color: var(--color-forest-500); background: var(--color-forest-50); }
.counter button:disabled { color: var(--color-gray-300); cursor: not-allowed; }
.counter button svg { width: 16px; height: 16px; stroke-width: 2.6; }
.counter .c-val { min-width: 34px; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--fg-1); }

/* ─── Calendar ─── */
.cal { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: 16px; max-width: 340px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-head .m { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.cal-head button { width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--fg-2); transition: background var(--dur-fast) var(--ease-out); }
.cal-head button:hover { background: var(--color-gray-50); color: var(--fg-1); }
.cal-head button:disabled { color: var(--color-gray-200); cursor: not-allowed; }
.cal-head button svg { width: 16px; height: 16px; stroke-width: 2.4; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-grid .dow { text-align: center; font-family: var(--font-sub); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-3); padding: 4px 0 6px; }
.cal-day { aspect-ratio: 1; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--fg-1); cursor: pointer; background: none; border: 0; transition: all var(--dur-fast) var(--ease-out); }
.cal-day:hover:not(:disabled) { background: var(--color-forest-50); }
.cal-day:disabled { color: var(--color-gray-300); cursor: not-allowed; }
.cal-day.in-range { background: var(--color-forest-50); border-radius: 0; }
.cal-day.start { background: var(--color-forest-500); color: white; }
.cal-day.end { background: var(--color-forest-400); color: white; }
.cal-day.start, .cal-day.end { border-radius: var(--radius-sm); }
.cal-empty { aspect-ratio: 1; }
.cal-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-gray-100); font-size: 13px; color: var(--fg-2); display: flex; align-items: center; gap: 7px; }
.cal-foot svg { width: 14px; height: 14px; color: var(--color-forest-500); }
.cal-foot strong { color: var(--fg-1); }

.date-flex { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.flex-toggle { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 200px; }
.toggle-card { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-lg); cursor: pointer; transition: all var(--dur-base) var(--ease-out); }
.toggle-card:hover { border-color: var(--color-forest-300); }
.toggle-card.on { border-color: var(--color-forest-500); background: var(--color-forest-50); }
.toggle-card .tc-radio { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--color-gray-300); flex-shrink: 0; display: grid; place-items: center; }
.toggle-card.on .tc-radio { border-color: var(--color-forest-500); }
.toggle-card.on .tc-radio::after { content: ''; width: 10px; height: 10px; border-radius: 999px; background: var(--color-forest-500); }
.toggle-card .tc-t { font-weight: 700; font-size: 14px; color: var(--fg-1); }
.toggle-card .tc-s { font-size: 12px; color: var(--fg-3); margin-top: 2px; }

/* ─── Add-ons ─── */
.addons { display: flex; flex-direction: column; gap: 10px; }
.addon { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-lg); cursor: pointer; transition: all var(--dur-base) var(--ease-out); }
.addon:hover { border-color: var(--color-forest-300); }
.addon.on { border-color: var(--color-forest-500); background: var(--color-forest-50); }
.addon .a-ic { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--color-forest-50); color: var(--color-forest-700); display: grid; place-items: center; flex-shrink: 0; transition: all var(--dur-base) var(--ease-out); }
.addon.on .a-ic { background: var(--color-forest-500); color: white; }
.addon .a-ic svg { width: 21px; height: 21px; stroke-width: 1.75; }
.addon .a-txt { flex: 1; min-width: 0; }
.addon .a-txt .t { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; }
.addon .a-txt .s { font-size: 12px; color: var(--fg-3); margin-top: 2px; line-height: 1.4; }
.addon .a-price { font-family: var(--font-display); font-weight: 800; font-size: 14.5px; color: var(--fg-1); white-space: nowrap; }
.addon .a-price small { font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--fg-3); display: block; text-align: right; }
.addon .a-check { width: 24px; height: 24px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-gray-300); display: grid; place-items: center; flex-shrink: 0; transition: all var(--dur-base) var(--ease-out); }
.addon.on .a-check { background: var(--color-forest-500); border-color: var(--color-forest-500); }
.addon .a-check svg { width: 14px; height: 14px; color: white; stroke-width: 3; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.addon.on .a-check svg { opacity: 1; }

/* ─── Deposit / full choice ─── */
.dep-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; }
.dep-opt { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 14px 16px; border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-lg); background: white; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); font-family: inherit; }
.dep-opt:hover { border-color: var(--color-forest-300); }
.dep-opt.on { border-color: var(--color-forest-500); background: var(--color-forest-50); }
.dep-opt .do-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dep-opt .do-name { font-weight: 700; font-size: 14px; color: var(--fg-1); }
.dep-opt .do-radio { width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--color-gray-300); display: grid; place-items: center; flex-shrink: 0; }
.dep-opt.on .do-radio { border-color: var(--color-forest-500); }
.dep-opt.on .do-radio::after { content: ''; width: 9px; height: 9px; border-radius: 999px; background: var(--color-forest-500); }
.dep-opt .do-amt { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--color-forest-700); }
.dep-opt .do-sub { font-size: 12px; color: var(--fg-3); line-height: 1.35; }
.onsite-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--color-forest-50); border: 1.5px solid var(--color-forest-200); border-radius: var(--radius-lg); margin-bottom: 22px; }
.onsite-note svg { width: 22px; height: 22px; color: var(--color-forest-600); stroke-width: 1.75; flex-shrink: 0; margin-top: 1px; }
.onsite-note .t { font-weight: 800; font-family: var(--font-display); font-size: 14.5px; color: var(--fg-1); margin-bottom: 3px; }
.onsite-note .s { font-size: 13px; color: var(--fg-2); line-height: 1.45; }
@media (max-width: 560px) { .dep-choice { grid-template-columns: 1fr; } }

/* ─── Payment ─── */
.pay-tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.pay-tab { display: inline-flex; align-items: center; gap: 9px; padding: 13px 18px; border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-lg); background: white; cursor: pointer; transition: all var(--dur-base) var(--ease-out); font-family: inherit; }
.pay-tab:hover { border-color: var(--color-forest-300); }
.pay-tab.on { border-color: var(--color-forest-500); background: var(--color-forest-50); }
.pay-tab .pt-logo { font-family: var(--font-display); font-weight: 900; font-size: 14px; letter-spacing: -0.02em; padding: 4px 8px; border-radius: var(--radius-xs); color: white; line-height: 1; }
.pay-tab .pt-logo.aba { background: #0046A7; }
.pay-tab .pt-logo.khqr { background: var(--color-ink); }
.pay-tab .pt-logo.card { background: var(--color-forest-600); display: inline-flex; gap: 3px; align-items: center; }
.pay-tab .pt-logo.card svg { width: 15px; height: 15px; }
.pay-tab .pt-name { font-weight: 700; font-size: 13.5px; color: var(--fg-1); }
.pay-tab .pt-radio { width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--color-gray-300); display: grid; place-items: center; }
.pay-tab.on .pt-radio { border-color: var(--color-forest-500); }
.pay-tab.on .pt-radio::after { content: ''; width: 9px; height: 9px; border-radius: 999px; background: var(--color-forest-500); }

.pay-panel { display: none; }
.pay-panel.on { display: block; animation: bkFade var(--dur-base) var(--ease-out); }

/* KHQR panel */
.khqr-box { display: flex; gap: 24px; align-items: center; padding: 22px; background: var(--bg-sunken); border-radius: var(--radius-xl); flex-wrap: wrap; }
.khqr-card { width: 196px; background: white; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); flex-shrink: 0; }
.khqr-card .kh-top { background: var(--color-red-600); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.khqr-card .kh-top .kh-logo { color: white; font-family: var(--font-display); font-weight: 900; font-size: 16px; letter-spacing: 0.02em; }
.khqr-card .kh-top .kh-usd { color: rgba(255,255,255,0.85); font-size: 10px; font-weight: 700; }
.khqr-card .kh-qr { padding: 16px; }
.khqr-card .kh-qr svg { width: 100%; height: auto; display: block; }
.khqr-card .kh-amt { padding: 0 16px 14px; text-align: center; }
.khqr-card .kh-amt .a { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--fg-1); }
.khqr-card .kh-amt .c { font-size: 11px; color: var(--fg-3); }
.khqr-info .ki-t { font-family: var(--font-display); font-weight: 800; font-size: 17px; margin: 0 0 8px; }
.khqr-info p { font-size: 13.5px; color: var(--fg-2); line-height: 1.55; margin: 0 0 14px; max-width: 320px; }
.khqr-info .ki-banks { display: flex; gap: 8px; flex-wrap: wrap; }
.khqr-info .ki-bank { font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: var(--radius-full); background: white; border: 1px solid var(--color-gray-200); color: var(--fg-2); }

/* ABA panel */
.aba-box { padding: 20px 22px; border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-xl); }
.aba-box .ab-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.aba-box .ab-logo { background: #0046A7; color: white; font-family: var(--font-display); font-weight: 900; font-size: 17px; padding: 8px 12px; border-radius: var(--radius-sm); }
.aba-box .ab-head .t { font-weight: 800; font-size: 15px; font-family: var(--font-display); }
.aba-box .ab-head .s { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; }

/* Card panel */
.pay-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-forest-600); font-weight: 700; margin-top: 16px; }
.pay-secure svg { width: 14px; height: 14px; }

/* ─── Step nav ─── */
.bk-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--color-gray-100); }
.bk-nav .back { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--fg-2); cursor: pointer; padding: 11px 4px; transition: color var(--dur-base) var(--ease-out); }
.bk-nav .back:hover { color: var(--fg-1); }
.bk-nav .back svg { width: 15px; height: 15px; stroke-width: 2.4; }
.bk-nav .back.hidden { visibility: hidden; }
.bk-next { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border-radius: var(--radius-md); background: var(--color-forest-500); color: white; font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: var(--shadow-brand); transition: all var(--dur-base) var(--ease-out); border: 0; }
.bk-next:hover { background: var(--color-forest-600); transform: translateY(-1px); }
.bk-next svg { width: 16px; height: 16px; stroke-width: 2.4; }

/* ─── Review (step 4) ─── */
.review-grid { display: flex; flex-direction: column; gap: 0; }
.review-row { display: flex; align-items: flex-start; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--color-gray-100); }
.review-row:last-child { border-bottom: 0; }
.review-row .rr-k { width: 130px; flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--fg-3); padding-top: 1px; }
.review-row .rr-v { flex: 1; font-size: 14px; font-weight: 600; color: var(--fg-1); line-height: 1.5; }
.review-row .rr-v .muted { color: var(--fg-3); font-weight: 400; }
.review-row .rr-edit { font-size: 12.5px; font-weight: 700; color: var(--color-forest-500); cursor: pointer; }
.terms { display: flex; align-items: flex-start; gap: 11px; margin-top: 22px; padding: 16px; background: var(--bg-sunken); border-radius: var(--radius-lg); cursor: pointer; }
.terms input { width: 18px; height: 18px; accent-color: var(--color-forest-500); margin-top: 1px; flex-shrink: 0; cursor: pointer; }
.terms .tx { font-size: 13px; color: var(--fg-2); line-height: 1.5; }
.terms .tx a { color: var(--color-forest-600); font-weight: 700; text-decoration: underline; }

/* ─── Summary sidebar ─── */
.co-summary { position: sticky; top: 88px; }
.sum-card { background: white; border: 1px solid var(--color-gray-100); border-radius: var(--radius-2xl); box-shadow: var(--shadow-1); overflow: hidden; }
.sum-pkg { display: flex; gap: 13px; padding: 16px; }
.sum-pkg .sp-img { width: 78px; height: 78px; border-radius: var(--radius-md); background-size: cover; background-position: center; flex-shrink: 0; background-color: var(--color-gray-100); }
.sum-pkg .sp-meta { min-width: 0; flex: 1; }
.sum-pkg .sp-type { font-family: var(--font-sub); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-sub); color: var(--color-forest-500); margin-bottom: 3px; }
.sum-pkg .sp-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 5px; }
.sum-pkg .sp-loc { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--fg-3); }
.sum-pkg .sp-loc svg { width: 11px; height: 11px; }

.sum-prov { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-top: 1px solid var(--color-gray-100); }
.sum-prov .pv-av { width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0; background-size: cover; background-position: center; display: grid; place-items: center; color: white; font-family: var(--font-display); font-weight: 800; font-size: 12px; position: relative; }
.sum-prov .pv-av .vchk { position: absolute; bottom: -2px; right: -2px; width: 15px; height: 15px; border-radius: 999px; background: var(--color-forest-500); border: 2px solid white; display: grid; place-items: center; }
.sum-prov .pv-av .vchk svg { width: 8px; height: 8px; color: white; stroke-width: 3.5; }
.sum-prov .pv-meta { min-width: 0; }
.sum-prov .pv-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.sum-prov .pv-rating { font-size: 11.5px; color: var(--fg-3); display: inline-flex; align-items: center; gap: 4px; margin-top: 1px; }
.sum-prov .pv-rating svg { width: 12px; height: 12px; color: var(--color-amber-500); fill: var(--color-amber-500); }

.sum-lines { padding: 16px; border-top: 1px solid var(--color-gray-100); }
.sum-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--fg-2); padding: 6px 0; }
.sum-line .sl-k { display: flex; align-items: baseline; gap: 6px; }
.sum-line .sl-k .mini { font-size: 11px; color: var(--fg-3); }
.sum-line .sl-v { font-weight: 700; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.sum-line.muted .sl-v { color: var(--color-forest-600); }
.sum-line.add { color: var(--fg-2); }
.sum-divide { height: 1px; background: var(--color-gray-100); margin: 10px 0; }
.sum-total { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; border-top: 1px solid var(--color-gray-100); background: var(--color-forest-50); }
.sum-total .st-k { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.sum-total .st-k small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--fg-3); }
.sum-total .st-v { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--color-forest-700); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.sum-trust { padding: 14px 16px; border-top: 1px solid var(--color-gray-100); display: flex; flex-direction: column; gap: 9px; }
.sum-trust .tr { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--fg-2); }
.sum-trust .tr svg { width: 15px; height: 15px; color: var(--color-forest-500); flex-shrink: 0; stroke-width: 2; }
.sum-trust .tr strong { color: var(--fg-1); }

/* empty placeholder for date in summary */
.sum-line .sl-v.empty { color: var(--fg-3); font-weight: 400; font-style: italic; }

/* ─── Help band ─── */
.help-band { display: flex; align-items: center; gap: 13px; margin-top: 18px; padding: 16px 18px; background: var(--color-cobalt-50); border-radius: var(--radius-xl); }
.help-band .hb-ic { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-cobalt-500); color: white; display: grid; place-items: center; flex-shrink: 0; }
.help-band .hb-ic svg { width: 20px; height: 20px; stroke-width: 1.9; }
.help-band .hb-t { font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.help-band .hb-s { font-size: 12.5px; color: var(--fg-2); margin-top: 2px; }
.help-band .hb-s a { color: var(--color-cobalt-600); font-weight: 700; }

/* ─── Package banner (top of forms) ─── */
.pkg-banner { display: flex; align-items: center; gap: 16px; background: white; border: 1px solid var(--color-gray-100); border-radius: var(--radius-xl); padding: 14px 18px; margin-bottom: 22px; box-shadow: var(--shadow-1); }
.pkg-banner .pb-img { width: 60px; height: 60px; border-radius: var(--radius-md); background-size: cover; background-position: center; flex-shrink: 0; background-color: var(--color-gray-100); }
.pkg-banner .pb-meta { flex: 1; min-width: 0; }
.pkg-banner .pb-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 4px; }
.pkg-banner .pb-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--fg-3); }
.pkg-banner .pb-row span { display: inline-flex; align-items: center; gap: 4px; }
.pkg-banner .pb-row svg { width: 13px; height: 13px; }
.pkg-banner .pb-row .star svg { color: var(--color-amber-500); fill: var(--color-amber-500); }
.pkg-banner .pb-change { font-size: 13px; font-weight: 700; color: var(--color-forest-500); white-space: nowrap; cursor: pointer; }
.pkg-banner .pb-change:hover { color: var(--color-forest-600); }

/* ─── Success / confirmation ─── */
.bk-success { display: none; }
.bk-success.on { display: block; animation: bkFade var(--dur-enter) var(--ease-out); }
.success-wrap { max-width: 680px; margin: 0 auto; padding: 36px 32px 80px; text-align: center; }
.success-check { width: 88px; height: 88px; border-radius: 999px; background: var(--color-forest-50); display: grid; place-items: center; margin: 0 auto 24px; position: relative; }
.success-check::before { content: ''; position: absolute; inset: -10px; border-radius: 999px; border: 2px solid var(--color-forest-100); }
.success-check svg { width: 44px; height: 44px; color: var(--color-forest-500); stroke-width: 2.6; }
.success-wrap h1 { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; margin: 0 0 10px; }
.success-wrap .su-sub { font-size: 15.5px; color: var(--fg-2); line-height: 1.55; margin: 0 0 26px; }
.ref-chip { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; background: white; border: 1px dashed var(--color-forest-300); border-radius: var(--radius-lg); margin-bottom: 28px; }
.ref-chip .rc-k { font-family: var(--font-sub); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-sub); color: var(--fg-3); }
.ref-chip .rc-v { font-family: var(--font-mono); font-weight: 500; font-size: 19px; color: var(--color-forest-700); letter-spacing: 0.04em; }
.ref-chip .rc-copy { color: var(--fg-3); cursor: pointer; display: grid; place-items: center; }
.ref-chip .rc-copy:hover { color: var(--color-forest-600); }
.ref-chip .rc-copy svg { width: 16px; height: 16px; }

.su-card { background: white; border: 1px solid var(--color-gray-100); border-radius: var(--radius-2xl); box-shadow: var(--shadow-1); padding: 24px; text-align: left; margin-bottom: 22px; }
.su-card .suc-h { font-family: var(--font-sub); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-sub); color: var(--fg-3); margin-bottom: 14px; }
.su-next { display: flex; flex-direction: column; gap: 16px; }
.su-step { display: flex; gap: 14px; text-align: left; }
.su-step .ss-n { width: 34px; height: 34px; border-radius: 999px; background: var(--color-forest-50); color: var(--color-forest-700); font-family: var(--font-display); font-weight: 800; font-size: 14px; display: grid; place-items: center; flex-shrink: 0; }
.su-step .ss-t { font-weight: 700; font-size: 14px; color: var(--fg-1); }
.su-step .ss-s { font-size: 13px; color: var(--fg-2); line-height: 1.5; margin-top: 2px; }
.su-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ─── Free cancellation (cancel-booking.js) ─── */
.su-cancel { display: inline-flex; align-items: center; gap: 7px; padding: 12px 18px; border-radius: var(--radius-md); border: 1.5px solid transparent; background: none; font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1; color: var(--color-danger); cursor: pointer; transition: background var(--dur-base) var(--ease-out); }
.su-cancel:hover { background: var(--color-danger-bg); }
.su-cancel svg { width: 16px; height: 16px; }

.bk-success.cancelled .success-check { background: var(--color-danger-bg); }
.bk-success.cancelled .success-check::before { border-color: var(--color-red-100); }
.bk-success.cancelled .success-check svg { color: var(--color-danger); }
.cx-status { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-full); background: var(--color-danger-bg); color: var(--color-danger); font-family: var(--font-sub); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-sub); }

.cx-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(15,26,23,0.5); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 24px; }
.cx-overlay.on { display: flex; animation: bkFade var(--dur-base) var(--ease-out); }
.cx-modal { width: min(460px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: white; border-radius: var(--radius-2xl); box-shadow: var(--shadow-3); padding: 26px 26px 22px; text-align: left; animation: cxRise var(--dur-base) var(--ease-out); }
@keyframes cxRise { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cx-modal h3 { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; margin: 0 0 6px; }
.cx-modal .cx-lede { font-size: 14px; color: var(--fg-2); line-height: 1.5; margin: 0 0 16px; }
.cx-ref { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px dashed var(--color-gray-200); border-radius: var(--radius-md); margin-bottom: 16px; }
.cx-ref span { font-family: var(--font-sub); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-sub); color: var(--fg-3); }
.cx-ref strong { font-family: var(--font-mono); font-weight: 500; font-size: 15px; color: var(--color-forest-700); letter-spacing: 0.04em; }
.cx-policy { display: flex; gap: 11px; padding: 14px; border-radius: var(--radius-lg); background: var(--color-forest-50); margin-bottom: 18px; }
.cx-policy svg { width: 20px; height: 20px; color: var(--color-forest-600); flex-shrink: 0; }
.cx-policy .cp-t { font-weight: 800; font-size: 13.5px; color: var(--color-forest-700); margin-bottom: 2px; }
.cx-policy .cp-s { font-size: 12.5px; color: var(--fg-2); line-height: 1.45; }
.cx-field { margin-bottom: 16px; }
.cx-field label { display: block; font-size: 12px; font-weight: 700; color: var(--fg-2); margin-bottom: 7px; }
.cx-field select { width: 100%; font-family: inherit; font-size: 14px; color: var(--fg-1); padding: 11px 12px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); background: white; cursor: pointer; }
.cx-field select:focus { outline: none; border-color: var(--color-forest-400); box-shadow: 0 0 0 3px var(--color-forest-50); }
.cx-actions { display: flex; gap: 10px; margin-top: 4px; }
.cx-actions .btn { flex: 1; justify-content: center; }
.btn.danger { background: var(--color-danger); color: white; border-color: var(--color-danger); box-shadow: none; }
.btn.danger:hover { background: var(--color-red-600); border-color: var(--color-red-600); transform: translateY(-1px); }

.cx-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px); background: var(--color-ink); color: white; padding: 12px 18px; border-radius: var(--radius-full); font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-3); opacity: 0; pointer-events: none; transition: all var(--dur-base) var(--ease-out); z-index: 130; }
.cx-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── Layout B (Focused wizard) ─── */
.cof-wrap { max-width: 720px; margin: 0 auto; padding: 28px 32px 140px; }
.cof-bar { position: fixed; left: 256px; right: 0; bottom: 0; z-index: 40; background: rgba(255,255,255,0.96); backdrop-filter: blur(12px) saturate(1.05); border-top: 1px solid var(--color-gray-100); transition: left var(--dur-base) var(--ease-out); box-shadow: 0 -4px 16px rgba(3,60,46,0.05); }
body.sb-collapsed .cof-bar { left: 76px; }
.cof-bar-inner { max-width: 720px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 18px; }
.cof-bar .cb-total { display: flex; flex-direction: column; }
.cof-bar .cb-total .k { font-size: 11px; color: var(--fg-3); }
.cof-bar .cb-total .v { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--color-forest-700); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cof-bar .cb-detail { font-size: 12px; font-weight: 700; color: var(--color-forest-500); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.cof-bar .cb-detail svg { width: 13px; height: 13px; transition: transform var(--dur-base) var(--ease-out); }
.cof-bar .cb-detail.open svg { transform: rotate(180deg); }
.cof-bar .back { margin-left: auto; }
.cof-pop { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 64px)); background: white; border: 1px solid var(--color-gray-100); border-radius: var(--radius-xl); box-shadow: var(--shadow-3); padding: 16px; z-index: 41; display: none; }
.cof-pop.on { display: block; animation: bkFade var(--dur-base) var(--ease-out); }
@media (max-width: 1100px) { .cof-bar { left: 76px; } }

@media (max-width: 980px) {
  .co-wrap { grid-template-columns: 1fr; }
  .co-summary { position: static; order: -1; }
}

/* ─── Quote-specific ─── */
.qchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.qchip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: var(--radius-full); border: 1.5px solid var(--color-gray-200); background: white; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--fg-2); cursor: pointer; transition: all var(--dur-base) var(--ease-out); }
.qchip:hover { border-color: var(--color-forest-400); color: var(--color-forest-700); background: var(--color-forest-50); }
.qchip svg { width: 13px; height: 13px; color: var(--color-forest-500); stroke-width: 2.4; }
.method-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.method-chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: var(--radius-lg); border: 1.5px solid var(--color-gray-200); background: white; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--fg-1); cursor: pointer; transition: all var(--dur-base) var(--ease-out); }
.method-chip:hover { border-color: var(--color-forest-300); }
.method-chip.on { border-color: var(--color-forest-500); background: var(--color-forest-50); color: var(--color-forest-700); }
.method-chip svg { width: 16px; height: 16px; }
.q-reply { display: flex; align-items: center; gap: 12px; padding: 15px 16px; background: var(--color-lime-50); border-radius: var(--radius-xl); margin-top: 16px; }
.q-reply .qr-ic { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--color-lime-500); color: white; display: grid; place-items: center; flex-shrink: 0; }
.q-reply .qr-ic svg { width: 19px; height: 19px; stroke-width: 2; }
.q-reply .qr-t { font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.q-reply .qr-s { font-size: 12.5px; color: var(--fg-2); margin-top: 2px; }
.sum-head { padding: 16px 16px 0; }
.sum-head .sh-eyebrow { font-family: var(--font-sub); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-sub); color: var(--color-forest-500); }
.sum-est { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; border-top: 1px solid var(--color-gray-100); }
.sum-est .se-k { font-size: 13px; color: var(--fg-2); }
.sum-est .se-k small { display: block; font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.sum-est .se-v { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--fg-1); letter-spacing: -0.02em; }
.sum-est .se-v small { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--fg-3); }

/* ─── Destinations & day allocation (quote) ─── */
.days-note { font-size: 13px; color: var(--fg-2); line-height: 1.5; margin: 0 0 14px; }
.days-note strong { color: var(--fg-1); font-weight: 800; }
.days-meter { height: 8px; background: var(--color-gray-100); border-radius: var(--radius-full); overflow: hidden; margin-bottom: 16px; }
.days-meter .dm-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--color-forest-400), var(--color-forest-600)); border-radius: var(--radius-full); transition: width var(--dur-base) var(--ease-out); }
.dest-list { display: flex; flex-direction: column; gap: 10px; }
.dest-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-lg); background: white; transition: border-color var(--dur-base) var(--ease-out); }
.dest-row:focus-within { border-color: var(--color-forest-300); }
.dest-row .dr-num { width: 26px; height: 26px; border-radius: 999px; background: var(--color-forest-50); color: var(--color-forest-700); font-family: var(--font-display); font-weight: 800; font-size: 12px; display: grid; place-items: center; flex-shrink: 0; }
.dest-row .dr-name { flex: 1; min-width: 0; border: 0; border-bottom: 1.5px solid transparent; padding: 6px 2px; font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--fg-1); background: none; }
.dest-row .dr-name::placeholder { color: var(--fg-3); font-weight: 400; }
.dest-row .dr-name:focus { outline: none; border-bottom-color: var(--color-forest-400); }
.dest-row .dr-stepper { flex-shrink: 0; }
.dest-row .dr-stepper button { width: 32px; height: 32px; }
.dest-row .dr-stepper .c-val { min-width: 26px; font-size: 16px; }
.dest-row .dr-dlabel { font-size: 12.5px; color: var(--fg-3); width: 32px; flex-shrink: 0; }
.dest-row .dr-remove { width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--fg-3); display: grid; place-items: center; flex-shrink: 0; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.dest-row .dr-remove:hover { background: var(--color-red-50); color: var(--color-red-600); }
.dest-row .dr-remove svg { width: 16px; height: 16px; }
.dest-row .dr-remove.hidden { visibility: hidden; pointer-events: none; }
.add-dest { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 11px 16px; border: 1.5px dashed var(--color-gray-300); border-radius: var(--radius-lg); background: white; color: var(--color-forest-600); font-family: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all var(--dur-base) var(--ease-out); }
.add-dest:hover:not(:disabled) { border-color: var(--color-forest-400); background: var(--color-forest-50); }
.add-dest:disabled { color: var(--fg-3); cursor: not-allowed; opacity: 0.55; }
.add-dest svg { width: 15px; height: 15px; stroke-width: 2.6; }