@font-face {
    font-family:FF-MuseoSansRounded-300;
    src:url("../fonts/MuseoSansRounded-300.ttf");
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: url('../imagenes/formulario-fondo.jpg') no-repeat center center fixed; /* Cambia 'images/fondo.jpg' por la ruta de tu imagen */
    background-size: cover; /* La imagen se ajusta al tamaño de la pantalla */
    background-attachment: fixed; /* Fija la imagen mientras se hace scroll */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: FF-MuseoSansRounded-300, "Museo Sans Rounded", serif;
}

.logo  { 
    position: absolute;
    top: 50px;
    width: 500px;
}
h1, h2 {
    text-align: center;
    color: #3a63a7;
    font-size: 20px;
}

h2 {margin-bottom: 50px;}
.no-margin {margin: 0px!important;}
section {
    width: 400px;
    margin: 20px auto;
    padding: 50px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin: 20px 0px;
}
label input {
    margin: 10px 0 0 0; 
}

select, input[type="number"], textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.boton, #btn-buscar-itinerarios, #enviar-presupuesto {
    padding: 10px;
    background: #3a63a7;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 50px;
    border: #3a63a7 solid 1px;
    padding: 15px 30px;
    display: block;
    margin: 50px auto 30px auto;
    transition: background-color 0.8s ease;

}

#btn-camarote {
    padding: 10px;
    background: #3a63a7;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 50px;
    border: #3a63a7 solid 1px;
    padding: 15px 30px;
    display: block;
    margin: 50px auto 30px auto;
    transition: background-color 0.8s ease;

}


.boton:hover, #btn-buscar-itinerarios:hover, #btn-camarote:hover, #enviar-presupuesto:hover {

    color: #3a63a7;
    background: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 50px;
    border: #3a63a7 solid 1px;
}

textarea {
    resize: none;
    height: 80px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    border: 2px solid #3a63a7; /* Borde color #3a63a7 */
    padding: 5px;
    font-size: 16px;
    width: 100%; /* Hace que los campos sean más anchos y ocupen todo el espacio disponible */
    box-sizing: border-box; /* Asegura que el padding no afecte al ancho total */
    border-radius: 5px; /* Bordes redondeados */
}

#observaciones textarea {height: 250px;}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    outline: none; /* Elimina el borde azul predeterminado en el foco */
    border-color: #007BFF; /* Cambia el color del borde cuando el campo está enfocado */
}

.btn-volver{
    background-color: transparent;
    color: #3a63a7;
    border: 0px;
    padding: 0;
    margin-top: 0;
    display: inline;
}
.fa-chevron-left{
    color:#3a63a7 ;
    font-size: 12px;
    padding-right: 10px;
}
.edad-nino {
    margin-bottom: 10px; /* Espacio entre cada entrada */
    display: flex;
    flex-direction: column; /* Forzar que el texto y el campo estén en líneas separadas */
}

.edad-nino label {
    font-weight: bold; /* Opcional: para resaltar el texto */
}

label.viajeros, #edades-ninos {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    width: 100%;
    border-bottom: 1px solid #3a63a7;
    padding-bottom: 20px;
}

#adultos, #ninos, #bebes {
    width: 50px;
    text-align: center; 
}
#edades-ninos div label input {
    width: 50px;
    text-align: center;
    font-size: 16px;
    margin-left: 25px;
}

#buscar-itinerarios label select{
    margin-top: 10px;
}

#itinerarios-lista {
    max-height: 350px;
    overflow-y: auto;
    padding: 10px; 
    scrollbar-width: thin; /* Para navegadores basados en Firefox */
    scrollbar-color: #3a63a7 #f3f3f3; 
    
}

/* Scroll personalizado para navegadores basados en WebKit (Chrome, Edge, Safari) */
#itinerarios-lista::-webkit-scrollbar {
    width: 8px; /* Ancho del scroll */
    height: 8px; /* Alto del scroll horizontal (opcional) */
}

