/* ==================================================================
   06 - FORMS
   Inputs, labels, selects, checkboxes, notices.

   Covers: the review form, the sorting dropdown, search, and every
   WooCommerce checkout and account field. WooCommerce generates a
   lot of markup we do not template, so the overrides at the bottom
   inherit from the same base rather than restating it.
   ================================================================== */


/* ------------------------------------------------------------------
   FIELD WRAPPER
   ------------------------------------------------------------------ */

.wo-field {
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-2);
	margin-bottom: var(--wo-space-5);
}

.wo-field--inline {
	flex-direction: row;
	align-items: center;
	gap: var(--wo-space-3);
}


/* ------------------------------------------------------------------
   LABEL
   ------------------------------------------------------------------ */

.wo-label,
.wo-field label,
.woocommerce form .form-row label {
	display: block;
	font-family: var(--wo-font-body);
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-medium);
	line-height: 1.3;
	color: var(--wo-text);
	margin-bottom: var(--wo-space-2);
}

/* Required marker */
.wo-label .required,
.woocommerce form .form-row .required,
abbr.required {
	color: var(--wo-error);
	text-decoration: none;
	border: none;
	margin-left: 2px;
}

.wo-label__hint {
	display: block;
	margin-top: var(--wo-space-1);
	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-normal);
	color: var(--wo-text-dim);
}


/* ------------------------------------------------------------------
   TEXT INPUTS
   One selector list, applied everywhere.
   ------------------------------------------------------------------ */

.wo-input,
.wo-textarea,
input[type='text'],
input[type='email'],
input[type='url'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='tel'],
input[type='date'],
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	width: 100%;
	padding: 0.8125rem var(--wo-space-5);
	min-height: 48px;

	font-family: var(--wo-font-body);
	font-size: var(--wo-text-base);
	line-height: 1.4;
	color: var(--wo-text);

	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-md);

	transition:
		border-color var(--wo-transition),
		background var(--wo-transition),
		box-shadow var(--wo-transition);

	-webkit-appearance: none;
	appearance: none;
}

/* Textareas are rounded less and taller - matches the review box. */
.wo-textarea,
textarea,
.woocommerce form .form-row textarea {
	min-height: 130px;
	padding-top: var(--wo-space-4);
	border-radius: var(--wo-radius);
	resize: vertical;
	line-height: var(--wo-leading-normal);
}

/* Placeholder */
::placeholder {
	color: var(--wo-text-dim);
	opacity: 1;
}

/* Hover */
.wo-input:hover,
.wo-textarea:hover,
input[type='text']:hover,
input[type='email']:hover,
input[type='search']:hover,
input[type='tel']:hover,
textarea:hover {
	border-color: var(--wo-line-strong);
	background: rgba(255, 255, 255, 0.07);
}

/* Focus */
.wo-input:focus,
.wo-textarea:focus,
input[type='text']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='number']:focus,
input[type='tel']:focus,
input[type='date']:focus,
textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	outline: none;
	border-color: var(--wo-primary);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 3px var(--wo-primary-soft);
}

/* Disabled / readonly */
.wo-input:disabled,
input:disabled,
textarea:disabled,
input[readonly] {
	opacity: 0.55;
	cursor: not-allowed;
	background: rgba(255, 255, 255, 0.03);
}

/* Chrome autofill repaints the field white - force it back.
   !important is required: without it Chrome's UA stylesheet wins
   and fields flash white (checkout/auth already use the stronger
   form of this rule). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
	-webkit-text-fill-color: var(--wo-text) !important;
	-webkit-box-shadow: 0 0 0 1000px #241A4D inset !important;
	box-shadow: 0 0 0 1000px #241A4D inset !important;
	caret-color: var(--wo-text) !important;
	border-color: var(--wo-line) !important;
	transition: background-color 100000s ease-in-out 0s !important;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
	border-color: var(--wo-primary) !important;
	box-shadow:
		0 0 0 1000px #241A4D inset,
		0 0 0 3px var(--wo-primary-soft) !important;
}


/* ------------------------------------------------------------------
   SELECT
   Native chevron removed, replaced with an inline SVG so the arrow
   colour matches the theme. Pill shaped - the sorting dropdown.
   ------------------------------------------------------------------ */

