/* ========================================
   MOBILE OPTIMIZATIONS FOR MAIN.CSS
   ======================================== */
/* TEST CACHE BUSTING - ${new Date().toISOString()} - WATCH ATTIVO! */

/* Performance optimizations for mobile */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Enable text selection for specific elements */
input,
textarea,
.editable-content {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Smooth scrolling for better UX */
html {
  scroll-behavior: auto; /* Cambiato da smooth ad auto per evitare scroll automatico */
  -webkit-overflow-scrolling: touch;
  scroll-top: 0 !important; /* Forza scroll in cima */
}

/* Base mobile optimizations */
@media (max-width: 768px) {
  /* Body and general layout */
  body {
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: auto !important; /* Forza scroll auto per evitare comportamenti indesiderati */
    justify-content: flex-start !important; /* Forza gli elementi a partire dall'inizio */
    align-items: flex-start !important; /* Forza gli elementi a partire dall'inizio */
    scroll-top: 0 !important; /* Forza scroll in cima */
    /* border: 3px solid yellow !important; */ /* Bordo giallo per body */

    height: auto !important; /* Permette al body di espandersi */
    min-height: 100px !important; /* Min-height standard */
    max-height: 100dvh !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Page wrapper */
  .page-wrapper {
    min-height: 100dvh;
    max-height: 100dvh; /* Dynamic viewport height per Safari */
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden !important; /* Ripristino scroll verticale del page-wrapper */
    position: relative;
    scroll-behavior: auto !important; /* Forza scroll auto per evitare comportamenti indesiderati */
    justify-content: flex-start !important; /* Forza gli elementi a partire dall'inizio */
    align-items: stretch !important; /* Cambio da flex-start a stretch per espandere gli elementi */
    scroll-top: 0 !important; /* Forza scroll in cima */
    /* border: 3px solid orange !important; */ /* Bordo arancione per page-wrapper */

    display: flex !important; /* Aggiungo display flex */
    flex-direction: column !important; /* Layout verticale */
    height: auto !important; /* Permette al page-wrapper di espandersi */
    contain: layout style !important; /* Contiene il layout */
    box-sizing: border-box !important;
  }

  /* Sezione Alternata - Mobile */
  .alternating-cta-section {
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 80px 15px 60px 15px !important;
    margin: 0px 0 0 0 !important;
    border-radius: 20px 20px 0px 0px !important;
  }

  .alternating-cta-buttons {
    gap: 0px !important;
    margin-bottom: 30px !important;
  }

  .alternating-btn {
    padding: 10px 18px !important;
    font-size: 1rem !important;
    flex: 1;
    min-width: 140px;
  }

  .alternating-cta-content {
    min-height: auto !important;
  }

  .alternating-section-wrapper {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .alternating-section-content {
    padding: 10px !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .alternating-section-image {
    max-width: 100% !important;
    width: 100% !important;
    height: 150px !important;
    max-height: 150px !important;
    order: -1;
  }

  .alternating-section-image img {
    height: 100% !important;
    border-radius: 15px !important;
  }

  .alternating-icon {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.4rem !important;
    margin: 0 auto 0px auto !important;
  }

  .alternating-section-content .alternating-icon {
    margin: 0 auto 0px auto !important;
  }

  .alternating-title {
    font-size: 1.4rem !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }

  .alternating-description {
    font-size: 1rem !important;
    margin-bottom: 25px !important;
    padding: 0px !important;
    text-align: center !important;
  }

  .alternating-cta-actions {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }

  .alternating-cta-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 24px !important;
    font-size: 0.95rem !important;
    justify-content: center !important;
  }

  /* Sezione Suggerimenti - Mobile */
  .suggestions-section {
    padding: 80px 0 30px 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    gap: 0px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* Quando la sezione alternata è presente, la sezione suggerimenti non ha border-radius superiore */
  .alternating-cta-section + .suggestions-section {
    border-radius: 0 !important;
  }
  .suggestions-header {
    margin-bottom: 0px !important;
  }

  .suggestions-title {
    font-size: 1.4rem !important;
    flex-direction: column !important;
    gap: 0px !important;
    text-align: left !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 15px !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
  }

  .suggestions-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    padding: 10px 15px 20px 15px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .suggestions-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .suggestion-card {
    padding: 20px !important;
    border-radius: 15px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    width: 280px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0px 12px rgba(0, 0, 0, 0.2) !important;
  }

  .card-header {
    margin-bottom: 15px !important;
  }

  .card-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.2rem !important;
  }

  .card-content h3 {
    font-size: 1.2rem !important;
  }

  .card-content p {
    font-size: 0.9rem !important;
    margin-bottom: 15px !important;
  }

  .card-stats {
    gap: 10px !important;
    margin-bottom: 20px !important;
  }

  .stat-item {
    font-size: 0.85rem !important;
  }

  .suggestion-btn {
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
  }

  /* Background optimizations for mobile */
  .sfondo-container {
    top: 0 !important;
    transform: translateY(0) !important; /* Rimosso il 10% che causava scroll */
    left: 0 !important;
    width: 100% !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    z-index: 0 !important;
    margin: 0 !important;
    filter: brightness(100%) !important;
    will-change: transform;
  }
  .sfondo-container-diretto {
    top: 10dvh !important;
    width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 100% !important;
    border-radius: 0px !important;
    height: 70dvh !important;
    border-radius: 0px 0px 0px 0px !important;
  }
  .sfondo {
    left: 57.5% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
    object-position: center 0% !important;
    will-change: transform, opacity;
    border-radius: 0px !important;
    min-width: 115% !important;
    max-width: 115% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
  }
  .sfondo-desktop-container {
    display: none !important;
  }

  .sfondo-desktop {
    display: none !important;
  }

  .sfondo-mobile {
    display: block !important;
  }

  /* Main container adjustments */
  main {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 100dvh !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    max-height: 100dvh !important;
    padding: 0 0 0 0 !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
    scroll-top: 0 !important; /* Forza scroll in cima */
    scroll-behavior: auto !important; /* Disabilita scroll smooth */
    /* border: 3px solid purple !important; */ /* Bordo viola per main */
    /* background-color: rgba(
      128,
      0,
      128,
      0.1
    ) !important; */ /* Sfondo viola leggero */
    flex: 1 !important; /* Permette al main di espandersi */
    overflow-y: auto !important; /* Ripristino scroll verticale del main */
    overflow-x: hidden !important; /* Nascondo scroll orizzontale */
  }

  .blocco {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Forza il primo blocco a partire dall'inizio */
  .blocco.numero-uno {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: flex-start !important;
  }

  /* Assicura che il main-intestazione-container sia scrollabile */
  .main-intestazione-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
  }
  .main-intestazione-landing {
    height: calc(92.5dvh - 65px) !important;
    max-height: calc(92.5dvh - 65px) !important;
    min-height: calc(92.5dvh - 65px) !important;
  }

  /* Percorso di spiegazione - adattamento al 100% larghezza */
  .main-intestazione-ricerca,
  .main-spiegazione,
  .blocco.numero-uno,
  .blocco.numero-tre,
  .blocco.numero-quattro,
  .blocco.numero-cinque,
  .blocco.numero-sei,
  .blocco.numero-sette,
  .blocco.numero-otto,
  .blocco.numero-nove,
  .blocco.numero-dieci {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .spiegazione-main.come-funziona {
    border-radius: 0px !important;
  }

  /* Explanation buttons container - mobile styles */
  .explanation-buttons-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0px 15px !important;
    margin: 40px 0px 100px 0px !important;
    height: 0px !important;
    min-height: 0px !important;
    max-height: 0px !important;
    scroll-margin-top: 40px !important;
    border: 1px solid #e60000 !important;
    border-radius: 0px !important;
    overflow: visible !important;
  }

  .explanation-buttons-container.due {
    margin: 30px 0px 40px 0px !important;
    height: 0px !important;
    min-height: 0px !important;
    max-height: 0px !important;
  }

  .explanation-btn {
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: #ffffff !important;
    color: #353535 !important;
    border-radius: 50px !important;
    border: 2px solid #353535 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-width: 140px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .explanation-btn:hover {
    background: #f5f5f5 !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(230, 0, 0, 0.3) !important;
  }

  .explanation-btn.active {
    border: 2px solid #e60000 !important;
    background: white !important;
    color: #e60000 !important;
    box-shadow: 0 4px 12px rgba(230, 0, 0, 0.3) !important;
  }

  .explanation-btn.active:hover {
    color: #c60000 !important;
    border: 2px solid #c60000 !important;
    background: #f7f7f7 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(230, 0, 0, 0.4) !important;
  }

  .main-intestazione-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    border-radius: 0px !important;
  }

  /* Contenitori interni del percorso di spiegazione */
  .main-intestazione-ricerca .container,
  .main-spiegazione .container,
  .blocco.numero-uno .container,
  .blocco.numero-tre .container,
  .blocco.numero-quattro .container,
  .blocco.numero-cinque .container,
  .blocco.numero-sei .container,
  .blocco.numero-sette .container,
  .blocco.numero-otto .container,
  .blocco.numero-nove .container,
  .blocco.numero-dieci .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Immagini e contenuti del percorso di spiegazione */
  .main-intestazione-ricerca img,
  .main-spiegazione img,
  .blocco.numero-uno img,
  .blocco.numero-tre img,
  .blocco.numero-quattro img,
  .blocco.numero-cinque img,
  .blocco.numero-sei img,
  .blocco.numero-sette img,
  .blocco.numero-otto img,
  .blocco.numero-nove img,
  .blocco.numero-dieci img {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
    object-fit: cover !important;
    loading: lazy;
  }

  /* Escludi le immagini del footer dalle regole sopra */
  .blocco.numero-uno .footer-container img,
  .blocco.numero-uno .modern-footer img,
  .blocco.numero-uno .footer-brand img,
  .blocco.numero-uno .footer-logo {
    width: auto !important;
    height: 30px !important;
    max-width: none !important;
    object-fit: contain !important;
  }

  /* Testi del percorso di spiegazione */
  .main-intestazione-ricerca h1,
  .main-intestazione-ricerca h2,
  .main-intestazione-ricerca h3,
  .main-intestazione-ricerca p,
  .main-spiegazione h1,
  .main-spiegazione h2,
  .main-spiegazione h3,
  .main-spiegazione p,
  .blocco.numero-uno h1,
  .blocco.numero-uno h2,
  .blocco.numero-uno h3,
  .blocco.numero-uno p,
  .blocco.numero-tre h1,
  .blocco.numero-tre h2,
  .blocco.numero-tre h3,
  .blocco.numero-tre p,
  .blocco.numero-quattro h1,
  .blocco.numero-quattro h2,
  .blocco.numero-quattro h3,
  .blocco.numero-quattro p,
  .blocco.numero-cinque h1,
  .blocco.numero-cinque h2,
  .blocco.numero-cinque h3,
  .blocco.numero-cinque p,
  .blocco.numero-sei h1,
  .blocco.numero-sei h2,
  .blocco.numero-sei h3,
  .blocco.numero-sei p,
  .blocco.numero-sette h1,
  .blocco.numero-sette h2,
  .blocco.numero-sette h3,
  .blocco.numero-sette p,
  .blocco.numero-otto h1,
  .blocco.numero-otto h2,
  .blocco.numero-otto h3,
  .blocco.numero-otto p,
  .blocco.numero-nove h1,
  .blocco.numero-nove h2,
  .blocco.numero-nove h3,
  .blocco.numero-nove p,
  .blocco.numero-dieci h1,
  .blocco.numero-dieci h2,
  .blocco.numero-dieci h3,
  .blocco.numero-dieci p {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Card del percorso di spiegazione - adattamento mobile */
  .mission-card-3d-vertical {
    width: 80vw !important;
    max-width: 280px !important;
    height: auto !important;
    min-height: 120px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    position: relative !important;
    margin: 15px auto !important;
    opacity: 0 !important;
    animation: none !important;
    will-change: transform, opacity;
  }

  .card-1-vertical.left,
  .card-new-vertical.right,
  .card-2-vertical.right,
  .card-3-vertical.left {
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    position: relative !important;
    margin: 15px auto !important;
    animation: none !important;
  }

  .card-3d-content-vertical {
    padding: 15px 12px !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .card-3d-content-vertical h3 {
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
  }

  .card-3d-content-vertical p {
    font-size: 0.75rem !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
  }

  .card-3d-icon-vertical {
    width: 32px !important;
    height: 32px !important;
    margin: 0 auto 8px auto !important;
  }

  .card-3d-icon-vertical i {
    font-size: 0.85rem !important;
  }

  /* Animazione per le card su mobile - ottimizzata per performance */
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateX(-50%) translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }

  /* Percorso illuminato - adattamento mobile */
  .mission-path-container-vertical {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    padding: 10px 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .mission-path-vertical {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }

  .path-svg-vertical {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    position: relative !important;
    margin: 0 auto !important;
  }

  .path-progress-vertical {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .mission-cards-vertical {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    pointer-events: auto !important;
    padding: 20px 0 !important;
  }

  /* Logo positioning - moved higher */
  .logo-main-intestazione {
    display: none !important;
    position: absolute !important;
    top: 45% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    max-width: 40% !important;
    outline: none !important;
    will-change: transform;
    filter: drop-shadow(-2px 2px 2px rgb(83, 83, 83, 0.3)) !important;
  }

  .logo-main-intestazione img {
    display: none !important;
    max-width: 30vw !important;
    width: 30vw !important;
    min-width: 30vw !important;
    height: auto !important;
  }

  /* Main title container - moved higher */
  .main-titolo-container {
    position: absolute !important;
    top: 20.5dvh !important;
    left: 40% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 75% !important;
    width: 75% !important;
    min-width: 75% !important;
    font-weight: 1000 !important;
    line-height: 1.4 !important;
  }

  .main-titolo-container h1 {
    display: none !important;
  }

  .main-titolo-mobile {
    display: block !important;
  }

  .main-titolo-mobile .titolo-riga-1 {
    color: #000000 !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    padding-left: 0px !important;
    text-align: left !important;
  }

  .main-titolo-mobile .titolo-riga-2 {
    color: #000000 !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    padding-left: 25px !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .main-titolo-mobile .titolo-riga-3 {
    color: #000000 !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    padding-left: 55px !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  /* Freccia mobile sotto il titolo */
  .freccia-desktop-container {
    display: none !important;
  }
  .freccia-mobile-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: absolute !important;
    top: calc(15dvh + 90px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 35% !important;
    z-index: 10 !important;
  }

  .freccia-mobile {
    width: auto !important;
    height: 40px !important;
    max-width: 60px !important;
    object-fit: contain !important;
  }

  /* Bottone "Offro un servizio" per mobile */
  .offro-servizio-mobile-container {
    display: none !important;
    justify-content: center !important;
    align-items: center !important;
    position: absolute !important;
    top: 38dvh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40% !important;
    max-width: 40% !important;
    z-index: 9999 !important;
    padding: 5px 10px !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: none !important;
    border: 2px solid #e60000 !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }
  .offro-servizio-mobile-container:hover {
    background: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .offro-servizio-mobile-btn {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    background: none !important;
    color: #171717 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
    transition: color 0.3s ease !important;
  }

  .offro-servizio-mobile-btn:hover {
    color: #000000 !important;
  }

  .offro-servizio-mobile-btn .arrow-slide {
    margin-left: -10px !important;
    display: none !important;
    animation: slide-right 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite !important;
  }

  @keyframes slide-right {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(10px);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes pulse-attention {
    0%,
    100% {
      box-shadow:
        0 8px 20px rgba(102, 126, 234, 0.4),
        0 0 0 0 rgba(102, 126, 234, 0.7) !important;
    }
    50% {
      box-shadow:
        0 8px 20px rgba(102, 126, 234, 0.4),
        0 0 0 10px rgba(102, 126, 234, 0) !important;
    }
  }

  /* Search container - optimized for mobile */
  .ricerca {
    position: absolute !important;
    left: 50% !important;
    top: 75dvh !important;
    transform: translate(-50%, -50%) !important;
    min-width: 100vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    padding: 10px 20px 20px 20px !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    box-shadow: 0px -20px 20px rgba(0, 0, 0, 0.2) !important;
    border: none !important;
    border-radius: 20px 20px 0px 0px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    z-index: 20000 !important;
    overflow-x: visible !important;
  }

  /* Search container - horizontal layout for larger mobile screens */
  .search-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 50px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 15px 0 15px !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    position: relative !important; /* Ensure proper stacking */
    z-index: 1 !important; /* Ensure borders are visible */
    gap: 0px !important;
    outline: none !important;
    -webkit-outline: none !important;
    -moz-outline: none !important;
  }

  .search-container:focus-within {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .search-container i {
    font-size: 20px !important;
    color: #e60000 !important;
    margin: 0 !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    width: 18px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .search-two {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    padding-left: 15px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    background-color: transparent !important;
    outline: none !important;
    color: #000000 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
    text-align: left !important;
    vertical-align: middle !important;
    position: relative !important;
  }
  /* Bordo animato disabilitato */
  .search-two::after {
    display: none !important;
    content: none !important;
  }

  .search-two.animation-permanently-disabled::after,
  .search-two.animation-permanently-disabled::before {
    display: none !important;
    content: none !important;
  }

  @keyframes borderSlide {
    0% {
      width: 0 !important;
    }
    50% {
      width: 100% !important;
    }
    100% {
      width: 0 !important;
    }
  }

  .search-two::placeholder {
    color: #333333 !important;
    font-weight: 400 !important;
    background-color: transparent !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 18px !important;
  }

  .search-two:focus {
    border-bottom: 2px solid #e60000 !important;
  }

  /* Remove all borders from search container */
  .search-container {
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .search-container:focus-within {
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-outline: none !important;
    -moz-outline: none !important;
  }

  .search-container:focus {
    outline: none !important;
    -webkit-outline: none !important;
    -moz-outline: none !important;
  }

  /* Forza rimozione outline per tutti gli stati */
  .search-container,
  .search-container:focus,
  .search-container:focus-within,
  .search-container:active,
  .search-container:hover {
    outline: none !important;
    -webkit-outline: none !important;
    -moz-outline: none !important;
    outline-offset: 0 !important;
    -webkit-outline-offset: 0 !important;
    -moz-outline-offset: 0 !important;
  }

  /* Regola ultra-specifica per forzare rimozione outline */
  .ricerca .search-container,
  .ricerca .search-container:focus,
  .ricerca .search-container:focus-within {
    outline: none !important;
    -webkit-outline: none !important;
    -moz-outline: none !important;
    outline-offset: 0 !important;
    -webkit-outline-offset: 0 !important;
    -moz-outline-offset: 0 !important;
    box-shadow: none !important;
  }

  /* Remove the pseudo-element approach */
  .search-container::before {
    display: none !important;
  }

  /* Location container - optimized for mobile */
  .luogo-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 50px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 15px 0 15px !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    gap: 0px !important;
    outline: none !important;
    -webkit-outline: none !important;
    -moz-outline: none !important;
  }

  .luogo-container:focus-within {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-outline: none !important;
    -moz-outline: none !important;
  }

  .luogo-container:focus {
    outline: none !important;
    -webkit-outline: none !important;
    -moz-outline: none !important;
  }

  /* Forza rimozione outline per tutti gli stati */
  .luogo-container,
  .luogo-container:focus,
  .luogo-container:focus-within,
  .luogo-container:active,
  .luogo-container:hover {
    outline: none !important;
    -webkit-outline: none !important;
    -moz-outline: none !important;
    outline-offset: 0 !important;
    -webkit-outline-offset: 0 !important;
    -moz-outline-offset: 0 !important;
  }

  /* Regola ultra-specifica per forzare rimozione outline */
  .ricerca .luogo-container,
  .ricerca .luogo-container:focus,
  .ricerca .luogo-container:focus-within {
    outline: none !important;
    -webkit-outline: none !important;
    -moz-outline: none !important;
    outline-offset: 0 !important;
    -webkit-outline-offset: 0 !important;
    -moz-outline-offset: 0 !important;
    box-shadow: none !important;
  }

  .luogo-container i {
    font-size: 20px !important;
    color: #e60000 !important;
    margin: 0 !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    width: 18px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .luogo-container input {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    padding-left: 15px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    border-radius: 0 !important;
    outline: none !important;
    background-color: transparent !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
    text-align: left !important;
    vertical-align: middle !important;
    position: relative !important;
  }

  .luogo-container input::placeholder {
    color: #333333 !important;
    font-weight: 400 !important;
    background-color: transparent !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 18px !important;
  }

  .luogo-container input:focus {
    border-bottom: 2px solid #e60000 !important;
  }
  .search-input {
    border-radius: 0 !important;
  }
  .luogo-container {
    border-radius: 0 !important;
  }

  /* Ensure consistent placeholder positioning across browsers */
  .search-two::-webkit-input-placeholder,
  .luogo-container input::-webkit-input-placeholder {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .search-two::-moz-placeholder,
  .luogo-container input::-moz-placeholder {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .search-two:-ms-input-placeholder,
  .luogo-container input:-ms-input-placeholder {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Force identical input alignment */
  .search-two,
  .luogo-container input {
    display: block !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
  }

  /* Override desktop styles for search-two */
  .search-two {
    width: 100% !important; /* Override desktop 90% */
    padding: 0 !important; /* Override desktop 2px 8px */
    margin: 0 !important;
    display: block !important; /* Override desktop flex */
    position: relative !important;
    overflow: visible !important;
  }

  /* Search button - optimized for mobile */
  .open-search {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
  }

  .open-search a {
    width: 100% !important;
    height: auto !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  .open-search-btn {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    background: linear-gradient(135deg, #e60000 0%, #cc0000 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(230, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 10px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .open-search-btn:active {
    transform: scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(230, 0, 0, 0.3) !important;
  }

  .open-search-btn .btn-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .open-search-btn span {
    display: inline-block !important;
  }

  .open-search-btn i {
    font-size: 16px !important;
    color: #ffffff !important;
    transition: all 0.2s ease !important;
  }

  /* Buttons container - mobile layout */
  .buttons-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
    height: 40px !important;
    max-height: 40px !important;
    align-items: stretch !important;
    margin: 10px 0 0px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .open-search {
    flex: 0 0 39% !important;
    max-height: 40px !important;
    width: 39% !important;
    top: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
  }

  .ai-search-button {
    flex: 0 0 39% !important;
    width: 39% !important;
    max-width: 39% !important;
    height: auto !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    min-width: 0 !important;
  }

  .ai-voice-search-button {
    flex: 0 0 19% !important;
    width: 19% !important;
    max-width: 19% !important;
    height: auto !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    min-width: 0 !important;
  }

  .ai-voice-search-btn {
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    font-size: 12px !important;
    padding: 0 8px !important;
    gap: 4px !important;
  }

  .ai-voice-search-btn i {
    font-size: 18px !important;
  }

  .ai-voice-search-button .ai-voice-search-corner-icon {
    display: none !important;
  }

  .ai-voice-search-button .ai-voice-search-corner-icon i {
    font-size: 8px !important;
  }

  .ai-search-button .ai-search-corner-icon {
    display: none !important;
  }

  .ai-search-button .ai-search-corner-icon i {
    color: #3a8dde !important;
    font-size: 10px !important;
    font-weight: 600 !important;
  }

  .ai-search-btn {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    background: linear-gradient(135deg, #3a8dde 0%, #005bea 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(58, 141, 222, 0.3) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 5px 10px !important;
    gap: 6px !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  .ai-search-btn i {
    font-size: 16px !important;
    animation: pulse 2s infinite !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
  }

  .ai-search-btn:active {
    transform: scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(58, 141, 222, 0.3) !important;
  }

  /* AI Text Banner mobile - posizionato sotto ai-search */
  .ai-text-banner {
    position: absolute !important;
    top: calc(100% + 5px) !important;
    left: -100% !important;
    transform: none !important;
    min-width: 200% !important;
    z-index: 996 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
  }
  .ai-search-button:hover .ai-text-banner {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .ai-text-banner .ai-banner-text {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: 1px solid #f9f9f9 !important;
    border-radius: 12px !important;
    padding: 12px 15px !important;
    text-align: center !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ai-text-banner .ai-banner-text:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(230, 0, 0, 0.3) !important;
  }

  .ai-text-banner .ai-banner-title {
    display: block !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    color: #000000 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }

  .ai-text-banner .ai-banner-subtitle {
    display: block !important;
    font-size: 13px !important;
    color: #525252 !important;
    line-height: 1.3 !important;
  }

  .cta-auth-banner {
    display: none !important;
    top: 24vh !important;
    left: 23% !important;
    transform: translateX(-50%) !important;
    height: auto !important;
    min-height: 14vh !important;
    width: 50vw !important;
    max-width: 50vw !important;
    min-width: 50vw !important;
    padding: 0 !important;
  }
  .cta-auth-content {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 15px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin: 0 !important;
  }
  .cta-auth-btn {
    max-height: none !important;
    height: auto !important;
    min-height: 45px !important;
    width: 100% !important;
    max-width: 90% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    padding: 10px 15px !important;
  }
  .cta-auth-btn i {
    font-size: 16px !important;
  }

  /* Stili per i pulsanti CTA mobile */
  .cta-login-btn {
    background: white !important;
    color: #007bff !important;
    border: 2px solid #007bff !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
  }

  .cta-login-btn:hover {
    background: #007bff !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3) !important;
  }

  .cta-register-btn {
    background: white !important;
    color: #e60000 !important;
    border: 2px solid #e60000 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
  }

  .cta-register-btn:hover {
    background: #e60000 !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(230, 0, 0, 0.3) !important;
  }

  /* Nascondi il banner AI Search su mobile */
  .ai-search-banner {
    display: none !important;
  }

  /* Reparto container - positioned horizontally under navbar */
  .reparto-container {
    position: fixed !important;
    top: 65px !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 15px !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    z-index: 9998 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    pointer-events: auto !important;
  }

  .reparto-container div {
    flex: 1 !important;
    max-width: 120px !important;
    pointer-events: auto !important;
  }

  .reparto-container button {
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
    height: 40px !important;
    font-size: 16px !important;
    padding: 8px 6px !important;
    border-radius: 12px !important;
    gap: 4px !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 9999 !important;
    transition: all 0.2s ease !important;
  }

  .reparto-container button:active {
    transform: scale(0.95) !important;
  }

  .reparto-container button i {
    font-size: 16px !important;
    pointer-events: none !important;
  }

  /* Override specifico per tutti gli stati del bottone reparto */
  .reparto-container button,
  .reparto-container button:hover,
  .reparto-container button:active,
  .reparto-container button.active,
  .reparto-container button:focus {
    font-size: 16px !important;
    font-weight: 500 !important;
  }

  /* Search bar mobile optimization */
  .search-bar {
    width: 90% !important;
    max-width: 300px !important;
    height: 40px !important;
    font-size: 16px !important;
    padding: 8px 12px !important;
    border-radius: 20px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* Line separator */
  .linea-ai {
    width: 90% !important;
    max-width: 300px !important;
  }

  /* Categories buttons */
  .bottone-cat {
    min-width: 120px !important;
    height: 40px !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease !important;
  }

  .bottone-cat:active {
    transform: scale(0.95) !important;
  }

  /* Main sections */
  .main-section {
    padding: 20px 10px !important;
  }

  /* Logo and header */
  .logo-main-benvenuti {
    margin-bottom: 20px !important;
  }

  /* Search containers */
  .luogo-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .luogo-container input {
    width: 100% !important;
    height: 45px !important;
    font-size: 16px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    overflow: visible !important;
  }

  .search-container {
    width: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
    margin-bottom: 0px !important;
    height: 45px !important;
  }

  .search-two {
    width: 100% !important;
    height: 45px !important;
    font-size: 16px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Open search button */
  .open-search {
    width: 100% !important;
    max-width: 300px !important;
    height: 40px !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
    padding: 0px !important;
    margin: 0px auto !important;
  }

  .open-search-btn {
    height: 100% !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
    font-size: 18px !important;
    padding: 12px 20px !important;
    transition: all 0.2s ease !important;
  }

  .ai-search-btn {
    height: 100% !important;
  }

  .buttons-container {
    height: 40px !important;
    max-height: 40px !important;
  }

  .open-search-btn:active {
    transform: scale(0.95) !important;
  }

  /* Map and list toggle */
  .elenco-mappa {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .view-toggle-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    margin-left: 10px !important;
    height: 45px !important;
  }

  .attiva-elenco,
  .attiva-mappa {
    width: 45px !important;
    height: 45px !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
    aspect-ratio: 1/1 !important;
  }

  .attiva-elenco:active,
  .attiva-mappa:active {
    transform: scale(0.95) !important;
  }

  /* Back button */
  .back-bottone {
    padding: 8px 12px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    display: none !important;
  }

  .back-bottone:active {
    transform: scale(0.95) !important;
  }

  /* Filters section */
  .pre-filtri {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 15px !important;
  }

  .ordina-container {
    width: 100% !important;
    justify-content: center !important;
  }

  .ordina-container select {
    width: 100% !important;
    max-width: 200px !important;
    height: 40px !important;
    font-size: 14px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  .filtri-container {
    width: 100% !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .filtri-btn,
  .reset-btn {
    padding: 8px 16px !important;
    font-size: 14px !important;
    height: 40px !important;
    transition: all 0.2s ease !important;
  }

  .filtri-btn:active,
  .reset-btn:active {
    transform: scale(0.95) !important;
  }

  /* Filters panel */
  .filtri {
    width: 95% !important;
    max-width: 95% !important;
    padding: 15px !important;
  }

  .filtri-titolo {
    padding: 10px !important;
  }

  .filtri-titolo h3 {
    font-size: 16px !important;
  }

  .filtri-contenitore {
    gap: 15px !important;
    padding: 10px !important;
  }

  .filtri span {
    width: 100% !important;
  }

  .filtri span select {
    width: 100% !important;
    height: 40px !important;
    font-size: 14px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* Results list */
  .main-elenco {
    padding: 10px !important;
  }

  .main-elenco ul {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
    padding: 0 !important;
  }

  .main-elenco ul li {
    margin-bottom: 15px !important;
  }

  /* Profile cards */
  .profilo-riga {
    flex-direction: column !important;
    gap: 15px !important;
    padding: 15px !important;
  }

  .profilo-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }

  .profilo-nome {
    font-size: 18px !important;
    text-align: center !important;
  }

  .profilo-avatar {
    width: 80px !important;
    height: 80px !important;
  }

  .profilo-body {
    padding: 15px !important;
  }

  .profilo-descrizione {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Profile photos */
  .profilo-foto-lavori {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .profilo-foto-lavori img {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
  }

  /* Modal optimizations */
  /* Stili per la scheda profilo sono ora in scheda-profilo.css */

  /* Contact buttons */
  .contatto-container {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .chiama-btn,
  .chat-btn {
    width: 100% !important;
    height: 50px !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
  }

  .chiama-btn:active,
  .chat-btn:active {
    transform: scale(0.95) !important;
  }

  /* Gallery */
  .galleria {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .galleria img {
    width: 100% !important;
    height: auto !important;
  }

  /* Reviews panel */
  .reviews-container {
    width: 95% !important;
    max-width: 95% !important;
    padding: 15px !important;
  }

  .reviews-header {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .reviews-controls-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .reviews-sort-select {
    width: 100% !important;
    height: 40px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* Form elements */
  .form-group input,
  .form-group textarea {
    width: 100% !important;
    font-size: 16px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  .form-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .cancel-review,
  .submit-review {
    width: 100% !important;
    height: 45px !important;
    transition: all 0.2s ease !important;
  }

  .cancel-review:active,
  .submit-review:active {
    transform: scale(0.95) !important;
  }

  /* Request form */
  .request-form-container {
    width: 95% !important;
    padding: 15px !important;
  }

  .request-form-container textarea {
    width: 100% !important;
    font-size: 16px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* Favorites modal */
  .favorite-modal-content {
    width: 95% !important;
    max-width: 95% !important;
    padding: 20px !important;
  }

  .favorite-modal-list {
    max-height: 300px !important;
  }

  .favorite-modal-list button {
    padding: 10px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
  }

  .favorite-modal-list button:active {
    transform: scale(0.95) !important;
  }

  /* Scroll to top button */
  .scroll-to-top {
    bottom: 20px !important;
    left: 20px !important;
    width: 45px !important;
    height: 45px !important;
    transition: all 0.2s ease !important;
  }

  .scroll-to-top:active {
    transform: scale(0.9) !important;
  }

  /* Scroll down arrow */
  .scroll-down-arrow {
    font-size: 1.8em !important;
    bottom: 5% !important;
  }

  /* Accessibility improvements */
  .bottone-cat:focus,
  .attiva-elenco:focus,
  .attiva-mappa:focus,
  .chiama-btn:focus,
  .chat-btn:focus,
  .filtri-btn:focus,
  .reset-btn:focus,
  .open-search-btn:focus,
  .back-bottone:focus,
  .scroll-to-top:focus {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
  }

  /* Search container accessibility */
  .search-container:focus-within,
  .luogo-container:focus-within {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
  }

  /* Enhanced touch feedback for search elements */
  .search-container:active,
  .luogo-container:active {
    transform: scale(0.98) !important;
  }

  /* Loading state for search */
  .ricerca.loading {
    opacity: 0.7 !important;
    pointer-events: none !important;
  }

  .ricerca.loading .open-search-btn {
    background: #999 !important;
    cursor: not-allowed !important;
  }

  /* Error state for search */
  .search-container.error,
  .luogo-container.error {
    border-color: #dc3545 !important;
    background-color: #f8d7da !important;
  }

  /* Success state for search */
  .search-container.success,
  .luogo-container.success {
    border-color: #28a745 !important;
    background-color: #d4edda !important;
  }

  /* Loading states */
  .loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
  }

  /* Error states */
  .error {
    border-color: #dc3545 !important;
    background-color: #f8d7da !important;
  }

  /* Success states */
  .success {
    border-color: #28a745 !important;
    background-color: #d4edda !important;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  /* Background adjustments for smaller screens */
  .sfondo-container {
    height: 100vh !important;
  }

  .sfondo {
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Card del percorso - schermi molto piccoli */
  .mission-card-3d-vertical {
    width: 85vw !important;
    max-width: 260px !important;
    min-height: 110px !important;
  }

  .card-3d-content-vertical {
    padding: 12px 10px !important;
  }

  .card-3d-content-vertical h3 {
    font-size: 0.85rem !important;
  }

  .card-3d-content-vertical p {
    font-size: 0.7rem !important;
  }

  .card-3d-icon-vertical {
    width: 28px !important;
    height: 28px !important;
  }

  .card-3d-icon-vertical i {
    font-size: 0.8rem !important;
  }

  /* Reparto container adjustments for smaller screens */
  .reparto-container {
    padding: 8px 10px !important;
    gap: 8px !important;
    background: #ffffff !important;
    border-bottom: none !important;
  }

  .reparto-container div {
    max-width: 100px !important;
  }

  .reparto-container button {
    height: 35px !important;
    font-size: 11px !important;
    padding: 6px 4px !important;
  }

  .reparto-container button i {
    font-size: 12px !important;
  }

  /* Override font-size per schermi piccoli */
  .reparto-container button,
  .reparto-container button:hover,
  .reparto-container button:active,
  .reparto-container button.active,
  .reparto-container button:focus {
    font-size: 14px !important;
  }

  .index-h1 {
    font-size: 28px !important;
  }

  .search-bar {
    width: 95% !important;
    height: 45px !important;
  }

  /* Enhanced search container for small screens */
  .ricerca {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 10px 20px 20px 20px !important;
    gap: 10px !important;
  }

  .search-container,
  .luogo-container {
    height: 45px !important;
    padding: 0 15px !important;
  }

  .search-container i,
  .luogo-container i {
    font-size: 18px !important;
    margin: 0 !important;
    margin-right: 10px !important;
    width: 16px !important;
  }

  /* Remove all borders from search container in small screens */
  .search-container {
    border-right: none !important;
  }

  .search-two,
  .luogo-container input {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }

  .open-search-btn {
    height: 100% !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
    padding: 0px !important;
    font-size: 18px !important;
  }

  .ai-search-btn {
    height: 100% !important;
  }

  .buttons-container {
    height: 40px !important;
    max-height: 40px !important;
  }

  .bottone-cat {
    min-width: 100px !important;
    height: 35px !important;
    font-size: 13px !important;
  }

  .main-elenco ul {
    gap: 12px !important;
    padding: 0 5px !important;
  }

  .profilo-riga {
    padding: 10px !important;
  }

  .scheda {
    width: 98% !important;
    height: 95vh !important;
    margin: 2.5vh auto !important;
  }

  .reviews-container {
    width: 98% !important;
    padding: 10px !important;
  }

  .favorite-modal-content {
    width: 98% !important;
    padding: 15px !important;
  }

  .scroll-to-top {
    bottom: 15px !important;
    left: 15px !important;
    width: 40px !important;
    height: 40px !important;
  }

  /* Enhanced touch targets for small screens */
  .bottone-cat,
  .attiva-elenco,
  .attiva-mappa,
  .chiama-btn,
  .chat-btn,
  .filtri-btn,
  .reset-btn,
  .open-search-btn,
  .back-bottone {
    min-height: 40px !important;
    min-width: 44px !important;
  }

  /* Improved spacing for small screens */
  .main-section {
    padding: 15px 8px !important;
  }

  /* Better modal handling for small screens */
  .scheda {
    border-radius: 8px !important;
  }

  .scheda-sinistra,
  .scheda-destra {
    padding: 12px !important;
  }

  /* Optimized form elements for small screens */
  .form-group input,
  .form-group textarea,
  .search-bar,
  .search-two,
  .luogo-container input {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 12px !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Better button spacing */
  .contatto-container {
    gap: 8px !important;
  }

  .form-actions {
    gap: 8px !important;
  }
}

/* Extra small devices */
@media (max-width: 360px) {
  .reparto-container {
    padding: 6px 8px !important;
    gap: 6px !important;
    background: #ffffff !important;
    border-bottom: none !important;
  }

  .reparto-container div {
    max-width: 90px !important;
  }

  .reparto-container button {
    height: 32px !important;
    font-size: 10px !important;
    padding: 5px 3px !important;
  }

  .reparto-container button i {
    font-size: 11px !important;
  }

  /* Override font-size per schermi molto piccoli */
  .reparto-container button,
  .reparto-container button:hover,
  .reparto-container button:active,
  .reparto-container button.active,
  .reparto-container button:focus {
    font-size: 13px !important;
  }

  .index-h1 {
    font-size: 24px !important;
  }

  .search-bar {
    width: 98% !important;
  }

  .bottone-cat {
    min-width: 90px !important;
    height: 32px !important;
    font-size: 12px !important;
  }

  .profilo-nome {
    font-size: 16px !important;
  }

  .chiama-btn,
  .chat-btn {
    height: 45px !important;
    font-size: 14px !important;
  }

  /* RIMOSSO: Forzatura dimensioni pulsante chatbot extra small */

  .chat-bot-header {
    padding: 12px 15px !important;
  }

  .chat-bot-header h3 {
    font-size: 15px !important;
  }

  .chat-bot-messages {
    padding: 12px !important;
  }

  .bot-message,
  .user-message {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  .chat-bot-input {
    padding: 12px !important;
  }

  .chat-bot-input input {
    padding: 8px 12px !important;
    font-size: 14px !important;
  }

  /* RIMOSSO: Forzatura dimensioni pulsante chatbot small */

  .chat-bot-header {
    padding: 15px 18px !important;
  }

  .chat-bot-header h3 {
    font-size: 16px !important;
  }

  .chat-bot-messages {
    padding: 15px !important;
  }

  .bot-message,
  .user-message {
    padding: 10px 14px !important;
    font-size: 14px !important;
  }

  .chat-bot-input {
    padding: 15px !important;
  }

  .chat-bot-input input {
    padding: 10px 14px !important;
    font-size: 15px !important;
  }

  /* Ultra-compact search for very small screens */
  .ricerca {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 10px 20px 20px 20px !important;
    gap: 8px !important;
  }

  .search-container,
  .luogo-container {
    height: 42px !important;
    padding: 0 10px !important;
  }

  .search-container i,
  .luogo-container i {
    font-size: 17px !important;
    margin: 0 !important;
    margin-right: 8px !important;
    width: 15px !important;
  }

  .search-two,
  .luogo-container input {
    font-size: 15px !important;
  }

  .open-search-btn {
    height: 100% !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
    font-size: 17px !important;
  }

  .ai-search-btn {
    height: 100% !important;
  }

  .buttons-container {
    height: 40px !important;
    max-height: 40px !important;
  }

  /* Ultra-compact layout for very small screens */
  .main-section {
    padding: 10px 5px !important;
  }

  .profilo-riga {
    padding: 8px !important;
  }

  .scheda {
    width: 99% !important;
    height: 98vh !important;
    margin: 1vh auto !important;
  }

  .reviews-container {
    width: 99% !important;
    padding: 8px !important;
  }

  .favorite-modal-content {
    width: 99% !important;
    padding: 12px !important;
  }

  /* Maintain minimum touch targets */
  .bottone-cat,
  .attiva-elenco,
  .attiva-mappa,
  .chiama-btn,
  .chat-btn,
  .filtri-btn,
  .reset-btn,
  .open-search-btn,
  .back-bottone {
    min-height: 39px !important;
    min-width: 44px !important;
  }

  /* Optimized text sizes for readability */
  .profilo-descrizione {
    font-size: 13px !important;
  }

  /* Chatbot mobile optimization */
  .chat-bot-button {
    width: 55px !important;
    height: 55px !important;
    bottom: 15px !important;
    right: 15px !important;
    z-index: 9999 !important;
  }

  .chat-bot-button i {
    font-size: 22px !important;
  }

  /* Badge AI per dispositivi molto piccoli */
  .chatbot-ai-badge {
    font-size: 9px !important;
    padding: 2px 5px !important;
    top: -2px !important;
    right: -2px !important;
    border-radius: 8px !important;
  }

  .chat-bot-header {
    padding: 18px 20px !important;
    border-radius: 15px 15px 0 0 !important;
  }

  .chat-bot-header h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
  }

  .close-chat {
    font-size: 20px !important;
    padding: 5px !important;
  }

  .chat-bot-messages {
    padding: 20px !important;
    gap: 12px !important;
  }

  .bot-message,
  .user-message {
    max-width: 85% !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .chat-bot-input {
    padding: 20px !important;
    gap: 12px !important;
  }

  .chat-bot-input input {
    padding: 12px 16px !important;
    font-size: 16px !important;
    border-radius: 25px !important;
  }

  .chat-bot-input button {
    width: 45px !important;
    height: 45px !important;
  }

  .chat-bot-input button i {
    font-size: 18px !important;
  }

  /* Assicura che il contenuto dietro non si sposti */
  body.chat-open {
    overflow: hidden !important;
  }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .reparto-container {
    padding: 6px 10px !important;
    background: #ffffff !important;
    border-bottom: none !important;
  }

  .reparto-container button {
    height: 32px !important;
    font-size: 11px !important;
  }

  .index-h1 {
    font-size: 24px !important;
    margin: 10px auto 0 auto !important;
  }

  .main-section {
    padding: 10px 5px !important;
  }

  .scheda {
    height: 85vh !important;
    margin: 7.5vh auto !important;
  }

  .reviews-container {
    height: 80vh !important;
  }

  /* Landscape search optimization */
  .ricerca {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 10px 20px 20px 20px !important;
    gap: 10px !important;
    flex-direction: row !important;
    align-items: stretch !important;
  }

  .search-container,
  .luogo-container {
    flex: 1 !important;
    margin: 0 5px !important;
    height: 45px !important;
  }

  .open-search {
    width: auto !important;
    min-width: 100px !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
    padding: 0px !important;
  }

  .open-search-btn {
    height: 100% !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
  }

  .ai-search-btn {
    height: 100% !important;
    min-height: 0 !important;
  }

  .buttons-container {
    height: 40px !important;
    max-height: 40px !important;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .profilo-avatar img,
  .galleria img,
  .profilo-foto-lavori img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .bottone-cat,
  .attiva-elenco,
  .attiva-mappa,
  .chiama-btn,
  .chat-btn,
  .filtri-btn,
  .reset-btn,
  .open-search-btn,
  .back-bottone,
  .scroll-to-top {
    min-height: 39px !important;
    min-width: 44px !important;
  }

  /* Remove hover effects on touch devices */
  .bottone-cat:hover,
  .attiva-elenco:hover,
  .attiva-mappa:hover,
  .chiama-btn:hover,
  .chat-btn:hover,
  .filtri-btn:hover,
  .reset-btn:hover,
  .open-search-btn:hover,
  .back-bottone:hover,
  .scroll-to-top:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Optimize scrolling */
  .main-elenco,
  .reviews-list,
  .favorite-modal-list {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Better touch feedback */
  .bottone-cat:active,
  .attiva-elenco:active,
  .attiva-mappa:active,
  .chiama-btn:active,
  .chat-btn:active,
  .filtri-btn:active,
  .reset-btn:active,
  .open-search-btn:active,
  .back-bottone:active,
  .scroll-to-top:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease !important;
  }

  /* Prevent text selection on buttons */
  .bottone-cat,
  .attiva-elenco,
  .attiva-mappa,
  .chiama-btn,
  .chat-btn,
  .filtri-btn,
  .reset-btn,
  .open-search-btn,
  .back-bottone,
  .scroll-to-top {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }

  /* Optimize modal interactions */
  .scheda,
  .reviews-container,
  .favorite-modal-content {
    -webkit-overflow-scrolling: touch;
  }

  /* Better form interactions */
  input,
  textarea,
  select {
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 8px !important;
  }

  /* Optimize dropdowns */
  select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 16px !important;
    padding-right: 32px !important;
  }
}

/* Print styles */
@media print {
  .scroll-to-top,
  .scroll-down-arrow,
  .open-search,
  .filtri-btn,
  .reset-btn,
  .close-x {
    display: none !important;
  }

  .scheda {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   TABLET OPTIMIZATIONS (768px - 1024px)
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Buttons container for tablet */
  .buttons-container {
    height: 40px !important;
    max-height: 40px !important;
  }

  .open-search-btn,
  .ai-search-btn {
    height: 100% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  /* Body and general layout for tablet */
  body {
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: auto !important; /* Forza scroll auto per evitare comportamenti indesiderati */
    justify-content: flex-start !important; /* Forza gli elementi a partire dall'inizio */
    align-items: flex-start !important; /* Forza gli elementi a partire dall'inizio */
    scroll-top: 0 !important; /* Forza scroll in cima */
    height: auto !important; /* Permette al body di espandersi */
    min-height: 100vh !important; /* Min-height standard */
    min-width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Page wrapper for tablet */
  .page-wrapper {
    min-height: calc(100vh - 80px);
    max-height: calc(100vh - 80px); /* Dynamic viewport height per Safari */
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto !important; /* Ripristino scroll verticale del page-wrapper */
    position: relative;
    scroll-behavior: auto !important; /* Forza scroll auto per evitare comportamenti indesiderati */
    justify-content: flex-start !important; /* Forza gli elementi a partire dall'inizio */
    align-items: stretch !important; /* Cambio da flex-start a stretch per espandere gli elementi */
    scroll-top: 0 !important; /* Forza scroll in cima */
    display: flex !important; /* Aggiungo display flex */
    flex-direction: column !important; /* Layout verticale */
    height: auto !important; /* Permette al page-wrapper di espandersi */
    contain: layout style !important; /* Contiene il layout */
    box-sizing: border-box !important;
  }

  /* Main container adjustments for tablet */
  main {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Forza il main a partire dall'inizio invece di essere centrato */
    align-items: center !important;
    width: 100% !important;
    min-height: calc(100vh - 80px) !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    max-height: calc(100vh - 80px) !important;
    padding: 0 0 0 0 !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
    scroll-top: 0 !important; /* Forza scroll in cima */
    scroll-behavior: auto !important; /* Disabilita scroll smooth */
    flex: 1 !important; /* Permette al main di espandersi */
    overflow-y: auto !important; /* Ripristino scroll verticale del main */
    overflow-x: hidden !important; /* Nascondo scroll orizzontale */
  }

  /* Forza il primo blocco a partire dall'inizio su tablet */
  .blocco.numero-uno {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: flex-start !important;
  }

  /* Assicura che il main-intestazione-container sia scrollabile su tablet */
  .main-intestazione-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
  }

  /* Sezione Suggerimenti - Tablet */
  .suggestions-section {
    padding: 30px 20px !important;
    margin: 30px 0 !important;
  }

  .suggestions-title {
    font-size: 2.2rem !important;
  }

  .suggestions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px !important;
  }

  .suggestion-card {
    padding: 22px !important;
  }

  /* Background optimizations for tablet */
  .sfondo-container {
    top: 0 !important;
    transform: translateY(0) !important; /* Rimosso il 10% che causava scroll */
    left: 0 !important;
    width: 100% !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    z-index: 0 !important;
    margin: 0 !important;
    filter: brightness(100%) !important;
    will-change: transform;
  }

  .sfondo {
    transform: translateX(0%) !important;
    min-height: 80% !important;
    min-width: 105% !important;
    object-fit: cover !important;
    object-position: center 0% !important;
    will-change: transform;
  }

  /* Percorso di spiegazione - adattamento al 100% larghezza su tablet */
  .main-intestazione-ricerca,
  .main-spiegazione,
  .blocco.numero-uno,
  .blocco.numero-tre,
  .blocco.numero-quattro,
  .blocco.numero-cinque,
  .blocco.numero-sei,
  .blocco.numero-sette,
  .blocco.numero-otto,
  .blocco.numero-nove,
  .blocco.numero-dieci {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .main-intestazione-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
  }

  /* Animazione bordo search-two - regola finale con alta specificità */
  .ricerca .search-container .search-two,
  .search-container .search-two,
  .ricerca .search-two {
    position: relative !important;
    overflow: visible !important;
  }

  .ricerca .search-container .search-two::after,
  .search-container .search-two::after,
  .ricerca .search-two::after {
    display: none !important;
    content: none !important;
  }

  .ricerca .search-container .search-two.animation-permanently-disabled::after,
  .search-container .search-two.animation-permanently-disabled::after,
  .ricerca .search-two.animation-permanently-disabled::after,
  .ricerca .search-container .search-two.animation-permanently-disabled::before,
  .search-container .search-two.animation-permanently-disabled::before,
  .ricerca .search-two.animation-permanently-disabled::before {
    content: none !important;
    display: none !important;
    animation: none !important;
    -webkit-animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  @keyframes borderSlide {
    0% {
      width: 0 !important;
    }
    50% {
      width: 100% !important;
    }
    100% {
      width: 0 !important;
    }
  }

  @-webkit-keyframes borderSlide {
    0% {
      width: 0 !important;
    }
    50% {
      width: 100% !important;
    }
    100% {
      width: 0 !important;
    }
  }
}

/* ===== MODAL RICERCA IA - MOBILE ===== */
@media (max-width: 768px) {
  /* Modal AI Search - Ottimizzato per Mobile */
  .ai-search-modal {
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
  }

  .ai-search-modal-content {
    top: 50vh !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 90vh !important;
    height: auto !important;
    border-radius: 24px !important;
    margin: 0 !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3) !important;
    animation: slideUpMobile 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
  }

  @keyframes slideUpMobile {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .ai-search-modal-header {
    padding: 8px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
  }

  .ai-search-modal-title {
    gap: 10px !important;
  }

  .ai-search-modal-title i {
    font-size: 22px !important;
  }

  .ai-search-modal-title h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
  }

  .ai-search-close-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    touch-action: manipulation !important;
  }

  .ai-search-close-btn:active {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(0.95) !important;
  }

  .ai-search-modal-body {
    padding: 16px 20px 20px 20px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
  }

  /* Agente Animato Mobile - Ottimizzato */
  .ai-agent-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding: 12px !important;
    background: rgba(58, 141, 222, 0.05) !important;
    border-radius: 16px !important;
  }

  .ai-agent-avatar {
    width: 60px !important;
    height: 60px !important;
  }

  .ai-agent-mouth {
    bottom: 10px !important;
  }

  .ai-agent-message {
    width: 100% !important;
    text-align: center !important;
  }

  .ai-agent-bubble {
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }

  .ai-agent-bubble::before {
    display: none !important;
  }

  .ai-agent-greeting {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
  }

  .ai-agent-instruction {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #666 !important;
  }

  /* Suggerimenti Mobile - Ottimizzato */
  .ai-suggestions-container {
    display: none !important;
    margin-bottom: 16px !important;
  }

  .ai-suggestions-title {
    font-size: 13px !important;
    margin-bottom: 10px !important;
  }

  .ai-suggestions-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .ai-suggestion-chip {
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    touch-action: manipulation !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  .ai-suggestion-chip:active {
    transform: scale(0.98) !important;
    background: #f0f7ff !important;
  }

  .ai-suggestion-chip i {
    font-size: 16px !important;
  }

  /* Input Mobile - Ottimizzato */
  .ai-search-input-container {
    margin-bottom: 16px !important;
  }

  .ai-input-wrapper {
    position: relative !important;
  }

  .ai-search-input {
    font-size: 16px !important;
    padding: 14px 45px 60px 14px !important;
    min-height: 110px !important;
    max-height: 150px !important;
    border-radius: 12px !important;
    border: 2px solid #e1e1e1 !important;
    resize: none !important;
    line-height: 1.5 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  .ai-search-input:focus {
    border-color: #3a8dde !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(58, 141, 222, 0.1) !important;
  }

  .ai-input-indicator {
    top: 14px !important;
    right: 14px !important;
    font-size: 18px !important;
    color: #999 !important;
  }

  .ai-search-input-footer {
    margin-top: 8px !important;
  }

  .ai-search-hint {
    font-size: 12px !important;
    color: #999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .ai-search-hint i {
    font-size: 12px !important;
  }

  /* Pulsante riconoscimento vocale mobile */
  .ai-voice-btn {
    width: 40px !important;
    height: 40px !important;
    bottom: 12px !important;
    right: 12px !important;
    font-size: 16px !important;
  }

  /* Status riconoscimento vocale mobile */
  .ai-voice-status {
    font-size: 12px !important;
    gap: 6px !important;
  }

  .ai-voice-status i {
    font-size: 8px !important;
  }

  .ai-search-input-footer {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Modal Ricerca Vocale Mobile */
  .ai-voice-search-modal {
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
  }

  .ai-voice-search-modal-content {
    max-width: 80% !important;
    width: 80% !important;
    max-height: 90vh !important;
    height: auto !important;
    border-radius: 24px !important;
    margin: 0 !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3) !important;
    animation: slideUpMobile 0.3s ease !important;
  }

  .ai-voice-search-modal-header {
    padding: 16px 20px !important;
  }

  .ai-voice-search-modal-title h2 {
    font-size: 18px !important;
  }

  .ai-voice-search-modal-title i {
    font-size: 20px !important;
  }

  .ai-voice-search-close-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    touch-action: manipulation !important;
  }

  .ai-voice-search-modal-body {
    padding: 24px 20px !important;
    gap: 20px !important;
  }

  .ai-voice-search-icon {
    width: 70px !important;
    height: 70px !important;
    font-size: 32px !important;
  }

  .ai-voice-search-message {
    font-size: 15px !important;
  }

  .ai-voice-search-transcript {
    padding: 14px !important;
  }

  .transcript-text {
    font-size: 15px !important;
  }

  .ai-voice-search-start-btn,
  .ai-voice-search-stop-btn {
    padding: 14px 20px !important;
    font-size: 15px !important;
    touch-action: manipulation !important;
  }

  .ai-voice-search-start-btn:active,
  .ai-voice-search-stop-btn:active {
    transform: scale(0.98) !important;
  }

  /* Bottone Submit Mobile - Ottimizzato */
  .ai-search-submit-btn {
    padding: 16px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    width: 100% !important;
    min-height: 52px !important;
    touch-action: manipulation !important;
    box-shadow: 0 4px 12px rgba(58, 141, 222, 0.3) !important;
  }

  .ai-search-submit-btn:active {
    transform: scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(58, 141, 222, 0.3) !important;
  }

  /* Loading e Messaggi Mobile */
  .ai-search-loading {
    padding: 40px 20px !important;
  }

  .ai-search-loading i {
    font-size: 36px !important;
  }

  .ai-search-message {
    padding: 16px 20px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }

  .ai-search-message i {
    font-size: 20px !important;
  }

  /* Risultati Mobile - Ottimizzato */
  .ai-results-summary {
    padding: 14px 16px !important;
    gap: 12px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }

  .ai-results-summary i {
    font-size: 24px !important;
  }

  .ai-results-info h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
  }

  .ai-results-info p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .ai-new-search-btn {
    padding: 10px 18px !important;
    font-size: 14px !important;
    margin-bottom: 16px !important;
    border-radius: 10px !important;
    touch-action: manipulation !important;
  }

  .ai-discover-results-btn {
    padding: 16px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    width: 100% !important;
    min-height: 52px !important;
    touch-action: manipulation !important;
    margin-top: 16px !important;
  }

  .ai-discover-results-btn:active {
    transform: scale(0.98) !important;
  }

  .ai-discover-results-btn .btn-content {
    gap: 10px;
  }

  .ai-discover-results-btn .btn-content i {
    font-size: 18px;
  }
}