/* ========================================================================= */
/* ANIMA MUNDI ON TOUR - STILE PREMIUM ESOTERICO & CORREZIONI UI              */
/* ========================================================================= */

/* Sfondi e Contenitori Generali */
.esoteric-card {
    background: #fff !important;
    border: 1px solid #c5a059 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
    border-radius: 12px;
}

.bg-dark-translucent {
    background: rgba(15, 10, 22, 0.6) !important;
}

.bg-dark-soft {
    background-color: #2a1f3d !important;
}

/* Testi ed Elementi Cromatici */
.text-gold {
    color: #c5a059 !important;
}

.text-purple {
    color: #9d72e6 !important;
}

.border-purple {
    border-color: #5c428a !important;
}

.bg-gold {
    background-color: #c5a059 !important;
}

/* Personalizzazione Input e Select per evitare lo stacco bianco */
.esoteric-card .form-control,
.esoteric-card .form-select {
    background-color: #221831 !important;
    border: 1px solid #4a3765 !important;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 0.6rem 1rem;
    transition: all 0.3s ease;
}

.esoteric-card .form-control:focus,
.esoteric-card .form-select:focus {
    border-color: #c5a059 !important;
    box-shadow: 0 0 8px rgba(197, 160, 89, 0.4) !important;
    color: #ffffff !important;
}

.esoteric-card .input-group-text {
    background-color: #160f22 !important;
    border: 1px solid #4a3765 !important;
    border-right: none;
    min-width: 45px;
    justify-content: center;
}

/* RISOLUZIONE PROBLEMA 1: Visibilità e Contrasto Pulsanti Navigazione */
.btn-gold {
    background: linear-gradient(135deg, #c5a059 0%, #a37f3d 100%) !important;
    border: 1px solid #c5a059 !important;
    color: #0f0a16 !important;
    font-weight: 600;
    letter-spacing: 1px;
    text-uppercase: uppercase;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 1 !important; /* Forza la piena visibilità del bottone */
    display: inline-flex;
    align-items: center;
}

.btn-gold:hover, .btn-gold:focus {
    background: linear-gradient(135deg, #e2be78 0%, #c5a059 100%) !important;
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.6) !important;
    color: #0f0a16 !important;
    transform: translateY(-1px);
}

.btn-outline-purple {
    border: 1px solid #8152cc !important;
    color: #c0a1f5 !important;
    background: transparent !important;
}

.btn-outline-purple:hover {
    background: rgba(129, 82, 204, 0.2) !important;
    color: #ffffff !important;
}

/* Nav Tabs Superiori */
.esoteric-tabs .nav-link {
    color: #232323 !important;
    background: rgba(42, 31, 61, 0.4) !important;
    border: 1px solid #4a3765 !important;
    margin: 0 5px;
    border-radius: 6px !important;
}

.esoteric-tabs .nav-link.active {
    color: #c5a059 !important;
    background: #2a1f3d !important;
    border-color: #c5a059 !important;
}

/* Validazione Grafica Custom */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: #ea4335 !important;
    background-image: none !important;
}

.invalid-feedback {
    color: #ff6b6b !important;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}
/* ========================================================================= */
/* VISIBILITÀ STEP LABELS (PROGRESS BAR MULTI-STEP)                           */
/* ========================================================================= */

/* Risoluzione contrasto: sovrascrive il text-muted di Bootstrap nei form */
.step-progress-wrapper .d-flex span {
    color: #232323 !important; /* Grigio chiaro ad alto contrasto per step non attivi */
    font-size: 0.75rem !important;
    letter-spacing: 1px;
    transition: color 0.4s ease, font-weight 0.4s ease;
}

/* Evidenziazione icone all'interno degli step */
.step-progress-wrapper .d-flex span i {
    color: rgba(197, 160, 89, 0.6) !important; /* Icone oro opaco di base */
    margin-right: 4px;
}

/* Stato Attivo (Gestito dinamicamente o di base sul primo step) */
.step-progress-wrapper .d-flex span.text-gold,
.step-progress-wrapper .d-flex span.fw-bold {
    color: #c5a059 !important; /* Oro Anima Mundi splendente per lo step attivo */
    text-shadow: 0 0 8px rgba(197, 160, 89, 0.3);
}

.step-progress-wrapper .d-flex span.text-gold i {
    color: #c5a059 !important; /* Icona oro brillante per lo step attivo */
}
/* ========================================================================= */
/* OTTIMIZZAZIONE RESPONSIVE PULSANTIERE MULTI-STEP (MOBILE FIRST)           */
/* ========================================================================= */

@media (max-width: 575.98px) {
    /* Forza il contenitore dei pulsanti a mandare a capo gli elementi se lo spazio non basta */
    #form-gruppo .d-flex.justify-content-between,
    #form-tailor .d-flex.justify-content-between {
        flex-wrap: wrap !important;
        gap: 12px !important; /* Aggiunge uno spazio verticale elegante tra i due bottoni quando si impilano */
    }

    /* Modifica i pulsanti impostando la larghezza massima al 100% e forzando l'impilamento */
    #form-gruppo .d-flex.justify-content-between button,
    #form-gruppo .d-flex.justify-content-between .btn,
    #form-tailor .d-flex.justify-content-between button,
    #form-tailor .d-flex.justify-content-between .btn {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important; /* Centra il testo e le icone all'interno del bottone a tutta larghezza */
        margin: 0 !important;
    }
    
    /* Inverte l'ordine visivo se desideri il pulsante di avanzamento (Avanti/Invia) sopra quello di ritorno */
    #form-gruppo .btn-submit-custom,
    #form-gruppo .btn-next,
    #form-tailor .btn-submit-custom,
    #form-tailor .btn-next {
        order: -1 !important; /* Spinge il pulsante principale in cima per una migliore UX mobile */
    }
}
/* ========================================================================= */
/* VISIBILITÀ PLACEHOLDER E FORZATURA UPPERCASE CAMPI ANAGRAFICI             */
/* ========================================================================= */

