/* Demo showcase styles. Everything is driven by CSS custom properties the theme sets,
   so switching the theme dropdown re-skins the whole site instantly (our branding engine). */
:root {
  --primary: #1565c0;
  --secondary: #eef4fb;
  --bg: #ffffff;
  --surface: #f6f9fd;
  --text: #15233b;
  --muted: #5b6b82;
  --accent-text: #ffffff;
  --radius: 16px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  --maxw: 1100px;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}
a {
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
}

/* ── Demo control bar (the 3 pulldowns) ─────────────────────────────────────── */
.democtl {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  background: #0f0f12;
  color: #fff;
  border-bottom: 2px solid var(--primary);
}
.democtl .brand {
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-right: 8px;
  color: inherit;
  text-decoration: none;
}
.democtl .brand b {
  color: var(--primary);
}
.democtl .ctltoggle {
  background: #1b1b1f;
  color: #fff;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
.democtl .ctltoggle:hover {
  background: #26262c;
}
/* collapsed: slim strip showing only the brand + toggle so the page is browsable */
.democtl.collapsed {
  padding-top: 6px;
  padding-bottom: 6px;
  gap: 8px;
}
.democtl.collapsed > *:not(.brand):not(.ctltoggle) {
  display: none;
}
.democtl label {
  font-size: 12px;
  opacity: 0.8;
  margin-right: 4px;
}
.democtl select {
  background: #1b1b1f;
  color: #fff;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  max-width: 260px;
}
.democtl input {
  background: #1b1b1f;
  color: #fff;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  min-width: 240px;
  font-family: inherit;
}
.democtl .resetbtn {
  background: #2a1b1b;
  color: #fda4a4;
  border: 1px solid #5a2a2a;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
.democtl .resetbtn:hover {
  background: #3a2020;
}
.democtl .copybtn {
  background: #16261b;
  color: #86efac;
  border: 1px solid #245a37;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
.democtl .copybtn:hover {
  background: #1b3324;
}
.democtl .spacer {
  flex: 1;
}
/* Cover-fit background video/embed for the hero (streams from YouTube/Vimeo/CDN) */
.fx-embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.fx-embed iframe,
.fx-embed video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  border: 0;
}
/* Photo gallery (masonry) */
.gallery {
  columns: 3 220px;
  column-gap: 14px;
}
.gallery .gitem {
  break-inside: avoid;
  margin-bottom: 14px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.gallery .gitem img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease;
}
.gallery .gitem:hover img {
  transform: scale(1.06);
}
/* Announcement bar, reviews, social */
.annc {
  background: var(--primary);
  color: var(--accent-text);
  text-align: center;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
}
.annc a {
  font-weight: 700;
}
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}
.review {
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.review .stars {
  color: #f5a623;
  margin-bottom: 8px;
  letter-spacing: 2px;
}
.review .who {
  color: var(--muted);
  font-size: 13px;
  margin-top: 12px;
}
.social {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}
.social a {
  color: inherit;
  opacity: 0.8;
  text-decoration: none;
  font-size: 14px;
}
.social a:hover {
  opacity: 1;
}
/* Services / trust / team / area / FAQ / gift cards */
.svcgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.svc {
  display: flex;
  gap: 12px;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.svc-ic {
  color: var(--primary);
  font-size: 22px;
}
.svc p {
  color: var(--muted);
  font-size: 14px;
  margin: 4px 0 0;
}
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.badge2 {
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
}
.teamgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  text-align: center;
}
.member .avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  margin: 0 auto 10px;
}
.member .muted-s {
  color: var(--muted);
  font-size: 13px;
}
.areachips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.achip {
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 999px;
  padding: 8px 16px;
}
.faq {
  border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  padding: 14px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
}
.faq p {
  color: var(--muted);
  margin: 8px 0 0;
}
.giftcard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: linear-gradient(
    135deg,
    var(--primary),
    color-mix(in srgb, var(--primary) 55%, #000)
  );
  color: var(--accent-text);
  border-radius: var(--radius);
  padding: 28px;
  flex-wrap: wrap;
}
.giftcard .giftamt {
  font-size: 48px;
  font-weight: 800;
  opacity: 0.85;
}
.plangrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.plan {
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  text-align: center;
}
.plan-nm {
  font-weight: 700;
  margin-bottom: 8px;
}
.plan-price {
  font-size: 32px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 14px;
}
.plan-price span {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}
.tiprow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tipbtn {
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
.tipbtn.sel {
  background: var(--primary);
  color: var(--accent-text);
  border-color: var(--primary);
}
/* Sticky mobile call/directions/book bar — local-intent conversion + engagement signal */
.mobilecta {
  display: none;
}
@media (max-width: 720px) {
  .mobilecta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: color-mix(in srgb, var(--text) 12%, transparent);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.14);
  }
  .mobilecta a {
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    text-align: center;
    padding: 13px 6px;
    font-weight: 700;
    font-size: 14px;
  }
  .mobilecta a:last-child {
    background: var(--primary);
    color: var(--accent-text);
  }
  .site-footer {
    padding-bottom: 70px;
  }
}
.democtl a.wizard {
  background: var(--primary);
  color: var(--accent-text);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
}

/* ── Storefront ─────────────────────────────────────────────────────────────── */
.site {
  min-height: 100vh;
}
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
}
/* When a real logo is imported, show it transparently in its original form (no colored box). */
.logo.img {
  width: auto;
  height: 46px;
  border-radius: 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
}
.topnav .name {
  font-weight: 800;
  font-size: 18px;
}
.topnav .links {
  margin-left: auto;
  display: flex;
  gap: 18px;
  color: var(--muted);
  font-size: 14px;
}
.topnav .links span {
  cursor: default;
}
.topnav .links a {
  cursor: pointer;
  text-decoration: none;
}
.topnav .links a:hover {
  color: var(--primary);
}
.contactgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  align-items: start;
}
.contactgrid .field textarea {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
}

