/**
 * Chauffeur Booking Engine — the class step (2.29.0)
 *
 * Four shapes over one set of tokens. Everything is scoped under .cbe-cls so it cannot reach the
 * chauffeur cards on the other path, and every colour is a variable with a literal fallback, so
 * the dark block at the end only has to restate the handful that actually change.
 *
 * The photo tile is the one thing sized in absolute terms: a car is a wide subject, and letting a
 * narrow column dictate its height is how you crop a saloon into a bonnet.
 *
 * WHY SOME SELECTORS CARRY [data-shape]
 * cbe-armor.css re-asserts headings, paragraphs and `.cbe-btn` as `.cbe-widget .x { … !important }`
 * (0,2,0). Every rule here that has to beat it hangs off `.cbe-cls[data-shape]` (0,2,0 on the
 * container, 0,3,0 with the descendant) — which the renderer always sets, and which does not
 * depend on an ancestor, so the same file also works inside the chat widget's root. Button
 * colours are NOT fought over: the armor reads them from --cbe-btn-bg / -fg / -bd, and the
 * renderer sets those tokens per button.
 */

.cbe-cls{
    --cls-paper:#fff;
    --cls-ink:#14161a;
    --cls-muted:#6b7280;
    --cls-line:#e5e7eb;
    --cls-line-strong:#d1d5db;
    --cls-accent:#c5a96a;
    --cls-ph:#f3f4f6;
    --cls-radius:14px;
    --cls-shadow:0 1px 2px rgba(16,18,22,.05),0 8px 24px rgba(16,18,22,.06);
    color:var(--cls-ink);
}

.cbe-cls[data-shape] .cbe-cls-title{
    font-size:clamp(20px,2.4vw,28px)!important;line-height:1.15!important;margin:18px 0 16px!important;
    padding:0!important;font-weight:600!important;letter-spacing:-.01em!important;color:var(--cls-ink)!important;
}
.cbe-cls-stage{position:relative}

/* ── Shared card furniture ─────────────────────────────────── */
.cbe-cls-img{
    background-size:cover;background-position:50% 52%;background-repeat:no-repeat;
    background-color:var(--cls-ph);width:100%;aspect-ratio:4/3;
}
.cbe-cls-img-ph{display:flex;align-items:center;justify-content:center;color:var(--cls-line-strong);font-size:34px}
.cbe-cls-eyebrow{
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cls-muted);
    margin:0 0 6px;font-weight:600;
}
.cbe-cls[data-shape] .cbe-cls-name{
    font-size:clamp(19px,1.7vw,25px)!important;line-height:1.15!important;margin:0 0 4px!important;
    padding:0!important;font-weight:600!important;letter-spacing:-.01em!important;color:var(--cls-ink)!important;
}
.cbe-cls-models{font-size:13px;color:var(--cls-muted);margin:0 0 10px;line-height:1.4}
.cbe-cls[data-shape] .cbe-cls-desc{font-size:14px;line-height:1.55;color:var(--cls-muted);margin:0 0 12px}

.cbe-cls-spec{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 14px;font-size:12.5px;color:var(--cls-muted)}
.cbe-cls-spec span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.cbe-cls-spec b{color:var(--cls-ink);font-weight:600}
.cbe-cls-spec i{color:var(--cls-accent);font-size:11px}

.cbe-cls-price{margin:auto 0 12px}
.cbe-cls-amt{font-size:clamp(24px,2.6vw,32px);line-height:1.05;font-weight:600;letter-spacing:-.02em}
.cbe-cls-price.is-big .cbe-cls-amt{font-size:clamp(28px,3vw,38px)}
.cbe-cls-sub{
    font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cls-muted);margin-top:4px;line-height:1.35;
}

