/* ================= DASHBOARD HEADER ================= */
.dashTop{
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.dashTop__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  gap: 12px;
}
.dashAvatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--brand-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashAvatar i{
  font-size: 18px;
  color: var(--brand-deep);
}

.dashUser{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
}

/* ================= TRADE ASSURED ================= */
.ta{ margin-top: 10px; }
.taCard{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.taLeft{ display: flex; gap: 12px; }
.taIcon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--brand-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  padding: 20px;
}
.taCopy p{
  margin: 4px 0;
  font-size: 12.5px;
  color: var(--muted);
}

.taCopy .taTitle {
  font-weight: 800;
  font-size: large;
  padding-bottom: 10px;
}

.taBtn{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-weight: 500;
  font-size: small;
}
.taClose{
  border: 0;
  background: transparent;
  color: var(--muted);
}

/* ================= CARDS ================= */
.dashCard{
  margin-top: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  padding: 14px;
}
.dashCardHead{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.dashCardHead h2{
  margin: 0;
  font-size: large;
  font-weight: 950;
}
.dashSub{
  font-size: large;

  color: var(--muted);
}

/* ================= ORDERS ROW ================= */
.dashCardMore {
    border: none;
    background-color: #fff;
    font-size: medium;
    font-weight: 300;
}

.ordersRow{
  margin-top: 12px;
  display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr)); /* 🔑 critical */
  gap: 8px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;

  margin-left: calc(var(--pad) * -1 + 1px);
  margin-right: calc(var(--pad) * -1 + 1px);
  padding-left: calc(var(--pad) - 1px);
  padding-right: calc(var(--pad) - 1px);
}
.orderTile{
  background: #fff;
  padding: 12px 6px;
  text-align: center;
  border: none;

   /* uniform sizing */
    min-width: 0; 
  min-height: 66px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border-radius: var(--r-sm);
  padding: 12px 6px;
}
.orderNum{
    font-size: large;
  font-weight: 600;
  padding-bottom: 10px;
}
.orderLabel{
  font-size: clamp(small, 2.6vw, 11px);
  font-weight: 500;
  color: var(--muted2);
  white-space: normal;
}
.ordersHint{
  margin-top: 8px;
  font-size: medium;
  color: var(--muted2);
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Ultra-small screens (≤360px) */
@media (max-width: 360px){
  .ordersRow{ gap: 6px; }
  .orderTile{ padding: 8px 2px; }
}

/* Extreme safety (≤320px) */
@media (max-width: 320px){
  .orderNum{ font-size: 13px; }
  .orderLabel{ font-size: 9px; }
}

/* ================= REVIEWS ROW ================= */
.reviewsRow{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* always fits */
  gap: 8px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;

  margin-left: calc(var(--pad) * -1 + 1px);
  margin-right: calc(var(--pad) * -1 + 1px);
  padding-left: calc(var(--pad) - 1px);
  padding-right: calc(var(--pad) - 1px);
}

.reviewTile{
  background: #fff;
  border: none;
  border-radius: var(--r-sm);
  min-width: 0;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 12px 6px;
  text-align: center;
}

.reviewNum{
  font-size: large;
  font-weight: 900;
  padding-bottom: 10px;
}

.ordersHint {
  font-size: medium;
}

.reviewLabel{
  font-size: large;
  font-weight: 500;
  color: var(--muted2);
  white-space: normal;
}

/* Ultra-small screens (≤360px) */
@media (max-width: 360px){
  .reviewsRow{ gap: 6px; }
  .reviewTile{ padding: 8px 2px; }
}

/* Extreme safety (≤320px) */
@media (max-width: 320px){
  .reviewNum{ font-size: 13px; }
  .reviewLabel{ font-size: 9px; }
}

/* ================= RECENT ================= */
/* ================= RECENT CARDS (WIRE FRAME MATCH) ================= */

.recentList{
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.recentCard{
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  border-radius: var(--r-md);
  padding: 12px;
  display:flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
}

.recentThumb{
  width: 66px;
  height: 66px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,0.06);
  overflow: hidden;
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.recentThumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.recentMid{ flex:1; min-width:0; }

.recentTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
}

.recentTitle{
  font-weight: 950;
  font-size: large;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.recentChev{ opacity:.40; flex:0 0 auto; font-size: large;}

.recentMeta{
  margin-top: 4px;
  color: var(--muted);
  font-size: medium;
  font-weight: 650;
}

.recentUpdate{
  margin-top: 8px;
  font-size: medium;
  font-weight: 800;
  color: var(--text);
}

.recentChipRow{ margin-top: 8px; }

.statusChip{
  display: flex;
  align-items: center;
  width: 70%;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: large;
  font-weight: 950;
  background: rgba(15,23,42,0.05);
}

.status-processing{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); }
.status-efc{ border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.12); }
.status-transporting{ border-color: rgba(168,85,247,.35); background: rgba(168,85,247,.12); }
.status-delivered{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.12); }

.recentEmpty{
  padding: 20px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  color: var(--muted);
}
.recentEmpty i{
  font-size: 22px;
  margin-bottom: 6px;
  display: block;
}