/**
 * Estilos estructurales del módulo Donación.
 * Los colores y tamaños concretos llegan como CSS custom properties
 * inyectadas dinámicamente por DonationModule::build_dynamic_css().
 */

/* Wrapper: lleva la posición fija responsive (antes vivía en .bcfw-donation-btn).
   overflow visible a propósito: permite que la imagen decorativa sobresalga
   del botón sin quedar recortada. Su tamaño lo determina únicamente el botón,
   ya que la imagen se posiciona en "position: absolute" y no participa del flujo. */
.bcfw-donation-widget {
	position: fixed;
	z-index: 999998;
	display: inline-flex;
	align-items: center;
	overflow: visible;
}

.bcfw-donation-btn,
.bcfw-widgets-root .bcfw-donation-btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: var(--bcfw-donation-width, auto);
	width: auto;
	max-width: 100%;
	height: var(--bcfw-donation-height, 52px);
	padding: 0 var(--bcfw-donation-padding, 22px);
	/* !important deliberado y acotado a las propiedades visuales del botón:
	   el selector de un solo nivel (.bcfw-donation-btn) puede perder frente
	   a reglas del tema con mayor especificidad (ej. ".elementor-button",
	   "button.theme-btn") o cargadas después. Como el valor real siempre
	   viene de la custom property (configurada por el admin), forzar aquí
	   no "inventa" ningún color: solo garantiza que el configurado gane. */
	background: var(--bcfw-donation-bg, #1d2327) !important;
	color: var(--bcfw-donation-text, #fff) !important;
	border-style: solid !important;
	border-width: var(--bcfw-donation-borderwidth, 1px) !important;
	border-color: var(--bcfw-donation-border, transparent) !important;
	border-radius: var(--bcfw-donation-radius, 50px) !important;
	font-size: var(--bcfw-donation-fontsize, 15px);
	font-family: var(--bcfw-donation-fontfamily, inherit);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	opacity: var(--bcfw-donation-opacity, 1);
	box-sizing: border-box;
	text-decoration: none !important;
	transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
	white-space: nowrap;
}

/* Se cubren explícitamente TODOS los estados interactivos (hover, focus,
   focus-visible y active) con el mismo color de hover configurado.
   Antes solo se cubrían :hover y :focus-visible: al hacer clic con mouse,
   el navegador aplica :focus (y brevemente :active) pero normalmente NO
   :focus-visible (los navegadores lo reservan casi siempre para foco por
   teclado), así que ese estado quedaba sin gobernar y el tema podía colar
   su color de foco/activo por defecto (el fucsia visto tras el clic).
   Con !important en todos por igual, el color configurado gana siempre. */
.bcfw-donation-btn:hover,
.bcfw-donation-btn:focus,
.bcfw-donation-btn:focus-visible,
.bcfw-donation-btn:active,
.bcfw-widgets-root .bcfw-donation-btn:hover,
.bcfw-widgets-root .bcfw-donation-btn:focus,
.bcfw-widgets-root .bcfw-donation-btn:focus-visible,
.bcfw-widgets-root .bcfw-donation-btn:active {
	background: var(--bcfw-donation-hover, #2c3338) !important;
	color: var(--bcfw-donation-text, #fff) !important;
	border-color: var(--bcfw-donation-border, transparent) !important;
	outline: none;
	transform: translateY(-2px);
}

.bcfw-donation-btn .bcfw-donation-icon,
.bcfw-widgets-root .bcfw-donation-btn .bcfw-donation-icon {
	color: var(--bcfw-donation-icon, #fff) !important;
	width: var(--bcfw-donation-iconsize, 20px);
	height: var(--bcfw-donation-iconsize, 20px);
	font-size: var(--bcfw-donation-iconsize, 20px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bcfw-donation-icon svg {
	width: 100%;
	height: 100%;
}

/* ---------- Imagen PNG decorativa: ocupa el lugar del icono ---------- */

/* Vive DENTRO del botón (como si fuera el icono). No usa position:absolute:
   al ser un elemento normal del flex del botón, si su tamaño configurado es
   mayor que la altura del botón, sobresale de forma simétrica arriba/abajo
   (el botón no recorta su contenido, no tiene overflow:hidden), quedando
   siempre anclada -nunca "suelta" ni separada del botón. */
.bcfw-donation-decor-img {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	display: block;
	width: var(--bcfw-decor-size, 72px);
	height: auto;
	max-width: none;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	/* offset-x/offset-y quedan como ajuste fino opcional (no mueven la imagen
	   fuera del botón, solo la nudgean unos px respecto a su posición natural). */
	transform: translate(var(--bcfw-decor-offset-x, 0px), var(--bcfw-decor-offset-y, 0px));
	/* Sombra en dos capas (una ceñida + una difusa) para que la imagen se lea
	   con volumen/profundidad real -estilo "premium"- en vez de un elemento
	   plano pegado al lado. drop-shadow (a diferencia de box-shadow/background)
	   solo pinta, no ocupa espacio ni puede solaparse con el texto del botón. */
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)) drop-shadow(0 8px 16px rgba(0, 0, 0, .22));
	transition: transform .25s ease, filter .25s ease;
}

.bcfw-donation-btn:hover .bcfw-donation-decor-img {
	transform: translate(var(--bcfw-decor-offset-x, 0px), var(--bcfw-decor-offset-y, 0px)) scale(1.05);
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)) drop-shadow(0 10px 20px rgba(0, 0, 0, .26));
}

/* La animación principal vive en el botón. La imagen, si corresponde,
   acompaña con una versión sutil (menor amplitud) de la misma animación;
   glow/shine no aplican a la imagen: NO son solo "sin sentido visual" en
   un PNG, sino que "glow" activamente rompe la vista, porque su box-shadow
   sigue el rectángulo invisible de la etiqueta <img> (no la forma
   transparente del icono), y eso se ve como un cuadro/halo rectangular
   detrás de la imagen. Por eso se anula con !important: la regla genérica
   de frontend-core.css también usa !important, así que sin esto aquí,
   gana ella y el cuadro reaparece. */
.bcfw-donation-decor-img.bcfw-anim-glow,
.bcfw-donation-decor-img.bcfw-anim-neon,
.bcfw-donation-decor-img.bcfw-anim-shine {
	animation: none !important;
	box-shadow: none !important;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)) drop-shadow(0 8px 16px rgba(0, 0, 0, .22)) !important;
}

