/* ==============================================
   JB Tier Theme — globaal kleurenschema per loyalty tier
   Toepasbaar op elk element met data-tier="Bronze|Silver|Gold|Platinum|Diamond|Elite"
   ============================================== */

/* Default (fallback = Gold — huidige huisstijl) */
[data-tier] {
  --tier-deep:    #8B6914;
  --tier-mid:     #c4a265;
  --tier-light:   #d4b87a;
  --tier-accent:  #ffffff;
  --tier-text:    #ffffff;
  --tier-text-soft: rgba(255,255,255,0.72);
  --tier-text-mute: rgba(255,255,255,0.5);
  --tier-panel:   rgba(255,255,255,0.12);
  --tier-panel-border: rgba(255,255,255,0.2);
  --tier-progress-bg: rgba(255,255,255,0.18);
  --tier-progress-fill: #ffffff;
}

/* BRONZE — warm koper */
[data-tier="Bronze"] {
  --tier-deep: #6b3d15;
  --tier-mid:  #b87333;
  --tier-light:#e0a968;
  --tier-accent:#ffe7c4;
  --tier-text: #ffffff;
  --tier-text-soft: rgba(255,235,210,0.85);
  --tier-text-mute: rgba(255,235,210,0.55);
  --tier-panel: rgba(255,231,196,0.14);
  --tier-panel-border: rgba(255,231,196,0.28);
  --tier-progress-bg: rgba(255,231,196,0.18);
  --tier-progress-fill: #ffe7c4;
}

/* SILVER — zilvergrijs */
[data-tier="Silver"] {
  --tier-deep: #5f5f5f;
  --tier-mid:  #9ea3a8;
  --tier-light:#dde1e4;
  --tier-accent:#ffffff;
  --tier-text: #ffffff;
  --tier-text-soft: rgba(255,255,255,0.82);
  --tier-text-mute: rgba(255,255,255,0.55);
  --tier-panel: rgba(255,255,255,0.16);
  --tier-panel-border: rgba(255,255,255,0.28);
  --tier-progress-bg: rgba(255,255,255,0.22);
  --tier-progress-fill: #ffffff;
}

/* GOLD — huidige honing-goud (blijft) */
[data-tier="Gold"] {
  --tier-deep: #8B6914;
  --tier-mid:  #c4a265;
  --tier-light:#d4b87a;
  --tier-accent:#ffe5a3;
  --tier-text: #ffffff;
  --tier-text-soft: rgba(255,229,163,0.85);
  --tier-text-mute: rgba(255,229,163,0.55);
  --tier-panel: rgba(255,229,163,0.14);
  --tier-panel-border: rgba(255,229,163,0.3);
  --tier-progress-bg: rgba(255,255,255,0.22);
  --tier-progress-fill: #ffe5a3;
}

/* PLATINUM — koele platinum */
[data-tier="Platinum"] {
  --tier-deep: #5a6a73;
  --tier-mid:  #9fb1bd;
  --tier-light:#d6e1e8;
  --tier-accent:#eaf3f8;
  --tier-text: #11222c;
  --tier-text-soft: rgba(17,34,44,0.75);
  --tier-text-mute: rgba(17,34,44,0.5);
  --tier-panel: rgba(17,34,44,0.06);
  --tier-panel-border: rgba(17,34,44,0.14);
  --tier-progress-bg: rgba(17,34,44,0.14);
  --tier-progress-fill: #11222c;
}

/* DIAMOND — zacht ijsblauw */
[data-tier="Diamond"] {
  --tier-deep: #2f5770;
  --tier-mid:  #7fa8c7;
  --tier-light:#b9dfff;
  --tier-accent:#e5f4ff;
  --tier-text: #0e2a3e;
  --tier-text-soft: rgba(14,42,62,0.75);
  --tier-text-mute: rgba(14,42,62,0.5);
  --tier-panel: rgba(14,42,62,0.06);
  --tier-panel-border: rgba(14,42,62,0.16);
  --tier-progress-bg: rgba(14,42,62,0.14);
  --tier-progress-fill: #0e2a3e;
}

/* ELITE — forest green met gouden accenten (prestigious) */
[data-tier="Elite"] {
  --tier-deep: #14211c;
  --tier-mid:  #2c4a3e;
  --tier-light:#4b7a66;
  --tier-accent:#ffd87a;
  --tier-text: #ffd87a;
  --tier-text-soft: rgba(255,216,122,0.82);
  --tier-text-mute: rgba(255,216,122,0.5);
  --tier-panel: rgba(255,216,122,0.08);
  --tier-panel-border: rgba(255,216,122,0.26);
  --tier-progress-bg: rgba(255,216,122,0.16);
  --tier-progress-fill: #ffd87a;
}

