/*!
 * Yatoon Booking System - theme armor layer (build 4721).
 *
 * DO NOT rename this file on the next change. See "Naming" below.
 *
 * Why this file exists:
 *
 * 1. Host caching. Sites running LiteSpeed Cache with "Remove Query Strings"
 *    enabled strip the ?ver= cache buster from every enqueued asset, so a
 *    browser or CDN that cached yatoon-booking-core.min.css / -final.min.css
 *    once keeps serving that copy after a plugin update. A brand-new file name
 *    was the only cache buster that survived that setting, which is why the
 *    rules below are self-sufficient and do not assume the other stylesheets
 *    on the page are current.
 *
 * 2. Theme button skins. Astra (and most page-builder themes) style the bare
 *    `button` element globally: background-color, border-radius, padding and
 *    text-transform: uppercase. The mobile cart bar's controls are bare
 *    buttons, so on those sites they came out as a large coloured uppercase
 *    pill instead of the plain text block the flow is designed around.
 *
 * Naming, as of 4.7.2 build 4750
 * ------------------------------------------------------------------
 * Reason 1 no longer applies. YATOON_Asset_Fingerprint publishes every
 * frontend asset under a filename containing a hash of its contents, so the
 * URL changes whenever the bytes change and there is no query string left for
 * an optimiser to strip. Editing this file is now enough on its own: the build
 * number in the name is history rather than a requirement, and the next change
 * to it should keep the name it already has.
 *
 * Reason 2 is now answered generally by yatoon-theme-isolation.css, which
 * states the rule once for every unclassed control on every booking surface
 * rather than component by component. What belongs here is the layout each
 * specific control needs - grid tracks, sizes, the category bar metrics -
 * which is component knowledge and stays with the component.
 *
 * Loaded last, after yatoon-service-image-frame.css.
 */

/* ------------------------------------------------------------------
 * 1. Mobile cart bar - the flow's own layout, and no theme button skin.
 *
 * These rules exist in yatoon-booking-final.css too. They are repeated here on
 * purpose: on a host that strips ?ver= from asset URLs the browser keeps its
 * cached copy of that file under an address that never changes, so the layout
 * never arrives. Neutralising the theme's skin without also carrying the
 * layout is worse than doing neither -- the bar loses the padding the theme
 * gave it and has nothing of its own to fall back on, which is how the cart
 * block ended up jammed against the left edge. Skin and layout ship together.
 *
 * The two real actions keep the theme's own casing and colour: only the cart
 * block is the flow's plain text.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
    body #sbs-mobile-cart-bar.sbs-bar-visible.sbs-separated-actions {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 0 !important;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        cursor: default !important;
    }

    /* Step 1 has no Back, so the cart block owns the wide column and stays
     * centred in it rather than sitting against the edge. */
    body #sbs-mobile-cart-bar.sbs-separated-actions.sbs-unified-step-1 {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    body #sbs-mobile-cart-bar #sbs-cart-expand-btn {
        display: none !important;
    }

    body #sbs-mobile-cart-bar #sbs-cart-info {
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 36px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        column-gap: 8px !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        justify-self: center !important;
        width: max-content !important;
        max-width: min(148px, 100%) !important;
        min-width: 0 !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 4px 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-image: none !important;
        color: #172033 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        font: inherit !important;
        text-align: start !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        cursor: pointer;
        touch-action: manipulation;
    }

    body #sbs-mobile-cart-bar #sbs-cart-info #sbs-cart-avatar {
        display: flex !important;
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        width: 36px !important;
        height: 38px !important;
        margin: 0 !important;
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body #sbs-mobile-cart-bar #sbs-cart-name,
    body #sbs-mobile-cart-bar #sbs-cart-meta {
        display: block !important;
        max-width: 100% !important;
        line-height: 1.3 !important;
    }

    body #sbs-mobile-cart-bar #sbs-cart-name {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: end !important;
        color: #111827 !important;
        font-weight: 800 !important;
    }

    body #sbs-mobile-cart-bar #sbs-cart-meta {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: start !important;
        color: #475569 !important;
        font-weight: 500 !important;
    }

    body #sbs-mobile-cart-bar #sbs-cart-info[aria-expanded="true"] #sbs-cart-meta {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    body #sbs-mobile-cart-bar #sbs-cart-back-btn,
    body #sbs-mobile-cart-bar #sbs-cart-next-btn {
        box-sizing: border-box !important;
        width: auto !important;
        min-width: 68px !important;
        max-width: 144px !important;
        min-height: 44px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 10px 16px !important;
        border-radius: 999px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        touch-action: manipulation;
    }

    body #sbs-mobile-cart-bar #sbs-cart-back-btn { min-width: 84px !important; }
    body #sbs-mobile-cart-bar #sbs-cart-next-btn { min-width: 104px !important; }

    body #sbs-mobile-cart-bar button:focus-visible,
    body #sbs-mobile-drawer button:focus-visible {
        outline: 2px solid #172033 !important;
        outline-offset: 2px !important;
    }
}

