/**
 * WapuCommerce — Input Component System
 * ──────────────────────────────────────────────────────────────
 * Unifica 8+ variantes legacy de input bajo un sistema de
 * 1 base + 3 tamaños + 4 estados + 2 formas especiales.
 *
 *   .wapu-input        → base (44px, rounded-md)
 *   .wapu-input--sm    → compacto (36px) para coupons, filters
 *   .wapu-input--lg    → grande (52px) para signup, login
 *   .wapu-input--pill  → redondeado completo para búsquedas
 *
 *   .wapu-input--error    → border danger + focus ring
 *   .wapu-input--success  → border success
 *
 *   .wapu-textarea  → variante textarea (padding vertical)
 *
 *   .wapu-field          → wrapper vertical con gap-1
 *   .wapu-field__label   → label normalizado
 *   .wapu-field__help    → texto tenue debajo
 *   .wapu-field__error   → mensaje de error
 *
 *   .wapu-input-wrap          → wrapper para input con icono
 *   .wapu-input-wrap__icon    → icono absoluto izquierdo
 *
 * Este archivo se carga AL FINAL del stack CSS para ganar la
 * cascade sobre los estilos específicos de cart/checkout/account.
 *
 * @since 3.0.0
 */


/* ═══════════════════════════════════════════════════════════
 *  BASE — input + selectores legacy que heredan
 * ═══════════════════════════════════════════════════════════ */

.wapu-input,
.wapu-account__input,
.wapu-coupon__input,
.wapu-checkout input.input-text,
.wapu-checkout select,
.woocommerce-checkout .wapu-checkout input.input-text,
.woocommerce-checkout .wapu-checkout select,
.wapu-edit-account__form input[type="text"],
.wapu-edit-account__form input[type="email"],
.wapu-edit-account__form input[type="tel"],
.wapu-edit-account__form input[type="password"],
.wapu-edit-address__form input[type="text"],
.wapu-edit-address__form input[type="email"],
.wapu-edit-address__form input[type="tel"],
.wapu-edit-address__form select {
	width: 100%;
	height: 2.75rem; /* 44px */
	padding: 0 var(--ds-s-3);
	border-radius: var(--ds-r-md);
	border: 0.5px solid var(--ds-line-strong);
	background: var(--ds-surface);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-14);
	font-weight: 400;
	color: var(--ds-ink);
	line-height: 1;
	transition: border-color var(--ds-dur) var(--ds-ease),
	            box-shadow var(--ds-dur) var(--ds-ease),
	            background var(--ds-dur) var(--ds-ease);
	outline: none;
	box-shadow: none;
}

.wapu-input::placeholder,
.wapu-account__input::placeholder,
.wapu-coupon__input::placeholder,
.wapu-checkout input.input-text::placeholder,
.woocommerce-checkout .wapu-checkout input.input-text::placeholder {
	color: var(--ds-ink-4);
	opacity: 1;
}

.wapu-input:hover:not(:disabled):not(:focus):not([readonly]),
.wapu-account__input:hover:not(:disabled):not(:focus),
.wapu-coupon__input:hover:not(:disabled):not(:focus),
.wapu-checkout input.input-text:hover:not(:disabled):not(:focus):not([readonly]),
.woocommerce-checkout .wapu-checkout input.input-text:hover:not(:disabled):not(:focus):not([readonly]) {
	border-color: var(--ds-ink-4);
}

.wapu-input:focus,
.wapu-account__input:focus,
.wapu-coupon__input:focus,
.wapu-checkout input.input-text:focus,
.wapu-checkout select:focus,
.woocommerce-checkout .wapu-checkout input.input-text:focus,
.woocommerce-checkout .wapu-checkout select:focus {
	border-color: var(--ds-accent);
	box-shadow: 0 0 0 3px var(--ds-accent-soft);
}

.wapu-input:disabled,
.wapu-input[readonly],
.wapu-account__input:disabled,
.wapu-checkout input.input-text:disabled,
.wapu-checkout input.input-text[readonly] {
	background: var(--ds-surface-3);
	color: var(--ds-ink-3);
	cursor: not-allowed;
	opacity: 1;
}


/* ═══════════════════════════════════════════════════════════
 *  SIZES
 * ═══════════════════════════════════════════════════════════ */

