/*
|--------------------------------------------------------------------------
| Royal Servicess LLC
| Reserve Mobile v3
|--------------------------------------------------------------------------
|
| Structural responsive correction using the real Reserve page classes.
|
| No DOM discovery.
| No booking-state JavaScript.
| No pricing or availability changes.
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   PAGE CONTAINMENT
   ========================================================================== */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

.page-heading,
.page-heading__content,
.guided-reserve-shell,
.guided-reserve-layout,
.guided-reserve-layout > *,
.guided-reserve-layout .reserve-stack,
.guided-reserve-layout .panel,
.guided-reserve-layout form {
    min-width: 0;
    max-width: 100%;
}


/* ==========================================================================
   TABLET + MOBILE
   ========================================================================== */

@media (max-width: 820px) {

    /*
    |--------------------------------------------------------------------------
    | Reserve shell
    |--------------------------------------------------------------------------
    */

    .guided-reserve-shell {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        overflow-x: clip;
    }

    .guided-reserve-layout {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
    }

    .guided-reserve-layout
    > * {
        width: 100%;

        min-width: 0 !important;
        max-width: 100% !important;
    }


    /*
    |--------------------------------------------------------------------------
    | REAL five-stage progress
    |
    | The old tablet CSS used minmax(112px, 1fr), which forced the five
    | stages wider than a phone viewport.
    |--------------------------------------------------------------------------
    */

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

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

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        gap: 5px !important;

        margin:
            0
            0
            16px !important;

        padding: 0 !important;

        overflow:
            hidden !important;

        scrollbar-width: none;
    }

    .guided-reserve-progress
    .reserve-progress__step {
        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        min-width: 0 !important;
        max-width: 100% !important;

        min-height: 66px;

        gap: 5px !important;

        padding:
            8px
            3px !important;

        overflow: hidden;
    }

    .guided-reserve-progress
    .reserve-progress__step
    > div {
        width: 100%;

        min-width: 0;

        text-align: center;
    }

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

        flex:
            0
            0
            24px !important;

        font-size: 10px !important;
    }

    .guided-reserve-progress
    .reserve-progress__label {
        display: block;

        width: 100%;

        min-width: 0;

        color:
            rgba(
                244,
                239,
                228,
                .82
            );

        font-size: 11px !important;

        font-weight: 800;

        line-height: 1.2 !important;

        white-space: nowrap;

        text-align: center;
    }

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


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

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

        flex-direction: column !important;
    }

    .guided-reserve-sidebar {
        position: static !important;

        order: -1;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
    }

    .guided-reservation-summary {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        overflow: hidden;
    }

    .guided-reservation-summary__header,
    .guided-reservation-summary__vehicle,
    .guided-reservation-summary__dates,
    .guided-reservation-summary__status,
    .guided-reservation-summary__progress {
        min-width: 0;
        max-width: 100%;
    }

    .guided-reservation-summary__vehicle
    strong,
    .guided-reservation-summary__vehicle
    small,
    .guided-reservation-summary__dates
    strong,
    .guided-reservation-summary__status
    strong,
    .guided-reservation-summary__status
    span {
        overflow-wrap: anywhere;
    }


    /*
    |--------------------------------------------------------------------------
    | Summary five-stage mini progress
    |--------------------------------------------------------------------------
    */

    .guided-reservation-summary__progress {
        display: grid !important;

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

        gap: 4px !important;
    }

    .guided-reservation-summary__progress
    > div {
        min-width: 0 !important;

        padding:
            7px
            2px !important;

        gap: 4px !important;
    }

    .guided-reservation-summary__progress
    span {
        width: 22px !important;
        height: 22px !important;

        flex:
            0
            0
            22px;

        font-size: 10px !important;
    }

    .guided-reservation-summary__progress
    strong {
        display: block !important;

        width: 100%;

        min-width: 0;

        font-size: 10px !important;

        line-height: 1.2 !important;

        white-space: nowrap;

        text-align: center;
    }
}


/* ==========================================================================
   PHONE
   ========================================================================== */

