/* =========================================================================
   Mastercoip 2026 — Finalizar compra.
   Réplica del artboard 11-carrito-finalizar-compra (1920 x 2086).

   Geometría del diseño, contenedor de 1142 px centrado en 1920:
     titular «Finalizar compra»   y=170  Bold 40/48 centrado
     columna izquierda            x=389  w=635
     columna derecha              x=1082 w=449   (hueco 58)
     ficha «¿Eres alumno?»        y=267  h=79    padding 30/40
     ficha de datos               y=386  h=677   padding 43/40
     ficha de pago                y=1103 h=617   padding 33/40
     ficha «Pedido»               y=268  h=464   padding 43/40
     ficha de cupón               y=772  h=79    padding 30/40
     cajas de formulario          556x40 radio 20 borde 1px #29255C
     píldoras de método            175x40 radio 20 borde 1px #29255C
     CTA «PAGAR»                  556x40 radio 20 fondo #FF8181

   Todo cuelga de .coip-checkout para no filtrarse a otras páginas. Las reglas
   con !important son las mínimas para ganarle a woocommerce.css, que se encola
   antes pero con selectores muy específicos.
   ========================================================================= */

.coip-checkout {
	--coip-checkout-card-pad: 40px;
	--coip-checkout-field-border: #29255c;
	--coip-checkout-lh-label: 1.2778; /* 23/18, los rótulos de la pasarela */

	padding-block: 50px 150px;
	color: var(--coip-ink);
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
}

/* -------------------------------------------------------------------------
   Titular y avisos
   ---------------------------------------------------------------------- */

.coip-checkout__title {
	margin: 0 0 49px;
	color: var(--coip-charcoal);
	font-size: var(--coip-fs-h2);
	font-weight: 700;
	line-height: var(--coip-lh);
	text-align: center;
}

/* Los avisos se visten en `assets/css/avisos.css`, que los deja en una tira
   fina para todo el sitio. Aquí sólo se les da sitio.

   El shortcode de WooCommerce los imprime en un
   `<div class="woocommerce-notices-wrapper">` que va ANTES de .coip-checkout,
   y como el envoltorio de la página se suelta a ancho completo (regla de
   abajo), salían de pared a pared por encima del titular. Se les pone el
   contenedor del artboard: la misma caja de 1142 px en la que va todo lo
   demás. El envoltorio se imprime siempre, vacío o no; cuando está vacío lo
   esconde `avisos.css`. */
body.woocommerce-checkout main .woocommerce:has(> .coip-checkout) > .woocommerce-notices-wrapper {
	width: calc(100% - (var(--coip-gutter) * 2));
	max-width: var(--coip-container);
	margin-inline: auto;
	padding-block-start: 40px;
}

/* El hueco del propio bloque —`woocommerce_before_checkout_form`, bajo el
   titular— sólo recibe avisos cuando el de arriba no ha corrido. */
.coip-checkout__notices:empty {
	display: none;
}

/* -------------------------------------------------------------------------
   El envoltorio de WooCommerce, a ancho completo

   El shortcode sale envuelto en un `<div class="woocommerce">` y
   `woocommerce-blocktheme.css` le pone `max-width` con el `contentSize` del
   tema (1000 px). El artboard pide 1142 de contenedor, así que el diseño
   entraba encogido y pegado a la izquierda. Se suelta sólo el envoltorio que
   contiene esta página; el ancho lo sigue poniendo `.coip-wrap`.
   ---------------------------------------------------------------------- */

