/* LPC overrides — migrated from listingpro-child style.css, 2026-07-27 */

/*
 * Homepage search bar ("Где" field): the crosshairs/geolocation icon is
 * absolutely positioned at left:65px relative to .form-group.lp-location-search
 * (see theme main.css - .lp-search-bar .lp-location-search .ui-widget > i),
 * but the parent theme's own chosen-single text padding-left (20px, in
 * main-new.css) doesn't reserve enough room for it, so the icon renders on
 * top of the selected city text. Scoped to .lp-search-bar-all-demo (this
 * homepage banner variant only) so other search bar variants elsewhere on
 * the site - which already have their own correctly-tuned padding - are
 * untouched.
 */
.lp-search-bar-all-demo .form-group.lp-location-search .chosen-container.chosen-container-single .chosen-single {
	padding-left: 40px;
}

/*
 * Mirrors the parent theme's ".grid-style .lp-listing .lp-listing-bottom h4"
 * rule (main.css) for the homepage "Exclusive" listing cards, whose title
 * tag was changed from <h4> to <h3> in the child-theme override of
 * templates/loop-grid-view.php (semantic heading fix - see that file's
 * header comment). Keeps the exact same spacing after the tag change.
 */
.grid-style .lp-listing .lp-listing-bottom h3 {
	margin-bottom: 10px;
	line-height: 20px;
}

/*
 * Homepage map: distinct marker badge per listing type. Applied via the
 * is-paid-ad/is-popular/is-turbo classes added in
 * listingpro-child/assets/js/home-map.js, based on the is_paid_ad/
 * is_popular/is_turbo flags in the map AJAX response
 * (listingpro-child/include/home_map.php). Only the highest-priority
 * flag's badge renders per marker (paid ad > popular > turbo) - see
 * lpHomeMapMarkerBadge() in home-map.js for the priority order. A colored
 * ring + icon badge on top of the theme's existing pin shape/icon, so it
 * stays visible regardless of the listing's category icon underneath.
 */
.lpmap-icon-shape.is-paid-ad,
.lpmap-icon-shape.is-popular,
.lpmap-icon-shape.is-turbo {
	position: relative;
}

.lpmap-icon-shape.is-paid-ad .lpmap-icon-contianer {
	box-shadow: 0 0 0 3px #e74c3c;
	border-radius: 50%;
}

.lpmap-icon-shape.is-popular .lpmap-icon-contianer,
.lpmap-icon-shape.is-turbo .lpmap-icon-contianer {
	box-shadow: 0 0 0 3px #ffb400;
	border-radius: 50%;
}

.lpmap-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	z-index: 1;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	color: #fff;
	border-radius: 50%;
	font-size: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.lpmap-badge.lpmap-badge-paid-ad {
	background: #e74c3c;
}

.lpmap-badge.lpmap-badge-popular,
.lpmap-badge.lpmap-badge-turbo {
	background: #ffb400;
}

/*
 * Homepage map: listing/marker count badge, inserted right after #homeMap
 * by lpHomeMapRenderMarkerCount() in home-map.js (toggled by the "Show
 * Marker Count" setting in Карта на главной). Simple centered pill under
 * the map rather than an absolute overlay, to avoid fighting Leaflet's own
 * internal positioning/z-index layers.
 */
.lp-home-map-marker-count {
	text-align: center;
	padding: 8px 0;
	font-size: 13px;
	color: #7f7f7f;
	background: #fff;
}

/*
 * Search suggestion dropdown: group headers inserted by
 * assets/js/search-suggest-groups.js. They live as <li> inside the same <ul>
 * as the real items (see that file for why), so they need to be visually and
 * behaviourally unmistakable as non-clickable labels - hence no hover state,
 * default cursor, and the theme's own muted grey rather than link colour.
 */
#input-dropdown ul li.lpc-s-group-head {
	padding: 8px 15px 4px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #9a9a9a;
	background: #fafafa;
	border-top: 1px solid #ededed;
	cursor: default;
	pointer-events: none;
}

#input-dropdown ul li.lpc-s-group-head:first-child {
	border-top: 0;
}

#input-dropdown ul li.lpc-s-group-head:hover {
	background: #fafafa;
}

/*
 * Mobile UX audit fixes, 2026-07-18/19 (operator-reported). Moved here from
 * a wp_add_inline_style() call in functions.php (lpc_fix_app_view_header_icons)
 * on 2026-07-20 for hand-editability - see git log for that function's removal
 * commit for the full original investigation notes (per-selector rationale,
 * specificity fights, which parent-theme rule each override targets).
 *
 * This file loads BEFORE the parent theme's main.css/responsive.css/
 * dynamic-css.css, unlike the inline-style version which loaded after all of
 * them - every rule below that overrides an existing theme style (not just
 * adding a new one) carries !important so it still wins regardless of that
 * earlier position in the cascade.
 */

/* --- Mobile app-view header (real mobile User-Agent, wp_is_mobile()=true) --- */

/* dynamic-css.css hardcodes these white, invisible on this site's white header. */
.icon-bar,
.app-view-header .icon-bar {
	background-color: #333333 !important;
}
.app-view-header .lp-search-toggle .user-menu i,
.app-view-header .open-filter,
.app-view-header .close-filter,
.app-view-header .home-filter-close,
.app-view-header .home-filter-open {
	color: #333333 !important;
}

/*
 * 2026-07-20 follow-up (operator): the position:fixed + JS-computed offset
 * approach above (see git log for that version) fought the header instead
 * of using it - .mobile-nav-icon's pixel offset was tuned for one render
 * state and broke every time the surrounding layout changed shape: 2-line
 * logo wrap at wider mobile viewports, and category archives where
 * .lp-menu-bar also wraps a collapsible "Поиск"/"Где" panel that triples
 * its height when opened, dragging the fixed icon down into the search
 * fields. Root problem per operator: "классы бургера определены глобально
 * без интеграции адаптива меню" (the icon's classes were never integrated
 * with the header's own responsive layout).
 *
 * Fix: stop positioning the icon at all. .mobile-nav-icon is already a
 * literal DOM sibling of .lp-logo in .lp-logo-container (see that column's
 * markup) - confirmed via Playwright that this column's own box is the one
 * part of the row unaffected by the search panel opening (63.4px before
 * and after - only the row's third column, .header-right-panel, grows).
 * Making it a flex row lets the icon sit inline with the logo, vertically
 * centered by flexbox itself - no pixel math, no JS, adapts to any content
 * height automatically. row-reverse + space-between (rather than `order`)
 * because .mobile-nav-icon is first in DOM order: row-reverse alone places
 * the first DOM item at the row's right edge and the second (.lp-logo) at
 * its left edge, with space-between filling the gap between them.
 */
.app-view-header .lp-menu-bar .lp-logo-container {
	display: flex !important;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
}
.app-view-header .lp-menu-bar .mobile-nav-icon {
	position: static !important;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	z-index: 1010;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
	display: flex;
	align-items: center;
	justify-content: center;
}
.app-view-header .lp-menu-bar .mobile-nav-icon .nav-icon {
	display: block;
	padding: 0;
}