@media (max-width: 620px) {

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

    .page-heading {
        width: 100%;
        max-width: 100%;

        overflow-x: clip;
    }

    .page-heading__content {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

    .page-heading h1 {
        max-width: 100%;

        font-size:
            clamp(
                36px,
                10.5vw,
                46px
            ) !important;

        line-height: 1.04 !important;

        letter-spacing: -.035em;
    }

    .page-heading__subtitle {
        max-width: 100% !important;

        font-size: 16px !important;

        line-height: 1.55 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Main five-stage progress
    |--------------------------------------------------------------------------
    */

    .guided-reserve-progress {
        gap: 4px !important;
    }

    .guided-reserve-progress
    .reserve-progress__step {
        min-height: 64px;

        padding:
            8px
            2px !important;

        border-radius:
            9px !important;
    }

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

        flex-basis:
            23px !important;
    }

    .guided-reserve-progress
    .reserve-progress__label {
        font-size:
            10.5px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Customer summary
    |--------------------------------------------------------------------------
    */

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

        border-radius:
            14px !important;
    }

    .guided-reservation-summary__header {
        gap: 8px;
    }

    .guided-reservation-summary__header
    .panel__title {
        font-size:
            22px !important;

        line-height:
            1.12 !important;
    }

    .guided-reservation-summary__step {
        padding:
            5px
            8px;

        font-size:
            10px;
    }

    .guided-reservation-summary__vehicle {
        padding:
            11px !important;
    }

    .guided-reservation-summary__vehicle
    strong {
        font-size:
            17px !important;

        line-height:
            1.25;
    }

    .guided-reservation-summary__vehicle
    small {
        font-size:
            12px !important;

        line-height:
            1.45;
    }

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

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


    /*
    |--------------------------------------------------------------------------
    | Main booking panel
    |--------------------------------------------------------------------------
    */

    .guided-reserve-layout
    main
    > .panel {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        padding:
            14px !important;

        overflow: hidden;
    }

    .guided-reserve-layout
    .panel__header {
        min-width: 0;
        max-width: 100%;
    }

    .guided-reserve-layout
    .panel__title {
        font-size:
            24px !important;

        line-height:
            1.14 !important;
    }

    .guided-reserve-layout
    main
    .booking-card__note {
        max-width: 100% !important;

        font-size:
            14px !important;

        line-height:
            1.55 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Vehicle carousel
    |
    | Scrolling is intentionally allowed here, but it is contained inside
    | the panel. The old negative right margin is removed.
    |--------------------------------------------------------------------------
    */

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

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        gap: 10px !important;

        margin:
            0 !important;

        padding:
            2px
            0
            10px !important;

        overflow-x:
            auto !important;

        overflow-y:
            hidden !important;

        overscroll-behavior-x:
            contain;

        scroll-snap-type:
            x
            mandatory;

        scrollbar-width:
            none;

        -webkit-overflow-scrolling:
            touch;
    }

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

    .guided-reserve-layout
    .reserve-vehicle-option {
        width: 86% !important;

        min-width: 86% !important;
        max-width: 86% !important;

        flex:
            0
            0
            86% !important;

        scroll-snap-align:
            start;
    }

    .guided-reserve-layout
    .reserve-vehicle-card {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        overflow: hidden;
    }

    .guided-reserve-layout
    .vehicle-media--reserve {
        width: 100% !important;
        max-width: 100% !important;

        height:
            clamp(
                135px,
                39vw,
                165px
            ) !important;

        overflow: hidden;
    }

    .guided-reserve-layout
    .vehicle-media--reserve
    img {
        max-width: 100% !important;

        object-fit:
            contain !important;
    }

    .guided-reserve-layout
    .reserve-vehicle-card__title {
        font-size:
            18px !important;

        line-height:
            1.25 !important;
    }

    .guided-reserve-layout
    .reserve-vehicle-card__description {
        font-size:
            13px !important;

        line-height:
            1.45 !important;
    }

    .guided-reserve-layout
    .reserve-rate__label {
        font-size:
            11px !important;
    }

    .guided-reserve-layout
    .reserve-rate__value {
        font-size:
            13px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Date controls / action
    |--------------------------------------------------------------------------
    */

    .guided-reserve-itinerary,
    .guided-reserve-itinerary
    .reserve-itinerary-grid,
    .guided-reserve-itinerary
    .field,
    .guided-reserve-itinerary
    input {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .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% !important;

        min-width: 0 !important;

        justify-content:
            center;
    }
}


/* ==========================================================================
   NARROW PHONE
   ========================================================================== */

@media (max-width: 390px) {

    .guided-reserve-progress {
        gap:
            3px !important;
    }

    .guided-reserve-progress
    .reserve-progress__step {
        min-height:
            62px;

        padding:
            7px
            1px !important;
    }

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

        flex-basis:
            22px !important;
    }

    .guided-reserve-progress
    .reserve-progress__label {
        font-size:
            10px !important;
    }

    .guided-reservation-summary__progress {
        gap:
            3px !important;
    }

    .guided-reservation-summary__progress
    > div {
        padding:
            6px
            1px !important;
    }

    .guided-reservation-summary__progress
    strong {
        display:
            block !important;

        font-size:
            9.5px !important;
    }

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

    .guided-reserve-layout
    .reserve-vehicle-option {
        width: 90% !important;

        min-width: 90% !important;
        max-width: 90% !important;

        flex-basis:
            90% !important;
    }
}


/* ==========================================================================
   EXTREMELY NARROW PHONE
   ========================================================================== */

@media (max-width: 350px) {

    .guided-reserve-progress
    .reserve-progress__label {
        font-size:
            9px !important;
    }

    .guided-reservation-summary__progress
    strong {
        font-size:
            9px !important;
    }
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

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

    .guided-reserve-layout
    .reserve-fleet {
        scroll-behavior:
            auto !important;
    }
}