/**
 * AiSystem — Aspecto de la pantalla de finalizar compra.
 *
 * TODO cuelga de «.aisys-tienda», la clase que el plugin pone en el body solo
 * en el carrito y en finalizar compra. Fuera de ahí, este archivo no existe.
 *
 * Y todo es aspecto: colores, espacios, bordes y tamaños. No se mueve ningún
 * campo, no se cambia el orden, no se oculta nada y no se toca el pago. Si con
 * el tema algo se viera raro, se apaga la opción y queda como estaba.
 */

.aisys-tienda {
	--aisys-marca: #0787a8;
	--aisys-marca-oscuro: #05708c;
	--aisys-texto: #1f2f38;
	--aisys-suave: #6b7c86;
	--aisys-borde: #dfe6ea;
	--aisys-borde-suave: #eef3f5;
	--aisys-fondo: #f7fafb;
	--aisys-error: #c0392b;
	--aisys-ok: #1e7e34;
}

/* ---------------------------------------------------------------
 *  Títulos de cada bloque
 * --------------------------------------------------------------- */

.aisys-tienda .woocommerce h3,
.aisys-tienda .woocommerce-billing-fields > h3,
.aisys-tienda .woocommerce-shipping-fields > h3,
.aisys-tienda .woocommerce-additional-fields > h3,
.aisys-tienda #order_review_heading {
	font-size: 17px;
	font-weight: 700;
	color: var(--aisys-texto);
	margin: 0 0 16px;
	padding: 0 0 12px;
	border-bottom: 2px solid var(--aisys-borde-suave);
	letter-spacing: -.01em;
}

.aisys-tienda #order_review_heading {
	margin-top: 34px;
}

/* ---------------------------------------------------------------
 *  Campos del formulario
 * --------------------------------------------------------------- */

.aisys-tienda .woocommerce form .form-row,
.aisys-tienda form.checkout .form-row {
	margin: 0 0 15px;
	padding: 0;
}

.aisys-tienda form.checkout label,
.aisys-tienda .woocommerce-billing-fields label,
.aisys-tienda .woocommerce-shipping-fields label,
.aisys-tienda .woocommerce-additional-fields label {
	display: block;
	margin: 0 0 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--aisys-texto);
	line-height: 1.3;
}

/* El asterisco de obligatorio, discreto: se ve, pero no grita. */
.aisys-tienda .required,
.aisys-tienda abbr.required {
	color: var(--aisys-marca);
	border: 0;
	text-decoration: none;
	font-weight: 700;
}

.aisys-tienda .optional {
	color: var(--aisys-suave);
	font-weight: 400;
	font-size: 12.5px;
}

/* Los «!important» son a propósito y hacen falta.
 *
 * El tema Envision fija la altura de los campos en 20 px con su propia hoja, y
 * además carga DESPUÉS que esta, así que gana él. Sin forzarlo, los campos se
 * quedaban en 43 px de alto por mucho que aquí se pidieran 46. Se fuerza solo
 * lo imprescindible para que se vean bien; el resto se deja negociar. */
body.aisys-tienda form.checkout .input-text,
body.aisys-tienda form.checkout input[type="text"],
body.aisys-tienda form.checkout input[type="email"],
body.aisys-tienda form.checkout input[type="tel"],
body.aisys-tienda form.checkout input[type="number"],
body.aisys-tienda form.checkout input[type="password"],
body.aisys-tienda form.checkout textarea,
body.aisys-tienda form.checkout select,
body.aisys-tienda .select2-container .select2-selection--single {
	width: 100% !important;
	box-sizing: border-box !important;
	min-height: 46px !important;
	height: auto !important;
	padding: 11px 14px !important;
	margin-bottom: 0 !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: var(--aisys-texto);
	background: #fff;
	border: 1px solid var(--aisys-borde);
	border-radius: 9px;
	box-shadow: none;
	transition: border-color .12s, box-shadow .12s;
	font-family: inherit;
}

.aisys-tienda form.checkout textarea {
	min-height: 96px;
	resize: vertical;
}

