/* BDM Messages — promo badge + WhatsApp contact */

/* Layout mínimo, sin imponer color ni fondo: así Bricks define el estilo
   (ej. verde) donde corresponda, y en la página individual hereda el color
   del texto del contexto en vez de forzar una cajita azul. */
.bdm-promo-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 1px 0;
}

.bdm-promo-badge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-weight: 800;
	line-height: 1;
}

.bdm-promo-badge__text {
	color: inherit;
}

.bdm-promo-badge__text strong,
.bdm-promo-badge__text b {
	font-weight: 800;
}

/* Variante opcional "box" (recuadro azul) para usar SOLO si la querés
   explícitamente con [bdm_promo_badge style="box"]. Por defecto los
   shortcodes salen "plain" (sin color), para que Bricks los pinte. */
.bdm-promo-badge--box {
	padding: 12px 16px;
	background: var(--brand-blue-50, #EDEEFF);
	border-radius: 8px;
	margin: 12px 0;
}
.bdm-promo-badge--box .bdm-promo-badge__icon {
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: var(--brand-blue, #050EFF);
	color: #fff;
	font-size: 14px;
}
.bdm-promo-badge--box .bdm-promo-badge__text {
	font-size: 14px;
	color: var(--ink, #0A0A0A);
}

/* WhatsApp contact (header) */
.bdm-wa-contact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--success, #1e8a4a);
	text-decoration: none;
	font-weight: 600;
	transition: opacity 150ms ease;
}
.bdm-wa-contact:hover {
	opacity: .8;
}
.bdm-wa-contact__icon {
	flex-shrink: 0;
}

/* Botón "Completar pedido" del carrito */
.bdm-wa-order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px 24px;
	background: #25D366;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	border-radius: 8px;
	transition: background 150ms ease;
}
.bdm-wa-order:hover { background: #1da851; color: #fff; }
.bdm-wa-order svg { flex-shrink: 0; }
.bdm-wa-order--disabled {
	background: #c8c8c8;
	pointer-events: none;
	cursor: not-allowed;
}

/* ============================================================
 * Botones dentro del mini-carrito (carrito lateral)
 * ============================================================ */
.bdm-minicart-wa {
	margin-top: 8px;
}
/* El botón WhatsApp ocupa todo el ancho del panel */
.bdm-minicart-wa .bdm-wa-order {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	justify-content: center;
	padding: 12px 14px;
	font-size: 14px;
}
/* "Ver carrito" como botón secundario (borde, sin relleno fuerte) */
.bdm-minicart-viewcart {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

/* ============================================================
 * "Ahorrás $X (-Y%)" en el carrito, en verde success.
 * Va acá (no en product-controls) porque este CSS sí carga en el carrito.
 * El tema pinta .woocommerce-Price-amount > bdi; apuntamos al bdi con
 * especificidad alta para ganarle.
 * ============================================================ */
.woocommerce .bdm-savings,
.woocommerce-cart-form .bdm-savings,
dd.variation-Ahorrs .bdm-savings,
.bdm-savings,
.bdm-savings .woocommerce-Price-amount,
.bdm-savings .woocommerce-Price-amount.amount,
.bdm-savings bdi {
	color: var(--success, #1e8a4a) !important;
	font-weight: 700 !important;
}

/* ============================================================
 * Badge "¡Oferta! 🔥" en productos de la categoría ofertas
 * ============================================================ */
/* El contenedor de la imagen necesita posición relativa para anclar la badge */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product a img,
.bdm-offer-badge { position: relative; }

li.product { position: relative; }

.bdm-offer-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 5;
	background: var(--sale, #e11d2a);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	padding: 7px 11px;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
	white-space: nowrap;
	pointer-events: none;
}
/* En la página de producto individual, anclar sobre la galería */
.woocommerce div.product div.images { position: relative; }
.woocommerce div.product div.images .bdm-offer-badge {
	top: 14px;
	left: 14px;
	font-size: 13px;
	padding: 8px 13px;
}

/* ============================================================
 * Medios de pago [bdm_payment_methods]
 * ============================================================ */
.bdm-payments { margin: 14px 0; }
.bdm-payments--center { text-align: center; }
.bdm-payments--center .bdm-payments__list { justify-content: center; }
.bdm-payments--left { text-align: left; }
.bdm-payments--left .bdm-payments__list { justify-content: flex-start; }
.bdm-payments--right { text-align: right; }
.bdm-payments--right .bdm-payments__list { justify-content: flex-end; }
.bdm-payments__title {
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	opacity: .85;
	margin-bottom: 8px;
}
.bdm-payments__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
/* Chips monocromáticos: pensados para fondo oscuro (footer color primary).
   Todos iguales: borde claro translúcido + texto blanco, sin color de marca. */
.bdm-pay {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.45);
	white-space: nowrap;
}
/* Logos propios subidos: en blanco para que combinen con el resto.
   El filtro los vuelve monocromáticos claros sobre el fondo oscuro. */
.bdm-pay--img {
	background: transparent;
	border: none;
	padding: 0;
	height: auto;
}
.bdm-pay--img img {
	height: 28px;
	width: auto;
	display: block;
	filter: brightness(0) invert(1);
	opacity: .9;
}