/* ============================================================
   Cast Iron Pizza – Reservation System Stylesheet
   Theming: light mode, matching castironpizzalyh.com — warm cream
   & white surfaces, terracotta accent, dark-slate hero/sidebar
   ============================================================ */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cip-cream:    #fef8f7;
  --cip-warm:     #ffffff;
  --cip-black:    #201c1a;
  --cip-dark:     #2b2e35;
  --cip-brown:    #6b5a4d;
  --cip-brown-hover:#59493e;
  --cip-red:      #c13f1d;
  --cip-red-hover:#a3341d;
  --cip-orange:   #9c5015;
  --cip-muted:    #6e6259;
  --cip-muted-on-dark: #cfc6bd;
  --cip-border:   #e7dcd2;
  --cip-placeholder: #a89e94;

  --radius:       6px;
  --shadow:       0 4px 18px rgba(32,22,14,0.12);
  --transition:   0.18s ease;

  --font-serif:   'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:    'Spline Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background-color: var(--cip-cream);
  color: var(--cip-black);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--cip-orange); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Site header ---------- */
.site-header {
  background: var(--cip-warm);
  border-bottom: 2px solid var(--cip-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo { height: 52px; }
.logo-link { display: flex; align-items: center; gap: 0.5rem; }
.logo-text {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--cip-black);
  font-weight: bold;
  letter-spacing: 0.04em;
}

.site-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.site-nav a {
  font-size: 0.9rem;
  color: var(--cip-black);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  opacity: 0.8;
  transition: opacity var(--transition);
  text-decoration: none;
}
.site-nav a:hover, .site-nav a.active { opacity: 1; color: var(--cip-orange); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--cip-border);
  border-radius: var(--radius);
  color: var(--cip-black);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.5rem 0.7rem;
}

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .header-inner { flex-wrap: wrap; }
  .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding-top: 0.5rem;
  }
  .site-nav.open { display: flex; }
  .site-nav a {
    padding: 0.7rem 0.25rem;
    border-top: 1px solid var(--cip-border);
  }
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--cip-red) 0%, var(--cip-dark) 70%);
  padding: 4rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 12px
    );
}

.hero-overlay { position: relative; z-index: 1; }

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--cip-warm);
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
  margin-bottom: 0.75rem;
}

.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: rgba(255,255,255,0.88);
  max-width: 540px;
  margin: 0 auto;
}

/* ---------- Form section ---------- */
.form-section { flex: 1; padding: 2.5rem 1.5rem; }

.form-container {
  max-width: 680px;
  margin: 0 auto;
  background: var(--cip-warm);
  border: 1px solid var(--cip-border);
  border-radius: var(--radius);
  padding: 2rem 2.5rem;
  box-shadow: var(--shadow);
}

.form-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--cip-black);
  margin-bottom: 1.5rem;
}

.optional-label {
  font-size: 0.85rem;
  font-family: var(--font-sans);
  color: var(--cip-muted);
  font-weight: normal;
}

.step-description {
  color: var(--cip-muted);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* Form layout */
.form-step { display: block; }
.form-step.hidden { display: none !important; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 520px) {
  .form-row { grid-template-columns: 1fr; }
  .form-container { padding: 1.5rem 1rem; }
}

.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group.full-width { margin-bottom: 1rem; }

label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cip-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.required { color: var(--cip-red); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="password"],
input[type="number"],
select,
textarea {
  background: var(--cip-cream);
  border: 1px solid var(--cip-border);
  border-radius: var(--radius);
  color: var(--cip-black);
  font-size: 1rem;
  font-family: var(--font-sans);
  padding: 0.6rem 0.85rem;
  width: 100%;
  transition: border-color var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cip-orange);
  box-shadow: 0 0 0 2px rgba(156,80,21,0.2);
}

input::placeholder, textarea::placeholder { color: var(--cip-placeholder); }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath fill='%236e6259' d='M0 0l6 7 6-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

textarea { resize: vertical; min-height: 80px; }

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.form-actions.two-col {
  justify-content: space-between;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.65rem 1.5rem;
  transition: background var(--transition), transform 0.1s;
  text-decoration: none;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--cip-red);
  color: var(--cip-warm);
}
.btn-primary:hover { background: var(--cip-red-hover); text-decoration: none; }

.btn-secondary {
  background: var(--cip-brown);
  color: var(--cip-warm);
}
.btn-secondary:hover { background: var(--cip-brown-hover); text-decoration: none; }

.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.btn-full { width: 100%; }

/* ---------- Pizza grid ---------- */
.pizza-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.pizza-card {
  background: var(--cip-warm);
  border: 2px solid var(--cip-border);
  border-radius: var(--radius);
  padding: 0.85rem 0.75rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  user-select: none;
}

.pizza-card:hover { border-color: var(--cip-orange); }
.pizza-card.selected { border-color: var(--cip-red); background: rgba(193,63,29,0.08); }

.pizza-card-icon { font-size: 2rem; margin-bottom: 0.35rem; display: block; }
.pizza-card-name { font-size: 0.82rem; font-weight: 600; color: var(--cip-black); line-height: 1.3; }

/* ---------- Confirmation ---------- */
.confirmation-box { text-align: center; }
.confirmation-icon { font-size: 4rem; margin-bottom: 1rem; }

.confirmation-details {
  background: var(--cip-cream);
  border: 1px solid var(--cip-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.8;
}

.confirmation-details .detail-row {
  display: flex;
  gap: 0.5rem;
}

.confirmation-details .detail-label {
  color: var(--cip-muted);
  min-width: 110px;
  font-weight: 600;
}

.confirmation-note {
  color: var(--cip-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ---------- Error box ---------- */
.error-box {
  text-align: center;
  padding: 1.5rem;
  background: #fbe4df;
  border: 1px solid var(--cip-red);
  border-radius: var(--radius);
}

.error-box p { color: #8a1f14; margin-bottom: 1rem; }

/* ---------- Site footer ---------- */
.site-footer {
  background: var(--cip-warm);
  border-top: 1px solid var(--cip-border);
  text-align: center;
  padding: 1.5rem;
  color: var(--cip-muted);
  font-size: 0.85rem;
  line-height: 1.8;
  margin-top: auto;
}

.footer-small { font-size: 0.75rem; opacity: 0.7; }

/* ---------- Admin – login page ---------- */
.admin-body {
  background: var(--cip-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.admin-login-wrapper {
  width: 100%;
  max-width: 380px;
  padding: 1rem;
}

.admin-login-card {
  background: var(--cip-warm);
  border: 1px solid var(--cip-border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.admin-login-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  text-align: center;
  color: var(--cip-black);
  margin-bottom: 1.75rem;
  line-height: 1.4;
}

.admin-logo-icon { display: block; font-size: 2.5rem; margin-bottom: 0.25rem; }

.login-error {
  background: #fbe4df;
  border: 1px solid var(--cip-red);
  border-radius: var(--radius);
  color: #8a1f14;
  font-size: 0.875rem;
  padding: 0.6rem 0.85rem;
  margin-bottom: 1rem;
}

/* ---------- Admin – dashboard ---------- */
.admin-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* The sidebar keeps the dark-slate accent from the brand palette for
   wayfinding contrast; the rest of the dashboard stays light like the
   public site. */
.admin-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: var(--cip-dark);
  border-right: 1px solid var(--cip-dark);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0;
}

.sidebar-logo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cip-warm);
  padding: 0 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 1rem;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.sidebar-link {
  display: block;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cip-muted-on-dark);
  text-decoration: none;
  text-transform: capitalize;
  transition: background var(--transition), color var(--transition);
  border-left: 3px solid transparent;
}
.sidebar-link:hover, .sidebar-link.active {
  background: rgba(255,255,255,0.08);
  color: var(--cip-warm);
  border-left-color: var(--cip-red);
  text-decoration: none;
}

/* A disabled section (Settings toggle off) stays clickable — "off" means
   not shown to customers, not locked from editing — just visually dimmed. */
.sidebar-link.disabled { opacity: 0.55; }
.sidebar-link-off {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cip-muted-on-dark);
  margin-left: 0.3rem;
}

.sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,0.12); }

.admin-main { flex: 1; overflow-x: auto; display: flex; flex-direction: column; background: var(--cip-cream); }

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--cip-border);
  background: var(--cip-warm);
  flex-wrap: wrap;
}

.admin-header-right { display: flex; align-items: center; gap: 0.5rem; }

.admin-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--cip-black);
}

.admin-date { font-size: 0.85rem; color: var(--cip-muted); margin-left: 0.75rem; }

