/* CSS-styled select dropdown — replaces the native control with a custom widget
   built by assets/js/styled-select.js. Original <select> stays in the DOM (hidden)
   so form serialisation and accessibility (label association, validation) keep working.
   Required by WP.md ("use css styled select box not an inline select"). */

.tq-form .styled-select { position: relative; }
.tq-form .styled-select select.original { display: none; }

.tq-form .ts-control {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 20px; cursor: pointer;
	border: 0;
	background: #ffffff; color: #1D1F27;
	border-radius: 0;
	transition: box-shadow .2s;
	user-select: none;
}
.tq-form .ts-control[aria-expanded="true"] {
	box-shadow: 0 0 0 2px var(--color-accent, #14D5AA);
}
.tq-form .ts-control .ts-value { flex: 1; }
.tq-form .ts-control.is-placeholder .ts-value { color: rgba(29, 31, 39, .45); }
.tq-form .ts-control .ts-arrow {
	width: 0; height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #1D1F27;
	margin-left: 8px;
	transition: transform .2s;
}
.tq-form .ts-control[aria-expanded="true"] .ts-arrow { transform: rotate(180deg); }

.tq-form .ts-dropdown {
	position: absolute; left: 0; right: 0; top: calc(100% + 4px);
	background: #fff;
	color: #1D1F27;
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0,0,0,.18);
	max-height: 280px;
	overflow-y: auto;
	z-index: 30;
	display: none;
}
.tq-form .ts-dropdown.is-open { display: block; }
.tq-form .ts-option {
	padding: 12px 16px; cursor: pointer; font-size: 14px;
}
.tq-form .ts-option:hover, .tq-form .ts-option.is-active { background: rgba(1,169,130,.1); color: #01A982; }
.tq-form .ts-option.is-selected { color: #01A982; font-weight: 600; }
.tq-form .ts-search {
	padding: 10px 12px; border-bottom: 1px solid #ececec;
	position: sticky; top: 0; background: #fff;
}
.tq-form .ts-search input {
	width: 100%; padding: 8px 10px; border: 1px solid #e0e0e0; border-radius: 4px;
	font: inherit; color: #1D1F27;
}