/*
|--------------------------------------------------------------------------
| Royal Servicess LLC
| Customer Rentals — Premium Responsive v2
|--------------------------------------------------------------------------
|
| Presentation-only enhancement.
|
| This stylesheet intentionally does not alter booking, payment,
| cancellation, return, licence, agreement, or authorization logic.
|
*/


/* ==========================================================================
   PAGE RHYTHM
   ========================================================================== */

.customer-rentals {
    gap: 20px;
}

.customer-rentals
.customer-rental-summary {
    gap: 10px;
}

.customer-rentals
.customer-rental-summary__item {
    min-height: 105px;

    padding:
        17px
        18px
        15px;

    border-radius: 14px;
}

.customer-rentals
.customer-rental-summary__value {
    margin-bottom: 6px;

    font-size: 1.45rem;
}

.customer-rentals
.customer-rental-summary__label {
    margin-bottom: 4px;

    font-size: .66rem;
}

.customer-rentals
.customer-rental-summary__copy {
    font-size: .55rem;

    line-height: 1.4;
}


/* ==========================================================================
   HISTORY HEADING
   ========================================================================== */

.customer-rentals
.panel__header {
    margin-bottom: 13px;
}

.customer-rentals
.panel__title {
    letter-spacing: -.025em;
}


/* ==========================================================================
   RENTAL DOSSIER CARD
   ========================================================================== */

.customer-rentals
.customer-rental-list {
    gap: 14px;
}

.customer-rentals
.customer-rental-card {
    position: relative;

    display: grid !important;

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

    grid-auto-flow: row;

    gap:
        15px
        20px !important;

    align-items: start;

    padding:
        17px !important;

    overflow: hidden;

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

    border-radius: 18px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(210, 168, 58, .034),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .030),
            rgba(255, 255, 255, .012)
        ) !important;

    box-shadow:
        0
        18px
        50px
        rgba(0, 0, 0, .13),
        inset
        0
        1px
        0
        rgba(255, 255, 255, .018);
}

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

    position: absolute;

    inset:
        0
        auto
        auto
        0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(217, 176, 64, .20),
            transparent
        );

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Status-sensitive card accent
|--------------------------------------------------------------------------
*/

.customer-rentals
.customer-rental-card:has(.status-pill--success) {
    border-color:
        rgba(88, 175, 116, .13) !important;
}

.customer-rentals
.customer-rental-card:has(.status-pill--warning) {
    border-color:
        rgba(213, 173, 66, .12) !important;
}


/* ==========================================================================
   VEHICLE MEDIA
   ========================================================================== */

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

    align-self: stretch;

    display: grid;

    min-width: 0;

    min-height: 118px;

    overflow: hidden;

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

    border-radius: 13px;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(214, 174, 68, .075),
            transparent 58%
        ),
        rgba(2, 3, 4, .62);
}

.customer-rentals
.customer-rental-card__media
.vehicle-media {
    display: grid !important;

    place-items: center;

    width: 100% !important;
    height: 100% !important;

    min-height: 118px !important;

    aspect-ratio: auto !important;

    margin: 0 !important;

    padding: 8px !important;

    border: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;
}

.customer-rentals
.customer-rental-card__media
.vehicle-media img,
.customer-rentals
.customer-rental-card__media
img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    max-height: 120px;

    object-fit: contain !important;

    object-position: center !important;

    transform:
        scale(1.03);
}


/* ==========================================================================
   REMOVE DEAD LEFT COLUMN BELOW VEHICLE
   ========================================================================== */

/*
 * Making the content wrapper "display: contents" allows the title row
 * to sit beside the vehicle while all subsequent booking information
 * spans the complete rental card width.
 */

.customer-rentals
.customer-rental-card__content {
    display: contents !important;
}

.customer-rentals
.customer-rental-card__content
> * {
    grid-column:
        1 / -1;

    min-width: 0;
}


/* ==========================================================================
   TOP BOOKING IDENTITY ROW
   ========================================================================== */

