/* ============================================
   MOBILE FIXES - Ensures proper scrolling and dimensions
   ============================================ */

/* Fix for iOS Safari viewport */
@supports (-webkit-touch-callout: none) {
    html {
        height: -webkit-fill-available;
    }
    
    body {
        min-height: -webkit-fill-available;
    }
    
    .modal {
        height: -webkit-fill-available;
    }
    
    body.modal-open {
        height: -webkit-fill-available;
        position: fixed;
        width: 100%;
    }
}

/* Ensure modals are scrollable on all mobile devices */
.modal {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 10px 0;
}

.modal-content,
.auth-modal .auth-modal__content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Prevent body scroll when modal is open, but allow modal to scroll */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* Ensure form inputs don't zoom on iOS */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

/* Fix for Android Chrome address bar */
@media screen and (max-width: 768px) {
    .modal {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}

/* Touch-friendly button sizes on mobile */
@media screen and (max-width: 768px) {
    button,
    .btn,
    a.btn {
        min-height: 44px; /* Apple's recommended touch target size */
        min-width: 44px;
        padding: 12px 20px;
    }
    
    .modal-close {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Ensure proper spacing on mobile */
@media screen and (max-width: 480px) {
    .auth-modal .auth-modal__content {
        margin: 2% auto;
        padding: 20px 16px;
    }
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .auth-modal__header {
        margin-bottom: 20px;
    }
    
    .auth-modal__header h2 {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }
    
    .auth-modal__subtitle {
        font-size: 0.9rem;
    }
}

/* Fix for landscape orientation on mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .modal-content,
    .auth-modal .auth-modal__content {
        max-height: 95vh;
        margin: 1% auto;
    }
}

/* Ensure proper text rendering on mobile */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Prevent text selection issues on mobile */
@media screen and (max-width: 768px) {
    input,
    textarea,
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 8px;
    }
}