/* ============================================
   Mobile Filter Panel — Airbnb-inspired overhaul
   "Don't Make Me Think" (Steve Krug) principles:
   - Sentence case labels (10% faster scanning than UPPERCASE)
   - 44px+ touch targets (Apple HIG minimum)
   - 16px font on inputs (prevents iOS zoom)
   - Generous whitespace, obvious tappable elements
   ============================================ */

/* --- Responsive visibility helpers (always active, outside media query) --- */
.mobile-only { display: none !important; }
.desktop-only { display: block; }

@media (max-width: 768px) {
	.mobile-only { display: initial !important; }
	.filter-nav.mobile-only { display: flex !important; }
	.desktop-only { display: none !important; }
}

/* === All filter panel styles — mobile only === */
@media (max-width: 768px) {

/* --- Full-screen overlay --- */
.map-page .dropdown-onclick-div-show {
	display: block;
	right: auto;
	left: 0 !important;
	top: 0 !important;
	position: fixed;
	z-index: 1000;
	height: 100%;
	overflow-y: auto;
	width: 100% !important;
	overflow-x: hidden;
	background: #fff;
	-webkit-overflow-scrolling: touch;
}
.map-page .btn-divider-right, .btn-divider-left {
	border: 0 !important;
}

/* --- Header bar (Airbnb style) --- */
.filter-nav {
	width: 100%;
	height: 52px;
	line-height: 52px;
	position: fixed;
	text-transform: none;
	border-bottom: 1px solid #ebebeb;
	box-shadow: none;
	left: 0;
	top: 0;
	background: #fff;
	z-index: 10000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 16px;
}
.filter-nav .clickable_link {
	font-size: 15px;
	font-weight: 600;
	color: #222;
	text-transform: none;
}
.filter-nav #reset-filters {
	color: #222;
	text-decoration: underline;
	font-weight: 500;
}
#mobile-counter {
	color: #717171;
	font-size: 16px;
	font-weight: 600;
}

/* --- Panel content area --- */
#buy-rent-selector {
	margin-top: 60px;
}
.map-page .menu-items-container {
	padding: 8px 20px 100px !important;
}

/* --- Section blocks --- */
.map-page .dropdown-div-onclick-more .more-block-line {
	margin: 0 !important;
	padding: 24px 0 !important;
	border-top: 1px solid #ebebeb;
}
.map-page .dropdown-div-onclick-more .more-block-line:first-child {
	border-top: none;
}
.more-block-line {
	border-top: 1px solid #ebebeb;
	padding-top: 16px !important;
}

/* --- Section labels (sentence case, not UPPERCASE) --- */
.map-page .dropdown-div-onclick-more .more-block-line .more-left-block {
	width: 100% !important;
	display: block !important;
	font-size: 16px;
	font-weight: 600;
	color: #222;
	text-transform: none !important;
	margin-bottom: 12px;
	letter-spacing: 0;
}
/* Kill inherited uppercase from .buy-rent-resp in style.css */
.map-page .dropdown-div-onclick-more .buy-rent-resp,
.map-page .dropdown-div-onclick-more .buy-rent-resp * {
	text-transform: none !important;
}

/* --- Input fields (Price, Area, Year) --- */
.map-page .dropdown-div-onclick-more input[type="text"] {
	height: 44px !important;
	border: 1px solid #ddd !important;
	border-radius: 10px !important;
	font-size: 16px !important;
	padding: 0 14px !important;
	color: #222 !important;
	background: #fff !important;
	box-sizing: border-box !important;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	width: 100% !important;
}
.map-page .dropdown-div-onclick-more input[type="text"]:focus {
	border-color: #222 !important;
}
.map-page .dropdown-div-onclick-more input[type="text"]::placeholder {
	color: #b0b0b0;
}
/* Min/max box containers (price, area, year) */
.map-page .dropdown-div-onclick-more .min-box,
.map-page .dropdown-div-onclick-more .max-box {
	flex: 1;
}
/* Safe default: block layout — must match desktop specificity (4 classes) */
.map-page .dropdown-div-onclick-more .more-block-line .more-right-block {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}
/* Flex ONLY for min/max input pairs — not dropdowns or radio/checkbox blocks */
.map-page .dropdown-div-onclick-more .more-block-line .more-right-block:has(> .min-box) {
	display: flex !important;
	align-items: center;
	gap: 8px;
}
.map-page .dropdown-div-onclick-more .price-box-separator {
	width: 12px;
	height: 1px;
	background: #b0b0b0;
	flex-shrink: 0;
	display: block;
}

