/*
 * mobile-touch.css - Mobile UX hardening (iOS zoom, horizontal overflow,
 * touch-target sizing). Mobile breakpoint only; desktop unaffected.
 * Audit-based: measured at 375px via headless Chrome (CDP).
 * Pre-op scan: no ilp_settings / ConfigTrait conflicts - pure front-end CSS.
 */

/* ---- 1. Kill iOS auto-zoom on focus (inputs < 16px trigger it) ---- */
@media (max-width: 767.98px) {
    input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ---- 2. Horizontal overflow guard (root-cause net for all pages) ----
   'clip' does NOT create a scroll container, so position:sticky and
   position:fixed children are unaffected (unlike 'hidden'). */
@media (max-width: 767.98px) {
    html, body {
        overflow-x: clip;
    }
}
@supports not (overflow: clip) {
    @media (max-width: 767.98px) {
        html, body {
            overflow-x: hidden;
        }
    }
}

/* ---- 3. Touch-target sizing (WCAG 2.5.8 minimum 24px; primary ≥ 40px) ---- */
@media (max-width: 767.98px) {
    /* Navbar toggler: 30x30 -> 44x44 (mobile-menu-premium.css forces 30px!important) */
    .navbar-toggler.mobile-menu-btn {
        width: 44px !important;
        height: 44px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Auth mobile logo bar: negative -12px margins cause 12px horizontal
       overflow on login/register (body scrollWidth 387 > viewport 375).
       Drop the bleed: inset gradient strip, zero overflow. Higher
       specificity needed - the auth master's inline <style> loads after
       this file and would otherwise win the tie. */
    .auth-login-register .mobile-logo-header {
        margin-left: 0;
        margin-right: 0;
    }

    /* Auth form rows: default -15px gutters leak ~4px per side inside the
       vertically-centered container (379px wide rows at left -2). */
    .auth-login-register .container.my-auto .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Icon/favorite buttons (18-36px) -> 40px hit area */
    .clg-heart-btn,
    .gallery-save-btn,
    .listing-share-btn,
    .gallery-view-btn {
        min-width: 40px;
        min-height: 40px;
        box-sizing: content-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Swiper arrows: 34 -> 40. !important needed - swiper-bundle.min.css is
       linked inline inside pictures-slider partials (body), so source order
       would otherwise beat this head-linked stylesheet. */
    .swiper-button-prev,
    .swiper-button-next {
        width: 40px !important;
        height: 40px !important;
    }

    /* Video player controls (direct MP4 + embedded): 26-28px -> 40px hit */
    .vc-btn {
        min-width: 40px;
        min-height: 40px;
    }

    /* Subcategory filter button 26x26 -> 40x40 */
    .subcat-filter-btn {
        width: 40px;
        height: 40px;
    }

    /* Subcategory chips: height 24 -> 32 */
    .subcat-nav-chip {
        min-height: 32px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* Breadcrumb links: expand hit area via mirrored padding (layout-neutral) */
    .breadcrumb a,
    .breadcrumb .breadcrumb-item {
        padding: 6px;
        margin: -6px;
    }

/* Inline text links on listing/search: raise to ≥24px hit height without
	   changing line spacing (padding-block + negative margin). */
	.item-title a,
	.listing-title-links a,
	.link-primary.text-decoration-none,
	.text-decoration-underline.fw-semibold {
		display: inline-block;
		padding-block: 6px;
		margin-block: -6px;
	}
}

/* ---- 4. Account sidebar: sidebar-first on mobile (reverses the content-first
   order:-1 rule from modern-redesign.css). Exact :has() scope so search/grid
   layouts with col-md-9 stay untouched. Messenger pages use Bootstrap order
   utilities (order-1/order-2 are !important) so those need !important too. -- */
@media (max-width: 767.98px) {
	.main-container .row:has(> .col-md-3 aside) > .col-md-3 {
		order: 1;
	}
	.main-container .row:has(> .col-md-3 aside) > .col-md-9 {
		order: 2;
	}
	.main-container .row:has(> .col-md-3 aside) > .col-md-3.order-2 {
		order: 1 !important;
	}
	.main-container .row:has(> .col-md-3 aside) > .col-md-9.order-1 {
		order: 2 !important;
	}
}

/* ---- 5. Account mobile menu trigger bar (collapsed sidebar on <768px).
   Shows the ACTIVE item centered so the user never loses their place. ---- */
@media (max-width: 767.98px) {
	.account-menu-trigger {
		min-height: 44px;
		font-weight: 600;
		border-radius: 0.625rem;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}
	.account-menu-trigger .fa-angle-down {
		transition: transform 0.2s ease;
	}
	.account-menu-trigger[aria-expanded="true"] .fa-angle-down {
		transform: rotate(180deg);
	}
	.account-menu-mobile-wrap {
		border-radius: 0.625rem;
	}
}

/* ---- 6. Account action tap targets (C-phase audit, 375px). AA already
   passed (all ≥24); these raise functional controls to the ≥44 primary bar.
   Scope: account content column only - messenger sidebar pills and site-wide
   inline links are intentionally untouched. ---- */
@media (max-width: 767.98px) {
	/* Booking status filter tabs: 34 -> 44 (page's primary navigation).
	   The messenger inbox sidebar is a .col-md-3 nested INSIDE the outer
	   .col-md-9 (messenger/index:145), so it must be excluded by class
	   (.inbox-nav) rather than by column. Centered to keep the pill label
	   vertically balanced. */
	.main-container .col-md-9 .nav-pills:not(.inbox-nav) .nav-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	/* Listings bulk-action bar ("Select: All" / "Delete"): 28 -> 40.
	   .table-action is only used on the account posts listing. */
	.table-action .btn,
	.table-action .btn-group .btn,
	.table-action .btn-danger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 40px;
	}

	/* Back-to-top FAB: 36/40 -> 44. Id selector + later source order beats
	   modern-redesign.css §22 (incl. its ≤575px 36px rule). */
	#backToTop,
	.back-to-top {
		width: 44px;
		height: 44px;
	}

	/* Accessibility-widget FAB: widget CSS pins 36px via --ino-asw-btn-size
	   in a (max-width:768px),(pointer:coarse) block; !important is required
	   regardless of source order. The widget sets --asw-btn-size from it. */
	:root {
		--ino-asw-btn-size: 44px !important;
		--asw-btn-size: 44px !important;
		--asw-btn-size-mobile: 44px !important;
	}
}