/* Square Booking Sync - Square-Style Frontend */

/* FIX: prevents the mobile rubber-band/overscroll bounce (seen mainly in
   mobile Chrome on iOS) from exposing large blank space past the end of
   the booking widget when a user pulls down past the bottom of the page.
   Safe to apply globally here since this stylesheet is only enqueued on
   pages that actually contain the [yatoon_booking] shortcode. */
html, body { overscroll-behavior-y: contain; }

/* ============================================================
   DESIGN TOKENS - single source of truth.
   This file previously had FOUR separate `:root {}` blocks added
   across different redesign passes (base pink theme -> Square-style
   -> Apple-monochrome -> Apple-polish), several of which silently
   redefined the same variable names. Because :root rules cascade
   in source order, --primary-color/--primary-hover/--primary-light/
   --primary-bg were actually being overridden to near-black by the
   third pass and never restored at the base level - only the
   per-theme classes (.yatoon-template-beauty/clean/luxury further
   down) happened to override it again with real theme colors, which
   is what kept it looking correct. Any new UI added outside those
   theme classes would silently render in black instead of the
   merchant's brand color. Values below are unchanged from what was
   actually being applied before this consolidation - only the
   duplication has been removed. */
:root {
    /* base palette (originally the first :root block) */
    --border-color: #e5e5e5;    /* light grey border */
    --text-primary: #1a1a1a;    /* primary text */
    --text-secondary: #666666;  /* secondary text */

    /* --primary-* was overridden by the "Apple-monochrome" pass below;
       this is that final, effective value (near-black), not the
       original pink. Per-theme classes further down the file override
       it again with real brand colors for beauty/clean/luxury. */
    --primary-color: var(--sbs-ink);
    --primary-hover: #000000;
    --primary-light: #f3f4f6;
    --primary-bg: rgba(17, 24, 39, 0.04);

    /* Square-style pass */
    --sbs-surface: #ffffff;
    --sbs-surface-soft: #f7f8fa;
    --sbs-ink: #111827;
    --sbs-muted: #6b7280;
    --sbs-line: #e5e7eb;
    --sbs-success: #16a34a;
    --sbs-focus: rgba(17, 24, 39, .22);

    /* Apple-polish pass */
    --apple-pink:        #ec4899;
    --apple-pink-hover:  #db2777;
    --apple-pink-light:  rgba(236,72,153,.12);
    --apple-pink-glow:   rgba(236,72,153,.22);
    --apple-ink:         #111827;
    --apple-ink2:        #374151;
    --apple-muted:       #6b7280;
    --apple-line:        rgba(0,0,0,.07);
    --apple-surface:     #ffffff;
    --apple-surface2:    #f8fafc;
    --apple-surface3:    #f2f4f8;
    --apple-radius-sm:   10px;
    --apple-radius-md:   16px;
    --apple-radius-lg:   22px;
    --apple-radius-pill: 999px;
    --apple-shadow-xs:   0 1px 2px rgba(15,23,42,.05);
    --apple-shadow-sm:   0 2px 8px rgba(15,23,42,.08);
    --apple-shadow-md:   0 8px 24px rgba(15,23,42,.10);
    --apple-shadow-lg:   0 20px 50px rgba(15,23,42,.13);
    --apple-blur:        blur(20px);
    --apple-duration:    .2s;
    --apple-ease:        cubic-bezier(.4,0,.2,1);
}

/* Summary rows: shared desktop sidebar and mobile drawer polish. */
.sbs-summary-copy {
    flex: 1;
    min-width: 0;
}

.sbs-summary-label {
    margin-bottom: 2px;
    color: #647084;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.sbs-summary-copy span {
    display: block;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.sbs-summary-copy .sbs-summary-muted {
    color: #8b95a7;
}

.sbs-summary-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sbs-summary-total {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 2px solid #eef0f3;
}

.sbs-summary-total strong {
    color: #111827;
    font-size: 15px;
}

#sbs-summary-total {
    color: var(--primary-color, #ec4899);
    font-size: 18px;
    font-weight: 800;
}

.sbs-booking-container {
    /* Consolidated in 4.3.8 - was 4 separate plain-style desktop rule
       blocks. Deliberately NOT merged with the two blocks further down
       that define --sbs- and --ybs- prefixed custom properties (lower
       risk to leave those in place - this selector has the widest blast
       radius of anything touched in this pass, being the root
       container). Those two still correctly override color after this
       block, same as before. */
    max-width: 1700px;
    margin: 0 auto;
    padding: 28px 18px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(180deg, #f4f6fb 0%, #ffffff 60%, #f4f6fb 100%);
    border-radius: 0;
    color: var(--apple-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Two-Column Layout (Square-style) */
.sbs-booking-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: start;
}

.sbs-booking-main {
    background: #fff;
    border-radius: 10px;
    padding: 26px;
}

.sbs-booking-sidebar {
    position: sticky;
    top: 20px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 30px;
}

@media (max-width: 1024px) {
    .sbs-booking-layout {
        grid-template-columns: 1fr;
    }
    
    .sbs-booking-sidebar {
        position: static;
        order: -1;
    }
}

/* Progress Steps */
.sbs-booking-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
    padding: 0 20px;
}

.sbs-step-track {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: #e5e7eb;
    z-index: 0;
    border-radius: 2px;
}

.sbs-step-progress {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 2px;
    background: var(--primary-color);
    z-index: 1;
    border-radius: 2px;
    transition: width 0.4s ease;
    width: 0%;
}

.sbs-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
    flex: 1;
}

.sbs-step-bubble {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
}

.sbs-step-check {
    display: none;
    position: absolute;
}

.sbs-step-number {
    font-weight: 600;
    color: #9ca3af;
    font-size: 15px;
    transition: all 0.3s ease;
}

.sbs-step.active .sbs-step-bubble {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 15%, transparent);
}

.sbs-step.active .sbs-step-number {
    color: #fff;
}

.sbs-step.completed .sbs-step-bubble {
    background: #10B981;
    border-color: #10B981;
}

.sbs-step.completed .sbs-step-number {
    display: none;
}

.sbs-step.completed .sbs-step-check {
    display: block;
}

.sbs-step-title {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
}

.sbs-step.active .sbs-step-title {
    color: var(--primary-color);
    font-weight: 600;
}

.sbs-step.completed .sbs-step-title {
    color: #10B981;
}

/* Form Steps */
.sbs-form-step {
    display: none;
    position: relative;
}

.sbs-form-step.active {
    display: block;
    animation: fadeIn 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.sbs-form-step h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 30px;
}

/* Services List (Square-style) */
.sbs-services-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
}

.sbs-service-item:hover {
    background: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 6px 20px rgba(17, 24, 39, .08);
    transform: translateY(-1px);
}

.sbs-service-item:first-child {
    border-top: 1px solid #e5e7eb;
}

.sbs-service-item.selected {
    background: #fafafa;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color), 0 6px 20px rgba(17, 24, 39, .08);
}

.sbs-popular-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 2px 9px;
    border-radius: 20px;
    background: #fdf2f8;
    color: #9d174d;
    border: 1px solid #fbcfe8;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.sbs-service-layout {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.sbs-service-content {
    flex: 1;
    min-width: 0;
}

.sbs-service-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f4f6;
}

.sbs-service-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sbs-service-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 0;
}

.sbs-service-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 10px;
    line-height: 1.25;
}

.sbs-book-btn {
    /* Consolidated in 4.3.8 - this single block now carries every property
       that was previously scattered across 10 separate rule blocks for
       this selector (some shared with .sbs-btn-submit/.sbs-btn-next/etc,
       some .sbs-book-btn-only). Verified with a brace-aware cascade
       simulator against the pre-consolidation file so every value below
       is the exact one that was actually winning before, not a guess -
       see the two flagged lines for the one thing worth a deliberate
       decision later. The @media (max-width: 768px) and
       @media (prefers-reduced-motion: reduce) overrides for this selector
       are untouched and still live further down this file. */
    padding: 9px 20px;
    background: #111827 !important; /* FLAG: the original base rule here
       said var(--primary-color), but a later duplicate rule was actually
       winning with this hardcoded near-black. Keeping that as-is since
       it's what has actually been rendering. If you want the button to
       follow the merchant's brand color instead, change this to
       var(--primary-color) - ask and I'll do it plus check a beauty/clean/
       luxury site to confirm nothing regresses. */
    color: #fff;
    border: none;
    border-radius: var(--yatoon-skin-primary-btn-radius, 999px) !important; /* FLAG: original base default was 20px, but every effective override since has been 999px (pill) - using the real current value, not the stale original default. */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background var(--apple-duration), transform .1s var(--apple-ease), box-shadow var(--apple-duration);
    white-space: nowrap;
    min-height: 38px;
    box-shadow: 0 2px 8px var(--apple-pink-glow);
    will-change: transform;
}

.sbs-book-btn:hover {
    background: var(--primary-hover);
}

.sbs-service-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Hide separators - not needed in column layout */
.sbs-service-separator {
    display: none;
}

.sbs-service-duration {
    display: block;
    white-space: nowrap;
}

.sbs-service-brief {
    color: var(--text-secondary);
    width: 100%;
}

.sbs-service-desc-wrap {
    color: var(--text-secondary);
    width: 100%;
    font-size: 13px;
}

.sbs-desc-short,
.sbs-desc-full {
    line-height: 1.5;
}

.sbs-read-more {
    color: var(--sbs-readmore, #16a34a);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 2px;
}

.sbs-read-more:hover {
    text-decoration: underline;
}

.sbs-service-price-row {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.sbs-service-price {
    /* Consolidated in 4.3.8 - was 4 separate desktop rule blocks (plus 2
       legitimate @media (max-width: 768px) overrides left untouched
       further down). Final values verified against the pre-consolidation
       cascade - font-weight/color both come from the last-declared block,
       font-size was 14px everywhere so no change either way. */
    font-size: 14px;
    font-weight: 500;
    color: var(--apple-ink2);
}

/* Old grid styles - keep for backward compatibility but hide */
.sbs-services-grid {
    display: none;
}

/* Services Grid - Remove if using list */
/*.sbs-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}*/

.sbs-service-card {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.sbs-service-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.15);
    transform: translateY(-2px);
}

.sbs-service-card.selected {
    border-color: var(--primary-color);
    background: var(--primary-bg);
}

.sbs-service-image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.sbs-service-name {
    font-size: 18px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 8px 0;
}

.sbs-service-description {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0 0 15px 0;
}

.sbs-service-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
}

.sbs-service-duration {
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sbs-select-btn {
    width: 100%;
    padding: 12px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sbs-select-btn:hover {
    background: var(--primary-hover);
}

/* Options Container (Fresha-style) */
.sbs-options-container {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
}

.sbs-option-group {
    margin-bottom: 20px;
}

.sbs-option-group:last-child {
    margin-bottom: 0;
}

.sbs-option-item:hover {
    border-color: var(--primary-color);
    background: #f9fafb;
}

.sbs-option-item.selected {
    border-color: var(--primary-color);
    background: var(--primary-bg);
}

.sbs-option-info {
    flex: 1;
}

.sbs-option-name {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.sbs-option-description {
    font-size: 14px;
    color: #666;
}

.sbs-option-duration {
    font-size: 13px;
    color: #999;
}

.sbs-option-price {
    /* Consolidated in 4.3.8 - was 3 separate desktop rule blocks (plus 5
       legitimate @media overrides at different breakpoints, left untouched
       further down). Color ends up !important because that's what was
       actually winning before (a later block set it that way). */
    font-size: 14px;
    font-weight: 700;
    color: #111827 !important;
    margin-left: 15px;
    white-space: nowrap;
}

.sbs-option-checkbox {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    cursor: pointer;
}

/* Single-select (main options) -radio circle style */
.sbs-option-main .sbs-option-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.2s;
}
.sbs-option-main .sbs-option-checkbox:checked {
    border-color: var(--primary-color, #ec4899);
    background: #fff;
}
.sbs-option-main .sbs-option-checkbox:checked::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--primary-color, #ec4899);
}

/* Multi-select (addon options) -keep checkbox style */
.sbs-option-addon .sbs-option-checkbox {
    appearance: auto;
    -webkit-appearance: auto;
    border-radius: 4px;
}

/* Staff Grid */
.sbs-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.sbs-staff-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

.sbs-staff-card.selected {
    border-color: var(--primary-color);
    border-width: 2px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent), 0 6px 20px rgba(0,0,0,.08);
}

/* Selected checkmark overlay */
.sbs-staff-card.selected::after {
    content: 'Yes';
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
}

.sbs-staff-avatar-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 12px;
}

.sbs-staff-card.selected .sbs-staff-avatar-wrap::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2.5px solid var(--primary-color);
}

.sbs-staff-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #6b7280;
}

.sbs-staff-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sbs-staff-initial {
    color: #9ca3af;
    font-size: 26px;
}

.sbs-staff-name {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
    line-height: 1.3;
}

.sbs-staff-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-bottom: 5px;
}

.sbs-staff-stars {
    color: #f59e0b;
    font-size: 12px;
    letter-spacing: 1px;
}

.sbs-staff-rating-num {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.sbs-staff-review-count {
    font-size: 11px;
    color: #9ca3af;
}

.sbs-staff-bio {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    margin-top: 2px;
}

.sbs-staff-badge {
    display: inline-block;
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    background: #fdf2f8;
    color: #9d174d;
    border: 1px solid #fbcfe8;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.sbs-staff-badge-exp {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

/* Date & Time */
.sbs-datetime-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 30px;
}

/* Calendar Container */
.sbs-calendar-container {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    max-width: 100%;
}

/* View Toggle Buttons */
.sbs-calendar-header {
    display: flex;
    gap: 0;
    background: #fafafa;
    border-bottom: 1px solid var(--border-color);
}

.sbs-view-toggle {
    flex: 1;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-color);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sbs-view-toggle:last-child {
    border-right: none;
}

.sbs-view-toggle:hover {
    background: #f5f5f5;
}

.sbs-view-toggle.active {
    background: #fff;
    color: var(--text-primary);
    font-weight: 600;
}

/* Week View */
.sbs-week-view {
    display: none;
    padding: 20px;
}

.sbs-week-view.active {
    display: block;
}

.sbs-week-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.sbs-week-range {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.sbs-week-prev,
.sbs-week-next {
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    font-size: 20px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sbs-week-prev:hover,
.sbs-week-next:hover {
    background: #fafafa;
    border-color: var(--primary-color);
}

.sbs-week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.sbs-day-button {
    /* Consolidated in 4.3.8 - was 3 separate single-selector desktop rule
       blocks (plus 1 shared will-change group left as-is, and 4 @media
       overrides across different breakpoints left untouched). No
       !important anywhere in these, so no source-order relocation needed
       this time. */
    padding: 12px 8px;
    background: var(--apple-surface);
    border: 1px solid var(--apple-line);
    border-radius: var(--apple-radius-sm);
    text-align: center;
    cursor: pointer;
    transition: all var(--apple-duration) var(--apple-ease);
    color: var(--text-primary);
    box-shadow: var(--apple-shadow-xs);
}

.sbs-day-button:hover:not(.disabled) {
    background: #fafafa;
    border-color: var(--primary-color);
}

.sbs-day-button.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.sbs-day-button.disabled {
    background: #f9f9f9;
    color: #ccc;
    cursor: not-allowed;
    border-color: #f0f0f0;
}

.sbs-day-button.today {
    border-color: var(--primary-color);
    font-weight: 600;
}

.sbs-day-name {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
}

.sbs-day-button.selected .sbs-day-name {
    color: rgba(255, 255, 255, 0.8);
}

.sbs-day-number {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);   /* explicit dark colour, not inherited */
}

.sbs-day-button.selected .sbs-day-number {
    color: #fff;
}

.sbs-day-button.disabled .sbs-day-number,
.sbs-day-button.disabled .sbs-day-name {
    color: #ccc;
}

/* Month View */
.sbs-month-view {
    display: none;
    padding: 12px;
}

.sbs-month-view.active {
    display: block;
}

/* Month header: prev / title / next */
.sbs-month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.sbs-month-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}
.sbs-month-prev,
.sbs-month-next {
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
}
.sbs-month-prev:hover,
.sbs-month-next:hover { background: #e5e7eb; }

/* 7-column grid */
.sbs-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.sbs-month-dayname {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    padding: 4px 0 6px;
}
.sbs-month-cell {
    /* Consolidated in 4.3.8 - was 2 separate desktop rule blocks, no
       shared groups, no !important, no relocation needed. */
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 2px solid transparent;
    background: #fff;
    transition: background .15s, border-color .15s;
    color: #111827;
}
.sbs-month-cell.empty {
    background: transparent;
    border: none;
    cursor: default;
}
.sbs-month-cell.disabled {
    color: #d1d5db;
    cursor: not-allowed;
    background: transparent;
}
.sbs-month-cell.today {
    border-color: var(--primary-color, #ec4899);
    color: var(--primary-color, #ec4899);
    font-weight: 700;
}
.sbs-month-cell.selected,
.sbs-month-cell.sbs-day-button.selected {
    background: var(--primary-color, #ec4899);
    color: #fff !important;
    border-color: var(--primary-color, #ec4899);
}
.sbs-month-cell:not(.disabled):not(.empty):hover {
    border-color: var(--primary-color, #ec4899);
    background: #fdf2f8;
}

.sbs-time-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 10px;
    min-height: 80px;
}

.sbs-slot-time {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
    display: block;
}

.sbs-slot-check {
    font-size: 11px;
    color: #10b981;
    font-weight: 700;
    opacity: 0;
    transition: opacity .15s ease;
    display: block;
    height: 14px;
}

.sbs-slot-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 20px;
    display: block;
}

.sbs-slot-tag.unavail {
    background: #f3f4f6;
    color: #9ca3af;
    text-decoration: line-through;
}

.sbs-slot-tag.busy {
    background: #fff7ed;
    color: #ea580c;
}

/* Hover - available slot */
.sbs-time-slot:not(.sbs-time-slot-unavail):not(.selected):hover {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 6%, #fff);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.sbs-time-slot:not(.sbs-time-slot-unavail):not(.selected):hover .sbs-slot-check {
    opacity: 1;
}

/* Selected */
.sbs-time-slot.selected {
    border-color: var(--primary-color);
    background: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-color) 35%, transparent);
}

.sbs-time-slot.selected .sbs-slot-time {
    color: #fff;
}

.sbs-time-slot.selected .sbs-slot-check {
    color: rgba(255,255,255,.9);
    opacity: 1;
}

/* Unavailable - muted, not clickable */
.sbs-time-slot.sbs-time-slot-unavail {
    opacity: .5;
    cursor: not-allowed;
    background: #f9fafb;
}

.sbs-time-slot.sbs-time-slot-unavail .sbs-slot-time {
    color: #9ca3af;
    text-decoration: line-through;
}

/* Busy - selectable but needs reassign */
.sbs-time-slot.sbs-time-slot-busy {
    border-color: #f97316;
}

.sbs-time-slot.sbs-time-slot-busy .sbs-slot-time {
    color: #9a3412;
}

/* AM/PM bucket headers */
.sbs-time-bucket-label {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9ca3af;
    padding: 4px 0 2px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 2px;
}

/* Customer Form */
.sbs-booking-summary {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
}

.sbs-booking-summary h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.sbs-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    gap: 8px;
}

.sbs-summary-edit-btn {
    background: none;
    border: 1.5px solid #e5e7eb;
    border-radius: 6px;
    padding: 4px 7px;
    cursor: pointer;
    font-size: 12px;
    color: #9ca3af;
    flex-shrink: 0;
    transition: all .15s;
    line-height: 1;
}
.sbs-summary-edit-btn:hover {
    border-color: #ec4899;
    background: #fff5f9;
    color: #ec4899;
}

.sbs-summary-item:last-child {
    border-bottom: none;
}

.sbs-summary-total {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    padding-top: 15px;
    margin-top: 10px;
    border-top: 2px solid #e5e7eb;
}

.sbs-customer-form {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 30px;
}

.sbs-form-group {
    margin-bottom: 20px;
    position: relative;
}

.sbs-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.sbs-form-group input,
.sbs-form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.sbs-form-group input:focus,
.sbs-form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.sbs-guest-contact-fields {
    display: grid;
    gap: 12px;
    margin: 4px 0 20px;
}

.sbs-guest-contact-card {
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    background: #f9fafb;
}

.sbs-guest-contact-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    color: #111827;
    font-size: 14px;
    font-weight: 800;
}

.sbs-guest-contact-title span {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.sbs-guest-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.sbs-guest-contact-grid input {
    width: 100%;
    padding: 11px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
}

/* Navigation Buttons */
.sbs-navigation-buttons {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.sbs-btn-back {
    background: #f3f4f6;
    color: #374151;
}

.sbs-btn-back:hover {
    background: #e5e7eb;
}

.sbs-btn-next:hover,
.sbs-btn-submit:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,.14);
}

.sbs-btn:active {
    transform: translateY(0) scale(.98);
    box-shadow: none;
}

.sbs-btn-secondary {
    background: #fff;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.sbs-btn-secondary:hover {
    background: var(--primary-color);
    color: #fff;
}

/* Add More Services -Step 5 Review page (top-right in cart header) */
.sbs-btn-add-more {
    background: var(--primary-color);
    color: #fff;
    border: none;
    flex: 0 0 auto;  /* don't stretch full width */
}

.sbs-btn-add-more:hover {
    background: var(--primary-hover);
    color: #fff;
}

/* Add More Services -Step 4 Calendar page (bottom nav, equal width with Back) */
.sbs-btn-add-more-calendar {
    background: #e00000;
    color: #fff;
    border: none;
    flex: 1;
    padding: 14px 24px;
    font-size: 16px;
}

.sbs-btn-add-more-calendar:hover {
    background: #c00000;
    color: #fff;
}

.sbs-btn-manage-services-calendar {
    background: #ffffff;
    color: #374151;
    border: 2px solid #f9a8d4;
    flex: 1;
    padding: 14px 24px;
    font-size: 16px;
}

.sbs-btn-manage-services-calendar:hover {
    background: #fdf2f8;
    color: #be185d;
    border-color: #ec4899;
}

/* Add More Services -Step 4 Calendar page (top banner compact button) */
.sbs-btn-add-more-banner {
    background: #e00000;
    color: #fff;
    border: none;
    flex: 0 0 auto;
    padding: 6px 14px;
    font-size: 13px;
}

.sbs-btn-add-more-banner:hover {
    background: #c00000;
    color: #fff;
}

/* Banner top-right compact version */
#sbs-pending-services-banner .sbs-btn-add-more-calendar {
    flex: 0 0 auto;
    padding: 6px 14px;
    font-size: 13px;
}

