/*
|--------------------------------------------------------------------------
| AMOREA — FORMULARIOS
|--------------------------------------------------------------------------
*/

.input {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text);
}

.input:focus {
	border-color: var(--color-primary) !important;
	outline: none;
	box-shadow: none;
}

.search-form {
	display: flex;
	align-items: stretch;
	flex: 1 1 200px;
	min-width: 0;
	max-width: 480px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface);
}

.search-form__input {
	flex: 1;
	min-width: 0;
	border: none;
	padding: var(--space-3) var(--space-5);
	background: transparent;
}

/*
 * Blocksy define un foco global `input:focus { border-color:
 * var(--theme-form-field-border-focus-color) }` (azul, #2872fa por
 * defecto) — por especificidad ese selector (1 elemento + 1 pseudo-clase)
 * empata y gana sobre `.search-form__input` (1 sola clase) aunque esta
 * hoja cargue después, así que el borde volvía a pintarse de azul al
 * enfocar aunque el estado normal lo tuviera en `border:none`. Único
 * cambio autorizado en el buscador de escritorio (todo lo demás —
 * tamaño, posición, comportamiento— sigue igual): el foco pasa de azul a
 * un aro rosa suave de Amorea, con `!important` porque es la única forma
 * de ganarle a esa regla nativa sin subir la especificidad de todo el
 * selector. Se aplica también al buscador móvil clonado (mismo
 * `.search-form`, ver initMobileSearchToggle() en main.js).
 */
.search-form:focus-within {
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 3px rgba(203, 37, 90, 0.16);
}

.search-form__input:focus {
	outline: none;
	border-color: var(--color-primary) !important;
}

.search-form__submit {
	width: 48px;
	flex: 0 0 auto;
	background: var(--color-primary);
	color: var(--color-surface);
	border-radius: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-lg);
}

.search-form__submit svg,
.search-form__submit img {
	width: 16px;
	height: 16px;
	max-width: none;
	flex-shrink: 0;
}

.newsletter-form {
	display: flex;
	gap: var(--space-2);
}

.newsletter-form .input {
	min-width: 0;
}

.newsletter-form .input {
	border-radius: var(--radius-pill);
}