/* Shared calendar appearance. GF selectors verified against the 3.1.2 reference. */
:is(.boekingsformulier .boeking_venster, body :is(.gform-theme, .gform_legacy_markup_wrapper) .gform-datepicker-calendar){
    background: var(--wit);
    color: var(--zwart);
    border: 0.1rem solid #e5e7eb;
    border-radius: calc(var(--spacing_3) * 4 / 5);
    box-shadow: 0 1.2rem 1.6rem rgb(0 0 0 / 8%);
}

:is(.boekingsformulier .boeking_maand_titel, body :is(.gform-theme, .gform_legacy_markup_wrapper) .gform-datepicker-calendar table.calendar td.month:not(.nav), body :is(.gform-theme, .gform_legacy_markup_wrapper) .gform-datepicker-calendar table.calendar td.year:not(.nav)){
    font-family: var(--heading-font);
    font-size: var(--spacing_3);
    line-height: 1.4;
}

.boekingsformulier .boeking_dagen > *,
body :is(.gform-theme, .gform_legacy_markup_wrapper) .gform-datepicker-calendar table.calendar :is(.day, .empty) > span{
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 0;
    border: 0.1rem solid #e5e7eb;
    border-radius: 50%;
    background: var(--wit);
}

:is(.boekingsformulier .boeking_dagen [aria-pressed="true"], body :is(.gform-theme, .gform_legacy_markup_wrapper) .gform-datepicker-calendar table.calendar .day.selected > span){
    background: var(--groen);
    border-color: var(--groen);
    color: var(--wit);
}

:is(.boekingsformulier .boeking_dagen [aria-current="date"], body :is(.gform-theme, .gform_legacy_markup_wrapper) .gform-datepicker-calendar table.calendar .day[aria-current="date"] > span){
    font-weight: 500;
    text-decoration: underline;
}

:is(.boekingsformulier .boeking_dagen button, body :is(.gform-theme, .gform_legacy_markup_wrapper) .gform-datepicker-calendar table.calendar .day):focus-visible{
    outline: 0.2rem solid var(--groen);
    outline-offset: 0.2rem;
}

:is(.boekingsformulier .boeking_dagen button:enabled:hover, body :is(.gform-theme, .gform_legacy_markup_wrapper) .gform-datepicker-calendar table.calendar .day:not([aria-disabled="true"]):hover > span){
    border-color: var(--groen);
}

/* GF owns its popup position and keyboard handling; this only supplies the shared skin. */
body :is(.gform-theme, .gform_legacy_markup_wrapper) .gform-datepicker-calendar{
    padding: var(--spacing_3);
    inline-size: min(38rem, calc(100vw - var(--spacing_3) * 2));
    font-family: var(--body-font);
}

body :is(.gform-theme, .gform_legacy_markup_wrapper) .gform-datepicker-calendar table.calendar{
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0.2rem;
}

body :is(.gform-theme, .gform_legacy_markup_wrapper) .gform-datepicker-calendar table.calendar :is(td.day, td, th){
    height: auto;
    padding: 0;
    font-size: 1.8rem;
    font-weight: 300;
}

body :is(.gform-theme, .gform_legacy_markup_wrapper) .gform-datepicker-calendar table.calendar :is(.day, .empty) > span{
    width: 100%;
    height: auto;
    color: var(--zwart);
    box-shadow: none;
}

body :is(.gform-theme, .gform_legacy_markup_wrapper) .gform-datepicker-calendar table.calendar .day.selected > span{
    color: var(--wit);
}

body :is(.gform-theme, .gform_legacy_markup_wrapper) .gform-datepicker-calendar table.calendar .day[aria-disabled="true"] > span{
    opacity: 0.4;
}

body :is(.gform-theme, .gform_legacy_markup_wrapper) .gform-datepicker-calendar table.calendar .week > span{
    display: block;
    width: auto;
    height: auto;
    padding-block: calc(var(--spacing_3) / 2);
    color: var(--zwart);
    font: inherit;
    text-align: center;
}

body :is(.gform-theme, .gform_legacy_markup_wrapper) .gform-datepicker-calendar table.calendar :is(.month, .year) select{
    font: inherit;
    color: var(--zwart);
}