.date-filter {
  background: var(--cip-cream);
  border: 1px solid var(--cip-border);
  border-radius: var(--radius);
  color: var(--cip-black);
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
}

/* Stats bar */
.stats-bar {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--cip-border);
  flex-wrap: wrap;
}

.stat-chip {
  background: var(--cip-cream);
  border: 1px solid var(--cip-border);
  border-radius: 20px;
  padding: 0.25rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cip-muted);
}

.stat-chip .stat-count { color: var(--cip-black); }

/* Table */
.table-wrapper { flex: 1; overflow-x: auto; padding: 1rem 1.5rem; }

.res-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.res-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cip-muted);
  border-bottom: 2px solid var(--cip-border);
  white-space: nowrap;
}

.res-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--cip-border);
  vertical-align: middle;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.res-table tr:hover td { background: rgba(32,28,26,0.035); }

.table-empty {
  text-align: center;
  padding: 2rem;
  color: var(--cip-muted);
}

/* Status badges */
.badge {
  display: inline-block;
  border-radius: 12px;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-pending   { background: #fbe6d4; color: #92450f; }
.badge-confirmed { background: #d9f2e2; color: #1e6b3c; }
.badge-seated    { background: #dcf0fb; color: #14587a; }
.badge-completed { background: #e8e6e4; color: #55524f; }
.badge-cancelled { background: #fbe1de; color: #8a1f14; }

/* Row actions */
.row-actions { display: flex; gap: 0.35rem; flex-wrap: nowrap; }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,16,13,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
}

.modal-overlay.hidden { display: none !important; }

.modal-card {
  background: var(--cip-warm);
  border: 1px solid var(--cip-border);
  border-radius: var(--radius);
  max-width: 520px;
  width: 100%;
  padding: 2rem;
  position: relative;
  box-shadow: var(--shadow);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  background: none;
  border: none;
  color: var(--cip-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem;
}
.modal-close:hover { color: var(--cip-black); }

.modal-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.modal-body { font-size: 0.9rem; line-height: 1.8; }
.modal-body .detail-row { display: flex; gap: 0.5rem; }
.modal-body .detail-label { color: var(--cip-muted); min-width: 120px; font-weight: 600; }

.modal-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cip-border);
}

/* ============================================================
   Marketing pages (home, menu, about, gallery)
   ============================================================ */

.main-content { flex: 1; }

/* ---------- Announcement bar ---------- */
.announcement {
  background: var(--cip-red);
  color: var(--cip-warm);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.6rem 1.25rem;
}
.announcement a { color: var(--cip-warm); text-decoration: underline; }

/* ---------- Home hero ---------- */
.hero-home {
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 1.5rem;
  background-color: var(--cip-dark);
}

.hero-home::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(43,46,53,0.62), rgba(43,46,53,0.88));
}

.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
}

.hero-slideshow img.active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-slideshow img { transition: none; }
}

.hero-home .hero-overlay { z-index: 2; }

.hero-home .hero-title { margin-bottom: 1rem; }

.hero-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

/* ---------- Generic sections ---------- */
.section { padding: 3.5rem 1.5rem; }
.section-alt { background: var(--cip-warm); }

.section-inner { max-width: 1100px; margin: 0 auto; }
.section-narrow { max-width: 720px; margin: 0 auto; }

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--cip-black);
  margin-bottom: 1rem;
}

.section-lead {
  color: var(--cip-muted);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.section-eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cip-orange);
  margin-bottom: 0.6rem;
}

/* Split section: text beside an image */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.split-reverse .split-media { order: 2; }

.split-media img,
.media-frame img {
  width: 100%;
  height: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--cip-border);
  display: block;
}

/* Placeholder shown when a photo has not been added yet */
.media-frame {
  background: var(--cip-cream);
  border: 1px dashed var(--cip-border);
  border-radius: var(--radius);
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cip-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}

@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; gap: 1.5rem; }
  .split-reverse .split-media { order: 0; }
}

/* ---------- Menu page ---------- */
.menu-note {
  color: var(--cip-muted);
  font-size: 0.875rem;
  margin-bottom: 2.5rem;
}

.menu-group { margin-bottom: 3rem; }

.menu-group-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--cip-black);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--cip-border);
}

.menu-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem 2.5rem;
  list-style: none;
}

.menu-item { padding-bottom: 0.25rem; }

.menu-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.menu-item-name {
  font-weight: 700;
  color: var(--cip-black);
  font-size: 1rem;
}

.menu-item-price {
  color: var(--cip-orange);
  font-weight: 700;
  white-space: nowrap;
}

.menu-item-desc {
  color: var(--cip-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-top: 0.2rem;
}

.menu-item-tag {
  display: inline-block;
  background: #d9f2e2;
  color: #1e6b3c;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.1rem 0.5rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Daily special callout */
.special-card {
  background: var(--cip-warm);
  border: 1px solid var(--cip-orange);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  box-shadow: var(--shadow);
}

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.gallery-grid figure { margin: 0; }

.gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--cip-border);
  display: block;
}

.gallery-grid figcaption {
  color: var(--cip-muted);
  font-size: 0.8rem;
  margin-top: 0.4rem;
}

/* ---------- Location & hours ---------- */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

@media (max-width: 800px) {
  .info-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

.info-block h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--cip-black);
  margin-bottom: 0.75rem;
}

.info-block p, .info-block address {
  color: var(--cip-muted);
  font-style: normal;
  line-height: 1.8;
}

.hours-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

.hours-table th {
  text-align: left;
  font-weight: 600;
  color: var(--cip-muted);
  padding: 0.35rem 0;
  width: 45%;
}

.hours-table td {
  text-align: right;
  color: var(--cip-black);
  padding: 0.35rem 0;
}

.hours-table tr.is-today th,
.hours-table tr.is-today td {
  color: var(--cip-orange);
  font-weight: 700;
}

.hours-table td.is-closed { color: var(--cip-muted); }

