/* Wheel Of Cash members — members promo banners
   ------------------------------------------------------------------
   Self-contained. Pairs with banners.js.
   Drop-in: copy banners.css + banners.js, add
     <div id="dpf-banner-rotator"></div>
     <div id="dpf-banner-static"></div>
   All selectors are namespaced .dpfb- / #dpf-banner- so nothing here
   can collide with members.css.
   ------------------------------------------------------------------ */

#dpf-banner-rotator,
#dpf-banner-static{
  /* local copies of the brand tokens so the module survives being
     dropped into a dashboard that does not define them */
  --dpfb-navy:#0f1f3d;
  --dpfb-navy-2:#16294f;
  --dpfb-navy-3:#0a1628;
  --dpfb-gold:#b8913a;
  --dpfb-gold-2:#d4ab52;
  --dpfb-gold-3:#f0cd74;
  --dpfb-gold-soft:#fdf7e8;
  --dpfb-gold-line:#e8d9ae;
  --dpfb-ink:#141a24;
  --dpfb-ink-2:#2a3341;
  --dpfb-muted:#5b616e;
  --dpfb-red:#e0353d;
  --dpfb-red-2:#c2141d;
  --dpfb-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  font-family:var(--dpfb-font);
  max-width:100%;
}
#dpf-banner-rotator *,
#dpf-banner-static *{box-sizing:border-box}

/* ==================================================================
   BANNER 1 — THE ROTATOR
   A dark navy bar with a gold edge. Four slides share ONE css-grid
   cell, so the bar is always as tall as its tallest slide and never
   changes height when the slide changes. Nothing moves; only opacity.
   ================================================================== */

.dpfb-rot{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(760px 260px at 12% -40%, #22406f 0%, rgba(34,64,111,0) 70%),
    linear-gradient(180deg,#14284c 0%,#0b1729 100%);
  background-color:var(--dpfb-navy);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 2px 4px rgba(15,31,61,.08), 0 14px 34px rgba(15,31,61,.18);
  margin-bottom:16px;
}
/* gold spine down the left edge */
.dpfb-rot::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--dpfb-gold-3) 0%,var(--dpfb-gold) 55%,#8c6c24 100%);
  z-index:3;
}

/* --- the stage: one grid cell, every slide stacked inside it ------ */
.dpfb-stage{
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
}
.dpfb-slide{
  grid-area:1 / 1 / 2 / 2;   /* <-- all four occupy the same cell */
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  min-width:0;
  padding:16px 20px 16px 22px;
  text-decoration:none;
  color:#fff;
  opacity:0;
  visibility:hidden;          /* keeps its box in the grid = no reflow */
  transition:opacity .45s ease;
  outline:0;
}
.dpfb-slide.is-on{
  opacity:1;
  visibility:visible;
  position:relative;
  z-index:2;
}
.dpfb-slide:focus-visible{
  outline:3px solid rgba(240,205,116,.75);
  outline-offset:-4px;
  border-radius:12px;
}

/* icon tile */
.dpfb-ic{
  flex:none;
  width:46px;height:46px;
  border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(240,205,116,.22) 0%,rgba(184,145,58,.14) 100%);
  border:1px solid rgba(240,205,116,.42);
  box-shadow:0 2px 10px rgba(0,0,0,.22) inset;
}
.dpfb-ic svg{width:23px;height:23px;display:block;fill:var(--dpfb-gold-3)}

/* text block */
.dpfb-txt{flex:1 1 260px;min-width:0}
.dpfb-kick{
  display:block;
  font-size:10.5px;font-weight:800;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--dpfb-gold-3);
  margin-bottom:5px;
  overflow-wrap:anywhere;
}
.dpfb-head{
  display:block;
  font-size:17px;font-weight:700;
  letter-spacing:-.018em;line-height:1.26;
  color:#fff;
  overflow-wrap:anywhere;
}
.dpfb-head em{font-style:normal;color:var(--dpfb-gold-3)}

/* CTA — a span, because the whole slide is already the <a> */
.dpfb-cta{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:700;letter-spacing:-.005em;
  color:#fff;
  background:linear-gradient(180deg,var(--dpfb-red) 0%,var(--dpfb-red-2) 100%);
  border-radius:10px;
  padding:13px 20px;
  white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 7px 18px rgba(190,25,34,.4);
  transition:filter .16s ease, box-shadow .16s ease, transform .08s ease;
}
.dpfb-cta svg{width:14px;height:14px;fill:currentColor;flex:none;opacity:.9}
.dpfb-slide:hover .dpfb-cta{
  filter:brightness(1.08);
  box-shadow:0 1px 0 rgba(255,255,255,.24) inset, 0 10px 24px rgba(190,25,34,.48);
}
.dpfb-slide:active .dpfb-cta{transform:translateY(1px)}

/* --- dots ---------------------------------------------------------- */
.dpfb-dots{
  position:relative;z-index:4;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:0 20px 12px;
  margin-top:-4px;
}
.dpfb-dot{
  appearance:none;-webkit-appearance:none;
  cursor:pointer;
  width:22px;height:18px;padding:0;
  border:0;background:none;
  display:flex;align-items:center;justify-content:center;
}
.dpfb-dot i{
  display:block;
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.3);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dpfb-dot:hover i{background:rgba(255,255,255,.55)}
.dpfb-dot[aria-current="true"] i{
  background:var(--dpfb-gold-3);
  transform:scale(1.34);
  box-shadow:0 0 0 3px rgba(240,205,116,.2);
}
.dpfb-dot:focus-visible{outline:2px solid rgba(240,205,116,.8);outline-offset:1px;border-radius:6px}

