/* @group Availability
------------------------------------ */

[data-page="availability"] { background: none var(--light-green); min-height: 100vh; }

/* @group Availability Header
------------------------------------ */
.availability-header { position: relative; }
.availability-header::before,
.availability-header::after { content: ''; position: absolute; pointer-events: none; top: 0; }
.availability-header::before { width: 14.4rem; height: 14.4rem; background: no-repeat url('../../img/layout/availability/deco-left.svg') left top; background-size: contain; left: 0; }
.availability-header .text-box h3 { margin: 0; }
@media only screen
and (min-width : 961px) {
    .availability-header::before { width: 30rem; height: 30rem; left: 8rem; }
    .availability-header::after { width: 20rem; height: 20rem; background: no-repeat url('../../img/layout/availability/deco-right.svg') left top; background-size: contain; left: 75%; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .availability-header .text-box { margin-bottom: 6.2rem; }
}

/* @end Availability Header */


/* @group Availability MapView */
.availability-filters .mapView iframe { height: 100rem; margin-bottom: 10rem; }
@media only screen
and (min-width : 961px) {
    .availability-filters .mapView iframe { height: 70rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}
/* @end Availability MapView */


/* @group Availability No Result */
.availability-filters { position: relative; }
.availability-filters .no-result article { position: absolute; top: 40rem; }
.availability-filters .no-result h2 { font-size: 3em; color: var(--beige); }
@media only screen
and (min-width : 961px) {
    .availability-filters .no-result article { top: 20rem; }
    .availability-filters .no-result h2 { font-size: 4.5em; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}
/* @end Availability No Result */


.listView,
.mapView,
.planView { opacity: 0; max-height: 0; pointer-events: none; overflow: hidden; transition: opacity .3s linear; }
.listView.show,
.mapView.show,
.planView.show { opacity: 1; max-height: fit-content; pointer-events: all; }

.availability-filters .planView article:not(.active) { display: none; }
.availability-filters .planView article.active { display: block; }
.availability-filters .listView article:not(.active) { display: none; }
.availability-filters .listView article.active { display: flex; }

.no-result { display: none; }
.no-result.show { display: block; }

.availability-filters[data-active="mapView"] .no-result { display: none; }
.availability-filters[data-active="mapView"] .dropdowns { opacity: .7; pointer-events: none; }

/* @end */


/* Animations
------------------------------------ */

.availability-filters .dropdowns .box,
.availability-filters .tabs button{ opacity: 0; }
.availability-filters.animateActive .dropdowns .box,
.availability-filters.animateActive .tabs button { animation: fade var(--transition-delay) forwards; }
.availability-filters.animateActive .dropdowns .box:nth-child(1) { animation-delay: calc(var(--transition-delay-short) * 3); }
.availability-filters.animateActive .dropdowns .box:nth-child(2) { animation-delay: calc(var(--transition-delay-short) * 3.5); }
.availability-filters.animateActive .dropdowns .box:nth-child(3) { animation-delay: calc(var(--transition-delay-short) * 4); }
@media only screen
and (min-width : 961px) {
    .availability-filters.animateActive .tabs button:nth-child(1) { animation-delay: calc(var(--transition-delay-short) * 4.5); }
    .availability-filters.animateActive .tabs button:nth-child(2) { animation-delay: calc(var(--transition-delay-short) * 5); }
    .availability-filters.animateActive .tabs button:nth-child(3) { animation-delay: calc(var(--transition-delay-short) * 5.5); }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .availability-filters.animateActive .tabs button { animation-delay: calc(var(--transition-delay-short) * 4.5); }
}