.customer-rentals
.customer-rental-card__header {
    grid-column: 2 !important;
    grid-row: 1 !important;

    align-self: center;

    display: flex !important;

    align-items: flex-start;

    justify-content: space-between;

    gap: 18px;

    min-width: 0;

    margin: 0 !important;

    padding:
        4px
        2px;
}

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

    color:
        rgba(224, 184, 76, .93);

    font-size: .49rem;

    font-weight: 950;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.customer-rentals
.customer-rental-card__title {
    margin: 0;

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

    font-size:
        clamp(
            1.16rem,
            1.55vw,
            1.48rem
        );

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -.022em;

    color: #f4efe6;
}

.customer-rentals
.customer-rental-card__reference {
    max-width: 600px;

    margin:
        5px
        0
        0;

    overflow-wrap: anywhere;

    color:
        rgba(229, 221, 208, .31);

    font-size: .49rem;

    line-height: 1.45;
}


/* ==========================================================================
   STATUS PILLS
   ========================================================================== */

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

    display: inline-flex;

    align-items: center;

    gap: 5px;

    min-height: 26px;

    padding:
        5px
        9px;

    border-radius: 999px;

    font-size: .47rem;

    font-weight: 950;

    letter-spacing: .08em;

    text-transform: uppercase;

    white-space: nowrap;
}

.customer-rentals
.customer-rental-card
.status-pill::before {
    content: "";

    width: 5px;
    height: 5px;

    border-radius: 999px;

    background:
        currentColor;

    box-shadow:
        0
        0
        8px
        currentColor;
}


/* ==========================================================================
   PRIMARY PICKUP / RETURN METADATA
   ========================================================================== */

.customer-rentals
.customer-rental-card__content
> .customer-rental-meta {
    display: grid !important;

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

    gap: 8px !important;

    margin: 0 !important;
}

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

    padding:
        11px
        12px !important;

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

    border-radius: 10px;

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

.customer-rentals
.customer-rental-meta__label {
    display: block;

    margin-bottom: 4px;

    color:
        rgba(220, 211, 196, .35);

    font-size: .45rem;

    font-weight: 900;

    letter-spacing: .095em;

    text-transform: uppercase;
}

.customer-rentals
.customer-rental-meta__value {
    display: block;

    overflow-wrap: anywhere;

    color:
        rgba(245, 239, 229, .82);

    font-size: .61rem;

    font-weight: 750;

    line-height: 1.4;
}


/* ==========================================================================
   STATUS EXPLANATION
   ========================================================================== */

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

    padding:
        0
        2px;

    color:
        rgba(230, 223, 210, .43);

    font-size: .57rem;

    line-height: 1.5;
}


/* ==========================================================================
   SHARED INNER SECTIONS
   ========================================================================== */

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

    padding:
        16px !important;

    border:
        1px solid
        rgba(210, 169, 60, .12) !important;

    border-radius: 13px !important;

    background:
        linear-gradient(
            145deg,
            rgba(216, 176, 67, .030),
            rgba(255, 255, 255, .012)
        ) !important;

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

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

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

    font-size: 1.05rem;

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: -.018em;

    color: #eee9df;
}

.customer-rentals
.customer-rental-card
.booking-card__note {
    max-width: 100%;

    margin:
        8px
        0
        0 !important;

    color:
        rgba(228, 220, 206, .40);

    font-size: .55rem;

    line-height: 1.55;
}


/* ==========================================================================
   PICKUP PREPARATION — COMPACT READINESS DASHBOARD
   ========================================================================== */

.customer-rentals
.customer-rental-card
.staff-admin-permission-box:not(
    :has(.customer-rental-meta)
):not(
    :has(a[href*="cancellation"])
) {
    border-color:
        rgba(210, 172, 70, .15) !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(211, 171, 62, .045),
            transparent 35%
        ),
        rgba(255, 255, 255, .012) !important;
}


/*
 * Overrides the legacy inline grid safely.
 */

