/* ============================================================
 * GESTOR DE PROMOCIONES — estilos de las superficies flotantes
 *   .bgmg-promo--corner  (tarjeta en esquina)
 *   .bgmg-promo--bar     (barra fina)
 *   .bgmg-promo--modal   (modal centrado)
 *
 * Las reglas que REVELAN al abrir (.is-open) viven inline en el
 * <style id="bgmg-critical-open"> de wp_head (bgmg-landing.php) para que
 * el "Quitar CSS sin usar" de LiteSpeed no las pode (decisión #8). Aquí va
 * la maqueta/estética. Las variables de color usan fallback por si la página
 * no es una plantilla del plugin (que define el :root de la paleta).
 * ============================================================ */

.bgmg-promo{
	position:fixed;
	z-index:9500;
	font-family:var(--bgmg-font,'Poppins',-apple-system,BlinkMacSystemFont,sans-serif);
	transition:opacity .28s ease, transform .28s ease;
}
.bgmg-promo *{box-sizing:border-box}

.bgmg-promo-inner{
	position:relative;
	background:#fff;
	color:var(--dark,#1A1015);
	border:1px solid var(--border,#f0e0e5);
	box-shadow:0 14px 44px rgba(26,16,21,.18);
}

.bgmg-promo-close{
	position:absolute;top:6px;right:9px;
	width:28px;height:28px;
	border:0;background:rgba(255,255,255,.7);border-radius:50%;
	font-size:20px;line-height:1;cursor:pointer;
	color:var(--mid,#7A5060);
	z-index:2;
}
.bgmg-promo-close:hover{color:var(--pink-dark,#DA4C7F)}

.bgmg-promo-media img{display:block;width:100%;height:auto}
.bgmg-promo-body{padding:14px 16px}
.bgmg-promo-badge{margin-bottom:6px}
.bgmg-promo-heading{font-weight:600;font-size:16px;line-height:1.25;margin-bottom:4px;color:var(--dark,#1A1015)}
.bgmg-promo-text{font-size:13px;line-height:1.4;color:var(--mid,#7A5060);margin-bottom:8px}
.bgmg-promo-price{font-weight:600;font-size:15px;color:var(--pink-dark,#DA4C7F);margin-bottom:10px}
.bgmg-promo-cta{
	display:inline-block;
	background:var(--pink-dark,#DA4C7F);color:#fff;text-decoration:none;
	padding:9px 18px;border-radius:999px;font-size:13px;font-weight:600;
	transition:filter .15s ease;
}
.bgmg-promo-cta:hover{filter:brightness(1.06);color:#fff}

/* ── Tarjeta en esquina ─────────────────────────────────── */
/* El JS (bgmg-promos.js) puede subirla con un bottom inline cuando la
   ventanita de la meta de regalo está visible (se apilan, no se tapan). */
.bgmg-promo--corner{bottom:20px;max-width:330px;width:calc(100% - 32px);transition:opacity .28s ease,transform .28s ease,bottom .28s ease}
.bgmg-promo--corner.bgmg-promo--br{right:16px}
.bgmg-promo--corner.bgmg-promo--bl{left:16px}
.bgmg-promo--corner{transform:translateY(24px)}
.bgmg-promo--corner.is-open{transform:translateY(0)}
.bgmg-promo--corner .bgmg-promo-inner{border-radius:14px;overflow:hidden}
.bgmg-promo--corner .bgmg-promo-media img{max-height:170px;object-fit:cover}
/* No tapar la barra de pestañas móvil (footer) */
@media (max-width:767px){
	.bgmg-promo--corner{bottom:78px;max-width:none}
}

/* ── Barra fina (arriba, JUSTO BAJO el header fijo) ─────────
   No va en top:0: con z-index 9500 taparía el header (z 1000, 64/72px). */
.bgmg-promo--bar{left:0;right:0;top:64px;transform:translateY(-100%)}
@media (min-width:768px){.bgmg-promo--bar{top:72px}}
.bgmg-promo--bar.is-open{transform:translateY(0)}
.bgmg-promo--bar .bgmg-promo-inner{
	display:flex;align-items:center;gap:14px;
	border-radius:0;border-left:0;border-right:0;border-top:0;
	background:var(--pink-soft,#FBF0F2);
	padding:9px 18px;max-width:1180px;margin:0 auto;
	box-shadow:0 4px 18px rgba(26,16,21,.10);
}
.bgmg-promo--bar .bgmg-promo-media{flex:0 0 auto}
.bgmg-promo--bar .bgmg-promo-media img{width:42px;height:42px;border-radius:8px;object-fit:cover}
.bgmg-promo--bar .bgmg-promo-body{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:0;flex:1}
.bgmg-promo--bar .bgmg-promo-heading,
.bgmg-promo--bar .bgmg-promo-text,
.bgmg-promo--bar .bgmg-promo-price{margin:0}
.bgmg-promo--bar .bgmg-promo-close{position:static;background:transparent;margin-left:auto;flex:0 0 auto}
.bgmg-promo--bar .bgmg-promo-badge{display:none}

/* ── Modal centrado ─────────────────────────────────────── */
.bgmg-promo--modal{inset:0;display:flex;align-items:center;justify-content:center;padding:20px;z-index:9600}
.bgmg-promo--modal .bgmg-promo-backdrop{position:absolute;inset:0;background:rgba(26,16,21,.55)}
.bgmg-promo--modal .bgmg-promo-inner{
	position:relative;max-width:380px;width:100%;
	border-radius:16px;overflow:hidden;
	transform:translateY(14px);transition:transform .28s ease;
}
.bgmg-promo--modal.is-open .bgmg-promo-inner{transform:translateY(0)}
.bgmg-promo--modal .bgmg-promo-media img{max-height:220px;object-fit:cover}
.bgmg-promo--modal .bgmg-promo-body{padding:18px 20px}
.bgmg-promo--modal .bgmg-promo-heading{font-size:19px}

/* ── Bloque embebido (Fase 2: home/tienda/categoría/ficha) ──
   No es flotante: position:static y visible siempre (lleva .is-open en el markup). */
.bgmg-promo--embed{position:static;opacity:1;visibility:visible;transform:none;width:auto;max-width:none;margin:22px auto;padding:0 16px;box-shadow:none}
.bgmg-promo--embed .bgmg-promo-embed-inner{
	display:flex;align-items:center;gap:18px;
	max-width:1100px;margin:0 auto;
	background:var(--pink-soft,#FBF0F2);
	border:1px solid var(--border,#f0e0e5);
	border-radius:16px;padding:16px 20px;
	box-shadow:0 8px 26px rgba(26,16,21,.08);
}
.bgmg-promo--embed .bgmg-promo-embed-media{flex:0 0 auto}
.bgmg-promo--embed .bgmg-promo-embed-media img{width:110px;height:110px;object-fit:cover;border-radius:12px;display:block}
.bgmg-promo--embed .bgmg-promo-body{flex:1;padding:0;background:transparent;border:0}
.bgmg-promo--embed .bgmg-promo-heading{font-size:19px}
.bgmg-promo--embed .bgmg-promo-text{margin-bottom:10px}

/* Escalera de la meta de regalo (2+ niveles): tarjetita por nivel con la foto del regalo */
.bgmg-promo-metas{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 12px}
.bgmg-promo-meta-nivel{
	display:flex;flex-direction:column;align-items:center;gap:4px;
	flex:0 1 128px;min-width:104px;text-align:center;
	background:#fff;border:1px solid var(--border,#f0e0e5);
	border-radius:12px;padding:10px 8px;
}
.bgmg-promo-meta-nivel img{width:64px;height:64px;object-fit:cover;border-radius:10px;display:block}
.bgmg-promo-meta-monto{font-size:12px;font-weight:600;color:var(--pink-dark,#DA4C7F);white-space:nowrap}
.bgmg-promo-meta-nombre{font-size:11.5px;color:var(--mid,#7A5060);line-height:1.25}
@media (max-width:600px){
	.bgmg-promo--embed .bgmg-promo-embed-inner{flex-direction:column;text-align:center;gap:12px}
	.bgmg-promo--embed .bgmg-promo-embed-media img{width:100%;height:auto;max-height:200px}
	.bgmg-promo-metas{justify-content:center}
}