/* Success Message */
.sbs-success-message {
    text-align: center;
    padding: 48px 24px 36px;
    max-width: 480px;
    margin: 0 auto;
}

.sbs-success-icon {
    width: 72px;
    height: 72px;
    background: #10B981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 0 0 8px rgba(16, 185, 129, .12);
}

.sbs-success-message h3 {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.sbs-success-sub {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 0;
}

.sbs-success-cal-row {
    margin: 28px auto 0;
    max-width: 380px;
}

.sbs-success-cal-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9ca3af;
    margin-bottom: 10px;
}

.sbs-success-cal-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.sbs-cal-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s ease;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: #374151;
}

.sbs-cal-btn:hover {
    border-color: #d1d5db;
    background: #f9fafb;
    color: #111827;
}

.sbs-rebooking-nudge {
    margin: 20px auto 0;
    max-width: 420px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 14px 18px;
}

.sbs-rebooking-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    flex-wrap: wrap;
}

.sbs-rebooking-icon {
    color: #16a34a;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.sbs-rebooking-text {
    flex: 1;
    font-size: 13px;
    color: #166534;
    line-height: 1.5;
    min-width: 140px;
}

.sbs-rebooking-btn {
    padding: 7px 14px;
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease;
}

.sbs-rebooking-btn:hover {
    background: #15803d;
}

.sbs-success-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 24px auto 0;
}

.sbs-success-action-link.primary {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

.sbs-success-book-again {
    margin-top: 8px;
    text-transform: none;
}

/* 5.2.0 customer-front experience upgrades */
.sbs-venue-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    margin: 0 0 22px;
    padding: 20px;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,253,244,.86)),
        #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .07);
}

.sbs-venue-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    color: #16a34a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sbs-venue-hero h2 {
    margin: 0;
    color: #111827;
    font-size: 28px;
    line-height: 1.08;
    letter-spacing: 0;
}

.sbs-venue-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 10px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.35;
}

.sbs-venue-proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 330px;
}

.sbs-venue-proof span,
.sbs-service-badges span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.sbs-service-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.sbs-service-badges span:first-child {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.sbs-next-openings {
    grid-column: 1 / -1;
    margin: 4px 0 12px;
    padding: 14px;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    background: #f0fdf4;
}

.sbs-next-openings-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: #14532d;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.sbs-next-openings-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sbs-next-opening-chip {
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid #86efac;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    cursor: pointer;
    text-align: left;
}

.sbs-next-opening-chip span,
.sbs-next-opening-chip strong {
    display: block;
    line-height: 1.2;
}

.sbs-next-opening-chip span {
    color: #16a34a;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.sbs-next-opening-chip strong {
    margin-top: 3px;
    font-size: 15px;
    font-weight: 900;
}

.sbs-next-opening-chip:hover {
    border-color: #16a34a;
    box-shadow: 0 10px 22px rgba(22, 163, 74, .12);
}

.sbs-empty-suggestions {
    max-width: 520px;
    margin: 0 auto 18px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.45;
}

.sbs-checkout-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 22px;
}

.sbs-checkout-trust-grid > div {
    padding: 13px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

.sbs-checkout-trust-grid strong,
.sbs-checkout-trust-grid span {
    display: block;
}

.sbs-checkout-trust-grid strong {
    color: #111827;
    font-size: 13px;
    line-height: 1.25;
}

.sbs-checkout-trust-grid span {
    margin-top: 4px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.35;
}

.sbs-success-next-card {
    display: grid;
    gap: 7px;
    max-width: 560px;
    margin: 18px auto;
    padding: 16px;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    background: #f0fdf4;
    color: #14532d;
    text-align: left;
}

.sbs-success-next-card strong {
    color: #111827;
    font-size: 15px;
}

.sbs-success-next-card span {
    font-size: 13px;
    line-height: 1.45;
}

.sbs-success-direction-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 6px auto 12px;
    padding: 9px 18px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 768px) {
    .sbs-venue-hero {
        display: block;
        margin: 0 0 14px;
        padding: 16px;
    }

    .sbs-venue-hero h2 {
        font-size: 23px;
    }

    .sbs-venue-proof {
        justify-content: flex-start;
        max-width: none;
        margin-top: 14px;
    }

    .sbs-page-title {
        margin-bottom: 12px !important;
    }

    .sbs-next-openings-list,
    .sbs-checkout-trust-grid {
        grid-template-columns: 1fr;
    }

    .sbs-next-opening-chip {
        min-height: 48px;
    }

    .sbs-service-badges {
        margin-top: 8px;
    }

    .sbs-service-badges span {
        min-height: 24px;
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* 5.2.0 mobile detail fixes */
@media (max-width: 768px) {
    #sbs-guest-pick-banner {
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 68px !important;
        margin: 0 0 18px !important;
        padding: 14px 16px !important;
        overflow: visible !important;
        line-height: 1.3 !important;
    }

    #sbs-guest-pick-banner span {
        min-width: 0 !important;
        line-height: 1.3 !important;
    }

    #sbs-guest-banner-cancel {
        flex: 0 0 auto !important;
        min-height: 36px !important;
        padding: 0 8px !important;
        text-transform: uppercase !important;
    }

    .sbs-staff-card-any,
    body.sbs-booking-immersive .sbs-staff-card-any {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        text-align: center !important;
        min-height: 158px !important;
        padding: 18px 16px !important;
    }

    .sbs-staff-card-any .sbs-staff-image,
    body.sbs-booking-immersive .sbs-staff-card-any .sbs-staff-image {
        margin: 0 auto !important;
        width: 64px !important;
        height: 64px !important;
    }

    .sbs-staff-card-any .sbs-staff-name,
    body.sbs-booking-immersive .sbs-staff-card-any .sbs-staff-name {
        width: 100% !important;
        font-size: 18px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    .sbs-staff-card-any .sbs-staff-bio,
    body.sbs-booking-immersive .sbs-staff-card-any .sbs-staff-bio {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }
}

/* 5.1.9 Fresha-inspired experience polish: quieter shell, sharper states, app-like mobile. */
/* (tokens consolidated into the master :root block at the top of this file) */

.sbs-booking-main,
.sbs-booking-sidebar {
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .07);
}

.sbs-page-title {
    color: var(--sbs-ink);
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.05;
    letter-spacing: 0;
    margin: 0 0 22px;
}

.sbs-category-tabs-wrap {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

.sbs-cat-tab,
.sbs-view-toggle {
    border-radius: 999px;
    letter-spacing: 0;
}

.sbs-cat-tab.active,
.sbs-view-toggle.active {
    background: var(--sbs-ink);
    color: #fff;
    box-shadow: 0 8px 18px rgba(17, 24, 39, .16);
}

.sbs-service-item,

.sbs-service-item {
    /* Consolidated in 4.3.8 - was 6 separate single-selector desktop rule
       blocks (plus 3 shared-selector groups left as-is further down, and
       4 @media (max-width: 768px) overrides left untouched - those still
       have some redundancy among themselves but that's a separate,
       smaller cleanup). NOTE: the border-color longhand from one of the
       old blocks lost to the !important border shorthand from another -
       treating "border" and "border-color" as competing on the same
       longhand, not as two independent properties, matters here. */
    background: var(--apple-surface);
    border: 1px solid rgba(17, 24, 39, 0.09) !important;
    border-radius: 14px !important;
    padding: 18px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform var(--apple-duration) var(--apple-ease), box-shadow var(--apple-duration) var(--apple-ease), border-color var(--apple-duration) var(--apple-ease);
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.04) !important;
    position: relative;
    overflow: hidden;
}
.sbs-staff-card,
.sbs-time-slot,
.sbs-checkout-card,
.sbs-option-card,
.sbs-booking-summary {
    border-radius: 8px !important;
}

.sbs-time-slot {
    /* Consolidated in 4.3.8 - was 4 separate single-selector desktop rule
       blocks (plus 2 shared-selector groups left as-is - this one right
       above, and a will-change group further down - and 6 @media
       overrides across 3 different breakpoints, all left untouched).
       Placed right after the shared border-radius group above on purpose:
       its !important border-radius needs to stay later in source order
       than that group's to keep winning, same as the .sbs-service-item
       fix earlier in this file. */
    position: relative;
    padding: 10px 8px 8px;
    background: var(--apple-surface);
    border: 1px solid rgba(17, 24, 39, 0.10) !important;
    border-radius: 12px !important;
    text-align: center;
    cursor: pointer;
    transition: all var(--apple-duration) var(--apple-ease);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 52px;
    justify-content: center;
    box-shadow: var(--apple-shadow-xs);
}

.sbs-staff-card {
    /* Consolidated in 4.3.8 - was 3 separate single-selector desktop rule
       blocks (plus 3 shared-selector groups left as-is, and 1 @media
       override left untouched). Same source-order reasoning as
       .sbs-time-slot just above - needs to stay after the shared
       border-radius group for its !important to keep winning. */
    background: var(--apple-surface);
    border: 1px solid rgba(17, 24, 39, 0.09) !important;
    border-radius: 16px !important;
    padding: 20px 14px 16px;
    text-align: center;
    cursor: pointer;
    transition: transform var(--apple-duration) var(--apple-ease), box-shadow var(--apple-duration) var(--apple-ease);
    position: relative;
    overflow: hidden;
    box-shadow: var(--apple-shadow-xs);
}

.sbs-service-item:hover,
.sbs-staff-card:hover,
.sbs-time-slot:hover {
    border-color: rgba(17, 24, 39, .26);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .10);
}

.sbs-service-item.selected,
.sbs-staff-card.selected,
.sbs-time-slot.selected,
.sbs-option-card.selected {
    background: #f8fafc;
    border-color: var(--sbs-ink) !important;
    box-shadow: 0 0 0 1px var(--sbs-ink) inset, 0 14px 34px rgba(15, 23, 42, .09);
}

.sbs-btn-submit,
.sbs-btn-next,
#sbs-cart-next-btn {
    border-radius: var(--yatoon-skin-primary-btn-radius, 999px) !important;
    letter-spacing: 0;
}

.sbs-book-btn:hover,
.sbs-btn-submit:hover {
    background: #000;
}

.sbs-btn-next,
#sbs-cart-next-btn {
    background: var(--sbs-success) !important;
    color: #fff !important;
}

.sbs-btn:focus-visible,
.sbs-book-btn:focus-visible,
.sbs-cat-tab:focus-visible,
.sbs-view-toggle:focus-visible,
.sbs-service-item:focus-visible,
.sbs-staff-card:focus-visible,
.sbs-time-slot:focus-visible,
.sbs-summary-edit-btn:focus-visible,
.sbs-summary-remove-btn:focus-visible,
#sbs-cart-expand-btn:focus-visible,
#sbs-cart-next-btn:focus-visible,
#sbs-cart-back-btn:focus-visible {
    outline: 3px solid var(--sbs-focus);
    outline-offset: 3px;
}

/* =====================================================
   APPLE-STYLE DEEP OVERRIDES - all non-tab elements
   分类Tab样式不在此处修改，保持原样
   ===================================================== */

/* ── 1. Reset primary pink vars to Apple ink ── */
/* (tokens consolidated into the master :root block at the top of this file) */

/* ── 2. Container & panels ── */
.sbs-booking-main {
    border-radius: 16px;
    background: #ffffff;
}

.sbs-booking-sidebar {
    border-radius: 16px;
    background: #ffffff;
}

/* ── 3. Progress steps ── */
.sbs-step-bubble {
    width: 36px;
    height: 36px;
    border: 1.5px solid #d1d5db;
    background: #ffffff;
}

.sbs-step.active .sbs-step-bubble {
    background: #111827;
    border-color: #111827;
    box-shadow: 0 0 0 5px rgba(17, 24, 39, 0.10);
}

.sbs-step.completed .sbs-step-bubble {
    background: #111827;
    border-color: #111827;
}

.sbs-step-progress,
.sbs-step-track {
    height: 1.5px;
}

.sbs-step-progress { background: #111827; }
.sbs-step-track { background: #e5e7eb; }

.sbs-step.active .sbs-step-title { color: #111827; }
.sbs-step.completed .sbs-step-title { color: #111827; }

/* ── 4. Section headings ── */
.sbs-form-step h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #111827;
}

/* ── 5. Service list items ── */
.sbs-service-item:hover {
    border-color: rgba(17, 24, 39, 0.22) !important;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.09) !important;
    transform: translateY(-1px);
}

.sbs-service-item.selected {
    background: #f8f9fb !important;
    border-color: #111827 !important;
    box-shadow: 0 0 0 1.5px #111827, 0 8px 24px rgba(17, 24, 39, 0.10) !important;
}

.sbs-service-thumb {
    border-radius: 12px;
}

.sbs-service-name {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.1px;
    color: #111827;
}

.sbs-popular-badge {
    background: #f3f4f6;
    color: #374151;
    border-color: #e5e7eb;
    font-weight: 600;
}

.sbs-book-btn:hover {
    background: #000000 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.22) !important;
}

/* ── 7. Staff cards ── */
.sbs-staff-card:hover {
    border-color: rgba(17, 24, 39, 0.22) !important;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.09) !important;
    transform: translateY(-2px);
}

.sbs-staff-card.selected {
    border: 1.5px solid #111827 !important;
    box-shadow: 0 0 0 1px #111827, 0 8px 24px rgba(17, 24, 39, 0.10) !important;
    background: #f8f9fb;
}

.sbs-staff-card.selected::after {
    color: #111827 !important;
}

.sbs-staff-card.selected .sbs-staff-avatar-wrap::after {
    border-color: #111827 !important;
}

.sbs-staff-badge {
    background: #f3f4f6;
    color: #374151;
    border-color: #e5e7eb;
}

/* ── 8. Calendar navigation ── */
.sbs-week-prev,
.sbs-week-next {
    border-radius: 10px;
    border: 1px solid rgba(17, 24, 39, 0.10);
    background: #f9fafb;
    color: #111827;
}

.sbs-week-prev:hover,
.sbs-week-next:hover {
    background: #f3f4f6;
    border-color: rgba(17, 24, 39, 0.22);
}

.sbs-month-prev,
.sbs-month-next {
    background: #f3f4f6;
    border-radius: 10px;
    color: #111827;
}

.sbs-month-prev:hover,
.sbs-month-next:hover {
    background: #e5e7eb;
}

/* ── 9. Day buttons (week view) ── */
.sbs-day-button:hover:not(.disabled) {
    background: #f3f4f6;
    border-color: rgba(17, 24, 39, 0.22);
}

.sbs-day-button.selected {
    background: #111827 !important;
    border-color: #111827 !important;
    color: #ffffff;
}

.sbs-day-button.today {
    border-color: #111827;
    font-weight: 700;
}

/* ── 10. Month calendar ── */
.sbs-month-cell.today {
    border-color: #111827 !important;
    color: #111827 !important;
    font-weight: 700;
}

.sbs-month-cell.selected,
.sbs-month-cell.sbs-day-button.selected {
    background: #111827 !important;
    border-color: #111827 !important;
    color: #ffffff !important;
}

.sbs-month-cell:not(.disabled):not(.empty):hover {
    background: #f3f4f6 !important;
    border-color: rgba(17, 24, 39, 0.22) !important;
}

/* ── 11. Time slots ── */
.sbs-time-slots {
    background: #f9fafb;
    border-radius: 14px;
    gap: 8px;
}

.sbs-time-slot:not(.sbs-time-slot-unavail):not(.selected):hover {
    border-color: rgba(17, 24, 39, 0.28) !important;
    background: #f3f4f6 !important;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08) !important;
    transform: translateY(-1px);
}

.sbs-time-slot.selected {
    background: #111827 !important;
    border-color: #111827 !important;
    box-shadow: 0 4px 16px rgba(17, 24, 39, 0.22) !important;
}

.sbs-time-slot.selected .sbs-slot-time { color: #ffffff !important; }
.sbs-time-slot.selected .sbs-slot-check { color: rgba(255,255,255,.8) !important; }

/* ── 12. Option / add-on items ── */
.sbs-option-item:hover {
    border-color: rgba(17, 24, 39, 0.26);
    background: #f9fafb;
}

.sbs-option-item.selected {
    border-color: #111827;
    background: #f8f9fb;
}

.sbs-option-main .sbs-option-checkbox:checked {
    border-color: #111827 !important;
}
.sbs-option-main .sbs-option-checkbox:checked::after {
    background: #111827 !important;
}

/* ── 13. Booking summary ── */
.sbs-booking-summary {
    background: #f9fafb !important;
    border: 1px solid rgba(17, 24, 39, 0.09) !important;
    border-radius: 14px !important;
}

.sbs-summary-total {
    color: #111827 !important;
    border-top-color: rgba(17, 24, 39, 0.10) !important;
}

#sbs-summary-total { color: #111827 !important; }

.sbs-summary-edit-btn {
    border-color: rgba(17, 24, 39, 0.14);
    color: #6b7280;
    border-radius: 8px;
}

.sbs-summary-edit-btn:hover {
    border-color: #111827 !important;
    background: #f3f4f6 !important;
    color: #111827 !important;
}

/* ── 14. Customer form ── */
.sbs-customer-form {
    border: 1px solid rgba(17, 24, 39, 0.09);
    border-radius: 16px;
}

.sbs-form-group input,
.sbs-form-group textarea,
.sbs-form-group select {
    border: 1.5px solid rgba(17, 24, 39, 0.14);
    border-radius: 10px;
    transition: border-color .18s, box-shadow .18s;
    background: #ffffff;
}

.sbs-form-group input:focus,
.sbs-form-group textarea:focus,
.sbs-form-group select:focus {
    border-color: #111827 !important;
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.08) !important;
    outline: none;
}

.sbs-guest-contact-card {
    border: 1px solid rgba(17, 24, 39, 0.09);
    border-radius: 14px;
    background: #f9fafb;
}

.sbs-guest-contact-grid input {
    border: 1.5px solid rgba(17, 24, 39, 0.12);
    border-radius: 10px;
}

/* ── 15. Navigation buttons ── */
.sbs-btn-back {
    background: #f3f4f6;
    color: #374151;
    border-radius: 12px;
}

.sbs-btn-back:hover {
    background: #e5e7eb;
}

.sbs-btn-next,
.sbs-btn-submit {
    /* Consolidated in 4.3.8 - was 3 separate .sbs-btn-next+.sbs-btn-submit
       pair-rules (plus a shared 3-way group with #sbs-cart-next-btn for
       letter-spacing, left as-is above, and a now-deleted single-selector
       .sbs-btn-submit rule that always lost to this one's !important
       background anyway). */
    background: #111827 !important;
    color: #ffffff !important;
    border-radius: var(--yatoon-skin-primary-btn-radius, 12px) !important;
    box-shadow: 0 6px 20px var(--apple-pink-glow);
}

.sbs-btn-next:hover,
.sbs-btn-submit:hover {
    background: #000000 !important;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.22) !important;
    transform: translateY(-1px);
}

.sbs-btn-secondary {
    background: #ffffff;
    color: #111827;
    border: 1.5px solid rgba(17, 24, 39, 0.18);
    border-radius: 12px;
}

.sbs-btn-secondary:hover {
    background: #f3f4f6;
    border-color: rgba(17, 24, 39, 0.32);
}

.sbs-btn-add-more {
    background: #111827 !important;
    border-radius: 12px !important;
}

.sbs-btn-add-more:hover { background: #000 !important; }

/* ── 16. Cart bar & mobile drawer ── */
#sbs-mobile-cart-bar {
    background: #111827;
    border: none;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(17, 24, 39, 0.28);
}

#sbs-cart-next-btn {
    background: #ffffff !important;
    color: #111827 !important;
    border-radius: 999px !important;
    font-weight: 700;
}

#sbs-cart-next-btn:hover {
    background: #f3f4f6 !important;
}

/* ── 17. Success page ── */
.sbs-success-icon {
    background: #111827 !important;
    box-shadow: 0 0 0 8px rgba(17, 24, 39, 0.10) !important;
}

.sbs-success-action-link.primary {
    background: #111827 !important;
    border-color: #111827 !important;
    color: #ffffff !important;
    border-radius: 12px !important;
}

.sbs-success-action-link.primary:hover {
    background: #000000 !important;
}

/* ── 18. Loading spinner ── */
.sbs-loading .spinner {
    border-top-color: #111827;
}

/* ── 19. Next-opening chip ── */
.sbs-next-opening-chip {
    border-color: rgba(17, 24, 39, 0.14);
    background: #f9fafb;
}

.sbs-next-opening-chip:hover {
    border-color: rgba(17, 24, 39, 0.30);
    background: #f3f4f6;
}

/* ── 20. Mobile bottom spacing is now controlled by the single rule in the
       "Trim excess mobile whitespace" block further down this file - having
       two separate !important rules fighting over the same property here
       was making the actual rendered padding depend on unpredictable cascade
       order instead of a clear, single source of truth. ── */
@media (max-width: 768px) {
    .sbs-booking-main {
        padding-bottom: 20px !important;
    }
}

/* ── END Apple overrides ── */

.sbs-progress-bar {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.sbs-prog-dot {
    border-radius: 999px;
}

.sbs-prog-step.active .sbs-prog-dot,
.sbs-prog-step.completed .sbs-prog-dot {
    background: var(--sbs-ink);
    border-color: var(--sbs-ink);
}

.sbs-prog-step.completed .sbs-prog-label {
    color: var(--sbs-ink);
}

.sbs-booking-summary {
    background: #fff;
}

.sbs-summary-total {
    border-top-color: rgba(17, 24, 39, .10) !important;
}

#sbs-summary-total {
    color: var(--sbs-ink) !important;
}

.sbs-form-group input,
.sbs-form-group textarea,
.sbs-form-group select {
    border-radius: 8px;
    border-color: rgba(17, 24, 39, .14);
}

.sbs-form-group input:focus,
.sbs-form-group textarea:focus,
.sbs-form-group select:focus {
    border-color: var(--sbs-ink);
    box-shadow: 0 0 0 4px rgba(17, 24, 39, .08);
}

@media (max-width: 768px) {
    .sbs-booking-container {
        padding: 0;
        background: #f7f8fa;
    }

    .sbs-booking-main {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 16px 14px 104px;
    }

    .sbs-page-title {
        font-size: 28px;
        margin: 4px 0 16px;
    }

    .sbs-category-tabs-wrap {
        margin-left: -4px;
        margin-right: -4px;
    }

    .sbs-service-item {
        padding: 16px;
        margin-bottom: 10px;
    }

    .sbs-service-name {
        font-size: 16px;
    }

    .sbs-time-slot {
        min-height: 48px;
        font-weight: 700;
    }

    #sbs-mobile-cart-bar {
        left: 10px;
        right: 10px;
        bottom: 10px;
        border-radius: 8px;
        border: 1px solid rgba(17, 24, 39, .10);
        box-shadow: 0 18px 46px rgba(15, 23, 42, .20);
    }

    #sbs-mobile-drawer {
        left: 10px;
        right: 10px;
        border-radius: 8px 8px 0 0;
        border: 1px solid rgba(17, 24, 39, .10);
        box-shadow: 0 -18px 46px rgba(15, 23, 42, .16);
    }
}