/* "Рядом со мной" quick-search on taxonomy archives was fixed at 230px and
 * left-aligned with a large empty gap before the map-pin button. */
.listing-app-view .listing-app-view-bar .search-filter-attr-filter-outer {
	width: calc(100% - 70px) !important;
}
.listing-app-view .listing-app-view-bar .search-filters,
.listing-app-view .listing-app-view-bar .search-filter-attr,
.listing-app-view .listing-app-view-bar ul.search-filter-attr,
.listing-app-view .listing-app-view-bar ul.search-filter-attr li,
.listing-app-view .listing-app-view-bar .near-me-btn {
	width: 100% !important;
	display: block !important;
}
.listing-app-view .listing-app-view-bar .near-me-btn {
	box-sizing: border-box;
}

/* Homepage "Поиск" input's padding-left was exactly equal to its own
 * label's width (zero gap) - matched to the sibling "Где" field's padding. */
input.lp-suggested-search {
	padding-left: 80px !important;
}

/* --- Desktop-narrow header (.header-right-panel wrapper, no real mobile UA -
   this theme decides mobile-vs-desktop purely by User-Agent, never viewport
   width, so narrowing a desktop browser renders this separate header) --- */

/*
 * 2026-07-20 follow-up (operator): every CSS-only attempt here (absolute +
 * top:50%, then absolute + per-breakpoint top offsets, then fixed +
 * viewport top) was positioning .mobile-nav-icon from OUTSIDE the layout,
 * because in the parent theme's markup it lives inside .header-right-panel
 * - a box whose height varies a lot (Bootstrap collapses its search form
 * into stacked full-width rows below ~980px) and, separately, isn't part of
 * the page's normal scroll flow the way position:fixed needs it not to be.
 * Each fix solved one breakpoint and broke another, or fixed positioning
 * but broke scroll behaviour (operator: "меню не является частью шапки",
 * "бургер постоянно присутствует при скроле"). Root cause per operator:
 * "классы бургера определены глобально без интеграции адаптива меню".
 *
 * Fixed at the source instead: themes/listingpro-child/templates/headers/
 * header-style10.php overrides the parent template (standard child theme
 * get_template_part() lookup) and moves .mobile-nav-icon's markup out of
 * .header-right-panel into .lp-logo-container, as a sibling of .lp-logo -
 * see that file's header comment (including how "header_style10" was
 * confirmed as the actually-active template via wp_options - easy to
 * mistake for header-without-topbar.php, which shares the same
 * "header-without-topbar" CSS class on its <header> tag but was not the
 * template actually rendering). That column only ever holds the logo, so
 * it doesn't have the height-varies-by-breakpoint problem, and it's a
 * normal part of the page flow, so no more position:fixed. Same flexbox
 * technique as the app-view header above: no pixel math, adapts to any
 * screen size automatically. Scoped with :not(.app-view-header) since the
 * app-view header's own .lp-logo-container (different template, already
 * handled above) happens to share the same class name.
 */
.header-without-topbar:not(.app-view-header) .lp-logo-container {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
}
.header-without-topbar:not(.app-view-header) .lp-logo-container .mobile-nav-icon {
	position: static !important;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
	display: flex;
	align-items: center;
	justify-content: center;
}
.header-without-topbar:not(.app-view-header) .lp-logo-container .mobile-nav-icon .nav-icon {
	display: block;
	padding: 0;
}

/*
 * 2026-07-20 follow-up (operator): "бургер меню должно быть в правой части
 * экрана" - next to the logo (above) was correct for adaptivity but wrong
 * for placement once .header-right-panel stops wrapping onto its own line.
 * header-style10.php now renders a SECOND .mobile-nav-icon
 * (.mobile-nav-icon-wide) as a direct child of .header-right-panel - see
 * that file's header comment for why one element can't cover both shapes
 * (.header-right-panel is on a completely separate line from the logo
 * below 981px; no CSS position makes an element sit in a line other than
 * the one it's actually in). This rule shows the wide-panel copy and hides
 * the logo-row copy at exactly that breakpoint. Unlike the earlier,
 * universally-applied top:50% (broken by the search form stacking at
 * narrow widths), this is scoped to >=981px only, where
 * .header-right-panel's own height is the stable single-row shape
 * (confirmed live at 1200/1460/1920px - no more collapsing search form to
 * fight), so percentage-based vertical centering is safe here. */
.header-without-topbar:not(.app-view-header) .header-right-panel > .mobile-nav-icon.mobile-nav-icon-wide {
	display: none;
	position: absolute !important;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
	align-items: center;
	justify-content: center;
	z-index: 10;
}
.header-without-topbar:not(.app-view-header) .header-right-panel > .mobile-nav-icon.mobile-nav-icon-wide .nav-icon {
	display: block;
	padding: 0;
}
@media (min-width: 981px) {
	.header-without-topbar:not(.app-view-header) .lp-logo-container .mobile-nav-icon {
		display: none !important;
	}
	.header-without-topbar:not(.app-view-header) .header-right-panel > .mobile-nav-icon.mobile-nav-icon-wide {
		display: flex;
	}
	/* Reclaims the room the wide-panel icon now occupies at its own
	 * right:15px, so it doesn't overlap the avatar/login block - same
	 * fix as when the icon lived here originally earlier this session. */
	.header-without-topbar:not(.app-view-header) .pull-right.contentlogin-flex {
		margin-right: 65px !important;
	}
}

/* Same "Поиск" input, desktop-narrow header's own markup. The winning
 * competing rule turned out to be a 4-class responsive.css selector
 * (.lp-color-header-style .lp-search-header-style .lp-search-bar-header
 * input.dropdown_fields) - matched below at equal specificity; the simpler
 * .lp-header-search rule above it is kept as a defensive fallback in case a
 * future theme update changes which exact rule wins. */
.lp-header-search .lp-search-form-what input {
	padding-left: 80px !important;
}
.lp-color-header-style .lp-search-header-style .lp-search-bar-header input.dropdown_fields {
	padding-left: 80px !important;
}

/*
 * Homepage banner search card (the white "Поиск"/"Где" box floating over the
 * map) had no side margin on mobile - main.css's
 * ".top-section .lp-align-underBanner .lp-search-bar-all-demo" sets
 * width:100% with no compensating margin, and .lp-search-bar-all-demo's own
 * 11px padding only affects its inner content, not the box's own outer
 * edge - so the white card's background/shadow ran flush to both screen
 * edges instead of reading as a floating card like the rest of the page's
 * content blocks (operator screenshot: "у блока нет отступов по бока
 * экрана"). !important on width since it's fighting that exact main.css
 * rule at equal specificity.
 */
.lp-search-bar-all-demo.lp-bottom-with-map-back {
	margin-left: 15px !important;
	margin-right: 15px !important;
	width: calc(100% - 30px) !important;
	border-radius: 8px !important;
}

/* All offcanvas mobile menu items (mmenu.js). !important: an inline
 * <style> block (no external href - likely Elementor/theme-option output)
 * sets ".menu-item a{font-weight:normal}", 1 class + 1 element = higher
 * specificity than the plain class selector here. */
