/* frontend/supplier.css */

/* This page intentionally has NO bottomNav + NO sign-in strip */
.page{
  padding-bottom: 18px;
}

/* ✅ Sticky filter chips row under category row (wireframe requirement) */
.supFilterBar{
  position: sticky;
  top: calc(var(--topbar-h) + var(--tabs-h) + var(--catline-h));
  z-index: 60;
  background: var(--bg);
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;

  /* nicer blur feel without turning into glass chaos */
  backdrop-filter: blur(8px);
}

.supFilterRow{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* filter chips */
.supChip{
  flex: 0 0 auto;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.92);
  color: var(--muted);
  font-weight: 800;
  font-size: medium;
  padding: 10px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(15,23,42,0.05);
  cursor: pointer;
  scroll-snap-align: start;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.supChip:active{
  transform: translateY(0.5px);
}

.supChip--active{
  color: var(--text);
  border-color: rgba(15,23,42,0.16);
  background: var(--card);
  box-shadow: 0 12px 26px rgba(15,23,42,0.07);
}

/* Supplier list wrapper */
.supList{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Supplier card */
.supCard{
  border: 1px solid #e5e5e5;
  background: #ffffff;
  border-radius: var(--r-md);
  box-shadow: none;
  overflow: hidden;
}

/* Clickable header area */
.supHead{
  display: flex;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease;
}

.supHead:active{
  transform: translateY(0.6px);
}

.supAvatar{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff !important;
  border: 1px solid #000 !important;
  display: flex;
  align-items: center;
  justify-content: center;

  /* less "bulky" than 950 */
  font-weight: 200;
  font-size: large;
  letter-spacing: -0.2px;
  color: #000;
  flex: 0 0 auto;
}

/* right side meta */
.supMeta{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.supName{
  /* slightly lighter, more premium than ultra-bold */
  font-weight: 900;
  letter-spacing: -0.25px;
  font-size: large;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3 icon stats row: rating, followers, delivery */
.supStats{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.supStat{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;

  border: 1px solid #ddd;
  background: transparent;

  font-size: medium;
  font-weight: 800;
  color: #000;
}

.supStat i{
  color: var(--brand-deep);
}

.supStat i.fa-star{
  color: #ffc400; /* gold */
}

.supStat i.fa-user-group,
.supStat i.fa-truck-fast{
  color: #000;
}

/* one-line description */
.supDesc{
  color: var(--muted);
  font-size: large;
  line-height: 1.25;
  font-weight: 600;

  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* tags row */
.supTags{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.supTag{
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;

  font-size: large;
  font-weight: 800;
  color: #000;
}

/* Tight gap between header and preview row (wireframe requirement) */
.supPreview{
  padding: 0 12px 12px;
  margin-top: -7px; /* tighter */
}

/* Horizontal product preview row */
.miniRow{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.miniP{
  flex: 0 0 auto;
  width: 118px;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.miniP:active{
  transform: translateY(0.6px);
}

.miniImg{
  height: 84px;
  background: rgba(15,23,42,0.06);
  background-size: cover;
  background-position: center;
}

.miniPrice{
  padding: 8px 10px 10px;
  font-weight: 900;
  letter-spacing: -0.2px;
  font-size: medium;
  color: rgb(211, 123, 22);
}

/* Loader container */
.supLoader{
  margin-top: 10px;
}

/* ===================== SKELETONS ===================== */
.supCard--skeleton .supHead{
  cursor: default;
}

.supCard--skeleton .supAvatar{
  background: rgba(15,23,42,0.06);
  border-color: rgba(15,23,42,0.08);
  color: transparent;
}

.skLine{
  height: 12px;
  border-radius: 999px;
  background: rgba(15,23,42,0.08);
}

.skLine--w60{ width: 60%; }
.skLine--w90{ width: 90%; }

.skPill,
.skTag{
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(15,23,42,0.05);
  display: inline-block;
}

.skPill{ width: 72px; }
.skTag{ width: 70px; }

.skMini{
  background: rgba(15,23,42,0.06);
  position: relative;
  overflow: hidden;
}

.supCard--skeleton,
.skMini{
  position: relative;
  overflow: hidden;
}

.supCard--skeleton::before,
.skMini::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(15,23,42,0.06),
    rgba(15,23,42,0.10),
    rgba(15,23,42,0.06)
  );
  animation: supShimmer 1.1s infinite linear;
}

@keyframes supShimmer{
  0%{ transform: translateX(-60%); }
  100%{ transform: translateX(60%); }
}

/* Smooth scroll feel */
.supFilterRow,
.miniRow{
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Slightly nicer on wider screens */
@media (min-width: 700px){
  .miniP{ width: 132px; }
  .miniImg{ height: 92px; }
}