/* ============================================================
   card.css — کارت‌های تمیز (Navy / Teal / Gold)
   ============================================================ */

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:16px;
  box-shadow:var(--sh-sm);
  display:flex;flex-direction:column;gap:12px;
  transition:box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease);
  position:relative;overflow:hidden;
}
.card:hover{
  box-shadow:var(--sh-md);
  border-color:#D5DEE8;
  transform:translateY(-1px);
}

.cardhead{display:flex;align-items:center;gap:10px}

.person{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg, var(--pc), #F0F7FD);
  color:var(--p);
  display:grid;place-items:center;
  font-weight:800;flex:none;
  box-shadow:inset 0 0 0 1px rgba(10,37,64,.08);
}
.personinfo{min-width:0;flex:1}
.personinfo b{font-size:12.5px;display:flex;align-items:center;gap:5px;font-weight:700}

/* نشان تأییدشده — فیروزه‌ای */
.v-badge{
  width:15px;height:15px;border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--teal-600));
  color:#fff;
  display:inline-grid;place-items:center;
  font-size:9px;font-weight:800;flex:0 0 auto;
  box-shadow:0 2px 6px -2px rgba(20,184,166,.6);
}

/* rating — طلایی گرم، کم */
.rating{
  font-size:10.5px;font-weight:800;
  color:var(--ongold);
  background:linear-gradient(135deg, #FFFBEB, var(--goldc));
  border:1px solid #F2DFA0;
  padding:4px 9px;border-radius:var(--r-pill);
  display:flex;align-items:center;gap:3px;flex:0 0 auto;
}

.cardstats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  background:linear-gradient(180deg, #FAFCFF, #F2F6FB);
  border:1px solid var(--line);
  border-radius:var(--r-md);padding:10px;
}
.stat span{display:block;font-size:9.5px;color:var(--muted);font-weight:600}
.stat b{display:block;font-size:11.5px;margin-top:3px;font-weight:800;font-variant-numeric:tabular-nums}
.price{color:var(--p)!important}

.cardactions{display:flex;gap:7px;margin-top:auto}
.cardactions .btn{flex:1}

/* ══════════════════════════════════════════════════════════════
   Pillهای وضعیت — رنگ‌های نرم و قابل تشخیص
   ══════════════════════════════════════════════════════════════ */
.status{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 10px;border-radius:var(--r-pill);
  font-size:9.5px;font-weight:800;
  white-space:nowrap;letter-spacing:-.05px;
}
.pending  {background:linear-gradient(135deg,#FEF3C7,#FDE68A); color:#92400E}
.approved {background:linear-gradient(135deg,#CCFBF1,#99F6E4); color:#0F766E}
.paid     {background:linear-gradient(135deg,#FFEDD5,#FED7AA); color:#9A3412}
.confirmed{background:linear-gradient(135deg,#E0F2FE,#BAE0F7); color:#075985}
.delivered{background:linear-gradient(135deg,#DBEAFE,#BFDBFE); color:#1E40AF}
.completed{background:linear-gradient(135deg,#DCFCE7,#BBF7D0); color:#166534}
.settled  {background:linear-gradient(135deg,#CCFBF1,#5EEAD4); color:#0F766E}
.rejected {background:linear-gradient(135deg,#FEE2E2,#FECACA); color:#991B1B}

/* ══════════════════════════════════════════════════════════════
   Steps — نوار پیشرفت ۴ مرحله‌ای
   ══════════════════════════════════════════════════════════════ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px}
.step{
  padding:9px 6px;border-radius:12px;text-align:center;
  background:var(--s1);color:var(--muted);
  font-size:9px;line-height:1.45;font-weight:600;
  border:1px solid var(--line);
  transition:background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.step.active{
  background:linear-gradient(135deg, var(--pc), #BAE0F7);
  color:var(--onpc);font-weight:700;
  border-color:#A6D6EF;
  box-shadow:var(--sh-xs);
}
.step.done{
  background:linear-gradient(135deg, var(--tealc), #99F6E4);
  color:var(--teal-700);font-weight:700;
  border-color:#99F6E4;
}

.ribbon{
  position:absolute;top:-1.5px;inset-inline-start:16px;
  font-size:10px;font-weight:800;color:#fff;
  padding:4px 12px;border-radius:0 0 11px 11px;
  background:linear-gradient(135deg, var(--teal-600), var(--teal));
  box-shadow:0 4px 10px -3px rgba(20,184,166,.5);
}
.ribbon.ok{
  background:linear-gradient(135deg, var(--teal-700), var(--teal-600));
}

@media(max-width:700px){.cardactions{flex-direction:column}}
@media(max-width:430px){
  .cardstats{grid-template-columns:1fr 1fr}
  .cardstats .stat:last-child{grid-column:1/-1}
  .steps{grid-template-columns:repeat(2,1fr);gap:6px}
  .step{font-size:10px;padding:7px 5px}
}