@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* ── Default Variables ── */
.wf-wrap { --wf-bg:#1a0a2e; --wf-card:#240d3e; --wf-card2:#130820; }

:root {
  --wf-border:  rgba(255,255,255,0.08);
  --wf-text:    #ffffff;
  --wf-muted:   rgba(255,255,255,0.55);
  --wf-gold:    #f5c842;
  --wf-green:   #2ecc71;
  --wf-radius:  12px;
}

.wf-wrap {
  font-family: 'Sarabun', sans-serif;
  background: var(--wf-bg);
  border-radius: 16px;
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  border: 1px solid var(--wf-border);
}

.wf-header { display: flex; align-items: center; padding: 14px 18px 10px; }
.wf-title  { font-size: 15px; font-weight: 700; color: var(--wf-text); display: flex; align-items: center; gap: 8px; margin: 0; }

.wf-live-dot {
  width: 8px; height: 8px; background: var(--wf-green); border-radius: 50%;
  animation: wf-live-pulse 1.4s ease-in-out infinite;
}

.wf-bank-logo {
  width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
.wf-bank-logo img { width: 100%; height: 100%; object-fit: cover; }

.wf-list { padding: 6px 10px 14px; display: flex; flex-direction: column; gap: 6px; }

.wf-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--wf-card);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  padding: 10px 14px;
  position: relative; overflow: hidden;
  animation: wf-card-in 0.4s cubic-bezier(0.34,1.4,0.64,1);
  transition: background 0.2s;
}
.wf-card.big-win { border-color: rgba(245,200,66,0.45); }
.wf-card.big-win::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(245,200,66,0.18) 50%, transparent 70%);
  background-size: 200% 100%; animation: wf-shimmer 2s linear infinite; pointer-events: none;
}

.wf-info  { flex: 1; min-width: 0; }
.wf-phone { font-size: 14px; font-weight: 600; color: var(--wf-text); }
.wf-phone-sub { font-size: 11px; opacity: 0.6; font-family: 'JetBrains Mono', monospace; }
.wf-time  { font-size: 11px; color: var(--wf-muted); margin-top: 2px; }
.wf-ref   { font-size: 11px; font-family: 'JetBrains Mono', monospace; color: var(--wf-gold); margin-top: 2px; }

.wf-right  { text-align: right; flex-shrink: 0; }
.wf-amount { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600; color: var(--wf-text); }
.wf-card.big-win .wf-amount { color: var(--wf-gold); text-shadow: 0 0 12px rgba(245,200,66,0.5); }

.wf-status { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; display: inline-block; margin-top: 4px; }
.wf-status.done    { background: rgba(46,204,113,0.15); color: var(--wf-green); border: 1px solid rgba(46,204,113,0.3); }
.wf-status.pending { background: rgba(255,180,0,0.15); color: #ffd700; border: 1px solid rgba(255,180,0,0.3); animation: wf-blink 1.2s infinite; }

@keyframes wf-live-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(46,204,113,0.6)} 50%{box-shadow:0 0 0 6px rgba(46,204,113,0)} }
@keyframes wf-card-in    { from{opacity:0;transform:translateX(-18px)} to{opacity:1;transform:translateX(0)} }
@keyframes wf-shimmer    { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes wf-blink      { 0%,100%{opacity:1} 50%{opacity:0.5} }

.wf-fire { display:inline-block; animation:wf-fire-dance 0.6s infinite alternate; filter:drop-shadow(0 0 4px orange); margin-left:4px; }
@keyframes wf-fire-dance { from{transform:scale(1) rotate(-3deg)} to{transform:scale(1.2) rotate(5deg)} }

@media(max-width:480px){
  .wf-card      { padding:8px 10px; gap:9px; }
  .wf-bank-logo { width:38px; height:38px; }
}