/*
 * Ajustes de estilo tras pasar la web nueva (Astra) a produccion, para que se vea como pre-www.
 * Se carga despues de style.css y megamenu.css (functions.php, handle race-ajustes). Los selectores llevan
 * "body" delante porque el CSS propio de cada pagina en WPBakery (<style data-type="vc_custom-css">) se
 * imprime despues de este fichero y, a igual especificidad, ganaria.
 */

/* Botones naranjas: al pasar el raton siguen naranjas con el texto oscuro, como en pre-www.
   El CSS de varias paginas (asistencia-en-viaje, seguros-coche...) los ponia casi negros (#1c1c1b / #000). */
body .btn-mustard:hover,
body .btn-mustard:focus,
body a.btn-orange-bg:hover,
body a.btn-orange-bg:focus {
    background-color: #ffaa27 !important;
    color: #333333 !important;
}

/* Clases de maquetacion del tema anterior (dikka-child) que el contenido sigue usando y Astra no define:
   iconos con texto en "Te ofrecemos las mejores ventajas" (decesos, rent a car, seguros coche, seguro por dias)
   y los formularios de informacion ("Ajuste de comunicaciones": texto 70% a la izquierda, Si/No 30% a la derecha). */
body .fleft { float: left; }
body .fright { float: right; }
body form .w100 { width: 100%; }
body form .w7030 > div { width: 70%; }
body form .w7030 > div + div { width: 30%; }
body form .padl30 { padding-left: 30px; }
body form .condiciones::after { content: ""; display: table; clear: both; }

/* Filas de WPBakery: una columna que sobresale de la fila anterior empujaba la siguiente a la derecha
   (preguntas frecuentes y descarga de documentos en servicios/rehabilitacion-de-vehiculos). */
body #content .wpb-content-wrapper > .vc_row.wpb_row { clear: both; }

/* Luz de emergencia, formulario "Soy Socio del RACE": el * de obligatorio va en la misma linea que la etiqueta
   y sin los saltos y parrafos vacios que mete el editor. */
body #form5 .input-container span span { display: inline; }
body #form5 .input-container > p:empty,
body #form5 .input-container > span > br,
body #form5 .fecha-nacimiento-selects > br { display: none; }
body #form5 .input-container { margin-bottom: 6px; }

