/* AskHole — Pro register/profile field polish (v0.76.4 → v0.76.8).
   Brings the service-radius dropdown and the location input in line with the AskHole control
   style (50px, 12px radius, #dcdce4 border, #783FF2 focus — matching the post-form fields and
   the shared picker), and removes the select2 "clear" (×) that UM shows on the optional radius
   field. Scoped by data-key so UM's other fields are untouched. */

/* Location text input + radius NATIVE <select> → the canonical control look. */
.um-field[data-key="askhole_pro_location"] input[type="text"],
.um-field[data-key="askhole_pro_radius_km"] select {
	width: 100%;
	height: 50px;
	padding: 0 14px;
	border: 1.5px solid #dcdce4;
	border-radius: 12px;
	background: #fff;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 16px;
	color: #0D1117;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
.um-field[data-key="askhole_pro_location"] input[type="text"]:focus,
.um-field[data-key="askhole_pro_radius_km"] select:focus {
	outline: none;
	border-color: #783FF2;
	box-shadow: 0 0 0 3px rgba(120, 63, 242, .12);
}

/* Custom caret for the native select (appearance:none dropped the default chevron).
   v0.76.6: the theme (Astra) styles <select> backgrounds with its own !important rules, which
   were beating our caret and leaving the field with no arrow at all. Scope up through `.um`
   (specificity 0,3,1) AND flag !important so our chevron actually paints. background-color kept
   here too because the earlier `background:#fff` shorthand resets background-image. */
.um .um-field[data-key="askhole_pro_radius_km"] select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a6f7b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 16px 16px !important;
	padding-right: 40px !important;
}

/* If the field is still an ENHANCED (select2) dropdown: match the control height/border and
   remove the clear "×" that select2 shows for an optional field. */
.um-field[data-key="askhole_pro_radius_km"] .select2-container { width: 100% !important; }
.um-field[data-key="askhole_pro_radius_km"] .select2-container--default .select2-selection--single {
	height: 50px;
	border: 1.5px solid #dcdce4;
	border-radius: 12px;
	background: #fff;
	display: flex;
	align-items: center;
}
.um-field[data-key="askhole_pro_radius_km"] .select2-selection--single .select2-selection__rendered {
	line-height: normal;
	color: #0D1117;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 16px;
	padding-left: 14px;
	padding-right: 34px;
}
.um-field[data-key="askhole_pro_radius_km"] .select2-selection--single .select2-selection__arrow {
	height: 48px;
	right: 8px;
}
/* Kill the clearable "×" on the optional radius field. */
.um-field[data-key="askhole_pro_radius_km"] .select2-selection__clear {
	display: none !important;
}

/* NOTE (v0.76.6): the JS (nativeRadiusField) destroys select2 on this field at boot, so it
   renders as the native <select> — that is the real consistency fix. A CSS "fallback" to hide
   select2's inner search box was removed: select2 appends its dropdown PANEL to <body>, not
   inside .um-field, so a data-key-scoped rule can never match it. If select2 ever needs to be
   suppressed defensively, do it in JS (a MutationObserver), not here. */

/* v0.76.8 — the Pro service-area fields injected into the UM Account page (pro-account.php).
   The location input + radius select already inherit the control styling above (same data-keys);
   these rules just space the injected section and style its heading + the "works anywhere" row. */
.ah-account-section {
	margin-top: 8px;
}
.ah-account-section-title {
	margin: 26px 0 14px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #0D1117;
}
.ah-pro-remote-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 15px;
	color: #0D1117;
	cursor: pointer;
}
.ah-pro-remote-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #783FF2;
}