/* ============================================================================
   DASHBOARD COMPONENTS  —  site-wide
   Velzon "4K/8K Gold" dashboard components re-skinned in the STRONG IPTV
   gold + purple + navy brand. Everything is namespaced under `.dx` so it can
   never collide with existing site styles.

   Loaded site-wide via includes/site-head.php (after dashboard-theme.css).
   Components: stat cards, cards (header/body/dashed footer), level card,
   soft buttons, button groups, badges, progress, dropdown, explore/news cards,
   page-title box.
   ============================================================================ */
.dx{
  --dx-bg: rgba(255,255,255,.025);
  --dx-bg-hover: rgba(255,255,255,.045);
  --dx-border: rgba(252,221,141,.16);
  --dx-radius: .75rem;
  --dx-shadow: 0 1px 2px rgba(0,0,0,.25), 0 12px 32px -16px rgba(0,0,0,.65);
  --dx-shadow-lg: 0 18px 40px -12px rgba(0,0,0,.75);
  --dx-muted: #9aa6c0;
  --dx-gold:#e0b53a; --dx-gold-soft:rgba(224,181,58,.16);
  --dx-purple:#8c68cd; --dx-purple-soft:rgba(140,104,205,.16);
  --dx-teal:#2ab3a3; --dx-teal-soft:rgba(42,179,163,.16);
  --dx-red:#f06548;  --dx-red-soft:rgba(240,101,72,.16);
}
/* allow .dx tokens on a single element too (not just a wrapper) */
.dx-card,.dx-stat,.dx-btn,.dx-badge,.dx-titlebox,.dx-dd{
  --dx-bg: rgba(255,255,255,.025);
  --dx-bg-hover: rgba(255,255,255,.045);
  --dx-border: rgba(252,221,141,.16);
  --dx-radius: .75rem;
  --dx-shadow: 0 1px 2px rgba(0,0,0,.25), 0 12px 32px -16px rgba(0,0,0,.65);
  --dx-shadow-lg: 0 18px 40px -12px rgba(0,0,0,.75);
  --dx-muted: #9aa6c0;
  --dx-gold:#e0b53a; --dx-gold-soft:rgba(224,181,58,.16);
  --dx-purple:#8c68cd; --dx-purple-soft:rgba(140,104,205,.16);
  --dx-teal:#2ab3a3; --dx-teal-soft:rgba(42,179,163,.16);
  --dx-red:#f06548;  --dx-red-soft:rgba(240,101,72,.16);
}

