#gl-search-form {
    position: relative;
    width: 100%;
    z-index: 20;
}

.gl-booking-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 206px;
    gap: 22px;
    align-items: end;
}

.gl-title {
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    color: #2b2b2b;
    font-size: 21px;
    line-height: 24px;
    padding: 20px 0;
    white-space: nowrap;
    text-align: left;
}

.gl-field {
    position: relative;
    height: 44px;
    background: #fff;
    box-sizing: border-box;
}

.gl-field label {
    position: absolute;
    left: 13px;
    top: 5px;
    z-index: 2;
    font-size: 12px;
    line-height: 1;
    color: #666;
    font-weight: 400;
}

.gl-field input,
.gl-guests-value {
    width: 100%;
    height: 44px;
    border: 0;
    padding: 18px 42px 6px 13px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    text-align:left;
    color: #333;
    background: #fff;
    cursor: pointer;
}

.gl-date-field:after {
    content: "";
    position: absolute;
    right: 12px;
    top: 14px;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bdbdbd' d='M7 2h2v3H7V2Zm8 0h2v3h-2V2ZM4 4h2v2h12V4h2v18H4V4Zm2 7v9h12v-9H6Zm0-3v1h12V8H6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

.gl-guests-field:after {
    content: "";
    position: absolute;
    right: 13px;
    top: 15px;
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bdbdbd' d='M12 12c2.2 0 4-2.24 4-5s-1.8-5-4-5-4 2.24-4 5 1.8 5 4 5Zm0 2c-3.33 0-7 1.67-7 5v3h14v-3c0-3.33-3.67-5-7-5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

.gl-submit {
    height: 44px;
    border: 0;
    background: #bc9640;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.gl-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(0,0,0,.45);
}

.gl-modal-overlay.is-active {
    display: block;
}

#ui-datepicker-div {
    z-index: 100001 !important;
}

.gl-guests-popup {
    display: none;
    position: absolute;
    z-index: 100000;
    padding: 12px;
    background: #fff;
    border: 1px solid #c5c5c5;
    border-radius: 6px;
    box-shadow: 0 12px 35px rgba(0,0,0,.14);
    box-sizing: border-box;
    min-height: 82px;
}

.gl-guests-popup.is-open {
    display: flex;
    gap: 14px;
}

.gl-counter-row {
    flex: 1 1 0;
    min-width: 0;
}

.gl-counter-row > span {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

.gl-counter {
    display: flex;
    align-items: center;
    width: 100%;
    height: 38px;
    border: 1px solid #bbb;
    box-sizing: border-box;
}

.gl-counter button {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin: 2px;
    border: 0;
    background: #eee;
    color: #9b7a32;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.gl-counter strong {
    flex: 1 1 auto;
    min-width: 36px;
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    color: #444;
}

@media (max-width: 900px) {
    .gl-booking-form {
        grid-template-columns: 1fr 1fr;
    }

    .gl-submit {
        grid-column: span 2;
    }
}

@media (max-width: 560px) {
    .gl-booking-form {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .gl-submit {
        grid-column: auto;
    }

    .gl-guests-popup {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%);
        width: calc(100vw - 32px);
        max-width: 340px;
        flex-direction: row;
        gap: 12px;
    }

    .ui-datepicker {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
        z-index: 100000 !important;
        width: calc(100vw - 32px) !important;
        max-width: 320px;
    }
}