body.woocommerce-checkout main .woocommerce:has(> .coip-checkout) {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
   Rejilla de dos columnas
   ---------------------------------------------------------------------- */

.coip-checkout__layout {
	display: grid;
	grid-template-columns: minmax(0, 635fr) minmax(0, 449fr);
	column-gap: 58px;
	align-items: start;
}

.coip-checkout__form,
.coip-checkout__aside {
	display: grid;
	align-content: start;
	gap: 40px;
	min-width: 0;
}

.coip-checkout__card {
	padding: var(--coip-checkout-card-pad);
	background: var(--coip-white);
	border: 1px solid var(--coip-charcoal);
	border-radius: var(--coip-radius);
}

/* -------------------------------------------------------------------------
   Ficha «¿Eres alumno?» y ficha de cupón: 79 px de alto, texto a 30 del borde
   ---------------------------------------------------------------------- */

.coip-checkout__card--login,
.coip-checkout__card--coupon {
	padding-block: 30px;
}

.coip-checkout__login,
.coip-checkout__coupon-toggle p {
	margin: 0;
	color: var(--coip-ink);
	font-size: var(--coip-fs-ui);
	font-weight: 400;
	line-height: var(--coip-lh-ui);
}

.coip-checkout__login a,
.coip-checkout__coupon-toggle a {
	color: var(--coip-lilac);
	font-weight: 600;
	text-decoration: none;
	text-underline-offset: 3px;
	transition: color var(--coip-dur-rapida) var(--coip-ease);
}

/* Gesto 2 (rellenar) en su versión de enlace: subrayado y un tono más oscuro.
   Sólo el subrayado no bastaba —sobre el lila claro de la ficha es un cambio
   que se pierde—, y ninguno de los dos mueve nada, así que no necesitan el
   guardia de hover. */
.coip-checkout__login a:hover,
.coip-checkout__login a:focus-visible,
.coip-checkout__coupon-toggle a:hover,
.coip-checkout__coupon-toggle a:focus-visible {
	color: var(--coip-violet);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Titulares de sección dentro de las fichas
   ---------------------------------------------------------------------- */

.coip-checkout__h2 {
	margin: 0 0 30px;
	color: var(--coip-charcoal);
	font-size: var(--coip-fs-body);
	font-weight: 600;
	line-height: var(--coip-lh);
}

.coip-checkout__h2--spaced {
	margin-top: 50px;
}

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

.coip-checkout__card--fields {
	padding-block: 43px;
}

.coip-checkout__rows {
	display: grid;
	gap: 19px;
}

.coip-checkout .form-row {
	margin: 0;
	padding: 0;
	display: block;
	width: 100%;
	float: none; /* woocommerce.css flota form-row-first / form-row-last */
}

.coip-checkout .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.coip-checkout .input-text,
.coip-checkout input[type="text"],
.coip-checkout input[type="email"],
.coip-checkout input[type="tel"],
.coip-checkout input[type="number"],
.coip-checkout input[type="password"],
.coip-checkout select,
.coip-checkout textarea {
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 23px;
	background: var(--coip-white);
	border: 1px solid var(--coip-checkout-field-border);
	border-radius: var(--coip-radius);
	box-shadow: none;
	color: var(--coip-ink);
	font-family: inherit;
	font-size: var(--coip-fs-ui);
	font-weight: 400;
	line-height: var(--coip-lh-ui);
	appearance: none;
}

.coip-checkout textarea {
	height: auto;
	min-height: 120px;
	padding-block: 12px;
	border-radius: var(--coip-radius-sm);
	line-height: 1.4;
}

.coip-checkout .input-text::placeholder,
.coip-checkout textarea::placeholder {
	color: var(--coip-ink);
	font-weight: 300;
	opacity: 1;
}

/* El ratón y el foco de estos campos los pone assets/css/forms.css, que es
   quien tiene el halo compartido de todo el sitio; aquí abajo, en la sección
   de reconquista, sólo se repite con la especificidad que hace falta para que
   WooCommerce no se lo lleve por delante. */

/* Estado de error de la validación de WooCommerce. */
.coip-checkout .woocommerce-invalid .input-text,
.coip-checkout .woocommerce-invalid select,
.coip-checkout .woocommerce-invalid .select2-selection--single {
	border-color: var(--coip-coral);
}

.coip-checkout .woocommerce-validated .input-text,
.coip-checkout .woocommerce-validated select {
	border-color: var(--coip-checkout-field-border);
}

/* El `<select>` nativo (sin select2) lleva el triángulo del diseño. */
.coip-checkout select {
	padding-inline-end: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9'%3E%3Cpath d='M 0 0 L 11 0 L 5.5 9 Z' fill='%23292b32'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 11px 9px;
}

.coip-checkout .create-account,
.coip-checkout__account {
	margin-top: 19px;
}

/* La cuenta cuelga del correo: su primer hijo no suma otro hueco al del bloque. */
.coip-checkout__account > :first-child {
	margin-top: 0;
}

.coip-checkout .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
}

/* La casilla la pinta assets/css/forms.css; en el pago es algo menor. */
.coip-checkout .woocommerce-form__input-checkbox {
	--coip-check-size: 16px;
}

/* -------------------------------------------------------------------------
   Reconquista de los campos frente a WooCommerce

   Tres hojas de WooCommerce pintan los campos del checkout con más
   especificidad que `.coip-checkout .input-text` (0,2,0), así que aunque
   `checkout.css` se encole después, pierde:

     .woocommerce-page form .form-row input.input-text  (0,3,2)  blocktheme
        → font-size: small · padding: .9rem 1.1rem
     .woocommerce form .form-row .input-text            (0,3,1)  woocommerce.css
        → border/border-radius de --wc-form-* · padding: .5em
     .woocommerce form .form-row                        (0,3,1)  woocommerce.css
        → padding: 3px

   Resultado sin esto: cajas de 46,8 px con esquinas de 4 px, borde granate y
   texto de 13 px, es decir lo contrario del artboard (40 px, radio 20, borde
   #29255C, texto de 16). Se recuperan sólo esas propiedades, con el prefijo
   `body.woocommerce-checkout` —que ya usa el bloque de select2 más abajo— para
   llegar a (0,4,x) sin recurrir a `!important`.
   ---------------------------------------------------------------------- */

body.woocommerce-checkout .coip-checkout .form-row {
	margin: 0;
	padding: 0;
}

body.woocommerce-checkout .coip-checkout .form-row .input-text,
body.woocommerce-checkout .coip-checkout .form-row input[type="text"],
body.woocommerce-checkout .coip-checkout .form-row input[type="email"],
body.woocommerce-checkout .coip-checkout .form-row input[type="tel"],
body.woocommerce-checkout .coip-checkout .form-row input[type="number"],
body.woocommerce-checkout .coip-checkout .form-row input[type="password"],
body.woocommerce-checkout .coip-checkout .form-row select {
	height: 40px;
	padding: 0 23px;
	border: 1px solid var(--coip-checkout-field-border);
	border-radius: var(--coip-radius);
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
}

body.woocommerce-checkout .coip-checkout .form-row select {
	padding-inline-end: 44px;
}

body.woocommerce-checkout .coip-checkout .form-row textarea {
	height: auto;
	min-height: 120px;
	padding: 12px 23px;
	border: 1px solid var(--coip-checkout-field-border);
	border-radius: var(--coip-radius-sm);
	font-size: var(--coip-fs-ui);
}

/* Ratón y foco de los campos, con el nivel de esta sección

   El halo lo define assets/css/forms.css, pero allí va envuelto en :where()
   —es un valor por defecto y tiene que poder perder— así que se queda en
   (0,1,0). Aquí dentro cualquier regla se lo come, empezando por el
   `.coip-checkout .input-text { box-shadow: none }` de más arriba, que existe
   para quitarle a WooCommerce su sombra interior. Repetirlo con el prefijo
   `body.woocommerce-checkout` de esta sección lo deja fuera de discusión.

   El foco añade el contorno del diseño (carbón, no el currentColor genérico
   de forms.css: dentro de estas fichas el texto es negro puro y el carbón es
   el color con el que se dibuja todo lo demás) y duplica el halo, para que a
   simple vista no haya duda de en qué caja se está escribiendo.

   Ninguno de los dos estados toca el `border-color`: ese borde es el que usa
   la validación de WooCommerce para pintar de coral el campo que falta, y
   estas reglas le ganarían en especificidad —el error dejaría de verse justo
   cuando el usuario va a corregirlo—. El halo y el contorno se suman al
   borde en vez de sustituirlo. */
@media (hover: hover) and (pointer: fine) {
	body.woocommerce-checkout .coip-checkout .form-row :is(
			.input-text,
			input[type="text"],
			input[type="email"],
			input[type="tel"],
			input[type="number"],
			input[type="password"],
			select,
			textarea
		):not([disabled]):not([readonly]):hover {
		box-shadow: 0 0 0 3px var(--coip-field-ring);
	}
}

body.woocommerce-checkout .coip-checkout .form-row :is(
		.input-text,
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		input[type="number"],
		input[type="password"],
		select,
		textarea
	):focus-visible,
body.woocommerce-checkout .coip-checkout .form-row select:focus {
	outline: 2px solid var(--coip-charcoal);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--coip-field-ring-fuerte);
}

/* El campo de teléfono lo envuelve woo-phone-validator en su propio contenedor
   con la bandera del país; sin esto se sale de la caja. */
body.woocommerce-checkout .coip-checkout .form-row .iti {
	display: block;
	width: 100%;
}

body.woocommerce-checkout .coip-checkout .form-row .iti .input-text {
	padding-inline-start: 52px;
}

/* La validación de WooCommerce vuelve a pintar el borde; se le gana igual. */
body.woocommerce-checkout .coip-checkout .woocommerce-invalid .input-text,
body.woocommerce-checkout .coip-checkout .woocommerce-invalid select {
	border-color: var(--coip-coral);
}

body.woocommerce-checkout .coip-checkout .woocommerce-validated .input-text,
body.woocommerce-checkout .coip-checkout .woocommerce-validated select {
	border-color: var(--coip-checkout-field-border);
}

/* La tabla del resumen: `woocommerce-blocktheme.css` la deja al 70 % del ancho
   y con 1em de relleno en cada celda, cuando el artboard la quiere a los 369 px
   completos de la ficha y con el ritmo vertical del diseño. */
body.woocommerce-checkout .coip-checkout table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

body.woocommerce-checkout .coip-checkout table.shop_table th,
body.woocommerce-checkout .coip-checkout table.shop_table td {
	padding: 0;
	border: 0;
	text-align: start;
	vertical-align: top;
}

body.woocommerce-checkout .coip-checkout table.shop_table thead th,
body.woocommerce-checkout .coip-checkout table.shop_table tbody td {
	padding-bottom: 25px;
}

