/*
 * Date picker on the product page, variant B ("lijst") of the A/B test.
 * Kept as plain CSS in its own file on purpose: the theme's SCSS sources and
 * compiled style.css are currently out of sync, so recompiling style.css
 * would change unrelated site-wide styles.
 */

/*
 * Sized so that on a 1920x1080 screen the "Kraam boeken" button is still in
 * view when the "Kraam reserveren" block sits right under the header. The
 * theme's global line-height (1.7) is overridden here to keep items compact.
 */
.reservation-form__dates--lijst {
    padding: 1rem var(--card-spacing);
}

.date-list__intro {
    margin: 0 0 0.5rem;
    font-weight: 600;
    color: #13274B;
}

.date-list__empty {
    margin: 0;
    padding: var(--card-spacing);
    text-align: center;
    color: #909EB7;
}

.date-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.date-list__item {
    margin: 0;
}

.date-list__item[hidden] {
    display: none;
}

.date-list__btn {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "day  date"
        "meta meta";
    align-items: baseline;
    column-gap: 0.75rem;
    row-gap: 0.125rem;
    width: 100%;
    padding: 0.625rem 1.125rem;
    border: var(--border-w) solid #E4EEFF;
    border-radius: 0.875rem;
    background: #fff;
    color: #13274B;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.3s cubic-bezier(0.65, 0, 0.35, 1),
                background-color 0.3s cubic-bezier(0.65, 0, 0.35, 1),
                color 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.date-list__btn:hover,
.date-list__btn:focus-visible {
    border-color: #E51C20;
    outline: none;
}

.date-list__day {
    grid-area: day;
    font-weight: 600;
    color: #E51C20;
}

.date-list__date {
    grid-area: date;
    font-weight: 600;
    font-size: 1.15em;
}

.date-list__meta {
    grid-area: meta;
    font-size: 0.9em;
    color: #909EB7;
}

.date-list__btn.is-selected {
    border-color: #E51C20;
    background: #E51C20;
    color: #fff;
}

.date-list__btn.is-selected .date-list__day,
.date-list__btn.is-selected .date-list__meta {
    color: #fff;
}

.date-list__more {
    display: block;
    width: 100%;
    margin-top: 0.375rem;
    padding: 0.375rem;
    border: none;
    background: none;
    color: #E51C20;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* Scoped for specificity: a later stylesheet re-applies the theme's 1.7 line-height to these elements. */
.reservation-form__dates .date-list__btn {
    line-height: 1.35;
}

.reservation-form__dates .date-list__intro,
.reservation-form__dates .date-list__more {
    line-height: 1.4;
}

/* Compact variation price: original WooCommerce markup renders this as a
   large, centered price that pushed 'Kraam boeken' further down. Scoped
   overrides (matching the theme's own selector specificity) shrink it to a
   small 'Prijs' label + amount; bdi/currencySymbol are overridden too since
   that's where the large font-size actually lives, not on .price itself. */
.product-info__reservation-form .reservation-form__wc-fields .woocommerce-variation-price {
    text-align: left !important;
    padding-top: 0.375rem !important;
    line-height: 1.3;
}

.product-info__reservation-form .reservation-form__wc-fields .woocommerce-variation-price::before {
    content: "Prijs";
    display: inline-block;
    margin-right: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #13274B;
}

.product-info__reservation-form .reservation-form__wc-fields .woocommerce-variation-price .price {
    display: inline;
}

.product-info__reservation-form .reservation-form__wc-fields .woocommerce-variation-price .amount {
    justify-content: flex-start !important;
}

.product-info__reservation-form .reservation-form__wc-fields .woocommerce-variation-price .amount bdi {
    display: inline !important;
    margin: 0 !important;
    justify-content: flex-start !important;
}

.product-info__reservation-form .reservation-form__wc-fields .woocommerce-variation-price .price,
.product-info__reservation-form .reservation-form__wc-fields .woocommerce-variation-price .amount,
.product-info__reservation-form .reservation-form__wc-fields .woocommerce-variation-price .amount bdi,
.product-info__reservation-form .reservation-form__wc-fields .woocommerce-variation-price .woocommerce-Price-currencySymbol {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
}