/* Texto bajo el formulario "Te llamamos" (seguro-por-dias y otras): el telefono salia en blanco sobre fondo claro. */
body .cta-form .cta-texto p { color: #585858 !important; }
body .cta-form .cta-texto .cta-texto-telf,
body .cta-form .cta-texto .cta-texto-telf a,
body .cta-form .cta-texto .cta-texto-telf i { color: #1c1c1b !important; }

/* Boton ÁREA PRIVADA de la cabecera: como en pre-www (hover azul con texto blanco). Es un <button> y Astra le
   ponia borde negro en hover y fondo/borde #111 al quedarse con el foco tras hacer clic ("unas veces bien y otras mal"). */
body .button-acceso-socios-blue:focus,
body .button-acceso-socios-blue:focus-visible {
    background-color: transparent !important;
    color: #1b74da !important;
    border-color: #1b74da !important;
    outline: none;
}
body .button-acceso-socios-blue:hover,
body .button-acceso-socios-blue:active {
    background-color: #1b74da !important;
    color: #ffffff !important;
    border-color: #1b74da !important;
}

/* Botones naranjas de WPBakery ("Leer mas" de las noticias...): hover estandar, no negro. */
body .vc_btn3.vc_btn3-color-orange:hover,
body .vc_btn3.vc_btn3-color-orange:focus {
    background-color: #ffaa27 !important;
    color: #333333 !important;
}

/* Home, "Noticias y actualidad": titulo en 3 lineas con "..." y letra mas pequena; fecha y "Leer mas" en su
   propia fila, a la misma altura en todas las tarjetas. */
body .cards-carousel .vc_gitem-zone-c .vc_gitem-post-data-source-post_title p {
    font-size: 16px;
    line-height: 1.4;
    height: calc(1.4em * 3);
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
body .cards-carousel .vc_gitem-zone-c .vc_gitem_row + .vc_gitem_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
}
body .cards-carousel .vc_gitem-zone-c .vc_gitem_row + .vc_gitem_row > .vc_gitem-col {
    width: auto;
    float: none;
    padding: 0;
    margin: 0;
}
body .cards-carousel .vc_gitem-zone-c .vc_gitem-post-data-source-post_date p { font-size: 14px; line-height: 1.4; margin: 0; }
body .cards-carousel .vc_gitem-zone-c .vc_btn3-container { margin: 0; }

/* Bloques con imagen de fondo ("Tu seguro de coche en el RACE"...): los dos botones en la misma linea.
   .btn-orange llevaba margin-top: 20px y quedaba 10px mas abajo que el primero. */
body .fullimage p:has(> a.btn + a.btn) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body .fullimage p:has(> a.btn + a.btn) > a.btn { margin: 0; }

/* Megamenu "Ayuda y asistencia", tarjeta "Llamadme gratis": en el comparador su site.css pone
   .btn-primary { color: white !important } y el boton quedaba blanco sobre blanco. */
body .cardCTCmenu .btn-primary,
body .cardCTCmenu input[type="submit"] { color: #1b74da !important; }

/* Cabecera dentro del comparador (y otras apps que usan race/v1/fragments): la app la centra con
   .wp-race-header > header { margin: auto }, pero Astra pone .ast-hfb-header .site-header { margin: 0 }
   y en pantallas anchas cabecera y megamenu quedaban pegados a la izquierda. */
body .wp-race-header > header.site-header { margin-left: auto; margin-right: auto; }

/* Megamenu "Servicios" > "Mapas de carretera" dentro del comparador: su CSS da margin-bottom: 20px a .row
   y entre las filas azules (que sobresalen 15px por los lados) quedaban muescas blancas. */
body .wp-race-header .astra-megamenu .row + .row { margin-bottom: 0; }
/* ...y sin los -15px laterales de .row, que dejaban picos blancos arriba (rectangulo azul limpio). */
body .wp-race-header .astra-megamenu .ast-mm-custom-content .row { margin-left: 0; margin-right: 0; }

/* Home: espacio bajo el boton "Leer mas" de las tarjetas de noticias. */
body .cards-carousel .vc_gitem-zone-c { padding-bottom: 20px; }

/* Home: botones naranjas rellenos ("Leer mas", "Quiero saber mas"): hover negro con texto naranja. */
body.home .vc_btn3.vc_btn3-color-orange:hover,
body.home .vc_btn3.vc_btn3-color-orange:focus,
body.home a.btn-orange-bg:hover,
body.home a.btn-orange-bg:focus {
    background-color: #1c1c1b !important;
    color: #ffaa27 !important;
    border-color: #1c1c1b !important;
}

/* Home: botones con borde naranja y fondo transparente ("Reserva tu cita", "Quiero ser Socio"...):
   hover con fondo naranja y texto blanco, como en pre-www. */
body.home a.btn.btn-orange:hover,
body.home a.btn.btn-orange:focus {
    background-color: #ffaa27 !important;
    color: #ffffff !important;
    border-color: #ffaa27 !important;
}

/* Home, cabecera "Con el RACE, nunca estaras solo": el contenido trae "Quiero ser Socio" con la clase de
   boton transparente (btn2 btn-orange) y "Quiero saber mas" con la de boton relleno (btn-orange-bg).
   Se intercambian los estilos: "Quiero ser Socio" relleno naranja y "Quiero saber mas" transparente. */
body.home .header-image a.btn.btn2.btn-orange {
    background-color: #ffaa27 !important;
    color: #1c1c1b !important;
    border: 2px solid #ffaa27 !important;
}
body.home .header-image a.btn.btn2.btn-orange:hover,
body.home .header-image a.btn.btn2.btn-orange:focus {
    background-color: #1c1c1b !important;
    color: #ffaa27 !important;
    border-color: #1c1c1b !important;
}
body.home .header-image a.btn2 + a.btn.btn-orange-bg {
    background-color: rgba(0, 0, 0, 0.34) !important;
    color: #ffaa27 !important;
    border: 2px solid #ffaa27 !important;
}
body.home .header-image a.btn2 + a.btn.btn-orange-bg:hover,
body.home .header-image a.btn2 + a.btn.btn-orange-bg:focus {
    background-color: #ffaa27 !important;
    color: #ffffff !important;
    border-color: #ffaa27 !important;
}

/* selecciona-fecha-y-hora-itv: el CSS de la pagina sube #nombre-itv con margin-top: -60px en pantallas de mas
   de 1200px y la linea bajo "Selecciona fecha y hora" tachaba el nombre de la ITV. Sin margen negativo,
   como ya estaba en pantallas pequenas. */
body #nombre-itv { margin-top: 0; }