/*
|--------------------------------------------------------------------------
| Royal Servicess LLC — Guided Booking Step 2
| Dates & Availability
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Heading
|--------------------------------------------------------------------------
*/

.guided-availability-heading {
    margin-bottom: 18px !important;
}

.guided-availability-heading
.page-heading__content {
    max-width: 780px;
}

.guided-availability-heading h1 {
    font-size:
        clamp(
            2rem,
            4vw,
            3.15rem
        ) !important;

    line-height: 1.03 !important;
    letter-spacing: -.035em !important;
}

.guided-availability-heading
.page-heading__subtitle {
    max-width: 680px;

    margin-top: 8px !important;

    font-size: .88rem !important;
    line-height: 1.5 !important;
}


/*
|--------------------------------------------------------------------------
| Shell / progress
|--------------------------------------------------------------------------
*/

.guided-availability-shell {
    max-width: 1220px;
}

.guided-availability-progress {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 7px;

    margin-bottom: 18px;
}

.guided-availability-progress__step {
    display: grid;

    min-width: 0;

    grid-template-columns:
        27px
        minmax(0, 1fr);

    gap: 8px;
    align-items: center;

    padding:
        9px
        10px;

    border:
        1px solid
        rgba(255, 255, 255, .06);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, .012);

    opacity: .55;
}

.guided-availability-progress__step
> span {
    display: grid;

    width: 26px;
    height: 26px;

    place-items: center;

    border:
        1px solid
        rgba(200, 165, 91, .2);

    border-radius: 50%;

    color: #d3b86f;

    font-size: .58rem;
    font-weight: 900;
}

.guided-availability-progress__step
strong,
.guided-availability-progress__step
small {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.guided-availability-progress__step
strong {
    color:
        rgba(255, 255, 255, .78);

    font-size: .65rem;
}

.guided-availability-progress__step
small {
    margin-top: 1px;

    color:
        rgba(255, 255, 255, .37);

    font-size: .54rem;
}

.guided-availability-progress__step.is-active {
    border-color:
        rgba(200, 165, 91, .4);

    background:
        rgba(200, 165, 91, .055);

    opacity: 1;
}

.guided-availability-progress__step.is-complete {
    border-color:
        rgba(78, 164, 111, .22);

    background:
        rgba(78, 164, 111, .035);

    opacity: .9;
}

.guided-availability-progress__step.is-complete
> span {
    border-color:
        rgba(78, 164, 111, .3);

    color: #9fd5ae;
}

.guided-availability-progress__step.is-next {
    opacity: .82;

    border-color:
        rgba(200, 165, 91, .16);
}


/*
|--------------------------------------------------------------------------
| Main layout
|--------------------------------------------------------------------------
*/

.guided-availability-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.58fr)
        minmax(290px, .67fr);

    gap: 18px;

    align-items: start;
}

.guided-availability-main {
    display: grid;

    min-width: 0;

    gap: 13px;
}

.guided-availability-main
> .panel {
    border-radius: 17px !important;

    border-color:
        rgba(200, 165, 91, .13) !important;
}


/*
|--------------------------------------------------------------------------
| Selected vehicle
|--------------------------------------------------------------------------
*/

.guided-availability-vehicle {
    display: grid;

    grid-template-columns:
        215px
        minmax(0, 1fr);

    gap: 18px;
    align-items: center;

    padding:
        16px !important;
}

.guided-availability-vehicle__image {
    width: 100%;
    height: 132px;

    border-radius: 11px !important;

    object-fit: cover;
}

.guided-availability-vehicle__content {
    min-width: 0;
}

.guided-availability-vehicle__top {
    display: flex;

    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
}

