/* ==========================================================================
   Jangid Business — Auth & Product Listing Styles
   (kept separate from style.css; reuses the same design tokens/variables)
   ========================================================================== */

/* Utility strip auth links */
.utility-auth-link{
  color:var(--gold-300);
  font-size:.82rem;
  font-weight:600;
}
.utility-auth-link:hover{ color:#fff; }

/* ---------- Auth pages (Login / Register) ---------- */
.auth-shell{
  min-height:calc(100vh - 260px);
  display:flex;
  align-items:center;
  padding:3rem 0;
}
.auth-card{
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  overflow:hidden;
  display:flex;
  min-height:560px;
}
.auth-side{
  flex:0 0 42%;
  background:
    radial-gradient(720px 380px at 90% -10%, rgba(212,175,55,.18), transparent 60%),
    linear-gradient(160deg, var(--teal-950), var(--teal-800));
  color:#fff;
  padding:2.8rem 2.4rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.auth-side::after{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:20px 20px;
  opacity:.35;
  pointer-events:none;
}
.auth-side .brand-row{ display:flex; align-items:center; gap:.6rem; position:relative; z-index:1; }
.auth-side h2{ color:#fff; font-size:1.5rem; margin-top:1.8rem; position:relative; z-index:1; }
.auth-side p{ color:rgba(255,255,255,.75); position:relative; z-index:1; }
.auth-side .auth-points{ list-style:none; padding:0; margin:1.6rem 0 0; position:relative; z-index:1; }
.auth-side .auth-points li{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.55rem 0;
  color:rgba(255,255,255,.85);
  font-size:.9rem;
}
.auth-side .auth-points li i{ color:var(--gold-300); margin-top:.2rem; }
.auth-side .auth-foot{ position:relative; z-index:1; font-size:.78rem; color:rgba(255,255,255,.55); }

.auth-form-col{
  flex:1;
  padding:2.8rem 2.6rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.auth-form-col .auth-heading{ margin-bottom:1.8rem; }
.auth-form-col .auth-heading .kicker{
  color:var(--gold-700); font-weight:700; font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase;
}
.auth-form-col h1{ font-size:1.7rem; margin:.3rem 0 .3rem; }
.auth-form-col .sub{ color:var(--ink-soft); font-size:.92rem; }

.auth-tab-toggle{
  display:flex;
  background:var(--ivory-deep);
  border-radius:999px;
  padding:.3rem;
  margin-bottom:1.8rem;
  width:fit-content;
}
.auth-tab-toggle a{
  padding:.5rem 1.3rem;
  border-radius:999px;
  font-weight:600;
  font-size:.85rem;
  color:var(--ink-soft);
}
.auth-tab-toggle a.active{
  background:var(--teal-800);
  color:#fff;
}

.input-icon-group{ position:relative; }
.input-icon-group .ic{
  position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  color:var(--teal-700);
}
.input-icon-group input{ padding-left:2.5rem; }
.input-icon-group .toggle-pass{
  position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  color:var(--ink-soft); cursor:pointer; border:none; background:none;
}

.auth-divider{
  display:flex; align-items:center; gap:.8rem;
  color:var(--ink-soft); font-size:.8rem;
  margin:1.4rem 0;
}
.auth-divider::before, .auth-divider::after{
  content:""; flex:1; height:1px; background:var(--line);
}

.role-choice{
  display:flex; gap:.8rem;
}
.role-choice label{
  flex:1;
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  padding:.9rem;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
  font-size:.85rem;
  font-weight:600;
  color:var(--ink-soft);
}
.role-choice input{ display:none; }
.role-choice input:checked + label{
  border-color:var(--gold-500);
  background:var(--gold-100);
  color:var(--teal-900);
}
.role-choice .ic{ display:block; font-size:1.3rem; margin-bottom:.4rem; color:var(--teal-700); }

@media (max-width:991px){
  .auth-card{ flex-direction:column; }
  .auth-side{ flex:none; }
}

/* ---------- Product Listing page ---------- */
.product-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  height:100%;
  display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.product-card .product-thumb{
  aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--teal-100),var(--gold-100));
  display:flex; align-items:center; justify-content:center;
  color:var(--teal-700);
  font-size:2rem;
  position:relative;
}
.product-card .product-thumb .badge-tag{
  position:absolute; top:.7rem; left:.7rem;
  background:var(--teal-950); color:var(--gold-300);
  font-size:.7rem; font-weight:600;
  padding:.25rem .6rem; border-radius:999px;
}
.product-card .product-body{ padding:1rem 1.1rem 1.2rem; flex:1; display:flex; flex-direction:column; }
.product-card .product-cat{ font-size:.72rem; color:var(--gold-700); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.product-card .product-name{ font-weight:600; color:var(--teal-950); margin:.2rem 0 .3rem; }
.product-card .product-biz{ font-size:.8rem; color:var(--ink-soft); display:flex; align-items:center; gap:.35rem; }
.product-card .product-price{ font-weight:700; color:var(--teal-800); margin-top:.6rem; font-size:1.02rem; }
.product-card .product-price small{ font-weight:500; color:var(--ink-soft); font-size:.72rem; }
.product-card .product-actions{ margin-top:auto; padding-top:.9rem; }

.sort-bar{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:.8rem 1.1rem;
}

.category-pill-row{
  display:flex; gap:.6rem; flex-wrap:wrap;
}
.category-pill-row a{
  padding:.45rem 1rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink-soft);
  font-size:.83rem;
  font-weight:600;
}
.category-pill-row a.active{
  background:var(--teal-800);
  color:#fff;
  border-color:var(--teal-800);
}