.mm-listitem__text {
	font-weight: bold !important;
}

/*
 * 2026-07-20 follow-up, operator: "убрать нижнее меню на всех вариантах
 * шапки". The previous attempt here (squeezing the search bar/button/menu
 * to all fit on one row - see git log for that version's full writeup) got
 * everything visible and mostly aligned but never a true single line, and
 * was fragile per-header-variant (had to special-case the 981-1024px
 * range separately). Simpler, more robust fix: this inline "Блог"/
 * "Контакты" menu (.header-right-panel .lp-menu.menu.lp-menu-outer) is
 * fully redundant - confirmed live (Playwright) that the hamburger menu
 * right next to it (.mobile-nav-icon, already fixed elsewhere in this
 * file) opens an offcanvas panel containing the exact same "Блог",
 * "Контакты", "Добавить объявление" and "Войти" links. Hiding the inline
 * copy removes the overflow/wrapping problem at its root instead of
 * fighting it, and loses no functionality - every link stays one tap/
 * click away via the hamburger. Scoped to .header-right-panel rather than
 * one specific header-style*.php file's classes (same reasoning as the
 * .mobile-nav-icon positioning fix above: that wrapper is shared across
 * nearly every header variant, so this generalizes instead of needing a
 * per-template selector). Verified: homepage + category archive, 1200/
 * 1460/1920px (header collapses to its normal single-row height at all
 * three - no more 93px-tall two-row state), and confirmed unaffected on
 * the real mobile app-view header (no .header-right-panel there) with the
 * hamburger's offcanvas content unchanged.
 *
 * Hiding the menu alone wasn't quite enough, though: even with it gone,
 * .lp-menu-container (now holding only the button+avatar, ~348px of
 * actual content) still wrapped below the search bar at 1200px+, because
 * it's a *fixed* Bootstrap col-md-6 (487.5px, always 50% of the 975px
 * panel) - the search bar's own 580px (driven by main.css's generic
 * `input.dropdown_fields{min-width:365px}`, meant for other, wider search
 * contexts) plus that fixed 487.5px column already exceeds the 975px
 * panel regardless of how little the column's content actually needs.
 * Narrowed the search bar to free that room. Scoped to min-width:1025px
 * for the same reason as originally found: the parent theme's own
 * responsive.css has a deliberately different (position:absolute) layout
 * for this exact header in the 981-1024px range, and fighting it isn't
 * this fix's job. A separate, pre-existing overlap between the search
 * icon and the "Добавить объявление" button was confirmed present at
 * 1024px independent of both this fix and the previous one (reproduced
 * with the search bar forced narrow, so it isn't a width problem at all -
 * likely that same position:absolute rule) - disclosed to the operator,
 * not fixed here as out of scope for "убрать нижнее меню".
 */
.header-right-panel .lp-menu.menu.lp-menu-outer {
	display: none !important;
}
.lp-header-style-classic .lp-search-bar-header input.dropdown_fields {
	min-width: 0 !important;
}
@media (min-width: 1025px) {
	.lp-header-style-classic .lp-search-header-style-outer {
		width: 400px !important;
	}
	/*
	 * 2026-07-21 follow-up, operator: "кнопка перекрывает кнопку фильтра" -
	 * the search-submit icon (.lp-search-bar-right, absolutely positioned
	 * at right:0 of .lp-header-search-button) was rendering under the
	 * "Добавить объявление" button. Root cause traced (Playwright DOM/CSS
	 * rule dump): assets/css/classic/classic-header.css hardcodes
	 * ".lp-header-style-classic .lp-search-header-style { width: 580px; }" -
	 * a fixed width completely independent of, and wider than, this file's
	 * own .lp-search-header-style-outer 400px rule right above. Since the
	 * outer wrapper is display:inline-block with default overflow:visible,
	 * the inner 580px box (and everything positioned relative to it,
	 * including the search-submit icon) simply overflowed 180px past the
	 * outer's painted boundary - invisible in the box model .lp-menu-outer's
	 * Bootstrap column math uses (which only sees the outer's 400px), so
	 * the "Добавить объявление" button's column was placed assuming the
	 * search area was clear past 400px, when the search icon was actually
	 * still painting there. Confirmed unrelated to the "убрать нижнее меню"
	 * fix above's own note ("independent of both this fix") in the sense
	 * that its cause is this classic-header.css rule, not the 400px rule
	 * itself - but the two combine: without the 400px outer constraint
	 * this hardcoded 580px inner width wouldn't be a problem at all, since
	 * nothing else would be trying to share the row with it.
	 */
	.lp-header-style-classic .lp-search-header-style {
		width: 100% !important;
	}
}

/*
 * Homepage "Популярные категории услуг" widget (CubeWP taxonomy shortcode,
 * list_view style, Elementor widget d9cd2bb on the front page). Icons are
 * injected by listingpro-child/include/category-list-icons.php. Before
 * this, .cwp-taxonomy-term-list came from CubeWP's own CSS as a bare
 * block-level link with no visual treatment - operator asked for a
 * "удобный визуаль" (proper visual design) for the widget.
 *
 * The flex container (.cwp-taxonomy-terms: display:flex, flex-wrap:wrap,
 * gap:10px) is generated per-page by Elementor itself (post-107.css, from
 * the widget's own layout settings) - not touched here. Only the
 * individual item (.cwp-taxonomy-term-list, one per category) is
 * restyled, from a bare text link into a card-style pill: white
 * background, icon in the brand blue, hover lift + border highlight.
 * flex-wrap on the parent already makes this adapt to any width with no
 * separate mobile layout needed - the media query below only tightens
 * padding/font-size at phone widths so more pills fit per row.
 */