.wo-select,
select,
.woocommerce-ordering select,
.woocommerce form .form-row select {
	width: 100%;
	padding: 0.75rem var(--wo-space-10) 0.75rem var(--wo-space-5);
	min-height: 44px;

	font-family: var(--wo-font-body);
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-medium);
	color: var(--wo-text);

	background-color: rgba(255, 255, 255, 0.05);
	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' stroke='%23C3BADF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--wo-space-5) center;
	background-size: 14px;

	border: 1px solid var(--wo-line-strong);
	border-radius: var(--wo-radius-pill);
	cursor: pointer;

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: border-color var(--wo-transition), background-color var(--wo-transition);
}

.wo-select:hover,
select:hover {
	border-color: var(--wo-primary-line);
	background-color: rgba(255, 255, 255, 0.08);
}

.wo-select:focus,
select:focus {
	outline: none;
	border-color: var(--wo-primary);
	box-shadow: 0 0 0 3px var(--wo-primary-soft);
}

/* The dropdown list itself is OS-rendered - dark values keep it readable. */
.wo-select option,
select option {
	color: #fff;
	background: #241A4D;
}

.wo-select--auto {
	width: auto;
	min-width: 190px;
}


/* ------------------------------------------------------------------
   CHECKBOX & RADIO
   ------------------------------------------------------------------ */

.wo-check {
	display: flex;
	align-items: flex-start;
	gap: var(--wo-space-3);
	cursor: pointer;
	font-size: var(--wo-text-sm);
	color: var(--wo-text-muted);
	line-height: 1.45;
}

.wo-check input[type='checkbox'],
.wo-check input[type='radio'],
input[type='checkbox'],
input[type='radio'] {
	flex-shrink: 0;
	width: 19px;
	height: 19px;
	margin: 1px 0 0;

	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--wo-line-strong);
	border-radius: var(--wo-radius-xs);

	cursor: pointer;
	transition: background var(--wo-transition), border-color var(--wo-transition);

	-webkit-appearance: none;
	appearance: none;
	display: grid;
	place-content: center;
}

input[type='radio'] {
	border-radius: var(--wo-radius-circle);
}

input[type='checkbox']:hover,
input[type='radio']:hover {
	border-color: var(--wo-primary-line);
}

input[type='checkbox']:checked,
input[type='radio']:checked {
	background: var(--wo-primary);
	border-color: var(--wo-primary);
}

input[type='checkbox']:checked::before {
	content: '';
	width: 10px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translate(1px, -1px);
}

input[type='radio']:checked::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: var(--wo-radius-circle);
	background: #fff;
}

input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible {
	outline: none;
	box-shadow: var(--wo-ring);
}


/* ------------------------------------------------------------------
   SEARCH
   ------------------------------------------------------------------ */

.wo-search {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.wo-search__input {
	padding-left: var(--wo-space-12);
	border-radius: var(--wo-radius-pill);
}

.wo-search__icon {
	position: absolute;
	left: var(--wo-space-5);
	width: 18px;
	height: 18px;
	color: var(--wo-text-dim);
	pointer-events: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.wo-search__submit {
	position: absolute;
	right: var(--wo-space-2);
}

/* Remove the native clear "x" in WebKit. */
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button {
	-webkit-appearance: none;
}


/* ------------------------------------------------------------------
   FORM LAYOUT
   Two-up rows collapse to one column automatically.
   ------------------------------------------------------------------ */

.wo-form {
	width: 100%;
}

.wo-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 0 var(--wo-gap);
}

.wo-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wo-space-3);
	align-items: center;
	margin-top: var(--wo-space-6);
}


/* ------------------------------------------------------------------
   VALIDATION
   ------------------------------------------------------------------ */

.wo-field--error .wo-input,
.wo-field--error .wo-textarea,
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--wo-error);
	background: rgba(255, 107, 107, 0.06);
}

.wo-field__error {
	display: flex;
	align-items: center;
	gap: var(--wo-space-2);
	font-size: var(--wo-text-xs);
	color: var(--wo-error);
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: rgba(74, 222, 128, 0.45);
}


/* ------------------------------------------------------------------
   NOTICES
   WooCommerce messages, errors and info banners.
   ------------------------------------------------------------------ */

