/*
|--------------------------------------------------------------------------
| Royal Servicess LLC
| Premium Customer Portal v1
|--------------------------------------------------------------------------
|
| Presentation layer only.
|
| Applies to:
| - authenticated customer header
| - /account/rentals
| - /account/profile
|
*/


/* ==========================================================================
   CUSTOMER HEADER — PUBLIC WEBSITE VISUAL LANGUAGE
   ========================================================================== */

.app-shell-header--customer {
    border-bottom:
        1px solid
        rgba(213, 178, 91, .14);

    background:
        linear-gradient(
            180deg,
            rgba(6, 7, 8, .985),
            rgba(7, 8, 9, .96)
        );

    box-shadow:
        0
        18px
        60px
        rgba(0, 0, 0, .20);
}

.app-shell-header--customer
.app-shell-header__inner {
    width:
        min(
            1500px,
            calc(100% - 48px)
        );

    max-width: none;

    min-height: 78px;

    margin-inline: auto;

    padding-inline: 0;
}

.app-shell-header--customer
.app-shell-brand-group {
    gap: 12px;
}

.app-shell-header--customer
.app-shell-brand {
    gap: 12px;

    min-width: max-content;
}

.app-shell-header--customer
.app-shell-brand__mark {
    width: 48px;
    height: 48px;

    border-radius: 12px;

    box-shadow:
        0
        0
        0
        1px
        rgba(217, 178, 74, .22),
        0
        10px
        35px
        rgba(0, 0, 0, .35);
}

.app-shell-header--customer
.app-shell-brand__name {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 2px;

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

    font-size: 1.08rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: -.015em;

    color: #f4f0e8;
}

.app-shell-header--customer
.app-shell-brand__name::after {
    content: "SELF-DRIVE RENTALS";

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .47rem;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: .18em;

    color:
        rgba(214, 207, 195, .58);
}

.app-shell-header--customer
.app-shell-context {
    display: none;
}

.app-shell-header--customer
.app-shell-nav {
    gap: 4px;
}

.app-shell-header--customer
.app-shell-nav__link {
    position: relative;

    min-height: 42px;

    padding:
        0
        12px;

    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;

    color:
        rgba(240, 236, 227, .66);

    font-size: .63rem;

    font-weight: 850;

    letter-spacing: .04em;

    text-transform: none;
}

.app-shell-header--customer
.app-shell-nav__link:hover,
.app-shell-header--customer
.app-shell-nav__link:focus-visible {
    color: #f5f0e5;

    background: transparent;
}

.app-shell-header--customer
.app-shell-nav__link.is-active {
    color: #f5f0e5;

    background: transparent;

    box-shadow: none;
}

.app-shell-header--customer
.app-shell-nav__link.is-active::after {
    left: 12px;
    right: 12px;
    bottom: 4px;

    height: 1px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d8ad3e,
            transparent
        );
}


/*
|--------------------------------------------------------------------------
| Main website-style customer account control
|--------------------------------------------------------------------------
*/

.app-shell-header--customer
.app-shell-user > summary {
    min-height: 42px;

    padding:
        8px
        9px;

    border: 0 !important;

    border-radius: 9px;

    background:
        transparent !important;

    box-shadow:
        none !important;
}

.app-shell-header--customer
.app-shell-user > summary:hover,
.app-shell-header--customer
.app-shell-user > summary:focus-visible,
.app-shell-header--customer
.app-shell-user[open] > summary {
    border: 0 !important;

    background:
        rgba(255, 255, 255, .035) !important;

    box-shadow:
        none !important;
}

.app-shell-header--customer
.app-shell-user__context {
    color: #f5f0e6;

    font-size: .62rem;

    font-weight: 900;

    letter-spacing: .05em;

    text-transform: uppercase;
}

.app-shell-header--customer
.app-shell-user__email {
    color:
        rgba(235, 229, 217, .43);

    font-size: .52rem;
}