.cbe-cls-badge{
    position:absolute;top:12px;left:12px;z-index:2;
    background:var(--cls-accent);color:#1a1a1a;font-size:10.5px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:3px;
}
.cbe-cls-badge.is-plain{background:rgba(20,22,26,.72);color:#fff}

.cbe-cls[data-shape] .cbe-cls-select{
    width:100%!important;margin:0!important;border-radius:6px!important;cursor:pointer!important;
    font-size:12.5px!important;font-weight:700!important;letter-spacing:.1em!important;
    text-transform:uppercase!important;padding:13px 16px!important;line-height:1.2!important;
}
.cbe-cls[data-shape] .cbe-cls-select:hover{filter:brightness(.96)}
/* The triptych's button sits beside the price rather than under it. */
.cbe-cls[data-shape] .cbe-cls-foot .cbe-cls-select{width:auto!important;min-width:118px}

/* ── 1a — the equal quartet ────────────────────────────────── */
.cbe-cls-quartet{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
.cbe-cls-quartet[data-n="1"]{grid-template-columns:minmax(0,380px)}
.cbe-cls-quartet[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.cbe-cls-quartet[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.cbe-cls-quartet[data-n="5"],.cbe-cls-quartet[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.cbe-cls-card{
    position:relative;display:flex;flex-direction:column;overflow:hidden;
    background:var(--cls-paper);border:1px solid var(--cls-line);border-radius:var(--cls-radius);
}
.cbe-cls-card.is-rec{border-color:var(--cls-accent);box-shadow:var(--cls-shadow)}
.cbe-cls-body{display:flex;flex-direction:column;flex:1;padding:16px 16px 16px}

/* ── 1c — the editorial triptych ───────────────────────────── */
.cbe-cls-triptych{display:grid;gap:0;grid-template-columns:repeat(3,minmax(0,1fr));
    border:1px solid var(--cls-line);border-radius:var(--cls-radius);overflow:hidden}
.cbe-cls-triptych[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.cbe-cls-triptych[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.cbe-cls-panel{position:relative;display:flex;flex-direction:column;background:var(--cls-paper);
    border-left:1px solid var(--cls-line)}
.cbe-cls-panel:first-child{border-left:0}
.cbe-cls-hero{position:relative}
.cbe-cls-hero .cbe-cls-img{aspect-ratio:5/4}
.cbe-cls-numeral{
    position:absolute;top:14px;left:18px;font-family:Georgia,'Times New Roman',serif;
    font-size:44px;line-height:1;color:rgba(255,255,255,.5);letter-spacing:.02em;pointer-events:none;
}
.cbe-cls-triptych .cbe-cls-body{padding:20px 20px 22px}
.cbe-cls-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:auto}
.cbe-cls-foot .cbe-cls-price{margin:0;flex:1}
.cbe-cls-foot .cbe-cls-select{width:auto;min-width:118px}
.cbe-cls-more{
    display:flex;align-items:center;justify-content:flex-end;gap:8px;
    margin:14px 0 0;font-size:13px;color:var(--cls-muted);
}
.cbe-cls[data-shape] .cbe-cls-showall{
    background:none!important;border:0!important;padding:0!important;width:auto!important;cursor:pointer!important;
    color:var(--cls-accent)!important;font-size:13px!important;font-weight:600!important;
    text-decoration:underline!important;text-underline-offset:3px;letter-spacing:normal!important;
}

/* ── 1d — the phone carousel ───────────────────────────────── */
.cbe-cls-dots{display:flex;gap:6px;margin:0 0 8px}
.cbe-cls-dot{width:26px;height:3px;border-radius:2px;background:var(--cls-line-strong);cursor:pointer;transition:background .18s}
.cbe-cls-dot.active{background:var(--cls-accent)}
.cbe-cls-hint{
    font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cls-muted);margin:0 0 12px;
}
.cbe-cls-rail{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;
}
.cbe-cls-rail::-webkit-scrollbar{display:none}
.cbe-cls-slide{
    position:relative;flex:0 0 86%;scroll-snap-align:start;display:flex;flex-direction:column;
    background:var(--cls-paper);border:1px solid var(--cls-line);border-radius:var(--cls-radius);overflow:hidden;
}
.cbe-cls-slide.is-rec{border-color:var(--cls-accent)}

/* ── 1e — the phone strip + detail panel ───────────────────── */
.cbe-cls-strip{
    display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 14px;padding-bottom:2px;
}
.cbe-cls-strip::-webkit-scrollbar{display:none}
.cbe-cls[data-shape] .cbe-cls-chip{
    flex:0 0 auto;min-width:104px!important;display:flex!important;flex-direction:column;gap:3px;align-items:flex-start;
    background:var(--cls-paper)!important;border:1px solid var(--cls-line)!important;border-radius:8px!important;
    padding:10px 13px!important;cursor:pointer!important;text-align:left!important;width:auto!important;
    letter-spacing:normal!important;text-transform:none!important;
}
.cbe-cls-chip.active{border-color:var(--cls-accent);box-shadow:inset 0 0 0 1px var(--cls-accent)}
.cbe-cls[data-shape] .cbe-cls-chip-n{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cls-muted);font-weight:600}
.cbe-cls-chip.active .cbe-cls-chip-n{color:var(--cls-accent)}
.cbe-cls[data-shape] .cbe-cls-chip-p{font-size:17px;font-weight:600;color:var(--cls-ink);letter-spacing:-.01em}
.cbe-cls-detail-hero{position:relative;border-radius:var(--cls-radius);overflow:hidden;margin:0 0 14px}
/* The band's ceiling in the strip layout, where the sticky bar only has room for the floor. */
.cbe-cls-bandline{
    font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--cls-muted);
    margin:10px 0 0;line-height:1.4;
}
.cbe-cls-assigned{
    display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--cls-muted);
    border-top:1px solid var(--cls-line);padding:12px 0 0;margin:12px 0 0;line-height:1.45;
}
.cbe-cls-assigned i{color:var(--cls-accent);margin-top:2px}
.cbe-cls-sticky{
    display:flex;align-items:center;gap:14px;margin:16px 0 0;padding:14px 0 0;
    border-top:1px solid var(--cls-line);
}
.cbe-cls-sticky-p{display:flex;flex-direction:column;line-height:1.2}
.cbe-cls-sticky-p b{font-size:22px;font-weight:600;letter-spacing:-.01em}
.cbe-cls-sticky-p span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cls-muted);margin-top:3px}
.cbe-cls-sticky .cbe-cls-select{flex:1;width:auto}