body.woocommerce-checkout .coip-checkout table.shop_table tbody tr:last-child td {
	padding-bottom: 41px;
}

body.woocommerce-checkout .coip-checkout table.shop_table tfoot th,
body.woocommerce-checkout .coip-checkout table.shop_table tfoot td {
	padding-bottom: 16.5px;
}

body.woocommerce-checkout .coip-checkout table.shop_table tfoot tr:last-child th,
body.woocommerce-checkout .coip-checkout table.shop_table tfoot tr:last-child td {
	padding-top: 20px;
	padding-bottom: 0;
	border-top: 1px solid var(--coip-charcoal);
}

body.woocommerce-checkout .coip-checkout table.shop_table th:first-child,
body.woocommerce-checkout .coip-checkout table.shop_table td:first-child {
	width: 73.4%;
	padding-inline-end: 12px;
}

/* Las etiquetas ocultas no deben dejar hueco. */
body.woocommerce-checkout .coip-checkout label.screen-reader-text {
	margin: 0;
}

/* select2: `woocommerce-blocktheme.css` llega a (0,5,1) con el relleno y la
   posición de la flecha, así que hay que igualarle el nivel. */
body.woocommerce-checkout .coip-checkout form .form-row .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 44px 0 23px;
	font-size: var(--coip-fs-ui);
	line-height: 38px;
}

body.woocommerce-checkout .coip-checkout form .form-row .select2-container .select2-selection--single .select2-selection__arrow {
	right: 8px;
	width: 11px;
	height: 40px;
}

/* Y el mismo problema con el botón: `.woocommerce #payment #place_order`
   (1,3,0) le gana a `.coip-checkout #place_order` (1,1,0). El relleno del
   gesto 2 no necesita esta escalada —va en una variable, y nadie más la
   escribe—, así que se declara una sola vez, más abajo. */
body.woocommerce-checkout .coip-checkout #place_order {
	width: 100%;
	height: 40px;
	padding: 0 32px;
	background: var(--coip-coral);
	border: 1px solid var(--coip-coral);
	border-radius: var(--coip-radius);
	color: var(--coip-cream);
	font-size: var(--coip-fs-ui);
	font-weight: 500;
	line-height: 38px;
}

/* -------------------------------------------------------------------------
   Desplegables select2 de país y provincia

   Select2 saca el `.select2-container` entero de `.coip-checkout` en cuanto
   se abre —pasa a colgar directo de <body>, para no quedar recortado por
   ninguna caja con overflow—, así que el panel desplegado no ve
   `--coip-checkout-field-border`: esa variable sólo existe dentro de
   `.coip-checkout` y un var() que no la encuentra no cae al valor de la
   regla de select2.css de abajo, cae al valor inicial de la propiedad. Por
   eso el desplegable salía sin borde ni fondo propios aunque el radio sí se
   aplicara (--coip-radius vive en :root, visible desde cualquier sitio). Se
   le da un valor de reserva igual, `var(--x, #29255c)`, allí donde hace
   falta.

   De paso, el panel deja de copiar el radio de píldora de las cajas (20px
   queda raro en una lista larga) y pasa a --coip-radius-sm con sombra en vez
   de borde plano, buscador diferenciado del fondo y scroll fino a juego con
   el del carrito.
   ---------------------------------------------------------------------- */

.coip-checkout .select2-container {
	width: 100% !important; /* select2 fija el ancho en línea al inicializarse */
}

.coip-checkout .select2-container--default .select2-selection--single {
	height: 40px;
	background: var(--coip-white);
	border: 1px solid var(--coip-checkout-field-border);
	border-radius: var(--coip-radius);
	transition: border-color var(--coip-dur) var(--coip-ease),
		box-shadow var(--coip-dur-rapida) var(--coip-ease);
}

/* La caja de select2 no es un <select>, así que forms.css no la alcanza: se le
   repite a mano el mismo halo para que país y provincia contesten igual que el
   resto de campos. `--focus` y `--open` son las clases que la propia librería
   pone en el contenedor. */
@media (hover: hover) and (pointer: fine) {
	.coip-checkout .select2-container--default .select2-selection--single:hover {
		box-shadow: 0 0 0 3px var(--coip-field-ring);
	}
}

.coip-checkout .select2-container--default.select2-container--focus .select2-selection--single,
.coip-checkout .select2-container--default.select2-container--open .select2-selection--single {
	box-shadow: 0 0 0 3px var(--coip-field-ring-fuerte);
}

.coip-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 44px 0 23px;
	color: var(--coip-ink);
	font-size: var(--coip-fs-ui);
	font-weight: 400;
	line-height: 38px;
}

.coip-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--coip-ink);
	font-weight: 300;
}

.coip-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 8px;
	width: 11px;
	height: 40px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9'%3E%3Cpath d='M 0 0 L 11 0 L 5.5 9 Z' fill='%23292b32'/%3E%3C/svg%3E") no-repeat center / 11px 9px;
	transition: transform var(--coip-dur) var(--coip-ease);
}

.coip-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: none;
}

/* Abierto, el artboard tiñe el triángulo del color del borde y lo gira. */
.coip-checkout .select2-container--open .select2-selection--single .select2-selection__arrow {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9'%3E%3Cpath d='M 0 0 L 11 0 L 5.5 9 Z' fill='%2329255c'/%3E%3C/svg%3E");
	transform: rotate(180deg);
}

body.woocommerce-checkout .select2-container--default .select2-dropdown {
	margin-top: 8px;
	background: var(--coip-white);
	/* Mismo borde que las cajas del formulario —1px, --coip-checkout-field-
	   border— en vez del 12% de opacidad de antes: sin él el panel quedaba
	   demasiado suelto del resto de la ficha. Sigue haciendo falta la reserva
	   de la nota de arriba: la variable no llega hasta aquí. */
	border: 1px solid var(--coip-checkout-field-border, #29255c);
	border-radius: var(--coip-radius-sm);
	box-shadow: 0 16px 32px rgba(41, 37, 92, 0.16);
	overflow: hidden;
}

body.woocommerce-checkout .select2-container--default .select2-dropdown--above {
	margin-top: 0;
	margin-bottom: 8px;
}

/* El buscador es su propia caja —clara sobre el fondo blanco del panel—, no
   la tira gris pegada al borde que trae select2 por defecto. */
body.woocommerce-checkout .select2-container--default .select2-search--dropdown {
	padding: 10px;
	background: var(--coip-white);
	border-bottom: 1px solid #eee;
}

body.woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field {
	height: 38px;
	padding: 0 16px;
	background: #f7f6fb;
	border: 1px solid transparent;
	border-radius: var(--coip-radius-sm);
	font-family: "RNS Sanz", "Helvetica Neue", Arial, sans-serif;
	font-size: var(--coip-fs-ui);
	outline: none;
	transition: border-color var(--coip-dur) var(--coip-ease);
}

body.woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--coip-checkout-field-border, #29255c);
}

body.woocommerce-checkout .select2-container--default .select2-results__options {
	padding: 8px;
	scrollbar-width: thin;
	scrollbar-color: #e6e6e6 transparent;
}