.sbs-success-action-note {
    flex-basis: 100%;
    max-width: 520px;
    margin: 0 auto 4px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}

.sbs-success-manage-list {
    display: flex;
    flex-basis: 100%;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sbs-success-action-link.compact {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 13px;
}

/* Loading */
.sbs-loading {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.sbs-loading .spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Category Navigation Pills */
.sbs-category-navigation {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.sbs-category-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 5px 0;
}

.sbs-category-pill {
    padding: 10px 20px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sbs-category-pill:hover {
    background: #fafafa;
    border-color: var(--primary-color);
}

.sbs-category-pill.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* Category Titles in Service List */
.sbs-category-title {
    scroll-margin-top: 20px;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
    color: #ec4899;
    font-weight: 900;
    font-size: 27px;
}

.sbs-category-title:first-child {
    border-top: none;
    padding-top: 0;
}

/* Category Tabs (Square-style) */
.sbs-category-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 30px;
    padding-bottom: 0;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sbs-category-tab {
    padding: clamp(8px, 1.5vw, 14px) clamp(10px, 2.5vw, 24px);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    margin-bottom: -1px;
}

.sbs-category-tab:hover {
    color: var(--text-primary);
}

.sbs-category-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

details summary {
    cursor: pointer;
    color: var(--primary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .sbs-services-grid,
    .sbs-staff-grid {
        grid-template-columns: 1fr;
    }
    
    .sbs-datetime-container {
        grid-template-columns: 1fr;
    }
    
    .sbs-booking-steps {
        overflow-x: auto;
        padding-bottom: 10px;
    }
    
    .sbs-step-title {
        font-size: 12px;
    }
}

/* ============================================================
   NEW: Category Tabs + Service Image (added on top of original UI)
   ============================================================ */

/* Sticky category tab bar */
.sbs-category-tabs-wrap {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 8px;
    padding: 10px 0 10px;
    box-shadow: 0 2px 0 #fff, 0 -8px 0 8px #fff;
}
.sbs-category-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-right: 0;
    max-width: 100%;
}
.sbs-category-tabs.scrolled-end {
    -webkit-mask-image: none;
    mask-image: none;
}
.sbs-category-tabs::-webkit-scrollbar { display: none; }

.sbs-cat-tab {
    /* Consolidated in 4.3.8 - was 3 separate single-selector desktop rule
       blocks (plus 1 shared group above, no !important anywhere, and
       5 @media overrides across different breakpoints left untouched). */
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 18px;
    background: var(--apple-surface);
    border: 1px solid rgba(0,0,0,.10);
    border-radius: var(--apple-radius-pill);
    font-size: 14px;
    font-weight: 600;
    color: var(--apple-ink2);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--apple-duration) var(--apple-ease);
    margin-bottom: 0;
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.9) inset;
    letter-spacing: -.01em;
}
.sbs-cat-tab:hover  { color: #111; border-color: #d1d5db; }
.sbs-cat-tab.active {
    color: #fff;
    background: #050505;
    border-color: #050505;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
}

/* Compact service search bar (below category tabs) */
.sbs-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sbs-service-search-wrap {
    position: relative;
    margin: 2px 0 14px;
}
.sbs-service-search-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
    margin: 2px 0 14px !important;
}
.sbs-service-search-icon {
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #9ca3af !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
.sbs-service-search-input {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    height: 42px !important;
    padding: 0 34px 0 36px !important;
    margin: 0 !important;
    float: none !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    color: #111827 !important;
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(17, 24, 39, .06) !important;
    transition: border-color .15s, box-shadow .15s;
}
.sbs-service-search-input::placeholder { color: #9ca3af; }
.sbs-service-search-input:focus {
    outline: none;
    border-color: var(--yatoon-primary, #ec4899);
    box-shadow: 0 0 0 3px rgba(236, 72, 153, .12);
}
.sbs-service-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
    padding: 0;
}
.sbs-service-search-clear:hover { background: #e5e7eb; color: #111; }
.sbs-service-search-empty {
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    padding: 24px 0;
    margin: 0;
}
.sbs-service-item.sbs-search-hidden,
.sbs-category-title.sbs-search-hidden {
    display: none !important;
}

/* Service row: right column holds image + button */
.sbs-service-right-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-left: 14px;
}

/* Thumbnail image */
.sbs-service-img-wrap {
    width: 92px;
    height: 92px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
    border: 1px solid #f1f5f9;
}
.sbs-service-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Keep original .sbs-book-btn fully intact, just adjust when inside right-col */
.sbs-service-right-col .sbs-book-btn {
    width: 90px;
}

@media (max-width: 600px) {
    .sbs-service-img-wrap { width: 78px; height: 78px; }
    .sbs-service-right-col .sbs-book-btn { width: 78px; font-size: 12px; padding: 8px; }
    .sbs-category-tabs-wrap { margin: 0; padding: 0 8px 14px; }
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.sbs-progress-bar {
    display: flex;
    align-items: center;
    margin: 20px 0 8px;
    padding: 0 4px;
    gap: 0;
    min-width: 0;
}
.sbs-prog-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: default;
    padding: 4px 6px;
    flex-shrink: 0;
}
/* Completed steps are clearly clickable */
.sbs-prog-step.completed,
.sbs-prog-step.clickable {
    cursor: pointer;
    touch-action: manipulation; /* removes 300ms delay on mobile */
    -webkit-tap-highlight-color: transparent;
}
.sbs-prog-step.completed:hover .sbs-prog-dot,
.sbs-prog-step.clickable:hover .sbs-prog-dot {
    background: #15803d;
    border-color: #15803d;
    transform: scale(1.08);
}
/* Active step also tappable (stays in place) */
.sbs-prog-step.active {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.sbs-prog-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #aaa;
    transition: all .2s;
}
.sbs-prog-step.active .sbs-prog-dot {
    background: #000;
    border-color: #000;
    color: #fff;
}
.sbs-prog-step.completed .sbs-prog-dot {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.sbs-prog-step.completed .sbs-prog-dot::after {
    content: '\2713';
    font-size: 13px;
}
/* Hide the number when completed (show checkmark instead) */
.sbs-prog-step.completed .sbs-prog-dot { font-size: 0; }

.sbs-prog-label {
    font-size: 10px;
    font-weight: 500;
    color: #aaa;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.sbs-prog-step.active .sbs-prog-label  { color: #000; font-weight: 700; }
.sbs-prog-step.completed .sbs-prog-label { color: #16a34a; }

.sbs-prog-line {
    flex: 1;
    height: 2px;
    background: var(--border-color);
    margin-bottom: 16px; /* align with dots */
    transition: background .2s;
}
.sbs-prog-line.done { background: #16a34a; }

/* Page title */
.sbs-page-title {
    font-size: 26px;
    font-weight: 700;
    margin: 10px 0 24px;
    letter-spacing: -.3px;
}

/* Times hint text */
.sbs-times-hint {
    color: var(--text-secondary);
    font-size: 14px;
    padding: 24px 16px;
    text-align: center;
}

/* Category title heading */
.sbs-category-title {
    font-size: 20px;
    font-weight: 700;
    margin: 28px 0 8px;
    scroll-margin-top: 50px;
}

@media (max-width: 500px) {
    /* Show labels same as desktop -easier navigation */
    .sbs-prog-label {
        display: block;
        font-size: 9px;
        white-space: nowrap;
    }
    .sbs-prog-step  {
        padding: 4px 1px;
        min-width: 48px;
        min-height: 48px;
        justify-content: center;
    }
    .sbs-prog-dot   { width: 26px; height: 26px; font-size: 11px; }
    #sbs-progress-bar {
        position: relative;
        z-index: 10;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
}

/* Mobile and waitlist styles */
@media (max-width: 400px) {
    /* iPhone SE / mini: 10px */
    .sbs-cat-tab { padding: 7px 8px; font-size: 10px; }
    .sbs-service-name { font-size: 13px; }
    .sbs-service-details,
    .sbs-service-price-row { font-size: 11px; }
    .sbs-service-img-wrap { width: 60px; height: 60px; }
    .sbs-service-right-col .sbs-book-btn { width: 60px; font-size: 10px; }
}

/* ============================================================
   RESPONSIVE LAYOUT
   Responsive layout: desktop two-column, mobile single-column + bottom cart bar
   ============================================================ */

/* Mobile and waitlist styles */
/* Tablet / small desktop (768-1199px): 13px */
@media (min-width: 769px) and (max-width: 1199px) {
    .sbs-cat-tab { font-size: 13px; padding: 10px 15px; }
}
/* Large desktop (1200px+): 14px -already handled by base rule */

@media (min-width: 769px) {
    .sbs-booking-container {
        padding: 30px 20px;
    }
    .sbs-booking-layout {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 32px;
        align-items: start;
    }
    .sbs-booking-main {
        background: #fff;
        border-radius: 8px;
        padding: 30px;
    }
    .sbs-booking-sidebar {
        display: block !important;
        position: sticky;
        top: 20px;
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 24px;
    }
    /* Mobile-only elements hidden on desktop */
    #sbs-mobile-cart-bar,
    #sbs-mobile-drawer,
    #sbs-drawer-backdrop {
        display: none !important;
    }
}

/* Mobile and waitlist styles */
@media (max-width: 768px) {

    .sbs-booking-container {
        padding: 0;
        padding-bottom: 80px; /* space for bottom cart bar */
    }
    .sbs-booking-layout {
        display: block; /* single column */
    }
    .sbs-booking-main {
        padding: 12px 14px 24px;
        border-radius: 0;
        box-shadow: none;
    }
    /* Desktop sidebar fully hidden on mobile */
    .sbs-booking-sidebar {
        display: none !important;
    }

    /* Mobile and waitlist styles */
    .sbs-page-title,
    #sbs-main-title,
    #sbs-add-more-title {
        font-size: 18px !important;
        margin: 10px 0 14px !important;
        font-weight: 700 !important;
    }

    /* Mobile and waitlist styles */
    #sbs-progress-bar { margin: 10px 0 4px; }
    .sbs-prog-dot     { width: 22px; height: 22px; font-size: 9px; }
    .sbs-prog-label   { display: none; }
    .sbs-prog-line    { margin-bottom: 11px; }

    /* Mobile and waitlist styles */
    /* iPhone 14 Pro Max / large Android (430px+): 12px */
    .sbs-category-tabs-wrap {
        overflow: hidden;
        padding-left: 2px;
        padding-right: 2px;
    }
    .sbs-category-tabs {
        gap: 8px;
        overflow-x: hidden;
    }
    .sbs-cat-tab {
        flex: 0 1 auto;
        min-width: 0;
        padding: 8px 10px;
        font-size: 11px;
    }
    #sbs-cat-more-btn {
        flex: 0 0 auto;
        min-width: 66px;
        max-width: 74px;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Mobile and waitlist styles */
    .sbs-category-title { font-size: 15px; margin: 18px 0 6px; }

    /* Mobile and waitlist styles */
    .sbs-service-item  { padding: 16px 14px; margin-bottom: 12px; border-radius: 10px; }
    .sbs-service-name  { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
    .sbs-service-details,
    .sbs-service-price-row { font-size: 12px; }
    .sbs-service-price { font-size: 13px; font-weight: 400; }
    .sbs-service-img-wrap  { width: 74px; height: 74px; border-radius: 8px; }
    .sbs-service-right-col { margin-left: 10px; gap: 6px; }
    .sbs-service-right-col .sbs-book-btn {
        width: 74px; font-size: 11px; padding: 7px 4px;
    }
    .sbs-book-btn { font-size: 12px; padding: 7px 12px; }

    /* Mobile and waitlist styles */
    .sbs-form-step h2 { font-size: 16px; margin-bottom: 12px; }

    /* Mobile and waitlist styles */
    .sbs-option-name  { font-size: 13px; }
    .sbs-option-price { font-size: 13px; }
    .sbs-option-item  { padding: 12px 14px; }

    /* Mobile and waitlist styles */
    .sbs-staff-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .sbs-staff-name { font-size: 13px; }

    /* Mobile and waitlist styles */
    .sbs-day-button  { padding: 7px 2px; border-radius: 6px; }
    .sbs-day-number  { font-size: 13px; }
    .sbs-day-name    { font-size: 9px; margin-bottom: 2px; }
    .sbs-week-days   { gap: 3px; }
    .sbs-times-grid  { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .sbs-time-slot   { font-size: 12px; padding: 8px 4px; }

    /* Mobile and waitlist styles */
    .sbs-form-group label    { font-size: 13px; }
    .sbs-form-group input,
    .sbs-form-group textarea { font-size: 14px; padding: 10px 12px; }

    /* Mobile and waitlist styles */
    .sbs-btn               { font-size: 14px; padding: 11px 16px; }
    .sbs-navigation-buttons { gap: 10px; margin-top: 18px; }
}

/* ============================================================
   MOBILE FLOATING CART BAR
   Mobile bottom cart bar: mobile-only, fully hidden on desktop
   ============================================================ */

/* Hidden by default (desktop controlled by min-width: 769px rule above) */
/* Mobile cart bar: hidden by default, shown by JS when service selected */
#sbs-mobile-cart-bar { display: none; }
#sbs-mobile-drawer   { display: none; }

@media (max-width: 768px) {

    /* Mobile and waitlist styles */
    #sbs-mobile-cart-bar {
        display: none;
        align-items: center;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 9990;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -18px 38px rgba(15, 23, 42, .12);
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        gap: 12px;
        min-height: 78px;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: rgba(236,72,153,.08);
    }
    #sbs-mobile-cart-bar.sbs-bar-visible {
        display: flex;
    }
    #sbs-mobile-cart-bar.sbs-bar-visible.sbs-unified-step-2 {
        display: grid;
    }
    #sbs-mobile-cart-bar:active { background: #fafafa; }

    /* Avatar circle */
    #sbs-cart-avatar {
        width: 42px; height: 42px;
        background: #111827;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 14px; font-weight: 900; color: #fff;
        flex-shrink: 0; overflow: hidden;
    }
    #sbs-cart-avatar img { width: 100%; height: 100%; object-fit: cover; }

    /* Centre text */
    #sbs-cart-info {
        flex: 1;
        min-width: 0;
        padding-right: 2px;
    }
    #sbs-cart-name {
        font-size: 15px; font-weight: 900; color: #111827;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #sbs-cart-meta {
        margin-top: 2px;
        font-size: 12px; color: #6b7280;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Expand button */
    #sbs-cart-expand-btn {
        width: 34px; height: 34px;
        background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 50%;
        font-size: 13px; cursor: pointer; flex-shrink: 0;
        color: #111827; transition: transform .25s, background-color .2s;
        display: flex; align-items: center; justify-content: center;
    }
    #sbs-cart-expand-btn.open { transform: rotate(180deg); }

    /* Next button */
    #sbs-cart-next-btn {
        min-height: 48px;
        padding: 12px 18px;
        background: #16a34a; color: #fff;
        border: none; border-radius: 999px;
        font-size: 14px; font-weight: 900;
        cursor: pointer; flex-shrink: 0;
        white-space: nowrap;
        box-shadow: 0 12px 28px rgba(22, 163, 74, .22);
    }
    #sbs-cart-next-btn:disabled {
        background: #e5e7eb;
        color: #9ca3af;
        cursor: default;
        box-shadow: none;
    }

    #sbs-cart-back-btn {
        display: none;
        min-height: 44px;
        padding: 10px 14px;
        border: 1px solid #d1d5db;
        border-radius: 999px;
        background: #fff;
        color: #111827;
        font-size: 13px;
        font-weight: 850;
        cursor: pointer;
        flex-shrink: 0;
        white-space: nowrap;
    }

    #sbs-mobile-cart-bar.sbs-unified-step-2 {
        display: grid;
        grid-template-columns: minmax(76px, .75fr) minmax(0, 1.8fr) minmax(116px, 1.05fr);
        align-items: center;
        gap: 10px;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    }

    #sbs-mobile-cart-bar.sbs-unified-step-2 #sbs-cart-avatar,
    #sbs-mobile-cart-bar.sbs-unified-step-2 #sbs-cart-expand-btn {
        display: none !important;
    }

    #sbs-mobile-cart-bar.sbs-unified-step-2 #sbs-cart-back-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    #sbs-mobile-cart-bar.sbs-unified-step-2 #sbs-cart-info {
        min-width: 0;
    }

    #sbs-mobile-cart-bar.sbs-unified-step-2 #sbs-cart-next-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        padding: 10px 14px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 900;
    }

    #sbs-mobile-cart-bar.sbs-unified-step-2.sbs-needs-choice #sbs-cart-next-btn {
        background: #e5e7eb;
        color: #9ca3af;
        box-shadow: none;
    }

    .sbs-form-step .sbs-navigation-buttons {
        display: none !important;
    }

    /* Slide-up drawer */
    #sbs-mobile-drawer {
        display: none;
        position: fixed;
        bottom: var(--sbs-mobile-bar-height, 78px); left: 0; right: 0;
        z-index: 9989;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -18px 46px rgba(15, 23, 42, .22);
        padding: 0;
        max-height: 75vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.32,.72,0,1);
        touch-action: pan-y;
    }
    #sbs-mobile-drawer.open { display: block; transform: translateY(0); }

    .sbs-drawer-handle {
        width: 36px; height: 4px;
        background: #d1d5db; border-radius: 2px;
        margin: 12px auto 8px;
        cursor: grab;
    }

    /* Progress rows in drawer */
    .sbs-drawer-progress-row { transition: background .15s; }
    .sbs-drawer-progress-row:active { background: #f9fafb; }

    /* Cart rows in drawer */
    .sbs-drawer-appt-row { transition: background .15s; }
    .sbs-drawer-appt-row:active { background: #f9fafb; }

    /* Legacy summary items (fallback) */
    #sbs-mobile-drawer .sbs-summary-item {
        font-size: 13px; padding: 9px 16px;
        display: flex; justify-content: space-between; align-items: center;
        border-bottom: 1px solid #f0f0f0;
    }
    #sbs-mobile-drawer .sbs-summary-item:last-child { border-bottom: none; }
    #sbs-mobile-drawer .sbs-summary-total { font-size: 15px; font-weight: 700; }

    .sbs-drawer-delete-btn {
        background: none; border: none;
        color: #e53e3e; font-size: 16px;
        cursor: pointer; padding: 0 0 0 8px;
        line-height: 1; flex-shrink: 0;
    }

    /* Overlay */
    #sbs-drawer-backdrop {
        position: fixed; inset: 0;
        background: rgba(0,0,0,.3);
        z-index: 9988;
        display: none;
    }
    #sbs-drawer-backdrop.open { display: block; }
}

/* ============================================================
   CATEGORY TABS: More dropdown
   ============================================================ */

/* More button container */
/* ============================================================
   CATEGORY TABS: More dropdown
   dropdown uses position:fixed to escape all parent overflow clipping
   ============================================================ */

/* Mobile and waitlist styles */
/* Font size on mobile is handled by JS (_scaleFontToFit) for precise 3-tab layout.
   The rules below are fallbacks only (before JS runs). */

@media (max-width: 429px) {
    .sbs-cat-tab { font-size: 10px; padding: 7px 8px; }
}
@media (max-width: 767px) and (min-width: 430px) {
    .sbs-cat-tab { font-size: 11px; padding: 8px 10px; }
}

/* More button styled like other tabs, placed at end of tab row */
#sbs-cat-more-btn {
    flex-shrink: 0;
}
#sbs-cat-more-btn.has-active {
    color: #1a1a1a;
    border-bottom-color: #000;
    font-weight: 700;
}

/* Dropdown: hidden by default, fixed position, JS sets top/left */
.sbs-cat-more-dropdown {
    display: none;
    position: absolute;
    z-index: 999999;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
    min-width: 175px;
    max-height: 55vh;
    overflow-y: auto;
}

.sbs-step-1 {
    position: relative;
}
.sbs-cat-more-dropdown.open {
    display: block !important;
}

.sbs-cat-dropdown-item {
    display: block;
    width: 100%;
    padding: 13px 18px;
    background: none;
    border: none;
    border-bottom: 1px solid #f2f2f2;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: rgba(0,0,0,.04);
}
.sbs-cat-dropdown-item:last-child  { border-bottom: none; }
.sbs-cat-dropdown-item:active,
.sbs-cat-dropdown-item.active { background: #f5f5f5; font-weight: 700; }

/* Desktop: always show all tabs, hide More button */
@media (min-width: 769px) {
    .sbs-cat-overflow    { display: inline-flex !important; }
    #sbs-cat-more-btn    { display: none !important; }
}

/* Mobile: JS (_adjustTabVisibility) controls display inline via style attribute */
/* Default hidden until JS runs */
@media (max-width: 768px) {
    .sbs-cat-overflow { display: none; }
    #sbs-cat-more-btn { display: none; }
}

/* ============================================================
   TEXT US floating button + modal
   ============================================================ */

/* Floating button: bottom-right */
#sbs-text-us-btn {
    position: fixed;
    bottom: 80px;
    right: 16px;
    z-index: 9985;
    background: #ec4899;
    color: #fff;
    border: none;
    border-radius: 28px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(236,72,153,.4);
    transition: transform .2s, box-shadow .2s, padding .4s cubic-bezier(.4,0,.2,1), border-radius .4s, width .4s, max-width .4s;
    font-family: inherit;
    overflow: hidden;
    white-space: nowrap;
    max-width: 160px;
}
/* Collapsed: icon-only pill */
#sbs-text-us-btn.sbs-textus-collapsed {
    padding: 12px;
    border-radius: 50%;
    max-width: 44px;
    width: 44px;
}
#sbs-text-us-btn.sbs-textus-collapsed span {
    opacity: 0;
    width: 0;
    overflow: hidden;
    display: inline-block;
    transition: opacity .3s, width .4s;
}
#sbs-text-us-btn span {
    transition: opacity .3s, width .4s;
}
#sbs-text-us-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(236,72,153,.5);
}
/* On hover when collapsed -re-expand briefly */
#sbs-text-us-btn.sbs-textus-collapsed:hover {
    max-width: 160px;
    width: auto;
    padding: 12px 20px;
    border-radius: 28px;
}
#sbs-text-us-btn.sbs-textus-collapsed:hover span {
    opacity: 1;
    width: auto;
}
#sbs-text-us-btn svg {
    flex-shrink: 0;
}