/* --- Pill buttons (Rooms, Baths) --- */
.map-page .dropdown-div-onclick-more .more-right-block-wide {
	max-width: 100% !important;
	width: 100% !important;
	display: block !important;
}
.map-page .dropdown-div-onclick-more .rb-btn {
	padding: 11px 0;
	font-size: 14px;
	border-radius: 0;
	border-color: #ddd;
}
.map-page .dropdown-div-onclick-more .rb-btn:first-child {
	border-radius: 10px 0 0 10px;
}
.map-page .dropdown-div-onclick-more .rb-btn:last-child {
	border-radius: 0 10px 10px 0;
}
.map-page .dropdown-div-onclick-more .rb-exact-match-row {
	padding: 14px 0 2px;
}

/* --- Custom dropdowns (Lot size, Days on site) --- */
.map-page .dropdown-div-onclick-more .custom-option-header {
	height: 44px;
	border: 1px solid #ddd !important;
	border-radius: 10px !important;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	padding: 0 14px !important;
	cursor: pointer;
	background: #fff !important;
	font-size: 15px !important;
	color: #222 !important;
	box-sizing: border-box;
	box-shadow: none !important;
	min-width: 0 !important;
	width: 100%;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.map-page .dropdown-div-onclick-more .custom-option-header .icon {
	font-size: 10px;
	color: #717171;
	margin-left: 8px;
}
.map-page .dropdown-div-onclick-more .custom-option-header-value {
	min-width: 0 !important;
	padding: 0 !important;
}
/* Override desktop absolute positioning — use static flow on mobile */
.map-page .dropdown-div-onclick-more .custom-option {
	position: static !important;
	border: 1px solid #ddd !important;
	border-radius: 10px !important;
	margin-top: 4px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
	background: #fff !important;
	width: 100% !important;
	min-width: 0 !important;
}
.map-page .dropdown-div-onclick-more .custom-option li {
	padding: 14px 16px !important;
	font-size: 15px !important;
	color: #222 !important;
	border-bottom: 1px solid #f5f5f5;
	cursor: pointer;
	line-height: normal !important;
	background: #fff !important;
	-webkit-tap-highlight-color: transparent;
}
.map-page .dropdown-div-onclick-more .custom-option li:last-child {
	border-bottom: none;
}
/* Kill the red background on hover/active/selected — use Airbnb style */
.map-page .dropdown-div-onclick-more .custom-option li:hover,
.map-page .dropdown-div-onclick-more .custom-option li:active {
	background: #f7f7f7 !important;
	color: #222 !important;
}
.map-page .dropdown-div-onclick-more .custom-option li.item-selected {
	font-weight: 600 !important;
	color: #222 !important;
	background: #f7f7f7 !important;
}
/* Kill global red .item-selected on map page */
.map-page .dropdown-div-onclick-more .item-selected {
	background-color: transparent !important;
	color: #222 !important;
}

/* --- Buy/Rent/Off-market radio buttons --- */
.map-page .dropdown-div-onclick-more #buy-rent-selector .more-right-block {
	display: block !important;
}
.map-page .dropdown-div-onclick-more #buy-rent-selector .mdl-radio {
	display: flex !important;
	align-items: center;
	padding: 10px 0 !important;
	padding-left: 0 !important;
	min-height: 44px;
	width: 100%;
}
.map-page .dropdown-div-onclick-more #buy-rent-selector .mdl-radio.is-upgraded {
	padding-left: 0 !important;
}
/* Let MDL keep native input absolute-positioned (do NOT change position/size — breaks click) */
/* Hide MDL default radio circles — replaced by custom ::before */
.map-page .dropdown-div-onclick-more #buy-rent-selector .mdl-radio__outer-circle,
.map-page .dropdown-div-onclick-more #buy-rent-selector .mdl-radio__inner-circle {
	display: none !important;
}
/* Label layout */
.map-page .dropdown-div-onclick-more #buy-rent-selector .mdl-radio__label {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	cursor: pointer;
}
/* Custom radio circle indicator (unchecked) */
.map-page .dropdown-div-onclick-more #buy-rent-selector .mdl-radio__label::before {
	content: '';
	width: 20px;
	height: 20px;
	border: 2px solid #b0b0b0;
	border-radius: 50%;
	flex-shrink: 0;
	box-sizing: border-box;
	transition: all 0.15s ease;
}
/* Custom radio circle indicator (checked) */
.map-page .dropdown-div-onclick-more #buy-rent-selector .mdl-radio.is-checked .mdl-radio__label::before {
	border-color: #222;
	background: #222;
	box-shadow: inset 0 0 0 3px #fff;
}
.map-page .dropdown-div-onclick-more #buy-rent-selector .listing-dot {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}
.map-page .dropdown-div-onclick-more #buy-rent-selector .listing-type-text {
	font-size: 16px;
	text-transform: none !important;
}
/* Show result counts in mobile filter panel (hidden globally in style.css) */
.map-page .dropdown-div-onclick-more #listing-type-sale-results,
.map-page .dropdown-div-onclick-more #listing-type-rent-results,
.map-page .dropdown-div-onclick-more #listing-type-sold-results {
	display: inline !important;
	font-size: 14px;
	color: #717171;
}

