/* =========================================
   9. ENTRY FORM & CONTACT
   ========================================= */
/* CORREZIONE SPAZIO HEADER */
.contact-section,
.entry-section {
    padding-bottom: 100px;
}

.contact-wrapper,
.booking-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* Sinistra larga, Destra stretta */
    gap: 30px;
    align-items: start;
}

/* Specifico per Contact Wrapper (layout diverso: Info a sx, Form a dx) */
.contact-wrapper {
    grid-template-columns: 1fr 1.5fr;
}

/* Stile Base Card */
.contact-info-card,
.contact-form-card,
.form-card {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 30px;
    /* Arrotondato moderno */
    padding: 40px;
    backdrop-filter: blur(20px);
}

.form-card {
    margin-bottom: 30px;
}

.contact-info-card h3,
.contact-form-card h3,
.form-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--color-white);
}

.form-card h3 {
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding-bottom: 10px;
}

/* =========================================
   FIX CONTACT INFO SPECIFICS (AGGIORNATO)
   ========================================= */
.contact-info-card {
    text-align: left;
    display: flex;
    flex-direction: column;
    /* RIMOSSO height: 100% che causava lo spazio vuoto se l'altra colonna era troppo lunga */
    justify-content: flex-start;
}

/* Descrizione sotto il titolo (Reach out...) */
.contact-info-card>p {
    font-size: 0.9rem;
    color: var(--color-hot-pink);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
    /* Spazio ridotto un po' */
    line-height: 1.6;
}

/* Contenitore riga Icona + Testo */
.info-item {
    display: flex;
    align-items: center;
    /* Centra verticalmente */
    gap: 20px;
    margin-bottom: 25px;
    /* Spazio ridotto tra gli item */
}

/* Cerchio Icona */
.icon-box {
    width: 60px;
    height: 60px;
    min-width: 60px;
    /* FONDAMENTALE: impedisce schiacciamento su mobile */
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: var(--color-hot-pink);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

/* Hover sull'intera riga illumina l'icona */
.info-item:hover .icon-box {
    background: var(--color-hot-pink);
    color: white;
    box-shadow: 0 0 15px rgba(0, 180, 216, 0.4);
}

/* Testi dettagli contatto */
.info-details h4 {
    margin: 0 0 5px 0;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-white);
    font-family: 'Playfair Display', serif;
}

.info-details p {
    font-size: 1rem;
    color: rgba(255, 255, 255, .7);
    font-family: 'Outfit', sans-serif;
    margin: 0;
}

/* Social Icon (Youtube) */
.social-links {
    margin-top: 20px;
    /* Spazio fisso invece di 'auto' per evitare il buco enorme */
    padding-top: 20px;
    display: flex;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Opzionale: linea separatrice carina */
}

/* =========================================
   FORM INPUTS & STYLES
   ========================================= */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    text-align: left;
    flex: 1;
}

/* Footer del form (Bottone) */
.form-footer {
    margin-top: 10px;
}

.input-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.form-group label {
    font-size: .9rem;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: 1px;
}

.form-group input,
.form-group textarea,
.form-group select {
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    padding: 15px;
    /* Padding aumentato per touch */
    color: var(--color-white);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    resize: vertical;
    width: 100%;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--color-hot-pink);
    background: rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px rgba(0, 180, 216, .2);
}

.form-group select option {
    background: #1a1a1a;
    color: #fff;
}

.form-group input[type="date"],
.form-group input[type="time"] {
    color-scheme: dark;
}

/* =========================================
   ENTRY FORM SPECIFICS
   ========================================= */
.input-label-group strong {
    color: var(--color-hot-pink);
    display: block;
    margin-bottom: 10px;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Alert Box */
.alert-box {
    background: rgba(220, 53, 69, .15);
    border: 1px solid #dc3545;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    color: #fcc;
}

.alert-box i {
    font-size: 2rem;
    color: #dc3545;
}

.alert-content h4 {
    margin: 0 0 5px 0;
    color: #ff6b6b;
    text-transform: uppercase;
}

.alert-content p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.4;
}

/* Logistics Grid */
.logistics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.log-group h4 {
    color: var(--color-white);
    font-size: 1rem;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding-bottom: 5px;
    font-family: 'Playfair Display', serif;
}

/* Package Selection Custom Radio */
.package-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.pkg-option input {
    display: none;
}

.pkg-box {
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    background: rgba(0, 0, 0, .2);
}

.pkg-name {
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: 5px;
}

.pkg-price {
    font-size: 1.2rem;
    font-family: 'Playfair Display', serif;
}

.pkg-option input:checked+.pkg-box {
    border-color: var(--color-hot-pink);
    background: rgba(0, 180, 216, .2);
    box-shadow: 0 0 15px rgba(0, 180, 216, .3);
}

.basic-box {
    color: #d63384;
}

.bronze-box {
    color: #cd7f32;
}

.silver-box {
    color: silver;
}

.gold-box {
    color: gold;
}

.platinum-box {
    color: #e5e4e2;
}

.badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--color-hot-pink);
    color: #fff;
    font-size: .6rem;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Extra Row */
.extra-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, .05);
    padding: 15px;
    border-radius: 10px;
}

