/* Booking Central — customer portal widget.
 * Full-cell diagonal shift tiles (see Doc/booking_central/requirements/calendar-shift-ui-requirements.md).
 * Tiles stay near-black / red in every theme, per the approved mockups; the page chrome
 * follows the portal theme tokens. */

.bc { --bc-avail: #171a20; --bc-avail-ink: #f4f6fa; --bc-sold: #d7263d; --bc-sold-ink: #fff;
      --bc-sel: #0f6e4a; --bc-sel-ring: #3ee39a; --bc-ret-a: #7b828f; --bc-ret-b: #555c68;
      --bc-ret-ink: #f4f6fa; --bc-na: #3a3f49; --bc-na-ink: rgba(244,246,250,.45);
      --bc-pit: #2f80ed; --bc-prime: #ffd27a; --bc-dot: rgba(244,246,250,.28); --bc-gap: 6px;
      /* Shift start codes (6a 10a 3p) sit on the near-black tile in every theme, so they
         get a deliberately muted ink instead of the full-contrast label colour. */
      --bc-seg-ink: rgba(244,246,250,.55); }
body.theme-light .bc { --bc-na: #c7ccd4; --bc-na-ink: rgba(11,18,32,.45);
      --bc-prime: #d99a1f; --bc-dot: rgba(236,240,248,.32); }

.bc-page-head { margin-bottom: 10px; }

.bc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--cp-gap); align-items: start; }
.bc-main { min-width: 0; display: flex; flex-direction: column; gap: var(--cp-gap); }
.bc-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: var(--cp-gap); }
.bc [hidden] { display: none !important; }
.bc-layout:has(> .bc-side[hidden]) { grid-template-columns: minmax(0, 1fr); }

/* ---- Step rail ---- */
.bc-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 4px; padding: 0; flex-wrap: wrap; }
.bc-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--cp-border); color: var(--cp-ink-faint); font-size: .8rem; font-weight: 600; }
.bc-steps li span { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; background: var(--cp-panel-2); font-size: .72rem; }
.bc-steps li.is-current { color: var(--cp-ink); border-color: var(--cp-red-soft); }
.bc-steps li.is-current span { background: var(--cp-red); color: #fff; }
.bc-steps li.is-done span { background: var(--cp-badge-green-bg); color: var(--cp-badge-green-ink); }

/* ---- Toolbar ---- */
.bc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.bc-tabsrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
/* "Start here" pointer beside the booking-type tabs - the guest calendar (/book-car-lift/) and the
 * portal widget (/portal/me/book/) alike. It nudges toward the tabs with a pulsing ring until the
 * customer interacts; bc-portal.js removes it (and leaves it out when a selection is restored). */
.bc-pointer { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; color: var(--cp-red);
    background: var(--cp-panel-2); border: 1px solid var(--cp-border); }
.bc-pointer svg { animation: bc-pointer-nudge 1.4s ease-in-out infinite; }
.bc-pointer::after { content: ""; position: absolute; inset: -1px; border-radius: 50%;
    border: 2px solid var(--cp-red); opacity: 0; animation: bc-pointer-ring 1.4s ease-out infinite; }
@keyframes bc-pointer-nudge { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(4px); } }
@keyframes bc-pointer-ring { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .bc-pointer svg, .bc-pointer::after { animation: none; }
}
.bc-guest-lead { margin: 4px 0 0; color: var(--cp-ink-soft); font-size: .92rem; }
.bc-guestnote { margin: 10px 0 0; color: var(--cp-ink-faint); font-size: .76rem; line-height: 1.45; }
.bc-monthbar { display: flex; align-items: center; justify-content: center; margin: 0 0 8px; }
.bc-tabs { display: inline-flex; border: 1px solid var(--cp-border); border-radius: 12px; overflow: hidden; flex-wrap: wrap; }
.bc-tab { background: transparent; border: 0; color: var(--cp-ink-soft); padding: 8px 14px; font: inherit;
    font-size: .86rem; font-weight: 600; cursor: pointer; }