/* Text Us button: fixed at bottom:80px regardless of cart bar state */
@media (min-width: 769px) {
    #sbs-text-us-btn { bottom: 80px !important; }
}
@media (max-width: 768px) {
    #sbs-text-us-btn {
        bottom: 80px !important;
        transition: padding .4s cubic-bezier(.4,0,.2,1), border-radius .4s, max-width .4s;
    }
}

/* ============================================================
   TEXT US modal form
   ============================================================ */

.sbs-text-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,.5);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.sbs-text-modal.open { display: flex; }

.sbs-text-modal-content {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 12px 48px rgba(0,0,0,.2);
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.sbs-text-modal-header {
    display: flex;
    align-items: center;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #e5e5e5;
}

.sbs-text-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background .15s;
}
.sbs-text-modal-close:hover { background: #f5f5f5; }

.sbs-text-modal-body {
    padding: 20px;
}
.sbs-text-modal-body input,
.sbs-text-modal-body textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 12px;
    font-family: inherit;
    transition: border-color .2s;
}
.sbs-text-modal-body input:focus,
.sbs-text-modal-body textarea:focus {
    outline: none;
    border-color: #ec4899;
}
.sbs-text-modal-body textarea {
    resize: vertical;
    min-height: 90px;
}

.sbs-text-submit-btn {
    width: 100%;
    padding: 14px;
    background: #ec4899;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s;
}
.sbs-text-submit-btn:hover { background: #db2777; }
.sbs-text-submit-btn:disabled { background: #ccc; cursor: default; }

.sbs-text-success {
    padding: 20px;
}

/* Mobile and waitlist styles */
.waitlist-service-label:hover {
    border-color: #ec4899 !important;
    background: #fdf2f8 !important;
}
.waitlist-service-label {
    transition: border-color .15s, background .15s;
}
.waitlist-time-label:hover {
    border-color: #ec4899 !important;
    background: #fdf2f8 !important;
}
.waitlist-time-label {
    transition: border-color .15s, background .15s;
}
#waitlist-service-checkboxes::-webkit-scrollbar { width: 4px; }
#waitlist-service-checkboxes::-webkit-scrollbar-track { background: #f9fafb; }
#waitlist-service-checkboxes::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }

/* ============================================================
   4.8.7 UI Polish: cleaner, calmer booking experience
   ============================================================ */
.sbs-booking-container {
    --sbs-surface: #ffffff;
    --sbs-soft: #f8fafc;
    --sbs-line: #e5e7eb;
    --sbs-ink: #111827;
    --sbs-muted: #6b7280;
    --sbs-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --sbs-shadow-md: 0 12px 32px rgba(15, 23, 42, .08);
    color: var(--sbs-ink);
}

.sbs-booking-main,
.sbs-booking-sidebar,
.sbs-customer-form,
.sbs-booking-summary,
.sbs-calendar-container,
.sbs-options-container {
    border: 1px solid var(--sbs-line);
    box-shadow: var(--sbs-shadow-sm);
}

.sbs-booking-main,
.sbs-booking-sidebar,
.sbs-customer-form,
.sbs-booking-summary,
.sbs-calendar-container,
.sbs-options-container,
.sbs-success-message {
    border-radius: 14px;
}

.sbs-booking-sidebar {
    box-shadow: var(--sbs-shadow-md);
}

.sbs-form-step h3 {
    margin: 0 0 22px;
    letter-spacing: 0;
}

.sbs-service-item,
.sbs-option-item,
.sbs-staff-card {
    border-width: 1px;
    border-radius: 14px;
}

.sbs-option-item {
    /* Consolidated in 4.3.8 - was 4 separate single-selector desktop rule
       blocks (plus 2 shared groups left as-is, and 5 @media overrides
       left untouched). No !important anywhere, so no relocation needed. */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 46px 15px 16px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--apple-radius-md);
    margin-bottom: 10px;
    cursor: pointer;
    transition: all var(--apple-duration) var(--apple-ease);
    position: relative;
    gap: 12px;
    background: var(--apple-surface);
    box-shadow: var(--apple-shadow-xs);
}

.sbs-service-item:hover,
.sbs-staff-card:hover,
.sbs-option-item:hover {
    border-color: #cbd5e1;
    box-shadow: var(--sbs-shadow-md);
}

.sbs-service-item.selected,
.sbs-staff-card.selected,
.sbs-option-item.selected {
    background: #fff;
    border-color: #111827;
    box-shadow: 0 0 0 1px #111827 inset, var(--sbs-shadow-md);
}

.sbs-service-name,
.sbs-staff-name,
.sbs-option-name {
    color: var(--sbs-ink);
    letter-spacing: 0;
}

.sbs-service-details,
.sbs-service-description,
.sbs-service-desc-wrap,
.sbs-staff-bio,
.sbs-option-description,
.sbs-option-duration {
    color: var(--sbs-muted);
}

.sbs-service-price-row {
    margin-top: 12px;
}

.sbs-read-more {
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.sbs-btn,
.sbs-btn-new-booking,
.sbs-success-action-link {
    border-radius: 999px;
}

.sbs-btn,
.sbs-btn-new-booking,
.sbs-success-action-link {
    min-height: 44px;
}

.sbs-success-action-link {
    /* Consolidated in 4.3.8 - was 2 separate single-selector desktop rule
       blocks (plus 3 shared groups left as-is above/below, and 1 @media
       override left untouched). Placed after the two shared groups above
       so its border-radius/min-height correctly keep winning. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: var(--apple-radius-pill);
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -.01em;
    box-shadow: var(--apple-shadow-xs);
    transition: all var(--apple-duration) var(--apple-ease);
}

.sbs-btn {
    /* Consolidated in 4.3.8 - was 3 separate single-selector desktop rule
       blocks (plus 3 shared groups left as-is above/below - none of these
       use !important, but source order among normal-weight declarations
       still decides ties, so this is placed after the two shared groups
       above on purpose, same reasoning as the !important cases earlier
       in this file). */
    flex: 1;
    padding: 14px 24px;
    border: none;
    border-radius: var(--apple-radius-pill);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--apple-duration) var(--apple-ease);
    min-height: 46px;
    letter-spacing: -.01em;
}

.sbs-book-btn:hover,
.sbs-btn-next:hover,
.sbs-btn-submit:hover,
.sbs-btn-new-booking:hover {
    transform: translateY(-1px);
}

.sbs-btn-back,
.sbs-btn-secondary {
    border: 1px solid #d1d5db;
}

.sbs-form-group input,
.sbs-form-group textarea {
    border-width: 1px;
    border-radius: 10px;
    box-shadow: none;
}

.sbs-form-group input:focus,
.sbs-form-group textarea:focus {
    box-shadow: 0 0 0 3px rgba(236, 72, 153, .12);
}

.sbs-category-tabs-wrap {
    border-bottom-color: #eef2f7;
}

.sbs-category-title {
    color: #111827;
    font-size: 24px;
    line-height: 1.2;
    text-shadow: none;
}

.sbs-calendar-container {
    overflow: hidden;
}

.sbs-time-slots {
    background: #f8fafc;
    border-radius: 0 0 14px 14px;
}

.sbs-success-message {
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: var(--sbs-shadow-sm);
}

@media (max-width: 768px) {
    .sbs-booking-container {
        padding: 16px 5px 48px;
    }

    .sbs-booking-main {
        padding: 18px 14px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .sbs-service-item {
        padding: 16px 14px;
        border-radius: 14px;
        margin-bottom: 12px;
    }

    .sbs-service-name {
        font-size: 17px;
    }

    .sbs-service-details {
        font-size: 13px;
    }

    .sbs-navigation-buttons {
        gap: 10px;
    }

    .sbs-btn {
        padding: 13px 16px;
    }
}

@media (max-width: 480px) {
    .sbs-service-header {
        gap: 10px;
    }

    .sbs-service-right-col {
        margin-left: 6px;
    }

    .sbs-form-step h3 {
        font-size: 22px;
    }

    .sbs-category-title {
        font-size: 22px;
    }
}

/* ============================================================
   4.8.8 UI Polish: Fresha-style service detail and add-ons
   ============================================================ */
.sbs-step-2 > h2,
.sbs-step-2 > h3 {
    margin-bottom: 14px;
}

.sbs-service-detail-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 18px;
    align-items: start;
    padding: 18px;
    margin-bottom: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #f8fafc);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.sbs-service-detail-image {
    order: 2;
    width: 160px;
    border-radius: 14px;
    overflow: hidden;
    background: #f3f4f6;
    align-self: start;
    grid-column: 2;
}

.sbs-service-detail-copy {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
}

.sbs-service-detail-image img {
    display: block;
    width: 100%;
    height: auto;
}

.sbs-service-detail-kicker,
.sbs-related-eyebrow {
    margin-bottom: 6px;
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sbs-service-detail-title {
    margin: 0 0 8px !important;
    color: #111827 !important;
    font-size: 22px !important;
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.sbs-service-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.sbs-service-detail-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #374151;
    font-size: 13px;
    font-weight: 700;
}

.sbs-service-detail-desc {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.55;
}

.sbs-related-options-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin: 0 0 12px;
}

.sbs-related-options-head h4 {
    margin: 0;
    color: #111827;
    font-size: 17px;
    line-height: 1.25;
}

.sbs-related-options-head > span {
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.sbs-option-section {
    margin: 16px 0 0;
}

.sbs-option-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin: 0 0 8px;
}

.sbs-option-section-head h4 {
    margin: 0;
    color: #111827;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.sbs-option-section-head p {
    margin: 0;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.35;
    text-align: right;
}

.sbs-option-group {
    display: grid;
    gap: 10px;
}

.sbs-option-item .sbs-option-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sbs-option-name {
    margin-bottom: 3px;
    font-size: 15px;
    font-weight: 800;
}

.sbs-option-check {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    color: transparent;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 900;
}

.sbs-option-item.selected {
    border-color: #111827;
    background: #fff;
    box-shadow: 0 0 0 1px #111827 inset, 0 10px 24px rgba(15, 23, 42, .08);
}

.sbs-option-item.selected .sbs-option-check {
    border-color: #111827;
    background: #111827;
    color: #fff;
}

.sbs-option-section-addon .sbs-option-item.selected {
    border-color: #16a34a;
    box-shadow: 0 0 0 1px #16a34a inset, 0 10px 24px rgba(22, 163, 74, .10);
}

.sbs-option-section-addon .sbs-option-item.selected .sbs-option-check {
    border-color: #16a34a;
    background: #16a34a;
}

.sbs-option-action-summary {
    flex: 1 1 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
    color: #6b7280;
}

.sbs-option-action-summary.is-ready {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #14532d;
}

.sbs-option-action-title {
    overflow: hidden;
    color: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sbs-option-action-meta {
    margin-top: 2px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}

.sbs-option-action-summary.is-ready .sbs-option-action-meta {
    color: #166534;
}

.sbs-step-2 .sbs-btn-next.is-disabled,
.sbs-step-2 .sbs-btn-next:disabled {
    background: #d1d5db;
    color: #fff;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (min-width: 900px) {
    .sbs-option-section-addon .sbs-option-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   4.9.0 Mobile flow polish: clearer steps, staff, time and review
   ============================================================ */
.sbs-mobile-flow-header {
    display: none;
}

.sbs-staff-intro {
    grid-column: 1 / -1;
    padding: 14px 16px;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    background: #f0fdf4;
}

.sbs-staff-intro strong {
    display: block;
    color: #111827;
    font-size: 15px;
    line-height: 1.25;
}

.sbs-staff-intro p {
    margin: 5px 0 0;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.4;
}

.sbs-staff-card-any {
    border-color: #16a34a;
    background: linear-gradient(180deg, #fff, #f0fdf4);
}

.sbs-staff-card-any.selected {
    border-color: #15803d;
    box-shadow: 0 0 0 1px #15803d inset, 0 10px 24px rgba(22, 163, 74, .12);
}

.sbs-staff-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #111827;
    font-weight: 800;
}

.sbs-staff-card-any .sbs-staff-initial {
    background: #dcfce7;
    color: #15803d;
}

.sbs-time-groups {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.sbs-time-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}

.sbs-time-group-title {
    grid-column: 1 / -1;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
}

.sbs-checkout-card {
    background: #fff;
    border-color: #e5e7eb;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
}

.sbs-checkout-card-heading {
    margin: -4px 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.sbs-checkout-card-heading span {
    display: block;
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.sbs-checkout-card-heading strong {
    display: block;
    margin-top: 2px;
    color: #111827;
    font-size: 18px;
    line-height: 1.25;
}

@media (max-width: 768px) {
    .sbs-mobile-flow-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin: 0 0 16px;
        padding: 14px;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    }

    .sbs-mobile-flow-header strong {
        display: block;
        color: #111827;
        font-size: 17px;
        line-height: 1.25;
    }

    .sbs-mobile-flow-header p {
        margin: 4px 0 0;
        color: #6b7280;
        font-size: 13px;
        line-height: 1.35;
    }

    .sbs-mobile-flow-step {
        display: block;
        margin-bottom: 4px;
        color: #16a34a;
        font-size: 12px;
        font-weight: 800;
    }

    .sbs-mobile-flow-count {
        flex: 0 0 auto;
        padding: 6px 9px;
        border-radius: 999px;
        background: #111827;
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
    }

    .sbs-staff-grid {
        gap: 12px;
    }

    .sbs-staff-card {
        padding: 16px 12px;
    }

    .sbs-staff-card-any {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        text-align: left;
        gap: 12px;
        padding: 15px;
    }

    .sbs-staff-card-any .sbs-staff-image {
        margin: 0;
        width: 56px;
        height: 56px;
    }

    .sbs-time-slots {
        display: block;
        padding: 14px;
    }

    .sbs-time-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
    }

    .sbs-time-slot {
        min-height: 46px;
        padding: 12px 6px;
        font-size: 13px;
        font-weight: 800;
    }

    .sbs-checkout-card {
        padding: 18px 14px;
        border-radius: 16px;
    }

    #sbs-mobile-cart-bar {
        align-items: center;
        gap: 10px;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -10px 30px rgba(15, 23, 42, .10);
    }

    #sbs-cart-name {
        color: #111827;
        font-size: 15px;
        line-height: 1.2;
    }

    #sbs-cart-meta {
        color: #6b7280;
        font-size: 12px;
        line-height: 1.25;
    }

    #sbs-cart-next-btn {
        min-height: 48px;
        border-radius: 999px;
        font-weight: 900;
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    .sbs-time-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   4.9.1 App-style mobile refinement
   ============================================================ */
.sbs-service-img-wrap {
    background: #f3f4f6;
}

.sbs-service-img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sbs-option-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin: 0 0 7px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #15803d;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.sbs-option-section-addon .sbs-option-item:nth-child(2) .sbs-option-badge {
    background: #fdf2f8;
    color: #be185d;
}

.sbs-day-month {
    display: none;
}

@media (max-width: 768px) {
    .sbs-booking-container {
        background: #f8fafc;
    }

    .sbs-booking-main {
        background: #fff;
    }

    .sbs-category-title {
        margin: 10px 0 10px;
        font-size: 21px;
        font-weight: 900;
    }

    .sbs-services-list {
        display: grid;
        gap: 12px;
    }

    .sbs-service-item {
        margin-bottom: 0;
        padding: 0;
        border-color: #e5e7eb;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    }

    .sbs-service-item.selected {
        border-color: #111827;
        box-shadow: 0 0 0 1px #111827 inset, 0 12px 28px rgba(15, 23, 42, .10);
    }

    .sbs-service-content {
        padding: 15px;
    }

    .sbs-service-header {
        align-items: stretch;
        gap: 14px;
    }

    .sbs-service-name {
        margin-bottom: 7px;
        color: #111827;
        font-size: 17px;
        font-weight: 900;
        line-height: 1.22;
    }

    .sbs-service-details {
        color: #6b7280;
        font-size: 13px;
        line-height: 1.48;
    }

    .sbs-service-price-row {
        margin-top: 13px;
    }

    .sbs-service-price {
        color: #374151;
        font-size: 14px;
        font-weight: 500;
    }

    .sbs-service-right-col {
        width: 92px;
        min-width: 92px;
        margin-left: 0;
        justify-content: space-between;
    }

    .sbs-service-img-wrap {
        width: 92px;
        height: 92px;
        border-radius: 14px;
    }

    .sbs-service-right-col .sbs-book-btn {
        width: 92px;
        min-height: 38px;
        margin-top: 10px;
        padding: 8px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .02em;
    }

    .sbs-week-view {
        padding: 14px 0 16px;
    }

    .sbs-week-navigation {
        padding: 0 12px 12px;
        margin-bottom: 12px;
    }

    .sbs-week-days {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 0 12px 4px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .sbs-week-days::-webkit-scrollbar {
        display: none;
    }

    .sbs-day-button {
        flex: 0 0 72px;
        min-height: 86px;
        padding: 10px 8px;
        border-radius: 18px;
        scroll-snap-align: start;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    }

    .sbs-day-month {
        display: block;
        margin-bottom: 3px;
        color: #9ca3af;
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .sbs-day-button.selected .sbs-day-month {
        color: rgba(255, 255, 255, .78);
    }

    .sbs-day-name {
        font-size: 11px;
        font-weight: 800;
    }

    .sbs-day-number {
        margin-top: 2px;
        font-size: 22px;
        font-weight: 900;
    }

    .sbs-time-groups {
        gap: 20px;
    }

    .sbs-time-group-title {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #374151;
        font-size: 14px;
    }

    .sbs-time-group-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e5e7eb;
    }

    .sbs-time-slot {
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    }

    .sbs-related-options-head {
        align-items: flex-start;
    }

    .sbs-related-options-head h4 {
        font-size: 18px;
        font-weight: 900;
    }

    .sbs-option-section-head {
        align-items: flex-start;
    }

    .sbs-option-section-head p {
        max-width: 170px;
        text-align: right;
    }

    .sbs-option-item {
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    }

    .sbs-option-name {
        font-size: 15px;
        font-weight: 900;
        line-height: 1.25;
    }

    .sbs-option-price {
        color: #374151;
        font-size: 14px;
        font-weight: 700;
    }

    .sbs-checkout-card {
        border-color: #dbeafe;
        background: linear-gradient(180deg, #fff, #f8fafc);
    }

    .sbs-checkout-card .sbs-cart-line,
    .sbs-checkout-card .sbs-summary-item {
        border-color: #e5e7eb;
    }

    .sbs-checkout-card .sbs-checkout-appt-card {
        padding: 14px !important;
        border-color: #e5e7eb !important;
        border-radius: 16px !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    }

    .sbs-checkout-appt-title {
        color: #111827 !important;
        font-size: 14px !important;
        font-weight: 900 !important;
    }

    .sbs-checkout-appt-title::before {
    content: '\2713';
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin-right: 6px;
        border-radius: 999px;
        background: #16a34a;
        color: #fff;
        font-size: 12px;
        font-weight: 900;
    }

    .sbs-checkout-actions button {
        min-height: 30px;
        border-radius: 999px !important;
        padding: 4px 10px !important;
        font-weight: 800 !important;
    }

    .sbs-checkout-time {
        margin-top: 10px !important;
        padding-top: 9px;
        border-top: 1px solid #f3f4f6;
        color: #6b7280 !important;
        font-size: 12px !important;
        font-weight: 700;
    }

    #sbs-step5-total {
        margin-top: 12px !important;
        padding: 15px 0 0 !important;
        border-top: 1px solid #d1d5db !important;
    }

    #sbs-mobile-cart-bar {
        min-height: 78px;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(16px);
    }

    #sbs-cart-avatar {
        width: 44px;
        height: 44px;
        font-size: 14px;
        font-weight: 900;
    }

    #sbs-cart-expand-btn {
        width: 42px;
        height: 42px;
        border-radius: 999px;
    }

    #sbs-cart-back-btn {
        min-height: 44px;
    }
}

@media (max-width: 380px) {
    .sbs-service-right-col,
    .sbs-service-img-wrap,
    .sbs-service-right-col .sbs-book-btn {
        width: 82px;
        min-width: 82px;
    }

    .sbs-service-img-wrap {
        height: 82px;
    }

    .sbs-day-button {
        flex-basis: 66px;
    }
}

/* ============================================================
   4.9.2 Product-feel polish: motion, states, forms, success
   ============================================================ */
@keyframes sbsFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sbsPulseSoft {
    0%, 100% { box-shadow: 0 0 0 0 rgba(17, 24, 39, .10); }
    50% { box-shadow: 0 0 0 8px rgba(17, 24, 39, 0); }
}

.sbs-form-step.active {
    animation: sbsFadeUp .22s ease-out both;
}

.sbs-service-item,
.sbs-option-item,
.sbs-staff-card,
.sbs-day-button,
.sbs-time-slot,
.sbs-btn,
.sbs-success-action-link {
    will-change: transform;
}

.sbs-service-item:active,
.sbs-option-item:active,
.sbs-staff-card:active,
.sbs-day-button:active,
.sbs-time-slot:active,
.sbs-book-btn:active,
.sbs-btn:active {
    transform: scale(.985);
}

#sbs-toast {
    position: fixed;
    left: 50%;
    bottom: calc(92px + env(safe-area-inset-bottom));
    z-index: 100000;
    width: min(440px, calc(100vw - 28px));
    padding: 13px 16px;
    border-radius: 14px;
    background: #111827;
    color: #fff;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity .2s ease, transform .2s ease;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .24);
    white-space: pre-line;
}

#sbs-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

#sbs-toast.error {
    background: #991b1b;
}

#sbs-toast.success {
    background: #166534;
}

.sbs-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 138px;
    border: 1px dashed #e5e7eb;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #f8fafc);
    color: #6b7280;
    font-size: 14px;
    font-weight: 700;
}

.sbs-loading .spinner {
    width: 24px;
    height: 24px;
    border-width: 3px;
}

.sbs-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    padding: 34px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #f8fafc);
    text-align: center;
}

.sbs-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #111827;
    font-size: 28px;
    font-weight: 900;
}

.sbs-empty-title {
    margin: 0 0 7px;
    color: #111827;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.28;
}

.sbs-empty-subtext {
    margin: 0 0 20px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.45;
}

.sbs-empty-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sbs-empty-actions button {
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    cursor: pointer;
    font-size: 14px;
    font-weight: 850;
}

.sbs-empty-actions .sbs-try-next-date {
    border-color: #111827;
    background: #111827;
    color: #fff;
}

.sbs-empty-separator {
    color: #d1d5db;
    font-size: 13px;
    font-weight: 800;
}

.sbs-form-group.is-focused label {
    color: #111827;
}

.sbs-form-group.is-focused input,
.sbs-form-group.is-focused textarea {
    border-color: #111827;
    box-shadow: 0 0 0 4px rgba(17, 24, 39, .08);
}

.sbs-form-group input:valid,
.sbs-form-group textarea:not(:placeholder-shown) {
    border-color: #d1d5db;
}

