/* Zoe Booking — front-end booking form. Themeable via the --zb-* custom properties below. */
.ms-booking-widget {
    --zb-accent: #262220;
    --zb-accent-ink: #ffffff;
    --zb-accent-soft: #f5f1ea;
    --zb-surface: #ffffff;
    --zb-border: #e8e3da;
    --zb-border-strong: #d9d2c5;
    --zb-text: #211e1a;
    --zb-muted: #8c8377;
    --zb-radius: 14px;
    --zb-radius-sm: 10px;
    --zb-shadow: 0 1px 2px rgba(33, 30, 26, .04), 0 12px 32px rgba(33, 30, 26, .06);
    --zb-shadow-sm: 0 1px 2px rgba(33, 30, 26, .05);

    color: var(--zb-text);
    font-size: 15px;
    line-height: 1.5;
}
.ms-booking-widget, .ms-booking-widget * { box-sizing: border-box; }
/* The widget toggles visibility with the `hidden` attribute. Classic themes get an
   author-level `[hidden]{display:none!important}` from Bootstrap/normalize, but block
   themes (Twenty Twenty-Five & co.) ship none — then our own display rules on class
   selectors outrank the UA's [hidden] rule and dropdown panels / helper selects render
   permanently open. Enforce the reset ourselves. */
.ms-booking-widget [hidden],
.ms-booking-modal[hidden] { display: none !important; }
/* Some themes ship a global `svg { fill: currentColor }` — a CSS rule (any specificity)
   beats the SVGs' own fill="none" PRESENTATION ATTRIBUTE, turning our stroke-only line
   icons into filled blobs. Restore the intended rendering; shapes that declare their
   own fill attribute are left alone. */
.ms-booking-widget svg[fill="none"],
.ms-booking-modal svg[fill="none"],
.ms-booking-widget svg[fill="none"] *:not([fill]),
.ms-booking-modal svg[fill="none"] *:not([fill]) { fill: none !important; }
/* Theme link/button resets: no underlines on the sidebar contact links and no focus
   ring on the collapse toggle (block themes underline every <a> and outline every
   focused <button>). */
.ms-booking-widget .ms-booking-contact__item,
.ms-booking-widget .ms-booking-contact__item:hover,
.ms-booking-widget .ms-booking-contact__item:focus {
    text-decoration: none !important;
    box-shadow: none;
}
.ms-booking-widget .ms-booking-collapse,
.ms-booking-widget .ms-booking-collapse:focus,
.ms-booking-widget .ms-booking-collapse:focus-visible {
    outline: none !important;
    box-shadow: none;
    text-decoration: none !important;
}
/* Form controls don't inherit font by default — force it so the Typography control hits everything. */
.ms-booking-widget select,
.ms-booking-widget input,
.ms-booking-widget button,
.ms-booking-widget textarea { font-family: inherit; }

.ms-booking-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
    /* Floor height: keeps the pinned sidebar-bottom block clear of the step cards
       (themeable per widget via Elementor → Layout → Minimum height). */
    min-height: 600px;
}

/* ---- Stepper sidebar ---- */
.ms-booking-sidebar { counter-reset: zbstep; display: flex; flex-direction: column; gap: var(--zb-step-gap, 12px); position: relative; background-size: cover; background-position: center; }
/* Background IMAGE lives on its own ::after layer — `cover` repaints jerkily while the
   column width animates, so the layer can be faded out during the collapse/expand glide. */
.ms-booking-sidebar::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    border-radius: inherit; pointer-events: none;
    /* Anchored to the BOTTOM: while the column width animates, cover re-crops from the
       top and the photo reads stable (no fade needed — it stays visible the whole time). */
    background-size: cover; background-position: center bottom; background-repeat: no-repeat;
}
/* Optional image overlay (tint) — sits above the bg image, below the cards. */
.ms-booking-sidebar::before { content: ''; position: absolute; inset: 0; background: transparent; border-radius: inherit; pointer-events: none; z-index: 1; }
.ms-booking-sidebar > * { position: relative; z-index: 2; }

.ms-booking-step-card {
    counter-increment: zbstep;
    position: relative;
    padding: 16px 18px 16px 60px;
    border: 1px solid var(--zb-border);
    border-radius: var(--zb-card-radius, var(--zb-radius));
    background: var(--zb-surface);
    box-shadow: var(--zb-shadow-sm);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.ms-booking-step-card::before {
    content: counter(zbstep);
    position: absolute;
    left: 16px;
    top: 15px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--zb-accent-soft, #efece6);
    color: var(--zb-muted);
    font-weight: 700;
    font-size: 13px;
    transition: background .15s, color .15s;
}
.ms-booking-step-card.is-active {
    border-color: var(--zb-accent);
    box-shadow: var(--zb-shadow);
}
.ms-booking-step-card.is-active::before { background: var(--zb-accent); color: var(--zb-accent-ink); }
.ms-booking-step-card.is-complete::before { content: "\2713"; background: var(--zb-accent); color: var(--zb-accent-ink); font-size: 15px; }
.ms-booking-step-card.is-complete { border-color: var(--zb-border-strong); }

.ms-booking-step-card__title { font-weight: 700; font-size: 15px; color: var(--zb-text); }
.ms-booking-step-card__summary { font-size: 13px; color: var(--zb-muted); margin-top: 3px; }
.ms-booking-step-card__summary:empty { display: none; }

/* ---- Content / steps ---- */
.ms-booking-content { min-width: 0; }
.ms-booking-step { display: none; }
.ms-booking-step.is-active { display: block; animation: zb-fade .25s ease; }
@keyframes zb-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Per-step section heading (Amelia-style) — always tells the customer where they are. */
.ms-booking-step-heading {
    margin: 0 0 20px; padding-bottom: 13px;
    font-size: 19px; font-weight: 700; line-height: 1.3;
    color: var(--zb-text); border-bottom: 1px solid var(--zb-border);
}

.ms-booking-field { margin-bottom: 18px; }
.ms-booking-field label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
    font-size: 13px;
    color: var(--zb-text);
}
.ms-booking-field select,
.ms-booking-field input[type="date"],
.ms-booking-field input[type="text"],
.ms-booking-field input[type="email"],
.ms-booking-field input[type="tel"] {
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    border: 1px solid var(--zb-border-strong);
    border-radius: var(--zb-radius-sm);
    background: var(--zb-surface);
    color: var(--zb-text);
    font-size: 15px;
    transition: border-color .15s, box-shadow .15s;
}
.ms-booking-field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 44px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238c8377' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
}
.ms-booking-field select:focus,
.ms-booking-field input:focus {
    outline: none;
    border-color: var(--zb-accent);
    box-shadow: 0 0 0 3px rgba(38, 34, 32, .12);
}
.ms-booking-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--zb-border-strong);
    border-radius: var(--zb-radius-sm);
    background: var(--zb-surface);
    color: var(--zb-text);
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    min-height: 84px;
    transition: border-color .15s, box-shadow .15s;
}
.ms-booking-field textarea:focus {
    outline: none;
    border-color: var(--zb-accent);
    box-shadow: 0 0 0 3px rgba(38, 34, 32, .12);
}
.ms-booking-widget .ms-booking-field .is-invalid,
.ms-booking-widget .ms-booking-field input.is-invalid {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .14);
}

/* Windows has no flag-emoji glyphs (Chrome/Edge show "PL" letters instead) — this local
   78KB font carries ONLY the flag codepoints (Twemoji Country Flags, CC-BY 4.0 graphics). */
@font-face {
    font-family: "Twemoji Country Flags";
    src: url("../fonts/TwemojiCountryFlags.woff2") format("woff2");
    font-display: swap;
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
}
.ms-booking-cc__flag,
.ms-booking-cc__item-flag { font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }

/* ---- GDPR consent checkbox (sits right above the submit button) ---- */
.ms-booking-consent { margin: 4px 0 14px; }
.ms-booking-consent__label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.5; color: inherit; }
.ms-booking-consent__box { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; cursor: pointer; accent-color: var(--zb-accent, #f41304); }
.ms-booking-consent__text a { color: var(--zb-accent, #f41304); text-decoration: underline; }
.ms-booking-consent.is-invalid .ms-booking-consent__label { color: #c0392b; }
.ms-booking-consent.is-invalid .ms-booking-consent__box { outline: 2px solid #c0392b; outline-offset: 2px; }

/* ---- Phone: country dial-code picker (flag + code) + number input ---- */
.ms-booking-phone-group { display: flex; gap: 8px; align-items: stretch; }
.ms-booking-phone-group .ms-booking-phone { flex: 1 1 auto; min-width: 0; }
.ms-booking-cc { position: relative; flex: 0 0 auto; }
.ms-booking-widget .ms-booking-cc .ms-booking-cc__trigger {
    display: inline-flex; align-items: center; gap: 7px;
    height: 100%; min-height: 50px; padding: 12px 12px;
    background: var(--zb-surface); color: var(--zb-text);
    border: 1px solid var(--zb-border-strong); border-radius: var(--zb-radius-sm);
    font-size: 15px; line-height: 1; cursor: pointer;
    text-transform: none; letter-spacing: normal; white-space: nowrap;
}
.ms-booking-widget .ms-booking-cc .ms-booking-cc__trigger:hover,
.ms-booking-widget .ms-booking-cc .ms-booking-cc__trigger:focus {
    background: var(--zb-surface); color: var(--zb-text);
    border-color: var(--zb-accent); outline: none;
}
/* Locked mode (Settings → Phone field = "Lock to the default"): the country is fixed → static, not clickable. */
.ms-booking-widget .ms-booking-cc.is-locked .ms-booking-cc__trigger { cursor: default; }
.ms-booking-widget .ms-booking-cc.is-locked .ms-booking-cc__trigger:hover { background: transparent; border-color: var(--zb-field-border, var(--zb-border)); }
.ms-booking-cc__flag { font-size: 18px; line-height: 1; }
.ms-booking-cc__code { font-weight: 600; }
.ms-booking-cc__chevron { display: inline-flex; color: var(--zb-field-muted, var(--zb-muted)); transition: transform .15s; }
.ms-booking-cc.is-open .ms-booking-cc__chevron { transform: rotate(180deg); }
.ms-booking-cc__panel {
    position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
    width: 300px; max-height: 300px; overflow: hidden auto;
    background: var(--zb-surface); border: 1px solid var(--zb-border);
    border-radius: var(--zb-radius-sm); box-shadow: var(--zb-shadow);
    padding: 6px;
}
.ms-booking-widget .ms-booking-cc .ms-booking-cc__item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; min-height: 0;
    background: transparent; color: var(--zb-text);
    border: 0; border-radius: 8px; outline: none; cursor: pointer;
    font-size: 14px; line-height: 1.3; text-align: left;
    text-transform: none; letter-spacing: normal; white-space: nowrap;
}
.ms-booking-widget .ms-booking-cc .ms-booking-cc__item:hover,
.ms-booking-widget .ms-booking-cc .ms-booking-cc__item:focus {
    background: var(--zb-accent-soft); color: var(--zb-text); border: 0; outline: none;
}
.ms-booking-widget .ms-booking-cc .ms-booking-cc__item.is-selected { background: var(--zb-accent-soft); }
.ms-booking-cc__item-flag { font-size: 17px; line-height: 1; }
.ms-booking-cc__item-code { font-weight: 600; min-width: 46px; }
.ms-booking-cc__item-name { overflow: hidden; text-overflow: ellipsis; color: var(--zb-muted); }

/* ---- Calendar ---- */
.ms-booking-calendar {
    border: 1px solid var(--zb-border);
    border-radius: var(--zb-radius);
    padding: 16px;
    background: var(--zb-surface);
    box-shadow: var(--zb-shadow-sm);
}
.ms-booking-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}
.ms-booking-calendar__title { font-weight: 700; font-size: 15px; text-transform: capitalize; }
.ms-booking-calendar__nav {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--zb-border-strong);
    border-radius: var(--zb-radius-sm);
    background: var(--zb-surface);
    color: var(--zb-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: background .15s, border-color .15s;
}
.ms-booking-calendar__nav:hover { background: var(--zb-accent-soft); border-color: var(--zb-accent); }

.ms-booking-calendar__weekdays,
.ms-booking-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ms-booking-calendar__weekdays {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--zb-muted);
    text-align: center;
}
.ms-booking-calendar__weekdays > span { min-width: 0; }
.ms-booking-calendar__empty { height: 40px; min-width: 0; }
.ms-booking-calendar__day {
    height: 40px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--zb-radius-sm);
    background: #faf8f4;
    color: var(--zb-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
}
.ms-booking-calendar__day.is-available { background: var(--zb-surface); border-color: var(--zb-border-strong); }
.ms-booking-calendar__day.is-available:hover { border-color: var(--zb-accent); transform: translateY(-1px); box-shadow: var(--zb-shadow-sm); }
.ms-booking-calendar__day.is-disabled { opacity: .4; cursor: not-allowed; background: transparent; }
.ms-booking-calendar__day.is-selected { background: var(--zb-accent); border-color: var(--zb-accent); color: var(--zb-accent-ink); }

/* ---- Time slots ---- */
.ms-booking-times__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ms-booking-times__empty { grid-column: 1 / -1; color: var(--zb-field-muted, var(--zb-muted)); padding: 8px 0; }
.ms-booking-time-slot {
    min-height: 48px;
    padding: 12px;
    border: 1px solid var(--zb-border-strong);
    border-radius: var(--zb-radius-sm);
    background: var(--zb-surface);
    color: var(--zb-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, transform .15s, box-shadow .15s, background .15s, color .15s;
}
.ms-booking-time-slot:hover { border-color: var(--zb-accent); transform: translateY(-1px); box-shadow: var(--zb-shadow-sm); }
.ms-booking-time-slot.is-selected { background: var(--zb-accent); border-color: var(--zb-accent); color: var(--zb-accent-ink); }

/* ---- Summary / review ---- */
.ms-booking-selection-summary { margin-top: 16px; font-weight: 600; color: var(--zb-text); }
.ms-booking-selection-summary:empty { display: none; }
.ms-booking-final-review {
    border: 1px solid var(--zb-border);
    border-radius: var(--zb-radius);
    padding: 20px;
    background: var(--zb-accent-soft);
}
.ms-booking-final-summary { display: grid; gap: 8px; margin-top: 12px; color: var(--zb-text); }

/* ---- Buttons ---- */
.ms-booking-actions { display: flex; gap: 12px; margin-top: 24px; }
.ms-booking-back,
.ms-booking-next,
.ms-booking-submit {
    min-height: 50px;
    padding: 0 28px;
    border-radius: var(--zb-radius-sm);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s, box-shadow .15s, background .15s, border-color .15s, opacity .15s;
}
.ms-booking-next,
.ms-booking-submit {
    border: 1px solid var(--zb-accent);
    background: var(--zb-accent);
    color: var(--zb-accent-ink);
}
.ms-booking-next:hover,
.ms-booking-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(38, 34, 32, .22); opacity: .95; }
.ms-booking-back {
    border: 1px solid var(--zb-border-strong);
    background: var(--zb-surface);
    color: var(--zb-text);
}
.ms-booking-back:hover { background: var(--zb-accent-soft); border-color: var(--zb-accent); }
.ms-booking-submit:disabled,
.ms-booking-next:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }

/* ---- Messages + success state ---- */
.ms-booking-message { margin-top: 16px; font-size: 14px; font-weight: 600; }
.ms-booking-message:empty { display: none; }
.ms-booking-message.is-error { color: #b42318; }

.ms-booking-widget.ms-booking-done .ms-booking-message {
    margin-top: 0;
    text-align: center;
    font-size: 17px;
    color: var(--zb-text);
    padding: 32px 24px;
    border-radius: var(--zb-radius);
    background: var(--zb-accent-soft);
    border: 1px solid var(--zb-border);
}
/* Animated success check — circle sweeps in, then the tick draws itself
   (same vibe as the add-to-cart tick). Injected by JS / printed by PHP banners. */
.ms-booking-check {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
}
.ms-booking-check__circle {
    stroke: var(--zb-accent);
    stroke-width: 2.5;
    stroke-dasharray: 152;
    stroke-dashoffset: 152;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    animation: zb-check-circle .6s ease-out forwards;
}
.ms-booking-check__mark {
    stroke: var(--zb-accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: zb-check-mark .35s .5s ease-out forwards;
}
@keyframes zb-check-circle { to { stroke-dashoffset: 0; } }
@keyframes zb-check-mark { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .ms-booking-check__circle, .ms-booking-check__mark { animation: none; stroke-dashoffset: 0; }
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
    .ms-booking-layout { grid-template-columns: 1fr; gap: 18px; }
    .ms-booking-times__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------------------------
   Override the Elementor global kit button rule (.elementor-kit-XXXX button {
   padding:25px 32px; border; letter-spacing; … }) which inflates EVERY <button>
   here (calendar days, time slots, nav, actions) and was the real cause of the
   oversized cells / overflow + huge buttons. These selectors carry the
   .ms-booking-widget ancestor (2 classes) so they outrank the kit's `.kit button`.
   ---------------------------------------------------------------------------- */
.ms-booking-widget .ms-booking-calendar__nav,
.ms-booking-widget .ms-booking-calendar__day,
.ms-booking-widget .ms-booking-time-slot,
.ms-booking-widget .ms-booking-back,
.ms-booking-widget .ms-booking-next,
.ms-booking-widget .ms-booking-submit {
    letter-spacing: normal;
    line-height: 1.2;
    text-transform: none;
}
.ms-booking-calendar__navgroup { display: flex; gap: 4px; }
.ms-booking-widget .ms-booking-calendar__nav {
    width: 34px; height: 34px; padding: 0; font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--zb-border-strong); border-radius: var(--zb-radius-sm);
    background: var(--zb-surface); color: var(--zb-text);
}
.ms-booking-widget .ms-booking-calendar__day {
    height: 40px; min-width: 0; min-height: 0; padding: 0; font-size: 14px; font-weight: 500;
    border: 1px solid transparent; border-radius: var(--zb-radius-sm);
    background: #faf8f4; color: var(--zb-text);
}
.ms-booking-widget .ms-booking-calendar__day.is-available { background: var(--zb-surface); border-color: var(--zb-border-strong); }
.ms-booking-widget .ms-booking-calendar__day.is-disabled { opacity: .4; background: transparent; cursor: not-allowed; }
.ms-booking-widget .ms-booking-calendar__day.is-selected { background: var(--zb-accent); border-color: var(--zb-accent); color: var(--zb-accent-ink); }
.ms-booking-widget .ms-booking-time-slot {
    min-height: 46px; min-width: 0; padding: 11px 12px; font-size: 14px; font-weight: 600;
    border: 1px solid var(--zb-border-strong); border-radius: var(--zb-radius-sm);
    background: var(--zb-surface); color: var(--zb-text);
}
.ms-booking-widget .ms-booking-time-slot.is-selected { background: var(--zb-accent); border-color: var(--zb-accent); color: var(--zb-accent-ink); }
.ms-booking-widget .ms-booking-back,
.ms-booking-widget .ms-booking-next,
.ms-booking-widget .ms-booking-submit {
    min-height: 48px; padding: 0 26px; font-size: 14px; font-weight: 600; letter-spacing: .02em;
    border-radius: var(--zb-radius-sm);
}
.ms-booking-widget .ms-booking-next,
.ms-booking-widget .ms-booking-submit { border: 1px solid var(--zb-accent); background: var(--zb-accent); color: var(--zb-accent-ink); }
.ms-booking-widget .ms-booking-back { border: 1px solid var(--zb-border-strong); background: var(--zb-surface); color: var(--zb-text); }

/* The whole date+time area lives in a fixed-height scroll box so a tall calendar + long time list
   doesn't push the page down (Amelia-style). The JS scrolls the times into view on date pick.
   Height is tunable via Settings → Appearance (--zb-dt-maxh, --zb-dt-maxh-m on mobile). */
.ms-booking-dt { position: relative; max-height: var(--zb-dt-maxh, 470px); overflow-y: auto; overflow-x: hidden; padding-right: 6px; }
@media (max-width: 860px) {
    .ms-booking-dt { max-height: var(--zb-dt-maxh-m, var(--zb-dt-maxh, 470px)); }
}
.ms-booking-dt::-webkit-scrollbar { width: 8px; }
.ms-booking-dt::-webkit-scrollbar-thumb { background: var(--zb-border-strong); border-radius: 8px; }

/* Collapsible sidebar (Amelia-style "Collapse menu"). */
.ms-booking-collapse {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; margin-top: 4px; padding: 12px 16px;
    border: 1px solid var(--zb-border); border-radius: var(--zb-radius);
    background: var(--zb-surface); color: var(--zb-muted);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.ms-booking-collapse:hover { background: var(--zb-accent-soft); color: var(--zb-text); border-color: var(--zb-accent); }
.ms-booking-collapse__icon { font-size: 16px; line-height: 1; transition: transform .2s; }

.ms-booking-widget.is-collapsed .ms-booking-layout { grid-template-columns: 64px minmax(0, 1fr); }
/* Cards melt into the rail; the icon GLIDES to its rail slot — left/top are pixel
   values transitioned on the icon itself (the old absolute→static swap made icons
   teleport to the flex centre of the still-wide column, which read as robotic). */
.ms-booking-widget.is-collapsed .ms-booking-step-card {
    padding: 12px 0; min-height: 54px;
    background: transparent; border-color: transparent; box-shadow: none;
}
/* calc(50% - half icon) centres within the card WHATEVER the sidebar padding is —
   and px→calc(%) still interpolates, so the glide stays smooth. */
.ms-booking-widget.is-collapsed .ms-booking-step-card__icon { left: calc(50% - 15px); top: 12px; }
/* Bottom rail icons centre too. */
.ms-booking-widget.is-collapsed .ms-booking-contact__item { justify-content: center; padding: 8px 0; }
/* Process layout keeps its static numbered circles — flex-centre them in the rail. */
.zb-layout-process .ms-booking-widget.is-collapsed .ms-booking-step-card { display: flex; align-items: center; justify-content: center; }

/* Sidebar children keep their natural height (no flex-stretch). */
.ms-booking-sidebar .ms-booking-step-card,
.ms-booking-sidebar .ms-booking-contact,
.ms-booking-sidebar .ms-booking-collapse { flex: 0 0 auto; }

/* The bottom block (contact + collapse) lives OUT OF FLOW on its own absolute layer —
   while the sidebar collapses/expands, the squashing step-card texts used to reflow
   it and the background photo jumped along. Pinned = nothing moves. */
.ms-booking-sidebar__bottom { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; }
/* Reserve room underneath the cards so they never slide beneath the pinned block. */
.ms-booking-sidebar { padding-bottom: 72px; }
.ms-booking-sidebar:has(.ms-booking-contact) { padding-bottom: 190px; }
/* Horizontal stepper layouts have no bottom block — and no reserve. */
.zb-layout-top .ms-booking-sidebar__bottom,
.zb-layout-bar .ms-booking-sidebar__bottom { display: none; }
.zb-layout-top .ms-booking-sidebar,
.zb-layout-bar .ms-booking-sidebar { padding-bottom: 0; }
/* Narrow rails: tighter side insets + a smaller reserve (no collapse link there). */
.ms-booking-widget.is-collapsed .ms-booking-sidebar__bottom { left: 6px; right: 6px; }
.zb-layout-rail .ms-booking-sidebar__bottom { left: 6px; right: 6px; }
.zb-layout-rail .ms-booking-sidebar { padding-bottom: 8px; }
.zb-layout-rail .ms-booking-sidebar:has(.ms-booking-contact) { padding-bottom: 116px; }
.ms-booking-widget.is-collapsed .ms-booking-step-card__title,
.ms-booking-widget.is-collapsed .ms-booking-step-card__summary,
.ms-booking-widget.is-collapsed .ms-booking-collapse__text { display: none; }
.ms-booking-widget.is-collapsed .ms-booking-collapse { justify-content: center; }
.ms-booking-widget.is-collapsed .ms-booking-collapse__icon { transform: rotate(180deg); }

/* Alternative layout: horizontal TOP stepper with a progress line (Elementor → Layout → Top). */
.zb-layout-top .ms-booking-layout { display: block; }
.zb-layout-top .ms-booking-content { max-width: 560px; margin: 0 auto; }
.zb-layout-top .ms-booking-calendar { margin-left: auto; margin-right: auto; }
.zb-layout-top .ms-booking-collapse { display: none; }
.zb-layout-top .ms-booking-sidebar { flex-direction: row; align-items: flex-start; gap: var(--zb-step-gap, 0px); margin-bottom: 30px; }
.zb-layout-top .ms-booking-step-card {
    flex: 1 1 0;
    padding: 0 8px;
    border: 0; background: transparent; box-shadow: none;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    position: relative;
}
.zb-layout-top .ms-booking-step-card__icon { position: relative; left: auto; top: auto; z-index: 1; margin: 0 0 8px; }
.zb-layout-top .ms-booking-step-card__summary { display: none; }
.zb-layout-top .ms-booking-contact { display: none; }
.zb-layout-top .ms-booking-step-card__title { font-size: 13px; }
/* Connector line between steps — thickness / icon-gap / colour all themeable
   (--zb-line-w, --zb-line-inset, --zb-line-color; gap-aware so pills can be spaced). */
.zb-layout-top .ms-booking-step-card:not([data-step-card="4"])::after {
    content: ""; position: absolute;
    top: calc(16px - (var(--zb-line-w, 2px) / 2));
    left: calc(50% + var(--zb-line-inset, 0px));
    width: calc(100% + var(--zb-step-gap, 0px) - (var(--zb-line-inset, 0px) * 2));
    height: var(--zb-line-w, 2px);
    border-radius: 999px;
    background: var(--zb-line-color, var(--zb-border)); z-index: 0;
}
.zb-layout-top .ms-booking-step-card.is-complete:not([data-step-card="4"])::after { background: var(--zb-accent); }
@media (max-width: 600px) { .zb-layout-top .ms-booking-step-card__title { font-size: 11px; } }

/* Layout: slim TOP PROGRESS BAR — step cards become segments of a thin track. */
.zb-layout-bar .ms-booking-layout { display: block; }
.zb-layout-bar .ms-booking-content { max-width: 560px; margin: 0 auto; }
.zb-layout-bar .ms-booking-calendar { margin-left: auto; margin-right: auto; }
.zb-layout-bar .ms-booking-collapse,
.zb-layout-bar .ms-booking-contact { display: none; }
.zb-layout-bar .ms-booking-sidebar { flex-direction: row; gap: var(--zb-step-gap, 6px); margin-bottom: 28px; }
.zb-layout-bar .ms-booking-step-card {
    flex: 1 1 0; min-width: 0; height: var(--zb-bar-h, 6px); padding: 0;
    border: 0; border-radius: var(--zb-bar-r, 999px); background: var(--zb-border);
    box-shadow: none; transition: background .2s;
}
.zb-layout-bar .ms-booking-step-card__icon,
.zb-layout-bar .ms-booking-step-card__title,
.zb-layout-bar .ms-booking-step-card__summary { display: none; }
.zb-layout-bar .ms-booking-step-card.is-active,
.zb-layout-bar .ms-booking-step-card.is-complete { background: var(--zb-accent); }
.zb-layout-bar .ms-booking-step-card.is-active { box-shadow: 0 0 0 3px var(--zb-accent-soft); }

/* Layout: LEFT PROCESS TIMELINE — numbered outlined circles (01…04) joined by a thin
   vertical line, titles beside them; no card boxes (editorial "process" look). */
.zb-layout-process .ms-booking-sidebar { gap: var(--zb-step-gap, 26px); }
.zb-layout-process .ms-booking-step-card {
    background: transparent; border: 0; box-shadow: none;
    padding: 8px 8px 8px 62px;
}
.zb-layout-process .ms-booking-step-card.is-active { background: transparent; border: 0; box-shadow: none; }
.zb-layout-process .ms-booking-step-card__icon { display: none; }
.zb-layout-process .ms-booking-step-card::before {
    content: counter(zbstep, decimal-leading-zero);
    display: flex; align-items: center; justify-content: center;
    position: absolute; left: 0; top: 2px;
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--zb-border-strong);
    background: var(--zb-surface); color: var(--zb-muted);
    font-size: 12.5px; font-weight: 600; letter-spacing: .05em;
    z-index: 1;
}
.zb-layout-process .ms-booking-step-card.is-active::before { border-color: var(--zb-accent); color: var(--zb-accent); }
.zb-layout-process .ms-booking-step-card.is-complete::before { background: var(--zb-accent); border-color: var(--zb-accent); color: var(--zb-accent-ink); font-size: 15px; }
.zb-layout-process .ms-booking-step-card:not([data-step-card="4"])::after {
    content: ""; position: absolute;
    left: calc(21px - (var(--zb-line-w, 1px) / 2));
    top: 50px; bottom: calc(-1 * var(--zb-step-gap, 26px) - 2px);
    width: var(--zb-line-w, 1px);
    background: var(--zb-line-color, var(--zb-border)); z-index: 0;
}
.zb-layout-process .ms-booking-step-card.is-complete:not([data-step-card="4"])::after { background: var(--zb-accent); }
/* Collapsed process rail: the number circles go static + centered (absolute ones
   overlapped each other off-axis once the card padding vanished). */
.zb-layout-process .ms-booking-widget.is-collapsed .ms-booking-step-card { padding: 6px 0; }
.zb-layout-process .ms-booking-widget.is-collapsed .ms-booking-step-card::before { position: static; }
.zb-layout-process .ms-booking-widget.is-collapsed .ms-booking-step-card::after { display: none; }

/* Layout: LEFT ICON RAIL — the collapsed-sidebar look, permanently (badges only). */
.zb-layout-rail .ms-booking-layout { grid-template-columns: 64px minmax(0, 1fr); }
.zb-layout-rail .ms-booking-step-card {
    padding: 12px 0; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; box-shadow: none;
}
.zb-layout-rail .ms-booking-step-card__icon { position: static; flex: 0 0 30px; }
.zb-layout-rail .ms-booking-step-card__title,
.zb-layout-rail .ms-booking-step-card__summary,
.zb-layout-rail .ms-booking-collapse { display: none; }
.zb-layout-rail .ms-booking-contact__title,
.zb-layout-rail .ms-booking-contact__text { display: none; }
.zb-layout-rail .ms-booking-contact__item { justify-content: center; padding: 8px 0; }

/* Layout: SIMPLE — no steps panel at all, just the form (step headings above each section). */
.zb-layout-simple .ms-booking-sidebar { display: none; }
.zb-layout-simple .ms-booking-layout { grid-template-columns: minmax(0, 1fr); }

/* ---- Design skins (Elementor → Layout → Design skin). Var-level overrides, so the
   Style-tab colour controls (per-widget, higher specificity) still win on top. ---- */

/* Minimal outline: flat + transparent — hairline borders do the work, ghost buttons. */
.zb-skin-outline .ms-booking-widget { --zb-shadow: none; --zb-shadow-sm: none; }
.zb-skin-outline .ms-booking-widget .ms-booking-step-card { background: transparent; border: 1px solid var(--zb-border-strong); }
.zb-skin-outline .ms-booking-widget .ms-booking-step-card.is-active { border-color: var(--zb-accent); box-shadow: none; }
.zb-skin-outline .ms-booking-widget .ms-booking-step-card__icon { background: transparent; border: 1px solid var(--zb-border-strong); }
.zb-skin-outline .ms-booking-widget .ms-booking-step-card.is-active .ms-booking-step-card__icon,
.zb-skin-outline .ms-booking-widget .ms-booking-step-card.is-complete .ms-booking-step-card__icon { background: transparent; border-color: var(--zb-accent); color: var(--zb-accent); }
.zb-skin-outline .ms-booking-widget .ms-booking-field select,
.zb-skin-outline .ms-booking-widget .ms-booking-field input[type="text"],
.zb-skin-outline .ms-booking-widget .ms-booking-field input[type="email"],
.zb-skin-outline .ms-booking-widget .ms-booking-field input[type="tel"],
.zb-skin-outline .ms-booking-widget .ms-booking-field textarea,
.zb-skin-outline .ms-booking-widget .ms-booking-picker .ms-booking-picker__trigger { background: transparent; }
.zb-skin-outline .ms-booking-widget .ms-booking-calendar { background: transparent; border: 1px solid var(--zb-border-strong); }
.zb-skin-outline .ms-booking-widget .ms-booking-time-slot { background: transparent; }
/* Ghost primary buttons — filled only on hover. */
.zb-skin-outline .ms-booking-widget .ms-booking-next,
.zb-skin-outline .ms-booking-widget .ms-booking-submit { background: transparent; color: var(--zb-accent); border: 1.5px solid var(--zb-accent); }
.zb-skin-outline .ms-booking-widget .ms-booking-next:hover,
.zb-skin-outline .ms-booking-widget .ms-booking-submit:hover { background: var(--zb-accent); color: var(--zb-accent-ink); box-shadow: none; transform: none; }

/* Soft: extra-rounded, airy, gentle depth. */
.zb-skin-soft .ms-booking-widget { --zb-radius: 24px; --zb-radius-sm: 16px; --zb-shadow: 0 18px 44px rgba(20, 16, 10, .08); --zb-shadow-sm: 0 8px 22px rgba(20, 16, 10, .05); }
.zb-skin-soft .ms-booking-widget .ms-booking-field select,
.zb-skin-soft .ms-booking-widget .ms-booking-field input[type="text"],
.zb-skin-soft .ms-booking-widget .ms-booking-field input[type="email"],
.zb-skin-soft .ms-booking-widget .ms-booking-field input[type="tel"],
.zb-skin-soft .ms-booking-widget .ms-booking-field textarea,
.zb-skin-soft .ms-booking-widget .ms-booking-picker .ms-booking-picker__trigger { background: var(--zb-accent-soft); border-color: transparent; }
.zb-skin-soft .ms-booking-widget .ms-booking-field select:focus,
.zb-skin-soft .ms-booking-widget .ms-booking-field input:focus,
.zb-skin-soft .ms-booking-widget .ms-booking-field textarea:focus { border-color: var(--zb-accent); background: var(--zb-surface); }

/* Dark mode: deep surfaces, light type — accent stays yours. */
.zb-skin-dark .ms-booking-widget {
    --zb-surface: #211f26; --zb-text: #f3f1ed; --zb-muted: #a5a1ab;
    --zb-border: #37343e; --zb-border-strong: #46424e;
    --zb-accent-soft: rgba(255, 255, 255, .08);
    --zb-shadow: 0 16px 40px rgba(0, 0, 0, .5); --zb-shadow-sm: 0 6px 18px rgba(0, 0, 0, .35);
    background: #17151b; padding: 26px; border-radius: var(--zb-radius);
}
.zb-skin-dark .ms-booking-widget .ms-booking-step-card__icon { background: rgba(255, 255, 255, .08); }
.zb-skin-dark .ms-booking-widget .ms-booking-times__empty { color: var(--zb-muted); }

/* Glass: frosted panels over a soft accent gradient. The gradient ends are themeable
   (--zb-glass-a / --zb-glass-b, set by the Elementor "Glass gradient" controls); a photo
   can sit underneath (the photo control layers gradient-over-image) — the blurred panels
   then read as frosted glass over the picture. */
.zb-skin-glass .ms-booking-widget {
    background: linear-gradient(135deg, var(--zb-glass-a, color-mix(in srgb, var(--zb-accent) 16%, #ffffff)), var(--zb-glass-mid, #ffffff) 42%, var(--zb-glass-b, color-mix(in srgb, var(--zb-accent) 9%, #ffffff)));
    background-size: cover; background-position: center;
    padding: 28px; border-radius: calc(var(--zb-radius) + 8px);
    --zb-surface: rgba(255, 255, 255, .62); --zb-border: rgba(255, 255, 255, .65); --zb-border-strong: rgba(255, 255, 255, .85);
    --zb-shadow: 0 14px 38px rgba(31, 22, 15, .12); --zb-shadow-sm: 0 6px 18px rgba(31, 22, 15, .07);
    /* Stepper connector: the near-white --zb-border would vanish over the frosted panels. */
    --zb-line-color: rgba(31, 22, 15, .22);
}
.zb-skin-glass .ms-booking-widget .ms-booking-step-card,
.zb-skin-glass .ms-booking-widget .ms-booking-calendar,
.zb-skin-glass .ms-booking-widget .ms-booking-picker .ms-booking-picker__panel,
.zb-skin-glass .ms-booking-widget .ms-booking-field select,
.zb-skin-glass .ms-booking-widget .ms-booking-field input[type="text"],
.zb-skin-glass .ms-booking-widget .ms-booking-field input[type="email"],
.zb-skin-glass .ms-booking-widget .ms-booking-field input[type="tel"],
.zb-skin-glass .ms-booking-widget .ms-booking-field textarea,
.zb-skin-glass .ms-booking-widget .ms-booking-picker .ms-booking-picker__trigger {
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* Step badge is now an ICON (replaces the number counter). */
.ms-booking-step-card::before { display: none; }
.ms-booking-step-card__icon {
    position: absolute; left: 16px; top: 15px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--zb-accent-soft, #efece6); color: var(--zb-muted);
    transition: background .15s, color .15s,
        left .32s cubic-bezier(.22, .61, .36, 1), top .32s cubic-bezier(.22, .61, .36, 1);
}
.ms-booking-step-card.is-active .ms-booking-step-card__icon,
.ms-booking-step-card.is-complete .ms-booking-step-card__icon { background: var(--zb-accent); color: var(--zb-accent-ink); }

/* Sidebar "Get in Touch" contact block. */
.ms-booking-contact { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--zb-border); }
.ms-booking-contact__title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--zb-muted); margin-bottom: 8px; }
.ms-booking-contact__item { display: flex; align-items: center; gap: 9px; padding: 5px 0; color: var(--zb-text); text-decoration: none; font-size: 13px; }
.ms-booking-contact__item:hover { color: var(--zb-accent); }
.ms-booking-contact__icon { flex: 0 0 auto; color: var(--zb-muted); display: inline-flex; }
.ms-booking-contact__text { min-width: 0; word-break: break-word; }
.ms-booking-widget.is-collapsed .ms-booking-contact__title,
.ms-booking-widget.is-collapsed .ms-booking-contact__text { display: none; }
.ms-booking-widget.is-collapsed .ms-booking-contact__item { justify-content: center; padding: 8px 0; }

/* Card-shadow presets — the block/shortcode "Card shadow" adds a .zb-shadow-* wrapper class
   (matches the Settings/Elementor shadow options; global shadow is also emitted inline). */
.zb-shadow-none .ms-booking-widget .ms-booking-step-card,
.zb-shadow-none .ms-booking-widget .ms-booking-calendar,
.zb-shadow-none .ms-booking-widget .ms-booking-picker .ms-booking-picker__panel { box-shadow: none; }
.zb-shadow-soft .ms-booking-widget .ms-booking-step-card,
.zb-shadow-soft .ms-booking-widget .ms-booking-calendar,
.zb-shadow-soft .ms-booking-widget .ms-booking-picker .ms-booking-picker__panel { box-shadow: 0 2px 8px rgba(0, 0, 0, .05); }
.zb-shadow-medium .ms-booking-widget .ms-booking-step-card,
.zb-shadow-medium .ms-booking-widget .ms-booking-calendar,
.zb-shadow-medium .ms-booking-widget .ms-booking-picker .ms-booking-picker__panel { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .18); }
.zb-shadow-strong .ms-booking-widget .ms-booking-step-card,
.zb-shadow-strong .ms-booking-widget .ms-booking-calendar,
.zb-shadow-strong .ms-booking-widget .ms-booking-picker .ms-booking-picker__panel { box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .28); }

/* Pill button style (Elementor "Button style → Pill") — light pill + accent circle-arrow. */
.ms-booking-btn-arrow { display: none; }
.zb-btn-pill .ms-booking-widget .ms-booking-next,
.zb-btn-pill .ms-booking-widget .ms-booking-submit,
.zb-btn-pill .ms-booking-widget .ms-booking-back {
    display: inline-flex; align-items: center; justify-content: center; gap: 14px;
    box-sizing: border-box; min-height: 56px;
    padding: 7px 7px 7px 28px; border-radius: var(--zb-radius);
    background: var(--zb-surface); color: var(--zb-text);
    border: 1px solid var(--zb-border); box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.zb-btn-pill .ms-booking-widget .ms-booking-back { padding: 7px 28px; }
.zb-btn-pill .ms-booking-widget .ms-booking-next:hover,
.zb-btn-pill .ms-booking-widget .ms-booking-submit:hover,
.zb-btn-pill .ms-booking-widget .ms-booking-back:hover { background: var(--zb-accent-soft); color: var(--zb-text); border-color: var(--zb-border); }
.zb-btn-pill .ms-booking-btn-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--zb-radius); flex: 0 0 auto;
    background: var(--zb-accent); color: var(--zb-accent-ink);
    transition: transform .15s;
}
.zb-btn-pill .ms-booking-next:hover .ms-booking-btn-arrow,
.zb-btn-pill .ms-booking-submit:hover .ms-booking-btn-arrow { transform: translate(2px, -2px); }

/* ---- Custom service picker (category | service) — replaces the native <select> ---- */
.ms-booking-service[hidden] { display: none; }
.ms-booking-picker { position: relative; }
.ms-booking-widget .ms-booking-picker__trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 50px; padding: 12px 16px; text-align: left; line-height: 1.3; font-size: 15px;
    text-transform: none; letter-spacing: normal; white-space: normal;
    background: var(--zb-surface); color: var(--zb-text);
    border: 1px solid var(--zb-border-strong); border-radius: var(--zb-radius-sm);
    cursor: pointer; transition: border-color .15s;
}
.ms-booking-widget .ms-booking-picker__trigger[disabled] { cursor: not-allowed; color: var(--zb-field-muted, var(--zb-muted)); }
/* Beat the Elementor-kit button :focus/:hover (accent-green fill + black border). */
.ms-booking-widget .ms-booking-picker .ms-booking-picker__trigger:hover,
.ms-booking-widget .ms-booking-picker .ms-booking-picker__trigger:focus { background: var(--zb-surface); color: var(--zb-text); border-color: var(--zb-border-strong); outline: none; }
.ms-booking-picker.is-open .ms-booking-picker__trigger { border-color: var(--zb-accent); }
.ms-booking-picker__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-booking-picker__chevron { flex: 0 0 auto; color: var(--zb-field-muted, var(--zb-muted)); display: inline-flex; transition: transform .18s; }
.ms-booking-picker.is-open .ms-booking-picker__chevron { transform: rotate(180deg); }

.ms-booking-picker__panel {
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
    display: grid; grid-template-columns: 1fr 1.35fr;
    /* Scroll the whole panel (not the columns) — overflow on a grid item squashes the row. */
    max-height: 420px; overflow: hidden auto;
    background: var(--zb-surface); border: 1px solid var(--zb-border);
    border-radius: var(--zb-radius); box-shadow: 0 12px 34px rgba(0,0,0,.13);
}
.ms-booking-picker:not(.has-cats) .ms-booking-picker__panel { grid-template-columns: 1fr; }
.ms-booking-picker:not(.has-cats) .ms-booking-picker__cats { display: none; }
.ms-booking-picker__cats { border-right: 1px solid var(--zb-border); padding: 0; }
.ms-booking-picker__items { padding: 0; }

/* Compact list rows — no per-row borders (only the central column divider stays). */
.ms-booking-widget .ms-booking-picker__cat,
.ms-booking-widget .ms-booking-picker__item {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 0; height: auto; padding: 9px 14px; text-align: left; line-height: 1.4; font-size: 14px;
    text-transform: none; letter-spacing: normal; white-space: normal;
    background: transparent; border: 0; border-radius: 0;
    color: var(--zb-text); cursor: pointer;
}
.ms-booking-widget .ms-booking-picker .ms-booking-picker__cat:hover,
.ms-booking-widget .ms-booking-picker .ms-booking-picker__item:hover,
.ms-booking-widget .ms-booking-picker .ms-booking-picker__cat.is-active,
.ms-booking-widget .ms-booking-picker .ms-booking-picker__item.is-selected { background: var(--zb-accent-soft); color: var(--zb-text); border: 0; outline: none; }
.ms-booking-widget .ms-booking-picker .ms-booking-picker__cat.is-active { color: var(--zb-accent); font-weight: 600; }
/* ---- Events & Tickets ([ms_events] shortcode + Elementor widget) ---- */
.ms-events { display: flex; flex-direction: column; gap: var(--zbe-gap, 14px); }
.ms-events__empty { color: var(--zb-muted); }
.ms-event {
    background: var(--zb-surface); border: 1px solid var(--zb-border);
    border-radius: var(--zb-radius); box-shadow: var(--zb-shadow-sm); padding: 18px 20px;
}
.ms-event__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ms-event__media { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; }
.ms-event__date {
    flex: 0 0 auto; width: 58px; height: 58px; border-radius: var(--zb-radius-sm);
    background: var(--zb-accent); color: var(--zb-accent-ink);
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
}
.ms-event__day { font-size: 22px; font-weight: 700; }
.ms-event__month { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.ms-event__img { flex: 0 0 auto; width: 84px; height: 84px; object-fit: cover; border-radius: var(--zb-radius-sm); }
.ms-event__info { flex: 1 1 220px; min-width: 0; }

/* Grid layout: card tiles, image as a top banner with the date badge overlaid. */
.ms-events--grid {
    display: grid; grid-template-columns: repeat(var(--zbe-cols, 3), minmax(0, 1fr));
    gap: var(--zbe-gap, 18px); align-items: start;
}
.ms-events--grid .ms-event { display: flex; flex-direction: column; }
.ms-events--grid .ms-event__head { flex-direction: column; align-items: stretch; gap: 12px; }
.ms-events--grid .ms-event__media { width: 100%; }
.ms-events--grid .ms-event__media.has-img { position: relative; display: block; }
.ms-events--grid .ms-event__media.has-img .ms-event__img {
    display: block; height: var(--zbe-img-h, 170px);
    margin: -18px -20px 0; width: calc(100% + 40px); max-width: none;
    border-radius: var(--zb-radius) var(--zb-radius) 0 0;
}
.ms-events--grid .ms-event__media.has-img .ms-event__date { position: absolute; top: 12px; left: 12px; box-shadow: var(--zb-shadow-sm); }
.ms-events--grid .ms-event__info { flex: 1 1 auto; width: 100%; }
.ms-events--grid .ms-event__side { width: 100%; justify-content: space-between; margin-top: 4px; }
@media (max-width: 900px) { .ms-events--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ms-events--grid { grid-template-columns: 1fr; } }

/* Standard layout: one big card per event, tall image banner, roomier type. */
.ms-events--standard { gap: var(--zbe-gap, 22px); }
.ms-events--standard .ms-event { padding: 22px 26px; }
.ms-events--standard .ms-event__head { align-items: stretch; gap: 14px; flex-direction: column; }
.ms-events--standard .ms-event__media { width: 100%; }
.ms-events--standard .ms-event__media.has-img { position: relative; display: block; }
.ms-events--standard .ms-event__media.has-img .ms-event__img {
    display: block; height: var(--zbe-img-h, 240px);
    margin: -22px -26px 0; width: calc(100% + 52px); max-width: none;
    border-radius: var(--zb-radius) var(--zb-radius) 0 0;
}
.ms-events--standard .ms-event__media.has-img .ms-event__date { position: absolute; top: 16px; left: 16px; box-shadow: var(--zb-shadow-sm); }
.ms-events--standard .ms-event__title { font-size: 21px; }
.ms-events--standard .ms-event__meta { font-size: 14px; margin-top: 4px; }
.ms-events--standard .ms-event__desc { font-size: 14px; }
.ms-events--standard .ms-event__side { width: 100%; justify-content: space-between; margin-top: 6px; }
.ms-event__desc { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--zb-muted); }
.ms-event__title { font-weight: 700; font-size: 16px; color: var(--zb-text); }
.ms-event__meta { margin-top: 2px; font-size: 13px; color: var(--zb-muted); }
.ms-event__side { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.ms-event__left {
    padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: var(--zb-accent-soft); color: var(--zb-accent);
}
.ms-event__left.is-soldout { background: var(--zb-border); color: var(--zb-muted); }
.ms-booking-widget .ms-event .ms-event__cta,
.ms-booking-widget .ms-event .ms-event__submit {
    min-height: 44px; padding: 10px 22px; font-size: 14px; line-height: 1;
    text-transform: none; letter-spacing: normal;
    background: var(--zb-accent); color: var(--zb-accent-ink);
    border: 1px solid var(--zb-accent); border-radius: var(--zb-radius-sm); cursor: pointer;
    transition: opacity .15s;
}
.ms-booking-widget .ms-event .ms-event__cta:hover,
.ms-booking-widget .ms-event .ms-event__cta:focus,
.ms-booking-widget .ms-event .ms-event__submit:hover,
.ms-booking-widget .ms-event .ms-event__submit:focus { background: var(--zb-accent); color: var(--zb-accent-ink); opacity: .88; outline: none; }
.ms-event__form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--zb-border); display: flex; flex-direction: column; gap: 10px; }
.ms-event__row { display: flex; gap: 10px; flex-wrap: wrap; }
.ms-booking-widget .ms-event .ms-event__row select,
.ms-booking-widget .ms-event .ms-event__row input {
    flex: 1 1 180px; min-width: 0; min-height: 46px; padding: 10px 14px; font-size: 14px;
    background: var(--zb-surface); color: var(--zb-text);
    border: 1px solid var(--zb-border-strong); border-radius: var(--zb-radius-sm);
}
.ms-booking-widget .ms-event .ms-event__row select:focus,
.ms-booking-widget .ms-event .ms-event__row input:focus { outline: none; border-color: var(--zb-accent); }
.ms-event__msg { margin-top: 10px; font-size: 13.5px; color: var(--zb-accent); min-height: 0; }
.ms-event__msg.is-error { color: #c0392b; }

/* ---- QR Add-to-Calendar ---- */
.ms-booking-qr {
    margin: 0 auto 20px; padding: 24px;
    text-align: center;
    background: var(--zb-surface); border: 1px dashed var(--zb-border-strong);
    border-radius: var(--zb-radius); max-width: 380px;
}

/* Confirmed state: the sidebar/steps are hidden — centre what's left (QR + message).
   The 600px layout floor is meaningless here (no steps to hold up) → drop it so the
   confirmation card hugs its content instead of floating in a tall empty box. */
/* !important because Elementor's control CSS reaches (0,5,0) — page + element + widget +
   layout — which our (0,3,0) done rule can't out-specify; important beats it regardless. */
.ms-booking-widget.ms-booking-done .ms-booking-layout { display: block; min-height: 0 !important; }
.ms-booking-widget.ms-booking-done .ms-booking-content { max-width: none; }
.ms-booking-widget.ms-booking-done .ms-booking-message {
    max-width: 480px; margin-left: auto; margin-right: auto;
}
/* Standalone confirmation nests the QR inside the message card (JS) → strip its own
   card chrome so the check, text and QR read as ONE container, split by a hairline.
   (On the payment-return path the QR stays a standalone card before the layout.) */
.ms-booking-message .ms-booking-qr {
    margin: 22px auto 0; padding: 22px 0 0;
    max-width: none; background: none;
    border: 0; border-top: 1px solid var(--zb-border);
}
.ms-booking-qr__title { margin: 0 0 12px; font-weight: 700; font-size: 15px; color: var(--zb-text); }
.ms-booking-qr__code { display: flex; justify-content: center; }
.ms-booking-qr__code img, .ms-booking-qr__code canvas { border-radius: 4px; }
.ms-booking-qr__hint { margin: 12px 0 0; font-size: 12.5px; color: var(--zb-muted); }

/* ---- Payment return banners ---- */
.ms-booking-banner {
    margin: 0 0 18px; padding: 14px 18px;
    border-radius: var(--zb-radius-sm); font-size: 14px; font-weight: 500;
}
.ms-booking-banner--success { background: #e6f4ea; color: #1a7f37; border: 1px solid rgba(26,127,55,.3); text-align: center; padding: 22px 18px; }
.ms-booking-banner--success .ms-booking-check { width: 48px; height: 48px; margin: 2px auto 10px; }
.ms-booking-banner--success .ms-booking-check__circle,
.ms-booking-banner--success .ms-booking-check__mark { stroke: #1a7f37; }
.ms-booking-banner--error { background: #fdeceb; color: #c0392b; border: 1px solid rgba(192,57,43,.3); }

/* ---- Final summary: emphasized total ---- */
.ms-booking-final-summary .ms-booking-total {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--zb-border);
    font-size: 1.12em; font-weight: 700;
}

/* ---- Waiting List (shown when the chosen day is fully booked) ---- */
.ms-booking-waitlist {
    margin: 14px 0 4px; padding: 14px 16px; max-width: 420px;
    border: 1px dashed var(--zb-border-strong); border-radius: var(--zb-radius-sm);
    background: var(--zb-accent-soft);
}
.ms-booking-waitlist__text { margin: 0 0 10px; font-size: 13.5px; color: var(--zb-text); }
.ms-booking-waitlist__row { display: flex; gap: 8px; }
.ms-booking-widget .ms-booking-waitlist .ms-booking-waitlist__email {
    flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 10px 14px; font-size: 14px;
    background: var(--zb-surface); color: var(--zb-text);
    border: 1px solid var(--zb-border-strong); border-radius: var(--zb-radius-sm);
}
.ms-booking-widget .ms-booking-waitlist .ms-booking-waitlist__email:focus { outline: none; border-color: var(--zb-accent); }
.ms-booking-widget .ms-booking-waitlist .ms-booking-waitlist__join {
    flex: 0 0 auto; min-height: 44px; padding: 10px 18px; font-size: 14px; line-height: 1;
    text-transform: none; letter-spacing: normal;
    background: var(--zb-accent); color: var(--zb-accent-ink);
    border: 1px solid var(--zb-accent); border-radius: var(--zb-radius-sm); cursor: pointer;
    transition: opacity .15s;
}
.ms-booking-widget .ms-booking-waitlist .ms-booking-waitlist__join:hover,
.ms-booking-widget .ms-booking-waitlist .ms-booking-waitlist__join:focus { background: var(--zb-accent); color: var(--zb-accent-ink); opacity: .88; outline: none; }
.ms-booking-waitlist__msg { margin-top: 8px; font-size: 13px; color: var(--zb-accent); min-height: 1em; }
.ms-booking-waitlist__msg.is-error { color: #c0392b; }

/* ---- Recurring Appointments (step 2) ---- */
.ms-booking-recurring {
    margin: 14px 0 4px; padding: 12px 14px;
    border: 1px solid var(--zb-border-strong); border-radius: var(--zb-radius-sm);
    background: var(--zb-surface);
}
.ms-booking-recurring__toggle-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--zb-text); }
.ms-booking-recurring__toggle-row input[type="checkbox"] { accent-color: var(--zb-accent); width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
.ms-booking-recurring__opts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ms-booking-widget .ms-booking-recurring .ms-booking-recurring__freq,
.ms-booking-widget .ms-booking-recurring .ms-booking-recurring__count {
    min-height: 42px; padding: 8px 36px 8px 12px; font-size: 14px; width: auto;
}

/* ---- Group Appointments: remaining-spots badge on time slots ---- */
.ms-booking-time-slot__left {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 7px;
    border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1;
    background: var(--zb-accent-soft); color: var(--zb-accent);
}
.ms-booking-time-slot.is-selected .ms-booking-time-slot__left { background: rgba(255,255,255,.25); color: var(--zb-accent-ink); }

/* ---- Service Extras checklist ---- */
.ms-booking-extras__list { display: flex; flex-direction: column; gap: 8px; }
.ms-booking-extra {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; cursor: pointer;
    background: var(--zb-surface); color: var(--zb-text); font-size: 14px;
    border: 1px solid var(--zb-border-strong); border-radius: var(--zb-radius-sm);
    transition: border-color .15s;
}
.ms-booking-extra:hover { border-color: var(--zb-accent); }
.ms-booking-extra:has(input:checked) { border-color: var(--zb-accent); background: var(--zb-accent-soft); }
.ms-booking-extra input[type="checkbox"] { accent-color: var(--zb-accent); width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
.ms-booking-extra__name { min-width: 0; }
.ms-booking-extra__meta { margin-left: auto; flex: 0 0 auto; color: var(--zb-muted); font-size: .92em; }
.ms-booking-extra:has(input:checked) .ms-booking-extra__meta { color: var(--zb-accent); font-weight: 600; }

/* ---- Discount Coupons (payment step) ---- */
.ms-booking-coupon { margin: 14px 0 4px; max-width: 380px; }
.ms-booking-coupon__row { display: flex; gap: 8px; }
.ms-booking-widget .ms-booking-coupon .ms-booking-coupon__input {
    flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 10px 14px 10px 42px; font-size: 14px;
    text-transform: uppercase; letter-spacing: .04em;
    background-color: var(--zb-surface); color: var(--zb-text);
    /* ticket icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238c8377' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0l-7.2-7.2A2 2 0 0 1 3 12V4a1 1 0 0 1 1-1h8a2 2 0 0 1 1.4.6l7.2 7.2a2 2 0 0 1 0 2.6z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 18px;
    border: 1px solid var(--zb-border-strong); border-radius: var(--zb-radius-sm);
}
.ms-booking-widget .ms-booking-coupon .ms-booking-coupon__input:focus { outline: none; border-color: var(--zb-accent); }
.ms-booking-widget .ms-booking-coupon .ms-booking-coupon__apply {
    flex: 0 0 auto; min-height: 46px; padding: 10px 20px; font-size: 14px; line-height: 1;
    text-transform: none; letter-spacing: normal;
    background: var(--zb-surface); color: var(--zb-text);
    border: 1px solid var(--zb-border-strong); border-radius: var(--zb-radius-sm); cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ms-booking-widget .ms-booking-coupon .ms-booking-coupon__apply:hover,
.ms-booking-widget .ms-booking-coupon .ms-booking-coupon__apply:focus { background: var(--zb-accent-soft); color: var(--zb-text); border-color: var(--zb-accent); outline: none; }
.ms-booking-coupon__msg { margin-top: 8px; font-size: 13px; color: var(--zb-accent); min-height: 1em; }
.ms-booking-coupon__msg.is-error { color: #c0392b; }

/* ---- Custom Duration variant pills ---- */
.ms-booking-durations__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-booking-widget .ms-booking-durations .ms-booking-duration-pill {
    min-height: 0; height: auto; padding: 10px 16px; line-height: 1.3; font-size: 14px;
    text-transform: none; letter-spacing: normal; white-space: nowrap;
    background: var(--zb-surface); color: var(--zb-text);
    border: 1px solid var(--zb-border-strong); border-radius: var(--zb-radius-sm);
    cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.ms-booking-widget .ms-booking-durations .ms-booking-duration-pill:hover,
.ms-booking-widget .ms-booking-durations .ms-booking-duration-pill:focus { background: var(--zb-surface); color: var(--zb-text); border-color: var(--zb-accent); outline: none; }
.ms-booking-widget .ms-booking-durations .ms-booking-duration-pill.is-selected,
.ms-booking-widget .ms-booking-durations .ms-booking-duration-pill.is-selected:hover,
.ms-booking-widget .ms-booking-durations .ms-booking-duration-pill.is-selected:focus { background: var(--zb-accent); border-color: var(--zb-accent); color: var(--zb-accent-ink); }

.ms-booking-picker__cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-booking-picker__cat-count { flex: 0 0 auto; color: var(--zb-muted); font-size: .88em; }
/* Staff photo avatar in the person picker. */
.ms-booking-picker__avatar {
    flex: 0 0 auto; width: 34px; height: 34px;
    border-radius: 50%; object-fit: cover; max-width: none;
    margin-right: 2px;
}
/* Service image thumb in the service picker (rounded square). */
.ms-booking-picker__thumb {
    flex: 0 0 auto; width: 38px; height: 38px;
    border-radius: 9px; object-fit: cover; max-width: none;
    margin-right: 2px;
}
.ms-booking-picker__item-name { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-booking-picker__price { flex: 0 0 auto; color: var(--zb-accent); font-weight: 600; }

/* Beat the kit's button:hover/:focus (forces accent bg + #fff text on EVERY button — incl. calendar
   days + slots). 4 classes here outrank the kit's `.kit button:hover` (2 classes + 1 type). */
.ms-booking-widget .ms-booking-calendar__day.is-available:hover { background: var(--zb-surface); color: var(--zb-text); border-color: var(--zb-accent); }
.ms-booking-widget .ms-booking-calendar__day.is-selected,
.ms-booking-widget .ms-booking-calendar__day.is-selected:hover { background: var(--zb-accent); color: var(--zb-accent-ink); border-color: var(--zb-accent); }
.ms-booking-widget .ms-booking-calendar__day.is-disabled:hover { background: transparent; color: var(--zb-text); border-color: transparent; }
.ms-booking-widget .ms-booking-time-slot:hover { background: var(--zb-surface); color: var(--zb-text); border-color: var(--zb-accent); }
.ms-booking-widget .ms-booking-time-slot.is-selected,
.ms-booking-widget .ms-booking-time-slot.is-selected:hover { background: var(--zb-accent); color: var(--zb-accent-ink); border-color: var(--zb-accent); }
.ms-booking-widget .ms-booking-calendar__nav:hover { background: var(--zb-accent-soft); color: var(--zb-text); border-color: var(--zb-accent); }
.ms-booking-widget .ms-booking-back:hover { background: var(--zb-accent-soft); color: var(--zb-text); border-color: var(--zb-accent); }
.ms-booking-widget .ms-booking-next:hover,
.ms-booking-widget .ms-booking-submit:hover { background: var(--zb-accent); color: var(--zb-accent-ink); border-color: var(--zb-accent); }
/* Collapse is a compact text+icon LINK, not a big button — fixed height so it can't stretch. */
.ms-booking-widget .ms-booking-collapse {
    height: 42px; min-height: 0; padding: 0 4px; margin-top: auto;
    background: transparent; border: 0; box-shadow: none;
    color: var(--zb-muted); letter-spacing: normal;
}
.ms-booking-widget .ms-booking-collapse:hover,
.ms-booking-widget .ms-booking-collapse:focus { background: transparent; border: 0; color: var(--zb-accent); }
.ms-booking-widget.is-collapsed .ms-booking-collapse { padding: 0; justify-content: center; }

/* The theme's misc.css sets font-family:"ms-social" on ::before of any element whose class starts
   with "ms-" — it hijacked our step-badge number/checkmark (and the success ✓). Reset the font on
   our pseudo-elements, boosted (.ms-booking-widget ancestor) to beat the theme rule. */
.ms-booking-widget [class^="ms-"]::before,
.ms-booking-widget [class*=" ms-"]::before,
.ms-booking-widget [class^="ms-"]::after,
.ms-booking-widget [class*=" ms-"]::after { font-family: inherit; }

/* ============================================================
 * Polish round: custom checkboxes, qty stepper, day heat,
 * popup modal, soft animations
 * ============================================================ */

/* Slim themed scrollbars for the contained date+time box and the times list. */
.ms-booking-dt,
.ms-booking-times { scrollbar-width: thin; scrollbar-color: var(--zb-border-strong) transparent; }
.ms-booking-times { padding-right: 6px; }
.ms-booking-times::-webkit-scrollbar { width: 6px; }
.ms-booking-times::-webkit-scrollbar-track { background: transparent; }
.ms-booking-times::-webkit-scrollbar-thumb { background: var(--zb-border-strong); border-radius: 8px; }
.ms-booking-dt::-webkit-scrollbar { width: 6px; }
.ms-booking-dt::-webkit-scrollbar-track { background: transparent; }

/* Custom checkbox (Extras + "Repeat this appointment") — rounded box, springy SVG tick. */
.ms-booking-widget .ms-booking-extra input[type="checkbox"],
.ms-booking-widget .ms-booking-recurring__toggle-row input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 22px; height: 22px; margin: 0 12px 0 0; flex: 0 0 auto;
    display: inline-grid; place-content: center;
    border: 1.5px solid var(--zb-border-strong); border-radius: 7px;
    background: var(--zb-surface); cursor: pointer;
    transition: background .18s, border-color .18s;
}
.ms-booking-widget .ms-booking-extra input[type="checkbox"]::after,
.ms-booking-widget .ms-booking-recurring__toggle-row input[type="checkbox"]::after {
    content: ""; width: 12px; height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: scale(0); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.ms-booking-widget .ms-booking-extra input[type="checkbox"]:checked,
.ms-booking-widget .ms-booking-recurring__toggle-row input[type="checkbox"]:checked {
    background: var(--zb-accent); border-color: var(--zb-accent);
}
.ms-booking-widget .ms-booking-extra input[type="checkbox"]:checked::after,
.ms-booking-widget .ms-booking-recurring__toggle-row input[type="checkbox"]:checked::after { transform: scale(1); }
.ms-booking-widget .ms-booking-extra { gap: 12px; align-items: center; }

/* "Repeat this appointment" selects — same look as every other field. */
.ms-booking-widget .ms-booking-recurring__opts select {
    min-height: 50px; padding: 12px 44px 12px 16px; font-size: 15px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-color: var(--zb-surface); color: var(--zb-text);
    border: 1px solid var(--zb-border-strong); border-radius: var(--zb-radius-sm);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238c8377' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
    cursor: pointer;
}
.ms-booking-widget .ms-booking-recurring__opts select:focus { outline: none; border-color: var(--zb-accent); }
.ms-booking-recurring__opts { gap: 10px; }

/* Number of people — shop-style − / + stepper (the hidden select stays the source of truth). */
.ms-booking-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--zb-border-strong); border-radius: var(--zb-radius-sm); background: var(--zb-surface); overflow: hidden; }
.ms-booking-widget .ms-booking-qty .ms-booking-qty__btn {
    min-height: 48px; min-width: 46px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--zb-muted);
    border: 0; border-radius: 0; cursor: pointer; outline: none;
    transition: background .15s, color .15s;
}
.ms-booking-widget .ms-booking-qty .ms-booking-qty__btn:hover,
.ms-booking-widget .ms-booking-qty .ms-booking-qty__btn:focus { background: var(--zb-accent-soft); color: var(--zb-accent); border: 0; outline: none; }
.ms-booking-qty__val {
    min-width: 56px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: var(--zb-text);
    border-left: 1px solid var(--zb-border); border-right: 1px solid var(--zb-border);
    padding: 0 10px;
}

/* Calendar heat: available days FILL bottom-up by the exact booking percentage
   (a 33%-booked day is filled to 1/3 of its height) — soft accent so the number stays legible. */
.ms-booking-widget .ms-booking-calendar__day.is-available:not(.is-selected)[style*="--zb-day-load"] {
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--zb-accent) 28%, var(--zb-surface)) var(--zb-day-load, 0%),
        var(--zb-surface) var(--zb-day-load, 0%)
    );
}

/* ---- Popup mode: trigger button + modal ---- */
/* Elementor containers propagate `text-align: var(--text-align)` (e.g. centred headers) —
   the widget and the modal dialog reset it so the form's own alignment always wins.
   (The trigger button's position inside the container still follows the container.) */
.ms-booking-widget,
.ms-booking-modal__dialog { text-align: start; }
.ms-booking-popup-launch { display: inline-block; }

/* Design skins paint a background box on .ms-booking-widget — the trigger's tiny wrapper
   must NOT get that box (a button framed in a dark/glass container looks broken). */
.zb-skin-dark .ms-booking-widget.ms-booking-popup-launch,
.zb-skin-glass .ms-booking-widget.ms-booking-popup-launch {
    background: none; padding: 0; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* The skin look belongs INSIDE the modal instead. */
.zb-skin-dark .ms-booking-modal__dialog { background: #17151b; }
.ms-booking-widget .ms-booking-popup-btn {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 0 30px; font-size: 15px; font-weight: 600; letter-spacing: .02em;
    text-transform: none; white-space: nowrap; line-height: 1;
    background: var(--zb-accent); color: var(--zb-accent-ink);
    border: 1px solid var(--zb-accent); border-radius: var(--zb-radius);
    cursor: pointer; transition: opacity .15s, transform .15s;
}
.ms-booking-widget .ms-booking-popup-btn:hover,
.ms-booking-widget .ms-booking-popup-btn:focus { background: var(--zb-accent); color: var(--zb-accent-ink); opacity: .9; transform: translateY(-1px); outline: none; }
.zb-btn-pill .ms-booking-widget .ms-booking-popup-btn { background: var(--zb-surface); color: var(--zb-text); border-color: var(--zb-border-strong); padding-right: 10px; }
.zb-btn-pill .ms-booking-widget .ms-booking-popup-btn .ms-booking-btn-arrow { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--zb-accent); color: var(--zb-accent-ink); }

.ms-booking-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; }
.ms-booking-modal__backdrop {
    position: fixed; inset: 0;
    background: rgba(20, 17, 14, .5);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .25s ease;
}
.ms-booking-modal__dialog {
    position: relative; width: min(1080px, 100%); margin: auto 0;
    background: var(--zb-surface, #fff); border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
    padding: 34px 34px 30px;
    opacity: 0; transform: translateY(18px) scale(.985);
    transition: opacity .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
}
.ms-booking-modal.is-open .ms-booking-modal__backdrop { opacity: 1; }
.ms-booking-modal.is-open .ms-booking-modal__dialog { opacity: 1; transform: none; }
/* Close button lives OUTSIDE .ms-booking-widget, so the Elementor kit's global `button`
   rule (padding/border/colours) hits it — boosted selector + hard resets beat it. */
.ms-booking-modal .ms-booking-modal__dialog .ms-booking-modal__close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 38px; height: 38px; min-width: 0; min-height: 0; padding: 0; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f0ede8; color: #35312c;
    border: 0; border-radius: 50%; cursor: pointer; outline: none;
    box-shadow: none; letter-spacing: normal; text-transform: none; line-height: 1;
    transition: transform .18s, background .18s;
}
.ms-booking-modal .ms-booking-modal__dialog .ms-booking-modal__close svg { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
.ms-booking-modal .ms-booking-modal__dialog .ms-booking-modal__close:hover,
.ms-booking-modal .ms-booking-modal__dialog .ms-booking-modal__close:focus {
    width: 38px; height: 38px; padding: 0;
    background: #e6e2db; color: #35312c;
    border: 0; border-radius: 50%; outline: none; box-shadow: none;
    transform: rotate(90deg);
}
body.ms-booking-modal-open { overflow: hidden; }
@media (max-width: 640px) { .ms-booking-modal__dialog { padding: 22px 16px 18px; border-radius: 14px; } }

/* ---- Soft, elegant motion (subtle, never flashy) ---- */
/* Sidebar collapse glides instead of snapping (grid-template-columns animates in modern browsers). */
.ms-booking-layout { transition: grid-template-columns .32s cubic-bezier(.22, .61, .36, 1), gap .32s cubic-bezier(.22, .61, .36, 1); }

/* Expanding: labels stay invisible until the column has opened, then reveal ONE BY
   ONE, top to bottom — the same cascade as the time slots under the calendar. */
@keyframes zb-text-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.ms-booking-widget.is-expanding .ms-booking-step-card__title,
.ms-booking-widget.is-expanding .ms-booking-step-card__summary,
.ms-booking-widget.is-expanding .ms-booking-contact__title,
.ms-booking-widget.is-expanding .ms-booking-contact__text,
.ms-booking-widget.is-expanding .ms-booking-collapse__text {
    opacity: 0;
    animation: zb-text-in .26s ease .3s forwards;
}
.ms-booking-widget.is-expanding .ms-booking-step-card:nth-child(2) .ms-booking-step-card__title,
.ms-booking-widget.is-expanding .ms-booking-step-card:nth-child(2) .ms-booking-step-card__summary { animation-delay: .36s; }
.ms-booking-widget.is-expanding .ms-booking-step-card:nth-child(3) .ms-booking-step-card__title,
.ms-booking-widget.is-expanding .ms-booking-step-card:nth-child(3) .ms-booking-step-card__summary { animation-delay: .42s; }
.ms-booking-widget.is-expanding .ms-booking-step-card:nth-child(4) .ms-booking-step-card__title,
.ms-booking-widget.is-expanding .ms-booking-step-card:nth-child(4) .ms-booking-step-card__summary { animation-delay: .48s; }
.ms-booking-widget.is-expanding .ms-booking-contact__title,
.ms-booking-widget.is-expanding .ms-booking-contact__text { animation-delay: .54s; }
.ms-booking-widget.is-expanding .ms-booking-collapse__text { animation-delay: .6s; }
/* The card SURFACE (background / border / shadow) joins the same cascade — the icons
   stay put (they were the collapsed rail), the boxes materialise around them. */
@keyframes zb-card-in { from { background-color: transparent; border-color: transparent; box-shadow: none; } }
.ms-booking-widget.is-expanding .ms-booking-step-card { animation: zb-card-in .26s ease .3s both; }
.ms-booking-widget.is-expanding .ms-booking-step-card:nth-child(2) { animation-delay: .36s; }
.ms-booking-widget.is-expanding .ms-booking-step-card:nth-child(3) { animation-delay: .42s; }
.ms-booking-widget.is-expanding .ms-booking-step-card:nth-child(4) { animation-delay: .48s; }
/* The sidebar photo stays VISIBLE during the glide (bottom-anchored cover keeps it
   steady) — fading it out/in looked worse than the repaint it was hiding. */
.ms-booking-step-card { transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }

/* Step icon takes a gentle breath when its step becomes active. */
@keyframes zb-icon-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.14); }
    100% { transform: scale(1); }
}
.ms-booking-step-card.is-active .ms-booking-step-card__icon { animation: zb-icon-pop .5s cubic-bezier(.34, 1.3, .64, 1); }