/*
|--------------------------------------------------------------------------
| Reserve CTA — same right-side placement as public website
|--------------------------------------------------------------------------
*/

.app-shell-header--customer
.app-shell-nav__reserve-cta {
    min-width: 118px;

    min-height: 46px;

    justify-content: center;

    padding:
        0
        20px !important;

    border:
        1px solid
        rgba(244, 216, 143, .82) !important;

    border-radius: 999px !important;

    color:
        #18130b !important;

    background:
        linear-gradient(
            135deg,
            #f2d995,
            #d9b558
        ) !important;

    box-shadow:
        0
        10px
        30px
        rgba(190, 143, 40, .16) !important;

    font-size: .62rem !important;

    font-weight: 950 !important;

    letter-spacing: .08em !important;

    text-transform: uppercase !important;
}

.app-shell-header--customer
.app-shell-nav__reserve-cta::before,
.app-shell-header--customer
.app-shell-nav__reserve-cta::after {
    display: none !important;
}

.app-shell-header--customer
.app-shell-nav__reserve-cta:hover {
    color: #100d07 !important;

    background:
        linear-gradient(
            135deg,
            #f8e4ad,
            #e5c46f
        ) !important;

    box-shadow:
        0
        14px
        34px
        rgba(205, 159, 49, .23) !important;

    transform:
        translateY(-1px);
}


/*
|--------------------------------------------------------------------------
| Desktop — Account first, Reserve on the far right
|--------------------------------------------------------------------------
*/

@media (min-width: 960px) {
    .app-shell-header--customer
    .app-shell-header__inner {
        position: relative;

        display: grid;

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

        gap: 22px;

        padding-right: 146px;
    }

    .app-shell-header--customer
    .app-shell-nav {
        min-width: 0;

        justify-content: center;
    }

    .app-shell-header--customer
    .app-shell-user {
        justify-self: end;

        margin: 0;
    }

    .app-shell-header--customer
    .app-shell-nav__reserve-cta {
        position: absolute;

        top: 50%;
        right: 0;

        margin: 0 !important;

        transform:
            translateY(-50%);
    }

    .app-shell-header--customer
    .app-shell-nav__reserve-cta:hover {
        transform:
            translateY(calc(-50% - 1px));
    }
}


/* ==========================================================================
   SHARED CUSTOMER PORTAL PAGE WIDTH / HERO
   ========================================================================== */

.customer-portal-heading,
.customer-rentals,
.customer-workspace {
    width:
        min(
            1320px,
            calc(100vw - 64px)
        );

    max-width: none;

    margin-left: 50%;

    transform:
        translateX(-50%);
}

.customer-portal-heading {
    align-items: flex-end;

    gap: 32px;

    margin-bottom: 28px;

    padding:
        14px
        0
        0;
}

.customer-portal-heading
.page-eyebrow {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

    color: #d9b44e;

    font-size: .62rem;

    font-weight: 900;

    letter-spacing: .18em;

    text-transform: uppercase;
}

.customer-portal-heading
.page-eyebrow::before {
    content: "";

    width: 25px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #d9ad38,
            transparent
        );
}

.customer-portal-heading h1 {
    margin: 0;

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

    font-size:
        clamp(
            2.35rem,
            4vw,
            4rem
        );

    font-weight: 600;

    line-height: .98;

    letter-spacing: -.045em;

    color: #f5f1e9;
}

.customer-portal-heading
.page-heading__subtitle {
    max-width: 700px;

    margin-top: 13px;

    color:
        rgba(231, 226, 216, .58);

    font-size: .92rem;

    line-height: 1.65;
}

.customer-portal-heading
.page-heading__side {
    flex: 0 0 auto;
}

.customer-portal-heading
.page-heading__side
.button {
    min-height: 44px;

    border-color:
        rgba(213, 174, 72, .30);

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(218, 178, 72, .09),
            rgba(218, 178, 72, .035)
        );

    color: #ead595;
}


