/* webStylesFix.css */
/* 💅 Stili correttivi per Expo Web (PWA) - iOS + Android */

html, body, #root {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff8f0; /* colore di sfondo del tuo tema */
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  
  /* Correzioni generiche */
  * {
    box-sizing: border-box;
  }
  
  a {
    text-decoration: none;
    color: inherit;
    font: inherit;
  }
  
  button, input, select, textarea {
    font-family: inherit;
    font-size: 16px;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Android: disattiva autosizing aggressivo del testo (solo Android, non iOS) */
  /* Classe .android viene aggiunta dinamicamente via JavaScript in App.tsx */
  html.android, html.android body, html.android #root {
    text-size-adjust: 100% !important;
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
  }
  
  /* Correzione per Safari iOS (altezza schermo PWA) */
html, body {
  height: -webkit-fill-available;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  overscroll-behavior: none;
}
  
  #root {
    min-height: 100vh; /* Fallback per browser vecchi */
    min-height: 100dvh; /* Moderno: dynamic viewport height */
    min-height: -webkit-fill-available; /* iOS Safari fallback */
    height: var(--app-height, 100dvh); /* Usa --app-height se disponibile (setted da pwaViewportFix) */
    display: flex;
    flex-direction: column;
    /* Android safe area: padding bottom per gesture bar */
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  
  /* Correzione layout */
  .view, .container {
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
  }
  
  /* Ombre compatibili web */
  .shadow {
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* Animazioni e smooth scroll */
  html {
    scroll-behavior: smooth;
  }
  
  /* 🧩 Modale Gusti Pizza - ottimizzazione scroll su PWA */
  .modal-scroll-list {
    max-height: 65vh !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #f8d37f #1a1a1a;
    padding-right: 6px; /* evita taglio della scrollbar */
  }
  
  /* Ombra sopra e sotto la lista per suggerire scorrimento */
  .modal-scroll-list::before,
  .modal-scroll-list::after {
    content: "";
    position: sticky;
    left: 0;
    right: 0;
    height: 12px;
    pointer-events: none;
    z-index: 5;
  }
  
  .modal-scroll-list::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
  }
  
  .modal-scroll-list::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
  }
  
  /* ===== ANDROID UI HARDENING ===== */
  
  /* Typography: font-size responsive per Android (previene scaling diverso vs iOS) */
  /* iOS: nessuna regola - usa comportamento browser default (non modificare) */
  /* Android: font-size con clamp leggero per migliorare leggibilità su schermi piccoli */
  /* Specificity aumentata per evitare override */
  html.android,
  html.android body,
  html.android #root {
    /* Clamp leggero: min 13px (schermi piccoli), max 14px (standard), base 14px */
    font-size: clamp(13px, 1vw + 13px, 14px) !important;
  }
  
  /* Schermi molto piccoli (≤360px): font-size minimo 13px */
  @media (max-width: 360px) {
    html.android,
    html.android body,
    html.android #root {
      font-size: 13px !important;
    }
  }
  
  /* Button/Input/A: reset uniforme per Android */
  button, input, select, textarea, a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  button:focus-visible, input:focus-visible, a:focus-visible {
    outline: 2px solid #f8d37f;
    outline-offset: 2px;
  }
  
  button:active, a:active {
    opacity: 0.8;
  }
  
  /* Safe area per bottom nav/footer */
  .bottom-nav, .footer, [data-safe-area-bottom] {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  
  /* ===== ANDROID-SPECIFIC FIXES (non toccano iOS) ===== */
  /* Questi selettori targettano solo Android/Chromium usando media query o attributi specifici */
  
  /* Card prodotto: robustezza layout Android */
  /* Nota: React Native Web non supporta direttamente classi CSS, 
     ma questi stili possono essere applicati via data attributes o inline styles */
  [data-product-card] {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    /* Android: prevenire overflow orizzontale */
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  [data-product-title] {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.4 !important;
    /* line-clamp 2 con ellipsis */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Hardening specifico per row prodotto (evita testo verticale) - SOLO ANDROID */
  /* Classe .android viene aggiunta dinamicamente via JavaScript */
  html.android div[style*="flexDirection: row"][style*="alignItems"] {
    min-width: 0 !important;
    /* Android: garantisce che colonna testo possa restringersi */
  }
  
  /* Colonna testo dentro card prodotto: robustezza - SOLO ANDROID */
  /* Target colonna flex: 1 con minWidth: 0 (pattern usato in CategoriesList) */
  html.android div[style*="flex: 1"][style*="minWidth: 0"] {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    /* Prevenire colonne strettissime */
    flex-basis: auto !important;
    /* Garantisce che la colonna possa restringersi ma non diventi troppo stretta */
    flex-shrink: 1 !important;
  }
  
  /* Fix diretto per Text component React Native Web - SOLO ANDROID */
  /* Target solo componenti Text dentro productCard (meno generico) */
  html.android [data-product-card] div[style*="fontSize"][style*="fontWeight"],
  html.android .productCard div[style*="fontSize"][style*="fontWeight"] {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  
  /* Fallback più generico MA solo per titoli/prodotti (evita alterazioni globali) - SOLO ANDROID */
  /* Nota: React Native Web può generare Text senza data-attr, quindi manteniamo selettore più ampio
     ma limitato a context prodotto (non form/button globali) */
  html.android .productRow div[style*="fontSize"][style*="fontWeight"],
  html.android [style*="flexDirection"][style*="row"]:has([style*="productName"]) div[style*="fontSize"][style*="fontWeight"] {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  
  /* Fix specifico per "Pizza in Teglia" - titolo che va a capo lettera per lettera - SOLO ANDROID */
  /* Target colonna testo dentro card prodotto (data-product-text-column) */
  html.android [data-product-text-column] {
    /* Garantisce che colonna testo abbia spazio minimo */
    min-width: 0 !important;
    flex-shrink: 1 !important;
    flex-basis: auto !important;
    /* Prevenire che colonna diventi troppo stretta (lascia spazio per immagine + prezzo) */
    max-width: 100% !important;
  }
  
  /* Fix per card prodotto con layout flex row - SOLO ANDROID */
  html.android [data-product-card] > div[style*="flexDirection: row"] {
    /* Garantisce che row possa restringersi */
    min-width: 0 !important;
    width: 100% !important;
  }
  
  /* Fix per titoli prodotto: clamp 1-2 linee con ellipsis - SOLO ANDROID */
  /* Target Text component con data-product-title (aggiunto in CategoriesList) */
  html.android [data-product-title] {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
    /* Prevenire testo verticale */
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  
  /* Fix per descrizioni prodotto: clamp 3 linee con ellipsis - SOLO ANDROID */
  html.android div[style*="fontSize"][style*="lineHeight: 20"] {
    /* Descrizioni hanno lineHeight: 20 (vedi productDesc style) */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  
  /* Container principale: safe area top */
  .main-container, [data-main-container] {
    padding-top: max(0px, env(safe-area-inset-top));
  }
  
  /* ===== ANDROID RESPONSIVE FIX: Immagini e Layout ===== */
  /* Rendere immagini responsive su Android - SOLO Android, iOS intoccabile */
  
  /* Immagini prodotto: responsive (si adattano al device) - SOLO ANDROID */
  /* Target: immagini dentro productCard (React Native Web genera img o div con background-image) */
  html.android [data-product-card] img,
  html.android [data-product-card] img[src],
  html.android [data-product-card] div[style*="width: 60px"],
  html.android [data-product-card] div[style*="width: 80px"],
  html.android [data-product-card] div[style*="width: 120px"] {
    /* Sostituisci width/height fissi con max-width/max-height responsive */
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    /* Mantieni aspect ratio */
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }
  
  /* Container View delle immagini prodotto: responsive - SOLO ANDROID */
  /* Target: wrapper con data-product-image-wrapper */
  html.android [data-product-image-wrapper],
  html.android [data-product-card] > div[style*="flexDirection: row"] > div:first-child {
    /* Container immagine: usa max-width invece di width fisso */
    max-width: 80px !important; /* Base medium size, si adatta */
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    flex-shrink: 0 !important; /* Non restringere immagine */
    flex-grow: 0 !important;
    /* Responsive: si adatta a schermi piccoli */
    min-width: 60px !important; /* Minimo small size */
    box-sizing: border-box !important;
  }
  
  /* Immagini dentro wrapper: responsive */
  html.android [data-product-image-wrapper] > div,
  html.android [data-product-image-wrapper] img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }
  
  /* Schermi piccoli (360px): immagine più piccola */
  @media (max-width: 360px) {
    html.android [data-product-image-wrapper],
    html.android [data-product-card] > div[style*="flexDirection: row"] > div:first-child {
      max-width: 60px !important;
      max-height: 60px !important;
      min-width: 50px !important;
    }
  }
  
  /* Schermi medi-grandi (412px+): immagine standard */
  @media (min-width: 412px) {
    html.android [data-product-image-wrapper],
    html.android [data-product-card] > div[style*="flexDirection: row"] > div:first-child {
      max-width: 80px !important;
      max-height: 80px !important;
    }
  }
  
  /* Layout prodotto row: assicura che si adatti - SOLO ANDROID */
  html.android [data-product-card] > div[style*="flexDirection: row"] {
    /* Assicura che row sia responsive */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Gap tra immagine e testo */
    gap: 12px !important;
  }
  
  /* Colonna testo: si adatta correttamente - SOLO ANDROID */
  html.android [data-product-text-column] {
    /* Responsive: occupa spazio rimanente */
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 120px) !important; /* Lascia spazio per immagine + prezzo */
    box-sizing: border-box !important;
  }
  
  /* Schermi piccoli: colonna testo con più spazio */
  @media (max-width: 360px) {
    html.android [data-product-text-column] {
      max-width: calc(100% - 100px) !important; /* Immagine più piccola = più spazio testo */
    }
  }
  
  /* Colonna prezzo: dimensione fissa ma non troppo larga - SOLO ANDROID */
  html.android [data-product-card] > div[style*="flexDirection: row"] > div:last-child {
    /* Prezzo: dimensione minima, non si espande */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    min-width: auto !important;
    max-width: 75px !important; /* Ridotto da 80px per più spazio testo */
  }
  
  /* Card prodotto: padding più flessibile su Android piccoli - SOLO ANDROID */
  @media (max-width: 360px) {
    html.android [data-product-card] {
      padding: 12px !important; /* Ridotto per schermi piccoli */
    }
    
    /* Colonna prezzo ancora più compatta su schermi piccoli */
    html.android [data-product-card] > div[style*="flexDirection: row"] > div:last-child {
      max-width: 70px !important;
    }
  }

  /* ========================================
   * PWA ANDROID: Fix device stretti (Oppo, ≤393px)
   * Target: solo Android web, solo schermi stretti
   * Problema: titolo prodotto si spezza male ("Offert a 3 ...")
   * ======================================== */
  
  @media (max-width: 393px) {
    /* Riduzione immagine prodotto su device stretti */
    html.android [data-product-image-wrapper],
    html.android [data-product-card] > div[style*="flexDirection: row"] > div:first-child {
      max-width: 56px !important;
      max-height: 56px !important;
      min-width: 48px !important;
    }
    
    html.android [data-product-image-wrapper] > div,
    html.android [data-product-image-wrapper] img {
      max-width: 56px !important;
      max-height: 56px !important;
    }
    
    /* Riduzione gap tra immagine e testo */
    html.android [data-product-card] > div[style*="flexDirection: row"] {
      gap: 8px !important; /* Da 12px per più spazio */
    }
    
    /* Aumento spazio colonna testo */
    html.android [data-product-text-column] {
      max-width: calc(100% - 90px) !important; /* Da calc(100% - 100px/120px) */
    }
    
    /* Riduzione larghezza colonna prezzo */
    html.android [data-product-card] > div[style*="flexDirection: row"] > div:last-child {
      max-width: 62px !important; /* Da 75px, ridotto per più spazio testo */
      padding-left: 4px !important; /* Ridotto marginLeft/gap */
    }
    
    /* Riduzione padding interno card su device stretti */
    html.android [data-product-card] {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }
  }

  /* ========================================
   * PWA ANDROID: Riduzione dimensioni modali
   * Solo Android web, iOS PWA invariato
   * ======================================== */
  
  /* Riduzione font-size base modale */
  html.android [data-modal-root] {
    font-size: 0.95em !important;
  }
  
  /* Riduzione padding riga prodotto nelle modali */
  html.android [data-modal-root] [data-modal-product-row] {
    padding: 10px 14px !important; /* Da 20px 18px */
  }
  
  /* Riduzione dimensioni immagini prodotto nelle modali */
  html.android [data-modal-root] [data-modal-product-image-wrapper] img,
  html.android [data-modal-root] [data-modal-product-image-wrapper] > div > img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
  }
  
  html.android [data-modal-root] [data-modal-product-image-wrapper] {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    flex-shrink: 0 !important;
    margin-right: 10px !important; /* Da 12px */
  }
  
  /* Riduzione font size titolo prodotto nelle modali */
  html.android [data-modal-root] [data-modal-product-row] [style*="variantItemName"],
  html.android [data-modal-root] [style*="variantItemName"] {
    font-size: 17px !important; /* Da 19px */
    line-height: 22px !important;
  }
  
  /* Riduzione font size descrizione prodotto nelle modali */
  html.android [data-modal-root] [data-modal-product-row] [style*="variantItemDesc"],
  html.android [data-modal-root] [style*="variantItemDesc"] {
    font-size: 13px !important; /* Da 14px */
    line-height: 18px !important; /* Da 20px */
    margin-top: 3px !important; /* Da 4px */
  }
  
  /* Riduzione font size prezzo nelle modali */
  html.android [data-modal-root] [data-modal-price],
  html.android [data-modal-root] [style*="variantItemPrice"] {
    font-size: 17px !important; /* Da 19px */
    max-width: 70px !important; /* Stringe colonna prezzo */
  }
  
  /* Riduzione dimensioni pulsanti + / - nelle modali */
  html.android [data-modal-root] [style*="variantPlusBig"] {
    width: 44px !important; /* Da 52px */
    height: 44px !important; /* Da 52px */
  }
  
  html.android [data-modal-root] [style*="variantPlusText"] {
    font-size: 24px !important; /* Da 28px */
  }
  
  /* Riduzione padding modale container */
  html.android [data-modal-root] {
    padding-top: 20px !important; /* Da 28px */
    padding-bottom: 24px !important; /* Da 32px */
    padding-horizontal: 20px !important; /* Da 28px */
  }

  /* ========================================
   * PWA: Miglioramento grafica modale teglia
   * Solo modale teglia (TrayModal), non pizze tonde (VariantModal)
   * iOS e Android PWA
   * ======================================== */
  
  /* Riduzione padding container modale teglia */
  [data-tray-modal] {
    padding-top: 20px !important; /* Da 28px */
    padding-bottom: 22px !important; /* Da 32px */
    padding-left: 20px !important; /* Da 28px */
    padding-right: 20px !important; /* Da 28px */
  }
  
  /* Riduzione gap verticale tra card gusti nella modale teglia */
  [data-tray-modal] [data-modal-product-row] {
    margin-bottom: 10px !important; /* Da 14px */
    padding-top: 14px !important; /* Da 20px */
    padding-bottom: 14px !important; /* Da 20px */
  }
  
  /* Riduzione margin ScrollView modale teglia */
  [data-tray-modal] [style*="modalVariantScroll"] {
    margin-top: 12px !important; /* Da 16px */
    margin-bottom: 12px !important; /* Da 16px */
  }
  
  /* Riduzione font size e line-height solo in modale teglia */
  [data-tray-modal] [data-modal-product-name],
  [data-tray-modal] [style*="variantItemName"] {
    font-size: 18px !important; /* Da 19px */
    line-height: 22px !important;
  }
  
  [data-tray-modal] [data-modal-product-desc],
  [data-tray-modal] [style*="variantItemDesc"] {
    font-size: 13px !important; /* Da 14px */
    line-height: 18px !important; /* Da 20px */
    margin-top: 3px !important; /* Da 4px */
  }