.guided-availability-label {
    display: block;

    color: #c8a55b;

    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.guided-availability-vehicle h2 {
    margin:
        4px
        0
        0;

    color: #f4f0e8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.34rem;
    line-height: 1.15;
}

.guided-availability-vehicle
p {
    margin:
        7px
        0
        0;

    color:
        rgba(255, 255, 255, .45);

    font-size: .69rem;
    line-height: 1.45;
}

.guided-availability-state {
    flex: 0 0 auto;

    padding:
        5px
        9px;

    border-radius: 999px;

    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.guided-availability-state--available {
    border:
        1px solid
        rgba(78, 164, 111, .28);

    background:
        rgba(78, 164, 111, .075);

    color: #a6dcb5;
}

.guided-availability-state--unavailable {
    border:
        1px solid
        rgba(220, 112, 112, .26);

    background:
        rgba(220, 112, 112, .06);

    color: #e4aaaa;
}

.guided-availability-state--dates {
    border:
        1px solid
        rgba(200, 165, 91, .24);

    background:
        rgba(200, 165, 91, .05);

    color: #d8bb77;
}

.guided-availability-vehicle__dates {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    gap: 9px;
    align-items: center;

    margin-top: 11px;
}

.guided-availability-vehicle__dates
span,
.guided-availability-vehicle__dates
strong {
    display: block;
}

.guided-availability-vehicle__dates
div
> span {
    color:
        rgba(255, 255, 255, .34);

    font-size: .52rem;
    font-weight: 800;
    text-transform: uppercase;
}

.guided-availability-vehicle__dates
strong {
    margin-top: 3px;

    color:
        rgba(255, 255, 255, .75);

    font-size: .65rem;
}

.guided-availability-date-arrow {
    color:
        rgba(200, 165, 91, .65);
}


/*
|--------------------------------------------------------------------------
| Active action panel
|--------------------------------------------------------------------------
*/

.guided-availability-action {
    padding:
        19px !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(200, 165, 91, .045),
            transparent 30%
        ),
        rgba(255, 255, 255, .016) !important;
}

.guided-availability-result {
    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr);

    gap: 12px;
}

.guided-availability-result[hidden] {
    display: none !important;
}

.guided-availability-result__mark {
    display: grid;

    width: 36px;
    height: 36px;

    place-items: center;

    border-radius: 50%;

    font-size: .8rem;
    font-weight: 900;
}

.guided-availability-result--success
.guided-availability-result__mark {
    border:
        1px solid
        rgba(78, 164, 111, .32);

    background:
        rgba(78, 164, 111, .08);

    color: #a8dcb7;
}

.guided-availability-result--blocked
.guided-availability-result__mark {
    border:
        1px solid
        rgba(220, 112, 112, .3);

    background:
        rgba(220, 112, 112, .06);

    color: #e8b2b2;
}

.guided-availability-result__body
h2 {
    margin:
        5px
        0
        0;

    color: #f4f0e8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            1.25rem,
            2.4vw,
            1.65rem
        );

    line-height: 1.15;
}

.guided-availability-result__body
> p {
    max-width: 650px;

    margin:
        7px
        0
        0;

    color:
        rgba(255, 255, 255, .52);

    font-size: .75rem;
    line-height: 1.48;
}

.guided-availability-result__dates {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 8px;

    margin-top: 13px;
}

.guided-availability-result__dates
> div {
    padding:
        10px;

    border:
        1px solid
        rgba(255, 255, 255, .06);

    border-radius: 9px;

    background:
        rgba(255, 255, 255, .014);
}

.guided-availability-result__dates
span,
.guided-availability-result__dates
strong {
    display: block;
}

.guided-availability-result__dates
span {
    color:
        rgba(255, 255, 255, .35);

    font-size: .53rem;
    font-weight: 800;
    text-transform: uppercase;
}

.guided-availability-result__dates
strong {
    margin-top: 3px;

    color:
        rgba(255, 255, 255, .78);

    font-size: .65rem;
}

.guided-availability-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 14px;
}

.guided-availability-actions
.button {
    min-height: 44px;

    justify-content: center;

    font-size: .72rem;
}

.guided-availability-account-note {
    max-width: 620px;

    margin-top: 10px !important;

    color:
        rgba(255, 255, 255, .38) !important;

    font-size: .61rem !important;
    line-height: 1.42 !important;
}


/*
|--------------------------------------------------------------------------
| Date editor
|--------------------------------------------------------------------------
*/

.guided-availability-date-editor {
    margin-top: 16px;
    padding-top: 16px;

    border-top:
        1px solid
        rgba(255, 255, 255, .06);
}

.guided-availability-date-editor[hidden] {
    display: none !important;
}

.guided-availability-date-editor__header
h2 {
    margin:
        4px
        0
        0;

    color: #f2eee6;

    font-size: 1.12rem;
}

.guided-availability-date-editor__header
p {
    margin:
        5px
        0
        0;

    color:
        rgba(255, 255, 255, .45);

    font-size: .68rem;
}

.guided-availability-date-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 10px;

    margin-top: 13px;
}

.guided-availability-date-grid
.field {
    margin: 0;
}

.guided-availability-date-grid
label {
    margin-bottom: 6px !important;

    font-size: .7rem !important;
}

.guided-availability-date-grid
input {
    min-height: 48px !important;

    border-radius: 10px !important;

    font-size: .81rem !important;
}

.guided-availability-form-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 13px;
}

.guided-availability-form-actions
.button {
    min-height: 44px;

    justify-content: center;

    font-size: .71rem;
}

