/* ===== MBC Promo Banners — shared (public + admin preview) =====
   Design system: mesh gradient derivat din cele 2 culori (color-mix), media
   full-bleed care arată tot GIF-ul (fără crop), badge/eyebrow, tipografie premium. */
.mbc-banner{
  --b-anim:3s;
  /* mesh modern construit din culorile alese de admin */
  --b-mesh:
    radial-gradient(115% 90% at 8% 4%,   color-mix(in srgb, var(--b-grad-from), #fff 28%), transparent 56%),
    radial-gradient(100% 85% at 98% 10%,  color-mix(in srgb, var(--b-grad-to),   #fff 16%), transparent 55%),
    radial-gradient(140% 130% at 88% 118%, color-mix(in srgb, var(--b-grad-to),  #000 32%), transparent 62%),
    linear-gradient(150deg, var(--b-grad-from), var(--b-grad-to));
  box-sizing:border-box; transition:opacity .45s cubic-bezier(.2,.7,.2,1);
}
.mbc-banner *{ box-sizing:border-box; }
/* media load-gate: ascuns până se încarcă GIF-ul în fundal */
.mbc-banner--loading{ opacity:0 !important; pointer-events:none; }

.mbc-banner__card{ position:relative; isolation:isolate; color:var(--b-text,#fff);
  background-color:var(--b-grad-to); background-image:var(--b-mesh); }
/* conținutul stă peste stratul decorativ */
.mbc-banner__media, .mbc-banner__body{ position:relative; z-index:1; }

/* strat de profunzime: lumină moale + textură fină (cardul nu mai e plat) */
.mbc-banner__sheen{ position:absolute; inset:0; z-index:0; border-radius:inherit; overflow:hidden; pointer-events:none; }
.mbc-banner__sheen::before{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 14% -8%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(46% 40% at 106% 4%, rgba(255,255,255,.14), transparent 60%); }
.mbc-banner__sheen::after{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px); background-size:16px 16px; }

.mbc-banner__close{ position:absolute; top:10px; right:11px; width:28px; height:28px; border:none;
  border-radius:50%; background:rgba(10,14,22,.4); color:#fff; font-size:13px; cursor:pointer; line-height:1; z-index:6;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .2s, transform .25s; }
.mbc-banner__close:hover{ background:rgba(10,14,22,.72); transform:rotate(90deg); }

.mbc-banner__media img{ display:block; width:100%; height:100%; object-fit:cover; }

/* eyebrow / badge */
.mbc-banner__badge{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; color:#fff; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,.18); }
.mbc-banner__badge::before{ content:"✦"; font-size:.7em; opacity:.9; }

.mbc-banner__heading{ font-weight:800; font-size:1.18rem; line-height:1.16; letter-spacing:-.02em;
  text-shadow:0 1px 3px rgba(0,0,0,.22); }
.mbc-banner__subtext{ font-size:.86rem; line-height:1.5; opacity:.92; margin-top:6px; text-shadow:0 1px 2px rgba(0,0,0,.14); }

.mbc-banner__btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  padding:11px 22px; border-radius:12px; background:var(--b-btn-bg,#fff); color:var(--b-btn-text,#5b8cff);
  font-weight:800; font-size:.88rem; letter-spacing:-.01em; text-decoration:none; cursor:pointer; align-self:flex-start;
  box-shadow:0 12px 24px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s; }
.mbc-banner__btn:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -10px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.6); }
.mbc-banner__btn::after{ content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); transition:left .6s ease; }
.mbc-banner__btn:hover::after{ left:140%; }

/* ---- Body layouts ---- */
.mbc-banner__body{ display:flex; flex-direction:column; }

/* ---- Positions ---- */
.mbc-banner--topbar{ position:fixed; top:0; left:0; right:0; z-index:9999; }
.mbc-banner--topbar .mbc-banner__card{ display:flex; align-items:center; justify-content:center; gap:14px;
  padding:11px 46px; text-align:center; flex-wrap:wrap; }
.mbc-banner--topbar .mbc-banner__body{ flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.mbc-banner--topbar .mbc-banner__heading{ font-size:.98rem; }
.mbc-banner--topbar .mbc-banner__subtext{ margin-top:0; }
.mbc-banner--topbar .mbc-banner__badge{ align-self:center; }
.mbc-banner--topbar .mbc-banner__btn{ margin-top:0; align-self:center; padding:8px 16px; }
.mbc-banner--topbar .mbc-banner__media{ height:40px; width:auto; border-radius:8px; overflow:hidden; flex:none; }

.mbc-banner--slidein{ position:fixed; bottom:0; left:0; right:0; z-index:9998; animation:mbc-up .55s cubic-bezier(.2,.8,.2,1); }
.mbc-banner--slidein .mbc-banner__card{ display:flex; align-items:center; gap:18px; padding:14px 50px 14px 22px; }
.mbc-banner--slidein .mbc-banner__body{ flex:1; flex-direction:row; align-items:center; gap:16px; flex-wrap:wrap; }
.mbc-banner--slidein .mbc-banner__media{ height:46px; width:auto; border-radius:9px; overflow:hidden; flex:none; }
.mbc-banner--slidein .mbc-banner__btn{ margin-top:0; margin-left:auto; }

.mbc-banner--corner{ position:fixed; right:22px; bottom:22px; width:320px; z-index:9998; animation:mbc-pop-in .5s cubic-bezier(.2,.8,.2,1); }
.mbc-banner--corner .mbc-banner__card{ border-radius:20px; overflow:hidden; }
.mbc-banner--corner .mbc-banner__media{ width:100%; border-radius:0; }
.mbc-banner--corner .mbc-banner__body{ padding:16px 18px 20px; gap:2px; }

.mbc-banner--modal{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; overflow:auto; }
.mbc-banner--modal .mbc-banner__overlay{ position:absolute; inset:0; background:rgba(6,8,14,.5);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:mbc-fade .35s ease; }
html.mbc-no-scroll{ overflow:hidden !important; }
body.mbc-no-scroll{ position:fixed !important; left:0; right:0; width:100%; overflow:hidden !important; }
.mbc-banner--modal .mbc-banner__card{ position:relative; width:min(560px,94vw); border-radius:26px; overflow:hidden;
  animation:mbc-pop-in .45s cubic-bezier(.2,.8,.2,1); }
.mbc-banner--modal .mbc-banner__media{ width:100%; border-radius:0; }
.mbc-banner--modal .mbc-banner__body{ padding:30px 36px 34px; align-items:center; text-align:center; gap:5px; }
.mbc-banner--modal .mbc-banner__badge{ align-self:center; font-size:.7rem; padding:6px 13px; }
.mbc-banner--modal .mbc-banner__btn{ align-self:center; margin-top:22px; padding:13px 28px; font-size:.95rem; }
.mbc-banner--modal .mbc-banner__heading{ font-size:1.95rem; line-height:1.1; }
.mbc-banner--modal .mbc-banner__subtext{ font-size:1.02rem; max-width:38ch; }

.mbc-banner--inline{ position:relative; width:100%; margin:24px 0; }
.mbc-banner--inline .mbc-banner__card{ display:flex; align-items:center; gap:20px; padding:18px 24px; border-radius:18px; }
.mbc-banner--inline .mbc-banner__media{ height:92px; width:auto; border-radius:12px; overflow:hidden; flex:none; }
.mbc-banner--inline .mbc-banner__body{ flex:1; gap:2px; }
.mbc-banner--inline .mbc-banner__btn{ margin-top:10px; }

/* ---- Skins ---- */
/* GLASS — frosted premium */
.mbc-banner[data-style="glass"] .mbc-banner__card{ background-color:rgba(255,255,255,.08); background-image:none;
  border:1px solid rgba(255,255,255,.20); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  animation:mbc-glow var(--b-anim) ease-in-out infinite; }
@keyframes mbc-glow{ 0%,100%{ box-shadow:0 0 28px 2px color-mix(in srgb,var(--b-grad-from),transparent 70%);}
  50%{ box-shadow:0 0 50px 10px color-mix(in srgb,var(--b-grad-to),transparent 55%);} }

/* CONIC — rotating gradient border */
.mbc-banner[data-style="conic"] .mbc-banner__card{ overflow:hidden; background-image:none;
  box-shadow:0 18px 50px -16px color-mix(in srgb,var(--b-grad-to),transparent 35%); }
.mbc-banner[data-style="conic"] .mbc-banner__card::before{ content:""; position:absolute; inset:-60%; z-index:-1;
  background:conic-gradient(from 0deg,var(--b-grad-from),var(--b-grad-to),#ff5ba8,#5bd9ff,#a78bfa,var(--b-grad-from));
  filter:saturate(1.35) brightness(1.1); animation:mbc-spin var(--b-anim) linear infinite; }
.mbc-banner[data-style="conic"] .mbc-banner__card::after{ content:""; position:absolute; inset:4px; z-index:-1; border-radius:inherit;
  background-color:var(--b-grad-to); background-image:var(--b-mesh); }
@keyframes mbc-spin{ to{ transform:rotate(360deg); } }

/* DEVICE — tabletă/telefon real (cadru metalic, reflexie, cameră); JS dă proporția */
.mbc-banner[data-style="device"] .mbc-banner__media{ position:relative; margin:18px auto 10px; padding:11px;
  width:180px; height:300px; border-radius:30px;
  background:linear-gradient(155deg,#3a4150 0%,#161a22 46%,#0a0c11 100%);
  box-shadow:0 34px 60px -18px rgba(0,0,0,.7), 0 4px 10px rgba(0,0,0,.45),
    inset 0 0 0 1.5px rgba(255,255,255,.16), inset 0 0 0 6px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.22);
  animation:mbc-float var(--b-anim) ease-in-out infinite; }
.mbc-banner[data-style="device"] .mbc-banner__media::before{ content:""; position:absolute; top:7px; left:50%; z-index:4;
  transform:translateX(-50%); width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #6b7689, #0a0c11 70%);
  box-shadow:0 0 0 2px rgba(255,255,255,.07), 0 0 4px rgba(120,160,255,.5); }
.mbc-banner[data-style="device"] .mbc-banner__media::after{ content:""; position:absolute; inset:11px; z-index:3; pointer-events:none;
  border-radius:18px; background:linear-gradient(125deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.05) 16%, transparent 34%); }
.mbc-banner[data-style="device"] .mbc-banner__media img{ width:100%; height:100%; object-fit:cover; border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6); }
.mbc-banner[data-style="device"] .mbc-banner__media[data-orient="land"]{ border-radius:22px; }
.mbc-banner[data-style="device"] .mbc-banner__media[data-orient="land"] img,
.mbc-banner[data-style="device"] .mbc-banner__media[data-orient="land"]::after{ border-radius:14px; }
.mbc-banner--inline[data-style="device"] .mbc-banner__media{ width:120px; height:200px; }
.mbc-banner--topbar[data-style="device"]  .mbc-banner__media,
.mbc-banner--slidein[data-style="device"] .mbc-banner__media{ width:44px; height:44px; margin:0; padding:0; border-radius:12px; }
.mbc-banner--topbar[data-style="device"]  .mbc-banner__media::before,
.mbc-banner--slidein[data-style="device"] .mbc-banner__media::before,
.mbc-banner--topbar[data-style="device"]  .mbc-banner__media::after,
.mbc-banner--slidein[data-style="device"] .mbc-banner__media::after{ display:none; }
@keyframes mbc-float{ 0%,100%{ transform:translateY(-6px);} 50%{ transform:translateY(6px);} }

/* CONFETTI — gradient curgător festiv + confetti */
.mbc-banner[data-style="confetti"] .mbc-banner__card{ overflow:hidden; }
.mbc-banner[data-style="confetti"] .mbc-banner__card::before{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg,var(--b-grad-from),var(--b-grad-to),color-mix(in srgb,var(--b-grad-from),#ff5b8c 60%),var(--b-grad-from));
  background-size:300% 100%; animation:mbc-flow var(--b-anim) linear infinite; opacity:.9; }
@keyframes mbc-flow{ to{ background-position:300% 0; } }
.mbc-banner__confetti{ position:absolute; width:8px; height:8px; border-radius:2px; top:-10px; opacity:.9; z-index:1;
  animation:mbc-fall linear infinite; pointer-events:none; }
@keyframes mbc-fall{ 0%{ transform:translateY(-12px) rotate(0);} 100%{ transform:translateY(160px) rotate(360deg);} }

/* SPOTLIGHT — cinematic: respiră + reflexie peste media */
.mbc-banner[data-style="spotlight"] .mbc-banner__card{ animation:mbc-breathe var(--b-anim) ease-in-out infinite; }
@keyframes mbc-breathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.025);} }
.mbc-banner[data-style="spotlight"] .mbc-banner__media{ position:relative; overflow:hidden; }
.mbc-banner[data-style="spotlight"] .mbc-banner__media::after{ content:""; position:absolute; top:0; left:-60%; width:45%; height:100%; z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:mbc-shine var(--b-anim) linear infinite; }
@keyframes mbc-shine{ 0%{ left:-60%;} 100%{ left:120%; } }

/* ---- Entrance ---- */
@keyframes mbc-up{ from{ transform:translateY(110%);} to{ transform:translateY(0);} }
@keyframes mbc-pop-in{ from{ transform:scale(.92) translateY(8px); opacity:0;} to{ transform:scale(1) translateY(0); opacity:1;} }
@keyframes mbc-fade{ from{ opacity:0;} to{ opacity:1;} }

/* ---- Premium glow pe carduri flotante (din culoarea aleasă) ---- */
.mbc-banner--modal .mbc-banner__card,
.mbc-banner--corner .mbc-banner__card{ box-shadow:0 40px 90px -24px rgba(0,0,0,.62),
  0 0 0 1px rgba(255,255,255,.10), 0 26px 80px -28px var(--b-grad-to); }

/* ---- Responsive (mobil) ---- */
@media (max-width:520px){
  .mbc-banner--corner{ left:12px; right:12px; bottom:12px; width:auto; }
  .mbc-banner--modal .mbc-banner__card{ width:94vw; }
  .mbc-banner--modal .mbc-banner__heading{ font-size:1.32rem; }
  .mbc-banner--topbar .mbc-banner__card{ padding:10px 42px; gap:8px; }
  .mbc-banner--topbar .mbc-banner__heading{ font-size:.9rem; }
  .mbc-banner--slidein .mbc-banner__card{ padding:12px 42px 12px 16px; gap:12px; }
  .mbc-banner--slidein .mbc-banner__body{ gap:10px; }
  .mbc-banner--slidein .mbc-banner__btn{ margin-left:0; }
}

/* ---- Admin preview stage ---- */
.banner-form-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,460px); gap:26px; align-items:start; }
.banner-form-fields{ min-width:0; }
.banner-preview-panel{ position:sticky; top:20px; min-width:0; border:1px solid var(--line,#2a2f3a); border-radius:16px; padding:18px;
  background:var(--bg-1,transparent); box-shadow:0 6px 24px rgba(0,0,0,.06); }
.banner-preview-head{ font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--mute,#888); margin-bottom:12px; }
.banner-preview-stage{ position:relative; min-height:480px; border-radius:14px; overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%, rgba(42,50,68,.65), rgba(13,16,22,.92)),
             repeating-linear-gradient(45deg,#1b1f27,#1b1f27 12px,#171a21 12px,#171a21 24px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), inset 0 30px 70px rgba(0,0,0,.4); }
.banner-preview-stage .mbc-banner--topbar,
.banner-preview-stage .mbc-banner--slidein,
.banner-preview-stage .mbc-banner--corner,
.banner-preview-stage .mbc-banner--modal{ position:absolute; }
.banner-preview-stage .mbc-banner--modal{ overflow:hidden; }
.banner-preview-stage .mbc-banner--modal .mbc-banner__card{ width:88%; max-width:330px; }
.banner-preview-stage .mbc-banner--modal .mbc-banner__overlay{ position:absolute; }
.banner-preview-stage .mbc-banner--corner{ left:auto; right:16px; bottom:16px; width:min(290px,82%); }
.banner-preview-stage .mbc-banner--slidein{ left:0; right:0; bottom:0; }
.banner-preview-stage .mbc-banner--topbar{ left:0; right:0; top:0; }
.banner-preview-stage .mbc-banner--loading{ opacity:1 !important; }
@media (max-width:980px){ .banner-form-layout{ grid-template-columns:1fr; } .banner-preview-stage{ min-height:360px; } }

/* admin mini-chart */
.banner-stats-mini{ margin-top:18px; }
.bsm-bars{ display:flex; gap:8px; align-items:flex-end; height:72px; padding-top:8px; }
.bsm-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.bsm-bar{ width:100%; max-width:26px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#5b8cff,#8b5bff); }
.bsm-day{ font-size:10px; color:var(--mute,#888); }

/* admin stats cards */
.bstat-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.bstat{ background:var(--bg-2,#171a21); border:1px solid var(--line,#2a2f3a); border-radius:12px; padding:12px 8px; text-align:center; }
.bstat-num{ font-size:21px; font-weight:800; line-height:1; color:var(--text,#e9edf5); }
.bstat-lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--mute,#888); margin-top:6px; }
.bstat-accent .bstat-num{ background:linear-gradient(90deg,#5b8cff,#8b5bff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.bstat-empty{ font-size:12.5px; color:var(--mute,#888); line-height:1.5; margin-top:12px; }