/* ── Topbar ── */
.topbar-user {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.link-orders {
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 14px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
  transition: background .2s, border-color .2s;
}
.link-orders:hover { background: var(--accent-bg); border-color: var(--accent); }

/* ── Banner actions ── */
.banner-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* ── Hero ── */
.hero { text-align:center; margin-bottom:40px; }
.hero-title {
  font-size:clamp(1.8rem, 4vw, 2.6rem); font-weight:800; line-height:1.3; margin-bottom:10px;
  background:linear-gradient(135deg, var(--accent) 0%, #A78BFA 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub { color:var(--text-secondary); font-size:1rem; font-weight:400; }

/* ── Description ── */
.description-wrap {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:16px; padding:24px;
  box-shadow:0 4px 24px var(--shadow); margin-bottom:28px;
  line-height:1.8; font-size:.92rem;
}
.description-wrap h2, .description-wrap h3 { color:var(--accent); margin:16px 0 8px; }
.description-wrap ul { padding-right:20px; }
.description-wrap li { margin-bottom:6px; }

/* ── Capacity ── */
.capacity-wrap {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:16px; padding:20px 24px;
  box-shadow:0 4px 24px var(--shadow); margin-bottom:28px;
}
.capacity-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.capacity-label  { font-weight:700; font-size:.95rem; }
.capacity-num    { font-size:.85rem; color:var(--text-secondary); }
.bar-bg  { background:var(--bg-elevated); border-radius:99px; height:10px; overflow:hidden; }
.bar-fill {
  height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
  background-size:200% 100%;
  animation:barShimmer 2.5s linear infinite, barGrow .9s cubic-bezier(.22,.68,0,1.2) both;
}

/* ── Payment card ── */
.payment-card {
  background:var(--accent-bg); border:1.5px solid var(--border);
  border-radius:16px; padding:24px; margin-bottom:28px;
}
.payment-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--border); font-size:.9rem;
}
.payment-row:last-child { border-bottom:none; }
.payment-row .key   { color:var(--text-secondary); }
.payment-row .value { font-weight:700; color:var(--text-primary); }
.amount { color:var(--accent); font-size:1.1rem; }

.card-num-wrap { display:flex; align-items:center; gap:10px; }
.card-num { letter-spacing:2px; font-family:monospace; font-size:1rem; }
.btn-copy {
  display:inline-flex; align-items:center; gap:5px; padding:5px 12px;
  border:1.5px solid var(--border); border-radius:8px;
  background:var(--bg-base); color:var(--accent);
  font-family:'Vazirmatn', sans-serif; font-size:.75rem; font-weight:600;
  cursor:pointer; transition:background .2s, border-color .2s, transform .15s; flex-shrink:0;
}
.btn-copy:hover { background:var(--accent-bg); border-color:var(--accent); transform:translateY(-1px); }
.btn-copy.copied { color:var(--success); border-color:var(--success); background:rgba(5,150,105,.08); }

.payment-hint { font-size:.85rem; color:var(--text-secondary); margin-bottom:18px; }

/* ── File upload ── */
.file-area {
  border:2px dashed var(--border); border-radius:12px; padding:28px;
  text-align:center; cursor:pointer; background:var(--bg-base);
  transition:border-color .2s, background .2s, transform .2s; position:relative;
}
.file-area:hover, .file-area.drag-over { border-color:var(--accent); background:var(--accent-bg); transform:scale(1.01); }
.file-area input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.file-icon  { font-size:2rem; margin-bottom:8px; }
.file-label { font-size:.85rem; color:var(--text-secondary); line-height:1.6; }
.file-label small { font-size:.78rem; }
.file-name  { font-size:.85rem; font-weight:600; color:var(--accent); margin-top:8px; }

/* ── Status banners ── */
.status-banner { border-radius:16px; padding:32px; text-align:center; }
.status-banner .icon { font-size:3rem; margin-bottom:12px; display:inline-block; animation:iconBounce .7s cubic-bezier(.22,.68,0,1.4) .15s both; }
.status-banner h2 { font-size:1.3rem; font-weight:800; margin-bottom:8px; }
.status-banner p  { font-size:.9rem; color:var(--text-secondary); }
.banner-approved { background:rgba(5,150,105,.07);  border:1.5px solid rgba(5,150,105,.2); }
.banner-approved h2 { color:var(--success); }
.banner-pending  { background:rgba(217,119,6,.07);  border:1.5px solid rgba(217,119,6,.2); }
.banner-pending h2  { color:var(--warning); }
.banner-rejected { background:rgba(220,38,38,.07);  border:1.5px solid rgba(220,38,38,.2); }
.banner-rejected h2 { color:var(--danger); }

/* ── Hero price ── */
.hero-price { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:16px; }
.price-normal { font-size:1.35rem; font-weight:800; color:var(--accent); }
.price-original { font-size:1rem; color:var(--text-secondary); text-decoration:line-through; font-weight:500; }
.price-sale { font-size:1.35rem; font-weight:800; color:#22c55e; }
.sale-badge {
  display:inline-block; padding:3px 10px; border-radius:20px;
  background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.35);
  color:#22c55e; font-size:.78rem; font-weight:700;
}

/* ── Hero installment hint ── */
.hero-installment-hint {
  text-align:center; font-size:.82rem; color:var(--text-secondary);
  margin-top:6px; padding:6px 16px;
}
.hero-installment-hint strong { color:var(--accent); }

/* ── Payment type tabs ── */
.payment-type-tabs {
  display:flex; gap:10px; margin-bottom:20px;
}
.ptype-tab {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 10px; border-radius:14px; cursor:pointer; transition:all .18s;
  background:var(--bg-elevated); border:2px solid var(--border);
  font-family:'Vazirmatn',sans-serif; color:var(--text-secondary);
}
.ptype-tab:hover { border-color:rgba(124,58,237,.3); color:var(--text-primary); }
.ptype-tab--active {
  border-color:var(--accent); background:var(--accent-bg); color:var(--accent);
  box-shadow:0 0 0 3px rgba(124,58,237,.1);
}
.ptype-icon  { font-size:1.4rem; }
.ptype-label { font-size:.82rem; font-weight:700; }
.ptype-price { font-size:.75rem; font-weight:500; opacity:.8; }
.ptype-tab--active .ptype-price { opacity:1; font-weight:700; }

/* ── Installment summary box ── */
.installment-summary {
  background:var(--bg-elevated); border:1.5px solid rgba(124,58,237,.2);
  border-radius:12px; padding:14px 16px; margin-bottom:20px;
}
.inst-sum-title {
  font-size:.78rem; font-weight:700; color:var(--accent); margin-bottom:10px;
  text-transform:uppercase; letter-spacing:.04em;
}
.inst-sum-rows { display:flex; flex-direction:column; gap:7px; }
.inst-sum-row {
  display:flex; align-items:center; gap:8px;
  font-size:.82rem; color:var(--text-primary);
}
.inst-sum-label  { flex:1; font-weight:500; }
.inst-sum-amount { font-weight:800; color:var(--accent); }
.inst-sum-when   { font-size:.72rem; color:var(--text-secondary); background:var(--bg-base); border-radius:20px; padding:2px 8px; }
.inst-sum-total  {
  margin-top:10px; padding-top:10px; border-top:1px solid var(--border);
  font-size:.85rem; color:var(--text-secondary); text-align:left;
}
.inst-sum-total strong { color:var(--text-primary); font-size:.95rem; }

/* ── Installment payment note ── */
.inst-payment-note {
  font-size:.8rem; color:#7c3aed; background:rgba(124,58,237,.07);
  border:1px solid rgba(124,58,237,.18); border-radius:10px;
  padding:10px 14px; margin-bottom:16px; line-height:1.6;
}