/* ---- page-title box (Velzon header) ---- */
.dx-titlebox{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  background: var(--dx-bg); border:1px solid var(--dx-border); border-radius: var(--dx-radius);
  padding:14px 20px; margin-bottom:26px; box-shadow: var(--dx-shadow);
}
.dx-titlebox h4{ margin:0; font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:#fcdd8d; }
.dx-breadcrumb{ display:flex; gap:8px; align-items:center; margin:0; padding:0; list-style:none; font-size:13px; color:var(--dx-muted); }
.dx-breadcrumb li+li:before{ content:"\203A"; margin-right:8px; color:var(--dx-muted); }
.dx-breadcrumb .active{ color:#fcdd8d; }

/* ---- base card ---- */
.dx-card{
  background: var(--dx-bg); border:1px solid var(--dx-border); border-radius: var(--dx-radius);
  box-shadow: var(--dx-shadow); overflow:hidden; height:100%;
}
.dx-card-header{ padding:14px 18px; border-bottom:1px solid var(--dx-border); display:flex; align-items:center; justify-content:space-between; }
.dx-card-header h5{ margin:0; font-size:15px; font-weight:700; color:#fcdd8d; }
.dx-card-body{ padding:18px; color:#dfe4ef; }
.dx-card-footer{ padding:12px 18px; border-top:1px dashed var(--dx-border); display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--dx-muted); }

/* ---- card-animate: hover lift ---- */
.dx-animate{ transition: transform .4s ease, box-shadow .4s ease, background .3s ease; }
.dx-animate:hover{ transform: translateY(-5px); box-shadow: var(--dx-shadow-lg); background: var(--dx-bg-hover); }

/* ---- stat card (dashboard hallmark) ---- */
.dx-stat{ position:relative; }
.dx-stat-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.dx-stat-label{ text-transform:uppercase; font-weight:600; font-size:12px; letter-spacing:.03em; color:var(--dx-muted); margin:0; }
.dx-stat-num{ font-size:24px; font-weight:700; margin:22px 0 0; color:#fff; }
.dx-stat-icon{ width:48px; height:48px; flex:0 0 auto; border-radius:.5rem; display:flex; align-items:center; justify-content:center; font-size:22px; }
.dx-stat-strip{ height:6px; width:100%; }
.dx-c-gold   .dx-stat-icon{ background:var(--dx-gold-soft);   color:var(--dx-gold); }
.dx-c-gold   .dx-stat-strip{ background:var(--dx-gold); }
.dx-c-purple .dx-stat-icon{ background:var(--dx-purple-soft); color:var(--dx-purple); }
.dx-c-purple .dx-stat-strip{ background:var(--dx-purple); }
.dx-c-teal   .dx-stat-icon{ background:var(--dx-teal-soft);   color:var(--dx-teal); }
.dx-c-teal   .dx-stat-strip{ background:var(--dx-teal); }
.dx-c-red    .dx-stat-icon{ background:var(--dx-red-soft);    color:var(--dx-red); }
.dx-c-red    .dx-stat-strip{ background:var(--dx-red); }
/* keep the site's existing counter animation styling working inside dx-stat */
.dx-stat .counter{ font-size:24px; font-weight:700; color:#fff; line-height:1; }

/* ---- soft / colored dashboard buttons ---- */
.dx-btn{ display:inline-flex; align-items:center; gap:8px; border:none; border-radius:.4rem; font-weight:700; font-size:13px; padding:9px 16px; cursor:pointer; transition: all .2s ease; text-decoration:none; }
.dx-btn-soft-gold{ background:var(--dx-gold-soft); color:var(--dx-gold); }
.dx-btn-soft-gold:hover{ background:var(--dx-gold); color:#000; }
.dx-btn-soft-purple{ background:var(--dx-purple-soft); color:#b79be0; }
.dx-btn-soft-purple:hover{ background:var(--dx-purple); color:#fff; }
.dx-btn-soft-teal{ background:var(--dx-teal-soft); color:var(--dx-teal); }
.dx-btn-soft-teal:hover{ background:var(--dx-teal); color:#fff; }
.dx-btn-soft-red{ background:var(--dx-red-soft); color:var(--dx-red); }
.dx-btn-soft-red:hover{ background:var(--dx-red); color:#fff; }
.dx-btn-group{ display:inline-flex; border-radius:.4rem; overflow:hidden; }
.dx-btn-group .dx-btn{ border-radius:0; border-bottom:2px solid rgba(0,0,0,.35); }

/* ---- badges ---- */
.dx-badge{ display:inline-block; padding:4px 9px; border-radius:999px; font-size:11px; font-weight:700; }
.dx-badge-gold{ background:var(--dx-gold-soft); color:var(--dx-gold); }
.dx-badge-purple{ background:var(--dx-purple-soft); color:#b79be0; }
.dx-badge-teal{ background:var(--dx-teal-soft); color:var(--dx-teal); }
.dx-badge-red{ background:var(--dx-red-soft); color:var(--dx-red); }

/* ---- progress ---- */
.dx-progress{ height:8px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.dx-progress > span{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#fcdd8d,#e0b53a); }

/* ---- dropdown ---- */
.dx-dd{ position:relative; display:inline-block; }
.dx-dd-toggle{ cursor:pointer; }
.dx-dd-menu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:210px; z-index:30;
  background:rgba(12,14,22,.98); border:1px solid var(--dx-border); border-radius:var(--dx-radius);
  box-shadow:var(--dx-shadow-lg); padding:8px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.dx-dd.open .dx-dd-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.dx-dd-menu a{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:8px; color:#e7ddc0; font-weight:600; font-size:14px; text-decoration:none; transition:.15s ease; }
.dx-dd-menu a:hover{ background:var(--dx-gold-soft); color:#fcdd8d; padding-left:16px; }
.dx-dd-menu a i{ color:var(--dx-purple); width:18px; text-align:center; }
.dx-dd-divider{ height:1px; background:var(--dx-border); margin:6px 4px; }

/* ---- explore / news card ---- */
.dx-explore .dx-explore-img{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.dx-explore .dx-explore-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.dx-explore:hover .dx-explore-img img{ transform:scale(1.06); }
.dx-heart{ position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; border:none; background:rgba(0,0,0,.45); color:#f06548; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s ease; }
.dx-heart:hover, .dx-heart.on{ background:#f06548; color:#fff; }

/* ---- level / reward card ---- */
.dx-level{ background:linear-gradient(135deg, rgba(140,104,205,.18), rgba(224,181,58,.10)); }

/* ---- icon tile (for feature/service blocks) ---- */
.dx-icon-tile{ width:56px; height:56px; border-radius:.6rem; display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:16px; }
.dx-c-gold   .dx-icon-tile{ background:var(--dx-gold-soft);   color:var(--dx-gold); }
.dx-c-purple .dx-icon-tile{ background:var(--dx-purple-soft); color:var(--dx-purple); }
.dx-c-teal   .dx-icon-tile{ background:var(--dx-teal-soft);   color:var(--dx-teal); }
.dx-c-red    .dx-icon-tile{ background:var(--dx-red-soft);    color:var(--dx-red); }