/* ============================================
   Toepassing op bedankt-pagina loyalty kaart
   ============================================ */
#jb-loyalty-card[data-tier] {
  background: linear-gradient(135deg, var(--tier-deep), var(--tier-mid), var(--tier-light), var(--tier-mid), var(--tier-deep)) !important;
  color: var(--tier-text) !important;
}
#jb-loyalty-card[data-tier] #jb-loyalty-title,
#jb-loyalty-card[data-tier] #jb-loyalty-earned,
#jb-loyalty-card[data-tier] #jb-loyalty-total,
#jb-loyalty-card[data-tier] #jb-loyalty-korting,
#jb-loyalty-card[data-tier] #jb-loyalty-upgrade-text {
  color: var(--tier-text) !important;
}
#jb-loyalty-card[data-tier] #jb-loyalty-subtitle,
#jb-loyalty-card[data-tier] #jb-loyalty-next,
#jb-loyalty-card[data-tier] #jb-loyalty-prog-label {
  color: var(--tier-text-soft) !important;
}
#jb-loyalty-card[data-tier] #jb-loyalty-prog-left,
#jb-loyalty-card[data-tier] #jb-loyalty-prog-right {
  color: var(--tier-text-mute) !important;
}
#jb-loyalty-card[data-tier] > div > div > div[style*="background:rgba(255,255,255,0.12)"] {
  background: var(--tier-panel) !important;
  border-color: var(--tier-panel-border) !important;
}
#jb-loyalty-card[data-tier] #jb-loyalty-progress > div > div[style*="background:rgba(255,255,255,0.15)"] {
  background: var(--tier-progress-bg) !important;
}
#jb-loyalty-card[data-tier] #jb-loyalty-prog-fill {
  background: var(--tier-progress-fill) !important;
}

/* ============================================
   Tier badge (chip) — te gebruiken in dashboard, header, etc.
   Gebruik: <span class="jb-tier-badge" data-tier="Gold">💛 Gold</span>
   ============================================ */
.jb-tier-badge[data-tier] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--tier-deep), var(--tier-mid), var(--tier-light));
  color: var(--tier-text);
  border: 1px solid var(--tier-panel-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ============================================
   Member-shop hero tier-kaart
   ============================================ */
.shop-tier-card[data-tier] {
  background: linear-gradient(135deg, var(--tier-deep), var(--tier-mid), var(--tier-light)) !important;
  color: var(--tier-text) !important;
  border-color: var(--tier-panel-border) !important;
}
.shop-tier-card[data-tier] .shop-tier-korting {
  background: var(--tier-panel) !important;
  color: var(--tier-text) !important;
  border: 1px solid var(--tier-panel-border);
}
.shop-tier-card[data-tier] .shop-tier-progress {
  background: var(--tier-progress-bg) !important;
}
.shop-tier-card[data-tier] .shop-tier-progress-fill {
  background: var(--tier-progress-fill) !important;
}
.shop-tier-card[data-tier] .shop-tier-footline,
.shop-tier-card[data-tier] .shop-tier-footline a {
  color: var(--tier-text-soft) !important;
}

/* ============================================
   LIGHT tier tinten — voor blokken op witte achtergrond
   (bv. 'Jouw voordelen' kaartjes)
   ============================================ */
[data-tier] {
  --tier-light-bg: #f5faf6;
  --tier-light-border: #dce8dd;
  --tier-icon-color: #2c4a3e;
}
[data-tier="Bronze"]  { --tier-light-bg: #fdf6e8; --tier-light-border: #e8d7ab; --tier-icon-color: #8b6914; }
[data-tier="Silver"]  { --tier-light-bg: #f4f5f7; --tier-light-border: #d1d5db; --tier-icon-color: #5f6370; }
[data-tier="Gold"]    { --tier-light-bg: #fef8e1; --tier-light-border: #e8d884; --tier-icon-color: #8b6914; }
[data-tier="Platinum"] { --tier-light-bg: #edf2f5; --tier-light-border: #c8d4dc; --tier-icon-color: #5a6a73; }
[data-tier="Diamond"] { --tier-light-bg: #e8f1fa; --tier-light-border: #a8c5df; --tier-icon-color: #2f5770; }
[data-tier="Elite"]   { --tier-light-bg: #eaf2ec; --tier-light-border: #bcd0c2; --tier-icon-color: #2c4a3e; }

/* Benefit-card styling in voordelen-blok */
[data-tier] .jb-voordeel-card {
  background: var(--tier-light-bg) !important;
  border: 1px solid var(--tier-light-border) !important;
}
[data-tier] .jb-voordeel-title {
  color: var(--tier-icon-color) !important;
}