/* ===========================
   AZOT Tracker v3 (RTL, 2-column, premium)
   =========================== */

.azot.azot-v3{
  --azot-primary:#ef2b50;
  --azot-accent:#ff6b86;
  --azot-line:#e5e7eb;
  --azot-soft:#f8fafc;
  --azot-radius:24px;
  --azot-base:16px;

  --ink:#0f172a;
  --muted:#64748b;
  --shadow: 0 18px 55px rgba(2,6,23,.08);
  --shadow2: 0 12px 30px rgba(2,6,23,.06);

  --glass: rgba(255,255,255,.72);
  --glass2: rgba(255,255,255,.55);

  font-family: Vazir, IRANSans, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--azot-base);
  line-height: 1.75;
  direction: rtl;
  color: var(--ink);

  /* ✅ subtle entrance */
  animation: azotFadeUp .45s ease-out both;
}
@keyframes azotFadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

.azot.azot-v3 *{ box-sizing:border-box; }
.azot-shell{ padding: 8px 0; }

/* grid */
.azot-grid{
      max-width: 1380px !important;
    width: 100%;
    margin: 18px auto;
    display: flex;
    grid-template-columns: 1.25fr .95fr;
    gap: 14px;
    align-items: center;
    justify-content: center;
}

/* Panels */
.azot-pane{
  border-radius: calc(var(--azot-radius) + 6px);
  border: 1px solid var(--azot-line);
  background: #fff;
  box-shadow: var(--shadow);
  overflow:hidden;
  position: relative;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
}
.azot-pane:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--azot-primary) 16%, var(--azot-line));
  box-shadow: 0 26px 80px rgba(2,6,23,.10);
}
/* ✅ subtle glow */
.azot-pane:hover::after{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(420px 240px at 35% 10%,
    color-mix(in srgb, var(--azot-primary) 18%, transparent),
    transparent 65%);
  pointer-events:none;
  opacity:.9;
}

/* Right form pane */
.azot-pane--form{
  background:
    radial-gradient(900px 320px at 20% -10%, color-mix(in srgb, var(--azot-primary) 14%, transparent), transparent 65%),
    radial-gradient(800px 320px at 80% 0%, color-mix(in srgb, var(--azot-accent) 10%, transparent), transparent 60%),
    #fff;
}

/* Top header */
.azot-top{
  padding: 18px 18px 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--azot-primary) 9%, #fff),
    color-mix(in srgb, var(--azot-accent) 6%, #fff)
  );
  border-bottom: 1px solid color-mix(in srgb, var(--azot-primary) 14%, var(--azot-line));
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.azot-titleRow{ display:flex; align-items:flex-start; gap:12px; }
.azot-title{ margin:0; font-size: 20px; font-weight: 950; }
.azot-sub{ margin-top: 6px; color: var(--muted); font-weight: 800; font-size: 13px; }

/* Mark */
.azot-mark{
  width:44px; height:44px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--azot-primary), var(--azot-accent));
  display:grid; place-items:center;
  position:relative;
  box-shadow: 0 16px 32px color-mix(in srgb, var(--azot-primary) 26%, transparent);
  overflow:hidden;
}
.azot-markDot{
  width:12px; height:12px; border-radius:999px;
  background:#fff;
  box-shadow:0 0 0 6px rgba(255,255,255,.28);
}
.azot-markRing{
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), transparent 55%);
  transform: rotate(18deg);
}

/* Live */
.azot-live{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.azot-liveBadge{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 950;
  color:#fff;
  background: linear-gradient(135deg, var(--azot-primary), var(--azot-accent));
  box-shadow: 0 14px 28px color-mix(in srgb, var(--azot-primary) 28%, transparent);
}
.azot-livePulse{
  width: 10px; height: 10px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 6px rgba(34,197,94,.14);
  animation: azotPulse 1.2s ease-in-out infinite;
}
@keyframes azotPulse{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.25); opacity: .75; }
}

/* Form */
.azot-form{ margin:0; padding: 14px 18px 18px; }
.azot-label{
  display:block;
  font-weight: 900;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 13px;
}

.azot-inputWrap{ display:flex; flex-direction:column; gap:8px; }
.azot-input{
  display:grid;
  grid-template-columns: 44px 1fr auto;
  gap:10px;
  align-items:center;
  padding: 10px;
  border-radius: 20px;
  background: var(--azot-soft);
  border: 1px solid var(--azot-line);
  box-shadow: var(--shadow2);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.azot-input:focus-within{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--azot-primary) 28%, var(--azot-line));
  box-shadow: 0 20px 45px rgba(2,6,23,.08);
}
.azot-ico{
  width:44px; height:44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-weight: 950;
  color:#fff;
  background: linear-gradient(135deg, var(--azot-primary), var(--azot-accent));
}
.azot input[type="text"]{
  height:44px;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  font-family: Vazir;
  font-weight: 900;
  color: var(--ink);
  text-align:right;
}
.azot input::placeholder{
  color: rgba(100,116,139,.85);
  font-weight: 800;
}