body.woocommerce-checkout .select2-container--default .select2-results__options::-webkit-scrollbar {
	width: 7px;
}

body.woocommerce-checkout .select2-container--default .select2-results__options::-webkit-scrollbar-track {
	background: transparent;
}

body.woocommerce-checkout .select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
	background: #e6e6e6;
	border-radius: 4px;
}

/* Cada opción es su propia píldora redondeada dentro del panel, en vez de
   una franja a sangre que choca con el radio del contenedor. */
body.woocommerce-checkout .select2-container--default .select2-results__option {
	margin: 2px 0;
	padding: 9px 13px;
	border-radius: var(--coip-radius-sm);
	font-family: "RNS Sanz", "Helvetica Neue", Arial, sans-serif;
	font-size: var(--coip-fs-ui);
	font-weight: 400;
	line-height: var(--coip-lh-ui);
	transition: background-color var(--coip-dur) var(--coip-ease), color var(--coip-dur) var(--coip-ease);
}

/* La opción ya elegida, sin abrir: un tinte suave del propio color de foco. */
body.woocommerce-checkout .select2-container--default .select2-results__option[aria-selected="true"],
body.woocommerce-checkout .select2-container--default .select2-results__option[data-selected="true"] {
	background: rgba(157, 154, 255, 0.14);
	font-weight: 600;
}

body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected],
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--coip-lilac);
	color: var(--coip-white);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Selector de país del teléfono (woo-phone-validator / intl-tel-input)

   La librería trae su propio CSS de 2018: lista cuadrada, borde gris #ccc,
   sombra plana y una fila de 5px de alto por país. Aquí sólo se cambian
   color, radio, sombra y tipografía para que hable el idioma del resto del
   checkout —el marcado (`.country-list`, `.country`, `.highlight`…) es el
   de la librería y no se toca—.
   ---------------------------------------------------------------------- */

body.woocommerce-checkout .coip-checkout .intl-tel-input .country-list {
	margin-top: 8px;
	padding: 8px;
	background: var(--coip-white);
	/* Mismo borde que las cajas del formulario, a juego con el desplegable de
	   select2 de aquí arriba. */
	border: 1px solid var(--coip-checkout-field-border, #29255c);
	border-radius: var(--coip-radius-sm);
	box-shadow: 0 16px 32px rgba(41, 37, 92, 0.16);
	scrollbar-width: thin;
	scrollbar-color: #e6e6e6 transparent;
}

body.woocommerce-checkout .coip-checkout .intl-tel-input .country-list.dropup {
	margin-top: 0;
	margin-bottom: 8px;
}

body.woocommerce-checkout .coip-checkout .intl-tel-input .country-list::-webkit-scrollbar {
	width: 7px;
}

body.woocommerce-checkout .coip-checkout .intl-tel-input .country-list::-webkit-scrollbar-track {
	background: transparent;
}

body.woocommerce-checkout .coip-checkout .intl-tel-input .country-list::-webkit-scrollbar-thumb {
	background: #e6e6e6;
	border-radius: 4px;
}

body.woocommerce-checkout .coip-checkout .intl-tel-input .country-list .country {
	margin: 2px 0;
	padding: 9px 12px;
	border-radius: var(--coip-radius-sm);
	font-family: "RNS Sanz", "Helvetica Neue", Arial, sans-serif;
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
	transition: background-color var(--coip-dur) var(--coip-ease);
}

body.woocommerce-checkout .coip-checkout .intl-tel-input .country-list .country .dial-code {
	color: rgba(41, 43, 50, 0.5);
}

body.woocommerce-checkout .coip-checkout .intl-tel-input .country-list .country.highlight {
	background-color: var(--coip-lilac);
}

body.woocommerce-checkout .coip-checkout .intl-tel-input .country-list .country.highlight .dial-code {
	color: var(--coip-white);
	opacity: 0.85;
}

body.woocommerce-checkout .coip-checkout .intl-tel-input .country-list .divider {
	margin: 4px 4px 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid #eee;
}

/* La flechita del selector de bandera, del mismo violeta que el resto de
   iconos del checkout en vez del gris por defecto de la librería. */
body.woocommerce-checkout .coip-checkout .intl-tel-input .selected-flag .iti-arrow {
	border-top-color: var(--coip-checkout-field-border, #29255c);
}

body.woocommerce-checkout .coip-checkout .intl-tel-input .selected-flag .iti-arrow.up {
	border-bottom-color: var(--coip-checkout-field-border, #29255c);
}

/* -------------------------------------------------------------------------
   Ficha de pago
   ---------------------------------------------------------------------- */

.coip-checkout__card--payment {
	padding-block: 33px 72px;
}

.coip-checkout .payment_methods {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 15px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.coip-checkout__method {
	display: flex;
	align-items: center;
	gap: 15px;
	min-width: 175px;
	height: 40px;
	margin: 0;
	padding: 0 15px;
	background: none;
	border: 1px solid var(--coip-checkout-field-border);
	border-radius: var(--coip-radius);
	transition: background-color var(--coip-dur-rapida) var(--coip-ease),
		border-color var(--coip-dur-rapida) var(--coip-ease);
}

.coip-checkout__method input.input-radio {
	flex: none;
	width: 11px;
	height: 11px;
	margin: 0;
	padding: 0;
	background: var(--coip-white);
	border: 1px solid var(--coip-checkout-field-border);
	border-radius: 50%;
	appearance: none;
	cursor: pointer;
}

.coip-checkout__method input.input-radio:checked {
	background: var(--coip-checkout-field-border);
	box-shadow: inset 0 0 0 2px var(--coip-white);
}

/* La elegida se marca con tinte lila y borde doble; la regla que manda dentro
   de `#payment` está en «Reconquista de la ficha de pago», más abajo. */
.coip-checkout__method:has(input.input-radio:checked) {
	background: rgba(157, 154, 255, 0.16);
	box-shadow: inset 0 0 0 1px var(--coip-checkout-field-border);
}

/* Foco de teclado del radio: sin esto el contorno del navegador cae sobre un
   círculo de 11 px y no se ve. Se saca fuera para que rodee al propio radio,
   no a la píldora. */
.coip-checkout__method input.input-radio:focus-visible {
	outline: 2px solid var(--coip-charcoal);
	outline-offset: 3px;
}

.coip-checkout__method label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	color: var(--coip-ink);
	font-size: var(--coip-fs-ui);
	font-weight: 500;
	line-height: var(--coip-lh-ui);
	cursor: pointer;
}

/* Los tres glifos del artboard miden 11 px de alto (tarjeta 14,5 · Paypal 9,5 ·
   Stripe 11 de ancho). Los SVG del tema traen width/height propios, así que se
   fija el alto y el ancho se deja libre para no deformarlos. */
.coip-checkout__method label img,
.coip-checkout__method label svg {
	height: 11px;
	max-height: 11px;
	width: auto;
	margin: 0;
	padding: 0;
	color: var(--coip-charcoal);
	flex: none;
}

.coip-checkout__methods-empty {
	flex: 1 1 100%;
	list-style: none;
}

/* El aviso de «no hay métodos de pago» va pegado dentro de la ficha: sin el
   margen inferior que `avisos.css` da a los avisos sueltos. La cadena lleva
   .coip-checkout para pesar más que la regla global. */
.coip-checkout .coip-checkout__methods-empty .woocommerce-info,
.coip-checkout .coip-checkout__methods-empty .woocommerce-notice,
.coip-checkout .coip-checkout__methods-empty .wc-block-components-notice-banner {
	margin: 0;
}

.coip-checkout__payboxes {
	display: grid;
	gap: 12px;
}

.coip-checkout .payment_box {
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--coip-ink);
	font-size: var(--coip-fs-ui);
	line-height: 1.4;
}

.coip-checkout .payment_box::before {
	content: none; /* woocommerce.css dibuja un pico sobre la caja */
}

.coip-checkout .payment_box p {
	margin: 0 0 12px;
}

.coip-checkout .payment_box p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   «Datos de pago»: el formulario de tarjeta de la pasarela

   El artboard dibuja tres rótulos visibles sobre sus campos —«Número de
   tarjeta» (556), y debajo «Fecha de caducidad» y «Código de seguridad» a
   263 cada uno con 30 de hueco—. Ese marcado no lo pinta el tema sino la
   pasarela: WooCommerce estandariza el formulario de tarjeta en
   `.wc-credit-card-form` con `form-row-wide` / `form-row-first` /
   `form-row-last`, que es lo que usan Redsys InSite y compañía. Aquí se le da
   la forma del diseño sin tocar su HTML.

   A diferencia del resto del formulario, estos rótulos SÍ se ven: el diseño los
   dibuja fuera de la caja, no dentro.
   ---------------------------------------------------------------------- */

.coip-checkout .wc-credit-card-form,
.coip-checkout .wc-payment-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 27px 30px; /* 27 entre bloques rótulo+campo, 30 entre columnas */
	margin: 0;
	padding: 0;
	border: 0;
}

.coip-checkout .wc-credit-card-form > .form-row,
.coip-checkout .wc-payment-form > .form-row {
	grid-column: span 2;
}

.coip-checkout .wc-credit-card-form > .form-row-first,
.coip-checkout .wc-payment-form > .form-row-first,
.coip-checkout .wc-credit-card-form > .form-row-last,
.coip-checkout .wc-payment-form > .form-row-last {
	grid-column: span 1;
}

/* El rótulo se alinea con el borde del campo, no con su texto interior. */
.coip-checkout .wc-credit-card-form label,
.coip-checkout .wc-payment-form label {
	display: block;
	margin: 0 0 5px;
	padding: 0;
	color: var(--coip-charcoal);
	font-size: var(--coip-fs-card-sub);
	font-weight: 500;
	line-height: var(--coip-checkout-lh-label);
}

.coip-checkout .wc-credit-card-form label .required,
.coip-checkout .wc-payment-form label .required {
	border: 0;
	color: inherit;
	text-decoration: none;
}

/* Las pasarelas suelen marcar estos campos con un fondo de logotipo de marca
   pegado al borde derecho; se le hace sitio. */
.coip-checkout .wc-credit-card-form-card-number,
.coip-checkout .wc-credit-card-form-card-expiry,
.coip-checkout .wc-credit-card-form-card-cvc {
	background-position: right 16px center;
	background-repeat: no-repeat;
}

/* Los campos alojados en iframe (Stripe, Redsys InSite) no son inputs: la
   pasarela inyecta un contenedor vacío y monta dentro su propio campo. Se le
   da la misma caja para que no se descuadre. */
.coip-checkout .wc-stripe-elements-field,
.coip-checkout .wc-payment-form .wc-stripe-elements-field,
.coip-checkout .payment_box .StripeElement,
.coip-checkout .payment_box [id$="-card-element"] {
	display: flex;
	align-items: center;
	width: 100%;
	height: 40px;
	padding: 0 23px;
	background: var(--coip-white);
	border: 1px solid var(--coip-checkout-field-border);
	border-radius: var(--coip-radius);
}

/* -------------------------------------------------------------------------
   Reconquista de la ficha de pago frente a WooCommerce

   Dentro de `#payment` WooCommerce usa selectores con ID —hasta
   `.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number`,
   que es (1,3,2)— así que ninguna regla de clase les gana. Se repite el mismo
   patrón añadiendo `body` y `.coip-checkout` delante para llegar a (1,4,3).

   Lo que hay que deshacer, y por qué se nota:
     ul.payment_methods            padding 1em + borde inferior  → las píldoras
                                   salían desplazadas 16 px y con una raya
     ul.payment_methods li         line-height 2                 → píldoras de 40
                                   con el texto descentrado
     li input                      margin 0 1em 0 0              → doble hueco
     li img                        margin -2px 0 0 .5em          → icono subido
     div.form-row                  padding 1em                   → el botón PAGAR
                                   medía 521 en vez de 553
     div.payment_box               fondo #dcd7e2 + pico ::before → caja lila
     .wc-credit-card-form input    font-size 1.5em, padding 8px  → texto de 22 px
   ---------------------------------------------------------------------- */

/* `.woocommerce-checkout #payment` trae fondo lila y esquinas propias; el
   artboard no dibuja ninguna caja ahí dentro. */
body.woocommerce-checkout .coip-checkout #payment {
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
}