.extra-label strong {
    display: block;
    color: #fff;
}

.extra-label span {
    font-size: .8rem;
    color: rgba(255, 255, 255, .6);
}

.extra-input input {
    width: 60px;
    text-align: center;
    background: #000;
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    padding: 5px;
    border-radius: 5px;
}

/* Sticky Summary Card */
.summary-card {
    background: rgba(0, 0, 0, .6);
    border: 1px solid var(--color-hot-pink);
    border-radius: 20px;
    padding: 30px;
    position: sticky;
    top: 100px;
    backdrop-filter: blur(15px);
}

.summary-lines .line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, .8);
    font-size: .95rem;
}

.summary-lines hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin: 15px 0;
}

.summary-lines .total {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-hot-pink);
}

.secure-note {
    text-align: center;
    font-size: .8rem;
    color: #0f0;
    margin-top: 15px;
}

/* Modal Pagamento */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: #1a1a1a;
    border: 1px solid var(--color-hot-pink);
    border-radius: 20px;
    padding: 40px;
    width: 90%;
    max-width: 400px;
    position: relative;
    text-align: center;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}

/* --- STILI PER MODALITÀ 'GIÀ PAGATO' (EDIT MODE) --- */
.summary-card.is-paid {
    border: 2px solid #2ecc71;
    /* Bordo Verde */
}

.summary-card.is-paid h3 {
    color: #2ecc71 !important;
    /* Titolo Verde */
}

.summary-card.is-paid .line.total {
    color: #2ecc71;
    /* Totale Verde */
    border-top: 1px solid #2ecc71;
}

.paid-stamp {
    text-align: center;
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 800;
    text-transform: uppercase;
    border: 1px dashed #2ecc71;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Rende la colonna destra "sticky" nel suo insieme */
/* Modifica SOLO il valore 'top' qui */
.form-column-right {
    position: sticky;
    top: 110px;
    /* <--- ERA 20px. Aumentalo a 110px o 120px */
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: fit-content;
    z-index: 5;
    /* Assicuriamoci che non vada sopra il menu a tendina se ne hai uno */
}

/* Rimuovi sticky dalla card interna (se c'era) per evitare conflitti */
.summary-card {
    position: relative !important;
    top: auto !important;
    /* Il resto del tuo stile rimane uguale */
}

/* Stile specifico per il bottone quando è fuori (Update Info) */
#btnProceed.update-btn-style {
    margin-top: 0 !important;
    /* Gestito dal gap del genitore */
    width: 100%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* --- SELETTORE NOTTI (EXTRA NIGHTS) --- */
.nights-selector {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 20px;
}

.btn-night {
    flex: 1;
    /* Si dividono lo spazio in 3 parti uguali */
    padding: 12px;
    border: 1px solid #444;
    background: #1e1e1e;
    color: #aaa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    text-align: center;
}

.btn-night:hover {
    background: #333;
    color: white;
}

/* Stile per il bottone selezionato */
.btn-night.active {
    background-color: var(--color-hot-pink);
    border-color: var(--color-hot-pink);
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 180, 216, 0.3);
}

/* Stile disabilitato (per quando è pagato) */
.btn-night:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Classe per nascondere sezioni (Uomo o Donna) */
.hidden-section {
    display: none !important;
}

/* Stile per il selettore Tipo Iscrizione (Simile a nights-selector) */
.type-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}

.btn-type {
    flex: 1;
    padding: 12px;
    border: 1px solid #444;
    background: #1e1e1e;
    color: #aaa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    text-align: center;
    font-weight: 500;
}

.btn-type:hover {
    background: #333;
    color: white;
}

.btn-type.active {
    background-color: #0984e3;
    /* Un blu diverso dal rosa per distinguerlo */
    border-color: #0984e3;
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(9, 132, 227, 0.3);
}

.btn-type:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- STEP 1: SELEZIONE INIZIALE --- */
#step-1-selection {
    text-align: center;
    padding: 40px 20px;
    max-width: 800px;
    margin: 0 auto;
}

.big-btn-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

.big-type-btn {
    flex: 1;
    min-width: 200px;
    padding: 30px 20px;
    background: #1e1e1e;
    border: 2px solid #333;
    border-radius: 15px;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.big-type-btn i {
    font-size: 2rem;
    color: var(--color-hot-pink);
    margin-bottom: 10px;
}

.big-type-btn:hover {
    background: #333;
    border-color: var(--color-hot-pink);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Nascondiamo il form all'inizio */
#entryForm {
    display: none;
    /* Magia: appare solo dopo la scelta */
    animation: fadeInUp 0.6s ease;
}

/* --- RIQUADRO CAMBIO TIPO (SOTTO AL RIEPILOGO) --- */
.change-type-card {
    background: #1e1e1e;
    /* Stesso sfondo delle altre card */
    border: 1px solid #333;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    /* Spazio tra il riepilogo e questo box */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-change-type {
    background: transparent;
    border: 1px solid #555;
    color: #ccc;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    width: 100%;
}

.btn-change-type:hover {
    background: #333;
    border-color: var(--color-hot-pink);
    color: white;
}

.btn-change-type i {
    margin-right: 8px;
}