/* ============================================================
   SISTER NEXT DOOR — DESIGN SYSTEM
   Import this in every page: <link rel="stylesheet" href="../css/main.css">
   ============================================================ */

/* ── FONTS ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Outfit:wght@300;400;500;600;700&family=Caveat:wght@500;700&display=swap');

/* ── VARIABLES ───────────────────────────────────────────────── */
:root {
  --cream:    #FDF8F2;
  --warm:     #FFF4E8;
  --peach:    #FFB5A7;
  --rose:     #F28B82;
  --coral:    #E8634A;
  --sage:     #6BAF7A;
  --sage-d:   #3D7A4E;
  --lav:      #C5B4E3;
  --lav-d:    #7B5EA7;
  --honey:    #F4A636;
  --ink:      #1C1208;
  --ink2:     #3D2E1E;
  --muted:    #8A7560;
  --border:   rgba(180,120,60,.12);
  --success:  #4CAF50;
  --warning:  #FF9800;
  --error:    #F44336;

  --sh:    0 4px 24px rgba(28,18,8,.08);
  --shm:   0 12px 40px rgba(28,18,8,.14);

  --radius:   16px;
  --radius-s: 10px;
  --radius-l: 24px;
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
}
img { max-width:100%; display:block; }
a { color: var(--coral); text-decoration:none; }
a:hover { text-decoration:underline; }
button, input, textarea, select { font-family: inherit; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-thumb { background:var(--peach); border-radius:3px; }

/* ── TYPOGRAPHY ──────────────────────────────────────────────── */
h1,h2,h3,h4 { font-family:'Fraunces',serif; font-weight:600; line-height:1.2; color:var(--ink); }
h1 { font-size:clamp(28px,4vw,48px); }
h2 { font-size:clamp(22px,3vw,36px); }
h3 { font-size:clamp(18px,2.5vw,24px); }
h4 { font-size:18px; }
p  { color:var(--ink2); line-height:1.75; }
.italic { font-style:italic; }
.muted  { color:var(--muted); font-size:13px; }
.eyebrow {
  font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--coral); font-weight:600;
  margin-bottom:6px; display:block;
}

