/*
    booking-calendly.css
    Canonical stylesheet for the booking pages (index_booking.blade.php,
    show_booking.blade.php). index_booking.blade.php and show_booking.blade.php
    have no <style> blocks of their own anymore — everything they need is here.

    Your edits kept exactly as-is: .cb-progress padding:5px, .cb-step-nav
    justify-content:center, the .btn-slot/.booking-slots-grid system, and the
    new .cb-dynamic-pricing-legend feature (its background is now brand-aware
    to match its border, which already used var(--cb-primary)).

    Fixed: .cb-slots-grid had `display:grid` commented out — grid-template-
    columns/gap do nothing without it, so time slots weren't gridding up.

    Restored (this is what was causing the reported layout bug — these rules
    were missing from the version you had, so .cb-hero/.cb-search-wrap/
    .cb-cat-nav/.cb-category-group/.cb-products-grid/.cb-product-card had zero
    matching CSS and rendered as bare, unstyled, misaligned divs):
    - The full "LISTING PAGE" section at the bottom.
    - Brand-derived color tokens (--cb-primary-tint/-ring/-border via
      color-mix()) and the rules that use them instead of hardcoded blue.
    - Mobile-first step order, skeleton loaders, done-check animation, header
      gradient, blocked-state icon circle, focus-visible states.
*/

:root{
    --cb-primary:#006BFF;
    --cb-primary-d:#0b5ade;
    --cb-bg:#F8FAFC;
    --cb-surface:#FFFFFF;
    --cb-text:#0F172A;
    --cb-muted:#64748B;
    --cb-border:#E2E8F0;
    --cb-success:#16A34A;
    --cb-danger:#DC2626;
    --cb-warning:#D97706;
    --cb-radius:14px;
    --cb-radius-lg:18px;
    --cb-shadow:0 2px 10px rgba(15,23,42,.06);
    --cb-shadow-lg:0 12px 32px rgba(15,23,42,.10);
}
*{box-sizing:border-box}

.cb-root{
    /* --cb-primary is set inline by the blade files themselves
       (style="--cb-primary: {{ $primary }}"), which is reliable everywhere —
       so the old `attr(data-primary)` fallback here (which doesn't actually
       work for custom properties in any browser) has been dropped. The tint/
       ring/border tokens below only need color-mix() support (Chrome 111+,
       Safari 16.2+, Firefox 113+ — all from 2023), safe for current traffic. */
    --cb-primary-tint: color-mix(in srgb, var(--cb-primary) 10%, white);
    --cb-primary-ring: color-mix(in srgb, var(--cb-primary) 12%, transparent);
    --cb-primary-border: color-mix(in srgb, var(--cb-primary) 35%, white);

    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    color:var(--cb-text);
    background:var(--cb-bg);
    min-height:100vh;
    margin:0;
    -webkit-font-smoothing:antialiased;
}
.cb-blocked{padding:32px 20px;text-align:center}
.cb-blocked-card{max-width:420px;margin:0 auto;background:var(--cb-surface);border-radius:var(--cb-radius);padding:32px 20px;box-shadow:var(--cb-shadow)}
.cb-blocked-icon{
    width:72px;height:72px;margin:0 auto 14px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;background:#FEE2E2;color:var(--cb-danger);
}
.cb-blocked-card .cb-done-link{margin-top:16px}

/* HEADER */
.cb-header{
    background:linear-gradient(180deg, var(--cb-primary-tint), var(--cb-surface) 70%);
    border-bottom:1px solid var(--cb-border);
}
.cb-header-inner{max-width:1080px;margin:0 auto;padding:20px 16px;display:flex;gap:14px;align-items:center}
.cb-logo{width:44px;height:44px;border-radius:10px;object-fit:cover}
.cb-header-meta small{color:var(--cb-muted);font-size:12px}
.cb-header-meta h1{margin:2px 0 4px;font-size:20px;font-weight:700;line-height:1.2}
.cb-header-price{display:flex;align-items:baseline;gap:4px}
.cb-price{font-weight:700;color:var(--cb-primary);font-size:17px}
.cb-price-unit{color:var(--cb-muted);font-size:12px}

/* LAYOUT */
.cb-main{max-width:1080px;padding-top: 8px !important;margin:0 auto;padding:16px;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){
    .cb-main{grid-template-columns:320px 1fr;padding:24px;gap:24px;align-items:start;padding-top: 8px !important;}
    .cb-stepper{position:sticky;top:24px}
}
/* Mobile-first: booking flow (calendar/slots/etc) before the summary card —
   Calendly shows the calendar first on phones. CSS Grid respects `order`
   the same way flex does, so no display-mode change is needed here. */