.cwp-taxonomy-term-list {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 0;
	padding: 3px 10px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cwp-taxonomy-term-list:hover {
	border-color: #2458FF;
	box-shadow: 0 4px 10px rgba(36, 88, 255, 0.15);
	transform: translateY(-2px);
}

.cwp-taxonomy-term-list > a {
	display: inline-block;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: #363F48;
	text-decoration: none;
}

.cwp-taxonomy-term-list:hover > a {
	color: #2458FF;
}

.lpc-taxonomy-cat-icon {
	flex-shrink: 0;
	margin-right: 0;
	font-size: 15px;
	color: #2458FF;
}

@media (max-width: 480px) {
	.cwp-taxonomy-term-list {
		padding: 8px 14px;
	}

	.cwp-taxonomy-term-list > a {
		font-size: 13px;
	}

	.lpc-taxonomy-cat-icon {
		font-size: 14px;
	}
}

/*
 * Header "Add Listing" CTA (.header-list-icon-st6, header-style10.php,
 * the active header). Operator feedback: the button "выбивается из общего
 * тона" (doesn't sit organically) next to the header's other elements -
 * the search fields, avatar and hamburger are all flat white/neutral with
 * no border or shadow, while this button was a flat, fully-saturated
 * block of the site's brand blue with a 1px white border that's
 * essentially invisible against the light-gray header background (adds
 * no real definition). Keeps the same brand-blue fill (it's the site-wide
 * Primary Color, so this stays recognizable as the primary action) - only
 * softens its edges with a subtle shadow in the same hue, so it reads as
 * part of the same visual layer as its neighbours instead of a pasted-on
 * rectangle.
 *
 * The selector here is deliberately over-qualified
 * (.header-inner-page-wrap .lp-header-style-classic .lp-add-listing-btn
 * a.header-list-icon-st6, 4 classes + 1 type) plus !important. Confirmed
 * via a live DOM rule-match dump that THREE separate stylesheets declare a
 * competing border on this exact element - dynamic-css.css (Redux-
 * generated from the theme's Primary Color, 2 selectors, 1px solid) and
 * assets/css/classic/classic-header.css
 * (".header-inner-page-wrap .lp-header-style-classic a.header-list-icon-st6",
 * 2px solid, !important) - and all three <link> AFTER this file in <head>,
 * so matching or losing the specificity race would let source order decide
 * and silently break again on any theme/plugin update that reorders
 * enqueues. classic-header.css's rule was the actual winner before this
 * fix (specificity 0-3-1 vs this file's earlier 0-2-1 attempt).
 *
 * Two selector variants: templates/headers/header-views.php picks the
 * outer wrapper class based on is_front_page() -
 * "header-inner-page-wrap" everywhere else, "header-front-page-wrap" only
 * on the homepage - so both need the same override for consistent styling
 * across the whole site.
 */
.header-inner-page-wrap .lp-header-style-classic .lp-add-listing-btn a.header-list-icon-st6,
.header-front-page-wrap .lp-header-style-classic .lp-add-listing-btn a.header-list-icon-st6 {
	border: none !important;
	box-shadow: 0 2px 6px rgba(36, 88, 255, 0.28);
	transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.header-inner-page-wrap .lp-header-style-classic .lp-add-listing-btn a.header-list-icon-st6:hover,
.header-front-page-wrap .lp-header-style-classic .lp-add-listing-btn a.header-list-icon-st6:hover {
	box-shadow: 0 2px 6px rgba(54, 63, 72, 0.28);
}

/*
 * "Add Listing" header button wrapping onto what reads as two stacked
 * buttons (operator screenshot) at intermediate viewports - roughly
 * 981px-1415px, worse 1270px-1415px on inner pages. Root cause: two
 * independent squeeze rules stack in that exact window - this file's
 * own ".pull-right.contentlogin-flex { margin-right:65px }" above
 * (min-width:981px, reserves room for the wide mobile-nav icon) plus
 * parent theme's classic-header.css
 * ".header-inner-page-wrap ... header .col-md-6.col-xs-6.lp-menu-
 * container { max-width:38% }" (1270px-1415px, inner pages only) -
 * while a.header-list-icon-st6 has no white-space protection, so the
 * shrinking flex row wraps its text mid-phrase instead of anything
 * shrinking gracefully. Each wrapped line then inherits the anchor's
 * own background/padding, which is what makes it look like two
 * separate blue buttons stacked on top of each other.
 */
.lp-header-style-classic .lp-add-listing-btn a.header-list-icon-st6 {
	white-space: nowrap;
}
.lp-header-style-classic .contentlogin-flex .lp-add-listing-btn {
	flex-shrink: 0;
}
@media (min-width: 981px) and (max-width: 1415px) {
	/* One extra class (.pull-right) vs classic-header.css's own
	 * selector to win on specificity (0-6-1 vs 0-5-1) without
	 * !important - same trick as the border override above, needed
	 * because that stylesheet loads after this one. Widens the
	 * container back out now that the button inside it can no longer
	 * wrap, so nothing overflows the header. */
	.header-inner-page-wrap .lp-header-style-classic header .col-md-6.col-xs-6.lp-menu-container.pull-right {
		max-width: 60%;
	}
	/* override: classic-header.css's own padding (9px 21px !important)
	 * is too wide for the now-nowrap button to fit next to Join Now +
	 * nav menu inside the squeeze window above - same higher-
	 * specificity selector already used for the border fix so it wins
	 * over that !important rule. */
	.header-inner-page-wrap .lp-header-style-classic .lp-add-listing-btn a.header-list-icon-st6,
	.header-front-page-wrap .lp-header-style-classic .lp-add-listing-btn a.header-list-icon-st6 {
		padding: 9px 14px !important;
		font-size: 14px;
	}
}

/*
 * Subcategory pills in the category SEO block
 * (templates/seo/category-header.php, .lpc-cat-subcategories/.lpc-cat-pill).
 * Had no styling at all - rendered as plain stacked text links. Operator
 * asked for a "tag cloud" look. flex-wrap (not horizontal scroll) so it
 * adapts to any width without JS - narrow screens just wrap to more
 * lines, no separate mobile layout needed. Colors match the site's
 * existing brand palette: #2458FF (Primary Color, same blue used by the
 * header CTA and active/hover states throughout dynamic-css.css) and
 * #363F48 (the same dark shade those elements hover to).
 */
.lpc-cat-subcategories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.lpc-cat-pill {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(36, 88, 255, 0.08);
	color: #2458FF;
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.lpc-cat-pill:hover,
.lpc-cat-pill:focus {
	background: #363F48;
	color: #fff;
	text-decoration: none;
}

@media (max-width: 480px) {
	.lpc-cat-subcategories {
		gap: 6px;
	}

	.lpc-cat-pill {
		padding: 5px 12px;
		font-size: 12px;
	}
}

/*
 * Category FAQ block (templates/seo/category-footer.php,
 * .lpc-faq-block/.lpc-faq-item/.lpc-faq-question/.lpc-faq-answer).
 * .lpc-faq-item is a <details> element, collapsed by default (no `open`
 * attribute in the PHP) - operator wants an accordion, closed until
 * clicked. The ORIGINAL bug wasn't the accordion pattern itself: the
 * browser's native disclosure-triangle marker (list-style: disclosure-
 * closed/-open on <summary>) rendered invisibly in this theme's context
 * (confirmed live - Bootstrap's reset sets `details, summary { display:
 * block }`, no cursor:pointer, and the native marker glyph never actually
 * painted), so a collapsed question had zero visual sign it was
 * clickable and read as "the answer is missing." Fix: suppress the
 * native marker entirely (list-style:none + the ::-webkit-details-marker
 * rule for Chrome/Safari, which don't fully respect list-style on
 * <summary>) and replace it with an explicit "+"/"−" built from this
 * file's own CSS, which can't silently fail to render the way the native
 * one did.
 */
.lpc-faq-item {
	padding: 14px 0;
	border-bottom: 1px solid #e5e7eb;
}

.lpc-faq-item:last-child {
	border-bottom: none;
}

.lpc-faq-question {
	position: relative;
	margin: 0;
	padding-right: 28px;
	font-size: 16px;
	font-weight: 600;
	color: #363F48;
	cursor: pointer;
	list-style: none;
}

.lpc-faq-question::-webkit-details-marker {
	display: none;
}

.lpc-faq-question::after {
	content: "+";
	position: absolute;
	top: 0;
	right: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	color: #2458FF;
}

.lpc-faq-item[open] .lpc-faq-question::after {
	content: "\2212";
}

.lpc-faq-item[open] .lpc-faq-question {
	margin-bottom: 6px;
}

.lpc-faq-answer {
	font-size: 14px;
	line-height: 1.6;
	color: #555;
}

/*
 * Mobile app-view header (mobile/templates/headers/header-app-view-template.php):
 * .lp-search-toggle (avatar dropdown + open-filter/close-filter icons, col-xs-3)
 * only ever reveals .header-right-panel, a second collapsed search form. The
 * page body already renders a full, always-visible search bar right below
 * this header on every page (archive, search, home), so this collapsed
 * duplicate just adds clutter without adding capability - operator asked to
 * remove it from mobile entirely. Logo column (col-xs-9) expands to fill the
 * freed width instead of leaving an empty gap on the right.
 */
.app-view-header .lp-search-toggle {
	display: none !important;
}
.app-view-header .lp-logo-container {
	width: 100% !important;
}

/*
 * Parent theme (main.css) only colors .lp-star-box when it also carries
 * .filled.levelN - the unfilled state has no color rule at all, so it
 * inherits whatever text color is ambient there instead of reading as an
 * "empty star". This is invisible in normal use (every rated listing has
 * at least one filled star for contrast) but stands out as a visibly
 * broken/colorless rating badge on a listing whose only review has no
 * numeric star (title-bar.php's $rating falls through every `>=` check).
 * Can't fix in the template itself without duplicating the parent's
 * 199-line title-bar.php just for this - a light gray empty-star color is
 * the correct fix on its own merits anyway (standard 5-star widget
 * convention), not a workaround.
 */
.lp-listing-stars .lp-star-box:not(.filled) i {
	color: #d8d8d8;
}

/*
 * Mobile hamburger side menu (#menu, real mobile UA - see child theme's
 * mobile/templates/headers/header-app-view-template.php override), logged-in
 * account block. Parent theme's .sign-login-wrap (main.css) was built for a
 * single centered "Войти" pill button (display:inline-block, text-align:
 * center) - now that a logged-in visitor gets three stacked links (Dashboard,
 * Update Profile, Sign out - moved here from the removed duplicate header
 * icon, see that template's header comment), inline-block just ran them
 * together on one line with a single space between each. Turns the same
 * wrapper into a full-width vertical list with a visible divider per link
 * (row-style, like the rest of the offcanvas menu's own nav items) instead of
 * a run-on sentence of links. Scoped to .lpc-account-links so the guest
 * "Войти" button (still just .sign-login-wrap, no modifier class) keeps its
 * original centered-pill look untouched.
 */
.listing-app-view .small-scrren-app-view .sign-login-wrap.lpc-account-links {
	display: block;
	width: 100%;
	text-align: left;
	background: transparent;
	padding: 0;
	margin-top: 15px;
}

.listing-app-view .small-scrren-app-view .sign-login-wrap.lpc-account-links a {
	display: block;
	padding: 12px 5px;
	border-bottom: 1px solid #ececec;
	color: #363F48;
}

.listing-app-view .small-scrren-app-view .sign-login-wrap.lpc-account-links a:last-child {
	border-bottom: 0;
}

.listing-app-view .small-scrren-app-view .sign-login-wrap.lpc-account-links a.lpc-account-signout {
	color: #e74c3c;
}

/*
 * Mobile off-canvas menu (mmenu.js, main.js: $menu.mmenu({...})): opening the
 * menu translates the real page (.mm-page) sideways to reveal the menu panel
 * underneath, but .app-view-header stays exactly where it is - it's
 * position:fixed with a transparent background and z-index:9999 (main.css),
 * sitting OUTSIDE .mm-page so the slide transform never touches it. Visually
 * that reads as a second "USLUGI-FR" banner: the same transparent header,
 * unmoved, now showing the menu's blue backdrop through the part of it that
 * overlaps the open panel instead of the page's own background - not a
 * second element, the same one with different content bleeding through it
 * (operator screenshot, 2026-07-24). Also leaves the hamburger icon sitting
 * on top of the open menu, pointless once it's already open.
 *
 * Hiding the header while the menu is open removes both at once - the
 * "banner" (because there's nothing left for the backdrop to bleed through)
 * and the hamburger (it lives in the same element). mmenu's own
 * pagedim-black extension (see the same init call) already lets a tap
 * anywhere on the dimmed page close the menu, so removing the header's own
 * close affordance doesn't strand the user without one.
 */
html.mm-wrapper_opened .app-view-header {
	display: none !important;
}

/*
 * The actual blue banner in the operator's screenshot isn't .app-view-header
 * at all (that's the transparent-bleed effect above) - it's mmenu's own
 * navbar slot, injected by main.js's $menu.mmenu({navbars: {content: [...
 * <img src=sitelogo>]}}) call, showing the same full logo+tagline SVG
 * (used everywhere else at a sane header size) at its native 290x71 inside
 * a #2458FF navbar strip - oversized and out of place for a menu meant to
 * just be a short list of links (confirmed live: .mm-navbar's own
 * background-color computes to rgb(36,88,255), i.e. #2458FF).
 *
 * The parent theme already tries to hide exactly this: main.css has
 * ".listing-app-view .mm-navbar-top { display: none; }" - but the bundled
 * mmenu.js build never emits a "mm-navbar-top" class, only "mm-navbar" with
 * a BEM size modifier ("mm-navbar_size-3", confirmed live) - a leftover
 * selector from an older mmenu API version that no longer matches anything,
 * so the intended hide never fires. Re-targeting the class that's actually
 * on the element restores the theme's own original intent. The panel's
 * fixed 66px margin-top (main.css .mm-menu_iconpanel .mm-panels >
 * .mm-panel_opened, reserved to sit below the now-removed 130px-tall
 * navbar) is zeroed here too, so the link list starts at the top instead
 * of leaving a blank gap where the banner used to be.
 *
 * Unscoped from .listing-app-view (mobile-mvp-audit-2026-08-07.md finding
 * #1): that body class only gets added when the single_listing_mobile_view
 * option is 'app_view'/'app_view2' AND wp_is_mobile() - a branch
 * taxonomy-listing-category.php's own docblock says was "broken ... and
 * has been removed" elsewhere in the theme, so in practice the class never
 * lands on any page. Confirmed live on the homepage (no listing-app-view
 * class at all): the banner showed anyway. .mm-navbars_top is mmenu's
 * single static top-of-menu slot (the navbars:{content:[...]} init call),
 * distinct from the per-panel back/title navbar mmenu renders inside each
 * .mm-panel when you drill into a submenu - hiding it unconditionally
 * can't affect that submenu navigation.
 */
.mm-navbars_top .mm-navbar {
	display: none !important;
}
.mm-menu_iconpanel .mm-panels > .mm-panel_opened {
	margin-top: 0 !important;
}

/*
 * Mobile off-canvas menu (mmenu, #menu), account/action buttons colliding
 * with the menu list (operator screenshot, iPhone 14 Pro Max, 2026-08-07:
 * "Контакты" rendering underneath the "Добавить объявление" button). Those
 * buttons (Войти / Добавить объявление / Выйти) are the theme's .lpl-button,
 * whose base style is position:absolute; top:85px - tuned for the desktop
 * header bar where they overlay the header (the "Выйти" variant even carries
 * an inline right:10px from header-style10.php). Inside the offcanvas panel
 * that absolute positioning takes them out of flow and floats them at a
 * fixed top offset, on top of the in-flow menu list (#menu-home-page-menu:
 * Блог / Контакты). mmenu also injects them as direct children of .mm-menu,
 * siblings of the absolutely-positioned .mm-panels (top:150px) - so nothing
 * reserves the room they need. The collision only surfaced once the
 * mm-navbar-hide + panel margin-top:0 fixes right above pulled the list up
 * into the band the absolute buttons occupy; on the narrow mobile panel the
 * list's first item lands right where the buttons float.
 *
 * Fix (the same "stop positioning, use normal flow" approach this file keeps
 * converging on): while the menu is OPEN, drop every absolute/float offset
 * inside #menu and lay the panel out as a flex column - action buttons first
 * (order:-1, full-width stacked), the menu list below. No pixel math, so it
 * adapts to any panel width and any button count (guest = Войти + Добавить,
 * logged-in = Добавить + Выйти) and can never overlap. mmenu's own panels
 * are made static too: this is a flat single-panel list with no submenus, so
 * it needs none of mmenu's horizontal panel-slide machinery.
 *
 * Deliberately scoped to .mm-menu_opened (present only while the menu is
 * open), NOT .mm-menu: mmenu's closed off-canvas doesn't slide off-screen -
 * it sits position:fixed; top:0 BEHIND the page (.mm-slideout), which simply
 * covers it. The theme relies on the menu's top ~150px band being empty (the
 * now-hidden navbar) so nothing pokes out from behind the page. Applying the
 * flow layout unconditionally moved the buttons into that top band; on mobile
 * - where the page doesn't cover y:0 the way the desktop admin bar + fixed
 * header do - the top button then showed through above the header (operator
 * screenshot #2). Restricting the whole rule to the open state keeps the
 * closed menu at its stock (covered) layout and only reflows once it's
 * actually revealed. Scoped to #menu so the identical .lpl-button in the
 * desktop header is untouched.
 */
#menu.mm-menu_opened {
	display: flex !important;
	flex-direction: column;
	overflow-y: auto;
}
#menu.mm-menu_opened .mm-navbars_top {
	display: none !important;
}
#menu.mm-menu_opened .mm-panels,
#menu.mm-menu_opened .mm-panel {
	position: static !important;
	height: auto !important;
}
#menu.mm-menu_opened .lpl-button {
	position: static !important;
	order: -1;
	display: block !important;
	float: none !important;
	width: auto !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	margin: 10px 15px 0 !important;
	padding: 12px 15px !important;
	text-align: center;
}

