/* ==========================================================================
Treehouse Chalets - booking pop-up
Colours taken from the theme: #978667 gold, #24262d dark, #4b514d green
The gold calendar lives in thc-flatpickr-theme.css and the Guests /
Nationality panels in thc-picker.css -- both shared with the inline
hero booking bar so the two always match.
========================================================================== */
/* Failsafe: Flatpickr's calendar for the Check In / Check Out fields is
appended to (not inside .thc-bk) so it doesn't get clipped by
this dialog's rounded corners (see booking-modal.js). That means its
z-index has to beat this pop-up's own (100000) to render on top of it.
This is also set in thc-flatpickr-theme.css, but it's repeated here,
self-contained, so the calendar always renders correctly above the
pop-up even if that shared file hasn't loaded for any reason. */
.flatpickr-calendar {
z-index: 999999 !important;
}
.thc-bk {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100000;
display: none;
}
.thc-bk.is-open {
display: block;
}
.thc-bk__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
animation: thcBkFade 0.25s ease;
}
.thc-bk__dialog {
position: relative;
width: 100%;
max-width: 560px;
margin: 7vh auto;
background-color: #fff;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
animation: thcBkUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: "Montserrat", Helvetica, sans-serif;
}
@keyframes thcBkFade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes thcBkUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* Header ------------------------------------------------------------------ */
.thc-bk__head {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #24262d;
padding: 20px 24px;
}
.thc-bk__title {
margin: 0;
color: #fff;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.3;
}
.thc-bk__close {
border: 0;
background: none;
color: #fff;
font-size: 30px;
line-height: 1;
padding: 0 0 4px;
cursor: pointer;
opacity: 0.75;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.thc-bk__close:hover {
opacity: 1;
transform: rotate(90deg);
}
/* Fields ------------------------------------------------------------------ */
.thc-bk__body {
background-color: #e9e9e9;
}
.thc-bk__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background-color: #e9e9e9;
}
.thc-bk__field {
background-color: #fff;
padding: 14px 24px 16px;
}
.thc-bk__field--full {
grid-column: 1 / -1;
}
.thc-bk__field label {
display: block;
margin-bottom: 2px;
color: #6c757d;
font-size: 13px;
font-weight: 500;
}
.thc-bk__optional {
color: #aaa;
font-weight: 400;
}
.thc-bk__control {
width: 100%;
height: 38px;
border: 0;
padding: 0;
background-color: transparent;
color: #24262d;
font-family: inherit;
font-size: 20px;
font-weight: 500;
line-height: 38px;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.thc-bk__control:focus-visible {
box-shadow: 0 2px 0 0 #978667;
}
select.thc-bk__control {
cursor: pointer;
padding-right: 26px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2324262d' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
}
input.thc-bk__control::placeholder {
color: #c4c4c4;
font-weight: 400;
}
/* Fallback native calendar icon -- only relevant if Flatpickr didn't
load and the field is still a plain . */
input[type="date"].thc-bk__control::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0.55;
}
/* The visible field Flatpickr creates once it takes over a date input.
The original becomes hidden; this is what the visitor sees
and clicks on. */
.thc-bk__control.thc-bk__input--alt {
cursor: pointer;
}
/* The Guests / Nationality picker triggers sit where a