/**
 * Mobile Fixes CSS - Fix specifici per prevenire overflow e migliorare UX mobile
 * Questo file contiene fix di emergenza per problemi di layout mobile
 */

/* ===== OVERRIDE ALTEZZE FISSE DAL CSS PRINCIPALE ===== */

/* Override specifico per max-height: 625px su mobile */
@media (max-width: 768px) {
    #laser-cutting-a,
    #laser-cutting-aa, 
    #laser-cutting-b,
    #laser-cutting-c {
        max-height: none !important; /* Override max-height: 625px */
        overflow: visible !important; /* Rimuove TUTTI gli overflow */
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
}

/* ===== RESET E PREVENZIONE OVERFLOW GLOBALE ===== */

/* Prevenzione overflow orizzontale su tutti i dispositivi mobile */
@media (max-width: 768px) {
    /* Reset globale per prevenire overflow */
    html {
        overflow-x: hidden !important;
        box-sizing: border-box;
    }
    
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        box-sizing: border-box;
    }
    
    /* Contenitori principali del plugin */
    #laser-cutting-container {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
    
    /* Canvas e contenitori di preview specifici */
    canvas#preview,
    #laser-cutting-ui-preview,
    #laser-cutting-ui-preview-container {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    /* Fix per elementi che potrebbero uscire dal viewport */
    .tooltip,
    .tooltip-text,
    .icon-button-with-tooltip::after {
        max-width: 90vw !important;
        box-sizing: border-box !important;
    }
    
    /* Immagini e media sempre responsive */
    img, svg {
        max-width: 100% !important;
        height: auto;
        box-sizing: border-box;
    }
    
    /* Canvas deve mantenere le sue dimensioni */
    canvas {
        max-width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Container flex che potrebbero causare problemi */
    .lavorazioni-images-container,
    .colore-lavorazioni,
    #laser-cutting-lavorazioni-colori-container {
        flex-wrap: wrap !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}

/* ===== FIX SPECIFICI PER CANVAS E PAPER.JS ===== */

