/* ============================================
   SPINSHOP IDNCASH - FRONTEND STYLES (v5)
   Coupon-system: login, spin button, shop grid
   ============================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-dark: #0a1024;
  --bg-card: rgba(15, 22, 50, 0.55);
  --bg-card-2: rgba(20, 30, 70, 0.7);
  --border: rgba(245, 200, 66, 0.35);
  --border-soft: rgba(255, 255, 255, 0.08);
  --gold: #f5c842;
  --gold-soft: #ffd96b;
  --gold-2: #e6a722;
  --text: #ffffff;
  --text-dim: #97a3c4;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  --glow: 0 0 24px rgba(245, 200, 66, 0.18);
  --red: #dc2626;
  --green: #16a34a;
}

html, body { min-height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  color: var(--text);
  background: var(--bg-dark) url('https://spinshop-idnc.com/assets/bgdesktop.webp')
              center top / cover no-repeat fixed;
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ==================== NAV ==================== */
.nav {
  background: linear-gradient(180deg, rgba(10,16,36,0.95) 0%, rgba(10,16,36,0.7) 100%);
  border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.nav-inner {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 22px; max-width: 1380px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { height: 38px; }
.brand-text { font-size: 16px; font-weight: 800; letter-spacing: 1px; line-height: 1; }
.brand-text small { display: block; font-size: 9px; color: var(--text-dim); letter-spacing: 1.5px; font-weight: 500; margin-top: 4px; }
.nav-menu { display: flex; gap: 2px; flex: 1; justify-content: center; }
.nav-menu a {
  padding: 8px 14px; color: var(--text-dim); position: relative;
  font-weight: 600; font-size: 14px; transition: color .2s;
}
.nav-menu a:hover, .nav-menu a.active { color: var(--gold); }
.nav-menu a.active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 2px; background: var(--gold); border-radius: 2px;
}
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-stat {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; background: rgba(245,200,66,0.07);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--glow);
}
.nav-stat-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #2a1900; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.nav-stat-text small { display: block; font-size: 9px; color: var(--text-dim); line-height: 1; }
.nav-stat-text b { font-size: 16px; color: var(--text); font-weight: 800; }
.nav-stat-text span { font-size: 9px; color: var(--text-dim); margin-left: 3px; }
.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--border);
  color: var(--gold); width: 38px; height: 38px; border-radius: 9px;
  font-size: 18px; cursor: pointer;
}

/* Auth (login button / user pill) */
.nav-auth { display: flex; align-items: center; }
.login-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-2));
  color: #2a1900; font-weight: 800; font-size: 13px; letter-spacing: 0.5px;
  border: 0; border-radius: 10px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(245,200,66,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform .15s, box-shadow .15s;
}
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(245,200,66,0.5); }
.login-btn svg { width: 16px; height: 16px; }

.user-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 6px;
  background: linear-gradient(135deg, rgba(245,200,66,0.12), rgba(245,200,66,0.04));
  border: 1px solid var(--border); border-radius: 30px;
  box-shadow: var(--glow);
}
.up-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #2a1900; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.up-info b { display: block; font-size: 12px; line-height: 1.1; }
.up-info span { display: block; font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.up-info .up-c, .up-info .up-z { display: inline-block; margin-right: 4px; }
.up-info b#upCoupon, .up-info b#upZonk { color: var(--gold); font-weight: 700; }
.up-logout {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(220,38,38,0.15); border: 1px solid rgba(220,38,38,0.3);
  color: #fca5a5; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  margin-left: 4px;
}
.up-logout:hover { background: rgba(220,38,38,0.3); }
.up-logout svg { width: 14px; height: 14px; }

/* ==================== PAGE GRID ==================== */
.page-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  max-width: 1380px;
  margin: 0 auto;
  padding: 28px 22px 40px;
  align-items: start;
}
.main-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.side-col { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 80px; }

/* ==================== HERO ==================== */
.hero {
  display: grid;
  grid-template-columns: 0.85fr 1.55fr;
  gap: 22px; align-items: center;
}
.hero-left h1 {
  font-size: 34px; font-weight: 900; line-height: 1.05; margin-bottom: 6px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.hero-left h1 .accent {
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; font-size: 42px; line-height: 1;
}
.hero-left .tagline { color: var(--text-dim); margin: 14px 0 20px; font-size: 13px; line-height: 1.55; }
.feature-card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--glow);
}
.feature-item { display: flex; gap: 10px; align-items: center; }
.feature-icon {
  width: 32px; height: 32px; min-width: 32px; border-radius: 9px;
  background: linear-gradient(135deg, rgba(245,200,66,0.2), rgba(245,200,66,0.05));
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.feature-text b { font-size: 12.5px; color: var(--text); display: block; }
.feature-text span { font-size: 11px; color: var(--text-dim); line-height: 1.3; }

/* ==================== SPIN WHEEL ==================== */
.spin-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; width: 100%; min-width: 0; gap: 18px;
}
.spin-stage {
  position: relative;
  width: 100%; max-width: 540px;
  aspect-ratio: 1; margin: 0 auto;
}
@supports not (aspect-ratio: 1) {
  .spin-stage { padding-bottom: 100%; height: 0; }
  .spin-stage > * { position: absolute; }
}

