/* Mobile Form Fixes */

/* Prevent iOS zoom on input focus */
@supports (-webkit-touch-callout: none) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
        -webkit-appearance: none;
        border-radius: 0;
    }
}

/* Touch-friendly form elements */
@media (max-width: 768px) {
    /* Larger touch targets */
    button,
    .btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
        touch-action: manipulation;
    }

    /* Prevent double-tap zoom */
    * {
        touch-action: manipulation;
    }

    /* Better spacing for mobile */
    .form-group {
        margin-bottom: 20px;
    }

    input,
    select,
    textarea {
        width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    /* Fix for iOS Safari */
    input[type="submit"],
    button[type="submit"] {
        -webkit-appearance: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        background-clip: padding-box;
    }

    /* Active state for touch */
    .touch-active,
    button:active,
    .btn:active {
        opacity: 0.8;
        transform: scale(0.98);
    }

    /* Prevent text selection on buttons */
    button,
    .btn {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* Fix select dropdowns on iOS */
    select {
        background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 20px;
        padding-right: 40px;
    }

    /* Loading state */
    button[disabled] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* Fix for mobile modals */
    .modal {
        -webkit-overflow-scrolling: touch;
    }

    .modal-content {
        margin: 10px;
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* iOS specific fixes */
@supports (-webkit-overflow-scrolling: touch) {
    input,
    textarea,
    select {
        -webkit-user-select: text;
        user-select: text;
    }

    /* Fix for iOS 15+ Safari */
    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: #2196F3;
        box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
    }
}

/* Android specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input[type="date"]::-webkit-calendar-picker-indicator {
        display: block;
        width: 20px;
        height: 20px;
    }
}

/* Fix sticky hover states on mobile */
@media (hover: none) and (pointer: coarse) {
    button:hover,
    .btn:hover {
        opacity: 1;
        background-color: inherit;
    }
}

/* Prevent zoom on double tap */
html {
    touch-action: manipulation;
}

/* Fix for form in PWA mode */
@media all and (display-mode: standalone) {
    input,
    textarea,
    select {
        -webkit-user-select: auto;
        user-select: auto;
    }
}