/* hover-lift / hover-scale son efectos de :hover (no @keyframes) del botón.
   Sin esto, el :hover también le impondría a la imagen un transform fijo
   (translateY/scale) que ignoraría el ajuste fino (offset-x/offset-y) y la
   separaría de su posición anclada al pasar el cursor. */
.bcfw-donation-decor-img.bcfw-anim-hover-lift:hover,
.bcfw-donation-decor-img.bcfw-anim-hover-scale:hover {
	transform: translate(var(--bcfw-decor-offset-x, 0px), var(--bcfw-decor-offset-y, 0px)) scale(1.05) !important;
}

/* !important: igual que en el botón, garantiza que la animación configurada
   se aplique aunque el tema (o un script de lazy-load, que suele añadir su
   propia transición/transform a las imágenes) traiga reglas con mayor
   especificidad para "animation"/"transform" sobre <img>. */
.bcfw-donation-decor-img.bcfw-anim-pulse,
.bcfw-donation-decor-img.bcfw-anim-breathe {
	animation: bcfw-decor-pulse var(--bcfw-donation-speed, 2.5s) ease-in-out infinite !important;
}

.bcfw-donation-decor-img.bcfw-anim-float {
	animation: bcfw-decor-float var(--bcfw-donation-speed, 2.5s) ease-in-out infinite !important;
}

@keyframes bcfw-decor-pulse {
	0%, 100% { transform: translate(var(--bcfw-decor-offset-x, 0px), var(--bcfw-decor-offset-y, 0px)) scale(1); }
	50% { transform: translate(var(--bcfw-decor-offset-x, 0px), var(--bcfw-decor-offset-y, 0px)) scale(1.04); }
}

@keyframes bcfw-decor-float {
	0%, 100% { transform: translate(var(--bcfw-decor-offset-x, 0px), var(--bcfw-decor-offset-y, 0px)); }
	50% { transform: translate(var(--bcfw-decor-offset-x, 0px), calc(var(--bcfw-decor-offset-y, 0px) - 4px)); }
}

@media (prefers-reduced-motion: reduce) {
	.bcfw-donation-decor-img.bcfw-anim-pulse,
	.bcfw-donation-decor-img.bcfw-anim-breathe,
	.bcfw-donation-decor-img.bcfw-anim-float {
		animation: none !important;
	}
}