/* ==========================================================================
   RENTALS — SUMMARY
   ========================================================================== */

.customer-rentals {
    display: grid;

    gap: 22px;

    padding-bottom: 46px;
}

.customer-rental-summary {
    display: grid;

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

    gap: 12px;
}

.customer-rental-summary__item {
    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 122px;

    padding:
        20px
        20px
        18px;

    overflow: hidden;

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

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .040),
            rgba(255, 255, 255, .017)
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(255, 255, 255, .022);
}

.customer-rental-summary__item::before {
    content: "";

    position: absolute;

    top: 0;
    left: 20px;

    width: 30px;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #d9ad36,
            rgba(217, 173, 54, .15)
        );
}

.customer-rental-summary__value {
    margin-bottom: 8px;

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

    font-size: 1.75rem;

    line-height: 1;

    color: #f6f1e7;
}

.customer-rental-summary__label {
    margin-bottom: 6px;

    color:
        rgba(246, 242, 234, .84);

    font-size: .72rem;

    font-weight: 850;
}

.customer-rental-summary__copy {
    color:
        rgba(226, 219, 207, .40);

    font-size: .60rem;

    line-height: 1.45;
}


/* ==========================================================================
   RENTALS — HISTORY SHELL
   ========================================================================== */

.customer-rentals > .panel {
    padding: 0;

    border: 0;

    background: transparent;

    box-shadow: none;
}

.customer-rentals > .panel
.panel__header {
    margin-bottom: 15px;

    padding:
        0
        2px;
}

.customer-rentals > .panel
.panel__label {
    color:
        rgba(218, 179, 74, .72);

    font-size: .58rem;

    font-weight: 900;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.customer-rentals > .panel
.panel__title {
    margin-top: 4px;

    font-size: 1.55rem;
}


/* ==========================================================================
   RENTALS — BOOKING CARDS
   ========================================================================== */

.customer-rental-list {
    display: grid;

    gap: 16px;
}

.customer-rental-card {
    position: relative;

    display: grid !important;

    grid-template-columns:
        190px
        minmax(0, 1fr) !important;

    align-items: start;

    gap: 24px;

    padding: 20px !important;

    overflow: hidden;

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

    border-radius: 19px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .035),
            rgba(255, 255, 255, .014)
        ) !important;

    box-shadow:
        0
        22px
        55px
        rgba(0, 0, 0, .13),
        inset
        0
        1px
        0
        rgba(255, 255, 255, .02);
}

.customer-rental-card::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(215, 174, 63, .20),
            transparent
        );
}

.customer-rental-card__media {
    grid-column: 1;
    grid-row: 1;

    align-self: start;

    width: 100%;

    overflow: hidden;

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

    border-radius: 14px;

    background:
        radial-gradient(
            circle at 50% 36%,
            rgba(216, 178, 78, .08),
            transparent 58%
        ),
        rgba(3, 4, 5, .72);
}

.customer-rental-card__media
.vehicle-media {
    width: 100% !important;

    min-height: 125px;

    aspect-ratio: 1.45 / 1;

    margin: 0 !important;

    border: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;
}

.customer-rental-card__media
img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;
}

.customer-rental-card__content {
    grid-column: 2;
    grid-row: 1;

    min-width: 0;

    padding: 0 !important;
}

.customer-rental-card__header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 16px;
}

.customer-rental-card__eyebrow {
    margin-bottom: 5px;

    color: #d8b04a;

    font-size: .54rem;

    font-weight: 900;

    letter-spacing: .13em;

    text-transform: uppercase;
}

.customer-rental-card__title {
    margin: 0;

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

    font-size: 1.35rem;

    line-height: 1.12;

    color: #f4f0e7;
}

.customer-rental-card__reference {
    margin-top: 5px;

    overflow-wrap: anywhere;

    color:
        rgba(227, 220, 208, .35);

    font-size: .56rem;
}