@media (max-width: 360px) {
    body #sbs-mobile-cart-bar #sbs-cart-info {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        column-gap: 4px !important;
    }
    body #sbs-mobile-cart-bar #sbs-cart-info #sbs-cart-avatar { width: 30px !important; }
    body #sbs-mobile-cart-bar #sbs-cart-info #sbs-cart-name { font-size: 12px !important; }
}

/* ------------------------------------------------------------------
 * 1b. Cart drawer - same story as the bar, one level deeper.
 *
 * #sbs-drawer-close-btn is a bare <button> with no styling of its own, and the
 * toolbar that right-aligns it lives in yatoon-booking-final.css, which a
 * query-string-stripping host keeps serving from cache. With neither present a
 * theme's global button skin owns it: Astra rendered it as a 108px coloured
 * pill with 16px/35px padding, parked at the left edge of the sheet.
 *
 * The drawer also sits OUTSIDE .sbs-booking-container, so the flow's own type
 * scale never reached it and the theme's h3 face (a serif here) styled "Your
 * appointment". The booking tokens are declared on :root for exactly this
 * reason, so the sheet can use them.
 * ------------------------------------------------------------------ */
#sbs-mobile-drawer .sbs-drawer-toolbar {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 0 12px 4px !important;
}

#sbs-mobile-drawer #sbs-drawer-close-btn {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 64px !important;
    max-width: none !important;
    min-height: 44px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    background-image: none !important;
    color: #172033 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font: inherit !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    cursor: pointer;
    touch-action: manipulation;
}

#sbs-mobile-drawer #sbs-drawer-close-btn:hover,
#sbs-mobile-drawer #sbs-drawer-close-btn:focus-visible {
    border-color: #cbd5e1 !important;
    background: #eef2f7 !important;
    color: #172033 !important;
}

/* The sheet's own labels, not the theme's uppercase button skin. */
#sbs-mobile-drawer,
#sbs-mobile-drawer button,
#sbs-mobile-drawer h2,
#sbs-mobile-drawer h3,
#sbs-mobile-drawer h4 {
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* The row eyebrows ("SERVICE", "OPTIONS", "PROFESSIONAL") are written
 * uppercase on purpose by the template; keep them. */
#sbs-mobile-drawer .sbs-booking-summary div[style*="uppercase"] {
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
}

#sbs-mobile-drawer,
#sbs-mobile-drawer button,
#sbs-mobile-drawer h2,
#sbs-mobile-drawer h3,
#sbs-mobile-drawer h4,
#sbs-mobile-drawer .sbs-booking-summary {
    font-family: var(--y4-font, var(--sbs-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)) !important;
}

/* ------------------------------------------------------------------
 * 2. Category bar - stop the row from collapsing to its own content.
 *
 * yatoon-ui-polish.css sized .sbs-category-tabs with width: max-content so a
 * short row could be centred. The fitting script measures that same element to
 * decide how many chips fit, so once a chip was moved into "More" the row got
 * narrower, which made the next measurement smaller again. The bar could only
 * ever shrink - on a 430px phone it settled at two chips with ~100px of unused
 * space to the right. The row is full width again here; the script measures the
 * wrapper as well, so the two agree.
 * ------------------------------------------------------------------ */
.sbs-booking-container .sbs-category-tabs,
body.sbs-booking-immersive .sbs-booking-container .sbs-category-tabs {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Centred, but from a full-width row: the chips sit in the middle without
     * the row itself being shrink-to-fit, so the fitting script still measures
     * a stable width and drops nothing into "More" that would have fitted.
     * `safe` falls back to flex-start if content ever does overflow, so the
     * first chip can never end up scrolled off the left edge. */
    justify-content: center !important;
}

/* `safe` keeps the first chip reachable if content ever does overflow; kept in
 * its own block so a minifier cannot fold it into the plain fallback above. */
@supports (justify-content: safe center) {
    .sbs-booking-container .sbs-category-tabs,
    body.sbs-booking-immersive .sbs-booking-container .sbs-category-tabs {
        justify-content: safe center !important;
    }
}

