/*
 * VIP Transfer — Design System
 * Unified tokens, components and utilities across all pages
 */

/* ═══════════════════════════════════════
   TOKENS
═══════════════════════════════════════ */
:root {
  /* Brand */
  --gold:        #C49B3F;
  --gold-light:  #D4AA4F;
  --gold-dark:   #A8823A;
  --gold-muted:  rgba(196,155,63,.12);
  --gold-border: rgba(196,155,63,.25);

  /* Dark */
  --ink:         #0D0D14;
  --ink-2:       #111827;
  --ink-3:       #1a1a2e;

  /* Neutral */
  --surface:     #FFFFFF;
  --surface-2:   #F8F9FA;
  --surface-3:   #F1F3F5;
  --border:      #E5E7EB;
  --border-2:    #D1D5DB;

  /* Text */
  --text-primary:   #111827;
  --text-secondary: #4B5563;
  --text-muted:     #9CA3AF;
  --text-inverse:   #FFFFFF;

  /* Status */
  --green:       #22C55E;
  --green-dark:  #16A34A;
  --red:         #EF4444;

  /* Whatsapp */
  --wa:          #25D366;
  --wa-dark:     #1DA851;

  /* Radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);

  /* Transition */
  --t: .18s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════
   STEP INDICATOR  (shared across all pages)
═══════════════════════════════════════ */
.vip-steps-bar {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  max-width: 480px;
  margin: 28px auto 32px;
  padding: 0 16px;
  position: relative;
}

.vip-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 2;
}

/* connecting line */
.vip-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
  z-index: 1;
}
.vip-step.done:not(:last-child)::after,
.vip-step.current:not(:last-child)::after {
  background: var(--gold);
  opacity: .5;
}

.vip-step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: border-color var(--t), background var(--t);
  margin-bottom: 7px;
}

.vip-step.done .vip-step-dot {
  background: var(--ink-2);
  border-color: var(--ink-2);
}
.vip-step.done .vip-step-dot::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  display: block;
  transform: rotate(-45deg) translate(1px, -1px);
}

.vip-step.current .vip-step-dot {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-muted);
}
.vip-step.current .vip-step-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  display: block;
}

.vip-step-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
}
.vip-step.done .vip-step-label { color: var(--text-secondary); }
.vip-step.current .vip-step-label { color: var(--gold); font-weight: 600; }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.vip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: none;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
  white-space: nowrap;
  line-height: 1;
}
.vip-btn:hover  { transform: translateY(-1px); }
.vip-btn:active { transform: translateY(0); }

/* Primary = gold */
.vip-btn-primary {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 2px 8px rgba(196,155,63,.30);
}
.vip-btn-primary:hover {
  background: var(--gold-light);
  box-shadow: 0 4px 16px rgba(196,155,63,.40);
}

/* Dark */
.vip-btn-dark {
  background: var(--ink-2);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.vip-btn-dark:hover {
  background: #1f2937;
  box-shadow: 0 4px 16px rgba(0,0,0,.24);
}

/* Ghost */
.vip-btn-ghost {
  background: var(--surface-3);
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
}
.vip-btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text-primary);
}

/* WhatsApp */
.vip-btn-wa {
  background: var(--wa);
  color: #fff;
  box-shadow: 0 2px 10px rgba(37,211,102,.30);
}
.vip-btn-wa:hover {
  background: var(--wa-dark);
  box-shadow: 0 4px 18px rgba(37,211,102,.40);
}

/* Full width helper */
.vip-btn-full { width: 100%; }

/* ═══════════════════════════════════════
   CARD
═══════════════════════════════════════ */
.vip-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}
.vip-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0;
  margin-bottom: 14px;
}
.vip-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════
   FORM ELEMENTS
═══════════════════════════════════════ */
.vip-form-group {
  margin-bottom: 14px;
}
.vip-form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.vip-form-input,
.vip-form-select,
.vip-form-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--text-primary);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  outline: none;
  -webkit-appearance: none;
}
.vip-form-input:focus,
.vip-form-select:focus,
.vip-form-textarea:focus {
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px var(--gold-muted);
}
.vip-form-input::placeholder,
.vip-form-textarea::placeholder { color: var(--text-muted); }

/* Section heading inside form */
.vip-form-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 16px 0 8px;
  border-top: 1px solid var(--border);
  margin: 4px 0 12px;
}
.vip-form-section-title:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* ═══════════════════════════════════════
   FEATURE BADGE (shared)
═══════════════════════════════════════ */
.vip-badge {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
  border-radius: var(--r-full);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.vip-badge svg { width: 12px; height: 12px; stroke: #3B82F6; fill: none; flex-shrink: 0; }

/* ═══════════════════════════════════════
   CLOSE BUTTON (modal / overlay)
═══════════════════════════════════════ */
.vip-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--surface-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0;
  transition: background var(--t);
  z-index: 10;
  flex-shrink: 0;
}
.vip-close-btn::before,
.vip-close-btn::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: background var(--t);
}
.vip-close-btn::before { transform: rotate(45deg); }
.vip-close-btn::after  { transform: rotate(-45deg); }
.vip-close-btn:hover { background: #FEE2E2; }
.vip-close-btn:hover::before,
.vip-close-btn:hover::after { background: var(--red); }