/* ==========================================================================
   Cobro manual — instrucciones de pago y comprobante

   Réplica de los pasos 3 y 4 de "Checkout - Cueros Wears.dc.html".
   Los tokens salen del tema; el plugin no inventa ningún color. Si algún día
   se cambia de tema, los respaldos mantienen la pantalla legible.
   ========================================================================== */

/* El indicador de pasos también se pinta en el checkout, fuera de `.wears-pago`
   (los pasos 1 y 2 ocurren allí). Por eso los tokens se declaran en los dos
   sitios: si no, en el checkout las barras se quedaban sin color. */
.wears-pago,
.wears-pago__pasos {
	--wears-pago-tinta: var( --wp--preset--color--contrast, #1a1613 );
	--wears-pago-fondo: var( --wp--preset--color--base, #ede6d8 );
	--wears-pago-marca: var( --wp--preset--color--primary, #2e008b );
	--wears-pago-oro: var( --wp--preset--color--accent, #b08d4f );
	--wears-pago-madera: var( --wp--preset--color--support, #7c5238 );
	--wears-pago-filete: var( --wp--preset--color--rule, #e3dac7 );
	--wears-pago-radio: var( --wp--custom--radius, 2px );
	--wears-pago-radio-caja: var( --wp--custom--radius-card, 8px );
}

/* La medida sólo la lleva el bloque de instrucciones; el indicador de pasos
   del checkout se ajusta al ancho de su columna. */
.wears-pago {
	max-width: 640px;
	margin: 0 auto clamp( 32px, 5vw, 56px );
}

/* --------------------------------------------------------------------------
   Indicador de pasos
   -------------------------------------------------------------------------- */

.wears-pago__pasos {
	display: grid;
	margin: 0 0 clamp( 28px, 4vw, 44px );
	padding: 0;
	gap: 8px;
	grid-template-columns: repeat( 4, 1fr );
	list-style: none;
}

.wears-pago__paso {
	margin: 0;
}

.wears-pago__barra {
	display: block;
	height: 2px;
	margin-bottom: 8px;
	background: rgba( 26, 22, 19, 0.14 );
}

.wears-pago__paso.is-hecho .wears-pago__barra {
	background: var( --wears-pago-oro );
}

.wears-pago__rotulo {
	color: rgba( 26, 22, 19, 0.35 );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wears-pago__paso.is-hecho .wears-pago__rotulo {
	color: var( --wears-pago-madera );
}

/* --------------------------------------------------------------------------
   Bloques
   -------------------------------------------------------------------------- */

.wears-pago__bloque {
	margin-bottom: clamp( 36px, 5vw, 56px );
}

.wears-pago__contador {
	margin: 0 0 8px;
	color: var( --wears-pago-madera );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.wears-pago__titulo {
	margin: 0 0 22px;
	font-size: clamp( 23px, 3vw, 32px );
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.wears-pago__aviso {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-left: 2px solid var( --wears-pago-oro );
	border-radius: 0 var( --wears-pago-radio-caja ) var( --wears-pago-radio-caja ) 0;
	background: var( --wears-pago-filete );
	font-size: 14px;
}

.wears-pago__aviso--error {
	border-left-color: var( --wp--preset--color--danger, #8c1f1f );
	color: var( --wp--preset--color--danger, #8c1f1f );
}

/* --------------------------------------------------------------------------
   Monto exacto
   -------------------------------------------------------------------------- */

.wears-pago__monto {
	margin-bottom: 26px;
	padding: 22px 24px;
	border: 1px solid var( --wears-pago-oro );
	border-radius: var( --wears-pago-radio-caja );
	background: var( --wears-pago-filete );
	text-align: center;
}

.wears-pago__monto-rotulo {
	margin: 0 0 8px;
	color: var( --wears-pago-madera );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wears-pago__monto-cifra {
	margin: 0;
	font-size: clamp( 30px, 4vw, 42px );
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

.wears-pago__monto-bs {
	margin: 10px 0 0;
	color: rgba( 26, 22, 19, 0.6 );
	font-size: 13px;
}

.wears-pago__hueco {
	margin: 10px 0 0;
	padding: 6px 12px;
	border: 1px dashed var( --wp--preset--color--danger, #8c1f1f );
	border-radius: var( --wears-pago-radio );
	color: var( --wp--preset--color--danger, #8c1f1f );
	font-size: 12px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Datos de la cuenta, con su botón de copiar
   -------------------------------------------------------------------------- */

.wears-pago__datos {
	margin: 0 0 20px;
	border: 1px solid rgba( 26, 22, 19, 0.16 );
	border-radius: var( --wears-pago-radio-caja );
	background: #fff;
}

.wears-pago__dato {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid rgba( 26, 22, 19, 0.1 );
	gap: 14px;
}

.wears-pago__dato:last-child {
	border-bottom: none;
}

.wears-pago__dato dt {
	margin: 0 0 3px;
	color: rgba( 26, 22, 19, 0.45 );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wears-pago__dato dd {
	margin: 0;
	font-size: 15px;
	font-weight: 600;

	/* Una wallet USDT no cabe en una línea de móvil y no se puede cortar por
	   donde quiera: se parte por cualquier carácter, no por palabras. */
	overflow-wrap: anywhere;
}

.wears-pago__copiar {
	flex-shrink: 0;
	padding: 9px 16px;
	border: 1px solid rgba( 26, 22, 19, 0.25 );
	border-radius: var( --wears-pago-radio );
	background: transparent;
	color: var( --wears-pago-marca );
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}

.wears-pago__copiar:hover {
	border-color: var( --wears-pago-madera );
}

.wears-pago__copiar.is-copiado {
	border-color: var( --wears-pago-madera );
	background: var( --wears-pago-madera );
	color: var( --wears-pago-fondo );
}

.wears-pago__nota,
.wears-pago__guardado {
	margin: 0 0 14px;
	color: rgba( 26, 22, 19, 0.6 );
	font-size: 13px;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Comprobante
   -------------------------------------------------------------------------- */

.wears-pago__form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.wears-pago__campo span {
	display: block;
	margin-bottom: 8px;
	color: rgba( 26, 22, 19, 0.55 );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.wears-pago__campo input[ type='text' ] {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba( 26, 22, 19, 0.22 );
	border-radius: var( --wears-pago-radio );
	background: #fff;
	font-family: inherit;
	font-size: 15px;
}

.wears-pago__campo input[ type='text' ]:focus {
	border-color: var( --wears-pago-oro );
	outline: none;
}

.wears-pago__soltar {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 20px;
	border: 1px dashed rgba( 46, 0, 139, 0.4 );
	border-radius: var( --wears-pago-radio-caja );
	background: rgba( 46, 0, 139, 0.03 );
	color: var( --wears-pago-marca );
	gap: 10px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.28s ease, background 0.28s ease;
}

.wears-pago__soltar:hover,
.wears-pago__soltar:focus-within {
	border-color: var( --wears-pago-oro );
	background: rgba( 176, 141, 79, 0.08 );
}

.wears-pago__soltar.is-lleno {
	border-style: solid;
	border-color: var( --wears-pago-oro );
	background: rgba( 176, 141, 79, 0.1 );
}

/* El input se oculta sin sacarlo del foco por teclado. */
.wears-pago__soltar input[ type='file' ] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.wears-pago__soltar-titulo {
	font-size: 14px;
	font-weight: 600;
}

.wears-pago__soltar-tipos {
	color: rgba( 26, 22, 19, 0.45 );
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wears-pago__enviar {
	padding: 18px 24px;
	border: none;
	border-radius: var( --wears-pago-radio );
	background: var( --wears-pago-marca );
	color: var( --wears-pago-fondo );
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.28s ease;
}

.wears-pago__enviar:hover {
	background: var( --wp--preset--color--primary-hover, #1c0057 );
}

/* --------------------------------------------------------------------------
   Confirmación
   -------------------------------------------------------------------------- */

.wears-pago__estado {
	margin: 0 0 10px;
	color: var( --wears-pago-madera );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.wears-pago__lead {
	margin: 0 0 28px;
	font-size: 15px;
	line-height: 1.75;
}

.wears-pago__rotulo-bloque {
	margin: 0 0 14px;
	color: rgba( 26, 22, 19, 0.45 );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wears-pago__siguiente {
	margin: 0 0 26px;
	padding-left: 1.3em;
	font-size: 14px;
	line-height: 1.8;
}

.wears-pago__referencia {
	margin: 0;
	padding: 14px 18px;
	border-left: 2px solid var( --wears-pago-oro );
	border-radius: 0 var( --wears-pago-radio-caja ) var( --wears-pago-radio-caja ) 0;
	background: var( --wears-pago-filete );
	font-size: 14px;
}

.wears-pago__garantia {
	margin: clamp( 28px, 4vw, 44px ) 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba( 26, 22, 19, 0.14 );
	color: rgba( 26, 22, 19, 0.6 );
	font-size: 13px;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Aviso de la agencia de envío (DWCW-180)
   -------------------------------------------------------------------------- */

.wears-envio-agencia {
	margin: 0 0 20px;
	padding: 15px 18px;
	border-left: 2px solid var( --wears-pago-oro, #b08d4f );
	border-radius: 0 8px 8px 0;
	background: var( --wp--preset--color--rule, #e3dac7 );
	font-size: 13px;
	line-height: 1.6;
}

@media ( prefers-reduced-motion: reduce ) {
	.wears-pago__copiar,
	.wears-pago__soltar,
	.wears-pago__enviar {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Pasos 3–4 dentro del checkout y pantalla de confirmación (10/08).
   -------------------------------------------------------------------------- */

.wears-pago__acciones {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 22px;
}

.wears-pago__acciones .wears-pago__confirmar {
	flex: 1 1 auto;
	width: auto;
}

.wears-pago__subida-error {
	margin: 8px 0 0;
	color: #8c1f1f;
	font-size: 13px;
	line-height: 1.5;
}

.wears-pago__soltar.is-subiendo {
	opacity: 0.6;
	pointer-events: none;
}

.wears-pago__resumen {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid rgba( 26, 22, 19, 0.14 );
}

.wears-pago__piezas {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.wears-pago__piezas li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
	font-size: 14px;
}

.wears-pago__total {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-top: 10px;
	border-top: 1px solid rgba( 26, 22, 19, 0.14 );
	font-weight: 600;
}

.wears-pago__total .wears-pago__monto-bs {
	display: block;
	font-weight: 400;
}

.wears-pago__metodo-elegido {
	margin: 8px 0 0;
	color: rgba( 26, 22, 19, 0.6 );
	font-size: 13px;
}

.wears-pago__enlace {
	color: #2e008b;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   El look del export en los pasos del checkout (10/08, noche):
   monto en panel violeta, datos en tarjetas a dos columnas, botón grande
   primero y el «volver» como enlace debajo.
   -------------------------------------------------------------------------- */

.wears-pago--checkout .wears-pago__monto {
	border: 1px solid var( --wears-pago-oro );
	background: var( --wears-pago-marca );
}

.wears-pago--checkout .wears-pago__monto-rotulo {
	color: rgba( 237, 230, 216, 0.6 );
}

.wears-pago--checkout .wears-pago__monto-cifra {
	color: #fff;
}

.wears-pago--checkout .wears-pago__monto-bs {
	color: rgba( 237, 230, 216, 0.75 );
}

@media ( min-width: 640px ) {
	.wears-pago--checkout .wears-pago__datos {
		display: grid;
		border: none;
		background: none;
		gap: 12px;
		grid-template-columns: 1fr 1fr;
	}

	.wears-pago--checkout .wears-pago__dato {
		border: 1px solid rgba( 26, 22, 19, 0.16 );
		border-radius: var( --wears-pago-radio-caja );
		background: #fff;
	}
}

.wears-pago__acciones {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.wears-pago__acciones .wears-checkout__volver {
	margin: 14px auto 0;
}