/**
 * APPLE DEVICES MODAL FIX - v3.4.0 DYNAMIC
 * Approccio DINAMICO con JavaScript + CSS Variables
 * 
 * NUOVO SISTEMA:
 * - device-detection.js rileva automaticamente dispositivo
 * - CSS usa variabili dinamiche (--screen-width, --screen-height)
 * - NO più media queries per ogni singolo modello
 * - Classi CSS applicate dinamicamente (device-iphone-15-16-pro)
 * - Grid responsive con clamp() e CSS math
 * 
 * v3.4.0: SISTEMA DINAMICO HEADER E NAVBAR
 * - Header: usa --header-padding dinamico (4-8px in base a larghezza schermo)
 * - Navbar: usa --navbar-height dinamico (44-56px in base a larghezza)
 * - Font size navbar: usa --navbar-icon-size e --navbar-text-size dinamici
 * - Content padding: usa --content-padding-top dinamico (8-16px)
 * - Body padding-bottom: calcolato dinamicamente su --navbar-height
 * - Risultato: UI perfettamente adattiva a QUALSIASI dimensione schermo
 * 
 * v3.3.4: OTTIMIZZAZIONE ALTEZZE HEADER E NAVBAR
 * - Header: padding ridotto da 8px a 4px (più compatto)
 * - Navbar: altezza ridotta da 56px a 48px
 * - Navbar: padding ridotto, font size ottimizzato
 * - Body: padding-bottom ridotto da 80px a 60px
 * - Main content: padding-top ridotto da 16px a 12px
 * - Risultato: UI più compatta e moderna su iOS
 * 
 * VANTAGGI:
 * ✅ Funziona automaticamente su QUALSIASI dispositivo Apple
 * ✅ Non serve aggiornare per nuovi modelli iPhone
 * ✅ Calcolo dinamico basato su dimensioni reali
 * ✅ Header e navbar si adattano alla larghezza dello schermo
 * ✅ Meno codice, più manutenibile
 * ✅ Zero spazi bianchi tra header, body e navbar
 * ✅ Altezze ottimizzate per massimizzare contenuto visibile
 */

/* ===== CSS VARIABLES DINAMICHE ===== */
/* Settate da device-detection.js:
 * --screen-width: larghezza effettiva viewport
 * --screen-height: altezza effettiva viewport  
 * --safe-top: safe-area-inset-top per notch/Dynamic Island
 * --safe-bottom: safe-area-inset-bottom
 * --grid-min-width: dimensione minima grid calcolata (35% larghezza)
 */

/* ===== iOS & SAFARI DETECTION ===== */
/* These fixes target Safari and iOS devices specifically */

/* IMPORTANT: Prevent body and main layout from being affected */
@supports (-webkit-touch-callout: none) {
  /* Protect main layout elements from modal fixes */
  body,
  html,
  .app-container,
  header,
  nav,
  .bottom-nav,
  main,
  #app,
  .page-container {
    /* Reset any unwanted inherited styles */
    height: auto !important;
    min-height: 100vh;
    position: relative !important;
    padding: inherit !important;
  }
}