.azot-btn{
  height:44px;
  border:0;
  cursor:pointer;
  border-radius: 16px;
  padding: 0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight: 950;
  font-family: Vazir;
  color:#fff !important;
  background: linear-gradient(135deg, var(--azot-primary), var(--azot-accent));
  box-shadow: 0 14px 28px color-mix(in srgb, var(--azot-primary) 24%, transparent);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.azot-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 18px 36px color-mix(in srgb, var(--azot-primary) 30%, transparent);
}
.azot-btn:active{ transform: translateY(0) scale(.99); }

.azot-btnSpin{
  width:16px; height:16px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  display:none;
  animation: azotSpin .8s linear infinite;
}
@keyframes azotSpin{ to{ transform: rotate(360deg);} }

.azot.is-busy .azot-btnSpin{ display:inline-block; }
.azot.is-busy .azot-btnTxt{ opacity:.9; }

.azot-hint{
  display:flex; align-items:center; gap:8px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 750;
  padding-inline: 4px;
}
.azot-hintIc{ filter: saturate(1.1); }

/* Busy */
.azot-busy{ margin-top: 12px; padding: 12px; border-radius: 18px; background:#fff;
  border: 1px dashed color-mix(in srgb, var(--azot-primary) 18%, var(--azot-line)); }
.azot-skel{ display:flex; gap:10px; margin-bottom:8px; }
.azot-skel span{
  height: 10px; border-radius:999px; flex:1;
  background: linear-gradient(90deg, rgba(148,163,184,.18), rgba(148,163,184,.35), rgba(148,163,184,.18));
  background-size: 200% 100%;
  animation: azotShimmer 1.15s ease-in-out infinite;
}
@keyframes azotShimmer{ 0%{background-position:0 0} 100%{background-position:200% 0} }
.azot-busyTxt{ color: var(--muted); font-weight: 900; font-size: 12.5px; }

/* Toast */
.azot-toast{ margin-top: 12px; padding: 12px; border-radius: 18px; border: 1px solid var(--azot-line);
  background: #fff; color: var(--muted); font-weight: 900; box-shadow: var(--shadow2); }
.azot-toast.is-error{
  border-color: color-mix(in srgb, var(--azot-primary) 20%, var(--azot-line));
  background: color-mix(in srgb, var(--azot-primary) 6%, #fff);
  color: var(--ink);
}

/* Result */
.azot-result{
  margin-top: 14px;
  padding: 14px;
  border-radius: calc(var(--azot-radius) + 2px);
  border: 1px solid var(--azot-line);
  background:#fff;
  box-shadow: var(--shadow2);
  animation: azotPop .22s ease-out;
}
@keyframes azotPop{
  from{ opacity:0; transform: translateY(6px) scale(.99); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.azot-summary{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.azot-sum{
  border-radius: 18px;
  border: 1px solid var(--azot-line);
  background: linear-gradient(180deg,#fff,#fbfcff);
  padding: 10px 12px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.azot-sum:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--azot-primary) 14%, var(--azot-line));
  box-shadow: 0 12px 26px rgba(2,6,23,.06);
}
.azot-sum .k{ color: var(--muted); font-weight: 900; font-size: 12px; }
.azot-sum .v{ margin-top: 6px; font-weight: 950; font-size: 15px; color: var(--ink); }

.azot-statusRow{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--azot-line);
  background: var(--azot-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.azot-statusRow .k{ color: var(--muted); font-weight: 950; }
.azot-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--azot-primary) 22%, var(--azot-line));
  background: color-mix(in srgb, var(--azot-primary) 8%, transparent);
  font-weight: 950;
}
.azot-pill .dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--azot-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--azot-primary) 18%, transparent);
}