.guided-availability-form-actions
.button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.guided-availability-form-note {
    margin:
        8px
        0
        0;

    color:
        rgba(255, 255, 255, .36);

    font-size: .59rem;
}


/*
|--------------------------------------------------------------------------
| Reservation sidebar
|--------------------------------------------------------------------------
*/

.guided-availability-sidebar {
    position: sticky;

    top: 82px;

    min-width: 0;

    align-self: start;
}

.guided-availability-summary {
    padding:
        17px !important;

    border-color:
        rgba(200, 165, 91, .16) !important;

    border-radius: 16px !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(200, 165, 91, .07),
            transparent 30%
        ),
        rgba(255, 255, 255, .016) !important;
}

.guided-availability-summary__header {
    display: flex;

    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
}

.guided-availability-summary__header
h2 {
    margin:
        4px
        0
        0;

    color: #f2eee6;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.1rem;
}

.guided-availability-summary__step {
    flex: 0 0 auto;

    padding:
        5px
        8px;

    border:
        1px solid
        rgba(200, 165, 91, .15);

    border-radius: 999px;

    color: #d6ba77;

    font-size: .56rem;
    font-weight: 850;
}

.guided-availability-summary__dates {
    display: grid;

    gap: 7px;

    margin-top: 12px;
}

.guided-availability-summary__dates
> div {
    padding:
        9px
        10px;

    border:
        1px solid
        rgba(255, 255, 255, .055);

    border-radius: 9px;

    background:
        rgba(255, 255, 255, .012);
}

.guided-availability-summary__dates
span,
.guided-availability-summary__dates
strong {
    display: block;
}

.guided-availability-summary__dates
span {
    color:
        rgba(255, 255, 255, .34);

    font-size: .52rem;
    font-weight: 800;
    text-transform: uppercase;
}

.guided-availability-summary__dates
strong {
    margin-top: 3px;

    color:
        rgba(255, 255, 255, .74);

    font-size: .62rem;
    line-height: 1.35;
}

.guided-availability-summary__status {
    display: flex;

    gap: 8px;

    margin-top: 9px;
    padding:
        9px
        10px;

    align-items: flex-start;

    border:
        1px solid
        rgba(255, 255, 255, .06);

    border-radius: 9px;
}

.guided-availability-summary__status
> span {
    font-size: .65rem;
}

.guided-availability-summary__status
strong,
.guided-availability-summary__status
small {
    display: block;
}

.guided-availability-summary__status
strong {
    color:
        rgba(255, 255, 255, .78);

    font-size: .62rem;
}

.guided-availability-summary__status
small {
    margin-top: 2px;

    color:
        rgba(255, 255, 255, .4);

    font-size: .56rem;
    line-height: 1.4;
}

.guided-availability-summary__status--available {
    border-color:
        rgba(78, 164, 111, .2);

    background:
        rgba(78, 164, 111, .035);
}

.guided-availability-summary__status--available
> span {
    color: #9fd5ae;
}

.guided-availability-summary__status--unavailable {
    border-color:
        rgba(220, 112, 112, .2);

    background:
        rgba(220, 112, 112, .03);
}

.guided-availability-summary__status--unavailable
> span {
    color: #e2aaaa;
}

.guided-availability-summary__status--dates {
    border-color:
        rgba(200, 165, 91, .16);

    background:
        rgba(200, 165, 91, .025);
}


/*
|--------------------------------------------------------------------------
| Sidebar progress
|--------------------------------------------------------------------------
*/

.guided-availability-summary__progress {
    display: grid;

    gap: 4px;

    margin-top: 11px;
}

.guided-availability-summary__progress
> div {
    display: grid;

    grid-template-columns:
        24px
        minmax(0, 1fr);

    gap: 8px;
    align-items: center;

    padding:
        7px
        8px;

    border:
        1px solid
        rgba(255, 255, 255, .045);

    border-radius: 8px;

    opacity: .52;
}

.guided-availability-summary__progress
> div.is-active {
    border-color:
        rgba(200, 165, 91, .26);

    background:
        rgba(200, 165, 91, .04);

    opacity: 1;
}

.guided-availability-summary__progress
> div.is-complete {
    border-color:
        rgba(78, 164, 111, .18);

    background:
        rgba(78, 164, 111, .03);

    opacity: .9;
}

.guided-availability-summary__progress
> div.is-next {
    opacity: .78;
}

.guided-availability-summary__progress
span {
    display: grid;

    width: 23px;
    height: 23px;

    place-items: center;

    border:
        1px solid
        rgba(200, 165, 91, .18);

    border-radius: 50%;

    color: #d0b46e;

    font-size: .52rem;
    font-weight: 900;
}