.aisys-tienda form.checkout .input-text:focus,
.aisys-tienda form.checkout input:focus,
.aisys-tienda form.checkout textarea:focus,
.aisys-tienda form.checkout select:focus,
.aisys-tienda .select2-container--focus .select2-selection--single {
	border-color: var(--aisys-marca);
	box-shadow: 0 0 0 3px rgba(7, 135, 168, .13);
	outline: none;
}

.aisys-tienda form.checkout ::placeholder {
	color: #a9b6bd;
	opacity: 1;
}

/* El desplegable de provincia/país, a la misma altura que los demás. */
.aisys-tienda .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

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

.aisys-tienda .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px;
	right: 8px;
}

/* Un campo mal rellenado: se marca sin dar un susto. */
.aisys-tienda .woocommerce-invalid input.input-text,
.aisys-tienda .woocommerce-invalid select,
.aisys-tienda .woocommerce-invalid .select2-selection--single {
	border-color: var(--aisys-error);
	background: #fffafa;
}

.aisys-tienda .woocommerce-validated input.input-text {
	border-color: #bfe0c9;
}

/* El DNI/CIF: campo de texto y nada más. Si algún plugin le cuelga su
   selector de país con banderita, aquí se le quita de en medio. */
.aisys-tienda .aisys-campo-nif,
.aisys-tienda input[data-aisys-nif] {
	padding-left: 14px !important;
	background-image: none !important;
}

.aisys-tienda .form-row:has(input[data-aisys-nif]) .iti__flag-container,
.aisys-tienda .form-row:has(input[data-aisys-nif]) .iti__selected-flag,
.aisys-tienda .form-row:has(input[data-aisys-nif]) .intl-tel-input .flag-container {
	display: none !important;
}

/* ---------------------------------------------------------------
 *  Las dos columnas de datos
 * --------------------------------------------------------------- */

/* Las dos columnas.
 *
 * El tema Envision NO usa las clases de WooCommerce (.col-1 y .col-2): usa las
 * suyas, .span6. Se contemplan las dos, para que esto siga funcionando si
 * algún día se cambia de tema. */
.aisys-tienda #customer_details > .col2-set > .col-1,
.aisys-tienda #customer_details > .col2-set > .col-2,
.aisys-tienda #customer_details > .col-1,
.aisys-tienda #customer_details > .col-2,
.aisys-tienda #customer_details > .span6 {
	background: #fff;
	border: 1px solid var(--aisys-borde);
	border-radius: 14px;
	padding: 22px 24px;
	box-sizing: border-box;
	margin-bottom: 18px;
}

@media (min-width: 992px) {
	.aisys-tienda #customer_details,
	.aisys-tienda #customer_details > .col2-set {
		display: flex;
		gap: 22px;
		width: 100%;
		align-items: flex-start;
	}
	.aisys-tienda #customer_details > .col2-set > .col-1,
	.aisys-tienda #customer_details > .col2-set > .col-2,
	.aisys-tienda #customer_details > .col-1,
	.aisys-tienda #customer_details > .col-2,
	.aisys-tienda #customer_details > .span6 {
		float: none;
		width: 50%;
		margin-bottom: 0;
	}
	/* El .col2-set intermedio, si lo hay, no debe estorbar al reparto. */
	.aisys-tienda #customer_details > .col2-set {
		width: 100%;
		gap: 22px;
	}
}

/* ---------------------------------------------------------------
 *  El cupón
 * --------------------------------------------------------------- */

.aisys-tienda .woocommerce-form-coupon-toggle .woocommerce-info {
	background: var(--aisys-fondo);
	border: 1px dashed var(--aisys-borde);
	border-radius: 12px;
	color: var(--aisys-suave);
	padding: 14px 18px;
	font-size: 14px;
	margin: 0 0 22px;
	list-style: none;
}

.aisys-tienda .woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none;
}

.aisys-tienda .woocommerce-form-coupon-toggle a,
.aisys-tienda .showcoupon {
	color: var(--aisys-marca);
	font-weight: 600;
	text-decoration: underline;
}