#itinerarios-lista::-webkit-scrollbar-track {
    background: #f3f3f3; /* Color del fondo del track */
    border-radius: 10px; /* Bordes redondeados */
}

#itinerarios-lista::-webkit-scrollbar-thumb {
    background: #3a63a7; /* Color del pulgar */
    border-radius: 10px; /* Bordes redondeados del pulgar */
}

#itinerarios-lista::-webkit-scrollbar-thumb:hover {
    background: #2d4e8a; /* Color del pulgar al pasar el mouse */
}

#itinerarios-lista label {
    position: relative; /* Permite posicionar elementos dentro del label */
    padding-left: 50px; /* Da espacio para el input */
}

#itinerarios-lista input[type="checkbox"] {
    position: absolute;
    left: 0; /* Alinea el checkbox a la izquierda */
    top: 0; /* Asegura que el checkbox esté alineado verticalmente con el texto */
    transform: scale(1.5); /* Hace el checkbox más grande */
    accent-color: #3a63a7 ; /* Cambia el color del checkbox a azul */
}

#form-completo {
    z-index: 2;
}
/* Camarotes  */



/* Input radio personalizado */
input[type="radio"]
 {
    width: 20px; /* Aumentar tamaño */
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
}
#enviar-presupuesto {
    display: block;
    margin: 20px auto;
}

#seleccion-itinerario select {margin-top: 15px;}

#tipo-camarote input[type="checkbox"] {
    transform: scale(1.5); 
    accent-color: #3a63a7 ; 
    margin: 0 20px 0 0;
}
#opciones-interior, #opciones-vista-mar, #opciones-balcon, #opciones-suite {
    font-size: 16px;
    margin-left: 40px;
}
#tipo-camarote  label {
    margin: 20px 0;
}
#opciones-interior label, 
#opciones-vista-mar label, 
#opciones-balcon label, 
#opciones-suite label {
    margin: 0 0 10px 0;
}

#opciones-interior input, 
#opciones-vista-mar input, 
#opciones-balcon input, 
#opciones-suite input {
    margin-right: 10px;
}

#opciones-interior label, #opciones-vista-mar label {
    display: inline-block; 
    width: 150px;
    gap: 50px;
}

#opciones-interior, #opciones-vista-mar {
    display: flex; /* Usar Flexbox para alinear en línea */
    align-items: center; /* Alinear verticalmente los elementos */
}

#observaciones H2 {margin: 50px 0 30px 0;}

hr {color: #3a64a73a;margin-top: 20px;}

form::before {
    content: "";
    display: block;
    background: url("assets/images/touringclub-disney-cruise-line.png") no-repeat;
    width: 374px;
    height: 46px;
    background-size: cover;
    position: relative;
    margin: 0 auto; /* Centra horizontalmente */
    top: -20px; /* Ajusta según sea necesario */
}


@media only screen and (max-width: 800px){
    .logo {width:400px;}
}

@media screen and (max-width:700px){
    section{
        width: 65%;
    }
}

/* destacados iconos  */
  
div.destacado-icono {margin-top: 5px;}
        .destacado-icono {
            width: 250px;
            height: 35px;
            background-size: contain;
            background-repeat: no-repeat;
        }

    .destacado-icono[data-destacado="Very Merrytime"] {
        background-image: url('https://landings.avoristravel.com/libreria/estilos/disney/imagenes/destacados/very-merrytime.svg');
    }

    .destacado-icono[data-destacado="Halloween on the High Seas"] {
        background-image: url('https://landings.avoristravel.com/libreria/estilos/disney/imagenes/destacados/halloween-on-the-high-seas.svg');
    }

    .destacado-icono[data-destacado="Marvel Day at Sea"] {
        background-image: url('https://landings.avoristravel.com/libreria/estilos/disney/imagenes/destacados/marvel-day-at-sea.svg');
    }
    .destacado-icono[data-destacado="Pixar Day at Sea"] {
        background-image: url('https://landings.avoristravel.com/libreria/estilos/disney/imagenes/destacados/pixar.png');
    }
    .destacado-icono[data-destacado=""] {
        display: none;
    }