/* Cotillonísimo Pagos con QR
 * Colores del tema: toma las variables de Flatsome (primario #0066c3, texto #00273f).
 * El acento se puede cambiar en Pagos con QR > Ajustes (sobrescribe --coti-qr-color).
 */
:root {
	--coti-qr-color: var(--fs-color-primary, #0066c3);
	--coti-qr-texto: var(--fs-experimental-link-color, #00273f);
	--coti-qr-borde: #e2e8ef;
	--coti-qr-fondo: #f4f7fa;
	--coti-qr-tam: 44px;
	--coti-qr-tam-m: 32px;
}
@supports (background: color-mix(in srgb, red 10%, white)) {
	:root {
		--coti-qr-fondo: color-mix(in srgb, var(--coti-qr-color) 6%, #fff);
		--coti-qr-borde: color-mix(in srgb, var(--coti-qr-color) 18%, #fff);
	}
}

/* Logo del banco al lado del nombre en la lista de medios de pago */
.wc_payment_method[class*="payment_method_coti_qr_"] > label img {
	max-height: 26px;
	width: auto;
	vertical-align: middle;
	margin-left: 6px;
}

/* ---------- Pagina de gracias y Mi cuenta ---------- */
.coti-qr-pago {
	margin: 0 0 30px;
	padding: 20px 22px;
	background: var(--coti-qr-fondo);
	border: 1px solid var(--coti-qr-borde);
	border-left: 4px solid var(--coti-qr-color);
	border-radius: 6px;
	color: var(--coti-qr-texto);
}
.coti-qr-pago__titulo { margin: 0 0 4px; font-size: 1.35em; color: var(--coti-qr-texto); }
.coti-qr-pago__etiqueta { margin: 0 0 14px; font-weight: 700; color: var(--coti-qr-color); }
.coti-qr-pago__cuerpo { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.coti-qr-pago__qr .coti-qr-img {
	display: block;
	width: 260px;
	max-width: 100%;
	height: auto;
	background: #fff;
	padding: 10px;
	border: 1px solid var(--coti-qr-borde);
	border-radius: 6px;
}
.coti-qr-pago__datos { flex: 1 1 260px; min-width: 0; }
.coti-qr-pago__datos p { margin: 0 0 8px; }
.coti-qr-pago__nota { font-size: .92em; }
.coti-qr-pago__instrucciones { margin: 12px 0; }
.coti-qr-pago__mail { font-size: .9em; opacity: .8; }

/* ---------- Shortcode ---------- */
.coti-qr-hoy[hidden] { display: none; }
.coti-qr-hoy { margin: 0 0 16px; color: var(--coti-qr-texto); }
.coti-qr-hoy__titulo {
	margin: 0 0 8px;
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--coti-qr-texto);
	opacity: .75;
}
.coti-qr-hoy__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* El tema le pone sangria a ul/li dentro del contenido (.col-inner ul li). */
.coti-qr-hoy ul.coti-qr-hoy__lista, .coti-qr-hoy li.coti-qr-hoy__item { margin-left: 0 !important; padding-left: 0; list-style: none !important; }
.coti-qr-hoy li.coti-qr-hoy__item { padding-left: 8px; }
.coti-qr-hoy__item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 14px 8px 8px;
	background: #fff;
	border: 1px solid var(--coti-qr-borde);
	border-radius: 8px;
}
.coti-qr-hoy--iconos .coti-qr-hoy__item { padding: 4px; border: 0; background: transparent; }
/* Logos de bancos: casi siempre apaisados. Alto fijo y ancho libre (con tope), no un cuadrado. */
.coti-qr-hoy img.coti-qr-hoy__icono { width: auto !important; height: 26px !important; max-width: 90px !important; object-fit: contain; flex: 0 0 auto; margin: 0 !important; }
.coti-qr-hoy__texto { display: flex; flex-direction: column; line-height: 1.25; }
.coti-qr-hoy__nombre { font-weight: 700; font-size: .95em; color: var(--coti-qr-texto); }
.coti-qr-hoy__etiqueta { font-size: .85em; font-weight: 600; color: var(--coti-qr-color); }
.coti-qr-hoy__vacio { margin: 0; opacity: .8; }

/* ---------- Iconos sobre los productos ----------
 * Con !important a proposito: Flatsome aplica a TODA imagen dentro de .box-image
 * `position:absolute; inset:0; width:100%; height:100%` (.has-equal-box-heights
 * .box-image img, .image-cover img). Sin esto el icono queda en 0x0.
 */
.coti-qr-host { position: relative; }
.box-image .coti-qr-iconos,
.woocommerce-product-gallery .coti-qr-iconos,
.coti-qr-iconos {
	position: absolute !important;
	z-index: 25;
	display: flex !important;
	gap: 4px;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	pointer-events: none;
}
.coti-qr-iconos--tl { top: 8px !important; left: 8px !important; }
.coti-qr-iconos--tr { top: 8px !important; right: 8px !important; }
.coti-qr-iconos--bl { bottom: 8px !important; left: 8px !important; }
.coti-qr-iconos--br { bottom: 8px !important; right: 8px !important; }
.coti-qr-iconos img.coti-qr-iconos__img {
	position: static !important;
	inset: auto !important;
	display: block !important;
	width: auto !important;
	height: calc(var(--coti-qr-tam) * .6) !important;
	max-width: calc(var(--coti-qr-tam) * 2.2) !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 1 !important;
	object-fit: contain !important;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}
@media (max-width: 549px) {
	.coti-qr-iconos img.coti-qr-iconos__img { height: calc(var(--coti-qr-tam-m) * .6) !important; max-width: calc(var(--coti-qr-tam-m) * 2.2) !important; }
	.coti-qr-iconos--tl, .coti-qr-iconos--tr { top: 6px !important; }
	.coti-qr-iconos--bl, .coti-qr-iconos--br { bottom: 6px !important; }
}