/* ZSC brand button — matches the Elementor .zs-native-btn reveal.

   Default: white pill, navy text left-aligned, navy zigzag dots on right.
   Hover/focus: a 48×48 navy square (with white dots) slides in from the
   left, the rest of the button fills navy, the text slides right to clear
   the incoming square, and the original right-side dots fade out.

   ADA:
   - :focus-visible triggers the EXACT same animation as :hover so keyboard
     users get the same affordance as mouse users.
   - :focus-visible additionally paints a high-contrast outline ring on top
     of the hover state; mouse users never see the ring because they don't
     match :focus-visible.
   - prefers-reduced-motion disables the slide + fade so vestibular-sensitive
     users get an instant (non-animated) state change instead.
   - Color contrast: navy #003057 on white and white on navy both clear
     WCAG AA 7:1 at the 16px/weight-600 text size used here.

   Source of truth for the animation math (widths, offsets, easing) is the
   live Elementor custom CSS published at events.zanestate.edu on the
   .zs-native-btn container widget.
*/

:root {
    --zsc-blue: #003057;
    --zsc-blue-hover: #00213d;
    --zsc-brand-easing: linear(0, 0.57 7.6%, 0.84 11.9%, 0.95 14.2%, 1.03 16.5%, 1.09 19%, 1.13 21.5%, 1.14 24.5%, 1.14 26%, 1.12 31%, 1.05 38.6%, 1.02 42.6%, 1 47%, 0.99 51.6%, 0.98 58.8%, 1 81.3%, 1);
}

.zsc-brand-btn,
body .tp-bm-btn.tp-bm-btn-primary,
body .tp-bm-btn.tp-bm-back,
body.woocommerce-checkout form.checkout #place_order,
body.woocommerce-checkout form.checkout .place-order .button,
body.woocommerce-order-received a.woocommerce-button.button.print,
body.woocommerce-order-received .order-print a.button.print,
a.zsc-brand-btn {
    position: relative !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 78px 0 22px !important;
    white-space: nowrap !important;
    min-height: 48px !important;
    min-width: 184px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: var(--zsc-blue) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    cursor: pointer !important;
    overflow: hidden !important;
    outline: none !important;
    isolation: isolate;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: auto !important;
    box-sizing: border-box !important;
    transition: color 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 48×48 navy square with centered white zigzag dots — hidden off the left
   edge initially, slides in on hover/focus using the springy easing. */
.zsc-brand-btn::before,
body .tp-bm-btn.tp-bm-btn-primary::before,
body.woocommerce-checkout form.checkout #place_order::before,
body.woocommerce-checkout form.checkout .place-order .button::before,
body.woocommerce-order-received a.woocommerce-button.button.print::before,
body.woocommerce-order-received .order-print a.button.print::before,
a.zsc-brand-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    background-color: var(--zsc-blue);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22' fill='%23ffffff'><circle cx='3' cy='3' r='3'/><circle cx='11' cy='11' r='3'/><circle cx='3' cy='19' r='3'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 16px;
    border-radius: 14px;
    transform: translateX(-111%);
    transition: transform 0.7s var(--zsc-brand-easing);
    z-index: 2;
    pointer-events: none;
    will-change: transform;
}

/* Right-side navy zigzag dots — visible initially, fade + scale-down on
   hover/focus as the label transitions to white. */
.zsc-brand-btn::after,
body .tp-bm-btn.tp-bm-btn-primary::after,
body.woocommerce-checkout form.checkout #place_order::after,
body.woocommerce-checkout form.checkout .place-order .button::after,
body.woocommerce-order-received a.woocommerce-button.button.print::after,
body.woocommerce-order-received .order-print a.button.print::after,
a.zsc-brand-btn::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 10px;
    height: 16px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22' fill='%23003057'><circle cx='3' cy='3' r='3'/><circle cx='11' cy='11' r='3'/><circle cx='3' cy='19' r='3'/></svg>") center/contain no-repeat;
    transform: translateY(-50%);
    transition: transform 0.7s var(--zsc-brand-easing);
    pointer-events: none;
    animation: none !important;
    border: none !important;
    margin: 0 !important;
    z-index: 1;
}

