/* ═══════════════════════════════════════════
   COMPONENTS.CSS — Buttons, chips, modals, toast
═══════════════════════════════════════════ */

/* ── BUTTONS ── */
.btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 20px; border-radius:var(--Rsm); border:none;
  font-size:14px; font-weight:500;
  transition:transform .15s,opacity .15s;
}
.btn:active { transform:scale(.96); opacity:.85; }
.btn-primary {
  background: linear-gradient(135deg,#a855f7,#7c3aed);
  color:#fff;
}
.btn-primary:hover { opacity:.9; }
.btn-ghost { background:var(--s2); color:var(--t2); border:1px solid var(--b); }
.btn-ghost:hover { background:var(--s3); border-color:var(--bp); color:var(--t); }
.btn-danger { background:rgba(248,113,113,.1); color:var(--r); border:1px solid rgba(248,113,113,.2); }
.btn-tg  { background:rgba(36,160,237,.12);  color:#24a0ed; border:1px solid rgba(36,160,237,.25); }
.btn-vk  { background:rgba(0,119,255,.10);    color:#4a90e2; border:1px solid rgba(0,119,255,.22); }
.btn-full { width:100%; }
.btn-sm   { padding:9px 14px; font-size:13px; border-radius:var(--Rxs); }
.btn svg  { width:18px; height:18px; }

/* ── CHIPS ── */
.chip { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:99px; font-size:12px; font-weight:600; }
.chip-p    { background:var(--pg);            border:1px solid var(--bp);                  color:var(--ph); }
.chip-g    { background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.3);        color:var(--g); }
.chip-gold { background:rgba(234,179,8,.14);  border:1px solid rgba(234,179,8,.45);        color:#92650a; }
.chip-r    { background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.2);       color:var(--r); }
[data-theme="dark"] .chip-g    { color:#4ade80; }
[data-theme="dark"] .chip-gold { background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.35); color:#f5c842; }
[data-theme="dark"] .chip-r    { color:#f87171; }
.plan-badge {
  position:absolute; top:13px; right:13px;
  background: linear-gradient(135deg,#a855f7,#7c3aed);
  color:#fff; font-size:10px; font-weight:700; letter-spacing:.06em;
  padding:3px 10px; border-radius:99px; text-transform:uppercase;
}

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.7);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  width:100%; max-width:500px;
  background:var(--bg2); border:1px solid var(--b);
  border-radius:26px 26px 0 0;
  padding:22px 18px 36px;
  transform:translateY(80px); transition:transform .32s cubic-bezier(.4,0,.2,1);
  max-height:92dvh; overflow-y:auto;
}
.modal-overlay.open .modal { transform:translateY(0); }
.modal-handle { width:36px;height:4px;border-radius:99px;background:var(--b);margin:0 auto 20px; }
.modal-title  { font-family:'Syne',sans-serif; font-size:19px; font-weight:800; margin-bottom:6px; color:var(--t); }
.modal-sub    { font-size:13px; color:var(--t2); margin-bottom:18px; line-height:1.5; }
.modal-input  {
  width:100%; background:var(--s2); border:1px solid var(--b);
  border-radius:var(--Rsm); padding:12px 14px;
  font-size:15px; outline:none; transition:border-color var(--tr); margin-bottom:12px; color:var(--t);
}
.modal-input:focus { border-color:var(--bp); }

/* ── TOAST ── */
.toast {
  position:fixed; bottom:calc(var(--nh)+18px); left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--bg2); border:1px solid var(--bp);
  color:var(--ph);
  padding:10px 22px; border-radius:99px; font-size:13px; font-weight:500;
  opacity:0; pointer-events:none; z-index:600;
  transition:opacity .3s,transform .3s; white-space:nowrap;
}
.toast.show  { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.err   { background:var(--bg2); border-color:rgba(248,113,113,.4); color:var(--r); }
.toast.ok    { background:var(--bg2); border-color:rgba(74,222,128,.4);  color:var(--g); }

/* ── MENU LIST ── */
.menu-item {
  display:flex; align-items:center; gap:13px; padding:13px 15px;
  border:none; background:transparent; color:var(--t);
  width:100%; text-align:left; cursor:pointer;
  transition:background var(--tr); border-radius:var(--Rsm);
}
.menu-item:hover { background:var(--s2); }
.menu-icon {
  width:36px;height:36px;border-radius:9px;
  background:var(--s2);border:1px solid var(--b);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.menu-icon svg { width:15px;height:15px;color:var(--t2); }
[data-theme="light"] .menu-icon { background:var(--s3); }

/* ── AVATAR — simplified ── */
.avatar-sm {
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#a855f7,#6d28d9);
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-weight:700;font-size:13px;color:#fff;
  border:2px solid var(--bp);
}
.avatar-lg {
  width:78px;height:78px;border-radius:50%;margin:0 auto 14px;
  background:linear-gradient(135deg,#c084fc,#7c3aed);
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-weight:800;font-size:26px;color:#fff;
  border:3px solid var(--bp);
}

/* ── STATS ── */
.stat-row  { display:flex; gap:10px; }
.stat-card { flex:1;padding:14px 10px;text-align:center;transition:background .2s,border-color .2s; }
.stat-card:hover { background:var(--pg2);border-color:var(--bp); }
.stat-val  { font-family:'Syne',sans-serif;font-size:18px;font-weight:700;color:var(--ph); }
.stat-lbl  { font-size:10px;color:var(--t2);margin-top:3px;text-transform:uppercase;letter-spacing:.06em;font-weight:500; }

/* ── PROFILE DATA ROWS ── */
.data-row {
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:12px 16px; gap:16px;
}
.data-row:not(:last-child) { border-bottom:1px solid var(--b); }
.data-label { font-size:12px;color:var(--t2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;font-weight:500; }
.data-value { font-size:14px;font-weight:500;color:var(--t); }
.data-sub   { font-size:11px;color:var(--t2);margin-top:2px; }

/* ── TRANSACTION LIST ── */
.tx-item {
  display:flex;align-items:center;gap:12px;padding:13px 14px;
}
.tx-item:not(:last-child) { border-bottom:1px solid var(--b); }
.tx-icon {
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px;
}
.tx-amount-pos { font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--g); }
.tx-amount-neg { font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--r); }

/* ── SEARCH ── */
.search-wrap {
  display:flex;align-items:center;gap:9px;
  padding:12px 14px;border-radius:var(--Rsm);
  background:var(--s2);border:1px solid var(--b);transition:border-color var(--tr);
}
.search-wrap:focus-within { border-color:var(--bp); }
.search-wrap svg { width:17px;height:17px;color:var(--t2);flex-shrink:0; }
.search-wrap input { flex:1;background:transparent;border:none;outline:none;font-size:14px;color:var(--t); }
.search-wrap input::placeholder { color:var(--t2); }

/* ── FAQ ── */
.faq-q {
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 16px;width:100%;text-align:left;border:none;background:transparent;
  color:var(--t);font-size:14px;font-weight:500;cursor:pointer;transition:color var(--tr);
}
.faq-q:hover { color:var(--ph); }
.faq-q svg { width:15px;height:15px;color:var(--t2);flex-shrink:0;transition:transform .3s; }
.faq-q.open svg { transform:rotate(180deg);color:var(--ph); }
.faq-a { display:none;padding:0 16px 15px;font-size:13px;color:var(--t2);line-height:1.6; }
.faq-a.open { display:block; }

/* ── SUPPORT ICONS ── */
.s-icon { width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.s-icon svg { width:19px;height:19px; }
.si-tg   { background:rgba(36,160,237,.12);border:1px solid rgba(36,160,237,.22); }
.si-tg svg  { color:#24a0ed; }
.si-chat { background:var(--pg);border:1px solid var(--bp); }
.si-chat svg { color:var(--ph); }
.si-mail { background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.18); }
.si-mail svg { color:var(--gold); }

/* ── LANG SELECTOR ── */
.lang-btn {
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-radius:var(--Rsm);border:1px solid var(--b);
  background:var(--s2);cursor:pointer;transition:all var(--tr);
  font-size:14px;font-weight:500;color:var(--t);width:100%;
}
.lang-btn.active { background:var(--pg);border-color:var(--bp);color:var(--ph); }
.lang-btn .flag { font-size:20px; }

/* ── COPY BUTTON ── */
.copy-btn {
  display:flex;align-items:center;gap:6px;padding:9px 14px;
  border-radius:9px;border:1px solid var(--bp);background:var(--pg);
  color:var(--ph);font-size:13px;font-weight:500;cursor:pointer;
  transition:all var(--tr);white-space:nowrap;
}
.copy-btn:active { transform:scale(.95); }
.copy-btn svg { width:13px;height:13px; }

/* ── PROMO ── */
.promo-input {
  flex:1;background:var(--s2);border:1px solid var(--b);
  border-radius:var(--Rsm);padding:11px 14px;
  font-size:14px;font-weight:500;letter-spacing:.05em;
  outline:none;transition:border-color var(--tr);text-transform:uppercase;
}
.promo-input::placeholder { color:var(--t2);text-transform:none;letter-spacing:0; }
.promo-input:focus { border-color:var(--bp); }
.promo-result { padding:12px 14px;border-radius:var(--Rsm);font-size:13px;font-weight:500;display:none;margin-top:8px; }
.promo-ok  { background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2);color:var(--g); }
.promo-err { background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.18);color:var(--r); }
.promo-loading { background:var(--s2); border:1px solid var(--b); color:var(--t2); }

/* ── AVATAR PICKER ── */
.ava-pick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.ava-pick-btn {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--b);
  background: var(--s2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, transform .15s, box-shadow .2s;
  padding: 0;
}
.ava-pick-btn:hover  { border-color: var(--bp); transform: scale(1.05); }
.ava-pick-btn:active { transform: scale(.95); }
.ava-pick-selected {
  border-color: var(--ph) !important;
  box-shadow: 0 0 0 3px rgba(168,85,247,.3);
}
.ava-pick-check {
  position: absolute;
  inset: 0;
  background: rgba(168,85,247,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  backdrop-filter: blur(2px);
}

/* ── NOTIFICATION BADGE ── */
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--r);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── TOPUP AMOUNT GRID ── */
.topup-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.topup-amount-btn {
  padding: 12px 8px;
  border-radius: var(--Rsm);
  border: 1px solid var(--b);
  background: var(--s2);
  color: var(--t);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.topup-amount-btn:hover {
  border-color: var(--bp);
  background: var(--pg);
  color: var(--ph);
}
.topup-amount-btn.sel {
  border-color: var(--bp);
  background: var(--pg);
  color: var(--ph);
}

/* ── PLAN SWITCH BUTTON ── */
.plan-switch-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--Rsm);
  border: 1px solid var(--b);
  background: var(--s2);
  color: var(--t);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all .2s;
}
.plan-switch-btn:hover:not(:disabled) {
  border-color: var(--bp);
  background: var(--pg);
  color: var(--t);
}
.plan-switch-btn:active:not(:disabled) { transform: scale(.98); }
.plan-switch-cur {
  border-color: var(--bp) !important;
  background: var(--pg) !important;
  cursor: default;
}
[data-theme="light"] .plan-switch-btn { background: var(--s2); }