/* ==========================================================================
   Booking form (YITH Booking) on the product page – woocommerce/single-product.php.
   In the product page's style: labels as the variant labels, the fields as the
   Select (Figma 2073:241), the +/− buttons as the quantity stepper and the button
   as «Legg i korja». Scoped to .shop-product, so these win over YITH's and
   Uncode's rules whatever order the stylesheets load in.
   ========================================================================== */

/* YITH's colours – also for the date picker, which it appends to <body> */
body.yith-booking {
    --yith-wcbk-primary: var(--roros-color-action-primary);
    --yith-wcbk-primary-light: var(--roros-color-action-primary-hover);
    --yith-wcbk-primary-contrast: var(--roros-color-text-inverse);
    --yith-wcbk-border-color: var(--roros-color-border-strong);
    --yith-wcbk-border-color-focus: var(--roros-color-border-strong);
    --yith-wcbk-shadow-focus: none;
    --yith-wcbk-underlined-bg: var(--roros-color-surface-blue);
    --yith-wcbk-underlined-text: var(--roros-color-text-primary);
    --yith-wcbk-fields-font-size: var(--roros-font-size-label);
}

/* Sections 24px apart, as the variant picker; label 12px above its field */

.shop-product form.cart:has(.yith-wcbk-booking-form),
.shop-product .yith-wcbk-booking-form,
.shop-product .yith-wcbk-form-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.shop-product .yith-wcbk-booking-form {
    margin: 0;
}

.shop-product .yith-wcbk-booking-form .yith-wcbk-form-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}

.shop-product .yith-wcbk-booking-form label.yith-wcbk-form-section__label {
    margin: 0;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-label);
    font-weight: 500;
    line-height: var(--roros-line-height-label);
    letter-spacing: 0;
    text-transform: none;
    color: var(--roros-color-text-primary);
}

/* Date, time and people as the Select: black line, 16px padding, chevron at the end */

.shop-product .yith-wcbk-date-picker-wrapper input.yith-wcbk-date-picker--formatted,
.shop-product .yith-wcbk-select-alt__container select,
.shop-product .yith-wcbk-people-selector__toggle-handler {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 1rem 3rem 1rem 1rem;
    border: 1px solid var(--roros-color-border-strong);
    border-radius: 0;
    background: var(--roros-color-bg-page);
    box-shadow: none;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-label);
    font-weight: 500;
    line-height: var(--roros-line-height-label);
    letter-spacing: 0;
    color: var(--roros-color-text-primary);
    cursor: pointer;
}

.shop-product .yith-wcbk-select-alt__container select {
    background: var(--roros-color-bg-page) url("../icon/chevron-down.svg") right 1rem center / 1rem no-repeat;
    appearance: none;
}

.shop-product .yith-wcbk-select-alt__container .yith-wcbk-select-alt__arrow {
    display: none;
}

.shop-product .yith-wcbk-date-picker-wrapper .yith-wcbk-booking-date-icon {
    right: 1rem;
    font-size: 1.125rem;
    color: var(--roros-color-icon-primary);
    opacity: 1;
}

.shop-product .yith-wcbk-date-picker-wrapper input.yith-wcbk-date-picker:focus + .yith-wcbk-date-picker--formatted + .yith-wcbk-booking-date-icon {
    color: var(--roros-color-icon-primary);
    opacity: 1;
}

.shop-product .yith-wcbk-date-picker-wrapper input.yith-wcbk-date-picker:focus + .yith-wcbk-date-picker--formatted,
.shop-product .yith-wcbk-select-alt__container select:focus-visible,
.shop-product .yith-wcbk-people-selector--opened .yith-wcbk-people-selector__toggle-handler {
    border-color: var(--roros-color-border-strong);
    box-shadow: none;
    outline: 2px solid var(--roros-color-border-strong);
    outline-offset: 2px;
}

.shop-product .yith-wcbk-people-selector__toggle-handler::after {
    content: "";
    right: 1rem;
    width: 1rem;
    height: 1rem;
    background: url("../icon/chevron-down.svg") center / 1rem no-repeat;
    opacity: 1;
}

.shop-product .yith-wcbk-people-selector .yith-wcbk-people-selector__totals {
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
}

/* People: the panel under the field, a row per person type with the stepper */

.shop-product .yith-wcbk-people-selector .yith-wcbk-people-selector__fields-container {
    min-width: 0;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--roros-color-border-strong);
    background: var(--roros-color-bg-page);
    box-shadow: none;
}

.shop-product .yith-wcbk-people-selector .yith-wcbk-people-selector__fields-container::before,
.shop-product .yith-wcbk-people-selector .yith-wcbk-people-selector__fields-container::after {
    display: none;
}

.shop-product .yith-wcbk-people-selector .yith-wcbk-people-selector__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
}

.shop-product .yith-wcbk-people-selector .yith-wcbk-people-selector__field::before,
.shop-product .yith-wcbk-people-selector .yith-wcbk-people-selector__field::after {
    display: none; /* the clearfix – the row is a flexbox */
}