.bc-tab__short { display: none; }
.bc-tab:hover { color: var(--cp-ink); }
.bc-tab.is-active { background: var(--cp-red); color: #fff; }
.bc-tab:focus-visible, .bc-tile:focus-visible, .bc-opt:focus-visible { outline: 3px solid var(--cp-blue); outline-offset: 2px; }
.bc-monthnav { display: inline-flex; align-items: center; gap: 8px; }
.bc-monthnav strong { font-family: var(--cp-display); min-width: 150px; text-align: center; }
.bc-navbtn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--cp-border); background: transparent;
    color: var(--cp-ink); cursor: pointer; font-size: 1.1rem; }
.bc-navbtn:disabled { opacity: .35; cursor: default; }
/* 20px breathing room between the offer description and the picker hint. */
.bc-offer-desc { margin: 0 0 20px; color: var(--cp-ink-soft); font-size: .88rem; }

/* ---- Calendar grid ---- */
.bc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--bc-gap); }
.bc-dow { text-align: center; font-size: .7rem; letter-spacing: .08em; color: var(--cp-ink-faint); font-weight: 700; padding-bottom: 2px; }
.bc-blank { min-height: 76px; border-radius: 10px; background: var(--cp-panel-2); opacity: .35; }
.bc-tile { position: relative; min-height: 76px; aspect-ratio: 1.25 / 1; border-radius: 10px; overflow: hidden;
    cursor: pointer; border: 0; padding: 0; background: var(--bc-avail); color: var(--bc-avail-ink);
    box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; font: inherit; text-align: left; }
body.theme-light .bc-tile { box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset; }
.bc-tile.is-off { cursor: default; background: var(--cp-panel-2); color: var(--cp-ink-faint); box-shadow: none; }
.bc-tile.is-focus { box-shadow: 0 0 0 2px var(--cp-blue); }
.bc-tile.in-range { box-shadow: 0 0 0 3px var(--bc-sel-ring); }
.bc-seg { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 18%; font-weight: 800; font-size: .74rem; letter-spacing: .02em;
    transition: filter .12s ease; }