/*
 * Mobile side menu, logged-out visitor (operator screenshot, 2026-07-24):
 * .user-detail-wrap's own background (dynamic-css.css - a shared rule with
 * the dashboard's "admin-top-section", a decorative stock landscape photo,
 * adminbg.jpg) was designed as a backdrop for a real profile photo + name.
 * With the avatar removed (see this template's header comment, point 3)
 * there's nothing left for it to be a backdrop to, so it's cleared here
 * rather than left behind an empty two-button row. Padding/margin reset to
 * match a plain button row instead of the photo-backed profile card the
 * parent theme's own spacing was tuned for. The two .sign-login-wrap
 * buttons ("Войти" / "Add Listing") sit in a flex row so they read as one
 * matched pair of actions instead of a stacked list.
 */
.listing-app-view .small-scrren-app-view .user-detail-wrap.lpc-guest-actions {
	background: none;
	padding: 20px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.listing-app-view .small-scrren-app-view .user-detail-wrap.lpc-guest-actions .sign-login-wrap {
	margin-top: 0;
	flex: 0 1 auto;
	min-width: 0;
	padding: 9px 15px;
}
.listing-app-view .small-scrren-app-view .user-detail-wrap.lpc-guest-actions .sign-login-wrap a {
	white-space: nowrap;
}

/*
 * One-time tap hint for the touch-drag fix in
 * assets/js/mobile-map-gesture-fix.js - disappears on first tap, same
 * moment the map itself becomes draggable.
 */
.lpc-map-tap-hint {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 13px;
	text-align: center;
	pointer-events: none;
	max-width: 80%;
}

/*
 * The extra-fields overlay (.outer_all_page_overflow) is position:fixed with
 * z-index:999 and transform:translateX(-300px) in its "closed" state. On
 * viewports wider than ~300px the overlay still covers most of the screen and
 * intercepts all pointer events, making filters and other page controls
 * unclickable. pointer-events:none in the closed state lets clicks pass
 * through; the open state (.hide-filters, confusingly named) restores them.
 */
.page-container .outer_all_page_overflow {
	pointer-events: none;
}
.page-container .outer_all_page_overflow.hide-filters {
	pointer-events: auto;
}

/* ── Media upload section — clean UI ── */

.submit_new_style .lp-listing-featuredimage .lp-prevewFeatured {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 8px;
	border: 2px solid #e3e3e3;
	margin-top: 12px;
}

/* Gallery & featured image drag-drop zones */
.submit_new_style .lp-listing-featuredimage .jFiler-input-dragDrop,
.submit_new_style .lp-img-gall-upload-section .jFiler-input-dragDrop {
	background: #fafbfc !important;
	border: 2px dashed #d0d5dd !important;
	border-radius: 10px;
	padding: 32px 20px;
	height: auto !important;
	box-sizing: border-box;
	max-width: 100%;
	transition: border-color 0.2s, background-color 0.2s;
}

.submit_new_style .lp-listing-featuredimage .jFiler-input-dragDrop:hover,
.submit_new_style .lp-img-gall-upload-section .jFiler-input-dragDrop:hover {
	border-color: #008bff !important;
	background: #f0f7ff !important;
}

.submit_new_style .lp-listing-featuredimage .jFiler-input-inner,
.submit_new_style .lp-img-gall-upload-section .jFiler-input-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.submit_new_style .lp-listing-featuredimage .jFiler-input-text h3,
.submit_new_style .lp-img-gall-upload-section .jFiler-input-text h3 {
	font-size: 15px;
	font-weight: 500;
	color: #667085;
	margin: 0 !important;
	text-align: center;
}

.submit_new_style .lp-listing-featuredimage .jFiler-input-text h3 .fa-upload,
.submit_new_style .lp-img-gall-upload-section .jFiler-input-text h3 .fa-upload {
	display: block;
	font-size: 28px;
	margin: 0 auto 8px;
	color: #008bff;
}

.submit_new_style .lp-listing-featuredimage .jFiler-input-choose-btn.blue,
.submit_new_style .lp-img-gall-upload-section .jFiler-input-choose-btn.blue {
	margin-top: 4px;
	padding: 10px 24px;
	font-size: 13px;
	font-weight: 600;
	color: #fff !important;
	background: #008bff;
	border: none !important;
	border-radius: 6px;
	transition: background-color 0.2s;
}

.submit_new_style .lp-listing-featuredimage .jFiler-input-choose-btn.blue:hover,
.submit_new_style .lp-img-gall-upload-section .jFiler-input-choose-btn.blue:hover {
	background: #0070d6;
	color: #fff !important;
}

/* Reset old featured image styles that conflict with new dropzone layout */
.submit_new_style-outer .lp-listing-featuredimage label {
	float: none !important;
}

.submit_new_style-outer .lp-listing-featuredimage label p {
	color: #fff !important;
	border: none !important;
	background: #008bff;
	display: inline-flex;
	margin-right: 0;
	padding: 10px 24px;
}

/* Hide file input outline, keep clickable */
.submit_new_style .jFiler-input-dragDrop input[type="file"] {
	outline: none !important;
	border: none !important;
}

.submit_new_style .jFiler-input-dragDrop .filediv {
	position: static;
}

/* Gallery thumbnails grid */
.submit_new_style .lp-img-gall-upload-section .jFiler-items-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 12px 0 0;
	margin: 0;
}

