/* ===== Concier ge UI - polished ======= */
/* Import a modern UI font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root{
  --brand:#2563eb;
  --brand-600:#1e4ed8;
  --muted:#6b7280;
  --bg:#f8fafc;
  --card:#ffffff;
  --radius:12px;
  --shadow: 0 12px 30px rgba(17,24,39,0.06);
  --gap:18px;
  --max-width:1160px;
}

/* Global wrapper */
.cs-wrap, .cs-vendor-dashboard, .cs-auth-wrap, .cs-wrap * {
  box-sizing: border-box;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #0f172a;
}

/* Page background (if you want to apply to plugin containers) */
body .cs-auth-wrap, body .cs-vendor-dashboard {
  background: transparent;
}

/* ---------------------------
   MINI HEADER
--------------------------- */
.cs-mini-header {
  background: var(--card);
  border-bottom: 1px solid #eef2f7;
  box-shadow: 0 6px 18px rgba(15,23,42,0.03);
}
.cs-header-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
}
.cs-branded { display:flex; align-items:center; gap:12px; }
.cs-logo-link { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.cs-brand-name { font-weight:700; font-size:18px; color:#0f172a; }
.cs-mini-nav { display:flex; gap:10px; align-items:center; }

/* nav links */
.cs-nav-link { padding:8px 12px; border-radius:8px; color:var(--muted); text-decoration:none; font-weight:600; }
.cs-nav-link.cs-cta { background:var(--brand); color:#fff; }
.cs-nav-link:hover { color:var(--brand-600); background: rgba(37,99,235,0.03); }

/* responsive header */
@media (max-width:720px){
  .cs-header-inner { padding:12px; }
  .cs-mini-nav { gap:6px; }
  .cs-brand-name { display:none; }
}

/* ---------------------------
   AUTH (Signup / Login) Card
--------------------------- */
.cs-auth-wrap {
  max-width:520px;
  margin:48px auto;
  background:var(--card);
  border-radius:14px;
  padding:28px;
  box-shadow:var(--shadow);
  border:1px solid rgba(15,23,42,0.03);
}
.cs-auth-wrap h2 { text-align:left; margin:0 0 16px 0; font-size:20px; }
.cs-auth-grid { display:grid; gap:12px; }

/* inputs & selects */
.cs-auth-wrap input[type="text"],
.cs-auth-wrap input[type="email"],
.cs-auth-wrap input[type="password"],
.cs-auth-wrap select,
.cs-auth-wrap textarea {
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #e6eef8;
  background:#ffffff;
  font-size:14px;
}
.cs-auth-wrap input:focus, .cs-auth-wrap select:focus, .cs-auth-wrap textarea:focus {
  outline: none;
  box-shadow: 0 4px 14px rgba(37,99,235,0.08);
  border-color: var(--brand);
}

/* small helper text */
.cs-help { font-size:13px; color:var(--muted); margin-top:6px; }

/* CTA button */
.cs-primary {
  display:inline-block;
  background: var(--brand);
  color:#fff;
  padding:12px 18px;
  border-radius:10px;
  font-weight:600;
  border:none;
  cursor:pointer;
}
.cs-primary:hover { background: var(--brand-600); }

/* ---------------------------
   VENDOR DASHBOARD LAYOUT
--------------------------- */
.cs-vendor-dashboard { max-width:var(--max-width); margin:34px auto; padding:0 18px; }

/* top actions */
.cs-vendor-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; }
.cs-vendor-header h2 { margin:0; font-size:22px; }

/* vendor grid */
.cs-vendor-list {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
}
@media (max-width:1100px){ .cs-vendor-list{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:700px){ .cs-vendor-list{ grid-template-columns: 1fr; } }

.cs-vendor-card{
  background:var(--card);
  border-radius:12px;
  padding:18px;
  border:1px solid rgba(15,23,42,0.04);
  box-shadow: 0 10px 30px rgba(2,6,23,0.04);
  display:flex;
  gap:12px;
  align-items:center;
}
.cs-vendor-thumb { width:84px; height:84px; background:#f8fafc; border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.cs-vendor-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cs-vendor-meta { flex:1; }
.cs-vendor-meta h3 { margin:0 0 6px 0; font-size:16px; }
.cs-vendor-meta p { margin:0; color:var(--muted); font-size:13px; }
.cs-vendor-actions { display:flex; gap:8px; align-items:center; }

/* action links styled as buttons */
.cs-link-btn {
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(15,23,42,0.06);
  background:transparent;
  color:#111827;
  text-decoration:none;
  font-weight:600;
}
.cs-link-btn.cs-primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.cs-link-btn:hover { transform:translateY(-1px); }

/* ---------------------------
   TABS (Vendor Edit)
--------------------------- */
.cs-tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.cs-tab-btn { padding:10px 14px; border-radius:10px; background:transparent; border:1px solid transparent; font-weight:600; color:var(--muted); cursor:pointer; }
.cs-tab-btn.active { background:rgba(37,99,235,0.06); color:var(--brand); border-color: rgba(37,99,235,0.12); }

/* tab panels */
.cs-tab { background: transparent; padding:0; }

/* form groups */
.cs-form-group { margin-bottom:14px; }

/* labels */
.cs-form-label { display:block; font-weight:600; margin-bottom:8px; }

/* textarea larger */
.cs-large { min-height:120px; }

/* ---------------------------
   GALLERY / OFFERS
--------------------------- */
.cs-gallery-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:10px; }
@media (max-width:900px){ .cs-gallery-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:600px){ .cs-gallery-grid{ grid-template-columns: repeat(2,1fr);} }

.cs-offer-card{ background:#fff; border-radius:10px; padding:12px; border:1px solid rgba(15,23,42,0.04); }

/* ---------------------------
   SMALL HELPERS
--------------------------- */
.cs-muted { color:var(--muted); font-size:13px; }
.cs-badge { display:inline-block; background:#eef2ff; color:var(--brand); padding:6px 8px; border-radius:8px; font-weight:600; font-size:13px; }

/* form validation error */
.cs-error { color:#b91c1c; background:#fff5f5; padding:8px; border-radius:8px; border:1px solid #fecaca; margin-bottom:12px; }

/* quick responsive adjustments */
@media (max-width:560px){
  .cs-mini-nav { display:flex; gap:6px; }
  .cs-header-inner { padding:12px; }
  .cs-auth-wrap { margin:20px 12px; padding:16px; }
}