body.woocommerce-checkout .coip-checkout #payment ul.payment_methods {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 15px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	text-align: start;
}

body.woocommerce-checkout .coip-checkout #payment ul.payment_methods::before,
body.woocommerce-checkout .coip-checkout #payment ul.payment_methods::after {
	content: none;
}

/* El artboard pone píldoras de 175, pero los nombres reales de las pasarelas
   («Transferencia bancaria directa», «Direct bank transfer») no caben en 175 y
   partían en dos líneas dentro de una píldora de 40. Ahora 175 es el mínimo:
   cada píldora mide lo que su nombre, en una sola línea, y si no caben todas
   en la fila la siguiente baja entera. */
body.woocommerce-checkout .coip-checkout #payment ul.payment_methods li.coip-checkout__method {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	gap: 12px;
	min-width: 175px;
	max-width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 22px 0 16px;
	background: var(--coip-white);
	border: 1px solid var(--coip-checkout-field-border);
	border-radius: var(--coip-radius);
	font-weight: 400;
	line-height: var(--coip-lh-ui);
	text-align: start;
	white-space: nowrap;
	transition: background-color var(--coip-dur-rapida) var(--coip-ease),
		box-shadow var(--coip-dur-rapida) var(--coip-ease);
}

body.woocommerce-checkout .coip-checkout #payment ul.payment_methods li.coip-checkout__method label {
	white-space: nowrap;
}

body.woocommerce-checkout .coip-checkout #payment ul.payment_methods li.coip-checkout__method::before,
body.woocommerce-checkout .coip-checkout #payment ul.payment_methods li.coip-checkout__method::after {
	content: none;
}

