/*
 * Phones first (loaded after style.css on every site page).
 *
 * What it fixes, mostly on iPhone (Safari):
 *  - Side scrolling: nothing may make the page wider than the screen, and text
 *    boxes are at least 16px so Safari never zooms in when one is tapped (the
 *    zoom stayed and the page then slid sideways).
 *  - Smoothness: no "fixed" backgrounds (Safari repaints them on every scroll),
 *    links animate only their colours, no stuck hover effects after a tap, no
 *    300ms tap delay, scroll stays inside open panels and menus.
 *  - The notch and the home bar: buttons fixed to the bottom keep clear of
 *    them, and the installed app (status bar over the page) leaves room at the top.
 *  - Less to scroll past before the content: one-row top bar, smaller banners
 *    and titles.
 * Keyboard-aware chat panels use --pv-kb / --pv-vvh from frontend/js/mobile.js.
 */

/* ---------- 1. Never wider than the screen ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { max-width: 100%; overflow-x: hidden; overflow-wrap: break-word; }
@supports (overflow: clip) { body { overflow-x: clip; } }

img, video, iframe, embed, object, canvas { max-width: 100%; }
.gm-style img, .pac-container img { max-width: none; } /* Google map tiles and address suggestions */
pre { max-width: 100%; overflow-x: auto; white-space: pre; }
code, kbd, samp { overflow-wrap: anywhere; }

/* Text the sellers write (descriptions, blog posts, pages): wide photos, tables and long links fit. */
.listing-page img, .blog-detail img, .page-content .description img, .pv-rich img { height: auto; }
.listing-page table, .blog-detail table, .pv-rich table { display: block; max-width: 100%; overflow-x: auto; }
.listing-page a, .blog-detail a, .pv-rich a { overflow-wrap: anywhere; }

/* ---------- 2. Taps feel instant ---------- */
a, button, input, select, textarea, label, summary, .btn, [role="button"], [data-toggle] {
    touch-action: manipulation;
}
a, button, .btn { -webkit-tap-highlight-color: rgba(0, 0, 0, .06); }

/* style.css animated every property of every link (layout and all): colours only. */
a {
    -webkit-transition-property: color, background-color, border-color, opacity, box-shadow !important;
    transition-property: color, background-color, border-color, opacity, box-shadow !important;
}

/* ---------- 3. Touch screens ---------- */
@media (hover: none), (pointer: coarse) {
    /* Safari zooms into any text box under 16px and stays zoomed. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
    select, textarea, .select2-search__field, .select2-container .select2-search--inline .select2-search__field {
        font-size: 16px !important;
    }
    /* Safari can't keep a "fixed" background still; it repaints it on every scroll. */
    .testimonial, .testimonial-bg, .search-section, .home-video, [style*="background-attachment: fixed"], [style*="background-attachment:fixed"] {
        background-attachment: scroll !important;
    }
    /* Hover effects that stayed "stuck" after a tap (and could need a second tap). */
    .effect-item:hover .image-effect:before, .effect-item:hover .image-effect:after { opacity: 0 !important; }
    .effect-item:hover img, .listing-item:hover img { transform: none !important; }
}

/* Scrolling inside a panel or menu doesn't drag the page behind it. */
.modal, .modal-body, .mean-container .mean-nav, .select2-results__options, #pv-ai-panel, #pv-ai-msgs,
#pv-chat-dock, .pv-ready-list, .dropdown-menu {
    overscroll-behavior: contain;
}
/* Rows of chips or photos that scroll sideways: a sideways swipe stays in the row
   (Safari otherwise takes it as "go back"). */
.pv-hc-grid, .pv-typechips, .pv-hero-thumbs, [data-pv-scroll-row] {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 4. Notch and home bar (viewport-fit=cover) ---------- */
.container, .container-fluid {
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
}
.scroll-top, #pv-ai-btn {
    margin-bottom: calc(env(safe-area-inset-bottom) + var(--pv-bar, 0px));
}
.scroll-top { margin-right: env(safe-area-inset-right); }
#pv-ai-btn { margin-left: env(safe-area-inset-left); }
.wpcc-container, .cc-window { padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important; }
/* Installed app: the status bar sits over the page (black-translucent). */
@media (display-mode: standalone) {
    body { padding-top: env(safe-area-inset-top); }
}

/* Scroll-to-top: shown with a class (frontend/js/mobile.js), not a jQuery fade on every scroll. */
.scroll-top { display: block !important; opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s !important; }
.scroll-top.pv-on { opacity: .7; visibility: visible; transform: none; }
.scroll-top.pv-on:hover { opacity: 1; }