.hero {
  position: relative;
  color: #fff;
  border-radius: 0;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
}
.hero .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.7));
}
.hero .inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 20px;
  width: 100%;
}
.hero h1 {
  font-size: clamp(28px, 5vw, 52px);
  margin: 0 0 8px;
  font-weight: 800;
}
.hero p {
  font-size: clamp(15px, 2vw, 20px);
  margin: 0 0 18px;
  max-width: 640px;
  opacity: 0.95;
}
.btn {
  display: inline-block;
  cursor: pointer;
  border: none;
  background: var(--primary);
  color: var(--accent-text);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.btn.ghost {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

section.block {
  padding: 48px 0;
}
section.block.alt {
  background: var(--surface);
}
.h2 {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 4px;
}
.sub {
  color: var(--muted);
  margin: 0 0 24px;
}

.cat {
  margin-bottom: 34px;
}
.cat h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.card {
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
}
.card .imgwrap {
  aspect-ratio: 3 / 2;
  background: var(--secondary);
  position: relative;
}
.card .imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card .ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 40px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: var(--accent-text);
}
.card .body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.card .nm {
  font-weight: 700;
}
.card .row {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.price {
  font-weight: 800;
  color: var(--primary);
}
.price.quote {
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
}
.card .cta {
  font-size: 13px;
  padding: 8px 14px;
}

/* Scheduling */
.sched {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.days {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.chip {
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: var(--bg);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
}
.chip.day {
  min-width: 92px;
}
.chip.sel {
  background: var(--primary);
  color: var(--accent-text);
  border-color: var(--primary);
}
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
}

footer.site-footer {
  background: #0f0f12;
  color: #cbd5e1;
  padding: 36px 0;
}
footer .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}
footer h4 {
  color: #fff;
  margin: 0 0 10px;
}
footer .pwr {
  margin-top: 24px;
  font-size: 13px;
  opacity: 0.6;
}

.badge {
  display: inline-block;
  background: var(--secondary);
  color: var(--primary);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

/* ════════ CREATIVE DESIGN STYLES (the 3rd dropdown) — full aesthetics, not just color ════════ */

/* ── Aurora Glass: animated mesh gradient + frosted glassmorphism ─────────────── */
body.style-aurora {
  --primary: #a78bfa;
  --accent-text: #0b1020;
  --secondary: #1e1b4b;
  --bg: #0b1020;
  --surface: rgba(255, 255, 255, 0.05);
  --text: #f8fafc;
  --muted: #c7d2fe;
  font-family: "Sora", system-ui, sans-serif;
  position: relative;
}
body.style-aurora::before,
body.style-aurora::after {
  content: "";
  position: fixed;
  inset: -45%;
  z-index: -1;
  will-change: transform, filter;
}
body.style-aurora::before {
  background:
    radial-gradient(42% 42% at 20% 25%, #7c3aedcc, transparent 60%),
    radial-gradient(40% 40% at 80% 22%, #06b6d4cc, transparent 60%),
    radial-gradient(48% 48% at 50% 85%, #ec4899cc, transparent 60%), #0a0e1f;
  filter: blur(40px) saturate(1.35);
  animation: aurora1 13s ease-in-out infinite alternate;
}
body.style-aurora::after {
  background:
    radial-gradient(38% 38% at 74% 70%, #22d3ee99, transparent 60%),
    radial-gradient(40% 40% at 24% 68%, #a855f799, transparent 60%),
    radial-gradient(44% 44% at 62% 14%, #f472b699, transparent 60%);
  mix-blend-mode: screen;
  filter: blur(44px) saturate(1.3);
  animation: aurora2 17s ease-in-out infinite alternate;
}
@keyframes aurora1 {
  0% {
    transform: translate(-9%, -7%) rotate(0deg) scale(1.05);
    filter: blur(40px) saturate(1.3) hue-rotate(0deg);
  }
  50% {
    transform: translate(7%, 5%) rotate(10deg) scale(1.28);
    filter: blur(36px) saturate(1.5) hue-rotate(25deg);
  }
  100% {
    transform: translate(10%, -9%) rotate(-8deg) scale(1.16);
    filter: blur(50px) saturate(1.6) hue-rotate(55deg);
  }
}
@keyframes aurora2 {
  0% {
    transform: translate(8%, 9%) rotate(0deg) scale(1.1);
  }
  50% {
    transform: translate(-6%, 2%) rotate(-9deg) scale(1.32);
    filter: blur(40px) hue-rotate(-20deg);
  }
  100% {
    transform: translate(-12%, -8%) rotate(-16deg) scale(1.22);
    filter: blur(48px) hue-rotate(-45deg);
  }
}
body.style-aurora .card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.4);
}
body.style-aurora .btn {
  background: linear-gradient(135deg, #a78bfa, #06b6d4);
  color: #0b1020;
}
body.style-aurora section.block.alt {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Neon Noir: pure black + glowing cyan, technical type ─────────────────────── */
body.style-neon {
  --primary: #22d3ee;
  --accent-text: #05060a;
  --secondary: #0a2c33;
  --bg: #05060a;
  --surface: #0a0c12;
  --text: #e5fbff;
  --muted: #7fb7c4;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
body.style-neon .topnav .name,
body.style-neon .hero h1,
body.style-neon .cat h3 {
  text-transform: uppercase;
  letter-spacing: 2px;
}
body.style-neon .card {
  background: #0a0c12;
  border: 1px solid #14323a;
  border-radius: 8px;
  box-shadow:
    0 0 0 1px #0e2a30,
    0 0 18px #22d3ee22;
}
body.style-neon .card:hover {
  box-shadow:
    0 0 0 1px var(--primary),
    0 0 30px #22d3ee66;
  transform: translateY(-3px);
}
body.style-neon .btn {
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  box-shadow: 0 0 16px #22d3ee55;
}
body.style-neon .logo {
  box-shadow: 0 0 20px #22d3ee99;
}

/* ── Neo-Brutalist: bold yellow, thick borders, hard shadows ──────────────────── */
body.style-brutal {
  --primary: #0a0a0a;
  --accent-text: #fde047;
  --secondary: #0a0a0a;
  --bg: #fde047;
  --surface: #ffffff;
  --text: #0a0a0a;
  --muted: #3a3a3a;
  --radius: 6px;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
body.style-brutal .hero h1,
body.style-brutal .h2,
body.style-brutal .topnav .name {
  font-family: "Archivo Black", system-ui, sans-serif;
}
body.style-brutal .card {
  background: #fff;
  border: 3px solid #0a0a0a;
  border-radius: 6px;
  box-shadow: 6px 6px 0 #0a0a0a;
}
body.style-brutal .card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 #0a0a0a;
}
body.style-brutal .btn {
  background: #0a0a0a;
  color: #fde047;
  border: 3px solid #0a0a0a;
  border-radius: 6px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
}
body.style-brutal .logo {
  border: 3px solid #0a0a0a;
  box-shadow: 3px 3px 0 #0a0a0a;
  background: #fde047;
  color: #0a0a0a;
}
body.style-brutal section.block.alt {
  background: #fffdf0;
}
body.style-brutal .badge {
  background: #0a0a0a;
  color: #fde047;
  border-radius: 4px;
}

/* ── Editorial: elegant serif display, magazine whitespace ────────────────────── */
body.style-editorial {
  --primary: #8b1e1e;
  --accent-text: #fff;
  --secondary: #f2eadf;
  --bg: #faf8f4;
  --surface: #f2efe9;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --radius: 3px;
  font-family: "Outfit", system-ui, sans-serif;
}
body.style-editorial .hero h1,
body.style-editorial .h2,
body.style-editorial .topnav .name {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
}
body.style-editorial .hero h1 {
  font-size: clamp(36px, 6vw, 66px);
}
body.style-editorial .card {
  background: #fff;
  border: 1px solid #e6e0d6;
  border-radius: 3px;
  box-shadow: none;
}
body.style-editorial .card:hover {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.1);
}
body.style-editorial .cat h3 {
  font-family: "Playfair Display", serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 22px;
  color: var(--text);
}
body.style-editorial .btn {
  border-radius: 2px;
}

/* ── Soft Bento: rounded pastel tiles, Apple/Linear feel ──────────────────────── */
body.style-bento {
  --primary: #0ea5e9;
  --accent-text: #fff;
  --secondary: #e0f2fe;
  --bg: #f4f6fb;
  --surface: #eaf0fb;
  --text: #0f172a;
  --muted: #64748b;
  --radius: 26px;
  font-family: "Outfit", system-ui, sans-serif;
}
body.style-bento .card {
  background: linear-gradient(160deg, #ffffff, #eef3fc);
  border: 1px solid #e6ecf6;
  border-radius: 26px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.09);
}
body.style-bento .hero {
  border-radius: 0 0 40px 40px;
}
body.style-bento .btn {
  border-radius: 999px;
  box-shadow: 0 10px 22px #0ea5e955;
}
body.style-bento .chip {
  border-radius: 16px;
}

/* ── Sunset Pop: vivid gradient, playful glass ────────────────────────────────── */
body.style-sunset {
  --primary: #ffffff;
  --accent-text: #be185d;
  --secondary: rgba(255, 255, 255, 0.25);
  --bg: #2b0b2e;
  --surface: rgba(255, 255, 255, 0.08);
  --text: #ffffff;
  --muted: #fbcfe8;
  font-family: "Outfit", system-ui, sans-serif;
  position: relative;
}
body.style-sunset::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(155deg, #f97316, #db2777 48%, #7c3aed);
}
body.style-sunset .card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(9px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
}
body.style-sunset .price {
  color: #fde68a;
}
body.style-sunset .btn {
  background: #fff;
  color: #db2777;
  border-radius: 999px;
}
body.style-sunset section.block.alt {
  background: rgba(0, 0, 0, 0.16);
}

/* ── Mono Lux: monochrome luxury, gold accent, airy ───────────────────────────── */
body.style-mono {
  --primary: #d4af37;
  --accent-text: #0c0c0c;
  --secondary: #1c1c1c;
  --bg: #0c0c0c;
  --surface: #141414;
  --text: #f5f5f5;
  --muted: #8a8a8a;
  --radius: 2px;
  font-family: "Outfit", system-ui, sans-serif;
}
body.style-mono .hero h1 {
  font-weight: 400;
  letter-spacing: 1px;
}
body.style-mono .card {
  background: #121212;
  border: 1px solid #242424;
  border-radius: 2px;
  box-shadow: none;
}
body.style-mono .card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
}
body.style-mono .btn {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 2px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px;
}
body.style-mono .cat h3 {
  color: var(--primary);
}

/* ════════ MOTION utilities (scroll reveal, marquee, parallax, spotlight, tilt) ════════ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.fx-marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: 16px 0;
  border-top: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
}
.fx-marquee .track {
  display: inline-block;
  will-change: transform;
  animation: marquee 24s linear infinite;
  font-weight: 800;
  font-size: clamp(20px, 3vw, 36px);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.fx-marquee .track span {
  margin: 0 26px;
  opacity: 0.85;
}
.fx-marquee .track .dot {
  color: var(--primary);
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.fx-float {
  position: fixed;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(46px);
  background: radial-gradient(circle, var(--primary), transparent 70%);
  opacity: 0.45;
  z-index: -1;
  pointer-events: none;
}
.fx-spotlight {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    300px 300px at var(--mx, 50%) var(--my, 35%),
    color-mix(in srgb, var(--primary) 42%, transparent),
    transparent 70%
  );
}

/* ── Kinetic Type: oversized headline + scrolling marquee band ─────────────────── */
body.style-kinetic {
  --primary: #e11d48;
  --accent-text: #fff;
  --secondary: #1a1a1a;
  --bg: #0c0c0c;
  --surface: #151515;
  --text: #fafafa;
  --muted: #a3a3a3;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
body.style-kinetic .hero h1 {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(42px, 9vw, 112px);
  line-height: 0.95;
  letter-spacing: -2px;
}
body.style-kinetic .card {
  background: #151515;
  border: 1px solid #262626;
  border-radius: 14px;
}
body.style-kinetic .btn {
  border-radius: 999px;
}

/* ── Parallax Depth: hero image parallax + floating accent ─────────────────────── */
body.style-parallax {
  --primary: #4f46e5;
  --accent-text: #fff;
  --secondary: #eef2ff;
  --bg: #f7f8ff;
  --surface: #eef2ff;
  --text: #0b1020;
  --muted: #5b6b82;
  font-family: "Sora", system-ui, sans-serif;
}
body.style-parallax .hero {
  min-height: 540px;
}
body.style-parallax .hero .bg {
  will-change: transform;
}
body.style-parallax .card {
  background: #fff;
  border: 1px solid #e6e8f5;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(79, 70, 229, 0.12);
}

/* ── 3D Tilt: cursor-driven perspective cards ─────────────────────────────────── */
body.style-tilt {
  --primary: #38bdf8;
  --accent-text: #04121b;
  --secondary: #0b2230;
  --bg: #060a12;
  --surface: #0c1320;
  --text: #eaf6ff;
  --muted: #7fa8c0;
  font-family: "Sora", system-ui, sans-serif;
}
body.style-tilt .grid {
  perspective: 1200px;
}
body.style-tilt .card {
  background: linear-gradient(160deg, #0e1726, #0a1019);
  border: 1px solid #16334a;
  border-radius: 16px;
  transform-style: preserve-3d;
  transition:
    transform 0.12s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
body.style-tilt .card:hover {
  box-shadow: 0 26px 64px rgba(56, 189, 248, 0.28);
}
body.style-tilt .btn {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #04121b;
}

/* ── Spotlight: cursor-following light on near-black ──────────────────────────── */
body.style-spotlight {
  --primary: #a3e635;
  --accent-text: #0a0a0a;
  --secondary: #171717;
  --bg: #070707;
  --surface: #0f0f0f;
  --text: #f5f5f5;
  --muted: #8a8a8a;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
body.style-spotlight .site {
  position: relative;
  z-index: 1;
}
body.style-spotlight .card {
  background: #0f0f0f;
  border: 1px solid #1f1f1f;
  border-radius: 12px;
}
body.style-spotlight .btn {
  background: var(--primary);
  color: #0a0a0a;
  border-radius: 999px;
}

/* ── Gradient Flow: continuously flowing multi-stop gradient + glass ──────────── */
body.style-flow {
  --primary: #ffffff;
  --accent-text: #6d28d9;
  --secondary: rgba(255, 255, 255, 0.2);
  --bg: #1e1b4b;
  --surface: rgba(255, 255, 255, 0.08);
  --text: #ffffff;
  --muted: #e9d5ff;
  font-family: "Outfit", system-ui, sans-serif;
  position: relative;
}
body.style-flow::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    120deg,
    #6d28d9,
    #2563eb,
    #0891b2,
    #db2777,
    #6d28d9
  );
  background-size: 300% 300%;
  animation: flow 18s ease infinite;
}
@keyframes flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
body.style-flow .card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
}
body.style-flow .price {
  color: #fde68a;
}
body.style-flow .btn {
  background: #fff;
  color: #6d28d9;
  border-radius: 999px;
}
body.style-flow section.block.alt {
  background: rgba(0, 0, 0, 0.16);
}

/* ── Cinematic: full-screen romantic hero (Ken-Burns motion / video-ready), wedding-neutral ── */
body.style-cinematic {
  --primary: #b08968;
  --accent-text: #fff;
  --secondary: #f1e9df;
  --bg: #fbf8f4;
  --surface: #f5efe7;
  --text: #2e2a26;
  --muted: #8a7f74;
  --radius: 2px;
  font-family: "Outfit", system-ui, sans-serif;
}
body.style-cinematic .hero {
  min-height: 90vh;
}
body.style-cinematic .hero .bg {
  animation: kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from {
    transform: scale(1.05);
  }
  to {
    transform: scale(1.24) translate(-2%, -3%);
  }
}
body.style-cinematic .hero .scrim {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1),
    rgba(30, 24, 20, 0.5)
  );
  z-index: 2;
}
body.style-cinematic .hero .inner {
  z-index: 2;
  text-align: center;
}
body.style-cinematic .hero .inner .btn {
  margin: 0 auto;
}
body.style-cinematic .fx-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
body.style-cinematic .hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  font-size: clamp(40px, 7vw, 86px);
  letter-spacing: 0.5px;
}
body.style-cinematic .h2,
body.style-cinematic .topnav .name {
  font-family: "Playfair Display", Georgia, serif;
}
body.style-cinematic .cat h3 {
  font-family: "Playfair Display", serif;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  font-size: 22px;
}
body.style-cinematic .card {
  background: #fff;
  border: 1px solid #ece3d8;
  border-radius: 2px;
  box-shadow: none;
}
body.style-cinematic .card:hover {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
}
body.style-cinematic .btn {
  border-radius: 999px;
  letter-spacing: 0.5px;
}
body.style-cinematic .badge {
  background: #efe7dc;
  color: #8a7f74;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ════════ CART + CHECKOUT (mock — shows the flow/look) ════════ */
.cartfab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  background: var(--primary);
  color: var(--accent-text);
  border: none;
  border-radius: 999px;
  padding: 14px 20px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
}
.cartfab .n {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 999px;
  padding: 1px 9px;
  margin-left: 6px;
}
.scrim2 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.scrim2.on {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(440px, 94vw);
  background: var(--bg);
  color: var(--text);
  z-index: 80;
  transform: translateX(102%);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}
.drawer.on {
  transform: none;
}
.drawer header {
  padding: 18px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer header h3 {
  margin: 0;
  font-size: 18px;
}
.drawer .x {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}
.drawer .content {
  padding: 18px 20px;
  overflow: auto;
  flex: 1;
}
.drawer .ftr {
  padding: 16px 20px;
  border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.steptitle {
  font-weight: 800;
  font-size: 13px;
  margin: 0 0 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.line {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--text) 14%, transparent);
}
.line .nm {
  flex: 1;
  font-weight: 600;
}
.qty {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qty button {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.totrow {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: 19px;
  margin-top: 16px;
}
.field {
  margin: 12px 0;
}
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}
.field input,
.field select {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}
.payopt {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1.5px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 12px;
  padding: 13px;
  margin: 9px 0;
  cursor: pointer;
}
.payopt.sel {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent);
}
.payopt .ic {
  font-size: 20px;
}
.dchips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 14px;
}
.confirm {
  text-align: center;
  padding: 26px 0;
}
.confirm .big {
  font-size: 54px;
}
.confirm h3 {
  margin: 10px 0 6px;
}

/* ── Register / POS (admin.html "Register" section) ─────────────────────────
   Two persistent panels: item entry (left), running ticket (right). Uses admin's
   CSS vars (--primary/--line/--surface/--muted/--text/--bg). Big tap targets for
   counter distance + rush taps. Money is displayed via money(); logic is in admin.js. */
.pos-headbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pos-demoflag {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: #9a3412;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  padding: 5px 10px;
  border-radius: 999px;
}
.pos-note {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 6px 0 14px;
  font-size: 14px;
}
.pos-wrap {
  display: grid;
  grid-template-columns: 1fr 336px;
  gap: 18px;
  align-items: start;
}
.pos-left {
  min-width: 0;
}
.pos-tools {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-bottom: 12px;
}
.pos-tools input {
  padding: 12px;
}
.pos-viewtoggle {
  white-space: nowrap;
}
.pos-search.pos-nomatch,
.pos-scan.pos-nomatch {
  border-color: #ef4444;
  background: #fef2f2;
}
.pos-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pos-tab {
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}
.pos-tab.on {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.pos-tab-fav.on {
  border-color: #d97706;
  color: #92400e;
  background: #fef3c7;
}
.pos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}
.pos-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  min-height: 76px;
  padding: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition:
    transform 0.06s ease,
    box-shadow 0.06s ease;
}
.pos-item:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}
.pos-item:active {
  transform: scale(0.97);
}
.pos-item.pos-pulse {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent);
}
.pos-item-nm {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: var(--text);
}
.pos-item-pr {
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  opacity: 0.85;
}
.pos-item.pos-out {
  opacity: 0.55;
  cursor: not-allowed;
  background: repeating-linear-gradient(
    45deg,
    #f3f4f6,
    #f3f4f6 8px,
    #e9ecf1 8px,
    #e9ecf1 16px
  );
  border-color: #d7dbe2;
}
.pos-86 {
  display: inline-block;
  background: #b91c1c;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 6px;
}
.pos-list {
  display: block;
}
.pos-list .pos-item {
  flex-direction: row;
  align-items: center;
  min-height: 0;
  gap: 10px;
  margin-bottom: 8px;
  padding: 12px 14px;
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.pos-list .pos-item-nm {
  flex: 1;
}
.pos-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex: none;
}

/* Ticket panel */
.pos-ticket {
  position: sticky;
  top: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.pos-ticket-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.pos-cust {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  background: var(--bg);
  border-radius: 10px;
  padding: 8px 10px;
}
.pos-addcust {
  width: 100%;
}
.pos-lines {
  margin: 6px 0;
  max-height: 42vh;
  overflow-y: auto;
}
.pos-line {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.pos-line-nm {
  font-weight: 700;
  font-size: 15px;
}
.pos-line-ea {
  font-size: 12px;
  font-weight: 500;
}
.pos-qty {
  display: flex;
  align-items: center;
  gap: 7px;
}
.pos-step {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.pos-step:disabled {
  opacity: 0.4;
  cursor: default;
}
.pos-line-amt {
  font-weight: 800;
  min-width: 58px;
  text-align: right;
}
.pos-void {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.pos-empty {
  text-align: center;
  color: var(--muted);
  padding: 22px 0;
  font-weight: 600;
}
.pos-empty-tk {
  padding: 30px 0;
}
.pos-empty .muted {
  font-weight: 400;
  font-size: 13px;
  margin-top: 4px;
}
.pos-tot {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.pos-totrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin: 6px 0;
}
.pos-disc span:first-child {
  color: #166534;
}
.pos-grand {
  font-weight: 800;
  font-size: 20px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.pos-tiprow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
}
.pos-tips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pos-tip {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.pos-tip.sel {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}
.pos-linkbtn {
  background: none;
  border: none;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  font-family: inherit;
}
.pos-actions {
  margin-top: 14px;
}
.pos-charge {
  width: 100%;
  font-size: 18px;
  padding: 15px;
  border-radius: 12px;
}
.pos-charge:disabled {
  opacity: 0.5;
  cursor: default;
}
.pos-actrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.pos-held {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* Modals: tender / discount / customer / held (rendered into #posmodal) */
.pos-tender {
  text-align: center;
}
.pos-tender-total {
  margin-bottom: 14px;
}
.pos-bigamt {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 4px;
}
.pos-bigamt.ok {
  color: #166534;
}
.pos-change {
  font-size: 17px;
  font-weight: 700;
  margin-top: 6px;
}
.pos-change.ok {
  color: #166534;
}
.pos-change.short {
  color: #b91c1c;
}
.pos-tenderopts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pos-tenderopt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 10px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
}
.pos-tenderopt:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}
.pos-tenderopt .ic {
  font-size: 30px;
}
.pos-tender-note {
  color: var(--muted);
  font-size: 12px;
  margin-top: 14px;
}
/* Accepted terms printed as small, muted fine print at the bottom of receipts / invoices. */
.terms-fineprint {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  text-align: left;
  color: var(--muted);
}
.terms-fineprint-h {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.terms-fineprint-meta {
  font-size: 10px;
  margin: 1px 0 5px;
  opacity: 0.85;
}
.terms-fineprint-body {
  font-size: 10px;
  line-height: 1.45;
  white-space: pre-wrap;
  max-height: 150px;
  overflow-y: auto;
}
.pos-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 14px 0;
}
.pos-presets .ghostbtn {
  padding: 12px 6px;
  font-size: 14px;
}
.pos-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pos-key {
  padding: 16px 0;
  font-size: 22px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 12px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
}
.pos-key:active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.pos-tenderopt-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  padding: 16px;
}
/* Exact tender-type sub-picker (Card → Visa/MC/…, Mobile → Apple/Google Pay). */
.pos-subpick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0 4px;
}
.pos-subopt {
  padding: 18px 10px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
}
.pos-subopt:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}
.pos-subopt.sel {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent);
}
/* Active-drawer chooser surfaced at tender time. */
.pos-drawernote {
  margin: 12px 0 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  font-size: 13px;
  text-align: left;
}
.pos-drawersel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  font-size: 13px;
  font-weight: 600;
}
.pos-drawersel select {
  flex: 0 1 auto;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
/* Multi-drawer cards. */
.drw-card.closed {
  opacity: 0.82;
}
.drw-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.drw-activebadge {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: #166534;
  background: #dcfce7;
  padding: 2px 9px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
}
.drw-rolechip {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  background: var(--secondary);
  padding: 2px 9px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
}
.drw-setactive {
  flex: 0 0 auto;
  padding: 7px 12px;
  font-size: 13px;
}
.pos-terminal {
  padding: 28px 0;
}
.pos-terminal.done .pos-spin {
  border-top-color: #16a34a;
  animation: none;
}
.pos-spin {
  width: 40px;
  height: 40px;
  margin: 0 auto 14px;
  border: 4px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: pos-spin 0.8s linear infinite;
}
@keyframes pos-spin {
  to {
    transform: rotate(360deg);
  }
}
.pos-confirm .pos-check {
  font-size: 52px;
}
.pos-pts {
  display: inline-block;
  margin-top: 10px;
  background: #fef3c7;
  color: #92400e;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
}
.pos-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}
.pos-segbtn {
  padding: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
}
.pos-segbtn.on {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.pos-custlist {
  max-height: 240px;
  overflow-y: auto;
  margin: 10px 0;
}
.pos-custrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 7px;
  cursor: pointer;
  text-align: left;
}
.pos-custrow:hover {
  border-color: var(--primary);
}
.pos-newcust {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 8px;
}
.pos-heldrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
  text-align: left;
}
.pill.refunded {
  background: #f1f5f9;
  color: #64748b;
}
@media (max-width: 860px) {
  .pos-wrap {
    grid-template-columns: 1fr;
  }
  .pos-ticket {
    position: static;
  }
  .pos-tools {
    grid-template-columns: 1fr;
  }
}

/* ===== Service Desk — color-coded status-lane board ===== */
.svc-toolbar {
  margin: 2px 0 16px;
}
.svc-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  align-items: start;
}
.svc-lane {
  flex: 1 0 200px;
  min-width: 200px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
}
.svc-lane-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 6px 8px 10px;
}
.svc-count {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
  padding: 1px 7px;
  font-size: 12px;
  color: var(--muted);
}
.svc-lane-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 44px;
}
.svc-lane-empty {
  text-align: center;
  color: #b6c0d0;
  padding: 12px 0;
  font-size: 13px;
}
.svc-lane--upcoming .svc-lane-head {
  color: #475569;
}
.svc-lane--checked_in .svc-lane-head {
  color: #1d4ed8;
}
.svc-lane--in_service .svc-lane-head {
  color: #b45309;
}
.svc-lane--done .svc-lane-head {
  color: #15803d;
}
.svc-lane--settled .svc-lane-head {
  color: #64748b;
}
.svc-lane--checked_in {
  background: #eff4ff;
}
.svc-lane--in_service {
  background: #fffaeb;
}
.svc-lane--done {
  background: #f0fdf4;
}
.svc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid #94a3b8;
  border-radius: 12px;
  padding: 11px 12px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  transition:
    transform 0.06s ease,
    box-shadow 0.06s ease;
}
.svc-card:hover {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.13);
}
.svc-card:active {
  transform: scale(0.985);
}
.svc-card--upcoming {
  border-left-color: #94a3b8;
}
.svc-card--checked_in {
  border-left-color: #3b82f6;
}
.svc-card--in_service {
  border-left-color: #f59e0b;
}
.svc-card--done {
  border-left-color: #22c55e;
}
.svc-card--settled {
  border-left-color: #cbd5e1;
  opacity: 0.72;
}
.svc-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.svc-card-top b {
  font-size: 15px;
}
.svc-time {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.svc-card-svc {
  font-size: 14px;
  color: var(--text);
  margin-top: 2px;
}
.svc-card-meta {
  font-size: 12.5px;
  color: var(--text);
  margin-top: 5px;
  line-height: 1.35;
}
.svc-addr,
.svc-concern {
  margin-top: 3px;
  font-size: 12px;
}
.svc-card-foot {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}
.svc-money {
  font-weight: 800;
  font-size: 15px;
}
.svc-dep {
  font-size: 11px;
}
.svc-adv {
  width: 100%;
  margin-top: 9px;
  padding: 9px;
  font-size: 14px;
  border-radius: 9px;
}
.svc-settled {
  color: #64748b;
  font-weight: 800;
  margin-top: 9px;
  display: inline-block;
}
.svc-kind {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: 5px;
  vertical-align: middle;
  margin-left: 4px;
  background: #f1f5f9;
  color: #475569;
}
.svc-kind--labor {
  background: #dbeafe;
  color: #1e40af;
}
.svc-kind--part {
  background: #fef3c7;
  color: #92400e;
}
.svc-kind--addon {
  background: #ede9fe;
  color: #6d28d9;
}
.svc-kind--service {
  background: #dcfce7;
  color: #166534;
}
.svc-kind--fee {
  background: #ffe4e6;
  color: #9f1239;
}
.svc-kind--unit {
  background: #cffafe;
  color: #155e75;
}
.svc-kind--item {
  background: #f1f5f9;
  color: #475569;
}
.svc-detail {
  text-align: left;
}
.svc-asset {
  background: var(--bg);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 14px;
  margin: 4px 0 10px;
}
.svc-addline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 10px 0;
}
.svc-addline input {
  flex: 1;
  min-width: 110px;
  padding: 9px;
}
.svc-spaces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.svc-pill--upcoming {
  background: #f1f5f9;
  color: #475569;
}
.svc-pill--checked_in {
  background: #dbeafe;
  color: #1e40af;
}
.svc-pill--in_service {
  background: #fef9c3;
  color: #854d0e;
}
.svc-pill--done {
  background: #dcfce7;
  color: #166534;
}
.svc-pill--settled {
  background: #f1f5f9;
  color: #64748b;
}
@media (max-width: 720px) {
  .svc-lane {
    flex: 0 0 80%;
  }
}