.sbs-btn-submit:disabled,
.sbs-btn-next:disabled,
.sbs-text-submit-btn:disabled {
    opacity: .72;
    cursor: wait;
}

.sbs-btn-submit:disabled {
    animation: sbsPulseSoft 1.6s ease-in-out infinite;
}

.sbs-success-message {
    position: relative;
    overflow: hidden;
    border: 1px solid #dcfce7;
    background:
        radial-gradient(circle at 50% -20%, rgba(22, 163, 74, .16), transparent 42%),
        #fff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .10);
}

.sbs-success-icon {
    box-shadow: 0 12px 30px rgba(16, 185, 129, .25);
    animation: sbsPulseSoft 2s ease-in-out infinite;
}

.sbs-success-message h3 {
    color: #111827;
    font-size: 26px;
    font-weight: 950;
    line-height: 1.15;
}

.sbs-success-message p {
    color: #4b5563;
    font-size: 15px;
    line-height: 1.55;
}

@media (max-width: 768px) {
    #sbs-toast {
        bottom: calc(88px + env(safe-area-inset-bottom));
        font-size: 13px;
    }

    .sbs-customer-form {
        padding: 18px 14px;
        border-radius: 16px;
        border-width: 1px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    }

    .sbs-form-group {
        margin-bottom: 16px;
    }

    .sbs-form-group label {
        font-size: 13px;
        font-weight: 850;
    }

    .sbs-form-group input,
    .sbs-form-group textarea {
        min-height: 48px;
        border-width: 1px;
        border-radius: 14px;
        background: #fff;
        font-size: 16px;
    }

    .sbs-customer-form .sbs-navigation-buttons {
        position: sticky;
        bottom: calc(86px + env(safe-area-inset-bottom));
        z-index: 4;
        margin: 20px -4px 0;
        padding: 10px 0 0;
        background: linear-gradient(180deg, rgba(255,255,255,0), #fff 28%);
    }

    .sbs-customer-form .sbs-btn {
        min-height: 48px;
        border-radius: 999px;
        font-weight: 900;
    }

    .sbs-empty-state {
        min-height: 220px;
        border-radius: 18px;
    }

    .sbs-empty-actions {
        width: 100%;
    }

    .sbs-empty-actions button {
        flex: 1 1 100%;
    }

    .sbs-empty-separator {
        display: none;
    }

    .sbs-success-message {
        padding: 44px 18px;
        border-radius: 20px;
    }

    .sbs-success-message h3 {
        font-size: 24px;
    }

    .sbs-success-actions {
        display: grid;
        gap: 10px;
    }

    .sbs-success-action-link,
    .sbs-btn-new-booking {
        width: 100%;
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}

@media (max-width: 640px) {
    .sbs-form-step .sbs-navigation-buttons {
        display: none !important;
    }

    .sbs-service-detail-panel {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .sbs-service-detail-image {
        order: 0;
        width: 100%;
        min-height: unset;
        aspect-ratio: unset;
        grid-column: auto;
    }

    .sbs-service-detail-copy {
        grid-column: auto;
        grid-row: auto;
    }

    .sbs-service-detail-title {
        font-size: 21px !important;
    }

    .sbs-related-options-head,
    .sbs-option-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .sbs-option-section-head p {
        text-align: left;
    }

    .sbs-option-item {
        padding: 14px 44px 14px 14px;
        min-height: 72px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .sbs-option-price {
        font-size: 13px;
    }

    .sbs-option-action-summary {
        grid-column: 1 / -1;
        order: -1;
        padding: 11px 13px;
        border-radius: 15px;
    }
}

@media (max-width: 390px) {
    .sbs-form-step .sbs-navigation-buttons {
        display: none !important;
    }

    #sbs-mobile-cart-bar.sbs-unified-step-2 {
        grid-template-columns: minmax(64px, .68fr) minmax(0, 1.55fr) minmax(102px, 1fr);
        gap: 8px;
    }

    #sbs-mobile-cart-bar.sbs-unified-step-2 #sbs-cart-back-btn,
    #sbs-mobile-cart-bar.sbs-unified-step-2 #sbs-cart-next-btn {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 13px;
    }
}
/* ============================================================
   5.1.1 Mobile booking experience polish
   ============================================================ */
@media (max-width: 768px) {
    body.sbs-booking-immersive .sbs-navigation-buttons {
        display: none !important;
    }

    body.sbs-booking-immersive {
        background: #fff;
    }

    body.sbs-booking-immersive footer:not(.yatoon-booking-credit),
    body.sbs-booking-immersive header,
    body.sbs-booking-immersive .site-header,
    body.sbs-booking-immersive #masthead,
    body.sbs-booking-immersive .elementor-location-header,
    body.sbs-booking-immersive .header,
    body.sbs-booking-immersive .main-header,
    body.sbs-booking-immersive .site-footer,
    body.sbs-booking-immersive #colophon,
    body.sbs-booking-immersive .footer,
    body.sbs-booking-immersive .elementor-location-footer {
        display: none !important;
    }

    body.sbs-booking-immersive .sbs-booking-container {
        max-width: none;
        margin: 0;
        padding: 12px 5px calc(48px + env(safe-area-inset-bottom));
        background: #fff;
    }

    body.sbs-booking-immersive #sbs-main-title,
    body.sbs-booking-immersive #sbs-progress-bar {
        display: none !important;
    }

    body.sbs-booking-immersive .sbs-mobile-flow-header {
        position: sticky;
        top: 0;
        z-index: 50;
        margin: -12px -12px 10px;
        padding: 10px 12px;
        border: 0;
        border-bottom: 1px solid #eef2f7;
        border-radius: 0;
        box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
    }

    body.sbs-booking-immersive .sbs-mobile-flow-header p {
        display: none;
    }

    body.sbs-booking-immersive .sbs-mobile-flow-header strong {
        font-size: 16px;
        line-height: 1.15;
    }

    body.sbs-booking-immersive .sbs-mobile-flow-step {
        margin-bottom: 2px;
        font-size: 11px;
    }

    body.sbs-booking-immersive .sbs-mobile-flow-count {
        padding: 6px 10px;
        font-size: 12px;
        background: #111827;
    }

    body.sbs-booking-immersive .sbs-booking-main {
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    body.sbs-booking-immersive .sbs-step-3 > h3,
    body.sbs-booking-immersive .sbs-step-4 > h3 {
        display: none;
    }

    body.sbs-booking-immersive .sbs-staff-intro {
        margin: 8px 0 12px;
        padding: 12px 14px;
        border-radius: 14px;
    }

    body.sbs-booking-immersive .sbs-staff-intro strong {
        font-size: 16px;
        line-height: 1.25;
    }

    body.sbs-booking-immersive .sbs-staff-intro p {
        font-size: 13px;
        line-height: 1.35;
    }

    body.sbs-booking-immersive .sbs-option-section-head {
        margin-bottom: 10px;
    }

    body.sbs-booking-immersive .sbs-option-item {
        min-height: 72px;
        border-radius: 14px;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
    }

    body.sbs-booking-immersive .sbs-checkout-card {
        border-radius: 16px;
        box-shadow: none;
    }

    body.sbs-booking-immersive .sbs-staff-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    body.sbs-booking-immersive .sbs-staff-card {
        position: relative;
        min-height: 132px;
        padding: 12px 8px 10px;
        border-radius: 12px;
    }

    body.sbs-booking-immersive .sbs-staff-card-any {
        grid-column: 1 / -1;
        min-height: 82px;
        padding: 12px;
        border-radius: 14px;
    }

    body.sbs-booking-immersive .sbs-staff-image {
        width: 58px;
        height: 58px;
        margin-bottom: 8px;
    }

    body.sbs-booking-immersive .sbs-staff-card-any .sbs-staff-image {
        width: 48px;
        height: 48px;
    }

    body.sbs-booking-immersive .sbs-staff-name {
        font-size: 14px;
        line-height: 1.2;
    }

    body.sbs-booking-immersive .sbs-staff-bio {
        font-size: 11px;
        line-height: 1.25;
    }

    body.sbs-booking-immersive .sbs-staff-card.selected {
        border-color: #111827;
        box-shadow: 0 0 0 2px #111827 inset;
    }

    body.sbs-booking-immersive .sbs-time-slots {
        padding: 12px;
    }

    body.sbs-booking-immersive .sbs-time-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    body.sbs-booking-immersive .sbs-time-slot {
        min-height: 48px;
        border-radius: 10px;
        font-size: 13px;
    }

    body.sbs-booking-immersive #sbs-mobile-cart-bar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    }

    body.sbs-booking-immersive #sbs-cart-expand-btn {
        display: none !important;
    }

    body.sbs-booking-immersive #sbs-cart-info {
        min-width: 0;
        margin-left: 2px;
    }

    body.sbs-booking-immersive #sbs-cart-name {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
    }

    body.sbs-booking-immersive #sbs-cart-meta {
        display: block !important;
        margin-top: 1px;
        font-size: 11px;
        color: #6b7280;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.sbs-booking-immersive #sbs-cart-back-btn,
    body.sbs-booking-immersive #sbs-cart-next-btn {
        min-height: 46px;
        border-radius: 999px;
        padding: 0 16px;
        font-size: 13px;
        white-space: nowrap;
    }

    body.sbs-booking-immersive #sbs-cart-next-btn {
        background: #16a34a;
        color: #fff;
        box-shadow: 0 12px 28px rgba(22, 163, 74, .22);
    }

    body.sbs-booking-immersive #sbs-cart-next-btn:disabled {
        background: #e5e7eb;
        color: #9ca3af;
    }

    body.sbs-booking-immersive .sbs-success-actions {
        gap: 8px;
    }

    body.sbs-booking-immersive .sbs-success-action-link {
        border-radius: 999px;
    }
}

/* 5.2.0 category tabs polish: keep the pills, remove the outer frame. */
.sbs-category-tabs-wrap,
body.sbs-booking-immersive .sbs-category-tabs-wrap {
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* 5.2.0 category tabs polish: remove the remaining divider line under the category pills. */
.sbs-category-tabs,
body.sbs-booking-immersive .sbs-category-tabs {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

#sbs-cart-next-btn.sbs-submitting,
body.sbs-booking-immersive #sbs-cart-next-btn.sbs-submitting {
    cursor: progress !important;
    opacity: .82 !important;
    transform: none !important;
}

/* 5.2.0 final mobile detail overrides */
@media (max-width: 768px) {
    #sbs-guest-pick-banner.sbs-guest-pick-banner {
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 68px !important;
        margin: 0 0 18px !important;
        padding: 14px 16px !important;
        overflow: visible !important;
        line-height: 1.3 !important;
    }

    #sbs-guest-pick-banner.sbs-guest-pick-banner span {
        min-width: 0 !important;
        line-height: 1.3 !important;
    }

    #sbs-guest-banner-cancel {
        flex: 0 0 auto !important;
        min-height: 36px !important;
        padding: 0 8px !important;
        text-transform: uppercase !important;
    }

    .sbs-staff-card-any,
    body.sbs-booking-immersive .sbs-staff-card-any {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        text-align: center !important;
        min-height: 158px !important;
        padding: 18px 16px !important;
    }

    .sbs-staff-card-any .sbs-staff-image,
    body.sbs-booking-immersive .sbs-staff-card-any .sbs-staff-image {
        margin: 0 auto !important;
        width: 64px !important;
        height: 64px !important;
    }

    .sbs-staff-card-any .sbs-staff-name,
    body.sbs-booking-immersive .sbs-staff-card-any .sbs-staff-name {
        width: 100% !important;
        font-size: 18px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    .sbs-staff-card-any .sbs-staff-bio,
    body.sbs-booking-immersive .sbs-staff-card-any .sbs-staff-bio {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }
}

/* 5.2.2 mobile cart badge */
#sbs-cart-avatar {
    position: relative;
    overflow: visible !important;
    background: transparent !important;
    color: #111827 !important;
    border-radius: 0 !important;
}

#sbs-cart-avatar .sbs-cart-icon {
    position: relative;
    display: block;
    width: 30px;
    height: 24px;
    margin-top: 7px;
}

#sbs-cart-avatar .sbs-cart-icon::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    width: 20px;
    height: 11px;
    border: 3px solid #111827;
    border-top: 0;
    transform: skewX(-12deg);
}

#sbs-cart-avatar .sbs-cart-icon::after {
    content: "";
    position: absolute;
    left: 1px;
    top: 2px;
    width: 9px;
    height: 3px;
    background: #111827;
    transform: rotate(16deg);
    transform-origin: right center;
}

#sbs-cart-avatar::before,
#sbs-cart-avatar::after {
    content: "";
    position: absolute;
    bottom: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #111827;
}

#sbs-cart-avatar::before { left: 11px; }
#sbs-cart-avatar::after { left: 25px; }

#sbs-cart-avatar .sbs-cart-count {
    position: absolute;
    top: -3px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #1683ff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}
/* 5.2.4 success page fix: keep confirmation content readable on mobile. */
.sbs-step-success .sbs-success-message {
    display: block !important;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    box-sizing: border-box;
}

.sbs-step-success .sbs-success-icon {
    flex: 0 0 auto;
}

.sbs-step-success .sbs-success-message > * {
    max-width: 100%;
}

@media (max-width: 768px) {
    .sbs-step-success .sbs-success-message {
        padding: 34px 18px !important;
        border-radius: 18px;
        overflow: visible;
    }

    .sbs-step-success .sbs-success-message h3 {
        font-size: 24px;
        overflow-wrap: anywhere;
    }

    .sbs-step-success .sbs-success-next-card,
    .sbs-step-success .sbs-success-actions,
    .sbs-step-success .sbs-success-manage-list {
        display: grid;
        width: 100%;
    }
}

/* 5.2.7 availability recovery and mobile polish */
.sbs-availability-empty { border: 1px solid #e5e7eb; background: #fff; border-radius: 12px; padding: 26px 18px; }
.sbs-availability-label { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:#f3f4f6; color:#4b5563; font-size:12px; font-weight:700; margin-bottom:8px; }
.sbs-availability-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:18px; }
.sbs-availability-actions button { min-height:42px; border-radius:999px; padding:10px 16px; border:1px solid #d1d5db; background:#fff; color:#111827; font-weight:700; cursor:pointer; }
.sbs-availability-actions .sbs-try-next-date { background:#111827; color:#fff; border-color:#111827; }
.sbs-availability-actions .sbs-text-us-inline { background:var(--sbs-textus-bg,#ec4899); color:var(--sbs-textus-text,#fff); border-color:var(--sbs-textus-bg,#ec4899); }
@media (max-width: 768px) {
  .sbs-availability-empty { margin: 10px 0; padding: 22px 14px; }
  .sbs-availability-actions { display:grid; grid-template-columns:1fr; }
  .sbs-availability-actions button { width:100%; }
  .sbs-time-slots { gap:8px; }
  .sbs-time-slot { min-height:44px; display:flex; align-items:center; justify-content:center; }
  #sbs-mobile-drawer.open { max-height: min(68vh, 620px); overflow-y:auto; }
}


/* ── Recurring setup UI ───────────────────────────────────────────────────── */
.sbs-recurring-setup {
    margin: 16px auto 0;
    max-width: 420px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 16px 18px;
}
.sbs-recurring-inner { text-align: left; }
.sbs-recurring-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.sbs-recurring-options label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sbs-recurring-freq-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.sbs-freq-btn {
    padding: 6px 14px;
    border: 1.5px solid #bfdbfe;
    border-radius: 20px;
    background: #fff;
    color: #1e40af;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}
.sbs-freq-btn.active,
.sbs-freq-btn:hover {
    background: #1e40af;
    border-color: #1e40af;
    color: #fff;
}
.sbs-recurring-count-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: 13px;
    color: #374151;
    background: #fff;
    margin-bottom: 14px;
}
.sbs-recurring-confirm-btn {
    width: 100%;
    padding: 10px;
    background: #1e40af;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.sbs-recurring-confirm-btn:hover { background: #1d3a8a; }
.sbs-recurring-confirm-btn:disabled { opacity: .6; cursor: default; }
#sbs-recurring-result {
    margin-top: 10px;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #dcfce7;
    color: #166534;
    line-height: 1.5;
}
#sbs-recurring-result.error {
    background: #fee2e2;
    color: #991b1b;
}

/* ── Empty states ─────────────────────────────────────────────────────────── */
.sbs-empty-state {
    text-align: center;
    padding: 32px 20px;
}

.sbs-empty-illustration {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}

.sbs-empty-icon {
    display: none; /* replaced by illustration */
}

.sbs-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 6px;
}

.sbs-empty-subtext {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.6;
    max-width: 280px;
    margin: 0 auto 20px;
}

.sbs-empty-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.sbs-empty-actions button {
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1.5px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    cursor: pointer;
    font-weight: 600;
    transition: all .15s;
}

.sbs-empty-actions button:hover {
    background: var(--primary-color);
    color: #fff;
}

/* No slots available in a time bucket */
.sbs-no-times-in-bucket {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px;
    color: #9ca3af;
    font-size: 13px;
}

/* ── Mobile-first improvements ────────────────────────────────────────────── */

/* Sticky bottom CTA bar on mobile */
.sbs-mobile-cta-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid #e5e7eb;
    z-index: 999;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}

.sbs-mobile-cta-bar .sbs-btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 10px;
}

@media (max-width: 640px) {
    .sbs-mobile-cta-bar {
        display: block;
    }

    /* Time slots - bigger touch targets on mobile */
    .sbs-time-slots {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
        gap: 8px;
        padding: 12px;
    }

    .sbs-time-slot {
        min-height: 56px;
        padding: 10px 6px 8px;
    }

    .sbs-slot-time {
        font-size: 13px;
    }

    /* Service cards - full-width on mobile, image below */
    .sbs-service-thumb {
        width: 64px;
        height: 64px;
    }

    /* Step bar labels hidden on small screens, numbers only */
    .sbs-step-title {
        display: none;
    }

    .sbs-step-bubble {
        width: 34px;
        height: 34px;
    }

    /* Booking form - remove horizontal padding on narrow screens */
    .sbs-booking-container {
        padding: 12px;
    }

    /* Summary sidebar stacks below on mobile */
    .sbs-booking-layout {
        flex-direction: column;
    }

    .sbs-booking-sidebar {
        order: -1;
        margin-bottom: 16px;
    }

    /* Success page calendar buttons stack */
    .sbs-success-cal-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .sbs-cal-btn {
        justify-content: center;
    }

    /* Rebooking nudge inner wraps on small screens */
    .sbs-rebooking-inner {
        gap: 8px;
    }

    .sbs-rebooking-btn {
        width: 100%;
        text-align: center;
    }

    /* Day picker scrollable row on mobile */
    .sbs-calendar-days {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .sbs-calendar-days::-webkit-scrollbar {
        display: none;
    }

    .sbs-day-button {
        min-width: 52px;
        flex-shrink: 0;
    }
}


@media (max-width: 400px) {
    .sbs-time-slots {
        grid-template-columns: repeat(3, 1fr);
    }

    .sbs-step-track,
    .sbs-step-progress {
        display: none;
    }
}

/* ── Sidebar upgrades ─────────────────────────────────────────────────────── */
.sbs-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.sbs-sidebar-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.sbs-sidebar-edit-cart-btn {
    padding: 5px 12px;
    background: #ede9fe;
    color: #5b21b6;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: background .15s;
}

.sbs-sidebar-edit-cart-btn:hover {
    background: #ddd6fe;
}

.sbs-sidebar-empty-guide {
    text-align: center;
    padding: 24px 16px;
    border: 1.5px dashed #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
    margin-bottom: 16px;
}

.sbs-sidebar-empty-guide svg {
    display: block;
    margin: 0 auto 12px;
}

.sbs-sidebar-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 4px;
}

.sbs-sidebar-empty-sub {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.5;
    margin: 0;
}

/* ── Tip / Gratuity UI ────────────────────────────────────────────────────── */
.sbs-tip-group {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 14px 16px;
}

.sbs-tip-group label {
    font-size: 14px;
    font-weight: 600;
    color: #166534;
    margin-bottom: 10px;
    display: block;
}

.sbs-tip-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sbs-tip-btn {
    padding: 7px 16px;
    border: 1.5px solid #bbf7d0;
    border-radius: 20px;
    background: #fff;
    color: #166534;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

.sbs-tip-btn:hover,
.sbs-tip-btn.active {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

/* ── WhatsApp button ──────────────────────────────────────────────────────── */
.sbs-success-whatsapp {
    margin: 12px auto 0;
    max-width: 420px;
    text-align: center;
}

.sbs-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: #25D366;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background .15s ease;
}

.sbs-whatsapp-btn:hover {
    background: #1ebe5d;
    color: #fff;
}

/* ── Gift Card field ──────────────────────────────────────────────────────── */
.sbs-gift-card-group {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 14px 16px;
}

.sbs-gift-card-group label {
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 8px;
    display: block;
}

.sbs-gift-card-row {
    display: flex;
    gap: 8px;
}

.sbs-gift-card-row input {
    flex: 1;
    padding: 9px 12px;
    border: 1.5px solid #fcd34d;
    border-radius: 8px;
    font-size: 14px;
    font-family: monospace;
    letter-spacing: .06em;
    color: #111827;
    background: #fff;
}

.sbs-gift-card-row input:focus {
    outline: none;
    border-color: #f59e0b;
}

.sbs-gift-card-btn {
    padding: 9px 18px;
    background: #f59e0b;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    flex-shrink: 0;
}

.sbs-gift-card-btn:hover { background: #d97706; }
.sbs-gift-card-btn:disabled { opacity: .6; cursor: default; }

#sbs-gift-card-result.success {
    background: #dcfce7;
    color: #166534;
    font-weight: 600;
}

#sbs-gift-card-result.error {
    background: #fee2e2;
    color: #991b1b;
}

/* ═══════════════════════════════════════════════════════════════════
   YATOON 2.1.3 - APPLE-STYLE CARD REFRESH
   ═══════════════════════════════════════════════════════════════════
   New class prefix: ybs-* (yatoon booking system)
   Designed to coexist with legacy sbs-* styles via higher specificity.
   ──────────────────────────────────────────────────────────────────── */

/* ── Service card with hero image (Apple-style) ─────────────────── */
.sbs-service-item.ybs-svc-card {
    overflow: hidden;
    position: relative;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 1px 2px rgba(17,24,39,.04);
    transition: transform .2s cubic-bezier(.4,0,.2,1),
                box-shadow .2s cubic-bezier(.4,0,.2,1),
                border-color .15s ease;
    padding: 0;
    background: #fff;
}

.sbs-service-item.ybs-svc-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0,0,0,.10);
    box-shadow: 0 8px 24px rgba(17,24,39,.08), 0 2px 6px rgba(17,24,39,.04);
}

