/*
 * Cloudstay Express Checkout (v3)
 *
 * Distraction-free "Confirm and pay" page. Desktop = form left / sticky stay
 * summary right. Phones and small tablets (<= 820px) = one column with a
 * summary bar on top and a sticky pay bar at the bottom.
 *
 * Theme and plugin stylesheets are dequeued on this page (see
 * templates/checkout-v3.php), so these rules start from browser defaults.
 */

.cs-co3-body {
    --brand: #B43A2D;
    --brand-deep: #93291F;
    --ink: #17202E;
    --muted: #596273;
    --line: #DCE0E6;
    --bg: #F5F6F8;
    --surface: #FFFFFF;
    --vault: #F4F6F9;
    --vault-line: #C9D1DC;
    --ok: #1D7A4C;
    --ok-bg: #E9F5EE;
    --err: #B42318;
    --err-bg: #FEF3F2;
    --focus: #2F6FEB;
    --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --r: 10px;
    color-scheme: light;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
.cs-co3-body *, .cs-co3-body *::before, .cs-co3-body *::after { box-sizing: border-box; }
.cs-co3-body [hidden] { display: none !important; }
.cs-co3 img { max-width: 100%; }
/* Low-specificity reset (:where) so component rules such as .cta's white
   text always win over it. */
.cs-co3 :where(button, input, select),
.cs-co3-body :where(.stickybar, .sheet) :where(button) { font: inherit; color: inherit; }
.cs-co3-body :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .cs-co3-body * { transition: none !important; animation: none !important; }
}

/* Third-party chat widgets the site loads everywhere (Tidio = "Ask a Branson
   Pro"): hidden on the checkout so guests aren't pulled away mid-payment. */
.cs-co3-body #tidio-chat,
.cs-co3-body #tidio-chat-code { display: none !important; }

/* ---------- header (checkout version: no nav) ---------- */
.cs-co3 .site { background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cs-co3 .logo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--brand); }
.cs-co3 .logo-img { display: block; height: 54px; width: auto; }
.cs-co3 .logo-markimg { display: none; }
.cs-co3 .secure { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.cs-co3 .secure svg { color: var(--ok); }

/* ---------- page ---------- */
.cs-co3 .page { max-width: 1120px; margin: 0 auto; padding: 28px 24px 40px; }
.cs-co3 h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 20px; text-wrap: balance; }
.cs-co3 .grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.cs-co3 .col { display: grid; gap: 16px; min-width: 0; margin: 0; }
.cs-co3 .desk { align-self: stretch; min-width: 0; }
.cs-co3 .card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.cs-co3 .card h2 { font-size: 17px; font-weight: 700; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.cs-co3 .card .sub { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.cs-co3 .card h2 + .wallets { margin-top: 12px; }
.cs-co3 .notice { display: grid; gap: 4px; max-width: 640px; }
.cs-co3 .notice .sub { margin-bottom: 12px; }

.cs-co3 .holdbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: flex-start; margin: -6px 0 18px; }
.cs-co3 .xlist { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); max-width: 640px; }
.cs-co3 .xlist svg { flex: none; color: var(--brand); }
.cs-co3 .xlist b { color: var(--ink); font-weight: 700; }