.submit_new_style .lp-img-gall-upload-section .jFiler-item {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid #e3e3e3;
}

.submit_new_style .lp-img-gall-upload-section .jFiler-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.submit_new_style .lp-img-gall-upload-section .jFiler-item-trash-action {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 50%;
	color: #fff;
	font-size: 11px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s;
}

.submit_new_style .lp-img-gall-upload-section .jFiler-item:hover .jFiler-item-trash-action {
	opacity: 1;
}

/* Section heading */
.submit_new_style .white-section .white-section-heading {
	font-size: 16px;
	font-weight: 600;
	color: #1a1a2e;
	margin-bottom: 16px;
}

/* Gallery label */
.submit_new_style .lp-img-gall-upload-section label[for="postVideo"] {
	font-size: 14px;
	font-weight: 600;
	color: #333;
	margin-bottom: 10px;
}

/* Media upload — mobile */
@media (max-width: 767px) {
	.submit_new_style .lp-listing-featuredimage .jFiler-input-dragDrop,
	.submit_new_style .lp-img-gall-upload-section .jFiler-input-dragDrop {
		padding: 24px 12px;
	}

	.submit_new_style .lp-listing-featuredimage .jFiler-input-text h3,
	.submit_new_style .lp-img-gall-upload-section .jFiler-input-text h3 {
		font-size: 13px;
	}

	.submit_new_style .lp-listing-featuredimage,
	.submit_new_style .lp-img-gall-upload-section {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.submit_new_style .lp-listing-featuredimage .jFiler-input-text h3 .fa-upload,
	.submit_new_style .lp-img-gall-upload-section .jFiler-input-text h3 .fa-upload {
		font-size: 24px;
	}
}

/* Performance: force font-display:swap on all @font-face so text is visible
   immediately with a fallback font while custom fonts load. */
@font-face { font-family: 'quicksand-light'; font-display: swap; }
@font-face { font-family: 'quicksand-regular'; font-display: swap; }
@font-face { font-family: 'Font Awesome 5 Brands'; font-display: swap; }
@font-face { font-family: 'Font Awesome 5 Free'; font-display: swap; }
@font-face { font-family: 'Font Awesome 5 Regular'; font-display: swap; }

/* Submit/edit listing: dynamic category-feature checkboxes (#tags-by-cat,
 * #features-by-cat, populated by listingpro-plugin's child-term.js).
 * Operator-requested look: unchecked stays the theme's own classic grey
 * fill (main.css: .checkbox label:before { background-color: #ababab }) -
 * first attempt here overrode it to a white box, which all but
 * disappeared against the page background; reverted, only rounding the
 * corners now. Checked: brand blue (#41a6df, same accent used for
 * buttons/active-tab/tooltip elsewhere in colors.css) fill + white check,
 * rounded to match. Scoped to just these two containers rather than the
 * global rule, so this doesn't touch checkbox appearance anywhere else
 * already shipped on the site.
 */
#tags-by-cat .checkbox label:before,
#features-by-cat .checkbox label:before {
	border-radius: 4px;
}
#tags-by-cat input[type="checkbox"]:checked + label:before,
#features-by-cat input[type="checkbox"]:checked + label:before {
	color: #fff;
	background-color: #41a6df;
	border-color: #41a6df;
	border-radius: 4px;
}