@media(max-width:899px){
    .cb-stepper{order:1}
    .cb-summary{order:2}
    .cb-summary-card h3{font-size:12px}
}

/* SUMMARY */
.cb-summary{display:flex;flex-direction:column;gap:12px}
@media(min-width:900px){ .cb-summary{position:sticky;top:24px} }
.cb-summary-card{background:var(--cb-surface);border-radius:var(--cb-radius-lg);padding:18px;box-shadow:var(--cb-shadow)}
.cb-summary-card h3{margin:0 0 12px;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--cb-muted)}
.cb-summary-row{display:flex;justify-content:space-between;gap:8px;font-size:14px;padding:6px 0}
.cb-summary-row span{color:var(--cb-muted)}
.cb-summary-row strong{font-weight:600;text-align:right}
.cb-summary-divider{height:1px;background:var(--cb-border);margin:8px 0}
.cb-summary-total{font-size:16px}
.cb-summary-total strong{color:var(--cb-primary);font-size:18px}
.cb-summary-conditions{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.cb-summary-conditions small{color:var(--cb-muted)}
.cb-summary-desc{font-size:14px;color:var(--cb-muted);line-height:1.5}
.cb-summary-desc p{margin:6px 0 0}

/* STEPPER */
.cb-stepper{background:var(--cb-surface);border-radius:var(--cb-radius-lg);padding:18px;box-shadow:var(--cb-shadow)}
.cb-progress{list-style:none;margin:0 0 20px;padding:5px;display:flex;gap:6px;overflow-x:auto;font-size:12px}
.cb-progress-item{display:flex;align-items:center;gap:6px;color:var(--cb-muted);white-space:nowrap;padding:6px 10px;border-radius:999px;background:#F1F5F9}
.cb-progress-item span{width:18px;height:18px;border-radius:50%;background:#E2E8F0;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.cb-progress-item.is-active{background:var(--cb-primary);color:#fff}
.cb-progress-item.is-active span{background:rgba(255,255,255,.25)}
.cb-progress-item.is-done{background:#DCFCE7;color:var(--cb-success)}
.cb-progress-item.is-done span{background:var(--cb-success)}

.cb-step{display:none;animation:cbFade .25s ease}
.cb-step.is-active{display:block}
@keyframes cbFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.cb-block{margin-bottom:18px}
.cb-block-title{margin:0 0 10px;font-size:14px;font-weight:700}

/* AGENTS */
.cb-agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.cb-agent{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1.5px solid var(--cb-border);border-radius:12px;background:#fff;cursor:pointer;transition:.15s}
.cb-agent:hover{border-color:var(--cb-primary)}
.cb-agent.is-selected{border-color:var(--cb-primary);background:var(--cb-primary-tint);box-shadow:0 0 0 3px var(--cb-primary-ring)}
.cb-agent-avatar{width:48px;height:48px;border-radius:50%;background:#F1F5F9;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cb-agent-avatar img{width:100%;height:100%;object-fit:cover}
.cb-agent-name{font-size:12px;font-weight:600;color:var(--cb-text)}

/* CALENDAR */
/* booking-calendly.js wraps the actual 7-column day grid in an outer
   container that reuses the SAME .cb-calendar class (id="cbCalendar"
   class="cb-calendar", with an inner <div class="cb-calendar"> for the day
   grid itself). Since .cb-calendar is `display:grid; grid-template-columns:
   repeat(7,1fr)`, the outer wrapper became a 7-column grid too, and its two
   children (.cb-cal-nav + the inner day-grid) got auto-placed into the first
   two of those seven columns side by side, instead of stacking. Targeting by
   ID here only un-grids the outer wrapper — the inner (id-less) .cb-calendar
   day-grid keeps its 7-column grid as intended. */
#cbCalendar{display:block}

.cb-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:12px}
.cb-cal-head{color:var(--cb-muted);font-weight:600;padding:6px 0;font-size:10px;text-transform:uppercase}
.cb-cal-day{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;border:1.5px solid transparent;background:#F8FAFC;font-weight:600;transition:.12s}
.cb-cal-day.is-other-month{color:#CBD5E1;background:transparent;cursor:default}
.cb-cal-day.is-past{color:#CBD5E1;cursor:not-allowed}
.cb-cal-day:hover:not(.is-past):not(.is-other-month){background:var(--cb-primary-tint)}
.cb-cal-day.is-selected{background:var(--cb-primary);color:#fff}
.cb-cal-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cb-cal-nav button{background:#F1F5F9;border:0;border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:14px}
.cb-cal-title{font-weight:700;text-transform:capitalize}

/* SLOTS (original system) */
.cb-slots-grid{/* display:grid; */grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}
.cb-slot{padding:10px 6px;border:1.5px solid var(--cb-border);border-radius:10px;background:#fff;cursor:pointer;font-weight:600;font-size:14px;color:var(--cb-text);transition:.12s}
.cb-slot:hover{border-color:var(--cb-primary);background:var(--cb-primary-tint)}
.cb-slot.is-selected{background:var(--cb-primary);color:#fff;border-color:var(--cb-primary)}
.cb-slot-off{color:#CBD5E1;background:#F8FAFC;cursor:not-allowed;border-style:dashed}

/* SPACES */
.cb-spaces-list{display:flex;flex-direction:column;gap:12px}
.cb-space-card{border:1.5px solid var(--cb-border);border-radius:12px;padding:14px;background:#fff;transition:.15s}
.cb-space-card.is-disabled{opacity:.6;background:#F8FAFC}
.cb-space-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cb-space-head h5{margin:0;font-size:15px}
.cb-badge{font-size:11px;padding:3px 8px;border-radius:999px;font-weight:600}
.cb-badge-success{background:#DCFCE7;color:var(--cb-success)}
.cb-badge-danger{background:#FEE2E2;color:var(--cb-danger)}
.cb-space-durations{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.cb-duration{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px;border:1.5px solid var(--cb-border);border-radius:10px;background:#fff;cursor:pointer;transition:.12s}
.cb-duration:hover{border-color:var(--cb-primary)}
.cb-duration.is-selected{background:var(--cb-primary);color:#fff;border-color:var(--cb-primary)}
.cb-duration.is-selected .cb-duration-time{color:var(--cb-surface);}
.cb-duration-time{font-size:1.175rem;font-weight:500; color:var(--cb-muted)}
.cb-duration-price{font-size:1.375rem; letter-spacing: -.115rem;line-height: 1; font-weight: 600;opacity:.85}

/* FIELDS / TABS / LOGIN */
.cb-tabs{list-style:none;display:flex;gap:8px;margin:0 0 14px;padding:0;border-bottom:1px solid var(--cb-border)}
.cb-tab{background:transparent;border:0;padding:8px 12px;cursor:pointer;font-weight:600;font-size: 1.075rem;color:var(--cb-muted);border-bottom:2px solid transparent}
.cb-tab.is-active{color:var(--cb-primary);border-bottom-color:var(--cb-primary)}
.cb-tab-panel{display:none}
.cb-tab-panel.is-active{display:block}
.cb-grid-2{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){.cb-grid-2{grid-template-columns:1fr 1fr}}
.cb-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.cb-field label{font-size:1rem;color:var(--cb-text);font-weight:600}
.cb-input{padding:11px 12px;border:1.5px solid var(--cb-border);border-radius:10px;font-size:14px;font-family:inherit;background:#fff;transition:.12s}
.cb-input:focus{outline:0;border-color:var(--cb-primary);box-shadow:0 0 0 3px var(--cb-primary-ring)}
textarea.cb-input{resize:vertical;min-height:60px}

.cb-logged-card{display:flex;justify-content:space-between;align-items:center;background:var(--cb-primary-tint);border:1px solid var(--cb-primary-border);border-radius:12px;padding:12px;margin-bottom:14px}
.cb-logged-info h4{margin:0;font-size:15px}
.cb-logged-info small{color:var(--cb-muted);font-size:12px}

/* BUTTONS */
.cb-step-nav{display:flex;justify-content:center;gap:10px;margin-top:18px}
.cb-btn{padding:12px 20px;border-radius:12px;border:0;font-weight:700;font-size:14px;cursor:pointer;transition:.15s;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.cb-btn-primary{background:var(--cb-primary);color:#fff}
.cb-btn-primary:hover{background:var(--cb-primary-d)}
.cb-btn-primary:disabled{background:#CBD5E1;color:#fff;cursor:not-allowed}
.cb-btn-ghost{background:#F1F5F9;color:var(--cb-text)}
.cb-btn-ghost:hover{background:#E2E8F0}
.cb-btn-sm{padding:6px 12px;min-height:32px;font-size:12px;border-radius:8px}
.cb-btn-block{width:100%;margin-top:10px}
.cb-btn:focus-visible, .cb-agent:focus-visible, .cb-slot:focus-visible, .btn-slot:focus-visible, .cb-cal-day:focus-visible{
    outline:2px solid var(--cb-primary);
    outline-offset:2px;
}

/* PAYMENT */
.cb-pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
@media(min-width:560px){.cb-pay-methods{grid-template-columns:repeat(3,1fr)}}
.cb-pay-method{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;border:1.5px solid var(--cb-border);border-radius:12px;background:#fff;cursor:pointer;transition:.12s}
.cb-pay-method:hover{border-color:var(--cb-primary)}
.cb-pay-method.is-active{border-color:var(--cb-primary);background:var(--cb-primary-tint);box-shadow:0 0 0 3px var(--cb-primary-ring)}
.cb-pay-icon{font-size:24px}
.cb-pay-name{font-size:12px;font-weight:600}
.cb-pay-portion{margin-top:14px}
.cb-pay-portion h5{margin:0 0 10px;font-size:14px}
.cb-pay-portion-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cb-portion{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px;border:1.5px solid var(--cb-border);border-radius:12px;background:#fff;cursor:pointer}
.cb-portion.is-active{border-color:var(--cb-primary);background:var(--cb-primary-tint)}
.cb-portion-label{font-size:12px;color:var(--cb-muted)}
.cb-portion-amount{font-size:16px;font-weight:700}

/* ALERTS */
.cb-alert{margin-top:10px;padding:10px 12px;border-radius:10px;font-size:13px;background:#FEE2E2;color:var(--cb-danger);display:none}
.cb-alert.is-show{display:block}
.cb-muted{color:var(--cb-muted);font-size:13px}
.cb-forgot{display:block;margin-top:10px;font-size:13px;color:var(--cb-primary);/* text-decoration:none */}

/* EMPTY (original) */
.cb-empty{text-align:center;padding:24px 12px;color:var(--cb-muted)}
.cb-empty-icon{font-size:36px;margin-bottom:8px}
.cb-empty h5{margin:6px 0 4px;font-size:15px;color:var(--cb-text)}
.cb-empty small{font-size:12px}

/* DONE */
.cb-step-done .cb-done{text-align:center;padding:32px 16px}
.cb-done-check{
    width:64px;height:64px;border-radius:50%;background:var(--cb-success);color:#fff;font-size:30px;
    display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
    animation:cbPop .35s ease;
}
@keyframes cbPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.cb-done h2{margin:0 0 6px;font-size:20px}
.cb-done p{color:var(--cb-muted);margin:0 0 14px}
.cb-done-code{background:#F8FAFC;border-radius:12px;padding:14px;margin-bottom:14px}
.cb-done-code small{display:block;color:var(--cb-muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.cb-done-code strong{font-size:20px;color:var(--cb-primary)}
.cb-create-account{margin:16px 0}
.cb-done-link{margin-top:12px}

/* SPINNER */
.cb-spinner{display:flex;justify-content:center;padding:24px}
.cb-spinner>div{width:34px;height:34px;border:3px solid #E2E8F0;border-top-color:var(--cb-primary);border-radius:50%;animation:cbSpin .7s linear infinite}
@keyframes cbSpin{to{transform:rotate(360deg)}}

/* SLOTS GRID (Updated for btn-slot) */
.booking-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.btn-slot {
    padding: 12px 6px;
    border: 1.5px solid var(--cb-border, #E2E8F0);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--cb-text, #0F172A);
    transition: all 0.15s ease;
    text-align: center;
}

.btn-slot:hover {
    border-color: var(--cb-primary);
    background: var(--cb-primary-tint);
    transform: translateY(-1px);
}

.btn-slot.is-selected {
    background: var(--cb-primary);
    color: #fff;
    border-color: var(--cb-primary);
    box-shadow: 0 4px 12px var(--cb-primary-ring);
}

.btn-slot[disabled] {
    color: #CBD5E1;
    background: #F8FAFC;
    cursor: not-allowed;
    border-style: dashed;
    transform: none;
}

/* EMPTY STATE */
.booking-empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--cb-muted, #64748B);
}
.booking-empty-state h5 {
    margin: 12px 0 4px 0;
    font-size: 16px;
    color: var(--cb-text, #0F172A);
    font-weight: 700;
}
.booking-empty-state small {
    font-size: 13px;
}
.booking-empty-state .text-muted {
    color: var(--cb-muted, #64748B) !important;
}
.cb-dynamic-pricing-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--cb-primary-tint);
    border-left: 4px solid var(--cb-primary);
    padding: 12px 16px;
    border-radius: 10px;
    /* margin-bottom: 20px; */
    font-size: 14px;
    color: var(--cb-text, #0F172A);
}
.cb-legend-icon {
    font-size: 22px;
    flex-shrink: 0;
}
.cb-legend-messages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.cb-legend-item {
    font-weight: 500;
}
.cb-legend-item:not(:last-child)::after {
    content: "•";
    margin-left: 12px;
    color: var(--cb-muted, #94A3B8);
}

/* SKELETON LOADING PLACEHOLDERS — pure CSS, disappear automatically once JS
   injects real children into these containers (:empty stops matching). */
#cbCalendar:empty::before,
#cbSlots:empty::before,
#cbSpaces:empty::before{
    content:'';
    display:block;
    height:220px;
    border-radius:12px;
    background:linear-gradient(90deg, #F1F5F9 25%, #E7ECF3 37%, #F1F5F9 63%);
    background-size:400% 100%;
    animation:cbSkeleton 1.4s ease infinite;
}
@keyframes cbSkeleton{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* =====================================================================
   LISTING PAGE (index_booking.blade.php) — hero, search, category nav,
   service cards. THIS ENTIRE SECTION was missing — it's why cb-hero,
   cb-search-wrap, cb-cat-nav, cb-category-group, cb-products-grid and
   cb-product-card had no styling and rendered as bare, misaligned divs.
   ===================================================================== */
.cb-main-list{ padding:16px; padding-bottom:calc(96px + env(safe-area-inset-bottom)); max-width:960px; grid-template-columns:1fr; }
@media(min-width:900px){
    .cb-main-list{ padding:32px 16px; padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
    /* .cb-main's own 900px+ rule switches to grid-template-columns:320px 1fr for
       show_booking's sidebar+stepper layout. index_booking.blade.php reuses the
       .cb-main class too (<main class="cb-main cb-main-list">), so without this
       override its many stacked sections (hero, legend, search, each category
       group) get auto-placed into that same 2-column grid instead of stacking. */
    .cb-main.cb-main-list{ grid-template-columns:1fr; }
}

.cb-hero{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:20px; }
.cb-hero-eyebrow{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cb-primary); background:rgba(0,0,0,.04); padding:4px 10px; border-radius:999px; margin-bottom:8px; }
.cb-hero-text h1{ margin:0 0 6px; font-size:24px; font-weight:800; line-height:1.2; color:var(--cb-text); }
.cb-hero-text p{ margin:0; color:var(--cb-muted); font-size:14px; max-width:520px; }
.cb-hero-info{ display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; }
.cb-hero-info-item{ display:inline-flex; align-items:center; gap:6px; font-size:1.075rem;font-weight: 600; color:var(--cb-muted); }
.cb-hero-stats{ display:flex; gap:10px; }
.cb-hero-stat{ background:#fff; border:1px solid var(--cb-border); border-radius:12px; padding:10px 16px; text-align:center; min-width:84px; }
.cb-hero-stat strong{ display:block; font-size:20px; font-weight:800; color:var(--cb-primary); }
.cb-hero-stat span{ font-size:11px; color:var(--cb-muted); text-transform:uppercase; letter-spacing:.04em; }

.cb-search-wrap{ position:relative; /* margin-bottom:14px; */ }
.cb-search-wrap svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--cb-muted); }
.cb-search-input{ width:100%; padding:12px 14px 12px 40px; border:1.5px solid var(--cb-border); border-radius:12px; font-size:14px; font-family:inherit; background:#fff; }
.cb-search-input:focus{ outline:0; border-color:var(--cb-primary); box-shadow:0 0 0 3px var(--cb-primary-ring); }
.cb-search-empty{ text-align:center; color:var(--cb-muted); font-size:13px; padding:20px 0; }

.cb-cat-nav{ position:sticky; top:0; z-index:5; background:var(--cb-bg); margin:0 -16px 0px; padding:8px 16px; }
.cb-cat-nav-inner{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.cb-cat-nav-inner::-webkit-scrollbar{ display:none; }
.cb-cat-pill{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding:8px 14px; border-radius:999px; background:#fff; border:1.5px solid var(--cb-border); font-size:13px; font-weight:600; color:var(--cb-text); text-decoration:none; transition:.12s; }
.cb-cat-pill:hover{ border-color:var(--cb-primary); }
.cb-cat-pill.is-active{ background:var(--cb-primary); border-color:var(--cb-primary); color:#fff; }
.cb-cat-pill-count{ font-size:11px; opacity:.75; }

.cb-category-group{ margin-bottom:26px; scroll-margin-top:78px; }
.cb-category-title{ margin:0 0 12px; font-size:18px; font-weight:700; }

.cb-products-grid{ display:flex; flex-direction:column; gap:12px; }
@media(min-width:640px){ .cb-products-grid{ display:grid; grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .cb-products-grid{ grid-template-columns:repeat(3,1fr); } }

.cb-product-card{
    display:flex; flex-direction:column; gap:10px;
    background:#fff; border:1px solid var(--cb-border); border-radius:14px;
    padding:16px; text-decoration:none; color:inherit; transition:.15s;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
}
.cb-product-card:hover{ border-color:var(--cb-primary); transform:translateY(-2px); box-shadow:0 6px 16px rgba(15,23,42,.08); }

.cb-product-card-top{ display:flex; align-items:center; justify-content:space-between; }
.cb-product-icon{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.04); color:var(--cb-primary); }
.cb-badge-offer{ font-size:11px; font-weight:800; color:#fff; background:var(--cb-danger); padding:3px 9px; border-radius:999px; }

.cb-product-info h4{ margin:0 0 4px; font-size:16px; font-weight:700; }
.cb-product-info p{ margin:0 0 8px; font-size:13px; color:var(--cb-muted); line-height:1.4; }

.cb-product-meta{ display:flex; gap:6px; flex-wrap:wrap; }
.cb-tag{ display:inline-flex; align-items:center; gap:4px; font-size:11px; background:#F1F5F9; color:#475569; padding:4px 9px; border-radius:999px; font-weight:600; }

.cb-product-action{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:6px; border-top:1px dashed var(--cb-border); }
.cb-price-block{ display:flex; flex-direction:column; }
.cb-price-old{ font-size:12px; color:var(--cb-text) !important; font-weight: 700; text-decoration:line-through; }
.cb-product-price{ font-size:16px; font-weight:800; color:var(--cb-primary); white-space:nowrap; }
.cb-product-price small{ font-size:11px; font-weight:600; color:var(--cb-muted); margin-right:2px; }

/* Note: the "Reservar" button on each card uses .cb-btn.cb-btn-primary.cb-btn-sm
   (defined above, under BUTTONS) — no separate override needed here. */

@media (prefers-reduced-motion: reduce){
    .cb-step{ animation:none; }
    .cb-done-check{ animation:none; }
    #cbCalendar:empty::before, #cbSlots:empty::before, #cbSpaces:empty::before{ animation:none; }
}

.cb-btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: cbSpin .7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

/* Si el botón tiene fondo oscuro, ajustar colores */
.cb-btn-primary .cb-btn-spinner {
    border-color: rgba(255,255,255,0.3);
    border-top-color: #fff;
}
.cb-btn-ghost .cb-btn-spinner {
    border-color: rgba(0,0,0,0.15);
    border-top-color: var(--cb-primary);
}
.whatsapp{
    position:fixed;
    right:16px;
    bottom:calc(88px + env(safe-area-inset-bottom));
    z-index:45;
    width:56px;
    height:56px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.25);
    text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease;
}
.whatsapp:hover{
    transform:scale(1.08);
    box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.whatsapp:focus-visible{
    outline:2px solid #128C7E;
    outline-offset:3px;
}
/* Sizes/colors whatever icon element ends up inside — an <img>, inline
   <svg>, or (if you keep it) the ki-duotone <i>, once that font is loaded. */
.whatsapp .whatsicon{
    width:28px;
    height:28px;
    color:#fff;
}
.whatsapp img.whatsicon{
    width:30px;
    height:30px;
    object-fit:contain;
}

@media (prefers-reduced-motion: reduce){
    .cb-step{ animation:none; }
    .cb-done-check{ animation:none; }
    #cbCalendar:empty::before, #cbSlots:empty::before, #cbSpaces:empty::before{ animation:none; }
}