/* ===================================================================
   RUT TIEN — Krende Override
   Loaded AFTER rut-tien.css — swaps purple → lime #c6f74e
   Scoped: body.page-rut-tien
   Fonts : Bricolage Grotesque · JetBrains Mono · Outfit
   =================================================================== */

body.page-rut-tien {
  /* ── Define all CSS vars rut-tien.css references ── */
  --accent:          #c6f74e;
  --accent-alt:      #4fe6ff;
  --accent-hover:    #9fd313;
  --accent-on:       #0a0f04;
  --accent-soft:     rgba(198, 247, 78, 0.10);
  --bg-elevated:     #12151c;
  --bg-elevated-soft:#171b24;
  --bg-input:        #171b24;
  --border-subtle:   rgba(132, 148, 170, 0.14);
  --border-strong:   rgba(132, 148, 170, 0.28);
  --text-main:       #e9eef4;
  --text-soft:       #93a0b2;
  --text-muted:      #5e6b7d;
  --radius-lg:       14px;
  --radius-md:       10px;
  --radius-sm:       8px;
  --transition-fast: 0.18s cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: "Bricolage Grotesque", "Outfit", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font-body:    "Outfit", system-ui, sans-serif;
  color: var(--text-main);
  font-family: var(--font-body);
  min-height: 100vh;
}

body.page-rut-tien ::selection {
  background: var(--accent);
  color: var(--accent-on);
}

/* ── header ── */
body.page-rut-tien .site-header {
  background: rgba(9, 11, 15, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
body.page-rut-tien .nav-menu a { color: var(--text-soft); transition: color 0.2s; }
body.page-rut-tien .nav-menu a:hover,
body.page-rut-tien .nav-menu a.active { color: var(--accent); }
body.page-rut-tien .logo-mark { background: var(--accent); color: var(--accent-on); }

/* ── footer ── */
body.page-rut-tien .site-footer {
  border-top: 1px solid var(--border-subtle);
  background: #0d1015;
}

/* ================================================================
   PAGE HEADER
   ================================================================ */
.page-rut-tien .withdraw-page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 760;
  letter-spacing: -0.025em;
  background: linear-gradient(120deg, var(--text-main) 55%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ================================================================
   BALANCE CARD — purple gradient → Krende lime dark
   ================================================================ */
.page-rut-tien .balance-card {
  background:
    radial-gradient(ellipse at 70% 50%, rgba(198, 247, 78, 0.12) 0%, transparent 65%),
    linear-gradient(145deg, #0c1409 0%, #0f1a0b 50%, #0a1015 100%);
  border: 1px solid rgba(198, 247, 78, 0.28);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(198, 247, 78, 0.08), 0 0 0 1px rgba(198, 247, 78, 0.10) inset;
  position: relative;
  overflow: hidden;
}

.page-rut-tien .balance-card::before {
  background: radial-gradient(ellipse at 70% 50%, rgba(198, 247, 78, 0.10) 0%, transparent 70%);
}

/* dot-grid overlay inside card */
.page-rut-tien .balance-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(198, 247, 78, 0.08) 1px, transparent 0);
  background-size: 20px 20px;
  pointer-events: none;
}

.page-rut-tien .balance-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: rgba(198, 247, 78, 0.60);
}

.page-rut-tien .balance-amount {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.page-rut-tien .balance-avail { color: rgba(255, 255, 255, 0.55); }
.page-rut-tien .balance-avail strong { color: var(--accent); }

/* ================================================================
   WD CARDS — use Krende surface
   ================================================================ */
.page-rut-tien .wd-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 14px;
  transition: border-color 0.22s;
}
.page-rut-tien .wd-card:hover { border-color: var(--border-strong); }
.page-rut-tien .wd-card h4 {
  font-family: var(--font-display);
  font-weight: 650;
  color: var(--text-main);
}

/* ================================================================
   METHOD SELECTOR — purple → lime
   ================================================================ */
.page-rut-tien .method-option {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid var(--border-subtle);
  border-radius: 11px;
  transition: all 0.18s;
}
.page-rut-tien .method-option:hover { border-color: var(--accent); }
.page-rut-tien .method-option.selected {
  border-color: rgba(198, 247, 78, 0.55);
  background: rgba(198, 247, 78, 0.07);
}
.page-rut-tien .method-logo {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

/* ================================================================
   FORM INPUTS — Krende style
   ================================================================ */
.page-rut-tien .form-group label {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.page-rut-tien .form-group input,
.page-rut-tien .form-group select,
.page-rut-tien .form-group textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text-main);
  font-family: var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.page-rut-tien .form-group input:focus,
.page-rut-tien .form-group select:focus,
.page-rut-tien .form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(198, 247, 78, 0.10);
  background: rgba(198, 247, 78, 0.03);
}
.page-rut-tien .form-group input::placeholder,
.page-rut-tien .form-group textarea::placeholder { color: var(--text-muted); }
.page-rut-tien .form-group select option { background: #13161e; }

/* ================================================================
   AMOUNT CHIPS — lime
   ================================================================ */
.page-rut-tien .amount-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  border-radius: 8px;
  transition: all 0.18s;
}
.page-rut-tien .amount-chip:hover,
.page-rut-tien .amount-chip.active {
  border-color: rgba(198, 247, 78, 0.45);
  color: var(--accent);
  background: rgba(198, 247, 78, 0.08);
  box-shadow: 0 0 0 1px rgba(198, 247, 78, 0.15) inset;
}

/* ================================================================
   SUBMIT BUTTON — lime solid, not purple gradient
   ================================================================ */
.page-rut-tien .btn-withdraw {
  background: var(--accent);
  color: var(--accent-on);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  border-radius: 11px;
  box-shadow: 0 6px 24px rgba(198, 247, 78, 0.28);
  transition: background 0.18s, transform 0.14s, box-shadow 0.18s;
}
.page-rut-tien .btn-withdraw:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(198, 247, 78, 0.38);
  filter: none;
}
.page-rut-tien .btn-withdraw:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ================================================================
   INFO SIDEBAR CARDS
   ================================================================ */
