/*!
 * Yatoon booking — final override layer.
 *
 * 4.6.1 V2: this used to be a 14 KB string inside class-yatoon-frontend.php,
 * pushed onto the page with wp_add_inline_style() on every single request. An
 * inline <style> block cannot be cached by the browser, so every visitor paid
 * for it on every page view, and it could not be minified, diffed or linted
 * like a real stylesheet either.
 *
 * It still has to load LAST — the whole point of these rules is that they win
 * — so it is enqueued after every other Yatoon stylesheet rather than merged
 * into the bundle. The two genuinely dynamic blocks (per-site colours and
 * button overrides, built from saved options) remain inline, because they
 * differ per site and caching them would be wrong.
 */

@media(min-width:1600px){
                .sbs-booking-container{width:min(1660px,calc(100% - 48px))!important;max-width:min(1660px,calc(100vw - 48px))!important;font-size:16px!important}
                .sbs-booking-layout{grid-template-columns:minmax(0,1fr) minmax(330px,360px)!important;gap:32px!important}
                .sbs-booking-container :is(#sbs-main-title,.sbs-form-step>h3){font-size:26px!important;line-height:1.18!important}
                .sbs-booking-container :is(.sbs-service-name,.sbs-appt-type-title){font-size:16px!important;line-height:1.35!important}
                .sbs-booking-container :is(.sbs-service-details,.sbs-service-brief,.sbs-service-desc-wrap,.sbs-appt-type-sub,.sbs-summary-item span,.yatoon-ai-helper p,.yatoon-ai-privacy-note){font-size:14px!important;line-height:1.5!important}
                .sbs-booking-container :is(.sbs-appt-type-label,.sbs-summary-label){font-size:12px!important;line-height:1.35!important}
                .sbs-booking-container :is(.sbs-cat-tab,#sbs-cat-more-btn,.sbs-book-btn,.sbs-portal-manage-link,.sbs-portal-banner-signout){font-size:13px!important}
                .sbs-booking-container .yatoon-ai-helper-header strong{font-size:clamp(14px,var(--yatoon-ai-title-size,14px),22px)!important}
                .sbs-booking-container .yatoon-ai-helper textarea{font-size:15px!important;line-height:1.5!important}
                .sbs-booking-container .sbs-booking-sidebar>h3{font-size:20px!important;line-height:1.3!important}
            }
            .sbs-booking-container .sbs-portal-banner{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap!important;gap:18px!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0 0 18px!important;padding:22px 20px!important;overflow:visible!important;box-sizing:border-box!important;border:1px solid #e3e7ee!important;border-radius:16px!important;background:#f8fafc!important;background:linear-gradient(135deg,#f8fafc,#fff)!important;box-shadow:0 8px 24px rgba(15,23,42,.05)!important}
            .sbs-booking-container .sbs-portal-banner[hidden]{display:none!important}
            .sbs-booking-container .sbs-portal-banner-copy{display:grid!important;flex:1 1 280px!important;min-height:0!important;gap:3px!important}
            .sbs-booking-container .sbs-portal-banner-text{color:#18202d!important;font-size:14px!important;font-weight:800!important;line-height:1.3!important}
            .sbs-booking-container .sbs-portal-banner-subtext{display:block!important;color:#667085!important;font-size:12px!important;line-height:1.45!important}
            .sbs-booking-container .sbs-google-signin{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;min-height:40px!important;padding:5px 14px 5px 6px!important;border:1px solid #d9dde5!important;border-radius:10px!important;background:#fff!important;color:#3c4043!important;box-shadow:0 1px 2px rgba(15,23,42,.08)!important;font-size:14px!important;font-weight:650!important;line-height:1.2!important;text-decoration:none!important;white-space:nowrap!important}
            .sbs-booking-container .sbs-google-signin:hover{border-color:#c6cbd4!important;background:#fff!important;box-shadow:0 4px 12px rgba(15,23,42,.10)!important;color:#202124!important;transform:translateY(-1px)}
            .sbs-booking-container .sbs-portal-manage-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;padding:9px 16px!important;box-sizing:border-box!important;border:1px solid #f0b8d1!important;border-radius:11px!important;background:#fff5fa!important;color:#9d174d!important;box-shadow:0 3px 10px rgba(157,23,77,.08)!important;font-size:13px!important;font-weight:800!important;line-height:1.2!important;text-decoration:none!important;white-space:nowrap!important}
            .sbs-booking-container .sbs-portal-manage-link:hover{border-color:#e889b3!important;background:#fce7f3!important;color:#831843!important;box-shadow:0 6px 16px rgba(157,23,77,.13)!important;transform:translateY(-1px)}
            .sbs-booking-container .sbs-portal-banner-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex:0 1 auto!important;gap:10px!important;min-width:0!important}
            .sbs-booking-container .sbs-portal-banner-signout-form{display:block!important;flex:0 0 auto!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
            .sbs-booking-container .sbs-portal-banner-signout-form input[type=hidden]{display:none!important}
            .sbs-booking-container .sbs-portal-banner-signout{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;margin:0!important;padding:9px 13px!important;box-sizing:border-box!important;border:1px solid #d8dee8!important;border-radius:11px!important;background:#fff!important;color:#475569!important;box-shadow:none!important;font:inherit!important;font-size:12px!important;font-weight:750!important;line-height:1.2!important;text-decoration:none!important;white-space:nowrap!important;cursor:pointer!important}
            .sbs-booking-container .sbs-portal-banner-signout:hover,.sbs-booking-container .sbs-portal-banner-signout:focus-visible{border-color:#94a3b8!important;background:#f8fafc!important;color:#0f172a!important;box-shadow:0 0 0 3px rgba(148,163,184,.18)!important;outline:0!important}
            .sbs-booking-container .sbs-google-signin-mark{display:grid!important;place-items:center!important;overflow:hidden!important;flex:0 0 26px!important;width:26px!important;height:26px!important;min-width:26px!important;max-width:26px!important;min-height:26px!important;max-height:26px!important;background:#fff!important}
            .sbs-booking-container .sbs-google-signin-mark svg{display:block!important;flex:none!important;width:16px!important;height:16px!important;min-width:16px!important;max-width:16px!important;min-height:16px!important;max-height:16px!important;inline-size:16px!important;block-size:16px!important}
            .sbs-booking-container .sbs-signin-options>a{display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;text-align:center!important}
            .sbs-booking-container .sbs-signin-options>a:not(.sbs-apple-signin){width:100%!important;min-height:40px!important;margin:0!important;padding:7px 12px!important;box-sizing:border-box!important;border:1px solid #d7dee8!important;border-radius:10px!important;background:#fff!important;color:#374151!important;box-shadow:0 1px 2px rgba(15,23,42,.06)!important;font:inherit!important;font-size:13px!important;font-weight:700!important;line-height:1.2!important;text-decoration:none!important}
            .sbs-booking-container .sbs-signin-options>a:not(.sbs-apple-signin):hover,.sbs-booking-container .sbs-signin-options>a:not(.sbs-apple-signin):focus-visible{border-color:#f472b6!important;background:#fff7fb!important;color:#111827!important;box-shadow:0 0 0 3px rgba(244,114,182,.12)!important;outline:0!important}
            .sbs-booking-container .sbs-signin-options>a>.sbs-google-signin-mark,.sbs-booking-container .sbs-signin-options>a>.sbs-apple-signin-mark,.sbs-booking-container .sbs-signin-options>a>.sbs-facebook-signin-mark,.sbs-booking-container .sbs-signin-options>a>.sbs-code-signin-icon{position:static!important;inset:auto!important;margin:0!important}
            .sbs-booking-container .sbs-signin-options>a.sbs-code-signin{padding:7px 12px!important}
            .sbs-booking-container .sbs-signin-options>a.sbs-code-signin>span:last-child{display:inline!important;width:auto!important;margin:0!important;text-align:center!important}
            .sbs-booking-container .sbs-signin-menu>.sbs-signin-trigger{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;width:100%!important;min-height:44px!important;margin:0!important;padding:7px 11px!important;box-sizing:border-box!important;border:1px solid #d7dee8!important;border-radius:11px!important;background:var(--sbs-signin-trigger-bg,#f8fafc)!important;color:var(--sbs-signin-trigger-text,#1f2937)!important;box-shadow:0 4px 12px rgba(15,23,42,.06)!important;font:inherit!important;font-size:13px!important;font-weight:750!important;line-height:1.2!important;text-align:left!important;text-transform:none!important;letter-spacing:normal!important;cursor:pointer!important;-webkit-appearance:none!important;appearance:none!important}
            .sbs-booking-container .sbs-signin-menu>.sbs-signin-trigger:hover,.sbs-booking-container .sbs-signin-menu>.sbs-signin-trigger:focus-visible,.sbs-booking-container .sbs-signin-menu.is-open>.sbs-signin-trigger{border-color:#f472b6!important;background:var(--sbs-signin-trigger-bg,#f8fafc)!important;color:var(--sbs-signin-trigger-text,#1f2937)!important;box-shadow:0 0 0 3px rgba(244,114,182,.14)!important;outline:0!important}
            .sbs-booking-container .sbs-signin-trigger-icon{display:grid!important;place-items:center!important;flex:0 0 30px!important;width:30px!important;height:30px!important;border-radius:9px!important;background:rgba(236,72,153,.1)!important;color:#db2777!important}
            .sbs-booking-container .sbs-signin-trigger-icon svg{display:block!important;width:20px!important;height:20px!important}
            .sbs-booking-container .sbs-signin-trigger-label{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
            .sbs-booking-container .sbs-signin-chevron{display:grid!important;place-items:center!important;flex:0 0 18px!important;margin-inline-start:auto!important;transition:transform .16s ease!important}
            .sbs-booking-container .sbs-signin-menu.is-open .sbs-signin-chevron{transform:rotate(180deg)!important}
            .sbs-booking-container .sbs-portal-banner .sbs-signin-menu{position:relative!important;z-index:10000!important;align-self:center!important;min-width:252px!important;overflow:visible!important}
            .sbs-booking-container .sbs-portal-banner .sbs-signin-menu>.sbs-signin-options{position:absolute!important;z-index:10001!important;top:calc(100% + 10px)!important;right:0!important;left:auto!important;display:grid!important;gap:8px!important;width:min(320px,calc(100vw - 36px))!important;margin:0!important;padding:12px!important;box-sizing:border-box!important;border:1px solid #dce2ea!important;border-radius:14px!important;background:var(--sbs-signin-panel-bg,#fff)!important;box-shadow:0 18px 48px rgba(15,23,42,.2)!important;color:#172033!important}
            .sbs-booking-container .sbs-signin-menu:not(.is-open)>.sbs-signin-options{display:none!important}
            .sbs-booking-container .sbs-signin-menu.is-open>.sbs-signin-options{display:grid!important}
            .sbs-booking-container .sbs-signin-optional-note{margin:9px 2px 0!important;color:#64748b!important;font-size:12px!important;font-weight:600!important;line-height:1.45!important;text-align:left!important}
            .sbs-booking-container .sbs-customer-form .sbs-form-group:first-child>.sbs-signin-menu-wide{margin:0 0 22px!important}
            .sbs-booking-container .yatoon-ai-helper-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:stretch!important;gap:9px!important}
            .sbs-booking-container .yatoon-ai-helper-actions .sbs-btn{width:100%!important;max-width:none!important;white-space:normal!important}
            .sbs-booking-container #yatoon-ai-service-status{display:none!important;width:100%!important;box-sizing:border-box!important;margin:0!important;padding:9px 11px!important;border:1px solid #fed7aa!important;border-radius:9px!important;background:#fff7ed!important;color:#9a3412!important;font-size:13px!important;font-weight:650!important;line-height:1.4!important}
            .sbs-booking-container #yatoon-ai-service-status:not(:empty){display:block!important}
            @media(max-width:640px){.sbs-booking-container{padding-top:14px!important}.sbs-booking-container .sbs-booking-main{padding-top:14px!important}.sbs-booking-container #sbs-progress-bar{scroll-margin-top:150px!important}.sbs-booking-container .sbs-customer-form .sbs-form-group:first-child>.sbs-signin-menu-wide{margin-bottom:26px!important}.sbs-booking-container .sbs-portal-banner{align-items:stretch!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:18px!important;padding:17px 18px 20px!important}.sbs-booking-container .sbs-portal-banner-copy{flex:0 0 auto!important;width:100%!important;min-height:0!important}.sbs-booking-container .sbs-google-signin{flex:0 0 auto!important;width:100%!important;box-sizing:border-box!important}.sbs-booking-container .sbs-portal-banner-actions{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;width:100%!important}.sbs-booking-container .sbs-portal-manage-link{width:100%!important}.sbs-booking-container .sbs-portal-banner-signout{min-width:78px!important}.sbs-booking-container .sbs-portal-banner .sbs-signin-menu{width:100%!important;min-width:0!important}.sbs-booking-container .sbs-portal-banner .sbs-signin-menu>.sbs-signin-options{position:static!important;width:100%!important;margin-top:8px!important;box-shadow:0 8px 24px rgba(15,23,42,.12)!important}}
            /* 4.6.0.1 spacing: on phones the first card (the "Your appointments"
               banner) sat almost flush under the site header while keeping a
               generous gutter on its left and right. Give the top the same
               breathing room so the card is evenly inset on all three sides.
               Two selectors because the Square template nests the banner inside
               .sbs-booking-main while the standard template puts it directly
               inside .sbs-booking-container. */
            @media(max-width:640px){
                .sbs-booking-container>.sbs-booking-layout>.sbs-booking-main{padding-top:18px!important}
                .sbs-booking-container>.sbs-portal-banner{margin-top:8px!important}
            }

            /* 4.6.1 accessibility and layout-stability pass.
               - Touch targets: 12 of 30 interactive elements measured under
                 44x44 on a 390px viewport; the ones pinned by this very
                 stylesheet are raised here.
               - Contrast: .sbs-appt-type-label was #9ca3af on white = 2.54:1,
                 below the 4.5:1 WCAG AA floor.
               - Layout: the progress bar shipped as display:none and was
                 revealed by JS, pushing everything below it down 83px on
                 first paint. It now reserves height instead.
                 4.6.2: that reserve was a full 84px, which bought CLS
                 protection for one case -- a restored session resuming past
                 step 1 -- by charging every visitor 84px of dead space at the
                 top of step 1, the screen where booking actually converts.
                 On desktop .sbs-booking-main only contributes 12px of padding,
                 so the reserve WAS the gap merchants were seeing above "Your
                 appointments". Cut to a 10px spacer (8px under 640px): the
                 first screen gets ~77% of that space back, and the shift it
                 used to absorb now only happens after a click, on a panel that
                 is swapping its whole contents anyway. */
            .sbs-booking-container .sbs-portal-manage-link,
            .sbs-booking-container .sbs-portal-banner-signout{min-height:44px!important}
            .sbs-booking-container .sbs-cat-tab,
            .sbs-booking-container #sbs-cat-more-btn{min-height:44px!important}
            .sbs-booking-container .sbs-prog-step{min-width:44px!important;min-height:44px!important}
            .sbs-booking-container .sbs-appt-type-label{color:#6b7280!important}
            .sbs-booking-container #sbs-progress-bar.sbs-progress-bar-reserved{display:block!important;visibility:hidden!important;height:10px!important;min-height:10px!important;overflow:hidden!important;pointer-events:none!important}
            @media(max-width:640px){
                .sbs-booking-container #sbs-progress-bar.sbs-progress-bar-reserved{height:8px!important;min-height:8px!important}
            }
            /* Dead rule removal: .sbs-navigation-buttons carried
               bottom:calc(86px + env(safe-area-inset-bottom, 0px)) which a later
               rule overrode with bottom:0, so the 86px reservation never
               applied. Make the intent explicit instead of leaving both. */
            .sbs-booking-container .sbs-navigation-buttons{bottom:0!important;padding-bottom:max(10px, env(safe-area-inset-bottom, 0px))!important}

            /* 4.6.1 card on file. Deliberately quiet: a card field that shouts
               reads as a paywall, and this is a hold, not a charge. */
            .sbs-booking-container .yatoon-cof-box{margin-top:18px!important;padding:16px 16px 14px!important;border:1px solid #e3e7ee!important;border-radius:14px!important;background:linear-gradient(135deg,#f8fafc,#fff)!important}
            .sbs-booking-container .yatoon-cof-box.is-saved{border-color:#a7d7b8!important;background:linear-gradient(135deg,#f4fbf6,#fff)!important}
            .sbs-booking-container .yatoon-cof-title{margin:0 0 6px!important;font-size:15px!important;font-weight:800!important;color:#18202d!important}
            .sbs-booking-container .yatoon-cof-policy{margin:0 0 12px!important;font-size:12.5px!important;line-height:1.5!important;color:#667085!important}
            .sbs-booking-container .yatoon-cof-element{padding:12px!important;border:1px solid #d7dee8!important;border-radius:10px!important;background:#fff!important;min-height:46px!important}
            .sbs-booking-container .yatoon-cof-consent{display:flex!important;align-items:flex-start!important;gap:8px!important;margin:12px 0 0!important;font-size:13px!important;line-height:1.5!important;color:#374151!important;cursor:pointer!important}
            .sbs-booking-container .yatoon-cof-consent input{margin-top:3px!important;width:18px!important;height:18px!important;flex:0 0 18px!important}
            .sbs-booking-container .yatoon-cof-save{margin-top:12px!important;min-height:44px!important;width:100%!important;box-sizing:border-box!important}
            .sbs-booking-container .yatoon-cof-status{margin:10px 0 0!important;font-size:13px!important;line-height:1.45!important;min-height:1.45em!important}
            .sbs-booking-container .yatoon-cof-status.is-error{color:#b4232b!important}
            .sbs-booking-container .yatoon-cof-status.is-success{color:#2d6b52!important;font-weight:700!important}
            .sbs-booking-container .yatoon-cof-status.is-working{color:#667085!important}

            /* Safari zooms focused controls below 16px. Cover large phones,
               landscape phones, foldables and small tablets, not only <=480px. */
            @media(max-width:768px){
                .sbs-booking-container :is(input,select,textarea){font-size:16px!important}
            }

/* 4.6.2: calendar day-density states.
   The week/month renderers are gaining two classes on the date buttons:
   .sbs-day-full  - that day is fully booked
   .sbs-day-busy  - that day has only a few slots left
   Both are purely visual. Neither sets pointer-events on the button, because
   whether a date can be clicked is decided in frontend.js, and a CSS rule that
   quietly swallows clicks would put the two out of sync. (pointer-events IS set
   on the two pseudo-elements below - an overlay that ate its own button's
   clicks would be a bug.)

   Why the cues are what they are:
   - .sbs-day-full is signalled three ways: a diagonal hatch, a strike through
     the date number, and lowered contrast. Colour alone would fail WCAG 1.4.1,
     and colour alone is also just bad on a small square: "slightly greyer than
     the one next to it" is not a state anyone reads at a glance.
   - .sbs-day-busy is a single small mark. It is a nudge, not a verdict - the
     day is still bookable, and the button already carries the real information
     in its aria-label ("N times available", set in _updateDateAvailabilityMeter).

   Why currentColor and not fixed greys: this widget has no dark theme of its
   own, but host themes do restyle it, and a hard-coded #6b7280 that reads fine
   on white disappears on a dark card. Deriving from currentColor means both
   states track whatever palette is actually in force. A flat fallback is
   declared first for engines without color-mix().

   No !important anywhere here, deliberately - this sheet loads last, so
   .sbs-booking-container .sbs-day-button.sbs-day-full (0,3,0) already outranks
   or ties-and-wins against every base rule in frontend.css. The one thing it
   does NOT beat is `.sbs-month-cell:not(.disabled):not(.empty):hover
   {background:#f3f4f6!important}` in frontend.css - which is exactly why the
   hatch lives on a pseudo-element instead of on the button's own background,
   so hovering a full month cell cannot wipe the cue out. */

.sbs-booking-container .sbs-day-button.sbs-day-full,
.sbs-booking-container .sbs-day-button.sbs-day-busy {
    position: relative;
}

/* Fully booked: hatch overlay. */
.sbs-booking-container .sbs-day-button.sbs-day-full::before {
    content: "";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-radius: inherit;
    pointer-events: none;
    background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(100, 116, 139, .22) 4px 5px);
    background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, currentColor 22%, transparent) 4px 5px);
}

/* Fully booked or closed: struck-through, demoted date. */
.sbs-booking-container .sbs-day-button.sbs-day-full .sbs-day-month,
.sbs-booking-container .sbs-day-button.sbs-day-full .sbs-day-name,
.sbs-booking-container .sbs-day-button.sbs-day-full .sbs-day-number,
.sbs-booking-container .sbs-day-button.sbs-day-full .sbs-month-day-number {
    color: #6b7280;
    color: color-mix(in srgb, currentColor 65%, transparent);
}

.sbs-booking-container .sbs-day-button.sbs-day-full .sbs-day-number,
.sbs-booking-container .sbs-day-button.sbs-day-full .sbs-month-day-number {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

/* Nearly full: one small warm mark in the corner. Positioned with a logical
   inset, so this rule needs no mirroring in the RTL twin. */
.sbs-booking-container .sbs-day-button.sbs-day-busy::after {
    content: "";
    position: absolute;
    top: 5px;
    inset-inline-end: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    background: #b45309;
    background: color-mix(in srgb, #f59e0b 70%, currentColor);
}

@media (forced-colors: active) {
    /* Forced-colours mode overrides author backgrounds, so the hatch and the
       dot would both be repainted into invisibility. System colour keywords
       are honoured, so the cues are re-expressed with those: a dashed ring for
       "full" (dashes read as unavailable, and shape survives where colour does
       not) and a solid mark for "busy". text-decoration is not forced, so the
       strike-through carries over untouched. */
    .sbs-booking-container .sbs-day-button.sbs-day-full::before {
        background: none;
        border: 2px dashed GrayText;
    }

    .sbs-booking-container .sbs-day-button.sbs-day-full .sbs-day-month,
    .sbs-booking-container .sbs-day-button.sbs-day-full .sbs-day-name,
    .sbs-booking-container .sbs-day-button.sbs-day-full .sbs-day-number,
    .sbs-booking-container .sbs-day-button.sbs-day-full .sbs-month-day-number {
        color: GrayText;
    }

    .sbs-booking-container .sbs-day-button.sbs-day-busy::after {
        width: 7px;
        height: 7px;
        background: CanvasText;
    }
}

/* 4.6.2: inline field validation errors.
   frontend.js now validates name/email/phone on blur and injects a
   .sbs-field-error node carrying role="alert", wired to its input through
   aria-invalid + aria-describedby. The markup shipped without any styling, so
   the message rendered as unstyled body text directly under the field - which
   reads as a caption, not as a problem, and is the one thing an error message
   must not do.

   Colour is not the only cue: the message is prefixed with a mark and the
   offending input gets a border, because roughly one in twelve men cannot rely
   on a red/grey distinction, and because the message sits below the fold of the
   field on small screens where the two are not adjacent.

   #b3261e on white is 5.9:1 - above the 4.5:1 floor, unlike the #ef4444 that
   this codebase reaches for elsewhere (3.76:1, which fails on text this size). */

.sbs-booking-container .sbs-field-error {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: #b3261e;
}

.sbs-booking-container .sbs-field-error::before {
    content: "!";
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    border-radius: 50%;
    background: #b3261e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* The input itself. aria-invalid is what frontend.js actually sets, so style
   that rather than a second parallel class that could drift out of sync with
   the accessibility state. */
.sbs-booking-container :is(input,select,textarea)[aria-invalid="true"] {
    border-color: #b3261e;
}

.sbs-booking-container :is(input,select,textarea)[aria-invalid="true"]:focus {
    outline: 2px solid #b3261e;
    outline-offset: 1px;
}

@media (forced-colors: active) {
    /* Author colours are dropped here, so the badge would vanish into its own
       background. Fall back to shape: a bordered marker plus the system's own
       text colour. */
    .sbs-booking-container .sbs-field-error {
        color: CanvasText;
    }

    .sbs-booking-container .sbs-field-error::before {
        background: Canvas;
        color: CanvasText;
        border: 1px solid CanvasText;
    }

    .sbs-booking-container :is(input,select,textarea)[aria-invalid="true"] {
        border-color: CanvasText;
        border-width: 2px;
    }
}
.sbs-option-variable-badge {
    display: inline-flex;
    align-items: center;
    margin: 5px 0 2px;
    padding: 3px 7px;
    border: 1px solid color-mix(in srgb, var(--primary-color, #ec4899) 28%, white);
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color, #ec4899) 9%, white);
    color: var(--primary-color, #be185d);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.2;
}

.sbs-option-item.selected .sbs-option-variable-badge {
    background: color-mix(in srgb, var(--primary-color, #ec4899) 14%, white);
}