/* Compacto — coupon, filters, pagination */
.wapu-input--sm,
.wapu-coupon__input,
.woocommerce-checkout .wapu-checkout__coupon-row input.input-text {
	height: 2.25rem; /* 36px */
	padding: 0 var(--ds-s-3);
	font-size: var(--ds-fs-13);
}

/* Grande — signup, login, register */
.wapu-input--lg,
.wapu-account__input {
	height: 3.25rem; /* 52px */
	padding: 0 var(--ds-s-4);
	font-size: var(--ds-fs-15);
}


/* ═══════════════════════════════════════════════════════════
 *  STATES — error, success
 *  Hereda estados nativos de WooCommerce (validated / invalid)
 * ═══════════════════════════════════════════════════════════ */

.wapu-input--error,
.woocommerce-invalid input.input-text,
.woocommerce-invalid select,
.woocommerce-invalid .select2-selection,
.wapu-account__field--error .wapu-account__input,
.wapu-account__input.is-invalid {
	border-color: var(--ds-danger);
}

.wapu-input--error:focus,
.woocommerce-invalid input.input-text:focus,
.woocommerce-invalid select:focus {
	box-shadow: 0 0 0 3px var(--ds-danger-soft);
	border-color: var(--ds-danger);
}

.wapu-input--success,
.woocommerce-validated input.input-text,
.woocommerce-validated select,
.woocommerce-validated .select2-selection {
	border-color: var(--ds-success);
}

.wapu-input--success:focus,
.woocommerce-validated input.input-text:focus {
	box-shadow: 0 0 0 3px var(--ds-success-soft);
	border-color: var(--ds-success);
}


/* ═══════════════════════════════════════════════════════════
 *  PILL — redondeado completo (búsqueda)
 * ═══════════════════════════════════════════════════════════ */

.wapu-input--pill,
.nav-search-form__input,
.wapu-drawer__search-input,
.wapu-archive__collections-search-input {
	border-radius: var(--ds-r-pill);
	background: var(--ds-surface-2);
	border-color: transparent;
}

.wapu-input--pill:hover:not(:disabled):not(:focus),
.nav-search-form__input:hover:not(:disabled):not(:focus),
.wapu-drawer__search-input:hover:not(:disabled):not(:focus),
.wapu-archive__collections-search-input:hover:not(:disabled):not(:focus) {
	background: var(--ds-surface-3);
	border-color: transparent;
}

.wapu-input--pill:focus,
.nav-search-form__input:focus,
.wapu-drawer__search-input:focus,
.wapu-archive__collections-search-input:focus {
	background: var(--ds-surface);
	border-color: var(--ds-accent);
}


/* ═══════════════════════════════════════════════════════════
 *  TEXTAREA
 * ═══════════════════════════════════════════════════════════ */

.wapu-textarea,
.wapu-checkout textarea,
.woocommerce-checkout .wapu-checkout textarea,
textarea#order_comments,
.wapu-checkout__card--notes textarea#order_comments {
	width: 100%;
	min-height: 6rem; /* 96px */
	padding: var(--ds-s-3) var(--ds-s-3);
	border-radius: var(--ds-r-md);
	border: 0.5px solid var(--ds-line-strong);
	background: var(--ds-surface);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-14);
	font-weight: 400;
	color: var(--ds-ink);
	line-height: var(--ds-lh-base);
	transition: border-color var(--ds-dur) var(--ds-ease),
	            box-shadow var(--ds-dur) var(--ds-ease);
	outline: none;
	resize: vertical;
	box-shadow: none;
}

.wapu-textarea::placeholder,
.wapu-checkout textarea::placeholder,
textarea#order_comments::placeholder {
	color: var(--ds-ink-4);
	opacity: 1;
}

.wapu-textarea:hover:not(:disabled):not(:focus),
.wapu-checkout textarea:hover:not(:disabled):not(:focus) {
	border-color: var(--ds-ink-4);
}

.wapu-textarea:focus,
.wapu-checkout textarea:focus,
textarea#order_comments:focus {
	border-color: var(--ds-accent);
	box-shadow: 0 0 0 3px var(--ds-accent-soft);
}


/* ═══════════════════════════════════════════════════════════
 *  SELECT2 — normalizar para que se vea como los inputs
 *  (usado en checkout para country/state)
 * ═══════════════════════════════════════════════════════════ */

