/* Estilos generales del contenedor del formulario INICIAL */
.formulario-transfer-wrapper { /* SOLO este elemento tiene la sombra */
    /* background-color: #fff; */
    padding: 10px 10px;
    border-radius: 0px;
    /* La sombra se aplica ÚNICAMENTE al formulario inicial */
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Mantengo tus valores originales para la sombra base */
    max-width: 800px;
    margin: 5px 15px;
}

/* Estilos para la SEGUNDA PANTALLA (RESULTADO DE COTIZACIÓN) */
#resultado-cotizacion {
    background-color: #fff;
    padding: 5px 10px;
    border-radius: 80x;
    /* **** ¡CAMBIO CRÍTICO Y DEFINITIVO! **** */
    /* Este elemento NO tendrá su propia sombra.
       Cuando aparece, asume el espacio donde estaba el formulario inicial. */
    box-shadow: none; /* <--- QUITAMOS CUALQUIER SOMBRA PROPIA A ESTE ELEMENTO */
    max-width: 800px; /* Mantener para consistencia de ancho */
    margin: 10px 5px; /* Mantener para centrado */
}

.formulario-transfer-wrapper label,
#resultado-cotizacion label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--color-primario);
}

/* Estilos para inputs de texto y número (los selects serán manejados por Select2) */
.formulario-transfer-wrapper input[type="number"],
#resultado-cotizacion input[type="text"],
#resultado-cotizacion input[type="email"],
#resultado-cotizacion input[type="tel"],
#resultado-cotizacion input[type="date"],
#resultado-cotizacion input[type="time"],
#resultado-cotizacion textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #925f00ba;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
}


/* Grillas específicas para los botones de opción (servicio requerido, tipo recogida) */
.servicio-requerido .opciones {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales para Ida y Vuelta / Solo Ida */
    gap: 10px;
    margin-bottom: 20px;
}

.tipo-recogida .opciones {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Tres columnas iguales para tipos de recogida */
    gap: 10px;
    margin-bottom: 20px;
}

/* Clase base para todos los botones de opción (servicio y tipo de recogida) */
.btn-opcion-transfer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espacio entre icono y texto */
    background-color: #f0f0f0;
    color: #555;
    border: 1px solid var(--color-secundario);
    padding: 12px 15px;
    font-size: 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    flex-wrap: nowrap; /* Evitar que el texto y el icono se envuelvan */
}

.btn-opcion-transfer.active {
    background-color: var(--color-primario); /* Azul oscuro como en tu diseño */
    color: white;
    border-color: var(--color-primario);
}

.btn-opcion-transfer:hover:not(.active) {
    background-color: #e0e0e0;
    border-color: #bbb;
}

/* Estilos para los iconos dentro de los botones */
.btn-opcion-transfer i {
    font-size: 1.2em; /* Tamaño estándar para los iconos */
}
/* Espaciado específico para los iconos de Ida y Vuelta */
.btn-servicio i:nth-child(1) { margin-right: 2px; } /* Avión */
.btn-servicio i:nth-child(2) { margin-right: 2px; } /* Flecha */


/* Estilos para el botón "Obtener Presupuesto!" */
#btn-get-quote {
    background-color: var(--color-secundario); /* Color verde de tu imagen */
    color: white;
    padding: 15px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    margin-top: 20px; /* Separación del campo Pax quantity */
}

#btn-get-quote:hover {
    background-color: var(--color-secundario); /* Verde un poco más oscuro al hover */
}


/* ESTILOS ESPECÍFICOS PARA SELECT2 PARA REPLICAR TU DISEÑO */
.select2-container--default .select2-selection--single {
    height: auto !important; /* Permitir que el padding controle la altura */
    padding: 12px 20px !important; /* Padding interno como el input, ajustado para la flecha */
    border: none !important; /* SIN BORDE */
    border-radius: 8px !important; /* Bordes curvos */
    background-color: #f8f8f8 !important; /* Fondo ligeramente gris */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Sombra muy sutil, si deseas */
    transition: all 0.2s ease-in-out;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444 !important; /* Color de texto normal */
    line-height: normal !important; /* Eliminar altura de línea extra */
    padding: 0 !important; /* Eliminar padding interno del texto */
}

/* Estilo del placeholder de Select2 */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999 !important; /* Color gris para el placeholder */
}

/* Flecha del select2 (cuando está cerrado) */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #999 transparent transparent transparent !important; /* Color de la flecha hacia abajo */
    border-width: 6px 6px 0 6px !important; /* Tamaño de la flecha */
    margin-top: -3px !important; /* Ajustar posición vertical */
}

/* Flecha del select2 (cuando está abierto) - ROTAR HACIA ARRIBA */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #999 transparent !important; /* Color de la flecha hacia arriba */
    border-width: 0 6px 6px 6px !important; /* Rotar la flecha */
}

/* Estilos del dropdown (las opciones) */
.select2-container--open .select2-dropdown {
    border: none !important; /* Sin borde en el dropdown */
    border-radius: 8px !important; /* Bordes curvos en el dropdown */
    box-shadow: 0 6px 12px rgba(0,0,0,0.1); /* Sombra más pronunciada para el dropdown */
    margin-top: 5px; /* Separación del input */
}

