/* ========================================================================
   OTTIMIZZAZIONI MOBILE - SMARTPHONE PORTRAIT
   Versione dedicata per un'esperienza mobile ottimale
   ======================================================================== */

/* ===== BASE MOBILE IMPROVEMENTS ===== */
@media (max-width: 768px) {
    /* Rimuovi scroll orizzontale */
    body {
        overflow-x: hidden;
        width: 100%;
    }
    
    /* Container mobile ottimizzato */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 100%;
    }
    
    /* Typography mobile-friendly */
    body {
        font-size: 14px;
        line-height: 1.6;
    }
    
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 1.4rem !important;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.2rem !important;
        line-height: 1.3;
    }
    
    /* Touch targets minimi 44x44px (Apple HIG) */
    button,
    a.btn,
    .btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
    
    /* Aumenta area cliccabile link */
    a {
        padding: 0.25rem 0;
    }
}

/* ===== HEADER & NAVIGATION MOBILE ===== */
@media (max-width: 768px) {
    .site-header {
        padding: 0.75rem 1rem;
        backdrop-filter: blur(10px);
        background: rgba(10, 10, 10, 0.95);
    }
    
    .header-container {
       /* padding: 1rem 1rem;*/
        gap: 0.75rem;
    }
    
    /* Header actions migliorati */
    .header-actions {
        gap: 0.5rem;
    }
    
    .user-avatar-small {
        width: 36px;
        height: 36px;
    }
    
    /* Hamburger Menu - Navbar fissa in alto */
    .hamburger-menu {
        display: flex !important;
        position: static !important;
        z-index: 10001 !important;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        background: transparent;
        box-shadow: none;
        border: none;
        cursor: pointer;
        touch-action: auto;
        transition: background 0.3s ease;
        flex-direction: column;
        opacity: 1 !important;
        visibility: visible !important;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0;
        clip-path: none;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
    
    .hamburger-menu:active {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .hamburger-menu span {
        width: 24px;
        height: 3px;
        background: white;
        border-radius: 2px;
        transition: all 0.3s ease;
        display: block;
    }
    
    .hamburger-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    
    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
    
    /* Assicura che l'hamburger sia sempre visibile nella navbar */
    .header-right .hamburger-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ===== CALENDARIO MOBILE OTTIMIZZATO ===== */
@media (max-width: 768px) {
    /* Header calendario */
    .page-header {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .page-header h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem;
    }
    
    .user-lessons-info {
        padding: 0.75rem;
        font-size: 0.9rem;
        margin-top: 0.75rem;
    }
    
    /* Navigazione settimana */
    .current-week {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .current-week h2 {
        font-size: 1.1rem !important;
        margin-bottom: 0.75rem;
    }
    
    .week-nav-buttons {
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .week-nav-buttons .btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        flex: 1;
        min-width: calc(50% - 0.25rem);
    }
    
    /* Vista calendario scroll orizzontale migliorato */
    .calendario-wrapper {
        
        padding: 0 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary) var(--color-dark-3);
    }
    
    .calendario-wrapper::-webkit-scrollbar {
        height: 8px;
    }
    
    .calendario-wrapper::-webkit-scrollbar-track {
        background: var(--color-dark-3);
        border-radius: 4px;
    }
    
    .calendario-wrapper::-webkit-scrollbar-thumb {
        background: var(--color-primary);
        border-radius: 4px;
    }
    
    .calendario-header-row {
        min-width: fit-content;
    }
    
    .header-cell {
        min-width: 120px !important;
        padding: 0.75rem !important;
    }
    
    .day-name {
        font-size: 0.85rem !important;
        margin-bottom: 0.25rem;
    }
    
    .day-date {
        font-size: 0.75rem !important;
    }
    
    /* Slot giornalieri */
    .day-column {
        min-width: 120px !important;
    }
    
    .time-slot {
        padding: 0.75rem !important;
        margin-bottom: 0.5rem !important;
        min-height: auto;
    }
    
    .slot-time,
    .slot-time-mobile {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
        padding-bottom: 0.4rem !important;
        font-weight: 600;
    }
    
    .slot-course {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem;
    }
    
    .course-badge {
        font-size: 0.85rem !important;
        padding: 0.4rem 0.6rem !important;
        display: inline-block;
    }
    
    .capacity-info {
        margin-top: 0.5rem;
    }
    
    .capacity-badge {
        font-size: 0.8rem !important;
        padding: 0.35rem 0.6rem !important;
    }
    
    /* Bottoni azione */
    .btn-add-booking-inline {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
        width: 100%;
        display: block;
    }
    
    /* Lista prenotazioni */
    .booking-item {
        padding: 0.75rem !important;
        gap: 0.5rem !important;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .booking-name {
        font-size: 0.9rem !important;
        width: 100%;
    }
    
    .booking-actions {
        width: 100%;
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .booking-actions button {
        padding: 0.6rem 0.75rem !important;
        font-size: 0.85rem !important;
        flex: 1;
    }
}

/* ===== PORTRAIT SMARTPHONE SPECIFICO ===== */
@media (max-width: 480px) and (orientation: portrait) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Header ancora più compatto */
    .page-header h1 {
        font-size: 1.3rem !important;
    }
    
    .current-week h2 {
        font-size: 1rem !important;
    }
    
    /* Calendario ultra-compatto */
    .header-cell {
        min-width: 100px !important;
        padding: 0.6rem 0.5rem !important;
    }
    
    .day-column {
        min-width: 100px !important;
    }
    
    .day-name {
        font-size: 0.75rem !important;
    }
    
    .day-date {
        font-size: 0.7rem !important;
    }
    
    .time-slot {
        padding: 0.6rem !important;
    }
    
    .slot-time,
    .slot-time-mobile {
        font-size: 0.95rem !important;
    }
    
    .course-badge {
        font-size: 0.8rem !important;
        padding: 0.3rem 0.5rem !important;
    }
    
    /* Bottoni più grandi per touch */
    button,
    .btn {
        min-height: 48px;
        padding: 0.875rem 1rem;
    }
    
    .week-nav-buttons .btn {
        font-size: 0.85rem !important;
    }
}

/* ===== FORM E INPUT MOBILE-FRIENDLY ===== */
@media (max-width: 768px) {
    /* Input ottimizzati per touch */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px !important; /* Previene zoom su iOS */
        padding: 0.875rem;
        min-height: 48px;
        border-radius: 8px;
        width: 100%;
    }
    
    textarea {
        min-height: 120px;
        resize: vertical;
    }
    
    /* Form groups */
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .form-row > * {
        width: 100% !important;
        flex: none;
    }
    
    label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
        display: block;
    }
    
    /* Select migliorato */
    select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 12px;
        padding-right: 2.5rem;
    }
}

/* ===== MODAL E OVERLAY MOBILE ===== */
@media (max-width: 768px) {
    /* Modal fullscreen su mobile */
    .modal,
    .gym-modal {
        padding: 0 !important;
    }
    
    .modal-content,
    .gym-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin-top: 25% !important;
        border-radius: 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .modal-header,
    .gym-modal-header {
        padding: 1rem;
        position: sticky;
        top: 0;
        background: var(--color-dark-2);
        z-index: 10;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .modal-body,
    .gym-modal-body {
        padding: 1rem;
        max-height: none !important;
    }
    
    .modal-footer,
    .gym-modal-footer {
        padding: 1rem;
        position: sticky;
        bottom: 0;
        background: var(--color-dark-2);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        gap: 0.5rem;
    }
    
    .modal-footer button,
    .gym-modal-footer button {
        flex: 1;
    }
    
    /* Close button ottimizzato */
    .close-modal,
    .gym-modal-close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }
}

/* ===== TABELLE RESPONSIVE ===== */
@media (max-width: 768px) {
    .user-table-wrapper,
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    
    table {
        min-width: 600px;
        font-size: 0.85rem;
    }
    
    th,
    td {
        padding: 0.75rem 0.5rem !important;
        white-space: nowrap;
    }
    
    /* Alternativa: Card layout per tabelle */
    .user-card,
    .booking-card {
        background: var(--color-dark-2);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .user-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .user-card-body {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .user-card-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
    }
    
    .user-card-label {
        font-size: 0.85rem;
        color: var(--color-text-muted);
    }
    
    .user-card-value {
        font-size: 0.9rem;
        font-weight: 500;
    }
}

/* ===== CARD E GRID MOBILE ===== */
@media (max-width: 768px) {
    /* Grid 1 colonna su mobile */
    .classes-grid,
    .trainers-grid,
    .courses-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
    
    .class-card,
    .trainer-card,
    .course-card {
        max-width: 100%;
    }
    
    /* Card ottimizzate */
    .card {
        padding: 1rem;
        border-radius: 8px;
    }
    
    .card-header {
        padding: 0.75rem 0;
        margin-bottom: 0.75rem;
    }
    
    .card-body {
        padding: 0;
    }
    
    .card-footer {
        padding: 0.75rem 0 0;
        margin-top: 0.75rem;
    }
    
    /* Tutti gli header con layout flex diventano colonna su mobile */
    .section-header,
    .section-header-actions,
    .page-header-actions,
    .prossime-prenotazioni-header,
    .user-card-header,
    .card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    
    .section-header h2,
    .section-header-actions h2,
    .prossime-prenotazioni-header h2,
    .user-card-header h3,
    .card-header h2,
    .card-header h3 {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    /* Bottoni in header diventano full-width */
    .section-header .btn,
    .section-header-actions .btn,
    .card-header .btn,
    .card-header .btn-view-all,
    .card-header a.btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    
    /* Pagination info responsive */
    .pagination-info {
        width: 100%;
        text-align: center;
        margin-top: 0.5rem;
    }
    
    /* Calendar controls responsive */
    .calendar-controls {
        width: 100%;
        justify-content: center;
        flex-wrap: nowrap;
    }
}

/* ===== GESTIONE UTENTI MOBILE ===== */
@media (max-width: 768px) {
    .user-detail-page .container {
        padding: 1rem;
    }
    
    .user-detail-header {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1rem;
    }
    
    .user-avatar {
        width: 100px;
        height: 100px;
        margin-bottom: 1rem;
    }
    
    .user-detail-info {
        text-align: center;
    }
    
    .user-name {
        font-size: 1.5rem !important;
    }
    
    .user-email {
        font-size: 0.9rem;
    }
    
    /* Tabs orizzontali scrollabili */
    .detail-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    
    .detail-tabs button {
        display: inline-block;
        min-width: 120px;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    /* Info sections stack */
    .info-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    .info-card {
        padding: 1rem;
    }
    
    .info-label {
        font-size: 0.85rem;
    }
    
    .info-value {
        font-size: 1rem;
    }
    
    /* Actions footer */
    .user-actions {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
        position: sticky;
        bottom: 0;
        background: var(--color-dark);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin: 0 -1rem;
    }
    
    .user-actions button,
    .user-actions a {
        width: 100%;
        justify-content: center;
    }
}

/* ===== BOTTONI E CTA MOBILE ===== */
@media (max-width: 768px) {
    /* Bottoni principali */
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success {
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 8px;
        width: 100%;
        text-align: center;
    }
    
    /* Bottoni gruppo */
    .button-group {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }
    
    .button-group-horizontal {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .button-group-horizontal > * {
        flex: 1;
        min-width: calc(50% - 0.375rem);
    }
    
    /* FAB (Floating Action Button) */
    .fab {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--color-primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(255, 0, 21, 0.4);
        z-index: 999;
        border: none;
        cursor: pointer;
        transition: var(--transition);
    }
    
    .fab:hover,
    .fab:active {
        transform: scale(1.1);
        box-shadow: 0 6px 16px rgba(255, 0, 21, 0.6);
    }
}

/* ===== LOGIN E AUTH MOBILE ===== */
@media (max-width: 768px) {
    .login-page,
    .auth-page {
        padding: 2rem 1rem;
    }
    
    .login-form,
    .auth-form {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }
    
    .login-header h1,
    .auth-header h1 {
        font-size: 1.75rem !important;
    }
    
    .login-logo,
    .auth-logo {
        max-width: 150px;
        margin-bottom: 1.5rem;
    }
    
    .form-divider {
        margin: 1.5rem 0;
    }
    
    .social-login-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .social-login-buttons button {
        width: 100%;
    }
}

/* ===== IMMAGINI E MEDIA RESPONSIVE ===== */
@media (max-width: 768px) {
    img,
    video,
    iframe {
        max-width: 100%;
        height: auto;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }
    
    .gallery-item {
        aspect-ratio: 1;
    }
    
    /* Lightbox mobile */
    #club-lightbox-content,
    .lightbox-content {
        padding: 1rem;
    }
    
    #club-lightbox-close,
    .lightbox-close {
        font-size: 2rem !important;
        width: 44px;
        height: 44px;
        top: 1rem !important;
        right: 1rem !important;
    }
    
    #club-lightbox-prev,
    #club-lightbox-next,
    .lightbox-prev,
    .lightbox-next {
        width: 44px !important;
        height: 44px !important;
    }
}

/* ===== TOAST E NOTIFICHE MOBILE ===== */
@media (max-width: 768px) {
    .toast-container,
    .gym-toast-container {
        position: fixed;
        top: auto !important;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        width: auto;
        max-width: none;
    }
    
    .toast,
    .gym-toast {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0.5rem 0;
    }
    
    .toast-message {
        font-size: 0.9rem;
        padding: 1rem;
    }
}

/* ===== LOADING STATES MOBILE ===== */
@media (max-width: 768px) {
    .gym-loading-overlay {
        backdrop-filter: blur(8px);
    }
    
    .gym-loading-spinner {
        width: 40px;
        height: 40px;
    }
    
    .gym-loading-message {
        font-size: 0.9rem;
        padding: 0 1rem;
    }
}

/* ===== UTILITY CLASSES MOBILE ===== */
@media (max-width: 768px) {
    /* Spacing */
    .mt-mobile { margin-top: 1rem; }
    .mb-mobile { margin-bottom: 1rem; }
    .ml-mobile { margin-left: 1rem; }
    .mr-mobile { margin-right: 1rem; }
    .mx-mobile { margin-left: 1rem; margin-right: 1rem; }
    .my-mobile { margin-top: 1rem; margin-bottom: 1rem; }
    
    .pt-mobile { padding-top: 1rem; }
    .pb-mobile { padding-bottom: 1rem; }
    .pl-mobile { padding-left: 1rem; }
    .pr-mobile { padding-right: 1rem; }
    .px-mobile { padding-left: 1rem; padding-right: 1rem; }
    .py-mobile { padding-top: 1rem; padding-bottom: 1rem; }
    
    /* Display */
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
    .show-mobile-flex { display: flex !important; }
    .show-mobile-grid { display: grid !important; }
    
    /* Text */
    .text-center-mobile { text-align: center !important; }
    .text-left-mobile { text-align: left !important; }
    .text-right-mobile { text-align: right !important; }
    
    /* Full width */
    .w-full-mobile { width: 100% !important; }
    .h-full-mobile { height: 100% !important; }
    
    /* Stack */
    .stack-mobile {
        flex-direction: column !important;
        gap: 0.75rem;
    }
}

/* ===== LANDSCAPE MOBILE (OPTIONAL) ===== */
@media (max-width: 768px) and (orientation: landscape) {
    /* Riduci header in landscape */
    .site-header {
        padding: 0.5rem 1rem;
    }
    
    .page-header {
        padding: 0.75rem 1rem;
    }
    
    /* Modal più compatto in landscape */
    .modal-content,
    .gym-modal-content {
        height: 100vh;
        overflow-y: auto;
    }
}

/* ===== ACCESSIBILITY MOBILE ===== */
@media (max-width: 768px) {
    /* Focus visibile per navigazione tastiera */
    button:focus,
    a:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
    }
    
    /* Aumenta contrasto per leggibilità */
    .text-muted,
    .muted {
        color: #aaa !important;
    }
    
    /* Tap highlight */
    button,
    a,
    input[type="submit"],
    input[type="button"] {
        -webkit-tap-highlight-color: rgba(255, 0, 21, 0.3);
    }
}

/* ===== SAFE AREA INSETS (iPhone con notch) ===== */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .site-header {
            padding-top: max(0.75rem, env(safe-area-inset-top));
        }
        
        .site-footer {
            padding-bottom: max(1rem, env(safe-area-inset-bottom));
        }
        
        .fab {
            bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 0.5rem));
            right: max(1.5rem, env(safe-area-inset-right));
        }
        
        .modal-content,
        .gym-modal-content {
            padding-bottom: max(1rem, env(safe-area-inset-bottom));
        }
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    /* Usa transform invece di position per animazioni */
    .animated {
        will-change: transform;
    }
    
    /* Hardware acceleration */
    .gpu-accelerated {
        transform: translateZ(0);
        backface-visibility: hidden;
    }
    
    /* Limita animazioni complesse su mobile */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ===== MODALE RICHIEDI INFORMAZIONI ===== */
@media (max-width: 768px) {
    #info-request-modal .booking-modal-content {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    
    #info-request-modal .booking-modal-close {
        position: sticky;
        top: 0;
        right: 0;
        z-index: 10;
        background: rgba(10, 10, 10, 0.95);
        backdrop-filter: blur(10px);
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        margin-left: auto;
        border-radius: 0;
    }
    
    #info-request-modal h2 {
        position: sticky;
        top: 44px;
        background: rgba(10, 10, 10, 0.95);
        backdrop-filter: blur(10px);
        padding: 1.5rem 1rem;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 9;
    }
    
    #info-request-modal .modal-description {
        padding: 1rem;
        margin: 0;
        background: rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    #info-request-modal .booking-form {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1.5rem 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem);
    }
    
    #info-request-modal .form-group {
        margin-bottom: 1.5rem;
    }
    
    #info-request-modal .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        font-size: 0.95rem;
    }
    
    #info-request-modal .form-group .required {
        color: #e74c3c;
    }
    
    #info-request-modal input,
    #info-request-modal textarea {
        padding: 0.85rem 1rem;
        font-size: 16px !important; /* Previene zoom iOS */
        background-color: black!important;
        width: 100%!important;
        color: white!important;
        border: none;
        border-radius: 0;
        min-height: 44px;
        transition: all 0.3s;
        font-family: inherit;
        line-height: 1.5;
        box-sizing: border-box;
    }
    
    #info-request-modal input:focus,
    #info-request-modal textarea:focus {
        outline: none;
        background-color: black;
        box-shadow: 0 0 0 3px rgba(255, 0, 21, 0.1);
    }
    
    #info-request-modal input::placeholder,
    #info-request-modal textarea::placeholder {
        color: #999999;
    }
    
    #info-request-modal textarea {
        background-color: black!important;
        width: 100%!important;
        color: white!important;
        min-height: 140px;
        resize: vertical;
        line-height: 1.6;
        font-family: inherit;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Scrollbar personalizzata per textarea */
    #info-request-modal textarea::-webkit-scrollbar {
        width: 8px;
    }
    
    #info-request-modal textarea::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
    }
    
    #info-request-modal textarea::-webkit-scrollbar-thumb {
        background: rgba(255, 0, 21, 0.6);
        border-radius: 4px;
    }
    
    #info-request-modal textarea::-webkit-scrollbar-thumb:hover {
        background: #ff0015;
    }
    
    #info-request-modal #submit-info-request {
        width: 100%;
        margin-top: 1.5rem;
        position: sticky;
        bottom: 0;
        background: #ff0015;
        border: none;
        color: #fff;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 12px rgba(255, 0, 21, 0.3);
    }
    
    #info-request-modal #submit-info-request:hover,
    #info-request-modal #submit-info-request:active {
        background: #ff1a2e;
        transform: translateY(-1px);
    }
    
    #info-request-modal #submit-info-request:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    #info-request-modal .btn-loader {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    #info-request-modal .spinner {
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    #info-request-modal #info-request-message {
        margin: 1rem 0;
        padding: 1rem;
        border-radius: 8px;
        text-align: center;
        font-weight: 500;
    }
    
    #info-request-modal #info-request-message.success {
        background: rgba(46, 204, 113, 0.2);
        border: 1px solid #2ecc71;
        color: #2ecc71;
    }
    
    #info-request-modal #info-request-message.error {
        background: rgba(231, 76, 60, 0.2);
        border: 1px solid #e74c3c;
        color: #e74c3c;
    }
}

