/* ═══════════════════════════════════════════════════════════════
   Azmar Exchange — Modern Fintech UI (v2)
   لایت + دارک بە data-theme، گڵاس‌مۆرفیزم، ئەنیمەیشنی زیندوو
   پاڵێتی براند §16.0: شینی تۆخ + ئەمبەر تەنها بۆ پارە
   ═══════════════════════════════════════════════════════════════ */
:root {
  --color-brand-900: #1E3A8A;
  --color-brand-800: #1E40AF;
  --color-brand-600: #2563EB;
  --color-brand-400: #60A5FA;
  --color-brand-100: #DBEAFE;
  --color-money: #F59E0B;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-muted-step: #CBD5E1;

  --bg-page: #F1F5FB;
  --bg-glow-1: rgba(37, 99, 235, .10);
  --bg-glow-2: rgba(245, 158, 11, .07);
  --bg-card: rgba(255, 255, 255, .78);
  --bg-card-solid: #FFFFFF;
  --bg-input: rgba(255, 255, 255, .9);
  --border: rgba(15, 23, 42, .08);
  --border-strong: rgba(15, 23, 42, .14);
  --text: #0F172A;
  --text-muted: #64748B;
  --shadow-card: 0 4px 24px rgba(30, 58, 138, .08), 0 1px 3px rgba(15, 23, 42, .05);
  --shadow-hover: 0 12px 36px rgba(30, 58, 138, .14);
  --glow-primary: 0 6px 20px rgba(37, 99, 235, .35);
  --glow-money: 0 0 18px rgba(245, 158, 11, .25);
  --hero-grad: linear-gradient(130deg, #1E3A8A, #1D4ED8 45%, #3730A3);

  --radius-btn: 10px;
  --radius-card: 18px;
  --font-sans: 'Vazirmatn', 'Noto Naskh Arabic', sans-serif;
  --font-mono: 'JetBrains Mono', 'Inter', monospace;
}

[data-theme="dark"] {
  --bg-page: #050B1E;
  --bg-glow-1: rgba(37, 99, 235, .16);
  --bg-glow-2: rgba(245, 158, 11, .08);
  --bg-card: rgba(15, 23, 42, .66);
  --bg-card-solid: #0F172A;
  --bg-input: rgba(2, 6, 23, .55);
  --border: rgba(148, 163, 184, .12);
  --border-strong: rgba(148, 163, 184, .22);
  --text: #F1F5F9;
  --text-muted: #94A3B8;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, .45);
  --shadow-hover: 0 12px 36px rgba(0, 0, 0, .55);
  --glow-primary: 0 6px 24px rgba(37, 99, 235, .5);
  --color-muted-step: #334155;
  --hero-grad: linear-gradient(130deg, #0B1B4D, #1E3A8A 45%, #312E81);
}

/* ─── بنەما ─── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background:
    radial-gradient(700px 400px at 85% -5%, var(--bg-glow-1), transparent 70%),
    radial-gradient(600px 380px at 5% 30%, var(--bg-glow-2), transparent 70%),
    var(--bg-page);
  background-attachment: fixed;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
  transition: background .35s, color .35s;
}

.container { max-width: 480px; margin: 0 auto; padding: 0 16px; }
.container-wide { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* ─── ئەنیمەیشنەکان ─── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes blobDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px,-18px) scale(1.12); } }
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5);} 60% { box-shadow: 0 0 0 7px rgba(16,185,129,0);} }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.4);} 50% { box-shadow: 0 0 0 8px rgba(245,158,11,0);} }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

.fade-up { animation: fadeUp .6s cubic-bezier(.2,.7,.3,1) both; }
.d1 { animation-delay: .12s; } .d2 { animation-delay: .24s; } .d3 { animation-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ─── Header ─── */
.site-header {
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.site-header .inner { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; max-width: 1100px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 17px; }
.brand small { display: block; font-weight: 400; font-size: 11px; color: var(--text-muted); }

.logo {
  width: 40px; height: 40px; border-radius: 26%;
  background: linear-gradient(135deg, var(--color-brand-800), #3730A3);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--glow-primary);
}
.logo svg { width: 28px; height: 28px; }

.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--bg-card);
  cursor: pointer; font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .25s, box-shadow .25s;
}
.theme-toggle:hover { transform: rotate(20deg) scale(1.08); box-shadow: var(--shadow-card); }

.header-icon { text-decoration: none; font-size: 20px; transition: transform .2s; display: inline-block; }
.header-icon:hover { transform: scale(1.15); }

.service-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 4px 12px; border-radius: 999px;
  background: rgba(16, 185, 129, .12); color: #059669; border: 1px solid rgba(16, 185, 129, .3);
}
[data-theme="dark"] .service-badge { color: #34D399; }
.service-badge.closed { background: rgba(245, 158, 11, .12); color: #B45309; border-color: rgba(245, 158, 11, .35); }
[data-theme="dark"] .service-badge.closed { color: #FBBF24; }
.service-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); animation: pulseDot 2s infinite; }
.service-badge.closed .dot { background: var(--color-warning); animation: none; }

/* ─── Hero ─── */
.hero {
  position: relative; overflow: hidden;
  background: var(--hero-grad);
  background-size: 220% 220%;
  animation: gradShift 14s ease infinite;
  color: #fff; text-align: center; padding: 40px 16px 96px;
}
.hero h1 { font-size: 27px; margin: 0 0 8px; font-weight: 700; position: relative; z-index: 2; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.hero p { margin: 0; opacity: .88; font-size: 14px; position: relative; z-index: 2; }
.hero .blob {
  position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; z-index: 1;
  animation: blobDrift 11s ease-in-out infinite;
}
.hero .b1 { width: 220px; height: 220px; background: #60A5FA; top: -70px; right: -50px; }
.hero .b2 { width: 180px; height: 180px; background: #F59E0B; bottom: -60px; left: -40px; opacity: .3; animation-delay: 3s; }
.hero .b3 { width: 130px; height: 130px; background: #818CF8; top: 30%; left: 15%; opacity: .35; animation-delay: 6s; }
.hero-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; position: relative; z-index: 2; }
.hero-chips span {
  font-size: 12px; padding: 5px 14px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); animation: floatY 5s ease-in-out infinite;
}
.hero-chips span:nth-child(2) { animation-delay: .8s; }
.hero-chips span:nth-child(3) { animation-delay: 1.6s; }
.hero-chips span:nth-child(4) { animation-delay: 2.4s; }

/* ─── کارت و هەنگاوەکان ─── */
.flow { margin-top: -68px; padding-bottom: 40px; position: relative; z-index: 3; }
.card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 20px; margin-bottom: 16px;
  box-shadow: var(--shadow-card);
  transition: transform .3s, box-shadow .3s, opacity .3s, border-color .3s;
  animation: fadeUp .55s cubic-bezier(.2,.7,.3,1) both;
}
.card:hover { box-shadow: var(--shadow-hover); }
.card.dimmed { opacity: .42; pointer-events: none; transform: scale(.985); }
#step1 { animation-delay: .08s; } #step2 { animation-delay: .16s; } #step3 { animation-delay: .24s; }

.step-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; margin-bottom: 14px; }
.step-num {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-brand-600), #4F46E5);
  color: #fff; box-shadow: var(--glow-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.card.dimmed .step-num { background: var(--color-muted-step); box-shadow: none; }

/* ─── فۆرم ─── */
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: var(--text); }
.hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
input[type=text], input[type=tel], input[type=number], select, textarea {
  width: 100%; padding: 11px 13px; font-family: var(--font-sans);
  font-size: 15px; border: 1px solid var(--border-strong); border-radius: var(--radius-btn);
  background: var(--bg-input); color: var(--text); outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--color-brand-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
input.mono { font-family: var(--font-mono); direction: ltr; text-align: left; }
.field { margin-bottom: 14px; }
.row2 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }

.swap-btn {
  width: 42px; height: 42px; border-radius: var(--radius-btn);
  border: 1px solid var(--border-strong); background: var(--bg-input);
  color: var(--color-brand-600); font-size: 18px; cursor: pointer;
  transition: transform .3s, background .2s, box-shadow .2s;
}
[data-theme="dark"] .swap-btn { color: var(--color-brand-400); }
.swap-btn:hover { transform: rotate(180deg); box-shadow: var(--glow-primary); }

/* ─── دوگمەکان ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--radius-btn); font-family: var(--font-sans);
  font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; transition: transform .15s, box-shadow .25s, background .2s;
  width: 100%;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--color-brand-600), #4F46E5);
  color: #fff; box-shadow: var(--glow-primary);
}
.btn-primary:hover { box-shadow: 0 8px 28px rgba(37, 99, 235, .5); transform: translateY(-1px); }
.btn-primary:disabled { background: var(--color-muted-step); box-shadow: none; cursor: not-allowed; transform: none; }
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover { border-color: var(--color-brand-600); color: var(--color-brand-600); }
[data-theme="dark"] .btn-outline:hover { color: var(--color-brand-400); border-color: var(--color-brand-400); }
.btn-sm { padding: 7px 13px; font-size: 13px; width: auto; }

/* ─── سندووقی حیساب ─── */
.quote-box {
  background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(79,70,229,.06));
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-btn); padding: 13px 15px; margin-top: 12px;
  display: none;
}
[data-theme="dark"] .quote-box { background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(79,70,229,.1)); }
.quote-box.show { display: block; animation: fadeUp .35s both; }
.quote-line { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; color: var(--text-muted); }
.quote-line strong { color: var(--text); }
.quote-line .money { color: var(--color-money); font-weight: 700; font-family: var(--font-mono); direction: ltr; text-shadow: var(--glow-money); }
.quote-line.total { border-top: 1px solid var(--border-strong); margin-top: 6px; padding-top: 8px; font-size: 16px; }
.quote-error { color: var(--color-danger); font-size: 13px; margin-top: 10px; display: none; }

