/*
 * Booking Product semantic contract 1.0.0.
 * This shared layer intentionally contains no provider/legacy selectors.
 */

.zas-booking-product {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: visible;
    border-radius: 10px;
    background: var(--zas-product-surface);
    color: var(--zas-product-on-surface);
}

.zas-booking-product,
.zas-booking-product * {
    box-sizing: border-box;
}

.zas-booking-product__top-row,
.zas-booking-product__field-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    padding-bottom: 15px;
}

.zas-booking-product__field,
.zas-booking-product__date-field,
.zas-booking-product__participants-field {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.zas-booking-product__label {
    color: inherit;
    font: inherit;
}

.zas-booking-product__date-input,
.zas-booking-product__participants-input {
    width: 100% !important;
    height: var(--zas-product-field-height) !important;
    padding: 10px 48px 10px 42px !important;
    border: 0 !important;
    border-radius: var(--zas-product-radius) !important;
    outline: 0;
    background: var(--zas-product-field-surface) !important;
    color: var(--zas-product-field-text) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600;
    cursor: pointer;
}

.zas-booking-product__participants-input[readonly],
.zas-booking-product__date-input[readonly] {
    user-select: none;
}

.zas-booking-product__date-input:focus,
.zas-booking-product__participants-input:focus,
.zas-booking-product__option:focus-visible,
.zas-booking-product__quantity-minus:focus-visible,
.zas-booking-product__quantity-plus:focus-visible,
.zas-booking-product__cta:focus-visible,
.zas-booking-product__secondary-action:focus-visible {
    outline: 2px solid var(--zas-product-focus) !important;
    outline-offset: 2px;
}

.zas-booking-product__date-input::placeholder,
.zas-booking-product__participants-input::placeholder {
    color: var(--zas-product-muted);
    opacity: 1;
}

.zas-booking-product__icon {
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}

.zas-booking-product__date-field > .zas-booking-product__icon:first-of-type {
    left: 10px;
    width: 26px;
    height: 26px;
    background-image: url(../../images/calendar-icon.svg);
}

.zas-booking-product__participants-field > .zas-booking-product__icon:first-of-type {
    left: 10px;
    width: 26px;
    height: 26px;
    background-image: url(../../images/add-participants-icon.svg);
}

.zas-booking-product__date-field > .zas-booking-product__icon:last-of-type,
.zas-booking-product__participants-field > .zas-booking-product__icon:last-of-type {
    right: 14px;
    width: 14px;
    height: 9px;
    transform-origin: 50% 25%;
    transition: transform 0.3s ease;
    background-image: url(../../images/drop-down-arrow.svg);
}

.zas-booking-product__date-field > .zas-booking-product__icon.is-active:last-of-type,
.zas-booking-product__participants-field > .zas-booking-product__icon.is-active:last-of-type {
    transform: translateY(-50%) rotate(180deg);
}

.zas-booking-product__participants-panel {
    display: none;
    z-index: 100150;
    padding: 45px 35px 35px;
    border: 0;
    border-radius: var(--zas-product-panel-radius);
    background: var(--zas-product-field-surface) !important;
    box-shadow: var(--zas-product-panel-shadow);
    color: var(--zas-product-field-text);
}

.zas-booking-product__participants-panel.is-active {
    display: block;
}

.zas-booking-product__participants-panel h3 {
    color: var(--zas-product-control);
    font-size: 18px !important;
    font-weight: 600;
}

.zas-booking-product__participant-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.zas-booking-product__participant-label {
    flex: 1;
    min-width: 0;
    margin-right: 15px;
}

.zas-booking-product__participant-label :where(label, strong) {
    margin: 0;
    color: var(--zas-product-field-text) !important;
    font-size: 16px;
    font-weight: 600;
}

.zas-booking-product__participant-price {
    display: block;
    margin-top: 5px;
    font-size: 13px !important;
}

.zas-booking-product__quantity-control {
    display: flex;
    align-items: center;
    gap: 20px;
}

.zas-booking-product__quantity-minus,
.zas-booking-product__quantity-plus {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    outline: 0;
    background: var(--zas-product-option-surface);
    color: var(--zas-product-control);
    font-size: 24px;
    cursor: pointer;
    touch-action: manipulation;
}

.zas-booking-product__quantity-minus:hover,
.zas-booking-product__quantity-plus:hover {
    background: var(--zas-product-control-hover) !important;
}

.zas-booking-product__quantity-value {
    display: inline-block;
    min-width: 20px;
    color: var(--zas-product-control);
    font-size: 16px;
    text-align: center;
}

.zas-booking-product__option-title {
    display: block;
    margin: 20px 0 8px;
    color: var(--zas-product-on-surface);
    font-size: 20px;
    font-weight: 600;
}

.zas-booking-product__option,
.zas-booking-product__resource,
.zas-booking-product__departure,
.zas-booking-product__time-slot {
    width: 100%;
    border: 4px solid var(--zas-product-option-surface);
    border-radius: var(--zas-product-option-radius);
    background: var(--zas-product-option-surface);
    color: var(--zas-product-option-text);
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.zas-booking-product__option:hover,
.zas-booking-product__resource:hover,
.zas-booking-product__departure:hover,
.zas-booking-product__time-slot:hover {
    background: var(--zas-product-option-hover) !important;
}

.zas-booking-product__option.is-selected,
.zas-booking-product__resource.is-selected,
.zas-booking-product__departure.is-selected,
.zas-booking-product__time-slot.is-selected {
    border-color: var(--zas-product-accent);
    background: var(--zas-product-option-hover) !important;
}

.zas-booking-product__option-meta,
.zas-booking-product__option-price,
.zas-booking-product__option-availability {
    display: block;
    margin-top: 5px;
    font-size: 13px;
}

.zas-booking-product__pricing {
    color: var(--zas-product-on-surface) !important;
}

.zas-booking-product__price-label {
    font-size: 18px;
    font-weight: 200;
}

.zas-booking-product__price-value,
.zas-booking-product__price-total {
    padding-left: 4px;
    font-size: 26px;
    font-weight: 600;
}

.zas-booking-product__price-breakdown {
    padding-bottom: 6px;
    font-size: 13px;
}

.zas-booking-product__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 86px;
    padding: 22px 18px;
    border-radius: 16px;
    background: #fff;
    color: var(--zas-product-field-text);
    font-size: 17px;
    font-weight: 600;
}

.zas-booking-product__spinner {
    width: 40px;
    height: 40px;
}

.zas-booking-product__notice,
.zas-booking-product__error,
.zas-booking-product__success {
    width: 100%;
}

.zas-booking-product__error {
    color: #fff;
    background: #0a2640;
}

.zas-booking-product__cta {
    width: 100%;
    min-height: var(--zas-product-cta-height);
    padding: 20px;
    border: 0 !important;
    border-radius: var(--zas-product-cta-radius);
    background: var(--zas-product-accent) !important;
    color: #fff !important;
    font-size: 20px;
    font-weight: 200;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
}

.zas-booking-product__cta:not(:disabled):hover {
    background: var(--zas-product-accent-hover) !important;
}

.zas-booking-product .is-disabled,
.zas-booking-product :disabled,
.zas-booking-product [aria-disabled="true"] {
    pointer-events: none !important;
    cursor: not-allowed !important;
    filter: grayscale(100%) !important;
}

.zas-booking-product .is-loading {
    cursor: progress;
}

.zas-booking-product .is-empty {
    display: none;
}

.zas-booking-product .is-invalid {
    color: var(--zas-product-danger, #b42318);
}

.zas-booking-product .is-sold-out,
.zas-booking-product .is-unavailable {
    opacity: 0.55;
}

.zas-booking-product .is-limited {
    color: var(--zas-product-warning, #9a6700);
}

.zas-booking-product__customer-field :where(input, select, textarea) {
    width: 100%;
}

.zas-booking-product [hidden] {
    display: none !important;
}