/* SalonSetu — public-facing styles for [salonsetu_register] and [salonsetu_dashboard] */

:root{
  --ss-plum:#3B1F2B;
  --ss-plum-2:#4E2A3A;
  --ss-rose:#C9536B;
  --ss-rose-light:#F7E3E7;
  --ss-gold:#C79A4B;
  --ss-gold-light:#F5EAD3;
  --ss-cream:#FBF6F0;
  --ss-cream-2:#F3E9DE;
  --ss-line:rgba(59,31,43,0.14);
  --ss-shadow:0 16px 40px -18px rgba(59,31,43,0.28);
}

.salonsetu-form-wrap, .salonsetu-dashboard{
  font-family:'Inter', -apple-system, sans-serif;
  color:#241A1D;
  max-width:960px;
  margin:0 auto;
}

.salonsetu-error{
  background:var(--ss-rose-light);
  color:#9b3a53;
  padding:12px 16px;
  border-radius:10px;
  margin-bottom:16px;
  font-size:14px;
  font-weight:600;
}

/* ---- Shared form styles ---- */
.ss-field{ margin-bottom:16px; }
.ss-field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ss-plum); }
.ss-field input, .ss-field select{
  width:100%; padding:11px 13px; border-radius:9px; border:1.5px solid var(--ss-line);
  font-family:inherit; font-size:14.5px; background:var(--ss-cream);
}
.ss-field input:focus, .ss-field select:focus{ outline:none; border-color:var(--ss-rose); background:#fff; }
.ss-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:600px){ .ss-field-row{ grid-template-columns:1fr; } }

.ss-btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:100px;
  font-weight:600; font-size:15px; cursor:pointer; border:none; font-family:inherit;
  transition:transform .2s ease;
}
.ss-btn:hover{ transform:translateY(-1px); }
.ss-btn-primary{ background:var(--ss-rose); color:#fff; width:100%; justify-content:center; }
.ss-btn-ghost{ background:transparent; border:1.5px solid var(--ss-line); color:var(--ss-plum); width:100%; justify-content:center; }

.salonsetu-form{ background:#fff; border:1px solid var(--ss-line); border-radius:18px; padding:28px; box-shadow:var(--ss-shadow); }

.ss-remember-row{ display:flex; align-items:center; justify-content:space-between; }
.ss-checkbox-label{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--ss-plum); margin:0; }
.ss-checkbox-label input{ width:auto; }
.ss-forgot-link{ font-size:13px; font-weight:600; color:var(--ss-rose); }
.ss-forgot-link:hover{ text-decoration:underline; }
.ss-auth-switch{ text-align:center; font-size:13.5px; color:#6b5860; margin-top:18px; }
.ss-auth-switch a{ color:var(--ss-rose); font-weight:600; }
.ss-auth-switch a:hover{ text-decoration:underline; }

/* ---- Dashboard ---- */
.ss-dash-header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.ss-dash-header h2{ font-size:24px; color:var(--ss-plum); margin:0; }
.ss-badge{ background:var(--ss-cream-2); color:var(--ss-plum); font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:100px; }

.ss-kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px; }
.ss-kpi{ background:#fff; border:1px solid var(--ss-line); border-radius:14px; padding:16px 18px; }
.ss-kpi b{ display:block; font-size:22px; color:var(--ss-plum); }
.ss-kpi span{ font-size:12px; color:#8a7580; }
@media (max-width:700px){ .ss-kpi-row{ grid-template-columns:repeat(2,1fr); } }

.ss-dash-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:24px; align-items:start; }
@media (max-width:900px){ .ss-dash-grid{ grid-template-columns:1fr; } }

.ss-card{ background:#fff; border:1px solid var(--ss-line); border-radius:16px; padding:20px; }
.ss-card h3{ font-size:16px; color:var(--ss-plum); margin:0 0 14px; }

.ss-service-list, .ss-holiday-list{ list-style:none; margin:0 0 16px; padding:0; }
.ss-service-list li, .ss-holiday-list li{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 0; border-bottom:1px dashed var(--ss-line); font-size:13.5px;
}
.ss-service-list li:last-child, .ss-holiday-list li:last-child{ border-bottom:none; }
.ss-service-list li span, .ss-holiday-list li span{ color:#8a7580; font-size:12.5px; }

.ss-bookings-card{ overflow-x:auto; }
.ss-bookings-table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:600px; }
.ss-bookings-table th{ text-align:left; color:#8a7580; font-weight:600; font-size:12px; padding:8px 10px; border-bottom:1px solid var(--ss-line); }
.ss-bookings-table td{ padding:10px; border-bottom:1px solid var(--ss-line); color:#241A1D; }

.ss-pill{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; }
.ss-pill-paid{ background:var(--ss-rose-light); color:#9b3a53; }
.ss-pill-pending{ background:var(--ss-gold-light); color:#8a6a1f; }
.ss-pill-done{ background:#E5F3EC; color:#1f7a53; }

.ss-mark-done{
  background:var(--ss-plum); color:#fff; border:none; font-size:12px; font-weight:600;
  padding:6px 12px; border-radius:100px; cursor:pointer;
}
.ss-mark-done:hover{ opacity:0.9; }

.ss-toast{
  position:fixed; bottom:24px; right:24px; background:var(--ss-plum); color:#fff;
  padding:12px 20px; border-radius:10px; font-size:13.5px; box-shadow:var(--ss-shadow);
  z-index:9999; opacity:0; transform:translateY(10px); transition:all .25s ease;
}
.ss-toast.show{ opacity:1; transform:translateY(0); }
.ss-toast.error{ background:#9b3a53; }