.aisys-tienda form.checkout_coupon {
	border: 1px solid var(--aisys-borde);
	border-radius: 12px;
	padding: 18px;
	margin: 0 0 22px;
}

/* ---------------------------------------------------------------
 *  El resumen del pedido
 * --------------------------------------------------------------- */

.aisys-tienda #order_review {
	background: #fff;
	border: 1px solid var(--aisys-borde);
	border-radius: 14px;
	padding: 6px 24px 24px;
}

/* La tabla del pedido.
 *
 * AQUÍ ESTABA EL DESTROZO EN MÓVIL: sin repartir las columnas a mano, el
 * navegador le daba 35 px al nombre del producto y 351 px al importe, y la
 * tabla entera (387 px) se salía de un contenedor de 301. Con «table-layout:
 * fixed» y los dos anchos puestos, cada columna ocupa lo que le toca y el
 * nombre largo parte de línea en vez de empujar. */
.aisys-tienda .woocommerce-checkout-review-order-table,
.aisys-tienda #order_review .shop_table {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	table-layout: fixed !important;
	border: 0;
	border-collapse: collapse;
	margin: 0 0 22px;
	box-sizing: border-box;
}

.aisys-tienda .woocommerce-checkout-review-order-table th:first-child,
.aisys-tienda .woocommerce-checkout-review-order-table td:first-child {
	width: 60%;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.aisys-tienda .woocommerce-checkout-review-order-table th:last-child,
.aisys-tienda .woocommerce-checkout-review-order-table td:last-child {
	width: 40%;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Y el contenedor no debe recortarla ni empujarla. */
.aisys-tienda #order_review > .span12,
.aisys-tienda #order_review > .col2-set {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

.aisys-tienda .woocommerce-checkout-review-order-table th,
.aisys-tienda .woocommerce-checkout-review-order-table td {
	border: 0;
	border-bottom: 1px solid var(--aisys-borde-suave);
	padding: 14px 0;
	font-size: 14.5px;
	color: var(--aisys-texto);
	background: none;
	vertical-align: top;
}

.aisys-tienda .woocommerce-checkout-review-order-table thead th {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--aisys-suave);
	padding: 10px 0;
	border-bottom: 2px solid var(--aisys-borde-suave);
}

.aisys-tienda .woocommerce-checkout-review-order-table td:last-child,
.aisys-tienda .woocommerce-checkout-review-order-table th:last-child {
	text-align: right;
	white-space: nowrap;
	padding-left: 14px;
}

.aisys-tienda .woocommerce-checkout-review-order-table .product-name {
	font-weight: 600;
	line-height: 1.4;
}

.aisys-tienda .product-quantity {
	color: var(--aisys-suave);
	font-weight: 400;
}

/* La línea del regalo del 5+1, que se lea como lo que es: algo bueno. */
.aisys-tienda .woocommerce-checkout-review-order-table .product-name .wc-item-meta,
.aisys-tienda .woocommerce-checkout-review-order-table .product-name dl {
	margin: 5px 0 0;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--aisys-ok);
}

.aisys-tienda .cart-subtotal th,
.aisys-tienda .cart-subtotal td,
.aisys-tienda .tax-rate th,
.aisys-tienda .tax-rate td,
.aisys-tienda .woocommerce-shipping-totals th,
.aisys-tienda .woocommerce-shipping-totals td {
	font-size: 14px;
	color: var(--aisys-suave);
	font-weight: 500;
}

.aisys-tienda .order-total th,
.aisys-tienda .order-total td {
	font-size: 19px;
	font-weight: 800;
	color: var(--aisys-texto);
	border-bottom: 0;
	border-top: 2px solid var(--aisys-borde-suave);
	padding-top: 18px;
}

.aisys-tienda .order-total .amount {
	color: var(--aisys-marca);
}

.aisys-tienda ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.aisys-tienda ul#shipping_method li {
	margin: 0 0 5px;
	font-size: 14px;
}