.bc-seg.is-available { background: var(--bc-avail); color: var(--bc-avail-ink); }
.bc-seg.is-sold { background: var(--bc-sold); color: var(--bc-sold-ink); }
.bc-seg.is-na { background: var(--bc-na); color: var(--bc-na-ink); }
.bc-seglabel { position: absolute; bottom: 14%; transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.bc-seg.is-available .bc-seglabel, .bc-seg.is-retained .bc-seglabel { color: var(--bc-seg-ink); }
.bc-seg.is-selected { background: var(--bc-sel); color: #fff; }
.bc-seg.is-selected .bc-seglabel, .bc-seg.is-mine .bc-seglabel { color: #fff; }
.bc-seg.is-retained { background: repeating-linear-gradient(135deg, var(--bc-ret-a) 0 7px, var(--bc-ret-b) 7px 14px);
    color: var(--bc-ret-ink); }
.bc-seg.is-mine { background: #1d4f91; color: #fff; }
.bc-tile:not(.is-off):hover .bc-seg.is-available { filter: brightness(1.35); }
.bc-tile .bc-date { position: absolute; top: 6px; left: 8px; z-index: 3; font-family: var(--cp-display);
    font-weight: 800; font-size: 1.02rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); pointer-events: none; }
.bc-tile.is-off .bc-date { color: var(--cp-ink-faint); text-shadow: none; }
.bc-tile .bc-offlabel { position: absolute; inset: auto 0 10px 0; text-align: center; font-size: .66rem;
    text-transform: uppercase; letter-spacing: .06em; }
.bc-tags { position: absolute; z-index: 3; right: 5px; top: 5px; display: flex; flex-direction: column;
    align-items: flex-end; gap: 3px; pointer-events: none; }
.bc-pitbadge { position: absolute; z-index: 3; left: 6px; top: 27px; background: var(--bc-pit); color: #fff;
    font-size: .56rem; font-weight: 800; padding: 1px 5px; border-radius: 5px; letter-spacing: .02em; pointer-events: none; }
.bc-pitbadge.is-full { background: #6b7280; }
.bc-prime { background: rgba(0,0,0,.42); color: var(--bc-prime); font-size: .56rem; font-weight: 800;
    letter-spacing: .05em; padding: 2px 5px; border-radius: 6px; }
/* Phones show one dot per shift (a check once selected) instead of the codes. */
.bc-segnum { display: inline; }
.bc-segdot, .bc-segcheck { display: none; }
.bc-cal.is-pitstop .bc-tile:not(.has-pit) { opacity: .4; cursor: default; }
.bc-cal.is-pitstop .bc-tile.has-pit .bc-seg { filter: saturate(.25) brightness(.8); }

/* ---- Legend (folded by default; the summary is always tappable) ---- */
.bc-legendwrap { margin-top: 12px; border-top: 1px solid var(--cp-border); padding-top: 8px; }
.bc-legendwrap > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: .78rem; font-weight: 600; color: var(--cp-ink-soft); list-style: none; }
.bc-legendwrap > summary::-webkit-details-marker { display: none; }
.bc-legendwrap > summary::after { content: "\25BE"; font-size: .7rem; transition: transform .15s ease; }
.bc-legendwrap[open] > summary::after { transform: rotate(180deg); }
.bc-legendwrap > summary:hover { color: var(--cp-ink); }
.bc-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: .78rem; color: var(--cp-ink-soft); }
.bc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bc-legend i { width: 18px; height: 12px; border-radius: 3px; display: inline-block; }
.bc-legend .k-av { background: var(--bc-avail); box-shadow: 0 0 0 1px rgba(127,127,127,.4) inset; }
.bc-legend .k-sold { background: var(--bc-sold); }
.bc-legend .k-sel { background: var(--bc-sel); box-shadow: 0 0 0 1px var(--bc-sel-ring) inset; }
.bc-legend .k-ret { background: repeating-linear-gradient(135deg, var(--bc-ret-a) 0 4px, var(--bc-ret-b) 4px 8px); }
.bc-legend .k-na { background: var(--bc-na); }
.bc-legend .k-mine { background: #1d4f91; }
.bc-legend .k-pit { background: var(--bc-pit); }
.bc-legend .k-prime { width: 10px; height: 10px; border-radius: 50%; background: var(--bc-prime); }
.bc-legend__note { flex: 1 0 100%; color: var(--cp-ink-faint); font-size: .72rem; line-height: 1.4; }

/* Sticky total + Continue above the phone tab bar. */
.bc-mbar { display: none; }
.bc-mbar[hidden] { display: none !important; }

/* ---- Day panel / shift picker (sits between the type tabs and the month) ---- */
.bc-daypanel { margin: 0 0 12px; }
.bc-daypanel:empty { display: none; }
.bc-daypanel h3 { margin: 0 0 8px; font-family: var(--cp-display); font-size: .98rem; }
.bc-daypanel .bc-hint { margin: 0 0 10px; font-size: .82rem; color: var(--cp-ink-faint); }
.bc-daypanel .bc-hint--warn { color: var(--cp-badge-amber-ink); font-weight: 600; }
.bc-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.bc-opt { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
    padding: 9px 10px 10px; border-radius: 14px; border: 1px solid var(--cp-border-strong);
    background: var(--cp-panel-2); color: var(--cp-ink); cursor: pointer; font: inherit; }
.bc-opt__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px;
    padding: 0 8px; border-radius: 999px; background: var(--bc-sel); color: #fff; font-size: .72rem;
    font-weight: 800; letter-spacing: .02em; }
.bc-opt strong { font-size: .88rem; }
.bc-opt small { color: var(--cp-ink-faint); font-size: .74rem; }
.bc-opt:hover:not(:disabled) { border-color: var(--cp-red-soft); }
.bc-opt.is-on { border-color: var(--bc-sel-ring); background: rgba(15,110,74,.22); }
.bc-opt.is-on .bc-opt__badge { background: var(--bc-sel-ring); color: #06281b; }
.bc-opt:disabled { opacity: .45; cursor: not-allowed; }
.bc-dayrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--cp-border); }
.bc-dayrow:last-child { border-bottom: 0; }
.bc-dayrow > span { min-width: 92px; font-weight: 600; font-size: .86rem; }
.bc-chipbtn { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--cp-border-strong); background: transparent;
    color: var(--cp-ink-soft); font: inherit; font-size: .78rem; cursor: pointer; }