@media (max-width: 768px) {
    /* Canvas Paper.js - fix specifici */
    canvas[data-paper-scope] {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* Contenitori Paper.js */
    [data-paper-scope],
    .paper-scope {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}

/* ===== FIX PER MODALI E POPUP ===== */

@media (max-width: 768px) {
    /* Tutti i popup e modali fullscreen su mobile */
    [id*="popup"],
    [id*="modal"],
    .popup,
    .modal {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        left: 0 !important;
        top: 0 !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    /* Fix per iframe nei modali */
    iframe {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ===== FIX PER SCHEDA MATERIALE ===== */

@media (max-width: 768px) {
    /* Nascondi immagine campione materiale su mobile */
    .laser-cutting-ui-materiali-scheda-value img {
        display: none !important;
    }
    
    /* Ridimensiona container scheda materiale */
    .laser-cutting-ui-materiali-scheda-container {
        padding: 10px;
    }
    
    /* Margin bottom per la scheda interna */
    .laser-cutting-ui-materiali-scheda-interna {
        margin-bottom: 3px !important;
    }
    
    /* Ottimizza layout scheda materiale */
    .laser-cutting-ui-scheda-materiale {
        font-size: 14px;
    }
    
    .laser-cutting-ui-materiali-scheda-label {
        margin-bottom: 8px;
        line-height: 1.4;
    }
    
    /* Badge lavorazioni più compatti */
    .lavorazione-badge {
        font-size: 12px;
        padding: 4px 8px;
        margin: 2px;
    }
}

/* ===== FIX PER FORM E CONTROLLI ===== */

@media (max-width: 768px) {
    /* Input e select responsive */
    input, select, textarea, button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Pulsanti sempre full-width su mobile quando appropriato */
    button[id*="add_to_cart"],
    button[class*="add-to-cart"],
    .add-to-cart-button {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 5px 0 !important;
    }
}

/* ===== FIX PER TABELLE E LAYOUT COMPLESSI ===== */

@media (max-width: 768px) {
    /* Tabelle responsive - solo overflow, non cambiare struttura */
    table {
        max-width: 100% !important;
        overflow-x: auto !important;
        box-sizing: border-box !important;
    }
}

/* ===== FIX PER ELEMENTI POSIZIONATI ===== */

@media (max-width: 768px) {
    /* Tooltip larghi 90% su mobile con posizione fissa */
    .tooltip-text {
        position: fixed !important;
        width: 90vw !important;
        max-width: 90vw !important;
        left: 5vw !important;
        right: 5vw !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 20px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        color: #333 !important;
        border: 1px solid #ddd !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
        z-index: 99999 !important;
        overflow-y: auto !important;
        max-height: 80vh !important;
    }
    
    /* Assicura che il tooltip sia sempre centrato */
    .tooltip {
        position: relative !important;
        display: inline-block !important;
    }
    
    /* Link nei tooltip più visibili */
    .tooltip-text a {
        color: #2271b1 !important;
        text-decoration: underline !important;
        font-weight: bold !important;
    }
    
    /* Freccia del tooltip nascosta su mobile */
    .tooltip-text::before,
    .tooltip-text::after {
        display: none !important;
    }
}

/* ===== FIX SPECIFICI PER LAVORAZIONI ===== */

@media (max-width: 768px) {
    /* Container principale lavorazioni */
    #laser-cutting-aa {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        max-height: none !important; /* Rimuove limite altezza */
        height: auto !important; /* Altezza adattiva */
        min-height: auto !important; /* Nessuna altezza minima forzata */
    }
    
    /* Container lavorazioni con opacità */
    #laser-cutting-lavorazioni {
        opacity: 1 !important; /* Rimuove opacità bassa di default */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* Container interno lavorazioni */
    #laser-cutting-lavorazioni-container {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Container colori lavorazioni */
    #laser-cutting-lavorazioni-colori {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Container immagini lavorazioni - layout verticale su mobile */
    .lavorazioni-images-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        gap: 5px !important;
        padding: 0 !important;
        margin-bottom: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    /* Box singola lavorazione - più compatta */
    .lavorazione-image-box {
        flex: 1 !important;
        text-align: center !important;
        padding: 5px !important;
        max-width: 33.33% !important;
        box-sizing: border-box !important;
    }
    
    /* Immagini lavorazioni ridotte */
    .lavorazione-image-box img {
        width: 60px !important;
        height: 60px !important;
        max-width: 100% !important;
        object-fit: cover !important;
        border-radius: 6px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* Testo lavorazioni più piccolo */
    .lavorazione-image-box p {
        margin: 5px 0 0 0 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #333 !important;
        line-height: 1.2 !important;
    }
    
    /* Container lavorazioni colori */
    #laser-cutting-lavorazioni-colori-container {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }
    
    /* Label lavorazioni */
    #laser-cutting-lavorazioni-colori-container > label {
        font-size: 13px !important;
        margin-bottom: 10px !important;
        display: block !important;
        text-align: left !important;
        padding: 0 5px !important;
    }
    
    /* Ogni lavorazione colore */
    #laser-cutting-lavorazioni-colori-container .laser-cutting-lavorazioni-colori-container-color {
        width: 100% !important;
        margin: 8px 0 !important;
        padding: 10px !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        border: 1px solid #e9ecef !important;
    }
    
    /* Container flex per colore e select */
    .colore-lavorazioni {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Pallini colore */
    .color-options {
        width: 35px !important;
        height: 35px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        border-width: 4px !important;
    }
    
    /* Container lavorazione */
    .lavorazione-container {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        width: auto !important;
    }
    
    /* Select lavorazioni */
    .lavorazione-container select {
        width: 100% !important;
        padding: 8px 12px !important;
        font-size: 16px !important; /* Previene zoom su iOS */
        -webkit-appearance: none !important;
        appearance: none !important;
        border-radius: 5px !important;
        border: 1px solid #ced4da !important;
        background-color: white !important;
        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 8px center;
        background-size: 20px;
        padding-right: 35px !important;
    }
    
    /* Check completato */
    .lavorazione-completata {
        font-size: 20px !important;
        margin-left: 8px !important;
    }
    
    /* Titolo lavorazioni extra */
    #laser-cutting-lavorazioni h5 {
        font-size: 14px !important;
        margin: 15px 0 10px 0 !important;
        padding: 0 5px !important;
    }
    
    /* Container lavorazioni extra */
    #laser-cutting-lavorazioni-extra {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ===== FIX ALTEZZA ADATTIVA PER TUTTI I CONTAINER ===== */

@media (max-width: 768px) {
    /* Tutti i container principali con altezza adattiva */
    #laser-cutting-a,
    #laser-cutting-aa,
    #laser-cutting-b,
    #laser-cutting-c {
        max-height: none !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important; /* Forza overflow visibile */
        overflow-y: visible !important;
        overflow-x: visible !important;
        -webkit-overflow-scrolling: auto !important; /* Disabilita scroll momentum iOS */
    }
    
    /* Container flex principale */
    #laser-cutting-container {
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
    }
    
    /* Canvas con altezza responsive ma definita */
    canvas#preview {
        height: 300px !important; /* Altezza fissa ragionevole per mobile */
        max-height: 50vh !important; /* Non più del 50% dello schermo */
    }
    
    /* Container preview */
    #laser-cutting-ui-preview,
    #laser-cutting-ui-preview-container {
        height: auto !important;
        max-height: none !important;
    }
    
    /* Container prezzo */
    #laser-cutting-ui-price-container {
        height: auto !important;
        max-height: none !important;
    }
    
    /* Tutti gli altri container interni */
    #laser-cutting-ui-materiali_scheda,
    #laser-cutting-ui-dimensions,
    #laser-cutting-upload,
    #laser-cutting-ui-add-to-cart {
        height: auto !important;
        max-height: none !important;
    }
}

