/* ─────────────────────────────────────────────────────
   Rejuvenair Spa — booking system styles
   Admin shell mirrors the SOYO/Pixelish house pattern,
   reskinned to Rejuvenair's palette. Public booking site
   styles follow below.
   ───────────────────────────────────────────────────── */

/* Fonts match rejuvenairsanctuary.co.uk/spa-experience: Cormorant serif for
   headings, a clean system-ui sans for body/UI. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&display=swap');

:root {
  /* Palette taken from rejuvenairsanctuary.co.uk/spa-experience — warm sand,
     stone and taupe. (Token names kept; primary accent is now warm taupe, not rose.) */
  --ink: #3b342b;        /* deep warm brown — headings, sidebar */
  --ink-soft: #71604b;   /* taupe */
  --rose: #6f5d47;       /* PRIMARY accent — warm taupe (buttons, active, links) */
  --rose-deep: #564633;  /* accent hover */
  --rose-soft: #eae3db;  /* soft sand highlight */
  --sage: #7f8a6a;       /* muted sage */
  --paper: #faf6f2;      /* warm cream page background */
  --paper-2: #fdfdfc;    /* near-white surface */
  --sand: #f2ede7;
  --body: #4a4640;       /* warm dark body text */
  --muted: #9a9086;      /* warm muted */
  --rule: #eae3db;       /* warm border */

  --success: #7f8a6a;
  --warning: #b88a3e;
  --danger: #b5524a;

  --sidebar-w: 226px;
  --header-h: 56px;

  --shadow-sm: 0 1px 2px rgba(34,34,33,0.06);
  --shadow-md: 0 6px 24px rgba(34,34,33,0.10);
  --serif: 'Cormorant', Georgia, serif;

  /* Treatments side — same warm taupe/sand palette as the rest of the site
     (tokens kept named "pink" for history; the pastel pink was retired). */
  --pink: #efe7dd;        /* light sand surface */
  --pink-soft: #f6f1ea;   /* lighter warm wash */
  --pink-deep: #6f5d47;   /* warm taupe accent / text */
  --pink-rule: #eae3db;   /* warm border */
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--paper-2);
  color: var(--body);
  font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--rose-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5 { color: var(--ink); font-weight: 600; margin: 0; }

/* ── Admin shell ───────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar {
  background: var(--ink); color: var(--paper);
  padding: 22px 14px; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
}
.sidebar .brand { display: block; padding: 4px 8px 26px; color: var(--paper); }
/* Logo is black ink; invert it to paper on the dark sidebar */
.sidebar .brand .wordmark { display: block; height: 24px; width: auto; filter: brightness(0) invert(1); }
.sidebar .brand .sub { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(252,240,239,0.5); margin-top: 2px; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 7px;
  color: rgba(252,240,239,0.74); font-weight: 500; font-size: 13.5px;
  border-left: 2px solid transparent;
}
.sidebar nav a:hover { background: rgba(255,255,255,0.06); color: var(--paper); text-decoration: none; }
.sidebar nav a.active { background: rgba(111,93,71,0.16); color: #fff; border-left-color: var(--rose); }
.sidebar nav a .ico { font-size: 15px; width: 18px; text-align: center; }
.sidebar .nav-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(252,240,239,0.4); margin: 16px 12px 6px; }
.sidebar .footer {
  margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11px; color: rgba(252,240,239,0.45); letter-spacing: 0.1em; text-transform: uppercase;
}