.customer-rental-card
.status-pill {
    flex: 0 0 auto;

    padding:
        7px
        10px;

    border-radius: 999px;

    font-size: .53rem;

    font-weight: 900;

    letter-spacing: .07em;

    text-transform: uppercase;
}


/* ==========================================================================
   RENTALS — DATE / INFORMATION GRID
   ========================================================================== */

.customer-rental-meta {
    display: grid;

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

    gap: 9px;
}

.customer-rental-meta__item {
    min-width: 0;

    padding:
        13px
        14px;

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

    border-radius: 11px;

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

.customer-rental-meta__label {
    display: block;

    margin-bottom: 5px;

    color:
        rgba(218, 211, 197, .39);

    font-size: .50rem;

    font-weight: 850;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.customer-rental-meta__value {
    display: block;

    overflow-wrap: anywhere;

    color:
        rgba(245, 240, 230, .86);

    font-size: .67rem;

    font-weight: 700;

    line-height: 1.45;
}

.customer-rental-card__status-copy {
    margin:
        12px
        0
        0 !important;

    padding:
        0
        2px;

    color:
        rgba(229, 223, 211, .49);

    font-size: .65rem;

    line-height: 1.55;
}


/* ==========================================================================
   RENTALS — PREPARATION / RETURN / CANCELLATION PANELS
   ========================================================================== */

.customer-rental-card
.staff-admin-permission-box {
    margin:
        16px
        0 !important;

    padding:
        18px !important;

    border:
        1px solid
        rgba(211, 171, 62, .14) !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            135deg,
            rgba(213, 174, 67, .040),
            rgba(255, 255, 255, .014)
        ) !important;
}

.customer-rental-card
.staff-admin-permission-box h3 {
    margin:
        0
        0
        10px;

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

    font-size: 1.18rem;

    font-weight: 600;

    color: #f0ece4;
}

.customer-rental-card
.staff-admin-permission-box
.notice {
    border:
        1px solid
        rgba(255, 255, 255, .07);

    border-radius: 10px;

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

    color:
        rgba(243, 238, 227, .82);

    box-shadow: none;
}

.customer-rental-card
.booking-card__note {
    color:
        rgba(227, 220, 207, .47);

    font-size: .63rem;

    line-height: 1.6;
}

.customer-rental-card
.button {
    min-height: 42px;

    border-radius: 9px;
}

.customer-rental-card
.button--secondary {
    border-color:
        rgba(213, 174, 68, .26);

    color: #e4cb83;

    background:
        rgba(213, 174, 68, .055);
}


/* ==========================================================================
   PROFILE — LAYOUT
   ========================================================================== */

.customer-workspace {
    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(290px, .72fr);

    align-items: start;

    gap: 20px;

    padding-bottom: 48px;
}

.customer-workspace
.workspace-stack {
    min-width: 0;
}

.customer-workspace
.workspace-panel {
    padding: 28px;

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

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .038),
            rgba(255, 255, 255, .016)
        );

    box-shadow:
        0
        22px
        60px
        rgba(0, 0, 0, .12),
        inset
        0
        1px
        0
        rgba(255, 255, 255, .020);
}

.customer-workspace
.workspace-panel--accent {
    border-color:
        rgba(212, 173, 67, .20);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(211, 171, 64, .10),
            transparent 46%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .038),
            rgba(255, 255, 255, .015)
        );
}