/* ─── کۆدی داواکاری ─── */
.order-code {
  display: inline-block; font-family: var(--font-mono); direction: ltr;
  background: linear-gradient(135deg, var(--color-brand-100), #EDE9FE);
  color: var(--color-brand-900);
  padding: 7px 18px; border-radius: 999px; font-size: 18px; font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 2px 12px rgba(30, 58, 138, .15);
}
[data-theme="dark"] .order-code { background: linear-gradient(135deg, #1E3A8A, #3730A3); color: #DBEAFE; }
.copy-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-input); border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn); padding: 11px 13px; margin: 8px 0;
  transition: border-color .2s;
}
.copy-row:hover { border-color: var(--color-brand-400); }
.copy-row .value { font-family: var(--font-mono); direction: ltr; font-weight: 700; flex: 1; text-align: left; font-size: 15px; }
.copy-row .value.money { color: var(--color-money); }
.copy-btn {
  border: none; background: var(--color-brand-100); color: var(--color-brand-900);
  border-radius: 7px; padding: 6px 12px; font-size: 12px; cursor: pointer; font-family: var(--font-sans);
  transition: transform .15s, background .2s;
}
[data-theme="dark"] .copy-btn { background: #1E3A8A; color: #DBEAFE; }
.copy-btn:hover { transform: scale(1.06); }
.copy-btn:active { transform: scale(.94); }

.countdown { font-family: var(--font-mono); font-weight: 700; color: var(--color-warning); }

/* ─── هێڵی کات ─── */
.timeline { list-style: none; padding: 0; margin: 16px 0; }
.timeline li { display: flex; gap: 12px; padding: 0 0 20px; position: relative; animation: fadeUp .4s both; }
.timeline li:nth-child(2) { animation-delay: .08s; } .timeline li:nth-child(3) { animation-delay: .16s; } .timeline li:nth-child(4) { animation-delay: .24s; }
.timeline li::before {
  content: ""; position: absolute; right: 11px; top: 26px; bottom: 0;
  width: 2px; background: var(--border-strong);
}
[dir=ltr] .timeline li::before { right: auto; left: 11px; }
.timeline li:last-child::before { display: none; }
.t-dot {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-muted-step); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
  z-index: 1; transition: background .3s;
}
.timeline li.done .t-dot { background: var(--color-success); }
.timeline li.active .t-dot { background: var(--color-warning); animation: pulse 1.5s infinite; }
.timeline li.failed .t-dot { background: var(--color-danger); }
.t-label { font-size: 14px; font-weight: 500; }
.t-time { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); direction: ltr; }