/* ===== Counter intelligence — shared customer card + redeem + waiver (both counters) ===== */
.cust-panel {
  margin: 10px 0;
}
.cust-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}
.cust-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cust-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.cust-id {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.cust-id b {
  font-size: 15px;
}
.cust-id .muted {
  font-size: 12px;
}
.cust-badge {
  margin-left: auto;
  background: #ede9fe;
  color: #6d28d9;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 3px 9px;
  border-radius: 999px;
}
.cust-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cust-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.35;
}
.cust-ic {
  flex: 0 0 18px;
  text-align: center;
}
.cust-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 5px;
  vertical-align: middle;
}
.cust-tag--mem {
  background: #ede9fe;
  color: #6d28d9;
}
.cust-empty {
  color: #b45309;
  font-weight: 700;
}
.cust-none {
  font-size: 12.5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.cust-hist {
  margin-top: 3px;
  padding-top: 7px;
  border-top: 1px dashed var(--line);
}
.cust-hist-h {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.cust-hist-row {
  font-size: 12.5px;
  line-height: 1.4;
}
.cust-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.cust-act {
  padding: 8px 12px;
  font-size: 13px;
}
.cust-act.on {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
/* Waiver */
.cust-waiver-flag {
  display: inline-block;
  margin-top: 5px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}
.cust-waiver-status {
  margin: 4px 0 10px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
}
.cust-waiver-status.ok {
  background: #f0fdf4;
  color: #166534;
}
.cust-waiver-status.due {
  background: #fff7ed;
  color: #9a3412;
}
.cust-waiver {
  text-align: left;
}
.cust-waiver-body {
  margin: 4px 0;
}
.cust-check {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13.5px;
  margin: 10px 0;
  line-height: 1.4;
  cursor: pointer;
}
.cust-check input {
  width: auto;
  margin-top: 2px;
  flex: 0 0 auto;
}
.cust-sig {
  font-family: "Segoe Script", "Brush Script MT", cursive;
  font-size: 20px;
}

/* ============================ QUEUE & PICKUP BOARD (q-) ============================ */
.q-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 0 16px;
}
.q-modes {
  margin-left: auto;
  display: flex;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.q-mode {
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.q-mode.on {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}
.q-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  align-items: start;
}
.q-lane {
  flex: 1 0 210px;
  min-width: 210px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
}
.q-lane-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 6px 8px 10px;
}
.q-count {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  font-size: 11px;
  padding: 1px 8px;
}
.q-lane-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 48px;
}
.q-lane-empty {
  text-align: center;
  color: #b6c0d0;
  padding: 16px 0;
  font-size: 13px;
}
.q-lane--waiting .q-lane-head {
  color: #475569;
}
.q-lane--prepping {
  background: #fffaeb;
}
.q-lane--prepping .q-lane-head {
  color: #b45309;
}
.q-lane--ready {
  background: #f0fdf4;
}
.q-lane--ready .q-lane-head {
  color: #15803d;
}
.q-lane--done .q-lane-head {
  color: #64748b;
}
.q-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid #94a3b8;
  border-radius: 12px;
  padding: 11px 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.q-card--waiting {
  border-left-color: #94a3b8;
}
.q-card--prepping,
.q-card--line-serving {
  border-left-color: #f59e0b;
}
.q-card--ready {
  border-left-color: #22c55e;
}
.q-card--done,
.q-card--line-done {
  border-left-color: #cbd5e1;
  opacity: 0.72;
}
.q-card--line-waiting {
  border-left-color: #3b82f6;
}
.q-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.q-num {
  font-weight: 800;
  font-size: 15px;
}
.q-elapsed {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.q-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 6px;
}
.q-badge--order {
  background: #fef3c7;
  color: #92400e;
}
.q-badge--line {
  background: #dbeafe;
  color: #1e40af;
}
.q-badge--serving {
  background: #dcfce7;
  color: #166534;
}
.q-card-name {
  font-weight: 700;
  font-size: 14px;
  margin-top: 6px;
}
.q-card-items {
  font-size: 12.5px;
  color: var(--muted);
  margin: 2px 0 2px;
  line-height: 1.35;
}
.q-adv {
  width: 100%;
  margin-top: 9px;
  padding: 11px;
  font-size: 14px;
  border-radius: 10px;
}
.q-served {
  display: inline-block;
  margin-top: 9px;
  color: #64748b;
  font-weight: 800;
  font-size: 13px;
}
/* KDS / prep view */
.q-kds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.q-kds-empty {
  text-align: center;
  color: var(--muted);
  padding: 40px 0;
  font-weight: 700;
  font-size: 16px;
}
.q-kds-ticket {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 5px solid #94a3b8;
  border-radius: 12px;
  padding: 12px 13px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}
.q-kds--fresh {
  border-top-color: #22c55e;
}
.q-kds--aging {
  border-top-color: #f59e0b;
}
.q-kds--late {
  border-top-color: #ef4444;
}
.q-kds-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.q-kds-head .q-num {
  font-size: 18px;
}
.q-kds-who {
  font-size: 12.5px;
  color: var(--text);
  margin: 4px 0 8px;
  text-transform: capitalize;
}
.q-kds-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.q-kds-item {
  font-size: 15px;
  font-weight: 600;
}
.q-kds-qty {
  display: inline-block;
  min-width: 26px;
  font-weight: 800;
  color: var(--primary);
}
/* floating "texted the customer" toast */
.q-toast-host {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.q-toast {
  background: #0f172a;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.35);
  max-width: 90vw;
  opacity: 1;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.q-toast-out {
  opacity: 0;
  transform: translateY(8px);
}
@media (max-width: 720px) {
  .q-lane {
    flex: 0 0 82%;
  }
}

/* ============================ CUSTOMER WAIT DISPLAY (disp-) ============================ */
.disp-cfg .disp-cfg-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 12px;
}
.disp-cfg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
.disp-cfg-min {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.disp-cfg-min input {
  width: 68px;
  padding: 6px 8px;
  text-align: right;
}
/* the "on the wall" screen — dark, high-contrast, big type, minimal chrome */
.disp-screen {
  background: radial-gradient(1200px 500px at 50% -10%, #1e293b, #0b1220 70%);
  color: #f8fafc;
  border-radius: 18px;
  padding: 26px 28px 20px;
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.35);
}
.disp-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.disp-biz {
  color: #e2e8f0;
}
.disp-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 18px 0 22px;
}
.disp-hero-serving,
.disp-hero-ready {
  background: #ffffff0d;
  border: 1px solid #ffffff1a;
  border-radius: 16px;
  padding: 20px 22px;
}
.disp-hero-ready {
  background: #05966922;
  border-color: #10b98155;
}
.disp-hero-lbl {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #94a3b8;
}
.disp-hero-ready .disp-hero-lbl {
  color: #6ee7b7;
}
.disp-hero-num {
  font-size: 72px;
  font-weight: 800;
  line-height: 1.05;
  margin-top: 4px;
  letter-spacing: 1px;
}
.disp-ready-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}
.disp-ready-num {
  font-size: 44px;
  font-weight: 800;
  color: #34d399;
}
.disp-dim {
  color: #64748b;
  font-size: 18px;
  font-weight: 600;
}
.disp-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.disp-col {
  background: #ffffff08;
  border: 1px solid #ffffff14;
  border-radius: 14px;
  padding: 14px 16px;
}
.disp-col-h {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #cbd5e1;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.disp-line-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #ffffff0f;
  font-size: 20px;
}
.disp-line-row:last-child {
  border-bottom: none;
}
.disp-pos {
  font-weight: 800;
  color: #93c5fd;
  min-width: 54px;
}
.disp-line-name {
  flex: 1;
  font-weight: 600;
}
.disp-line-eta {
  font-weight: 800;
  color: #fbbf24;
  white-space: nowrap;
}
.disp-foot {
  text-align: center;
  color: #64748b;
  font-size: 12px;
  margin-top: 16px;
}
@media (max-width: 720px) {
  .disp-cfg .disp-cfg-cols,
  .disp-hero,
  .disp-cols {
    grid-template-columns: 1fr;
  }
  .disp-hero-num {
    font-size: 56px;
  }
}

/* ============================ CLOSE-OUT & EXTRAS (co-) ============================
   Cash drawer, Z-report, returns/exchanges, tip pool, dual-screen confirm. Reuses the
   card2 / stat / pos-tot / pos-step / btn vocabulary; co- adds only what's new. */
/* over/short + status badges */
.co-osbadge {
  display: inline-block;
  font-weight: 800;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
}
.co-osbadge.ok {
  background: #dcfce7;
  color: #166534;
}
.co-osbadge.co-over {
  background: #dbeafe;
  color: #1e40af;
}
.co-osbadge.co-short {
  background: #fef2f2;
  color: #b91c1c;
}
.co-over {
  color: #1e40af;
  font-weight: 800;
}
.co-short {
  color: #b91c1c;
  font-weight: 800;
}
.pill.exchanged {
  background: #ede9fe;
  color: #6d28d9;
}
/* cash drawer */
.co-drawer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.co-expected {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px solid var(--line);
  font-size: 15px;
  font-weight: 600;
}
.co-expected b {
  font-size: 28px;
  font-weight: 800;
}
/* tip pool + z-report segmented toggle */
.co-seg {
  display: inline-flex;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.co-segbtn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.co-segbtn.on {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}
/* returns / exchange modal */
.co-ret {
  text-align: left;
}
.co-ret-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.co-ret-done {
  opacity: 0.55;
}
.co-ret-acts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.co-ret-acts button {
  padding: 11px 6px;
  font-size: 14px;
}
.co-ret-acts button:disabled {
  opacity: 0.45;
  cursor: default;
}
@media (max-width: 520px) {
  .co-ret-acts {
    grid-template-columns: 1fr;
  }
}
/* dual-screen customer-facing confirm — full-bleed overlay */
.co-screen {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: radial-gradient(1200px 600px at 50% -10%, #1e293b, #0b1220 72%);
  display: grid;
  place-items: center;
  padding: 20px;
}
.co-screen-inner {
  width: 100%;
  max-width: 560px;
}
.co-cust {
  text-align: center;
  color: #f8fafc;
}
.co-cust-biz {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #94a3b8;
}
.co-cust-lbl {
  margin-top: 26px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #94a3b8;
}
.co-cust-amt {
  font-size: 72px;
  font-weight: 800;
  line-height: 1.05;
  margin-top: 4px;
}
.co-cust-tipnote {
  color: #6ee7b7;
  font-weight: 700;
  margin-top: 6px;
}
.co-cust-tipq {
  margin-top: 26px;
  font-size: 18px;
  font-weight: 700;
  color: #e2e8f0;
}
.co-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 12px;
  margin: 14px 0 22px;
}
.co-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 18px 10px;
  border: 1.5px solid #ffffff26;
  background: #ffffff0d;
  color: #f8fafc;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 20px;
}
.co-tip span {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 600;
}
.co-tip:hover {
  border-color: #38bdf8;
}
.co-tip.sel {
  border-color: #38bdf8;
  background: #38bdf822;
  color: #fff;
}
.co-tip.sel span {
  color: #bae6fd;
}
.co-sig {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: 1.5px solid #ffffff33;
  background: #ffffff12;
  color: #fff;
  font-size: 20px;
  text-align: center;
  font-family: "Segoe Script", "Brush Script MT", cursive;
}
.co-sig::placeholder {
  color: #64748b;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 15px;
}
.co-confirm {
  width: 100%;
  margin-top: 16px;
  font-size: 20px;
  padding: 17px;
  border-radius: 14px;
}
.co-back {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: none;
  border: none;
  color: #94a3b8;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
.co-cust-demo {
  color: #475569;
  font-size: 12px;
  margin-top: 18px;
}
@media (max-width: 520px) {
  .co-cust-amt {
    font-size: 56px;
  }
}

/* ============================ ESTIMATES / RESERVATIONS / PLANS ============================
   Backend modules surfaced in the owner panel. Reuse card2 / pos-tot / pill / btn / ghostbtn /
   x / muted / ok vocabulary; est- / rez- / plan- add only what's new. Money stays integer-cents. */
/* --- Estimates --- */
.est-cust {
  margin-bottom: 12px;
}
.est-lines {
  margin: 6px 0;
}
.est-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.est-line-nm {
  font-weight: 700;
  font-size: 15px;
}
.est-line-nm .muted {
  font-size: 12px;
  font-weight: 500;
}
.est-line-amt {
  font-weight: 800;
  min-width: 60px;
  text-align: right;
}
.est-addline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px 0 4px;
}
.est-addline input {
  flex: 1;
  min-width: 110px;
  padding: 9px;
}
.est-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px solid var(--line);
  font-size: 15px;
  font-weight: 600;
}
.est-total b {
  font-size: 24px;
  font-weight: 800;
}
.est-quote {
  border: 1px solid var(--line);
  border-left: 4px solid #94a3b8;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.est-quote--draft {
  border-left-color: #94a3b8;
}
.est-quote--sent {
  border-left-color: #f59e0b;
}
.est-quote--approved {
  border-left-color: #22c55e;
}
.est-quote--converted {
  border-left-color: #6366f1;
  background: #fafaff;
}
.est-quote-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.est-quote-r {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.est-quote-r b {
  font-size: 17px;
}
.est-link {
  margin: 10px 0 4px;
  font-size: 13px;
}
.est-linkcode {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 8px;
  font-size: 12.5px;
  color: var(--primary);
  word-break: break-all;
}
.est-acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}
.est-pill--draft {
  background: #f1f5f9;
  color: #475569;
}
.est-pill--sent {
  background: #fef9c3;
  color: #854d0e;
}
.est-pill--approved {
  background: #dcfce7;
  color: #166534;
}
.est-pill--converted {
  background: #ede9fe;
  color: #6d28d9;
}
/* --- Reservations --- */
.rez-cust {
  margin: 10px 0;
}
.rez-results {
  margin-top: 12px;
}
.rez-unit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.rez-unit b {
  font-size: 15px;
}
.rez-booked {
  margin-top: 10px;
  font-size: 13px;
}
.rez-stay {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
}
.rez-stay:last-child {
  border-bottom: none;
}
.rez-stay-r {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
/* --- Service plans --- */
.plan-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid #22c55e;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.plan-row--paused {
  border-left-color: #f59e0b;
  opacity: 0.9;
}
.plan-row--ended {
  border-left-color: #cbd5e1;
  opacity: 0.65;
}
.plan-main b {
  font-size: 15px;
}
.plan-next {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  margin-top: 6px;
}
.plan-row--paused .plan-next,
.plan-row--ended .plan-next {
  color: var(--muted);
}
.plan-acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.pill.plan-cad {
  background: #e0e7ff;
  color: #3730a3;
}
.plan-pill--paused {
  background: #fef9c3;
  color: #854d0e;
}
.plan-pill--ended {
  background: #f1f5f9;
  color: #64748b;
}
@media (max-width: 620px) {
  .plan-row {
    flex-direction: column;
  }
  .plan-acts {
    justify-content: flex-start;
  }
}