/* HOVER + FOCUS: ADA parity — same animation for mouse and keyboard. */
.zsc-brand-btn:hover:not([disabled]):not(:disabled),
.zsc-brand-btn:focus-visible:not([disabled]):not(:disabled),
body .tp-bm-btn.tp-bm-btn-primary:hover:not([disabled]):not(:disabled),
body .tp-bm-btn.tp-bm-btn-primary:focus-visible:not([disabled]):not(:disabled),
body.woocommerce-checkout form.checkout #place_order:hover:not(:disabled),
body.woocommerce-checkout form.checkout #place_order:focus-visible:not(:disabled),
body.woocommerce-order-received a.woocommerce-button.button.print:hover,
body.woocommerce-order-received a.woocommerce-button.button.print:focus-visible,
a.zsc-brand-btn:hover,
a.zsc-brand-btn:focus-visible {
    color: #ffffff !important;
    background: var(--zsc-blue) !important;
}

/* Label wrapper — slides right on hover/focus to clear the incoming navy
   square. Animating transform on a child element keeps the button's total
   width constant so wider labels like "Confirm & add to cart" animate
   identically to shorter ones like "Next". */
.zsc-brand-btn > .tp-bm-btn-label,
.zsc-brand-btn > span,
body .tp-bm-btn.tp-bm-btn-primary > .tp-bm-btn-label,
a.zsc-brand-btn > .tp-bm-btn-label,
a.zsc-brand-btn > span,
body.woocommerce-checkout form.checkout #place_order > .tp-bm-btn-label,
body.woocommerce-checkout form.checkout .place-order .button > .tp-bm-btn-label,
body.woocommerce-order-received a.woocommerce-button.button.print > .tp-bm-btn-label,
body.woocommerce-order-received .order-print a.button.print > .tp-bm-btn-label {
    display: inline-block;
    transform: translateX(0);
    transition: transform 0.7s var(--zsc-brand-easing);
    will-change: transform;
}

.zsc-brand-btn:hover:not([disabled]):not(:disabled) > .tp-bm-btn-label,
.zsc-brand-btn:focus-visible:not([disabled]):not(:disabled) > .tp-bm-btn-label,
.zsc-brand-btn:hover:not([disabled]):not(:disabled) > span,
.zsc-brand-btn:focus-visible:not([disabled]):not(:disabled) > span,
body .tp-bm-btn.tp-bm-btn-primary:hover:not([disabled]):not(:disabled) > .tp-bm-btn-label,
body .tp-bm-btn.tp-bm-btn-primary:focus-visible:not([disabled]):not(:disabled) > .tp-bm-btn-label,
a.zsc-brand-btn:hover > .tp-bm-btn-label,
a.zsc-brand-btn:focus-visible > .tp-bm-btn-label,
a.zsc-brand-btn:hover > span,
a.zsc-brand-btn:focus-visible > span,
body.woocommerce-checkout form.checkout #place_order:hover:not(:disabled) > .tp-bm-btn-label,
body.woocommerce-checkout form.checkout #place_order:focus-visible:not(:disabled) > .tp-bm-btn-label,
body.woocommerce-checkout form.checkout .place-order .button:hover:not(:disabled) > .tp-bm-btn-label,
body.woocommerce-checkout form.checkout .place-order .button:focus-visible:not(:disabled) > .tp-bm-btn-label,
body.woocommerce-order-received a.woocommerce-button.button.print:hover > .tp-bm-btn-label,
body.woocommerce-order-received a.woocommerce-button.button.print:focus-visible > .tp-bm-btn-label,
body.woocommerce-order-received .order-print a.button.print:hover > .tp-bm-btn-label,
body.woocommerce-order-received .order-print a.button.print:focus-visible > .tp-bm-btn-label {
    transform: translateX(46px);
}