/* Desktop: stile più compatto */
@media (min-width: 769px) {
    #info-request-modal .modal-description {
        margin-bottom: 1.5rem;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.6;
    }
    
    #info-request-modal .form-group .required {
        color: #e74c3c;
    }
    
    /* Desktop: stile più compatto */
    #info-request-modal textarea {
        min-height: 180px;
        font-size: 15px !important;
        background-color: black!important;
        width: 100%!important;
        color: white!important;
    }
    
    /* Input più spaziosi su desktop */
    #info-request-modal input {
        font-size: 15px !important;
    }
}

/* ===== PRENOTAZIONI MOBILE COMPATTE (IL MIO PROFILO) ===== */
@media (max-width: 768px) {
    /* Card container */
    .profile-card .bookings-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* Singolo item prenotazione - layout compatto orizzontale */
    .profile-card .booking-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        background: var(--color-dark-2);
        border-left: 3px solid var(--color-primary);
        padding: 0.75rem 1rem;
        border-radius: 0;
        position: relative;
    }
    
    /* Data compatta a sinistra */
    .profile-card .booking-date {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 70px;
        background: var(--color-primary);
        padding: 0.5rem;
        border-radius: 4px;
        flex-shrink: 0;
    }
    
    .profile-card .booking-date .day-name {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        color: #000;
        line-height: 1;
    }
    
    .profile-card .booking-date .date-num {
        font-size: 1.5rem;
        font-weight: 700;
        color: #000;
        line-height: 1;
        margin: 0.25rem 0;
    }
    
    .profile-card .booking-date .month-name {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        color: #000;
        line-height: 1;
    }
    
    /* Dettagli al centro - layout compatto */
    .profile-card .booking-details {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        min-width: 0;
    }
    
    .profile-card .booking-time {
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        line-height: 1.2;
    }
    
    .profile-card .booking-class {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .profile-card .booking-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
        background: rgba(255, 165, 0, 0.15);
        color: #ffa500;
        border-radius: 3px;
        margin-top: 0.25rem;
        width: fit-content;
    }
    
    .profile-card .booking-status-badge .status-icon {
        font-size: 0.8rem;
    }
    
    /* Pulsante X a destra */
    .profile-card .btn-cancel-booking {
        background: transparent;
        color: rgba(255, 255, 255, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 4px;
        font-size: 1.5rem;
        line-height: 1;
        padding: 0;
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }
    
    .profile-card .btn-cancel-booking:active {
        background: rgba(255, 0, 21, 0.1);
        border-color: var(--color-primary);
        color: var(--color-primary);
        transform: scale(0.95);
    }
    
    /* Navigazione prenotazioni */
    .profile-card .bookings-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding: 0.75rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
    }
    
    .profile-card .btn-booking-nav {
        background: transparent;
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
        min-height: 36px;
        min-width: 36px;
        border-radius: 4px;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .profile-card .btn-booking-nav:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }
    
    .profile-card .btn-booking-nav:not(:disabled):active {
        background: rgba(255, 0, 21, 0.1);
        transform: scale(0.95);
    }
    
    .profile-card .bookings-counter {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.7);
    }
    
    .profile-card .bookings-counter .current-page {
        color: var(--color-primary);
        font-weight: 600;
    }
}