.customer-rentals
.customer-rental-card
.staff-admin-permission-box:not(
    :has(.customer-rental-meta)
):not(
    :has(a[href*="cancellation"])
)
> div[style*="display:grid"] {
    display: grid !important;

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

    gap: 7px !important;

    margin:
        12px
        0 !important;
}

.customer-rentals
.customer-rental-card
.staff-admin-permission-box
.notice {
    display: flex;

    align-items: center;

    min-height: 48px;

    margin: 0 !important;

    padding:
        10px
        11px !important;

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

    border-radius: 9px !important;

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

    color:
        rgba(243, 238, 228, .75) !important;

    box-shadow: none !important;
}

.customer-rentals
.customer-rental-card
.staff-admin-permission-box
.notice strong {
    font-size: .58rem;

    line-height: 1.35;
}


/* ==========================================================================
   CANCELLATION — HORIZONTAL ACTION STRIP
   ========================================================================== */

.customer-rentals
.customer-rental-card
.staff-admin-permission-box:has(
    a[href*="cancellation"]
) {
    display: grid !important;

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

    grid-template-areas:
        "title action"
        "copy  action";

    align-items: center;

    column-gap: 22px;

    row-gap: 2px;

    padding:
        14px
        16px !important;

    border-color:
        rgba(213, 174, 67, .10) !important;

    background:
        rgba(211, 171, 60, .020) !important;
}

.customer-rentals
.customer-rental-card
.staff-admin-permission-box:has(
    a[href*="cancellation"]
)
> h3 {
    grid-area: title;

    margin: 0;
}

.customer-rentals
.customer-rental-card
.staff-admin-permission-box:has(
    a[href*="cancellation"]
)
> p {
    grid-area: copy;

    margin-top: 5px !important;
}

.customer-rentals
.customer-rental-card
.staff-admin-permission-box:has(
    a[href*="cancellation"]
)
> a {
    grid-area: action;

    align-self: center;

    white-space: nowrap;
}


/* ==========================================================================
   RETURN BILLING — COMPACT FINANCIAL DOSSIER
   ========================================================================== */

.customer-rentals
.customer-rental-card
.staff-admin-permission-box:has(
    .customer-rental-meta
) {
    padding:
        17px !important;

    border-color:
        rgba(209, 170, 62, .16) !important;

    background:
        linear-gradient(
            145deg,
            rgba(211, 171, 65, .034),
            rgba(255, 255, 255, .012)
        ) !important;
}

.customer-rentals
.customer-rental-card
.staff-admin-permission-box:has(
    .customer-rental-meta
)
.customer-rental-meta {
    display: grid !important;

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

    gap: 7px !important;
}