.wo-notice,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wo-space-3);

	padding: var(--wo-space-4) var(--wo-space-6);
	margin-bottom: var(--wo-space-6);

	font-size: var(--wo-text-sm);
	color: var(--wo-text);
	list-style: none;

	background: var(--wo-surface);
	border: 1px solid var(--wo-line);
	border-left: 3px solid var(--wo-primary);
	border-radius: var(--wo-radius);
}

.woocommerce-message {
	border-left-color: var(--wo-success);
	background: rgba(74, 222, 128, 0.08);
}

.woocommerce-error {
	border-left-color: var(--wo-error);
	background: rgba(255, 107, 107, 0.08);
	flex-direction: column;
	align-items: flex-start;
}

.woocommerce-info {
	border-left-color: var(--wo-gold);
	background: var(--wo-gold-soft);
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
}

.woocommerce-error li {
	color: var(--wo-text);
}


/* ------------------------------------------------------------------
   REVIEW FORM
   The "Write a review" panel on the product page.
   ------------------------------------------------------------------ */

.wo-review-form__title,
#review_form #reply-title {
	display: block;
	font-family: var(--wo-font-display);
	font-size: var(--wo-text-xl);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	margin-bottom: var(--wo-space-6);
}

.comment-form-rating {
	margin-bottom: var(--wo-space-5);
}

/* Star picker */
.wo-rating-input {
	display: inline-flex;
	flex-direction: row-reverse;
	gap: var(--wo-space-1);
}

.wo-rating-input input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.wo-rating-input label {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--wo-line-strong);
	cursor: pointer;
	transition: color var(--wo-duration-fast) var(--wo-ease);
}

.wo-rating-input label:hover,
.wo-rating-input label:hover ~ label,
.wo-rating-input input:checked ~ label {
	color: var(--wo-star);
}

.wo-rating-input input:focus-visible + label {
	outline: 2px solid var(--wo-primary-hover);
	outline-offset: 2px;
	border-radius: var(--wo-radius-xs);
}

/* Woo's own comment form wrapper */
.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-title {
	margin-bottom: var(--wo-space-5);
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--wo-space-3);
	margin-bottom: var(--wo-space-5);
}

.comment-form-cookies-consent label {
	margin: 0;
	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-normal);
	color: var(--wo-text-dim);
	line-height: 1.5;
}


/* ------------------------------------------------------------------
   COUPON & NEWSLETTER
   Input and button joined into one pill.
   ------------------------------------------------------------------ */

.wo-inline-form {
	display: flex;
	gap: var(--wo-space-2);
	flex-wrap: wrap;
}

.wo-inline-form .wo-input {
	flex: 1 1 200px;
}

.wo-inline-form .wo-btn {
	flex: 0 0 auto;
}


/* ------------------------------------------------------------------
   WOOCOMMERCE FORM ROW RESET
   Woo ships float-based rows. Replace with grid so nothing clears
   incorrectly on mobile.
   ------------------------------------------------------------------ */

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0 0 var(--wo-space-5);
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce form .form-row-wide {
	width: 100%;
	float: none;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: 0 var(--wo-gap);
}

/* Full-width fields inside that grid. */
.woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-shipping-fields__field-wrapper .form-row-wide,
.woocommerce-address-fields__field-wrapper .form-row-wide {
	grid-column: 1 / -1;
}

/* Select2 (country / state pickers) */
.select2-container--default .select2-selection--single {
	height: 48px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-md);
	display: flex;
	align-items: center;
	padding: 0 var(--wo-space-5);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--wo-text);
	line-height: 1.4;
	padding: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
	right: var(--wo-space-3);
}

.select2-dropdown {
	background: #241A4D;
	border: 1px solid var(--wo-line-strong);
	border-radius: var(--wo-radius-md);
	overflow: hidden;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.select2-container--default .select2-results__option {
	color: var(--wo-text-muted);
	background: transparent;
	font-family: var(--wo-font-body);
	font-size: var(--wo-text-sm);
	padding: 0.5rem var(--wo-space-5);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--wo-primary);
	color: #fff;
}

.select2-container--default .select2-results__option[aria-selected='true'] {
	background: rgba(124, 92, 255, 0.35);
	color: #fff;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-sm);
	color: var(--wo-text);
	min-height: 40px;
	padding: 0.5rem var(--wo-space-4);
	font-family: var(--wo-font-body);
	font-size: var(--wo-text-sm);
}