/* =========================================================
   E-COM PRODUCT MGMT — CONTEMPORARY UI THEME
   Keeps your existing HTML/JS selectors intact
   ========================================================= */

/* ---------- CSS Variables ---------- */
:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --muted:#667085;
  --text:#111827;

  --primary:#28a745;
  --primary-600:#218838;
  --primary-50:#e9f8ee;

  --accent:#3f88f5;
  --accent-50:#eef4ff;

  --danger:#ef4444;

  --line:#e5e7eb;

  --chip:#eaf6ff;
  --chip-border:#bfe2ff;

  --input-bg:#f0f8f1;
  --input-border:#c7dfc4;

  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 6px 24px rgba(0,0,0,.06);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12);
}

/* ---------- Reset / Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}

/* ---------- Utilities ---------- */
.muted{color:var(--muted)}
.sr-only,.visually-hidden{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0 0 0 0)!important; white-space:nowrap!important; border:0!important;
}
.text-right{ text-align:right }
.text-center{ text-align:center }

/* ---------- Page layout ---------- */
.page-wrap{max-width:1200px;margin:24px auto;padding:0 16px}
.page-header{
  display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px
}
.page-header h1{margin:0 0 4px;font-size:22px}

/* Two-column grid: main + sidebar */
.grid{display:grid;grid-template-columns:1fr 420px;gap:16px}
@media (max-width:1024px){ .grid{grid-template-columns:1fr} }
.col{display:flex;flex-direction:column;gap:16px}

/* ---------- Cards ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.card-header{
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  font-weight:600;
  background:#fff;
}
.card-body{ padding:16px }

/* Scrollable card body (opt-in) */
.card-body.scrollable{
  overflow:auto; min-height:0;
  scrollbar-width:thin; scrollbar-color:#cfe6cf #f6faf6;
}
.card-body.scrollable::-webkit-scrollbar{ width:8px }
.card-body.scrollable::-webkit-scrollbar-thumb{ background:#cfe6cf; border-radius:6px }
.card-body.scrollable::-webkit-scrollbar-track{ background:#f6faf6 }

/* ---------- Rows / Grids ---------- */
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){ .row{grid-template-columns:1fr} }

/* Optional: equal-height cards across a row */
.grid-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
  margin-bottom:24px;
}
@media (max-width:900px){ .grid-row{grid-template-columns:1fr} }

/* ---------- Form fields ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-weight:600; color:#334155}
.hint{color:var(--muted);font-size:12px}

.field input[type="text"],
.field input[type="number"],
.field input[type="url"],
.field select,
.field textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--input-border);
  border-radius:8px;
  background:var(--input-bg);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field textarea{min-height:100px;resize:vertical}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(63,136,245,.15);
  background:#fff;
}

/* Invalid state helper (toggle class on .field) */
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(239,68,68,.12);
  background:#fff5f5;
}