.customer-rentals
.customer-rental-card
.staff-admin-permission-box:has(
    .customer-rental-meta
)
.customer-rental-meta__item {
    padding:
        10px
        11px !important;

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

.customer-rentals
.customer-rental-card
.staff-admin-permission-box:has(
    .customer-rental-meta
)
.notice {
    margin-top:
        10px !important;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

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

    padding:
        0
        13px;

    border-radius: 8px;

    font-size: .56rem;

    font-weight: 850;
}

.customer-rentals
.customer-rental-card
.button--secondary {
    border:
        1px solid
        rgba(213, 173, 65, .21);

    color: #ddc270;

    background:
        rgba(211, 171, 62, .035);
}


/* ==========================================================================
   COMPLETED / CANCELLED COMPACT CARDS
   ========================================================================== */

.customer-rentals
.customer-rental-card:not(
    :has(.staff-admin-permission-box)
) {
    padding-bottom:
        15px !important;
}


/* ==========================================================================
   PAGINATION
   ========================================================================== */

.customer-rentals
.pagination-actions {
    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 17px;
}


/* ==========================================================================
   LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1400px) {
    .customer-rentals
    .customer-rental-card {
        grid-template-columns:
            190px
            minmax(0, 1fr) !important;

        padding:
            19px !important;
    }

    .customer-rentals
    .customer-rental-card__media {
        min-height: 124px;
    }
}


/* ==========================================================================
   TABLET / SMALL DESKTOP
   ========================================================================== */

@media (max-width: 1050px) {
    .customer-rentals
    .customer-rental-card {
        grid-template-columns:
            150px
            minmax(0, 1fr) !important;

        gap:
            14px
            17px !important;
    }

    .customer-rentals
    .customer-rental-card__media {
        min-height: 108px;
    }

    .customer-rentals
    .customer-rental-card
    .staff-admin-permission-box:not(
        :has(.customer-rental-meta)
    ):not(
        :has(a[href*="cancellation"])
    )
    > div[style*="display:grid"] {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

    .customer-rentals
    .customer-rental-card
    .staff-admin-permission-box:has(
        .customer-rental-meta
    )
    .customer-rental-meta {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }
}


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

@media (max-width: 820px) {
    .customer-rentals
    .customer-rental-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

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

        padding:
            15px !important;
    }

    .customer-rentals
    .customer-rental-card__header {
        gap: 12px;
    }

    .customer-rentals
    .customer-rental-card__title {
        font-size: 1.12rem;
    }
}


/* ==========================================================================
   MOBILE LANDSCAPE / LARGE PHONE
   ========================================================================== */

@media (max-width: 680px) {
    .customer-rentals {
        gap: 16px;
    }

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

        gap:
            13px !important;

        padding:
            14px !important;

        border-radius: 15px !important;
    }

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

        width: 100%;
        max-width: none;

        min-height: 160px;
    }

    .customer-rentals
    .customer-rental-card__media
    .vehicle-media {
        min-height:
            160px !important;
    }

    .customer-rentals
    .customer-rental-card__media
    img {
        max-height:
            155px;
    }

    .customer-rentals
    .customer-rental-card__header {
        grid-column: 1 !important;
        grid-row: auto !important;

        padding:
            0
            1px;
    }

    .customer-rentals
    .customer-rental-card__content
    > .customer-rental-meta {
        grid-template-columns:
            1fr !important;
    }

    .customer-rentals
    .customer-rental-card
    .staff-admin-permission-box:has(
        a[href*="cancellation"]
    ) {
        grid-template-columns:
            1fr;

        grid-template-areas:
            "title"
            "copy"
            "action";

        gap: 8px;
    }

    .customer-rentals
    .customer-rental-card
    .staff-admin-permission-box:has(
        a[href*="cancellation"]
    )
    > a {
        justify-content: center;

        width: 100%;

        white-space: normal;

        text-align: center;
    }
}


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

@media (max-width: 520px) {
    .customer-rentals
    .customer-rental-summary {
        gap: 8px;
    }

    .customer-rentals
    .customer-rental-summary__item {
        min-height: 96px;

        padding:
            15px
            14px;
    }

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

        align-items: flex-start;

        gap: 9px;
    }

    .customer-rentals
    .customer-rental-card
    .status-pill {
        align-self: flex-start;
    }

    .customer-rentals
    .customer-rental-card
    .staff-admin-permission-box {
        padding:
            14px !important;
    }

    .customer-rentals
    .customer-rental-card
    .staff-admin-permission-box:not(
        :has(.customer-rental-meta)
    ):not(
        :has(a[href*="cancellation"])
    )
    > div[style*="display:grid"] {
        grid-template-columns:
            1fr !important;
    }

    .customer-rentals
    .customer-rental-card
    .staff-admin-permission-box:has(
        .customer-rental-meta
    )
    .customer-rental-meta {
        grid-template-columns:
            1fr !important;
    }

    .customer-rentals
    .customer-rental-card
    .notice {
        min-height: 44px;
    }

    .customer-rentals
    .customer-rental-card
    .button {
        width: 100%;

        justify-content: center;
    }
}


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

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

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

    .customer-rentals
    .customer-rental-card__media {
        min-height: 145px;
    }

    .customer-rentals
    .customer-rental-card__media
    .vehicle-media {
        min-height:
            145px !important;
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .customer-rentals
    .customer-rental-card,
    .customer-rentals
    .button {
        transition: none !important;
    }
}