/**
 * Form — inputs, labels, selects, textareas.
 *
 * Error states use orange (--slist-error) to avoid clash with red primary.
 * Errors communicated through icon + container + text pattern.
 */

.slist-field {
	display: block;
	margin-bottom: var(--slist-space-4);
}

.slist-label {
	display: block;
	font-family: var(--slist-font-body);
	font-size: 12px;
	font-weight: var(--slist-weight-medium);
	color: var(--slist-text-secondary);
	margin-bottom: 6px;
}

/*
 * body.slist-body scoping wins specificity over GP's default form styles.
 */
body.slist-body .slist-input,
body.slist-body .slist-textarea,
body.slist-body .slist-select,
body.slist-body input[type="text"],
body.slist-body input[type="email"],
body.slist-body input[type="password"],
body.slist-body input[type="tel"],
body.slist-body input[type="url"],
body.slist-body input[type="number"],
body.slist-body input[type="search"],
input[type="date"],
textarea,
select {
	display: block;
	width: 100%;
	padding: 12px 16px;
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-body);
	line-height: 1.4;
	color: var(--slist-text-primary);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--slist-separator-medium);
	border-radius: var(--slist-radius-md); /* 10px */
	transition:
		background var(--slist-transition-fast),
		border-color var(--slist-transition-fast),
		box-shadow var(--slist-transition-fast);
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
}

.slist-textarea,
textarea {
	min-height: 8rem;
	resize: vertical;
	line-height: 1.5;
}

.slist-input:hover,
.slist-textarea:hover,
.slist-select:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
textarea:hover,
select:hover {
	border-color: var(--slist-separator-strong);
}

.slist-input:focus,
.slist-textarea:focus,
.slist-select:focus,
input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--slist-primary);
	box-shadow: var(--slist-focus-ring);
}

.slist-input::placeholder,
.slist-textarea::placeholder,
textarea::placeholder,
input::placeholder {
	color: var(--slist-text-tertiary);
}

/* Select — custom caret */
.slist-select,
select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23ffffff99' d='M6 8L0 0h12z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 48px;
}

/* Checkbox + radio */
input[type="checkbox"],
input[type="radio"] {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: var(--slist-space-2);
	vertical-align: middle;
	accent-color: var(--slist-primary);
}

/* ---- Error states — orange, not red ---- */

.slist-input.has-error,
.slist-textarea.has-error,
.slist-select.has-error,
input.has-error,
textarea.has-error,
select.has-error {
	border-color: var(--slist-error);
	box-shadow: var(--slist-error-ring);
}

.slist-field__error {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--slist-error);
	margin-top: 6px;
}

.slist-field__help {
	display: block;
	font-size: var(--slist-text-caption);
	color: var(--slist-text-secondary);
	margin-top: 6px;
}

/* Search bar component */
.slist-search {
	display: flex;
	gap: var(--slist-space-2);
	max-width: 480px;
	margin: 0 auto;
}

.slist-search__input {
	flex: 1;
}

/* ================================================================
   GP override catch-all
   ================================================================ */

body.slist-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not(.tribe-tickets__tickets-item-quantity-number-input):not(.tribe-tickets__tickets-footer-quantity-number),
body.slist-body textarea,
body.slist-body select {
	background: rgba(255, 255, 255, 0.06) !important;
	color: var(--slist-text-primary) !important;
	border-color: var(--slist-separator-medium) !important;
}

body.slist-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not(.tribe-tickets__tickets-item-quantity-number-input):not(.tribe-tickets__tickets-footer-quantity-number):focus,
body.slist-body textarea:focus,
body.slist-body select:focus {
	border-color: var(--slist-primary) !important;
	box-shadow: var(--slist-focus-ring) !important;
}

body.slist-body input::placeholder,
body.slist-body textarea::placeholder {
	color: var(--slist-text-tertiary) !important;
}

/* WC ordering dropdown */
body.slist-body .woocommerce-ordering select,
body.slist-body .orderby {
	background: rgba(255, 255, 255, 0.06) !important;
	color: var(--slist-text-primary) !important;
	border: 1px solid var(--slist-separator-medium) !important;
	border-radius: var(--slist-radius-md) !important;
	padding: 8px 16px !important;
	font-family: var(--slist-font-body) !important;
	font-size: var(--slist-text-callout) !important;
}