.Wrapper{
    background: url('../assets/images/passport.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: repeat( 2 , 1fr );
    gap: 2.5rem;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: auto;
}
/* Columnas del wrapper */
.Wrapper-col{
    min-height: 100%;
    background-color: var(--c-primary-10);
    padding: 2.5rem;
    border-radius: var(--br-square);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
/* Caja del formulario */
.Form{
    min-height: fit-content;
    align-self: start;
    position: sticky;
    top: 0;
}
/* Estilos comunes a ambas cajas */
.Form-h2 , .Checkout-h2{
    font-size: var(--fs-med);
    font-weight: var(--fw-bold);
    color: var(--c-primary-75);
    text-transform: uppercase;
}
/* Para ocultar y mostrar el input date y el selector de pasajeros tras confirmar */
.Form-presection{
    display: none;
}
.Form-presection.isActive{
    display: block;
    display: flex;
    justify-content: space-between;
}
/* Cambia el color de las flechas selectoras y del icono del calendario*/
::-webkit-inner-spin-button , ::-webkit-calendar-picker-indicator{
     filter: invert(1);
}
/* Estilos para el input de selector de pasajeros */
.Form-number input{
    width: 100%;
    max-width: 5rem;
    text-align: end;
    justify-self: end;
}
/* Estilos para el input del nombre */
.Form-input{
    display: none;
}
.Form-input.isVisible{
    display: block;
}
/* Para ocultar y mostrar el botón tras confirmar */
.Form-button{
    margin: 3rem 0 0 0;
    justify-self: center;
    display: none;
}
.Form-button.isVisible{
    display: block;
}
/* Caja oculta para el pago */
.Checkout{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transform: translateX(33%);
    pointer-events: none;
    transition: opacity 2s ease , transform 2.5s ease;
}
.Checkout.isVisible{
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;    
}
.Checkout-info{
    font-size: var(--fs-small);
    color: var(--c-primary-50);
    margin-top: -.625rem;
}
/* Info del carrito */
.Checkout-summary{
    display: flex;
    flex-direction: column;
    gap: .625rem;
}
/* Títulos de las secciones / pags. anteriores */
.Checkout-h3{
    font-size: var(--fs-regular);
    font-weight: var(--fw-bold);
    color: var(--c-primary-50);
    text-transform: uppercase;
    padding: .5rem;
    margin: .5rem;
    border-bottom: 1px solid var(--c-primary-50);
}
/* Info de items */
.Checkout-data{
    padding: .5rem 1rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    font-size: var(--fs-med);
    font-weight: var(--fw-bold);
    color: var(--c-primary-100);
}
/* Precios de items */
.Checkout-span--price{
    font-size: var(--fs-med);
    color: var(--c-primary-75);
}
/* Subtotal y precio */
.Checkout-total{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: .5rem 1rem;
    font-size: var(--fs-big);
    font-weight: var(--fw-bold);
    color: var(--c-primary-100);
    text-transform: uppercase;
}
/* Botón de "Finalizar Compra" */
.Checkout-button{
    min-width: 100%;
    padding: 1rem;
    font-size: var(--fs-med);
    font-weight: var(--fw-bold);
}

/* Popup de pago */
.Popup-background{
    display: none;
}
.Popup-background.isVisible{
    width: 100vw;
    min-height: 100vh;
    max-height: 100vh;
    background-color: var(--c-secondary-75);
    display: grid;
    place-content: center;
    place-items: center;
    grid-template-columns: 1fr;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
}
/* Caja del popup */
.Payment{
    min-height: fit-content;
    max-width: 45%;
    background-color: var(--c-secondary-75);
    padding: 4rem 2.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    border: 2px solid var(--c-primary-25);
    border-radius: var(--br-square);
    color: var(--c-primary-75);
    position: relative;
}
/* svg para cerrar el popup + hover */
.Payment-svg{
    height: 1.5rem;
    position: absolute;
    top: 5%;
    left: 42%;
    opacity: .75;
    cursor: pointer;
    transition: opacity .3s ease;
}
.Payment-svg:hover{
    opacity: .5;
    scale: 1.05;
}
/* Título y textos del popup */
.Payment-title{
    font-size: var(--fs-med);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
}
.Payment-description{
    font-size: var(--fs-regular);
}
/* Formulario de pago */
.Payment-form{
    display: flex;
    flex-direction: column;
    margin: 2rem 0 0;
    gap: .5rem;
}
/* Quita las flechas en el input-number del CVV */
.Payment-form ::-webkit-inner-spin-button{
    display: none;
}
.Payment-data{
    width: 100%;
    display: grid;
    grid-template-columns: 1.5fr .5fr .5fr;
    gap: 1rem;
}
/* Caja de los botones */
.Payment-buttons{
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0 0;
}
/* Botón de cancelar + hover */
.Payment-cancel{
    background-color: var(--c-primary-10);
    border: 2px solid var(--c-primary-25);
    text-transform: capitalize;
}
.Payment-cancel:hover{
    scale: 1;
    border: 2px solid transparent;
    color: var(--c-primary-75);
}
/* Mensaje de compra realizada */
.Payment-response{
    background-color: #D1F4DA;
    padding: 1rem 2rem;
    border-radius: var(--br-round);
    color: #457736;
    margin: 2rem auto 0;
    text-wrap: balance;
    text-align: center;
}
.Payment-symbol{
    font-size: var(--fs-med);
}
/* Estilo al "subrayar" que oscurece el texto seleccionado */
.Payment ::selection{
    color: var(--c-primary-25);
}


/* Responsive pantallas grandes */
@media (min-width: 1600px){
    .Form-presection.isActive{
        justify-content: start;
        gap: 1.5rem;
    }
    .Form-number input{
        justify-self: start;
    }
}


/* Responsive portatil */
@media (max-width: 1328px){
    .Wrapper-col{
        padding: 1.5rem;
        gap: 2rem;
    }
    .Form-presection.isActive{
        justify-content: space-between;
        gap: 1.5rem;
    }
    .Form-number input{
        justify-self: end;
    }
    .Checkout{
        gap: 1rem;
    }
    .Checkout-summary {
        gap: 0;
    }
    .Checkout-button{
        padding: .5rem;
    }
    /* Popup */
    .Payment{
        max-width: 55%;
    }
    .Payment-container{
        max-width: 50%;
        padding: 2rem;
    }
    .Payment-svg{
        height: 1.25rem;
    }
    .Payment-form , .Payment-buttons{
        margin: 1rem 0 0;
    }
}


/* Responsive Tablet */
@media (max-width: 1024px){
    .Wrapper{
        grid-template-columns: 1fr;
    }
    /* Popup */
    .Payment {
        max-width: 72%;
    }
    .Payment-container{
        padding: 2rem;
     }
    .Payment-data{
        gap: .5rem;
    }
}


@media (max-width: 960px){
    .Wrapper{
        padding: 14dvh 6dvw;

    }
    .Checkout{
        gap: .25rem;
    }
    .Checkout-total{
        font-size: var(--fs-big);
    }
}



@media (max-width: 768px){
    .Wrapper{
        gap: 1rem;
    }
    .Form-presection.isActive{
        justify-content: start;
        gap: 1rem;
    }
    .Form-number input{
        min-width: 100%;
    }
    .Form-button{
        margin: 1.5rem 0 0 0;
    }
    .Checkout{
        padding: 1.5rem;
    }
    /* Popup */
    .Payment-container{
        max-width: 66%;
        padding: 1.5rem;
    }
    /* .Payment-svg , .Payment-title{
        display: none;
    } */
     .Payment{
        max-width: 85%;
        padding: 2rem;
     }
    .Payment-form label{
        color: var(--c-primary-75);
    }
    .Payment-form{
        margin: 1.5rem 0 0;
        gap: .25rem;
    }
    .Payment-data{
        grid-template-columns: repeat( 2 , 1fr );
    }
    .Payment-group--cardnumber{
        grid-column: span 2;
    }
    .Payment-buttons{
        margin: .5rem 0 0;
    }
}


/* Responsive Móvil */
@media (max-width: 480px){
    .Wrapper{
        padding: 12dvh 1rem;
        gap: 1rem;
    }
    .Form{
        gap: initial;
    }
    .Form-presection.isActive{
        justify-content: space-between;
    }
    /* Popip */
    .Payment-container{
        max-width: 80%;
        padding: 1rem;
    }
    .Payment-description{
        display: none;
    }
    .Payment-form{
        margin: .5rem 0 0;
    }
    .Payment-buttons{
        flex-direction: column;
    }
}