/* ---------------------------------------------------------------
 *  Formas de pago
 * --------------------------------------------------------------- */

.aisys-tienda #payment {
	background: none;
	border-radius: 0;
	padding: 0;
}

.aisys-tienda #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

/* Cada forma de pago, una tarjeta.
 *
 * Va en rejilla porque WooCommerce pone el redondel y su texto como hermanos,
 * uno detrás del otro. Sin esto el redondel se queda en una línea y el nombre
 * de la forma de pago cae debajo. Con la rejilla: redondel y nombre en la
 * primera fila, y la explicación ocupando el ancho entero en la segunda. */
.aisys-tienda #payment ul.payment_methods li.wc_payment_method {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	margin: 0 0 10px;
	padding: 0;
	border: 1px solid var(--aisys-borde);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	transition: border-color .12s, box-shadow .12s;
}

.aisys-tienda #payment ul.payment_methods li.wc_payment_method:hover {
	border-color: #b9dbe5;
}

/* La elegida se distingue de un vistazo. */
.aisys-tienda #payment ul.payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--aisys-marca);
	box-shadow: 0 0 0 3px rgba(7, 135, 168, .1);
	background: #fbfeff;
}

.aisys-tienda #payment ul.payment_methods li.wc_payment_method > label {
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 16px 18px 16px 11px;
	font-size: 15px;
	font-weight: 600;
	color: var(--aisys-texto);
	cursor: pointer;
	line-height: 1.35;
}

.aisys-tienda #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
	grid-column: 1;
	width: 19px;
	height: 19px;
	margin: 0 0 0 18px;
	accent-color: var(--aisys-marca);
	cursor: pointer;
}

/* La explicación de la forma de pago, por debajo y de lado a lado. */
.aisys-tienda #payment ul.payment_methods li.wc_payment_method > .payment_box {
	grid-column: 1 / -1;
}

.aisys-tienda #payment ul.payment_methods li.wc_payment_method img {
	max-height: 26px;
	width: auto;
	margin: 0;
	vertical-align: middle;
}

.aisys-tienda #payment div.payment_box {
	background: var(--aisys-fondo);
	border-radius: 0;
	margin: 0;
	padding: 14px 18px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--aisys-suave);
	border-top: 1px solid var(--aisys-borde-suave);
}

.aisys-tienda #payment div.payment_box::before {
	display: none;
}

/* ---------------------------------------------------------------
 *  Condiciones y botón de comprar
 * --------------------------------------------------------------- */

.aisys-tienda .woocommerce-terms-and-conditions-wrapper {
	margin: 0 0 18px;
}

.aisys-tienda .woocommerce-privacy-policy-text {
	font-size: 13px;
	color: var(--aisys-suave);
	line-height: 1.5;
}

.aisys-tienda .validate-required.woocommerce-form__label-for-checkbox,
.aisys-tienda .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--aisys-texto);
	line-height: 1.45;
	cursor: pointer;
}

.aisys-tienda .woocommerce-form__input-checkbox {
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--aisys-marca);
	flex: 0 0 auto;
	cursor: pointer;
}

body.aisys-tienda #place_order,
body.aisys-tienda .woocommerce #payment #place_order,
body.aisys-tienda button#place_order {
	display: block !important;
	width: 100% !important;
	min-height: 56px !important;
	height: auto !important;
	padding: 16px 24px !important;
	font-size: 17px !important;
	font-weight: 700;
	letter-spacing: .01em;
	color: #fff;
	background: var(--aisys-marca);
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(7, 135, 168, .26);
	transition: background .14s, transform .06s, box-shadow .14s;
	font-family: inherit;
	text-transform: none;
	line-height: 1.2;
}

.aisys-tienda #place_order:hover {
	background: var(--aisys-marca-oscuro);
	box-shadow: 0 8px 22px rgba(7, 135, 168, .34);
}

.aisys-tienda #place_order:active {
	transform: translateY(1px);
}

.aisys-tienda #place_order:disabled {
	opacity: .6;
	cursor: default;
	box-shadow: none;
}

