/**
 * ONE house UI for form controls on every WP-rendered frontend surface
 * (agent/agency portals, add/edit listing, agency onboarding, verification
 * center, buyer pages, lead/report forms). Canonical look = the public
 * search-filter trigger: 40px, 13px/500 #1f2933, 10px radius, #e8ddd4
 * border, thin chevron, orange focus. RTL-safe (logical properties).
 */

/* --- Selects (single) — bootstrap-select originals excluded (hidden). --- */
select:not([multiple]):not(.selectpicker):not(.bs-select-hidden) {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	box-sizing: border-box;
	height: 40px;
	min-height: 40px;
	padding: 0 2.25rem 0 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: #1f2933;
	background-color: #fff;
	border: 1px solid #e8ddd4;
	border-radius: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2364748b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 14px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
select:not([multiple]):not(.selectpicker):not(.bs-select-hidden):focus {
	border-color: var(--diyarlist-primary, #F16B08);
	outline: none;
	box-shadow: none;
}
[dir="rtl"] select:not([multiple]):not(.selectpicker):not(.bs-select-hidden) {
	background-position: left 0.75rem center;
	padding: 0 12px 0 2.25rem;
}

/* --- Phone country-code (flag + code select adorning a tel/phone input) --- */
.dl-phone-field {
	display: flex;
	gap: 8px;
	align-items: center;
}
/* Sizing lives on the bootstrap-select WRAPPER/BUTTON only — never on the
   raw <select>: bootstrap-select hides the original visually but it stays in
   the DOM, and giving IT min-width kept a ~108px invisible clickable strip
   in the gap next to the pill (the phantom hit). The raw select is hard-
   removed from layout and hit-testing once converted. */
.dl-phone-field .bootstrap-select.dl-phone-code {
	flex: 0 0 auto;
	width: auto !important;
}
.bootstrap-select > select.selectpicker,
.dl-phone-field .bootstrap-select > select.dl-phone-code {
	display: none !important;
	width: 0 !important;
	min-width: 0 !important;
	max-width: 0 !important;
	position: absolute !important;
	pointer-events: none !important;
}
/* Pre-conversion flash only (before initPickers runs). */
.dl-phone-field > select.dl-phone-code {
	flex: 0 0 auto;
	width: auto;
	min-width: 108px;
}
.dl-phone-field input {
	flex: 1 1 auto;
	min-width: 0;
}

/* --- Date inputs / flatpickr theme (brand accents) --- */
input[type="date"],
input.dl-datepicker {
	box-sizing: border-box;
	height: 40px;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 500;
	color: #1f2933;
	background-color: #fff;
	border: 1px solid #e8ddd4;
	border-radius: 10px;
}
input[type="date"]:focus,
input.dl-datepicker:focus {
	border-color: var(--diyarlist-primary, #F16B08);
	outline: none;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
	background: var(--diyarlist-primary, #F16B08);
	border-color: var(--diyarlist-primary, #F16B08);
}
.flatpickr-day.today {
	border-color: var(--diyarlist-primary, #F16B08);
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
	color: #1f2933;
}

/* --- bootstrap-select (styled OPEN list) — GLOBAL, every WP surface. Button and
   menu themed to the canonical search dropdown (.dl-select-menu/.dl-select-
   option on the public site). --- */
.bootstrap-select {
	min-width: 0;
}
/* full width inside form groups; natural width for compact contexts */
.form-group .bootstrap-select,
.dl-portal-field .bootstrap-select,
p > .bootstrap-select {
	width: 100% !important;
}
.dl-phone-field .bootstrap-select {
	width: auto !important;
	flex: 0 0 auto;
}
.bootstrap-select > .dropdown-toggle {
	box-sizing: border-box;
	height: 40px;
	min-height: 40px;
	padding: 0 2.25rem 0 12px;
	display: flex;
	align-items: center;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: #1f2933;
	background-color: #fff !important;
	border: 1px solid #e8ddd4;
	border-radius: 10px;
	box-shadow: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2364748b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 14px;
	outline: none !important;
}
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle {
	border-color: var(--diyarlist-primary, #F16B08);
}
.bootstrap-select > .dropdown-toggle::after,
.bootstrap-select > .dropdown-toggle::after,
.bootstrap-select .bs-caret {
	display: none; /* the svg chevron above replaces the default caret */
}
[dir="rtl"] .bootstrap-select > .dropdown-toggle,
[dir="rtl"] .bootstrap-select > .dropdown-toggle {
	background-position: left 0.75rem center;
	padding: 0 12px 0 2.25rem;
}
/* the OPEN list — values COPIED from the frontend FilterDropdown's computed
   styles (.dl-select-menu / .dl-select-option, measured live): menu padding
   6px, radius 10px, border #e8ddd4, shadow 0 6px 24px rgba(31,41,51,.07),
   max-height 360px; rows 9px/12px padding, 14px/21px type, 39px tall, hover
   #fff0e3, selected #e56a00 600. !important where the Houzez theme wins
   (its .dropdown-item line-height:42px and 15px .text made rows 61px). */
.bootstrap-select .dropdown-menu {
	margin-top: 4px;
	padding: 6px;
	background: #fff;
	border: 1px solid #e8ddd4;
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(31, 41, 51, 0.07);
	max-height: 360px !important;
}
.bootstrap-select .dropdown-menu .inner {
	max-height: 346px !important;
}
.bootstrap-select .dropdown-menu li .dropdown-item {
	padding: 9px 12px !important;
	border-radius: 8px;
	font-size: 14px !important;
	line-height: 21px !important;
	color: #1f2933;
	background: transparent;
}
.bootstrap-select .dropdown-menu li .dropdown-item .text {
	font-size: 14px !important;
	line-height: 21px !important;
	display: inline;
}
.bootstrap-select .dropdown-menu li .dropdown-item:hover,
.bootstrap-select .dropdown-menu li .dropdown-item.active,
.bootstrap-select .dropdown-menu li .dropdown-item:focus,
.bootstrap-select .dropdown-menu li .dropdown-item:hover,
.bootstrap-select .dropdown-menu li .dropdown-item.active,
.bootstrap-select .dropdown-menu li .dropdown-item:focus {
	background: #fff0e3;
	color: #1f2933;
}
.bootstrap-select .dropdown-menu li.selected .dropdown-item,
.bootstrap-select .dropdown-menu li.selected .dropdown-item .text {
	color: #e56a00; /* frontend --dl-orange-dark, measured */
	font-weight: 600;
	background: #fff0e3;
}


/* required-but-empty picker (native constraint can't surface on a hidden select) */
.bootstrap-select > .dropdown-toggle.dl-picker-invalid {
	border-color: #b91c1c !important;
	box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15) !important;
}

/* --- flatpickr header: month dropdown + EDITABLE YEAR input, unclipped ---
   (the standard flatpickr header; year is critical for permit/license
   expiries 1+ years out). Sunday-first is flatpickr's default locale. */
.flatpickr-calendar {
	overflow: visible !important;
	z-index: 100000 !important;
}
.flatpickr-months,
.flatpickr-current-month {
	overflow: visible !important;
}
/* ONE clean header row: ‹ [Month ⌄] [Year] › — month dropdown and year input
   are IDENTICAL 30px boxes (same border, radius, font, vertical centre).
   !important beats the global 40px house-select rule, whose higher
   specificity was inflating the month box to 40px inside a 34px header
   (mismatched heights + clipped look). */
.flatpickr-months {
	display: flex;
	align-items: center;
	height: 40px;
}
/* Stock flatpickr gives this MIDDLE wrapper height:34px + overflow:hidden —
   flush against the 30px header boxes' bottom edge, trimming their bottom
   border. Give it the full row and let edges breathe. */
.flatpickr-calendar .flatpickr-month {
	height: 40px !important;
	overflow: visible !important;
	display: flex;
	align-items: center;
}
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
	height: 40px !important;
	display: flex;
	align-items: center;
	padding: 0 10px;
	position: static;
}
.flatpickr-current-month {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 !important;
	height: 40px;
	position: static !important;
	width: auto !important;
	flex: 1 1 auto;
}
.flatpickr-calendar select.flatpickr-monthDropdown-months {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	height: 30px !important;
	min-height: 30px !important;
	max-height: 30px !important;
	margin: 0 !important;
	padding: 0 24px 0 10px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #1f2933 !important;
	border: 1px solid #e8ddd4 !important;
	border-radius: 8px !important;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2364748b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 7px center;
	background-size: 12px;
	max-width: 9.5rem;
}
.flatpickr-calendar .numInputWrapper {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 30px;
	width: 4.8rem;
}
.flatpickr-calendar .numInputWrapper input.cur-year {
	box-sizing: border-box;
	height: 30px !important;
	min-height: 30px !important;
	margin: 0 !important;
	padding: 0 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #1f2933 !important;
	border: 1px solid #e8ddd4 !important;
	border-radius: 8px !important;
	background: #fff !important;
}
.flatpickr-calendar .numInputWrapper .arrowUp,
.flatpickr-calendar .numInputWrapper .arrowDown {
	right: 1px;
}

/* Country-code picker: hit area == visible bounds; menu content-sized, above
   everything, scrolling inside — no phantom zones. */
.dl-phone-field .bootstrap-select {
	position: relative;
}
.dl-phone-field .bootstrap-select > .dropdown-toggle {
	width: auto;
	min-width: 108px;
	max-width: 140px;
}
.dl-phone-field .bootstrap-select .dropdown-menu {
	width: max-content !important;
	min-width: 100% !important;
	max-width: 260px !important;
	z-index: 100001;
}

/* Deterministic open state for ALL house pickers (no Bootstrap-dropdown JS
   dependency): the outer menu shows iff .show, anchored under the button. */
.bootstrap-select {
	position: relative;
}
.bootstrap-select > .dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
}
.bootstrap-select > .dropdown-menu.show {
	display: block !important;
}
[dir="rtl"] .bootstrap-select > .dropdown-menu {
	left: auto;
	right: 0;
}

/* country name subtext in the phone-code menu rows */
.dl-phone-field .bootstrap-select .dropdown-item .text-muted {
	font-size: 12px;
	color: #94a3b8 !important;
	margin-inline-start: 6px;
}

/* live-search box in picker menus — brand-matched, compact */
.bootstrap-select .bs-searchbox {
	padding: 2px 2px 8px;
}
.bootstrap-select .bs-searchbox input.form-control {
	box-sizing: border-box;
	height: 32px;
	padding: 0 10px;
	font-size: 13px;
	color: #1f2933;
	border: 1px solid #e8ddd4;
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
}
.bootstrap-select .bs-searchbox input.form-control:focus {
	border-color: var(--diyarlist-primary, #F16B08);
	outline: none;
}