/* Mobile Touch Optimization - Fix sluggish button response */

button,
.btn,
a,
input[type="submit"],
input[type="button"],
[role="button"],
.clickable {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    -webkit-touch-callout: none;
    touch-action: manipulation;
    cursor: pointer;
}

/* Remove 300ms delay on mobile */
* {
    touch-action: manipulation;
}

/* Faster feedback on touch */
button:active,
.btn:active,
a:active,
[role="button"]:active {
    transform: scale(0.98);
    transition: transform 0.05s ease;
}

/* Prevent text selection on buttons */
button,
.btn,
[role="button"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    button,
    .btn,
    a,
    input {
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
    }
}

/* ============================================
   MOBILE VIEWPORT & UX IMPROVEMENTS
   Prevent zoom, overscroll, and boundary issues
   ============================================ */

@media only screen and (max-width: 768px) {
    /* Prevent zoom on input focus - iOS Safari */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents auto-zoom on iOS */
    }
    
    /* Prevent horizontal scroll only */
    html {
        overflow-x: hidden;
        overscroll-behavior-x: none;
        overscroll-behavior-y: none;
    }
    
    body {
        overflow-x: hidden;
        padding-bottom: calc(var(--mobile-bottom-nav-height, 0px) + var(--browser-bottom-offset, 0px));
        overscroll-behavior: none;
        overscroll-behavior-y: none;
    }
    
    /* Prevent horizontal scroll completely */
    * {
        max-width: 100vw;
    }
    
    /* iOS Safe Area Support - notch/home indicator */
    body {
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    /* Fix bottom navigation jumping in Chrome iOS */
    .mobile-bottom-nav {
        position: fixed;
        bottom: var(--browser-bottom-offset, 0px);
        left: 0;
        right: 0;
        padding-bottom: env(safe-area-inset-bottom);
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        overscroll-behavior: none;
    }

    #main-scroll {
        clip-path: inset(0 0 calc(var(--mobile-bottom-nav-height, 0px) + var(--browser-bottom-offset, 0px)) 0);
        -webkit-clip-path: inset(0 0 calc(var(--mobile-bottom-nav-height, 0px) + var(--browser-bottom-offset, 0px)) 0);
        padding-bottom: calc(var(--mobile-bottom-nav-height, 0px) + var(--browser-bottom-offset, 0px) + env(safe-area-inset-bottom) + 24px) !important;
    }
    
    /* Prevent layout shift when Chrome address bar hides/shows */
    html {
        height: 100dvh;
        height: -webkit-fill-available;
    }
    
    body {
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        min-height: calc(var(--vh, 1vh) * 100);
        position: relative;
    }
    
    /* Dark theme - black background for overscroll */
    .theme-dark html {
        background: #000000 !important;
    }
    
    .theme-dark body {
        background: #000000 !important;
    }
    
    /* Dark theme - force black background for viewport overscroll */
    .theme-dark html::before,
    .theme-dark body::before {
        content: '';
        position: fixed;
        top: -100vh;
        left: 0;
        right: 0;
        height: 100vh;
        background: #000000;
        z-index: -9999;
    }
    
    .theme-dark html::after,
    .theme-dark body::after {
        content: '';
        position: fixed;
        bottom: -100vh;
        left: 0;
        right: 0;
        height: 100vh;
        background: #000000;
        z-index: -9999;
    }
}