/*
 * Reusable form field component.
 * Markup: .entradas-field > label + .entradas-field__control > icon + input.
 */
.entradas-field {
	display: grid;
	gap: 6px;
}

.entradas-field__label,
.woocommerce .entradas-field__label {
	display: block;
	margin: 0;
	color: var(--blue-dark-900);
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.25rem;
	text-transform: none;
}

.entradas-field__required {
	color: var(--color-danger);
}

.entradas-field__control {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 50px;
	padding: 0;
	border: 1px solid var(--blue-dark-200);
	border-radius: 10px;
	background: #fff;
	color: var(--blue-dark-400);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.entradas-field--filled .entradas-field__control {
	border-color: var(--blue-dark-300);
	color: var(--blue-dark-400);
}

.entradas-field__control:focus-within {
	border-color: var(--blue-500);
	box-shadow: 0 0 0 1px var(--blue-500);
	color: var(--blue-500);
}

.entradas-field:has(.entradas-field__control:focus-within)>.entradas-field__label {
	color: var(--blue-600);
}

.entradas-field__icon {
	position: absolute;
	top: 50%;
	left: 12px;
	z-index: 1;
	display: grid;
	width: 20px;
	height: 20px;
	pointer-events: none;
	transform: translateY(-50%);
	place-items: center;
}

.entradas-field__icon svg {
	width: 20px;
	height: 20px;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.entradas-field__icon--fill svg,
.entradas-field__icon--fill svg path {
	fill: currentcolor;
	stroke: none;
}

.entradas-field__control input,
.entradas-field__control textarea,
.woocommerce .entradas-field__control input[type="text"],
.woocommerce .entradas-field__control input[type="email"],
.woocommerce .entradas-field__control input[type="password"],
.woocommerce .entradas-field__control textarea,
.woocommerce form .form-row.entradas-field .entradas-field__control textarea.input-text {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent !important;
	box-shadow: none;
	color: var(--blue-dark-400);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5rem;
	box-sizing: border-box;
}

.entradas-field__control input,
.woocommerce .entradas-field__control input.input-text {
	height: 48px;
	border: 0;
}

.entradas-field__control:has(> .entradas-field__icon) input,
.woocommerce .entradas-field__control:has(> .entradas-field__icon) input.input-text {
	padding-left: 40px;
	padding-right: 12px;
}

.entradas-field__control:has(.otc-login__password-toggle) input,
.woocommerce .entradas-field__control:has(.otc-login__password-toggle) input.input-text {
	padding-right: 44px;
}

.entradas-field__control textarea,
.woocommerce form .form-row.entradas-field .entradas-field__control textarea.input-text {
	min-height: 96px;
	padding: 12px;
	resize: vertical;
}

.entradas-field__control input::placeholder,
.entradas-field__control textarea::placeholder {
	color: var(--blue-dark-200);
	opacity: 1;
}

/* Keep browser autofill inside the shared field's white control surface. */
.entradas-field__control input:not([type="checkbox"]):autofill,
.entradas-field__control input:not([type="checkbox"]):-webkit-autofill,
.woocommerce .entradas-field__control input.input-text:autofill,
.woocommerce .entradas-field__control input.input-text:-webkit-autofill {
	-webkit-text-fill-color: var(--blue-dark-400);
	caret-color: var(--blue-dark-400);
	box-shadow: inset 0 0 0 1000px #fff;
	border-radius: 12px;
}

.entradas-field__control input:focus,
.entradas-field__control textarea:focus,
.woocommerce form .form-row.entradas-field .entradas-field__control textarea.input-text:focus {
	border: 0;
	outline: 0;
	box-shadow: none;
}

.entradas-field--error .entradas-field__label,
.entradas-field--error .entradas-field__message {
	color: var(--color-danger);
}

.entradas-field--error .entradas-field__control {
	border-color: var(--color-danger);
	color: var(--blue-dark-300);
}

.woocommerce .entradas-field.woocommerce-invalid>.entradas-field__label,
.woocommerce .entradas-field.woocommerce-invalid>.entradas-field__control {
	border-color: var(--color-danger);
	color: var(--color-danger);
}

.entradas-field__label .required,
.woocommerce .entradas-field__label .required {
	color: var(--color-danger);
}

.entradas-field__message {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.25rem;
}

/* Shared checkbox component used across the public-facing forms. */
.site input[type="checkbox"],
.woocommerce input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1.5px solid #454545;
	border-radius: 3.25px;
	appearance: none;
	-webkit-appearance: none;
	background-color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 12px 12px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.site input[type="checkbox"]:checked,
.woocommerce input[type="checkbox"]:checked {
	background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M8.12541%2012.2767L13.8176%206.20705C13.9469%206.06902%2014.1114%206%2014.3111%206C14.5109%206%2014.6757%206.06885%2014.8055%206.20656C14.9352%206.34426%2015%206.51946%2015%206.73217C15%206.94504%2014.9352%207.12058%2014.8055%207.25879L8.71848%2013.7293C8.54899%2013.9098%208.3513%2014%208.12541%2014C7.89952%2014%207.70183%2013.9098%207.53234%2013.7293L5.19449%2011.2502C5.06483%2011.1125%205%2010.9374%205%2010.7248C5%2010.5121%205.06467%2010.3366%205.19402%2010.1984C5.32337%2010.0604%205.48794%209.99139%205.68774%209.99139C5.8877%209.99139%206.05258%2010.0604%206.1824%2010.1984L8.12541%2012.2767Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E) center / contain no-repeat;
	border-color: #141b1f;
	border-radius: 4px;
	background-color: #141b1f;
}

.site input[type="checkbox"]:focus-visible,
.woocommerce input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--blue-500);
	outline-offset: 2px;
}

.entradas-field--error input[type="checkbox"],
.woocommerce-invalid input[type="checkbox"],
.otc-register__check--error input[type="checkbox"] {
	border-color: #e7000b;
}

/* Generic integration for existing OTC and WooCommerce form rows. */
.otc-press-registration input[type="text"],
.otc-press-registration input[type="email"],
.otc-press-registration input[type="password"],
.otc-event input[type="text"],
.otc-event input[type="email"],
.woocommerce form .form-row:not(.entradas-field) input[type="text"],
.woocommerce form .form-row:not(.entradas-field) input[type="email"],
.woocommerce form .form-row:not(.entradas-field) input[type="password"] {
	min-height: 50px;
	border: 1px solid var(--blue-dark-200);
	border-radius: 10px;
	background: #fff;
	color: var(--blue-dark-400);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5rem;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.otc-press-registration input[type="text"]:focus,
.otc-press-registration input[type="email"]:focus,
.otc-press-registration input[type="password"]:focus,
.otc-event input[type="text"]:focus,
.otc-event input[type="email"]:focus,
.woocommerce form .form-row:not(.entradas-field) input[type="text"]:focus,
.woocommerce form .form-row:not(.entradas-field) input[type="email"]:focus,
.woocommerce form .form-row:not(.entradas-field) input[type="password"]:focus {
	border-color: transparent;
	box-shadow: none;
}