.shop-product .yith-wcbk-people-selector .yith-wcbk-people-selector__field__title {
    float: none;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-label);
    font-weight: 400;
    line-height: var(--roros-line-height-label);
    color: var(--roros-color-text-primary);
}

.shop-product .yith-wcbk-people-selector .yith-wcbk-people-selector__field__totals {
    display: flex;
    float: none;
    align-items: center;
    gap: 0.5rem;
}

/* As the quantity stepper's round buttons (shop.css, Figma 2098:156) */
.shop-product .yith-wcbk-people-selector .yith-wcbk-people-selector__field__minus,
.shop-product .yith-wcbk-people-selector .yith-wcbk-people-selector__field__plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1.5px solid var(--roros-color-border-strong);
    border-radius: 999px;
    background: none;
}

.shop-product .yith-wcbk-people-selector .yith-wcbk-people-selector__field__button--disabled {
    opacity: 0.25;
    cursor: default;
}

.shop-product .yith-wcbk-people-selector :is(.yith-wcbk-people-selector__field__minus-wrap, .yith-wcbk-people-selector__field__plus-wrap) {
    position: static;
    display: flex;
    transform: none;
}

.shop-product .yith-wcbk-people-selector :is(.yith-wcbk-people-selector__field__minus-wrap, .yith-wcbk-people-selector__field__plus-wrap) svg {
    width: 0.875rem;
    height: 0.875rem;
}

.shop-product .yith-wcbk-people-selector .yith-wcbk-people-selector__field__total {
    display: block;
    width: 2.5rem;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-label);
    font-weight: 500;
    line-height: var(--roros-line-height-label);
    color: var(--roros-color-text-primary);
}

.shop-product .yith-wcbk-people-selector .yith-wcbk-people-selector__fields-container__footer {
    padding: 0.5rem 0;
    text-align: right;
}

.shop-product .yith-wcbk-people-selector .yith-wcbk-people-selector__fields-container__footer .yith-wcbk-people-selector__close-handler {
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-body-sm);
    font-weight: 500;
    line-height: var(--roros-line-height-body-sm);
    text-transform: none;
    color: var(--roros-color-text-primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.shop-product .yith-wcbk-people-selector .yith-wcbk-people-selector__fields-container__footer .yith-wcbk-people-selector__close-handler:hover {
    text-decoration: none;
}

/* The duration is fixed, and the description gives it */
.shop-product .yith-wcbk-booking-form .yith-wcbk-form-section-duration {
    display: none;
}

/* Totals: a line per price, the total in bold under a black line */

.shop-product .yith-wcbk-booking-form .yith-wcbk-booking-form-totals {
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-label);
    line-height: var(--roros-line-height-label);
    color: var(--roros-color-text-primary);
}

.shop-product .yith-wcbk-booking-form .yith-wcbk-booking-form-totals__list {
    margin: 0;
}

.shop-product .yith-wcbk-booking-form :is(.yith-wcbk-booking-form-total__label, .yith-wcbk-booking-form-total__value) {
    padding: 0.5rem 0;
    border-bottom: 0;
}

.shop-product .yith-wcbk-booking-form .yith-wcbk-booking-form-total--total-price :is(.yith-wcbk-booking-form-total__label, .yith-wcbk-booking-form-total__value) {
    border-top: 1px solid var(--roros-color-border-strong);
    font-weight: 500;
}

.shop-product .yith-wcbk-booking-form .yith-wcbk-booking-form-message:empty {
    display: none;
}

.shop-product .yith-wcbk-booking-form .yith-wcbk-booking-form-message {
    margin: 0;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-body-sm);
    line-height: var(--roros-line-height-body-sm);
}

/* «Bestill» as «Legg i korja» – .button-primary in globals.css. YITH marks it
   yith-wcbk-not-allowed until the form is filled in. */

.shop-product form.cart button.yith-wcbk-add-to-cart-button {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 0;
    background: var(--roros-color-action-primary);
    box-shadow: none;
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-button);
    font-weight: 500;
    line-height: var(--roros-line-height-button);
    letter-spacing: 0;
    text-transform: none;
    color: var(--roros-color-text-inverse);
    cursor: pointer;
}

.shop-product form.cart button.yith-wcbk-add-to-cart-button:hover {
    background: var(--roros-color-action-primary-hover);
    color: var(--roros-color-text-inverse);
}

.shop-product form.cart button.yith-wcbk-add-to-cart-button:is(.yith-wcbk-not-allowed, :disabled) {
    background: var(--roros-color-action-primary);
    opacity: 0.25;
    cursor: default;
}

/* The date picker, under the date field */

body.yith-booking .yith-wcbk-datepicker.ui-datepicker {
    border: 1px solid var(--roros-color-border-strong);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--roros-font-family-ui);
}

body.yith-booking .yith-wcbk-datepicker.ui-datepicker :is(.ui-datepicker-title, th, td, .ui-datepicker-buttonpane button) {
    font-family: var(--roros-font-family-ui);
}