/* Toolbar styling */

.container.toolbar.availability.pill {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}

.container.toolbar.availability.pill .datepickers {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 0;
}

.container.toolbar.availability.pill .grouppicker-and-submit {
    display: flex;
    align-items: center;
    gap: 0;
}

.container.toolbar.availability.pill .grouppicker-and-submit .container.picker.group {
    border-right: none;
}

.container.toolbar.availability.pill .grouppicker-and-submit .container.picker.group input.readonly {
    border-right: none;
}

.container.container.toolbar.availability.pill .submit {
    background: white;
    color: var(--primary-color, #2c79b9);
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.2s;
    height: 50px;
}

/* The button reads "GO" in the one-line bar and "Search" once it becomes a full-width button. */
.container.toolbar.availability.pill .submit .submit-label-narrow {
    display: none;
}

/* =========================
   TOOLBAR: HERO VARIANT
   For the toolbar as it appears layered over the hero image
   (e.g. homepage). Same "single bar" treatment as the bar
   variant, but sized to sit centered over the image rather
   than spanning the page.
   ========================= */

.container.top .container.toolbar.availability.pill {
    width: fit-content;
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--primary-box-shadow);
    padding: 4px;
    flex-wrap: wrap;
}

.container.top .container.toolbar.availability.pill .submit {
    background: var(--primary-color, #2c79b9);
    color: #fff;
    border-radius: 4px;
}

.container.top .container.toolbar.availability.pill .submit:hover {
    background: var(--primary-color-dark, #1f5f93);
}

/* Phone/tablet (2026-10-03, per Thomas): the stacked version used to be four thin text rows
   butted against each other. Now a card - the two dates side by side, guests on a row of its
   own, and a full-width button - with every field tall enough to tap comfortably. */
@media (max-width: 768px) {
    .container.top form.toolbar.availability.pill {
        width: min(92vw, 420px);
    }

    .container.top .container.toolbar.availability.pill {
        width: 100%;
        box-sizing: border-box;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 10px;
        padding: 14px;
        margin: 0;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.96);
    }

    .container.top .container.toolbar.availability.pill .datepickers {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .container.top .container.toolbar.availability.pill .grouppicker-and-submit {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .container.top .container.toolbar.availability.pill .container.picker.visible {
        display: block;
        width: 100%;
    }

    /* !important on width: groups.js sizes its input inline from the placeholder's length. */
    .container.top .container.toolbar.availability.pill .container.picker input.readonly {
        box-sizing: border-box;
        width: 100% !important;
        height: 52px;
        padding: 0 12px;
        border: 1px solid #cfd8e0;
        border-radius: 10px;
        background: #fff;
        font-size: 1rem;
    }

    .container.top .container.toolbar.availability.pill .container.picker input.readonly:focus {
        border-color: var(--primary-color, #2c79b9);
    }

    .container.top .container.toolbar.availability.pill .container.picker.group.hidden {
        left: 0;
        right: 0;
        width: auto;
        box-sizing: border-box;
    }

    /* The dropdown is itself a flex .container, so its rows only take their 250px minimum. */
    .container.top .container.toolbar.availability.pill .container.picker.group.hidden .row {
        width: 100%;
    }

    .container.top .container.toolbar.availability.pill .submit {
        width: 100%;
        height: 52px;
        border-radius: 10px;
        font-size: 1.05rem;
        letter-spacing: 0.04em;
    }

    .container.top .container.toolbar.availability.pill .submit .submit-label-wide {
        display: none;
    }

    .container.top .container.toolbar.availability.pill .submit .submit-label-narrow {
        display: inline;
    }
}