/**
 * Pioneers Rooms Form
 *
 * Responsive via Container Queries.
 * Mobile first.
 */


/* =========================================================
   Container
   ========================================================= */

.room-search {
    container-type: inline-size;
    container-name: roomsearch;
    width: 100%;
}

/* =========================================================
   Headline
   ========================================================= */

.rooms-form-headline {
    font-family: 'Bebas Neue', display;
    text-align: center;
    font-size: 40px;    text-transform: uppercase;
    color: #007874;
    margin-bottom: 20px;
}

/* =========================================================
   Formular
   ========================================================= */

.room-search-form {
    display: grid;
    grid-template-columns: 1fr;

    grid-template-areas:
        "persons"
        "date"
        "from"
        "to"
        "action";

    gap: 14px;

    width: 100%;

    padding: clamp(16px, 4cqi, 24px);

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.08);

    box-sizing: border-box;
}


/* =========================================================
   Grid Areas
   ========================================================= */

.room-search-form .form-field--persons {
    grid-area: persons;
}

.room-search-form .form-field--date {
    grid-area: date;
}

.room-search-form .form-field--from {
    grid-area: from;
}

.room-search-form .form-field--to {
    grid-area: to;
}

.room-search-form .form-action {
    grid-area: action;
}


/* =========================================================
   Felder
   ========================================================= */

.room-search-form .form-field {
    display: flex;
    flex-direction: column;

    gap: 7px;

    min-width: 0;
}


/* =========================================================
   Labels
   ========================================================= */

.room-search-form label,
.room-search-form .field-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;

    color: #222;
}


/* =========================================================
   Inputs + Selects
   ========================================================= */

.room-search-form input,
.room-search-form select {
    width: 100%;
    min-width: 0;

    min-height: 48px;

    padding: 10px 12px;

    border: 1px solid #d8d8d8;
    border-radius: 12px;

    background: #fff;

    color: #111;

    font: inherit;
    font-size: 16px;
    line-height: 1.2;

    box-sizing: border-box;
}


/*
 * Einheitlicher Select-Pfeil
 */

.room-search-form select {
    -webkit-appearance: none;
    appearance: none;

    padding-right: 34px;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
}


/*
 * Datumsfeld
 *
 * Verhindert insbesondere auf iOS eine merkwürdige
 * gestauchte Darstellung.
 */

.room-search-form input[type="date"] {
    -webkit-appearance: none;
    appearance: none;

    display: block;

    text-align: left;
}


/* =========================================================
   Focus
   ========================================================= */

.room-search-form input:focus-visible,
.room-search-form select:focus-visible,
.room-search-form button:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;

    border-color: #111;
}

.room-search-form input:focus,
.room-search-form select:focus {
    border-color: #111;
}


/* =========================================================
   Uhrzeit
   ========================================================= */

.room-search-form .time-picker {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    gap: 8px;

    align-items: center;
}

.room-search-form .time-picker > span {
    font-weight: 800;

    color: #333;
}


/* =========================================================
   Button
   ========================================================= */

.room-search-form .form-action {
    display: flex;

    align-items: end;
}

.room-search-form button {
    width: 100%;

    min-height: 48px;

    padding: 12px 18px;

    border: 2px solid;

    background: #007874;

    color: #fff;

    font: inherit;

    text-transform: uppercase;

    font-size: 16px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.room-search-form button:hover {
    border: 2px solid #007874;

    background: #fff;

    color: #000;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.16);
}

.room-search-form button:active {
    transform: translateY(0);
}


/* =========================================================
   Fehlermeldungen
   ========================================================= */

.room-search-form .form-error {
    grid-column: 1 / -1;

    margin: 0;

    font-size: 14px;
    font-weight: 600;

    color: #b3261e;
}

.room-search-form [aria-invalid="true"] {
    border-color: #b3261e;
}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .room-search-form button {
        transition: none;
    }

    .room-search-form button:hover {
        transform: none;
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */


/*
 * Ab ca. 440px:
 * zwei Spalten
 */

@container roomsearch (min-width: 440px) {

    .room-search-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-areas:
            "persons date"
            "from    to"
            "action  action";

        gap: 16px;
    }
}


/*
 * Ab ca. 760px:
 * vier Felder nebeneinander,
 * Button darunter rechts
 */

@container roomsearch (min-width: 760px) {

    .room-search-form {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        grid-template-areas:
            "persons date from to"
            "action  action action action";
    }

    .room-search-form .form-action {
        justify-content: flex-end;
    }

    .room-search-form button {
        width: auto;

        min-width: 200px;
    }
}


/*
 * Ab ca. 1040px:
 * alles in einer Zeile
 */

@container roomsearch (min-width: 1040px) {

    .room-search-form {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(0, 1fr)
            minmax(0, 1fr)
            minmax(0, 1fr)
            minmax(0, 0.9fr);

        grid-template-areas:
            "persons date from to action";

        align-items: end;
    }

    .room-search-form button {
        width: 100%;

        min-width: 0;
    }
}


/* =========================================================
   FALLBACK
   Browser ohne Container Queries
   ========================================================= */

@supports not (container-type: inline-size) {

    @media (min-width: 480px) {

        .room-search-form {
            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            grid-template-areas:
                "persons date"
                "from    to"
                "action  action";

            gap: 16px;
        }
    }


    @media (min-width: 800px) {

        .room-search-form {
            grid-template-columns:
                repeat(4, minmax(0, 1fr));

            grid-template-areas:
                "persons date from to"
                "action  action action action";
        }

        .room-search-form .form-action {
            justify-content: flex-end;
        }

        .room-search-form button {
            width: auto;

            min-width: 200px;
        }
    }


    @media (min-width: 1080px) {

        .room-search-form {
            grid-template-columns:
                minmax(0, 1.1fr)
                minmax(0, 1fr)
                minmax(0, 1fr)
                minmax(0, 1fr)
                minmax(0, 0.9fr);

            grid-template-areas:
                "persons date from to action";

            align-items: end;
        }

        .room-search-form button {
            width: 100%;

            min-width: 0;
        }
    }
}