@font-face { font-family: 'Vazir'; src: url('./fonts/Vazir-Light.woff2') format('woff2'), url('./fonts/Vazir-Light.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Vazir'; src: url('./fonts/Vazir-Medium.woff2') format('woff2'), url('./fonts/Vazir-Medium.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Vazir'; src: url('./fonts/Vazir-Bold.woff2') format('woff2'), url('./fonts/Vazir-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }

:root{
  --bg:#0f0a1a;
  --bg-soft:#150e24;
  --surface:#1b1430;
  --surface-2:#231a3d;
  --border:rgba(255,255,255,.07);
  --border-soft:rgba(255,255,255,.04);
  --text:#f4f1fb;
  --text-dim:#b6adcf;
  --muted:#7d7398;
  --violet-500:#8b5cf6;
  --violet-600:#7c3aed;
  --violet-700:#6425d0;
  --violet-900:#2e1065;
  --pink-500:#c026d3;
  --accent-rgb:139,92,246;
  --accent2-rgb:192,38,211;
  --wallet-grad:linear-gradient(135deg,#7c3aed 0%, #5b21b6 55%, #3b0f8a 100%);
  --wallet-shadow-rgb:124,58,237;
  --bg-glow-1-rgb:124,58,237;
  --bg-glow-2-rgb:192,38,211;
  --btn-solid-color:#5b21b6;
  --success:#2fd480;
  --success-bg:rgba(47,212,128,.12);
  --danger:#fb4d6a;
  --danger-bg:rgba(251,77,106,.12);
  --warning:#f6b53f;
  --warning-bg:rgba(246,181,63,.12);
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --nav-h:76px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Themes ---------- */
body[data-theme="orange"]{
  --violet-500:#ff7a45;
  --violet-600:#f2540c;
  --violet-700:#c2410c;
  --violet-900:#7c2d12;
  --pink-500:#ff3d3d;
  --accent-rgb:255,122,69;
  --accent2-rgb:255,61,61;
  --wallet-grad:linear-gradient(135deg,#ff6a3d 0%, #d21f1f 55%, #7c1414 100%);
  --wallet-shadow-rgb:255,61,61;
  --bg-glow-1-rgb:255,61,61;
  --bg-glow-2-rgb:255,122,69;
  --btn-solid-color:#b91c1c;
}
body[data-theme="green"]{
  --violet-500:#22c55e;
  --violet-600:#16a34a;
  --violet-700:#15803d;
  --violet-900:#14532d;
  --pink-500:#0ea5a4;
  --accent-rgb:34,197,94;
  --accent2-rgb:14,165,164;
  --wallet-grad:linear-gradient(135deg,#22c55e 0%, #15803d 55%, #06301f 100%);
  --wallet-shadow-rgb:34,197,94;
  --bg-glow-1-rgb:34,197,94;
  --bg-glow-2-rgb:14,165,164;
  --btn-solid-color:#166534;
}

*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Vazir', Tahoma, sans-serif;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(var(--bg-glow-1-rgb),.35), transparent 60%),
    radial-gradient(700px 500px at 110% 10%, rgba(var(--bg-glow-2-rgb),.18), transparent 55%),
    var(--bg);
  color:var(--text);
  min-height:100%;
  overscroll-behavior-y:none;
  transition:background .35s ease;
}
button{font-family:inherit;}
a{color:inherit; text-decoration:none;}

#app{max-width:480px; margin:0 auto; min-height:100vh; position:relative; padding-bottom:calc(var(--nav-h) + var(--safe-bottom) + 14px);}

/* ---------- Boot screen ---------- */
.boot{position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:var(--bg); z-index:999;}
.boot-mark{width:64px; height:64px; border-radius:20px; background:linear-gradient(135deg,var(--violet-500),var(--pink-500)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:28px; box-shadow:0 10px 40px rgba(var(--bg-glow-1-rgb),.45);}
.boot-bar{width:140px; height:4px; border-radius:4px; background:var(--surface-2); overflow:hidden;}
.boot-bar span{display:block; width:40%; height:100%; background:linear-gradient(90deg,var(--violet-500),var(--pink-500)); animation:load 1.1s ease-in-out infinite;}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
.boot-label{color:var(--text-dim); font-size:13px;}

/* ---------- Top bar ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:calc(16px + var(--safe-top)) 18px 8px;}
.hello{display:flex; flex-direction:column; gap:2px;}
.hello .eyebrow{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:4px;}
.hello .name{font-size:16px; font-weight:700;}
.topbar-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{width:40px; height:40px; border-radius:14px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-dim); cursor:pointer; position:relative;}
.icon-btn:active{transform:scale(.94);}
.avatar{width:40px; height:40px; border-radius:14px; background:linear-gradient(135deg,var(--violet-500),var(--pink-500)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff;}
.dot-badge{position:absolute; top:-3px; left:-3px; width:9px; height:9px; border-radius:50%; background:var(--danger); border:2px solid var(--bg);}

/* ---------- Page container ---------- */
.page{padding:6px 18px 10px; animation:fadein .25s ease;}
@keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.section-title{display:flex; align-items:center; justify-content:space-between; margin:22px 2px 12px;}
.section-title h3{font-size:15px; font-weight:700; margin:0; display:flex; align-items:center; gap:8px;}
.section-title h3::before{content:""; width:3px; height:14px; border-radius:3px; background:linear-gradient(180deg,var(--violet-500),var(--pink-500));}
.section-title .link{font-size:12.5px; color:var(--violet-500); cursor:pointer;}

/* ---------- Theme switcher ---------- */
.theme-row{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin:4px 2px 16px; font-size:12px; color:var(--text-dim);}
.theme-dots{display:flex; gap:9px;}
.theme-dot{width:22px; height:22px; border-radius:50%; cursor:pointer; box-shadow:0 0 0 1px rgba(255,255,255,.1); transition:transform .15s ease, box-shadow .15s ease;}
.theme-dot:active{transform:scale(.88);}
.theme-dot.active{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px #fff;}

/* ---------- Wallet card ---------- */
.wallet-card{
  position:relative; overflow:hidden;
  border-radius:26px; padding:22px;
  background:var(--wallet-grad);
  box-shadow:0 20px 45px -18px rgba(var(--wallet-shadow-rgb),.65);
  transition:background .35s ease, box-shadow .35s ease;
}
.wallet-card::before{content:""; position:absolute; width:220px; height:220px; border-radius:50%; border:1px solid rgba(255,255,255,.12); top:-90px; right:-70px;}
.wallet-card::after{content:""; position:absolute; width:150px; height:150px; border-radius:50%; border:1px solid rgba(255,255,255,.1); top:-40px; right:-10px;}
.wallet-top{display:flex; align-items:center; gap:6px; font-size:12.5px; color:rgba(255,255,255,.75); position:relative; z-index:1;}
.wallet-top .live{width:6px; height:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.25);}
.wallet-amount{position:relative; z-index:1; margin-top:10px; display:flex; align-items:baseline; gap:6px;}
.wallet-amount b{font-size:32px; font-weight:700; letter-spacing:.3px;}
.wallet-amount span{font-size:13px; color:rgba(255,255,255,.7);}
.wallet-actions{position:relative; z-index:1; display:flex; gap:10px; margin-top:20px;}
.btn{border:none; border-radius:14px; padding:12px 16px; font-size:13.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;}
.btn:active{transform:scale(.97);}
.btn-ghost{background:rgba(255,255,255,.12); color:#fff; backdrop-filter:blur(6px);}
.btn-solid{background:#fff; color:var(--btn-solid-color); flex:1;}
.btn-primary{background:linear-gradient(135deg,var(--violet-500),var(--pink-500)); color:#fff;}
.btn-block{width:100%;}
.btn-outline{background:transparent; border:1px solid var(--border); color:var(--text);}
.btn-lg{padding:15px 18px; font-size:14.5px; border-radius:16px;}
.btn:disabled{opacity:.5; pointer-events:none;}

/* ---------- Quick access ---------- */
.quick-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px;}
.quick-item{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px 6px; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; text-align:center;}
.quick-item:active{transform:scale(.95); background:var(--surface-2);}
.quick-item .ic{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(139,92,246,.14); color:var(--violet-500);}
.quick-item span{font-size:11px; color:var(--text-dim); line-height:1.3;}

/* ---------- Support ---------- */
.support-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px; margin-bottom:12px; display:flex; align-items:center; gap:14px; cursor:pointer;}
.support-card:active{transform:scale(.98); background:var(--surface-2);}
.support-card .ic{width:46px; height:46px; border-radius:14px; background:rgba(var(--accent-rgb),.14); color:var(--violet-500); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.support-card .body{flex:1; min-width:0;}
.support-card .body b{display:block; font-size:13.5px; font-weight:700; margin-bottom:3px;}
.support-card .body span{font-size:11.5px; color:var(--muted);}

/* ---------- Service list ---------- */
.svc-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:14px; margin-bottom:10px; display:flex; align-items:center; gap:12px; cursor:pointer;}
.svc-card:active{background:var(--surface-2);}
.svc-ic{width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--success-bg); color:var(--success);}
.svc-ic.off{background:var(--danger-bg); color:var(--danger);}
.svc-body{flex:1; min-width:0;}
.svc-row1{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.svc-name{font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pill{font-size:10.5px; padding:3px 9px; border-radius:20px; font-weight:600; white-space:nowrap;}
.pill-on{background:var(--success-bg); color:var(--success);}
.pill-off{background:var(--danger-bg); color:var(--danger);}
.pill-warn{background:var(--warning-bg); color:var(--warning);}
.svc-meta{font-size:11.5px; color:var(--muted); margin-top:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.progress{height:4px; border-radius:4px; background:var(--border); margin-top:9px; overflow:hidden;}
.progress span{display:block; height:100%; background:linear-gradient(90deg,var(--violet-500),var(--pink-500));}
.svc-head-row{display:flex; align-items:center; justify-content:space-between; gap:8px;}

/* ---------- Empty state ---------- */
.empty{display:flex; flex-direction:column; align-items:center; text-align:center; padding:40px 18px; color:var(--muted);}
.empty .ic{width:64px; height:64px; border-radius:20px; background:var(--surface); display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--violet-500);}
.empty b{color:var(--text); font-size:14px; margin-bottom:4px;}
.empty p{font-size:12.5px; margin:0 0 16px; max-width:240px;}

/* ---------- Bottom nav ---------- */
.bottomnav{position:fixed; bottom:0; left:0; right:0; max-width:480px; margin:0 auto; background:rgba(21,14,36,.9); backdrop-filter:blur(16px); border-top:1px solid var(--border); display:flex; padding:10px 10px calc(10px + var(--safe-bottom)); z-index:50;}
.navitem{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:6px 0; cursor:pointer; color:var(--muted); font-size:10.5px;}
.navitem svg{width:21px; height:21px;}
.navitem.active{color:var(--violet-500);}
.navitem .navcirc{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;}
.navitem.active .navcirc{background:rgba(139,92,246,.15);}

/* ---------- Header w/ back ---------- */
.pageheader{display:flex; align-items:center; gap:12px; padding:calc(16px + var(--safe-top)) 18px 4px;}
.pageheader h2{font-size:17px; font-weight:700; margin:0;}
.back-btn{width:38px; height:38px; border-radius:13px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text);}
.back-btn:active{transform:scale(.93);}

/* ---------- Stepper (buy flow) ---------- */
.stepper{display:flex; align-items:center; justify-content:space-between; padding:6px 18px 18px; overflow-x:auto; gap:2px;}
.step{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:52px; flex-shrink:0;}
.step .circ{width:26px; height:26px; border-radius:50%; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--muted); font-weight:700;}
.step.done .circ{background:var(--success); border-color:var(--success); color:#04160c;}
.step.active .circ{background:linear-gradient(135deg,var(--violet-500),var(--pink-500)); border-color:transparent; color:#fff;}
.step span{font-size:9.5px; color:var(--muted); text-align:center;}
.step.active span{color:var(--text);}
.step-line{flex:1; height:1px; background:var(--border); margin:0 -4px; min-width:10px;}

/* ---------- Option cards (country/category/time/service select) ---------- */
.opt-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:15px; margin-bottom:10px; display:flex; align-items:center; gap:12px; cursor:pointer;}
.opt-card.selected{border-color:var(--violet-500); background:rgba(139,92,246,.08);}
.opt-card:active{transform:scale(.98);}
.opt-ic{width:40px; height:40px; border-radius:12px; background:rgba(139,92,246,.14); color:var(--violet-500); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.opt-body{flex:1; min-width:0;}
.opt-title{font-size:13.5px; font-weight:700;}
.opt-sub{font-size:11.5px; color:var(--muted); margin-top:3px;}
.opt-price{font-size:12.5px; font-weight:700; color:var(--violet-500); white-space:nowrap;}
.opt-check{width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border); flex-shrink:0;}
.opt-card.selected .opt-check{border-color:var(--violet-500); background:var(--violet-500); position:relative;}
.opt-card.selected .opt-check::after{content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff;}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.chip-row{display:flex; gap:8px; flex-wrap:wrap;}
.chip{padding:9px 14px; border-radius:20px; background:var(--surface); border:1px solid var(--border); font-size:12.5px; color:var(--text-dim); cursor:pointer;}
.chip.active{background:linear-gradient(135deg,var(--violet-500),var(--pink-500)); color:#fff; border-color:transparent;}

.field-label{font-size:12px; color:var(--muted); margin:0 2px 8px;}
input[type=text],input[type=number]{width:100%; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:13px 14px; color:var(--text); font-family:inherit; font-size:13.5px; outline:none;}
input:focus{border-color:var(--violet-500);}
input.input-error{border-color:var(--danger);}

/* ---------- Summary rows ---------- */
.summary-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px; margin-bottom:14px;}
.summary-row{display:flex; align-items:center; justify-content:space-between; padding:9px 0; font-size:13px; border-bottom:1px solid var(--border-soft);}
.summary-row:last-child{border-bottom:none;}
.summary-row .k{color:var(--muted);}
.summary-row .v{font-weight:600;}
.summary-row.total .v{color:var(--violet-500); font-size:16px; font-weight:700;}

/* ---------- Sticky footer for wizard ---------- */
.confirm-actions{display:flex; gap:10px; margin-top:22px;}

/* ---------- Custom service (سرویس دلخواه) ---------- */
.custom-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:18px; margin-bottom:14px;}
.custom-row{margin-bottom:20px;}
.custom-label{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-dim); margin-bottom:12px;}
.custom-label b{font-size:14px; color:var(--text); font-weight:700;}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; background:var(--surface-2); outline:none; cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,var(--violet-500),var(--pink-500)); cursor:pointer; box-shadow:0 2px 10px rgba(139,92,246,.55);}
input[type=range]::-moz-range-thumb{width:20px; height:20px; border-radius:50%; border:none; background:linear-gradient(135deg,var(--violet-500),var(--pink-500)); cursor:pointer; box-shadow:0 2px 10px rgba(139,92,246,.55);}
.custom-price-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0 16px; border-top:1px solid var(--border-soft); margin-bottom:14px;}
.custom-price-row span{font-size:13px; color:var(--muted);}
.custom-price-row b{font-size:16px; color:var(--violet-500); font-weight:700;}

/* ---------- Success screen ---------- */
.success-wrap{display:flex; flex-direction:column; align-items:center; text-align:center; padding:50px 20px 20px;}
.success-badge{width:84px; height:84px; border-radius:50%; background:var(--success-bg); display:flex; align-items:center; justify-content:center; color:var(--success); margin-bottom:20px;}
.success-wrap h2{margin:0 0 6px; font-size:19px;}
.success-wrap p{color:var(--muted); font-size:13px; margin:0 0 24px;}

/* ---------- Account ---------- */
.profile-card{background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:20px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;}
.profile-avatar{width:72px; height:72px; border-radius:22px; background:linear-gradient(135deg,var(--violet-500),var(--pink-500)); display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700;}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;}
.stat-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px; text-align:center;}
.stat-card b{display:block; font-size:18px; margin-bottom:4px;}
.stat-card span{font-size:11px; color:var(--muted);}
.list-row{display:flex; align-items:center; justify-content:space-between; padding:14px 4px; border-bottom:1px solid var(--border-soft); font-size:13px;}
.list-row .k{color:var(--text-dim); display:flex; align-items:center; gap:8px;}
.list-row .v{font-weight:600;}
.copy-row{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px dashed var(--border); border-radius:14px; padding:12px 14px; margin-top:6px;}
.copy-row code{flex:1; font-size:13px; letter-spacing:1px; color:var(--violet-500);}

/* ---------- Skeleton ---------- */
.skel{background:linear-gradient(90deg,var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:14px;}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- Toast ---------- */
.toast{position:fixed; bottom:calc(var(--nav-h) + 20px); left:50%; transform:translateX(-50%); background:#231a3d; border:1px solid var(--border); color:var(--text); padding:11px 18px; border-radius:14px; font-size:12.5px; z-index:200; box-shadow:0 10px 30px rgba(0,0,0,.4); animation:toastin .25s ease;}
@keyframes toastin{from{opacity:0; transform:translate(-50%,10px);}to{opacity:1; transform:translate(-50%,0);}}

.hidden{display:none !important;}
.mt-0{margin-top:0;}
::-webkit-scrollbar{display:none;}