/* ---------- payment plans ---------- */
.cs-co3 #planCard h2 { margin-bottom: 14px; }
.cs-co3 .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 12px; }
.cs-co3 #planCard[data-n="3"] .plan { padding: 14px 12px 14px 40px; }
.cs-co3 #planCard[data-n="3"] .plan .dot { left: 13px; }
.cs-co3 #planCard[data-n="3"] .plan .amt { font-size: 19px; }
.cs-co3 .plan { position: relative; display: grid; gap: 2px; align-content: start; text-align: left; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 14px 16px 14px 44px; cursor: pointer; margin: 0; }
.cs-co3 .plan:hover { border-color: #A9B2BF; }
.cs-co3 .plan[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cs-co3 .plan .dot { position: absolute; left: 15px; top: 16px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #9AA3B2; }
.cs-co3 .plan[aria-checked="true"] .dot { border: 5.5px solid var(--ink); }
.cs-co3 .plan .t { font-weight: 700; font-size: 15px; }
.cs-co3 .plan .amt { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cs-co3 .plan .n { font-size: 13px; color: var(--muted); }
.cs-co3 .plan .tag { position: absolute; right: 10px; top: -9px; background: var(--ok); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; letter-spacing: .02em; }
.cs-co3 .plan--skel { min-height: 92px; cursor: default; background: linear-gradient(90deg, #EEF0F3 25%, #F7F8FA 50%, #EEF0F3 75%); background-size: 200% 100%; animation: cs-co3-shimmer 1.4s ease-in-out infinite; border-color: transparent; }

/* ---------- wallets (Stripe Express Checkout buttons) ---------- */
.cs-co3 .wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-co3 .wallets.one { grid-template-columns: 1fr; }
.cs-co3 .wslot { min-height: 52px; min-width: 0; position: relative; }
.cs-co3 .or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; font-weight: 600; margin: 6px 0; }
.cs-co3 .or::before, .cs-co3 .or::after { content: ""; height: 1px; background: var(--line); flex: 1; }

/* ---------- fields ---------- */
.cs-co3 .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-co3 .full { grid-column: 1 / -1; }
.cs-co3 .f { display: grid; gap: 6px; min-width: 0; }
.cs-co3 .f label { font-size: 14px; font-weight: 600; }
.cs-co3 .f input, .cs-co3 .f select, .cs-co3 .sfield { height: 48px; width: 100%; border: 1px solid #BCC3CE; border-radius: 8px; background: #fff; padding: 0 14px; font-size: 16px; transition: border-color .15s, box-shadow .15s; margin: 0; }
.cs-co3 .f input::placeholder { color: #9AA3B2; }
.cs-co3 .f input:focus, .cs-co3 .f select:focus, .cs-co3 .sfield.StripeElement--focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(47, 111, 235, .18); }
.cs-co3 .f.bad input, .cs-co3 .f.bad .sfield { border-color: var(--err); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.cs-co3 .f.good input, .cs-co3 .f.good .sfield { border-color: #8FC2A6; }
.cs-co3 .sfield { padding-top: 13px; padding-bottom: 13px; }
.cs-co3 .help { font-size: 13px; color: var(--muted); }
.cs-co3 .errm { font-size: 13px; color: var(--err); font-weight: 600; display: none; }
.cs-co3 .f.bad .errm { display: block; }
.cs-co3 .f.bad .help { display: none; }
.cs-co3 .phone { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.cs-co3 .phone select { padding: 0 8px; appearance: auto; }
.cs-co3 .wrap { position: relative; }
.cs-co3 .wrap input { padding-right: 40px; }
.cs-co3 .ok-tick { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ok); display: none; }
.cs-co3 .f.good .ok-tick { display: block; }
.cs-co3 .req { color: var(--err); font-weight: 700; }

/* ---------- card enclosure ---------- */
.cs-co3 .vault { background: var(--vault); border: 1px solid var(--vault-line); border-radius: 12px; padding: 18px; margin-top: 12px; }
.cs-co3 .vault-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cs-co3 .vault-head strong { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.cs-co3 .vault-head strong svg { color: var(--ok); }
.cs-co3 .cards { display: flex; gap: 5px; }
.cs-co3 .cards span { font-size: 10px; font-weight: 800; letter-spacing: .03em; border: 1px solid var(--vault-line); background: #fff; border-radius: 4px; padding: 3px 6px; color: #3A4558; }
.cs-co3 .vfields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.cs-co3 .vfields .cn { grid-column: 1 / -1; }
.cs-co3 .vnote { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; font-size: 13px; color: var(--muted); }
.cs-co3 .vnote svg { flex: none; margin-top: 1px; }

/* ---------- CTA ---------- */
.cs-co3-body .cta { width: 100%; height: 58px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(180, 58, 45, .7); transition: background .15s; text-decoration: none; }
.cs-co3-body .cta:hover { background: var(--brand-deep); }
.cs-co3-body .cta[disabled] { opacity: .8; cursor: progress; }
.cs-co3 .cta--link { width: auto; padding: 0 24px; justify-self: start; }
.cs-co3-body .spin { width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: cs-co3-spin .8s linear infinite; flex: none; }
.cs-co3-body .spin--dark { width: 28px; height: 28px; border-color: var(--line); border-top-color: var(--ink); }
@keyframes cs-co3-spin { to { transform: rotate(360deg); } }
@keyframes cs-co3-shimmer { to { background-position: -200% 0; } }
.cs-co3 .legal { text-align: center; font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.cs-co3 .legal a { color: var(--muted); }
.cs-co3 .formerr { display: none; background: var(--err-bg); color: var(--err); border: 1px solid #F5C2BD; border-radius: 8px; padding: 10px 12px; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.cs-co3 .formerr.on { display: block; }
.cs-co3 .formerr--wallet { margin: 12px 0 0; }

/* ---------- summary ---------- */
.cs-co3 .summary { position: sticky; top: 20px; display: grid; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cs-co3 .sum-prop { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 16px; align-items: center; }
.cs-co3 .sum-prop img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; display: block; background: var(--vault); }
.cs-co3 .sum-ph { display: block; width: 96px; height: 72px; border-radius: 8px; background: var(--vault); }
.cs-co3 img[data-img]:not([hidden]) + .sum-ph { display: none; }
.cs-co3 .sum-prop h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.25; text-wrap: balance; }
.cs-co3 .specs { display: flex; gap: 10px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.cs-co3 .specs span { display: inline-flex; gap: 4px; align-items: center; }
.cs-co3 .sum-sec { border-top: 1px solid var(--line); padding: 14px 16px; }
.cs-co3 .row2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cs-co3 .k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cs-co3 .v { font-weight: 600; }
.cs-co3 .v small { font-weight: 500; color: var(--muted); font-size: 14px; }
.cs-co3 .mod { border: 0; background: none; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px; font-size: 14px; }
.cs-co3 .lines { display: grid; gap: 8px; font-size: 14px; }
.cs-co3 .lines .row2 span:last-child { font-variant-numeric: tabular-nums; }
.cs-co3 .lines .disc span:last-child { color: var(--ok); font-weight: 600; }
.cs-co3 .total { font-size: 18px; font-weight: 800; }
.cs-co3 .total span:last-child { font-variant-numeric: tabular-nums; }
.cs-co3 .depnote { display: grid; gap: 4px; background: #FFFAEB; border: 1px solid #F3DC9B; border-radius: 12px; padding: 11px 14px; }
.cs-co3 .dephd { display: flex; align-items: center; gap: 8px; color: #8A5300; font-size: 14px; font-weight: 700; }
.cs-co3 .dephd svg { flex: none; }
.cs-co3 .dephd b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 800; }
.cs-co3 .depnote small { padding-left: 24px; font-size: 12.5px; color: #7A6A4F; line-height: 1.4; }
.cs-co3 .cxl { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; }
.cs-co3 .cxl svg { color: var(--ok); flex: none; margin-top: 1px; }
.cs-co3 .cxl b { display: block; color: var(--ok); font-size: 14.5px; }
.cs-co3 .cxl span { display: block; font-size: 13.5px; color: var(--muted); }
.cs-co3 .cxl.plain b { color: var(--ink); }
.cs-co3 .cxl.nonref svg { color: var(--ink); }
.cs-co3 .cxl.nonref b { color: var(--ink); }
.cs-co3 .cxlmini.nonref { color: var(--err); }
.cs-co3 .cxl + .cxl { margin-top: 10px; }
.cs-co3 .sched { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 6px; background: var(--surface); }
.cs-co3 .sched-h { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.cs-co3 .sched ol { list-style: none; margin: 0; padding: 4px 0 0; display: grid; }
.cs-co3 .sched li { display: grid; grid-template-columns: 14px 1fr auto; column-gap: 12px; align-items: start; position: relative; padding: 9px 0; }
.cs-co3 .sched li:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 27px; bottom: -6px; width: 2px; background: var(--line); }
.cs-co3 .sched .node { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #A9B2BF; background: var(--surface); margin-top: 2px; }
.cs-co3 .sched li.now .node { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 2.5px var(--surface); }
.cs-co3 .sched li b { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.cs-co3 .sched li small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.cs-co3 .sched .amt { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; padding-top: 1px; }
.cs-co3 .sched li.now .amt { font-weight: 800; font-size: 15.5px; }
.cs-co3 .savestrip { display: flex; gap: 10px; align-items: center; background: var(--ok-bg); color: var(--ok); border: 1px solid #BFE3CD; border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 600; }
.cs-co3 .savestrip svg { flex: none; }
.cs-co3 .savestrip b { font-weight: 800; }
.cs-co3 .skel { display: inline-block; height: 1em; border-radius: 4px; background: linear-gradient(90deg, #EEF0F3 25%, #F7F8FA 50%, #EEF0F3 75%); background-size: 200% 100%; animation: cs-co3-shimmer 1.4s ease-in-out infinite; vertical-align: middle; }
.cs-co3 .skel--amt { width: 72px; }
.cs-co3 .skel--line { width: 100%; }

/* ---------- footer ---------- */
.cs-co3 .cofoot { border-top: 1px solid var(--line); background: var(--surface); padding: 22px 24px 26px; display: grid; gap: 10px; justify-items: center; text-align: center; font-size: 14px; color: var(--muted); }
.cs-co3 .cofoot p { margin: 0; }
.cs-co3 .cofoot .help { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; color: var(--ink); font-weight: 600; font-size: 14px; }
.cs-co3 .cofoot .help svg { color: var(--ok); flex: none; }
.cs-co3 .cofoot .help a { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; text-decoration: underline; text-underline-offset: 3px; }
.cs-co3 .cofoot nav { display: flex; gap: 6px 18px; flex-wrap: wrap; justify-content: center; }
.cs-co3 .cofoot nav a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cs-co3 .cofoot .copy { font-size: 12.5px; }

/* ---------- mobile-only pieces ---------- */
.cs-co3 .sumbar, .cs-co3-body .stickybar { display: none; }

/* ---------- guest picker sheet ---------- */
.cs-co3-body .scrim { position: fixed; inset: 0; background: rgba(10, 14, 20, .5); z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cs-co3-body .sheet { background: #fff; width: 100%; max-width: 420px; border-radius: 18px; padding: 18px 20px 22px; display: grid; gap: 14px; animation: cs-co3-up .25s ease-out; color: var(--ink); }
@keyframes cs-co3-up { from { transform: translateY(40px); opacity: 0; } }
.cs-co3-body .sheet .hd { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 17px; }
.cs-co3-body .sheet .x { border: 0; background: #EEF0F3; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; }
.cs-co3-body .sheet .sub { margin: 0; font-size: 13px; color: var(--muted); }
.cs-co3-body .counters { display: grid; }
.cs-co3-body .counter { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cs-co3-body .counter:last-child { border-bottom: 0; }
.cs-co3-body .counter b { display: block; font-size: 15px; }
.cs-co3-body .counter small { display: block; font-size: 13px; color: var(--muted); }
.cs-co3-body .stepper { display: flex; align-items: center; gap: 14px; }
.cs-co3-body .stepper button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #BCC3CE; background: #fff; cursor: pointer; font-size: 18px; line-height: 1; display: grid; place-items: center; }
.cs-co3-body .stepper button[disabled] { opacity: .35; cursor: default; }
.cs-co3-body .stepper output { min-width: 18px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- dates sheet (calendar) ---------- */
.cs-co3-body .sheet--dates { max-width: 440px; max-height: calc(100vh - 32px); display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
.cs-co3-body .cal-loading { display: grid; place-items: center; padding: 40px 0; }
.cs-co3-body .cal-err { background: var(--err-bg); color: var(--err); border: 1px solid #F5C2BD; border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; }
.cs-co3-body .cal-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 4px; }
.cs-co3-body .cal-month { padding: 4px 0 12px; }
.cs-co3-body .cal-title { font-weight: 700; font-size: 15px; margin: 8px 0 8px; }
.cs-co3-body .cal-weekdays, .cs-co3-body .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cs-co3-body .cal-weekdays span { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; letter-spacing: .04em; }
.cs-co3-body .cal-day { min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; font-size: 14px; cursor: pointer; border: 1.5px solid transparent; margin: 1px; }
.cs-co3-body .cal-day small { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cs-co3-body .cal-day:hover:not(.off) { border-color: #A9B2BF; }
.cs-co3-body .cal-day.off { color: #B8C0CC; cursor: default; text-decoration: line-through; }
.cs-co3-body .cal-day.off small { display: none; }
.cs-co3-body .cal-day.empty { cursor: default; }
.cs-co3-body .cal-day.sel { background: var(--brand); color: #fff; font-weight: 700; }
.cs-co3-body .cal-day.sel small { color: #fff; }
.cs-co3-body .cal-day.in { background: #FBE9E7; }
.cs-co3-body .cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.cs-co3-body .cal-foot .cta { width: auto; height: 48px; padding: 0 22px; font-size: 16px; }

/* ---------- booking-in-progress overlay ---------- */
.cs-co3-body .busy { position: fixed; inset: 0; background: rgba(245, 246, 248, .86); z-index: 100001; display: grid; place-items: center; padding: 16px; }
.cs-co3-body .busy-box { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px 28px; display: grid; justify-items: center; gap: 12px; font-weight: 700; color: var(--ink); text-align: center; }
.cs-co3-body .busy-box p { margin: 0; }

/* ---------- phones and small tablets ---------- */
@media (max-width: 820px) {
    .cs-co3 .site { padding: 10px 16px; }
    .cs-co3 .logo-full { display: none; }
    .cs-co3 .logo-markimg { display: block; height: 44px; }
    .cs-co3 .page { padding: 16px 16px 24px; }
    .cs-co3 h1 { font-size: 24px; margin-bottom: 12px; }
    .cs-co3 .holdbar { margin: -2px 0 14px; }
    .cs-co3 .xlist { font-size: 13px; gap: 6px; }
    .cs-co3 .xlist svg { width: 16px; height: 16px; }
    .cs-co3 .grid { grid-template-columns: 1fr; gap: 0; }
    .cs-co3 aside.desk { display: none; }
    .cs-co3 .card { padding: 18px 16px; border-radius: 12px; }
    .cs-co3 .fields { grid-template-columns: 1fr; }
    .cs-co3 .vfields { grid-template-columns: 1fr 1fr; }
    .cs-co3 .vfields .zp { grid-column: 1 / -1; }
    .cs-co3 .plans { grid-auto-flow: row; grid-template-columns: 1fr; gap: 8px; }
    .cs-co3 #planCard .plan, .cs-co3 #planCard[data-n] .plan { grid-template-columns: auto 1fr auto; column-gap: 10px; row-gap: 0; align-items: center; padding: 12px 14px; }
    .cs-co3 .plan .dot, .cs-co3 #planCard[data-n] .plan .dot { position: static; grid-row: 1 / 3; width: 18px; height: 18px; }
    .cs-co3 .plan .t { grid-column: 2; font-size: 15px; }
    .cs-co3 .plan .n { grid-column: 2; grid-row: 2; font-size: 12.5px; }
    .cs-co3 .plan .amt, .cs-co3 #planCard[data-n] .plan .amt { grid-column: 3; grid-row: 1 / 3; font-size: 18px; }
    .cs-co3 .plan .tag { right: 10px; top: -8px; font-size: 10px; }
    .cs-co3 .plan--skel { min-height: 56px; }
    .cs-co3 #planCard h2 { margin-bottom: 12px; }
    .cs-co3 .wallets { grid-template-columns: 1fr; }

    .cs-co3 .sumbar { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
    .cs-co3 .sumbar > button { width: 100%; display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 0; background: none; text-align: left; cursor: pointer; }
    .cs-co3 .sumbar img { width: 72px; height: 100%; min-height: 0; align-self: stretch; object-fit: cover; border-radius: 8px; display: block; background: var(--vault); }
    .cs-co3 .sumbar .sum-ph { width: 72px; height: 100%; min-height: 56px; }
    .cs-co3 .sumbar-text { min-width: 0; }
    .cs-co3 .sumbar .nm, .cs-co3 .sumbar .dt { display: block; }
    .cs-co3 .sumbar .nm { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cs-co3 .sumbar .dt { font-size: 13px; color: var(--muted); }
    .cs-co3 .sumbar .tt { text-align: right; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
    .cs-co3 .sumbar .tt small { display: flex; gap: 2px; justify-content: flex-end; align-items: center; font-size: 12px; font-weight: 600; color: var(--muted); }
    .cs-co3 .sumbar .chev { transition: transform .2s; }
    .cs-co3 .sumbar[data-open="true"] .chev { transform: rotate(180deg); }
    .cs-co3 .sumbar .summary { position: static; border: 0; border-radius: 0; border-top: 1px solid var(--line); }
    .cs-co3 .sumbar .summary .sum-prop { display: none; }
    .cs-co3 .sumbar .summary .sum-sec:first-of-type { border-top: 0; }
    .cs-co3 .cxlmini { display: flex; gap: 4px; align-items: center; margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--ok); white-space: nowrap; }
    .cs-co3 .cxlmini svg { flex: none; }

    .cs-co3-body .stickybar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999; background: var(--surface); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 12px; align-items: center; justify-content: space-between; box-shadow: 0 -8px 20px -12px rgba(23, 32, 46, .25); transition: transform .2s; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    .cs-co3-body .stickybar.away { transform: translateY(110%); pointer-events: none; }
    /* Keyboard open: take the bar out entirely so it can't ride on the keyboard. */
    .cs-co3-body .stickybar.kbd { display: none; }
    .cs-co3-body .stickybar .l { display: grid; line-height: 1.2; }
    .cs-co3-body .stickybar .l small { color: var(--muted); font-size: 12px; font-weight: 600; }
    .cs-co3-body .stickybar .l b { font-size: 19px; font-variant-numeric: tabular-nums; }
    .cs-co3-body .stickybar .l button { border: 0; background: none; padding: 0; color: var(--ink); text-decoration: underline; font-size: 12px; text-align: left; cursor: pointer; }
    .cs-co3-body .stickybar .cta { width: auto; height: 50px; padding: 0 20px; font-size: 16px; }
}
.cs-co3 .cxlmini { display: none; }
@media (max-width: 820px) { .cs-co3 .cxlmini:not([hidden]) { display: flex; } }