@charset "UTF-8";
/*
 * Estrel Booking Modal — Figma 777:146
 * Native <dialog> Overlay; backdrop-filter conditional [open] für iOS-Safari.
 * Cream BG #FEF5EC, Title-Col links, Form-Col rechts, Submit pink-pill.
 *
 * 2-Spalten-Grid auf Desktop (Title links, Form rechts).
 * Single-column Stacked auf Mobile (=767px).
 */

.estrel-booking-modal {
    container-type: inline-size;
    --u: calc(100cqi / 1708);  /* Figma frame width */
    --bm-cream: #FEF5EC;
    --bm-navy: #14172D;
    --bm-pink: #FED3CD;
    --bm-line: #14172D;
    --bm-placeholder: #BDBDBD;
    --bm-input-bg: #FFFBF7;
    padding: 0;
    border: 0;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    margin: 0;
    color: var(--bm-navy);
    overflow: hidden;
}

.estrel-booking-modal:not([open]) {
    display: none;
}

.estrel-booking-modal::backdrop {
    background: rgba(20, 23, 45, 0.6);
}

.estrel-booking-modal[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.estrel-booking-open {
    overflow: hidden;
}

/* Panel — full-viewport semi-transparent navy + blur, conditional [open]
   damit iOS Safari keine GPU-Layer für die hidden Modal allokiert. */
.estrel-booking-modal__panel {
    container-type: inline-size;
    position: relative;
    width: min(1708px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    background: var(--bm-cream);
    border-radius: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: calc(96 * var(--u)) calc(96 * var(--u)) calc(80 * var(--u));
    box-sizing: border-box;
    --u: calc(100cqi / 1708);
    display: grid;
    grid-template-columns: minmax(0, calc(440 * var(--u))) 1fr;
    column-gap: calc(80 * var(--u));
    align-items: start;
}

.estrel-booking-modal[open] .estrel-booking-modal__panel {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Close-Button oben rechts */
.estrel-booking-modal__close {
    position: absolute;
    top: calc(30 * var(--u));
    right: calc(30 * var(--u));
    width: calc(25 * var(--u));
    height: calc(25 * var(--u));
    min-width: 32px;
    min-height: 32px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--bm-navy);
    z-index: 3;
}

.estrel-booking-modal__close svg {
    width: 100%;
    height: 100%;
}

/* Header (Title-Col) */
.estrel-booking-modal__head {
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--u));
    padding-top: calc(20 * var(--u));
}

.estrel-booking-modal__sub {
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(28 * var(--u));
    line-height: 1.2;
    color: var(--bm-navy);
}

.estrel-booking-modal__title {
    margin: 0;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(36 * var(--u));
    line-height: calc(44 * var(--u));
    color: var(--bm-navy);
}

/* Form-Col — Contao rendert das Form mit Standard-Markup */
.estrel-booking-modal__form {
    width: 100%;
}

/* Contao .formbody bekommt unsere Custom-Styles */
.estrel-booking-modal__form .formbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: calc(40 * var(--u));
    row-gap: calc(36 * var(--u));
    width: 100%;
}

.estrel-booking-modal__form .widget {
    position: relative;
    margin: 0;
}

/* Vollbreit für textareas, file-upload, datenschutz, submit */
.estrel-booking-modal__form .widget-textarea,
.estrel-booking-modal__form .widget-upload,
.estrel-booking-modal__form .widget-checkbox,
.estrel-booking-modal__form .widget-submit {
    grid-column: 1 / -1;
}

/* Inputs, Select — minimalistisch unter-strich-Style */
.estrel-booking-modal__form input[type="text"],
.estrel-booking-modal__form input[type="email"],
.estrel-booking-modal__form input[type="tel"],
.estrel-booking-modal__form select {
    width: 100%;
    padding: 0 0 calc(8 * var(--u));
    border: 0;
    border-bottom: 1px solid var(--bm-line);
    background: transparent;
    color: var(--bm-navy);
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(18 * var(--u));
    line-height: calc(27 * var(--u));
    border-radius: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.estrel-booking-modal__form input::placeholder {
    color: var(--bm-placeholder);
}

.estrel-booking-modal__form select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1L6 6L11 1" stroke="%2314172D" stroke-width="1.2" stroke-linecap="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0 center;
    padding-right: calc(20 * var(--u));
}

.estrel-booking-modal__form label {
    display: block;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(18 * var(--u));
    line-height: calc(27 * var(--u));
    color: var(--bm-navy);
    margin-bottom: calc(4 * var(--u));
}

.estrel-booking-modal__form .mandatory > label::after {
    content: '';  /* Asterisk schon im Label oder per Twig Pflichtfelder-Hinweis */
}