.bc-chipbtn.is-on { background: var(--bc-sel); border-color: var(--bc-sel-ring); color: #fff; }
.bc-chipbtn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- Summary (sticky) ---- */
.bc-summary h2 { margin: 0 0 10px; font-family: var(--cp-display); font-size: 1.05rem; }
.bc-sumlines { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bc-sumlines li { font-size: .86rem; }
.bc-sumlines li b { display: block; }
.bc-sumlines li em { font-style: normal; color: var(--cp-ink-faint); font-size: .78rem; }
.bc-empty { color: var(--cp-ink-faint); font-size: .86rem; margin: 0 0 10px; }
.bc-price { border-top: 1px solid var(--cp-border); padding-top: 10px; margin-top: 4px; }
.bc-price table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.bc-price td { padding: 3px 0; vertical-align: top; }
.bc-price td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bc-price td small { display: block; color: var(--cp-ink-faint); font-size: .72rem; }
.bc-price .bc-total td { font-weight: 800; font-size: .98rem; border-top: 1px solid var(--cp-border); padding-top: 8px; }
.bc-price .bc-due td { color: var(--cp-ink-soft); }
.bc-price .bc-credit td { color: var(--cp-badge-green-ink); }
.bc-price .bc-credit td small { color: var(--cp-badge-green-ink); opacity: .8; }
.bc-loading { color: var(--cp-ink-faint); font-size: .84rem; display: flex; align-items: center; gap: 8px; }
.bc-loading::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--cp-border-strong);
    border-top-color: var(--cp-red-soft); animation: bc-spin .8s linear infinite; }
@keyframes bc-spin { to { transform: rotate(360deg); } }
.bc-alert { padding: 10px 12px; border-radius: 10px; font-size: .84rem; line-height: 1.45; margin: 8px 0;
    background: var(--cp-badge-red-bg); color: var(--cp-badge-red-ink); border: 1px solid var(--cp-badge-ring); }
.bc-alert.is-info { background: var(--cp-panel-2); color: var(--cp-ink-soft); border-color: var(--cp-border); }
.bc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.bc-actions .cp-btn { flex: 1 1 auto; justify-content: center; }
/* Restart-the-booking action: outlined pill with a refresh icon so it reads as an
 * action, but still quieter than the primary Continue button above it. */
.bc-startover { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; margin-top: 10px; padding: 8px 12px; background: var(--cp-panel-2);
    border: 1px solid var(--cp-border); border-radius: 10px; color: var(--cp-ink-soft);
    font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.bc-startover__ic { flex: none; opacity: .85; }
.bc-startover:hover { color: var(--cp-ink); border-color: var(--cp-border-strong); }
.bc-startover:hover .bc-startover__ic { opacity: 1; }
.bc-startover:focus-visible { outline: 3px solid var(--cp-blue); outline-offset: 2px; }
.bc-startover[hidden] { display: none; }
.bc-note { font-size: .76rem; color: var(--cp-ink-faint); margin: 8px 0 0; }
.bc-plan { display: inline-block; margin-bottom: 6px; }

/* ---- Details / review forms ---- */
.bc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.bc-form .bc-full { grid-column: 1 / -1; }
/* Fields under the two-column grid (check-in, prepaid hours, pay with, terms,
 * buttons) live in one stack so they keep the same vertical rhythm. */
.bc-formstack { display: grid; gap: 18px; margin-top: 24px; }
.bc-formstack > :empty { display: none; }        /* empty error slot must not add a gap */
.bc-formstack .bc-actions { margin-top: 0; }
.bc-formstack .bc-note { margin: 0; }
.bc-field label { display: block; font-size: .78rem; font-weight: 600; color: var(--cp-ink-soft); margin-bottom: 4px; }
.bc-field .cp-input, .bc-field .cp-select, .bc-field .cp-textarea { width: 100%; }
.bc-field small { display: block; margin-top: 6px; color: var(--cp-ink-faint); font-size: .74rem; }
.bc-field.has-error .cp-input, .bc-field.has-error .cp-select, .bc-field.has-error .cp-textarea { border-color: var(--cp-badge-red-ink); }
.bc-field .bc-err { color: var(--cp-badge-red-ink); font-size: .76rem; margin-top: 4px; display: none; }
.bc-field.has-error .bc-err { display: block; }
.bc-radio { display: inline-flex; gap: 18px; flex-wrap: wrap; }
.bc-radio label { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; color: var(--cp-ink); font-size: .86rem; }
.bc-extras { display: flex; flex-direction: column; gap: 12px; }
/* .bc-field label (above) would force the extra rows to block and drop the price
 * under the text; the scoped flex rule keeps the price in a right-hand column. */
.bc-field .bc-extra, .bc-extras .bc-extra { display: flex; }
.bc-extra { gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--cp-border);
    border-radius: 12px; background: var(--cp-panel-2); }
