/* For Rent pages on phones: same look as the For Sale pages.
   List page (body.rent-list): Filters button + Grid / List / Large view switch, 2-up compact cards.
   Car page (body.rent-detail): thin banner, photos first, price + contact bar, Read more. Laptops are not touched. */

@keyframes rent-flash-white { 0%, 100% { color: #fff; } 50% { color: #ffb8bb; } }

/* ---------- list page ---------- */
/* ---- Cars-style search card (laptops and phones) ---- */
.rent-fcard { display: block; margin: 0 0 22px; padding: 20px 22px; background: #fff; border: 1px solid #e3e0d8; border-radius: 16px; box-shadow: 0 14px 40px -28px rgba(0, 0, 0, .4); }
.rent-kicker { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 0 0 14px; font-family: monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-align: start; white-space: nowrap; color: #dd1a22; }
.rent-kicker:before { content: ""; width: 28px; height: 1px; background: #dd1a22; }
.rent-smart { display: flex; gap: 10px; margin: 0; }
.rent-smart .rent-in { position: relative; flex: 1; min-width: 0; }
.rent-smart .rent-in svg { position: absolute; top: 50%; inset-inline-start: 14px; width: 17px; height: 17px; margin-top: -8px; fill: none; stroke: #dd1a22; stroke-width: 1.8; stroke-linejoin: round; }
.rent-smart input { width: 100%; height: 52px; padding: 0 14px; padding-inline-start: 42px; border: 1px solid #d9d6cc; border-radius: 12px; background: #f6f4ee; color: #222; font-size: 15px; }
.rent-smart button { height: 52px; padding: 0 24px; border: 0; border-radius: 12px; background: #dd1a22; color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer; }
.rent-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 14px; }
.rent-chips span { font-family: monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #777; }
.rent-chips button { padding: 6px 12px; border: 1px solid #d9d6cc; border-radius: 999px; background: #faf8f3; color: #444; font-family: monospace; font-size: 12px; cursor: pointer; }
.rent-chips button:hover { border-color: #dd1a22; color: #dd1a22; }
.rent-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 16px; align-items: end; padding-top: 16px; border-top: 1px solid #e8e5dc; }
.rent-f { display: block; margin: 0; min-width: 0; }
.rent-f > span { display: block; margin: 0 0 6px; font-family: monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #777; }
.rent-f select, .rent-sort select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #d9d6cc; border-radius: 10px; background-color: #fff; color: #222; font-size: 14px; }
.rent-f select:disabled { color: #999; background-color: #f6f5f1; }
.rent-show { height: 44px; padding: 0 24px; border: 0; border-radius: 10px; background: #dd1a22; color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer; }
.rent-more-filters { display: block; margin: 12px 0 0; padding: 4px 0; background: none; border: 0; color: #dd1a22; font-weight: 700; font-size: 13px; cursor: pointer; }
.rent-more-filters[aria-expanded="true"]:after { content: " \2191"; }
.rent-more-filters[aria-expanded="false"]:after { content: " \2193"; }

.rent-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 0 0 16px; }
.rent-bar .rent-sort { width: 260px; max-width: 100%; }
.rent-bar .rent-switch { display: none; }
.rent-bar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* the old checkbox sidebar is replaced by the card, so the list uses the full width; the rest of the old toolbar
   (state, price slider, dealer, Search/Reset) stays under "More filters" */
body.rent-list .product-listing .col-lg-3 { display: none; }
body.rent-list .product-listing .col-lg-9 { flex: 0 0 100%; max-width: 100%; }
body.rent-list:not(.rent-filters-open) .sorting-options-main { display: none; }
body.rent-list .sorting-options-main > .row:first-of-type > .col-lg-4:nth-child(3) { display: none; }
body.rent-list .sorting-options-main .sorting-options > .col-lg-4:first-child { display: none; }
body.rent-list .listing-sidebar .widget { width: auto !important; margin-left: 0 !important; }

@media (max-width: 639px) {
    .rent-fcard { margin: 0 0 14px; padding: 16px; }
    .rent-kicker { font-size: clamp(8.5px, 2.6vw, 10.5px); letter-spacing: .08em; gap: 8px; }
    .rent-kicker:before { width: 22px; flex: 0 0 auto; }
    .rent-smart input, .rent-smart button { height: 48px; }
    .rent-smart button { padding: 0 16px; }
    .rent-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .rent-chips span, .rent-chips button { flex: 0 0 auto; }
    .rent-fgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .rent-show { grid-column: 1 / -1; width: 100%; height: 48px; margin-top: 2px; }
    .rent-more-filters { margin: 10px auto 0; padding: 6px 10px; }

    .rent-bar { justify-content: stretch; margin: 0 0 14px; }
    .rent-bar .rent-sort { flex: 1; width: auto; min-width: 0; }
    .rent-bar .rent-switch { display: flex; gap: 4px; }
    .rent-bar .rent-switch button {
        width: 44px; height: 44px; border-radius: 10px; border: 1px solid #d9d6cc; background: #fff; color: #555;
        display: grid; place-items: center; cursor: pointer; padding: 0;
    }
    .rent-bar .rent-switch button[aria-pressed="true"] { background: #dd1a22; border-color: #dd1a22; color: #fff; }
    body.rent-list .product-listing { padding-top: 16px; }

    /* cards */
    #response.rent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    #response.rent-list-view { display: grid; grid-template-columns: 1fr; gap: 10px; }
    #response.rent-grid > .row, #response.rent-list-view > .row { grid-column: 1 / -1; margin: 0; }
    #response.rent-grid .pagination-nav, #response.rent-list-view .pagination-nav { overflow-x: auto; }

    #response.rent-grid .car-grid, #response.rent-list-view .car-grid {
        position: relative; margin: 0; padding: 0; background: #fff; border: 1px solid #e3e4e7; border-radius: 12px; overflow: hidden;
    }
    #response.rent-grid .car-grid > .row, #response.rent-list-view .car-grid > .row { margin: 0; }
    #response.rent-grid .car-grid [class*="col-"], #response.rent-list-view .car-grid [class*="col-"] { padding: 0; }
    #response.rent-grid .car-item, #response.rent-list-view .car-item { margin: 0; padding: 0; background: #f2f3f5; border: 0; }
    #response.rent-grid .car-image, #response.rent-list-view .car-image { aspect-ratio: 4 / 3; overflow: hidden; background: #f2f3f5; }
    #response.rent-grid .car-image a, #response.rent-list-view .car-image a { display: block; height: 100%; }
    #response.rent-grid .car-image img, #response.rent-list-view .car-image img { width: 100%; height: 100%; object-fit: cover; }

    /* the details block: only price, title and place on the small cards; heart over the photo */
    #response.rent-grid .car-details, #response.rent-list-view .car-details { display: flex; flex-direction: column; padding: 10px; margin: 0; }
    #response.rent-grid .car-details > .row, #response.rent-list-view .car-details > .row { display: contents; }
    /* company line (store icon + name), like the seller line on the For Sale cards */
    #response.rent-grid .car-details > .row > .col-md-7, #response.rent-list-view .car-details > .row > .col-md-7 { display: block; order: 5; margin: 6px 0 0; padding: 0; }
    #response.rent-grid .car-details .col-md-7 .star, #response.rent-list-view .car-details .col-md-7 .star { display: none; }
    #response.rent-grid .car-details .entry-meta ul, #response.rent-list-view .car-details .entry-meta ul { margin: 0; padding: 0; list-style: none; }
    #response.rent-grid .car-details .entry-meta li, #response.rent-list-view .car-details .entry-meta li { margin: 0; padding: 0; }
    #response.rent-grid .car-details .entry-meta a, #response.rent-list-view .car-details .entry-meta a { display: block; font-size: 11px; color: #8a8d94; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline-end: 38px; }
    #response.rent-grid .car-details .entry-meta a i, #response.rent-list-view .car-details .entry-meta a i { color: #15803d; margin-inline-end: 4px; }
    #response.rent-grid .car-details > .row > .col-md-5, #response.rent-list-view .car-details > .row > .col-md-5 { display: contents; }
    #response.rent-grid .car-details .dropdown, #response.rent-list-view .car-details .dropdown { display: none; }
    #response.rent-grid .car-details .addtofav, #response.rent-list-view .car-details .addtofav {
        position: absolute; top: 6px; inset-inline-end: 6px; z-index: 2; width: 32px; height: 32px; margin: 0; padding: 0;
        display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    }
    #response.rent-list-view .car-details .addtofav { top: auto; bottom: 6px; }
    #response.rent-grid .car-details .addtofav.active, #response.rent-list-view .car-details .addtofav.active { background: #dd1a22; }
    #response.rent-grid .car-details .price, #response.rent-list-view .car-details .price { order: 1; margin: 0; }
    #response.rent-grid .car-details .price .new-price, #response.rent-list-view .car-details .price .new-price { font-size: 15px; font-weight: 700; }
    #response.rent-grid .car-details .car-title, #response.rent-list-view .car-details .car-title { order: 2; margin: 2px 0 0; padding: 0; }
    #response.rent-grid .car-details .car-title:after, #response.rent-list-view .car-details .car-title:after { display: none !important; content: none !important; }
    #response.rent-grid .car-details .car-title a, #response.rent-list-view .car-details .car-title a { font-size: 13px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    #response.rent-grid .car-details .car-list, #response.rent-list-view .car-details .car-list { order: 3; margin: 2px 0 0; }
    /* body style as the grey line under the name; the rest of the chips stay on the large card */
    #response.rent-grid .car-details .car-list ul, #response.rent-list-view .car-details .car-list ul { display: block; margin: 0; padding: 0; }
    #response.rent-grid .car-details .car-list li, #response.rent-list-view .car-details .car-list li { display: none; }
    #response.rent-grid .car-details .car-list li.rent-body, #response.rent-list-view .car-details .car-list li.rent-body { display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important; font-size: 11.5px !important; line-height: 1.3 !important; color: #6b6e76 !important; }
    #response.rent-grid .car-details .car-list li.rent-body .lbl, #response.rent-list-view .car-details .car-list li.rent-body .lbl { display: none; }
    /* call button: bottom corner of the small cards */
    .rent-call { display: none; }
    #response.rent-grid .car-grid .rent-call, #response.rent-list-view .car-grid .rent-call {
        display: grid; place-items: center; position: absolute; bottom: 8px; inset-inline-end: 8px; z-index: 3;
        width: 32px; height: 32px; border-radius: 50%; background: #dd1a22; color: #fff; text-decoration: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    }
    #response.rent-grid .car-grid .rent-call i, #response.rent-list-view .car-grid .rent-call i { font-size: 14px; color: #fff; margin: 0; }
    #response.rent-grid .car-details .stt1, #response.rent-list-view .car-details .stt1 { font-size: 11px; color: #666; margin: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* list view: photo on one side, text on the other */
    #response.rent-list-view .car-grid > .row { display: flex; flex-wrap: nowrap; }
    #response.rent-list-view .car-grid > .row > [class*="col-"]:first-child { flex: 0 0 42%; max-width: 42%; }
    #response.rent-list-view .car-grid > .row > [class*="col-"]:last-child { flex: 1 1 auto; max-width: 58%; }
    #response.rent-list-view .car-details { justify-content: center; height: 100%; }
    #response.rent-list-view .car-details .car-title a { -webkit-line-clamp: 2; font-size: 14px; }
    #response.rent-list-view .car-details .price .new-price { font-size: 16px; }

    /* large cards = the existing card, just tidied */
    #response.rent-big .car-grid { border: 1px solid #e3e4e7; border-radius: 12px; overflow: hidden; margin-bottom: 14px; padding: 0; }
    #response.rent-big .car-image img { width: 100%; }
    #response.rent-big .car-list li { font-size: 13px; padding: 2px 8px; }

    /* page selector */
    .price-search.col-md-2 { float: none !important; width: 100%; max-width: 100%; }
}

/* ---------- car page ---------- */
@media (max-width: 900px) {
    body.rent-detail section.inner-intro { height: auto !important; padding: 14px 0 !important; }
    body.rent-detail section.inner-intro .container,
    body.rent-detail section.inner-intro .intro-title { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; height: auto !important; }
    body.rent-detail section.inner-intro h1 { font-size: 22px !important; margin: 0 !important; }
    body.rent-detail section.inner-intro .slogan { display: none !important; }
    body.rent-detail .car-top { display: none !important; }

    body.rent-detail section.car-details { padding: 24px 0 100px !important; }
    /* order: back, name + price, photos, contact buttons, specs + description */
    body.rent-detail section.car-details > .container { display: flex; flex-direction: column; }
    body.rent-detail section.car-details > .container > .row:nth-child(1) { order: 1; margin: 0; }
    body.rent-detail section.car-details > .container > .row:nth-child(2) { order: 3; margin: 12px 0 0; }
    body.rent-detail section.car-details > .container > .row:nth-child(3) { order: 2; display: contents; }
    body.rent-detail section.car-details > .container > .row:nth-child(3) > .col-md-8 { order: 2; padding: 0; width: 100%; max-width: 100%; }
    body.rent-detail section.car-details > .container > .row:nth-child(3) > .col-md-4 { order: 4; padding: 0; width: 100%; max-width: 100%; margin-top: 16px; }

    body.rent-detail .go_back {
        display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 14px; border-radius: 8px;
        background: #dd1a22; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
        animation: rent-flash-white 1.4s ease-in-out infinite;
    }
    body.rent-detail .go_back i { color: inherit; }
    body.rent-detail .row:nth-child(1) h3 { font-size: 22px; margin: 6px 0 4px; }
    body.rent-detail .pricedetails { font-size: 22px; margin: 0 0 4px; }

    body.rent-detail section.car-details > .container > .row:nth-child(1) > [class*="col-"],
    body.rent-detail section.car-details > .container > .row:nth-child(2) > [class*="col-"] { padding-left: 0; padding-right: 0; }
    body.rent-detail .row:nth-child(1) .col-md-8 h3 { margin: 4px 0 2px; }
    body.rent-detail .car-details-sidebar { padding: 0; }
    body.rent-detail .details-nav ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
    body.rent-detail .details-nav li { flex: 1 1 0; margin: 0; }
    body.rent-detail .details-nav li:last-child { flex: 0 0 48px; }
    body.rent-detail .details-nav li a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 8px; font-size: 13px; line-height: 1.2; text-align: center; }
    body.rent-detail .details-nav li a i { margin: 0; padding: 0; }
    /* the gallery uses natural-width slides, which are wider than a phone: fit them to the screen */
    body.rent-detail .detail-big-car-gallery .slick-slide { width: min(calc(100vw - 30px), 720px); }
    body.rent-detail .detail-big-car-gallery .slick-slide img, body.rent-detail .detail-big-car-gallery > img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
    body.rent-detail .slider-for .slick-list { padding: 0 !important; }

    body.rent-detail .slider-slick { margin-bottom: 6px; }
    body.rent-detail .slider-nav { margin-top: 8px; }
    body.rent-detail .slider-nav img { max-height: 70px; object-fit: cover; }

    body.rent-detail .details-weight p.rent-clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
    body.rent-detail .rent-more { margin: 6px 0 0; padding: 6px 0; background: none; border: 0; color: #dd1a22; font-weight: 700; font-size: 14px; cursor: pointer; }

    .rent-sticky {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 10040; display: flex; align-items: center; gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(14, 14, 14, .96); border-top: 1px solid #333; color: #fff;
    }
    .rent-sticky .rent-sticky-price { flex: 1; min-width: 0; font-weight: 700; font-size: 17px; line-height: 1.1; }
    .rent-sticky .rent-sticky-price small { display: block; font-weight: 400; font-size: 10px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rent-sticky button { height: 44px; padding: 0 22px; border-radius: 10px; background: #dd1a22; border: 0; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
}
@media (min-width: 901px) { .rent-sticky { display: none; } }

/* ---- list cards on laptops: same look as the phone grid ---- */
@media (min-width: 640px) {
    #response.rent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    #response.rent-grid > .row { grid-column: 1 / -1; margin: 0; }
    #response.rent-grid .pagination-nav { overflow-x: auto; }
    #response.rent-grid .car-grid { position: relative; margin: 0; padding: 0; background: #fff; border: 1px solid #e3e4e7; border-radius: 12px; overflow: hidden; }
    #response.rent-grid .car-grid > .row { margin: 0; }
    #response.rent-grid .car-grid [class*="col-"] { padding: 0; }
    #response.rent-grid .car-item { margin: 0; padding: 0; background: #f2f3f5; border: 0; }
    #response.rent-grid .car-image { aspect-ratio: 4 / 3; overflow: hidden; background: #f2f3f5; }
    #response.rent-grid .car-image a { display: block; height: 100%; }
    #response.rent-grid .car-image img { width: 100%; height: 100%; object-fit: cover; }
    #response.rent-grid .car-details { display: flex; flex-direction: column; padding: 10px; margin: 0; }
    #response.rent-grid .car-details > .row { display: contents; }
    #response.rent-grid .car-details > .row > .col-md-7 { display: block; order: 5; margin: 6px 0 0; padding: 0; }
    #response.rent-grid .car-details .col-md-7 .star { display: none; }
    #response.rent-grid .car-details .entry-meta ul { margin: 0; padding: 0; list-style: none; }
    #response.rent-grid .car-details .entry-meta li { margin: 0; padding: 0; }
    #response.rent-grid .car-details .entry-meta a { display: block; font-size: 11px; color: #8a8d94; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline-end: 38px; }
    #response.rent-grid .car-details .entry-meta a i { color: #15803d; margin-inline-end: 4px; }
    #response.rent-grid .car-details > .row > .col-md-5 { display: contents; }
    #response.rent-grid .car-details .dropdown { display: none; }
    #response.rent-grid .car-details .addtofav { position: absolute; top: 6px; inset-inline-end: 6px; z-index: 2; width: 32px; height: 32px; margin: 0; padding: 0;
        display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
    #response.rent-grid .car-details .addtofav.active { background: #dd1a22; }
    #response.rent-grid .car-details .price { order: 1; margin: 0; }
    #response.rent-grid .car-details .price .new-price { font-size: 15px; font-weight: 700; }
    #response.rent-grid .car-details .car-title { order: 2; margin: 2px 0 0; padding: 0; }
    #response.rent-grid .car-details .car-title:after { display: none !important; content: none !important; }
    #response.rent-grid .car-details .car-title a { font-size: 13px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    #response.rent-grid .car-details .car-list { order: 3; margin: 2px 0 0; }
    #response.rent-grid .car-details .car-list ul { display: block; margin: 0; padding: 0; }
    #response.rent-grid .car-details .car-list li { display: none; }
    #response.rent-grid .car-details .car-list li.rent-body { display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important; font-size: 11.5px !important; line-height: 1.3 !important; color: #6b6e76 !important; }
    #response.rent-grid .car-details .car-list li.rent-body .lbl { display: none; }
    #response.rent-grid .car-grid .rent-call { display: grid; place-items: center; position: absolute; bottom: 8px; inset-inline-end: 8px; z-index: 3;
        width: 32px; height: 32px; border-radius: 50%; background: #dd1a22; color: #fff; text-decoration: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
    #response.rent-grid .car-grid .rent-call i { font-size: 14px; color: #fff; margin: 0; }
    #response.rent-grid .car-details .stt1 { font-size: 11px; color: #666; margin: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* the old page puts photo and text side by side from tablet width up; stack them like the phone card */
    #response.rent-grid .car-grid > .row { display: block; margin: 0; }
    #response.rent-grid .car-grid > .row > [class*="col-"] { flex: none; width: 100%; max-width: 100%; padding: 0; }
    /* laptop: three cards per row, a little bigger */
    #response.rent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    #response.rent-grid .car-grid { border-radius: 14px; transition: box-shadow .2s, transform .2s; }
    #response.rent-grid .car-grid:hover { box-shadow: 0 18px 34px -22px rgba(0, 0, 0, .45); transform: translateY(-2px); }
    #response.rent-grid .car-image { aspect-ratio: 16 / 10; }
    #response.rent-grid .car-details { padding: 16px; }
    #response.rent-grid .car-details .price .new-price { font-size: 18px; }
    #response.rent-grid .car-details .car-title a { font-size: 15px; }
    #response.rent-grid .car-details .car-title:after, #response.rent-grid .car-details .car-title:before { display: none !important; content: none !important; }
    #response.rent-grid .car-details .car-list li.rent-body { font-size: 12.5px; }
    #response.rent-grid .car-details .stt1 { font-size: 12px; float: none !important; text-align: start !important; width: auto !important; }
    #response.rent-grid .car-details .entry-meta a { font-size: 12px; }
    #response.rent-grid .car-grid .rent-call { width: 36px; height: 36px; bottom: 12px; inset-inline-end: 12px; }
    #response.rent-grid .car-details .addtofav { width: 36px; height: 36px; }
}
@media (min-width: 640px) and (max-width: 1023px) { #response.rent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.per-day { font-size: 11px; font-weight: 400; color: #8a8d94; white-space: nowrap; }
#response.rent-big .per-day { font-size: 13px; }