/* BAAZAAR — Seller cabinet styles (depends on styles/main.css) */

.seller-wrap{
  padding: 18px 0 28px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.panel{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: 16px;
}

.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

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

.panel-title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  color:#053f3c;
}

.form-grid{
  display:grid;
  gap: 10px;
}

.field{ display:flex; flex-direction:column; gap: 6px; }
.label{
  font-size: 12px;
  font-weight: 800;
  color: #053f3c;
}

.row2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px){ .row2{ grid-template-columns: 1fr; } }

.actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.table-wrap{ margin-top: 10px; overflow:auto; }
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ text-align:left; padding:10px 8px; border-bottom:1px solid rgba(0,0,0,.08); vertical-align: middle; }
.table th{ font-weight:800; color:#053f3c; }
.thumb-mini{ width: 52px; height: 40px; border-radius: 10px; border:1px solid rgba(0,0,0,.10); background:#fff; object-fit: contain; display:block; }
.badge{ display:inline-block; padding:4px 10px; border-radius: 999px; font-size:12px; border:1px solid rgba(0,0,0,.10); background: rgba(0,0,0,.03); }
.badge.pending{ background: rgba(255, 193, 7, .14); }
.badge.approved{ background: rgba(25, 135, 84, .12); }
.badge.rejected{ background: rgba(220, 53, 69, .12); }
.spacer{ height: 14px; }
.delbox{ transform: scale(1.1); }

/* Modal */
.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1000;
}

.modal{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 1001;
}

.modal-card{
  width: min(860px, 100%);
  max-height: calc(100vh - 36px);
  overflow:auto;
  background:#fff;
  border-radius: 18px;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  padding: 16px;
}

.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.modal-kicker{
  font-size: 12px;
  font-weight: 900;
  letter-spacing:.08em;
  text-transform: uppercase;
  color:#0b3b39;
  opacity:.7;
}

.modal-title{
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 950;
  color:#053f3c;
}

/* Preview grid (fallback styles; seller.js also injects minimal ones for cached HTML) */
.preview-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:12px; margin-top:10px; }
.preview-item{ border:1px solid rgba(0,0,0,.08); border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.preview-item img{ width:100%; height:180px; object-fit:contain; background:#f6fbfb; display:block; }
.preview-meta{ padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.preview-row{ display:flex; justify-content:space-between; gap:10px; font-size:13px; color:#0b3b39; }
.preview-row strong{ color:#053f3c; }

/* Ensure HTML [hidden] works even when author styles set display */
[hidden]{ display:none !important; }