.bc-extra input { margin-top: 3px; }
.bc-extra > span:not(.bc-xprice) { flex: 1 1 auto; min-width: 0; }
.bc-extra b { display: block; font-size: .88rem; }
.bc-extra small { color: var(--cp-ink-faint); font-size: .76rem; }
.bc-extra .bc-xprice { margin-left: auto; align-self: center; font-weight: 700; white-space: nowrap;
    font-size: .9rem; min-width: 60px; text-align: right; }
.bc-extra .bc-xqty { flex: none; align-self: center; margin-left: 0; width: 72px; padding: 4px 6px; font-size: .82rem; }
/* Check-in reconfirmation line. */
.bc-checkline { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--cp-ink);
    padding: 10px 12px; border: 1px solid var(--cp-border); border-radius: 12px; background: var(--cp-panel-2); }
.bc-checkline input { margin-top: 3px; }
.bc-field.has-error .bc-checkline { border-color: var(--cp-badge-red-ink); }
/* Coupon code: input + Apply on one row, the server's verdict underneath. */
.bc-coupon { display: flex; gap: 8px; align-items: stretch; }
.bc-field .bc-coupon .cp-input { width: auto; flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: .04em; }
.bc-coupon .cp-input::placeholder { text-transform: none; letter-spacing: 0; }
.bc-coupon .cp-btn { flex: none; }
.bc-coupon-msg { margin: 6px 0 0; font-size: .76rem; color: var(--cp-ink-faint); }
.bc-coupon-msg:empty { display: none; }
.bc-coupon-msg.is-ok { color: var(--cp-badge-green-ink); font-weight: 600; }
.bc-coupon-msg.is-err { color: var(--cp-badge-red-ink); }
.bc-hold { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; margin-bottom: 12px;
    background: var(--cp-badge-amber-bg); color: var(--cp-badge-amber-ink); font-weight: 600; font-size: .86rem; }
.bc-hold b { font-variant-numeric: tabular-nums; font-size: 1rem; }
.bc-terms { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; margin: 12px 0 4px; }
.bc-terms input { margin-top: 3px; }
.bc-done { text-align: center; padding: 10px 0; }
.bc-done .bc-ref { font-family: var(--cp-display); font-size: 1.6rem; font-weight: 800; letter-spacing: .06em; margin: 6px 0; }
@media (max-width: 980px) {
    .bc-layout { grid-template-columns: 1fr; }
    .bc-side { position: static; }
}