/* The band, restated on step 3 next to the button that commits to it. This one lives OUTSIDE
   .cbe-cls, so it carries literal colours rather than the class-step tokens. */
.cbe-cls-bandnote{
    display:flex;gap:9px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;
    background:rgba(197,169,106,.09);border:1px solid rgba(197,169,106,.32);border-radius:8px;
    font-size:13px;line-height:1.5;color:#4b5563;
}
.cbe-cls-bandnote i{color:#c5a96a;margin-top:2px}

/* ── Narrow viewports ──────────────────────────────────────── */
@media (max-width:1100px){
    .cbe-cls-quartet{grid-template-columns:repeat(2,minmax(0,1fr))}
    .cbe-cls-quartet[data-n="3"],.cbe-cls-quartet[data-n="5"],.cbe-cls-quartet[data-n="6"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
    /* Below this the triptych stacks rather than thins: three 240px panels of full-bleed
       photography are three photographs of a door handle. */
    .cbe-cls-triptych,.cbe-cls-triptych[data-n="2"]{grid-template-columns:minmax(0,1fr)}
    .cbe-cls-panel{border-left:0;border-top:1px solid var(--cls-line)}
    .cbe-cls-panel:first-child{border-top:0}
    .cbe-cls-hero .cbe-cls-img{aspect-ratio:16/9}
}
@media (max-width:720px){
    .cbe-cls-quartet,.cbe-cls-quartet[data-n="2"],.cbe-cls-quartet[data-n="3"],
    .cbe-cls-quartet[data-n="5"],.cbe-cls-quartet[data-n="6"]{grid-template-columns:minmax(0,1fr)}
    .cbe-cls-foot{flex-direction:column;align-items:stretch}
    .cbe-cls[data-shape] .cbe-cls-foot .cbe-cls-select{width:100%!important}
}

/* ── The dark skin ─────────────────────────────────────────── */
.cbe-theme-dark .cbe-cls{
    --cls-paper:#101114;
    --cls-ink:#f4f2ee;
    --cls-muted:#9aa0a8;
    --cls-line:#26282d;
    --cls-line-strong:#3a3d44;
    --cls-ph:#17191d;
    --cls-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.45);
}
/* The button colours ride on the armor's tokens, so the dark skin only restates the ones the
   renderer cannot know: the outline button's ink. */
.cbe-theme-dark .cbe-cls[data-shape] .cbe-cls-select{--cbe-btn-fg:var(--cls-ink)}
.cbe-theme-dark .cbe-cls[data-shape] .cbe-cls-select.is-primary{--cbe-btn-fg:#14161a}
.cbe-theme-dark .cbe-cls-bandnote{background:rgba(197,169,106,.08);color:#c9ccd2}
.cbe-theme-dark .cbe-cls-badge.is-plain{background:rgba(244,242,238,.14);color:#f4f2ee}

/* Respect a visitor who has asked for less motion; the rail still scrolls, it just does not glide. */
@media (prefers-reduced-motion:reduce){
    .cbe-cls-rail{scroll-behavior:auto}
    .cbe-cls-dot{transition:none}
}