/* ========================================
   iOS/WebKit Global Fixes
   All iPhone browsers use WebKit engine
   ======================================== */

/* Enable smooth momentum scrolling on ALL scrollable elements */
* {
    -webkit-overflow-scrolling: touch;
}

/* Reset iOS button and input styling */
button,
input,
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Remove tap highlight color */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Disable callout on touch-hold */
a,
button,
img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Allow text selection where needed */
input,
textarea,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
li,
td,
th {
    -webkit-user-select: text;
    user-select: text;
}

/* Fix 100vh issue on iOS */
html,
body {
    height: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Safe area insets for iPhone X and newer (notch/island support) */
body {
    padding-top: env(safe-area-inset-top);
    padding-top: constant(safe-area-inset-top);
    /* iOS 11.0-11.2 fallback */
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-left: constant(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-right: constant(safe-area-inset-right);
}

/* Fix for fixed elements on iOS */
.fixed,
[class*="fixed"],
nav[class*="sticky"] {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Prevent iOS zoom on input focus */
@media screen and (max-width: 767px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
        /* iOS zooms if < 16px */
    }
}

/* Fix iOS scroll bounce on modals/overlays */
.modal-overlay,
.fixed-overlay,
[class*="overlay"] {
    position: fixed;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Smooth scrolling for containers */
.scroll-container,
.overflow-auto,
.overflow-y-auto,
[class*="overflow"] {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* Prevent double-tap zoom on buttons */
button,
a,
[role="button"] {
    touch-action: manipulation;
}

/* ======================================== */

/* Mobile Arrow Navigation Fixes */
@media (max-width: 767px) {

    /* Fix swipe navigation arrows */
    .swipe-container .absolute {
        background: #37474F !important;
        color: white !important;
        border: 2px solid white !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.5) !important;
        z-index: 30 !important;
    }

    .swipe-container .absolute svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
        stroke: white !important;
        stroke-width: 3 !important;
        fill: none !important;
    }

    .swipe-container .absolute.left-4 {
        left: 0.75rem !important;
    }

    .swipe-container .absolute.right-4 {
        right: 0.75rem !important;
    }

    /* Alternative text-based arrows */
    .swipe-container .absolute::after {
        font-size: 1.25rem !important;
        font-weight: 900 !important;
        color: white !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1 !important;
    }

    .swipe-container .absolute.left-4::after {
        content: "‹" !important;
    }

    .swipe-container .absolute.right-4::after {
        content: "›" !important;
    }

    /* Hide original SVG if text arrows are used */
    .swipe-container .absolute svg {
        opacity: 0 !important;
    }
}

/* Safari / iOS Compatibility Fixes */
input,
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.h-dvh {
    height: 100dvh;
}

@supports (-webkit-touch-callout: none) {
    .h-screen {
        height: -webkit-fill-available;
    }
}

/* Global Mobile Button Refinement */
@media (max-width: 767px) {

    /* Target buttons but exclude those in registration modal */
    #app button:not(.registration-modal *),
    #app .btn-solid-primary:not(.registration-modal *),
    #app a.bg-slate-800:not(.registration-modal *) {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
        font-size: 0.875rem !important;
        min-height: 2.5rem;
    }

    /* Specific fix for large hero/start button */
    #app .px-8.py-4 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        font-size: 0.9375rem !important;
    }
}