/* =========================================
    Form Fields
========================================= */

.travel-form { position: relative; color: #333; font-family: inherit; }
.travel-form [hidden] { display: none !important; }
.travel-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.travel-form__field { min-width: 0; }
.travel-form__field > label { display: block; margin-bottom: .35rem; font-size: .875rem; }
.travel-form__field input,
.travel-form__field textarea,
.travel-form__field select {
    display: block; box-sizing: border-box; width: 100%; min-width: 0; height: 44px;
    padding: 0 .9375rem; border: 1px solid #ddd; border-radius: 10px; background: #fff; color: #333;
    font: inherit;
}
.travel-form__field textarea { height: 120px; padding: .9375rem; resize: vertical; }
.travel-form__field input:focus,
.travel-form__field textarea:focus,
.travel-form__field select:focus { border-color: #cd006d; outline: none; }
.travel-form__field [aria-invalid="true"] { border-color: #b21c37; }
.travel-form__error { display: block; color: #b21c37; font-size: .875rem; margin-top: .25rem; }
.travel-form__error:empty { display: none; }
.travel-form .travel-form__error[data-field-error="consent"]:not(:empty) { margin-bottom: .75rem; }
.travel-form__consent { display: flex; align-items: center; gap: .625rem; margin: .75rem 0; font-size: .875rem; }
.travel-form__consent input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; }
.travel-form__consent label { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.travel-form__consent a,
.travel-form__consent a:hover { text-decoration: none; }
.travel-form__submit { width: 100%; min-height: 44px; border: none; border-radius: 10px; }
.travel-form__submit:disabled { opacity: .65; cursor: wait; }
.travel-form__secondary { min-height: 44px; border: 0; background: transparent; color: #95004f; text-decoration: underline; font: inherit; cursor: pointer; }
.travel-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.travel-form__actions > a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; }
.travel-form__date-control { position: relative; }
.travel-form__date-control input { padding-right: 2.75rem; }
.travel-form__date-clear {
    position: absolute; right: .125rem; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    padding: 0; border: 0; border-radius: 8px; background: transparent; color: #666; cursor: pointer;
}
.travel-form__date-icon {
    position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: #666; pointer-events: none;
}
.travel-form__date-control:has(input[type="date"]) .travel-form__date-icon { display: none; }
@media (hover: hover) {
    .travel-form__date-clear:hover { color: var(--secondary-color, #cd006d); background: #fce4ef; }
}
.travel-form__contact-time { text-align: center; margin-top: 1rem; font-size: .875rem; }
.travel-form__trap,
.travel-form__visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.travel-form__status { margin-top: .75rem; text-align: center; overflow-wrap: anywhere; }
.travel-form__status:empty { display: none; }
.travel-form .travel-form__status--validation {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}
.travel-form[data-state="sending"] .travel-form__status { color: #1b6b3a; font-weight: 600; }
.travel-form[data-state="thanks"] .travel-form__status { margin: 0; padding: 1.5rem 1rem; }
.travel-form[data-state="thanks"] .travel-form__actions { display: none; }
.travel-form__thanks-title { font-weight: 700; font-size: 1.5rem; line-height: 1.3; margin: 0 0 .75rem; }
.travel-form__thanks-text { font-size: 1.125rem; line-height: 1.5; margin: 0; }
.travel-form__content[aria-disabled="true"] { opacity: .8; }
.travel-form__consent input:focus-visible { outline: 2px solid #95004f; outline-offset: 2px; }

@media (min-width: 768px) {
    .travel-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .travel-form__field--wide { grid-column: 1 / -1; }
}

/* =========================================
    Native Dialog
========================================= */

.travel-form-dialog {
    box-sizing: border-box; position: fixed; inset: 0; width: 95%; max-width: 960px;
    max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
    margin: auto; padding: 20px; border: 0; border-radius: 15px; background: #fff; color: #333;
    box-shadow: 1px 1px 3px rgba(2, 2, 2, .23); overflow: auto; overscroll-behavior: contain;
    opacity: 0; transition: opacity 350ms ease-in-out;
    clip-path: inset(0 round 15px);
}
.travel-form-dialog__title[hidden] { display: none; }
.travel-form-dialog::backdrop { background: rgba(0, 0, 0, .75); opacity: 0; transition: opacity 350ms ease-in-out; }
.travel-form-dialog[data-overlay-state="opening"],
.travel-form-dialog[data-overlay-state="open"] { opacity: 1; }
.travel-form-dialog[data-overlay-state="opening"]::backdrop,
.travel-form-dialog[data-overlay-state="open"]::backdrop { opacity: 1; }
.travel-form-dialog[data-overlay-state="closing"],
.travel-form-dialog[data-overlay-state="closing"]::backdrop { opacity: 0; transition-duration: 200ms; }
.travel-form-dialog__title { text-align: center; font-size: 1.5rem; font-weight: 700; margin: .5rem 1.5rem 1.5rem; }
.travel-form-dialog__title:focus { outline: none; }
.travel-form-dialog__close {
    position: absolute; z-index: 1; right: 0; top: 0; width: 44px; height: 44px; padding: 0; border: 0;
    display: grid; place-items: center; background: transparent; color: #333; font: inherit;
    font-size: 2.25rem; line-height: 1; cursor: pointer; transition: color 150ms ease;
}
.travel-form-dialog__close::before { content: '×'; }
.travel-form-dialog__close:hover { color: var(--secondary-color, #d8006d); }
.travel-form-dialog > .flatpickr-calendar,
.travel-form > .flatpickr-calendar { box-sizing: border-box; width: 15.5rem; }
.travel-form-dialog > .flatpickr-calendar .flatpickr-day,
.travel-form > .flatpickr-calendar .flatpickr-day {
    display: grid; place-items: center; justify-self: center; font-size: .75rem;
    width: 100%; max-width: max(32px, 2rem); height: auto; aspect-ratio: 1;
    line-height: normal; flex: none;
}
.travel-form-dialog > .flatpickr-calendar .flatpickr-day:not(.flatpickr-disabled):is(.today, .selected, :hover, :focus),
.travel-form > .flatpickr-calendar .flatpickr-day:not(.flatpickr-disabled):is(.today, .selected, :hover, :focus) {
    background: var(--secondary-color, #cd006d); border-color: var(--secondary-color, #cd006d); color: #fff;
}
.travel-form-dialog > .flatpickr-calendar .flatpickr-month,
.travel-form > .flatpickr-calendar .flatpickr-month { height: max(34px, 2.125rem); }
.travel-form-dialog > .flatpickr-calendar .flatpickr-weekdays,
.travel-form > .flatpickr-calendar .flatpickr-weekdays { height: max(28px, 1.75rem); }
.travel-form-dialog > .flatpickr-calendar .flatpickr-weekday,
.travel-form > .flatpickr-calendar .flatpickr-weekday { font-size: .6875rem; }
.travel-form-dialog > .flatpickr-calendar .flatpickr-current-month,
.travel-form > .flatpickr-calendar .flatpickr-current-month,
.travel-form-dialog > .flatpickr-calendar .flatpickr-monthDropdown-months,
.travel-form > .flatpickr-calendar .flatpickr-monthDropdown-months,
.travel-form-dialog > .flatpickr-calendar .flatpickr-monthDropdown-month,
.travel-form > .flatpickr-calendar .flatpickr-monthDropdown-month { font-size: .875rem; }
.travel-form-dialog > .flatpickr-calendar .flatpickr-current-month,
.travel-form > .flatpickr-calendar .flatpickr-current-month {
    display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: .25rem;
    box-sizing: border-box; height: 100%; padding-top: .375rem; white-space: nowrap;
}
.travel-form-dialog > .flatpickr-calendar .flatpickr-monthDropdown-months,
.travel-form > .flatpickr-calendar .flatpickr-monthDropdown-months {
    display: inline-block; flex: 0 1 auto; width: auto; min-width: 0; min-height: 0;
    border: 0; border-radius: 0; background: transparent; color: #333; font-family: inherit;
}
.travel-form-dialog > .flatpickr-calendar .flatpickr-monthDropdown-months:hover,
.travel-form > .flatpickr-calendar .flatpickr-monthDropdown-months:hover,
.travel-form-dialog > .flatpickr-calendar .numInputWrapper:hover,
.travel-form > .flatpickr-calendar .numInputWrapper:hover { background: transparent; }
.travel-form-dialog > .flatpickr-calendar .flatpickr-current-month .numInputWrapper,
.travel-form > .flatpickr-calendar .flatpickr-current-month .numInputWrapper { flex: 0 0 6ch; width: 6ch; }
.travel-form-dialog > .flatpickr-calendar .flatpickr-current-month input.cur-year,
.travel-form > .flatpickr-calendar .flatpickr-current-month input.cur-year {
    display: inline-block; box-sizing: border-box; width: 100%; height: auto; min-height: 0; padding: 0 0 0 .5ch;
    border: 0; border-radius: 0; background: transparent; color: #333; box-shadow: none;
    font: inherit; line-height: 1.25;
}
.travel-form-dialog > .flatpickr-calendar .flatpickr-current-month input.cur-year:focus,
.travel-form > .flatpickr-calendar .flatpickr-current-month input.cur-year:focus { border: 0; box-shadow: none; }
.travel-form-dialog > .flatpickr-calendar .flatpickr-current-month input.cur-year:focus-visible,
.travel-form > .flatpickr-calendar .flatpickr-current-month input.cur-year:focus-visible,
.travel-form-dialog > .flatpickr-calendar .flatpickr-monthDropdown-months:focus-visible,
.travel-form > .flatpickr-calendar .flatpickr-monthDropdown-months:focus-visible {
    outline: 1px solid #95004f !important; outline-offset: 1px !important;
}
.travel-form-dialog > .flatpickr-calendar .flatpickr-months,
.travel-form > .flatpickr-calendar .flatpickr-months { margin-bottom: .375rem; }
.travel-form-dialog > .flatpickr-calendar .flatpickr-days,
.travel-form > .flatpickr-calendar .flatpickr-days { width: 100%; }
.travel-form-dialog > .flatpickr-calendar .flatpickr-rContainer,
.travel-form > .flatpickr-calendar .flatpickr-rContainer { width: 100%; }
.travel-form-dialog > .flatpickr-calendar .dayContainer,
.travel-form > .flatpickr-calendar .dayContainer {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%; min-width: 0; max-width: 100%;
}

@media (min-width: 1024px) {
    .travel-form-dialog { width: 60%; }
    .travel-form-dialog__title { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .travel-form-dialog,
    .travel-form-dialog::backdrop { transition: none; }
    .travel-form-dialog__close { transition: none; }
}

/* =========================================
    Optional Rating
========================================= */

.travel-form__rating { min-width: 0; border: 0; padding: 0; margin: 0; }
.travel-form__rating legend { font-size: .875rem; margin-bottom: .35rem; }
.travel-form__rating-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.travel-form__rating-label { flex: 1 1 5rem; min-width: 0; font-size: .875rem; color: inherit; }
.travel-form__stars { display: flex; flex: 0 0 auto; gap: .125rem; }
.travel-form__star { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.travel-form__star input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.travel-form__star svg { fill: #fff; stroke: #ffc107; stroke-width: 1.5; pointer-events: none; }
.travel-form__star.is-filled svg { fill: #ffc107; stroke: #ffc107; }
.travel-form__star:has(input:focus-visible) { outline: 2px solid currentColor; border-radius: 4px; }
.travel-form__star:has(input:checked)::after { content: ''; position: absolute; bottom: 2px; width: 8px; height: 2px; background: currentColor; }

@media (forced-colors: active) {
    .travel-form-dialog > .flatpickr-calendar .flatpickr-day:not(.flatpickr-disabled):is(.today, .selected, :hover, :focus),
    .travel-form > .flatpickr-calendar .flatpickr-day:not(.flatpickr-disabled):is(.today, .selected, :hover, :focus) {
        background: Highlight; border-color: Highlight; color: HighlightText;
    }
    .travel-form-dialog > .flatpickr-calendar .flatpickr-current-month input.cur-year:focus-visible,
    .travel-form > .flatpickr-calendar .flatpickr-current-month input.cur-year:focus-visible,
    .travel-form-dialog > .flatpickr-calendar .flatpickr-monthDropdown-months:focus-visible,
    .travel-form > .flatpickr-calendar .flatpickr-monthDropdown-months:focus-visible { outline-color: Highlight !important; }
    .travel-form__star svg { fill: Canvas; stroke: ButtonText; }
    .travel-form__star.is-filled svg { fill: Highlight; stroke: ButtonText; }
    .travel-form__field input:focus,
    .travel-form__field textarea:focus,
    .travel-form__field select:focus { outline: 2px solid Highlight; }
}