.wheel-shell { position: absolute; inset: 6%; display: flex; align-items: center; justify-content: center; }
.wheel { position: relative; width: 100%; height: 100%; border-radius: 50%; will-change: transform; }
.wheel-svg { width: 100%; height: 100%; display: block; }

.wheel-images { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.prize-img {
  position: absolute; left: 50%; top: 50%;
  width: 14%; height: 14%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 5px rgba(0,0,0,0.65))
          drop-shadow(0 2px 4px rgba(0,0,0,0.55))
          drop-shadow(0 0 10px rgba(255,255,255,0.15));
  will-change: left, top;
}

.spin-border {
  position: absolute; inset: -3%;
  background-image: url('https://spinshop-idnc.com/assets/borderspin.webp');
  background-size: contain; background-position: center; background-repeat: no-repeat;
  pointer-events: none; z-index: 5;
  filter: drop-shadow(0 0 24px rgba(245,200,66,0.25));
}
.spin-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30%; height: 30%;
  display: flex; align-items: center; justify-content: center;
  z-index: 6; pointer-events: none;
}
.spin-center img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5));
}
.spin-pointer { display: none !important; }

/* SPIN BUTTON */
.spin-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 220px; padding: 14px 28px;
  background: linear-gradient(135deg, #444 0%, #222 100%);
  color: #999; border: 2px solid rgba(255,255,255,0.1); border-radius: 16px;
  font-family: inherit; font-weight: 900; font-size: 22px; letter-spacing: 2px;
  cursor: not-allowed;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  transition: all .25s;
  margin-left: 20px;
}
.spin-btn.ready {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 50%, var(--gold-2));
  color: #2a1900; border-color: var(--gold-soft); cursor: pointer;
  box-shadow: 0 8px 28px rgba(245,200,66,0.6), inset 0 1px 0 rgba(255,255,255,0.6);
  animation: spinBtnPulse 1.8s ease-in-out infinite;
}
.spin-btn.ready:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(245,200,66,0.75); }
.spin-btn.ready:active { transform: translateY(0); }
.spin-btn:disabled { animation: none; }
@keyframes spinBtnPulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(245,200,66,0.5), inset 0 1px 0 rgba(255,255,255,0.5); }
  50%      { box-shadow: 0 10px 40px rgba(245,200,66,0.85), 0 0 60px rgba(245,200,66,0.5), inset 0 1px 0 rgba(255,255,255,0.6); }
}
.spin-btn-text { display: block; }
.spin-btn-sub  { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1px; margin-top: 3px; opacity: 0.8; }

/* ==================== SIDE: WINNERS + INFO ==================== */
.winners-card, .info-card {
  background: linear-gradient(180deg, var(--bg-card-2), rgba(10,16,40,0.95));
  border: 1px solid var(--border);
  border-radius: 18px; padding: 16px;
  box-shadow: var(--shadow), var(--glow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.winners-card h3 {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 800; color: var(--gold); margin-bottom: 12px;
}
.winners-card h3 a { font-size: 11.5px; color: var(--text-dim); font-weight: 500; }
.winners-card h3 a:hover { color: var(--gold); }
.winners-empty { text-align: center; color: var(--text-dim); padding: 12px; font-size: 13px; }
.winner-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.winner-row:first-of-type { border-top: 0; }
.winner-img {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 8px; background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.winner-img img { max-width: 85%; max-height: 85%; object-fit: contain; }
.winner-info { flex: 1; min-width: 0; }
.winner-info b { display: block; font-size: 12.5px; font-weight: 700; }
.winner-info span { display: block; font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winner-time { font-size: 10px; color: var(--text-dim); background: rgba(255,255,255,0.05); padding: 3px 7px; border: 1px solid var(--border-soft); border-radius: 8px; white-space: nowrap; }
.winner-time.now { background: rgba(245,200,66,0.15); border-color: var(--border); color: var(--gold); }

.info-card h4 { font-size: 14px; color: var(--gold); margin-bottom: 10px; font-weight: 800; }
.info-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.info-card li { font-size: 12px; color: var(--text-dim); padding-left: 14px; position: relative; line-height: 1.4; }
.info-card li::before { content: '✦'; position: absolute; left: 0; color: var(--gold); }
.info-card li b { color: var(--text); }

/* ==================== PANELS (Shop, T&C) ==================== */
.panel-section { width: 100%; }
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 18px; padding: 18px 20px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow), var(--glow);
  position: relative;
}
.panel::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 18px; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(245,200,66,0.15);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.panel-head.center { justify-content: center; flex-direction: column; text-align: center; gap: 4px; }
.panel-title { display: flex; align-items: center; gap: 10px; }
.panel-title .icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  display: flex; align-items: center; justify-content: center;
  color: #2a1900;
}
.panel-title h3 { font-size: 17px; font-weight: 800; letter-spacing: 0.5px; color: var(--gold); }
.panel-title h3 small { color: var(--text-dim); font-size: 12px; margin-left: 6px; font-weight: 400; }
.panel-sub { color: var(--text-dim); font-size: 12px; }
.panel-link { color: var(--text-dim); font-size: 13px; display: flex; align-items: center; gap: 4px; transition: color .2s; }
.panel-link:hover { color: var(--gold); }

/* Top balance */
.user-balance { display: flex; gap: 8px; flex-wrap: wrap; }
.bal-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; background: rgba(245,200,66,0.1);
  border: 1px solid var(--border); border-radius: 20px;
  font-size: 12px;
}
.bal-pill b { color: var(--gold); font-weight: 800; }
.bal-pill .bal-icon { font-size: 14px; }
.bal-muted { color: var(--text-dim); font-size: 12px; }