.header {
  height: var(--header-h); background: #fff; border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px; position: sticky; top: 0; z-index: 10;
}
.header h1 { font-size: 18px; font-weight: 600; }
.header .user { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.header .user .name { color: var(--ink); font-weight: 500; }
.header .user .avatar {
  width: 32px; height: 32px; background: var(--rose); color: #fff; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px;
}
.header form { display: inline; }
.header .logout { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 12px; }
.header .logout:hover { color: var(--rose-deep); }

main { padding: 26px 30px 64px; }

/* ── Components ─────────────────────────────────────── */
.panel { background: #fff; border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow-sm); padding: 20px 22px; margin-bottom: 16px; }
.panel h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 12px; font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.stat { background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--rose); border-radius: 10px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.stat .label { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.stat .value { font-size: 28px; font-weight: 700; color: var(--ink); }
.stat:nth-child(2) { border-left-color: var(--sage); }
.stat:nth-child(3) { border-left-color: var(--ink); }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); background: var(--paper-2); }
.table tr:hover td { background: var(--paper-2); }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--sand); color: var(--ink); }
.badge.rose { background: var(--rose); color: #fff; }
.badge.sage { background: #e9efe2; color: var(--sage); }
.badge.full { background: #f3e3dd; color: var(--danger); }
.badge.wait { background: #f5ecdc; color: var(--warning); }
.badge.muted { background: var(--rule); color: var(--muted); }

.btn { display: inline-block; padding: 9px 16px; background: var(--rose); color: #fff; border: none; border-radius: 7px; font-family: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--rose-deep); color: #fff; text-decoration: none; }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--rule); }
.btn.ghost:hover { background: var(--paper-2); }
.btn.sm { padding: 6px 11px; font-size: 12px; }
.btn.danger { background: #fff; color: var(--danger); border: 1px solid #f3c6c2; }
.btn.danger:hover { background: var(--danger); color: #fff; }

/* Sessions list: filter bar + bulk-action bar */
.sess-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.sess-filters input[name="q"] { flex: 1; min-width: 180px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 9px; font: inherit; }
.sess-filters select { padding: 9px 12px; border: 1px solid var(--rule); border-radius: 9px; font: inherit; background: #fff; }
.sess-filters .sess-past { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.sess-filters .sess-past input { width: auto; }
.bulk-bar { margin-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.bulk-count { font-size: 13px; color: var(--ink-soft); }
.bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bulk-repeat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.bulk-edit { position: relative; }
.bulk-edit > summary { list-style: none; cursor: pointer; display: inline-block; }
.bulk-edit > summary::-webkit-details-marker { display: none; }
.bulk-edit-panel { margin-top: 10px; padding: 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-2); width: 100%; max-width: 560px; }
/* Consent / intake forms (customer fill) */
.cf-card form { margin-top: 8px; }
.cf-heading { font-family: var(--serif); font-size: 20px; color: var(--ink); margin: 24px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule, #eee); }
.cf-text { font-size: 14px; color: var(--ink-soft); background: var(--paper-2, #f7f5f2); border-radius: 8px; padding: 10px 13px; margin: 8px 0; }
.cf-field { margin: 12px 0; }
.cf-field label, .cf-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.cf-field input, .cf-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--rule, #ddd); border-radius: 9px; font: inherit; }
.cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: var(--pink-deep, #c77b95); }
.cf-req { color: #c0392b; }
.cf-opts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }
.cf-opt { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; padding: 6px 12px; border: 1px solid var(--rule, #ddd); border-radius: 999px; cursor: pointer; }
.cf-opt input { width: auto; }
.cf-confirm { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 14px; line-height: 1.4; cursor: pointer; }
.cf-confirm input { width: auto; margin-top: 3px; flex: none; }
.cf-sign { position: relative; }
.cf-sign-pad { border: 1px dashed var(--pink-deep, #c77b95); border-radius: 9px; background: #fff; width: 100%; max-width: 500px; touch-action: none; display: block; }
.cf-sign-clear { margin-top: 6px; }

.sess-table .col-tick { width: 34px; text-align: center; }
.sess-table .rowtick, .sess-table #selAll { width: auto; }
.sess-table .nowrap { white-space: nowrap; }
.sess-table .row-cancelled td { opacity: 0.55; }
@media (max-width: 640px) {
  .sess-table .col-hide { display: none; }
  .sess-table th, .sess-table td { padding-left: 7px; padding-right: 7px; }
  .bulk-edit-panel .row-2 { grid-template-columns: 1fr; }
}

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { padding: 9px 15px; color: var(--muted); font-weight: 500; font-size: 13.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.active { color: var(--rose-deep); border-bottom-color: var(--rose); }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 7px;
  font-family: inherit; font-size: 14px; background: #fff; color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px rgba(111,93,71,0.13); }
.field .hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .row-2 { grid-template-columns: 1fr; } }

.page-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.page-title h2 { font-family: var(--serif); font-weight: 600; font-size: 28px; }

.flash { padding: 11px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; border-left: 3px solid var(--rule); background: var(--paper-2); }
.flash.error { background: #fdeceb; color: var(--danger); border-left-color: var(--danger); }
.flash.notice { background: #e9f3ec; color: var(--sage); border-left-color: var(--sage); }

.empty { padding: 50px 20px; text-align: center; color: var(--muted); font-size: 13.5px; }
.empty strong { color: var(--ink); display: block; font-size: 15px; margin-bottom: 4px; }
.back-link { font-size: 12px; color: var(--muted); }

/* ── Calendar (admin week/day view) ────────────────── */
.cal-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cal-staff { padding: 6px 10px; border: 1px solid var(--rule); border-radius: 8px; font: inherit; font-size: 13px; background: #fff; max-width: 150px; }
/* Month grid */
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; width: 100%; }
.month-dow { background: var(--paper-2); padding: 7px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-align: left; min-width: 0; overflow: hidden; }
.month-cell { background: #fff; min-height: 104px; min-width: 0; padding: 5px 6px; display: block; color: inherit; text-decoration: none; transition: background 0.12s; overflow: hidden; }
.month-cell:hover { background: var(--paper); text-decoration: none; }
.month-cell.out { background: #faf8f5; }
.month-cell.out .month-num { color: var(--muted); }
.month-cell.today { background: var(--rose-soft); }
.month-num { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.month-ev { font-size: 10.5px; line-height: 1.35; padding: 1px 4px; margin-bottom: 2px; border-radius: 4px; background: var(--rose-soft); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month-ev.appt { background: #efe7dd; }
.month-ev.cancelled { text-decoration: line-through; opacity: 0.5; }
.month-ev .me-time { color: var(--muted); font-weight: 600; }
.month-more { font-size: 10px; color: var(--muted); padding: 0 4px; }
@media (max-width: 640px) { .month-cell { min-height: 64px; } .month-ev { font-size: 9.5px; } .month-dow { font-size: 9px; padding: 5px 4px; } }
.cal-toggle { display: flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin-right: 4px; }
.cal-toggle a { padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cal-toggle a:hover { text-decoration: none; background: var(--rose-soft); }
.cal-toggle a.active { background: var(--ink); color: var(--paper); }
.cal-panel { padding: 0; overflow: hidden; }
.cal-scroll { overflow-x: auto; }
.cal-grid { display: grid; grid-template-columns: 52px repeat(7, minmax(118px, 1fr)); min-width: 880px; }
.cal-grid.one-day { grid-template-columns: 52px 1fr; min-width: 0; }
.cal-head { height: 40px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--ink-soft); border-bottom: 1px solid var(--rule); }
.cal-head a { color: inherit; }
.cal-day { border-left: 1px solid var(--rule); min-width: 0; }
.cal-day.today .cal-head { color: var(--rose-deep); }
.cal-day.today .cal-col { background: rgba(199,141,134,0.05); }
.cal-hour { font-size: 10.5px; color: var(--muted); text-align: right; padding: 2px 8px 0 0; }
.cal-col { position: relative; }
.cal-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--rule); opacity: 0.55; }
.cal-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); opacity: 0.4; }
.cal-ev {
  position: absolute; display: block; overflow: hidden;
  border-radius: 6px; padding: 3px 6px;
  font-size: 10.5px; line-height: 1.3; color: var(--ink);
  background: #fff; background: color-mix(in srgb, var(--ev, #8b7355) 14%, #fff);
  border-left: 3px solid var(--ev, #8b7355);
  box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.cal-ev:hover { text-decoration: none; z-index: 5; box-shadow: 0 3px 10px rgba(0,0,0,0.14); }
.cal-ev .t { color: var(--muted); font-size: 10px; display: block; }
.cal-ev strong { display: block; font-size: 11px; line-height: 1.25; }
.cal-ev .sub { color: var(--ink-soft); display: block; }
.cal-ev.cancelled { opacity: 0.45; text-decoration: line-through; }

/* ── Auth / login ──────────────────────────────────── */
.login-shell { min-height: 100vh; background: var(--ink); display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { background: #fff; border-radius: 14px; padding: 38px 34px; width: 380px; max-width: 100%; box-shadow: 0 24px 70px rgba(0,0,0,0.45); }
.login-card .wordmark { display: block; height: 30px; width: auto; }
.login-card .lede { color: var(--muted); font-size: 13px; margin: 6px 0 24px; }
.login-card .error { background: #fdeceb; color: var(--danger); padding: 10px 12px; border-radius: 7px; font-size: 13px; margin-bottom: 16px; }
.login-card .btn { width: 100%; padding: 11px; margin-top: 4px; }
.login-card .alt { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 16px; }

/* ─────────────────────────────────────────────────────
   Public booking site (also rendered inside the iframe)
   ───────────────────────────────────────────────────── */
body.pub { background: #fdfcfd; }
.pub-wrap { max-width: 860px; margin: 0 auto; padding: 22px 18px 60px; }
.pub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.pub-head .wordmark { display: flex; align-items: center; }
.pub-head .wordmark img { display: block; height: 24px; width: auto; }
.pub-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pub-nav a { padding: 7px 13px; border-radius: 999px; font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.pub-nav a:hover { background: var(--rose-soft); text-decoration: none; }
.pub-nav a.active { background: var(--rose); color: #fff; }
.pub-nav .who { font-size: 12.5px; color: var(--muted); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }

/* ── Spa / Treatments chooser (animated dropdown) ──── */
.booking-switch { position: relative; display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; }
.booking-switch .bs-label { font-family: var(--serif); font-size: 20px; color: var(--ink); }
.bs-toggle {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  background: #fff; border: 1px solid var(--rule); border-radius: 11px;
  padding: 10px 16px; font: inherit; font-weight: 600; font-size: 15px; color: var(--ink);
  box-shadow: var(--shadow-sm); transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.12s ease;
}
.bs-toggle:hover { border-color: var(--rose); }
.bs-toggle:active { transform: scale(0.98); }
.booking-switch.is-treatments .bs-toggle { background: var(--pink-soft); border-color: var(--pink-rule); color: var(--pink-deep); }
.bs-caret { font-size: 11px; color: var(--muted); transition: transform 0.22s ease; }
.booking-switch.open .bs-caret { transform: rotate(180deg); }

.bs-menu {
  position: absolute; top: calc(100% + 6px); left: 132px; z-index: 40;
  min-width: 248px; background: #fff; border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(111,93,71,0.16); overflow: hidden;
  opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: top left;
  pointer-events: none; transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22,1,0.36,1);
}
.booking-switch.open .bs-menu { opacity: 1; transform: none; pointer-events: auto; }
.bs-opt { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.bs-opt .bs-sub { font-weight: 400; font-size: 12px; color: var(--muted); }
.bs-opt:hover { background: var(--rose-soft); text-decoration: none; }
.bs-opt.active { background: var(--rose-soft); }
.bs-opt.bs-treat:hover, .bs-opt.bs-treat.active { background: var(--pink-soft); color: var(--pink-deep); }
.bs-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pink-deep); margin-left: 3px; vertical-align: middle; }
@media (max-width: 560px) { .bs-menu { left: 0; } .booking-switch { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .bs-menu, .bs-caret, .bs-toggle { transition: none; } }

/* ── Treatments menu (pastel pink) ─────────────────── */
.treat-wrap { animation: day-rise 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.treat-intro h1 { font-family: var(--serif); font-size: 30px; color: var(--ink); margin-bottom: 4px; }
.treat-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.treat-chip { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-soft); background: var(--pink-soft); border: 1px solid var(--pink-rule); }
.treat-chip:hover { background: var(--pink); text-decoration: none; }
.treat-chip.active { background: var(--pink-deep); color: #fff; border-color: var(--pink-deep); }
.treat-search { display: flex; gap: 8px; margin: 16px 0 6px; flex-wrap: wrap; }
.treat-search input { flex: 1; min-width: 220px; padding: 10px 14px; border: 1px solid var(--pink-rule); border-radius: 10px; font: inherit; font-size: 15px; }
.treat-search input:focus { outline: none; border-color: var(--pink-deep); }
.treat-datebanner { background: var(--pink-soft); border: 1px solid var(--pink-rule); border-radius: 10px; padding: 11px 15px; font-size: 14px; color: var(--ink); margin: 16px 0 6px; }
.treat-datebanner strong { color: var(--pink-deep); }
.treat-section { border-bottom: 1px solid var(--pink-rule); }
.treat-section:first-of-type { border-top: 1px solid var(--pink-rule); }
.treat-sec-head {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 16px 4px; font-family: var(--serif); font-size: 22px; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.treat-sec-head::-webkit-details-marker { display: none; }
.treat-sec-head::after {
  content: ''; flex: none; width: 11px; height: 11px; margin-left: 2px;
  border-right: 2px solid var(--pink-deep); border-bottom: 2px solid var(--pink-deep);
  transform: rotate(45deg); transition: transform 0.22s ease;
}
.treat-section[open] > .treat-sec-head::after { transform: rotate(225deg); }
.treat-sec-head:hover { color: var(--pink-deep); }
.treat-sec-count {
  margin-left: auto; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500;
  color: var(--pink-deep); background: var(--pink-soft); border-radius: 999px; padding: 3px 11px;
}
.treat-section[open] > .treat-grid { padding: 2px 0 20px; }
.treat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.treat-card {
  display: block; position: relative; background: #fff; border: 1px solid var(--pink-rule);
  border-radius: 12px; padding: 15px 16px; box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.treat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(111,93,71,0.18); border-color: var(--pink-deep); text-decoration: none; }
.treat-card .tc-name { font-weight: 600; color: var(--ink); font-size: 14.5px; line-height: 1.3; }
.treat-card .tc-meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; }
.treat-card .tc-dur { font-size: 12px; color: var(--muted); }
.treat-card .tc-price { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--pink-deep); }
.tc-badge { display: inline-block; margin-top: 9px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pink-deep); background: var(--pink-soft); border-radius: 999px; padding: 3px 9px; }

.treat-detail .td-cat { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink-deep); margin-bottom: 4px; }
.treat-detail h1 { font-family: var(--serif); font-size: 28px; }
.treat-detail .td-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0 16px; }
.treat-detail .td-price { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--pink-deep); }
.treat-detail .td-dur { color: var(--muted); font-size: 14px; }
.treat-detail .td-desc { white-space: pre-line; color: var(--body); margin-bottom: 20px; }
.btn.btn-pink { background: var(--pink-deep); border-color: var(--pink-deep); color: #fff; }
.btn.btn-pink:hover { background: var(--rose-deep); }
body.pub.treatments { background: #fdfcfd; }

/* Treatment time slots */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot-btn {
  padding: 11px 8px; border: 1px solid var(--pink-rule); background: #fff; border-radius: 10px;
  font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.slot-btn:hover { background: var(--pink-soft); border-color: var(--pink-deep); color: var(--pink-deep); transform: translateY(-1px); }
.slot-btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .slot-btn { transition: none; } }

/* ── Booking date picker (public landing) ──────────── */
.dp-card {
  background: #fbf6f2; border: 1px solid var(--rule); border-radius: 14px;
  padding: 18px 18px 12px; margin-bottom: 26px;
  box-shadow: 0 8px 28px rgba(111,93,71,0.07);
  animation: dp-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dp-head strong { font-size: 16px; color: var(--ink); }
.dp-nav { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: var(--ink-soft); font-size: 16px; transition: background-color 0.18s ease, transform 0.18s ease; }
.dp-nav:hover { background: var(--rose-soft); text-decoration: none; transform: scale(1.1); }
.dp-nav:active { transform: scale(0.92); }
.dp-nav.off { opacity: 0.25; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dp-wd { text-align: center; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; }
.dp-day {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 52px; border-radius: 9px; font-size: 13.5px; color: var(--ink);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}
.dp-day.blank { visibility: hidden; }
.dp-day.off { color: var(--muted); opacity: 0.45; }
.dp-day.open { background: var(--rose-soft); font-weight: 600; }
.dp-day.open:hover { background: var(--rose); color: #fff; text-decoration: none; transform: translateY(-2px) scale(1.08); box-shadow: 0 6px 14px rgba(199,141,134,0.4); z-index: 2; }
.dp-day.open:hover .dp-dot { background: #fff; }
.dp-day.open:active { transform: translateY(0) scale(0.95); }
.dp-day.open.selected { background: var(--rose); color: #fff; box-shadow: 0 4px 12px rgba(199,141,134,0.45); animation: dp-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dp-day.open.selected .dp-dot { background: #fff; animation: dp-breathe 2.4s ease-in-out infinite; }
.dp-day.today { box-shadow: inset 0 0 0 1.5px var(--rose-deep); }
.dp-day .dp-dot { position: absolute; bottom: 5px; }
.dp-day.all-full { background: rgba(111,93,71,0.08); color: var(--muted); font-weight: 500; }
.dp-day.all-full .dp-dot { background: var(--muted); }
.dp-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--rose); transition: background-color 0.18s ease; }
.dp-legend { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }

@keyframes dp-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dp-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes dp-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.8); } }
@keyframes day-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dp-cell-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes underline-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes head-settle { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* The month "deals in": cells cascade left-to-right, top-to-bottom */
.dp-grid .dp-day { animation: dp-cell-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 9ms); }
/* On an in-place swap (date change) the calendar updates instantly — no re-deal */
.dp-card.no-anim, .dp-card.no-anim .dp-day { animation: none !important; }

/* The chosen day's heading draws its own underline */
.day-group h3 { position: relative; display: inline-block; padding-bottom: 6px; }
.day-group h3::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--rose); transform-origin: left;
  animation: underline-grow 0.5s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Public header settles in from above */
.pub-head { animation: head-settle 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Buttons: lift on hover, press on tap (public + admin alike) */
.btn { transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); }

/* App-like cross-fade between pages where the browser supports it */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.16s; }
.dp-card { view-transition-name: booking-calendar; }

html { scroll-behavior: smooth; }

/* The chosen day's options glide in, one after another */
.day-group h3 { animation: day-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.day-group .sess-card, .day-group .pub-card { animation: day-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.day-group .sess-card:nth-child(2) { animation-delay: 0.05s; }
.day-group .sess-card:nth-child(3) { animation-delay: 0.1s; }
.day-group .sess-card:nth-child(4) { animation-delay: 0.15s; }
.day-group .sess-card:nth-child(5) { animation-delay: 0.2s; }
.day-group .sess-card:nth-child(6) { animation-delay: 0.25s; }
.day-group .sess-card:nth-child(7) { animation-delay: 0.3s; }
.day-group .sess-card:nth-child(n+8) { animation-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .dp-card, .dp-day, .dp-nav, .dp-day.open.selected, .dp-day.open.selected .dp-dot,
  .dp-grid .dp-day, .day-group h3, .day-group h3::after, .day-group .sess-card,
  .day-group .pub-card, .pub-head, .btn { animation: none; transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html { scroll-behavior: auto; }
}
.filters select { padding: 8px 11px; border: 1px solid var(--rule); border-radius: 8px; font-family: inherit; font-size: 13px; background: #fff; color: var(--ink); }

.day-group { margin-bottom: 26px; }
.day-group h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.sess-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fbf6f2; border: 1px solid var(--rule); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 10px; box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.sess-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(111,93,71,0.12); border-color: var(--rose); }
/* Sold out: greyed, no hover lift, clear label */
.sess-card.sold-out { opacity: 0.6; background: var(--paper-2); }
.sess-card.sold-out:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--rule); }
.sess-card .cap.sold { color: var(--danger); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; }
@media (prefers-reduced-motion: reduce) { .sess-card { transition: none; } .sess-card:hover { transform: none; } }
.sess-card .time { font-weight: 600; color: var(--ink); font-size: 15px; min-width: 88px; }
.sess-card .meta { flex: 1; }
.sess-card .meta .title { font-weight: 600; color: var(--ink); }
.sess-card .meta .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.sess-card .right { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.cap { font-size: 12px; color: var(--muted); }

/* ── Package cards ─────────────────────────────────── */
.pkg-section { margin-bottom: 30px; }
.pkg-section h3 { font-family: var(--serif); font-size: 22px; margin-bottom: 12px; }
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.pkg {
  background: #fff; border: 1px solid var(--rule); border-radius: 12px;
  padding: 18px 18px 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.pkg .name { font-weight: 600; color: var(--ink); font-size: 15px; }
.pkg .price { font-family: var(--serif); font-size: 26px; color: var(--rose-deep); font-weight: 600; margin: 6px 0; }
.pkg .price small { font-size: 13px; color: var(--muted); font-family: 'Poppins'; }
.pkg .desc { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; flex: 1; }
.pkg .btn { width: 100%; text-align: center; }

/* ── Public detail / forms ─────────────────────────── */
.pub-card { background: #fbf6f2; border: 1px solid var(--rule); border-radius: 14px; padding: 26px; box-shadow: var(--shadow-sm); }
.pub-card h1 { font-family: var(--serif); font-size: 30px; margin-bottom: 6px; }
.pub-card .when { color: var(--rose-deep); font-weight: 500; margin-bottom: 14px; }
.pub-card .desc { white-space: pre-line; color: var(--body); margin-bottom: 18px; }
.auth-card { max-width: 420px; margin: 30px auto; }
.muted { color: var(--muted); }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.list-row:last-child { border-bottom: none; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--rose-soft); color: var(--rose-deep); }

/* Mobile menu controls (hidden on desktop) */
.nav-toggle { display: none; background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer; padding: 4px 10px 4px 0; }
.nav-overlay { display: none; }

/* ─────────────────────────────────────────────────────
   Responsive — mobile first priority
   ───────────────────────────────────────────────────── */

/* Admin: off-canvas drawer + single column on tablet/phone */
@media (max-width: 860px) {
  .app { display: block; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 250px; z-index: 60;
    transform: translateX(-100%); transition: transform 0.22s ease;
    box-shadow: 0 0 40px rgba(0,0,0,0.3);
  }
  .sidebar.open { transform: translateX(0); }
  .nav-overlay.show {
    display: block; position: fixed; inset: 0; background: rgba(34,34,33,0.5); z-index: 55;
  }
  .header { position: sticky; top: 0; }
  main { padding: 20px 18px 56px; }
  .stats { grid-template-columns: 1fr 1fr; }
  /* Wide tables scroll horizontally instead of breaking the layout */
  .panel .table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Phones */
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; gap: 10px; }
  .page-title { flex-wrap: wrap; }
  .page-title h2 { font-size: 21px; }
  main { padding: 16px 14px 48px; }

  /* Tidy the admin header: drop name/avatar, keep actions on one line */
  .header { padding: 0 14px; }
  .header h1 { font-size: 16px; }
  .header .user .name, .header .user .avatar { display: none; }
  .header .user { gap: 14px; }
  .header .logout { white-space: nowrap; }

  /* Bigger tap targets */
  .btn { padding: 11px 16px; }
  .btn.sm { padding: 8px 12px; }

  /* Public booking site */
  .pub-wrap { padding: 16px 14px 48px; }
  .pub-head { flex-wrap: wrap; gap: 10px; }
  .pub-head .wordmark img { height: 20px; }
  .dp-day { height: 44px; }
  .dp-card { padding: 14px 12px 10px; }
  .pub-nav { width: 100%; gap: 4px; }
  .pub-nav a, .pub-nav button { padding: 9px 12px; }
  .filters { gap: 6px; }
  .filters select { flex: 1; min-width: 0; }

  .day-group h3 { font-size: 19px; }
  /* Session cards: let the action wrap below on very narrow screens */
  .sess-card { flex-wrap: wrap; gap: 8px 12px; padding: 13px 15px; }
  .sess-card .time { min-width: 70px; font-size: 14px; }
  .sess-card .meta { flex: 1 1 60%; }
  .sess-card .right { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; }
  .sess-card .right .btn { flex: 0 0 auto; }

  .pkg-grid { grid-template-columns: 1fr; }
  .pub-card { padding: 20px 18px; }
  .pub-card h1 { font-size: 25px; }

  /* Booking actions stack full-width — easier thumbs */
  .pub-card form .btn { display: block; width: 100%; margin: 0 0 8px; text-align: center; }

  /* Account rows (upcoming bookings) can wrap rather than crush */
  .list-row { flex-wrap: wrap; }

  /* Calendar controls: bigger tap targets */
  .dp-nav { width: 40px; height: 40px; }
  .cal-toggle a { padding: 9px 14px; }

  /* Treatments menu: full-width search, single-column cards, roomy accordion taps */
  .treat-search { gap: 8px; }
  .treat-search input { flex: 1 1 100%; min-width: 0; font-size: 16px; }
  .treat-search .btn { flex: 1 1 auto; }
  .treat-cats { gap: 6px; }
  .treat-chip { padding: 8px 13px; }
  .treat-sec-head { font-size: 19px; padding: 15px 2px; }
  .treat-grid { grid-template-columns: 1fr; }
  .treat-card { padding: 14px 15px; }
  .treat-datebanner { font-size: 13px; }
}

/* Smooth momentum scrolling for the sideways-scrolling surfaces on iOS */
.cal-scroll, .panel .table { -webkit-overflow-scrolling: touch; }

/* Stop iOS zooming the page when a form field is focused (needs >=16px) */
@media (max-width: 860px) {
  .field input, .field textarea, .field select,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="datetime-local"], input[type="search"],
  textarea, select { font-size: 16px; }
}

/* ─────────────────────────────────────────────────────
   Phones: stack admin data tables into labelled cards so every column
   (and its action buttons) is reachable without sideways scrolling.
   Each cell gets its column header as a data-label (injected in tail.ejs).
   ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .panel .table { display: block; overflow: visible; white-space: normal; border-collapse: separate; }
  .panel .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .panel .table tbody, .panel .table tr, .panel .table td { display: block; width: auto; }
  .panel .table tr {
    border: 1px solid var(--rule); border-radius: 10px; margin: 0 0 12px; padding: 4px 2px;
    background: #fff; box-shadow: var(--shadow-sm);
  }
  .panel .table tr:hover td { background: transparent; }
  .panel .table td {
    border: none; border-bottom: 1px solid var(--paper-2); padding: 9px 13px; white-space: normal;
    display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 22px;
  }
  .panel .table tr td:last-child { border-bottom: none; }
  .panel .table td::before {
    content: attr(data-label); font-weight: 600; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted); flex: 0 0 34%; text-align: left;
  }
  .panel .table td[data-label=""]::before { content: none; }
  .panel .table td:empty { display: none; }
  /* let forms/buttons inside a cell sit to the right and wrap if needed */
  .panel .table td form, .panel .table td .btn { margin: 0; }
  .panel .table td > form { flex: 1 1 auto; justify-content: flex-end; }
}

/* Long keys / URLs in code blocks never push the page wide */
code { overflow-wrap: anywhere; }