:root{
  --bg1:#0b1220;
  --bg2:#081023;
  --glass:rgba(255,255,255,.08);
  --glass2:rgba(255,255,255,.12);
  --stroke:rgba(255,255,255,.16);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.66);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --radius2: 22px;
  --accent: rgba(99, 102, 241, .95);
  --accent2: rgba(56, 189, 248, .92);
  --danger: rgba(244, 63, 94, .95);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(56,189,248,.22), transparent 55%),
    radial-gradient(800px 500px at 80% 20%, rgba(99,102,241,.26), transparent 55%),
    radial-gradient(700px 500px at 30% 80%, rgba(244,63,94,.18), transparent 60%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  font-family: "Vazirmatn", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans Arabic", "Tahoma";
  line-height:1.75;
}

a{color:inherit}
.container{width:min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 18px 0;}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; letter-spacing:.02em}
.glass{
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  border-radius: var(--radius2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav{position:sticky; top:0; z-index:20; padding: 10px 0; background: rgba(5,10,20,.35); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap: 14px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700}
.brand-dot{width:10px;height:10px;border-radius:999px;background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 0 22px rgba(56,189,248,.35);}
.nav-links{display:flex; gap: 10px; flex-wrap:wrap}
.nav-link{padding:10px 12px; border-radius: 999px; text-decoration:none; color:var(--muted); border:1px solid transparent}
.nav-link:hover{color:var(--text); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06)}
.nav-link-ghost{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color:var(--text)}

.footer{padding: 22px 0; margin-top: 18px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.12);}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap:wrap}

.hero{padding: 28px; margin-top: 18px}
.hero-title{font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight:800; letter-spacing:-.01em}
.hero-sub{margin-top: 6px; color:var(--muted)}
.hero-actions{margin-top: 16px; display:flex; gap: 10px; flex-wrap:wrap}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(90deg, rgba(99,102,241,.9), rgba(56,189,248,.85));
  color: white;
  cursor:pointer;
  text-decoration:none;
  font-weight:700;
  box-shadow: 0 10px 30px rgba(56,189,248,.18);
  transition: transform .08s ease, filter .08s ease;
}
.btn:hover{filter: brightness(1.05)}
.btn:active{transform: translateY(1px)}
.btn-ghost{
  background: rgba(255,255,255,.06);
  color: var(--text);
  box-shadow: none;
}
.btn-danger{background: linear-gradient(90deg, rgba(244,63,94,.95), rgba(251,113,133,.9)); border-color: rgba(255,255,255,.12)}
.btn-lg{padding: 12px 16px; font-size:1rem}
.btn-sm{padding: 8px 10px; font-size:.92rem}

.section{margin-top: 18px}
.section-title{font-size:1.1rem; font-weight:800; margin: 0 0 10px 0}
.section-head{display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap:wrap}

.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px}
@media (max-width: 980px){ .grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .grid{grid-template-columns: 1fr;} }

.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
@media (max-width: 860px){ .grid-3{grid-template-columns: 1fr;} .grid-2{grid-template-columns:1fr;} }

.card{padding: 14px}
.card-link{display:block}
.card-media{height: 160px; border-radius: 14px; overflow:hidden; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05)}
.card-media img{width:100%; height:100%; object-fit:cover; display:block}
.placeholder{height:100%; display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,.5)}
.card-body{padding-top: 12px}
.card-title{font-weight:800}
.card-desc{color:var(--muted); margin-top: 4px}
.card-meta{margin-top: 10px; display:flex; align-items:center; gap: 10px; flex-wrap:wrap}

.pill{display:inline-flex; align-items:center; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--text); font-weight:700; font-size:.9rem}
.pill-pending{background: rgba(255,255,255,.06)}
.pill-approved{background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.22)}
.pill-rejected{background: rgba(244,63,94,.18); border-color: rgba(244,63,94,.22)}

.breadcrumbs{margin-top: 14px; display:flex; gap: 8px; align-items:center; flex-wrap:wrap}
.breadcrumbs a{color:var(--muted); text-decoration:none}
.breadcrumbs a:hover{color:var(--text)}

.product{margin-top: 12px; display:grid; grid-template-columns: 420px 1fr; gap: 18px; padding: 18px}
@media (max-width: 920px){ .product{grid-template-columns: 1fr;} }
.product-media{border-radius: 16px; overflow:hidden; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); min-height: 240px}
.product-media img{width:100%; height:100%; object-fit:cover; display:block}
.product-title{margin:0 0 8px 0; font-weight:900; letter-spacing:-.02em}
.product-short{margin:0; color:var(--muted)}
.product-actions{margin-top: 14px; display:flex; gap: 10px; flex-wrap:wrap}

.divider{height:1px; background: rgba(255,255,255,.10); margin: 16px 0}
.block-title{font-weight:900; margin-bottom: 10px}
.prose{color: rgba(255,255,255,.88)}
.price-row{margin-top: 10px; display:flex; align-items:center; gap: 10px}
.price{font-weight:900; font-size:1.1rem}

.pay-grid{margin-top: 14px; padding: 18px; display:grid; grid-template-columns: 1fr 1fr; gap: 16px}
@media (max-width: 860px){ .pay-grid{grid-template-columns: 1fr;} }
.pay-row{display:flex; justify-content:space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,.10)}
.pay-row:last-child{border-bottom:0}
.pay-actions{margin: 10px 0}
.hint{margin-top: 10px; padding: 10px 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; color: var(--muted)}