/* ============================ WORK-IN-PROGRESS RECOVERY ============================
   Resume banner for locally autosaved drafts (docs/ACTIVITY-RECOVERY.md, rendered by
   draftStore.js on admin + wizard). Amber heads-up tone in the pos-demoflag family;
   literal colors like the other pill/status palettes, so it reads the same on both pages. */
.draft-banner {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 12px 42px 12px 16px;
  margin: 14px 18px 0;
  position: relative;
  font-size: 14px;
  color: #78350f;
}
.draft-banner-title {
  font-weight: 800;
  margin-bottom: 2px;
}
.draft-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0 2px;
}
.draft-row + .draft-row {
  border-top: 1px dashed #fde68a;
  margin-top: 6px;
}
.draft-row-info {
  flex: 1;
  min-width: 180px;
}
.draft-row-meta {
  color: #a16207;
  font-size: 12.5px;
  margin-top: 1px;
}
.draft-resume {
  background: #b45309;
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.draft-resume:hover {
  background: #92400e;
}
.draft-discard {
  background: transparent;
  color: #a16207;
  border: 1px solid #fcd34d;
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.draft-discard:hover {
  background: #fef3c7;
}
.draft-dismiss {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: #a16207;
  font-size: 18px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
}
.draft-dismiss:hover {
  color: #78350f;
}
/* Inside the wizard column the banner is the first child — tuck it to the container edges. */
.wiz .draft-banner {
  margin: 14px 0 6px;
}

/* ============================ SESSION FEATURES (owner back-office demos) ============================
   Gift-card freeze, purchase orders / receiving, multi-location inventory, memberships, work-order
   labor, campaign drip + automations. Reuses card2 / tablerow / pill / btn / ghostbtn / x / switch /
   est-addline vocabulary; each block adds only what's new. Admin CSS vars (--primary/--line/etc). */

/* --- Gift cards: fraud-watch freeze --- */
.gc-card--frozen {
  border-color: #fecaca;
  background: #fff7f7;
}
.gc-hold {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 12px;
  padding: 11px 13px;
  margin: 10px 0;
  font-size: 13.5px;
  line-height: 1.45;
}
.gc-sigs {
  margin-top: 6px;
}
.gc-sig {
  display: inline-block;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  margin: 3px 4px 0 0;
}
.gc-acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}
.gc-ledger {
  margin-top: 8px;
  padding-top: 4px;
  border-top: 1px dashed var(--line);
}

/* --- Purchase orders / receiving --- */
.po-card {
  border-left: 4px solid #94a3b8;
}
.po-card--ordered {
  border-left-color: #f59e0b;
}
.po-card--partially_received {
  border-left-color: #3b82f6;
}
.po-card--received {
  border-left-color: #22c55e;
}
.po-card--cancelled {
  border-left-color: #cbd5e1;
  opacity: 0.7;
}
.po-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.po-recv {
  width: 74px;
  padding: 7px;
}
.po-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin-top: 5px;
  max-width: 220px;
}
.po-bar > span {
  display: block;
  height: 100%;
  background: #22c55e;
}
.po-pill--draft {
  background: #f1f5f9;
  color: #475569;
}
.po-pill--ordered {
  background: #fef9c3;
  color: #854d0e;
}
.po-pill--partially_received {
  background: #dbeafe;
  color: #1e40af;
}
.po-pill--received {
  background: #dcfce7;
  color: #166534;
}
.po-pill--cancelled {
  background: #f1f5f9;
  color: #64748b;
}
.po-acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

