/* =========================================================
   RondPasand — Shop tab inside the customer panel.
   Loaded AFTER style.css + admin.css (reuses their tokens
   and the admin shell). This pass adds real color: a tinted
   toolbar, category-coded cards (emerald / gold / teal), and
   richer live-auction styling — instead of flat white-on-white.
   ========================================================= */

/* ---------- Toolbar (search + category filter) ---------- */
.shop-toolbar{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:22px;
  background:linear-gradient(135deg, var(--brand-tint) 0%, var(--gold-tint) 100%);
  border:1px solid #D8E4DD; border-radius:var(--radius-md);
  padding:16px 18px;
}
.shop-toolbar select, .shop-toolbar input[type="text"]{
  background:#fff; border:1.5px solid #D3C9A6; border-radius:var(--radius-pill);
  padding:11px 18px; font-size:.85rem; color:var(--text); font-family:var(--font-body);
  transition:border-color var(--transition), box-shadow var(--transition);
}
.shop-toolbar select{
  appearance:none; -webkit-appearance:none; padding-left:34px; cursor:pointer; font-weight:600; color:var(--brand-dark);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%2314493D' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:left 14px center;
}
.shop-toolbar select:focus, .shop-toolbar input[type="text"]:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(20,73,61,.12); background:#fff;
}
.shop-toolbar input[type="text"]{ min-width:220px; flex:1; }
.shop-toolbar input[type="text"]::placeholder{ color:#9AA39C; }

/* ---------- Grid ---------- */
.shop-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px;
}

/* ---------- Category color system ---------- */
/* phone -> brand (emerald), id -> gold, domain -> accent (teal) */
.shop-card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:20px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.shop-card.cat-phone{ background:linear-gradient(165deg, #fff 0%, var(--brand-tint) 100%); }
.shop-card.cat-id{ background:linear-gradient(165deg, #fff 0%, var(--gold-tint) 100%); }
.shop-card.cat-domain{ background:linear-gradient(165deg, #fff 0%, var(--accent-tint) 100%); }
.shop-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:5px;
  background:var(--brand);
}
.shop-card.cat-phone::before{ background:linear-gradient(90deg, var(--brand), var(--brand-dark)); }
.shop-card.cat-id::before{ background:linear-gradient(90deg, var(--gold), var(--gold-dark)); }
.shop-card.cat-domain::before{ background:linear-gradient(90deg, var(--accent), var(--accent-dark)); }

.shop-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:#D8CFAE; }

.shop-card-top{ display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.shop-card-top .badge{
  font-size:.7rem; font-weight:700; padding:4px 11px; border-radius:var(--radius-pill);
  background:var(--surface); color:var(--text-muted); border:1px solid var(--border);
}
.shop-card.cat-phone .badge:first-child{ background:var(--brand-tint); color:var(--brand-dark); border-color:#CFE0D8; }
.shop-card.cat-id .badge:first-child{ background:var(--gold-tint); color:var(--gold-dark); border-color:#E6D6A6; }
.shop-card.cat-domain .badge:first-child{ background:var(--accent-tint); color:var(--accent-dark); border-color:#C3DEE1; }
.shop-card-top .badge-vip{ background:var(--gold-tint); color:var(--gold-dark); border-color:#E6D6A6; font-weight:800; }

.shop-card-number{
  font-family:var(--font-mono); font-weight:700; font-size:1.15rem; color:var(--brand-dark);
  direction:ltr; text-align:center;
  background:linear-gradient(135deg, var(--brand-tint) 0%, #E4F5EC 100%);
  border:1.5px solid #A9D2BE; box-shadow:var(--shadow-plate);
  border-radius:var(--radius-sm); padding:14px 8px;
}
.shop-card.cat-phone .shop-card-number{ background:linear-gradient(135deg, var(--brand-tint) 0%, #E4F5EC 100%); border-color:#A9D2BE; color:var(--brand-dark); }
.shop-card.cat-id .shop-card-number{ background:linear-gradient(135deg, var(--gold-tint) 0%, #FCF0D4 100%); border-color:#E0C57D; color:var(--gold-dark); }
.shop-card.cat-domain .shop-card-number{ background:linear-gradient(135deg, var(--accent-tint) 0%, #DCF2F5 100%); border-color:#8FCBD1; color:var(--accent-dark); }
.shop-card-sub{ color:var(--text-muted); font-size:.8rem; }

.shop-card-bottom{
  display:flex; justify-content:space-between; align-items:center; margin-top:auto;
  padding-top:14px; border-top:1px dashed var(--border);
}
.shop-card-price{ font-family:var(--font-mono); font-weight:700; color:var(--brand-dark); }
.shop-card-price small{ font-family:var(--font-body); font-weight:400; color:var(--text-muted); font-size:.72rem; margin-right:4px; }

/* ---------- Auction bidding card (used in "مزایده‌های من" + shop auctions) ---------- */
.bid-card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:20px 20px 20px 24px; margin-bottom:14px; box-shadow:var(--shadow-sm);
}
.bid-card.cat-phone{ background:linear-gradient(165deg, #fff 0%, var(--brand-tint) 100%); }
.bid-card.cat-id{ background:linear-gradient(165deg, #fff 0%, var(--gold-tint) 100%); }
.bid-card.cat-domain{ background:linear-gradient(165deg, #fff 0%, var(--accent-tint) 100%); }
.bid-card::before{
  content:''; position:absolute; inset:0 auto 0 0; width:5px; background:var(--live);
}
.bid-card.cat-phone::before{ background:linear-gradient(180deg, var(--brand), var(--brand-dark)); }
.bid-card.cat-id::before{ background:linear-gradient(180deg, var(--gold), var(--gold-dark)); }
.bid-card.cat-domain::before{ background:linear-gradient(180deg, var(--accent), var(--accent-dark)); }
.bid-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.bid-card-number{ font-family:var(--font-mono); font-weight:700; font-size:1.05rem; color:var(--brand-dark); direction:ltr; }
.bid-card .countdown-inline{ margin:14px 0; background:var(--surface); border-radius:10px; padding:10px 12px; justify-content:space-around; }
.bid-card-foot{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  background:var(--gold-tint); border-radius:10px; padding:10px 14px; margin-top:4px;
}
.bid-card .my-bid-note{ font-size:.78rem; color:var(--text-muted); }
.bid-card .my-bid-note b{ color:var(--brand-dark); font-family:var(--font-mono); }

.badge-live{ background:var(--live-tint); color:var(--live); display:inline-flex; align-items:center; gap:5px; border:1px solid #F2CFC7; }
.badge-live .pulse{ width:7px; height:7px; border-radius:50%; background:var(--live); display:inline-block; animation:rb-pulse 1.4s infinite; }
@keyframes rb-pulse{ 0%{ opacity:1 } 50%{ opacity:.35 } 100%{ opacity:1 } }

.empty{ text-align:center; padding:44px 16px; color:var(--text-muted); background:var(--surface); border-radius:var(--radius-md); }
.empty b{ display:block; color:var(--text); margin-bottom:6px; font-size:.95rem; }

.error{ color:var(--live); font-size:.8rem; margin-top:8px; min-height:1.2em; }

.debug-otp-note{
  margin-top:10px; font-size:.78rem; color:var(--gold-dark); background:var(--gold-tint);
  border:1px solid #E6D6A6; border-radius:10px; padding:10px 12px; text-align:center;
}