/* ── LAYOUT ──────────────────────────────────────────────────── */
.container  { max-width:1100px; margin:0 auto; padding:0 20px; }
.container-s{ max-width:700px;  margin:0 auto; padding:0 20px; }
.page-wrap  { padding:28px 0 60px; }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.flex   { display:flex; align-items:center; gap:12px; }
.flex-between { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.flex-col { display:flex; flex-direction:column; gap:12px; }

/* ── TOPBAR ──────────────────────────────────────────────────── */
.topbar {
  height:64px;
  background:rgba(253,248,242,.96);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px;
  padding:0 24px;
  position:sticky; top:0; z-index:200;
  backdrop-filter:blur(16px);
  box-shadow:0 2px 16px rgba(28,18,8,.05);
}
.topbar-brand {
  font-family:'Fraunces',serif;
  font-size:21px; color:var(--ink2); font-style:italic;
}
.topbar-brand span { font-style:normal; color:var(--coral); }
.topbar-nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.topbar-nav a {
  padding:8px 14px; border-radius:100px;
  font-size:14px; color:var(--muted);
  transition:all .18s;
}
.topbar-nav a:hover { background:var(--warm); color:var(--ink); text-decoration:none; }
.topbar-nav a.active { color:var(--coral); font-weight:600; }

/* ── CARDS ───────────────────────────────────────────────────── */
.card {
  background:white;
  border:1.5px solid var(--border);
  border-radius:var(--radius-l);
  padding:22px;
  box-shadow:var(--sh);
}
.card:hover { box-shadow:var(--shm); }
.card-sm { padding:16px; border-radius:var(--radius); }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 24px;
  border-radius:100px; border:none; cursor:pointer;
  font-size:14px; font-weight:600; font-family:'Outfit',sans-serif;
  transition:all .22s; text-decoration:none; white-space:nowrap;
}
.btn:hover { transform:translateY(-2px); text-decoration:none; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.btn-primary {
  background:linear-gradient(135deg,var(--rose),var(--coral));
  color:white;
  box-shadow:0 4px 16px rgba(232,99,74,.3);
}
.btn-primary:hover { box-shadow:0 8px 24px rgba(232,99,74,.45); }

.btn-secondary {
  background:white; color:var(--ink2);
  border:1.5px solid var(--border);
}
.btn-secondary:hover { border-color:var(--peach); color:var(--coral); }

.btn-sage {
  background:linear-gradient(135deg,var(--sage),var(--sage-d));
  color:white;
  box-shadow:0 4px 16px rgba(61,122,78,.25);
}

.btn-ghost {
  background:transparent; color:var(--coral);
  border:1.5px solid var(--peach);
}
.btn-ghost:hover { background:rgba(242,139,130,.08); }

.btn-sm { padding:8px 16px; font-size:13px; }
.btn-lg { padding:15px 32px; font-size:16px; }
.btn-full { width:100%; }
.btn-icon { padding:10px; border-radius:12px; }

.btn-danger {
  background:var(--error); color:white;
}

/* ── FORMS ───────────────────────────────────────────────────── */
.form-group { margin-bottom:18px; }
.form-label {
  display:block; margin-bottom:7px;
  font-size:12px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink2);
}
.form-input, .form-textarea, .form-select {
  width:100%;
  background:var(--warm);
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:12px 16px;
  font-size:14px; color:var(--ink);
  font-family:'Outfit',sans-serif;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
  appearance:none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color:var(--peach);
  box-shadow:0 0 0 3px rgba(255,181,167,.2);
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--muted); }
.form-textarea { resize:vertical; min-height:100px; line-height:1.6; }
.form-hint { font-size:12px; color:var(--muted); margin-top:5px; }
.form-error { font-size:12px; color:var(--error); margin-top:5px; display:none; }
.form-error.visible { display:block; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ── TAGS / PILLS ────────────────────────────────────────────── */
.tag {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 12px; border-radius:100px;
  font-size:12px; font-weight:500;
}
.tag-default { background:var(--warm); border:1.5px solid var(--border); color:var(--muted); }
.tag-sage    { background:rgba(107,175,122,.15); color:var(--sage-d); }
.tag-coral   { background:rgba(232,99,74,.12); color:var(--coral); }
.tag-lav     { background:rgba(197,180,227,.2); color:var(--lav-d); }
.tag-honey   { background:rgba(244,166,54,.15); color:#8A5A00; }
.tag-verified{ background:rgba(76,175,80,.12); color:#2E7D32; font-weight:700; }

/* ── STARS ───────────────────────────────────────────────────── */
.stars { display:inline-flex; gap:2px; }
.star { font-size:14px; cursor:pointer; transition:transform .1s; }
.star:hover { transform:scale(1.2); }
.star.filled::before { content:'★'; color:var(--honey); }
.star.empty::before  { content:'☆'; color:var(--border); }

/* ── AVATAR ──────────────────────────────────────────────────── */
.avatar {
  border-radius:50%; object-fit:cover;
  background:linear-gradient(135deg,var(--peach),var(--coral));
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:white; flex-shrink:0;
}
.avatar-sm  { width:36px;  height:36px;  font-size:14px; }
.avatar-md  { width:48px;  height:48px;  font-size:18px; }
.avatar-lg  { width:72px;  height:72px;  font-size:28px; }
.avatar-xl  { width:100px; height:100px; font-size:40px; }

/* ── BADGE ───────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 9px; border-radius:100px;
  font-size:11px; font-weight:700;
}
.badge-verified { background:rgba(76,175,80,.15); color:#2E7D32; border:1px solid rgba(76,175,80,.25); }
.badge-pending  { background:rgba(255,152,0,.15);  color:#E65100; border:1px solid rgba(255,152,0,.25); }
.badge-new      { background:rgba(232,99,74,.12);  color:var(--coral); }

/* ── STATUS DOTS ─────────────────────────────────────────────── */
.status-dot {
  width:8px; height:8px; border-radius:50%;
  display:inline-block; flex-shrink:0;
}
.status-pending    { background:#FF9800; }
.status-accepted   { background:#4CAF50; }
.status-completed  { background:#2196F3; }
.status-cancelled  { background:#F44336; }
.status-online     { background:#4CAF50; box-shadow:0 0 0 3px rgba(76,175,80,.2); }

/* ── ALERTS ──────────────────────────────────────────────────── */
.alert {
  padding:14px 18px; border-radius:var(--radius-s);
  font-size:14px; display:flex; align-items:flex-start; gap:10px;
}
.alert-success { background:rgba(76,175,80,.1);  border:1px solid rgba(76,175,80,.25);  color:#1B5E20; }
.alert-error   { background:rgba(244,67,54,.08); border:1px solid rgba(244,67,54,.2);   color:#B71C1C; }
.alert-warning { background:rgba(255,152,0,.1);  border:1px solid rgba(255,152,0,.25);  color:#E65100; }
.alert-info    { background:rgba(33,150,243,.08);border:1px solid rgba(33,150,243,.2);  color:#0D47A1; }

/* ── TOAST ───────────────────────────────────────────────────── */
#toast-container {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%);
  z-index:9999;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.toast {
  background:var(--ink); color:white;
  padding:12px 22px; border-radius:100px;
  font-size:13px; font-weight:600;
  box-shadow:0 4px 24px rgba(28,18,8,.3);
  animation:toastIn .35s cubic-bezier(.34,1.56,.64,1) both;
  white-space:nowrap;
}
.toast.success { background:var(--sage-d); }
.toast.error   { background:var(--error); }
@keyframes toastIn { from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);} }

/* ── MODAL ───────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(28,18,8,.55);
  z-index:500; display:none;
  align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
  padding:20px;
}
.modal-overlay.open { display:flex; }
.modal {
  background:white; border-radius:28px;
  padding:28px; width:100%; max-width:480px;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 32px 80px rgba(28,18,8,.25);
  animation:modalIn .3s ease;
}
.modal-header {
  display:flex; justify-content:space-between;
  align-items:center; margin-bottom:24px;
}
.modal-title { font-family:'Fraunces',serif; font-size:22px; }
.modal-close {
  width:32px; height:32px; border-radius:50%;
  border:1.5px solid var(--border); background:none;
  cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.modal-close:hover { background:var(--warm); }
@keyframes modalIn { from{opacity:0;transform:scale(.95) translateY(12px);}to{opacity:1;transform:scale(1) translateY(0);} }

/* ── TABS ────────────────────────────────────────────────────── */
.tabs { display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:24px; }
.tab {
  padding:10px 18px; font-size:14px; font-weight:500;
  color:var(--muted); cursor:pointer; border:none; background:none;
  border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:all .18s;
}
.tab:hover { color:var(--ink); }
.tab.active { color:var(--coral); border-bottom-color:var(--coral); font-weight:700; }

/* ── LOADING ─────────────────────────────────────────────────── */
.spinner {
  width:24px; height:24px;
  border:3px solid var(--border);
  border-top-color:var(--coral);
  border-radius:50%;
  animation:spin .8s linear infinite;
  margin:0 auto;
}
@keyframes spin { to{transform:rotate(360deg);} }
.loading-state { text-align:center; padding:60px 20px; color:var(--muted); }
.skeleton {
  background:linear-gradient(90deg,var(--warm) 25%,var(--sand) 50%,var(--warm) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:8px;
}
@keyframes shimmer { to{background-position:-200% 0;} }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state {
  text-align:center; padding:60px 20px;
}
.empty-state .icon { font-size:48px; margin-bottom:16px; }
.empty-state h3 { margin-bottom:8px; }
.empty-state p { color:var(--muted); margin-bottom:20px; max-width:300px; margin-left:auto; margin-right:auto; }

/* ── DIVIDER ─────────────────────────────────────────────────── */
.divider {
  display:flex; align-items:center; gap:12px;
  color:var(--muted); font-size:13px; margin:20px 0;
}
.divider::before, .divider::after {
  content:''; flex:1; height:1px; background:var(--border);
}

/* ── SIDEBAR LAYOUT ──────────────────────────────────────────── */
.layout-with-sidebar {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:24px;
  align-items:start;
}
.sidebar { position:sticky; top:84px; }

/* ── SECTION HEADER ──────────────────────────────────────────── */
.section-header {
  display:flex; align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.section-header h3 { font-family:'Fraunces',serif; }

/* ── FILTER CHIPS ────────────────────────────────────────────── */
.filter-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.filter-chip {
  padding:7px 15px; border-radius:100px;
  font-size:13px; font-weight:500; cursor:pointer;
  border:1.5px solid var(--border); background:white;
  color:var(--muted); transition:all .18s;
}
.filter-chip:hover { border-color:var(--peach); color:var(--ink); }
.filter-chip.active { background:var(--ink); color:white; border-color:var(--ink); }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width:860px) {
  .layout-with-sidebar { grid-template-columns:1fr; }
  .sidebar { position:static; }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .grid-4 { grid-template-columns:1fr 1fr; }
  .topbar-nav { display:none; }
}
@media (max-width:580px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .container, .container-s { padding:0 16px; }
}