/* ---------- Modal ---------- */

.bcfw-donation-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bcfw-modal-overlay, rgba(0, 0, 0, .6));
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease;
	padding: 20px;
}

.bcfw-donation-modal-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.bcfw-donation-modal {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--bcfw-modal-bg, #fff);
	color: var(--bcfw-modal-text, #1d2327);
	border-radius: 24px;
	padding: 36px 30px 28px;
	transform: translateY(16px) scale(.98);
	transition: transform .3s cubic-bezier(.16, 1, .3, 1);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, .06),
		0 12px 24px -8px rgba(0, 0, 0, .18),
		0 40px 80px -20px rgba(0, 0, 0, .35);
}

/* Tablet */
@media (min-width: 601px) {
	.bcfw-donation-modal {
		max-width: 500px;
		padding: 40px 36px 32px;
	}
}

/* Laptop / escritorio: un poco más de aire que en tablet. */
@media (min-width: 901px) {
	.bcfw-donation-modal {
		max-width: 520px;
		padding: 44px 40px 36px;
	}
}

.bcfw-donation-modal-overlay.is-open .bcfw-donation-modal {
	transform: translateY(0) scale(1);
}

/* Al abrir el modal, core.js mueve el foco al botón de cerrar por
   accesibilidad: eso significa que SIEMPRE está en estado :focus apenas se
   ve el modal. Como antes solo tenía "color: inherit" (sin !important) y
   ningún estado :focus/:active propio, el estilo de foco por defecto del
   tema (a menudo fucsia) se colaba encima. Se fuerzan aquí todos los
   estados con el color configurado del modal, para que nunca dependa del
   tema. */
.bcfw-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: none;
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: var(--bcfw-modal-text, inherit) !important;
	opacity: .6;
	outline: none;
	box-shadow: none !important;
	transition: background-color .2s ease, opacity .2s ease;
}

.bcfw-modal-close:hover,
.bcfw-modal-close:focus,
.bcfw-modal-close:focus-visible,
.bcfw-modal-close:active {
	opacity: 1;
	color: var(--bcfw-modal-accent, var(--bcfw-modal-text, inherit)) !important;
	background: rgba(0, 0, 0, .06) !important;
	outline: none;
	box-shadow: none !important;
}

.bcfw-donation-modal-header h2 {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--bcfw-modal-accent, inherit);
}

.bcfw-donation-modal-desc {
	margin: 0 0 26px;
	font-size: 14px;
	line-height: 1.55;
	opacity: .7;
}

.bcfw-donation-block {
	margin-bottom: 18px;
	padding: 18px 18px 20px;
	border-radius: 16px;
	background: rgba(0, 0, 0, .025);
	border: 1px solid rgba(0, 0, 0, .06);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 2px 8px rgba(0, 0, 0, .03);
}

.bcfw-donation-block:last-child {
	margin-bottom: 0;
}

.bcfw-donation-block h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--bcfw-modal-accent, inherit);
}

.bcfw-donation-block h3::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 12px;
	border-radius: 2px;
	background: var(--bcfw-modal-accent, currentColor);
	opacity: .85;
}

.bcfw-data-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bcfw-data-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}

.bcfw-data-list li span {
	opacity: .6;
	min-width: 84px;
}

.bcfw-payment-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.bcfw-qr-image {
	width: 116px;
	height: 116px;
	object-fit: contain;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, .08);
	background: #fff;
	padding: 4px;
	flex-shrink: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

.bcfw-payment-info {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
}

/* Datos opcionales del titular (Nombre/RUC/Empresa) para Yape y Plin:
   centrados, igual que el resto de esa sección. Cada línea solo se imprime
   en el HTML si el admin completó el dato correspondiente. */
.bcfw-payment-holder-list {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(0, 0, 0, .08);
}

.bcfw-payment-holder-list li {
	justify-content: center;
	text-align: center;
}

.bcfw-copy-btn {
	border: 1px solid rgba(0, 0, 0, .12);
	background: rgba(0, 0, 0, .02);
	color: inherit;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 20px;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}

.bcfw-copy-btn:hover {
	background: rgba(0, 0, 0, .07);
	border-color: rgba(0, 0, 0, .22);
	transform: translateY(-1px);
}

.bcfw-copy-btn:active {
	transform: translateY(0);
}