.select2-container--default .select2-results__option {
    padding: 10px 20px; /* Padding para las opciones */
    color: #333;
}

/* Hover en las opciones del desplegable */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #e0e0e0 !important; /* Tono más oscuro al hover */
    color: #333 !important;
}

/* Eliminar borde azul al focus */
.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    outline: none !important;
    border: none !important;
    box-shadow: 0 0 0 2px rgb(146 94 0 / 68%) !important; /* Puedes poner un ligero glow o nada */
}


/* Grid de vehículos a 3 columnas */
.lista-vehiculos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Ajustado para 3 columnas, min ancho de 200px */
    gap: 20px;
    margin-bottom: 30px;
}
/* Para asegurar 3 columnas exactas cuando el contenedor lo permita */
@media (min-width: 600px) { /* Puedes ajustar este breakpoint */
    .lista-vehiculos {
        grid-template-columns: 1fr 1fr; /* Volví a 3 columnas porque creo que es lo que buscas para desktop */
    }
}


/* El resto de los estilos para la segunda página, etc. */
.mensaje-precio {
    text-align: right;
    margin-top: 10px;
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

#precio-estimado {
    color: #28a745; /* Verde para el precio */
}

/* Estilos para la segunda página (resultado de cotización) */
#resultado-cotizacion h2 {
    color: #333;
    margin-bottom: 25px;
    text-align: center;
}

.detalles-transferencia {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 30px;
    border: 1px solid #eee;
}

.detalles-transferencia p {
    margin: 5px 0;
    line-height: 1.6;
}

.detalles-transferencia strong {
    color: var(--color-primario);
}

.opcion-vehiculo {
    border: 2px solid #eee;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.opcion-vehiculo.selected {
    border-color: var(--color-secundario); /* Verde cuando está seleccionado */
    box-shadow: 0 0 10px #925f0052;
}

.opcion-vehiculo img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    border-radius: 4px;
}

.opcion-vehiculo h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--color-primario);
    font-size: 1.3em;
}

.opcion-vehiculo p {
    font-size: 0.9em;
    color: #666;
    line-height: 1.4;
}

.opcion-vehiculo .pax-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--color-secundario);
    color: white;
    padding: 5px 8px;
    border-radius: 50%;
    font-size: 0.8em;
    font-weight: bold;
}

.formulario-datos-cliente {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.formulario-datos-cliente .campo-completo {
    grid-column: span 2;
}

.resumen-orden {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #eee;
    margin-top: 30px;
}

.resumen-orden h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}

.resumen-orden p {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
}

.resumen-orden p strong {
    color: #333;
}

.resumen-orden .subtotal-final {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--color-secundario);
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

#btn-book-now {
    background-color: var(--color-secundario); /* Verde para el botón de reservar */
    color: white;
    padding: 15px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    margin-top: 20px;
}

#btn-book-now:hover {
    background-color: var(--color-secundario);
}

/* Estilos para el campo de cantidad de pasajeros */
.campo-cantidad-pax {
    position: relative;
}

.campo-cantidad-pax input[type="number"] {
    padding-right: 20px; /* Deja espacio para los botones de spin */
    text-align: center; /* Centrar el número */
    max-width: 80px; /* Ancho máximo del input */
}

/* Botones de incremento/decremento para cantidad de pasajeros */
.cantidad-botones {
    position: absolute;
    right: 20px;
    top: calc(50% + 4px); /* Ajusta la posición vertical, considerando el label */
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    height: calc(100% - 20px); /* Ajusta la altura para que no se salga */
    justify-content: center;
}

.cantidad-botones button {
    background-color: #eee;
    border: 1px solid #ccc;
    padding: 0 5px;
    font-size: 16px;
    cursor: pointer;
    line-height: 1; /* Elimina espacio extra */
    height: 20px; /* Altura de cada botón */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

.cantidad-botones button:first-child {
    margin-bottom: 2px;
}

.cantidad-botones button:hover {
    background-color: #ddd;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primario)!important;
    color: white;
}

.amount {
    color: var(--color-secundario)!important; /* Color del precio */
}
/* --- INICIO ESTILOS PROFESIONALES PARA SNACKBAR DE ERRORES --- */
#custom-error-snackbar {
    /* Estado inicial y posicionamiento */
    visibility: hidden; /* Oculto por defecto */
    opacity: 0; /* Para la transición de fade */
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%); /* Centrado horizontal */
    z-index: 10000; /* Asegurar que esté por encima de todo */

    /* Diseño visual */
    background-color: #dc3545; /* Rojo de error más profesional (Bootstrap red) */
    color: #ffffff; /* Texto blanco */
    min-width: 320px; /* Ancho mínimo para legibilidad */
    max-width: 90%; /* Ancho máximo para pantallas pequeñas */
    padding: 15px 25px; /* Padding generoso */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); /* Sombra más pronunciada pero elegante */
    font-size: 16px;
    font-family: Arial, sans-serif; /* Consistencia de fuente */

    /* Flexbox para el contenido interno y el botón de cerrar */
    display: flex;
    flex-direction: column; /* Contenido apilado verticalmente */
    align-items: flex-start; /* Alinear texto y lista a la izquierda */
    gap: 8px; /* Espacio entre los elementos internos */

    /* Transiciones suaves */
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