/*
 * Homepage LCP mitigation (docs/perf-investigation-2026-08-14.md, backlog
 * item 4). With top_banner_styles='map_view' (the active option on this
 * install), templates/banner.php's map_view branch used to render literally
 * nothing but a bare, empty #homeMap div - no heading, no text - so the page
 * had no above-the-fold LCP candidate at all until the map's Leaflet tiles
 * arrived on window.load -> AJAX -> L.tileLayer (confirmed live: single tile
 * <img class="leaflet-tile-loaded"> painting at ~10.2s, 87.5% pure load
 * delay - deferring the map further isn't the fix, per that doc).
 *
 * banner.php now renders a real h1/p hero (same $top_main_title/$top_title
 * theme options every other banner_view* branch already uses, e.g. the
 * .lp_auto_loc_container block further down this same file) in normal
 * document flow BEFORE #homeMap, not absolutely positioned over the live
 * map - same reasoning as the .lp-home-map-marker-count rule above this
 * file: avoid fighting Leaflet's own internal z-index layers/control panes/
 * drag handling.
 *
 * Colour override, found by live rendering (not just reading the CSS - the
 * cascade wasn't obvious from source alone): .lp-banner-browse-txt
 * (colors.css, Redux-generated from the theme's Primary Color, unscoped)
 * and .lp-dyn-city (main.css:21114, also unscoped) both set color:#fff.
 * Every OTHER place that reuses this exact h1/p markup sits on a dark
 * background-image banner, where white text is correct - this hero sits on
 * the map_view banner's plain white page background instead (no image),
 * so without an override both the subtitle <p> and the "Ваш город" span
 * inside the <h1> render as invisible white-on-white text (confirmed via a
 * live screenshot + computed-style check, not caught by a source-only
 * review). Scoped dark-colour overrides below fix this without touching
 * the global, still-correct-elsewhere .lp-banner-browse-txt/.lp-dyn-city
 * rules.
 *
 * IMPORTANT CAVEAT, recorded so this isn't re-litigated from scratch: this
 * hero text is a real, worthwhile content/a11y fix on its own (the map_view
 * banner previously had no visible page heading at all) but is NOT a
 * verified full fix for the LCP metric itself. Measured live (mobile
 * viewport, 412px wide) it renders at roughly 15,000-30,000px2 depending on
 * which of $top_main_title/$top_title is longer, while the actual winning
 * LCP candidate in every trace taken (before and after this change) is a
 * single Leaflet tile <img> at 61,000-65,536px2 - larger, so the tile still
 * wins the LCP race in the recorded traces. A same-day, more invasive
 * attempt to exclude the tile from LCP eligibility entirely (clipping
 * #homeMap's .leaflet-tile-pane via CSS overflow while loading, revealing
 * once the tile layer's own 'load' event fires) was built and tested against
 * this exact page/Chrome build and DID NOT WORK - four independent CSS
 * variants (ancestor max-height, ancestor explicit height, ancestor explicit
 * pixel width+height, and direct !important width/height on the tile <img>
 * elements themselves) all still registered the tile at its full ~65,536px2
 * size despite the clip being confirmed correctly applied via
 * getBoundingClientRect() at the moment the tiles loaded - a real, reproduced
 * Leaflet/Chromium interaction (plausibly compositing/GPU-layer related,
 * given tiles are positioned via transform for pan performance) that a
 * simple ancestor-overflow or element-resize trick doesn't defeat, unlike an
 * equivalent plain <img>-in-overflow:hidden synthetic test which DID work as
 * expected. That attempt was reverted rather than shipped half-working. Left
 * here as a pointer for whoever picks this back up: don't re-attempt the
 * same CSS-clip approach without a new idea for why Leaflet's tiles differ
 * from a plain image in this regard; the remaining realistic paths are (a) a
 * genuinely large real hero image/graphic (>256x256 rendered) that reliably
 * outsizes a tile regardless of viewport, which needs a content/design
 * decision this task didn't have the authority to make unilaterally, or (b)
 * further browser-level investigation into the compositing behavior above.
 */