/* ---------- Toggle / Switch ---------- */
.switch{position:relative;display:inline-block;width:44px;height:24px;margin-right:8px}
.switch input{opacity:0;width:0;height:0}
.slider{
  position:absolute;cursor:pointer;inset:0;background:#e5e7eb;transition:.2s;border-radius:24px
}
.slider:before{
  content:""; position:absolute; height:18px;width:18px; left:3px; top:3px; background:#fff;
  transition:.2s; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.switch input:checked + .slider{ background:var(--primary) }
.switch input:checked + .slider:before{ transform:translateX(20px) }
.switch-label{ color:var(--muted) }

/* ---------- Uploader ---------- */
.uploader{
  position:relative;
  border:2px dashed var(--chip-border);
  background:#fafcff;
  border-radius:12px;
  padding:22px;
  text-align:center;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.uploader.drag-over{
  border-color:var(--accent);
  background:var(--accent-50);
  box-shadow:0 0 0 3px rgba(63,136,245,.12) inset;
}
.uploader input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.uploader-icon{font-size:28px;margin-bottom:4px}
.uploader .uploader-ui{ color:#374151 }
.uploader small{display:block;color:#6b7280}

/* Optional clear button (if present) */
.uploader-clear{
  position:absolute; top:10px; right:10px;
  border:1px solid var(--line); background:#fff; color:#111827;
  border-radius:10px; padding:6px 10px; font-size:12px; cursor:pointer;
}
.uploader-clear:hover{ background:#f3f4f6 }

/* ---------- Image previews ---------- */
.previews{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:12px; margin-top:14px;
}
.preview{
  position:relative; border:1px solid var(--line); border-radius:10px;
  background:#fff; overflow:hidden; aspect-ratio:1/1;
  box-shadow:var(--shadow-sm);
}
.preview img{ width:100%; height:100%; object-fit:cover; display:block }
.preview .badge{
  position:absolute; top:8px; left:8px;
  font-size:11px; font-weight:700; padding:4px 8px; border-radius:999px;
  background:#fef3c7; color:#92400e; border:1px solid #fde68a;
}
.preview .badge.soft{
  background:#ecfeff; color:#155e75; border-color:#a5f3fc;
}

/* ---------- Chips (subcategory selector) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:var(--chip); border:1px solid var(--chip-border);
  cursor:pointer; user-select:none; transition:background .15s ease, border-color .15s ease;
}
.chip input{ display:none }
.chip .check{ font-size:14px }
.chip.active{ background:#dff5e6; border-color:#a7e0b6 }

/* ---------- Buttons ---------- */
.btn{
  border:none; border-radius:8px; padding:10px 14px; cursor:pointer;
  transition:transform .1s ease, opacity .15s ease, background-color .15s ease, border-color .15s ease;
  font-weight:700; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:active{ transform:translateY(1px) }

.btn.primary{ background:var(--primary); color:#fff }
.btn.primary:hover{ background:var(--primary-600) }

.btn.ghost{
  background:#eef6ff; color:#0b3b78; border:1px solid var(--chip-border)
}
.btn.ghost:hover{ opacity:.9 }

.btn.outline{
  background:#fff; color:#111827; border:1px solid var(--line);
}
.btn.outline:hover{ background:#f8fafc }

.btn[disabled], .btn:disabled{ opacity:.6; cursor:not-allowed }

/* Sticky action bar (bottom) */
.sticky-bar{
  position:sticky; bottom:12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; margin-top:16px; box-shadow:var(--shadow-md);
}
.sticky-bar .left{ display:flex; align-items:center; gap:8px }
.dot{ width:8px; height:8px; border-radius:50% }
.dot.green{ background:#12b76a }

/* ---------- Modal (cleaned) ---------- */
.modal3{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999 }
.modal3.show{ display:flex; align-items:center; justify-content:center; padding:24px }
.modal-content3{
  background:#fff; width:min(440px,92%); border-radius:12px; box-shadow:var(--shadow-lg);
  padding:22px; position:relative; margin: 10% auto;
}
.close-btn{ position:absolute; top:8px; right:12px; font-size:22px; cursor:pointer; color:#9ca3af }
.modal-buttons3{ display:flex; gap:10px; justify-content:center; margin-top:14px }




/* ---------- Features area ---------- */
/* Tip: add an id on that card container if you want more scoping */
#feature-list{
  display:flex; flex-direction:column; gap:10px;
}
.feature-item{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px;
}
.feature-item .feature-input{
  width:100%; padding:10px 12px; border:1px solid var(--input-border); border-radius:8px;
  background:var(--input-bg); outline:none; transition:.15s border,.15s box-shadow,.15s background;
}
.feature-item .feature-input:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(63,136,245,.15); background:#fff;
}
.feature-item .btn-remove-feature,
.feature-item .btn.ghost{ white-space:nowrap; padding:8px 10px }

#btn-add-feature{ align-self:flex-start; margin-top:4px }

/* Compact mode when many features */
#feature-list.compact .feature-item{ grid-template-columns:1fr 90px }
@media (max-width:560px){
  .feature-item{ grid-template-columns:1fr auto }
  #btn-add-feature{ width:100%; text-align:center }
}

/* ---------- Generic Tables (if needed elsewhere) ---------- */
.table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:14px; color:#111827; background:#fff;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-sm);
}
.table thead th{
  background:#f8fafc; color:#374151; font-weight:700; padding:12px 14px; border-bottom:1px solid var(--line); text-align:left;
}
.table tbody td{
  padding:12px 14px; vertical-align:middle; border-bottom:1px solid #f1f5f9; color:#0f172a; background:#fff;
}
.table tbody tr:nth-child(odd) td{ background:#fcfdff }
.table tbody tr:hover td{ background:#f9fafb }

/* ---------- Responsive tweaks ---------- */
@media (max-width:640px){
  .card-body{ padding:14px }
  .uploader{ padding:18px }
  .previews{ gap:10px; grid-template-columns:repeat(auto-fill,minmax(95px,1fr)) }
}




/* ===== Two-cards-per-row layout ===== */
.cards-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;                 /* match your card gap */
  grid-auto-rows: 1fr;       /* equal height rows */
  align-items: stretch;
}

/* make each card fill the grid cell */
.cards-2 > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* optional: a card that should span both columns */
.cards-2 > .card.span-2 {
  grid-column: 1 / -1;
}

/* mobile: single column */
@media (max-width: 900px) {
  .cards-2 {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;    /* natural heights on mobile */
  }
  .cards-2 > .card.span-2 { grid-column: auto; }
}

/* (keeps your existing card styles) */