.zsc-brand-btn:hover:not([disabled]):not(:disabled)::before,
.zsc-brand-btn:focus-visible:not([disabled]):not(:disabled)::before,
body .tp-bm-btn.tp-bm-btn-primary:hover:not([disabled]):not(:disabled)::before,
body .tp-bm-btn.tp-bm-btn-primary:focus-visible:not([disabled]):not(:disabled)::before,
body.woocommerce-checkout form.checkout #place_order:hover:not(:disabled)::before,
body.woocommerce-checkout form.checkout #place_order:focus-visible:not(:disabled)::before,
body.woocommerce-order-received a.woocommerce-button.button.print:hover::before,
body.woocommerce-order-received a.woocommerce-button.button.print:focus-visible::before,
a.zsc-brand-btn:hover::before,
a.zsc-brand-btn:focus-visible::before {
    transform: translateX(0);
}

.zsc-brand-btn:hover:not([disabled]):not(:disabled)::after,
.zsc-brand-btn:focus-visible:not([disabled]):not(:disabled)::after,
body .tp-bm-btn.tp-bm-btn-primary:hover:not([disabled]):not(:disabled)::after,
body .tp-bm-btn.tp-bm-btn-primary:focus-visible:not([disabled]):not(:disabled)::after,
body.woocommerce-checkout form.checkout #place_order:hover:not(:disabled)::after,
body.woocommerce-checkout form.checkout #place_order:focus-visible:not(:disabled)::after,
body.woocommerce-order-received a.woocommerce-button.button.print:hover::after,
body.woocommerce-order-received a.woocommerce-button.button.print:focus-visible::after,
a.zsc-brand-btn:hover::after,
a.zsc-brand-btn:focus-visible::after {
    transform: translate(46px, -50%);
}

/* Keyboard-only focus ring — layered on top of the shared hover animation. */
.zsc-brand-btn:focus-visible,
body .tp-bm-btn.tp-bm-btn-primary:focus-visible,
body.woocommerce-checkout form.checkout #place_order:focus-visible,
body.woocommerce-order-received a.woocommerce-button.button.print:focus-visible,
a.zsc-brand-btn:focus-visible {
    outline: 3px solid rgba(0, 48, 87, 0.45) !important;
    outline-offset: 3px !important;
}

.zsc-brand-btn:active:not([disabled]):not(:disabled),
body .tp-bm-btn.tp-bm-btn-primary:active:not([disabled]):not(:disabled),
body .tp-bm-btn.tp-bm-back:active:not([disabled]):not(:disabled),
body.woocommerce-checkout form.checkout #place_order:active:not(:disabled),
body.woocommerce-order-received a.woocommerce-button.button.print:active,
a.zsc-brand-btn:active {
    transform: translateY(1px) !important;
    transition-duration: 60ms !important;
}

.zsc-brand-btn[disabled],
.zsc-brand-btn:disabled,
body .tp-bm-btn.tp-bm-btn-primary[disabled],
body .tp-bm-btn.tp-bm-btn-primary:disabled,
body .tp-bm-btn.tp-bm-back[disabled],
body .tp-bm-btn.tp-bm-back:disabled,
body.woocommerce-checkout form.checkout #place_order:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    pointer-events: none !important;
}

/* WooCommerce marks the checkout form as .processing while the submit AJAX
   is in flight. Lock the reveal into its "slid in" state and let the spinner
   override ::after's fade. */
body.woocommerce-checkout form.checkout.processing #place_order {
    color: transparent !important;
    background: var(--zsc-blue) !important;
}

body.woocommerce-checkout form.checkout.processing #place_order::before {
    transform: translateX(0) !important;
}

body.woocommerce-checkout form.checkout.processing #place_order::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    width: 20px !important;
    height: 20px !important;
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-top-color: #ffffff !important;
    border-radius: 50% !important;
    animation: zsc-co-spin 0.7s linear infinite !important;
    transition: none !important;
}

/* Compact variant for tight contexts (e.g. the "Check availability" action
   inside the booking modal's submit-error banner). */
.tp-bm-submit-error-action.zsc-brand-btn,
a.tp-bm-submit-error-action {
    min-height: 40px !important;
    min-width: 140px !important;
    font-size: 13px !important;
    padding: 0 64px 0 16px !important;
}

.tp-bm-submit-error-action.zsc-brand-btn::before,
a.tp-bm-submit-error-action::before {
    width: 40px;
    height: 40px;
    background-size: 9px 14px;
}

.tp-bm-submit-error-action.zsc-brand-btn::after,
a.tp-bm-submit-error-action::after {
    right: 10px;
    width: 9px !important;
    height: 14px !important;
}