/* Customer panel menu button (shown on phones only, section 5). */
.user-sidebar .pv-sb-toggle {
    display: none; width: 100%; align-items: center; gap: 10px; border: 1px solid #d7dfda; border-radius: 10px;
    background: #fff; color: #1f2937; font-weight: 600; font-size: 15px; padding: 11px 14px; margin: 0 0 10px; text-align: left;
}
.user-sidebar .pv-sb-toggle .pv-sb-here { color: #6b7280; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.user-sidebar .pv-sb-toggle .fa-chevron-down { transition: transform .2s; }
.user-sidebar.pv-sb-open .pv-sb-toggle .fa-chevron-down { transform: rotate(180deg); }

/* ---------- 5. Phones: less to scroll past ---------- */
@media (max-width: 767.98px) {
    /* Top bar: one short row (the phone and email are on the Contact page and in the footer). */
    .top { padding: 4px 0; }
    .top ul.top-left { display: none; }
    .top ul.top-right { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 0 4px; margin: 0; padding: 0; }
    .top ul.top-right li { float: none; display: block; padding: 0; white-space: nowrap; }
    .top ul.top-right li a, .top ul.top-right li, .top ul.top-right select { font-size: 13px; }
    .top ul.top-right .nav-link { padding: 6px 4px; }
    .top ul.top-right form { margin: 0; }
    .top ul.top-right select { padding: 6px 0 6px 4px; height: auto; }
    /* Small phones (iPhone SE): Saved and Dashboard as icons, so the row fits. */
    @media (max-width: 374.98px) {
        .top ul.top-right li:not(.currency) a.nav-link { font-size: 0; padding: 6px 8px; }
        .top ul.top-right li:not(.currency) a.nav-link i { font-size: 17px; }
        .top ul.top-right li:not(.currency) a.nav-link .badge { font-size: 11px; }
    }

    /* Page banners: a title, not a third of the screen. */
    /* The phone header (meanmenu bar) floats over the banner: room for it (--pv-head from mobile.js), then the title. */
    .page-banner { padding-top: calc(var(--pv-head, 64px) + 10px) !important; padding-bottom: 12px !important; }
    .page-banner h1 { font-size: 24px; padding-top: 4px; line-height: 1.25; }
    .page-banner nav { padding-bottom: 4px !important; }
    .page-banner .breadcrumb { padding: 4px 0 0; justify-content: center; }
    .page-banner .breadcrumb-item { font-size: 14px; }
    .page-content { padding-top: 24px; }

    /* Titles that broke words on small screens. */
    .listing-single-banner h1 { font-size: 28px; line-height: 1.2; }
    .search-section h1, .search-section .text h1 { font-size: 30px; line-height: 1.2; }
    h1 { overflow-wrap: break-word; hyphens: auto; }

    /* The AI assistant and the seller chat open as a sheet across the screen, above the keyboard. */
    #pv-ai-panel {
        left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important;
        bottom: calc(72px + env(safe-area-inset-bottom) + var(--pv-kb, 0px)) !important;
        height: min(520px, calc(var(--pv-vvh, 100vh) - 96px - env(safe-area-inset-bottom))) !important;
        max-height: none !important;
    }
    #pv-chat-dock {
        bottom: calc(82px + env(safe-area-inset-bottom) + var(--pv-kb, 0px)) !important;
        height: min(68vh, calc(var(--pv-vvh, 100vh) - 100px - env(safe-area-inset-bottom))) !important;
        max-height: none !important;
    }
    #pv-chat-dock textarea { font-size: 16px; }

    /* Customer panel: the menu folds into one button (front.customer_sidebar). */
    .user-sidebar .pv-sb-toggle { display: flex; }
    .user-sidebar.pv-sb-js .pv-sb-list { display: none; }
    .user-sidebar.pv-sb-js.pv-sb-open .pv-sb-list { display: flex; }
    .user-sidebar { margin-bottom: 18px; }
}

/* ---------- 6. Contact bar on a post (partials.mobile_contact_bar) ---------- */
.pv-mbar, .pv-mbar[hidden] { display: none; }
@media (max-width: 767.98px) {
    .pv-mbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; gap: 8px;
        padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
        background: rgba(255, 255, 255, .97); border-top: 1px solid #e3e8e5; box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
        transform: translateY(110%); transition: transform .22s ease;
    }
    .pv-mbar.pv-on { transform: none; }
    .pv-mbar button {
        flex: 1 1 0; min-width: 0; min-height: 46px; border: 0; border-radius: 10px; font-weight: 600; font-size: 14px; padding: 0 6px;
        display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; overflow: hidden;
        background: var(--theme); color: var(--theme-on, #fff);
    }
    .pv-mbar button.pv-mbar-alt { background: #fff; color: var(--theme-dark); border: 1.5px solid var(--theme); }
    .pv-mbar button.pv-mbar-wa { background: #25D366; color: #fff; }
    .pv-mbar button.pv-mbar-share { flex: 0 0 46px; }
    @media (max-width: 359.98px) { .pv-mbar button:not(.pv-mbar-share) i { display: none; } } /* small phones: words only */
    body.pv-mbar-up { --pv-bar: 64px; }
    /* The floating share buttons sat on top of the bar: hidden while it shows, unless asked for (Share). */
    body.pv-mbar-up .st-sticky-share-buttons { display: none !important; }
    body.pv-mbar-up.pv-mbar-sharing .st-sticky-share-buttons { display: block !important; bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
    body.pv-mbar-up .page-content, body.pv-mbar-up footer { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}