/* ---- Change mode (re-planning an existing booking) ---- */
.bc-seg.is-current { background: #1d4f91; color: #fff; box-shadow: 0 0 0 2px #7fb2ff inset; }
.bc-seg.is-current .bc-seglabel { color: #fff; }
.bc-legend .k-cur { background: #1d4f91; box-shadow: 0 0 0 2px #7fb2ff inset; }
.bc-changebar { display: flex; gap: 10px 16px; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; padding: 12px 14px; margin-bottom: 4px; border-radius: 12px;
    border: 1px solid var(--cp-border); border-left: 3px solid var(--cp-blue); background: var(--cp-panel-2);
    font-size: .86rem; color: var(--cp-ink-soft); }
.bc-changebar b { color: var(--cp-ink); }
.bc-changebar p { margin: 2px 0 0; }
.bc-diff { margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: var(--cp-panel-2);
    border: 1px solid var(--cp-border); font-size: .82rem; }
.bc-diff table { width: 100%; border-collapse: collapse; }
.bc-diff td { padding: 2px 0; }
.bc-diff td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bc-diff .is-up td { font-weight: 800; color: var(--cp-ink); }
.bc-diff .is-down td { font-weight: 800; color: var(--cp-badge-green-ink); }

/* ---- Booking detail page ---- */
.bc-detail { max-width: 920px; }
.bc-detail .cp-panel__title { margin-bottom: 10px; }
.bc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cp-gap); align-items: stretch; }
.bc-pair > .cp-panel { margin: 0; }
.bc-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin-bottom: 10px; }
.bc-head-row .cp-panel__title { margin-bottom: 0; }
.bc-savings { display: flex; gap: 6px 14px; align-items: baseline; flex-wrap: wrap; margin-top: 14px;
    padding-top: 12px; border-top: 1px solid var(--cp-border); font-size: .86rem; color: var(--cp-ink-soft); }