.form{display:grid; gap: 12px}
.field{display:grid; gap: 6px}
input, textarea, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline:none;
}
textarea{resize:vertical}
input:focus, textarea:focus, select:focus{border-color: rgba(56,189,248,.35); box-shadow: 0 0 0 4px rgba(56,189,248,.12)}
.checkbox{display:flex; align-items:center; gap: 10px}
.checkbox input{width:auto}

.form-inline{display:flex; gap: 10px; flex-wrap:wrap; align-items:center}
.form-inline input{flex:1; min-width: 220px}
.form-actions{display:flex; gap: 10px; flex-wrap:wrap; align-items:center}

.alert{padding: 12px 14px; border-radius: 16px; margin-top: 12px}
.alert-error{background: rgba(244,63,94,.16); border: 1px solid rgba(244,63,94,.22)}
.alert-ok{background: rgba(34,197,94,.16); border: 1px solid rgba(34,197,94,.22)}

.success{margin-top: 16px; padding: 24px; text-align:center}
.success-icon{width:64px;height:64px;border-radius: 999px; display:inline-flex; align-items:center; justify-content:center;
  background: rgba(34,197,94,.18); border: 1px solid rgba(34,197,94,.25); font-size:1.8rem; margin-bottom: 10px}
.success-title{margin:0}
.success-sub{margin:6px 0 0 0; color: var(--muted)}
.tracking-box{margin-top: 14px; padding: 14px}
.tracking-code{font-size: 1.4rem; font-weight:900; margin-top: 6px}
.tracking-actions{margin-top: 10px; display:flex; gap: 10px; justify-content:center; flex-wrap:wrap}

.table{overflow:auto; padding: 10px}
.tr{display:grid; grid-template-columns: 1fr 2fr 1fr 1fr 1fr 1fr; gap: 12px; padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,.08); align-items:center; min-width: 820px}
.tr.th{font-weight:900; color: rgba(255,255,255,.85)}
.tr:last-child{border-bottom:0}

.stat{padding: 18px; display:grid; gap: 8px}
.stat-num{font-size: 1.8rem; font-weight: 900}

.auth{display:flex; align-items:center; justify-content:center; min-height: calc(100vh - 120px)}
.auth-card{padding: 20px; width: min(460px, 100%);}

.inline{display:inline-flex; gap: 8px; align-items:center; flex-wrap:wrap}
.select{padding: 10px 12px; border-radius: 14px}



/* --- Fixes & UX improvements --- */
:root{ --font-fa: Vazirmatn, Vazir, IRANSans, Shabnam, Tahoma, Arial, sans-serif; }
html, body { font-family: var(--font-fa); }

/* Nav mobile */
.nav-toggle{ display:none; background:transparent; border:0; width:44px; height:44px; border-radius:14px; }
.nav-toggle span{ display:block; height:2px; margin:7px 10px; background:rgba(255,255,255,.85); border-radius:2px; }
@media (max-width: 980px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .nav-links{ position:absolute; top:64px; left:16px; right:16px; display:none; padding:14px; border-radius:18px; }
  .nav-links.open{ display:flex; flex-direction:column; gap:10px; }
}

/* Product card footer & buy button */
.card-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.card-footer .price{ font-weight:700; opacity:.9; }
.card-footer .btn{ pointer-events:auto; }

/* Pay page readability */
.mono{ letter-spacing: .5px; }
#cardNumber{ font-size: 18px; font-weight: 800; }

/* Pay grid responsive */
@media (max-width: 900px){
  .pay-grid{ display:flex !important; flex-direction:column; }
}

/* Track form responsive */
.form-inline{ display:flex; gap:10px; align-items:center; }
@media (max-width: 980px){
  .form-inline{ flex-direction:column; align-items:stretch; }
  .form-inline .btn{ width:100%; }
}

/* Toast */
.toast{ position:fixed; left:16px; right:16px; bottom:18px; margin:0 auto; max-width:420px;
  padding:12px 14px; border-radius:16px; background:rgba(0,0,0,.55); color:#fff;
  opacity:0; transform:translateY(12px); transition:all .25s ease; text-align:center; z-index:9999; }
.toast.show{ opacity:1; transform:translateY(0); }

.ltr{direction:ltr;text-align:left;}
.product-link-row{display:none;}

.product-card a{text-decoration:none !important;}

.faq-item{margin-top:10px;border-radius:16px;padding:10px 14px;background:rgba(255,255,255,.06);} .faq-item summary{cursor:pointer;list-style:none;font-weight:700;} .faq-item summary::-webkit-details-marker{display:none;} .faq-body{margin-top:8px;line-height:1.9;color:rgba(255,255,255,.82);} 


/* --- Fixes v1.0.2 --- */
a{ text-decoration:none; color:inherit; }
.card-link{ text-decoration:none; color:inherit; }
.card-title, .card-desc{ text-decoration:none; }
input, textarea, select, button{ font-family: inherit; }

/* Track page nicer */
.track-wrap{ display:flex; gap:18px; align-items:flex-start; }
.track-form{ flex:0 0 360px; max-width:100%; }
.track-result{ flex:1; min-width:0; }
@media (max-width: 900px){ .track-wrap{ flex-direction:column; } .track-form{ width:100%; } }

/* Pay page: ensure card number visible */
#cardNumber{ font-size:18px; font-weight:700; letter-spacing:.5px; }
.pay-actions{ margin:10px 0 14px; }

/* Product FAQ accordion spacing */
.faq-item summary{ cursor:pointer; }


/* Link underline cleanup */
a, .nav a, .card a { text-decoration: none; }

/* Ensure inputs use Vazirmatn */
input, textarea, select, button { font-family: var(--font-fa); }