/* Time slots cascade in (first 12 get a tiny stagger). */
.ms-booking-times__grid .ms-booking-time-slot { animation: zb-fade .3s ease both; }
.ms-booking-times__grid .ms-booking-time-slot:nth-child(2)  { animation-delay: .025s; }
.ms-booking-times__grid .ms-booking-time-slot:nth-child(3)  { animation-delay: .05s; }
.ms-booking-times__grid .ms-booking-time-slot:nth-child(4)  { animation-delay: .075s; }
.ms-booking-times__grid .ms-booking-time-slot:nth-child(5)  { animation-delay: .1s; }
.ms-booking-times__grid .ms-booking-time-slot:nth-child(6)  { animation-delay: .125s; }
.ms-booking-times__grid .ms-booking-time-slot:nth-child(7)  { animation-delay: .15s; }
.ms-booking-times__grid .ms-booking-time-slot:nth-child(8)  { animation-delay: .175s; }
.ms-booking-times__grid .ms-booking-time-slot:nth-child(9)  { animation-delay: .2s; }
.ms-booking-times__grid .ms-booking-time-slot:nth-child(10) { animation-delay: .225s; }
.ms-booking-times__grid .ms-booking-time-slot:nth-child(11) { animation-delay: .25s; }
.ms-booking-times__grid .ms-booking-time-slot:nth-child(12) { animation-delay: .275s; }