#custom-error-snackbar.show {
    visibility: visible; /* Mostrar */
    opacity: 1; /* Transición a visible */
}

/* Mensaje principal del snackbar */
#custom-error-snackbar #snackbar-message {
    font-weight: bold;
    margin: 0; /* Eliminar márgenes por defecto */
    padding-right: 25px; /* Espacio para el botón de cerrar */
    text-align: left;
    width: 100%;
}

/* Lista de detalles de errores */
#custom-error-snackbar #snackbar-details {
    list-style-type: disc; /* Puntos para los detalles */
    padding-left: 25px; /* Sangría para la lista */
    margin: 0; /* Eliminar márgenes por defecto */
    text-align: left;
    width: 100%;
}

#custom-error-snackbar #snackbar-details li {
    margin-bottom: 4px; /* Espacio entre ítems de la lista */
    line-height: 1.4; /* Espaciado de línea para legibilidad */
}
#custom-error-snackbar #snackbar-details li:last-child {
    margin-bottom: 0; /* Sin margen en el último ítem */
}

/* Botón de cerrar (X) */
#custom-error-snackbar #snackbar-close {
    background: none;
    border: none;
    color: #ffffff; /* Color blanco */
    font-size: 28px; /* Tamaño más grande para fácil clic */
    line-height: 1; /* Ajustar línea de altura */
    position: absolute; /* Posicionamiento absoluto dentro del snackbar */
    right: 10px; /* Distancia del borde derecho */
    top: 10px; /* Distancia del borde superior */
    cursor: pointer;
    padding: 0; /* Sin padding extra */
    transition: color 0.2s ease-in-out;
}

#custom-error-snackbar #snackbar-close:hover {
    color: #f8f9fa; /* Color un poco más claro al hover */
}
/* --- FIN ESTILOS PROFESIONALES PARA SNACKBAR DE ERRORES --- */

/* También asegúrate de que los estilos del spinner de los botones estén aquí si los quieres */

/* Estilos para el botón "Volver" */
.btn-volver-atras {
    background-color: #f0f0f0; /* Color de fondo suave */
    color: #555; /* Color de texto */
    border: 1px solid #ccc;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex; /* Para alinear icono y texto */
    align-items: center;
    gap: 8px; /* Espacio entre icono y texto */
    transition: all 0.3s ease;
    margin-top: 20px; /* Separación del título */
    
}

.btn-volver-atras:hover {
    background-color: #e0e0e0;
    border-color: #bbb;
}

/* Ajuste para que el título de la cotización no se superponga al botón volver */
#transfer-quote-details h2 {
    margin-top: 40px; /* Ajusta este margen para dar espacio al botón superior */
    position: relative; /* Asegura que el z-index funcione correctamente si hay solapamiento */
    z-index: 1; /* Coloca el título por encima del botón si están cerca */
}

/* Considerar responsive para el botón volver si es necesario */
@media (max-width: 768px) {
    .btn-volver-atras {
        position: static; /* Vuelve a posición normal en móviles */
        width: auto; /* Ancho automático */
        margin: 10px auto 20px; /* Margen centrado */
        display: flex; /* Mantiene flex para icono y texto */
    }
    #transfer-quote-details h2 {
        margin-top: 25px; /* Ajusta el margen para móviles */
    }
}

/* Estilos para resaltar campos inválidos (Origen y Destino iguales) */
.select-error .select2-selection--single {
    border-color: #dc3545 !important; /* Borde rojo */
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important; /* Sombra roja sutil */
    background-color: rgba(220, 53, 69, 0.15) !important; /* Borde rojo */
}

/* Estilo para los mensajes "No puede ser igual..." */
.location-error-message {
    color: #dc3545; /* Texto rojo */
    font-size: 0.9em;
    margin-top: -15px; /* Acercar al campo */
    margin-bottom: 15px; /* Separación del siguiente campo */
    display: none; /* Oculto por defecto */
}

/* Movil  */

/* ====================================================================
   Estilos Responsivos para el Formulario de Detalles (Versión Robusta)
   ==================================================================== */

/* En pantallas con un ancho máximo de 768px (tablets y móviles)... */
@media (max-width: 768px) {
    
    /* 1. Hacemos que el contenedor de los campos ocupe una sola columna. */
    .formulario-datos-cliente {
        grid-template-columns: 1fr; 
        gap: 0!important;
    }

    /* 2. (LA CLAVE) Forzamos a que cada campo hijo ocupe la columna completa. */
    .formulario-datos-cliente > div {
        grid-column: 1 / -1; /* Ordena a cada 'div' que se expanda desde la línea 1 hasta la última */
    }

    .btn-opcion-transfer i {
    font-size: 1em!important;
}

.btn-opcion-transfer {
    gap: 6px;    
    padding: 6px 10px;    
    line-height: 1.6;
}

}