.guided-availability-summary__progress
strong {
    color:
        rgba(255, 255, 255, .72);

    font-size: .61rem;
}


/*
|--------------------------------------------------------------------------
| Rules / protection
|--------------------------------------------------------------------------
*/

.guided-availability-summary__rules {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 7px;

    margin-top: 11px;
    padding-top: 11px;

    border-top:
        1px solid
        rgba(255, 255, 255, .055);
}

.guided-availability-summary__rules
span,
.guided-availability-summary__rules
strong {
    display: block;
}

.guided-availability-summary__rules
span {
    color:
        rgba(255, 255, 255, .33);

    font-size: .52rem;
}

.guided-availability-summary__rules
strong {
    margin-top: 2px;

    color:
        rgba(255, 255, 255, .72);

    font-size: .61rem;
}

.guided-availability-summary__protection {
    display: flex;

    gap: 8px;

    margin-top: 10px;
    padding:
        9px;

    border:
        1px solid
        rgba(200, 165, 91, .1);

    border-radius: 8px;

    background:
        rgba(200, 165, 91, .02);
}

.guided-availability-summary__protection
> span {
    color: #c8a55b;
}

.guided-availability-summary__protection
p {
    margin: 0;

    color:
        rgba(255, 255, 255, .38);

    font-size: .55rem;
    line-height: 1.4;
}


/*
|--------------------------------------------------------------------------
| Changed-date state
|--------------------------------------------------------------------------
*/

.guided-availability-shell.has-date-changes
.guided-availability-date-editor {
    margin-top: 0;
    padding-top: 0;

    border-top: 0;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {
    .guided-availability-progress {
        overflow-x: auto;

        grid-template-columns:
            repeat(
                5,
                minmax(112px, 1fr)
            );

        padding-bottom: 3px;

        scrollbar-width: none;
    }

    .guided-availability-progress::-webkit-scrollbar {
        display: none;
    }

    .guided-availability-layout {
        display: flex;

        flex-direction: column;
    }

    .guided-availability-sidebar {
        position: static;

        order: -1;

        width: 100%;
    }

    .guided-availability-summary__progress {
        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );
    }

    .guided-availability-summary__progress
    > div {
        display: flex;

        padding:
            6px
            3px;

        flex-direction: column;

        gap: 3px;

        text-align: center;
    }

    .guided-availability-summary__progress
    strong {
        font-size: .49rem;
    }

    .guided-availability-summary__rules,
    .guided-availability-summary__protection {
        display: none;
    }
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {
    .guided-availability-heading
    .page-heading__side {
        width: 100%;
    }

    .guided-availability-heading
    .page-heading__side
    .button {
        width: 100%;

        justify-content: center;
    }

    .guided-availability-vehicle {
        grid-template-columns:
            92px
            minmax(0, 1fr);

        gap: 11px;

        padding:
            12px !important;
    }

    .guided-availability-vehicle__image {
        height: 76px;
    }

    .guided-availability-vehicle h2 {
        font-size: 1rem;
    }

    .guided-availability-vehicle
    p {
        display: none;
    }

    .guided-availability-vehicle__dates {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 5px;

        margin-top: 8px;
    }

    .guided-availability-date-arrow {
        display: none !important;
    }

    .guided-availability-action {
        padding:
            14px !important;
    }

    .guided-availability-result {
        grid-template-columns:
            31px
            minmax(0, 1fr);

        gap: 9px;
    }

    .guided-availability-result__mark {
        width: 30px;
        height: 30px;
    }

    .guided-availability-result__dates {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .guided-availability-actions,
    .guided-availability-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .guided-availability-actions
    .button,
    .guided-availability-form-actions
    .button {
        width: 100%;

        justify-content: center;
    }

    .guided-availability-date-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }
}


/*
|--------------------------------------------------------------------------
| Small phones
|--------------------------------------------------------------------------
*/

@media (max-width: 390px) {
    .guided-availability-summary {
        padding:
            13px !important;
    }

    .guided-availability-summary__progress
    strong {
        display: none;
    }

    .guided-availability-vehicle {
        grid-template-columns:
            78px
            minmax(0, 1fr);
    }

    .guided-availability-vehicle__image {
        height: 66px;
    }

    .guided-availability-state {
        padding:
            4px
            6px;

        font-size: .49rem;
    }
}


/*
|--------------------------------------------------------------------------
| Accessibility
|--------------------------------------------------------------------------
*/

.guided-availability-actions
.button:focus-visible,
.guided-availability-form-actions
.button:focus-visible {
    outline:
        3px solid
        rgba(200, 165, 91, .3);

    outline-offset: 2px;
}