/* --- Checkbox overrides (fix square border-radius from .map-page rule) --- */
.map-page .dropdown-div-onclick-more .mdl-checkbox {
	display: flex !important;
	align-items: center;
	padding: 10px 0;
	min-height: 44px;
	height: auto !important;
	width: 100%;
	padding-left: 0 !important;
}
.map-page .dropdown-div-onclick-more .mdl-checkbox.is-upgraded {
	padding-left: 28px !important;
}
.map-page .dropdown-div-onclick-more .mdl-checkbox__box-outline {
	border-radius: 4px !important;
	width: 20px !important;
	height: 20px !important;
	border: 2px solid #ccc !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}
.map-page .dropdown-div-onclick-more .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
	background: #222 !important;
	border-color: #222 !important;
}
.map-page .dropdown-div-onclick-more .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat !important;
}
.map-page .dropdown-div-onclick-more .mdl-checkbox__label {
	font-size: 16px !important;
	color: #222 !important;
	text-transform: none !important;
	cursor: pointer;
	line-height: 1.4;
}
.map-page .dropdown-div-onclick-more .mdl-checkbox__focus-helper,
.map-page .dropdown-div-onclick-more .mdl-checkbox__ripple-container {
	display: none !important;
}

/* --- Property type checkboxes (Stanovi, Kuće) --- */
.map-page .dropdown-div-onclick-more #property-house-or-apartment .more-right-block {
	display: block !important;
	max-width: 100% !important;
	width: 100% !important;
}
.map-page .dropdown-div-onclick-more #property-house-or-apartment .menu-items-container {
	padding: 0 !important;
}
.map-page .dropdown-div-onclick-more #property-house-or-apartment ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.map-page .dropdown-div-onclick-more #property-house-or-apartment .listing-type-text {
	font-size: 16px;
	text-transform: none !important;
}

/* --- Amenities list --- */
.map-page .dropdown-div-onclick-more .more-options {
	padding: 0 !important;
	padding-top: 16px !important;
	margin: 0 !important;
	margin-top: 8px !important;
	list-style: none;
	border-top: 1px solid #ebebeb;
}
.map-page .dropdown-div-onclick-more .more-options > li {
	border-top: none;
	padding: 0;
}
.map-page .dropdown-div-onclick-more .more-options .more-block-line {
	margin: 0 !important;
	padding: 0 !important;
	border-top: none;
}

/* --- Sticky footer CTA button --- */
.filter-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 12px 20px;
	background: #fff;
	border-top: 1px solid #ebebeb;
	z-index: 10001;
	box-sizing: border-box;
}
.filter-footer-btn {
	width: 100%;
	height: 48px;
	background: #222;
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.filter-footer-btn:active {
	background: #000;
}

/* --- Misc --- */
.ui-autocomplete {
	max-width: 240px;
	max-height: 200px;
}

} /* end @media (max-width: 768px) */