/* ==== Default Thai Font (packaged) ==== */
@font-face {
  font-family: 'WLSDefaultTH';
  src: url('../fonts/LINESeedSansTH_W_Rg.woff2') format('woff2'),
    url('../fonts/LINESeedSansTH_W_Rg.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Withdraw List Status - styles */
.wls-widget {
  font-family: 'WLSDefaultTH', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  background: #000;
  border-radius: 16px;
  padding: 16px 18px;
  color: #fff;
}

.wls-title {
  font-weight: 800;
  text-align: center;
  font-size: 22px;
  margin: 8px 0 14px;
  background: linear-gradient(90deg, #8c5a23, #d49b4a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

/* ⬇️ เพิ่มร่องด้านข้างกันล้น */
.wls-viewport {
  overflow: hidden;
  position: relative;
  padding-inline: 8px;
  /* added */
}

.wls-track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateY(0)
}

.wls-item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #242424;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .5s ease, opacity .5s ease, filter .5s ease;
  will-change: transform
}

.wls-bank {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  background: #333
}

.wls-bank img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .35))
}

.wls-lines {
  flex: 1;
  min-width: 0
}

.wls-head {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1px
}

.wls-sep {
  opacity: .65
}

.wls-user {
  color: #67d0ff;
  font-weight: 600
}

.wls-amount {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: #67d0ff;
  font-weight: 700;
}

.wls-amt {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

/* focus/blur */
.wls-blur {
  opacity: .55;
  filter: blur(1px) saturate(.85);
  transform: scale(.985)
}

/* ⬇️ ตัดการขยายเพื่อไม่ให้ชนขอบ */
.wls-focus {
  opacity: 1;
  filter: none;
  transform: none;
  /* changed from scale(1.008) */
  border-radius: 20px;
  box-shadow: none
}

/* ให้กรอบทองอยู่ด้านใน ไม่ล้น */
.wls-focus::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px #d7b26a, inset 0 8px 22px rgba(0, 0, 0, .28), inset 0 0 18px rgba(212, 155, 74, .25);
  pointer-events: none
}

/* ⬇️ ขยับเส้นเรืองเข้าด้านในอีกนิด */
.wls-focus::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  /* changed from 12px */
  background: linear-gradient(90deg, transparent, #d49b4a, transparent);
  animation: wls-glow 2.4s linear infinite
}

@keyframes wls-glow {

  0%,
  100% {
    opacity: .15
  }

  50% {
    opacity: .6
  }
}

.wls-status {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  /* ดันออกจากจำนวนเงินนิดนึง */
}

.wls-status.pending {
  color: #9ad7ff
}

.wls-status.ok {
  color: #2bd47a
}

.wls-status.ok .spin {
  display: none
}

.wls-status.ok::before {
  content: '✓';
  font-weight: 800
}

.spin {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(103, 208, 255, .35);
  border-top-color: #67d0ff;
  border-radius: 50%;
  animation: wls-spin .9s linear infinite
}

@keyframes wls-spin {
  to {
    transform: rotate(360deg)
  }
}

/* mobile */
@media (max-width:480px) {
  .wls-item {
    padding: 12px
  }

  .wls-bank {
    width: 48px;
    height: 48px;
    flex-basis: 48px
  }

  .wls-bank img {
    width: 30px;
    height: 30px
  }

  .wls-head {
    gap: 6px;
    font-size: 13px
  }

  .wls-amount {
    font-size: clamp(12px, 3.6vw, 14px)
  }

  .wls-status {
    font-size: clamp(12px, 3.6vw, 14px)
  }

  .spin {
    width: 11px;
    height: 11px
  }
}