/*!
 * Yatoon Booking System - theme isolation layer.
 *
 * The recurring bug this file ends
 * ------------------------------------------------------------------
 * The booking flow uses bare, unclassed `<button>` elements wherever a control
 * is really a layout element carrying text: the mobile cart bar's cart block,
 * its Back and Next controls, the drawer's Close. They were left unclassed on
 * purpose, because the flow paints them by id.
 *
 * Themes do not know that. Astra, Divi, Brizy, GeneratePress and essentially
 * every page builder style the bare `button` element globally - background,
 * border, border-radius, padding, text-transform: uppercase, letter-spacing,
 * box-shadow. So on those sites the flow's plain text controls arrived as large
 * coloured uppercase pills, and the fix each time was to add rules for that one
 * component, in a new file, with enough specificity to win that week's fight.
 * That happened for the cart bar in 4721, the cart bar again in 4722 after the
 * first fix removed padding the theme had been supplying, and the drawer Close
 * button after that.
 *
 * This layer states the rule once, as a rule rather than as a list of repairs:
 *
 *   A button inside a Yatoon booking surface that carries no class of its own
 *   is a Yatoon layout element. No theme may paint it.
 *
 * `:not([class])` is what makes that safe to apply broadly. Every element the
 * flow styles itself carries an `sbs-`/`yatoon-` class, so this layer cannot
 * reach one; it only ever touches the unclassed elements that exist precisely
 * because the flow intends to own them. A component that later wants theme
 * styling opts out simply by having a class, which it would have anyway.
 *
 * `data-theme-skin` is the second opt-out, for a control that has no class and
 * genuinely should wear the theme. The mobile bar's Back and Next are exactly
 * that: they are the two real actions, and the design deliberately lets them
 * take the site's own button colour and casing so they read as this salon's
 * buttons rather than the plugin's. Only the cart block between them is the
 * flow's plain text. Marking them in the markup keeps that decision visible
 * where the elements are written, instead of encoding it as an id exception in
 * here - an `:not(#id)` would also carry an id's specificity and start
 * outranking the component rules this layer is supposed to lose to.
 *
 * Load order
 * ------------------------------------------------------------------
 * Enqueued BEFORE the component stylesheets and before the armor layer, so
 * anything Yatoon declares afterwards wins normally, without `!important`.
 * `!important` is used here only against theme declarations, which can arrive
 * at any specificity including id-based ones from page builders.
 *
 * @since 4.7.2 build 4750
 */

/* ------------------------------------------------------------------
 * Unclassed buttons inside every Yatoon booking surface.
 *
 * The bar, drawer and modals render OUTSIDE .sbs-booking-container, which is
 * why they are listed individually rather than covered by the container alone.
 * ------------------------------------------------------------------ */
/*
 * Scope note, learned the hard way in 4721.
 *
 * This layer removes PAINT only - background, border, shadow, casing, face.
 * It deliberately does not touch padding, margin, width or height, because
 * that is exactly the mistake that produced the second cart bar regression:
 * neutralising the theme's skin also removed the padding the theme had been
 * accidentally supplying, and the bar had nothing of its own to fall back on.
 * Layout belongs to the component stylesheets, which know what each control is
 * supposed to look like. Paint belongs here. Keeping that line clean is what
 * stops this layer from becoming the next thing that needs a repair file.
 */
.sbs-booking-container button:not([class]):not([data-theme-skin]),
#sbs-mobile-cart-bar button:not([class]):not([data-theme-skin]),
#sbs-mobile-drawer button:not([class]):not([data-theme-skin]),
.sbs-booking-modal button:not([class]):not([data-theme-skin]),
.yatoon-booking-surface button:not([class]):not([data-theme-skin]) {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer;
    touch-action: manipulation;
}

/* A theme's hover/active/focus skin has to be neutralised too, or the control
 * repaints itself the moment a finger touches it. */
