/**
 * UI polish — search dropdowns, the "№ Оферта" field, and back-to-top.
 *
 * Loaded last so it wins without !important. Colours are the site's own:
 * accent #3BBD2D (the "Виж повече" green), text #404040, Montserrat.
 *
 * Deliberately conservative: these controls had no affordance at all — the
 * selectr boxes rendered as bare text with a small caret, and the offer-number
 * field was an unstyled native input with the browser's 2px inset border.
 */

/* ---------- Search dropdowns (selectr) ---------- */

.selectr-container {
	font-family: 'Montserrat', sans-serif;
}

.selectr-container .selectr-selected,
.fields-container .selectr-selected {
	border: 1px solid #dcdcdc;
	border-radius: 3px;
	padding: 10px 32px 10px 12px;
	background: #fff;
	color: #404040;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.selectr-container:hover .selectr-selected,
.fields-container .selectr-container:hover .selectr-selected {
	border-color: #b4b4b4;
}

.selectr-container.open .selectr-selected,
.selectr-container.notice .selectr-selected,
.selectr-selected:focus {
	border-color: #3bbd2d;
	box-shadow: 0 0 0 3px rgba(59, 189, 45, .12);
	outline: none;
}

/* the caret: a little larger, and it turns with the menu */
.selectr-container .selectr-selected::before,
.fields-container .selectr-selected::before {
	border-width: 5px 4px 0 4px;
	border-top-color: #9a9a9a;
	right: 12px;
	transition: transform .18s ease, border-top-color .18s ease;
}

.selectr-container:hover .selectr-selected::before,
.fields-container .selectr-container:hover .selectr-selected::before {
	border-top-color: #404040;
}

.selectr-container.open .selectr-selected::before,
.fields-container .selectr-container.open .selectr-selected::before {
	border-top-color: #3bbd2d;
}

/* the menu itself reads as a surface rather than a bare list */
.selectr-container .selectr-options-container,
.fields-container .selectr-options-container {
	border: 1px solid #e4e4e4;
	border-radius: 4px;
	/* was a hard black halo: 0 0 3px rgb(0,0,0) */
	box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
	overflow: hidden;
}

.selectr-options {
	padding: 4px 0;
}

/* The existing 15px/30px option padding is deliberate (comfortable hit areas),
   so it is left alone — only the hover and selected states are added. */
.selectr-options .selectr-option {
	transition: background-color .12s ease, color .12s ease;
}

.fields-container .selectr-options-container .selectr-option.active,
.fields-container .selectr-options-container .selectr-option:hover,
.selectr-option.active,
.selectr-option:hover {
	background-color: #f2f8f1;
	color: #2f2f2f;
}

.fields-container .selectr-options-container .selectr-option.selected,
.selectr-option.selected {
	background-color: #eaf5e8;
	color: #2c8a22;
	font-weight: 500;
}

.selectr-input {
	border: 1px solid #dcdcdc;
	border-radius: 3px;
	padding: 7px 10px;
	font-family: 'Montserrat', sans-serif;
}

.selectr-input:focus {
	border-color: #3bbd2d;
	outline: none;
}

/* multi-select tags, used by the Райони picker */
.selectr-tag {
	background-color: #eaf5e8;
	border: 1px solid #cfe7cb;
	border-radius: 3px;
	color: #2c8a22;
	padding: 2px 6px;
}

/* ---------- Price and area fields ---------- */

/* custom.css styles these as `.fields-container #cena input` (1,1,1), which
   outweighs a bare #id (1,0,0) — so match that shape and win on order. */
.fields-container #cena input,
.fields-container #plosht input,
#cena-ot,
#cena-do,
#plosht-ot,
#plosht-do {
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	color: #404040;
	border: 1px solid #dcdcdc;
	border-radius: 3px;
	background: #fff;
	padding: 10px 12px;
	width: 100%;
	transition: border-color .18s ease, box-shadow .18s ease;
	/* the native spinners were showing on "Цена мин." */
	-moz-appearance: textfield;
	appearance: textfield;
}

#cena-ot::-webkit-outer-spin-button, #cena-ot::-webkit-inner-spin-button,
#cena-do::-webkit-outer-spin-button, #cena-do::-webkit-inner-spin-button,
#plosht-ot::-webkit-outer-spin-button, #plosht-ot::-webkit-inner-spin-button,
#plosht-do::-webkit-outer-spin-button, #plosht-do::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.fields-container #cena input::placeholder,
.fields-container #plosht input::placeholder,
#cena-ot::placeholder, #cena-do::placeholder,
#plosht-ot::placeholder, #plosht-do::placeholder {
	color: #9a9a9a;
}

.fields-container #cena input:hover,
.fields-container #plosht input:hover,
#cena-ot:hover, #cena-do:hover,
#plosht-ot:hover, #plosht-do:hover {
	border-color: #b4b4b4;
}

.fields-container #cena input:focus,
.fields-container #plosht input:focus,
#cena-ot:focus, #cena-do:focus,
#plosht-ot:focus, #plosht-do:focus {
	border-color: #3bbd2d;
	box-shadow: 0 0 0 3px rgba(59, 189, 45, .12);
	outline: none;
}

/* ---------- "№ Оферта" field in the header ---------- */

/* Intentionally NOT restyled. Its original look comes from Oxygen code block
   #1 of template 99756, now restored as oxygen-code/offer-id-search.css
   (border:none, max-width 100px, height 30px, Montserrat). An earlier pass here
   gave it a full border, which overrode that and changed the header. Only the
   pointer affordance on the magnifier is kept — the icon has always been
   clickable and never said so. */

.srch-glass-icon {
	cursor: pointer;
}

/* ---------- Back to top ---------- */

#link-62-6.scroll-top-btn {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background-color: rgba(38, 38, 38, .55);
	box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(2px);
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

#link-62-6.scroll-top-btn:hover {
	background-color: #3bbd2d;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .24);
}

#link-62-6.scroll-top-btn svg {
	width: 16px;
	height: 16px;
	fill: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.selectr-selected,
	.selectr-selected::before,
	.selectr-option,
	.srch-property-id input[type="number"],
	#link-62-6.scroll-top-btn {
		transition: none;
	}
}

/* ---------- Hero slider: sale / rent badge ---------- */

/* The hero is driven by the synced `property_top` flag, so it mixes Продава and
   Отдава под наем. Without a label the two are indistinguishable at a glance. */
.hp-slide-listing-type {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 8px;
	padding: 3px 10px;
	border-radius: 3px;
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.5;
	color: #fff;
	background-color: #a7a9ad;
}