/*
 * mobile-ux.css — Mobile UX polish for BKKasset.com
 *
 * Fixes:
 *   1. iOS: disable auto text size adjust + prevent zoom on form focus
 *   2. Tap targets: min 44px for interactive elements
 *   3. Safe area insets for iPhone X+ (home indicator)
 *   4. Touch feedback (active states + no tap highlight flash)
 *   5. Sticky contact bar polish
 *   6. Modal full-screen on small mobile
 *   7. Form input legibility
 *   8. Table horizontal-scroll hint
 *   9. Links: prevent double-tap zoom on buttons
 *  10. Images: prevent long-press save on site UI (not listings)
 */

/* ─── 1. iOS viewport + zoom fix ─── */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Prevent iOS auto-zoom when focusing form inputs: font-size MUST be ≥16px */
@media screen and (max-width: 767px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ─── 2. Tap target min size (WCAG 2.5.5) ─── */
@media (pointer: coarse), (hover: none) {
    button,
    [role="button"],
    .btn,
    .sticky-contact-btn,
    .nav-auth-btn,
    a.ps-lead-btn,
    .ps-lead-modal__submit,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
    }
}

/* ─── 3. Touch optimization ─── */
a, button, [role="button"], .btn, input[type="submit"], input[type="button"] {
    -webkit-tap-highlight-color: rgba(51, 64, 100, .15);
    touch-action: manipulation;  /* eliminates 300ms delay on iOS */
}

/* ─── 4. Active state feedback (replaces missing :hover on mobile) ─── */
@media (hover: none) {
    .sticky-contact-btn:active,
    .ps-lead-btn:active,
    .nav-auth-btn:active,
    .btn:active {
        transform: scale(0.97);
        transition: transform 0.1s;
    }
}

/* ─── 5. Sticky contact bar — safe area + z-index + spacing ─── */
@media screen and (max-width: 1023px) {
    #sticky-contact-bar {
        bottom: 0 !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 9999 !important;
    }

    /* Reserve space at page bottom so content isn't hidden behind the bar */
    body:has(#sticky-contact-bar) {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
    /* Fallback for browsers without :has() */
    main, .ps-page, .ps-section, footer {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ─── 6. Lead modal: full-screen on small mobile (<480px) ─── */
@media screen and (max-width: 479px) {
    .ps-lead-modal-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    .ps-lead-modal {
        max-width: 100% !important;
        max-height: 95vh !important;
        border-radius: 16px 16px 0 0 !important;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ─── 7. Form input legibility ─── */
.form-control,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 16px;  /* matches iOS zoom fix */
    line-height: 1.4;
}
textarea.form-control {
    min-height: 80px;
    line-height: 1.5;
}

/* Clear focus ring for accessibility */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(51, 64, 100, .35);
    outline-offset: 1px;
}

/* ─── 8. Tables: horizontal scroll hint on mobile ─── */
@media screen and (max-width: 767px) {
    .table-responsive,
    div[style*="overflow-x:auto"],
    div[style*="overflow-x: auto"] {
        -webkit-overflow-scrolling: touch;
        /* Soft fade on right edge hints more content */
        background:
            linear-gradient(to right, transparent, #fff 20%) 0 0 / 20px 100% no-repeat,
            linear-gradient(to left, rgba(0,0,0,.05), transparent) right 0 / 20px 100% no-repeat;
    }
}

/* ─── 9. Headings: consistent scale on mobile ─── */
@media screen and (max-width: 575px) {
    h1 { font-size: 22px !important; line-height: 1.3; }
    h2 { font-size: 18px !important; line-height: 1.35; }
    h3 { font-size: 16px !important; line-height: 1.4; }
    .ps-breadcrumb { font-size: 12px; padding: 8px 0 !important; }
}

/* ─── 10. Body base ─── */
body {
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 575px) {
    body { font-size: 14px; }
}

/* ─── 11. Lang dropdown — prevent too-small tap targets in main menu ─── */
@media screen and (max-width: 1023px) {
    .lang-dropdown__menu a,
    .menu--desktop li a {
        padding: 12px 14px !important;  /* taller on mobile drawer */
    }
}

/* ─── 12. Preloader: shorter duration feel ─── */
#preloader img {
    max-width: 160px;
    width: 60%;
    height: auto;
}

/* ─── 13. Images: avoid layout shift (add aspect-ratio fallback) ─── */
img[width][height] {
    height: auto;
}

/* ─── 14. Prevent horizontal page scroll ─── */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ─── 15. Link styling for touch: larger hit area for inline links ─── */
p a, li a {
    padding: 2px 0;
}

/* ─── 16. Sticky bar button: better touch feedback ─── */
.sticky-contact-btn {
    transition: background 0.15s, transform 0.1s;
    user-select: none;
    -webkit-user-select: none;
}
.sticky-contact-btn:active {
    filter: brightness(0.92);
}