/* WebView Optimizations for Mobile Apps */

/* Safe Area Support for Notched Devices (iPhone X, etc.) */
:root {
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* Prevent text selection in WebView */
.webview-ready {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Allow text selection for input fields and content */
.webview-ready input,
.webview-ready textarea,
.webview-ready [contenteditable],
.webview-ready .selectable {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Prevent zoom on double tap */
.webview-ready * {
    touch-action: manipulation;
}

/* Smooth scrolling for WebView */
html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Safe area padding for sticky navbar */
.sticky-top {
    padding-top: var(--safe-area-inset-top);
}

/* Safe area padding for footer */
.footer {
    padding-bottom: calc(2rem + var(--safe-area-inset-bottom));
}

/* Optimize tap highlights */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

a, button, .btn {
    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
}

/* Improve touch target sizes (minimum 44x44px for iOS) */
.btn,
.nav-link,
.dropdown-item,
.form-control,
.form-select,
input[type="checkbox"],
input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
}

/* Smaller touch targets for compact buttons */
.btn-sm {
    min-height: 38px;
    min-width: 38px;
}

/* Prevent bounce scrolling on body */
body {
    overscroll-behavior-y: contain;
}

/* Optimize font rendering for mobile */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Fix fixed positioning in WebView */
.fixed-top,
.fixed-bottom,
.sticky-top {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Prevent horizontal scroll */
body,
html {
    overflow-x: hidden;
}

/* Optimize image loading */
img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Better button press feedback */
.btn:active,
button:active {
    transform: scale(0.98);
    transition: transform 0.1s;
}

/* Prevent pull-to-refresh on iOS WebView */
body {
    overscroll-behavior: contain;
}

/* WebView detection class - add this via JavaScript from native app */
.in-app-webview .navbar {
    /* Native apps can add this class to hide web-specific elements */
}

/* Optimize modal and dropdown for mobile */
.modal,
.dropdown-menu {
    -webkit-overflow-scrolling: touch;
}

/* Better spacing for notched devices */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, var(--safe-area-inset-left));
        padding-right: max(0px, var(--safe-area-inset-right));
    }
}

/* Prevent text inflation on orientation change */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Optimize input fields for WebView */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea {
    -webkit-appearance: none;
    appearance: none;
}

/* Prevent iOS zoom on input focus */
@media screen and (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Optimize card shadows for performance */
.card,
.cart-item,
.order-card,
.product-card {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Smooth transitions */
a,
button,
.btn,
.nav-link {
    transition: all 0.2s ease;
}

/* Prevent text selection on buttons and navigation */
.btn,
.nav-link,
.navbar-brand,
.dropdown-item {
    -webkit-user-select: none;
    user-select: none;
}

/* Optimize for Android WebView */
@supports (-webkit-appearance: none) {
    select {
        -webkit-appearance: none;
        appearance: none;
    }
}

/* Better video controls for WebView */
video {
    width: 100%;
    height: auto;
}

iframe {
    border: none;
    display: block;
}

/* Prevent context menu on long press for images */
img {
    -webkit-touch-callout: none;
}

/* Optimize loading states */
.loading {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Hardware acceleration for animations */
.hero-bg-image,
.product-card,
.post-card {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

/* Fix iOS Safari bottom bar overlap */
@supports (-webkit-touch-callout: none) {
    .footer {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }
}

/* Prevent accidental text selection during scrolling */
.product-card,
.post-card,
.order-card,
.cart-item {
    -webkit-user-select: none;
    user-select: none;
}

/* Allow selection for specific content */
.product-card .product-name,
.post-card .post-title,
.item-name,
.item-details {
    -webkit-user-select: text;
    user-select: text;
}