.sbs-booking-container button:not([class]):not([data-theme-skin]):hover,
.sbs-booking-container button:not([class]):not([data-theme-skin]):active,
.sbs-booking-container button:not([class]):not([data-theme-skin]):focus,
#sbs-mobile-cart-bar button:not([class]):not([data-theme-skin]):hover,
#sbs-mobile-cart-bar button:not([class]):not([data-theme-skin]):active,
#sbs-mobile-cart-bar button:not([class]):not([data-theme-skin]):focus,
#sbs-mobile-drawer button:not([class]):not([data-theme-skin]):hover,
#sbs-mobile-drawer button:not([class]):not([data-theme-skin]):active,
#sbs-mobile-drawer button:not([class]):not([data-theme-skin]):focus,
.sbs-booking-modal button:not([class]):not([data-theme-skin]):hover,
.sbs-booking-modal button:not([class]):not([data-theme-skin]):active,
.sbs-booking-modal button:not([class]):not([data-theme-skin]):focus {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    text-decoration: none !important;
    transform: none !important;
}

/* Keyboard focus must survive the neutralisation above: removing the theme's
 * outline without supplying one would make the flow unusable by keyboard, and
 * :focus-visible is deliberately excluded from the :focus reset for that
 * reason. This is the flow's own indicator, on every booking surface. */
.sbs-booking-container button:not([class]):not([data-theme-skin]):focus-visible,
#sbs-mobile-cart-bar button:not([class]):not([data-theme-skin]):focus-visible,
#sbs-mobile-drawer button:not([class]):not([data-theme-skin]):focus-visible,
.sbs-booking-modal button:not([class]):not([data-theme-skin]):focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}

/* ------------------------------------------------------------------
 * Typography leakage.
 *
 * The bar, drawer and modals sit outside .sbs-booking-container, so the flow's
 * type scale never reached them and a theme's heading face styled the sheet -
 * a serif "Your appointment" above a sans-serif flow. The booking tokens are
 * declared on :root for this case; this points the outside surfaces at them.
 * Elements that carry a class keep whatever the flow gives them.
 * ------------------------------------------------------------------ */
#sbs-mobile-cart-bar,
#sbs-mobile-drawer,
#sbs-mobile-cart-bar button:not([class]):not([data-theme-skin]),
#sbs-mobile-drawer button:not([class]):not([data-theme-skin]),
#sbs-mobile-drawer h2:not([class]),
#sbs-mobile-drawer h3:not([class]),
#sbs-mobile-drawer h4:not([class]) {
    font-family: var(--y4-font, var(--sbs-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif)) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ------------------------------------------------------------------
 * Form controls the flow leaves unclassed.
 *
 * Same principle, and the reason a "Any Staff Available" select was once
 * clipped: a theme's global select width/padding applied to a control the flow
 * had sized itself. Kept to sizing and decoration only - the native control
 * appearance is left alone, because replacing a mobile select's own UI is how
 * pickers become unusable on a phone.
 * ------------------------------------------------------------------ */
.sbs-booking-container select:not([class]),
.sbs-booking-container input[type="text"]:not([class]),
.sbs-booking-container input[type="tel"]:not([class]),
.sbs-booking-container input[type="email"]:not([class]),
.sbs-booking-container textarea:not([class]) {
    box-sizing: border-box !important;
    /* max-width, not width: a theme that caps a select at its own narrow width
     * is what once clipped "Any Staff Available". Letting the control be as
     * wide as its container allows without forcing a width keeps the flow's
     * own sizing in charge. */
    max-width: 100% !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    /* 16px keeps iOS Safari from zooming the viewport on focus. Anything
     * smaller and the page jumps every time a customer taps a field. */
    font-size: max(16px, 1rem) !important;
}

/* ------------------------------------------------------------------
 * Lists and links.
 *
 * Themes add list markers and bullets to the flow's own <ul>s, and underline
 * every <a>. Both show up as stray dots and lines through the summary rows.
 * ------------------------------------------------------------------ */
.sbs-booking-container ul:not([class]),
.sbs-booking-container ol:not([class]),
#sbs-mobile-drawer ul:not([class]),
#sbs-mobile-drawer ol:not([class]) {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.sbs-booking-container ul:not([class]) > li::before,
.sbs-booking-container ol:not([class]) > li::before,
#sbs-mobile-drawer ul:not([class]) > li::before,
#sbs-mobile-drawer ol:not([class]) > li::before {
    content: none !important;
}