.sbs-service-item.ybs-svc-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent),
                0 8px 24px rgba(17,24,39,.10);
}

/* Hero image - full-width, gradient fallback */
.ybs-svc-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #f3e8ff, #ddd6fe);
}

.ybs-svc-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
}

.sbs-service-item.ybs-svc-card:hover .ybs-svc-hero img {
    transform: scale(1.04);
}

.ybs-svc-popular-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #9d174d;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Card body - when there's a hero, body sits inside the same card */
.sbs-service-item.ybs-svc-card.has-hero-image .sbs-service-layout {
    padding: 16px 18px;
    border-top: none;
}

.sbs-service-item.ybs-svc-card .sbs-service-layout {
    padding: 16px 18px;
}

.sbs-service-item.ybs-svc-card .sbs-service-content {
    padding: 0;
}

.sbs-service-item.ybs-svc-card .sbs-service-header {
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.sbs-service-item.ybs-svc-card .sbs-service-name {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    letter-spacing: -.01em;
    margin: 0;
}

/* Pills row - duration, rating, etc. */
.ybs-svc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 10px;
    align-items: center;
}

.ybs-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
}

.ybs-pill-duration {
    background: #ecfdf5;
    color: #047857;
}

.ybs-pill-rating {
    background: #fffbeb;
    color: #b45309;
}

.ybs-pill-count {
    color: #92400e;
    font-weight: 500;
    opacity: .75;
}

/* Inline rating (Square card uses this slimmer style) */
.ybs-inline-rating {
    color: #b45309;
    font-weight: 600;
    font-size: 13px;
}

.ybs-inline-rating .ybs-pill-count {
    color: #92400e;
    font-weight: 500;
    opacity: .75;
}

/* ── Apple-style pill button for "Book" / "ADD" ──────────────────── */
.sbs-book-btn.ybs-pill-btn {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 22px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.sbs-book-btn.ybs-pill-btn:hover {
    background: var(--primary-hover, var(--primary-color));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 35%, transparent);
}

.sbs-book-btn.ybs-pill-btn:active {
    transform: scale(.97);
}

/* ── Next-opening hint at bottom of service card ─────────────────── */
.ybs-next-opening {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,.04);
    opacity: .6;
    transition: opacity .3s ease, color .3s ease;
}

.ybs-next-opening.is-loaded {
    opacity: 1;
    color: #047857;
}

.ybs-next-opening.is-urgent {
    color: #be185d;
}

.ybs-next-opening-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
}

.ybs-next-opening.is-loaded .ybs-next-opening-dot {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,.18);
    animation: ybsPulse 2s ease-in-out infinite;
}

.ybs-next-opening.is-urgent .ybs-next-opening-dot {
    background: #ec4899;
    box-shadow: 0 0 0 3px rgba(236,72,153,.18);
}

@keyframes ybsPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
    50%      { box-shadow: 0 0 0 6px rgba(16,185,129,.10); }
}

/* ── Calendar polish for the new local-form calendar ─────────────── */
.sbs-form-step.sbs-step-4 .sbs-calendar-container {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(17,24,39,.04);
    border: 1px solid rgba(0,0,0,.06);
}

.sbs-form-step.sbs-step-4 .sbs-calendar-header {
    display: inline-flex;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 14px;
    gap: 0;
}

.sbs-form-step.sbs-step-4 .sbs-view-toggle {
    background: transparent;
    border: none;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all .15s ease;
}

.sbs-form-step.sbs-step-4 .sbs-view-toggle.active {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ── Mobile tuning ───────────────────────────────────────────────── */
@media (max-width: 600px) {
    .sbs-service-item.ybs-svc-card {
        border-radius: 14px;
    }
    .ybs-svc-hero {
        aspect-ratio: 16 / 9;
    }
    .sbs-service-item.ybs-svc-card .sbs-service-layout {
        padding: 12px 14px;
    }
    .sbs-service-item.ybs-svc-card .sbs-service-name {
        font-size: 15px;
    }
    .ybs-pill {
        font-size: 11px;
        padding: 3px 9px;
    }
    .sbs-book-btn.ybs-pill-btn {
        padding: 7px 14px;
        font-size: 12px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   YATOON APPLE-STYLE UI - Complete Refresh
   Design philosophy: SF Pro aesthetics, frosted glass, precise motion,
   pink primary (#ec4899) on clean white with deep-shadow depth.
   ═══════════════════════════════════════════════════════════════════ */

/* (tokens consolidated into the master :root block at the top of this file) */

/* ── Reset & Base ───────────────────────────────────────────────── */
/* ── Containers ─────────────────────────────────────────────────── */
.sbs-booking-main {
  background: var(--apple-surface);
  border: 1px solid var(--apple-line);
  border-radius: var(--apple-radius-lg);
  box-shadow: var(--apple-shadow-md), 0 1px 0 rgba(255,255,255,.8) inset;
  padding: 32px;
}

.sbs-booking-sidebar {
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: var(--apple-blur);
  backdrop-filter: var(--apple-blur);
  border: 1px solid var(--apple-line);
  border-radius: var(--apple-radius-lg);
  box-shadow: var(--apple-shadow-md);
  padding: 26px;
}

/* ── Progress bar ───────────────────────────────────────────────── */
.sbs-prog-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--apple-surface3);
  border: 1.5px solid rgba(0,0,0,.12);
  font-size: 13px;
  font-weight: 700;
  color: var(--apple-muted);
  transition: all var(--apple-duration) var(--apple-ease);
  box-shadow: var(--apple-shadow-xs);
}

.sbs-prog-step.active .sbs-prog-dot {
  background: var(--apple-ink);
  border-color: var(--apple-ink);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(15,23,42,.08), var(--apple-shadow-sm);
}

.sbs-prog-step.completed .sbs-prog-dot {
  background: #10b981;
  border-color: #10b981;
  box-shadow: 0 0 0 4px rgba(16,185,129,.15), var(--apple-shadow-xs);
}

.sbs-prog-line { background: rgba(0,0,0,.1); }
.sbs-prog-line.done { background: #10b981; }

.sbs-prog-step.active .sbs-prog-label { color: var(--apple-ink); font-weight: 800; }

.sbs-step.active .sbs-step-bubble {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #fff !important;
  box-shadow: 0 0 0 5px rgba(17,24,39,.10) !important;
}
.sbs-step.active .sbs-step-number { color: #fff !important; }
.sbs-step.active .sbs-step-title { color: #111827 !important; font-weight: 800 !important; }

/* ── Page title ─────────────────────────────────────────────────── */
.sbs-page-title {
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--apple-ink);
  line-height: 1.12;
}

/* ── Category tabs ──────────────────────────────────────────────── */
.sbs-category-tabs-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: var(--apple-blur);
  backdrop-filter: var(--apple-blur);
  border-bottom: 1px solid var(--apple-line);
  padding: 10px 0 10px;
  margin-bottom: 8px;
}

.sbs-cat-tab:hover {
  background: var(--apple-surface2);
  border-color: rgba(0,0,0,.14);
  box-shadow: var(--apple-shadow-sm);
}

.sbs-cat-tab.active {
  background: var(--apple-ink);
  border-color: var(--apple-ink);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(17,24,39,.22);
}

/* ── Category title ─────────────────────────────────────────────── */
.sbs-category-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--apple-ink);
  margin: 12px 0 12px;
}

/* ── Service items ──────────────────────────────────────────────── */
.sbs-service-item:hover {
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 10px 28px rgba(15,23,42,.10);
}

.sbs-service-item:active { transform: scale(.99); }

.sbs-service-item.selected {
  border-color: var(--apple-pink);
  box-shadow: 0 0 0 3px var(--apple-pink-light), 0 10px 28px rgba(15,23,42,.10);
  background: #fff;
}

.sbs-service-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--apple-ink);
}

.sbs-service-details,
.sbs-service-desc-wrap { color: var(--apple-muted); font-size: 14px; }

.sbs-book-btn:hover {
  background: var(--apple-pink-hover);
  box-shadow: 0 6px 18px var(--apple-pink-glow);
  transform: translateY(-1px);
}

.sbs-book-btn:active { transform: scale(.96); }

/* ── Staff cards ────────────────────────────────────────────────── */
.sbs-staff-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
  border-color: rgba(0,0,0,.12);
}

.sbs-staff-card.selected {
  border-color: var(--apple-pink);
  border-width: 2px;
  box-shadow: 0 0 0 3px var(--apple-pink-light), 0 12px 28px rgba(15,23,42,.10);
}

.sbs-staff-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--apple-ink);
}

.sbs-staff-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--apple-surface3), #e8ecf2);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

/* ── Calendar ───────────────────────────────────────────────────── */
.sbs-calendar-container {
  border: 1px solid var(--apple-line);
  border-radius: var(--apple-radius-md);
  overflow: hidden;
  box-shadow: var(--apple-shadow-xs);
}

.sbs-calendar-header {
  background: var(--apple-surface2);
  border-bottom: 1px solid var(--apple-line);
  display: inline-flex;
  padding: 4px;
  border-radius: var(--apple-radius-sm);
  margin: 12px;
  gap: 2px;
}

.sbs-view-toggle {
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--apple-muted);
  cursor: pointer;
  transition: all var(--apple-duration) var(--apple-ease);
}

.sbs-view-toggle.active {
  background: var(--apple-surface);
  color: var(--apple-ink);
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
}

.sbs-day-button:hover:not(.disabled) {
  border-color: var(--apple-pink);
  box-shadow: var(--apple-shadow-sm);
  transform: translateY(-1px);
}

.sbs-day-button.selected {
  background: var(--apple-pink);
  border-color: var(--apple-pink);
  color: #fff;
  box-shadow: 0 4px 14px var(--apple-pink-glow);
}

.sbs-day-button.today {
  border-color: var(--apple-pink);
}

.sbs-month-cell.today {
  border-color: var(--apple-pink);
  color: var(--apple-pink);
  font-weight: 800;
}

.sbs-month-cell.selected {
  background: var(--apple-pink);
  border-color: var(--apple-pink);
  color: #fff;
  box-shadow: 0 3px 10px var(--apple-pink-glow);
}

/* ── Time slots ─────────────────────────────────────────────────── */
.sbs-time-slots {
  background: var(--apple-surface2);
  border-radius: 0 0 var(--apple-radius-md) var(--apple-radius-md);
  padding: 16px;
}

.sbs-time-slot:not(.sbs-time-slot-unavail):not(.selected):hover {
  border-color: var(--apple-pink);
  background: rgba(236,72,153,.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.sbs-time-slot.selected {
  background: var(--apple-pink);
  border-color: var(--apple-pink);
  box-shadow: 0 4px 16px var(--apple-pink-glow);
  transform: translateY(-1px);
}

.sbs-time-slot.selected .sbs-slot-time { color: #fff; }
.sbs-time-slot.selected .sbs-slot-check { color: rgba(255,255,255,.9); opacity: 1; }

.sbs-slot-time { font-size: 14px; font-weight: 700; color: var(--apple-ink); }

/* ── Options ────────────────────────────────────────────────────── */
.sbs-option-item:hover {
  border-color: rgba(0,0,0,.14);
  box-shadow: var(--apple-shadow-sm);
}

.sbs-option-item.selected {
  border-color: var(--apple-ink);
  box-shadow: 0 0 0 1px var(--apple-ink) inset, var(--apple-shadow-md);
}

.sbs-option-name { font-weight: 800; letter-spacing: -.01em; color: var(--apple-ink); }

/* ── Forms ──────────────────────────────────────────────────────── */
.sbs-customer-form {
  background: var(--apple-surface);
  border: 1px solid var(--apple-line);
  border-radius: var(--apple-radius-lg);
  padding: 28px;
  box-shadow: var(--apple-shadow-sm);
}

.sbs-form-group label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--apple-ink2);
}

.sbs-form-group input,
.sbs-form-group textarea,
.sbs-form-group select {
  border: 1px solid rgba(0,0,0,.14);
  border-radius: var(--apple-radius-sm);
  background: var(--apple-surface2);
  padding: 12px 14px;
  font-size: 16px;
  transition: border-color var(--apple-duration), box-shadow var(--apple-duration);
}

.sbs-form-group input:focus,
.sbs-form-group textarea:focus,
.sbs-form-group select:focus {
  border-color: var(--apple-pink);
  background: var(--apple-surface);
  box-shadow: 0 0 0 4px var(--apple-pink-light);
  outline: none;
}

/* ── Navigation buttons ─────────────────────────────────────────── */
.sbs-btn:hover { transform: translateY(-1px); }
.sbs-btn:active { transform: scale(.98); }

.sbs-btn-next:hover,
.sbs-btn-submit:hover {
  background: var(--apple-pink-hover);
  box-shadow: 0 10px 28px var(--apple-pink-glow);
}

.sbs-btn-back {
  background: var(--apple-surface);
  color: var(--apple-ink2);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: var(--apple-shadow-xs);
}

.sbs-btn-back:hover {
  background: var(--apple-surface2);
  border-color: rgba(0,0,0,.16);
}

/* ── Summary sidebar ────────────────────────────────────────────── */
.sbs-booking-summary {
  background: var(--apple-surface);
  border: 1px solid var(--apple-line);
  border-radius: var(--apple-radius-md);
  padding: 20px;
  box-shadow: var(--apple-shadow-xs);
}

.sbs-booking-summary h4 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--apple-ink);
}

.sbs-summary-total {
  font-size: 18px;
  font-weight: 800;
  color: var(--apple-ink);
  border-top: 1px solid var(--apple-line);
}

#sbs-summary-total { color: var(--apple-ink) !important; }

/* ── Success screen ─────────────────────────────────────────────── */
.sbs-success-message {
  background: var(--apple-surface);
  border: 1px solid rgba(16,185,129,.20);
  border-radius: var(--apple-radius-lg);
  box-shadow: var(--apple-shadow-md);
  padding: 48px 28px 36px;
  background: radial-gradient(circle at 50% -10%, rgba(16,185,129,.08), transparent 50%), #fff;
}

.sbs-success-icon {
  width: 72px;
  height: 72px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(16,185,129,.10), 0 10px 28px rgba(16,185,129,.22);
}

.sbs-success-message h3 {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--apple-ink);
}

.sbs-success-message p { color: #4b5563; font-size: 15px; line-height: 1.6; }

.sbs-success-action-link:hover { transform: translateY(-1px); box-shadow: var(--apple-shadow-sm); }

.sbs-success-action-link.primary {
  background: var(--apple-ink);
  border-color: var(--apple-ink);
  color: #fff;
  box-shadow: 0 6px 18px rgba(17,24,39,.20);
}

/* ── Mobile cart bar ────────────────────────────────────────────── */
@media (max-width: 768px) {
  #sbs-mobile-cart-bar {
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: var(--apple-blur);
    backdrop-filter: var(--apple-blur);
    border-top: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 -8px 24px rgba(15,23,42,.12);
  }

  #sbs-cart-next-btn {
    background: var(--apple-pink);
    border-radius: var(--apple-radius-pill);
    font-weight: 900;
    box-shadow: 0 8px 22px var(--apple-pink-glow);
  }

  #sbs-cart-next-btn:disabled {
    background: #e5e7eb;
    color: #9ca3af;
    box-shadow: none;
  }

  #sbs-mobile-drawer {
    border-radius: 24px 24px 0 0;
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: var(--apple-blur);
    backdrop-filter: var(--apple-blur);
  }

  .sbs-booking-main {
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding: 16px 14px 24px;
  }

  .sbs-booking-container {
    background: #f4f6fb;
  }
}

/* ── Toast ──────────────────────────────────────────────────────── */
#sbs-toast {
  background: rgba(17,24,39,.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(15,23,42,.22), 0 1px 0 rgba(255,255,255,.1) inset;
  font-weight: 700;
}

#sbs-toast.success { background: rgba(22,101,52,.92); }
#sbs-toast.error   { background: rgba(153,27,27,.92); }

/* ── Loading spinner ────────────────────────────────────────────── */
.sbs-loading .spinner {
  border-color: rgba(0,0,0,.08);
  border-top-color: var(--apple-pink);
}

/* ── "Text Us" button ───────────────────────────────────────────── */
#sbs-text-us-btn {
  background: var(--apple-pink);
  border-radius: 28px;
  font-weight: 700;
  box-shadow: 0 6px 20px var(--apple-pink-glow);
}

#sbs-text-us-btn:hover {
  box-shadow: 0 10px 28px var(--apple-pink-glow);
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sbs-service-item,
  .sbs-staff-card,
  .sbs-time-slot,
  .sbs-day-button,
  .sbs-btn,
  .sbs-book-btn {
    transition: none;
    transform: none !important;
  }
}



/* ================================================================
   2.3.0 Appointment type selector
   ================================================================ */
.sbs-appt-type-wrap {
    padding: 6px 0 10px;
}
.sbs-appt-type-label {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 8px;
}
.sbs-appt-type-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sbs-appt-type-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s;
}
.sbs-appt-type-card:hover {
    border-color: transparent;
}
.sbs-appt-type-card.active {
    border-color: transparent;
    background: #f9fafb;
}
.sbs-appt-type-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sbs-appt-type-card[data-type="group"] .sbs-appt-type-icon {
    background: #fce7f3;
}
.sbs-appt-type-card[data-type="solo"] .sbs-appt-type-icon {
    background: #e0f2fe;
}
.sbs-appt-type-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sbs-appt-type-title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
}
.sbs-appt-type-sub {
    font-size: 12px;
    color: #6b7280;
}
.sbs-appt-type-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
}
.sbs-appt-type-card.active .sbs-appt-type-check {
    background: #111;
    border-color: #111;
}
.sbs-appt-type-card.active .sbs-appt-type-check::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
}
.sbs-appt-type-hint {
    margin-top: 8px;
    padding: 9px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 13px;
    color: #92400e;
}

/* ================================================================
   2.7.6 Mobile booking polish
   Cleaner, tighter mobile flow for real storefront pages.
   ================================================================ */
.sbs-review-staff-name {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    color: #647084;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.sbs-review-service-row {
    max-width: 100%;
    line-height: 1.35;
    white-space: normal;
}

.sbs-review-service-name {
    display: inline;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: normal;
}

.sbs-service-note {
    display: inline-block;
    margin-left: 4px;
    color: #9ca3af;
    font-size: .9em;
    font-weight: 600;
}

@media (max-width: 768px) {
    body.sbs-booking-immersive .sbs-form-wrap {
        border-radius: 18px !important;
    }

    body.sbs-booking-immersive .sbs-mobile-flow-header {
        min-height: 72px !important;
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    body.sbs-booking-immersive .sbs-mobile-flow-header strong {
        font-size: 17px !important;
        line-height: 1.16 !important;
    }

    body.sbs-booking-immersive .sbs-mobile-flow-header p {
        display: none !important;
    }

    body.sbs-booking-immersive .sbs-mobile-flow-count {
        padding: 9px 13px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    body.sbs-booking-immersive .sbs-step-5 > h2 {
        display: none !important;
    }

    body.sbs-booking-immersive .sbs-step-5 h3 {
        line-height: 1.15 !important;
    }
}

@media (max-width: 640px) {
    body.sbs-booking-immersive .sbs-service-detail-panel {
        gap: 12px !important;
        margin-bottom: 14px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    body.sbs-booking-immersive .sbs-service-detail-image {
        max-height: none !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        overflow: visible !important;
        border-radius: 13px !important;
    }

    body.sbs-booking-immersive .sbs-service-detail-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    body.sbs-booking-immersive .sbs-service-detail-title {
        margin: 0 0 8px !important;
        font-size: 20px !important;
        line-height: 1.12 !important;
    }

    body.sbs-booking-immersive .sbs-service-detail-meta {
        gap: 7px !important;
        margin-bottom: 8px !important;
    }

    body.sbs-booking-immersive .sbs-service-detail-meta span {
        min-height: 25px !important;
        padding: 4px 10px !important;
        font-size: 12px !important;
    }

    body.sbs-booking-immersive .sbs-service-detail-desc {
        display: block !important;
        -webkit-line-clamp: unset;
        -webkit-box-orient: initial;
        overflow: visible !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    body.sbs-booking-immersive .sbs-related-eyebrow {
        display: none !important;
    }

    body.sbs-booking-immersive .sbs-related-options-head {
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    body.sbs-booking-immersive .sbs-related-options-head h4 {
        font-size: 18px !important;
        line-height: 1.15 !important;
    }

    body.sbs-booking-immersive .sbs-related-options-head > span {
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    body.sbs-booking-immersive #sbs-mobile-cart-bar {
        gap: 8px !important;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    }

    body.sbs-booking-immersive #sbs-cart-avatar {
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
    }

    body.sbs-booking-immersive #sbs-cart-name {
        font-size: 13px !important;
        line-height: 1.1 !important;
    }

    body.sbs-booking-immersive #sbs-cart-meta {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    body.sbs-booking-immersive #sbs-cart-back-btn,
    body.sbs-booking-immersive #sbs-cart-next-btn {
        min-height: 44px !important;
        padding: 0 15px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 430px) {
    body.sbs-booking-immersive #sbs-mobile-cart-bar {
        grid-template-columns: auto minmax(76px, 1fr) auto !important;
    }

    body.sbs-booking-immersive #sbs-cart-avatar {
        width: 38px !important;
        height: 38px !important;
    }

    body.sbs-booking-immersive #sbs-cart-back-btn {
        padding: 0 12px !important;
        min-width: 78px !important;
    }

    body.sbs-booking-immersive #sbs-cart-next-btn {
        padding: 0 14px !important;
        min-width: 126px !important;
    }
}

/* v3.5.0 focused mobile booking flow. Keep these overrides after legacy layers. */
.sbs-mobile-flow-header {
    position: relative;
}

.sbs-mobile-flow-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    height: 3px;
    overflow: hidden;
    background: #e5e7eb;
}