/* Fix for iOS safe area and viewport */
@supports (-webkit-touch-callout: none) {
  
  /* ===== FULL PAGE RESPONSIVE FIX - DINAMICO ===== */
  /* Usa CSS variables settate da JavaScript */
  * {
    box-sizing: border-box !important;
  }
  
  html {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  body {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    /* NO padding top - gestito dall'header sticky */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }
  
  /* Header sticky con sistema dinamico di rilevamento dispositivo */
  .app-header {
    position: sticky !important;
    top: 0 !important;
    padding: var(--header-padding, 6px) 16px !important;
    padding-top: calc(var(--header-padding, 6px) + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: var(--header-padding, 6px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
  }
  
  .container,
  .app-container,
  .dashboard-header,
  .stats-grid,
  .field-card,
  .tabs {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Container principale - NO padding top per evitare spazi */
  .app-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Elimina spazio tra header e body - padding dinamico */
  .app-header + main,
  .app-header + .app-container {
    margin-top: 0 !important;
    padding-top: var(--content-padding-top, 12px) !important;
  }
  
  /* Navbar - a filo della barra browser senza spazi */
  .navbar {
    margin: 0 !important;
    gap: 0 !important;
    height: var(--navbar-height, 48px) !important;
    padding: 0 !important;
    min-height: auto !important;
    left: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-top: none !important;
    border-radius: 0 !important;
    bottom: 0 !important;
  }
  
  /* Elementi navbar - nessun padding */
  .navbar a,
  .navbar button {
    padding: 0 !important;
    gap: 0 !important;
    min-height: auto !important;
    margin: 0 !important;
  }
  
  /* Span navbar - nessun margin */
  .navbar span {
    font-size: var(--navbar-icon-size, 1.25rem) !important;
    margin: 0 !important;
  }
  
  .navbar span:last-child {
    font-size: var(--navbar-text-size, 0.68rem) !important;
    margin: 0 !important;
  }
  
  /* ===== RESPONSIVE GRIDS - CALCOLO DINAMICO ===== */
  /* Usa --grid-min-width calcolato da JS (35% della larghezza schermo) */
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-width, 140px), 1fr)) !important;
  }
  
  .field-info {
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--grid-min-width, 140px) * 0.85), 1fr)) !important;
  }
  
  /* Tabs responsive con calcolo fluido */
  .tabs {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  .tab {
    flex: 1 1 auto !important;
    min-width: clamp(80px, 25vw, 150px) !important;
  }
  
  /* ===== MODAL SIZING - DINAMICO ===== */
  /* Dimensioni basate su viewport reale */
  .modal-content {
    width: clamp(90%, 95vw, 600px) !important;
    max-height: calc(100vh - var(--safe-top, 20px) - var(--safe-bottom, 20px) - 40px) !important;
    padding: clamp(1rem, 3vw, 2rem) !important;
  }
  
  /* ===== ALL MODALS: BASE FIXES ===== */
  .modal,
  .notification-detail-modal,
  .payment-modal,
  [id$="Modal"],
  [class$="modal"],
  #paymentModal,
  #confirmationModal,
  #registerModal,
  #businessModal,
  #notificationDetailModal,
  #addFieldModal,
  #addBookingModal,
  #editFieldModal,
  #matchCreatedModal,
  #availableFieldsModal,
  #notificationsModal,
  #changePlanModal,
  #fieldModal,
  #upgradeModal,
  #changePaymentModal,
  #changePasswordModal {
    /* iOS viewport height fix */
    height: 100vh;
    height: -webkit-fill-available;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    
    /* Prevent bounce scroll on modal overlay */
    position: fixed;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    
    /* Better safe area support - with fallback for old iOS */
    padding-top: 20px; /* Fallback for iOS < 11 */
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: 20px; /* Fallback for iOS < 11 */
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    padding-left: 10px; /* Fallback for iOS < 11 */
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: 10px; /* Fallback for iOS < 11 */
    padding-right: max(10px, env(safe-area-inset-right));
    
    /* Ensure proper stacking */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  
  /* ===== MODAL CONTENT CONTAINERS ===== */
  .modal-content,
  .notification-detail-content,
  .payment-modal-content,
  #paymentModal > div,
  #confirmationModal > div,
  #registerModal > div,
  #businessModal > div,
  #addFieldModal > div,
  #addBookingModal > div,
  #editFieldModal > div,
  #matchCreatedModal > div,
  #availableFieldsModal > div > div,
  #fieldModal > .modal-content,
  #upgradeModal > div,
  #changePaymentModal > div,
  #changePasswordModal > div {
    /* RIMOSSO min-height fisso - lascia che il contenuto determini l'altezza */
    height: auto !important;
    
    /* Prevent content overflow on iOS - with fallback */
    max-height: calc(100vh - 80px) !important; /* Fallback for iOS < 11 */
    max-height: calc(100vh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height: calc(-webkit-fill-available - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    
    /* Enable smooth scrolling */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    
    /* Ensure content is visible */
    position: relative !important;
    
    /* Proper width on iOS */
    width: calc(100vw - 40px) !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    
    /* Hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
  }
  
  /* ===== SPECIFIC MODAL FIXES ===== */
  
  /* Payment Modal */
  #paymentModal > div,
  .payment-modal > div {
    max-height: 85vh !important; /* Fallback for iOS < 11 */
    max-height: calc(85vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
  
  /* Confirmation Modal */
  #confirmationModal > div {
    max-height: 90vh !important; /* Fallback for iOS < 11 */
    max-height: calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
  
  /* Available Fields Modal */
  #availableFieldsModal > div > div {
    max-height: 80vh !important; /* Fallback for iOS < 11 */
    max-height: calc(80vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
  
  /* Facility Modals */
  #addFieldModal > div,
  #addBookingModal > div,
  #editFieldModal > div {
    max-height: 90vh !important; /* Fallback for iOS < 11 */
    max-height: calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Notifications Modal */
  #notificationsModal .modal-content {
    max-height: 60vh !important;
  }
  
  /* ===== MODAL CARDS & CONTENT RESPONSIVE FIXES ===== */
  /* IMPORTANT: Only apply to cards INSIDE modals, not page content */
  
  /* Cards inside modals only */
  .modal .card,
  .notification-detail-modal .card,
  .payment-modal .card,
  [id$="Modal"] .card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Organizer Info Card inside modals */
  .modal .organizer-info,
  [id$="Modal"] .organizer-info {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
  }
  
  .modal .organizer-avatar,
  [id$="Modal"] .organizer-avatar {
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 50px !important;
  }
  
  .modal .organizer-details,
  [id$="Modal"] .organizer-details {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  
  .modal .organizer-name,
  [id$="Modal"] .organizer-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  /* Player Cards inside modals */
  .modal .player-card,
  [id$="Modal"] .player-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 12px !important;
  }
  
  .modal .player-card-content,
  [id$="Modal"] .player-card-content {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .modal .player-photo,
  [id$="Modal"] .player-photo {
    flex-shrink: 0 !important;
    width: 60px !important;
    height: 60px !important;
  }
  
  .modal .player-info,
  [id$="Modal"] .player-info {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  
  /* Players List Container inside modals */
  .modal #playersList,
  [id$="Modal"] #playersList {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Change Plan Modal */
  #changePlanModal .modal-content {
    max-height: 70vh !important;
  }
  
  /* Register & Business Modals */
  #registerModal,
  #businessModal,
  #changePasswordModal {
    align-items: flex-start !important;
    padding-top: 40px !important; /* Fallback for iOS < 11 */
    padding-top: max(40px, env(safe-area-inset-top)) !important;
  }
  
  #registerModal > div,
  #businessModal > div,
  #changePasswordModal > div {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    max-height: calc(100vh - 100px) !important; /* Fallback for iOS < 11 */
    max-height: calc(100vh - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}

/* ===== iOS PORTRAIT SPECIFIC ===== */
@supports (-webkit-touch-callout: none) {
  @media screen and (orientation: portrait) and (max-width: 428px) {
    
    /* Smaller padding on portrait mode */
    .modal,
    .notification-detail-modal,
    .payment-modal,
    [id*="Modal"] {
      padding: 10px !important; /* Fallback for iOS < 11 */
      padding-top: 10px !important;
      padding-top: max(10px, env(safe-area-inset-top)) !important;
      padding-bottom: 10px !important;
      padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
    
    /* Full width modals on small screens */
    .modal-content,
    .notification-detail-content,
    .payment-modal-content,
    [class*="modal"] > div[style*="background"],
    div[id*="Modal"] > div[style*="background"] {
      width: calc(100vw - 20px) !important;
      border-radius: 16px !important;
      padding: 20px 16px !important;
    }
    
    /* Adjust close buttons */
    .modal-close-btn,
    .notification-close-btn,
    .close-modal-btn {
      top: 8px !important;
      right: 8px !important;
      width: 36px !important;
      height: 36px !important;
      font-size: 1.5rem !important;
    }
    
    /* Adjust headings */
    h2[style*="font-size"],
    .notification-detail-title {
      font-size: 1.3rem !important;
    }
    
    /* Smaller buttons */
    .notification-action-btn,
    button[style*="padding"] {
      padding: 12px 20px !important;
      font-size: 0.9rem !important;
    }
  }
}

/* ===== iOS LANDSCAPE SPECIFIC ===== */
@supports (-webkit-touch-callout: none) {
  @media screen and (orientation: landscape) and (max-height: 500px) {
    
    /* Optimize for landscape */
    .modal,
    .notification-detail-modal,
    .payment-modal,
    [id*="Modal"] {
      align-items: flex-start !important;
      padding: 5px !important;
      padding-top: max(5px, env(safe-area-inset-top)) !important;
    }
    
    .modal-content,
    .notification-detail-content,
    .payment-modal-content,
    [class*="modal"] > div[style*="background"],
    div[id*="Modal"] > div[style*="background"] {
      max-height: calc(100vh - 10px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
      margin-top: 0 !important;
      padding: 16px 20px !important;
    }
    
    /* Compact spacing in landscape */
    div[style*="margin-bottom"] {
      margin-bottom: 12px !important;
    }
  }
}

/* ===== IPAD SPECIFIC FIXES ===== */
@supports (-webkit-touch-callout: none) {
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    
    /* Better sizing for iPad */
    .modal-content,
    .notification-detail-content,
    .payment-modal-content {
      max-width: 540px !important;
      width: 90% !important;
    }
    
    #paymentModal > div,
    #confirmationModal > div {
      max-width: 540px !important;
    }
    
    /* More breathing room on iPad */
    .modal,
    .payment-modal,
    [id*="Modal"] {
      padding: 30px !important;
    }
  }
}

/* ===== FIX FOR SAFARI-SPECIFIC ISSUES ===== */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    
    /* Safari-specific backdrop-filter fix */
    .modal,
    .notification-detail-modal,
    .payment-modal,
    [id*="Modal"][style*="backdrop-filter"] {
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }
    
    /* Fix blurry text on Safari */
    .modal-content,
    .notification-detail-content,
    .payment-modal-content {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
}

/* ===== PREVENT BODY SCROLL ON iOS WHEN MODAL IS OPEN ===== */
@supports (-webkit-touch-callout: none) {
  body.modal-open,
  body:has([id*="Modal"][style*="display: flex"]),
  body:has([id*="Modal"][style*="display:flex"]) {
    position: fixed !important;
    width: 100% !important;
    height: 100vh !important;
    height: -webkit-fill-available !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: auto !important;
  }
  
  /* FIX: quando body è fixed, i date picker nativi devono avere il parent corretto */
  body.modal-open input[type="date"],
  body.modal-open input[type="time"],
  body:has([id*="Modal"][style*="display: flex"]) input[type="date"],
  body:has([id*="Modal"][style*="display: flex"]) input[type="time"] {
    position: relative !important;
    z-index: 999999 !important;
  }
}

/* ===== FIX FOR FORM INPUTS INSIDE MODALS ON iOS ===== */
@supports (-webkit-touch-callout: none) {
  
  /* Prevent zoom on focus */
  .modal input,
  .modal select,
  .modal textarea,
  [id*="Modal"] input,
  [id*="Modal"] select,
  [id*="Modal"] textarea {
    font-size: 16px !important;
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* Fix for select dropdowns on iOS */
  .modal select,
  [id*="Modal"] 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");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 40px !important;
  }
}

/* ===== FIX FOR ANIMATION PERFORMANCE ON iOS ===== */
@supports (-webkit-touch-callout: none) {
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translate3d(0, 30px, 0);
      -webkit-transform: translate3d(0, 30px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
    }
  }
  
  /* Apply hardware acceleration to animated elements */
  .modal[style*="display: flex"],
  .modal[style*="display:flex"],
  [id*="Modal"][style*="display: flex"],
  [id*="Modal"][style*="display:flex"] {
    animation: fadeIn 0.3s ease-out;
    -webkit-animation: fadeIn 0.3s ease-out;
  }
  
  .modal-content,
  .notification-detail-content,
  .payment-modal-content,
  [class*="modal"] > div[style*="background"],
  div[id*="Modal"] > div[style*="background"] {
    animation: slideUp 0.3s ease-out;
    -webkit-animation: slideUp 0.3s ease-out;
  }
}

/* ===== FIX FOR GRID LAYOUTS IN MODALS ON iOS ===== */
@supports (-webkit-touch-callout: none) {
  
  /* Fix grid layouts */
  .modal div[style*="display: grid"],
  .modal div[style*="display:grid"],
  [id*="Modal"] div[style*="display: grid"],
  [id*="Modal"] div[style*="display:grid"] {
    display: -ms-grid !important;
    display: grid !important;
  }
  
  /* Responsive grid on small iOS devices */
  @media screen and (max-width: 428px) {
    .modal div[style*="grid-template-columns"],
    [id*="Modal"] div[style*="grid-template-columns"] {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }
    
    /* Cards full width ONLY inside modals */
    .modal .card,
    .modal section.card,
    [id$="Modal"] .card,
    [id$="Modal"] section.card,
    .modal .organizer-info,
    [id$="Modal"] .organizer-info,
    .modal .player-card,
    [id$="Modal"] .player-card {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    
    /* Content padding adjustment for modals only */
    .modal main,
    .modal .container,
    [id$="Modal"] main,
    [id$="Modal"] .container {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }
  }
}

/* ===== ADDITIONAL MOBILE FIXES FOR IPHONE - MODALS ONLY ===== */
@media screen and (max-width: 428px) {
  /* Force full width ONLY for cards inside modals */
  .modal .card,
  .modal section.card,
  [id$="Modal"] .card,
  [id$="Modal"] section.card,
  .modal .organizer-info,
  [id$="Modal"] .organizer-info,
  .modal .player-card,
  [id$="Modal"] .player-card,
  .modal .stat-card,
  [id$="Modal"] .stat-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Player list inside modals */
  .modal #playersList,
  [id$="Modal"] #playersList {
    padding: 0 !important;
  }
  
  /* Action buttons inside modals */
  .modal .action-buttons-container,
  [id$="Modal"] .action-buttons-container {
    width: 100% !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }
  
  .action-buttons-row {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
  }
  
  .action-main-btn {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .action-share-btn {
    flex-shrink: 0 !important;
    width: 60px !important;
  }
}

/* ===== iOS SPECIFIC FIXES FOR APP CONTAINER ONLY ===== */
@supports (-webkit-touch-callout: none) {
  /* Main container fixes - no horizontal overflow */
  .app-container,
  main.app-container,
  .container {
    width: 100% !important;
    max-width: 540px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: calc(60px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    margin: 0 auto !important;
  }
  
  /* Cards inside modals must be full width */
  .modal .card,
  .modal section.card,
  [id$="Modal"] .card,
  [id$="Modal"] section.card,
  .modal .form-group,
  [id$="Modal"] .form-group,
  .modal .stat-card,
  [id$="Modal"] .stat-card,
  .modal .field-card,
  [id$="Modal"] .field-card,
  .modal .match-card,
  [id$="Modal"] .match-card,
  .modal .facility-card,
  [id$="Modal"] .facility-card,
  .modal .notification-card,
  [id$="Modal"] .notification-card,
  .modal .player-card,
  [id$="Modal"] .player-card,
  .modal .organizer-info,
  [id$="Modal"] .organizer-info {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  /* Inner card content */
  .card > *,
  section.card > *,
  .form-group > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Buttons in cards */
  .card button,
  section.card button,
  .form-group button,
  button.primary,
  button.secondary,
  button.full {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Divs with flex layouts inside cards */
  .card > div,
  section.card > div,
  .form-group > div,
  div[style*="display: flex"],
  div[style*="display:flex"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Nested divs with background colors (payment history items, etc) */
  .card div[style*="background"],
  .card div[style*="border-radius"],
  section.card div[style*="background"],
  section.card div[style*="border-radius"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
  
  /* Grid layouts - must adapt to single column on iOS */
  .stats-grid,
  .fields-grid,
  .field-grid,
  .settings-grid,
  .actions-grid,
  .hours-grid,
  .content-grid,
  .info-grid,
  .dates-grid,
  .availability-grid,
  .scheduling-grid,
  .grid-3,
  div[style*="display: grid"],
  div[style*="display:grid"],
  div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Input fields */
  .card input,
  .card select,
  .card textarea,
  section.card input,
  section.card select,
  section.card textarea,
  .form-group input,
  .form-group select,
  .form-group textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="url"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* Prevent iOS zoom on focus */
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  
  /* FIX MODAL DATE PICKER - Posizionamento corretto */
  input[type="date"],
  input[type="time"] {
    position: relative !important;
    transform: none !important;
  }
  
  /* Form group con date picker - nessun transform che interferisce */
  .form-group:has(input[type="date"]),
  .form-group:has(input[type="time"]) {
    position: relative !important;
    transform: none !important;
    will-change: auto !important;
  }
  
  /* Container form nella pagina create - nessuna interferenza */
  form:has(input[type="date"]),
  form:has(input[type="time"]),
  main:has(input[type="date"]),
  main:has(input[type="time"]) {
    transform: none !important;
    will-change: auto !important;
  }
  
  /* Lists inside cards */
  .card ul,
  .card ol,
  section.card ul,
  section.card ol {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Profile photo container */
  .profile-photo-container {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Payment method cards */
  #savedPaymentMethods > div,
  #paymentHistory > div {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Roles container */
  #rolesContainer,
  #rolesContainer > div,
  #rolesContainer .checkbox-label {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Subscription features */
  #subscriptionFeatures {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Time slots and booking elements */
  .time-slots-container,
  .day-hours-row,
  .hours-inputs {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Flex layouts - ensure they wrap properly */
  div[style*="display: flex"]:not([style*="flex-direction: column"]) {
    flex-wrap: wrap !important;
  }
  
  /* Fields list */
  #fieldsList,
  #modalFieldsList {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Header and footer safe areas */
  .app-header {
    /* padding-top gestito dalla regola principale (linea 82-87) - NON sovrascrivere */
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }
  
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }
  
  /* Media query for smaller iPhones */
  @media screen and (max-width: 428px) {
    .app-container,
    main.app-container,
    .container {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }
    
    .card,
    section.card,
    .form-group {
      padding: 16px 12px !important;
      margin-bottom: 16px !important;
    }
    
    /* Reduce font sizes slightly on very small screens */
    .card h3,
    section.card h3 {
      font-size: 1rem !important;
    }
    
    /* Payment/subscription badges */
    .card > div > div[style*="badge"],
    div[style*="border-radius: 20px"] {
      padding: 6px 12px !important;
      font-size: 0.8rem !important;
    }
    
    /* Grid layouts - force single column */
    .stats-grid,
    .fields-grid,
    .field-grid,
    .settings-grid,
    .actions-grid,
    .grid-3,
    div[style*="grid-template-columns: repeat"] {
      grid-template-columns: 1fr !important;
    }
    
    /* Stat cards full width */
    .stat-card {
      width: 100% !important;
      max-width: 100% !important;
    }
    
    /* Input groups that are side by side - stack them */
    div[style*="display: flex"] > input,
    div[style*="display: flex"] > select {
      flex: 1 1 100% !important;
      min-width: 100% !important;
    }
    
    /* Button groups */
    div[style*="display: flex"] > button {
      flex: 1 1 auto !important;
      min-width: 0 !important;
    }
  }
  
  /* Very small iPhones (SE, Mini) */
  @media screen and (max-width: 375px) {
    .app-container,
    main.app-container,
    .container {
      padding-left: 8px !important;
      padding-right: 8px !important;
    }
    
    .card,
    section.card,
    .form-group {
      padding: 12px 8px !important;
      border-radius: 16px !important;
    }
    
    /* Further reduce font sizes */
    .card h3,
    section.card h3 {
      font-size: 0.95rem !important;
    }
    
    button {
      font-size: 0.9rem !important;
      padding: 10px 16px !important;
    }
  }
}

/* ===== FIX FOR BUTTONS IN MODALS ON iOS ===== */
@supports (-webkit-touch-callout: none) {
  
  /* Ensure buttons are tappable */
  .modal button,
  .modal a[role="button"],
  .modal-content button,
  .payment-modal button,
  .notification-detail-modal button {
    min-height: 44px !important;
    min-width: 44px !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }
  
  #paymentModal button,
  #confirmationModal button,
  #registerModal button,
  #businessModal button,
  #addFieldModal button,
  #editFieldModal button,
  #upgradeModal button {
    min-height: 44px !important;
    min-width: 44px !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }
  
  /* Fix for button active state */
  .modal button:active,
  .modal-content button:active,
  #paymentModal button:active,
  #confirmationModal button:active,
  #registerModal button:active,
  #businessModal button:active {
    opacity: 0.7;
    transform: scale(0.98);
    -webkit-transform: scale(0.98);
  }
}

/* ===== FIX FOR SCROLLABLE CONTENT ON iOS ===== */
@supports (-webkit-touch-callout: none) {
  
  /* Ensure scrollable areas work properly */
  .modal-body,
  .modal-content,
  .payment-modal-content,
  .notification-detail-content {
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
    position: relative;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}

/* ===== FIX FOR NOTCH DEVICES (iPhone X and later) ===== */
@supports (-webkit-touch-callout: none) and (padding: max(0px)) {
  
  /* Extra padding for devices with notch */
  @media screen and (max-width: 428px) {
    .modal,
    .notification-detail-modal,
    .payment-modal,
    #paymentModal,
    #confirmationModal,
    #registerModal,
    #businessModal {
      padding-top: max(20px, env(safe-area-inset-top, 20px)) !important;
      padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
      padding-left: max(10px, env(safe-area-inset-left, 10px)) !important;
      padding-right: max(10px, env(safe-area-inset-right, 10px)) !important;
    }
  }
}

/* ===== ACCESSIBILITY IMPROVEMENTS FOR iOS ===== */
@supports (-webkit-touch-callout: none) {
  
  /* Better focus indicators on iOS */
  .modal *:focus,
  .modal-content *:focus,
  .payment-modal *:focus {
    outline: 2px solid #0bb3b5 !important;
    outline-offset: 2px !important;
  }
  
  /* Remove outline for mouse users only */
  .modal *:focus:not(:focus-visible),
  .modal-content *:focus:not(:focus-visible) {
    outline: none !important;
  }
}
/* ===== FACILITY DASHBOARD MODAL FIXES ===== */
@supports (-webkit-touch-callout: none) {
  
  /* Fix for fieldModal that appears crushed on iOS */
  #fieldModal {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 20px !important;
    padding-top: max(20px, env(safe-area-inset-top)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }
  
  #fieldModal.active {
    display: flex !important;
  }
  
  #fieldModal .modal-content {
    /* RIMOSSO min-height - lascia che il contenuto determini l'altezza */
    height: auto !important;
    max-height: 90vh !important;
    max-height: calc(100vh - env(safe-area-inset-top, 20px) - env(safe-area-inset-bottom, 20px) - 20px) !important;
    
    /* Scrolling fluido */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    
    /* Dimensioni width */
    width: calc(100vw - 40px) !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    
    /* Padding interno GENEROSO */
    padding: 2rem !important;
    box-sizing: border-box !important;
    
    /* Background e visibilità */
    background: white !important;
    border-radius: 12px !important;
    
    /* Performance */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform, scroll-position !important;
    
    /* Forza display block */
    display: block !important;
    position: relative !important;
  }
  
  /* Availability grid fix for iOS */
  #fieldModal .availability-grid {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 0.5rem !important;
    margin: 1rem 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  
  #fieldModal .availability-day {
    font-weight: bold !important;
    padding: 0.5rem !important;
    min-width: 80px !important;
  }
  
  #fieldModal .time-slots {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 0.5rem !important;
  }
  
  #fieldModal .time-slot {
    padding: 0.4rem 0.7rem !important;
    background: #f3f4f6 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 0.85rem !important;
    min-width: 60px !important;
    text-align: center !important;
  }
  
  #fieldModal .time-slot.selected {
    background: var(--brand, #0bb3b5) !important;
    color: white !important;
    border-color: var(--brand, #0bb3b5) !important;
  }
  
  /* Form rows responsive on iOS */
  #fieldModal .form-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  @media screen and (min-width: 480px) {
    #fieldModal .form-row {
      grid-template-columns: 1fr 1fr !important;
    }
  }
  
  /* Form groups proper spacing */
  #fieldModal .form-group {
    margin-bottom: 1rem !important;
    width: 100% !important;
    flex-shrink: 0 !important; /* Previene compressione */
  }
  
  #fieldModal .form-group input,
  #fieldModal .form-group select,
  #fieldModal .form-group textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
    border: 1px solid #ddd !important;
    font-size: 16px !important; /* Prevent zoom on iOS */
    flex-shrink: 0 !important; /* Previene compressione */
  }
  
  /* Previeni compressione di label e titoli */
  #fieldModal label,
  #fieldModal h2,
  #fieldModal h3 {
    flex-shrink: 0 !important;
  }
  
  /* Grid e contenitori mantengono la loro dimensione */
  #fieldModal .availability-grid,
  #fieldModal .time-slots,
  #fieldModal .form-row {
    flex-shrink: 0 !important;
  }
  
  /* Form actions buttons */
  #fieldModal .form-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin-top: 1.5rem !important;
  }
  
  @media screen and (min-width: 480px) {
    #fieldModal .form-actions {
      flex-direction: row !important;
      justify-content: flex-end !important;
    }
  }
  
  #fieldModal .form-actions button {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }
  
  @media screen and (min-width: 480px) {
    #fieldModal .form-actions button {
      width: auto !important;
      min-width: 120px !important;
    }
  }
  
  /* Headers dentro modal */
  #fieldModal h2,
  #fieldModal h3 {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    font-size: 1.3rem !important;
    line-height: 1.4 !important;
  }
  
  #fieldModal h3 {
    font-size: 1.1rem !important;
    margin-top: 1.5rem !important;
  }
  
  /* Labels */
  #fieldModal label {
    display: block !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.95rem !important;
  }
  
  /* Assicura che il form non sia compresso */
  #fieldModal form {
    width: 100% !important;
    height: auto !important; /* Adaptive, no min-height */
  }
}