/* ─── Badge ─── */
.badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.badge-success { background: rgba(16,185,129,.14); color: #059669; }
.badge-warning { background: rgba(245,158,11,.14); color: #B45309; }
.badge-danger { background: rgba(239,68,68,.12); color: #DC2626; }
.badge-muted { background: var(--bg-input); color: var(--text-muted); }
[data-theme="dark"] .badge-success { color: #34D399; }
[data-theme="dark"] .badge-warning { color: #FBBF24; }
[data-theme="dark"] .badge-danger { color: #F87171; }

/* ─── خشتەکان ─── */
.rates-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rates-table th { text-align: right; color: var(--text-muted); font-weight: 500; padding: 8px 6px; border-bottom: 1px solid var(--border-strong); }
[dir=ltr] .rates-table th { text-align: left; }
.rates-table td { padding: 9px 6px; border-bottom: 1px solid var(--border); }
.rates-table tr:last-child td { border-bottom: none; }
.rates-table .fee { color: var(--color-money); font-weight: 700; font-family: var(--font-mono); direction: ltr; }
.rates-table .minmax { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); direction: ltr; }

/* ─── بەشەکان ─── */
.section-title { font-size: 18px; font-weight: 700; margin: 32px 0 14px; }
.how-step { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
.how-num {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px;
  background: linear-gradient(135deg, var(--color-brand-100), #EDE9FE);
  color: var(--color-brand-900);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
  transition: transform .25s;
}
[data-theme="dark"] .how-num { background: linear-gradient(135deg, #1E3A8A, #3730A3); color: #DBEAFE; }
.how-step:hover .how-num { transform: scale(1.12) rotate(-4deg); }
details {
  border: 1px solid var(--border); border-radius: var(--radius-btn);
  padding: 11px 15px; margin-bottom: 8px; background: var(--bg-card);
  backdrop-filter: blur(10px); transition: border-color .2s;
}
details:hover { border-color: var(--color-brand-400); }
details summary { cursor: pointer; font-weight: 500; font-size: 14px; }
details p { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); }

/* ─── شوێنکەوتن ─── */
.track-box { display: flex; gap: 8px; }
.track-box input { flex: 1; }
.track-box .btn { width: auto; }

/* ─── ئەپڵۆد ─── */
.upload-zone {
  border: 2px dashed var(--border-strong); border-radius: var(--radius-card);
  padding: 22px; text-align: center; cursor: pointer; color: var(--text-muted); font-size: 13px;
  background: var(--bg-input);
  transition: border-color .25s, background .25s, transform .2s;
}
.upload-zone:hover { border-color: var(--color-brand-400); transform: scale(1.01); }
.upload-zone img { max-width: 100%; max-height: 220px; border-radius: 10px; }

/* ─── ئامار ─── */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.stat {
  background: var(--bg-card); backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 16px 10px; text-align: center;
  box-shadow: var(--shadow-card); transition: transform .25s, box-shadow .25s;
  animation: fadeUp .5s both;
}
.stat:nth-child(2) { animation-delay: .1s; } .stat:nth-child(3) { animation-delay: .2s; }
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.stat .num { font-size: 21px; font-weight: 700; color: var(--color-brand-800); font-family: var(--font-mono); }
[data-theme="dark"] .stat .num { color: var(--color-brand-400); }
.stat .lbl { font-size: 11px; color: var(--text-muted); }

/* ─── Footer ─── */
.site-footer {
  border-top: 1px solid var(--border); padding: 26px 16px; text-align: center;
  font-size: 13px; color: var(--text-muted);
  background: var(--bg-card); backdrop-filter: blur(12px); margin-top: 40px;
}
.site-footer a { color: var(--color-brand-600); text-decoration: none; margin: 0 8px; transition: opacity .2s; }
[data-theme="dark"] .site-footer a { color: var(--color-brand-400); }
.site-footer a:hover { opacity: .7; }

/* ─── ئاگاداری ─── */
.alert { padding: 11px 14px; border-radius: var(--radius-btn); font-size: 13px; margin-bottom: 12px; animation: fadeUp .4s both; }
.alert-warning { background: rgba(245,158,11,.1); color: #B45309; border: 1px solid rgba(245,158,11,.3); }
.alert-danger { background: rgba(239,68,68,.08); color: #DC2626; border: 1px solid rgba(239,68,68,.25); }
.alert-success { background: rgba(16,185,129,.1); color: #059669; border: 1px solid rgba(16,185,129,.3); }
[data-theme="dark"] .alert-warning { color: #FBBF24; }
[data-theme="dark"] .alert-danger { color: #F87171; }
[data-theme="dark"] .alert-success { color: #34D399; }

.hidden { display: none !important; }

/* ─── مۆبایلی بچووک — هێدەری پاکتر ─── */
@media (max-width: 480px) {
  .brand { font-size: 15px; gap: 8px; }
  .brand small { display: none; }
  .logo { width: 34px; height: 34px; }
  .logo svg { width: 24px; height: 24px; }
  .service-badge { font-size: 10px; padding: 3px 8px; max-width: 130px; }
  .site-header .inner { padding: 8px 12px; gap: 6px; }
  .theme-toggle { width: 32px; height: 32px; font-size: 14px; }
  .header-icon { font-size: 17px; }
  .hero h1 { font-size: 23px; }
}