/* Gesto 2 (rellenar) del lenguaje de hover de base.css: la píldora se tiñe,
   no se mueve ni se ensancha —ensancharla desplazaría a las otras, que
   comparten fila—. Sólo las NO elegidas, y con la mitad de tinte que la
   elegida: si el hover pintara lo mismo, pasar el ratón por encima haría que
   las píldoras parecieran seleccionadas por turnos.

   Hace falta repetir el prefijo con `#payment` porque la regla que da forma a
   la píldora vive en esta misma sección y llega a (1,4,3): una regla de clase
   suelta no le gana. Y `:focus-within` porque quien la recorre con el teclado
   enfoca el radio de dentro, no la píldora. */
@media (hover: hover) and (pointer: fine) {
	body.woocommerce-checkout .coip-checkout #payment ul.payment_methods li.coip-checkout__method:hover {
		background: rgba(157, 154, 255, 0.08);
	}
}

body.woocommerce-checkout .coip-checkout #payment ul.payment_methods li.coip-checkout__method:focus-within {
	background: rgba(157, 154, 255, 0.08);
}

/* La elegida: tinte lila y borde doble. El segundo trazo es una sombra
   interior y no `border-width: 2px`, que empujaría el contenido 1 px y haría
   bailar el texto al cambiar de método. Va después del hover y pesa más
   (el `:has()` suma su argumento), así que el ratón no la aclara. */
body.woocommerce-checkout .coip-checkout #payment ul.payment_methods li.coip-checkout__method:has(input.input-radio:checked) {
	background: rgba(157, 154, 255, 0.16);
	box-shadow: inset 0 0 0 1px var(--coip-checkout-field-border);
}

/* Radio de 16 con aro de 1,5: el de 11 del artboard se perdía al lado de un
   texto de 16 y apenas distinguía marcado de sin marcar. */
body.woocommerce-checkout .coip-checkout #payment ul.payment_methods li input.input-radio {
	flex: none;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: 0;
	background: var(--coip-white);
	border: 1.5px solid var(--coip-checkout-field-border);
	border-radius: 50%;
	appearance: none;
	transition: box-shadow var(--coip-dur-rapida) var(--coip-ease);
}

body.woocommerce-checkout .coip-checkout #payment ul.payment_methods li input.input-radio:checked {
	background: var(--coip-checkout-field-border);
	box-shadow: inset 0 0 0 3px var(--coip-white);
}

body.woocommerce-checkout .coip-checkout #payment ul.payment_methods li img,
body.woocommerce-checkout .coip-checkout #payment ul.payment_methods li svg {
	height: 11px;
	max-height: 11px;
	width: auto;
	margin: 0;
	padding: 0;
	box-shadow: none;
	vertical-align: middle;
}

body.woocommerce-checkout .coip-checkout #payment ul.payment_methods li img + img {
	margin-inline-start: 6px;
}

/* La caja de la pasarela: sin fondo, sin pico y sin sangrado propio. */
body.woocommerce-checkout .coip-checkout #payment div.payment_box {
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--coip-ink);
	font-size: var(--coip-fs-ui);
	line-height: 1.4;
}

body.woocommerce-checkout .coip-checkout #payment div.payment_box::before {
	content: none;
	border: 0;
}

/* Cuando la pasarela sólo trae texto —la transferencia, Redsys por
   redirección— el párrafo suelto se leía como letra pequeña del pie. Se le
   da una caja con el mismo lila de la píldora elegida, para que se vea que
   es lo que acompaña a ese método. Las que traen formulario de tarjeta se
   quedan sin caja, como en el artboard. */
body.woocommerce-checkout .coip-checkout #payment div.payment_box:not(:has(fieldset, input, select, iframe, .wc-payment-form)) {
	padding: 20px 24px;
	background: rgba(157, 154, 255, 0.12);
	border-radius: var(--coip-radius-sm);
	color: var(--coip-charcoal);
	font-size: 15px;
	line-height: 1.55;
}

body.woocommerce-checkout .coip-checkout #payment div.form-row,
body.woocommerce-checkout .coip-checkout #payment div.payment_box .form-row {
	margin: 0;
	padding: 0;
}

/* «Datos de pago»: rótulo visible sobre el campo, a 5 px, y campo de 40. */
body.woocommerce-checkout .coip-checkout #payment div.payment_box .wc-credit-card-form {
	margin: 0;
	padding: 0;
	border: 0;
}

body.woocommerce-checkout .coip-checkout #payment div.payment_box .wc-credit-card-form label {
	display: block;
	margin: 0 0 5px;
	padding: 0;
	color: var(--coip-charcoal);
	font-size: var(--coip-fs-card-sub);
	font-weight: 500;
	line-height: var(--coip-checkout-lh-label);
}

body.woocommerce-checkout .coip-checkout #payment div.payment_box .wc-credit-card-form input,
body.woocommerce-checkout .coip-checkout #payment div.payment_box .wc-credit-card-form input.input-text,
body.woocommerce-checkout .coip-checkout #payment div.payment_box .wc-credit-card-form-card-number,
body.woocommerce-checkout .coip-checkout #payment div.payment_box .wc-credit-card-form-card-expiry,
body.woocommerce-checkout .coip-checkout #payment div.payment_box .wc-credit-card-form-card-cvc {
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 23px;
	background-color: var(--coip-white);
	background-position: right 16px center;
	background-size: 28px 18px;
	border: 1px solid var(--coip-checkout-field-border);
	border-radius: var(--coip-radius);
	color: var(--coip-ink);
	font-family: inherit;
	font-size: var(--coip-fs-ui);
	font-weight: 400;
	line-height: var(--coip-lh-ui);
}

body.woocommerce-checkout .coip-checkout #payment div.payment_box .wc-credit-card-form input::placeholder {
	color: var(--coip-ink);
	font-weight: 300;
	opacity: 1;
}

/* Deshace el flotado de WooCommerce: la rejilla ya coloca las dos columnas. */
body.woocommerce-checkout .coip-checkout #payment div.payment_box .form-row-first,
body.woocommerce-checkout .coip-checkout #payment div.payment_box .form-row-last {
	float: none;
	width: auto;
}

/* El botón, a ancho completo de la ficha. */
body.woocommerce-checkout .coip-checkout #payment #place_order {
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 32px;
	background: var(--coip-coral);
	border: 1px solid var(--coip-coral);
	border-radius: var(--coip-radius);
	color: var(--coip-cream);
	font-size: var(--coip-fs-ui);
	font-weight: 500;
	line-height: 38px;
}

/* -------------------------------------------------------------------------
   Texto legal y botón PAGAR
   ---------------------------------------------------------------------- */

.coip-checkout__place-order {
	margin-top: 30px;
	padding: 0;
}

.coip-checkout__place-order noscript {
	display: block;
	margin-bottom: 20px;
}

.coip-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 30px;
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
}

.coip-checkout .woocommerce-privacy-policy-text p {
	margin: 0;
	color: var(--coip-ink);
	font-weight: 600;
}

.coip-checkout .woocommerce-privacy-policy-link {
	color: var(--coip-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--coip-dur-rapida) var(--coip-ease);
}

.coip-checkout .woocommerce-privacy-policy-link:hover,
.coip-checkout .woocommerce-privacy-policy-link:focus-visible {
	color: var(--coip-violet);
}

