/* ========================================
   OTTIMIZZAZIONI MOBILE GLOBALI
   File CSS dedicato per il supporto mobile
   ======================================== */

/* ========================================
   1. OTTIMIZZAZIONI BASE PER TUTTE LE PAGINE
   ======================================== */

@media (max-width: 768px) {
    /* Reset padding per tutto il contenuto - USA TUTTA LA LARGHEZZA */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    body, main, .container, .wrapper, section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100vw !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Contenitori principali a tutta larghezza */
    .header-container, .footer-container, .container {
        max-width: 100% !important;
    }
    
    /* Immagini responsive */
    img, picture, source {
        max-width: 100%;
        height: auto;
    }
    
    /* Videos responsive */
    video, iframe, embed, object {
        max-width: 100%;
        height: auto;
    }
    
    /* Form elements - evita zoom su iOS */
    input, select, textarea, button, [role="button"] {
        font-size: 16px !important;
        min-height: 44px;
        touch-action: manipulation;
    }
    
    /* Links e bottoni touch-friendly */
    a, button, .btn, input[type="submit"], input[type="button"] {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Tables responsive */
    table {
        font-size: 14px;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Cards su mobile */
    .card, .nb-card, .pricing-card, .feature-card, .testimonial-card {
        margin-bottom: 1rem;
        padding: 1rem !important;
    }
    
    /* Lists */
    ul, ol {
        padding-left: 1.5rem;
    }
    
    /* Headers - ridimensiona su mobile */
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.5rem !important; }
    h4 { font-size: 1.25rem !important; }
    h5 { font-size: 1.125rem !important; }
    h6 { font-size: 1rem !important; }
    
    /* Paragraphs */
    p {
        line-height: 1.6;
        margin-bottom: 1rem;
    }
    
    /* Spacing utilities */
    .mb-1 { margin-bottom: 0.5rem !important; }
    .mb-2 { margin-bottom: 1rem !important; }
    .mb-3 { margin-bottom: 1.5rem !important; }
    .mt-1 { margin-top: 0.5rem !important; }
    .mt-2 { margin-top: 1rem !important; }
    .mt-3 { margin-top: 1.5rem !important; }
    .p-1 { padding: 0.5rem !important; }
    .p-2 { padding: 1rem !important; }
    .p-3 { padding: 1.5rem !important; }
    .mx-auto { margin-left: auto !important; margin-right: auto !important; }
    .my-auto { margin-top: auto !important; margin-bottom: auto !important; }
}

/* ========================================
   2. GRID E LAYOUT RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    /* Forza colonna singola per tutte le grid */
    .row, .grid, .grid-2, .grid-3, .grid-4,
    .columns, .col, .col-6, .col-4, .col-3,
    .flex-row, .flex-col,
    .pricing-cards, .features-grid, .testimonials-grid,
    .stats-grid, .books-grid, .books-list {
        display: block !important;
    }
    
    /* Colonne */
    .col, .col-6, .col-4, .col-3,
    .col-sm, .col-md, .col-lg,
    [class*="col-"] {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    
    /* Flexbox columns */
    .flex-row > *,
    .flex > * {
        width: 100% !important;
        margin-bottom: 0.75rem;
    }
    
    /* Flex columns */
    .flex-column, .flex-col, .flex-row {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    /* Center content */
    .center, .center-content {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
}

/* ========================================
   3. OTTIMIZZAZIONI PER SCHERMI PICCOLI (320px)
   ======================================== */

@media (max-width: 320px) {
    body {
        font-size: 14px;
    }
    
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.35rem !important; }
    h3 { font-size: 1.2rem !important; }
    h4 { font-size: 1rem !important; }
    
    /* Bottoni e input più grandi per touch */
    .btn, button, input, select, textarea, a.button {
        font-size: 15px !important;
        padding: 10px 16px !important;
        min-height: 44px !important;
        width: 100% !important;
    }
    
    /* Riduci padding generale */
    .container, .wrapper, main, .page-content {
        padding: 0.5rem !important;
    }
    
    /* Riduci spaziature */
    .mb-1 { margin-bottom: 0.4rem !important; }
    .mb-2 { margin-bottom: 0.75rem !important; }
    .mb-3 { margin-bottom: 1rem !important; }
    .mt-1 { margin-top: 0.4rem !important; }
    .mt-2 { margin-top: 0.75rem !important; }
    .mt-3 { margin-top: 1rem !important; }
}

/* ========================================
   4. OTTIMIZZAZIONI SPECIFICHE PER COMPONENTI
   ======================================== */

/* Navbar mobile */
@media (max-width: 768px) {
    .navbar, .nav, .nav-bar {
        padding: 0.75rem 1rem !important;
    }
    
    .nav-menu, .nav-links, .nav-items {
        display: none !important;
    }
    
    .mobile-menu-toggle {
        display: flex !important;
    }
}

/* Footer mobile */
@media (max-width: 768px) {
    .footer, .footer-section {
        padding: 2rem 1rem !important;
    }
    
    .footer-links, .footer-menu {
        flex-direction: column !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .footer-links a, .footer-menu a {
        width: 100% !important;
        padding: 0.75rem !important;
        text-align: center !important;
    }
}

/* Modal mobile */
@media (max-width: 768px) {
    .modal, .modal-dialog, .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }
    
    .modal-body {
        padding: 1rem !important;
        overflow-y: auto !important;
    }
    
    .modal-close {
        top: 0.5rem !important;
        right: 0.5rem !important;
        width: 40px !important;
        height: 40px !important;
    }
}

/* Tabs mobile */
@media (max-width: 768px) {
    .tabs, .tab-nav {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .tabs a, .tab-nav a, .tab-item {
        width: 100% !important;
        text-align: center !important;
        padding: 0.75rem !important;
    }
}

/* Alerts mobile */
@media (max-width: 768px) {
    .alert, .alert-box, .notification {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* Badges mobile */
@media (max-width: 768px) {
    .badge, .tag, .status-badge {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.625rem !important;
    }
}

/* ========================================
   5. PREVENZIONE PROBLEMI DI TOUCH
   ======================================== */

@media (max-width: 768px) {
    /* Rimuovi highlight tap su iOS */
    * {
        -webkit-tap-highlight-color: rgba(0, 184, 184, 0.3);
        -webkit-touch-callout: none;
        user-select: none;
        -webkit-user-select: none;
    }
    
    /* Testo selezionabile solo dove necessario */
    p, h1, h2, h3, h4, h5, h6, span, li {
        user-select: text;
        -webkit-user-select: text;
    }
    
    /* Touch action per elementi interattivi */
    a, area, button, [role="button"], input[label], label,
    select, textarea, .no-scroll, .btn, .lang-dropdown-toggle,
    .mobile-menu-toggle, .cookie-consent-buttons .btn {
        touch-action: manipulation;
        cursor: pointer;
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;
    }
    
    /* Feedback visivo al tocco */
    a:active, button:active, .btn:active,
    .lang-dropdown-toggle:active, .mobile-menu-toggle:active {
        opacity: 0.8;
        transform: scale(0.98);
    }
    
    /* Previene zoom involontario */
    input:focus, textarea:focus {
        font-size: 16px !important;
    }
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
    
    /* Bottone lingua mobile - migliorato per touch */
    .mobile-lang-btn {
        display: flex !important;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem !important;
        min-height: 48px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(0, 184, 184, 0.2);
        border-radius: 12px;
        color: var(--text-primary);
        font-weight: 500;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: rgba(0, 184, 184, 0.3);
    }
    
    .mobile-lang-btn:active {
        background: rgba(0, 184, 184, 0.2) !important;
        border-color: var(--accent) !important;
    }
}

/* ========================================
   6. OTTIMIZZAZIONI FONT RENDERING
   ======================================== */

@media (max-width: 768px) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    
    /* Previene testo troppo piccolo */
    * {
        min-font-size: 14px;
    }
}

/* ========================================
   7. ELEMENTI DESKTOP-ONLY (nascosti su mobile)
   ======================================== */

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    
    .hidden-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* ========================================
    8. UTILITIES EXTRA PER MOBILE
    ======================================== */

/* Text overflow ellipsis */
.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

@media (max-width: 768px) {
    .text-center-mobile {
        text-align: center !important;
    }
    
    .flex-mobile-column {
        flex-direction: column !important;
    }
    
    .grid-mobile-1 {
        grid-template-columns: 1fr !important;
    }
    
    /* Hide elements on small screens */
    .hide-xs {
        display: none !important;
    }
    
    /* Mobile language selector styles */
    .mobile-lang-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .mobile-lang-selector {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
        margin-top: 1rem;
    }
    
    .mobile-lang-btn {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        min-height: 48px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(0, 184, 184, 0.2);
        border-radius: 12px;
        color: var(--text-primary);
        font-weight: 500;
        transition: all 0.2s ease;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 184, 184, 0.3);
        user-select: none;
    }
    
    .mobile-lang-btn:hover,
    .mobile-lang-btn:focus {
        background: rgba(0, 184, 184, 0.1);
        border-color: rgba(0, 184, 184, 0.4);
    }
    
    .mobile-lang-btn:active {
        background: rgba(0, 184, 184, 0.2);
        border-color: var(--accent);
        transform: scale(0.98);
    }
    
    .mobile-lang-btn.active {
        background: rgba(0, 184, 184, 0.2);
        border-color: var(--accent);
        color: var(--accent);
    }
    
    .mobile-lang-btn .flag {
        font-size: 1.5rem;
    }
    
    .mobile-lang-btn .lang-name {
        font-size: 1rem;
        font-weight: 600;
    }
    
    /* Prevenzione overflow testo */
    p, h1, h2, h3, h4, h5, h6, span, li, a, td, th {
        overflow-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
    }
    
    /* Link nel mobile menu */
    .mobile-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem !important;
        min-height: 48px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ========================================
   COOKIE BANNER MOBILE OPTIMIZATIONS
   ======================================== */

/* Cookie Banner Mobile */
@media (max-width: 768px) {
    .cookie-consent-banner {
        bottom: env(safe-area-inset-bottom, 15px);
        left: env(safe-area-inset-left, 15px);
        right: env(safe-area-inset-right, 15px);
        padding-bottom: env(safe-area-inset-bottom, 1.25rem);
        padding-left: env(safe-area-inset-left, 1.25rem);
        padding-right: env(safe-area-inset-right, 1.25rem);
    }
    
    .cookie-consent-content {
        gap: 1rem;
    }
    
    .cookie-consent-text {
        font-size: 0.9rem;
        text-align: center;
    }
    
    .cookie-consent-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .cookie-consent-buttons .btn {
        width: 100%;
        min-height: 48px;
        padding: 1rem 1.5rem;
        font-size: 1rem;
        touch-action: manipulation;
    }
    
    .cookie-banner-close {
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
        top: 8px;
        right: 8px;
    }
    
    .cookie-preference-modal {
        padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
        align-items: flex-end;
    }
    
    .cookie-preference-content {
        margin: 0;
        border-radius: 20px 20px 0 0;
        max-height: calc(100vh - env(safe-area-inset-top, 0));
        padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0));
    }
    
    .cookie-preference-close {
        width: 44px;
        height: 44px;
        font-size: 1.8rem;
        top: env(safe-area-inset-top, 15px);
        right: 15px;
    }
}

/* Small mobile devices */
@media (max-width: 375px) {
    .cookie-consent-banner {
        left: 10px;
        right: 10px;
        padding: 0.875rem;
    }
    
    .cookie-consent-text {
        font-size: 0.85rem;
    }
    
    .cookie-consent-buttons .btn {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
    }
    
    .cookie-preference-content {
        padding: 1.25rem;
    }
    
    .cookie-preference-title {
        font-size: 1.3rem;
    }
}

/* Improve touch targets for mobile */
@media (pointer: coarse) {
    .cookie-consent-buttons .btn {
        min-height: 48px;
        padding: 1rem 1.5rem;
    }
    
    .preference-toggle {
        min-height: 48px;
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .toggle-switch {
        width: 52px;
        height: 28px;
        flex-shrink: 0;
    }
    
    .toggle-slider {
        width: 22px;
        height: 22px;
    }
    
    .toggle-switch.active .toggle-slider {
        transform: translateX(26px);
    }
    
    .cookie-banner-close {
        min-width: 44px;
        min-height: 44px;
    }
    
    .cookie-preference-close {
        min-width: 44px;
        min-height: 44px;
    }
    
    .lang-dropdown-toggle,
    .mobile-menu-toggle {
        min-height: 44px;
        min-width: 44px;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 184, 184, 0.3);
    }
}

/* Prevent zoom on double-tap */
@media (max-width: 768px) {
    .cookie-consent-banner,
    .cookie-consent-buttons .btn,
    .preference-toggle,
    .toggle-switch {
        -webkit-tap-highlight-color: rgba(0, 184, 184, 0.3);
        touch-action: manipulation;
        cursor: pointer;
        min-height: 48px;
        user-select: none;
        -webkit-user-select: none;
    }
    
    .preference-toggle:active {
        background: #e9ecef;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .cookie-consent-banner {
        transition: none;
        opacity: 1;
        visibility: visible;
    }
    
    .cookie-consent-banner.hidden {
        opacity: 1;
        visibility: hidden;
        transform: none;
    }
    
    .cookie-consent-banner.show {
        transform: none;
    }
}