/* Mientras se manda al banco, que se note que está trabajando. */
.aisys-tienda .blockUI.blockOverlay {
	border-radius: 14px;
}

/* ---------------------------------------------------------------
 *  Avisos
 * --------------------------------------------------------------- */

.aisys-tienda .woocommerce-error,
.aisys-tienda .woocommerce-message,
.aisys-tienda .woocommerce-info {
	border-radius: 12px;
	border: 1px solid var(--aisys-borde);
	border-top-width: 1px;
	padding: 15px 18px;
	font-size: 14.5px;
	line-height: 1.5;
	list-style: none;
}

.aisys-tienda .woocommerce-error {
	background: #fdecea;
	border-color: #f2c4bd;
	color: #8c2a1d;
}

.aisys-tienda .woocommerce-message {
	background: #eaf7ee;
	border-color: #bfe0c9;
	color: #1c6b30;
}

/* ---------------------------------------------------------------
 *  Móvil
 * --------------------------------------------------------------- */

/* Por debajo de 992 px, una columna debajo de otra.
 *
 * Hace falta forzarlo: el tema Envision deja sus «.span6» al 50 % en TODOS los
 * anchos, así que en un móvil los datos de facturación y los de envío se
 * quedaban en dos columnas de dedo y medio, imposibles de rellenar. */
@media (max-width: 991px) {

	.aisys-tienda #customer_details > .span6,
	.aisys-tienda #customer_details > .col-1,
	.aisys-tienda #customer_details > .col-2,
	.aisys-tienda #customer_details > .col2-set > .col-1,
	.aisys-tienda #customer_details > .col2-set > .col-2,
	.aisys-tienda #order_review > .span12 {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0;
		padding-right: 0;
	}

	.aisys-tienda #customer_details {
		display: block;
	}

	/* La rejilla del tema saca el contenido 15 px a la izquierda. */
	.aisys-tienda #customer_details.ui-row,
	.aisys-tienda #order_review.ui-row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

@media (max-width: 782px) {

	.aisys-tienda #customer_details > .col-1,
	.aisys-tienda #customer_details > .col-2,
	.aisys-tienda #customer_details > .span6,
	.aisys-tienda #customer_details > .col2-set > .col-1,
	.aisys-tienda #customer_details > .col2-set > .col-2,
	.aisys-tienda #order_review {
		padding: 18px 15px !important;
		border-radius: 12px;
	}

	body.aisys-tienda form.checkout .input-text,
	body.aisys-tienda form.checkout input[type="text"],
	body.aisys-tienda form.checkout input[type="email"],
	body.aisys-tienda form.checkout input[type="tel"],
	body.aisys-tienda form.checkout textarea,
	body.aisys-tienda form.checkout select {
		/* 16px justos: por debajo de eso, el iPhone hace zoom solo al tocar el
		   campo y el formulario se descoloca entero. */
		font-size: 16px !important;
		min-height: 48px !important;
	}

	body.aisys-tienda #place_order {
		font-size: 16px !important;
		min-height: 54px !important;
	}

	/* La tabla, más apretada, y los importes sin partirse. */
	.aisys-tienda .woocommerce-checkout-review-order-table th,
	.aisys-tienda .woocommerce-checkout-review-order-table td {
		padding: 12px 0 !important;
		font-size: 14px !important;
	}

	.aisys-tienda .woocommerce-checkout-review-order-table th:first-child,
	.aisys-tienda .woocommerce-checkout-review-order-table td:first-child {
		width: 58%;
		padding-right: 10px !important;
	}

	.aisys-tienda .woocommerce-checkout-review-order-table th:last-child,
	.aisys-tienda .woocommerce-checkout-review-order-table td:last-child {
		width: 42%;
	}

	.aisys-tienda .order-total th,
	.aisys-tienda .order-total td {
		font-size: 17px !important;
	}

	/* El envío, que no se salga por la derecha con nombres largos. */
	.aisys-tienda ul#shipping_method li {
		font-size: 13px;
		line-height: 1.4;
		word-wrap: break-word;
	}

	/* Los adornos del tema alrededor de los títulos se salen 2000px; en móvil
	   no aportan nada y solo estorban. */
	.aisys-tienda .ui--title-borders {
		display: none;
	}
}

