/**
 * Adventures – Página de resultados de búsqueda VikRentCar.
 *
 * 1) Grid de vehículos (.vrc-search-results-block > .car_result): foto
 *    grande, nombre/modelo, precio por día y total del alquiler (ya
 *    calculado por VikRentCar según los días elegidos) uno al lado del otro.
 * 2) Barra de pasos (.vrc-step).
 * 3) Cajas de Recogida/Devolución (.vrc-itinerary-pickup / -dropoff).
 * 4) Filtros de características (.vrc-searchfilter-characteristics-list).
 * 5) Página "Sumario del Pedido" (.vrc-oconfirm-maincnt): sin cupón, con
 *    la tabla de precio + datos del conductor en columna junto al auto,
 *    y logos de tarjeta junto a "Método de Pago".
 * 6) Cuadro de búsqueda (.vrcdivsearch): lugares, fechas/horas y botón.
 * 7) Ficha del vehículo (view=cardetails): foto/info/precio, selector de mes
 *    + referencia de colores, calendarios de disponibilidad, y el buscador
 *    (reutiliza el estilo de la sección 6).
 *
 * Importante: la sección 1 va acotada dentro de ".vrc-search-results-block",
 * porque VikRentCar reutiliza clases como .vrclistcarname, .vrc-car-price,
 * .vrc-car-lastblock, etc. en otras pantallas (p. ej. el resumen del auto
 * en "Opciones"/vrc-booking-steps). Sin ese scope, estas reglas con
 * !important rompen esas otras vistas. Las secciones 2-4 usan clases
 * (vrc-step, vrc-itinerary-*, vrc-searchfilter-*) exclusivas de esta
 * pantalla, así que no necesitan ese mismo scope.
 *
 * Se encola solo en páginas VikRentCar (ver adventures_vrc_booking_steps_assets en functions.php).
 */

/* Mismo color de marca que vrc-booking-steps.css (declarado en ambos archivos
   por si alguno se enqueue sin el otro). */
:root {
    --adv-orange: #f39200;
    --adv-orange-rgb: 243, 146, 0;
    --adv-orange-light: #ffad33;
    --adv-orange-dark: #c27400;

    /* Azul de marca, para el fondo degradado de la foto del auto (ver
       TARJETA DE VEHÍCULO más abajo). */
    --adv-blue: #1c4376;
    --adv-blue-rgb: 28, 67, 118;
    --adv-blue-light: #2f6bb3;
    --adv-blue-dark: #122d52;
}

/* 3 columnas fijas (antes se ajustaba solo según el ancho, dando 4+ en
   pantallas grandes); con 3 cada tarjeta queda más ancha, así que los autos
   se ven más grandes. */