/* ===== SETTINGS MODALS SPECIFIC FIXES ===== */
@supports (-webkit-touch-callout: none) {
  
  /* Upgrade Modal - Plan Selection Grid */
  #upgradeModal #planSelection {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }
  
  @media screen and (min-width: 600px) {
    #upgradeModal #planSelection {
      grid-template-columns: 1fr 1fr !important;
    }
  }
}

/* ===== MEDIA QUERIES PER DEVICE SPECIFICI ===== */
@supports (-webkit-touch-callout: none) {
  
  /* ===== IPHONE SPECIFIC - ULTRA AGGRESSIVE PER TUTTI I MODALI ===== */
  /* Tutti gli iPhone in portrait - dal più vecchio (SE 320px) al più recente (15 Pro Max 430px) */
  @media screen and (max-width: 440px) and (orientation: portrait) {
    
    /* Fix generali per TUTTI i modali su iPhone */
    .modal,
    [id$="Modal"],
    [class$="modal"] {
      padding: 15px !important;
      align-items: flex-start !important;
    }
    
    /* Fix content per TUTTI i modal-content su iPhone - SOLO LAYOUT, NO MIN-HEIGHT */
    .modal-content,
    #paymentModal > div,
    #confirmationModal > div,
    #registerModal > div,
    #businessModal > div,
    #addFieldModal > div,
    #addBookingModal > div,
    #editFieldModal > div,
    #matchCreatedModal > div,
    #availableFieldsModal > div > div,
    #upgradeModal > div,
    #changePaymentModal > div,
    #changePasswordModal > div,
    #notificationsModal > div,
    #changePlanModal > div {
      /* RIMOSSO min-height - solo max-height e layout */
      height: auto !important;
      max-height: 85vh !important;
      max-height: calc(100vh - 60px) !important;
      
      width: calc(100vw - 30px) !important;
      padding: 1.5rem !important;
      margin-top: 10px !important;
      margin-bottom: 10px !important;
      
      /* Assicura che il contenuto sia visibile */
      display: flex !important;
      flex-direction: column !important;
      
      /* Forza rendering corretto */
      transform: translate3d(0, 0, 0) !important;
      -webkit-transform: translate3d(0, 0, 0) !important;
      backface-visibility: hidden !important;
      -webkit-backface-visibility: hidden !important;
    }
    
    /* Fix specifico per #fieldModal (form complessi) - COMPLETAMENTE ADATTIVO */
    #fieldModal {
      padding: 15px !important;
      align-items: flex-start !important;
    }
    
    #fieldModal .modal-content {
      /* RIMOSSO min-height - completamente adattivo al contenuto */
      height: auto !important;
      max-height: 85vh !important;
      max-height: calc(100vh - 60px) !important;
      
      width: calc(100vw - 30px) !important;
      padding: 1.5rem !important;
      margin-top: 10px !important;
      margin-bottom: 10px !important;
      
      /* Assicura che il contenuto sia visibile */
      display: flex !important;
      flex-direction: column !important;
      
      /* Forza rendering corretto */
      transform: translate3d(0, 0, 0) !important;
      -webkit-transform: translate3d(0, 0, 0) !important;
      backface-visibility: hidden !important;
      -webkit-backface-visibility: hidden !important;
    }
    
    #fieldModal form {
      flex: 1 !important;
      height: auto !important; /* Adaptive, no min-height */
      display: flex !important;
      flex-direction: column !important;
    }
    
    #fieldModal .form-group {
      margin-bottom: 1rem !important;
      flex-shrink: 0 !important;
    }
    
    #fieldModal h2 {
      font-size: 1.25rem !important;
      margin-bottom: 1.25rem !important;
      flex-shrink: 0 !important;
    }
    
    #fieldModal h3 {
      font-size: 1.05rem !important;
      margin-top: 1.25rem !important;
      margin-bottom: 1rem !important;
      flex-shrink: 0 !important;
    }
    
    /* Grid disponibilità compatta ma leggibile */
    #fieldModal .availability-grid {
      margin: 1.25rem 0 !important;
      flex-shrink: 0 !important;
    }
    
    #fieldModal .form-actions {
      margin-top: 1.5rem !important;
      padding-top: 1rem !important;
      border-top: 1px solid #eee !important;
      flex-shrink: 0 !important;
    }
  }
  
  /* iPhone SE 1st gen (il più piccolo - 320px) - SOLO #fieldModal ha min-height */
  @media screen and (max-width: 330px) and (orientation: portrait) {
    .modal-content,
    #paymentModal > div,
    #confirmationModal > div,
    #registerModal > div,
    #businessModal > div,
    #addFieldModal > div,
    #addBookingModal > div,
    #editFieldModal > div,
    #upgradeModal > div,
    #changePaymentModal > div,
    #changePasswordModal > div,
    #notificationsModal > div,
    #changePlanModal > div {
      max-height: 78vh !important;
      padding: 1.25rem !important;
    }
    
    #fieldModal .modal-content {
      height: auto !important;
      max-height: 78vh !important;
      padding: 1.25rem !important;
    }
    
    #fieldModal form {
      height: auto !important;
    }
    
    #fieldModal h2 {
      font-size: 1.1rem !important;
    }
  }
  
  /* iPhone piccoli (SE 2/3, 12 mini, 13 mini - 360-390px) - SOLO #fieldModal ha min-height */
  @media screen and (min-width: 331px) and (max-width: 390px) and (orientation: portrait) {
    .modal-content,
    #paymentModal > div,
    #confirmationModal > div,
    #registerModal > div,
    #businessModal > div,
    #addFieldModal > div,
    #addBookingModal > div,
    #editFieldModal > div,
    #upgradeModal > div,
    #changePaymentModal > div,
    #changePasswordModal > div,
    #notificationsModal > div,
    #changePlanModal > div {
      max-height: 80vh !important;
      padding: 1.25rem !important;
    }
    
    #fieldModal .modal-content {
      height: auto !important;
      max-height: 80vh !important;
      padding: 1.25rem !important;
    }
    
    #fieldModal form {
      height: auto !important;
    }
    
    #fieldModal h2 {
      font-size: 1.15rem !important;
    }
    
    #fieldModal h3 {
      font-size: 1rem !important;
      margin-top: 1rem !important;
    }
    
    #fieldModal .form-group {
      margin-bottom: 0.85rem !important;
    }
  }
  
  /* iPhone grandi (12/13 Pro Max, Plus) - SOLO #fieldModal ha min-height */
  @media screen and (min-width: 414px) and (max-width: 428px) and (orientation: portrait) {
    .modal-content,
    #paymentModal > div,
    #confirmationModal > div,
    #registerModal > div,
    #businessModal > div,
    #addFieldModal > div,
    #addBookingModal > div,
    #editFieldModal > div,
    #upgradeModal > div,
    #changePaymentModal > div,
    #changePasswordModal > div,
    #notificationsModal > div,
    #changePlanModal > div {
      max-height: 88vh !important;
      padding: 1.75rem !important;
    }
    
    #fieldModal .modal-content {
      height: auto !important;
      max-height: 88vh !important;
      padding: 1.75rem !important;
    }
    
    #fieldModal form {
      height: auto !important;
    }
  }
  
  /* iPhone Pro Max più recenti (14 Pro Max, 15 Pro Max - 430px) - SOLO #fieldModal ha min-height */
  @media screen and (min-width: 429px) and (max-width: 440px) and (orientation: portrait) {
    .modal-content,
    #paymentModal > div,
    #confirmationModal > div,
    #registerModal > div,
    #businessModal > div,
    #addFieldModal > div,
    #addBookingModal > div,
    #editFieldModal > div,
    #upgradeModal > div,
    #changePaymentModal > div,
    #changePasswordModal > div,
    #notificationsModal > div,
    #changePlanModal > div {
      max-height: 88vh !important;
      padding: 2rem !important;
    }
    
    #fieldModal .modal-content {
      height: auto !important;
      max-height: 88vh !important;
      padding: 2rem !important;
    }
    
    #fieldModal form {
      height: auto !important;
    }
  }
  
  /* ===== TABLET / iPAD - RANGE DINAMICO ===== */
  /* Invece di media query specifiche, usiamo range fluidi */
  @media screen and (min-width: 744px) and (max-width: 1366px) {
    .stats-grid {
      grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 20vw, 220px), 1fr)) !important;
    }
    
    .field-info {
      grid-template-columns: repeat(auto-fit, minmax(clamp(130px, 18vw, 180px), 1fr)) !important;
    }
    
    .modal-content {
      width: clamp(60%, 70vw, 900px) !important;
      max-width: min(90vw, 900px) !important;
    }
  }
  
  /* Portrait vs Landscape - regola solo orientamento */
  @media screen and (orientation: portrait) {
    .modal-content {
      width: clamp(85%, 90vw, 700px) !important;
    }
  }
  
  @media screen and (orientation: landscape) and (max-height: 500px) {
    /* Landscape mode con altezza ridotta */
    .modal-content {
      max-height: calc(100vh - 60px) !important;
      padding: 1rem !important;
    }
    
    #fieldModal .form-group {
      margin-bottom: 0.6rem !important;
    }
  }
  
  /* Plan Cards */
  #upgradeModal .plan-card {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: auto !important;
  }
  
  /* Payment Section Grid */
  #upgradeModal form div[style*="grid-template-columns"],
  #changePaymentModal form div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  @media screen and (min-width: 480px) {
    #upgradeModal form div[style*="grid-template-columns"],
    #changePaymentModal form div[style*="grid-template-columns"] {
      grid-template-columns: 1fr 1fr !important;
    }
  }
  
  /* Ensure payment modal content width */
  #upgradeModal .payment-modal-content,
  #changePaymentModal .payment-modal-content {
    max-width: calc(100vw - 40px) !important;
    width: 100% !important;
  }
  
  @media screen and (min-width: 768px) {
    #upgradeModal .payment-modal-content {
      max-width: 900px !important;
    }
    
    #changePaymentModal .payment-modal-content {
      max-width: 600px !important;
    }
  }
  
  /* FIX: Share button dynamic size in matches filter section */
  /* Usa altezza dinamica basata sul pulsante accanto nella griglia */
  .filters-section button[onclick*="shareApp"][style*="aspect-ratio"] {
    /* Rimuovi aspect-ratio fisso e usa dimensioni dinamiche */
    aspect-ratio: 1 !important;
    width: auto !important;
    min-width: clamp(44px, 12vw, 56px) !important;
    max-width: clamp(44px, 12vw, 56px) !important;
    height: auto !important;
    padding: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(1rem, 3vw, 1.3rem) !important;
    flex-shrink: 0 !important;
  }
  
  /* Grid container responsive */
  .filters-section > div[style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr auto !important;
    align-items: stretch !important;
  }
}