/* ===== FIX PER ANIMAZIONI SU MOBILE ===== */
/* RIMOSSO - Causava problemi di sfarfallio */

/* ===== FIX VIEWPORT META TAG REMINDER ===== */
/* Assicurati che nel tema sia presente:
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
*/

/* ===== FIX AGGIUNTIVI PER STABILITÀ ===== */

@media (max-width: 768px) {
    /* Previeni flickering su elementi transform - SOLO SU MOBILE */
    /* Rimosso * selector che causava problemi su desktop */
    
    /* Disabilita hover effects su mobile */
    .lavorazione-image-box:hover,
    .color-options:hover,
    button:hover,
    a:hover {
        transform: none !important;
    }
    
    /* Fix per pulsanti zoom su mobile - area touch più grande */
    #zoomInButton,
    #zoomOutButton,
    #fitToViewButton,
    #rotateButton {
        cursor: pointer !important;
        touch-action: manipulation !important; /* Previene delay del touch */
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
        min-width: 44px !important; /* Minimo consigliato per touch target */
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        font-size: 18px !important; /* Icone leggermente più grandi */
        pointer-events: auto !important; /* Assicura che ricevano eventi */
        z-index: 1000 !important; /* Molto alto per essere sopra tutto */
        transition: transform 0.1s ease, background-color 0.1s ease !important;
        position: relative !important;
    }
    
    /* Feedback visivo quando premuto */
    #zoomInButton:active,
    #zoomOutButton:active,
    #fitToViewButton:active,
    #rotateButton:active {
        transform: scale(0.9) !important;
        background-color: rgba(0,0,0,0.1) !important;
        border-radius: 4px !important;
    }
    
    /* Animazione shake per feedback limite raggiunto */
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }
    
    /* Fix per pulsanti promo su mobile */
    #promo-tutorial-button,
    #promo-demo-button {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        cursor: pointer !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
    
    #promo-tutorial-button:active,
    #promo-demo-button:active {
        transform: scale(0.95) !important;
    }
    
    /* Smooth scrolling per tutto */
    html {
        scroll-behavior: smooth !important;
    }
    
    /* Fix per input focus zoom su iOS */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ===== DEBUG HELPERS (RIMUOVERE IN PRODUZIONE) ===== */

/* Uncomment per debug overflow issues
@media (max-width: 768px) {
    * {
        border: 1px solid red !important;
        box-sizing: border-box !important;
    }
}
*/

/* ===== OVERRIDE FINALE ASSOLUTO PER SCROLLBAR ===== */
@media (max-width: 768px) {
    /* Forza rimozione di TUTTE le scrollbar dai container principali */
    #laser-cutting-a,
    #laser-cutting-aa,
    #laser-cutting-b,
    #laser-cutting-c {
        overflow: visible !important;
        overflow-x: visible !important; 
        overflow-y: visible !important;
        -webkit-overflow-scrolling: unset !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
    
    /* Nascondi scrollbar webkit */
    #laser-cutting-a::-webkit-scrollbar,
    #laser-cutting-aa::-webkit-scrollbar,
    #laser-cutting-b::-webkit-scrollbar,
    #laser-cutting-c::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}