/* ===== PROSSIME PRENOTAZIONI MOBILE (CALENDARIO) ===== */
@media (max-width: 768px) {
    /* Container lista prenotazioni */
    .prossime-prenotazioni .bookings-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* Mostra solo 3 prenotazioni alla volta su mobile */
    .prossime-prenotazioni .booking-card:nth-child(n+4) {
        display: none;
    }
    
    /* Card prenotazione - layout compatto orizzontale */
    .prossime-prenotazioni .booking-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        background: var(--color-dark-2);
        border-left: 3px solid var(--color-primary);
        padding: 0.75rem 1rem;
        border-radius: 0;
        margin-bottom: 0;
    }
    
    .prossime-prenotazioni .booking-card.status-pending {
        border-left-color: #ffa500;
    }
    
    .prossime-prenotazioni .booking-card.status-approved {
        border-left-color: #00ff88;
    }
    
    .prossime-prenotazioni .booking-card.status-rejected {
        border-left-color: #999;
        opacity: 0.6;
    }
    
    /* Header: data compatta a sinistra */
    .prossime-prenotazioni .booking-card-header {
        background: transparent;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 70px;
        flex-shrink: 0;
    }
    
    .prossime-prenotazioni .booking-date {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: var(--color-primary);
        padding: 0.5rem;
        border-radius: 4px;
        width: 100%;
    }
    
    .prossime-prenotazioni .booking-date strong {
        font-size: 0.7rem;
        font-weight: 600;
        color: #000;
        line-height: 1;
        order: 3;
    }
    
    .prossime-prenotazioni .booking-date span {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        color: #000;
        line-height: 1;
        margin: 0;
        order: 1;
    }
    
    /* Badge status sul blocco data */
    .prossime-prenotazioni .booking-status-badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
        border-radius: 3px;
        white-space: nowrap;
        margin-top: 0.25rem;
        order: 4;
    }
    
    .prossime-prenotazioni .booking-status-badge.approved {
        background: rgba(0, 255, 136, 0.3);
        color: #000;
    }
    
    .prossime-prenotazioni .booking-status-badge.pending {
        background: rgba(255, 165, 0, 0.3);
        color: #000;
    }
    
    .prossime-prenotazioni .booking-status-badge.rejected {
        background: rgba(153, 153, 153, 0.3);
        color: #000;
    }
    
    /* Aggiunta del numero giorno al centro */
    .prossime-prenotazioni .booking-date strong::before {
        content: attr(data-day-num);
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
        color: #000;
        line-height: 1;
        margin: 0.25rem 0;
        order: 2;
    }
    
    /* Body: dettagli al centro */
    .prossime-prenotazioni .booking-card-body {
        flex: 1;
        padding: 0;
        min-width: 0;
    }
    
    .prossime-prenotazioni .booking-info {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .prossime-prenotazioni .booking-time {
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        line-height: 1.2;
    }
    
    .prossime-prenotazioni .booking-class {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Azioni: bottone dettagli compatto */
    .prossime-prenotazioni .booking-card-actions {
        padding: 0;
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
    
    .prossime-prenotazioni .btn-view-booking {
        background: transparent;
        color: var(--color-primary);
        padding: 0;
        font-size: 1.2rem;
        border: 1px solid var(--color-primary);
        border-radius: 4px;
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .prossime-prenotazioni .btn-view-booking:active {
        background: rgba(255, 0, 21, 0.1);
        transform: scale(0.95);
    }
    
    /* Paginazione */
    .prossime-prenotazioni .bookings-pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1rem;
        padding: 0.75rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
        gap: 1rem;
    }
    
    .prossime-prenotazioni .btn-pagination {
        background: transparent;
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
        min-height: 44px;
        padding: 0 1.5rem;
        border-radius: 4px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        flex: 1;
    }
    
    .prossime-prenotazioni .btn-pagination:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }
    
    .prossime-prenotazioni .btn-pagination:not(:disabled):active {
        background: rgba(255, 0, 21, 0.1);
        transform: scale(0.98);
    }
    
    .prossime-prenotazioni .pagination-info {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.7);
        text-align: center;
        white-space: nowrap;
    }
}