/* ============================================================
   WPCR — Fleet Grid (shortcode [get-cars])
   Scoped a .wpcr-fleet-grid y .wpcr-vehicle-card-shortcode ([single-vehicle-card])
   — NO afecta el flujo de booking.
   ============================================================ */

.wpcr-fleet-grid .single-vehicle-card, .wpcr-vehicle-card-shortcode .single-vehicle-card{
    background:#fff !important;
    border:1px solid #e8ecf3 !important;
    border-radius:0 !important;
    padding:1rem 1rem 1.1rem !important;
    position:relative;
    overflow:hidden;
}
/* Sin hover en la tarjeta — solo la imagen del vehículo se anima */
/* Línea de acento superior (estática, sin animación) */
.wpcr-fleet-grid .single-vehicle-card::before, .wpcr-vehicle-card-shortcode .single-vehicle-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg,var(--wpcr-blue,#000faa),#3b82f6);
    z-index:2;
}

/* Badge de categoría */
.wpcr-fleet-grid .category-badge, .wpcr-vehicle-card-shortcode .category-badge, .wpcr-frontend-app.wpcr-react-app .vehicle-listing-row .badge.bg-blue-soft{
    background:linear-gradient(135deg,var(--wpcr-blue,#000faa),#3b82f6) !important;
    border-radius:0 !important;
    padding:.45em 1em !important;
    font-size:.72rem !important;
    letter-spacing:.08em !important;
    color:#fff !important;
    text-transform:uppercase;
    font-weight:700;
}
.wpcr-fleet-grid .single-vehicle-card.is-luxury .category-badge, .wpcr-vehicle-card-shortcode .single-vehicle-card.is-luxury .category-badge{
    background:linear-gradient(135deg,#0f172a,#1e293b) !important;
}

/* Imagen del vehículo */
.wpcr-fleet-grid .vehicle-image-wrapper, .wpcr-vehicle-card-shortcode .vehicle-image-wrapper{
    height:120px !important;
    background:radial-gradient(circle at 50% 40%,#f1f5ff,#f8fafc 70%);
    border-radius:0;
    margin-bottom:.6rem !important;
    padding:8px;
    position:relative;
}
.wpcr-fleet-grid .vehicle-main-img, .wpcr-vehicle-card-shortcode .vehicle-main-img{
    max-height:100%;
    object-fit:contain;
    transition:transform .5s ease;
}
.wpcr-fleet-grid .single-vehicle-card:hover .vehicle-main-img, .wpcr-vehicle-card-shortcode .single-vehicle-card:hover .vehicle-main-img{
    transform:scale(1.06) !important;
}
.wpcr-fleet-grid .vehicle-main-img.grayscale-1, .wpcr-vehicle-card-shortcode .vehicle-main-img.grayscale-1{filter:grayscale(1) !important;opacity:.6;}

/* Título + rating */
.wpcr-fleet-grid .vehicle-title, .wpcr-vehicle-card-shortcode .vehicle-title{
    font-size:1rem !important;
    min-height:2.5rem;
    line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wpcr-fleet-grid .vehicle-rating, .wpcr-vehicle-card-shortcode .vehicle-rating{
    background:#fff7e6;border-radius:0;padding:.3rem .6rem;gap:4px;
}
.wpcr-fleet-grid .vehicle-rating i, .wpcr-vehicle-card-shortcode .vehicle-rating i{color:#f59e0b !important;font-size:.7rem;}
.wpcr-fleet-grid .vehicle-rating span, .wpcr-vehicle-card-shortcode .vehicle-rating span{color:#b45309 !important;font-size:.72rem;font-weight:800;}

/* Iconos de características */
.wpcr-fleet-grid .vehicle-features-grid, .wpcr-vehicle-card-shortcode .vehicle-features-grid, .wpcr-frontend-app.wpcr-react-app .vehicle-listing-row .vehicle-features-grid{
    display:flex;
    justify-content:space-between;
    width:100%;
    margin-top:.45rem !important;
    margin-bottom:.6rem !important;
    padding:0 !important;
}
/* feature-item: el build solo lo estiliza bajo .single-vehicle-card (fleet);
   el booking (.vehicle-listing-row) necesita la MISMA regla para verse igual */
.wpcr-fleet-grid .vehicle-features-grid .feature-item, .wpcr-vehicle-card-shortcode .vehicle-features-grid .feature-item, .wpcr-frontend-app.wpcr-react-app .vehicle-listing-row .vehicle-features-grid .feature-item{
    align-items:center;
    display:flex;
    flex-direction:column;
    gap:3px;
    width:20%;
}
.wpcr-fleet-grid .vehicle-features-grid .feature-item .feature-icon-circle, .wpcr-vehicle-card-shortcode .vehicle-features-grid .feature-item .feature-icon-circle, .wpcr-frontend-app.wpcr-react-app .vehicle-listing-row .vehicle-features-grid .feature-item .feature-icon-circle{
    background:#eef2ff !important;
    color:var(--wpcr-blue,#000faa) !important;
    height:34px !important;
    width:34px !important;
    border:1px solid rgba(0,15,170,.08) !important;
    font-size:.8rem !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    transition:transform .3s ease !important;
}
.wpcr-fleet-grid .vehicle-features-grid .feature-item:hover .feature-icon-circle, .wpcr-vehicle-card-shortcode .vehicle-features-grid .feature-item:hover .feature-icon-circle, .wpcr-frontend-app.wpcr-react-app .vehicle-listing-row .vehicle-features-grid .feature-item:hover .feature-icon-circle{
    transform:rotate(10deg) scale(1.1);
}
.wpcr-fleet-grid .vehicle-features-grid .feature-value, .wpcr-vehicle-card-shortcode .vehicle-features-grid .feature-value, .wpcr-frontend-app.wpcr-react-app .vehicle-listing-row .vehicle-features-grid .feature-value{
    font-size:.68rem !important;
    color:#64748b !important;
    font-weight:700;
    text-transform:capitalize;
}

/* Precio */
.wpcr-fleet-grid .text-center.mt-4.mb-3, .wpcr-vehicle-card-shortcode .text-center.mt-4.mb-3{margin-top:.45rem !important;margin-bottom:.55rem !important;}
.wpcr-fleet-grid .vehicle-price, .wpcr-vehicle-card-shortcode .vehicle-price{
    font-size:1.35rem !important;
    letter-spacing:-.02em;
    display:inline-flex;align-items:baseline;gap:2px;
    color:var(--wpcr-blue,#000faa);
}
.wpcr-fleet-grid .vehicle-price .currency-symbol, .wpcr-vehicle-card-shortcode .vehicle-price .currency-symbol{
    font-size:.65em !important;
    opacity:1 !important;
    color:var(--wpcr-blue,#000faa) !important;
    font-weight:700 !important;
}
.wpcr-fleet-grid .vehicle-price .wpcr-price-amount, .wpcr-vehicle-card-shortcode .vehicle-price .wpcr-price-amount{
    font-weight:800;
}
.wpcr-fleet-grid .extra-small, .wpcr-vehicle-card-shortcode .extra-small{
    display:inline-block;
    background:transparent !important;color:#64748b !important;
    padding:0;
    font-size:.8rem !important;font-weight:600 !important;
    letter-spacing:.01em;
    text-transform:none;
}
.wpcr-fleet-grid .wpcr-days-number, .wpcr-vehicle-card-shortcode .wpcr-days-number{
    font-size:1.15rem;
    font-weight:800;
    color:#64748b;
    margin-right:2px;
}

/* Botón */
.wpcr-fleet-grid .btn-rent-now, .wpcr-vehicle-card-shortcode .btn-rent-now{
    background:linear-gradient(135deg,#22be22,#1da81d) !important;
    border-radius:0 !important;
    font-size:.75rem !important;
    padding:10px !important;
    letter-spacing:.08em;
    transition:all .3s ease !important;
}
.wpcr-fleet-grid .btn-rent-now:hover, .wpcr-vehicle-card-shortcode .btn-rent-now:hover{
    transform:translateY(-2px) !important;
    filter:brightness(1.05);
}
.wpcr-fleet-grid .btn-rent-now:disabled, .wpcr-vehicle-card-shortcode .btn-rent-now:disabled{
    background:#cbd5e1 !important;
    box-shadow:none !important;
}

/* Sold out — esquina inferior derecha de la imagen */
.wpcr-fleet-grid .badge.bg-danger, .wpcr-vehicle-card-shortcode .badge.bg-danger{
    border-radius:0 !important;
    font-size:.65rem !important;
    padding:.45em .9em !important;
}
.wpcr-fleet-grid .wpcr-soldout-badge, .wpcr-vehicle-card-shortcode .wpcr-soldout-badge{
    position:absolute;
    bottom:8px;
    right:8px;
    z-index:3;
    color:#fff !important;
}

/* Variante Luxury */
.wpcr-fleet-grid .single-vehicle-card.is-luxury, .wpcr-vehicle-card-shortcode .single-vehicle-card.is-luxury{
    background:linear-gradient(160deg,#0f172a,#1e293b) !important;
    border:none !important;
}
.wpcr-fleet-grid .single-vehicle-card.is-luxury .vehicle-title, .wpcr-vehicle-card-shortcode .single-vehicle-card.is-luxury .vehicle-title{color:#fff !important;}
.wpcr-fleet-grid .single-vehicle-card.is-luxury .vehicle-price, .wpcr-vehicle-card-shortcode .single-vehicle-card.is-luxury .vehicle-price{color:#fff !important;}
.wpcr-fleet-grid .single-vehicle-card.is-luxury .vehicle-price .currency-symbol, .wpcr-vehicle-card-shortcode .single-vehicle-card.is-luxury .vehicle-price .currency-symbol{color:#22be22 !important;}
.wpcr-fleet-grid .single-vehicle-card.is-luxury .feature-icon-circle, .wpcr-vehicle-card-shortcode .single-vehicle-card.is-luxury .feature-icon-circle{background:rgba(255,255,255,.08) !important;color:#e2e8f0 !important;border-color:rgba(255,255,255,.12) !important;}
.wpcr-fleet-grid .single-vehicle-card.is-luxury .feature-value, .wpcr-vehicle-card-shortcode .single-vehicle-card.is-luxury .feature-value{color:#94a3b8 !important;}
.wpcr-fleet-grid .single-vehicle-card.is-luxury .vehicle-image-wrapper, .wpcr-vehicle-card-shortcode .single-vehicle-card.is-luxury .vehicle-image-wrapper{background:rgba(255,255,255,.04);}

/* Responsive */
@media (max-width:575.98px){
    .wpcr-fleet-grid .vehicle-image-wrapper, .wpcr-vehicle-card-shortcode .vehicle-image-wrapper{height:110px !important;}
}

/* ============================================================
   Header de flota (banner degradado verde → azul, 100% ancho)
   ============================================================ */
/* El header es hermano del grid container (full width del widget) */
/* El e-con Elementor que contiene el shortcode tiene padding-inline de 50px
   (post-325.css), lo que deja el widget ~100px más angosto que el viewport →
   el truco 100vw quedaba recortado (margin-left:-46px). Neutralizamos el
   padding inline para que el widget (y el header) ocupen el ancho completo. */
/* El e-con Elementor que contiene el shortcode tiene padding-inline de 50px
   (post-325.css) → el widget queda ~100px más angosto que el viewport.
   Elementor aplica el padding vía cadena de variables:
   padding-inline-start: var(--bc-padding-inline-start, var(--padding-inline-start))
   donde --bc-padding-inline-start: var(--padding-left).
   Hay que anular TODAS las vías (vars + propiedad directa). */
.e-con:has(.wpcr-fleet-header),
.e-con:has(> .elementor-widget > .elementor-widget-container > .elementor-shortcode > .wpcr-fleet-header){
    --padding-inline-start: 0px !important;
    --padding-inline-end: 0px !important;
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    --bc-padding-inline-start: 0px !important;
    --bc-padding-inline-end: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Forzar ancho completo en la cadena widget → shortcode → header */
.elementor-element:has(.wpcr-fleet-header),
.elementor-widget-container:has(.wpcr-fleet-header),
.elementor-shortcode:has(.wpcr-fleet-header){
    width:100% !important;
}
/* Páginas de TIPO (sedan, suv, ...): el shortcode vive dentro de un
   .e-con-boxed cuyo .e-con-inner tiene max-width (1290px aquí) → el header
   queda centrado con márgenes. Sin ese tope, el 100vw + margen negativo
   del header cubre todo el ancho (igual que en la página de flota). */
.e-con-inner:has(.wpcr-fleet-header){
    max-width:none !important;
}
/* El tema Hello Elementor añade 10px de padding inline a .site-main →
   remanente que impide el 100% del viewport. Neutralizar solo en las
   páginas de flota que renderizan el header. */
.site-main:has(.wpcr-fleet-header),
.page-content:has(.wpcr-fleet-header){
    padding-inline: 0 !important;
}
.wpcr-fleet-header{
    width:100%;
    margin:0px 0 2.2rem 0px;
    max-width:none;
    /* Imagen de fondo + degradado actual como filtro (capa superior) */
    background:
        linear-gradient(120deg, rgba(24,112,23,.8) 0%, rgba(11,90,90,.8) 45%, rgba(0,15,170,.8) 100%),
        url('../../images/exhaust-pipe-of-a-luxury-car.jpg') center/cover no-repeat;
    padding:2.2rem 2rem;
    border-radius:0;
    color:#fff;
    position:relative;
    overflow:hidden;
    box-sizing:border-box;
    text-align:center;
}
/* Página principal de la flota (USA FLEET / MEXICO FLEET): ancho completo,
   sin margen negativo — el header ocupa el 100% del contenedor */
.wpcr-fleet-header.is-fleet-page{
    width:100%;
    margin:0px 0 2.2rem 0px;
    max-width:none;
}
/* (eliminada: body overflow-x:hidden reservaba el gutter de la scrollbar
   vertical → encogía el contenido ~15px. El 120% ya no existe; sin overflow
   en body el header con width:100% toca el borde derecho real) */

/* El grid container: sin padding superior (el header da el espacio).
   ⚠️ Bootstrap 5.3.0 bug: la regla de navbar compiló como `.container` suelto
   → display:flex en TODOS los .container → el .row (márgenes de gutter
   negativos) se descentra como flex-item. Restaurar bloque + centrado.
   Ancho 100% alineado con el header. */
.wpcr-fleet-grid{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-top:0 !important;
    padding-bottom:2rem !important;
}
/* Padding lateral de 40px en la fila de tarjetas */
.wpcr-fleet-row{
    padding-left:40px !important;
    padding-right:40px !important;
}
/* brillo sutil decorativo */
.wpcr-fleet-header::after{
    content:"";position:absolute;top:-60%;right:-10%;width:45%;height:220%;
    background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);
    pointer-events:none;
}
.wpcr-fleet-header-title{
    color:#fff !important;
    font-size:3.25rem !important;
    font-weight:800 !important;
    letter-spacing:.06em;
    line-height:1.15;
    margin:0 0 .8rem !important;
    text-transform:uppercase;
    position:relative;z-index:1;
}
.wpcr-fleet-header-links{
    display:flex;flex-wrap:wrap;gap:.5rem;
    justify-content:center;
    position:relative;z-index:1;
}
.wpcr-fleet-header-link{
    background:#1A1A1AAB;
    border:1px solid transparent;
    border-bottom:1px solid #fff;
    color:#fff !important;
    font-size:.75rem !important;
    font-weight:700 !important;
    letter-spacing:.05em;
    padding:.42rem .95rem;
    text-decoration:none !important;
    text-transform:uppercase;
    transition:background .25s ease, border-color .25s ease;
    border-radius:0;
}
.wpcr-fleet-header-link:hover{
    background:rgba(26,26,26,.9);
    border-color:transparent;
    border-bottom-color:#fff;
}
.wpcr-fleet-header-link.is-active{
    background:#fff;
    color:var(--wpcr-blue,#000faa) !important;
    border:1px solid transparent;
    border-bottom:1px solid var(--wpcr-blue,#000faa) !important;
    font-weight:800 !important;
}
@media (max-width:575.98px){
    .wpcr-fleet-header{padding:1.5rem 1.25rem;}
    .wpcr-fleet-header-title{font-size:1.5rem !important;}
    .wpcr-fleet-header-link{font-size:.68rem !important;padding:.35rem .75rem;}
}

/* rent-a-car: card del vehículo y buscador (Select Dates) con el mismo alto */
.wpcr-booking-container .row > .col-lg-3 > .card{
    height:100% !important;
}
.wpcr-booking-container .row > .col-lg-9 > .vehicle-list{
    height:100% !important;
    display:flex;
    flex-direction:column;
}
.wpcr-booking-container .vehicle-list .vehicle-listing-row{
    flex:1 1 auto !important;
    margin-bottom:0 !important;
}

/* rent-a-car: buscador + tarjeta al 80% del ancho, centrados */
#wpcr-rent-a-car-root .wpcr-booking-container{
    max-width:80% !important;
    margin-inline:auto !important;
}

/* rent-a-car: quitar el fondo gris del container (build daba #f8fafc) */
#wpcr-rent-a-car-root .wpcr-booking-container{
    background-color:transparent !important;
}