/* ==================== SHOP GRID ==================== */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 12px;
}
.shop-card {
  background: linear-gradient(180deg, rgba(20,30,70,0.5), rgba(8,15,40,0.6));
  border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 12px 10px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: center;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  /* v9: Make all cards equal height + push button to bottom */
  height: 100%;
  justify-content: space-between;
}
.shop-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 8px 24px rgba(245,200,66,0.2); }
.shop-card-img {
  height: 88px; display: flex; align-items: center; justify-content: center;
}
.shop-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.shop-card-name {
  font-size: 11.5px; font-weight: 600; line-height: 1.3;
  /* v9: Reserve 2 lines so all cards same height */
  height: 30px; min-height: 30px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-card-meta { display: flex; flex-direction: column; gap: 4px; }
.shop-price {
  display: inline-block; padding: 3px 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #2a1900; font-weight: 800; font-size: 11px; border-radius: 6px;
}
.shop-price.zonk {
  background: linear-gradient(135deg, #a855f7, #6d28d9);
  color: #fff;
}
.shop-stock {
  display: inline-block; padding: 2px 7px; font-size: 10px;
  background: rgba(0,0,0,0.4); color: var(--text-dim); border-radius: 6px;
  border: 1px solid var(--border-soft);
}
.shop-stock.zero { color: #fca5a5; border-color: rgba(220,38,38,0.3); }
.shop-stock.unlim { color: var(--gold); font-weight: 700; }
.shop-btn {
  width: 100%; padding: 8px 12px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-2));
  color: #2a1900; border: 0; border-radius: 10px;
  font-weight: 800; font-size: 12px; letter-spacing: 0.5px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(245,200,66,0.3);
  transition: transform .15s, box-shadow .15s;
  /* v9: Always at bottom of card */
  margin-top: auto;
}
.shop-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(245,200,66,0.5); }
.shop-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ==================== T&C TIERS ==================== */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 4px; }
.tier {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-soft); border-radius: 12px;
}
.tier-spins {
  width: 42px; height: 42px; min-width: 42px;
  border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #2a1900; font-weight: 900; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.tier-info b { display: block; font-size: 12px; color: var(--text); }
.tier-info span { display: block; font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.tier-note {
  margin-top: 14px; padding: 10px 14px;
  background: rgba(245,200,66,0.08); border: 1px solid var(--border-soft);
  border-radius: 10px; font-size: 12px; color: var(--text-dim); text-align: center;
}

/* ==================== AUTH MODAL ==================== */
.auth-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  display: none; align-items: center; justify-content: center;
  z-index: 400; padding: 20px;
  backdrop-filter: blur(8px);
}
.auth-modal.show { display: flex; animation: fadeIn .25s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.auth-card {
  position: relative;
  background: linear-gradient(180deg, rgba(20,28,68,0.95) 0%, rgba(10,16,40,0.98) 100%);
  border: 1px solid var(--border); border-radius: 18px;
  padding: 32px 28px 28px; max-width: 380px; width: 100%;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 60px rgba(245,200,66,0.2);
  animation: popIn .35s cubic-bezier(.5,.6,.3,1.5);
}
@keyframes popIn { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.auth-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border-soft);
  color: var(--text-dim); font-size: 22px; cursor: pointer; line-height: 1;
}
.auth-close:hover { background: rgba(220,38,38,0.2); color: #fca5a5; }
.auth-brand { text-align: center; margin-bottom: 22px; }
.auth-brand img { height: 50px; margin: 0 auto 12px; }
.auth-brand h2 { font-size: 22px; color: var(--gold); letter-spacing: 2px; }
.auth-brand p { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.auth-label { display: block; margin-bottom: 14px; }
.auth-label > span {
  display: block; font-size: 11px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; font-weight: 700;
}
.auth-label > input {
  width: 100%; padding: 11px 13px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--border-soft);
  border-radius: 10px; color: var(--text); font-family: inherit; font-size: 14px;
}
.auth-label > input:focus { outline: none; border-color: var(--gold); background: rgba(0,0,0,0.5); }
.auth-btn {
  width: 100%; padding: 12px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-2));
  color: #2a1900; border: 0; border-radius: 12px;
  font-weight: 800; font-size: 14px; letter-spacing: 1px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(245,200,66,0.4);
  margin-top: 4px;
}
.auth-btn:hover:not(:disabled) { transform: translateY(-1px); }
.auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-foot { font-size: 12px; color: var(--text-dim); text-align: center; margin-top: 16px; }
.auth-foot b { color: var(--gold); }
.alert {
  padding: 10px 13px; border-radius: 9px; margin-bottom: 14px;
  border: 1px solid; font-size: 13px;
}
.alert-error { background: rgba(220,38,38,0.12); color: #fca5a5; border-color: rgba(220,38,38,0.35); }

/* ==================== TOAST ==================== */
.toast {
  position: fixed; top: 90px; left: 50%; z-index: 9999;
  background: linear-gradient(135deg, rgba(40,15,15,0.98), rgba(60,20,20,0.98));
  border: 2px solid #ef4444;
  border-radius: 14px; padding: 16px 22px;
  display: flex; align-items: center; gap: 14px;
  min-width: 280px; max-width: 420px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(239,68,68,0.4);
  transform: translateX(-50%) translateY(-30px);
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .35s, visibility .35s, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.toast.show { visibility: visible; opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.toast.success { border-color: rgba(34,197,94,0.4); }
.toast.error { border-color: rgba(220,38,38,0.4); }
.toast-icon { width: 22px; height: 22px; flex-shrink: 0; }
.toast.success .toast-icon { color: #4ade80; }
.toast.error .toast-icon { color: #fca5a5; }
.toast b { display: block; font-size: 13px; font-weight: 700; }
.toast span { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ==================== WIN MODAL ==================== */
.win-modal {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(40,20,80,0.7) 0%, rgba(0,0,0,0.92) 70%);
  display: none; align-items: center; justify-content: center;
  z-index: 300; padding: 20px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.win-modal.show { display: flex; animation: fadeIn .35s; }
.win-card {
  position: relative;
  background: linear-gradient(180deg, rgba(20,28,68,0.78) 0%, rgba(10,16,40,0.85) 100%);
  border: 2px solid rgba(245,200,66,0.55);
  border-radius: 22px;
  padding: 32px 28px 26px;
  max-width: 420px; width: 100%;
  text-align: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 60px rgba(245,200,66,0.45),
              0 0 120px rgba(245,200,66,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
  animation: popIn .5s cubic-bezier(.5,.6,.3,1.5), winGlowPulse 2.2s ease-in-out 0.5s infinite;
  overflow: hidden;
}
@keyframes winGlowPulse {
  0%, 100% { box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 60px rgba(245,200,66,0.45), 0 0 120px rgba(245,200,66,0.2), inset 0 1px 0 rgba(255,255,255,0.12); }
  50%      { box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 90px rgba(245,200,66,0.7),  0 0 160px rgba(245,200,66,0.35), inset 0 1px 0 rgba(255,255,255,0.18); }
}
.win-glow-rays {
  position: absolute; top: 50%; left: 50%;
  width: 600px; height: 600px; margin-left: -300px; margin-top: -300px;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(245,200,66,0.18) 12deg, transparent 24deg,
    transparent 36deg, rgba(245,200,66,0.22) 48deg, transparent 60deg,
    transparent 90deg, rgba(255,217,107,0.14) 102deg, transparent 114deg,
    transparent 144deg, rgba(245,200,66,0.18) 156deg, transparent 168deg,
    transparent 198deg, rgba(245,200,66,0.20) 210deg, transparent 222deg,
    transparent 252deg, rgba(255,217,107,0.14) 264deg, transparent 276deg,
    transparent 306deg, rgba(245,200,66,0.16) 318deg, transparent 330deg, transparent 360deg);
  animation: rayRotate 18s linear infinite;
  pointer-events: none; z-index: 0; filter: blur(2px);
}
@keyframes rayRotate { to { transform: rotate(360deg); } }
.win-sparkle {
  position: absolute; color: var(--gold); font-size: 16px; pointer-events: none; z-index: 2;
  filter: drop-shadow(0 0 6px rgba(245,200,66,0.8));
  animation: sparkleFloat 2.5s ease-in-out infinite;
}
.win-sparkle.s1 { top: 14%;  left: 10%;  animation-delay: 0s;   font-size: 18px; }
.win-sparkle.s2 { top: 18%;  right: 14%; animation-delay: 0.6s; font-size: 14px; }
.win-sparkle.s3 { bottom: 24%; left: 16%; animation-delay: 1.1s; font-size: 12px; }
.win-sparkle.s4 { bottom: 18%; right: 12%; animation-delay: 1.7s; font-size: 16px; }
@keyframes sparkleFloat {
  0%, 100% { opacity: 0.3; transform: translateY(0) scale(0.7) rotate(0deg); }
  50%      { opacity: 1;   transform: translateY(-8px) scale(1.15) rotate(180deg); }
}
.win-badge {
  position: relative; z-index: 3;
  display: inline-block; padding: 7px 18px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #2a1900; font-weight: 800; font-size: 14px; letter-spacing: 1px;
  border-radius: 30px; margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(245,200,66,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
}
.win-img-wrap {
  position: relative; z-index: 3;
  width: 200px; height: 200px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
.win-img-halo {
  position: absolute; inset: -25%;
  background: radial-gradient(circle at center, rgba(245,200,66,0.55) 0%, rgba(245,200,66,0.18) 30%, transparent 65%);
  filter: blur(8px); animation: haloPulse 2s ease-in-out infinite; z-index: 0;
}
@keyframes haloPulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.15); opacity: 1; }
}
.win-img-wrap img {
  position: relative; z-index: 1;
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
  animation: imgFloat 3s ease-in-out infinite;
}
@keyframes imgFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.win-text { position: relative; z-index: 3; }
.win-text p { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.win-text h2 { font-size: 21px; font-weight: 800; color: var(--gold); margin-bottom: 22px; line-height: 1.2; }
.win-actions {
  position: relative; z-index: 3;
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.modal-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 60%, var(--gold-2));
  color: #2a1900; border: 0; padding: 13px 26px; border-radius: 14px;
  margin-top: 20px;
  font-weight: 800; font-size: 14px; letter-spacing: 0.5px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(245,200,66,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.modal-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(245,200,66,0.7); }
.modal-btn-secondary {
  background: rgba(255,255,255,0.08); color: var(--text-dim);
  border: 1px solid var(--border-soft); box-shadow: none;
}
.modal-btn-secondary:hover { color: var(--text); background: rgba(255,255,255,0.12); box-shadow: none; transform: translateY(-1px); }
.modal-btn svg { width: 18px; height: 18px; }

/* Confetti canvas */
.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 299; }

/* ==================== FLOATING / FOOTER ==================== */
.floating-slot { position: fixed; bottom: 20px; z-index: 100; }
.floating-slot.floating-left { left: 20px; }
.floating-slot.floating-right { right: 20px; }

.footer {
  text-align: center; padding: 30px 20px;
  color: var(--text-dim); font-size: 13px;
  border-top: 1px solid var(--border-soft); margin-top: 30px;
}

/* ==================== SUBPAGES ==================== */
.wrap { max-width: 1380px; margin: 0 auto; padding: 20px 22px; }
.page-hero { text-align: center; padding: 50px 20px 30px; }
.page-hero h1 {
  font-size: 42px; font-weight: 900;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 1px;
}
.page-hero p { color: var(--text-dim); font-size: 14px; margin-top: 10px; max-width: 540px; margin-left: auto; margin-right: auto; }
.section { max-width: 1380px; margin: 30px auto; padding: 0 22px; }
.grid-prizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-prizes .shop-card { padding: 16px 12px; }
.grid-prizes .shop-card-img { height: 130px; }
.grid-prizes .shop-card-name { font-size: 13px; min-height: 38px; }

.faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; }
.faq-q {
  padding: 14px 20px; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: 14px;
}
.faq-q::after { content: '+'; color: var(--gold); font-size: 22px; font-weight: 800; line-height: 1; }
.faq-item.open .faq-q::after { content: '−'; }
.faq-a {
  max-height: 0; padding: 0 20px; color: var(--text-dim); font-size: 13px;
  transition: max-height .3s, padding .3s; overflow: hidden; line-height: 1.6;
}
.faq-item.open .faq-a { max-height: 800px; padding: 0 20px 18px; }

.cara-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; }

.search-bar-wrap {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 8px 16px;
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.search-bar-wrap input {
  background: transparent; border: 0; outline: 0; color: var(--text);
  font-size: 14px; flex: 1; font-family: inherit; padding: 6px 0;
}
.pagi { display: flex; justify-content: center; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.pagi a, .pagi span {
  padding: 7px 12px; border: 1px solid var(--border-soft); border-radius: 8px;
  color: var(--text); font-size: 13px;
}
.pagi a:hover { border-color: var(--gold); color: var(--gold); }
.pagi .active { background: var(--gold); color: #2a1900; border-color: var(--gold); font-weight: 800; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
  .page-grid { grid-template-columns: 1fr; padding: 22px 18px 30px; }
  .side-col { position: static; top: auto; order: 2; }
  .main-col { order: 1; }
  .hero { grid-template-columns: 0.8fr 1.2fr; }
  .hero-left h1 { font-size: 28px; }
  .hero-left h1 .accent { font-size: 36px; }
  .spin-stage { max-width: 500px; }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .grid-prizes { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  body {
    background-image: url('https://spinshop-idnc.com/assets/bgmobile.webp');
    background-attachment: fixed; background-size: cover;
  }
  .nav-inner { padding: 10px 14px; gap: 8px; }
  .brand img { height: 32px; }
  .brand-text { font-size: 13px; }
  .brand-text small { font-size: 8px; }
  .nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-card-2); flex-direction: column; gap: 0;
    border-top: 1px solid var(--border-soft); padding: 8px 0;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { padding: 12px 18px; border-bottom: 1px solid var(--border-soft); }
  .nav-menu a.active::after { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-stat { padding: 4px 8px; gap: 6px; }
  .nav-stat-icon { width: 26px; height: 26px; font-size: 12px; }
  .nav-stat-text small { font-size: 8px; }
  .nav-stat-text b { font-size: 13px; }
  .nav-stat-text span { display: none; }
  .login-btn { padding: 7px 10px; font-size: 11px; }
  .login-btn svg { width: 13px; height: 13px; }
  .user-pill { padding: 4px 8px 4px 4px; gap: 6px; }
  .up-avatar { width: 26px; height: 26px; font-size: 12px; }
  .up-info b { font-size: 11px; }
  .up-info span { font-size: 9.5px; }
  .up-logout { width: 24px; height: 24px; }
  .up-logout svg { width: 12px; height: 12px; }

  .page-grid { padding: 14px 12px 24px; gap: 14px; }
  .main-col > .hero {
    display: flex !important; flex-direction: column !important; gap: 16px;
  }
  .main-col > .hero > .spin-wrap {
    order: 1; width: 100%; display: flex; justify-content: center; align-items: center;
  }
  .main-col > .hero > .hero-left { order: 2; text-align: center; }
  .spin-stage { width: 90vw !important; max-width: 420px !important; min-width: 280px; }
  .hero-left h1 { font-size: 22px; }
  .hero-left h1 .accent { font-size: 28px; }
  .feature-card { max-width: 360px; margin: 0 auto; }

  .spin-btn { min-width: 0; width: 90%; max-width: 320px; font-size: 19px; padding: 12px 20px; }

  .winners-card, .info-card { padding: 14px; }
  .panel { padding: 14px; border-radius: 14px; }
  .panel-title h3 { font-size: 14px; }
  .panel-title h3 small { display: none; }

  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-card-img { height: 70px; }
  .shop-card-name { font-size: 10.5px; min-height: 28px; }

  .tiers { grid-template-columns: 1fr 1fr; }
  .tier { padding: 10px; }
  .tier-spins { width: 36px; height: 36px; min-width: 36px; font-size: 14px; }
  .tier-info b { font-size: 11px; }
  .tier-info span { font-size: 10px; }

  .grid-prizes { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cara-list { grid-template-columns: 1fr; }
  .page-hero { padding: 24px 14px 18px; }
  .page-hero h1 { font-size: 28px; }

  .toast { right: 12px; left: 12px; min-width: 0; max-width: none; top: 70px; }

  .auth-card { padding: 26px 22px 22px; }
  .auth-brand img { height: 42px; }
  .auth-brand h2 { font-size: 18px; }

  .win-card { padding: 22px 18px 20px; }
  .win-img-wrap { width: 150px; height: 150px; }
  .win-text h2 { font-size: 17px; }
  .win-glow-rays { width: 400px; height: 400px; margin-left: -200px; margin-top: -200px; }
  .win-sparkle { font-size: 12px !important; }

  .floating-slot { bottom: 12px; }
  .floating-slot.floating-left { left: 12px; }
  .floating-slot.floating-right { right: 12px; }
}

@media (max-width: 380px) {
  .hero-left h1 { font-size: 19px; }
  .hero-left h1 .accent { font-size: 24px; }
  .nav-stat-text small { display: none; }
  .login-btn { padding: 6px 8px; font-size: 0; }
  .login-btn svg { width: 16px; height: 16px; }
}

/* ============================================
   v6 ADDITIONS (style6.css)
   - F/I floating info icons
   - Info modals (Cara Main, FAQ) — popup with steps
   - Confirm redeem modal (shop)
   - Winner row "flash-in" animation on new arrivals
   ============================================ */

/* Floating F/I icons (placed between nav-stat and nav-auth) */
.info-icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-2));
  color: #2a1900;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins', serif;
  font-weight: 900; font-size: 17px;
  font-style: italic;
  box-shadow: 0 4px 14px rgba(245,200,66,0.45), inset 0 1px 0 rgba(255,255,255,0.55);
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
}
.info-icon-btn:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 6px 20px rgba(245,200,66,0.65), inset 0 1px 0 rgba(255,255,255,0.7);
}
.info-icon-btn:active { transform: translateY(0) scale(1); }
.info-icon-btn span { line-height: 1; pointer-events: none; }
.info-icon-f span { font-family: 'Poppins', sans-serif; font-style: normal; font-size: 18px; font-weight: 800; }
.info-icon-i span { font-family: 'Georgia', serif; font-style: italic; font-weight: 700; font-size: 19px; }

/* Info modals (Cara, FAQ) */
.info-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  display: none; align-items: center; justify-content: center;
  z-index: 350; padding: 20px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.info-modal.show { display: flex; animation: fadeIn .25s; }
.info-card-modal {
  position: relative;
  background: linear-gradient(180deg, rgba(20,28,68,0.96) 0%, rgba(10,16,40,0.99) 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0;
  max-width: 540px; width: 100%;
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 60px rgba(245,200,66,0.2);
  animation: popIn .35s cubic-bezier(.5,.6,.3,1.5);
  overflow: hidden;
}
.info-card-faq { max-width: 620px; }
.info-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(245,200,66,0.08), transparent);
  flex-shrink: 0;
}
.info-head h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 900;
  color: var(--gold); letter-spacing: 1.5px;
}
.info-icon-mini {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-2));
  color: #2a1900; font-weight: 900; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  font-style: italic;
}
.info-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-soft);
  color: var(--text-dim); font-size: 22px; cursor: pointer; line-height: 1;
}
.info-close:hover { background: rgba(220,38,38,0.2); color: #fca5a5; }
.info-body {
  padding: 20px 22px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

/* Cara Main steps */
.cara-step {
  display: flex; gap: 14px;
  padding: 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  margin-bottom: 10px;
}
.cara-step-num {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #2a1900; font-weight: 900; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(245,200,66,0.4);
}
.cara-step-text b {
  display: block; font-size: 14px; color: var(--gold); font-weight: 800;
  letter-spacing: 0.5px; margin-bottom: 4px;
}
.cara-step-text p {
  font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0;
}
.cara-step-text b + p { margin-top: 4px; }

/* Info tips block */
.info-tips {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(245,200,66,0.08);
  border: 1px solid rgba(245,200,66,0.25);
  border-radius: 12px;
}
.info-tips b {
  display: block; font-size: 12px; color: var(--gold);
  letter-spacing: 1px; margin-bottom: 8px;
}
.info-tips ul {
  list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 0;
}
.info-tips li {
  font-size: 12px; color: var(--text-dim); padding-left: 14px;
  position: relative; line-height: 1.5;
}
.info-tips li::before {
  content: '✦'; position: absolute; left: 0; color: var(--gold);
}

/* FAQ accordion (used inside FAQ modal AND faq.php) */
.faq-list .faq-item {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.faq-list .faq-q {
  width: 100%; text-align: left;
  padding: 13px 16px;
  background: transparent; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-family: inherit; font-weight: 600; font-size: 13px;
  color: var(--text);
  gap: 10px;
}
.faq-list .faq-q::after {
  content: '+'; color: var(--gold); font-size: 20px; font-weight: 800;
  line-height: 1; transition: transform .25s;
  flex-shrink: 0;
}
.faq-list .faq-item.open .faq-q::after {
  content: '−';
  transform: rotate(180deg);
}
.faq-list .faq-q:hover { color: var(--gold); }
.faq-list .faq-a {
  max-height: 0; padding: 0 16px;
  color: var(--text-dim); font-size: 12.5px; line-height: 1.6;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
}
.faq-list .faq-item.open .faq-a {
  max-height: 500px; padding: 0 16px 14px;
}
.faq-list .faq-a b { color: var(--text); }

/* CONFIRM REDEEM MODAL */
.confirm-modal {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(40,20,80,0.5) 0%, rgba(0,0,0,0.85) 70%);
  display: none; align-items: center; justify-content: center;
  z-index: 360; padding: 20px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.confirm-modal.show { display: flex; animation: fadeIn .25s; }
.confirm-card {
  position: relative;
  background: linear-gradient(180deg, rgba(20,28,68,0.96), rgba(10,16,40,0.99));
  border: 2px solid rgba(245,200,66,0.45);
  border-radius: 20px;
  padding: 26px 24px 24px;
  max-width: 380px; width: 100%;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 50px rgba(245,200,66,0.3);
  animation: popIn .35s cubic-bezier(.5,.6,.3,1.5);
}
.confirm-icon {
  width: 60px; height: 60px; margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  box-shadow: 0 6px 20px rgba(245,200,66,0.5);
}
.confirm-card h3 {
  font-size: 17px; font-weight: 800;
  color: var(--gold); letter-spacing: 0.5px;
  margin-bottom: 16px;
}
.confirm-item-preview {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  margin-bottom: 16px;
  text-align: left;
}
.confirm-item-preview img {
  width: 52px; height: 52px; min-width: 52px;
  object-fit: contain;
  background: rgba(0,0,0,0.3); border-radius: 8px; padding: 4px;
}
.confirm-item-info { flex: 1; min-width: 0; }
.confirm-item-info b {
  display: block; font-size: 13px; font-weight: 700;
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.confirm-item-price {
  display: inline-block;
  padding: 3px 9px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #2a1900; font-weight: 800; font-size: 12px;
  border-radius: 6px;
}
.confirm-item-price.zonk {
  background: linear-gradient(135deg, #a855f7, #6d28d9);
  color: #fff;
}
.confirm-desc {
  font-size: 12.5px; color: var(--text-dim);
  line-height: 1.55; margin-bottom: 18px;
}
.confirm-actions {
  display: flex; gap: 10px; justify-content: stretch;
}
.confirm-actions .modal-btn { flex: 1; padding: 11px 16px; font-size: 13px; }

/* WINNER ROW — flash on new arrival */
.winner-row.is-new {
  animation: winnerFlashIn 1.5s ease-out;
}
@keyframes winnerFlashIn {
  0%   { transform: translateX(-12px); opacity: 0; background: rgba(245,200,66,0.4); }
  30%  { transform: translateX(0); opacity: 1; background: rgba(245,200,66,0.35); }
  100% { transform: translateX(0); opacity: 1; background: transparent; }
}

/* Mobile adjustments for new components */
@media (max-width: 768px) {
  .info-icon-btn { width: 32px; height: 32px; font-size: 15px; }
  .info-icon-f span { font-size: 16px; }
  .info-icon-i span { font-size: 17px; }
  .info-card-modal { max-height: 88vh; }
  .info-head { padding: 14px 16px; }
  .info-head h2 { font-size: 15px; }
  .info-body { padding: 16px; }
  .cara-step { padding: 12px; gap: 10px; }
  .cara-step-num { width: 30px; height: 30px; min-width: 30px; font-size: 14px; }
  .cara-step-text b { font-size: 13px; }
  .cara-step-text p { font-size: 12px; }
  .info-tips li { font-size: 11.5px; }
  .confirm-card { padding: 22px 18px 20px; }
  .confirm-icon { width: 50px; height: 50px; font-size: 26px; }
  .confirm-card h3 { font-size: 15px; }
  .faq-list .faq-q { font-size: 12.5px; padding: 11px 14px; }
  .faq-list .faq-a { font-size: 12px; }
}

@media (max-width: 380px) {
  .info-icon-btn { width: 30px; height: 30px; font-size: 14px; }
  .info-icon-f span, .info-icon-i span { font-size: 15px; }
}

/* ============================================
   v7.1 HOTFIX additions
   - pemenang.php table styling (.row-img, .winners-table, etc)
   - .search-bar (icon + input on same line)
   - .pagination buttons
   - .hide-mobile utility
   ============================================ */

/* Pemenang page table */
.winners-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.winners-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 800;
  color: var(--text-dim);
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid var(--border-soft);
}
.winners-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.winners-table tbody tr:last-child td { border-bottom: 0; }
.winners-table tbody tr:hover { background: rgba(245,200,66,0.05); }

/* Row avatar: SMALL — constrains the big native image */
.row-img {
  width: 38px; height: 38px; min-width: 38px;
  border-radius: 8px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  padding: 3px;
}
.row-img img {
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Search bar in pemenang panel-head */
.search-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  min-width: 240px;
  max-width: 320px;
}
.search-bar:focus-within { border-color: var(--gold); }
.search-bar svg {
  width: 16px; height: 16px; min-width: 16px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.search-bar input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--text); font-family: inherit; font-size: 13px;
  padding: 4px 0;
}
.search-bar input::placeholder { color: var(--text-dim); }

/* Pagination buttons */
.pagination {
  display: flex; gap: 6px; justify-content: center;
  margin-top: 20px; flex-wrap: wrap;
}
.pagination button {
  padding: 7px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.pagination button:hover:not(:disabled) {
  border-color: var(--gold); color: var(--gold);
}
.pagination button.active {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-2));
  color: #2a1900;
  border-color: transparent;
  font-weight: 800;
}
.pagination button:disabled {
  opacity: 0.4; cursor: not-allowed;
}
.pagination span {
  display: flex; align-items: center;
  padding: 0 6px; color: var(--text-dim); font-size: 13px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .winners-table thead th,
  .winners-table tbody td { padding: 9px 10px; font-size: 12.5px; }
  .row-img { width: 32px; height: 32px; min-width: 32px; }
  .search-bar { min-width: 0; width: 100%; max-width: none; }
  .panel-head { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* ============================================
   v7.2 HOTFIX additions
   - User pill: lebih lebar (more breathing room)
   - .row-img: max-width 10%, smaller, auto-center via flex
   ============================================ */

/* User pill in nav (overrides v5 defaults) */
.user-pill {
  padding: 7px 14px 7px 7px;
  gap: 12px;
  min-width: 150px;
}
.user-pill .up-avatar {
  width: 36px; height: 36px;
  font-size: 15px;
}
.user-pill .up-info b { font-size: 13px; line-height: 1.15; }
.user-pill .up-info span { font-size: 11px; margin-top: 3px; }
.user-pill .up-info .up-c,
.user-pill .up-info .up-z { margin-right: 6px; }
.user-pill .up-logout { width: 30px; height: 30px; margin-left: 6px; }
.user-pill .up-logout svg { width: 15px; height: 15px; }

/* Pemenang row-img: smaller + centered (overrides v7.1 sizing) */
.winners-table .row-img {
  width: 36px;
  height: 36px;
  max-width: 10%;
  min-width: 28px;
  aspect-ratio: 1 / 1;
  margin: 0;          /* centered by parent flex's justify-content:center */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.winners-table .row-img img {
  display: block;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}

/* Mobile: tighter user pill */
@media (max-width: 768px) {
  .user-pill { padding: 5px 10px 5px 5px; gap: 8px; min-width: 0; }
  .user-pill .up-avatar { width: 30px; height: 30px; font-size: 13px; }
  .user-pill .up-info b { font-size: 11.5px; }
  .user-pill .up-info span { font-size: 10px; }
  .user-pill .up-logout { width: 26px; height: 26px; }
  .winners-table .row-img { width: 30px; height: 30px; min-width: 24px; }
}

/* Brand img using favicon — keep square at 38px height */
.brand img {
  height: 38px;
  width: auto;
  max-width: 38px;
  object-fit: contain;
}
@media (max-width: 768px) {
  .brand img { height: 32px; max-width: 32px; }
}

/* ============================================================
   SHOP CARD — PREMIUM RIBBON + LAVA BORDER EFFECT
   (ADD-ON v-premium2: glider DIHAPUS, ganti lava border di semua card)
   - Lava border: animasi border api di SEMUA card toko
   - Premium ribbon: muncul di card dengan coupon >= 300 (label diisi via PHP/JS)
   ============================================================ */

/* Card jadi konteks posisi untuk ribbon */
.shop-card { position: relative; }

/* --- LAVA BORDER: animasi border api untuk SEMUA shop card --- */
@keyframes cb-lava-flow {
  0%, 100% { border-color: #ff3300; box-shadow: 0 0 10px rgba(255,51,0,0.65), inset 0 0 8px rgba(255,150,0,0.15); }
  33%      { border-color: #ff8800; box-shadow: 0 0 14px rgba(255,136,0,0.75), inset 0 0 8px rgba(255,200,0,0.18); }
  66%      { border-color: #ffaa00; box-shadow: 0 0 12px rgba(255,170,0,0.65), inset 0 0 8px rgba(255,80,0,0.15); }
}

/* Terapkan ke semua card toko (override border soft jadi lava 2px) */
.shop-card {
  border: 2px solid #ff5500;
  box-shadow: 0 0 12px rgba(255,85,0,0.6);
  animation: cb-lava-flow 3s ease-in-out infinite;
}

/* Class reusable kalau mau dipakai manual di elemen lain */
.cb-lava-anim {
  border: 2px solid #ff5500;
  box-shadow: 0 0 12px rgba(255,85,0,0.6);
  animation: cb-lava-flow 3s ease-in-out infinite;
}

/* --- PREMIUM RIBBON: pojok kiri-atas, hanya label-nya --- */
.shop-card .premium-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  overflow: hidden;
  pointer-events: none;
  z-index: 6;
}
.shop-card .premium-ribbon::before {
  content: 'Premium';
  position: absolute;
  top: 20px;
  left: -34px;
  width: 150px;
  height: 24px;
  background-image: linear-gradient(45deg, #ff6547 0%, #ffb144 51%, #ff7053 100%);
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 3px 8px rgba(0,0,0,0.30);
}