.sbs-mobile-flow-progress i {
    display: block;
    height: 100%;
    border-radius: 0;
    background: var(--yatoon-primary, #ec4899);
    transition: width .2s ease;
}

@media (max-width: 768px) {
    body.sbs-booking-immersive .sbs-booking-steps {
        display: none !important;
    }

    body.sbs-booking-immersive .sbs-mobile-flow-header {
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

/* Yatoon 2.9 storefront templates */

/* ============================================================
   YATOON BOOKING THEMES  —  appended to frontend.css
   Three distinct visual identities via .yatoon-template-*
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   BEAUTY  (default pink salon polish — enhanced)
   ──────────────────────────────────────────────────────────── */
.sbs-booking-container.yatoon-template-beauty {
    --primary-color:  #db2777;
    --primary-hover:  #be185d;
    --primary-light:  #fce7f3;
    --border-color:   #f9a8d4;
    background: linear-gradient(180deg, #fff7fb 0%, #ffffff 40%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Progress bar */
.yatoon-template-beauty .sbs-step-progress { background: #fbcfe8; }
.yatoon-template-beauty .sbs-bar-visible    { background: linear-gradient(90deg, #ec4899, #db2777); }
.yatoon-template-beauty .sbs-step-number    { background: #fce7f3; color: #9d174d; }
.yatoon-template-beauty .sbs-step-title     { color: #9d174d; }

/* Service cards */
.yatoon-template-beauty .sbs-service-item {
    border-color: #fbcfe8 !important;
    box-shadow: 0 4px 18px rgba(219,39,119,0.07) !important;
    border-radius: 14px !important;
}
.yatoon-template-beauty .sbs-service-item:hover {
    border-color: #f472b6 !important;
    box-shadow: 0 8px 28px rgba(219,39,119,0.13) !important;
    transform: translateY(-2px);
}
.yatoon-template-beauty .sbs-service-item.selected {
    border-color: #db2777 !important;
    background: #fdf2f8 !important;
}

/* Staff cards */
.yatoon-template-beauty .sbs-staff-card {
    border-color: #fbcfe8 !important;
    border-radius: 14px !important;
}
.yatoon-template-beauty .sbs-staff-card:hover  { border-color: #f472b6 !important; }
.yatoon-template-beauty .sbs-staff-card.selected { border-color: #db2777 !important; background: #fdf2f8 !important; }

/* Time slots */
.yatoon-template-beauty .sbs-time-slot {
    border-color: #fbcfe8 !important;
    border-radius: 10px !important;
    color: #9d174d;
}
.yatoon-template-beauty .sbs-time-slot:hover   { background: #fce7f3 !important; border-color: #f472b6 !important; }
.yatoon-template-beauty .sbs-time-slot.selected { background: #db2777 !important; color: #fff !important; border-color: #db2777 !important; }

/* Calendar */
.yatoon-template-beauty .sbs-day-button.available { border-color: #fbcfe8; color: #be185d; }
.yatoon-template-beauty .sbs-day-button.selected  { background: #db2777 !important; color: #fff !important; }

/* Category tabs */
.yatoon-template-beauty .sbs-category-tab         { border-radius: 999px; border-color: #fbcfe8; color: #9d174d; }
.yatoon-template-beauty .sbs-category-tab.active  { background: #db2777; color: #fff; border-color: #db2777; }

/* Buttons */
.yatoon-template-beauty .sbs-btn-next,
.yatoon-template-beauty .sbs-btn-submit {
    background: linear-gradient(135deg, #ec4899, #db2777) !important;
    border-color: #db2777 !important;
    border-radius: var(--yatoon-skin-primary-btn-radius, 999px) !important;
    letter-spacing: .3px;
    box-shadow: 0 4px 14px rgba(219,39,119,0.25) !important;
}
.yatoon-template-beauty .sbs-book-btn {
    /* border-radius deliberately left to the dedicated ADD Button setting
       (Button Labels, Fonts & Colours) - this compound selector used to
       also set it here with higher specificity, which always won
       regardless of that setting. Background/border-color/box-shadow stay
       theme-matched since those aren't confirmed to have the same issue
       and changing them risks altering the default look for merchants who
       haven't customized their Add Button. */
    background: linear-gradient(135deg, #ec4899, #db2777) !important;
    border-color: #db2777 !important;
    letter-spacing: .3px;
    box-shadow: 0 4px 14px rgba(219,39,119,0.25) !important;
}
.yatoon-template-beauty .sbs-btn-back {
    border-radius: 999px !important;
    color: #db2777 !important;
    border-color: #fbcfe8 !important;
}

/* Summary sidebar */
.yatoon-template-beauty .sbs-booking-summary { border-color: #fbcfe8 !important; background: #fff7fb !important; }

/* Success */
.yatoon-template-beauty .sbs-success-icon { color: #db2777; }


/* ────────────────────────────────────────────────────────────
   CLEAN  (minimal, neutral, fast — replaces near-nothing stub)
   ──────────────────────────────────────────────────────────── */
.sbs-booking-container.yatoon-template-clean {
    --primary-color:  #2563eb;
    --primary-hover:  #1d4ed8;
    --primary-light:  #eff6ff;
    --border-color:   #e5e7eb;
    background: #f9fafb;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Progress bar */
.yatoon-template-clean .sbs-step-progress { background: #e5e7eb; }
.yatoon-template-clean .sbs-bar-visible    { background: #2563eb; }
.yatoon-template-clean .sbs-step-number    { background: #eff6ff; color: #1e40af; }
.yatoon-template-clean .sbs-step-title     { color: #374151; }

/* Service cards */
.yatoon-template-clean .sbs-service-item {
    border-color: #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    background: #fff !important;
}
.yatoon-template-clean .sbs-service-item:hover {
    border-color: #93c5fd !important;
    box-shadow: 0 2px 8px rgba(37,99,235,0.08) !important;
}
.yatoon-template-clean .sbs-service-item.selected {
    border-color: #2563eb !important;
    background: #eff6ff !important;
}

/* Staff cards */
.yatoon-template-clean .sbs-staff-card {
    border-color: #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    background: #fff !important;
}
.yatoon-template-clean .sbs-staff-card:hover   { border-color: #93c5fd !important; }
.yatoon-template-clean .sbs-staff-card.selected { border-color: #2563eb !important; background: #eff6ff !important; }

/* Time slots */
.yatoon-template-clean .sbs-time-slot {
    border-color: #e5e7eb !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #374151;
    box-shadow: none !important;
}
.yatoon-template-clean .sbs-time-slot:hover   { border-color: #93c5fd !important; background: #eff6ff !important; }
.yatoon-template-clean .sbs-time-slot.selected { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; }

/* Calendar */
.yatoon-template-clean .sbs-day-button.available { border-color: #e5e7eb; color: #374151; }
.yatoon-template-clean .sbs-day-button.selected  { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; }

/* Category tabs */
.yatoon-template-clean .sbs-category-tab        { border-radius: 6px; border-color: #e5e7eb; color: #374151; }
.yatoon-template-clean .sbs-category-tab.active { background: #2563eb; color: #fff; border-color: #2563eb; }

/* Buttons */
.yatoon-template-clean .sbs-btn-next,
.yatoon-template-clean .sbs-btn-submit {
    background: #2563eb !important;
    border-color: #2563eb !important;
    border-radius: var(--yatoon-skin-primary-btn-radius, 6px) !important;
    box-shadow: none !important;
    letter-spacing: 0;
}
.yatoon-template-clean .sbs-book-btn {
    /* border-radius left to the dedicated ADD Button setting - see the
       beauty theme block above for why. */
    background: #2563eb !important;
    border-color: #2563eb !important;
    box-shadow: none !important;
    letter-spacing: 0;
}
.yatoon-template-clean .sbs-book-btn:hover,
.yatoon-template-clean .sbs-btn-next:hover,
.yatoon-template-clean .sbs-btn-submit:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; }
.yatoon-template-clean .sbs-btn-back {
    border-radius: 6px !important;
    color: #6b7280 !important;
    border-color: #e5e7eb !important;
}

/* Summary sidebar */
.yatoon-template-clean .sbs-booking-summary { border-color: #e5e7eb !important; background: #fff !important; }

/* Input focus */
.yatoon-template-clean input:focus,
.yatoon-template-clean select:focus,
.yatoon-template-clean textarea:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important; }

/* Strip decorative gradients */
.yatoon-template-clean .sbs-venue-hero        { background: #f3f4f6 !important; }
.yatoon-template-clean .sbs-appt-type-card    { border-radius: 8px !important; }


/* ────────────────────────────────────────────────────────────
   LUXURY  (deep charcoal + champagne gold spa feel)
   ──────────────────────────────────────────────────────────── */
.sbs-booking-container.yatoon-template-luxury {
    --primary-color:  #92722a;
    --primary-hover:  #78591e;
    --primary-light:  #fdf8ee;
    --border-color:   #e2d4b4;
    background: #faf8f4;
    font-family: Georgia, "Times New Roman", serif;
}

/* Override font for UI elements back to sans */
.yatoon-template-luxury .sbs-book-btn,
.yatoon-template-luxury .sbs-btn-next,
.yatoon-template-luxury .sbs-btn-submit,
.yatoon-template-luxury .sbs-btn-back,
.yatoon-template-luxury .sbs-category-tab,
.yatoon-template-luxury .sbs-time-slot,
.yatoon-template-luxury input,
.yatoon-template-luxury select { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* Progress bar */
.yatoon-template-luxury .sbs-step-progress { background: #e8dcc3; }
.yatoon-template-luxury .sbs-bar-visible    { background: linear-gradient(90deg, #c9a55a, #92722a); }
.yatoon-template-luxury .sbs-step-number    { background: #fdf8ee; color: #78591e; border: 1px solid #e2d4b4; }
.yatoon-template-luxury .sbs-step-title     { color: #5c4414; letter-spacing: .5px; }

/* Service cards */
.yatoon-template-luxury .sbs-service-item {
    border-color: #e2d4b4 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 12px rgba(146,114,42,0.06) !important;
    background: #fff !important;
}
.yatoon-template-luxury .sbs-service-item:hover {
    border-color: #c9a55a !important;
    box-shadow: 0 4px 20px rgba(146,114,42,0.12) !important;
}
.yatoon-template-luxury .sbs-service-item.selected {
    border-color: #92722a !important;
    background: #fdf8ee !important;
}

/* Staff cards */
.yatoon-template-luxury .sbs-staff-card {
    border-color: #e2d4b4 !important;
    border-radius: 4px !important;
    background: #fff !important;
}
.yatoon-template-luxury .sbs-staff-card:hover   { border-color: #c9a55a !important; }
.yatoon-template-luxury .sbs-staff-card.selected { border-color: #92722a !important; background: #fdf8ee !important; }

/* Time slots */
.yatoon-template-luxury .sbs-time-slot {
    border-color: #e2d4b4 !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #5c4414;
    box-shadow: none !important;
    letter-spacing: .3px;
}
.yatoon-template-luxury .sbs-time-slot:hover   { border-color: #c9a55a !important; background: #fdf8ee !important; }
.yatoon-template-luxury .sbs-time-slot.selected {
    background: #92722a !important;
    color: #fff !important;
    border-color: #92722a !important;
}

/* Calendar */
.yatoon-template-luxury .sbs-day-button.available { border-color: #e2d4b4; color: #5c4414; }
.yatoon-template-luxury .sbs-day-button.selected  { background: #92722a !important; color: #fff !important; border-color: #92722a !important; }

/* Category tabs */
.yatoon-template-luxury .sbs-category-tab {
    border-radius: 2px;
    border-color: #e2d4b4;
    color: #5c4414;
    letter-spacing: .5px;
    font-size: 12px;
    text-transform: uppercase;
}
.yatoon-template-luxury .sbs-category-tab.active { background: #92722a; color: #fff; border-color: #92722a; }

/* Buttons */
.yatoon-template-luxury .sbs-btn-next,
.yatoon-template-luxury .sbs-btn-submit {
    background: #1a1109 !important;
    border-color: #1a1109 !important;
    border-radius: var(--yatoon-skin-primary-btn-radius, 3px) !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 13px !important;
    box-shadow: none !important;
}
.yatoon-template-luxury .sbs-book-btn {
    /* border-radius left to the dedicated ADD Button setting - see the
       beauty theme block above for why. Note: font-size here is still
       !important and higher-specificity than the ADD Button's own Size
       field, so that field may have the same issue - not touched this
       pass since only border-radius was confirmed broken. */
    background: #1a1109 !important;
    border-color: #1a1109 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 13px !important;
    box-shadow: none !important;
}
.yatoon-template-luxury .sbs-book-btn:hover,
.yatoon-template-luxury .sbs-btn-next:hover,
.yatoon-template-luxury .sbs-btn-submit:hover { background: #92722a !important; border-color: #92722a !important; }
.yatoon-template-luxury .sbs-btn-back {
    border-radius: 3px !important;
    color: #92722a !important;
    border-color: #e2d4b4 !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-size: 13px !important;
}

/* Summary sidebar */
.yatoon-template-luxury .sbs-booking-summary {
    border-color: #e2d4b4 !important;
    background: #fdf8ee !important;
}
.yatoon-template-luxury .sbs-summary-total { color: #92722a; }

/* 4.3.1 hybrid step accordion: desktop summary navigation without changing the booking state machine. */
.sbs-step-accordion {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
}

.sbs-step-accordion-item {
    width: 100%;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.sbs-step-accordion-item:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--primary-color, #ec4899) 38%, #e5e7eb);
    box-shadow: 0 10px 24px rgba(16, 19, 26, .06);
}

.sbs-step-accordion-item.is-active {
    border-color: color-mix(in srgb, var(--primary-color, #ec4899) 52%, #e5e7eb);
    background: color-mix(in srgb, var(--primary-color, #ec4899) 7%, #fff);
}

.sbs-step-accordion-item.is-done .sbs-step-accordion-num {
    background: #dcfce7;
    color: #166534;
}

.sbs-step-accordion-item.is-locked {
    cursor: not-allowed;
    opacity: .62;
    background: #f8fafc;
}

.sbs-step-accordion-num {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 12px;
    font-weight: 800;
}

.sbs-step-accordion-item.is-active .sbs-step-accordion-num {
    background: var(--primary-color, #ec4899);
    color: #fff;
}

.sbs-step-accordion-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.sbs-step-accordion-title {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.sbs-step-accordion-summary {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sbs-step-accordion-status {
    align-self: start;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.sbs-step-accordion-item.is-active .sbs-step-accordion-status {
    background: #111827;
    color: #fff;
}

.sbs-step-accordion-item.is-done .sbs-step-accordion-status {
    background: #dcfce7;
    color: #166534;
}

@media (max-width: 980px) {
    .sbs-step-accordion {
        display: none;
    }
}


/* Input focus */
.yatoon-template-luxury input:focus,
.yatoon-template-luxury select:focus,
.yatoon-template-luxury textarea:focus { border-color: #92722a !important; box-shadow: 0 0 0 3px rgba(146,114,42,0.12) !important; }

/* Venue hero accent */
.yatoon-template-luxury .sbs-venue-hero { background: linear-gradient(135deg, #2c1f0e, #1a1109) !important; }
.yatoon-template-luxury .sbs-venue-kicker { color: #c9a55a !important; letter-spacing: 2px; text-transform: uppercase; }

/* Appointment type cards */
.yatoon-template-luxury .sbs-appt-type-card { border-color: transparent !important; border-radius: 4px !important; background: #fff !important; }
.yatoon-template-luxury .sbs-appt-type-card.selected { border-color: transparent !important; background: #fdf8ee !important; }

/* Success */
.yatoon-template-luxury .sbs-success-icon { color: #92722a; }


.yatoon-test-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 12px;
    font-weight: 700;
}

.yatoon-ai-helper {
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #f8fafc;
}

.yatoon-ai-helper-header {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 10px;
    position: relative;
    padding-right: 32px;
}

.yatoon-ai-collapse {
    position: absolute;
    top: -4px;
    right: -2px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.yatoon-ai-collapse:hover,
.yatoon-ai-collapse:focus {
    background: #e2e8f0;
    color: #0f172a;
    outline: none;
}

.yatoon-ai-collapsible .yatoon-ai-helper-header {
    margin-bottom: 8px;
}

.yatoon-ai-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 2px 0 10px;
    padding: 9px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #0f172a;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.yatoon-ai-toggle:hover,
.yatoon-ai-toggle:focus {
    border-color: #2563eb;
    background: #dbeafe;
    outline: none;
}

.yatoon-ai-helper.is-collapsed {
    padding: 12px 14px;
}

.yatoon-ai-helper.is-collapsed .yatoon-ai-helper-body {
    display: none;
}

.yatoon-ai-helper.is-collapsed .yatoon-ai-collapse {
    display: none;
}

.yatoon-ai-helper.is-collapsed .yatoon-ai-helper-header {
    margin-bottom: 6px;
}

.yatoon-ai-helper.is-collapsed .yatoon-ai-toggle {
    margin-bottom: 0;
}

.yatoon-ai-helper-header strong {
    color: #111827;
    font-size: 15px;
}

.yatoon-ai-helper-header span,
#yatoon-ai-service-status {
    color: #64748b;
    font-size: 13px;
}

.yatoon-ai-helper textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 72px;
    resize: vertical;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
}

.yatoon-ai-helper textarea:disabled {
    background: #f1f5f9;
    color: #94a3b8;
}

.yatoon-ai-privacy-note {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.yatoon-ai-notice {
    margin: 0 0 10px;
    padding: 9px 10px;
    border-left: 3px solid #f59e0b;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
    line-height: 1.45;
}

.yatoon-ai-helper-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.yatoon-ai-result {
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #334155;
    line-height: 1.55;
}

.yatoon-ai-result p {
    margin: 0 0 8px;
}

.yatoon-ai-result p:last-child {
    margin-bottom: 0;
}

.yatoon-ai-recommendation-actions {
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.yatoon-ai-recommendation-actions strong {
    display: block;
    margin-bottom: 8px;
    color: #111827;
    font-size: 13px;
}

.yatoon-ai-recommendation-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.yatoon-ai-pick-service {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-width: 100%;
    padding: 9px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #0f172a;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.yatoon-ai-pick-service:hover,
.yatoon-ai-pick-service:focus {
    border-color: #2563eb;
    background: #dbeafe;
    outline: none;
}

.yatoon-ai-pick-service span {
    font-weight: 700;
}

.yatoon-ai-pick-service small {
    color: #475569;
    font-size: 12px;
}

.yatoon-ai-picked-pulse {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .22) !important;
}

@media (max-width: 640px) {
    .sbs-booking-container {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .sbs-booking-container .sbs-progress-bar {
        overflow-x: auto;
        gap: 8px !important;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .sbs-booking-container .sbs-prog-label {
        font-size: 11px !important;
        white-space: nowrap;
    }

    .sbs-booking-container .sbs-service-item,
    .sbs-booking-container .sbs-staff-card {
        padding: 14px !important;
    }

    .sbs-booking-container .sbs-book-btn,
    .sbs-booking-container .sbs-btn-submit,
    .sbs-booking-container .sbs-btn-next,
    .sbs-booking-container .sbs-btn-back {
        min-height: 42px !important;
    }

    .sbs-booking-container .sbs-navigation-buttons {
        position: sticky;
        bottom: 0;
        z-index: 20;
        margin-left: -10px;
        margin-right: -10px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid #e5e7eb;
        backdrop-filter: blur(10px);
    }
}

/* AI assistant compact close button override */
.yatoon-ai-collapse { position:absolute !important; top:-4px !important; right:-2px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:28px !important; height:28px !important; min-width:28px !important; max-width:28px !important; min-height:28px !important; padding:0 !important; margin:0 !important; border:0 !important; border-radius:999px !important; background:transparent !important; background-color:transparent !important; color:#64748b !important; box-shadow:none !important; font-size:20px !important; line-height:1 !important; text-align:center !important; cursor:pointer !important; appearance:none !important; -webkit-appearance:none !important; }
.yatoon-ai-collapse:hover, .yatoon-ai-collapse:focus { background:#e2e8f0 !important; background-color:#e2e8f0 !important; color:#0f172a !important; outline:none !important; }
.yatoon-ai-helper.is-collapsed .yatoon-ai-collapse { display:none !important; }

/* AI assistant: compact whole-panel collapse and mobile input stability. */
.yatoon-ai-helper {
    position: relative !important;
}

.yatoon-ai-helper-header {
    padding-right: 44px !important;
}

.yatoon-ai-collapse {
    top: 0 !important;
    right: 0 !important;
    line-height: 28px !important;
}

.yatoon-ai-helper.is-collapsed {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.yatoon-ai-helper.is-collapsed .yatoon-ai-helper-header,
.yatoon-ai-helper.is-collapsed .yatoon-ai-helper-body,
.yatoon-ai-helper.is-collapsed .yatoon-ai-collapse {
    display: none !important;
}

.yatoon-ai-helper.is-collapsed .yatoon-ai-toggle {
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 12px 14px !important;
    border-color: #dbe4ef !important;
    background: #f8fafc !important;
    color: #111827 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    box-shadow: none !important;
}

.yatoon-ai-helper.is-collapsed .yatoon-ai-toggle::after {
    content: "+";
    margin-left: auto;
    flex: 0 0 auto;
    color: #64748b;
    font-size: 18px;
    line-height: 1;
}

.yatoon-ai-helper textarea {
    font-size: 16px !important;
    line-height: 1.45 !important;
}

.yatoon-ai-helper .yatoon-ai-helper-header strong,
.yatoon-ai-helper.is-collapsed .yatoon-ai-toggle {
    color: var(--yatoon-ai-title-color, #111827) !important;
    font-size: var(--yatoon-ai-title-size, 14px) !important;
}

.yatoon-ai-helper.is-collapsed .yatoon-ai-toggle {
    background: var(--yatoon-ai-toggle-bg, #f8fafc) !important;
}

@media (max-width: 640px) {
    .yatoon-ai-helper {
        padding: 14px 12px !important;
    }

    .yatoon-ai-helper-actions {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .yatoon-ai-helper-actions .sbs-btn {
        width: 100% !important;
        white-space: normal !important;
    }
}

/* 3.3.18: keep the booking page ending proportional to its top spacing. */
.sbs-booking-container,
.sbs-booking-layout,
.sbs-booking-main,
.sbs-form-step.active,
.sbs-services-list {
    min-height: 0 !important;
}

@media (max-width: 768px) {
    .sbs-booking-container,
    body.sbs-booking-immersive .sbs-booking-container {
        padding-bottom: calc(48px + env(safe-area-inset-bottom)) !important;
    }

    .sbs-booking-main,
    body.sbs-booking-immersive .sbs-booking-main {
        padding-bottom: 12px !important;
    }
}

/* 3.4.0: mobile option cards - prevent Android narrow-column text wrapping. */
@media (max-width: 768px) {
    .sbs-booking-container,
    body.sbs-booking-immersive .sbs-booking-container {
        width: min(100%, 100vw) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        box-sizing: border-box !important;
    }

    .sbs-form-step.active,
    body.sbs-booking-immersive .sbs-form-step.active {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .sbs-option-section-head {
        gap: 8px !important;
    }

    .sbs-option-section-head p {
        max-width: min(58vw, 220px) !important;
    }

    .sbs-option-item {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto 30px !important;
        align-items: center !important;
        column-gap: 10px !important;
        padding: 14px 14px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .sbs-option-info {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    .sbs-option-name {
        max-width: 100% !important;
        line-height: 1.24 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    .sbs-option-description,
    .sbs-option-duration {
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .sbs-option-price {
        min-width: 54px !important;
        max-width: 68px !important;
        text-align: right !important;
        white-space: nowrap !important;
        justify-self: end !important;
        font-size: 14px !important;
    }

    .sbs-option-check {
        position: static !important;
        transform: none !important;
        justify-self: end !important;
        flex: 0 0 28px !important;
        width: 28px !important;
        height: 28px !important;
    }
}

@media (max-width: 390px) {
    .sbs-booking-container,
    body.sbs-booking-immersive .sbs-booking-container {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    .sbs-option-item {
        grid-template-columns: minmax(0, 1fr) auto 28px !important;
        column-gap: 8px !important;
        padding: 13px 12px !important;
    }

    .sbs-option-name {
        font-size: 14px !important;
    }

    .sbs-option-price {
        min-width: 48px !important;
        max-width: 58px !important;
        font-size: 13px !important;
    }
}
.yatoon-design-upload-group input[type="file"] {
    width: 100%;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 12px;
    background: #f8fafc;
}

.yatoon-design-preview {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 13px;
}

.yatoon-design-preview img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

/* v3.5.0 visible custom-design upload in the Options step. */
.yatoon-design-upload-card {
    display: none;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
    align-items: center;
    margin: 18px 0;
    padding: 16px;
    border: 1px solid #f9a8d4;
    border-radius: 8px;
    background: #fff7fb;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    grid-column: 1 / -1;
}

.yatoon-design-upload-card.is-visible {
    display: grid;
}

.yatoon-design-upload-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.yatoon-design-upload-copy strong {
    color: #111827;
    font-size: 15px;
    line-height: 1.25;
}

.yatoon-design-upload-copy span {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.yatoon-design-upload-card input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

.yatoon-design-file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #db2777;
    border-radius: 6px;
    background: #fff;
    color: #9d174d;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.yatoon-design-file-button:hover {
    background: #fdf2f8;
}

.yatoon-design-upload-card .yatoon-design-preview {
    grid-column: 1 / -1;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid #fbcfe8;
}

.yatoon-design-file-name {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yatoon-design-upload-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    flex: 0 0 auto;
    white-space: nowrap;
}

.yatoon-design-upload-status.is-uploading {
    color: #475569;
    background: #f1f5f9;
}

.yatoon-design-upload-status.is-success {
    color: #166534;
    background: #dcfce7;
}

.yatoon-design-upload-status.is-success::before {
    content: "\2713";
    margin-right: 5px;
}

.yatoon-design-upload-status.is-error {
    color: #b91c1c;
    background: #fee2e2;
}

.sbs-option-price.is-variable {
    min-width: 76px !important;
    max-width: 86px !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
}

@media (max-width: 560px) {
    .yatoon-design-upload-card {
        grid-template-columns: 1fr;
    }

    .yatoon-design-file-button {
        width: 100%;
        box-sizing: border-box;
    }

    .yatoon-design-upload-card .yatoon-design-preview {
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: center;
    }

    .yatoon-design-upload-card .yatoon-design-preview img {
        width: 64px;
        height: 64px;
        grid-row: 1 / span 2;
    }

    .yatoon-design-upload-status {
        grid-column: 2;
        justify-self: start;
        max-width: 100%;
        margin-left: 0;
    }
}

/* YATOON 4.1.6 mobile booking card refresh */
.sbs-booking-container .ybs-svc-card-placeholder .ybs-svc-hero {
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.92) 0 10%, transparent 11%),
        radial-gradient(circle at 82% 16%, rgba(255,255,255,.7) 0 7%, transparent 8%),
        linear-gradient(135deg, #ffe4ef 0%, #f9a8d4 46%, #fb7185 100%);
}

.sbs-booking-container .ybs-svc-hero-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.sbs-booking-container .ybs-svc-hero-fallback span {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: rgba(255,255,255,.86);
    color: #be185d;
    font-size: 34px;
    font-weight: 900;
    box-shadow: 0 14px 30px rgba(190,24,93,.18);
}

.sbs-booking-container .sbs-form-step.sbs-step-4 .sbs-calendar-header {
    width: fit-content;
}

.sbs-booking-container .sbs-form-step.sbs-step-4 .sbs-month-opener::before {
    content: "";
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-right: 6px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-radius: 4px;
    box-sizing: border-box;
    background: linear-gradient(currentColor 0 0) 2px 3px / 8px 2px no-repeat;
}

@media (max-width: 640px) {
    .sbs-booking-container .sbs-form-step.sbs-step-1 > h3,
    .sbs-booking-container .sbs-form-step.sbs-step-3 > h3,
    .sbs-booking-container .sbs-form-step.sbs-step-4 > h3 {
        font-size: 28px;
        line-height: 1.12;
        letter-spacing: 0;
        margin: 0 0 16px;
        color: #111827;
    }

    .sbs-booking-container .sbs-services-list {
        display: grid;
        gap: 14px;
    }

    .sbs-booking-container .sbs-service-item.ybs-svc-card {
        border-radius: 18px !important;
        border: 1px solid #f1f5f9 !important;
        box-shadow: 0 10px 28px rgba(15,23,42,.08) !important;
        background: #fff !important;
        overflow: hidden;
    }

    .sbs-booking-container .sbs-service-item.ybs-svc-card.selected {
        border-color: var(--primary-color, #ec4899) !important;
        box-shadow: 0 0 0 3px rgba(236,72,153,.16), 0 14px 34px rgba(15,23,42,.12) !important;
    }

    .sbs-booking-container .ybs-svc-hero {
        aspect-ratio: 1.9 / 1;
        min-height: 132px;
    }

    .sbs-booking-container .sbs-service-item.ybs-svc-card .sbs-service-layout {
        padding: 14px 16px 16px !important;
    }

    .sbs-booking-container .sbs-service-item.ybs-svc-card .sbs-service-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px;
    }

    .sbs-booking-container .sbs-service-item.ybs-svc-card .sbs-service-name {
        font-size: 18px !important;
        line-height: 1.22 !important;
    }

    .sbs-booking-container .sbs-book-btn.ybs-pill-btn {
        min-height: 36px;
        padding: 0 16px !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        font-weight: 900 !important;
    }

    .sbs-booking-container .sbs-form-step.sbs-step-4 .sbs-calendar-container {
        border-radius: 20px !important;
        padding: 14px !important;
        box-shadow: 0 10px 28px rgba(15,23,42,.07) !important;
        overflow: hidden !important;
    }

    .sbs-booking-container .sbs-form-step.sbs-step-4 .sbs-calendar-header {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        border-radius: 999px !important;
        padding: 4px !important;
        background: #f1f5f9 !important;
    }

    .sbs-booking-container .sbs-form-step.sbs-step-4 .sbs-view-toggle {
        min-height: 40px;
        border-radius: 999px !important;
        font-weight: 900 !important;
    }

    .sbs-booking-container .sbs-week-days {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(44px, 1fr)) !important;
        gap: 7px !important;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .sbs-booking-container .sbs-day-button {
        min-width: 44px !important;
        min-height: 76px !important;
        border-radius: 16px !important;
    }

    .sbs-booking-container .sbs-month-view {
        width: 100% !important;
        padding: 8px 0 0 !important;
        overflow: hidden !important;
    }

    .sbs-booking-container .sbs-month-grid {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .sbs-booking-container .sbs-month-dayname {
        min-width: 0 !important;
        padding: 2px 0 5px !important;
        font-size: 11px !important;
        overflow: hidden;
        text-overflow: clip;
    }

    .sbs-booking-container .sbs-month-cell.sbs-day-button {
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        padding: 0 !important;
        border-radius: 12px !important;
        font-size: 14px !important;
    }

    .sbs-booking-container .sbs-month-cell.empty {
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }

    .sbs-booking-container .sbs-service-right-col {
        justify-items: center !important;
        align-content: start !important;
    }

    .sbs-booking-container .sbs-service-right-col .sbs-book-btn,
    .sbs-booking-container .sbs-service-right-col .ybs-pill-btn {
        justify-self: center !important;
        margin-top: 22px !important;
        transform: none !important;
    }
}

/* Final summary overrides keep the sidebar readable across legacy theme blocks. */
.sbs-booking-container .sbs-summary-copy {
    flex: 1;
    min-width: 0;
}

.sbs-booking-container .sbs-summary-label {
    margin-bottom: 2px;
    color: #647084;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.sbs-booking-container .sbs-summary-copy span {
    display: block;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.sbs-booking-container .sbs-summary-copy .sbs-summary-muted {
    color: #8b95a7;
}

.sbs-booking-container .sbs-summary-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sbs-booking-container .sbs-summary-total {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 2px solid #eef0f3;
}

.sbs-booking-container .sbs-summary-total strong {
    color: #111827;
    font-size: 15px;
}

.sbs-booking-container #sbs-summary-total {
    color: var(--primary-color, #ec4899) !important;
    font-size: 18px;
    font-weight: 800;
}

/* 4.3.1 market polish: a calmer, more premium booking surface. */
.sbs-booking-container {
    --ybs-ink: #111827;
    --ybs-muted: #647084;
    --ybs-soft: #f6f7f9;
    --ybs-line: #e7eaf0;
    --ybs-card: #ffffff;
    --ybs-shadow: 0 18px 48px rgba(15, 23, 42, .08);
    --ybs-shadow-soft: 0 8px 24px rgba(15, 23, 42, .055);
    color: var(--ybs-ink);
}

.sbs-booking-container .sbs-booking-layout {
    align-items: start;
    gap: clamp(18px, 2.4vw, 34px) !important;
}

.sbs-booking-container .sbs-booking-main,
.sbs-booking-container .sbs-booking-sidebar {
    border: 1px solid rgba(226, 232, 240, .92) !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: var(--ybs-shadow-soft) !important;
}

.sbs-booking-container .sbs-booking-main {
    border-radius: 22px !important;
    overflow: hidden;
}

.sbs-booking-container .sbs-booking-sidebar {
    border-radius: 20px !important;
    padding: 18px !important;
    position: sticky;
    top: 22px;
}

.sbs-booking-container .sbs-progress-container,
.sbs-booking-container .sbs-mobile-flow-header {
    background: linear-gradient(180deg, #fff, #fafbfc) !important;
    border-bottom: 1px solid var(--ybs-line) !important;
}

/* Fixed: this shadow was meant for the circular step-number bubble only.
   Sharing the selector with .sbs-mobile-flow-step gave the plain
   "Step X of Y" text label a floating rectangular shadow that read as an
   unwanted white box behind it. */
.sbs-booking-container .sbs-step-number {
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}

.sbs-booking-container .sbs-service-item,
.sbs-booking-container .sbs-option-card,
.sbs-booking-container .sbs-staff-card,
.sbs-booking-container .sbs-time-slot,
.sbs-booking-container .sbs-day-button,
.sbs-booking-container .sbs-month-cell {
    border-color: var(--ybs-line) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.sbs-booking-container .sbs-service-item:hover,
.sbs-booking-container .sbs-option-card:hover,
.sbs-booking-container .sbs-staff-card:hover,
.sbs-booking-container .sbs-time-slot:hover,
.sbs-booking-container .sbs-day-button:hover,
.sbs-booking-container .sbs-month-cell:hover {
    border-color: color-mix(in srgb, var(--primary-color, #ec4899) 36%, var(--ybs-line)) !important;
    box-shadow: var(--ybs-shadow-soft);
    transform: translateY(-1px);
}

.sbs-booking-container .sbs-service-item.selected,
.sbs-booking-container .sbs-option-card.selected,
.sbs-booking-container .sbs-staff-card.selected {
    background: color-mix(in srgb, var(--primary-color, #ec4899) 6%, #fff) !important;
    border-color: var(--primary-color, #ec4899) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color, #ec4899) 13%, transparent), var(--ybs-shadow-soft) !important;
}

/* Day buttons, time slots, and month cells use a solid-color background with
   white text for their selected state (see the base rules above) - keep that
   contrast intact instead of applying the light-tint treatment used for
   service/option/staff cards, which would wash out the white text. */
.sbs-booking-container .sbs-day-button.selected,
.sbs-booking-container .sbs-time-slot.selected,
.sbs-booking-container .sbs-month-cell.selected {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color, #ec4899) 13%, transparent), var(--ybs-shadow-soft) !important;
}

.sbs-booking-container .sbs-form-step h2,
.sbs-booking-container .sbs-section-title,
.sbs-booking-container .sbs-sidebar-title {
    color: var(--ybs-ink) !important;
    letter-spacing: 0 !important;
}

.sbs-booking-container .sbs-service-description,
.sbs-booking-container .sbs-option-description,
.sbs-booking-container .sbs-empty-state,
.sbs-booking-container .sbs-sidebar-empty-sub,
.sbs-booking-container .sbs-step-accordion-summary {
    color: var(--ybs-muted) !important;
    line-height: 1.5;
}

.sbs-booking-container input[type="text"],
.sbs-booking-container input[type="email"],
.sbs-booking-container input[type="tel"],
.sbs-booking-container input[type="number"],
.sbs-booking-container textarea,
.sbs-booking-container select {
    border-color: var(--ybs-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .03) !important;
}

.sbs-booking-container input:focus,
.sbs-booking-container textarea:focus,
.sbs-booking-container select:focus {
    border-color: var(--primary-color, #ec4899) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color, #ec4899) 12%, transparent) !important;
    outline: 0 !important;
}

.sbs-booking-container .sbs-btn,
.sbs-booking-container button.sbs-btn,
.sbs-booking-container #sbs-cart-next-btn,
.sbs-booking-container #sbs-sidebar-next-btn {
    min-height: 44px;
    border-radius: var(--yatoon-skin-primary-btn-radius, 999px) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10) !important;
}
.sbs-booking-container .sbs-book-btn {
    /* border-radius deliberately left out here - was previously grouped
       with the selectors above and always beat the dedicated ADD Button
       radius setting due to higher specificity (2 classes vs 1). */
    min-height: 44px;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10) !important;
}

.sbs-booking-container .sbs-btn:disabled,
.sbs-booking-container button:disabled {
    box-shadow: none !important;
    opacity: .58;
}

.sbs-booking-container .sbs-step-accordion {
    margin-bottom: 16px;
}

.sbs-booking-container .sbs-step-accordion-item {
    border-radius: 14px !important;
    border-color: var(--ybs-line) !important;
    background: #fff !important;
}

.sbs-booking-container .sbs-step-accordion-item.is-active {
    background: #111827 !important;
    border-color: #111827 !important;
    color: #fff !important;
}

.sbs-booking-container .sbs-step-accordion-item.is-active .sbs-step-accordion-summary,
.sbs-booking-container .sbs-step-accordion-item.is-active .sbs-step-accordion-status {
    color: rgba(255, 255, 255, .72) !important;
}

#sbs-mobile-cart-bar {
    border: 1px solid rgba(226, 232, 240, .92) !important;
    box-shadow: 0 -12px 36px rgba(15, 23, 42, .14) !important;
    backdrop-filter: blur(16px);
}

#sbs-mobile-drawer {
    border-top-left-radius: 22px !important;
    border-top-right-radius: 22px !important;
    box-shadow: 0 -18px 48px rgba(15, 23, 42, .18) !important;
}

@media (max-width: 980px) {
    .sbs-booking-container {
        padding: 12px 5px calc(48px + env(safe-area-inset-bottom)) !important;
    }

    .sbs-booking-container .sbs-booking-main {
        border-radius: 18px !important;
    }
}

/* 4.3.1 detail pass: refine feedback, success, drawer and dense mobile states. */
#sbs-toast {
    left: 50% !important;
    right: auto !important;
    bottom: calc(22px + env(safe-area-inset-bottom)) !important;
    width: min(520px, calc(100vw - 28px)) !important;
    max-width: none !important;
    padding: 14px 18px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 14px !important;
    box-shadow: 0 22px 58px rgba(15, 23, 42, .25) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    transform: translate(-50%, 16px) !important;
}

#sbs-toast.show {
    transform: translate(-50%, 0) !important;
}

#sbs-toast.success {
    background: rgba(22, 101, 52, .94) !important;
}

#sbs-toast.error {
    background: rgba(153, 27, 27, .94) !important;
}

#sbs-toast.info,
#sbs-toast:not(.success):not(.error) {
    background: rgba(17, 24, 39, .94) !important;
}

.sbs-booking-container .sbs-loading {
    min-height: 92px;
    border: 1px dashed #d8dee8;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #fafbfc);
    color: #647084 !important;
    font-weight: 700;
}

.sbs-booking-container .sbs-loading .spinner {
    border-color: #e5e9f0 !important;
    border-top-color: var(--primary-color, #ec4899) !important;
}

.sbs-booking-container .sbs-service-search-empty,
.sbs-booking-container .sbs-sidebar-empty-guide,
.sbs-booking-container .sbs-empty-suggestions,
.sbs-booking-container #sbs-waitlist-success,
.sbs-booking-container #sbs-text-success,
.sbs-booking-container #sbs-recurring-result {
    border: 1px solid #e5e9f0 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #fff, #fafbfc) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .045) !important;
}

.sbs-booking-container #sbs-waitlist-success,
.sbs-booking-container #sbs-text-success,
.sbs-booking-container #sbs-recurring-result:not(.error) {
    border-color: #bbf7d0 !important;
    background: linear-gradient(180deg, #f0fdf4, #fff) !important;
    color: #166534 !important;
}

.sbs-booking-container #sbs-recurring-result.error {
    border-color: #fecaca !important;
    background: linear-gradient(180deg, #fff5f5, #fff) !important;
    color: #991b1b !important;
}

.sbs-booking-container .sbs-success-message {
    max-width: 720px !important;
    margin-inline: auto !important;
    border: 1px solid #dbe6ef !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 50% 0, rgba(16, 185, 129, .12), transparent 42%),
        linear-gradient(180deg, #fff, #fbfcfe) !important;
    box-shadow: 0 24px 72px rgba(15, 23, 42, .10) !important;
}

.sbs-booking-container .sbs-success-icon {
    width: 70px !important;
    height: 70px !important;
    margin-inline: auto !important;
    border-radius: 50% !important;
    background: #16a34a !important;
    box-shadow: 0 14px 34px rgba(22, 163, 74, .24) !important;
}

.sbs-booking-container .sbs-success-next-card,
.sbs-booking-container .sbs-success-cal-row,
.sbs-booking-container .sbs-success-actions {
    border-color: #e5e9f0 !important;
    border-radius: 16px !important;
    background: #fff !important;
}

.sbs-booking-container .sbs-success-action-link,
.sbs-booking-container .sbs-success-direction-link {
    border-radius: 999px !important;
    font-weight: 800 !important;
}

#sbs-mobile-cart-bar.sbs-bar-visible {
    animation: ybsCartRise .18s ease both;
}

@keyframes ybsCartRise {
    from { transform: translateY(12px); opacity: .2; }
    to { transform: translateY(0); opacity: 1; }
}

#sbs-mobile-cart-bar #sbs-cart-name {
    color: #111827 !important;
    font-weight: 850 !important;
}

#sbs-mobile-cart-bar #sbs-cart-meta {
    color: #647084 !important;
}

#sbs-mobile-cart-bar #sbs-cart-back-btn,
#sbs-mobile-cart-bar #sbs-cart-expand-btn {
    border: 1px solid #e5e9f0 !important;
    background: #f8fafc !important;
    color: #111827 !important;
}

#sbs-mobile-drawer .sbs-booking-summary {
    box-shadow: none !important;
    border: 0 !important;
}

#sbs-mobile-drawer .sbs-drawer-appt-row,
#sbs-mobile-drawer .sbs-drawer-progress-row {
    border-color: #edf0f5 !important;
}

#sbs-mobile-drawer button {
    border-radius: 10px !important;
    font-weight: 800 !important;
}

@media (max-width: 640px) {
    .sbs-booking-container .sbs-form-step {
        padding-inline: 14px !important;
    }

    .sbs-booking-container .sbs-step-section-title,
    .sbs-booking-container .sbs-form-step h2,
    .sbs-booking-container .sbs-form-step h3 {
        font-size: clamp(26px, 8vw, 34px) !important;
        line-height: 1.08 !important;
        letter-spacing: 0 !important;
        text-shadow: none !important;
    }

    .sbs-booking-container .sbs-category-title {
        font-size: clamp(24px, 7vw, 30px) !important;
        line-height: 1.08 !important;
        letter-spacing: 0 !important;
        text-shadow: none !important;
        margin: 28px 0 16px !important;
    }

    .sbs-booking-container .sbs-category-tabs-wrap {
        gap: 8px !important;
        padding-bottom: 4px !important;
    }

    .sbs-booking-container .sbs-cat-tab,
    .sbs-booking-container .sbs-cat-more-btn {
        min-height: 42px !important;
        padding: 10px 15px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
    }

    .sbs-booking-container .sbs-service-item,
    .sbs-booking-container .sbs-option-card,
    .sbs-booking-container .sbs-staff-card {
        border-radius: 16px !important;
    }

    .sbs-booking-container .sbs-service-item {
        padding: 18px !important;
        box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
    }

    .sbs-booking-container .sbs-service-name {
        font-size: 20px !important;
        line-height: 1.18 !important;
        letter-spacing: 0 !important;
    }

    .sbs-booking-container .sbs-service-details,
    .sbs-booking-container .sbs-service-desc-wrap {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    .sbs-booking-container .sbs-service-img-wrap {
        width: 84px !important;
        height: 84px !important;
        border-radius: 16px !important;
    }

    .sbs-booking-container .sbs-book-btn {
        min-width: 116px !important;
        min-height: 48px !important;
        font-size: 15px !important;
    }

    .sbs-booking-container .sbs-time-slots {
        gap: 8px !important;
    }

    .sbs-booking-container .sbs-time-slot {
        min-height: 46px !important;
        border-radius: 12px !important;
    }
}

/* 4.3.6 landing mode and accessible booking popup */
.yatoon-booking-mode-landing{max-width:1180px;margin-inline:auto}
.yatoon-booking-popup-trigger{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:0;border-radius:999px;background:var(--primary-color,#ec4899);color:#fff;font-weight:700;cursor:pointer}
.yatoon-booking-dialog{width:min(1180px,calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);padding:42px 12px 12px;border:0;border-radius:18px;overflow:auto;background:#fff;box-shadow:0 24px 80px rgba(15,23,42,.28)}
.yatoon-booking-dialog::backdrop{background:rgba(15,23,42,.62);backdrop-filter:blur(3px)}
.yatoon-booking-dialog-close{position:absolute;top:8px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:#f1f5f9;color:#0f172a;font-size:28px;line-height:1;cursor:pointer}
body:has(.yatoon-booking-dialog[open]){overflow:hidden}
@media(max-width:600px){.yatoon-booking-dialog{width:100vw;height:100dvh;max-height:none;margin:0;border-radius:0}.yatoon-booking-dialog-close{position:fixed;z-index:3}}