.bcfw-receipt-btn {
	display: block;
	text-align: center;
	background: var(--bcfw-modal-accent, #1d2327);
	color: #fff;
	text-decoration: none;
	padding: 13px 18px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .01em;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
	transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.bcfw-receipt-btn:hover,
.bcfw-receipt-btn:focus-visible,
.bcfw-receipt-btn:active {
	background: var(--bcfw-receipt-hover-bg, #2c3338);
	color: var(--bcfw-receipt-hover-text, #fff);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
	outline: none;
}

.bcfw-copy-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: #1d2327;
	color: #fff;
	padding: 10px 18px;
	border-radius: 30px;
	font-size: 13px;
	z-index: 9999999;
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

.bcfw-copy-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
	.bcfw-donation-btn .bcfw-donation-btn-text {
		max-width: 140px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bcfw-donation-modal {
		padding: 28px 20px 22px;
		border-radius: 20px;
	}

	.bcfw-qr-image {
		width: 100px;
		height: 100px;
	}

	/* Filas largas (CCI, SWIFT, etc.): en escritorio/tablet caben en una sola
	   línea, pero en móvil el botón "Copiar" puede sobresalir del modal.
	   Se pasa a dos líneas: Etiqueta + Valor arriba, "Copiar" alineado justo
	   debajo del valor. */
	.bcfw-data-list li {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.bcfw-data-list li .bcfw-copy-btn {
		flex-basis: 100%;
		width: fit-content;
		margin-left: 94px;
	}
}

/* ---------- Imagen del banco (opcional, dentro del bloque de transferencia) ---------- */

/* Sin imagen: el contenedor no altera en nada el maquetado actual. */
.bcfw-bank-content {
	min-width: 0;
}

.bcfw-bank-block-has-image .bcfw-bank-content {
	display: flex;
	align-items: center;
	gap: 16px;
}

.bcfw-bank-image {
	flex-shrink: 0;
	width: var(--bcfw-bank-image-size, 56px);
	height: var(--bcfw-bank-image-size, 56px);
	object-fit: contain;
	border-radius: 10px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
	padding: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	order: -1;
}

.bcfw-bank-block-has-image .bcfw-data-list {
	flex: 1 1 auto;
	min-width: 0;
}

/* Posición derecha: la imagen pasa después del contenido, misma fila. */
.bcfw-bank-image-pos-right .bcfw-bank-content {
	flex-direction: row;
}

.bcfw-bank-image-pos-right .bcfw-bank-image {
	order: 1;
}

/* Posición arriba: la imagen se apila sobre el contenido, alineada a la
   izquierda (igual que el resto del bloque). La lista de datos (Banco,
   Titular, RUC, etc.) conserva siempre el mismo orden/alineación interna,
   sin importar la posición elegida para el logo ni el dispositivo. */
.bcfw-bank-image-pos-top .bcfw-bank-content,
.bcfw-bank-image-pos-center .bcfw-bank-content,
.bcfw-bank-image-pos-bottom .bcfw-bank-content {
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
}

.bcfw-bank-image-pos-top .bcfw-bank-image {
	order: -1;
}

/* Posición centro: igual que "arriba", solo que el logo además se centra
   horizontalmente (la lista de datos no cambia de alineación). */
.bcfw-bank-image-pos-center .bcfw-bank-image {
	order: -1;
	margin: 0 auto;
}

/* Posición abajo: la imagen se apila debajo del contenido. */
.bcfw-bank-image-pos-bottom .bcfw-bank-image {
	order: 1;
}

/* Responsive: en pantallas pequeñas, si la posición elegida es horizontal
   (izquierda/derecha), se apila igualmente en columna para evitar overflow
   o contenido cortado. Las posiciones ya verticales (arriba/centro/abajo)
   se respetan tal cual las configuró el admin, también en móvil. */
@media (max-width: 480px) {
	.bcfw-bank-image-pos-left .bcfw-bank-content,
	.bcfw-bank-image-pos-right .bcfw-bank-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.bcfw-bank-image-pos-left .bcfw-bank-image,
	.bcfw-bank-image-pos-right .bcfw-bank-image {
		order: -1;
	}

	/* El tamaño ya lo controla --bcfw-bank-image-size (Desktop/Tablet/Móvil,
	   configurable desde el panel); aquí solo se apila el layout. */
}