/* ──────────────────────────────────────────────
   Navegación entre pasos: solo el Paso 1 se ve
   al cargar la página. El JS se encarga de
   mostrar/ocultar el resto según el paso actual.

   Este archivo no se carga mientras se edita la
   página en Elementor (ver PHP), así que no hace
   falta ninguna excepción acá.
   ────────────────────────────────────────────── */
#reserva-paso-2,
#reserva-paso-3,
#reserva-paso-4,
#reserva-paso-5 {
	display: none;
}

/* ──────────────────────────────────────────────
   Estado "marcado" genérico — se usa tanto para
   la franquicia (regular/reducida) como para los
   3 checkboxes de Adicionales. Asume que el ícono
   es un SVG que respeta "currentColor", como los
   íconos nativos de Elementor.
   ────────────────────────────────────────────── */
.arf-marcado {
	color: #005BAA !important;
}

/* ──────────────────────────────────────────────
   Botón "Reservar vehículo" (Paso 2) — estado base

   IMPORTANTE: la clase "btn-seleccionar-vehiculo" queda en el
   CONTENEDOR del widget (así lo arma Elementor), no en el botón
   visible. Por eso el estilo apunta al ".elementor-button" de
   adentro, no a la clase directamente — si no, se generan dos
   cajas superpuestas (la del contenedor + la del botón real).

   También anteponemos "#reserva-paso-2" para ganarle en
   especificidad a las reglas propias que genera Elementor para
   cada widget — un ID pesa más que cualquier combinación de
   clases, así evitamos usar !important.
   ────────────────────────────────────────────── */
#reserva-paso-2 .btn-seleccionar-vehiculo .elementor-button {
	background-color: #005BAA;
	font-family: "Montserrat", sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.05em; /* equivalente a -5% de Figma */
	border-radius: 42px;
	padding: 14px 26px 14px 26px;
	color: #FFFFFF;
	text-align: center;
}

/* Hover solo mientras NO está seleccionado */
#reserva-paso-2 .btn-seleccionar-vehiculo:not(.arf-vehiculo-seleccionado) .elementor-button:hover {
	background-color: #122459;
}

/* ──────────────────────────────────────────────
   Botón "Reservar vehículo" (Paso 2) — seleccionado
   ────────────────────────────────────────────── */
#reserva-paso-2 .btn-seleccionar-vehiculo.arf-vehiculo-seleccionado .elementor-button {
	background-color: #09CC94;
	font-family: "Montserrat", sans-serif;
	font-size: 20px;
	font-weight: 700;
	border-radius: 42px;
	padding: 14px 27px 14px 26px;
	color: #FFFFFF;
	text-align: center;
}

/* Aviso de "seleccioná un vehículo" — oculto por defecto */
#aviso-selecciona-vehiculo {
	display: none;
}

/* ──────────────────────────────────────────────
   Tarjeta de paquete de tarifa (Paso 3) cuando
   está seleccionada — resalta el borde completo.
   ────────────────────────────────────────────── */
#card-tarifa-estandar.arf-tarifa-seleccionada,
#card-tarifa-full.arf-tarifa-seleccionada {
	border: 2px solid #005BAA;
	box-shadow: 0 0 0 1px #005BAA;
}