/* No drop shadow on the chips - the row reads as one clean line of pills.
 *
 * Specificity note: the shipped rule is
 * `body.sbs-booking-immersive .sbs-category-tabs .sbs-cat-tab[data-cat].active`
 * at (0,5,1), so the selectors below match or beat it rather than relying on
 * source order, and the More button needs an id in the selector to outrank
 * `body.sbs-booking-immersive #sbs-cat-more-btn.has-active`. */
body .sbs-booking-container .sbs-category-tabs .sbs-cat-tab[data-cat],
body .sbs-booking-container .sbs-category-tabs .sbs-cat-tab[data-cat].active,
body .sbs-booking-container .sbs-category-tabs .sbs-cat-tab[data-cat]:hover,
body .sbs-booking-container .sbs-category-tabs .sbs-cat-tab[data-cat].is-hover,
body .sbs-booking-container .sbs-category-tabs .sbs-cat-tab[data-cat]:focus-visible,
body.sbs-booking-immersive .sbs-booking-container .sbs-category-tabs .sbs-cat-tab[data-cat],
body.sbs-booking-immersive .sbs-booking-container .sbs-category-tabs .sbs-cat-tab[data-cat].active,
body.sbs-booking-immersive .sbs-booking-container .sbs-category-tabs .sbs-cat-tab[data-cat]:hover,
body .sbs-booking-container .sbs-category-tabs #sbs-cat-more-btn,
body .sbs-booking-container .sbs-category-tabs #sbs-cat-more-btn.has-active,
body.sbs-booking-immersive .sbs-booking-container .sbs-category-tabs #sbs-cat-more-btn,
body.sbs-booking-immersive .sbs-booking-container .sbs-category-tabs #sbs-cat-more-btn.has-active {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Chip metrics. A later mobile block set 14px/800/10px-15px on every chip,
 * which is desktop sizing on a phone: one chip alone measured 153px. These are
 * the compact values the bar was designed with, and they outrank that block. */
@media (max-width: 782px) {
    .sbs-booking-container .sbs-category-tabs .sbs-cat-tab,
    .sbs-booking-container .sbs-category-tabs #sbs-cat-more-btn {
        min-height: 36px !important;
        max-width: 142px !important;
        padding: 8px 10px !important;
        font-size: clamp(10px, var(--sbs-cat-tab-sz, 11px), 12px) !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        white-space: nowrap !important;
    }

    .sbs-booking-container .sbs-category-tabs #sbs-cat-more-btn {
        min-width: 0 !important;
        max-width: 88px !important;
        padding-inline: 9px !important;
    }
}

@media (max-width: 429px) {
    .sbs-booking-container .sbs-category-tabs .sbs-cat-tab,
    .sbs-booking-container .sbs-category-tabs #sbs-cat-more-btn {
        padding: 8px 9px !important;
        font-size: clamp(9.5px, var(--sbs-cat-tab-sz, 10.5px), 11px) !important;
    }
}

/* ------------------------------------------------------------------
 * 3. Step 2 service artwork - one wide frame, flush with the card.
 *
 * yatoon-service-image-frame.css clamps every service surface to 1:1 so the
 * cards line up. The step 2 hero is not a card thumbnail: at full card width a
 * square is a wall of image, and where the 1:1 clamp lost to the immersive
 * aspect-ratio:auto rule the raw upload set the height instead - a portrait
 * poster rendered nearly full screen. It gets the 3:2 crop the panel was built
 * for, edge to edge, with the saved focal point respected.
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
    /* Beats .sbs-booking-container .sbs-step-2 .sbs-service-detail-panel,
     * which is three classes; the bare `body` breaks the tie. */
    body .sbs-booking-container .sbs-form-step .sbs-service-detail-panel {
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    body .sbs-booking-container .sbs-form-step .sbs-service-detail-image,
    body.sbs-booking-immersive .sbs-booking-container .sbs-service-detail-image {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 3 / 2 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    body .sbs-booking-container .sbs-form-step .sbs-service-detail-copy {
        padding: 14px !important;
    }
}

/* The template writes width/height inline on the <img>; only !important can
 * make it fill the frame instead of setting its own height. */
body .sbs-booking-container .sbs-service-detail-image {
    position: relative !important;
}

body .sbs-booking-container .sbs-service-detail-image img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: var(--yatoon-service-image-position-x, 50%) var(--yatoon-service-image-position-y, 50%) !important;
    transform: scale(var(--yatoon-service-image-zoom, 1)) !important;
}