.vrc-search-results-block {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 22px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

@media (max-width: 900px) {
    .vrc-search-results-block {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Los separadores de la lista original ya no hacen falta, el gap del grid los reemplaza */
.vrc-search-results-block .car_separator {
    display: none !important;
}

/* =========================================================
   "NUESTRA FLOTA": panel de filtros a la izquierda del
   listado (categoría/marca/precio/pasajeros). El HTML lo
   arma vrc-search-grid.js; acá solo el layout y estilo.
   ========================================================= */
.adv-flota-layout {
    display: flex !important;
    align-items: flex-start !important;
    gap: 28px !important;
    width: 100% !important;
}

.adv-flota-layout .vrc-search-results-block {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    grid-template-columns: repeat(2, 1fr) !important;
}

@media (max-width: 700px) {
    .adv-flota-layout .vrc-search-results-block {
        grid-template-columns: 1fr !important;
    }
}

.adv-flota-filters {
    flex: 0 0 260px !important;
    width: 260px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 20px !important;
    position: sticky !important;
    /* #headt-part (header fijo del sitio) mide 142.5px; sin este
       margen el panel se pegaba a top:0 y quedaba tapado detrás. */
    top: 162px !important;
    max-height: calc(100vh - 182px) !important;
    overflow-y: auto !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.adv-flota-filters h4 {
    margin: 0 0 16px !important;
    color: #1c4376 !important;
    font-size: 21px !important;
    font-weight: 800 !important;
}

.adv-filter-group {
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #eef0f3 !important;
}

.adv-filter-group:last-of-type {
    border-bottom: none !important;
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
}

.adv-filter-group h5 {
    margin: 0 !important;
    color: #1e293b !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

/* Cada grupo arranca contraído (solo el título), para que el panel no
   se vea con demasiado texto de entrada; se abre al hacer clic en el
   título. */
.adv-filter-group-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    user-select: none !important;
}

.adv-filter-arrow {
    color: #f39200 !important;
    font-size: 13px !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
}

.adv-filter-group-open .adv-filter-arrow {
    transform: rotate(180deg) !important;
}

.adv-filter-group-content {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease !important;
}

.adv-filter-group-open .adv-filter-group-content {
    max-height: 600px !important;
    opacity: 1 !important;
    margin-top: 12px !important;
}

.adv-filter-check {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    font-size: 15px !important;
    color: #333333 !important;
    cursor: pointer !important;
}

.adv-filter-check input {
    accent-color: #f39200 !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

.adv-filter-precio {
    width: 100% !important;
    accent-color: #f39200 !important;
}

.adv-filter-precio-val {
    margin-top: 6px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1c4376 !important;
}

.adv-filter-clear {
    width: 100% !important;
    background: transparent !important;
    border: 2px solid #1c4376 !important;
    color: #1c4376 !important;
    font-weight: 700 !important;
    padding: 10px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.adv-filter-clear:hover {
    background: #1c4376 !important;
    color: #ffffff !important;
}

.adv-filter-empty {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    color: #64748b !important;
    font-size: 17px !important;
    padding: 40px 20px !important;
}

/* En mobile el panel se apila arriba del listado, ancho completo, sin
   quedar "pegado" (sticky) al hacer scroll. */
@media (max-width: 900px) {
    .adv-flota-layout {
        flex-direction: column !important;
    }

    .adv-flota-filters {
        flex-basis: auto !important;
        width: 100% !important;
        position: static !important;
    }
}

/* El link "Cambiar Fechas" ocupa toda la fila debajo de las tarjetas */
.vrc-search-results-block .goback {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    margin-top: 10px !important;
}

/* =========================================================
   TARJETA DE VEHÍCULO
   ========================================================= */
/* Sin height:100% acá a propósito: el grid ya estira cada tarjeta a la
   altura de su fila por su cuenta (align-items:stretch, default). Ese
   height:100% era redundante y, al ser un porcentaje contra una fila cuya
   altura depende del propio contenido (auto), en el celular (Chrome/Safari
   Android) se calculaba mal y la tarjeta -sobre todo la foto azul- se
   inflaba a ocupar casi toda la pantalla.
   flex-wrap:nowrap: el propio CSS del plugin VikRentCar
   (vikrentcar_styles.css, fuera del tema) le pone flex-wrap:wrap a
   .car_result. Con flex-direction:column, eso hace que el bloque de texto
   (.vrc-car-result-right) "salte" a una columna nueva -al lado, no
   debajo- en vez de apilarse bajo la foto, quedando fuera de la tarjeta y
   de la pantalla. Por eso no se veían los textos de cada vehículo. */
.vrc-search-results-block .car_result {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 24px rgba(0, 0, 0, 0.08) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease !important;
    box-sizing: border-box !important;
    float: none !important;
    position: relative !important;
    z-index: 1 !important;
}

.vrc-search-results-block .car_result:hover {
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1), 0 24px 48px rgba(0, 0, 0, 0.22) !important;
    transform: translateY(-10px) scale(1.04) !important;
    z-index: 2 !important;
}

/* Al pasar el mouse por una tarjeta, las demás se achican y opacan un poco
   para que la que está "al frente" se note más en relieve. */
.vrc-search-results-block:hover .car_result:not(:hover) {
    transform: scale(0.96) !important;
    opacity: 0.75 !important;
}

/* Foto grande arriba de la tarjeta, con el degradado azul de marca de fondo */
.vrc-search-results-block .car_result .vrc-car-result-left {
    width: 100% !important;
    float: none !important;
    background:
        radial-gradient(ellipse 85% 35% at 50% 85%, rgba(74, 138, 255, 0.85) 0%, rgba(41, 91, 199, 0.45) 40%, rgba(5, 10, 20, 0) 75%),
        linear-gradient(180deg, #04070d 0%, #081428 35%, #0f2347 70%, #030509 100%) !important;
    padding: 22px 18px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    position: relative !important;
}

/* Sombra ovalada bajo el auto, para que no quede "flotando" sobre el degradado */
.vrc-search-results-block .car_result .vrc-car-result-left::after {
    content: "" !important;
    position: absolute !important;
    bottom: 14px !important;
    left: 50% !important;
    width: 60% !important;
    height: 16px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 50% !important;
    filter: blur(8px) !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
}

.vrc-search-results-block .car_result .vrc-car-result-left img.imgresult {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 260px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    float: none !important;
}

/* Contenido debajo de la foto: se estira en columna para que el precio
   quede siempre pegado al fondo de la tarjeta, aunque el texto varíe */
.vrc-search-results-block .car_result .vrc-car-result-right,
.vrc-search-results-block .car_result .vrc-car-result-rightinner,
.vrc-search-results-block .car_result .vrc-car-result-rightinner-deep {
    width: 100% !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* min-height:0 de arriba deja que esta columna se achique por debajo de
   lo que su contenido necesita -pensado para desktop, donde varias
   tarjetas comparten fila/altura pareja-. En mobile (1 sola tarjeta por
   fila) eso mismo aplastaba el precio+botón, cortándolos por abajo
   -.car_result tiene overflow:hidden, así que quedaban invisibles en vez
   de desbordar-. Se vuelve a "auto" para que la tarjeta crezca lo que
   haga falta. */
@media (max-width: 768px) {
    .vrc-search-results-block .car_result .vrc-car-result-right,
    .vrc-search-results-block .car_result .vrc-car-result-rightinner,
    .vrc-search-results-block .car_result .vrc-car-result-rightinner-deep {
        min-height: auto !important;
    }
}

.vrc-search-results-block .car_result .vrc-car-result-inner {
    padding: 14px 16px 0 16px !important;
    box-sizing: border-box !important;
    min-height: auto !important;
}

.vrc-search-results-block .car_result .vrclistcarname {
    display: block !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    line-height: 1.25 !important;
}

.vrc-search-results-block .car_result .vrc-car-category {
    display: block !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    color: #94a3b8 !important;
    margin: 2px 0 10px 0 !important;
}

.vrc-search-results-block .car_result .vrc-car-result-description:empty {
    display: none !important;
}

.vrc-search-results-block .car_result .vrc-car-result-characteristics {
    margin-bottom: 4px !important;
}

/* Sin overflow-x acá a propósito: recortaría el tooltip de cada
   característica (ver .vrc-expl más abajo), que ahora sale hacia arriba y
   necesita poder salirse de esta fila. Los íconos ya entran en una sola
   línea con este gap achicado, así que no hace falta scroll de respaldo. */
.vrc-search-results-block .car_result .vrccaratsdiv {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Tooltip de cada característica (::after = cuadro de texto, ::before =
   flechita): el plugin las pone debajo del ícono (ambas en "top: 24px");
   acá se invierten a "bottom: 24px" para que el cuadro quede arriba, más
   legible. Sin acotar a .vrc-search-results-block a propósito: .vrccaratsdiv
   se repite igual en la ficha del vehículo (cardetails) y en otras vistas. */
.vrccaratsdiv .vrc-expl::after {
    top: auto !important;
    bottom: 24px !important;
}

.vrccaratsdiv .vrc-expl::before {
    top: auto !important;
    bottom: 24px !important;
    border-color: rgba(51, 51, 51, 0.9) transparent transparent transparent !important;
}

.vrc-search-results-block .car_result .vrccarcarat {
    flex-shrink: 0 !important;
}

.vrc-search-results-block .car_result .vrccarcarat img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    opacity: 0.75 !important;
}

/* =========================================================
   PRECIOS + BOTÓN, SIEMPRE AL FONDO DE LA TARJETA
   ========================================================= */
.vrc-search-results-block .car_result .vrc-car-lastblock {
    margin-top: auto !important;
    padding: 14px 16px 16px 16px !important;
    border-top: 1px solid #eef0f3 !important;
    box-sizing: border-box !important;
}

.vrc-search-results-block .car_result .vrc-car-price {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
}

/* Precio por día: el dato principal */
.vrc-search-results-block .car_result .vrc-car-result-dailycost {
    display: flex !important;
    align-items: baseline !important;
    gap: 3px !important;
    order: 1 !important;
}

.vrc-search-results-block .car_result .vrc-car-result-dailycost .vrc_currency,
.vrc-search-results-block .car_result .vrc-car-result-dailycost .vrc_price {
    font-size: 25px !important;
    font-weight: 800 !important;
    color: var(--adv-orange, #f39200) !important;
}

.vrc-search-results-block .car_result .vrc-car-result-dailycost .vrc-perday-txt {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-left: 2px !important;
}

/* Total del alquiler para los días elegidos, al lado del precio por día */
.vrc-search-results-block .car_result .vrcsrowpricediv {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    order: 2 !important;
    text-align: right !important;
}

.vrc-search-results-block .car_result .vrcstartfrom {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

.vrc-search-results-block .car_result .car_cost {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

.vrc-search-results-block .car_result .vrc-car-bookingbtn form {
    width: 100% !important;
    margin: 0 !important;
}

/* El listado general ("Nuestra Flota", sin fechas) usa un <a> envuelto en
   .vrclistgoon en vez del <input type="submit"> de la vista con fechas. */
.vrc-search-results-block .car_result .vrc-car-bookingbtn .vrclistgoon {
    display: block !important;
    width: 100% !important;
}

/* Botón con relieve 3D: el "escalón" de abajo (box-shadow sólido) se achica
   y el botón baja (translateY) al hacer click, simulando que se hunde.
   Mismo estilo para las dos variantes de botón (input y <a>). */
.vrc-search-results-block .car_result .vrc-car-bookingbtn input.btn.booknow,
.vrc-search-results-block .car_result .vrc-car-bookingbtn a.btn {
    display: block !important;
    width: 100% !important;
    background: linear-gradient(180deg, var(--adv-orange-light, #ffad33) 0%, var(--adv-orange, #f39200) 60%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 9px !important;
    padding: 12px 0 !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 0 var(--adv-orange-dark, #c27400), 0 6px 14px rgba(var(--adv-orange-rgb, 243, 146, 0), 0.35) !important;
    transform: translateY(0) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

.vrc-search-results-block .car_result .vrc-car-bookingbtn input.btn.booknow:hover,
.vrc-search-results-block .car_result .vrc-car-bookingbtn a.btn:hover {
    background: linear-gradient(180deg, var(--adv-orange-light, #ffad33) 0%, var(--adv-orange-dark, #c27400) 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 0 var(--adv-orange-dark, #c27400), 0 10px 18px rgba(var(--adv-orange-rgb, 243, 146, 0), 0.4) !important;
}

.vrc-search-results-block .car_result .vrc-car-bookingbtn input.btn.booknow:active,
.vrc-search-results-block .car_result .vrc-car-bookingbtn a.btn:active {
    transform: translateY(3px) !important;
    box-shadow: 0 1px 0 var(--adv-orange-dark, #c27400), 0 2px 8px rgba(var(--adv-orange-rgb, 243, 146, 0), 0.3) !important;
}

/* El botón del widget "Nuestra Flota" (mod_vikrentcar_cars, home) se estiliza
   desde style.css, no desde acá: este archivo solo se carga en páginas de
   VikRentCar, y ese widget aparece en la portada. */

@media (max-width: 480px) {
    .vrc-search-results-block {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   BARRA DE PASOS (Fechas / Vehículos / Opciones / Reserva)
   =========================================================
   La dejamos de lado por completo (varias rondas peleando por
   especificidad contra el CSS del plugin sin resultado consistente).
   Ya no se reconstruye ni se toca: simplemente se oculta del todo, sin
   depender de que el JS haya corrido o no. */

.vrcstepsbarcont {
    display: none !important;
}

/* =========================================================
   RECOGIDA / DEVOLUCIÓN
   ========================================================= */

.vrc-itinerary-summary,
.vrc-itinerary-confirmation {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    margin-bottom: 24px !important;
}

/* Caja de Recogida/Devolución (resultados de búsqueda): sin el contorno
   gris nativo, con esquinas redondeadas y una sombra azul marcada -en vez
   de un borde plano- para que se vea "en 3D", como flotando. */
.vrc-itinerary-summary {
    border: none !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    padding: 22px 26px !important;
    box-shadow: 0 16px 32px rgba(28, 67, 118, 0.28), 0 4px 10px rgba(28, 67, 118, 0.14) !important;
}

.vrc-itinerary-pickup,
.vrc-itinerary-dropoff {
    flex: 1 1 300px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.vrc-itinerary-pickup h4,
.vrc-itinerary-dropoff h4 {
    margin: 0 0 14px 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #94a3b8 !important;
}

.vrc-itinerary-pickup-location,
.vrc-itinerary-dropoff-location {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.vrc-itinerary-pickup-location i,
.vrc-itinerary-dropoff-location i {
    color: var(--adv-orange, #f39200) !important;
    font-size: 17px !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
}

.vrc-itinerary-pickup-locname,
.vrc-itinerary-dropoff-locname {
    display: block !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    font-size: 17px !important;
}

.vrc-itinerary-pickup-locaddr,
.vrc-itinerary-dropoff-locaddr {
    display: block !important;
    color: #94a3b8 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
}

.vrc-itinerary-pickup-date,
.vrc-itinerary-dropoff-date {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 14px !important;
    border-top: 1px solid #f1f5f9 !important;
    font-size: 16px !important;
}

.vrc-itinerary-pickup-date i,
.vrc-itinerary-dropoff-date i {
    color: var(--adv-orange, #f39200) !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.vrc-itinerary-pickup-date-day,
.vrc-itinerary-dropoff-date-day {
    font-weight: 700 !important;
    color: #1e293b !important;
}

.vrc-itinerary-pickup-date-time,
.vrc-itinerary-dropoff-date-time {
    color: #64748b !important;
}

.vrc-itinerary-duration {
    margin-left: auto !important;
    background: #fff4ea !important;
    color: var(--adv-orange, #f39200) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
}

/* =========================================================
   FILTROS DE CARACTERÍSTICAS (checkboxes)
   ========================================================= */

.vrc-searchfilter-characteristics-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.vrc-searchfilter-characteristic {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
    box-sizing: border-box !important;
}

.vrc-searchfilter-characteristic:hover {
    border-color: var(--adv-orange, #f39200) !important;
    background: #fff8f0 !important;
}

.vrc-searchfilter-characteristic:has(input:checked) {
    border-color: var(--adv-orange, #f39200) !important;
    background: #fff4ea !important;
}

.vrc-searchfilter-cinput input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--adv-orange, #f39200) !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.vrc-searchfilter-cicon img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    opacity: 0.8 !important;
}

.vrc-searchfilter-cname {
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    white-space: nowrap !important;
}

.vrc-searchfilter-cquantity {
    color: #94a3b8 !important;
    font-size: 15px !important;
}

/* Colapsado: solo se ven los primeros 6 filtros hasta que se despliega
   (clase .vrc-searchfilter-expanded agregada por vrc-search-grid.js) */
.vrc-searchfilter-characteristics-list .vrc-searchfilter-characteristic:nth-child(n + 7) {
    display: none !important;
}

.vrc-searchfilter-characteristics-list.vrc-searchfilter-expanded .vrc-searchfilter-characteristic:nth-child(n + 7) {
    display: flex !important;
}

.vrc-searchfilter-toggle {
    flex: 1 1 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: none !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    margin: 2px 0 0 0 !important;
    color: var(--adv-orange, #f39200) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.vrc-searchfilter-toggle:hover {
    background: #fff8f0 !important;
}

.vrc-searchfilter-toggle-arrow {
    display: inline-block !important;
    transition: transform 0.2s ease !important;
}

.vrc-searchfilter-toggle.is-open .vrc-searchfilter-toggle-arrow {
    transform: rotate(180deg) !important;
}

/* =========================================================
   PÁGINA "SUMARIO DEL PEDIDO" (oconfirm)
   =========================================================
   El JS (vrc-search-grid.js) hace 3 cosas acá:
   1) Quita el cuadro de cupón (.vrc-oconfirm-middlep) del DOM.
   2) Mueve la tabla de precio (.vrctable_divcnt) y el <form name="vrc">
      completo (datos del conductor + método de pago + botones) a ser
      hermanos dentro de .vrc-oconfirm-itinerary, para armar una columna
      izquierda (foto + fechas) y una derecha (precio + formulario).
   3) Agrega los logos de tarjeta junto al método de pago.
   Si por algo el JS no corre (deshabilitado, error), estas reglas de
   respaldo igual ocultan el cupón y dejan el resto en una sola columna,
   que es como estaba antes: no se rompe nada, solo no queda en 2 columnas. */

.vrc-oconfirm-middlep,
.vrc-coupon-outer {
    display: none !important;
}

.vrc-oconfirm-itinerary.adv-oconfirm-active {
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
}

.vrc-oconfirm-itinerary.adv-oconfirm-active .vrcinfocarcontainer {
    flex: 1 1 320px !important;
}

/* Foto del auto: recuadro con fondo suave. Por defecto queda en un
   tamaño mediano (más grande que un ícono, pero contraído) y se agranda
   más al pasar el mouse por toda la tarjeta, junto con Recogida/
   Devolución. */
.vrcinfocarcontainer div.vrc-summary-car-img.vrc-summary-car-img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 200px !important;
    max-height: 200px !important;
    min-height: 0 !important;
    background:
        radial-gradient(ellipse 85% 35% at 50% 85%, rgba(74, 138, 255, 0.85) 0%, rgba(41, 91, 199, 0.45) 40%, rgba(5, 10, 20, 0) 75%),
        linear-gradient(180deg, #04070d 0%, #081428 35%, #0f2347 70%, #030509 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px !important;
    margin: 0 0 16px 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transition: height 0.3s ease, max-height 0.3s ease !important;
}

.vrcinfocarcontainer:hover div.vrc-summary-car-img.vrc-summary-car-img {
    height: 340px !important;
    max-height: 340px !important;
}

.vrcinfocarcontainer div.vrc-summary-car-img.vrc-summary-car-img img {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* El plugin le pone su propio fondo gris a .vrcinfocarcontainer (el
   contenedor que envuelve las 3 cajas azules); se quita para que no se
   vea gris entre/detrás de ellas. */
.vrcinfocarcontainer {
    background: transparent !important;
    border: none !important;
}

/* Cuadro del título ("Alquiler ... por X Dias") y, cuando se despliega,
   Recogida/Devolución: mismo azul de marca que la foto y el método de
   pago, para que las 3 cajas de la columna izquierda se vean como un
   solo bloque. Textos/íconos en blanco para que contrasten con el azul. */
.vrcrentforlocs {
    background: #1c4376 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

.vrcrentforlocs,
.vrcrentforlocs h3,
.vrcrentforlocs h4,
.vrcrentforlocs span,
.vrcrentforlocs i {
    color: #ffffff !important;
}

/* Recogida/Devolución dentro de la tarjeta del auto: ocultas por defecto,
   se despliegan solo con el mouse encima (mismo hover que la foto). */
.vrcinfocarcontainer .vrc-itinerary-confirmation {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-bottom 0.3s ease !important;
}

.vrcinfocarcontainer:hover .vrc-itinerary-confirmation {
    max-height: 600px !important;
    opacity: 1 !important;
    margin-bottom: 24px !important;
}

/* Circulitos de la línea de tiempo (Recogida/Devolución): el plugin los
   pinta blancos con borde gris -se perdían sobre el fondo azul nuevo-,
   se pasan a color naranja de marca. */
.vrcinfocarcontainer .vrc-itinerary-pickup::before,
.vrcinfocarcontainer .vrc-itinerary-dropoff::after {
    background: #f39200 !important;
    border-color: #f39200 !important;
}

/* Toda la línea de tiempo (círculos + línea + texto) quedaba pegada al
   borde izquierdo de la caja; se le da aire moviéndola hacia la
   derecha -el círculo se mueve junto con el texto porque está
   posicionado de forma relativa a él-. */
.vrcinfocarcontainer .vrc-itinerary-confirmation {
    padding-left: 24px !important;
    box-sizing: border-box !important;
}

.vrc-oconfirm-itinerary.adv-oconfirm-active .adv-oconfirm-rightcol {
    flex: 1 1 380px !important;
    margin: 0 !important;
}

@media (max-width: 700px) {
    .vrc-oconfirm-itinerary.adv-oconfirm-active {
        flex-direction: column !important;
    }
}

/* Estilo de "tarjeta" parejo para todas las cajas de la columna derecha
   (antes solo Recogida/Devolución lo tenía; precio, datos del conductor y
   método de pago quedaban pegados al fondo, sin borde ni padding propio,
   por eso se veían descuadrados frente a las demás). */
.vrc-oconfirm-summary-container,
.vrccustomfields {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    margin: 0 0 20px 0 !important;
}

/* "Método de Pago" ahora vive dentro de la columna izquierda (ver
   vrc-search-grid.js), debajo de la foto/título del auto -antes era
   parte del <form> en la columna derecha-, con el mismo azul de marca
   que esas dos cajas de arriba para que las 3 se vean como un bloque. */
.vrcinfocarcontainer .vrc-oconfirm-paym-block {
    background: #1c4376 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    margin-top: 20px !important;
    width: 100% !important;
}

.vrcinfocarcontainer .vrc-oconfirm-paym-block .vrc-medium-header {
    color: #ffffff !important;
}

.vrc-oconfirm-footer {
    margin-top: 4px !important;
}

/* Logos de tarjeta junto a "Método de Pago" */
.adv-cardlogos {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 14px 0 0 0 !important;
    flex-wrap: wrap !important;
}

.adv-cardlogo {
    width: 36px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    border-radius: 4px !important;
    box-shadow: 0 0 0 1px #e5e7eb !important;
}

/* =========================================================
   CUADRO DE BÚSQUEDA (.vrcdivsearch): lugares, fechas/horas y botón
   ========================================================= */

/* width:fit-content: ahora que las filas de adentro (lugares, fechas) ya
   no crecen a repartirse todo el ancho disponible, esta caja tampoco debe
   estirarse de más — si no, queda un hueco vacío a la derecha, antes del
   mapa. */
.vrcdivsearch {
    display: flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    gap: 20px !important;
    align-items: stretch !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.vrcdivsearch-inner {
    flex: 0 1 auto !important;
    min-width: 0 !important;
}

/* Regla nativa (sin !important, pero puede ganar igual según el orden de
   carga) pensada para cuando el botón "Reservar" vivía en una fila
   estirada por align-items:stretch: le ponía margin-top:auto para
   pegarlo abajo de esa fila. En cardetails ya no hay esa fila -el
   formulario va en columna-, así que ese margen quedaba empujando el
   botón (o el bloque que sigue) hacia abajo, con un hueco enorme arriba
   ocupando el "espacio libre" que auto absorbe. */
.vrcdivsearch .vrc-searchf-section-sbmt .vrcsfentrycont {
    margin-top: 0 !important;
}

.vrcdivsearch .vrcsfentrycont label,
.vrcdivsearch .vrcsfentrytime label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 6px !important;
    white-space: nowrap !important;
}

/* Lugar de Retiro / Lugar de Devolución */
.vrc-searchf-section-locations {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-bottom: 16px !important;
}

/* flex-grow:0: antes se estiraban a repartirse todo el ancho de la fila;
   ahora se quedan en su ancho de base (280px), sin crecer de más. */
.vrc-searchf-section-locations .vrcsfentrycont {
    flex: 0 1 280px !important;
}

.vrc-searchf-section-locations .vrcsfentryselect select {
    width: 100% !important;
    height: 38px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
    font-size: 16px !important;
    color: #1e293b !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

/* Fechas + horas */
.vrc-searchf-section-datetimes {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-bottom: 16px !important;
}

/* flex-grow:0 (igual que .vrc-searchf-section-locations): antes crecía a
   repartirse toda la fila, dejando un hueco enorme entre "Hora de Retiro"
   y "Fecha de Dev." */
.vrc-searchf-section-datetimes .vrcsfentrycont {
    flex: 0 1 260px !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 10px !important;
}

/* flex:0 0 auto + width:fit-content (no alcanza con flex solo, mismo caso
   que .vrcsfentrytime más abajo): el campo de fecha se ajusta a su propio
   contenido en vez de estirarse a lo que sobre de la fila. */
.vrcsfentrylabsel {
    flex: 0 0 auto !important;
    width: fit-content !important;
}

.vrcsfentrydate {
    display: flex !important;
    align-items: center !important;
    width: 130px !important;
    height: 38px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    cursor: pointer !important;
}

.vrcsfentrydate input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 16px !important;
    color: #1e293b !important;
    width: 100% !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.vrcsfentrydate .vrc-caltrigger {
    color: var(--adv-orange, #f39200) !important;
    font-size: 17px !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
}

/* La hora: antes ocupaba tanto como la fecha, ahora es un cuadrito
   compacto de ancho fijo, pegado al lado de la fecha. width:fit-content en
   los dos (acá y en .vrc-sf-time-container) es necesario: sin eso, el
   selector de hora se estiraba a todo el ancho disponible y le dejaba 0px
   al campo de fecha de al lado (por eso no se veía la fecha). */
.vrcsfentrytime {
    flex: 0 0 auto !important;
    width: fit-content !important;
}

.vrc-sf-time-container {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 40px !important;
    width: fit-content !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
}

/* <select> nativo de hora/minuto (limitado al horario del local), pero
   invisible y clickeable -tapado por .adv-time-display, un texto propio
   que no depende de si el navegador respeta appearance:none en un
   <select> (en algunos le dibuja flechitas del sistema encima, tapando
   el número). */
.adv-time-field {
    position: relative !important;
    display: inline-block !important;
    height: 100% !important;
}

.adv-time-select {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.adv-time-display {
    pointer-events: none !important;
    display: inline-block !important;
    font-size: 17px !important;
    color: #1e293b !important;
    text-align: center !important;
}

.vrc-sf-time-container .adv-time-field:has(.adv-time-select[name$="h"]) {
    width: 16px !important;
}

.vrc-sf-time-container .adv-time-field:has(.adv-time-select[name$="m"]) {
    width: 24px !important;
}

.adv-ampm {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-left: 2px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.vrc-sf-time-container {
    flex-wrap: nowrap !important;
    width: max-content !important;
}

.vrctimesep {
    color: #94a3b8 !important;
    font-weight: 700 !important;
}

/* --- Calendario emergente (jQuery UI datepicker) de los campos de fecha ---
   El tema por defecto de jQuery UI (bordes gruesos, degradados azules) se
   reemplaza acá por algo más sutil, acorde a la paleta del sitio. */
.ui-datepicker {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    padding: 12px !important;
    width: 260px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.ui-datepicker .ui-datepicker-header {
    background: none !important;
    border: none !important;
    padding: 0 0 10px 0 !important;
}

.ui-datepicker .ui-datepicker-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 0 !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
}

.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
    display: none !important;
}

.ui-datepicker .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-next::before {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #64748b !important;
}

.ui-datepicker .ui-datepicker-prev::before {
    content: "\2039" !important;
}

.ui-datepicker .ui-datepicker-next::before {
    content: "\203a" !important;
}

.ui-datepicker .ui-datepicker-prev.ui-state-disabled::before,
.ui-datepicker .ui-datepicker-next.ui-state-disabled::before {
    color: #e2e8f0 !important;
}

.ui-datepicker table.ui-datepicker-calendar {
    border-collapse: separate !important;
    border-spacing: 2px !important;
    margin: 0 !important;
}

.ui-datepicker th {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    padding: 4px 0 !important;
}

.ui-datepicker td {
    padding: 0 !important;
    border: none !important;
}

.ui-datepicker td .ui-state-default {
    display: block !important;
    text-align: center !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    border: none !important;
    border-radius: 8px !important;
    background: none !important;
    color: #334155 !important;
    font-size: 16px !important;
}

.ui-datepicker td .ui-state-default:hover {
    background: #fff4ea !important;
    color: var(--adv-orange-dark, #c27400) !important;
}

.ui-datepicker td.ui-datepicker-today .ui-state-default {
    background: #fff4ea !important;
    color: var(--adv-orange, #f39200) !important;
    font-weight: 700 !important;
}

.ui-datepicker td .ui-state-active {
    background: var(--adv-orange, #f39200) !important;
    color: #ffffff !important;
}

.ui-datepicker td.ui-state-disabled .ui-state-default,
.ui-datepicker td.ui-datepicker-unselectable .ui-state-default {
    color: #cbd5e1 !important;
}

/* Botón */
.vrc-searchf-section-sbmt {
    margin: 0 !important;
}

.vrc-searchf-section-sbmt input.vrcdetbooksubmit {
    width: auto !important;
    padding: 0 40px !important;
    height: 46px !important;
    background: var(--adv-orange, #f39200) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background 0.2s ease !important;
}

.vrc-searchf-section-sbmt input.vrcdetbooksubmit:hover {
    background: var(--adv-orange-dark, #c27400) !important;
}

/* El mapa ya no va al costado del formulario (dejaba un hueco enorme:
   .vrcdivsearch reservaba una columna de 160px para un botón que, al no
   estirarse más, quedaba solo/perdido en medio de mucho espacio vacío).
   Ahora .vrcdivsearch se apila en una sola columna -mismo criterio que ya
   usábamos en mobile-, con el botón como una franja horizontal completa
   debajo de los campos: una sola tarjeta prolija, sin huecos. */
.vrcdivsearch {
    flex-direction: column !important;
}

.vrclocationsbox {
    flex: 0 0 auto !important;
    width: 100% !important;
    /* Lleva al mismo mapa de Google roto (sin API key real, ver
       comentario junto a #vrcmapcanvas en styles.css) -se oculta el
       boton entero en vez de dejar un link a un error. */
    display: none !important;
}

.vrclocationsmapdiv {
    width: 100% !important;
}

.vrclocationsmapdiv a.vrcmodalframe {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    height: auto !important;
    width: 100% !important;
    background: #f6f7f9 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    color: #1e293b !important;
    text-align: center !important;
    transition: background 0.2s ease !important;
}

.vrclocationsmapdiv a.vrcmodalframe:hover {
    background: #eef0f3 !important;
}

.vrclocationsmapdiv a.vrcmodalframe i {
    font-size: 29px !important;
    color: var(--adv-orange, #f39200) !important;
}

.vrclocationsmapdiv a.vrcmodalframe span {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
}

@media (max-width: 700px) {
    .vrcdivsearch {
        flex-direction: column !important;
    }

    .vrc-searchf-section-datetimes .vrcsfentrycont {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .vrclocationsbox {
        flex: 1 1 auto !important;
    }

    .vrclocationsmapdiv a.vrcmodalframe {
        flex-direction: row !important;
        height: auto !important;
        padding: 12px !important;
    }
}

/* =========================================================
   7. FICHA DEL VEHÍCULO (view=cardetails)
   =========================================================
   Estructura (VikRentCar):
   .vrc-cdetails-cinfo        -> foto + nombre/categoría/características/precio
   .vrc-cardetails-legend     -> selector de mes + referencia de colores
   .vrc-avcals-container      -> calendarios de disponibilidad (2 meses)
   .vrc-cardetails-book-wrap  -> título + .vrcdivsearch (ya estilizado en la
                                  sección 6) + mapa de sucursales
   No lleva scope como la sección 1 porque estas clases (vrc-cdetails-*,
   vrc-cardetails-*, vrccal, vrclegend*) son exclusivas de esta pantalla. */

/* --- Layout general: la tarjeta del auto queda al lado del calendario,
   y el buscador abajo ocupando todo el ancho. Acotado con :has() a esta
   pantalla porque .wrap.plugin-container se reutiliza en otras vistas
   (p. ej. el grid de resultados). --- */
.wrap.plugin-container:has(.vrc-cdetails-cinfo) {
    display: grid !important;
    column-gap: 30px !important;
    row-gap: 4px !important;
    align-items: start !important;
}

/* Columnas fluidas (minmax), no un ancho fijo: el ancho normal de
   contenido del sitio (<main>) es de 1280px sin importar que tan ancha
   sea la ventana, y la tarjeta del auto + el calendario nunca caben ahi
   a un ancho fijo (940px+512px+30px = 1482px, mas que esos 1280px). Con
   minmax ambas columnas se van achicando juntas segun el espacio real
   disponible en cada pantalla -el calendario prioriza sus ~480-520px (lo
   que necesita su leyenda para no cortarse) y la tarjeta usa el resto-,
   sin necesitar romper el ancho normal de la pagina salvo en pantallas
   ya de por si angostas, donde se apila en 1 columna (ver @media abajo). */
@media (min-width: 1150px) {
    .wrap.plugin-container:has(.vrc-cdetails-cinfo) {
        grid-template-columns: minmax(500px, 1fr) minmax(480px, 520px) !important;
    }
}

/* La leyenda (fila 2) va casi pegada al calendario (fila 1): sin gap propio
   ahí, el aire que ya da el padding interno de .vrccaldivcont alcanza. */
.wrap.plugin-container:has(.vrc-cdetails-cinfo) .vrclegendediv {
    margin-top: -8px !important;
    /* La regla base de .vrclegendediv (mas abajo en este archivo) la
       fuerza a una sola fila sin envolver (width:max-content), pensada
       para cuando hay bastante ancho. En esta pantalla la columna del
       calendario puede quedar mas angosta que eso -sobre todo cerca del
       punto donde pasa de apilado a 2 columnas-, y la leyenda se salia de
       la pagina en vez de acomodarse. Se deja envolver aca sin depender
       de un ancho de pantalla puntual. Descendiente (sin ">"), no hijo
       directo: .vrclegendediv es nieto de .wrap.plugin-container en el
       DOM real -su padre (.vrc-cardetails-legend) tiene
       display:contents, que lo "aplana" solo visualmente, no en el
       arbol DOM que usa el combinador ">"-. */
    flex-wrap: wrap !important;
    white-space: normal !important;
    width: 100% !important;
}

/* Link "Atrás" -> listado de Flota, arriba de la tarjeta del auto. Fuera
   del grid a propósito (insertado antes de .wrap.plugin-container por
   JS), para no competir por fila/columna con la tarjeta del auto y el
   calendario. */
.vrc-cdetails-back {
    display: inline-block !important;
    margin: 0 0 14px !important;
    color: #1c4376 !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.vrc-cdetails-back:hover {
    color: #f39200 !important;
    transform: translateX(-4px) !important;
}

.vrc-cdetails-cinfo {
    grid-column: 1 !important;
    /* Abarca las 4 filas de la columna del calendario (calendario, leyenda,
       "mes siguiente", "mes anterior") para que cada una se ajuste a su
       propio contenido en vez de estirarse a la altura de esta tarjeta. */
    grid-row: 1 / 5 !important;
    justify-self: start !important;
}

/* .vrc-cardetails-legend envuelve el <form> del selector de mes y el
   .vrclegendediv (referencia de colores) juntos, pero van en lugares
   distintos: la referencia arriba, junto al auto, y el selector abajo del
   calendario. display:contents "abre" el envoltorio para poder ubicar cada
   hijo por separado en el grid. */
.vrc-cardetails-legend {
    display: contents !important;
}

/* Div vacío del plugin (gancho para su propio JS); con display:contents en
   el padre quedaría suelto como ítem de grid si no se saca así. */
#vrc-bookingpart-init {
    display: none !important;
}

/* Selector nativo de mes: oculto (se reemplaza por el botón "mes anterior"
   y el click en la tarjeta de atrás, agregados por JS), pero se deja en el
   DOM porque el JS lo sigue usando para saber qué mes pedir. */
.vrc-cardetails-legend form {
    display: none !important;
}

/* Calendario primero (arranca a la misma altura que la tarjeta del auto);
   leyenda y botón "mes anterior" van debajo. */
.vrc-avcals-container {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.vrclegendediv {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
}

/* Botones "mes anterior"/"mes siguiente", insertados por JS antes de
   .vrc-avcals-container en el DOM. Antes cada uno iba en su propia fila
   del grid (display:contents en el envoltorio, uno abajo del otro); ahora
   el envoltorio deja de "abrirse" y pasa a ser un solo ítem de grid (fila
   3, debajo de la leyenda) con los dos botones en fila adentro. */
.avc-month-nav {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.avc-next-month,
.avc-prev-month {
    grid-column: unset !important;
    grid-row: unset !important;
    justify-self: unset !important;
}

.avc-prev-month,
.avc-next-month {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.avc-prev-month:hover,
.avc-next-month:hover {
    color: var(--adv-orange, #f39200) !important;
}

/* grid-column:1 (no 1/-1): antes ocupaba todo el ancho de la página; el
   usuario prefiere que quede solo debajo de la tarjeta del auto, del
   mismo ancho que ella (columna 1 se autoajusta al ancho de esa
   tarjeta). */
.vrc-cardetails-book-wrap {
    grid-column: 1 !important;
    grid-row: 5 !important;
    margin-top: 14px !important;
}

/* El margen negativo que pega esta tarjeta contra la del auto (para
   cerrar el hueco que deja la fila 5 del grid, ver themekit.js) depende
   de la altura de la tarjeta del auto, que CAMBIA de un auto a otro
   -más o menos íconos, texto de una o dos líneas, etc-. Un valor fijo
   en CSS le queda bien a algunos autos y se superpone en otros, así que
   se calcula por JS en cada carga de página, específico para el auto
   que se está mostrando. */

@media (max-width: 1149px) {
    /* minmax(0, 1fr) y no solo "1fr": una columna de grid con "1fr" a
       secas no se achica por debajo del ancho mínimo de su contenido
       (el calendario, el buscador, etc.), así que en pantallas angostas
       esa columna -y con ella toda la página- se desbordaba hacia la
       derecha en vez de reducirse al ancho real disponible. */
    .wrap.plugin-container:has(.vrc-cdetails-cinfo) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .vrc-cdetails-cinfo,
    .vrclegendediv,
    .vrc-avcals-container,
    .avc-month-nav,
    .avc-prev-month,
    .avc-next-month,
    .vrc-cardetails-book-wrap {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .vrc-cdetails-cinfo {
        justify-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .vrc-cardetails-book-wrap {
        width: 100% !important;
    }
}

/* --- Encabezado: foto + info + precio ---
   display:grid en vez de flex: con la imagen en position:absolute (más
   abajo), el "stretch" de flexbox no lograba darle un alto real a
   .vrc-cdetails-img (quedaba en 0, sin contenido en flujo normal que
   medir). Grid resuelve el alto de fila de forma mucho más directa. */
.vrc-cdetails-cinfo {
    display: grid !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: 2px solid var(--adv-orange, #f39200) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* Columnas fluidas, no un ancho fijo: la columna del texto/iconos
   (derecha) tiene prioridad para llegar a su piso de 300px -lo que le
   alcanza para acomodar los iconos en 1-2 filas sin cortarse, ver
   comentario grande sobre .wrc-cdetails-cinfo mas abajo en el historial
   de este archivo- antes que la foto crezca mas alla de su propio piso
   de 200px. Con minmax ambas se van achicando juntas segun el ancho real
   disponible en cada pantalla (ver tambien el grid del contenedor
   exterior, .wrap.plugin-container, mas arriba en este archivo). */
@media (min-width: 1150px) {
    .vrc-cdetails-cinfo {
        grid-template-columns: minmax(200px, 400px) minmax(300px, 1fr) !important;
    }
}

.vrc-cdetails-img {
    position: relative !important;
    background:
        radial-gradient(ellipse 85% 35% at 50% 85%, rgba(74, 138, 255, 0.85) 0%, rgba(41, 91, 199, 0.45) 40%, rgba(5, 10, 20, 0) 75%),
        linear-gradient(180deg, #04070d 0%, #081428 35%, #0f2347 70%, #030509 100%) !important;
    box-sizing: border-box !important;
}

/* .vrc-cdetails-cmainimg posicionado absoluto, pegado a los 4 bordes (con el
   padding como margen): un height:100% "normal" en cascada acá generaba un
   cálculo circular con el stretch del flex (el alto le terminaba saliendo
   del tamaño natural de la imagen en vez del alto ya estirado de la
   tarjeta). Posicionado así, tanto ancho como alto salen directo de
   .vrc-cdetails-img (que sí tiene un alto resuelto por el stretch), sin
   ambigüedad; object-fit:contain adentro evita que la imagen se recorte o
   se deforme sea cual sea su proporción. */
.vrc-cdetails-cmainimg {
    position: absolute !important;
    inset: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vrc-cdetails-cmainimg img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.vrc-cdetails-infocar {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 28px 32px !important;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.vrc-cdetails-cgroup {
    margin-bottom: 14px !important;
}

.vrc-cdetails-cgroup .vrclistcarname {
    display: block !important;
    font-size: 29px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
}

.vrc-cdetails-cgroup .vrclistcarcat {
    display: inline-block !important;
    margin-top: 6px !important;
    padding: 3px 10px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
}

.vrc-cdetails-cardesc {
    margin-bottom: 20px !important;
}

.vrc-cdetails-cardesc .vrccaratsdiv {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.vrc-cdetails-cardesc .vrccarcarat img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
    opacity: 0.75 !important;
}

/* Sin tooltip acá: alcanza con el ícono, no hace falta el texto al pasar
   el mouse (a diferencia del grid, donde sí ayuda por lo angosto de la
   tarjeta). */
.vrc-cdetails-cardesc .vrc-expl::before,
.vrc-cdetails-cardesc .vrc-expl::after {
    display: none !important;
}

.vrc-cdetails-cost {
    padding-top: 18px !important;
    border-top: 1px solid #eef0f3 !important;
    background: transparent !important;
    text-align: left !important;
}

.vrc-cdetails-cost .vrcliststartfrom {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 2px !important;
}

.vrc-cdetails-cost .car_cost {
    font-size: 33px !important;
    font-weight: 800 !important;
    color: var(--adv-orange, #f39200) !important;
}

/* Antes este breakpoint era 700px, pero el contenedor exterior
   (.wrap.plugin-container) ya se achica a ancho angosto desde 960px -entre
   700 y 960px la tarjeta seguia intentando el diseño de escritorio de 2
   columnas fijas (520px + minmax(320px,...)) dentro de un contenedor mas
   angosto, apretando la columna derecha y cortando los iconos. Mismo umbral
   que el contenedor exterior para que ambos cambien de diseño juntos. */
@media (max-width: 1149px) {
    .vrc-cdetails-cinfo {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .vrc-cdetails-img {
        width: 100% !important;
        height: 220px !important;
    }

    .vrc-cdetails-infocar {
        max-width: none !important;
    }
}

/* --- Selector de mes + referencia de colores ---
   (el display:contents que "desarma" .vrc-cardetails-legend y la posición
   de cada pieza están arriba, junto al resto del layout en grid). */
.vrc-cardetails-legend select.vrcselectm {
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    height: 42px !important;
    padding: 0 12px !important;
    font-size: 17px !important;
    color: #1e293b !important;
    background: #ffffff !important;
}

.vrclegendediv {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 16px !important;
    margin: 0 !important;
    width: max-content !important;
}

/* .vrclegendediv usa width:max-content arriba para quedar prolija en
   una sola fila en desktop -eso mismo la hacía exceder el ancho de
   pantalla en mobile, ya que max-content ignora el ancho disponible-.
   Acá se deja envolver en vez de desbordar. Tiene que ir DESPUÉS de la
   regla de arriba (misma selector, mismo !important): gana la que
   aparece más abajo en el archivo, y antes esta media query estaba
   antes en el archivo, así que nunca ganaba en mobile. */
@media (max-width: 700px) {
    .vrclegendediv {
        flex-wrap: wrap !important;
        white-space: normal !important;
        width: 100% !important;
        gap: 10px 16px !important;
    }
}

.vrclegenda {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.vrclegenda .vrc-leg-text {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

.vrclegfree,
.vrclegwarning,
.vrclegbusy {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
}

.vrclegfree {
    background: #ffffff !important;
    box-shadow: inset 0 0 0 1.5px #cbd5e1 !important;
}

.vrclegwarning {
    background: var(--adv-orange, #f39200) !important;
}

.vrclegbusy {
    background: #cbd5e1 !important;
}

/* --- Calendarios de disponibilidad: apilados como un mazo de tarjetas.
   El plugin siempre pinta 2 meses (el elegido + el siguiente); acá el
   primero (mes actual) queda al frente de tamaño normal, y el segundo
   (mes siguiente) se ve apenas asomado atrás, en diagonal. Cuando el
   usuario cambia de mes en el selector, la página recarga y el plugin
   vuelve a pintar 2 meses nuevos (el elegido + el que sigue), así que esto
   funciona solo con CSS, sin JS extra. */
.vrc-avcals-container {
    position: relative !important;
    transition: opacity 0.15s ease !important;
}

.vrccaldivcont {
    /* width fijo (no solo max-width): la tarjeta de atrás es position:absolute
       y sin esto su ancho se ajusta solo a su contenido en vez de igualar a
       la de adelante, lo que rompía el apilado. */
    width: 360px !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07) !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.vrccaldivcont {
    transition: transform 0.18s ease, opacity 0.15s ease !important;
}

.vrccaldivcont:first-child {
    position: relative !important;
    z-index: 2 !important;
}

/* Clickeable (a diferencia de antes): al hacer click pasa a ser el mes de
   adelante (ver JS en themekit.js), con la animación de acá abajo. */
.vrccaldivcont:nth-child(2) {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 1 !important;
    opacity: 0.55 !important;
    transform: scale(0.97) !important;
    cursor: pointer !important;
}

.vrccaldivcont:nth-child(2):hover {
    opacity: 0.8 !important;
}

/* Estados de la transición tipo carrusel (clases que agrega/saca el JS
   al hacer click en la tarjeta de atrás, o con el botón "mes anterior"). */
.vrccaldivcont.avc-leaving {
    transform: translateX(-30px) scale(0.9) !important;
    opacity: 0 !important;
}

.vrccaldivcont.avc-arriving {
    top: 0 !important;
    left: 0 !important;
    transform: scale(1) !important;
    opacity: 1 !important;
    z-index: 3 !important;
}

.vrc-avcals-container.avc-fading .vrccaldivcont:first-child {
    opacity: 0.15 !important;
}

.vrccal {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 4px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.vrccal tr:first-child td {
    padding-bottom: 14px !important;
    border-bottom: none !important;
}

.vrccal tr:first-child strong {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    text-transform: none !important;
}

.vrccal .vrccaldays td {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    padding-bottom: 8px !important;
}

/* pointer-events:none en la celda (no solo en el span de adentro): el
   plugin detecta el click igual aunque el número esté bloqueado, hay que
   cortarlo a nivel <td>. El calendario es solo para ver qué días están
   reservados, no para elegir fecha (eso se hace en el buscador de abajo). */
.vrccal tr:not(:first-child):not(.vrccaldays) td {
    width: 14.2% !important;
    height: 36px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    pointer-events: none !important;
}

.vrccal .vrc-cdetails-cal-pickday {
    display: block !important;
    cursor: default !important;
}

.vrccal td.vrctdfree {
    background: #ffffff !important;
    box-shadow: inset 0 0 0 1px #e2e8f0 !important;
}

.vrccal td.vrctdwarning {
    background: #fff4ea !important;
    color: var(--adv-orange-dark, #c27400) !important;
}

.vrccal td.vrctdbusy {
    background: #eef0f3 !important;
    color: #94a3b8 !important;
}

.vrccal td.vrctdpast {
    background: transparent !important;
    color: #cbd5e1 !important;
    box-shadow: none !important;
}

/* --- Título + buscador (.vrcdivsearch ya estilizado en la sección 6) --- */
.vrc-cardetails-book-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.vrc-cardetails-book-wrap > h4 {
    display: none !important;
}

/* La caja del buscador va centrada en esta pantalla en particular (no se
   toca la regla general de .vrcdivsearch para no afectar el buscador
   principal de la página de resultados). width:100% para que llene la
   columna 1 del grid -mismo ancho que la tarjeta del auto de arriba-. */
.vrc-cardetails-book-wrap .vrcdivsearch {
    margin: 0 auto !important;
    width: 100% !important;
    height: auto !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    border: 2px solid #1c4376 !important;
    padding: 14px !important;
    gap: 12px !important;
}

.vrc-cardetails-book-wrap .vrcdivsearch-inner,
.vrc-cardetails-book-wrap .vrclocationsbox {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Ícono del calendario descentrado: regla nativa genérica
   (.vrcdivsearch .vrcsfentrydate i{margin-top:16px}) pensada para una
   casilla más alta; acá alcanza con quitar ese margen para que quede
   centrado dentro de la casilla real (más baja). */
.vrc-cardetails-book-wrap .vrcdivsearch .vrcsfentrydate i {
    margin: 0 !important;
}