/* ---------------------------------------------------------------
 *  La invitación a crear cuenta (solo si no ha iniciado sesión)
 * --------------------------------------------------------------- */

.aisys-tienda .aisys-sugerencia-cuenta {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 4px 0 14px;
	padding: 16px 18px;
	background: linear-gradient(180deg, #f2fbfd 0%, #ecf8fb 100%);
	border: 1px solid #c9e7ef;
	border-radius: 12px;
}

.aisys-tienda .aisys-sc-icono {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	background: #fff;
	border: 1px solid #cbe8f0;
	border-radius: 50%;
}

.aisys-tienda .aisys-sc-texto {
	flex: 1 1 auto;
	min-width: 0;
}

/* Solo el título va en su propia línea. Con «strong» a secas, la negrita de
   dentro de la lista también se ponía en bloque y partía la frase en dos:
   «El» en una línea y «seguimiento de tus pedidos» en la siguiente. */
.aisys-tienda .aisys-sc-texto > strong {
	display: block;
	font-size: 15px;
	color: #0b5c72;
	margin: 1px 0 5px;
}

.aisys-tienda .aisys-sc-texto li strong,
.aisys-tienda .aisys-sc-texto p strong {
	display: inline;
	font-size: inherit;
	color: #2b4a55;
	margin: 0;
}

.aisys-tienda .aisys-sc-texto p {
	margin: 0 0 7px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #3f5c66;
}

.aisys-tienda .aisys-sc-texto ul {
	margin: 0 0 9px;
	padding: 0 0 0 18px;
	font-size: 13.5px;
	line-height: 1.55;
	color: #3f5c66;
}

.aisys-tienda .aisys-sc-texto li {
	margin: 0 0 3px;
}

.aisys-tienda .aisys-sc-nota {
	margin: 0 !important;
	font-size: 12.5px !important;
	color: #6f8b95 !important;
}

@media (max-width: 782px) {
	.aisys-tienda .aisys-sugerencia-cuenta {
		padding: 14px;
		gap: 11px;
	}
	.aisys-tienda .aisys-sc-icono {
		width: 32px;
		height: 32px;
		font-size: 16px;
	}
}

/* ---------------------------------------------------------------
 *  Crear cuenta: la casilla y las contraseñas
 * --------------------------------------------------------------- */

/* La casilla, como una barra que se pulsa entera. Antes salían dos recuadros
   sueltos, uno con el cuadrito y otro con el texto, sin relación aparente. */
.aisys-tienda .woocommerce-account-fields > .create-account,
.aisys-tienda .woocommerce-account-fields > p.create-account {
	margin: 0 0 14px !important;
	padding: 0 !important;
}

.aisys-tienda .woocommerce-account-fields .create-account > label,
.aisys-tienda .woocommerce-account-fields > .form-row > label.checkbox {
	display: flex !important;
	align-items: center;
	gap: 11px;
	margin: 0 !important;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--aisys-borde);
	border-radius: 11px;
	font-size: 15px;
	font-weight: 600;
	color: var(--aisys-texto);
	cursor: pointer;
	transition: border-color .12s, background .12s;
}

.aisys-tienda .woocommerce-account-fields .create-account > label:hover {
	border-color: #b9dbe5;
	background: #fbfeff;
}

.aisys-tienda .woocommerce-account-fields .create-account > label > input[type="checkbox"] {
	width: 19px !important;
	height: 19px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto;
	accent-color: var(--aisys-marca);
	cursor: pointer;
}

/* Marcada: se resalta, igual que la forma de pago elegida. */
.aisys-tienda .woocommerce-account-fields .create-account:has(input:checked) > label {
	border-color: var(--aisys-marca);
	background: #f4fcfe;
	box-shadow: 0 0 0 3px rgba(7, 135, 168, .1);
}

