body {
    background-color: #fff0f5; 
    font-family: 'Courier New', Courier, monospace; 
    color: #4a4a4a;
    display: flex;
    justify-content: center;
    padding: 10px; /* Ridotto per dare più spazio su mobile */
    margin: 0;
}

.container {
    max-width: 600px;
    width: 100%;
    text-align: center;
}

h1 {
    font-size: 24px; /* Scalato per schermi piccoli */
    margin-bottom: 5px;
}

.form-creazione {
    background: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.input-coppia {
    display: flex;
    gap: 10px;
}

/* Se siamo su telefono, i due input dei nomi vanno uno sotto l'altro */
@media (max-width: 480px) {
    .input-coppia {
        flex-direction: column;
        gap: 12px;
    }
}

.input-coppia input { flex: 1; }

input, button {
    padding: 12px;
    border: 2px solid #ffb6c1;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box; /* Evita che gli input escano dai bordi */
}

button {
    background-color: #ffb6c1;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    border: none;
    font-size: 16px;
    margin-top: 10px;
    width: 100%;
}

button:hover { background-color: #ff91a4; }

.sezione-personalizzazione {
    text-align: left;
    margin-top: 5px;
}
.sezione-personalizzazione label {
    font-size: 14px;
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
}

.color-picker {
    display: flex;
    gap: 15px;
}
.color-opt {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: 0.2s;
}
.color-opt.active { border-color: #4a4a4a; }

.color-rosa { background: #fff8e7; }
.color-celeste { background: #e0f7fa; }
.color-bicolore { background: linear-gradient(90deg, #fff8e7 60%, #ffe4e1 40%); }

.banner-adv {
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border: 2px dashed #e0e0e0;
    border-radius: 10px;
    min-height: 90px; /* Spazio standard per banner mobile */
}

/* STRUTTURA BIGLIETTO RESPONSIVE */
.ticket-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: 100%;
}

.ticket {
    display: flex;
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: background 0.3s;
}

.hearts-bg {
    display: none;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffb6c1' opacity='0.25' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.5 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
    background-size: 40px 40px;
}

.ticket-left {
    padding: 20px;
    flex: 2;
    text-align: left;
    z-index: 1;
}

.ticket-right {
    padding: 20px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    z-index: 1;
}

/* TEMI COLORE */
.tema-rosa { background-color: #fff8e7; border: 3px solid #ffb6c1; }
.tema-rosa .ticket-left { border-right: 3px dashed #ffb6c1; }
.tema-rosa .ticket-right { background-color: #ffe4e1; }

.tema-celeste { background-color: #e0f7fa; border: 3px solid #4dd0e1; }
.tema-celeste .ticket-left { border-right: 3px dashed #4dd0e1; }
.tema-celeste .ticket-right { background-color: #b2ebf2; }

.tema-bicolore { background-color: #fff8e7; border: 3px solid #ffb6c1; }
.tema-bicolore .ticket-left { border-right: 3px dashed #ffb6c1; background-color: #fffba0;}
.tema-bicolore .ticket-right { background-color: #ffc0cb; }

/* Testi dentro il biglietto flessibili */
.cinema-title { font-size: 11px; font-weight: bold; letter-spacing: 1px; color: #888; }
.movie-title { font-size: 18px; font-weight: bold; margin: 10px 0; text-transform: uppercase; color: #333; word-break: break-word; }
.ticket-details p { margin: 4px 0; font-size: 11px; }
.stub-txt { font-size: 11px; font-weight: bold; color: #999; letter-spacing: 2px; }
.names { font-size: 12px; font-weight: bold; margin: 10px 0; text-transform: uppercase; word-break: break-word; }
.barcode { font-size: 12px; letter-spacing: 2px; font-weight: bold; opacity: 0.7; word-break: break-all; }

.spotify-wrapper {
    margin-top: 25px;
    width: 100%;
}

/* OPTIMIZATION FOR MOBILE SCREENS */
@media (max-width: 500px) {
    .ticket {
        flex-direction: column; /* Il talloncino va sotto su schermi microscopici se non c'è spazio */
    }
    .tema-rosa .ticket-left, .tema-celeste .ticket-left, .tema-bicolore .ticket-left {
        border-right: none;
        border-bottom: 3px dashed #ffb6c1;
    }
    .tema-celeste .ticket-left { border-bottom-color: #4dd0e1; }
    .ticket-right {
        flex-direction: row;
        justify-content: space-between;
        padding: 15px 20px;
    }
    .names { margin: 0; }
    .barcode { display: none; } /* Nascondiamo il codice a barre su mobile stretto per estetica */
}