/* ============================================================ booking-v2.css — redesigned New Booking flow (Dives + Payment). Modern, instrument-grade chrome on the bound DiveOS tokens. Prefix: bk2-. Reuses wizard.css line-item widgets (.wz-li / .wz-sel / .wz-qty / .wz-price) inside new card/section/rail containers, plus three new primitives shared across both directions: · date-badge tile (.bk2-dbadge) · KPI summary tiles (.bk2-tiles / .bk2-tile) · balance meter (.bk2-meter) Two directions, toggled by the `direction` Tweak on : · .bk2-console — dense control panel (tiles rail, split payment) · .bk2-itin — roomier itinerary (day tickets, balance hero) No gradients, no glow; sky-50 used sparingly as the one tinted zone. ============================================================ */ /* ── Stage head with a count line ─────────────────────────── */ /* The redesigned flow drops per-step titles/descriptions — the breadcrumb header + wizard stepper already name the step. Hide reused steps' stage headers too (this stylesheet only loads on the v2 flow). */ .wz-stage-head { display: none !important; } /* ── Review ledger (reused step) — calmer, non-interactive hierarchy ── The diver name anchors each group (body ink, sentence case — not an accent "link"); shared fees use the same neutral band, not amber; the orphaned "Order" label is removed in the markup. */ .wz-ledger .wz-grouphead { background: var(--sky-50); } .wz-ledger .wz-grouphead .nm { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: 600; } .wz-ledger .wz-grouphead.warm { background: var(--sky-50); } .wz-ledger .wz-grouphead.warm .nm { color: var(--ink); } /* ── Done step — record status band uses slate, not gray-100 ── */ .dn-rec-status { background: var(--sky-50); border-top: 1px solid var(--hairline-2); } .bk2-stage { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; } .bk2-stage h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; color: var(--ink); } .bk2-stage p { margin: 7px 0 0; font-size: var(--text-sm); color: var(--muted); line-height: 1.5; max-width: 60ch; } .bk2-stage .meta { display: flex; align-items: center; gap: 18px; flex-shrink: 0; } .bk2-stage .meta .m { text-align: right; } .bk2-stage .meta .m .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .bk2-stage .meta .m .v { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin-top: 3px; } /* ── Two-column shell (content + rail) ────────────────────── */ /* Cap + centre the two-column steps (the full-bleed wizard has no outer cap). Dives sits inside .wz-inner (which already pads); Payment has no wrapper so it carries its own padding. Widths per design review. */ /* 800 caps the LEFT (diver-cards) column; the 348 order rail sits beside it. Grid content = 800 + 28 gap + 348 = 1176. (Dives is inside .wz-inner, which provides the page padding, so no padding here.) */ .bk2-2col { max-width: 1176px; margin-inline: auto; } /* Payment: 720 caps the COMPOSER (left) column; the summary rail stays beside it at 360. Grid content = 720 + 28 gap + 360 = 1108 (+ 80 side padding). */ .bk2-pay-rail { max-width: 1188px; margin-inline: auto; padding: 30px 40px 40px; } .bk2-2col { display: grid; grid-template-columns: minmax(0,1fr) 348px; gap: 28px; align-items: start; } @media (max-width: 1100px) { .bk2-2col { grid-template-columns: 1fr; } .bk2-rail { position: static !important; } } .bk2-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* The JS renders all diver cards + the shared-fees card into this wrapper, so it needs the same column rhythm — otherwise the cards inside stack flush (the .bk2-col gap only separates this wrapper from the add-diver button). */ [data-pos-dives-target="diverSections"] { display: flex; flex-direction: column; gap: 16px; } .bk2-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; } /* ════════════════════════════════════════════════════════════ DATE BADGE — the recurring instrument tile (sky-50) ════════════════════════════════════════════════════════════ */ .bk2-dbadge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 54px; border-radius: var(--radius); background: var(--sky-50); border: 1px solid var(--sky-200); color: var(--accent); line-height: 1; flex-shrink: 0; } .bk2-dbadge .m { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .bk2-dbadge .d { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; margin-top: 2px; } .bk2-dbadge .w { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; margin-top: 2px; } /* ════════════════════════════════════════════════════════════ DIVER CARD ════════════════════════════════════════════════════════════ */ .bk2-dcard { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; } .bk2-dhead { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-bottom: 1px solid var(--hairline); } .bk2-dhead .who { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; } .bk2-dhead .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; } .bk2-dhead .name-input { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--ink); background: transparent; border: 0; border-bottom: 1px dashed var(--input-border); padding: 2px 0; outline: none; min-width: 190px; } .bk2-dhead .name-input:focus { border-bottom-color: var(--accent); } .bk2-dhead .cert { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk2-dhead .tot { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; } .bk2-dhead .tot.zero { color: var(--muted-2); } .bk2-drm { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted-2); border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0; opacity: 0.6; transition: opacity .12s, background .12s, color .12s; } .bk2-dcard:hover .bk2-drm { opacity: 1; } .bk2-drm:hover { background: var(--cancelled-bg); color: var(--cancelled); } .bk2-dconfirm { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; background: var(--cancelled-bg); border: 1px solid var(--cancelled-border); border-radius: var(--radius-pill); } .bk2-dconfirm .q { font-size: var(--text-xs); font-weight: 500; color: var(--cancelled); white-space: nowrap; } .bk2-dconfirm .yes { height: 26px; padding: 0 11px; font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--surface); background: var(--cancelled); border: 0; border-radius: var(--radius-pill); cursor: pointer; } .bk2-dconfirm .no { height: 26px; padding: 0 9px; font: inherit; font-size: var(--text-xs); font-weight: 500; color: var(--muted); background: transparent; border: 0; cursor: pointer; } /* ── Day section inside a diver card ──────────────────────── */ .bk2-day { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 16px; padding: 16px 18px; border-top: 1px solid var(--hairline-2); } .bk2-day:first-child { border-top: 0; } .bk2-day-spine { display: flex; flex-direction: column; align-items: center; gap: 8px; } .bk2-day-spine .line { flex: 1; width: 1px; background: var(--hairline); min-height: 8px; } .bk2-day-main { min-width: 0; } .bk2-day-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .bk2-day-top .dl { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: -0.01em; color: var(--ink); } .bk2-day-top .dl .full { color: var(--muted); font-weight: 400; font-family: var(--font-sans); font-size: var(--text-xs); margin-left: 7px; } .bk2-day-x { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted-2); border-radius: var(--radius-sm); cursor: pointer; opacity: 0.5; transition: opacity .12s, color .12s, background .12s; } .bk2-day:hover .bk2-day-x { opacity: 1; } .bk2-day-x:hover { background: var(--gray-100); color: var(--ink); } /* line items — reuse .wz-li grid but lighter padding here */ .bk2-items .wz-li { padding-left: 0; padding-right: 0; } .bk2-items .wz-li-head { padding-left: 0; padding-right: 0; } /* add chips under a day */ .bk2-addrow { display: flex; gap: 8px; margin-top: 8px; } .bk2-addchip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font: inherit; font-size: var(--text-xs); font-weight: 500; color: var(--accent); background: transparent; border: 1px dashed var(--accent-border); border-radius: var(--radius-pill); cursor: pointer; } .bk2-addchip:hover { background: var(--accent-softer); } .bk2-addchip.add { color: var(--confirmed); border-color: var(--confirmed-border); } .bk2-addchip.add:hover { background: var(--confirmed-bg); } /* add-date footer of a card — opens the browser-native date picker */ .bk2-adddate { padding: 12px 18px; border-top: 1px solid var(--hairline-2); } .bk2-adddate-wrap { position: relative; } .bk2-adddate-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 44px; font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--accent); background: transparent; border: 1.5px dashed var(--accent-border); border-radius: var(--radius); cursor: pointer; transition: background .12s, border-color .12s; } .bk2-adddate-btn:hover { background: var(--accent-softer); border-color: var(--accent); } .bk2-date-native { position: absolute; left: 16px; bottom: 4px; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; margin: 0; pointer-events: none; } /* shared fees + add-diver */ .bk2-fees-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--hairline); } .bk2-fees-head .t { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); } .bk2-fees-head .c { font-size: var(--text-xs); color: var(--muted); } .bk2-fees-head .a { font-size: var(--text-sm); font-weight: 500; color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; font-family: inherit; padding: 0; } .bk2-fees-head .a:hover { color: var(--accent-strong); } .bk2-fee { display: grid; grid-template-columns: 22px minmax(0,1fr) 104px 92px 88px 36px; align-items: center; gap: 12px; padding: 9px 18px; border-top: 1px solid var(--hairline-2); } .bk2-fee:first-of-type { border-top: 0; } .bk2-fee .kind { display: inline-flex; justify-content: center; color: var(--muted); } .bk2-fee .amt { text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); } .bk2-fee-empty { padding: 14px 18px; font-size: var(--text-sm); color: var(--muted-2); font-style: italic; } .bk2-adddiver { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; width: 100%; font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--accent); background: transparent; border: 1.5px dashed var(--accent-border); border-radius: var(--radius-lg); cursor: pointer; } .bk2-adddiver:hover { background: var(--accent-softer); } /* ════════════════════════════════════════════════════════════ ITINERARY direction — day ticket band per date ════════════════════════════════════════════════════════════ */ .bk2-itin .bk2-day { display: block; padding: 0; } .bk2-itin .bk2-day-spine { display: none; } .bk2-itin .bk2-ticketband { display: flex; align-items: center; gap: 11px; padding: 13px 18px; background: var(--bk2-band, var(--sky-50)); border-top: 1px solid var(--bk2-band-bd, var(--sky-200)); border-bottom: 1px solid var(--bk2-band-bd, var(--sky-200)); } .bk2-itin .bk2-day:first-child .bk2-ticketband { border-top: 0; } .bk2-itin .bk2-ticketband .cal { display: inline-flex; color: var(--accent); flex-shrink: 0; } .bk2-itin .bk2-ticketband .dtxt { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: -0.005em; color: var(--ink); white-space: nowrap; } .bk2-itin .bk2-ticketband .dow { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; } .bk2-itin .bk2-ticketband .dow::before { content: '·'; margin-right: 7px; color: var(--muted-2); } .bk2-itin .bk2-ticketband .cnt { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); white-space: nowrap; background: var(--surface); border: 1px solid var(--accent-border); border-radius: var(--radius-pill); padding: 3px 10px; } .bk2-itin .bk2-ticketband .wz-li-acts { display: inline-flex; align-items: center; gap: 2px; } .bk2-itin .bk2-ticket-body { padding: 8px 18px 14px; } /* ════════════════════════════════════════════════════════════ RAIL · KPI summary tiles (console direction) ════════════════════════════════════════════════════════════ */ .bk2-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; } .bk2-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--hairline); } .bk2-card-head .t { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .bk2-card-head .ico { color: var(--muted-2); display: inline-flex; } .bk2-tiles { display: grid; grid-template-columns: 1fr 1fr; } .bk2-tile { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-top: 1px solid var(--hairline-2); border-left: 1px solid var(--hairline-2); } .bk2-tile:nth-child(-n+2) { border-top: 0; } .bk2-tile:nth-child(odd) { border-left: 0; } .bk2-tile .ico { width: 38px; height: 38px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; } .bk2-tile .k { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .bk2-tile .v { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.01em; color: var(--ink); margin-top: 2px; line-height: 1; } .bk2-tile .v.sm { font-size: var(--text-sm); } /* rail itemized breakdown */ .bk2-break { max-height: 38vh; overflow-y: auto; padding: 4px 16px; } .bk2-break-grp { padding: 11px 0; border-top: 1px solid var(--hairline-2); } .bk2-break-grp:first-child { border-top: 0; } .bk2-break-grp .gh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; } .bk2-break-grp .gh .nm { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); } .bk2-break-grp .gh .nm.unset { color: var(--muted-2); } .bk2-break-grp .gh .nm.warm { color: var(--gray-700); } .bk2-break-grp .gh .tt { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); } .bk2-break-li { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-xs); padding: 2px 0; } .bk2-break-li .nm { color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bk2-break-li .dt { color: var(--muted-2); font-family: var(--font-mono); } .bk2-break-li .amt { font-family: var(--font-mono); color: var(--muted); flex-shrink: 0; } .bk2-break-li.empty { font-style: italic; color: var(--muted-2); } .bk2-total { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--hairline); background: var(--wz-tint); } .bk2-total .k { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .bk2-total .v { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.02em; color: var(--accent); } /* roll-up (itinerary rail) */ .bk2-roll { padding: 4px 16px; } .bk2-rollrow { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--hairline-2); } .bk2-rollrow:first-child { border-top: 0; } .bk2-rollrow .who { flex: 1; min-width: 0; } .bk2-rollrow .who .nm { font-size: var(--text-sm); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk2-rollrow .who .sub { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; } .bk2-rollrow .so-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--gray-100); color: var(--gray-500); flex-shrink: 0; } .bk2-rollrow .amt { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--ink); } /* special requests */ .bk2-notes { padding: 16px 18px; } .bk2-notes label { display: block; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .bk2-notes textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; resize: vertical; font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5; color: var(--ink); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); outline: none; } .bk2-notes textarea:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* ════════════════════════════════════════════════════════════ BALANCE METER — shared payment primitive ════════════════════════════════════════════════════════════ */ .bk2-meter { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04); padding: 20px 22px; } .bk2-meter .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .bk2-meter .amt { font-family: var(--font-display); font-weight: 600; font-size: 44px; letter-spacing: -0.03em; color: var(--ink); margin: 12px 0 2px; line-height: 1; } .bk2-meter .amt .cents { color: var(--muted-2); font-size: var(--text-3xl); } .bk2-meter .amt.ok { color: var(--confirmed); } .bk2-meter .sub { font-size: var(--text-xs); color: var(--muted); } .bk2-meter .bar { height: 8px; border-radius: 99px; background: var(--gray-200); overflow: hidden; margin: 18px 0 11px; } .bk2-meter .bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); } .bk2-meter .bar.full > span { background: var(--confirmed); } .bk2-meter .foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--text-sm); } .bk2-meter .foot .paid { font-family: var(--font-mono); font-weight: 600; color: var(--accent); } .bk2-meter .foot .paid.ok { color: var(--confirmed); } .bk2-meter .foot .total { color: var(--muted); } .bk2-meter .foot .total .mono { font-family: var(--font-mono); } .bk2-meter .state { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--hairline-2); font-size: var(--text-sm); color: var(--gray-700); } .bk2-meter .state .tick { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; } .bk2-meter .state.ok .tick { background: var(--confirmed-bg); color: var(--confirmed); } .bk2-meter .state.no .tick { background: var(--briefing-bg); color: var(--briefing); } .bk2-meter .defer { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; font-size: var(--text-xs); color: var(--muted); } .bk2-meter .defer .mono { font-family: var(--font-mono); } /* ════════════════════════════════════════════════════════════ PAYMENT layouts ════════════════════════════════════════════════════════════ */ .bk2-pay-split { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 26px; align-items: start; } @media (max-width: 1040px) { .bk2-pay-split { grid-template-columns: 1fr; } } .bk2-pay-split .bk2-meter { position: sticky; top: 24px; } /* itinerary payment — full-width meter hero on a tinted band */ .bk2-pay-hero { background: var(--sky-50); border: 1px solid var(--sky-200); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 20px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center; } @media (max-width: 760px) { .bk2-pay-hero { grid-template-columns: 1fr; } } .bk2-pay-hero .lead .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky-800); } .bk2-pay-hero .lead .amt { font-family: var(--font-display); font-weight: 600; font-size: 50px; letter-spacing: -0.03em; color: var(--ink); margin: 10px 0 4px; line-height: 1; } .bk2-pay-hero .lead .amt .cents { color: var(--sky-700); opacity: 0.6; font-size: var(--text-3xl); } .bk2-pay-hero .lead .amt.ok { color: var(--confirmed); } .bk2-pay-hero .lead .sub { font-size: var(--text-sm); color: var(--sky-800); } .bk2-pay-hero .gauge { width: 232px; } .bk2-pay-hero .gauge .bar { height: 8px; border-radius: 99px; background: rgba(3,105,161,0.14); overflow: hidden; } .bk2-pay-hero .gauge .bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); } .bk2-pay-hero .gauge .bar.full > span { background: var(--confirmed); } .bk2-pay-hero .gauge .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: var(--text-xs); } .bk2-pay-hero .gauge .row .paid { font-family: var(--font-mono); font-weight: 600; color: var(--accent); } .bk2-pay-hero .gauge .row .paid.ok { color: var(--confirmed); } .bk2-pay-hero .gauge .row .total { color: var(--sky-800); } .bk2-pay-hero .gauge .state { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--text-xs); font-weight: 500; } .bk2-pay-hero .gauge .state.ok { color: var(--confirmed); } .bk2-pay-hero .gauge .state.no { color: var(--briefing); } /* method chips */ .bk2-methods { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .bk2-pm { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--gray-700); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-pill); cursor: pointer; transition: all .12s ease; } .bk2-pm:hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-softer); } .bk2-pm .ico { color: var(--muted-2); display: inline-flex; } .bk2-pm:hover .ico { color: var(--accent); } /* payment rows ledger */ .bk2-prows { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; } .bk2-prow { display: grid; grid-template-columns: 168px minmax(0,1fr) minmax(0,1fr) 32px; gap: 16px; align-items: start; padding: 16px 18px; border-top: 1px solid var(--hairline-2); } .bk2-prow:first-child { border-top: 0; } .bk2-prow > div { min-width: 0; } .bk2-prow .fl { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; min-height: 14px; } .bk2-prow .fl .req { color: var(--error); margin-left: 3px; } .bk2-prow .rm { align-self: start; margin-top: 19px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted-2); border-radius: var(--radius-sm); cursor: pointer; } .bk2-prow .rm:hover { background: var(--cancelled-bg); color: var(--cancelled); } .bk2-mi { width: 100%; box-sizing: border-box; height: 36px; padding: 0 11px; font: inherit; font-size: var(--text-sm); color: var(--ink); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); outline: none; } .bk2-mi.mono { font-family: var(--font-mono); } .bk2-mi:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .bk2-psub { font-size: var(--text-xs); color: var(--muted); margin-top: 6px; } .bk2-psub.ok { color: var(--confirmed); } .bk2-pro { height: 36px; display: flex; align-items: center; font-size: var(--text-sm); color: var(--muted-2); } .bk2-pcheck { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--text-xs); color: var(--muted); margin-top: 6px; } .bk2-pcheck input { width: 14px; height: 14px; accent-color: var(--accent); } .bk2-pempty { padding: 22px 18px; text-align: center; font-size: var(--text-sm); color: var(--muted-2); } /* attribution */ .bk2-attr { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; margin-top: 16px; } .bk2-attr-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; } /* DiveOS painted checkbox (.diveos-check) is centred to the single-line label here. */ .bk2-attr-top.diveos-check { align-items: center; } .bk2-attr-top .diveos-check__box { margin-top: 0; } .bk2-attr-top .t { font-size: var(--text-sm); font-weight: 500; color: var(--ink); } .bk2-attr-body { padding: 4px 18px 18px; border-top: 1px solid var(--hairline-2); display: flex; flex-direction: column; gap: 14px; } .bk2-attr-fl { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin: 12px 0 8px; } .bk2-chips { display: flex; flex-wrap: wrap; gap: 8px; } .bk2-chip { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 7px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; } .bk2-chip:hover { border-color: var(--accent-border); background: var(--accent-softer); } .bk2-chip.on { border-color: var(--accent); background: var(--accent-softer); } .bk2-chip .who { display: flex; flex-direction: column; line-height: 1.25; text-align: left; } .bk2-chip .who .nm { font-size: var(--text-sm); font-weight: 500; color: var(--ink); } .bk2-chip .who .role { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); } .bk2-chip.on .who .role { color: var(--accent); } .bk2-chip .tick { display: inline-flex; color: var(--accent); } .bk2-commrow { display: flex; align-items: center; gap: 12px; } .bk2-commrow .wz-price { height: 36px; } .bk2-commrow .note { font-size: var(--text-xs); color: var(--muted); } .bk2-commrow .note button { background: none; border: 0; color: var(--accent); font: inherit; font-size: var(--text-xs); cursor: pointer; padding: 0; margin-left: 6px; } /* ════════════════════════════════════════════════════════════ SUMMARY CARD — package-builder style (header band · icon rows · tinted total footer). Reused as the Payment right rail. ════════════════════════════════════════════════════════════ */ .bk2-pay-rail { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 28px; align-items: start; } @media (max-width: 1080px) { .bk2-pay-rail { grid-template-columns: 1fr; } .bk2-pay-rail .ds-sum { position: static !important; } } .bk2-pay-rail .ds-sum { position: sticky; top: 24px; } .bk2-sumcard { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-xl); box-shadow: 0 1px 2px rgba(17,24,39,.04); overflow: hidden; } .bk2-sumcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; background: var(--surface-alt); border-bottom: 1px solid var(--hairline); } .bk2-sumcard-head .t { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--slate-500); } .bk2-sumcard-head .st { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; } .bk2-sumcard-head .st.ok { color: var(--confirmed); } .bk2-sumrow { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--hairline-2); } .bk2-sumrow:first-of-type { border-top: 0; } .bk2-sumrow .ico { color: var(--muted-2); display: inline-flex; flex-shrink: 0; } .bk2-sumrow .main { flex: 1; min-width: 0; } .bk2-sumrow .main .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.01em; color: var(--ink); line-height: 1.15; } .bk2-sumrow .main .sub { font-size: var(--text-sm); color: var(--muted); margin-top: 2px; } .bk2-sumrow .val { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; } /* progress strip above the footer */ .bk2-sumprog { padding: 15px 22px; border-top: 1px solid var(--hairline-2); } .bk2-sumprog .bar { height: 7px; border-radius: 99px; background: var(--gray-200); overflow: hidden; } .bk2-sumprog .bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); } .bk2-sumprog .bar.full > span { background: var(--confirmed); } .bk2-sumprog .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 9px; font-size: var(--text-xs); } .bk2-sumprog .row .paid { font-family: var(--font-mono); font-weight: 600; color: var(--accent); } .bk2-sumprog .row .paid.ok { color: var(--confirmed); } .bk2-sumprog .row .total { color: var(--muted); } .bk2-sumprog .row .total .mono { font-family: var(--font-mono); } .bk2-sumcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; background: var(--slate-100); border-top: 1px solid var(--hairline); } .bk2-sumcard-foot .k { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate-500); } .bk2-sumcard-foot .v { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); letter-spacing: -0.025em; color: var(--accent); line-height: 1; } .bk2-sumcard-foot .v.ok { color: var(--confirmed); } .bk2-sumcard-foot .v .cents { font-size: var(--text-lg); color: var(--muted-2); } .bk2-sumcard-state { display: flex; align-items: center; gap: 8px; padding: 13px 22px; border-top: 1px solid var(--hairline-2); font-size: var(--text-xs); color: var(--gray-700); } .bk2-sumcard-state.ok { color: var(--confirmed); } .bk2-sumcard-state.no { color: var(--briefing); } .bk2-sumcard-state .ico { display: inline-flex; } .bk2-sumcard-defer { display: flex; align-items: baseline; justify-content: space-between; padding: 0 22px 14px; margin-top: -4px; font-size: var(--text-xs); color: var(--muted); } .bk2-sumcard-defer .mono { font-family: var(--font-mono); } /* Stepper band — centered, narrower block (per direct edits) */ .wz-bars-inner { max-width: 720px; } /* compact density trims */ .wz-compact .bk2-day { padding-top: 11px; padding-bottom: 11px; } .wz-compact .bk2-tile { padding-top: 11px; padding-bottom: 11px; } .wz-compact .bk2-prow { padding-top: 11px; padding-bottom: 11px; }