/* ==========================================================================
   ACCREDITA 360S - FOGLIO DI STILE DEDICATO MOBILE & TABLET (mobile.css)
   Release Ufficiale 2026 • Design System Ottanio / Navy / Glassmorphism
   
   IMPORTANTE: QUESTO FILE NON MODIFICA NÉ ALTERA IL DESKTOP (>= 992px).
   Tutti gli elementi mobili sono nascosti al 100% su schermi desktop.
   ========================================================================== */

/* 1. Elementi Mobili: Completamente nascosti di default su Desktop */
.mobile-menu-toggle {
    display: none !important;
}
.mobile-nav-drawer {
    display: none !important;
}
.mobile-nav-overlay {
    display: none !important;
}
.mobile-bottom-bar {
    display: none !important;
}

/* ==========================================================================
   BREAKPOINT TABLET & SMARTPHONE: <= 991px
   ========================================================================== */
@media (max-width: 991px) {

    /* --- A. NAVBAR & HEADER --- */
    .site-navbar {
        padding: 12px 18px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
    }

    .navbar-inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
    }

    .brand-logo-link {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .brand-logo-img {
        height: 38px !important;
        width: auto !important;
        display: block !important;
    }

    /* Nascondi il menu testuale orizzontale su mobile */
    .nav-menu-list {
        display: none !important;
    }

    /* Riorganizza i pulsanti header per far spazio all'hamburger */
    .navbar-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .navbar-actions .btn-nav-login {
        padding: 8px 14px !important;
        font-size: 13px !important;
        border-radius: 20px !important;
    }

    .navbar-actions .btn-nav-start {
        display: none !important; /* Spostato all'interno del drawer mobile e della bottom bar */
    }

    /* Hamburger Toggle Button */
    .mobile-menu-toggle {
        display: inline-flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 42px !important;
        height: 42px !important;
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 12px !important;
        cursor: pointer !important;
        gap: 5px !important;
        padding: 0 !important;
        transition: all 0.25s ease !important;
        z-index: 1001 !important;
    }

    .mobile-menu-toggle:hover, .mobile-menu-toggle:focus {
        background: #e6f4f2 !important;
        border-color: #006b5e !important;
    }

    .mobile-menu-toggle .hamburger-bar {
        width: 20px !important;
        height: 2.2px !important;
        background-color: #0c2340 !important;
        border-radius: 2px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .mobile-menu-toggle.active .hamburger-bar:nth-child(1) {
        transform: translateY(7.2px) rotate(45deg) !important;
        background-color: #006b5e !important;
    }
    .mobile-menu-toggle.active .hamburger-bar:nth-child(2) {
        opacity: 0 !important;
    }
    .mobile-menu-toggle.active .hamburger-bar:nth-child(3) {
        transform: translateY(-7.2px) rotate(-45deg) !important;
        background-color: #006b5e !important;
    }

    /* --- B. MOBILE DRAWER & OVERLAY --- */
    .mobile-nav-overlay {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(12, 35, 64, 0.65) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        z-index: 1002 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }
    .mobile-nav-overlay.open {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .mobile-nav-drawer {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 86% !important;
        max-width: 380px !important;
        height: 100% !important;
        background: #ffffff !important;
        z-index: 1003 !important;
        box-shadow: -10px 0 35px rgba(0, 0, 0, 0.25) !important;
        transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .mobile-nav-drawer.open {
        right: 0 !important;
    }

    .mobile-drawer-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 18px 20px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        background: #f8fafc !important;
    }

    .mobile-drawer-logo img {
        height: 34px !important;
        width: auto !important;
        display: block !important;
    }

    .mobile-drawer-close {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        color: #0c2340 !important;
        font-size: 22px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }

    .mobile-drawer-body {
        padding: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        flex-grow: 1 !important;
    }

    .mobile-drawer-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .mobile-nav-group {
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        transition: border-color 0.2s !important;
    }
    .mobile-nav-group.expanded {
        border-color: #006b5e !important;
        box-shadow: 0 4px 15px rgba(0, 107, 94, 0.08) !important;
    }

    .mobile-nav-heading {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px 16px !important;
        background: #ffffff !important;
        border: none !important;
        font-family: inherit !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: #0c2340 !important;
        cursor: pointer !important;
        text-align: left !important;
    }
    .mobile-nav-heading span {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .mobile-nav-heading span i {
        font-size: 18px !important;
        color: #006b5e !important;
    }
    .mobile-nav-heading .chevron-icon {
        font-size: 18px !important;
        color: #64748b !important;
        transition: transform 0.3s ease !important;
    }
    .mobile-nav-group.expanded .chevron-icon {
        transform: rotate(180deg) !important;
        color: #006b5e !important;
    }

    .mobile-submenu {
        display: none !important;
        flex-direction: column !important;
        background: #f8fafc !important;
        border-top: 1px solid #e2e8f0 !important;
        padding: 8px 12px !important;
        gap: 4px !important;
    }
    .mobile-nav-group.expanded .mobile-submenu {
        display: flex !important;
    }
    .mobile-submenu a {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        color: #334155 !important;
        text-decoration: none !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        transition: background 0.2s, color 0.2s !important;
    }
    .mobile-submenu a i {
        font-size: 16px !important;
        color: #0d9488 !important;
    }
    .mobile-submenu a:hover, .mobile-submenu a:active {
        background: #e6f4f2 !important;
        color: #006b5e !important;
    }

    .mobile-nav-single {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px 16px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        color: #0c2340 !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        background: #ffffff !important;
    }
    .mobile-nav-single span {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .mobile-nav-single span i {
        font-size: 18px !important;
        color: #006b5e !important;
    }

    /* Pulsanti azione drawer */
    .mobile-drawer-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }
    .btn-drawer-start {
        width: 100% !important;
        padding: 14px !important;
        background: #006b5e !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 12px !important;
        font-family: inherit !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        box-shadow: 0 8px 20px rgba(0, 107, 94, 0.28) !important;
        cursor: pointer !important;
    }
    .btn-drawer-login {
        width: 100% !important;
        padding: 13px !important;
        background: #f1f5f9 !important;
        color: #0c2340 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 12px !important;
        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        cursor: pointer !important;
    }

    .mobile-drawer-footer {
        margin-top: auto !important;
        padding-top: 16px !important;
        border-top: 1px solid #e2e8f0 !important;
        text-align: center !important;
    }
    .mobile-drawer-trust {
        font-size: 11.5px !important;
        font-weight: 700 !important;
        color: #006b5e !important;
        margin-bottom: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }
    .mobile-drawer-copyright {
        font-size: 10.5px !important;
        color: #94a3b8 !important;
    }

    /* --- C. HERO SECTION --- */
    .hero-section-wrap {
        padding: 30px 18px 40px !important;
    }

    .hero-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .hero-left-content {
        padding-right: 0 !important;
        text-align: left !important;
    }

    .hero-top-eyebrow {
        font-size: 11px !important;
        letter-spacing: 2px !important;
        margin-bottom: 12px !important;
    }

    .hero-main-heading {
        font-size: 28px !important;
        line-height: 1.2 !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 14px !important;
    }

    .hero-lead-paragraph {
        font-size: 15px !important;
        line-height: 1.55 !important;
        margin-bottom: 24px !important;
    }

    .hero-buttons-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-bottom: 30px !important;
    }

    .btn-hero-start {
        width: 100% !important;
        justify-content: center !important;
        padding: 15px 24px !important;
        font-size: 15px !important;
    }

    .btn-hero-video {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px !important;
        font-size: 13.5px !important;
    }

    .hero-key-metrics {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding-top: 18px !important;
    }

    .metric-item {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        padding: 10px 14px !important;
        border-radius: 12px !important;
        gap: 12px !important;
    }

    .metric-item i {
        font-size: 26px !important;
    }

    .metric-val {
        font-size: 17px !important;
    }

    .metric-lbl {
        font-size: 10.5px !important;
    }

    .doctor-card-container {
        border-radius: 18px !important;
        max-width: 100% !important;
    }

    /* --- D. 4 FEATURE CARDS FLOTTANTI --- */
    .features-strip-container {
        padding: 10px 18px 35px !important;
    }

    .features-grid-quad {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .feat-quad-card {
        padding: 20px 18px !important;
        border-radius: 14px !important;
    }

    .feat-card-heading {
        font-size: 15.5px !important;
    }

    .feat-card-text {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }

    /* --- E. DARK TRUST BAR --- */
    .dark-trust-bar-section {
        padding: 20px 18px !important;
    }

    .dark-trust-bar-inner {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 14px 10px !important;
    }

    .dark-trust-pillar {
        font-size: 12px !important;
        gap: 8px !important;
    }

    .dark-trust-pillar i {
        font-size: 18px !important;
    }

    .dark-trust-sicily-flag {
        grid-column: 1 / -1 !important;
        justify-content: center !important;
        margin-top: 4px !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    /* --- F. SEZIONI DI CONTENUTO (CHI SIAMO, METODO, SICUREZZA) --- */
    .content-section {
        padding: 45px 18px !important;
    }

    .section-header-wrap {
        margin-bottom: 30px !important;
    }

    .section-eyebrow-tag {
        font-size: 11px !important;
        letter-spacing: 2px !important;
    }

    .section-main-title {
        font-size: 26px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    .section-main-desc {
        font-size: 14.5px !important;
        line-height: 1.6 !important;
    }

    .about-split-grid, .method-split-intro, .security-split-grid {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }

    .about-img-box, .method-img-box, .security-img-box {
        border-radius: 16px !important;
        max-height: 240px !important;
    }

    .about-text-box h2 {
        font-size: 24px !important;
        margin-bottom: 14px !important;
    }

    .about-text-box p {
        font-size: 14px !important;
        line-height: 1.65 !important;
        text-align: left !important;
    }

    /* Il Metodo: Step 1, 2, 3 */
    .method-steps-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .method-step-card {
        padding: 20px 18px !important;
        border-radius: 16px !important;
    }

    /* Modelli B2B */
    .pricing-plans-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .b2b-plan-card {
        padding: 24px 20px !important;
        border-radius: 18px !important;
    }

    .b2b-plan-card.highlight-featured {
        transform: none !important;
        border-width: 2px !important;
    }

    /* --- G. MODALI LOGIN & REGISTRAZIONE --- */
    .modal-box-login, .modal-box-register {
        width: calc(100% - 32px) !important;
        max-width: 400px !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        padding: 24px 18px !important;
        border-radius: 18px !important;
    }

    .modal-title-login {
        font-size: 20px !important;
    }

    .modal-desc-login {
        font-size: 13px !important;
        margin-bottom: 16px !important;
    }

    .role-selector-3 {
        gap: 4px !important;
        padding: 4px !important;
    }

    .role-btn-3 {
        font-size: 11.5px !important;
        padding: 7px 6px !important;
    }

    .form-row-2 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .modal-otp-inputs {
        gap: 6px !important;
    }

    .modal-otp-digit {
        width: 38px !important;
        height: 48px !important;
        font-size: 20px !important;
        border-radius: 8px !important;
    }

    /* --- H. SITE FOOTER --- */
    footer.site-footer {
        padding: 45px 18px 85px !important; /* Spazio extra in basso per la mobile bar */
    }

    .footer-inner-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        margin-bottom: 35px !important;
    }

    .footer-brand-info h4 {
        font-size: 20px !important;
    }

    .footer-bottom-bar {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
        font-size: 12px !important;
    }

    /* --- I. MOBILE STICKY BOTTOM BAR (CONVERSION BAR) --- */
    .mobile-bottom-bar {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 62px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
        z-index: 999 !important;
        padding: 8px 16px !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    .btn-mobile-bottom-login {
        flex: 1 !important;
        height: 44px !important;
        border-radius: 10px !important;
        background: #f1f5f9 !important;
        color: #0c2340 !important;
        border: 1px solid #cbd5e1 !important;
        font-family: inherit !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        cursor: pointer !important;
    }

    .btn-mobile-bottom-start {
        flex: 1.3 !important;
        height: 44px !important;
        border-radius: 10px !important;
        background: #006b5e !important;
        color: #ffffff !important;
        border: none !important;
        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        box-shadow: 0 4px 12px rgba(0, 107, 94, 0.3) !important;
        cursor: pointer !important;
    }
}

/* Ottimizzazione schermi molto piccoli (<= 360px, es. iPhone SE) */
@media (max-width: 360px) {
    .hero-main-heading {
        font-size: 24px !important;
    }
    .dark-trust-bar-inner {
        grid-template-columns: 1fr !important;
    }
    .modal-otp-digit {
        width: 34px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
}