/* --- START OF FILE custom-style.css (Business Premium Version 2025) --- */

/* --- 1. Variabili e Base --- */
:root {
    --primary-color: #0d6efd;       /* Blu Bootstrap base */
    --primary-gradient: linear-gradient(135deg, #0d6efd 0%, #0043a8 100%); /* Gradiente Blu */
    --brand-blue: #9bc0d5;          /* Azzurro Nepi */
    --brand-brown: #b25f41;         /* Marrone Nepi */
    --brand-yellow: #f0d471;        /* Giallo Nepi */
    --text-dark: #495057;
    --bg-light: #f4f7f6;
}

/* Layout Flexbox per Sticky Footer e Altezza Piena */
html, body {
    height: 100%;
    margin: 0;
}

body {
    background-color: var(--bg-light);
    font-family: 'Poppins', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Il contenitore principale si espande */
.container-fluid {
    flex: 1 0 auto;
    width: 100%;
}

/* Colori Testo Brand */
.nepifontc1 { color: var(--brand-brown) !important; }
.nepifontc2 { color: var(--brand-yellow) !important; }
.nepifontc3 { color: var(--primary-color) !important; font-weight: 700; }


/* --- 2. Sidebar (Menu Laterale) --- */
.sidebar {
    height: 100vh;
    width: 20%;
    position: fixed;
    top: 0; left: 0;
    z-index: 9999;
    background: linear-gradient(180deg, #9bc0d5 0%, #8ab3ca 100%) !important;
    display: flex; flex-direction: column;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
    transition: width 0.3s ease;
}

.sidebar-content {
    flex-grow: 1; overflow-y: auto; padding: 1rem;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.5) transparent;
}

/* Voci del Menu */
.img-wrapper {
    margin-bottom: 8px; border-radius: 12px;
    transition: all 0.2s ease;
}
.img-wrapper a, .img-wrapper button {
    display: flex; align-items: center; padding: 12px 15px;
    color: #fff; text-decoration: none; font-weight: 500;
    background: transparent; border: none; width: 100%; text-align: left;
}
.img-wrapper img, .img-wrapper i {
    width: 24px; margin-right: 15px; font-size: 1.2rem;
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.1));
}
.img-label { font-size: 0.95rem; }

/* Hover e Active Sidebar */
.img-wrapper:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
}
.img-wrapper.active {
    background-color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.img-wrapper.active a, .img-wrapper.active i {
    color: var(--brand-brown); /* Testo scuro su sfondo bianco */
}


/* --- 3. Card e Contenitori --- */
.border-custom {
    border: none !important;
    border-radius: 25px !important;
    background-color: #ffffff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0,0,0,0.03);
    padding: 2.5rem !important;
}


/* --- 4. Form Inputs (Moderni) --- */
.form-control, .form-select {
    background-color: #fcfcfc;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 12px 15px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    background-color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
    outline: none;
}

/* Input Group (es. Cerca + QR) */
.input-group .form-control {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.input-group .btn {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
}


/* --- 5. PULSANTI (Restyling Totale) --- */
.btn {
    border-radius: 12px;
    padding: 10px 24px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: none;
}

/* Pulsante Primario (Azione Principale) */
.btn-primary {
    background: var(--primary-gradient);
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.35);
    color: white;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.4);
}
.btn-primary:active { transform: translateY(0); }

/* Pulsante Secondario (es. QR) */
.btn-secondary, .btn-outline-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white; border: none;
    box-shadow: 0 4px 10px rgba(108, 117, 125, 0.3);
}
.btn-secondary:hover {
    filter: brightness(110%);
    transform: translateY(-1px);
}

/* Pulsanti Link Sidebar */
.btn-sidebar-link {
    text-align: left; padding-left: 0; color: white;
}


/* --- 6. Radio Button Cards (Novità UX) --- */
.radio-card-group {
    display: flex; gap: 15px; margin-bottom: 20px;
}
.radio-card-wrapper {
    flex: 1; position: relative;
}
.radio-card-wrapper input[type="radio"] {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.radio-card-label {
    display: block;
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 15px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.radio-card-label h4 { font-size: 1.1rem; margin-bottom: 5px; color: var(--text-dark); }
.radio-card-label em { font-size: 0.85rem; color: #888; font-style: normal; display: block;}

/* Stati Selezionati */
#aggiungi_punti:checked + .radio-card-label {
    border-color: var(--primary-color);
    background-color: rgba(13, 110, 253, 0.05);
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.15);
}
#aggiungi_punti:checked + .radio-card-label h4 { color: var(--primary-color); }

#scarica_punti:checked + .radio-card-label {
    border-color: var(--brand-brown);
    background-color: rgba(178, 95, 65, 0.05);
    box-shadow: 0 4px 10px rgba(178, 95, 65, 0.15);
}
#scarica_punti:checked + .radio-card-label h4 { color: var(--brand-brown); }


/* --- 7. Mobile --- */
@media (max-width: 991.98px) {
    /* Sidebar Mobile */
    .sidebar { width: 0; overflow: hidden; opacity: 0; }
    .sidebar.active { width: 85%; opacity: 1; box-shadow: 100vw 0 0 rgba(0,0,0,0.5); }
    #sidebarToggle {
        display: block; position: fixed; top: 15px; right: 15px; z-index: 10000;
        background-color: var(--brand-blue); border: none; border-radius: 50%;
        width: 45px; height: 45px; color: white; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }
    
    /* Layout Mobile */
    .col-md-8, .col-md-10 { width: 100%; padding: 0 15px !important; }
    .radio-card-group { flex-direction: column; } 

    /* Spazio extra fondo pagina per pulsanti */
    body { padding-bottom: 100px !important; }
    .main-content-container, .container, .container-fluid { padding-bottom: 80px !important; }
    form { margin-bottom: 60px !important; }
    
    /* Footer Spazio */
    footer {
        position: relative !important;
        margin-top: 50px !important;
        padding-bottom: 100px !important; 
    }
}

/* --- Iubenda --- */
.iub__us-widget__wrapper { display: none; }


/* --- FIX CRITICO ALTEZZA PAGINA (Mobile & Desktop) --- */

/* 1. Reset Altezza e Flex per Body */
html, body {
    height: 100%;
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 2. Sovrascrittura Potente di Bootstrap .h-100 */
/* Questo è il colpevole: h-100 blocca l'altezza */
.container-fluid.h-100, 
.row.h-100 {
    height: auto !important; /* Disabilita altezza fissa */
    min-height: 100vh !important; /* Usa min-height per coprire tutto */
    flex: 1 0 auto; /* Espanditi se necessario */
}

/* 3. Colonna Contenuto */
/* Deve espandersi per riempire lo spazio verticale */
.col-md-10 {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Su mobile, se c'è poco contenuto, lo centra verticalmente */
    justify-content: center; 
}

/* 4. Fix specifico Mobile per evitare spazi bianchi sotto */
@media (max-width: 991.98px) {
    .container-fluid.h-100, .row.h-100 {
        min-height: 100vh;
        height: auto !important;
    }
    
    .col-md-10 {
        /* Rimuovi eventuali padding che creano spazi strani */
        padding-bottom: 0 !important; 
        
        /* Assicurati che lo sfondo (es. del body) sia visibile */
        background-color: transparent !important; 
    }
    
    /* Forza il footer in fondo */
    .footer {
        margin-top: auto;
    }
}