/* Custom select list styles */
.custom-select-list { padding: 6px 0; }
.custom-select-list li { transition: background-color 120ms ease, color 120ms ease; padding-left: 1rem; padding-right: 1rem; }
.custom-select-list li + li { border-top: 1px solid rgba(15, 23, 42, 0.04); }
.custom-select-list li:hover { background-color: #0ea5a4; color: white; }
.custom-select-list li[aria-selected="true"] { background-color: #0ea5a4; color: white; }
.custom-select-list li:focus { outline: none; background-color: rgba(14,165,164,0.08); }

/* scrollbar */
.custom-select-list::-webkit-scrollbar { width: 10px; }
.custom-select-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 6px; }
/* Firefox */
.custom-select-list { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.08) transparent; }

.custom-select-wrapper .hidden { display: none; }

/* Improve native selects with appearance-none and themed caret using background-image */
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7280' stroke-width='1.5'><path d='M6 8l4 4 4-4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1rem 1rem;
	padding-right: 2.5rem; /* default room for the caret */
}

/* Ensure phone country select has extra room for longer codes like +966 */
select[name="phone_country"] {
	padding-right: 3.5rem !important;
	background-position: right 1.25rem center !important;
}

/* Richer dropdown appearance for custom listbox */
.custom-select-list {
	padding: 6px 0;
	border-radius: 0.5rem;
	box-shadow: 0 10px 30px rgba(2,6,23,0.08), 0 2px 6px rgba(2,6,23,0.04);
	transform-origin: top center;
	opacity: 0;
	transform: translateY(-6px) scale(0.99);
	transition: opacity 140ms ease, transform 140ms ease;
}

.custom-select-list:not(.hidden) {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.custom-select-list li {
	padding: 10px 14px;
	font-size: 0.95rem;
	color: #0f172a; /* slate-900 */
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.custom-select-list li .option-meta { font-size: 0.85rem; color: #6b7280; margin-left: 8px; }

.custom-select-list li:hover { background-color: #0ea5a4; color: white; }
.custom-select-list li[aria-selected="true"] { background-color: #0ea5a4; color: white; font-weight: 600; }

.custom-select-list li + li { border-top: 1px solid rgba(15,23,42,0.03); }

/* subtle focus ring on keyboard nav */
.custom-select-list li:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(14,165,164,0.06); }

/* make the list's scrollbar subtle */
.custom-select-list::-webkit-scrollbar { width: 9px; }
.custom-select-list::-webkit-scrollbar-thumb { background: rgba(2,6,23,0.06); border-radius: 6px; }


select:focus {
	box-shadow: 0 0 0 4px rgba(14,165,164,0.08);
	border-color: rgba(14,165,164,0.6);
}

/* On hover give a subtle border accent */
select:hover {
	border-color: rgba(15, 23, 42, 0.08);
}

/* Hide native increment/decrement controls for number inputs (Chrome, Edge, Safari) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Optional: if you want to target only specific fields, add a class like .no-spinner on the input and use input.no-spinner[type="number"] */