/* Los dos campos de contraseña, en su propio recuadro. */
.aisys-tienda .woocommerce-account-fields .aisys-clave {
	margin: 0 0 12px !important;
}

.aisys-tienda .woocommerce-account-fields .aisys-clave:first-of-type {
	margin-top: 4px !important;
}

.aisys-tienda .woocommerce-account-fields .aisys-clave .description,
.aisys-tienda .woocommerce-account-fields .aisys-clave small {
	display: block;
	margin: 5px 0 0;
	font-size: 12.5px;
	color: var(--aisys-suave);
	background: none;
	border: 0;
	padding: 0;
}

/* EL BOTÓN DEL OJO.
 *
 * Lo pone WooCommerce por su cuenta dentro del campo de contraseña. Sin
 * estilo se queda en un cuadradito gris debajo del campo, que no se entiende.
 * Aquí se coloca dentro del campo, a la derecha, y se le pinta un ojo de
 * verdad con la propia hoja de estilo (nada de imágenes que cargar). */
.aisys-tienda .woocommerce-password-hint,
.aisys-tienda .woocommerce-password-strength {
	display: block;
	margin: 6px 0 0;
	padding: 7px 11px;
	font-size: 12.5px;
	border-radius: 8px;
	background: var(--aisys-fondo);
	color: var(--aisys-suave);
	border: 1px solid var(--aisys-borde-suave);
}

.aisys-tienda .woocommerce-password-strength.short,
.aisys-tienda .woocommerce-password-strength.bad { background: #fdecea; border-color: #f2c4bd; color: #8c2a1d; }
.aisys-tienda .woocommerce-password-strength.good { background: #fff6e3; border-color: #f0dcb4; color: #8a5a00; }
.aisys-tienda .woocommerce-password-strength.strong { background: #eaf7ee; border-color: #bfe0c9; color: #1c6b30; }

.aisys-tienda .woocommerce-form__input-password,
.aisys-tienda .password-input {
	position: relative;
	display: block;
	width: 100%;
}

.aisys-tienda .show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	width: 46px;
	height: 46px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	z-index: 2;
}

/* El ojo, dibujado con dos círculos y un borde. */
.aisys-tienda .show-password-input::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 19px;
	height: 12px;
	margin: -6px 0 0 -9.5px;
	border: 1.6px solid #7d8f9a;
	border-radius: 60% 60% 60% 60% / 100% 100% 100% 100%;
	transition: border-color .12s;
}

.aisys-tienda .show-password-input::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	background: #7d8f9a;
	border-radius: 50%;
	transition: background .12s;
}

.aisys-tienda .show-password-input:hover::before { border-color: var(--aisys-marca); }
.aisys-tienda .show-password-input:hover::after  { background: var(--aisys-marca); }

/* Con la contraseña a la vista, el ojo se tacha. */
.aisys-tienda .show-password-input.display-password::before { border-color: var(--aisys-marca); }
.aisys-tienda .show-password-input.display-password::after {
	background: var(--aisys-marca);
	box-shadow: 0 0 0 1.5px #fff;
}

/* Sitio para el ojo, para que no se coma la última letra.
 *
 * Va con «body» y «form.checkout» delante a propósito: la regla general de los
 * campos ya lleva !important, así que para ganarle hay que ser más específico,
 * no solo gritar más. */
body.aisys-tienda form.checkout .woocommerce-account-fields input[type="password"],
body.aisys-tienda form.checkout .password-input input[type="password"],
body.aisys-tienda form.checkout .password-input input[type="text"],
body.aisys-tienda form.checkout .woocommerce-input-wrapper input[type="password"] {
	padding-right: 48px !important;
}

/* El aviso de que las dos contraseñas no coinciden. */
.aisys-tienda .aisys-clave-aviso {
	margin: 6px 0 0;
	padding: 8px 12px;
	font-size: 13px;
	border-radius: 8px;
	background: #fdecea;
	border: 1px solid #f2c4bd;
	color: #8c2a1d;
}