.page-rut-tien .info-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color 0.22s;
}
.page-rut-tien .info-card:hover { border-color: var(--border-strong); }
.page-rut-tien .info-card h3 {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.92rem;
  color: var(--text-main);
}
.page-rut-tien .info-card ul li { color: var(--text-soft); }
.page-rut-tien .info-card ul li::before { color: var(--accent); }

/* ================================================================
   HISTORY TABLE
   ================================================================ */
.page-rut-tien .history-table th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}
.page-rut-tien .history-table td {
  color: var(--text-soft);
  border-bottom: 1px solid rgba(132, 148, 170, 0.06);
}

/* ================================================================
   STATUS BADGES — Krende palette
   ================================================================ */
.page-rut-tien .status-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  border-radius: 7px;
  padding: 3px 10px;
}
.page-rut-tien .status-badge.pending {
  background: rgba(255, 206, 79, 0.10);
  color: #ffce4f;
  border: 1px solid rgba(255, 206, 79, 0.25);
}
.page-rut-tien .status-badge.done {
  background: rgba(198, 247, 78, 0.10);
  color: var(--accent);
  border: 1px solid rgba(198, 247, 78, 0.25);
}
.page-rut-tien .status-badge.rejected {
  background: rgba(255, 93, 114, 0.10);
  color: #ff5d72;
  border: 1px solid rgba(255, 93, 114, 0.25);
}

/* ================================================================
   SECTION TITLE
   ================================================================ */
.page-rut-tien .section-title {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-soft);
  margin: 24px 0 12px;
}

/* ================================================================
   ELIGIBILITY NOTICE — update colors
   ================================================================ */
#eligibilityNotice {
  background: rgba(255, 206, 79, 0.06) !important;
  border: 1.5px solid rgba(255, 206, 79, 0.35) !important;
  border-radius: 0 !important;
  color: #ffce4f !important;
}