.tp-bm-submit-error-action.zsc-brand-btn:hover > .tp-bm-btn-label,
.tp-bm-submit-error-action.zsc-brand-btn:focus-visible > .tp-bm-btn-label,
a.tp-bm-submit-error-action:hover > .tp-bm-btn-label,
a.tp-bm-submit-error-action:focus-visible > .tp-bm-btn-label,
.tp-bm-submit-error-action.zsc-brand-btn:hover > span,
.tp-bm-submit-error-action.zsc-brand-btn:focus-visible > span,
a.tp-bm-submit-error-action:hover > span,
a.tp-bm-submit-error-action:focus-visible > span {
    transform: translateX(38px);
}

/* =============================================================
   Back button — mirror of the forward brand button.
   Navy square slides in from the RIGHT, text slides LEFT, and the
   zigzag dots live on the LEFT (pointing the opposite direction).
   Base styles come from the shared rule above; only layout
   direction + animation targets change here.
   ============================================================= */
body .tp-bm-btn.tp-bm-back {
    justify-content: flex-end !important;
    padding: 0 22px 0 78px !important;
    min-width: 140px !important;
}

body .tp-bm-btn.tp-bm-back::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: 48px;
    height: 48px;
    background-color: var(--zsc-blue);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22' fill='%23ffffff'><circle cx='11' cy='3' r='3'/><circle cx='3' cy='11' r='3'/><circle cx='11' cy='19' r='3'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 16px;
    border-radius: 14px;
    transform: translateX(111%);
    transition: transform 0.7s var(--zsc-brand-easing);
    z-index: 2;
    pointer-events: none;
    will-change: transform;
}

body .tp-bm-btn.tp-bm-back::after {
    content: "";
    position: absolute;
    left: 12px;
    right: auto;
    top: 50%;
    width: 10px;
    height: 16px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22' fill='%23003057'><circle cx='11' cy='3' r='3'/><circle cx='3' cy='11' r='3'/><circle cx='11' cy='19' r='3'/></svg>") center/contain no-repeat;
    transform: translateY(-50%);
    transition: transform 0.7s var(--zsc-brand-easing);
    pointer-events: none;
    animation: none !important;
    border: none !important;
    margin: 0 !important;
    z-index: 1;
}

body .tp-bm-btn.tp-bm-back > .tp-bm-btn-label,
body .tp-bm-btn.tp-bm-back > span {
    display: inline-block;
    transform: translateX(0);
    transition: transform 0.7s var(--zsc-brand-easing);
    will-change: transform;
}

body .tp-bm-btn.tp-bm-back:hover:not([disabled]):not(:disabled),
body .tp-bm-btn.tp-bm-back:focus-visible:not([disabled]):not(:disabled) {
    color: #ffffff !important;
    background: var(--zsc-blue) !important;
}

body .tp-bm-btn.tp-bm-back:hover:not([disabled]):not(:disabled)::before,
body .tp-bm-btn.tp-bm-back:focus-visible:not([disabled]):not(:disabled)::before {
    transform: translateX(0);
}

body .tp-bm-btn.tp-bm-back:hover:not([disabled]):not(:disabled)::after,
body .tp-bm-btn.tp-bm-back:focus-visible:not([disabled]):not(:disabled)::after {
    transform: translate(-46px, -50%);
}

body .tp-bm-btn.tp-bm-back:hover:not([disabled]):not(:disabled) > .tp-bm-btn-label,
body .tp-bm-btn.tp-bm-back:focus-visible:not([disabled]):not(:disabled) > .tp-bm-btn-label,
body .tp-bm-btn.tp-bm-back:hover:not([disabled]):not(:disabled) > span,
body .tp-bm-btn.tp-bm-back:focus-visible:not([disabled]):not(:disabled) > span {
    transform: translateX(-46px);
}

body .tp-bm-btn.tp-bm-back:focus-visible {
    outline: 3px solid rgba(0, 48, 87, 0.45) !important;
    outline-offset: 3px !important;
}