/* Picker dropdowns ease open. */
@keyframes zb-panel-in { from { opacity: 0; transform: translateY(-5px) scale(.99); } to { opacity: 1; transform: none; } }
.ms-booking-picker__panel:not([hidden]),
.ms-booking-cc__panel:not([hidden]) { animation: zb-panel-in .22s cubic-bezier(.22, .61, .36, 1); }

/* ============================================================
 * Mobile pass (≤860px) — left-column layouts compress into a
 * compact horizontal icon stepper above the form.
 * ============================================================ */
@media (max-width: 860px) {
    /* The layout ALWAYS stacks on phones — !important because both the Elementor
       "Left column width" control and the collapsed state outrank the stylesheet. */
    .ms-booking-widget .ms-booking-layout,
    .ms-booking-widget:not(.is-collapsed) .ms-booking-layout,
    .ms-booking-widget.is-collapsed .ms-booking-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Every left/top layout compresses into ONE compact horizontal icon stepper —
       the per-step section heading in the content column carries the step name now. */
    /* No pinned bottom block on mobile → the desktop min-height floor is pointless
       here, and grid's align-content:stretch was inflating the icon-row aside. */
    .ms-booking-layout { min-height: 0 !important; align-content: start; }

    .ms-booking-widget .ms-booking-sidebar {
        flex-direction: row; align-items: center; justify-content: space-evenly;
        gap: 6px; padding: 10px 12px !important; margin-bottom: 6px;
    }
    .ms-booking-widget .ms-booking-step-card {
        flex: 1 1 0; width: auto; padding: 8px;
        display: flex; align-items: center; justify-content: center;
        background: transparent; border: 0; box-shadow: none;
    }
    /* Bigger tap-friendly icons — they carry the whole stepper on mobile. */
    .ms-booking-widget .ms-booking-step-card__icon { position: static; margin: 0; width: 44px; height: 44px; }
    .ms-booking-widget .ms-booking-step-card__icon svg { width: 22px; height: 22px; }
    .ms-booking-step-card__title,
    .ms-booking-step-card__summary,
    .ms-booking-contact,
    .ms-booking-sidebar__bottom,
    .ms-booking-collapse { display: none !important; }

    /* The sidebar PHOTO reads broken as a strip behind icons — colour stays, image goes. */
    .ms-booking-sidebar::after,
    .ms-booking-sidebar::before { display: none; }

    /* Process layout: the numbered circles + vertical line give way to the icons. */
    .zb-layout-process .ms-booking-step-card::before,
    .zb-layout-process .ms-booking-step-card:not([data-step-card="4"])::after { display: none; }
    .zb-layout-process .ms-booking-step-card__icon { display: flex; }

    /* Top layout: its connector line centres on the icons in the compact row. */
    .zb-layout-top .ms-booking-sidebar { margin-bottom: 16px; }
    .zb-layout-top .ms-booking-step-card:not([data-step-card="4"])::after { top: calc(50% - (var(--zb-line-w, 2px) / 2)); }

    /* Buttons and country panel behave on narrow screens. */
    .ms-booking-actions { flex-wrap: wrap; }
    .ms-booking-cc__panel { width: min(300px, calc(100vw - 40px)); }
}

/* ≤560px: the two-column category|service picker becomes one column — the
   categories simply stack vertically above the services, same look as the
   desktop column (a horizontal chip scroller was ugly and easy to miss). */
@media (max-width: 560px) {
    .ms-booking-picker.has-cats .ms-booking-picker__panel { grid-template-columns: 1fr; }
    .ms-booking-picker.has-cats .ms-booking-picker__cats {
        border-right: 0; border-bottom: 1px solid var(--zb-border);
    }

    .ms-booking-modal { padding: 10px; }
    .ms-booking-times__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ms-booking-phone-group { flex-wrap: wrap; }
    .ms-booking-phone-group .ms-booking-phone { min-width: 160px; }

    /* Event cards: the tickets-left pill + CTA drop to their own full-width row. */
    .ms-event__side { width: 100%; justify-content: space-between; }
    .ms-booking-widget .ms-event .ms-event__submit { width: 100%; }
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
    .ms-booking-widget *,
    .ms-booking-modal *,
    .ms-booking-modal__dialog,
    .ms-booking-modal__backdrop,
    .ms-booking-layout { animation: none !important; transition: none !important; }
}