/* ==========================================================================
   استایل مشترک «کیف پول پرداخت به‌ازای مصرف»
   این فایل در هر دو صفحه‌ی h3.html و h3avatar.html لود می‌شود، پس ظاهر کیف
   پول در هر دو صفحه دقیقاً یکسان است. همه‌ی رنگ‌ها از همان متغیرهای CSS
   خودِ صفحه (--accent-gold, --panel-bg و ...) خوانده می‌شوند تا با تم هر دو
   صفحه هماهنگ بماند.
   ========================================================================== */

@keyframes aw-fade { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes aw-pop  { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ---------- نشان «پرداخت به‌ازای مصرف» — بالای صفحه، سمت راست ---------- */
/* جزو روند عادی صفحه است (نه position:fixed)، پس فقط همان ابتدای صفحه
   دیده می‌شود و با اسکرول به پایین، مثل بقیه‌ی محتوا از دید خارج می‌شود. */
.aw-topbar {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 12px;
  animation: aw-fade 0.6s ease-out both;
}
.aw-topbadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  font-family: var(--app-font, 'Vazirmatn', sans-serif);
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-gold, #4A6CFA), var(--accent-cyan, #0FD4A8));
  box-shadow: 0 6px 18px rgba(74, 108, 250, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  cursor: default;
}
.aw-topbadge svg { width: 14px; height: 14px; flex-shrink: 0; }

@media (max-width: 420px) {
  .aw-topbadge { font-size: 0.68rem; padding: 6px 11px; }
}

/* ---------- کارت کیف پول (زیر متن معرفی صفحه) ---------- */
.aw-card {
  position: relative;
  z-index: 4;
  margin: 1.2rem auto 0;
  max-width: 420px;
  padding: 13px 15px;
  border-radius: 16px;
  background: var(--panel-bg, #fff);
  border: 1px solid var(--panel-border, #EAEFF7);
  box-shadow: 0 8px 20px -14px rgba(26, 32, 44, 0.25);
  text-align: right;
  font-family: var(--app-font, 'Vazirmatn', sans-serif);
  animation: aw-pop 0.55s ease-out both;
}

.aw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aw-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

.aw-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(74,108,250,0.14), rgba(15,212,168,0.14));
  color: var(--accent-gold, #4A6CFA);
}
.aw-icon svg { width: 18px; height: 18px; }

.aw-meta { min-width: 0; }
.aw-label {
  font-size: 0.68rem; font-weight: 600;
  color: var(--text-tertiary, #8A94A6);
  display: block; margin-bottom: 1px;
}
.aw-balance {
  font-size: 1.05rem; font-weight: 800;
  color: var(--text-primary, #1A202C);
  line-height: 1.3;
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
}
.aw-balance .aw-unit { font-size: 0.7rem; font-weight: 600; color: var(--text-secondary, #626F86); }
.aw-balance.aw-low { color: var(--danger-color, #e53e3e); }
.aw-balance .aw-unregistered { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary, #626F86); }

/* ردیف کوچک زیر ردیف اصلی: قیمت هر ویدیو + شماره‌ی ثبت‌شده */
.aw-sub {
  margin-top: 9px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 6px 10px;
}
.aw-price-pill {
  font-size: 0.66rem; font-weight: 700;
  color: var(--accent-gold, #4A6CFA);
  background: var(--accent-gold-glow, rgba(74,108,250,0.12));
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.aw-phone {
  font-size: 0.68rem; font-weight: 600;
  color: var(--text-secondary, #626F86);
  display: flex; align-items: center; gap: 6px;
  direction: ltr;
}
.aw-phone .aw-edit {
  cursor: pointer; color: var(--accent-gold, #4A6CFA);
  font-weight: 700; text-decoration: none; border: none; background: none;
  font-family: inherit; font-size: 0.68rem; padding: 0;
}
.aw-phone .aw-edit:hover { text-decoration: underline; }

/* موبایل‌های خیلی باریک: ردیف اصلی زیر هم می‌چیند تا فشرده نشود */
@media (max-width: 360px) {
  .aw-row { flex-wrap: wrap; }
  .aw-btn#aw-topup-btn { flex: 1 1 100%; justify-content: center; }
}

.aw-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent-gold, #4A6CFA), var(--accent-gold-soft, #3553D6));
  box-shadow: 0 6px 16px -6px rgba(74, 108, 250, 0.6);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.aw-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px -6px rgba(74, 108, 250, 0.65); }
.aw-btn:active { transform: translateY(0); }
.aw-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.aw-btn svg { width: 15px; height: 15px; }

.aw-btn.aw-ghost {
  background: var(--input-bg, #F6F8FB);
  color: var(--text-secondary, #626F86);
  box-shadow: none;
  border: 1px solid var(--input-border, #E1E7EF);
}
.aw-btn.aw-ghost:hover { box-shadow: none; background: var(--panel-bg-alt, #F0F3F9); }

.aw-hold {
  margin-top: 8px;
  font-size: 0.68rem; font-weight: 600;
  line-height: 1.6;
  color: #B7791F;
  background: rgba(236, 201, 75, 0.12);
  border: 1px solid rgba(236, 201, 75, 0.35);
  border-radius: 10px;
  padding: 6px 9px;
  display: none;
}
.aw-hold.aw-show { display: block; }

/* ---------- پنجره‌های مودال ---------- */
.aw-overlay {
  position: fixed; inset: 0;
  background: rgba(18, 22, 32, 0.55);
  backdrop-filter: blur(4px);
  z-index: 10050;
  display: none;
  align-items: center; justify-content: center;
  padding: 18px;
  font-family: var(--app-font, 'Vazirmatn', sans-serif);
  direction: rtl;
}
.aw-overlay.aw-open { display: flex; animation: aw-fade 0.25s ease-out both; }

.aw-modal {
  width: 100%; max-width: 400px;
  max-height: 88vh; overflow-y: auto;
  background: var(--panel-bg, #fff);
  border-radius: 22px;
  padding: 22px 20px 20px;
  box-shadow: 0 26px 60px -18px rgba(15, 20, 32, 0.5);
  animation: aw-pop 0.32s cubic-bezier(0.34, 1.4, 0.5, 1) both;
  text-align: center;
}

.aw-modal .aw-m-icon {
  width: 52px; height: 52px; margin: 0 auto 12px;
  border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(74,108,250,0.14), rgba(15,212,168,0.14));
  color: var(--accent-gold, #4A6CFA);
}
.aw-modal .aw-m-icon svg { width: 26px; height: 26px; }
.aw-modal h3 {
  margin: 0 0 6px; font-size: 1.02rem; font-weight: 800;
  color: var(--text-primary, #1A202C);
}
.aw-modal p.aw-m-sub {
  margin: 0 0 16px; font-size: 0.8rem; line-height: 1.9;
  color: var(--text-secondary, #626F86); font-weight: 500;
}

.aw-input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 13px;
  border: 1.6px solid var(--input-border, #E1E7EF);
  background: var(--input-bg, #F6F8FB);
  font-family: var(--mono-font, monospace);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  direction: ltr;
  color: var(--text-primary, #1A202C);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.aw-input:focus {
  border-color: var(--accent-gold, #4A6CFA);
  box-shadow: 0 0 0 4px var(--accent-gold-glow, rgba(74,108,250,0.2));
}
.aw-input.aw-invalid { border-color: var(--danger-color, #e53e3e); }

.aw-err {
  margin-top: 9px; font-size: 0.74rem; font-weight: 600;
  color: var(--danger-color, #e53e3e); min-height: 18px; line-height: 1.7;
}

.aw-actions { display: flex; gap: 9px; margin-top: 15px; }
.aw-actions .aw-btn { flex: 1; justify-content: center; padding: 12px 10px; }

/* گزینه‌های شارژ */
.aw-amounts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0 6px; }
.aw-amount {
  position: relative;
  border: 1.8px solid var(--input-border, #E1E7EF);
  background: var(--input-bg, #F6F8FB);
  border-radius: 15px;
  padding: 18px 8px 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: all 0.2s ease;
}
.aw-amount:hover { border-color: var(--accent-gold, #4A6CFA); transform: translateY(-1px); }
.aw-amount.aw-sel {
  border-color: var(--accent-gold, #4A6CFA);
  background: rgba(74, 108, 250, 0.08);
  box-shadow: 0 0 0 3px var(--accent-gold-glow, rgba(74,108,250,0.18));
}
.aw-amount .aw-a-num {
  display: block; font-size: 1.02rem; font-weight: 800;
  color: var(--text-primary, #1A202C);
}
.aw-amount .aw-a-unit {
  display: block; font-size: 0.66rem; font-weight: 600; margin-top: 2px;
  color: var(--text-tertiary, #8A94A6);
}
.aw-amount .aw-a-count {
  display: block; font-size: 0.64rem; font-weight: 700; margin-top: 5px;
  color: var(--accent-cyan, #0FD4A8);
}
.aw-amount .aw-a-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--accent-gold, #4A6CFA); color: #fff;
  font-size: 0.58rem; font-weight: 800; line-height: 1;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 4px 10px -3px rgba(74,108,250,0.55);
}

/* کارت لینک پرداخت (وقتی باز شدن خودکار مرورگر ممکن نبود) */
.aw-linkbox { margin-top: 14px; display: none; text-align: right; }
.aw-linkbox.aw-show { display: block; }
.aw-linkbox .aw-lb-title {
  font-size: 0.74rem; font-weight: 700; color: var(--text-secondary, #626F86); margin-bottom: 7px;
}
.aw-linkbox .aw-lb-url {
  font-family: var(--mono-font, monospace);
  font-size: 0.66rem; direction: ltr; text-align: left;
  background: var(--input-bg, #F6F8FB);
  border: 1px solid var(--input-border, #E1E7EF);
  border-radius: 11px; padding: 9px 10px;
  word-break: break-all; color: var(--text-secondary, #626F86);
  max-height: 84px; overflow: auto;
}

/* پیام موفقیت/خطای کوتاه */
.aw-toast {
  position: fixed;
  left: 50%; bottom: 22px;
  transform: translateX(-50%) translateY(20px);
  background: #1A202C; color: #fff;
  padding: 11px 18px; border-radius: 13px;
  font-family: var(--app-font, 'Vazirmatn', sans-serif);
  font-size: 0.8rem; font-weight: 600;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.5);
  z-index: 10060; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: calc(100vw - 34px); text-align: center; line-height: 1.8;
}
.aw-toast.aw-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.aw-toast.aw-ok { background: #22694A; }
.aw-toast.aw-bad { background: #8B2B2B; }

/* اسپینر داخل دکمه */
.aw-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: aw-rot 0.75s linear infinite;
  display: inline-block;
}
@keyframes aw-rot { to { transform: rotate(360deg); } }