/*
 * Final booking-product visual and interaction parity layer.
 *
 * This file is loaded after the narrow provider exception sheets. It owns the
 * final dimensions and typography of equivalent booking controls without
 * changing provider booking, availability, pricing or submission behavior.
 */

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) .zas-booking-product {
    --zas-parity-font-family: Arial, Helvetica, sans-serif;
    --zas-parity-card-padding-x: 35px;
    --zas-parity-card-padding-top: 25px;
    --zas-parity-card-padding-bottom: 75px;
    --zas-parity-field-gap: 10px;
    --zas-parity-panel-gap: 2px;
    --zas-parity-panel-padding-x: 35px;
    --zas-parity-panel-padding-y: 35px;
    --zas-parity-input-size: 16px;
    --zas-parity-body-size: 16px;
    --zas-parity-helper-size: 13px;
    --zas-parity-panel-title-size: 18px;
    --zas-parity-participant-control-width: 136px;
    --zas-parity-participant-row-gap: 18px;
    --zas-parity-cta-size: 20px;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 40px !important;
    padding: var(--zas-parity-card-padding-top) var(--zas-parity-card-padding-x) var(--zas-parity-card-padding-bottom) !important;
    overflow: visible !important;
    border-radius: 10px !important;
    background: var(--zas-product-surface, #0a2640) !important;
    color: var(--zas-product-on-surface, #fff) !important;
    font-family: var(--zas-parity-font-family) !important;
    font-size: var(--zas-parity-body-size) !important;
    line-height: 1.4 !important;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) .zas-booking-product,
:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) .zas-booking-product * {
    box-sizing: border-box;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) .zas-booking-product :where(input, button, select, textarea) {
    font-family: var(--zas-parity-font-family) !important;
}

/* CaptainBook previously painted and padded both .booking-container and its
 * generated .booking-module. The semantic root is now the only card shell. */
body.zas-booking-product-page--captainbook .booking-container > .booking-module {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) .zas-booking-product .live_availability {
    display: flex !important;
    min-height: 13px !important;
    margin: 0 0 20px !important;
    justify-content: flex-end !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: .7px !important;
    text-transform: uppercase !important;
}

/* Top controls. Legacy selectors are retained only as page-scoped fallbacks
 * during dynamic DOM construction; semantic classes remain authoritative. */
:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__top-row,
    .zas-booking-product .top-row,
    .zas-booking-product .travelotopos-inline-row
) {
    display: flex !important;
    width: 100% !important;
    align-items: flex-start !important;
    gap: var(--zas-parity-field-gap) !important;
    padding: 0 0 15px !important;
    flex-wrap: nowrap !important;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__top-row,
    .zas-booking-product .top-row,
    .zas-booking-product .travelotopos-inline-row
) > :is(
    .zas-booking-product__field,
    .inline-field,
    .travelotopos-participants,
    .travelotopos-calendar
) {
    position: relative !important;
    display: block !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Visible names live inside the readonly controls. Keep template labels for
 * accessibility while removing their layout footprint. */
:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__top-row,
    .zas-booking-product .top-row,
    .zas-booking-product .travelotopos-inline-row
) > :is(
    .zas-booking-product__field,
    .inline-field,
    .travelotopos-participants,
    .travelotopos-calendar
) > label {
    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;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__date-input,
    .zas-booking-product__participants-input,
    #cfwc-flatpickr,
    #cfwc-participants-input,
    #datepicker-input,
    #participants-input,
    #travelotopos-datepicker,
    #travelotopos-participants
) {
    display: block !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 10px 44px 10px 42px !important;
    border: 0 !important;
    border-radius: 15px !important;
    outline: 0 !important;
    background: #fff !important;
    color: #0a2640 !important;
    caret-color: transparent !important;
    font-size: var(--zas-parity-input-size) !important;
    font-weight: 600 !important;
    line-height: 30px !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__date-input,
    .zas-booking-product__participants-input,
    #cfwc-flatpickr,
    #cfwc-participants-input,
    #datepicker-input,
    #participants-input,
    #travelotopos-datepicker,
    #travelotopos-participants
):focus {
    outline: 2px solid var(--zas-product-focus, #007dc1) !important;
    outline-offset: 0 !important;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__date-input,
    .zas-booking-product__participants-input,
    #cfwc-flatpickr,
    #cfwc-participants-input,
    #datepicker-input,
    #participants-input,
    #travelotopos-datepicker,
    #travelotopos-participants
)::placeholder {
    color: #0a2640 !important;
    opacity: 1 !important;
}

/* Person-type panel shell. JS calculates the exact root-aligned desktop
 * geometry and places every provider panel under its participant field. */
:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__participants-panel,
    #cfwc-participants-panel,
    #participants-inline-panel,
    #travelotopos-participants-panel
) {
    position: absolute !important;
    top: calc(100% + var(--zas-parity-panel-gap)) !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(0px - var(--zas-parity-card-padding-x)) !important;
    width: calc(
        200% + var(--zas-parity-field-gap) +
        var(--zas-parity-card-padding-x) + var(--zas-parity-card-padding-x)
    ) !important;
    min-width: calc(
        200% + var(--zas-parity-field-gap) +
        var(--zas-parity-card-padding-x) + var(--zas-parity-card-padding-x)
    ) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    margin: 0 !important;
    padding: var(--zas-parity-panel-padding-y) var(--zas-parity-panel-padding-x) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: #fff !important;
    color: #0a2640 !important;
    box-shadow: 0 0 42px -11px rgba(0, 0, 0, .5) !important;
    font-family: var(--zas-parity-font-family) !important;
    font-size: var(--zas-parity-body-size) !important;
    line-height: 1.4 !important;
    z-index: 100250 !important;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__participants-panel,
    #cfwc-participants-panel,
    #participants-inline-panel,
    #travelotopos-participants-panel
) > h3 {
    margin: 0 0 24px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid #e8eaee !important;
    color: #192e59 !important;
    font-size: var(--zas-parity-panel-title-size) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

@media (min-width: 769px) {
    :where(
        body.zas-booking-product-page--woo,
        body.zas-booking-product-page--woo-symbol,
        body.zas-booking-product-page--captainbook,
        body.zas-booking-product-page--travelotopos
    ) :is(
        .zas-booking-product__participants-panel,
        #cfwc-participants-panel,
        #participants-inline-panel,
        #travelotopos-participants-panel
    ) > h3 {
        display: none !important;
    }
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) #participants-panel-body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__participant-row,
    .zas-booking-product__participants-panel .person-row,
    #cfwc-participants-panel .person-row,
    #participants-inline-panel .person-row,
    #travelotopos-participants-panel .person-row
) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--zas-parity-participant-control-width) !important;
    min-height: 44px !important;
    max-height: none !important;
    margin: 0 0 var(--zas-parity-participant-row-gap) !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 24px !important;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__participant-label,
    .person-row .label-container,
    .person-row > label
) {
    display: grid !important;
    grid-template-rows: 20px 16px !important;
    row-gap: 4px !important;
    align-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #0a2640 !important;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__participant-label,
    .person-row .label-container,
    .person-row > label
) :is(label, strong, .zas-booking-product__participant-title),
:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) .person-row > label > strong {
    display: block !important;
    margin: 0 !important;
    color: #0a2640 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__participant-subtitle,
    .zas-booking-product__participant-price,
    .person-row small,
    .person-row .meta-hint
) {
    display: block !important;
    margin: 0 !important;
    color: #0a2640 !important;
    font-size: var(--zas-parity-helper-size) !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__quantity-control,
    .person-row .qty-controls,
    .person-row .person-controls
) {
    display: grid !important;
    grid-template-columns: 40px 20px 40px !important;
    flex: 0 0 var(--zas-parity-participant-control-width) !important;
    width: var(--zas-parity-participant-control-width) !important;
    min-width: var(--zas-parity-participant-control-width) !important;
    align-items: center !important;
    justify-content: end !important;
    column-gap: 18px !important;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__quantity-minus,
    .zas-booking-product__quantity-plus,
    .person-row .minus,
    .person-row .plus,
    .person-row .minus-btn,
    .person-row .plus-btn
) {
    display: inline-flex !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #e2f3fa !important;
    color: #192e59 !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__quantity-value,
    .person-row .count,
    .person-row .count-span,
    .person-row .qty-controls > span,
    .person-row .person-controls > span
) {
    display: inline-block !important;
    min-width: 20px !important;
    color: #192e59 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-align: center !important;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__participants-panel,
    #cfwc-participants-panel,
    #participants-inline-panel,
    #travelotopos-participants-panel
) :is(
    .zas-booking-product__participants-save,
    .save-participants-btn,
    #participants-inline-save,
    #travelotopos-save-participants
) {
    display: block !important;
    width: 100% !important;
    height: 55px !important;
    min-height: 55px !important;
    margin: 24px 0 0 !important;
    padding: 10px 15px !important;
    border: 0 !important;
    border-radius: 50px !important;
    background: #192e59 !important;
    color: #fff !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-transform: none !important;
    cursor: pointer !important;
}


:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__participant-list,
    #participants-panel-body,
    #cfwc-participants-panel,
    #travelotopos-participants-panel
) > :is(
    .zas-booking-product__participant-row,
    .person-row
):last-of-type {
    margin-bottom: 0 !important;
}

/* Disabled day clarity. Past and no-availability dates must not resemble an
 * available date merely because Flatpickr prevents clicks. Provider sold-out
 * markers keep their stronger red treatment below. */
.flatpickr-calendar.zas-booking-calendar--visual-parity
.flatpickr-day.flatpickr-disabled:not(.selected) {
    border-color: transparent !important;
    background: transparent !important;
    color: #aab2b8 !important;
    opacity: .42 !important;
    text-decoration: none !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity
.flatpickr-day.flatpickr-disabled:hover {
    border-color: transparent !important;
    background: transparent !important;
    color: #aab2b8 !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity
.flatpickr-day.flatpickr-disabled:is(
    .zas-calendar-day--sold-out,
    .cfwc-day-fullybooked,
    .cb-day-fully-booked,
    .tltp-day-fullybooked
):not(.selected) {
    border-color: #fff !important;
    background: rgba(220, 53, 69, .07) !important;
    color: #8f5960 !important;
    opacity: 1 !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity
.flatpickr-day.flatpickr-disabled.zas-calendar-day--unavailable:not(.selected) {
    border-color: transparent !important;
    background: rgba(170, 178, 184, .08) !important;
    color: #9aa3aa !important;
    opacity: .55 !important;
}

/* Shared CTA geometry. Button text may differ where provider workflows differ. */
:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__cta,
    #book-now-btn,
    #custom-book-now,
    #travelotopos-continue-button
) {
    position: absolute !important;
    right: auto !important;
    bottom: -30px !important;
    left: var(--zas-parity-card-padding-x) !important;
    width: calc(100% - var(--zas-parity-card-padding-x) - var(--zas-parity-card-padding-x)) !important;
    height: 70px !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 20px !important;
    border: 0 !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-size: var(--zas-parity-cta-size) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    text-transform: none !important;
}

:where(
    body.zas-booking-product-page--woo,
    body.zas-booking-product-page--woo-symbol,
    body.zas-booking-product-page--captainbook,
    body.zas-booking-product-page--travelotopos
) :is(
    .zas-booking-product__cta,
    #book-now-btn,
    #custom-book-now,
    #travelotopos-continue-button
):disabled {
    cursor: not-allowed !important;
    opacity: 1 !important;
    filter: grayscale(100%) !important;
}

/* Flatpickr visual parity. The runtime adds this marker and sets exact root
 * geometry. It does not create or initialize a calendar instance. */
.flatpickr-calendar.zas-booking-calendar--visual-parity {
    width: var(--zas-booking-calendar-width) !important;
    min-width: var(--zas-booking-calendar-width) !important;
    max-width: var(--zas-booking-calendar-width) !important;
    padding: 18px 18px 20px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: #fff !important;
    color: #0a2640 !important;
    box-shadow: 0 0 42px -11px rgba(0, 0, 0, .5) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    z-index: 100300 !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity::before,
.flatpickr-calendar.zas-booking-calendar--visual-parity::after {
    display: none !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity :where(
    .flatpickr-months,
    .flatpickr-weekdays,
    .flatpickr-innerContainer,
    .flatpickr-rContainer,
    .flatpickr-days
) {
    background: #fff !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity .flatpickr-months {
    min-height: 42px !important;
    padding: 0 8px !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity .flatpickr-month {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity .flatpickr-current-month,
.flatpickr-calendar.zas-booking-calendar--visual-parity .flatpickr-current-month input.cur-year,
.flatpickr-calendar.zas-booking-calendar--visual-parity .flatpickr-current-month .flatpickr-monthDropdown-months {
    color: #0a2640 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity .flatpickr-weekdays {
    height: 34px !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity span.flatpickr-weekday {
    color: #0a2640 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity .flatpickr-innerContainer,
.flatpickr-calendar.zas-booking-calendar--visual-parity .flatpickr-rContainer,
.flatpickr-calendar.zas-booking-calendar--visual-parity .flatpickr-days {
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity .flatpickr-days {
    display: flex !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity .dayContainer {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 6px !important;
    justify-content: flex-start !important;
    box-shadow: none !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity .dayContainer + .dayContainer {
    border-left: 1px solid #e8eaee !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity .flatpickr-day {
    position: relative !important;
    flex-basis: 14.285714% !important;
    width: 14.285714% !important;
    max-width: 14.285714% !important;
    height: 39px !important;
    min-height: 39px !important;
    border-radius: 8px !important;
    color: #0a2640;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    line-height: 39px !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity .flatpickr-day.selected,
.flatpickr-calendar.zas-booking-calendar--visual-parity .zas-calendar-day--selected {
    border-color: #192e59 !important;
    background: #192e59 !important;
    color: #fff !important;
}

.flatpickr-calendar.zas-booking-calendar--visual-parity :where(
    .cb-flatpickr-legend,
    .tltp-calendar-legend,
    .zas-calendar__legend
) {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 0 12px !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    color: #0a2640 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

/* Shared backdrop for mobile calendar/person panels. */
:where(
    .flatpickr-backdrop,
    .tltp-backdrop,
    .zas-booking-calendar-backdrop
) {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, .4) !important;
    z-index: 100200 !important;
}

@media (max-width: 768px) {
    :where(
        body.zas-booking-product-page--woo,
        body.zas-booking-product-page--woo-symbol,
        body.zas-booking-product-page--captainbook,
        body.zas-booking-product-page--travelotopos
    ) .zas-booking-product {
        --zas-parity-card-padding-x: 20px;
        --zas-parity-card-padding-top: 20px;
        --zas-parity-card-padding-bottom: 70px;
    }

    :where(
        body.zas-booking-product-page--woo,
        body.zas-booking-product-page--woo-symbol,
        body.zas-booking-product-page--captainbook,
        body.zas-booking-product-page--travelotopos
    ) :is(
        .zas-booking-product__top-row,
        .zas-booking-product .top-row,
        .zas-booking-product .travelotopos-inline-row
    ) {
        flex-direction: column !important;
        gap: 12px !important;
    }

    :where(
        body.zas-booking-product-page--woo,
        body.zas-booking-product-page--woo-symbol,
        body.zas-booking-product-page--captainbook,
        body.zas-booking-product-page--travelotopos
    ) :is(
        .zas-booking-product__top-row,
        .zas-booking-product .top-row,
        .zas-booking-product .travelotopos-inline-row
    ) > :is(
        .zas-booking-product__field,
        .inline-field,
        .travelotopos-participants,
        .travelotopos-calendar
    ) {
        width: 100% !important;
        min-width: 100% !important;
    }

    :where(
        body.zas-booking-product-page--woo,
        body.zas-booking-product-page--woo-symbol,
        body.zas-booking-product-page--captainbook,
        body.zas-booking-product-page--travelotopos
    ) :is(
        .zas-booking-product__participants-panel,
        #cfwc-participants-panel,
        #participants-inline-panel,
        #travelotopos-participants-panel
    ) {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        max-height: calc(100vh - 20px) !important;
        padding: 30px 20px 28px !important;
        border-radius: 20px 20px 0 0 !important;
    }

    :where(
        body.zas-booking-product-page--woo,
        body.zas-booking-product-page--woo-symbol,
        body.zas-booking-product-page--captainbook,
        body.zas-booking-product-page--travelotopos
    ) :is(
        .zas-booking-product__cta,
        #book-now-btn,
        #custom-book-now,
        #travelotopos-continue-button
    ) {
        left: var(--zas-parity-card-padding-x) !important;
        width: calc(100% - var(--zas-parity-card-padding-x) - var(--zas-parity-card-padding-x)) !important;
    }

    .flatpickr-calendar.zas-booking-calendar--visual-parity {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        max-height: calc(100vh - 20px) !important;
        overflow-y: auto !important;
        border-radius: 20px 20px 0 0 !important;
        transform: none !important;
    }

    .flatpickr-calendar.zas-booking-calendar--visual-parity .dayContainer {
        width: 100% !important;
        min-width: 100% !important;
        padding: 0 4px !important;
        border-left: 0 !important;
    }
}

/* Provider sheets contain legacy ID typography rules. Lock the same title and
 * subtitle type scale for every real panel DOM, including Woo label elements. */
body.zas-booking-product-page--woo #cfwc-participants-panel .zas-booking-product__participant-label > .zas-booking-product__participant-title,
body.zas-booking-product-page--woo-symbol #cfwc-participants-panel .zas-booking-product__participant-label > .zas-booking-product__participant-title,
body.zas-booking-product-page--captainbook #participants-inline-panel .zas-booking-product__participant-label > .zas-booking-product__participant-title,
body.zas-booking-product-page--travelotopos #travelotopos-participants-panel .zas-booking-product__participant-label > .zas-booking-product__participant-title {
    display: block !important;
    margin: 0 !important;
    color: #0a2640 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    text-transform: none !important;
}

body.zas-booking-product-page--woo #cfwc-participants-panel .zas-booking-product__participant-label > .zas-booking-product__participant-subtitle,
body.zas-booking-product-page--woo-symbol #cfwc-participants-panel .zas-booking-product__participant-label > .zas-booking-product__participant-subtitle,
body.zas-booking-product-page--captainbook #participants-inline-panel .zas-booking-product__participant-label > .zas-booking-product__participant-subtitle,
body.zas-booking-product-page--travelotopos #travelotopos-participants-panel .zas-booking-product__participant-label > .zas-booking-product__participant-subtitle {
    display: block !important;
    margin: 0 !important;
    color: #0a2640 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
}

/* Provider sheets contain legacy ID rules with higher specificity. Keep the
 * final mobile person-type shell identical by overriding them centrally. */
@media (max-width: 768px) {
    body.zas-booking-product-page--woo #cfwc-participants-panel.zas-booking-product__participants-panel,
    body.zas-booking-product-page--woo-symbol #cfwc-participants-panel.zas-booking-product__participants-panel,
    body.zas-booking-product-page--captainbook #participants-inline-panel.zas-booking-product__participants-panel,
    body.zas-booking-product-page--travelotopos #travelotopos-participants-panel.zas-booking-product__participants-panel {
        padding: 30px 20px 28px !important;
    }
}

@media (max-width: 390px) {
    body.zas-booking-product-page--woo #cfwc-participants-panel.zas-booking-product__participants-panel,
    body.zas-booking-product-page--woo-symbol #cfwc-participants-panel.zas-booking-product__participants-panel,
    body.zas-booking-product-page--captainbook #participants-inline-panel.zas-booking-product__participants-panel,
    body.zas-booking-product-page--travelotopos #travelotopos-participants-panel.zas-booking-product__participants-panel {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }
    :where(
        body.zas-booking-product-page--woo,
        body.zas-booking-product-page--woo-symbol,
        body.zas-booking-product-page--captainbook,
        body.zas-booking-product-page--travelotopos
    ) :is(
        .zas-booking-product__participants-panel,
        #cfwc-participants-panel,
        #participants-inline-panel,
        #travelotopos-participants-panel
    ) {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    :where(
        body.zas-booking-product-page--woo,
        body.zas-booking-product-page--woo-symbol,
        body.zas-booking-product-page--captainbook,
        body.zas-booking-product-page--travelotopos
    ) :is(
        .zas-booking-product__quantity-control,
        .person-row .qty-controls,
        .person-row .person-controls
    ) {
        --zas-parity-participant-control-width: 132px;
        grid-template-columns: 40px 20px 40px !important;
        width: var(--zas-parity-participant-control-width) !important;
        min-width: var(--zas-parity-participant-control-width) !important;
        column-gap: 16px !important;
    }
}