/* --- Multi-location inventory --- */
.loc-scroll {
  overflow-x: auto;
}
.loc-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
.loc-table th,
.loc-table td {
  text-align: right;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.loc-table th:first-child,
.loc-table td:first-child {
  text-align: left;
}
.loc-table thead th {
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.loc-table td.loc-default,
.loc-table th.loc-default {
  color: var(--primary);
}

/* --- Memberships: billing mode --- */
.mem-billing {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
}
.mem-billing--manual {
  background: #f1f5f9;
  color: #475569;
}
.mem-billing--stripe {
  background: #ede9fe;
  color: #6d28d9;
}

/* --- Work-order labor --- */
.wo-labor {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.wo-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--line);
  font-size: 15px;
  font-weight: 600;
}
.wo-total b {
  font-size: 22px;
  font-weight: 800;
}

/* --- Campaign drip sequence + automations --- */
.drip-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.drip-delay {
  flex: 0 0 auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.drip-msg {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pill.recurring {
  background: #ede9fe;
  color: #6d28d9;
}
.lead-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 13px;
  margin: 0 6px 6px 0;
}
.lead-chip button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.lead-chip button:hover {
  color: #b91c1c;
}

/* Prospect-facing design switcher (app.js buildLookBar) — a floating, always-visible pill bar so a
   customer can click through the design looks even when the rep control bar is hidden. */
.lookbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(94vw, 900px);
  padding: 8px 10px;
  background: rgba(15, 20, 32, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.38);
  overflow-x: auto;
  scrollbar-width: none;
}
.lookbar::-webkit-scrollbar {
  display: none;
}
.lookbar-lbl {
  font-size: 12.5px;
  font-weight: 700;
  color: #cdd5e6;
  white-space: nowrap;
  padding: 0 4px 0 6px;
  flex: 0 0 auto;
}
.lookpill {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: #dfe4ee;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.lookpill:hover {
  background: rgba(255, 255, 255, 0.18);
}
.lookpill.on {
  color: #10131c;
  background: #fff;
  font-weight: 800;
}
@media (max-width: 640px) {
  .lookbar {
    bottom: 10px;
    gap: 6px;
  }
  .lookbar-lbl {
    display: none;
  }
}