.wapu-checkout .select2-container--default .select2-selection--single,
.woocommerce-checkout .wapu-checkout .select2-container--default .select2-selection--single {
	height: 2.75rem !important;
	min-height: 2.75rem;
	max-height: 2.75rem;
	border-radius: var(--ds-r-md) !important;
	border: 0.5px solid var(--ds-line-strong) !important;
	background: var(--ds-surface);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	transition: border-color var(--ds-dur) var(--ds-ease),
	            box-shadow var(--ds-dur) var(--ds-ease);
}

.wapu-checkout .select2-container--default.select2-container--open .select2-selection--single,
.wapu-checkout .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--ds-accent) !important;
	box-shadow: 0 0 0 3px var(--ds-accent-soft);
}

.wapu-checkout .select2-selection__rendered {
	font-family: var(--ds-font-text) !important;
	font-size: var(--ds-fs-14) !important;
	color: var(--ds-ink) !important;
	padding-left: var(--ds-s-3) !important;
	line-height: 1 !important;
	display: flex !important;
	align-items: center !important;
	height: 100%;
}


/* ═══════════════════════════════════════════════════════════
 *  FIELD WRAPPER + LABEL + HELP + ERROR
 * ═══════════════════════════════════════════════════════════ */

.wapu-field {
	display: flex;
	flex-direction: column;
	gap: var(--ds-s-1);
}

.wapu-field__label,
.wapu-account__field label,
.wapu-edit-account__field label,
.wapu-edit-address__field label,
.wapu-checkout .form-row label,
.woocommerce-checkout .wapu-checkout .form-row label {
	display: block;
	margin: 0 0 var(--ds-s-1);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-13);
	font-weight: 500;
	color: var(--ds-ink-2);
	letter-spacing: var(--ds-ls-tight);
	line-height: var(--ds-lh-snug);
}

.wapu-field__label .optional,
.wapu-checkout .form-row label .optional {
	color: var(--ds-ink-4);
	font-weight: 400;
	margin-left: var(--ds-s-1);
}

.wapu-field__help {
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-12);
	color: var(--ds-ink-3);
	line-height: var(--ds-lh-base);
}

.wapu-field__error,
.wapu-account__field-error,
.woocommerce-invalid-required-field ~ .wapu-field__error {
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-12);
	color: var(--ds-danger);
	font-weight: 500;
	line-height: var(--ds-lh-snug);
}


/* ═══════════════════════════════════════════════════════════
 *  INPUT WITH ICON
 * ═══════════════════════════════════════════════════════════ */

.wapu-input-wrap,
.wapu-account__input-wrap,
.nav-search-form {
	position: relative;
}

.wapu-input-wrap__icon,
.wapu-account__input-wrap svg:first-child,
.nav-search-form__icon {
	position: absolute;
	left: var(--ds-s-3);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--ds-ink-3);
	flex-shrink: 0;
}

.wapu-input-wrap .wapu-input,
.wapu-account__input--has-icon,
.nav-search-form__input {
	padding-left: 2.5rem; /* 40px — deja espacio para icono */
}


/* ═══════════════════════════════════════════════════════════
 *  CHECKBOX + RADIO — normalizar
 * ═══════════════════════════════════════════════════════════ */

.wapu-checkbox,
.wapu-checkout input[type="checkbox"],
.wapu-account__form input[type="checkbox"],
.wapu-edit-account__form input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.125rem; /* 18px */
	height: 1.125rem;
	border-radius: var(--ds-r-xs);
	border: 1.5px solid var(--ds-line-strong);
	background: var(--ds-surface);
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	transition: border-color var(--ds-dur) var(--ds-ease),
	            background var(--ds-dur) var(--ds-ease);
	margin: 0;
}

.wapu-checkbox:hover,
.wapu-checkout input[type="checkbox"]:hover {
	border-color: var(--ds-ink-3);
}

.wapu-checkbox:checked,
.wapu-checkout input[type="checkbox"]:checked,
.wapu-account__form input[type="checkbox"]:checked {
	background: var(--ds-accent);
	border-color: var(--ds-accent);
}

.wapu-checkbox:checked::after,
.wapu-checkout input[type="checkbox"]:checked::after,
.wapu-account__form input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.375rem;
	height: 0.625rem;
	border-right: 2px solid var(--ds-surface);
	border-bottom: 2px solid var(--ds-surface);
	transform: translate(-50%, -60%) rotate(45deg);
}

.wapu-checkbox:focus-visible,
.wapu-checkout input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ds-accent);
	outline-offset: 2px;
}