.bc-savings .cp-save-note { font-size: 1.05rem; }
.bc-savings small { flex: 1 0 100%; color: var(--cp-ink-faint); font-size: .76rem; line-height: 1.45; }
.bc-parts td.num { white-space: nowrap; }
.bc-addons { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.bc-addons .bc-extra { align-items: center; }
.bc-addons .bc-extra .cp-btn { flex: none; }
.bc-addons__mine { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bc-addons__mine li { display: flex; align-items: center; gap: 10px; font-size: .86rem; }
.bc-addons__mine li span { flex: 1 1 auto; }
.bc-subhead { margin: 16px 0 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--cp-ink-faint); }
.bc-rules { margin: 0 0 12px; padding-left: 18px; font-size: .84rem; color: var(--cp-ink-soft); line-height: 1.5; }
@media (max-width: 760px) {
    .bc-pair { grid-template-columns: 1fr; }
}

/* Full-bleed booking page: the portal wrapper keeps 16-40px side padding that
 * crushes the calendar on phones, so this page opts out of it. */
@media (max-width: 900px) {
    .cp-main.bc-fullbleed { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 640px) {
    .cp-main.bc-fullbleed { padding: 10px 4px 86px; }
    .bc-page-head { margin: 0 6px 8px; }
    .bc-page-head h1 { font-size: 24px; }
    .bc-page-head p { font-size: .85rem; margin-top: 4px; }
    .bc .cp-panel { padding: 10px; border-radius: 14px; }
    .bc-steps { gap: 5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 2px; }
    .bc-steps::-webkit-scrollbar { display: none; }
    .bc-steps li { flex: 0 0 auto; padding: 4px 9px; font-size: .72rem; gap: 6px; }
    .bc-steps li span { width: 17px; height: 17px; font-size: .64rem; }
    .bc-toolbar { gap: 8px; margin-bottom: 8px; }
    .bc-tabsrow { margin-bottom: 6px; gap: 6px; }
    .bc-tabsrow .bc-tabs { min-width: 0; }   /* shrink + scroll beside the guest pointer */
    .bc-pointer { width: 34px; height: 34px; }
    .bc-pointer svg { width: 22px; height: 22px; }
    .bc-monthbar { margin: 0 0 6px; }
    .bc-monthnav { width: 100%; }
    .bc-monthnav strong { flex: 1 1 auto; min-width: 0; }
    .bc-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .bc-tabs::-webkit-scrollbar { display: none; }
    .bc-tab { flex: 0 0 auto; padding: 7px 11px; font-size: .79rem; }
    .bc-tab__long { display: none; }
    .bc-tab__short { display: inline; }
    .bc-offer-desc { font-size: .8rem; margin-bottom: 20px; }
    .bc-daypanel { margin-bottom: 8px; }
    .bc-daypanel h3 { font-size: .9rem; margin-bottom: 6px; }
    .bc-daypanel .bc-hint { font-size: .76rem; margin-bottom: 6px; }
    .bc-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .bc-opt { padding: 7px 6px 8px; border-radius: 12px; gap: 2px; }
    .bc-opt__badge { min-width: 24px; height: 24px; font-size: .66rem; padding: 0 6px; }
    .bc-opt strong { font-size: .76rem; }
    .bc-opt small { font-size: .66rem; line-height: 1.2; }
    .bc-cal { gap: 3px; }
    .bc-tile, .bc-blank { min-height: 46px; aspect-ratio: auto; border-radius: 7px; }
    .bc-dow { font-size: .62rem; letter-spacing: .04em; }
    /* One small dot per shift, a check once selected; none when not offered. */
    .bc-seg { font-size: 0; padding-bottom: 6px; }
    .bc-seglabel { bottom: 14%; }
    .bc-segnum { display: none; }
    /* Dots mark bookable shifts only — sold, already-booked and not-offered
       shifts stay bare so they never look selectable. */
    .bc-seg.is-available .bc-segdot { display: block; width: 4px; height: 4px; border-radius: 50%;
        background: var(--bc-dot); }
    .bc-seg.is-selected .bc-segcheck { display: block; color: var(--bc-sel-ring); font-size: .8rem;
        font-weight: 900; line-height: 1; }
    .bc-tile .bc-date { font-size: .78rem; top: 3px; left: 5px; }
    .bc-tags { top: 3px; right: 4px; }
    /* PRIME becomes a small gold dot (theme-aware) on phones. */
    .bc-prime { width: 7px; height: 7px; padding: 0; border-radius: 50%; font-size: 0; color: transparent;
        background: var(--bc-prime); }
    .bc-pitbadge { left: 3px; top: 17px; font-size: .46rem; padding: 0 4px; border-radius: 4px; }
    .bc-legendwrap { margin-top: 8px; padding-top: 6px; }
    .bc-legendwrap > summary { font-size: .74rem; }
    .bc-legend { gap: 6px 12px; margin-top: 8px; font-size: .7rem; }
    .bc-legend i { width: 14px; height: 10px; }
    .bc-legend .k-prime { width: 8px; height: 8px; }
    .bc-dayrow > span { min-width: 74px; font-size: .8rem; }
    .bc-form { grid-template-columns: 1fr; gap: 10px; }
    .bc-formstack { gap: 14px; margin-top: 16px; }
    /* Prepaid row: the hours stay on the label line while there is room and drop to
     * a right-aligned second line on very narrow phones. */
    .bc-extra.bc-credit { flex-wrap: wrap; }
    .bc-extra.bc-credit > span:not(.bc-xprice) { flex: 0 1 auto; }
    .bc-extra.bc-credit .bc-xprice { margin-left: auto; }
    .bc-summary h2 { font-size: .98rem; }
    .bc-done .bc-ref { font-size: 1.35rem; }
}

/* Sticky action bar (phones only, above the portal tab bar). */
@media (max-width: 560px) {
    .bc-mbar { display: flex; align-items: center; gap: 10px; position: fixed; left: 0; right: 0;
        bottom: 58px; z-index: 25; padding: 9px 10px;
        background: var(--cp-panel-strong); border-top: 1px solid var(--cp-border);
        backdrop-filter: blur(10px); }
    .bc-mbar__total { font-family: var(--cp-display); font-weight: 800; font-size: .95rem; white-space: nowrap; }
    .bc-mbar .cp-btn { flex: 1 1 auto; justify-content: center; }
    #bc-continue { display: none !important; }
    body.bc-mbar-on .cp-main.bc-fullbleed { padding-bottom: 164px; }
}