.coip-checkout #place_order {
	position: relative;
	display: block;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 32px;
	background: var(--coip-coral);
	border: 1px solid var(--coip-coral);
	border-radius: var(--coip-radius);
	color: var(--coip-cream);
	font-family: inherit;
	font-size: var(--coip-fs-ui);
	font-weight: 500;
	line-height: 38px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform var(--coip-dur-rapida) var(--coip-ease-suave),
		box-shadow var(--coip-dur-rapida) var(--coip-ease-suave);

	/* Gesto 2 (rellenar): el estado pulsado del XD pasa la píldora a carbón.
	   El barrido lo monta base.css. El rótulo NO se parte en letras aquí: el
	   botón se centra con un `line-height` de 38 px y la vuelta de cada letra
	   recorrería esos 38 px enteros; cta-fx.js lo detecta y se queda sólo con
	   el relleno. */
	--coip-fx-fill: var(--coip-charcoal);
}

.coip-checkout #place_order::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 12px;
	width: 7.32px;
	height: 12.35px;
	transform: translateY(-50%);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.32 12.35'%3E%3Cpath d='M 0.5 0.5 L 6.82 6.18 L 0.5 11.85' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.32 12.35'%3E%3Cpath d='M 0.5 0.5 L 6.82 6.18 L 0.5 11.85' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
	/* El chevron centra su posición con translateY(-50%), así que el avance del
	   hover tiene que ir en el mismo transform: ver más abajo. */
	transition: transform var(--coip-dur-rapida) var(--coip-ease-suave);
}

/* Gestos 2 y 3 del lenguaje de hover: la píldora sube los 2 px de
   --coip-lift-sm con su sombra y el chevron avanza --coip-nudge. Ambos SÍ
   mueven, así que van dentro del guardia; y ambos se apagan solos con
   movimiento reducido, porque los dos tokens valen cero.

   `:enabled` deja fuera al botón deshabilitado: una pasarela que aún no ha
   validado la tarjeta lo desactiva, y un botón muerto que se levanta al
   rozarlo promete algo que no va a pasar. */
@media (hover: hover) and (pointer: fine) {
	.coip-checkout #place_order:enabled:not([aria-disabled="true"]):hover {
		transform: translateY(var(--coip-lift-sm));
		box-shadow: var(--coip-shadow-lift);
	}

	.coip-checkout #place_order:enabled:not([aria-disabled="true"]):hover::after {
		transform: translate(var(--coip-nudge), -50%);
	}
}

.coip-checkout #place_order:enabled:not([aria-disabled="true"]):focus-visible {
	transform: translateY(var(--coip-lift-sm));
	box-shadow: var(--coip-shadow-lift);
}

.coip-checkout #place_order:enabled:not([aria-disabled="true"]):focus-visible::after {
	transform: translate(var(--coip-nudge), -50%);
}

/* Botón deshabilitado y botón en curso

   Los dos estados existen de verdad en esta pantalla: las pasarelas con
   validación en el propio formulario desactivan «PAGAR» hasta que los datos
   de la tarjeta cuadran, y el checkout de WooCommerce le pone la clase
   `processing` al formulario mientras espera respuesta del servidor. Sin esto
   el botón seguía tiñéndose de carbón y levantándose al pasar el ratón, es
   decir contestando como si fuera pulsable cuando no lo es.

   Los selectores llevan `#payment` para alcanzar (2,4,1) y ganarle al hover
   de aquí arriba pase lo que pase con el orden de las reglas. */
body.woocommerce-checkout .coip-checkout #payment #place_order[disabled],
body.woocommerce-checkout .coip-checkout #payment #place_order[aria-disabled="true"] {
	background: rgba(41, 43, 50, 0.16);
	border-color: transparent;
	color: rgba(41, 43, 50, 0.5);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* En marcha: la píldora conserva su color —se está pagando, no ha fallado
   nada— pero se apaga y deja de responder al ratón, así que ni se ilumina ni
   se puede pulsar dos veces. */
body.woocommerce-checkout .coip-checkout .coip-checkout__form.processing #payment #place_order {
	opacity: 0.6;
	cursor: progress;
	pointer-events: none;
	transform: none;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.coip-checkout #place_order {
		transition: none;
	}
}

/* El snippet «Checkout text before submit» del sitio inyecta aquí el texto
   legal con estilos en línea; se le ajusta la tipografía al diseño. */
.coip-checkout__place-order > div[style] {
	margin: 0 0 30px !important; /* el div trae margin en línea */
	color: var(--coip-ink);
	font-size: var(--coip-fs-ui) !important; /* el div trae font-size en línea */
	line-height: var(--coip-lh-ui) !important;
}

.coip-checkout__place-order > div[style] a {
	font-weight: 600;
	text-decoration: underline;
}

.coip-checkout__place-order > hr {
	margin: 0 0 20px !important; /* el hr trae margin en línea */
	border: 0;
	border-top: 1px solid var(--coip-charcoal);
}

/* -------------------------------------------------------------------------
   Resumen del pedido
   ---------------------------------------------------------------------- */

.coip-checkout__card--order {
	padding-block: 43px;
}

.coip-checkout__card--order .coip-checkout__h2 {
	margin-bottom: 40px;
}

.coip-checkout .shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
	border-radius: 0;
}

.coip-checkout .shop_table th,
.coip-checkout .shop_table td {
	padding: 0;
	border: 0;
	text-align: start;
	vertical-align: top;
}

.coip-checkout .shop_table th:first-child,
.coip-checkout .shop_table td:first-child {
	width: 73.4%; /* 271 de 369 px */
	padding-inline-end: 12px;
}

.coip-checkout .shop_table thead th {
	padding-bottom: 25px;
	color: var(--coip-ink);
	font-size: var(--coip-fs-card-sub);
	font-weight: 500;
	line-height: var(--coip-lh-sub);
}

.coip-checkout .shop_table tbody td {
	padding-bottom: 25px;
	color: var(--coip-ink);
	font-size: var(--coip-fs-ui);
	font-weight: 400;
	line-height: var(--coip-lh-ui);
}

.coip-checkout .shop_table tbody tr:last-child td {
	padding-bottom: 41px;
}

/* El artboard escribe los cursos en versales, pero la cabecera «Producto» va en
   caja normal: por eso se limita a las celdas, no a los `th`. */
.coip-checkout .shop_table td.product-name {
	text-transform: uppercase;
}

.coip-checkout .shop_table .product-quantity {
	font-weight: 500;
}

.coip-checkout .shop_table .variation,
.coip-checkout .shop_table dl.variation {
	display: block;
	margin: 0;
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
	text-transform: none;
}

.coip-checkout .shop_table dl.variation dt,
.coip-checkout .shop_table dl.variation dd {
	display: inline;
	margin: 0;
	padding: 0;
	font-weight: 400;
}

.coip-checkout .shop_table dl.variation dd::after {
	content: "";
	display: block;
}

.coip-checkout .shop_table dl.variation p {
	display: inline;
	margin: 0;
}

.coip-checkout .shop_table tfoot th,
.coip-checkout .shop_table tfoot td {
	padding-bottom: 16.5px;
	color: var(--coip-ink);
	font-size: var(--coip-fs-card-sub);
	font-weight: 500;
	line-height: var(--coip-lh-sub);
}