.open-status {
  display: inline-block;
  border-radius: 12px;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.85rem;
}
.open-status.open   { background: #d9f2e2; color: #1e6b3c; }
.open-status.closed { background: #fbe1de; color: #8a1f14; }

/* ---------- Closed-day notice on the booking form ---------- */
.slot-notice {
  background: rgba(156,80,21,0.1);
  border: 1px solid var(--cip-orange);
  border-radius: var(--radius);
  color: var(--cip-orange);
  font-size: 0.85rem;
  line-height: 1.6;
  padding: 0.7rem 0.9rem;
  margin-top: 0.5rem;
}

/* ---------- Footer additions ---------- */
.footer-nav {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.footer-nav a { color: var(--cip-black); opacity: 0.75; font-size: 0.85rem; }
.footer-nav a:hover { opacity: 1; }

/* ============================================================
   Motion: Cinematic & Bold
   Hero word-reveal, scroll-triggered content reveals, a subtle
   hero parallax drift, and native cross-page view transitions.
   Paired with public/js/motion-cinematic.js (loaded on every
   public page except /admin/). Respects prefers-reduced-motion
   throughout — see the override block at the end of this section.
   ============================================================ */

:root {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Hero title: word-by-word masked reveal ----------
   Spans are inserted by motion-cinematic.js; if that script never
   runs, .hero-title's plain text just renders normally. */
.cip-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.cip-word-inner {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  animation: cip-word-in 0.7s var(--ease) forwards;
}

@keyframes cip-word-in {
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- Hero subtitle + actions: fade up shortly after the title ----------
   Pure CSS, unconditional — plays on load whether or not the JS
   above runs, so these never get stuck invisible. */
.hero-subtitle,
.hero-actions {
  animation: cip-fade-up 0.8s var(--ease) both;
  animation-delay: 0.45s;
}

.hero-actions { animation-delay: 0.6s; }

@keyframes cip-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Scroll-triggered reveals for content blocks ----------
   .cip-reveal / .cip-reveal-in are added by motion-cinematic.js,
   and only when IntersectionObserver exists, so content is fully
   visible by default whenever the JS doesn't run. */
.cip-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.cip-reveal.cip-reveal-in {
  opacity: 1;
  transform: none;
}

/* ---------- Hero background: subtle parallax drift ----------
   Reuses the existing .hero::before diagonal-texture layer as the
   drifting element, so .hero-overlay content itself never moves.
   Oversized vertically (clipped by .hero's overflow:hidden) so the
   drift never exposes a hard edge at the top or bottom. */
.hero::before {
  top: -10%;
  bottom: -10%;
}

.hero.cip-parallax-active::before {
  transform: translate3d(0, var(--cip-parallax-y, 0px), 0);
  will-change: transform;
}

/* ---------- Booking form steps: small fade/rise each time a step shows ----------
   .form-step.hidden is display:none !important (existing rule
   above). Because of that, this animation replays automatically
   every time reservations.js removes .hidden — browsers restart a
   CSS animation when an element goes from display:none back to
   rendered, so no JS hook is needed for this one at all. */
.form-step {
  animation: cip-step-in 0.5s var(--ease);
}

@keyframes cip-step-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Cross-page transitions (native, CSS-only) ----------
   Wrapped in prefers-reduced-motion: no-preference so this is
   simply never enabled for guests who've asked for reduced motion.
   Browsers that don't understand @view-transition ignore this
   block and navigate normally — that IS the fallback, no extra
   code needed. Supported in Chromium browsers; other engines are
   catching up but degrade to a plain instant navigation either way. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* Header and footer are identical across pages: name them so the
     browser treats old-page/new-page instances as one persistent
     element instead of cross-fading the chrome along with everything
     else. */
  .site-header { view-transition-name: cip-header; }
  .site-footer { view-transition-name: cip-footer; }

  ::view-transition-old(root) { animation: cip-vt-out 0.35s ease both; }
  ::view-transition-new(root) { animation: cip-vt-in 0.5s var(--ease) both; }

  @keyframes cip-vt-out {
    to { opacity: 0; transform: scale(0.99); }
  }

  @keyframes cip-vt-in {
    from { opacity: 0; transform: scale(1.01) translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- Reduced motion: disable everything in this section ---------- */
@media (prefers-reduced-motion: reduce) {
  .cip-word-inner {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-subtitle,
  .hero-actions {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .cip-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero::before {
    transform: none !important;
  }

  .form-step {
    animation: none !important;
  }
}

/* ============================================================
   Message-of-the-day popups
   Built at runtime by public/js/motd.js, reusing the .modal-overlay/
   .modal-card shell above. Rich content (.motd-body) comes from
   src/sanitizeContent.js's allow-listed tag set — styled here so it
   reads as intentional rather than raw browser defaults.
   ============================================================ */
.motd-card {
  animation: cip-motd-in 0.4s var(--ease) both;
}

@keyframes cip-motd-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* .motd-no-motion is set by motd.js when it already checked
   prefers-reduced-motion once via matchMedia (belt-and-suspenders with the
   media-query override below, same pattern as motion-cinematic.js). */
.motd-no-motion .motd-card { animation: none; }

.motd-body p { margin-bottom: 0.75rem; }
.motd-body p:last-child { margin-bottom: 0; }
.motd-body ul, .motd-body ol { margin: 0.5rem 0 0.75rem 1.25rem; }
.motd-body blockquote {
  border-left: 3px solid var(--cip-border);
  padding-left: 0.75rem;
  color: var(--cip-muted);
  margin: 0.75rem 0;
}
.motd-body a { color: var(--cip-orange); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .motd-card { animation: none !important; }
}

/* Utility */
.hidden { display: none !important; }
.text-center { text-align: center; }
/* Booking-form honeypot: off-screen rather than display:none, which some
   bots know to skip. */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Booking widget (/book/) ----------
   A slim standalone page; when framed (html.in-frame, set inline before
   first paint) it drops its header and card chrome and lets the host page
   provide the surroundings. */
.widget-header {
  background: var(--cip-warm);
  border-bottom: 2px solid var(--cip-border);
  padding: 0.9rem 1rem;
  text-align: center;
}
.widget-brand {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.widget-sub { font-size: 0.85rem; color: var(--cip-muted); }

.widget-page .form-section { padding: 1.5rem 1rem; }

html.in-frame,
html.in-frame body { background: transparent; min-height: 0; }
html.in-frame .widget-header { display: none; }
html.in-frame .widget-page .form-section { padding: 0; }
html.in-frame .widget-page .form-container {
  max-width: none;
  border: 0;
  box-shadow: none;
  padding: 1rem;
}

/* ---------- Large-party request pop-up ----------
   Built by public/js/party-request.js on the booking pages. */
.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--cip-orange);
  cursor: pointer;
  text-decoration: underline;
}
.party-request-card { max-width: 620px; text-align: left; }
.party-request-card .form-actions { margin-top: 1rem; }
.pr-error { color: #8a1f14; font-size: 0.9rem; margin-top: 0.75rem; }

/* ---------- Booking widget steps (public/js/reservations.js) ----------
   People -> Date -> Time -> Details, laid out like the resOS widget it
   replaces, in the site's own palette. */
.booking-app { max-width: 560px; }
.bk-loading, .bk-empty { color: var(--cip-muted); text-align: center; margin: 1.5rem 0; line-height: 1.6; }
.bk-notice {
  background: #fbe6d4; color: #7a3a0c; border-radius: var(--radius);
  padding: 0.6rem 0.85rem; margin-bottom: 1rem; font-size: 0.9rem;
}

.bk-stepper {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0 0 1.75rem; padding: 0; counter-reset: none;
}
.bk-step { position: relative; text-align: center; font-size: 0.8rem; color: var(--cip-muted); }
.bk-step::before {
  /* connector line to the previous step */
  content: ''; position: absolute; top: 1.05rem; right: 50%; width: 100%;
  border-top: 2px solid var(--cip-border); z-index: 0;
}
.bk-step:first-child::before { display: none; }
.bk-step.is-done::before, .bk-step.is-active::before { border-color: var(--cip-red); }
.bk-step button {
  all: unset; cursor: pointer; display: block; width: 100%;
}
.bk-step button:focus-visible .bk-step-num { outline: 2px solid var(--cip-orange); outline-offset: 2px; }
.bk-step-num {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--cip-border); color: var(--cip-muted); font-weight: 700;
  transition: background var(--transition), color var(--transition);
}
.bk-step.is-active .bk-step-num { background: var(--cip-red); color: #fff; }
.bk-step.is-done .bk-step-num { background: var(--cip-brown); color: #fff; }
.bk-step-label { display: block; margin-top: 0.4rem; line-height: 1.25; }
.bk-step.is-active .bk-step-label, .bk-step.is-done .bk-step-label { color: var(--cip-black); font-weight: 600; }

.bk-title {
  font-family: var(--font-serif); font-size: 1.6rem; text-align: center;
  margin-bottom: 1.25rem; outline: none;
}
.bk-body h3 {
  font-family: var(--font-serif); font-size: 1.1rem; margin: 1rem 0 0.6rem; text-align: center;
}

/* People */
.bk-people { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; }
.bk-circle {
  width: 4.25rem; height: 4.25rem; border-radius: 50%;
  border: 2px solid transparent; background: var(--cip-cream);
  font: inherit; font-size: 1.35rem; color: var(--cip-black); cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.bk-circle:hover { background: #f6e6e0; transform: translateY(-1px); }
.bk-circle.is-selected { background: var(--cip-red); color: #fff; }
.bk-more { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; color: var(--cip-muted); }

/* Date */
.bk-calendar.is-loading .bk-days { opacity: 0.45; }
.bk-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; margin-bottom: 0.6rem;
}
.bk-cal-nav {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--cip-border);
  background: var(--cip-warm); font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--cip-black);
}
.bk-cal-nav:disabled { opacity: 0.35; cursor: default; }
.bk-weekdays, .bk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; }
.bk-weekdays span { text-align: center; font-size: 0.75rem; color: var(--cip-muted); padding-bottom: 0.25rem; }
.bk-day {
  aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent;
  background: var(--cip-cream); font: inherit; font-size: 0.95rem; cursor: pointer; color: var(--cip-black);
  transition: background var(--transition);
}
.bk-day:hover:not(:disabled) { background: #f6e6e0; }
.bk-day:disabled { background: transparent; color: #c9bfb6; cursor: default; text-decoration: line-through; }
.bk-day.is-today { border-color: var(--cip-border); }
.bk-day.is-selected { background: var(--cip-red); color: #fff; }
.bk-day.is-blank { background: none; }

/* Time */
.bk-service + .bk-service { margin-top: 0.5rem; }
.bk-times { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.bk-time {
  min-width: 6.25rem; padding: 0.7rem 1rem; border-radius: 999px;
  border: 2px solid var(--cip-border); background: var(--cip-warm);
  font: inherit; font-weight: 600; cursor: pointer; color: var(--cip-black);
  transition: border-color var(--transition), background var(--transition);
}
.bk-time:hover { border-color: var(--cip-red); }
.bk-time.is-selected { background: var(--cip-red); border-color: var(--cip-red); color: #fff; }

/* Details */
.bk-summary { text-align: center; color: var(--cip-muted); margin: -0.5rem 0 1.25rem; }
.bk-pizzas { margin: 0.5rem 0 1rem; }
.bk-pizzas summary { cursor: pointer; font-weight: 600; margin-bottom: 0.5rem; }
.bk-pizza-grid { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.bk-pizza {
  padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid var(--cip-border);
  background: var(--cip-cream); font: inherit; font-size: 0.85rem; cursor: pointer; color: var(--cip-black);
}
.bk-pizza.is-selected { background: var(--cip-brown); border-color: var(--cip-brown); color: #fff; }
.bk-submit { width: 100%; }

@media (max-width: 480px) {
  .bk-circle { width: 3.6rem; height: 3.6rem; font-size: 1.2rem; }
  .bk-title { font-size: 1.35rem; }
  .bk-step-label { font-size: 0.72rem; }
}

/* ---------- Admin: Schedule & Tables (public/admin/schedule.html) ----------
   A timeline per service (rows = tables, blocks = seatings), plus friendly
   controls for tables, opening hours, closures and rules. */
.sched { padding: 1rem 1.5rem 6rem; max-width: 1100px; }
.sched-section {
  background: var(--cip-warm); border: 1px solid var(--cip-border); border-radius: 10px;
  padding: 1.25rem 1.5rem; margin-top: 1rem;
}
.sched-section h2 { font-family: var(--font-serif); font-size: 1.45rem; margin-bottom: 0.25rem; }
.sched-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; }
.sched-help { color: var(--cip-muted); font-size: 0.88rem; line-height: 1.5; max-width: 62ch; margin-bottom: 0.75rem; }
.sched-subhead { font-family: var(--font-serif); font-size: 1.1rem; margin: 1.25rem 0 0.2rem; }
.sched-empty { color: var(--cip-muted); font-style: italic; margin: 0.5rem 0; }
.sched-error { color: #8a1f14; margin: 0.75rem 0; }
.sched select, .sched input[type="text"], .sched input[type="date"] {
  font: inherit; font-size: 0.95rem; padding: 0.5rem 0.65rem; min-height: 2.4rem;
  border: 1px solid var(--cip-border); border-radius: 8px; background: #fff; color: var(--cip-black);
}
.link-button.danger { color: #8a1f14; }

/* Day and table pills */
.day-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.day-pill {
  font: inherit; font-size: 0.85rem; font-weight: 600; min-width: 2.9rem; padding: 0.4rem 0.7rem;
  border-radius: 999px; border: 1px solid var(--cip-border); background: var(--cip-cream);
  color: var(--cip-muted); cursor: pointer; transition: background var(--transition), color var(--transition);
}
.day-pill[aria-pressed="true"] { background: var(--cip-red); border-color: var(--cip-red); color: #fff; }

/* Toggle switch */
.switch { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; white-space: nowrap; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span {
  position: relative; width: 2.4rem; height: 1.35rem; border-radius: 999px; background: #d8cfc6;
  transition: background var(--transition); flex: none;
}
.switch span::after {
  content: ''; position: absolute; top: 0.15rem; left: 0.15rem; width: 1.05rem; height: 1.05rem;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform var(--transition);
}
.switch input:checked + span { background: #2f7d4f; }
.switch input:checked + span::after { transform: translateX(1.05rem); }
.switch input:focus-visible + span { outline: 2px solid var(--cip-orange); outline-offset: 2px; }

/* Service cards */
.svc { border: 1px solid var(--cip-border); border-radius: 10px; padding: 1rem 1.1rem 0.75rem; margin-bottom: 1rem; background: #fffdfc; }
.svc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 0.9rem; }
.svc-name { font-family: var(--font-serif); font-size: 1.3rem !important; font-weight: 700; flex: 1 1 12rem; max-width: 18rem; }
.svc-actions { margin-left: auto; display: flex; gap: 1rem; font-size: 0.85rem; }
.svc-summary { list-style: none; margin: 0.75rem 0 0.25rem; font-size: 0.88rem; color: var(--cip-muted); display: grid; gap: 0.2rem; }
.svc-summary strong { color: var(--cip-black); }

/* Timeline */
.tl { --label: 9.5rem; --lane: 2.6rem; }
.tl-axis { display: grid; grid-template-columns: var(--label) 1fr; height: 1.4rem; }
.tl-ticks { position: relative; }
.tl-ticks span {
  position: absolute; transform: translateX(-50%); font-size: 0.72rem; color: var(--cip-muted); white-space: nowrap;
}
.tl-ticks span:first-child { transform: none; }
.tl-ticks span:last-child { transform: translateX(-100%); }
.tl-row { display: grid; grid-template-columns: var(--label) 1fr; align-items: stretch; border-top: 1px solid var(--cip-border); }
.tl-label { padding: 0.45rem 0.75rem 0.45rem 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.tl-label strong { font-size: 0.95rem; }
.tl-label span { font-size: 0.75rem; color: var(--cip-muted); }
.tl-fill { font-size: 0.78rem; align-self: flex-start; margin-top: 0.15rem; }
.tl-track {
  position: relative; min-height: calc(var(--lanes, 1) * var(--lane) + 0.5rem); cursor: copy;
  background-image: repeating-linear-gradient(to right, rgba(107,90,77,0.14) 0 1px, transparent 1px calc(100% / var(--hours)));
  background-color: rgba(254,248,247,0.6);
}
.tl-empty {
  position: absolute; inset: 0; display: flex; align-items: center; padding-left: 0.75rem;
  font-size: 0.8rem; color: var(--cip-placeholder); pointer-events: none;
}
.tl-block {
  position: absolute; margin-top: 0.25rem; height: calc(var(--lane) - 0.3rem);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--cip-red); color: #fff; border: 0; border-radius: 7px;
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: grab; touch-action: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15); border-left: 2px solid #fff; border-right: 2px solid #fff;
}
.tl-block:hover { background: var(--cip-red-hover); }
.tl-block:focus-visible { outline: 3px solid var(--cip-orange); outline-offset: 1px; z-index: 2; }
.tl-block.is-dragging { cursor: grabbing; opacity: 0.9; z-index: 3; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.tl-text { white-space: nowrap; padding: 0 0.6rem; pointer-events: none; }
.tl-grip { position: absolute; top: 0; bottom: 0; width: 0.6rem; cursor: ew-resize; }
.tl-grip-l { left: 0; }
.tl-grip-r { right: 0; }
.tl-grip::after {
  content: ''; position: absolute; top: 30%; bottom: 30%; left: 45%; width: 2px; border-radius: 1px;
  background: rgba(255,255,255,0.6);
}

/* Popover */
.sched-pop {
  position: fixed; z-index: 300; width: 18rem; background: #fff; border: 1px solid var(--cip-border);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(32,22,14,0.2); padding: 1rem;
  display: grid; gap: 0.6rem;
}
.sched-pop[hidden] { display: none; }
.sched-pop h3 { font-family: var(--font-serif); font-size: 1.1rem; }
.sched-pop label { display: grid; gap: 0.25rem; font-size: 0.85rem; font-weight: 600; }
.sched-pop select {
  font: inherit; font-size: 1rem; padding: 0.5rem 0.6rem; border: 1px solid var(--cip-border); border-radius: 8px; background: #fff;
}
.pop-note { font-size: 0.8rem; color: var(--cip-muted); line-height: 1.4; }
.pop-note.is-error { color: #8a1f14; }
.pop-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 0.25rem; }

/* Tables */
.table-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
.table-card { border: 1px solid var(--cip-border); border-radius: 10px; padding: 0.85rem; display: grid; gap: 0.6rem; background: #fffdfc; }
.table-card input[type="text"] { font-weight: 600; }
.table-card .link-button { justify-self: start; font-size: 0.85rem; }
.table-seats { font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; }
.combo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding: 0.6rem 0; border-top: 1px solid var(--cip-border); }

/* Opening hours */
.hours-rows { display: grid; gap: 0.15rem; }
.hours-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.35rem 0; min-height: 2.9rem; }
.hours-day { width: 7rem; font-weight: 600; }
.hours-row .switch { width: 6.5rem; }
.hours-row.is-closed .hours-day { color: var(--cip-muted); }
.hours-to { color: var(--cip-muted); font-size: 0.9rem; }

/* Closed dates */
.closure-add { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.closure-add input[type="text"] { flex: 1 1 14rem; }
.closure-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.closure-chip {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.4rem 0.35rem 0.8rem;
  border-radius: 999px; background: #fbe1de; color: #6e1a10; font-size: 0.85rem;
}
.closure-chip.is-past { opacity: 0.55; }
.closure-chip button {
  border: 0; background: rgba(0,0,0,0.08); color: inherit; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  cursor: pointer; font-size: 1rem; line-height: 1;
}

/* Rules */
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 0.5rem; }
.rule { display: grid; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; }

/* Sticky save bar */
.save-bar {
  position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1.5rem; background: var(--cip-dark); color: #fff; box-shadow: 0 -4px 14px rgba(0,0,0,0.15); z-index: 50;
}
.save-bar[hidden] { display: none; }
.save-bar.is-error { background: #8a1f14; }
.save-bar.is-ok { background: #1e6b3c; }
.save-bar-actions { display: flex; gap: 0.5rem; }

@media (max-width: 720px) {
  .sched { padding: 0.75rem 0.75rem 6rem; }
  .sched-section { padding: 1rem; }
  .tl { --label: 6.5rem; }
  .tl-text { font-size: 0.7rem; padding: 0 0.3rem; }
}
/* The site's form styles make selects full width; these sit inline. */
.hours-row select, .table-seats select, .closure-add input[type="date"] { width: auto; min-width: 7.5rem; }
.table-seats select { min-width: 4.25rem; }
.rule select { width: 100%; }
/* The site's form labels are uppercase; this page uses sentence case. */
.sched label, .sched-pop label { text-transform: none; letter-spacing: normal; }
.rule .sched-help { font-weight: 400; margin: 0; }

/* ---------- Admin on phones: the sidebar becomes a drawer (admin-nav.js) ---------- */
.admin-menu-btn, .admin-nav-backdrop { display: none; }
@media (max-width: 860px) {
  .admin-shell { display: block; }
  .admin-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; top: 0.6rem; left: 0.6rem; z-index: 120;
    width: 2.6rem; height: 2.6rem; border-radius: 10px; border: 1px solid var(--cip-border);
    background: var(--cip-warm); color: var(--cip-black); font-size: 1.2rem; box-shadow: var(--shadow);
  }
  .admin-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 130; width: min(78vw, 280px);
    transform: translateX(-102%); transition: transform 0.22s ease; overflow-y: auto;
  }
  .admin-shell.nav-open .admin-sidebar { transform: none; box-shadow: 8px 0 30px rgba(0,0,0,0.3); }
  .admin-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 125; background: rgba(20,16,13,0.45); }
  .admin-nav-backdrop[hidden] { display: none; }
  .admin-header { padding-left: 3.75rem !important; min-height: 3.8rem; }
  .admin-main { min-height: 100vh; }
}

/* ---------- Admin: Reservations day view (admin-reservations.js) ---------- */
.res-main, .sheet { --late: #b3261e; --dtl-off: #f4ece6; --st-pending: #c47a14; --st-confirmed: #2f7d4f; --st-seated: #1f6aa5; --st-completed: #8a817a; --st-no_show: #8a3a8a; --st-cancelled: #a33a2b; }
.st-pending { --st: var(--st-pending); } .st-confirmed { --st: var(--st-confirmed); } .st-seated { --st: var(--st-seated); }
.st-completed { --st: var(--st-completed); } .st-no_show { --st: var(--st-no_show); } .st-cancelled { --st: var(--st-cancelled); }

.res-toolbar {
  position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.6rem 1rem; padding: 0.75rem 1.25rem; background: var(--cip-warm); border-bottom: 1px solid var(--cip-border);
}
.res-day-nav { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; flex: none;
  border-radius: 50%; border: 1px solid var(--cip-border); background: var(--cip-warm); color: var(--cip-black);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.icon-btn:hover { background: var(--cip-cream); }
.res-today {
  font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.5rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--cip-border); background: var(--cip-cream); cursor: pointer; color: var(--cip-black);
}
.res-today:disabled { opacity: 0.45; cursor: default; }
.res-date-label { position: relative; margin-left: 0.4rem; cursor: pointer; min-width: 0; text-transform: none; letter-spacing: normal; }
.res-day-title { font-family: var(--font-serif); font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.res-day-title strong { color: var(--cip-red); }
/* The native date picker sits invisibly over the title, so tapping it opens the picker. */
.res-date-input { position: absolute !important; inset: 0; opacity: 0; width: 100% !important; height: 100%; cursor: pointer; padding: 0 !important; }
.res-date-input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.res-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--cip-cream); border: 1px solid var(--cip-border); }
.seg button {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.9rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--cip-muted); cursor: pointer;
}
.seg .ico { font-size: 1rem; }
.seg button[aria-selected="true"] { background: var(--cip-warm); color: var(--cip-black); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.res-search { width: 13rem !important; min-height: 2.4rem; border-radius: 999px !important; padding: 0.4rem 0.9rem !important; }
.res-new { border-radius: 999px; }

.res-summary { padding: 0.9rem 1.25rem 0.25rem; display: grid; gap: 0.75rem; }
.res-services { display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.15rem; }
.res-stat {
  flex: 0 0 auto; min-width: 8.5rem; background: var(--cip-warm); border: 1px solid var(--cip-border);
  border-radius: 12px; padding: 0.55rem 0.85rem; display: grid;
}
.res-stat.is-total { background: var(--cip-dark); border-color: var(--cip-dark); color: #fff; }
.res-stat-name { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.75; }
.res-stat-num { font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.res-stat-num small { font-size: 0.8rem; font-weight: 500; opacity: 0.75; }
.res-stat-sub { font-size: 0.8rem; opacity: 0.75; }
.status-chips { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.15rem; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 0.35rem; font: inherit; font-size: 0.85rem; font-weight: 600;
  padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--cip-border); background: var(--cip-warm);
  color: var(--cip-black); cursor: pointer;
}
.chip-count { font-size: 0.75rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--cip-cream); }
.chip[aria-pressed="true"] { background: var(--cip-black); color: #fff; border-color: var(--cip-black); }
.chip[aria-pressed="true"] .chip-count { background: rgba(255,255,255,0.2); }
.res-notice { margin: 0.5rem 1.25rem 0; padding: 0.6rem 0.85rem; border-radius: 10px; background: #fbe6d4; color: #7a3a0c; font-size: 0.88rem; }
.res-empty { text-align: center; color: var(--cip-muted); padding: 2.5rem 1rem; display: grid; gap: 0.75rem; justify-items: center; }
.res-empty.is-error { color: #8a1f14; }
.res-hint { color: var(--cip-muted); font-size: 0.8rem; padding: 0.5rem 1.25rem; }

/* List */
.res-list { padding: 0.5rem 1.25rem 6rem; max-width: 900px; }
.bk-group { margin-top: 1rem; }
.bk-slot { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--font-serif); font-size: 1.15rem; margin-bottom: 0.4rem; }
.bk-slot small { font-family: var(--font-sans); font-size: 0.8rem; color: var(--cip-muted); font-weight: 500; }
.bk {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.85rem; align-items: center; cursor: pointer;
  background: var(--cip-warm); border: 1px solid var(--cip-border); border-left: 5px solid var(--st);
  border-radius: 12px; padding: 0.7rem 0.85rem; margin-bottom: 0.5rem; transition: box-shadow var(--transition);
}
.bk:hover, .bk:focus-visible { box-shadow: 0 3px 12px rgba(32,22,14,0.12); outline: none; }
.bk.st-cancelled, .bk.st-no_show { opacity: 0.7; }
.bk-party {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--cip-cream); font-weight: 700; font-size: 1.05rem; border: 2px solid var(--st);
}
.bk-main { min-width: 0; }
.bk-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-icons { display: inline-flex; gap: 0.3rem; vertical-align: -0.1em; font-size: 0.85rem; }
.bk-meta { font-size: 0.82rem; color: var(--cip-muted); }
.bk-note { font-size: 0.82rem; color: var(--cip-black); opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.1rem; }
.bk-note.is-guest { font-style: italic; }
.bk-note .ico { font-style: normal; color: var(--cip-muted); }
.bk-side { display: grid; gap: 0.35rem; justify-items: end; }
.pill { font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; color: var(--st); background: color-mix(in srgb, var(--st) 14%, white); white-space: nowrap; }
.pill-pending { --st: var(--st-pending); } .pill-confirmed { --st: var(--st-confirmed); } .pill-seated { --st: var(--st-seated); }
.pill-completed { --st: var(--st-completed); } .pill-no_show { --st: var(--st-no_show); } .pill-cancelled { --st: var(--st-cancelled); }
.bk-quick {
  font: inherit; font-size: 0.8rem; font-weight: 700; padding: 0.35rem 0.8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cip-border); background: var(--cip-cream); color: var(--cip-black);
}
.bk-quick:hover { background: var(--cip-black); color: #fff; }

/* Line icons (admin-reservations.js ICONS), shared by every view */
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; }
.mark { display: inline-flex; color: var(--cip-muted); }
.late, .mark.late { color: var(--late); font-weight: 600; white-space: nowrap; }

/* Timeline (day): a row per table on a 15-minute grid */
.res-timeline { padding: 0.9rem 1.25rem 6rem; }
.dtl-scroll {
  overflow-x: auto; border: 1px solid var(--cip-border); border-radius: 14px; background: var(--cip-warm);
  box-shadow: 0 1px 2px rgba(32,22,14,0.04);
}
.dtl {
  --label: 9rem; --slot: 2.75rem; --row: 3.25rem; --gap: 0.4rem;
  position: relative; min-width: calc(var(--label) + var(--slots) * var(--slot)); font-variant-numeric: tabular-nums;
}
.dtl-head, .dtl-row { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); }
.dtl-head { border-bottom: 1px solid var(--cip-border); }
.dtl-corner, .dtl-label { position: sticky; left: 0; z-index: 4; background: var(--cip-warm); border-right: 1px solid var(--cip-border); }
.dtl-corner {
  padding: 0.6rem 0.85rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cip-muted);
}
.dtl-corner-load { position: absolute; left: 0.85rem; top: 3.45rem; line-height: 1.15rem; }
.dtl-scale { position: relative; height: 4.9rem; background-image: var(--off, none); }
.dtl-svc {
  position: absolute; top: 0.4rem; margin-left: 2px; padding: 0.15rem 0.4rem 0; border-top: 2px solid var(--cip-red); overflow: hidden;
  white-space: nowrap; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cip-red);
}
.dtl-time {
  position: absolute; top: 1.95rem; padding-left: 0.35rem; line-height: 1.3rem; white-space: nowrap;
  font-size: 0.78rem; font-weight: 700; color: var(--cip-black); border-left: 1px solid rgba(107,90,77,0.4);
}
.dtl-load {
  position: absolute; top: 3.45rem; height: 1.15rem; display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: var(--cip-black); background: rgba(193,63,29,var(--a));
  border-radius: 4px; box-shadow: inset 0 0 0 1px var(--cip-warm);
}
.dtl-load.is-zero { background: none; color: var(--cip-placeholder); font-weight: 500; }
.dtl-row + .dtl-row { border-top: 1px solid rgba(231,220,210,0.7); }
.dtl-label { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: var(--row); padding: 0 0.75rem 0 0.85rem; }
.dtl-label strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; font-weight: 600; }
.dtl-cap {
  flex: none; padding: 0.05rem 0.45rem; border-radius: 999px; border: 1px solid var(--cip-border); background: var(--cip-cream);
  font-size: 0.7rem; font-weight: 600; color: var(--cip-muted);
}
.dtl-track {
  position: relative; min-height: calc(var(--lanes, 1) * var(--row)); cursor: pointer;
  background-image:
    repeating-linear-gradient(to right, rgba(107,90,77,0.28) 0 1px, transparent 1px calc(400% / var(--slots))),
    repeating-linear-gradient(to right, rgba(107,90,77,0.1) 0 1px, transparent 1px calc(100% / var(--slots))),
    var(--off, none);
}
.dtl.is-past .dtl-track { cursor: default; }
.dtl-row.is-unplaced .dtl-label strong { color: var(--late); }
.dtl-row.is-unplaced .dtl-track { background-color: #fdf1ed; }

/* A booking bar: party size, name, markers, and the one-tap next step. */
.tlb, .tlb-joined, .dtl-ghost { position: absolute; top: var(--gap); height: calc(var(--row) - 2 * var(--gap)); border-radius: 8px; }
.tlb {
  z-index: 1; display: flex; align-items: stretch; overflow: hidden; container-type: inline-size;
  background: color-mix(in srgb, var(--st) 12%, white); border: 1px solid color-mix(in srgb, var(--st) 40%, white);
  box-shadow: inset 4px 0 0 var(--st); transition: box-shadow var(--transition);
}
.tlb:hover { z-index: 2; box-shadow: inset 4px 0 0 var(--st), 0 3px 10px rgba(32,22,14,0.16); }
.tlb-main {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.45rem; padding: 0 0.5rem 0 0.7rem;
  border: 0; background: none; font: inherit; font-size: 0.84rem; color: var(--cip-black); text-align: left; cursor: pointer;
}
.tlb-main:focus-visible, .tlb-act:focus-visible { outline: 3px solid var(--cip-orange); outline-offset: -3px; border-radius: 8px; }
.tlb-party {
  flex: none; min-width: 1.5rem; height: 1.5rem; padding: 0 0.3rem; border-radius: 999px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--st); color: #fff; font-size: 0.75rem; font-weight: 700;
}
.tlb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tlb-marks { flex: none; display: inline-flex; gap: 0.25rem; margin-left: auto; font-size: 0.85rem; }
.tlb-act {
  flex: none; width: 2.4rem; display: grid; place-items: center; border: 0; border-left: 1px solid color-mix(in srgb, var(--st) 30%, white);
  background: color-mix(in srgb, var(--st) 20%, white); color: var(--st); font-size: 1.05rem; cursor: pointer; transition: background var(--transition);
}
.tlb-act:hover { background: var(--st); color: #fff; }
.tlb-act:disabled { opacity: 0.5; cursor: progress; }
@container (max-width: 9.5rem) { .tlb-marks { display: none; } }
@container (max-width: 7rem) { .tlb-act { display: none; } }
@container (max-width: 3.75rem) { .tlb-name { display: none; } .tlb-main { justify-content: center; padding: 0 0.25rem; } }
.tlb.st-pending { background: var(--cip-warm); border: 1.5px dashed var(--st); }
.tlb.st-seated { background: var(--st); border-color: var(--st); }
.tlb.st-seated .tlb-main, .tlb.st-seated .mark { color: #fff; }
.tlb.st-seated .tlb-party { background: #fff; color: var(--st); }
.tlb.st-seated .tlb-act { background: rgba(255,255,255,0.14); border-left-color: rgba(255,255,255,0.3); color: #fff; }
.tlb.st-seated .tlb-act:hover { background: rgba(255,255,255,0.28); }
.tlb.st-completed { background: #f3eeea; border-color: #e2d9d1; }
.tlb.st-completed .tlb-main { color: var(--cip-muted); }
.tlb.st-cancelled, .tlb.st-no_show { opacity: 0.75; }
.tlb.st-cancelled .tlb-name, .tlb.st-no_show .tlb-name { text-decoration: line-through; }
.tlb.is-late { border-color: var(--late); box-shadow: inset 4px 0 0 var(--late); }
.tlb-joined {
  display: flex; align-items: center; padding: 0 0.6rem; overflow: hidden; white-space: nowrap; cursor: pointer;
  font-size: 0.75rem; color: var(--cip-muted); border: 1.5px dashed color-mix(in srgb, var(--st) 55%, white);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--st) 10%, white) 0 6px, var(--cip-warm) 6px 12px);
}
.tlb-joined span { overflow: hidden; text-overflow: ellipsis; }
.dtl-ghost {
  display: grid; place-items: center; pointer-events: none; font-weight: 700; color: var(--cip-red);
  border: 1.5px dashed var(--cip-red); background: rgba(193,63,29,0.05);
}
.dtl-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 3; pointer-events: none; background: var(--cip-red); }
.dtl-now span {
  position: absolute; top: 0.3rem; left: 50%; transform: translateX(-50%); padding: 0.1rem 0.45rem; border-radius: 999px;
  background: var(--cip-red); color: #fff; font-size: 0.68rem; font-weight: 700; white-space: nowrap;
}
.dtl-now.is-end span { left: auto; right: -1px; transform: none; }
.dtl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.25rem; padding: 0.65rem 0.25rem 0; }
.dtl-foot .res-hint { padding: 0; }
.dtl-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: 0.78rem; color: var(--cip-muted); }
.dtl-key, .dtl-key-late { display: inline-flex; align-items: center; gap: 0.35rem; }
.dtl-key i {
  width: 1.1rem; height: 0.7rem; border-radius: 3px; background: color-mix(in srgb, var(--st) 12%, white);
  border: 1px solid color-mix(in srgb, var(--st) 40%, white); box-shadow: inset 3px 0 0 var(--st);
}
.dtl-key.st-pending i { background: var(--cip-warm); border: 1.5px dashed var(--st); }
.dtl-key.st-seated i { background: var(--st); }
.dtl-key.st-completed i { background: #f3eeea; border-color: #e2d9d1; }
.dtl-key-late { color: var(--late); }

/* Calendar (month) */
.res-cal { padding: 0.9rem 1.25rem 6rem; }
.cal-stats { margin-bottom: 0.9rem; }
.res-stat.is-link { font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color var(--transition); }
.res-stat.is-link:hover { border-color: var(--cip-red); }
.cal { overflow: hidden; border: 1px solid var(--cip-border); border-radius: 14px; background: var(--cip-warm); box-shadow: 0 1px 2px rgba(32,22,14,0.04); }
.cal.is-loading .cal-grid { opacity: 0.6; }
.cal-wd, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-wd { border-bottom: 1px solid var(--cip-border); background: var(--cip-cream); }
.cal-wd > span { padding: 0.55rem 0.75rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cip-muted); }
.wd-short, .wd-min { display: none; }
.cal-day {
  position: relative; min-width: 0; min-height: 7.25rem; padding: 0.5rem 0.55rem 0.6rem; display: flex; flex-direction: column;
  align-items: flex-start; gap: 0.3rem; font: inherit; color: var(--cip-black); text-align: left; cursor: pointer;
  background: var(--cip-warm); border: 0; border-right: 1px solid var(--cip-border); border-bottom: 1px solid var(--cip-border);
  transition: background var(--transition);
}
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day:nth-last-child(-n + 7) { border-bottom: 0; }
.cal-day:hover { background: #fdf3ef; }
.cal-day:focus-visible { z-index: 1; outline: 3px solid var(--cip-orange); outline-offset: -3px; }
.cal-num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.85rem; height: 1.85rem; padding: 0 0.35rem;
  margin: -0.15rem 0 0 -0.2rem; border-radius: 999px; font-size: 0.92rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cal-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; min-width: 0; max-width: 100%; }
.cal-day.is-out { background: #fcf8f6; }
.cal-day.is-out:hover { background: #fdf3ef; }
.cal-day.is-out .cal-num { color: var(--cip-placeholder); }
.cal-day.is-past .cal-num, .cal-day.is-past .cal-body { opacity: 0.55; }
.cal-day.is-today .cal-num { background: var(--cip-red); color: #fff; opacity: 1; }
.cal-day.is-selected { box-shadow: inset 0 0 0 2px var(--cip-dark); }
.cal-tag {
  display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; padding: 0.18rem 0.55rem; border-radius: 999px;
  overflow: hidden; white-space: nowrap; font-size: 0.76rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cal-bk { background: color-mix(in srgb, var(--cip-red) 11%, white); color: var(--cip-red-hover); }
.cal-gs { background: var(--cip-cream); border: 1px solid var(--cip-border); color: var(--cip-brown); }
.cal-closed { background: #f5e6c8; color: #7a5410; }
.cal-walkin { padding-left: 0; font-weight: 500; color: var(--cip-muted); }
.cal-pending { padding-left: 0.1rem; color: var(--st-pending); }
.cal-pending i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--st-pending); }

/* Pop-up: a centred dialog on desktop (wide for a booking, narrow for a form), bottom sheet on phones */
.sheet-backdrop { position: fixed; inset: 0; z-index: 140; background: rgba(20,16,13,0.45); }
.sheet-backdrop[hidden], .sheet[hidden] { display: none; }
.sheet {
  position: fixed; z-index: 150; top: 50%; left: 50%; width: min(480px, calc(100vw - 2rem)); max-height: min(88vh, 760px);
  background: var(--cip-warm); border-radius: 16px; box-shadow: 0 24px 60px rgba(32,22,14,0.3); display: flex; flex-direction: column;
  opacity: 0; transform: translate(-50%, -48%) scale(0.98); transition: transform 0.18s ease, opacity 0.18s ease;
}
.sheet.is-open { opacity: 1; transform: translate(-50%, -50%); }
.sheet.is-wide { width: min(940px, calc(100vw - 2rem)); height: min(88vh, 720px); }
.sheet-grabber { display: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--cip-border); }
.sheet-title { font-family: var(--font-serif); font-size: 1.45rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-body { overflow-y: auto; padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); flex: 1; }
.sheet-body h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cip-muted); margin: 1.1rem 0 0.4rem; }
.sheet-body textarea, .sheet-body input[type="text"], .sheet-body input[type="tel"], .sheet-body input[type="email"], .sheet-body input[type="date"], .sheet-body input[type="number"] {
  width: 100%; font: inherit; font-size: 1rem; padding: 0.6rem 0.75rem; border: 1px solid var(--cip-border); border-radius: 10px; background: #fff;
}
.detail-status { display: flex; align-items: center; gap: 0.6rem; }
.detail-src { font-size: 0.82rem; color: var(--cip-muted); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 1rem 0; }
.facts div { background: var(--cip-cream); border-radius: 10px; padding: 0.6rem 0.7rem; }
.facts dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cip-muted); }
.facts dd { font-size: 0.92rem; line-height: 1.35; }
.facts dd strong { font-size: 1.1rem; }
.facts small, .muted { color: var(--cip-muted); }
.small { font-size: 0.8rem; }
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 0.5rem; }
.contact-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem; border-radius: 10px;
  border: 1px solid var(--cip-border); background: var(--cip-warm); color: var(--cip-black); font-weight: 600; text-decoration: none;
}
.contact-btn:hover { background: var(--cip-cream); text-decoration: none; }
.contact-lines { font-size: 0.85rem; color: var(--cip-muted); margin-top: 0.4rem; word-break: break-word; }
.status-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.5rem; margin-top: 1rem; }
.status-actions .btn { min-height: 2.9rem; font-size: 0.95rem; }
.act-seated { background: var(--st-seated); border-color: var(--st-seated); }
.act-completed { background: var(--st-completed); border-color: var(--st-completed); }
.act-confirmed { background: var(--st-confirmed); border-color: var(--st-confirmed); }
.detail-row-actions { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.detail-foot { margin-top: 1.25rem; font-size: 0.8rem; color: var(--cip-muted); }
.detail-status .late { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.82rem; }

/* The booking pop-up: summary on top, details beside the conversation (tabs on phones) */
.sheet.is-wide .sheet-body { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 1rem; }
.bd { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bd-head { flex: none; padding-bottom: 1rem; border-bottom: 1px solid var(--cip-border); }
.bd-head .facts { margin: 0.75rem 0 0; }
.bd-head .status-actions { margin-top: 0.75rem; }
.bd-tabs, .bd-when { display: none; }
.bd-when { margin-top: 0.5rem; font-weight: 600; font-size: 0.92rem; }
.bd-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.25rem; padding-top: 1rem; }
.bd-details { min-height: 0; overflow-y: auto; padding-right: 0.25rem; }
.bd-details > .contact { margin-top: 0.1rem; }
.bd-chat {
  min-height: 0; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.85rem; border-radius: 14px;
  background: var(--cip-cream); border: 1px solid var(--cip-border);
}
.sheet-body .bd-col-title { margin: 0; }
.bd-hint { margin-left: 0.35rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sheet-body textarea.autogrow { min-height: 4.75rem; max-height: 16rem; resize: vertical; line-height: 1.45; }
.bd-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.2rem; height: 1.2rem; padding: 0 0.35rem;
  border-radius: 999px; background: var(--cip-red); color: #fff; font-size: 0.7rem; font-weight: 700;
}
.chat-thread { flex: 1; min-height: 6rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.25rem 0.1rem; }
.chat-empty { margin: auto 0; text-align: center; color: var(--cip-muted); font-size: 0.88rem; padding: 1rem; }
.chat-day { display: flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; font-weight: 600; color: var(--cip-muted); }
.chat-day::before, .chat-day::after { content: ""; flex: 1; border-top: 1px solid var(--cip-border); }
.msg { display: flex; flex-direction: column; max-width: 85%; }
.msg.from-guest { align-self: flex-start; align-items: flex-start; }
.msg.from-staff { align-self: flex-end; align-items: flex-end; }
.msg-bubble {
  padding: 0.55rem 0.8rem; border-radius: 14px; font-size: 0.92rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--cip-warm); border: 1px solid var(--cip-border); color: var(--cip-black);
}
.msg.from-guest .msg-bubble { border-bottom-left-radius: 4px; }
.msg.from-staff .msg-bubble { background: var(--cip-red); border-color: var(--cip-red); color: #fff; border-bottom-right-radius: 4px; }
.msg-meta { margin-top: 0.2rem; padding: 0 0.3rem; font-size: 0.72rem; color: var(--cip-muted); }
.chat-quick { display: flex; gap: 0.35rem; overflow-x: auto; flex: none; padding-bottom: 0.1rem; }
.chat-quick .chip { font-size: 0.78rem; padding: 0.3rem 0.65rem; }
.chat-form { flex: none; display: flex; align-items: flex-end; gap: 0.5rem; }
.sheet-body .chat-form textarea { flex: 1; resize: none; min-height: 2.75rem; max-height: 8rem; font-size: 0.95rem; }
.chat-form .btn { min-height: 2.75rem; border-radius: 999px; padding-left: 1.1rem; padding-right: 1.1rem; }
.chat-hint { flex: none; font-size: 0.75rem; color: var(--cip-muted); }
.chat-off { margin: 0; padding: 0.6rem 0.75rem; border-radius: 10px; background: var(--cip-warm); font-size: 0.85rem; }

/* The guest's side of the conversation (manage page): their own messages on the right. */
.guest-chat {
  display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; padding: 1rem; text-align: left;
  border: 1px solid var(--cip-border); border-radius: 14px; background: var(--cip-cream);
}
.guest-chat-title { font-family: var(--font-serif); font-size: 1.25rem; }
.guest-chat .chat-thread { overflow: visible; }
.guest-chat .chat-form textarea {
  flex: 1; resize: none; min-height: 2.75rem; font: inherit; font-size: 1rem; padding: 0.6rem 0.75rem;
  border: 1px solid var(--cip-border); border-radius: 10px; background: #fff;
}
.guest-chat .msg.from-guest { align-self: flex-end; align-items: flex-end; }
.guest-chat .msg.from-guest .msg-bubble { background: var(--cip-red); border-color: var(--cip-red); color: #fff; border-radius: 14px 14px 4px 14px; }
.guest-chat .msg.from-staff { align-self: flex-start; align-items: flex-start; }
.guest-chat .msg.from-staff .msg-bubble { background: var(--cip-warm); border-color: var(--cip-border); color: var(--cip-black); border-radius: 14px 14px 14px 4px; }

/* Unread messages: the marker on bars and cards turns red with a dot. */
.mark.is-unread { position: relative; color: var(--cip-red); }
.mark.is-unread::after {
  content: ""; position: absolute; top: -2px; right: -3px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cip-red); box-shadow: 0 0 0 2px var(--cip-warm);
}
.tlb.st-seated .mark.is-unread { color: #fff; }

/* Booking form in the panel */
.bk-form2 fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
.bk-form2 legend { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cip-muted); margin-bottom: 0.45rem; font-weight: 600; }
.bk-form2 label { display: grid; gap: 0.3rem; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.6rem; text-transform: none; letter-spacing: normal; }
.party-chips, .time-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.party-chip {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--cip-border); background: var(--cip-cream);
  font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; color: var(--cip-black);
}
.sheet-body .party-more { width: 4.5rem; border-radius: 999px; text-align: center; }
.time-group { margin-bottom: 0.6rem; }
.time-group-name { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.3rem; }
.time-chip {
  min-width: 5.5rem; padding: 0.55rem 0.8rem; border-radius: 999px; border: 1px solid var(--cip-border); background: var(--cip-warm);
  font: inherit; font-weight: 600; cursor: pointer; color: var(--cip-black);
}
.party-chip[aria-pressed="true"], .time-chip[aria-pressed="true"] { background: var(--cip-red); border-color: var(--cip-red); color: #fff; }
.form-error { color: #8a1f14; font-size: 0.9rem; margin-bottom: 0.75rem; }
.form-error[hidden] { display: none; }
.form-actions2 { display: flex; gap: 0.5rem; justify-content: flex-end; }
.form-actions2 .btn { min-height: 2.8rem; flex: 1 1 auto; }

/* Toast and floating add button */
.toast {
  position: fixed; z-index: 200; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--cip-dark); color: #fff; padding: 0.7rem 1.1rem; border-radius: 999px; font-size: 0.9rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25); max-width: calc(100vw - 2rem);
}
.toast[hidden] { display: none; }
.toast.is-error { background: #8a1f14; }
.fab { display: none; }

@media (max-width: 860px) {
  .res-toolbar { padding: 0.6rem 0.75rem 0.6rem 3.75rem; }
  .res-day-title { font-size: 1.1rem; }
  .res-tools { width: 100%; }
  .res-search { flex: 1; width: auto !important; }
  .res-new { display: none; }
  .res-summary { padding: 0.75rem 0.75rem 0.25rem; }
  .res-list { padding: 0.25rem 0.75rem 6rem; }
  .res-notice { margin: 0.5rem 0.75rem 0; }
  .res-timeline { padding: 0.75rem 0.75rem 6rem; }
  .dtl { --label: 6.5rem; --slot: 2.5rem; --row: 3rem; }
  .dtl-label { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.15rem; padding: 0 0.5rem 0 0.65rem; }
  .dtl-label strong { max-width: 100%; }
  .dtl-corner { padding: 0.6rem 0.65rem; }
  .dtl-corner-load { left: 0.65rem; }
  .res-cal { padding: 0.75rem 0.75rem 6rem; }
  .cal-day { min-height: 5.75rem; }
  .wd-long { display: none; }
  .wd-short { display: inline; }
  .fab {
    display: inline-flex; align-items: center; justify-content: center; position: fixed; z-index: 60;
    right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); width: 3.5rem; height: 3.5rem; border-radius: 50%;
    border: 0; background: var(--cip-red); color: #fff; font-size: 1.8rem; box-shadow: 0 6px 18px rgba(193,63,29,0.45); cursor: pointer;
  }
  body.sheet-open .fab { display: none; }
  /* Bottom sheet */
  .sheet { top: auto; left: 0; bottom: 0; width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; opacity: 1; transform: translateY(100%); transition: transform 0.2s ease; }
  .sheet.is-open { transform: none; }
  .sheet.is-wide { width: 100%; height: 92vh; }
  .bd-head { padding-bottom: 0.75rem; }
  .bd-head .status-actions { grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); }
  .bd-head .status-actions .btn { min-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; }
  .bd[data-tab="chat"] .bd-head .facts { display: none; }
  .bd[data-tab="chat"] .bd-when { display: block; }
  .bd-tabs { display: flex; gap: 0.25rem; flex: none; margin-top: 0.75rem; padding: 3px; border-radius: 999px; background: var(--cip-cream); border: 1px solid var(--cip-border); }
  .bd-tabs button {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.45rem; border: 0; border-radius: 999px;
    font: inherit; font-size: 0.88rem; font-weight: 600; background: transparent; color: var(--cip-muted); cursor: pointer;
  }
  .bd-tabs button[aria-selected="true"] { background: var(--cip-warm); color: var(--cip-black); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
  .bd-cols { display: flex; flex-direction: column; padding-top: 0.75rem; }
  .bd-details, .bd-chat { flex: 1; }
  .bd[data-tab="details"] .bd-chat, .bd[data-tab="chat"] .bd-details { display: none; }
  .bd-col-title { display: none; }
  .bd-chat { padding: 0.6rem; }
  .sheet-grabber { display: block; width: 2.5rem; height: 0.3rem; border-radius: 999px; background: var(--cip-border); margin: 0.5rem auto 0; }
  .sheet-head { padding: 0.5rem 1rem 0.75rem; }
  .sheet-body { padding: 0.75rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .res-day-nav { gap: 0.25rem; }
  .res-today { padding: 0.45rem 0.7rem; }
  .bk { grid-template-columns: auto 1fr; }
  .bk-side { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
}

.d-short { display: none; }
@media (max-width: 860px) {
  .d-long { display: none; }
  .d-short { display: inline; }
  .res-tools { flex-wrap: nowrap; }
  .res-search { min-width: 0; flex: 1 1 6rem; }
  .seg button { padding: 0.4rem 0.7rem; }
}

/* Phones: icon-only view switch; a compact month grid (guests per day, a dot for pending). */
@media (max-width: 600px) {
  .seg-label { display: none; }
  .seg button { padding: 0.45rem 0.6rem; }
  .cal-stats .res-stat { min-width: 7rem; }
  .cal-wd > span { padding: 0.45rem 0; text-align: center; }
  .wd-short { display: none; }
  .wd-min { display: inline; }
  .cal-day { min-height: 4.4rem; padding: 0.35rem 0.15rem 0.4rem; align-items: center; gap: 0.2rem; }
  .cal-body { align-items: center; gap: 0.2rem; }
  .cal-num { min-width: 1.6rem; height: 1.6rem; margin: 0; font-size: 0.82rem; }
  .cal-bk, .cal-word, .cal-walkin { display: none; }
  .cal-tag { padding: 0.1rem 0.35rem; gap: 0.2rem; font-size: 0.7rem; }
  .cal-closed { padding: 0.08rem 0.3rem; font-size: 0.6rem; }
  .cal-pending { position: absolute; top: 0.3rem; right: 0.25rem; padding: 0; }
}