/* Progress */
.azot-progress{ margin-top: 12px; padding: 12px; border-radius: 20px; border: 1px solid var(--azot-line); background:#fff; }
.azot-progress .bar{ height: 10px; border-radius: 999px; background: rgba(148,163,184,.20); overflow:hidden; }
.azot-progress .fill{ display:block; height:100%; border-radius:999px;
  background: linear-gradient(90deg, var(--azot-primary), var(--azot-accent));
  transition: width .55s cubic-bezier(.2,.9,.2,1); }
.azot-progress .steps{ margin-top: 12px; display:flex; justify-content:space-between; gap:10px; }
.azot-progress .steps span{
  width: 44px; height: 44px; border-radius: 16px;
  border: 1px solid var(--azot-line); background:#fff;
  display:grid; place-items:center; color: var(--muted); font-weight: 950;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.azot-progress .steps span:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(2,6,23,.08); }
.azot-progress .steps span i{ font-style: normal; font-size: 18px; }
.azot-progress .steps span.is-done{
  background: color-mix(in srgb, var(--azot-primary) 7%, #fff);
  border-color: color-mix(in srgb, var(--azot-primary) 14%, var(--azot-line));
  color: var(--azot-primary);
}
.azot-progress .steps span.is-current{
  background: linear-gradient(135deg, var(--azot-primary), var(--azot-accent));
  border-color: transparent;
  color:#fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--azot-primary) 22%, transparent);
}

/* ✅ steps-only mode */
.azot.azot-v3.azot-timeline-steps .azot-progress .bar{ display:none; }

/* Products */
.azot-products{ margin-top: 12px; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.azot-products .p{
  display:flex; gap:10px; align-items:center; padding: 10px 12px;
  border-radius: 18px; border: 1px solid var(--azot-line); background:#fff;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.azot-products .p:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--azot-primary) 14%, var(--azot-line));
  box-shadow: 0 12px 26px rgba(2,6,23,.07);
}
.azot-products .p img{
  width: 44px; height: 44px; border-radius: 14px;
  object-fit: cover;
  background: rgba(148,163,184,.14);
  border: 1px solid rgba(148,163,184,.18);
}
.azot-products .p .meta{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.azot-products .p .name{ font-weight: 950; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.azot-products .p .qty{ color: var(--muted); font-weight: 900; font-size: 12.5px; }

.azot-empty{
  margin-top: 12px;
  padding: 14px 12px;
  border-radius: 18px;
  border: 1px dashed color-mix(in srgb, var(--azot-primary) 18%, var(--azot-line));
  background:#fff;
  color: var(--muted);
  font-weight: 950;
}

/* LEFT Visual pane */
.azot-pane--visual{
  background:
    radial-gradient(850px 380px at 40% -10%, color-mix(in srgb, var(--azot-primary) 18%, transparent), transparent 60%),
    radial-gradient(850px 380px at 70% 10%, color-mix(in srgb, var(--azot-accent) 14%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.92));
}
.azot-visualCard{
  height:100%;
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 14px;
  position:relative;
}
.azot-visualTop{ margin-top: 4px; }
.azot-visualTag{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 950;
  color: var(--azot-primary);
  background: color-mix(in srgb, var(--azot-primary) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--azot-primary) 18%, var(--azot-line));
}
.azot-visualTitle{
  margin-top: 10px;
  font-weight: 950;
  font-size: 22px;
}
.azot-visualSub{
  margin-top: 6px;
  color: var(--muted);
  font-weight: 850;
  font-size: 13px;
}
.azot-visualArt{
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--azot-primary) 12%, var(--azot-line));
  background: var(--glass);
  box-shadow: var(--shadow2);
  overflow:hidden;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}
.azot-visualArt svg{ width:100%; height:auto; display:block; }
.azot-pane--visual:hover .azot-visualArt{
  transform: translateY(-2px);
  box-shadow: 0 22px 45px rgba(2,6,23,.10);
}

.azot-feats{
  margin-top: auto;
  display:grid;
  gap: 10px;
}
.azot-feat{
  display:flex; align-items:center; gap:10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.55);
  background: var(--glass2);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  backdrop-filter: blur(10px);
  transition: transform .16s ease, box-shadow .16s ease;
}
.azot-feat:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(2,6,23,.08);
}
.azot-feat .ic{
  width:44px; height:44px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--azot-primary), var(--azot-accent));
  color:#fff;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--azot-primary) 22%, transparent);
}
.azot-feat .t{ font-weight: 950; }
.azot-feat .d{ color: var(--muted); font-weight: 850; font-size: 12.5px; margin-top:2px; }

/* Responsive */
@media (max-width: 980px){
  .azot-grid{ grid-template-columns: 1fr; }
  .azot-pane--visual{ order: 2; }
  .azot-pane--form{ order: 1; }
  .azot-summary{ grid-template-columns: 1fr; }
  .azot-input{ grid-template-columns: 44px 1fr; }
  .azot-btn{ grid-column: 1 / -1; width:100%; }
  .azot-products{ grid-template-columns: 1fr; }
}