/*
|--------------------------------------------------------------------------
| Royal Servicess LLC — Guided Reserve Step 1
|--------------------------------------------------------------------------
| Vehicle → Dates → Availability
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Page
|--------------------------------------------------------------------------
*/

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

.guided-reserve-shell
.page-heading__subtitle {
    max-width: 650px;
}


/*
|--------------------------------------------------------------------------
| Five-stage progress
|--------------------------------------------------------------------------
*/

.guided-reserve-progress {
    display: grid !important;

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

    gap: 7px !important;

    margin-bottom: 18px !important;
}

.guided-reserve-progress
.reserve-progress__step {
    min-width: 0 !important;

    padding:
        10px
        11px !important;

    gap: 8px !important;

    border:
        1px solid
        rgba(255, 255, 255, .065) !important;

    border-radius: 11px !important;

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

.guided-reserve-progress
.reserve-progress__number {
    width: 26px !important;
    height: 26px !important;

    flex:
        0
        0
        26px !important;

    font-size: .6rem !important;
}

.guided-reserve-progress
.reserve-progress__label {
    font-size: .67rem !important;
}

.guided-reserve-progress
.reserve-progress__copy {
    margin-top: 1px !important;

    font-size: .56rem !important;
    line-height: 1.35 !important;
}

.guided-reserve-progress
.reserve-progress__step--active {
    border-color:
        rgba(200, 165, 91, .45) !important;

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

.guided-reserve-progress
.reserve-progress__step.is-complete {
    border-color:
        rgba(78, 164, 111, .22) !important;

    background:
        rgba(78, 164, 111, .04) !important;
}


/*
|--------------------------------------------------------------------------
| Main workspace
|--------------------------------------------------------------------------
*/

.guided-reserve-layout {
    display: grid !important;

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

    gap: 18px !important;

    align-items: start !important;
}

.guided-reserve-layout
> * {
    min-width: 0;
}

.guided-reserve-layout
.reserve-stack {
    gap: 14px !important;
}

.guided-reserve-layout
main
> .panel {
    padding:
        20px !important;

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

    border-radius: 18px !important;

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

.guided-reserve-layout
main
.panel__header {
    margin-bottom: 14px !important;
}

.guided-reserve-layout
main
.panel__title {
    font-size:
        clamp(
            1.22rem,
            2vw,
            1.55rem
        ) !important;
}

.guided-reserve-layout
main
.booking-card__note {
    max-width: 620px;

    margin-top: 5px !important;

    font-size: .75rem !important;
    line-height: 1.45 !important;
}


/*
|--------------------------------------------------------------------------
| Vehicle selection
|--------------------------------------------------------------------------
*/

.guided-reserve-layout
.reserve-fleet {
    display: grid !important;

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

    gap: 10px !important;
}

.guided-reserve-layout
.reserve-vehicle-option {
    min-width: 0;
}

.guided-reserve-layout
.reserve-vehicle-card {
    min-height: 0 !important;

    padding:
        13px !important;

    border-radius: 13px !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease !important;
}

.guided-reserve-layout
.reserve-vehicle-card:hover {
    transform:
        translateY(-1px);
}

.guided-reserve-layout
.reserve-vehicle-option.is-selected
.reserve-vehicle-card {
    border-color:
        rgba(200, 165, 91, .7) !important;

    background:
        linear-gradient(
            145deg,
            rgba(200, 165, 91, .085),
            rgba(200, 165, 91, .018)
        ) !important;

    box-shadow:
        inset 3px 0 0
        rgba(200, 165, 91, .7) !important;
}

.guided-reserve-layout
.reserve-vehicle-card__eyebrow {
    font-size: .59rem !important;
}

.guided-reserve-layout
.reserve-vehicle-card__title {
    margin-top: 4px !important;

    font-size: .98rem !important;
    line-height: 1.25 !important;
}

.guided-reserve-layout
.vehicle-media--reserve {
    height: 155px !important;

    margin:
        10px
        0
        9px !important;

    aspect-ratio: auto !important;

    border-radius: 10px !important;
}

.guided-reserve-layout
.reserve-vehicle-card__description {
    display: -webkit-box;

    min-height: 0 !important;
    max-height: 2.8em;

    margin:
        0
        0
        9px !important;

    overflow: hidden;

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

    font-size: .68rem !important;
    line-height: 1.4 !important;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.guided-reserve-layout
.reserve-rates {
    gap: 7px !important;
}

.guided-reserve-layout
.reserve-rate {
    padding:
        9px
        10px !important;

    border-radius: 9px !important;
}

.guided-reserve-layout
.reserve-rate__label {
    font-size: .53rem !important;
}

.guided-reserve-layout
.reserve-rate__value {
    margin-top: 2px !important;

    font-size: .72rem !important;
}


/*
|--------------------------------------------------------------------------
| Step 1 action
|--------------------------------------------------------------------------
*/

.guided-reserve-vehicle-action {
    display: flex;

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

    gap: 12px;
    align-items: center;
    justify-content: space-between;

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

    border-radius: 11px;

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

.guided-reserve-vehicle-action__status {
    display: flex;

    min-width: 0;

    gap: 9px;
    align-items: center;
}

.guided-reserve-vehicle-action__status
> span {
    display: grid;

    width: 27px;
    height: 27px;

    flex:
        0
        0
        27px;

    place-items: center;

    border:
        1px solid
        rgba(78, 164, 111, .28);

    border-radius: 50%;

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

    color: #a7dbb5;

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

.guided-reserve-vehicle-action__status
strong,
.guided-reserve-vehicle-action__status
small {
    display: block;
}

.guided-reserve-vehicle-action__status
strong {
    color: #f0ede5;

    font-size: .75rem;
}

.guided-reserve-vehicle-action__status
small {
    margin-top: 2px;

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

    font-size: .62rem;
}

.guided-reserve-vehicle-action
.button {
    min-height: 42px;

    flex: 0 0 auto;

    padding-inline: 17px;

    font-size: .72rem;
}


/*
|--------------------------------------------------------------------------
| Selected vehicle strip — Step 2
|--------------------------------------------------------------------------
*/

.guided-reserve-selected {
    display: grid;

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

    gap: 10px;
    align-items: center;

    margin-bottom: 13px;
    padding:
        11px
        12px;

    border:
        1px solid
        rgba(78, 164, 111, .19);

    border-radius: 11px;

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

.guided-reserve-selected[hidden] {
    display: none !important;
}

.guided-reserve-selected__mark {
    display: grid;

    width: 29px;
    height: 29px;

    place-items: center;

    border:
        1px solid
        rgba(78, 164, 111, .28);

    border-radius: 50%;

    color: #a8dcb7;

    font-size: .68rem;
}

.guided-reserve-selected__copy {
    min-width: 0;
}

.guided-reserve-selected__copy
span,
.guided-reserve-selected__copy
strong,
.guided-reserve-selected__copy
small {
    display: block;
}

.guided-reserve-selected__copy
span {
    color:
        rgba(255, 255, 255, .36);

    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.guided-reserve-selected__copy
strong {
    margin-top: 2px;

    color: #f0ede5;

    font-size: .76rem;
}

.guided-reserve-selected__copy
small {
    margin-top: 2px;

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

    font-size: .62rem;
}

.guided-reserve-selected
.button {
    min-height: 38px;

    padding:
        8px
        12px;

    font-size: .65rem;
}


/*
|--------------------------------------------------------------------------
| Guided itinerary
|--------------------------------------------------------------------------
*/

.guided-reserve-itinerary {
    padding:
        18px;

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

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(200, 165, 91, .055),
            rgba(255, 255, 255, .012)
        );
}

.guided-reserve-itinerary[hidden] {
    display: none !important;
}

.guided-reserve-itinerary
.panel__header {
    margin-bottom: 13px !important;
}

.guided-reserve-itinerary
.reserve-itinerary-grid {
    gap: 10px !important;
}

.guided-reserve-itinerary
.field label {
    margin-bottom: 6px !important;

    font-size: .72rem !important;
}

.guided-reserve-itinerary
.field input {
    min-height: 48px !important;

    border-radius: 10px !important;

    font-size: .82rem !important;
}

.guided-reserve-itinerary
.reserve-timezone-note {
    margin:
        9px
        0
        0 !important;

    font-size: .62rem !important;
}

.guided-reserve-itinerary
.reserve-submit {
    display: flex !important;

    margin-top: 14px !important;

    gap: 10px !important;
    align-items: center !important;
}

.guided-reserve-itinerary
.reserve-submit
.button {
    min-height: 46px;

    min-width: 220px;

    justify-content: center;

    font-size: .74rem;
}

.guided-reserve-itinerary
.reserve-submit
.button:disabled {
    cursor: not-allowed;

    opacity: .54;
}

.guided-reserve-itinerary
.reserve-submit
.muted {
    font-size: .63rem !important;
    line-height: 1.4 !important;
}


/*
|--------------------------------------------------------------------------
| Reservation dashboard
|--------------------------------------------------------------------------
*/

.guided-reserve-sidebar {
    position: sticky;

    top: 82px;

    align-self: start;
}

.guided-reservation-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 28%
        ),
        rgba(255, 255, 255, .018) !important;
}

.guided-reservation-summary__header {
    display: flex;

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

.guided-reservation-summary__header
.panel__label {
    color: #c8a55b !important;

    font-size: .59rem !important;
}

.guided-reservation-summary__header
.panel__title {
    margin-top: 4px !important;

    font-size: 1.15rem !important;
}

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

    padding:
        5px
        8px;

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

    border-radius: 999px;

    color: #d6ba77;

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

.guided-reservation-summary__vehicle {
    margin-top: 13px;
    padding:
        11px;

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

    border-radius: 10px;

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

.guided-reservation-summary__vehicle
span,
.guided-reservation-summary__vehicle
strong,
.guided-reservation-summary__vehicle
small {
    display: block;
}

.guided-reservation-summary__vehicle
span {
    color:
        rgba(255, 255, 255, .38);

    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.guided-reservation-summary__vehicle
strong {
    margin-top: 4px;

    color: #f2eee6;

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

    font-size: 1rem;
}

.guided-reservation-summary__vehicle
small {
    margin-top: 4px;

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

    font-size: .62rem;
}

.guided-reservation-summary__dates {
    display: grid;

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

    gap: 7px;

    margin-top: 9px;
}

.guided-reservation-summary__dates
> div {
    min-width: 0;

    padding:
        9px;

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

    border-radius: 9px;

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

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

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

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

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

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

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

.guided-reservation-summary__status {
    display: flex;

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

    gap: 8px;
    align-items: flex-start;

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

    border-radius: 9px;

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

.guided-reservation-summary__status-mark {
    color: #c8a55b;

    line-height: 1;
}

.guided-reservation-summary__status
strong,
.guided-reservation-summary__status
span {
    display: block;
}

.guided-reservation-summary__status
strong {
    color: #eeeae2;

    font-size: .64rem;
}

.guided-reservation-summary__status
div
span {
    margin-top: 2px;

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

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


/*
|--------------------------------------------------------------------------
| Dashboard progress
|--------------------------------------------------------------------------
*/

.guided-reservation-summary__progress {
    display: grid;

    gap: 4px;

    margin-top: 11px;
}

.guided-reservation-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: .55;
}

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

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

    opacity: 1;
}

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

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

    opacity: .88;
}

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

    width: 23px;
    height: 23px;

    place-items: center;

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

    border-radius: 50%;

    color: #d1b56f;

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

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

    font-size: .61rem;
}


/*
|--------------------------------------------------------------------------
| Compact rules
|--------------------------------------------------------------------------
*/

.guided-reservation-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-reservation-summary__rules
span,
.guided-reservation-summary__rules
strong {
    display: block;
}

.guided-reservation-summary__rules
span {
    color:
        rgba(255, 255, 255, .34);

    font-size: .53rem;
}

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

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

    font-size: .62rem;
}

.guided-reservation-summary__protection {
    margin:
        10px
        0
        0;

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

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


/*
|--------------------------------------------------------------------------
| Laptop
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {
    .guided-reserve-layout {
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(260px, .58fr) !important;
    }

    .guided-reserve-layout
    .vehicle-media--reserve {
        height: 135px !important;
    }

    .guided-reserve-progress
    .reserve-progress__copy {
        display: none !important;
    }
}


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

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

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

        padding-bottom: 3px;

        scrollbar-width: none;
    }

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

    .guided-reserve-layout {
        display: flex !important;

        flex-direction: column !important;
    }

    .guided-reserve-sidebar {
        position: static;

        order: -1;

        width: 100%;
    }

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

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

        padding:
            6px
            3px;

        flex-direction: column;

        gap: 3px;

        text-align: center;
    }

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

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


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

@media (max-width: 620px) {
    .guided-reserve-layout
    main
    > .panel {
        padding:
            14px !important;

        border-radius: 14px !important;
    }

    .guided-reserve-layout
    .reserve-fleet {
        display: flex !important;

        gap: 9px !important;

        margin-right: -14px;
        padding-right: 14px;

        overflow-x: auto;

        scroll-snap-type:
            x mandatory;

        scrollbar-width: none;
    }

    .guided-reserve-layout
    .reserve-fleet::-webkit-scrollbar {
        display: none;
    }

    .guided-reserve-layout
    .reserve-vehicle-option {
        min-width: 82%;

        flex:
            0
            0
            82%;

        scroll-snap-align: start;
    }

    .guided-reserve-layout
    .vehicle-media--reserve {
        height: 145px !important;
    }

    .guided-reserve-vehicle-action {
        align-items: stretch;
        flex-direction: column;
    }

    .guided-reserve-vehicle-action
    .button {
        width: 100%;

        justify-content: center;
    }

    .guided-reserve-selected {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }

    .guided-reserve-selected
    .button {
        grid-column:
            1
            / -1;

        width: 100%;

        justify-content: center;
    }

    .guided-reserve-itinerary {
        padding:
            14px
            12px;
    }

    .guided-reserve-itinerary
    .reserve-itinerary-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    .guided-reserve-itinerary
    .reserve-submit {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .guided-reserve-itinerary
    .reserve-submit
    .button {
        width: 100%;

        min-width: 0;
    }

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


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

@media (max-width: 390px) {
    .guided-reserve-layout
    .reserve-vehicle-option {
        min-width: 88%;

        flex-basis: 88%;
    }

    .guided-reservation-summary {
        padding:
            13px !important;
    }

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

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


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

.guided-reserve-layout
.reserve-vehicle-card:focus-visible,
.guided-reserve-vehicle-action
.button:focus-visible,
.guided-reserve-selected
.button:focus-visible {
    outline:
        3px solid
        rgba(200, 165, 91, .32);

    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .guided-reserve-layout
    .reserve-vehicle-card {
        transition: none !important;
    }
}