/**
 * Vulc Formidable UI - Topbar Layout & Stitch Integration
 */

:root {
    --vulc-primary: #00323d;
    --vulc-secondary: #7d5700;
    --vulc-surface: #f8f9fb;
    --vulc-surface-low: #f2f4f6;
    --vulc-surface-high: #e6e8ea;
    --vulc-surface-highest: #e0e3e5;
    --vulc-on-surface: #191c1e;
    --vulc-on-surface-variant: #40484b;
    --vulc-outline-variant: #c0c8cb;
    --vulc-btn-bg: #f8b100;
    --vulc-btn-text: #674700;
    
    --vulc-font-heading: 'Plus Jakarta Sans', sans-serif;
    --vulc-font-body: 'Inter', sans-serif;
}

.frm_forms {
    position: relative;
    font-family: var(--vulc-font-body);
    color: var(--vulc-on-surface);
}

/* Stili Nativi Formidable Override */
.frm_forms .frm_primary_label {
    font-family: var(--vulc-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vulc-primary);
    margin-bottom: 0.75rem;
}

.frm_forms .frm_description {
    color: var(--vulc-on-surface-variant);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.frm_forms input[type="text"],
.frm_forms input[type="email"],
.frm_forms input[type="number"],
.frm_forms select,
.frm_forms textarea {
    width: 100%;
    background-color: var(--vulc-surface-highest) !important;
    border: none !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
    color: var(--vulc-on-surface);
    transition: all 0.3s ease;
}

.frm_forms input:focus,
.frm_forms textarea:focus {
    box-shadow: 0 0 0 2px var(--vulc-primary) !important;
    background-color: #ffffff !important;
    outline: none;
}

.frm_forms .frm_opt_container .frm_radio,
.frm_forms .frm_opt_container .frm_checkbox {
    border: 1px solid rgba(192, 200, 203, 0.4);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.frm_forms .frm_submit input[type="submit"],
.frm_forms .frm_submit input[type="button"] {
    background-color: var(--vulc-btn-bg) !important;
    color: var(--vulc-btn-text) !important;
    font-family: var(--vulc-font-heading);
    font-weight: 700;
    padding: 0.75rem 2.5rem !important;
    border-radius: 0.75rem !important;
    border: none !important;
    cursor: pointer;
}

/* --- TOPBAR CUSTOM & PROGRESS TRACKER --- */
.vulc-scroll-trigger {
    position: absolute;
    top: -50px; /* Offset pre-calcolato */
    width: 1px;
    height: 1px;
    visibility: hidden;
}

.vulc-custom-topbar {
    position: sticky;
    top: 90px; /* Offset per l'header Sticky di Divi */
    background: var(--vulc-surface-low);
    padding: 2rem;
    border-radius: 0.75rem;
    margin-bottom: 2.5rem;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.vulc-progress-content {
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
    max-height: 150px;
    opacity: 1;
    margin-bottom: 1rem;
}

.vulc-progress-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--vulc-on-surface-variant);
}

.vulc-progress-stats {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.vulc-progress-text {
    font-size: 1.875rem;
    font-weight: 900;
    color: var(--vulc-secondary);
}

.vulc-progress-rail {
    height: 0.5rem;
    background: rgba(192, 200, 203, 0.3);
    border-radius: 999px;
    position: relative;
}

.vulc-progress-fill {
    height: 100%;
    background: var(--vulc-secondary);
    width: 0%;
    transition: width 0.4s ease-out;
    position: relative;
    border-radius: 999px;
}

/* Il Pallino */
.vulc-progress-dot {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 4px solid var(--vulc-secondary);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.4s ease;
}

/* --- MODALITÀ COMPACT (Allo Scroll) --- */
.vulc-custom-topbar.vulc-is-compact {
    padding: 1rem 1.5rem;
    border-radius: 999px; /* Da rettangolo a pillola */
    background: #ffffff; /* Stacca maggiormente in scroll */
    border: 1px solid var(--vulc-outline-variant);
}

.vulc-custom-topbar.vulc-is-compact .vulc-progress-content {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
}

.vulc-custom-topbar.vulc-is-compact .vulc-progress-dot {
    width: 14px;
    height: 14px;
    border-width: 3px;
}

/* --- VULC LOADING OVERLAY (Mitigazione Latenza Percepita) --- */
.frm_forms {
    position: relative;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.frm_forms.vulc-is-loading {
    pointer-events: none; /* Previene doppi click sui bottoni */
    opacity: 0.5;
    filter: grayscale(50%) blur(1px);
}

.frm_forms.vulc-is-loading::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 6px solid var(--vulc-surface-high);
    border-top-color: var(--vulc-secondary);
    border-radius: 50%;
    animation: vulc-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    z-index: 99999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

@keyframes vulc-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- VULC UTILITIES --- */
/* Nasconde il box di input/textarea mantenendo etichetta e descrizione visibili */
.frm_form_field.vulc-hide-input-only input,
.frm_form_field.vulc-hide-input-only textarea,
.frm_form_field.vulc-hide-input-only select {
    display: none !important;
}

/* Ottimizza la spaziatura verticale: avvicina la descrizione all'etichetta 
   poiché l'elemento input in mezzo è stato rimosso visivamente */
.frm_form_field.vulc-hide-input-only .frm_primary_label {
    margin-bottom: 0.25rem !important;
}
.frm_form_field.vulc-hide-input-only .frm_description {
    margin-top: 0 !important;
}