/* Precio con transferencia en la ficha de producto (Glee_Checkout_Transfer_Price_Notice).
 *
 * Bloque violeta sólido (variante A del diseño de la single): ícono de banco y "Pagando con
 * transferencia", cartel mostaza "N% OFF", el monto grande y la nota de condiciones. El ícono es el
 * mismo de Material Symbols (account_balance) que usa la lista de medios de pago, como máscara.
 * Los valores salen de glee-brand/assets/tokens.css y se copian acá porque ese archivo no se carga
 * en el sitio. Si cambia un token, cambiarlo también acá.
 *
 * Las clases son propias (`glee-checkout__transfer-price*`), así que Woodmart no las estila; el
 * selector lleva `.summary` para ganarle a sus reglas de precios y bloques del resumen sin usar
 * `!important`.
 *
 * El sitio solo carga Montserrat 400 y 600: pedir 700 se dibujaría con el 600. El peso 700 del
 * monto y del cartel va en una fuente propia (copia de glee-brand/assets/fonts), con un nombre de
 * familia distinto para no cambiarle el peso al resto del tema.
 */

@font-face { font-family: "Glee Checkout Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/montserrat-700-normal.woff2") format("woff2"); }

.summary .glee-checkout__transfer-price {
	--glee-primary: #392869;
	--glee-on-primary: #ffffff;
	--glee-accent: #e1ae3b;
	--glee-on-accent: #161616;
	--glee-font-display: "Glee Checkout Montserrat", "Montserrat", Arial, Helvetica, sans-serif;
	--glee-font-body: "Lato", Arial, Helvetica, sans-serif;
	--glee-weight-display: 700;
	--glee-weight-strong: 700;
	--glee-size-h1: 32px;
	--glee-size-small: 14px;
	--glee-size-caption: 12px;
	--glee-line-height-heading: 1.15;
	--glee-line-height-tight: 1.4;
	--glee-space-1: 4px;
	--glee-space-2: 8px;
	--glee-space-3: 12px;
	--glee-space-4: 16px;
	--glee-icon-size: 24px;
	--glee-badge-letter-spacing: 0.06em;
	--glee-note-opacity: 0.85;
	--glee-bank-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M200-280v-280h80v280h-80Zm240 0v-280h80v280h-80ZM80-120v-80h800v80H80Zm600-160v-280h80v280h-80ZM80-640v-80l400-200 400 200v80H80Zm178-80h444-444Zm0 0h444L480-830 258-720Z'/%3E%3C/svg%3E");

	position: relative;
	margin: var(--glee-space-3) 0 var(--glee-space-4);
	padding: var(--glee-space-4);
	border-radius: 0;
	background: var(--glee-primary);
	color: var(--glee-on-primary);
	font-family: var(--glee-font-body);
}

.summary .glee-checkout__transfer-price-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--glee-space-3);
}

.summary .glee-checkout__transfer-price-title {
	display: inline-flex;
	align-items: center;
	gap: var(--glee-space-2);
	font-size: var(--glee-size-small);
	font-weight: var(--glee-weight-strong);
}

.summary .glee-checkout__transfer-price-icon {
	flex: none;
	width: var(--glee-icon-size);
	height: var(--glee-icon-size);
	background: currentColor;
	-webkit-mask: var(--glee-bank-icon) center / contain no-repeat;
	mask: var(--glee-bank-icon) center / contain no-repeat;
}

.summary .glee-checkout__transfer-price-badge {
	flex: none;
	padding: 6px 10px;
	background: var(--glee-accent);
	color: var(--glee-on-accent);
	font-family: var(--glee-font-display);
	font-size: var(--glee-size-caption);
	font-weight: var(--glee-weight-display);
	letter-spacing: var(--glee-badge-letter-spacing);
	line-height: 1;
	text-transform: uppercase;
}

.summary .glee-checkout__transfer-price-headline {
	margin: var(--glee-space-2) 0 0;
	font-family: var(--glee-font-display);
	font-size: var(--glee-size-h1);
	font-weight: var(--glee-weight-display);
	line-height: var(--glee-line-height-heading);
}

.summary .glee-checkout__transfer-price-prefix {
	font-family: var(--glee-font-body);
	font-size: var(--glee-size-small);
	font-weight: var(--glee-weight-strong);
}

/* El HTML del monto lo arma WooCommerce (`wc_price`); Woodmart colorea `.amount`, acá hereda. */
.summary .glee-checkout__transfer-price .woocommerce-Price-amount {
	color: inherit;
	font: inherit;
}

.summary .glee-checkout__transfer-price-conditions {
	margin: var(--glee-space-1) 0 0;
	font-size: var(--glee-size-caption);
	line-height: var(--glee-line-height-tight);
	opacity: var(--glee-note-opacity);
}

/* Texto solo para lectores de pantalla: el cartel visual dice "10% OFF", acá se lee "10% de descuento". */
.summary .glee-checkout__transfer-price-spoken {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}