.coip-checkout .shop_table tfoot td {
	font-size: var(--coip-fs-ui);
	font-weight: 400;
	line-height: var(--coip-lh-ui);
}

.coip-checkout .shop_table tfoot tr:last-child th,
.coip-checkout .shop_table tfoot tr:last-child td {
	padding-top: 20px;
	padding-bottom: 0;
	border-top: 1px solid var(--coip-charcoal);
	font-size: var(--coip-fs-card-sub);
	font-weight: 500;
	line-height: var(--coip-lh-sub);
}

.coip-checkout .shop_table tfoot .includes_tax {
	display: block;
	font-size: var(--coip-fs-ui);
	font-weight: 400;
}

.coip-checkout .woocommerce-remove-coupon {
	margin-inline-start: 8px;
	color: var(--coip-coral);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--coip-dur-rapida) var(--coip-ease);
}

/* Quitar un cupón es destructivo: al apuntarlo, el coral se cierra a carbón
   para que se vea que ahí se pulsa y qué se está apuntando exactamente, que
   es un enlace pequeño pegado al importe. */
.coip-checkout .woocommerce-remove-coupon:hover,
.coip-checkout .woocommerce-remove-coupon:focus-visible {
	color: var(--coip-charcoal);
}

/* -------------------------------------------------------------------------
   Cupón

   WooCommerce dibuja `.checkout_coupon` como una ficha propia —borde
   #cfc8d8, radio 5px, 20px de relleno— (woocommerce.css, selector
   `.checkout_coupon`). Sin ganarle, ese recuadro se suma al de
   `.coip-checkout__card--coupon`: una caja redondeada dentro de otra caja
   redondeada. El mismo problema que el botón «PAGAR» de más abajo, y la
   misma solución: `body.woocommerce-checkout .coip-checkout` gana en
   especificidad a `.checkout_coupon` (0,1,0) y a
   `.woocommerce button.button` (0,2,1).
   ---------------------------------------------------------------------- */

body.woocommerce-checkout .coip-checkout .coip-checkout__coupon-form {
	display: grid;
	gap: 12px;
	margin: 20px 0 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

body.woocommerce-checkout .coip-checkout .coip-checkout__coupon-apply {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	/* `.woocommerce-page .woocommerce-form-coupon .button` (woocommerce-
	   blocktheme.css) impone min-height:50px y gana al height de aquí: entre
	   los dos, el navegador se queda con el mayor. Sin anularlo el botón salía
	   10px más alto que el resto de cajas de 40px del diseño. */
	min-height: 0;
	margin: 0;
	padding: 0 24px;
	background: var(--coip-charcoal);
	border: 1px solid var(--coip-charcoal);
	border-radius: var(--coip-radius);
	color: var(--coip-cream);
	font-family: inherit;
	font-size: var(--coip-fs-ui);
	font-weight: 500;
	line-height: 38px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--coip-dur) var(--coip-ease),
		border-color var(--coip-dur) var(--coip-ease),
		transform var(--coip-dur-rapida) var(--coip-ease-suave),
		box-shadow var(--coip-dur-rapida) var(--coip-ease-suave);
}

body.woocommerce-checkout .coip-checkout .coip-checkout__coupon-apply:hover,
body.woocommerce-checkout .coip-checkout .coip-checkout__coupon-apply:focus-visible {
	background: var(--coip-coral);
	border-color: var(--coip-coral);
}

/* El mismo gesto 2 que «PAGAR»: 2 px de subida con sombra. Aquí sí se nota,
   porque el botón del cupón es carbón sobre blanco y el cambio a coral, en
   una ficha tan pequeña, se lee mejor acompañado. */
@media (hover: hover) and (pointer: fine) {
	body.woocommerce-checkout .coip-checkout .coip-checkout__coupon-apply:enabled:hover {
		transform: translateY(var(--coip-lift-sm));
		box-shadow: var(--coip-shadow-lift);
	}
}

body.woocommerce-checkout .coip-checkout .coip-checkout__coupon-apply:enabled:focus-visible {
	transform: translateY(var(--coip-lift-sm));
	box-shadow: var(--coip-shadow-lift);
}

/* Y si algún día llega deshabilitado (un cupón ya aplicado, por ejemplo), que
   no conteste como si se pudiera pulsar. */
body.woocommerce-checkout .coip-checkout .coip-checkout__coupon-apply:disabled {
	background: rgba(41, 43, 50, 0.16);
	border-color: transparent;
	color: rgba(41, 43, 50, 0.5);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 1279px) {
	.coip-checkout {
		--coip-checkout-card-pad: 32px;

		padding-block: 40px 100px;
	}

	.coip-checkout__layout {
		column-gap: 40px;
	}
}

@media (max-width: 1023px) {
	.coip-checkout {
		--coip-checkout-card-pad: 28px;
	}

	.coip-checkout__title {
		margin-bottom: 36px;
	}

	.coip-checkout__layout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	/* En móvil conviene ver antes qué se está pagando. */
	.coip-checkout__aside {
		order: -1;
	}

	.coip-checkout__card--fields,
	.coip-checkout__card--order {
		padding-block: 32px;
	}

	.coip-checkout__card--payment {
		padding-block: 28px 32px;
	}
}

@media (max-width: 767px) {
	.coip-checkout {
		--coip-checkout-card-pad: 20px;

		padding-block: 32px 80px;
	}

	.coip-checkout__card--login,
	.coip-checkout__card--coupon {
		padding-block: 22px;
	}

	.coip-checkout__h2 {
		margin-bottom: 22px;
	}

	.coip-checkout__h2--spaced {
		margin-top: 36px;
	}

	.coip-checkout .input-text,
	.coip-checkout input[type="text"],
	.coip-checkout input[type="email"],
	.coip-checkout input[type="tel"],
	.coip-checkout input[type="number"],
	.coip-checkout input[type="password"],
	.coip-checkout select {
		padding-inline: 18px;
	}

	.coip-checkout select {
		padding-inline-end: 40px;
	}

	.coip-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
		padding-inline: 18px 40px;
	}

	/* Cada píldora parte de lo que mide su nombre y crece hasta llenar la fila:
	   a medias exactas, «Transferencia bancaria directa» no cabía. */
	body.woocommerce-checkout .coip-checkout #payment ul.payment_methods li.coip-checkout__method,
	.coip-checkout__method {
		min-width: 0;
		max-width: none;
		flex: 1 1 auto;
	}

	.coip-checkout .wc-credit-card-form,
	.coip-checkout .wc-payment-form {
		gap: 20px 16px;
	}

	.coip-checkout .shop_table th:first-child,
	.coip-checkout .shop_table td:first-child {
		width: 66%;
	}
}

@media (max-width: 479px) {
	body.woocommerce-checkout .coip-checkout #payment ul.payment_methods li.coip-checkout__method,
	.coip-checkout__method {
		flex: 1 1 100%;
	}

	.coip-checkout .wc-credit-card-form,
	.coip-checkout .wc-payment-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.coip-checkout .wc-credit-card-form > .form-row,
	.coip-checkout .wc-payment-form > .form-row {
		grid-column: span 1;
	}
}