/* Textarea */
.estrel-booking-modal__form textarea {
    width: 100%;
    padding: calc(12 * var(--u)) calc(16 * var(--u));
    border: 0;
    background: var(--bm-input-bg);
    color: var(--bm-navy);
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(18 * var(--u));
    line-height: calc(27 * var(--u));
    resize: vertical;
    min-height: calc(75 * var(--u));
    box-sizing: border-box;
    border-radius: 0;
}

.estrel-booking-modal__form textarea::placeholder {
    color: var(--bm-placeholder);
}

/* Radio-Gruppe horizontal (Datum flexibel? / Zimmerbedarf?) */
.estrel-booking-modal__form .widget-radio {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--u));
}

.estrel-booking-modal__form .widget-radio fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: calc(24 * var(--u));
}

.estrel-booking-modal__form .widget-radio fieldset legend {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(18 * var(--u));
    color: var(--bm-navy);
    margin-right: calc(16 * var(--u));
}

.estrel-booking-modal__form .widget-radio fieldset .radio_container {
    display: flex;
    align-items: center;
    gap: calc(24 * var(--u));
}

.estrel-booking-modal__form .widget-radio span {
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
}

.estrel-booking-modal__form input[type="radio"],
.estrel-booking-modal__form input[type="checkbox"] {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    accent-color: var(--bm-navy);
    margin: 0;
}

/* Checkbox + Datenschutz */
.estrel-booking-modal__form .widget-checkbox span {
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(15 * var(--u));
    color: var(--bm-navy);
}

.estrel-booking-modal__form .widget-checkbox a {
    color: var(--bm-navy);
    text-decoration: underline;
}

/* Upload */
.estrel-booking-modal__form .widget-upload label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(6 * var(--u)) calc(28 * var(--u));
    border: 1px solid var(--bm-pink);
    border-radius: calc(20 * var(--u));
    background: transparent;
    color: var(--bm-navy);
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(18 * var(--u));
    cursor: pointer;
    margin-bottom: calc(8 * var(--u));
}

.estrel-booking-modal__form .widget-upload input[type="file"] {
    display: none;
}

.estrel-booking-modal__form .widget-upload .formbody-hint,
.estrel-booking-modal__form .widget-upload small {
    display: block;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(13 * var(--u));
    color: var(--bm-navy);
}

/* Submit Button — pink pill, rechts ausgerichtet */
.estrel-booking-modal__form .widget-submit {
    display: flex;
    justify-content: flex-end;
    margin-top: calc(20 * var(--u));
}

.estrel-booking-modal__form .widget-submit button,
.estrel-booking-modal__form button[type="submit"] {
    padding: calc(12 * var(--u)) calc(36 * var(--u));
    border: 0;
    border-radius: calc(30 * var(--u));
    background: var(--bm-pink);
    color: var(--bm-navy);
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(20 * var(--u));
    cursor: pointer;
    transition: filter 0.2s ease;
}

.estrel-booking-modal__form button[type="submit"]:hover {
    filter: brightness(0.95);
}

/* Pflichtfelder-Hinweis */
.estrel-booking-modal__hint {
    grid-column: 1 / -1;
    margin: calc(20 * var(--u)) 0 0;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(13 * var(--u));
    color: var(--bm-navy);
}

/* Conditional fields (Wunschwochentag, Anzahl je Nacht) — zunächst hidden */
.estrel-booking-modal__form .estrel-cond-field {
    transition: opacity 0.2s ease, max-height 0.3s ease;
}

.estrel-booking-modal__form .widget.is-cond-hidden {
    opacity: 0.4;
    pointer-events: none;
}

/* Tablet =1024px */
@media (max-width: 1024px) {
    .estrel-booking-modal__panel {
        --u: calc(100cqi / 1024);
        grid-template-columns: 1fr;
        row-gap: calc(48 * var(--u));
        padding: calc(64 * var(--u)) calc(48 * var(--u));
    }
    .estrel-booking-modal__title { font-size: calc(32 * var(--u)); line-height: 1.2; }
}

/* Mobile =767px */
@media (max-width: 767px) {
    .estrel-booking-modal__panel {
        --u: calc(100cqi / 375);
        padding: calc(60 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u));
        max-height: 100vh;
        height: 100vh;
        width: 100vw;
        border-radius: 0;
    }
    .estrel-booking-modal__form .formbody {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: calc(28 * var(--u));
    }
    .estrel-booking-modal__sub { font-size: calc(24 * var(--u)); }
    .estrel-booking-modal__title { font-size: calc(28 * var(--u)); }
    .estrel-booking-modal__form input[type="text"],
    .estrel-booking-modal__form input[type="email"],
    .estrel-booking-modal__form select,
    .estrel-booking-modal__form textarea,
    .estrel-booking-modal__form label {
        font-size: 16px;  /* WCAG floor — verhindert iOS-zoom */
    }
}