/* =============================================================
   Mobile footer — keep Back / Next / Confirm side-by-side but
   scale the whole button system down proportionally (font, icon
   square, shift distance, padding) so "Confirm & add to cart"
   fits alongside Back on iPhone-width modals without overflow.
   Every animation still plays — just on a smaller stage.
   ============================================================= */
@media (max-width: 640px) {
    body .tp-bm-btn.tp-bm-btn-primary,
    body .tp-bm-btn.tp-bm-back {
        font-size: 13px !important;
        min-height: 40px !important;
        min-width: 0 !important;
    }

    body .tp-bm-btn.tp-bm-btn-primary {
        padding: 0 48px 0 10px !important;
    }

    body .tp-bm-btn.tp-bm-back {
        padding: 0 10px 0 48px !important;
        min-width: 80px !important;
    }

    /* Shrink the sliding navy square from 48×48 to 40×40. */
    body .tp-bm-btn.tp-bm-btn-primary::before,
    body .tp-bm-btn.tp-bm-back::before {
        width: 40px !important;
        height: 40px !important;
        background-size: 8px 13px !important;
    }

    /* Shrink the zigzag dots alongside the square. */
    body .tp-bm-btn.tp-bm-btn-primary::after,
    body .tp-bm-btn.tp-bm-back::after {
        width: 8px !important;
        height: 13px !important;
    }

    body .tp-bm-btn.tp-bm-btn-primary::after {
        right: 10px !important;
    }

    body .tp-bm-btn.tp-bm-back::after {
        left: 10px !important;
    }

    /* Smaller shift (32px instead of 46) to match the 40px square. */
    body .tp-bm-btn.tp-bm-btn-primary:hover:not([disabled]):not(:disabled)::after,
    body .tp-bm-btn.tp-bm-btn-primary:focus-visible:not([disabled]):not(:disabled)::after {
        transform: translate(32px, -50%) !important;
    }

    body .tp-bm-btn.tp-bm-back:hover:not([disabled]):not(:disabled)::after,
    body .tp-bm-btn.tp-bm-back:focus-visible:not([disabled]):not(:disabled)::after {
        transform: translate(-32px, -50%) !important;
    }

    body .tp-bm-btn.tp-bm-btn-primary:hover:not([disabled]):not(:disabled) > .tp-bm-btn-label,
    body .tp-bm-btn.tp-bm-btn-primary:focus-visible:not([disabled]):not(:disabled) > .tp-bm-btn-label,
    body .tp-bm-btn.tp-bm-btn-primary:hover:not([disabled]):not(:disabled) > span,
    body .tp-bm-btn.tp-bm-btn-primary:focus-visible:not([disabled]):not(:disabled) > span {
        transform: translateX(32px) !important;
    }

    body .tp-bm-btn.tp-bm-back:hover:not([disabled]):not(:disabled) > .tp-bm-btn-label,
    body .tp-bm-btn.tp-bm-back:focus-visible:not([disabled]):not(:disabled) > .tp-bm-btn-label,
    body .tp-bm-btn.tp-bm-back:hover:not([disabled]):not(:disabled) > span,
    body .tp-bm-btn.tp-bm-back:focus-visible:not([disabled]):not(:disabled) > span {
        transform: translateX(-32px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zsc-brand-btn,
    .zsc-brand-btn::before,
    .zsc-brand-btn::after,
    body .tp-bm-btn.tp-bm-btn-primary,
    body .tp-bm-btn.tp-bm-btn-primary::before,
    body .tp-bm-btn.tp-bm-btn-primary::after,
    body .tp-bm-btn.tp-bm-back,
    body .tp-bm-btn.tp-bm-back::before,
    body .tp-bm-btn.tp-bm-back::after,
    body.woocommerce-checkout form.checkout #place_order,
    body.woocommerce-checkout form.checkout #place_order::before,
    body.woocommerce-checkout form.checkout #place_order::after,
    body.woocommerce-order-received a.woocommerce-button.button.print,
    body.woocommerce-order-received a.woocommerce-button.button.print::before,
    body.woocommerce-order-received a.woocommerce-button.button.print::after,
    a.zsc-brand-btn,
    a.zsc-brand-btn::before,
    a.zsc-brand-btn::after {
        transition: none !important;
    }
}