/* ==================================================================
   BANNER 2 — THE STATIC ONE
   Deliberately the opposite treatment: light cream, gold hairline,
   big pill radius, centred-ish stack, a gold corner ribbon. Reads as
   a separate "hand-picked" note rather than another promo bar.
   ================================================================== */

.dpfb-static{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:20px 24px;
  border-radius:22px;
  background:
    radial-gradient(520px 200px at 100% 0%, #fff6de 0%, rgba(255,246,222,0) 68%),
    linear-gradient(180deg,#fffdf6 0%,var(--dpfb-gold-soft) 100%);
  border:1px solid var(--dpfb-gold-line);
  box-shadow:0 1px 2px rgba(184,145,58,.1), 0 10px 26px rgba(184,145,58,.16);
  overflow:hidden;
  margin-bottom:24px;
}
/* gold hairline across the top, mirroring .status-top in members.css */
.dpfb-static::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--dpfb-gold) 0%,var(--dpfb-gold-3) 50%,var(--dpfb-gold) 100%);
}

.dpfb-s-ic{
  flex:none;
  width:58px;height:58px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#fdf3da 0%,#f1dca6 100%);
  border:1px solid var(--dpfb-gold-line);
  box-shadow:0 0 0 7px rgba(184,145,58,.08), 0 8px 20px rgba(184,145,58,.22);
}
.dpfb-s-ic svg{width:28px;height:28px;display:block;fill:var(--dpfb-gold)}

.dpfb-s-txt{flex:1 1 280px;min-width:0}
.dpfb-s-kick{
  display:block;
  font-size:10.5px;font-weight:800;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--dpfb-gold);
  margin-bottom:6px;
  overflow-wrap:anywhere;
}
.dpfb-s-head{
  display:block;
  font-size:19px;font-weight:700;
  letter-spacing:-.022em;line-height:1.22;
  color:var(--dpfb-navy);
  overflow-wrap:anywhere;
}
.dpfb-s-sub{
  display:inline-block;
  margin-top:8px;
  font-size:13.5px;font-weight:600;
  color:var(--dpfb-muted);
  text-decoration:none;
  border-bottom:1px solid rgba(91,97,110,.35);
}
.dpfb-s-sub:hover{color:var(--dpfb-ink-2);border-bottom-color:var(--dpfb-ink-2)}
.dpfb-s-sub:focus-visible{outline:2px solid rgba(184,145,58,.7);outline-offset:3px;border-radius:3px}

.dpfb-s-cta{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:16px;font-weight:700;
  color:#fff;text-decoration:none;
  background:linear-gradient(180deg,var(--dpfb-red) 0%,var(--dpfb-red-2) 100%);
  border-radius:999px;                /* pill — the rotator CTA is a rect */
  padding:15px 26px;
  white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 8px 22px rgba(190,25,34,.34);
  transition:filter .16s ease, box-shadow .16s ease, transform .08s ease;
}
.dpfb-s-cta svg{width:15px;height:15px;fill:currentColor;flex:none;opacity:.92}
.dpfb-s-cta:hover{filter:brightness(1.07);box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 12px 30px rgba(190,25,34,.42)}
.dpfb-s-cta:active{transform:translateY(1px)}
.dpfb-s-cta:focus-visible{outline:3px solid rgba(15,31,61,.5);outline-offset:3px}

/* ==================================================================
   NARROW SCREENS
   The CTA drops onto its own full-width row. The grid cell still
   sizes to the tallest slide, so the drop happens for all four at
   once and the bar height stays put.
   ================================================================== */

@media (max-width:720px){
  .dpfb-slide{gap:13px;padding:15px 16px 15px 18px}
  .dpfb-head{font-size:16px}
  .dpfb-txt{flex:1 1 180px}
  .dpfb-cta{flex:1 1 100%;margin-top:3px;padding:13px 16px;font-size:15px;white-space:normal}
  .dpfb-static{padding:18px 18px;border-radius:18px;gap:14px}
  .dpfb-s-head{font-size:17.5px}
  .dpfb-s-cta{flex:1 1 100%;padding:15px 18px;white-space:normal}
}

@media (max-width:420px){
  .dpfb-ic{width:40px;height:40px;border-radius:10px}
  .dpfb-ic svg{width:20px;height:20px}
  .dpfb-head{font-size:15.5px}
  .dpfb-kick,.dpfb-s-kick{letter-spacing:.13em}
  .dpfb-s-ic{width:50px;height:50px}
  .dpfb-s-ic svg{width:24px;height:24px}
  .dpfb-s-head{font-size:16.5px}
}

/* ==================================================================
   REDUCED MOTION — straight swap, no fade, no dot animation
   ================================================================== */

@media (prefers-reduced-motion:reduce){
  .dpfb-slide{transition:none}
  .dpfb-dot i{transition:none}
  .dpfb-cta,.dpfb-s-cta{transition:none}
  .dpfb-slide:active .dpfb-cta,.dpfb-s-cta:active{transform:none}
}


/* ==================================================================
   MOUNT WRAPPER
   One flex/grid child holding both banners, so a host dashboard that
   spaces its own top-level children with `gap` does not also inherit
   each banner's own bottom margin.
   ================================================================== */

.dpfb-mounts{display:grid;gap:14px}
.dpfb-mounts > div{min-width:0}
.dpfb-mounts .dpfb-rot,
.dpfb-mounts .dpfb-static{margin-bottom:0}