/* 1. Rende i placeholder perfettamente visibili in grigio chiaro su ogni browser/dispositivo */
.esoteric-card .form-control::placeholder,
#custom-pane .form-control::placeholder {
    color: #b3a8c4 !important; /* Grigio chiaro esoterico ad alto contrasto */
    opacity: 1 !important; /* Forza i browser basati su Firefox/Webkit a mantenere l'opacità al 100% */
}

/* Gestione dei placeholder per i browser legacy o specifici */
.esoteric-card .form-control:-ms-input-placeholder { color: #b3a8c4 !important; }
.esoteric-card .form-control::-ms-input-placeholder { color: #b3a8c4 !important; }

/* 2. Trasforma automaticamente in MAIUSCOLO i testi digitati nei campi Nome e Cognome */
#f1-nome-1, #f1-cognome-1, 
#f1-nome-2, #f1-cognome-2, 
#f2-nome {
    text-transform: uppercase !important;
    letter-spacing: 0.5px; /* Ottimizza la leggibilità del maiuscolo dentro i campi */
}
/* ========================================================================= */
/* RIDUZIONE E ADATTAMENTO FONT-SIZE PLACEHOLDER TEXTAREA (RESPONSIVE)       */
/* ========================================================================= */

/* Riduce in modo specifico la dimensione del font solo per i placeholder delle textarea */
.esoteric-card textarea.form-control::placeholder,
#custom-pane textarea.form-control::placeholder {
    font-size: 0.8rem !important; /* Riduce il testo per farlo stare nel campo */
    line-height: 1.4 !important;  /* Ottimizza l'interlinea per il testo a capo */
}

/* Regola specifica per dispositivi molto piccoli (es. smartphone verticali) */
@media (max-width: 480px) {
    .esoteric-card textarea.form-control::placeholder,
    #custom-pane textarea.form-control::placeholder {
        font-size: 0.72rem !important; /* Ulteriore micro-riduzione di sicurezza */
    }
}
/* ========================================================================= */
/* OTTIMIZZAZIONE RESPONSIVE SELETTORE TAB SUPERIORI (MOBILE ONLY)           */
/* ========================================================================= */

@media (max-width: 767.98px) {
    /* 1. Forza la lista dei tab a disporsi in verticale a tutta larghezza */
    ul.esoteric-tabs.nav-tabs {
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 10px !important;
        gap: 10px !important; /* Assegna un margin/padding visivo identico tra i due elementi */
    }

    /* 2. Rende i contenitori dei bottoni speculari e della medesima lunghezza */
    ul.esoteric-tabs.nav-tabs .nav-item {
        width: 100% !important;
        margin: 0 !important; /* Resetta i margini orizzontali desktop */
    }

    /* 3. Estende i pulsanti al 100% e impedisce tassativamente il ritorno a capo del testo */
    ul.esoteric-tabs.nav-tabs .nav-link {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        white-space: nowrap !important; /* Impedisce alla scritta di andare a capo */
        font-size: 0.85rem !important;  /* Calibra leggermente il testo per farlo risiedere nel display mobile */
        padding: 12px 15px !important;  /* Regola il padding interno per un tocco premium e cliccabile */
        letter-spacing: 0.5px;
    }
}
/* ========================================================================= */
/* RIEPILOGO FORM 1           */
/* ========================================================================= */
#f1-riepilogo-box {
    border-left: 2px solid #c5a059;
    padding-left: 12px;
    letter-spacing: 0.5px;
}
#f1-riepilogo-box strong {
    font-size: 0.7rem;
    letter-spacing: 1px;
    display: inline-block;
    min-width: 110px; /* Allinea verticalmente i due punti del riepilogo */
}