.customer-workspace
.workspace-kicker {
    display: block;

    margin-bottom: 9px;

    color: #d9b24a;

    font-size: .56rem;

    font-weight: 900;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.customer-workspace
.workspace-panel h2 {
    margin: 0;

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

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

    font-weight: 600;

    line-height: 1.05;

    letter-spacing: -.025em;

    color: #f3efe7;
}

.customer-workspace
.workspace-panel__copy {
    max-width: 620px;

    margin-top: 8px;

    color:
        rgba(228, 222, 211, .51);

    font-size: .75rem;

    line-height: 1.55;
}


/* ==========================================================================
   PROFILE — FORM
   ========================================================================== */

.customer-workspace
.workspace-section-heading {
    margin:
        28px
        0
        15px;
}

.customer-workspace
.workspace-section-heading h3 {
    margin: 0;

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

    font-size: 1.22rem;

    font-weight: 600;

    color: #eee9e0;
}

.customer-workspace
.workspace-section-heading p {
    margin:
        5px
        0
        0;

    color:
        rgba(228, 220, 207, .43);

    font-size: .65rem;

    line-height: 1.5;
}

.customer-workspace
.form-grid {
    display: grid;

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

    gap:
        15px
        16px;
}

.customer-workspace
.form-grid__full {
    grid-column:
        1 / -1;
}

.customer-workspace
.field label {
    display: block;

    margin-bottom: 7px;

    color:
        rgba(244, 239, 230, .77);

    font-size: .65rem;

    font-weight: 800;
}

.customer-workspace
.field input,
.customer-workspace
.field select,
.customer-workspace
.field textarea {
    width: 100%;

    min-height: 50px;

    padding:
        0
        14px;

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

    border-radius: 10px;

    background:
        rgba(2, 3, 4, .58);

    color: #f4efe7;

    box-shadow:
        inset
        0
        1px
        0
        rgba(255, 255, 255, .015);

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.customer-workspace
.field input:focus,
.customer-workspace
.field select:focus,
.customer-workspace
.field textarea:focus {
    outline: none;

    border-color:
        rgba(214, 175, 68, .55);

    background:
        rgba(5, 6, 7, .82);

    box-shadow:
        0
        0
        0
        3px
        rgba(208, 169, 62, .075);
}

.customer-workspace
.field-help {
    display: block;

    margin-top: 6px;

    color:
        rgba(224, 216, 201, .37);

    font-size: .57rem;

    line-height: 1.45;
}

.customer-workspace
.workspace-divider {
    height: 1px;

    margin:
        26px
        0;

    border: 0;

    background:
        linear-gradient(
            90deg,
            rgba(213, 174, 69, .30),
            rgba(255, 255, 255, .045),
            transparent
        );
}

.customer-workspace
.form-actions {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 28px;

    padding-top: 22px;

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

.customer-workspace
.form-actions
.button {
    min-height: 46px;

    padding-inline: 22px;

    border-radius: 9px;

    color: #171109;

    background:
        linear-gradient(
            135deg,
            #e8c760,
            #cfa338
        );

    box-shadow:
        0
        10px
        25px
        rgba(195, 144, 35, .14);
}

.customer-workspace
.text-action {
    color:
        rgba(234, 227, 215, .60);

    font-size: .66rem;

    font-weight: 750;
}


/* ==========================================================================
   PROFILE — SIDEBAR
   ========================================================================== */

.customer-workspace
> .workspace-stack:last-child {
    position: sticky;

    top: 102px;

    display: grid;

    gap: 16px;
}

.customer-workspace
.summary-list {
    display: grid;

    margin-top: 20px;
}

.customer-workspace
.summary-row {
    display: grid;

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

    gap: 14px;

    padding:
        14px
        0;

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

.customer-workspace
.summary-row:last-child {
    border-bottom: 0;
}

.customer-workspace
.summary-row__label {
    color:
        rgba(223, 216, 202, .40);

    font-size: .57rem;

    font-weight: 850;

    letter-spacing: .06em;

    text-transform: uppercase;
}

.customer-workspace
.summary-row__value {
    min-width: 0;

    overflow-wrap: anywhere;

    color:
        rgba(245, 240, 231, .82);

    font-size: .68rem;

    line-height: 1.5;
}

.customer-workspace
.guidance-list {
    display: grid;

    gap: 10px;

    margin-top: 20px;
}

.customer-workspace
.action-tile {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    min-height: 75px;

    padding:
        15px
        16px;

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

    border-radius: 12px;

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

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.customer-workspace
.action-tile:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(214, 175, 67, .26);

    background:
        rgba(214, 175, 67, .045);
}

.customer-workspace
.action-tile__title {
    display: block;

    margin-bottom: 4px;

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

    font-size: .82rem;

    color: #f0ebe2;
}

.customer-workspace
.action-tile__copy {
    display: block;

    color:
        rgba(227, 219, 205, .40);

    font-size: .57rem;

    line-height: 1.45;
}

.customer-workspace
.action-tile__arrow {
    display: grid;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    place-items: center;

    border:
        1px solid
        rgba(214, 175, 67, .20);

    border-radius: 999px;

    color: #d8af45;
}


/* ==========================================================================
   EMPTY STATE / PAGINATION
   ========================================================================== */

.customer-rentals
.empty-state {
    padding:
        48px
        24px;

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

    border-radius: 18px;

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

.customer-rentals
.pagination-actions {
    margin-top: 18px;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {
    .customer-workspace {
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(270px, .72fr);
    }

    .customer-rental-card {
        grid-template-columns:
            165px
            minmax(0, 1fr) !important;

        gap: 19px;
    }
}


/* ==========================================================================
   COMPACT HEADER
   ========================================================================== */

@media (max-width: 959px) {
    .app-shell-header--customer
    .app-shell-header__inner {
        width:
            min(
                100% - 28px,
                1100px
            );
    }

    .app-shell-header--customer
    .app-shell-nav__reserve-cta {
        order: 99;

        margin-left: auto !important;
    }
}


/* ==========================================================================
   MOBILE / SMALL TABLET
   ========================================================================== */

@media (max-width: 820px) {
    .customer-portal-heading,
    .customer-rentals,
    .customer-workspace {
        width:
            calc(100vw - 28px);
    }

    .customer-portal-heading {
        align-items: flex-start;

        gap: 18px;
    }

    .customer-rental-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .customer-rental-card {
        grid-template-columns:
            1fr !important;

        gap: 17px;

        padding: 16px !important;
    }

    .customer-rental-card__media,
    .customer-rental-card__content {
        grid-column: 1;
        grid-row: auto;
    }

    .customer-rental-card__media {
        max-width: 280px;
    }

    .customer-workspace {
        grid-template-columns:
            1fr;
    }

    .customer-workspace
    > .workspace-stack:last-child {
        position: static;

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


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 620px) {
    .customer-portal-heading h1 {
        font-size: 2.35rem;
    }

    .customer-portal-heading
    .page-heading__side {
        width: 100%;
    }

    .customer-portal-heading
    .page-heading__side
    .button {
        width: 100%;

        justify-content: center;
    }

    .customer-rental-summary {
        gap: 9px;
    }

    .customer-rental-summary__item {
        min-height: 110px;

        padding:
            17px
            15px;
    }

    .customer-rental-meta {
        grid-template-columns:
            1fr;
    }

    .customer-rental-card__header {
        flex-direction: column;

        gap: 10px;
    }

    .customer-workspace
    .workspace-panel {
        padding: 20px;
    }

    .customer-workspace
    .form-grid {
        grid-template-columns:
            1fr;
    }

    .customer-workspace
    .form-grid__full {
        grid-column: auto;
    }

    .customer-workspace
    > .workspace-stack:last-child {
        grid-template-columns:
            1fr;
    }

    .customer-workspace
    .form-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .customer-workspace
    .form-actions
    .button {
        justify-content: center;

        width: 100%;
    }
}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {
    .customer-rental-summary {
        grid-template-columns:
            1fr;
    }

    .customer-rental-summary__item {
        min-height: auto;
    }

    .customer-rental-card__media {
        max-width: none;
    }
}