.lpc-home-map-hero {
	padding: 24px 15px 16px;
	text-align: center;
}

.lpc-home-map-hero .lp-dyn-city,
.lpc-home-map-hero .lp-banner-browse-txt {
	color: #333;
}

/*
 * Mobile menu rebuild (2026-08-21, diagnosing-bugs skill run).
 *
 * Replaces the jQuery mmenu v7.3.3 off-canvas (#menu, assets/js/main.js
 * `$menu.mmenu({...})`) on templates/headers/header-style10.php - the only
 * header style actually served (lp_get_header_views() resolves to
 * 'header-style10' on this site; the other 9 header-*.php templates are
 * unused option branches, left untouched here per the theme's own "dead
 * paths are retained" convention).
 *
 * Root causes found by driving the live burger with Playwright (mobile
 * viewport, DOM/computed-style inspection, not guesswork):
 *
 * 1. No working page-dim backdrop. mmenu v7's real overlay element is
 *    `.mm-wrapper__blocker` (double-underscore BEM, not the `.mm-blocker`
 *    older-API name every write-up assumes) - but on this page it renders
 *    with the SAME element as `.mm-slideout` (the whole page, mid-slide),
 *    not a separate overlay div, so the visible strip of page beside the
 *    open panel was just the live, fully-interactive homepage - not dimmed,
 *    not blocked from taps.
 * 2. No visible close control. The only "close" affordance mmenu ships
 *    (`.mm-panel__blocker`) is an invisible full-panel link used for
 *    drilling into submenus, not a close button - and three prior overrides
 *    below (`.mm-navbars_top .mm-navbar { display:none }` etc.) already
 *    strip the one navbar slot that could have carried one.
 * 3. `#menu.mm-menu_opened .lpl-button { order: -1 }` (below, 2026-08-07 fix)
 *    pulls the Войти/Добавить action buttons before `.mm-panels` in the flex
 *    flow, but nothing gives `.mm-panels` `flex-grow` - so on a 2-item nav
 *    (Блог/Контакты - this site's "Mobile Menu" location is intentionally
 *    thin) the panel leaves a large dead flex gap between the buttons and
 *    the links instead of one continuous list.
 * 4. `href="#menu"` burger anchors reading/writing location.hash on open is
 *    what assets/js/lpc-mmenu-hash-guard.js exists to patch around - a
 *    symptom of the same anchor-as-button pattern.
 *
 * Rather than stack a fourth patch onto the same library integration, this
 * is a small dependency-free off-canvas panel (markup in header-style10.php,
 * behaviour in assets/js/lpc-mobile-menu.js): a real backdrop element, a
 * real close button, one flex column with no order tricks, and <button>
 * triggers instead of hash anchors. Scoped entirely to the new
 * #lpc-mobile-menu id/classes so it doesn't touch #menu or any rule below
 * that other header styles still rely on.
 */
.lpc-mobile-menu {
	position: fixed;
	inset: 0;
	/*
	 * Deliberately far above any z-index in this codebase (checked: the
	 * highest other value is 9999999, an archive-page tooltip) - .header-
	 * without-topbar sits at z-index:99999 on its own relative-positioned
	 * stacking context, which sat ABOVE an earlier 9999 backdrop and bled
	 * the site header (with its own burger icon) through on top of the open
	 * panel. An always-on-top overlay shouldn't have to track every other
	 * z-index added to the theme over time, so this goes to the practical
	 * ceiling instead of chasing the next collision.
	 */
	z-index: 2147483000;
	visibility: hidden;
	pointer-events: none;
}

.lpc-mobile-menu.is-open {
	visibility: visible;
}

.lpc-mobile-menu__panel {
	position: absolute;
	top: 0;
	left: 0;
	width: min(85vw, 360px);
	max-width: 100%;
	height: 100%;
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	box-shadow: 2px 0 24px rgba(0, 0, 0, 0.15);
	pointer-events: auto;
}

.lpc-mobile-menu.is-open .lpc-mobile-menu__panel {
	transform: translateX(0);
}

.lpc-mobile-menu__backdrop {
	position: fixed;
	inset: 0;
	z-index: 2147482999;
	background: rgba(15, 23, 42, 0.72);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lpc-mobile-menu__backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

body.lpc-mobile-menu-open {
	overflow: hidden;
}

.lpc-mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px;
	border-bottom: 1px solid #ececec;
	flex: 0 0 auto;
}

.lpc-mobile-menu__logo img {
	max-height: 32px;
	width: auto;
}

.lpc-mobile-menu__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: #f2f3f5;
	color: #363f48;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	flex: 0 0 auto;
	-webkit-appearance: none;
	appearance: none;
}

.lpc-mobile-menu__close:hover,
.lpc-mobile-menu__close:focus-visible {
	background: #e5e7eb;
}

.lpc-mobile-menu__nav {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.lpc-mobile-menu__nav ul.mobile-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}

.lpc-mobile-menu__nav ul.mobile-menu li a {
	display: block;
	padding: 14px 20px;
	color: #363f48;
	font-size: 15px;
	font-weight: 500;
	border-bottom: 1px solid #f2f3f5;
	text-decoration: none;
}

.lpc-mobile-menu__nav ul.mobile-menu li:last-child a {
	border-bottom: 0;
}

.lpc-mobile-menu__nav ul.mobile-menu li a:hover,
.lpc-mobile-menu__nav ul.mobile-menu li a:focus-visible {
	background: #f7f8fa;
}

.lpc-mobile-menu__actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	border-top: 1px solid #ececec;
}

.lpc-mobile-menu__actions .lpl-button {
	position: static;
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px 15px;
	text-align: center;
	box-sizing: border-box;
}

.mobile-nav-icon .nav-icon {
	background: none;
	border: 0;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
}