/* Alpha Care Services — combined site styles */
/* Locked palette: cream #FBF7F2, black #0F0F10, coral #F08A85, warm grey #6B6560 */

:root {
  --cream: #FBF7F2;
  --black: #0F0F10;
  --coral: #F08A85;
  --warm-grey: #6B6560;
  --charcoal-card: #1A1A1B;
  --white: #FFFFFF;

  /* Theme — Dark Coral (default). Light Coral override lives further down.
     --acs-primary-rgb is the single source of truth: Tailwind config consumes it
     via rgb(var(--acs-primary-rgb) / <alpha-value>) and every custom CSS rule
     that needs a shade of coral derives from these two vars. */
  --acs-primary: #B45A56;
  --acs-primary-strong: #9F4F4B;
  /* Space-separated so modern rgb(var() / alpha) works AND Tailwind's
     rgb(var() / <alpha-value>) utility expansion gets valid CSS. */
  --acs-primary-rgb: 180 90 86;
}
html[data-theme="light"] {
  --acs-primary: #F08A85;
  --acs-primary-strong: #E07570;
  --acs-primary-rgb: 240 138 133;
}

/* Base — no global smooth scroll (would animate scroll-to-top on nav clicks) */
html { scroll-behavior: auto; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--black);
  background-color: var(--cream);
}
/* Smooth only for hash / anchor jumps within same page */
html:has(a[href^="#"]:focus),
.smooth-scroll { scroll-behavior: smooth; }

/* Smooth navigation fade — triggered by JS on every enhanced navigation */
main.page-enter-anim {
  animation: page-enter 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Anchor link jump — no default target/focus outline on section jumps */
:target,
:target:focus,
:target:focus-visible,
[id]:target,
[id]:focus,
[id]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}
section:target,
div:target { outline: none !important; }

/* Offset anchor scroll so sticky header doesn't cover the section title */
[id] { scroll-margin-top: 120px; }


/* Nav overlay removed — initial-load spinner lives inline in App.razor */

/* Mobile heading safety caps. Covers pages whose h1/h2 use desktop sizes
   like text-display-lg or text-headline-lg without a mobile variant. */
@media (max-width: 639px) {
    main h1,
    section h1 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        letter-spacing: -0.01em;
    }
    main h2,
    section h2 {
        font-size: 1.25rem !important;
        line-height: 1.25 !important;
    }
    main h3,
    section h3 {
        font-size: 1.0625rem !important;
        line-height: 1.3 !important;
    }
    /* Hero kicker badges — allow wrap, cap font so long location strings
       don't dominate the viewport. */
    main section .inline-flex[class*="rounded-full"],
    section .inline-flex[class*="rounded-full"] {
        font-size: 0.75rem;
        line-height: 1.3;
    }
    /* Hero body copy sized for comfortable mobile read */
    section p[class*="text-body-xl"],
    section p[class*="font-body-xl"] {
        font-size: 0.9375rem !important;
        line-height: 1.55 !important;
    }
}

/* Focus outlines only on interactive elements (buttons/links) */
*:focus { outline: none !important; }
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--coral) !important;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Inputs use coral border on focus, no outline ring */
input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--coral) !important;
}
/* Never show any focus ring on structural or heading elements */
h1, h2, h3, h4, h5, h6,
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
h1:focus-visible, h2:focus-visible, h3:focus-visible,
main, main:focus, main:focus-visible,
header, header:focus, header:focus-visible,
section, section:focus, section:focus-visible,
aside, aside:focus, aside:focus-visible,
nav, nav:focus, nav:focus-visible,
footer, footer:focus, footer:focus-visible,
div:focus-visible, span:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}
h1[tabindex], h2[tabindex] {
  outline: none !important;
}

/* Force consistent container width + gutters across every section */
.max-w-\[1400px\] {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 3vw, 3rem);
  padding-right: clamp(1rem, 3vw, 3rem);
  box-sizing: border-box;
}

/* Material Symbols — shared across all pages */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}
.material-symbols-fill {
  font-variation-settings:
    'FILL' 1,
    'wght' 500,
    'GRAD' 0,
    'opsz' 24;
}

/* Shared shadow presets from Stitch pages */
.shadow-warm-ambient {
  box-shadow: 0 4px 20px -8px rgba(15, 15, 16, 0.08), 0 2px 8px -4px rgba(15, 15, 16, 0.05);
}
.shadow-warm-raised {
  box-shadow: 0 12px 32px -12px rgba(15, 15, 16, 0.14), 0 4px 12px -4px rgba(15, 15, 16, 0.08);
}
.custom-warm-shadow {
  box-shadow: 0 6px 24px -8px rgba(15, 15, 16, 0.10);
}
.custom-hover-shadow {
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.custom-hover-shadow:hover {
  box-shadow: 0 16px 40px -12px rgba(15, 15, 16, 0.16);
  transform: translateY(-2px);
}
.ambient-card-shadow {
  box-shadow: 0 8px 28px -12px rgba(15, 15, 16, 0.10);
}
.soft-card-shadow {
  box-shadow: 0 4px 16px -6px rgba(15, 15, 16, 0.08);
}
.hover-lift {
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px -10px rgba(15, 15, 16, 0.14);
}

/* Kill underline on hover site-wide (Thomas feedback) */
a:hover, a:focus, a:active,
a.hover\:underline:hover,
[class*="hover:underline"]:hover {
  text-decoration: none !important;
}

/* Coral link hover */
a.coral-link {
  color: var(--coral);
  text-decoration: none;
}
a.coral-link:hover {
  text-decoration: underline;
}

/* Utility: cream section, black section, coral pill */
.section-cream { background-color: var(--cream); }
.section-black { background-color: var(--black); color: var(--cream); }
.pill-coral {
  background-color: var(--coral);
  color: var(--black);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-weight: 500;
}
.btn-coral {
  background-color: var(--coral);
  color: var(--black);
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: filter 150ms ease;
}
.btn-coral:hover { filter: brightness(0.95); }
.btn-outline-coral {
  border: 2px solid var(--coral);
  color: var(--coral);
  border-radius: 12px;
  padding: 0.65rem 1.5rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: transparent;
}

/* Consistency: keep primary CTA / phone / callback buttons on one line */
a[href^="tel:"],
a[href="/contact#assessment"],
a[href="/contact#callback"],
button[type="submit"],
.hero-cta,
.cta-primary,
.cta-outline {
  white-space: nowrap;
}
/* Pills/buttons on one line — restrict to anchors + buttons only (divs stay wrappable) */
a[class*="rounded-full"],
button[class*="rounded-full"],
a[class*="rounded-xl"][class*="px-5"],
a[class*="rounded-xl"][class*="px-6"],
a[class*="rounded-xl"][class*="px-8"],
button[class*="rounded-xl"][class*="px-5"],
button[class*="rounded-xl"][class*="px-6"],
button[class*="rounded-xl"][class*="px-8"] {
  white-space: nowrap;
}

/* Prevent horizontal page scroll but preserve position:sticky (use clip, not hidden) */
html, body { overflow-x: clip; }
body { overflow-x: clip; }

/* Sticky header: solid cream + soft shadow, deepens on scroll */
.site-header {
  background-color: #FBF7F2;
  box-shadow: 0 1px 0 0 rgba(15, 15, 16, 0.04);
  transition: box-shadow 220ms ease;
}
.site-header.scrolled {
  background-color: rgba(251, 247, 242, 0.92);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 8px 24px -12px rgba(15, 15, 16, 0.15), 0 2px 8px -4px rgb(var(--acs-primary-rgb) / 0.08);
}

/* Nav links — stronger presence */
.site-header .nav-link {
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.01em;
  color: #2A2A2A !important;
  position: relative;
  padding: 6px 2px !important;
}
.site-header .nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--acs-primary);
  border-radius: 2px;
  transition: width 180ms ease;
}
.site-header .nav-link:hover::after,
.site-header .nav-link.active::after,
.site-header a.nav-link.active::after {
  width: 100% !important;
}
.site-header .nav-link:hover,
.site-header .nav-link.active,
.site-header a.nav-link.active { color: var(--acs-primary) !important; }

/* ==================== Chatbot panel ==================== */
.chatbot-panel {
  background: #FFFFFF;
  border-radius: 20px;
  border: none;
  box-shadow: 0 24px 60px -12px rgba(15,15,16,0.25), 0 8px 24px -8px rgb(var(--acs-primary-rgb) / 0.15);
  animation: chatbot-in 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
#chatbot-panel { border: none; }

/* Chat panel — "start a new chat" confirm overlay */
.acs-chat-reset-overlay {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 15, 16, 0.28);
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    border-radius: 20px;
    animation: acsResetFade 180ms ease-out both;
}
.acs-chat-reset-overlay.acs-chat-reset-out { animation: acsResetFadeOut 160ms ease-in both; }
.acs-chat-reset-card {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 20px 20px 16px;
    width: 100%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 20px 50px -10px rgba(15, 15, 16, 0.35);
    animation: acsResetPop 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.acs-chat-reset-icon {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(240, 138, 133, 0.14);
    color: var(--acs-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.acs-chat-reset-icon .material-symbols-outlined { font-size: 24px; }
.acs-chat-reset-card h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #0F0F10;
}
.acs-chat-reset-card p {
    margin: 0 0 16px;
    font-size: 13px;
    color: #4B4740;
    line-height: 1.45;
}
.acs-chat-reset-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.acs-chat-reset-btn-ghost,
.acs-chat-reset-btn-destructive {
    flex: 1;
    padding: 9px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border: none;
}
.acs-chat-reset-btn-ghost {
    background: transparent;
    color: #4B4740;
    border: 1px solid rgba(15, 15, 16, 0.14);
}
.acs-chat-reset-btn-ghost:hover { background: rgba(15, 15, 16, 0.04); }
.acs-chat-reset-btn-destructive {
    background: var(--acs-primary);
    color: #FFFFFF;
}
.acs-chat-reset-btn-destructive:hover { background: #A14F4B; }
@keyframes acsResetFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes acsResetFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes acsResetPop {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .acs-chat-reset-overlay, .acs-chat-reset-card { animation: none; }
}
@keyframes chatbot-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Warm-coral theme — header matches the logo's lighter coral so the chatbot
   feels like part of the brand. User bubbles + CTA stay a shade darker for
   action emphasis but same family — no light-top / dark-bottom jump. */
.chatbot-header {
  background: linear-gradient(135deg, var(--acs-primary) 0%, var(--acs-primary-strong) 100%);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.chatbot-body {
  background: #FBF7F2;
  padding-top: 28px !important;
  scroll-padding-top: 28px;
  /* Fade the top ~22px of the scroll area to transparent so content scrolling
     under the header always has a soft gap instead of pressing flush against it. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
/* Extra breathing room when the sender changes (user ↔ bot) — groups
   same-sender messages tightly and visually separates each turn. */
.chatbot-body .chat-msg-user + .chat-msg-bot,
.chatbot-body .chat-msg-bot + .chat-msg-user {
  margin-top: 14px !important;
}
/* First message always has an extra buffer so even if the thread has scrolled,
   when it eventually lands at the top of the scroll area it still looks spaced. */
.chatbot-body > .chat-msg:first-child { margin-top: 8px; }
.chatbot-footer {
  background: #FBF7F2;
  border-top: 1px solid rgba(107,101,96,0.15);
}
.chatbot-footer-note {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 4px 14px 12px;
}
.chatbot-footer-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.chatbot-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: #6B6560;
  background: #FFFFFF;
  border: 1px solid rgba(107,101,96,0.18);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.chatbot-footer-badge .material-symbols-outlined { color: var(--acs-primary) !important; }
.chatbot-footer-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--acs-primary) 0%, var(--acs-primary-strong) 100%);
  color: #FFFFFF !important;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 3px 10px -2px rgb(var(--acs-primary-rgb) / 0.35);
}
.chatbot-footer-call:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -2px rgb(var(--acs-primary-rgb) / 0.45);
}
.chatbot-footer-call .material-symbols-outlined { color: #FFFFFF !important; }

/* Chat messages */
.chat-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  animation: chat-msg-in 220ms ease;
}
@keyframes chat-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg-bot .chat-bubble {
  background: #FFFFFF;
  color: #0F0F10;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 18px 18px 18px 4px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 78%;
  box-shadow: 0 2px 8px -2px rgba(15,15,16,0.05);
}
.chat-msg-user {
  justify-content: flex-end;
}
.chat-msg-user .chat-bubble {
  background: var(--acs-primary);
  color: #FFFFFF;
  border-radius: 18px 18px 4px 18px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 78%;
  box-shadow: 0 2px 8px -2px rgb(var(--acs-primary-rgb) / 0.3);
}
.chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF url('/img/acs_favicon.png') center/70% no-repeat;
  border: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0;
  color: transparent;
}

/* 24/7 pulse text animation */
.pulse-247 {
  display: inline-block;
  font-weight: 700;
  color: var(--acs-primary);
  animation: pulse-247 1.6s ease-in-out infinite;
  transform-origin: center;
  margin: 0 4px;
}
@keyframes pulse-247 {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.08); }
}

/* Small live pulse dot (used next to online status + launcher pill) */
.pulse-dot {
  animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--acs-primary-rgb) / 0.5); }
  50% { box-shadow: 0 0 0 6px rgb(var(--acs-primary-rgb) / 0); }
}

/* Pulse ring on chatbot launcher circle (draws attention subtly) */
#chatbot-launcher > button:last-child {
  position: relative;
  animation: launcher-pulse 2.4s ease-out infinite;
}
@keyframes launcher-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--acs-primary-rgb) / 0.55),
                0 12px 32px -4px rgba(15, 15, 16, 0.14),
                0 4px 12px -2px rgba(240, 138, 133, 0.08);
  }
  70% {
    box-shadow: 0 0 0 14px rgb(var(--acs-primary-rgb) / 0),
                0 12px 32px -4px rgba(15, 15, 16, 0.14),
                0 4px 12px -2px rgba(240, 138, 133, 0.08);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(var(--acs-primary-rgb) / 0),
                0 12px 32px -4px rgba(15, 15, 16, 0.14),
                0 4px 12px -2px rgba(240, 138, 133, 0.08);
  }
}
.chat-time {
  font-size: 10.5px;
  color: #6B6560;
  margin-top: 4px;
  opacity: 0.7;
}
.chat-msg-user .chat-time { color: rgba(255,255,255,0.75); text-align: right; }

/* Chips */
.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 36px;
  padding-top: 6px;
}
/* Prompt-style suggested chips: soft coral tint pill, hover fills to solid */
.chat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgb(var(--acs-primary-rgb) / 0.10);
  border: none;
  color: var(--acs-primary) !important;
  cursor: pointer;
  transition: background-color 90ms ease, color 90ms ease, transform 90ms ease, box-shadow 90ms ease;
  white-space: nowrap;
}
.chat-chip .material-symbols-outlined { color: var(--acs-primary) !important; transition: color 90ms ease; }
.chat-chip:hover {
  background: var(--acs-primary);
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgb(var(--acs-primary-rgb) / 0.3);
}
.chat-chip:hover .material-symbols-outlined { color: #FFFFFF !important; }
.chat-chip:active { transform: translateY(0); }

/* Input — explicit white pill with soft border so it looks the same whether
   it's focused or not. Tailwind forms plugin otherwise paints an unstyled
   white rectangle on resting and the custom cream on focus, which jumps. */
.chat-input {
  flex: 1;
  padding: 12px 18px;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(107,101,96,0.18) !important;
  font-size: 14px;
  color: #0F0F10;
  outline: none !important;
  box-shadow: 0 1px 3px rgba(15,15,16,0.04) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.chat-input:focus,
.chat-input:focus-visible {
  background: #FFFFFF !important;
  outline: none !important;
  border: 1px solid rgb(var(--acs-primary-rgb) / 0.55) !important;
  box-shadow: 0 0 0 3px rgb(var(--acs-primary-rgb) / 0.12), 0 1px 3px rgba(15,15,16,0.04) !important;
}
.chat-input::placeholder { color: #BDB7B2; font-weight: 400; }
.chat-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--acs-primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 150ms ease, transform 100ms ease;
  border: none;
  cursor: pointer;
}
.chat-send:hover { background: var(--acs-primary-strong); }
.chat-send:active { transform: scale(0.95); }

/* Custom scrollbar inside chat body */
.chatbot-body::-webkit-scrollbar { width: 6px; }
.chatbot-body::-webkit-scrollbar-thumb {
  background: rgb(var(--acs-primary-rgb) / 0.25);
  border-radius: 3px;
}
.chatbot-body::-webkit-scrollbar-thumb:hover { background: rgb(var(--acs-primary-rgb) / 0.5); }

/* Site header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--cream);
  border-bottom: 1px solid rgba(15, 15, 16, 0.06);
}
.site-header .nav-link {
  color: var(--black);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: color 150ms ease, background-color 150ms ease;
}
.site-header .nav-link:hover { color: var(--coral); }
.site-header .nav-link.active { color: var(--coral); }

/* Mobile side drawer + backdrop */
.mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 15, 16, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}
.mobile-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  width: min(320px, 85vw);
  background: #FBF7F2;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -12px 0 32px -12px rgba(15, 15, 16, 0.2);
  overflow-y: auto;
}
.mobile-menu.open {
  transform: translateX(0);
}
.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  font-weight: 600;
  color: #0F0F10;
  border-radius: 12px;
  transition: background-color 150ms ease, color 150ms ease;
}
/* Hover only applies on real-hover devices (desktop with mouse).
   Touch devices get sticky :hover after tap which caused ghost "active"
   highlights lingering on the mobile drawer. */
@media (hover: hover) {
  .mobile-nav-link:hover {
    background: rgb(var(--acs-primary-rgb) / 0.08);
    color: var(--acs-primary);
  }
}
.mobile-nav-link.active {
  background: rgb(var(--acs-primary-rgb) / 0.12);
  color: var(--acs-primary);
}
.mobile-nav-link .material-symbols-outlined { color: var(--acs-primary); }

/* Header fixed on mobile (aside strip hidden on mobile, so main only offsets for header) */
@media (max-width: 767px) {
  .site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
  }
  main { padding-top: 72px; }
  /* Trim hero top spacing on mobile so content sits closer to header */
  main > section:first-child { padding-top: 8px !important; }
}

/* Site footer — cream/beige background, dark text (matches Figma) */
.site-footer {
  background-color: #EBE8E3 !important;
  color: var(--black) !important;
}
.site-footer h4 { color: var(--black); }
.site-footer p, .site-footer li { color: #4A4744; }
.site-footer a {
  color: #4A4744;
  opacity: 1;
  transition: color 150ms ease;
}
.site-footer a:hover {
  color: var(--coral);
}
.site-footer .text-tertiary,
.site-footer .text-on-surface-variant { color: #4A4744 !important; }
.site-footer strong { color: var(--black); }

/* Social icons: dark on white by default, white on coral on hover (SVG stays visible) */
.site-footer .social-icon { color: var(--black); background-color: #FFFFFF; }
.site-footer .social-icon:hover { background-color: var(--coral) !important; color: #FFFFFF !important; }
.site-footer .social-icon svg { fill: currentColor; }

/* Prevent green from anywhere: safety nets */
[class*="secondary-container"],
[class*="bg-secondary-container"] {
  /* fallback safety, Tailwind config remaps to cream/black */
}

/* Locked palette (Figma updated 2026-09-19)
   Primary        var(--acs-primary)  dark coral  -> buttons, CTAs
   Primary-cont.  #F08A85  light coral -> pills, badges, small accents */
.bg-primary,
.hover\:bg-primary:hover { background-color: var(--acs-primary) !important; }
.bg-primary-container,
.hover\:bg-primary-container:hover { background-color: #F08A85 !important; }

.text-primary,
.hover\:text-primary:hover { color: var(--acs-primary) !important; }
.text-on-primary { color: #FFFFFF !important; }
.text-on-primary-container { color: #0F0F10 !important; }

.border-primary { border-color: var(--acs-primary) !important; }
.border-primary-container { border-color: #F08A85 !important; }
.ring-primary { --tw-ring-color: var(--acs-primary) !important; }
.ring-primary-container { --tw-ring-color: #F08A85 !important; }

/* Button pattern: bg-primary-container + text-on-primary-container = dark coral + white
   (Figma updated 2026-09-19 — all CTA buttons render dark coral with white text) */
a.bg-primary-container,
button.bg-primary-container,
[type="submit"].bg-primary-container {
  background-color: var(--acs-primary) !important;
  color: #FFFFFF !important;
}
a.bg-primary-container *,
button.bg-primary-container *,
[type="submit"].bg-primary-container * {
  color: #FFFFFF !important;
}
/* Keep opacity-variant pills / small badges on light coral */
.bg-primary-container\/40,
.bg-primary-container\/50,
.bg-primary-container\/60 { background-color: rgba(240, 138, 133, 0.4) !important; }

/* Text contrast safety nets — force readable on cream backgrounds */
.text-on-surface-variant { color: #4A4744 !important; }
[class*="text-on-surface-variant/"] { color: #4A4744 !important; opacity: 1 !important; }
.text-outline, .text-outline-variant { color: #6B6560 !important; }

/* Form placeholders: readable, not washed out */
input::placeholder,
textarea::placeholder {
  color: #8A8580 !important;
  opacity: 1 !important;
}
input[class*="placeholder:text-on-surface-variant/"]::placeholder,
textarea[class*="placeholder:text-on-surface-variant/"]::placeholder {
  color: #8A8580 !important;
  opacity: 1 !important;
}

/* FAQ / details paragraphs — always dark warm-grey */
details p, .faq-answer, .site p.text-body-md, .site p.text-body-lg {
  color: #4A4744;
}

/* Small print / helper text next to buttons */
.text-xs.text-on-surface-variant,
.text-sm.text-on-surface-variant {
  color: #4A4744 !important;
}

/* ==================== FAQ (unified across all pages) ==================== */
.faq-item {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 2px 8px -2px rgba(15, 15, 16, 0.04);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.faq-item:hover { box-shadow: 0 4px 14px -4px rgba(15, 15, 16, 0.08); }
.faq-item[open] {
  border-color: rgb(var(--acs-primary-rgb) / 0.25);
  box-shadow: 0 4px 18px -6px rgb(var(--acs-primary-rgb) / 0.12);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 16px;
  color: #0F0F10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }
.faq-item summary .faq-chevron {
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--acs-primary);
  flex-shrink: 0;
}
.faq-item[open] summary .faq-chevron { transform: rotate(180deg); }
.faq-item .faq-answer {
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid rgba(15, 15, 16, 0.06);
  color: #4A4744;
  font-size: 15px;
  line-height: 1.65;
  animation: faq-answer-in 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes faq-answer-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== Admin Console ==================== */
.admin-shell { color: #0F0F10; }

/* Sidebar brand bar + topbar share one height so the UI aligns across the fold */
.admin-brand-bar { min-height: 72px; }

/* Admin sidebar — smooth collapse (JS toggles .sidebar-hidden on .admin-shell) */
.admin-sidebar {
    transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 180ms ease,
                transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: width, opacity, transform;
}

/* Desktop (>=1024px): sticky column, collapses to zero width when hidden */
@media (min-width: 1024px) {
    .admin-sidebar { position: sticky; top: 0; height: 100vh; }
    .admin-sidebar-backdrop { display: none; }
    .admin-shell.sidebar-hidden .admin-sidebar {
        width: 0 !important;
        min-width: 0;
        opacity: 0;
        transform: translateX(-16px);
        overflow: hidden;
        pointer-events: none;
        border-right-width: 0;
    }
}

/* Mobile / tablet (<1024px): slide-in overlay drawer */
@media (max-width: 1023.98px) {
    .admin-sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        z-index: 50;
        transform: translateX(-100%);
        box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    }
    .admin-shell.sidebar-open .admin-sidebar {
        transform: translateX(0);
    }
    .admin-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15,15,16,0.45);
        z-index: 40;
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
    }
    .admin-shell.sidebar-open .admin-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    /* Lock body scroll while drawer open */
    .admin-shell.sidebar-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .admin-sidebar { transition: none; }
    .admin-sidebar-backdrop { transition: none; }
}

/* Cookie disclosure — compact centered pill at bottom of the viewport.
   Enters with a slide-up fade, leaves with the reverse. */
.acs-cookie {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    z-index: 60;
    background: #FFFFFF;
    border: 1px solid rgba(107,101,96,0.2);
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(15,15,16,0.18), 0 2px 4px rgba(15,15,16,0.04);
    padding: 14px 16px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 220ms ease, transform 220ms ease;
}
.acs-cookie.acs-cookie-entering { opacity: 1; transform: translateY(0); }
.acs-cookie.acs-cookie-leaving { opacity: 0; transform: translateY(12px); }
.acs-cookie-row {
    display: flex;
    gap: 14px;
    align-items: center;
}
.acs-cookie-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #FFDAD7;
    color: var(--acs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.acs-cookie-icon .material-symbols-outlined { font-size: 22px; font-variation-settings: 'FILL' 1; }
.acs-cookie-text { flex: 1; min-width: 0; }
.acs-cookie-title { font-size: 13px; font-weight: 700; color: #0F0F10; margin: 0 0 2px; line-height: 1.3; }
.acs-cookie-body { font-size: 12.5px; line-height: 1.45; color: #6B6560; margin: 0; }
.acs-cookie-body a { color: var(--acs-primary); text-decoration: underline; font-weight: 500; }
.acs-cookie-ok {
    flex-shrink: 0;
    background: var(--acs-primary);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    transition: background 150ms ease;
}
.acs-cookie-ok:hover { background: var(--acs-primary-strong); }
.acs-cookie-ok:focus-visible { outline: 2px solid #0F0F10; outline-offset: 2px; }
@media (max-width: 480px) {
    .acs-cookie { bottom: 10px; left: 10px; right: 10px; padding: 12px; }
    .acs-cookie-row { gap: 10px; }
    .acs-cookie-icon { width: 36px; height: 36px; }
    .acs-cookie-body { font-size: 12px; }
}

/* Legal page WYSIWYG editor */
.acs-wysiwyg-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px 10px;
    background: #F1EDE8;
    border-bottom: 1px solid rgba(107,101,96,0.2);
}
.acs-wysiwyg-toolbar button {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    color: #0F0F10;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, border-color 120ms ease;
}
.acs-wysiwyg-toolbar button:hover {
    background: #FBF7F2;
    border-color: rgba(107,101,96,0.3);
}
.acs-wysiwyg-sep {
    width: 1px;
    background: rgba(107,101,96,0.25);
    margin: 4px 6px;
    align-self: stretch;
}
.acs-wysiwyg-editable {
    min-height: 420px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px 24px;
    background: #FFFFFF;
    font-size: 15px;
    line-height: 1.6;
    color: #0F0F10;
    outline: none;
}
.acs-wysiwyg-editable:focus { background: #FFFFFF; }
.acs-wysiwyg-editable h1 { font-size: 1.5rem; font-weight: 700; margin: 1.25rem 0 0.5rem; }
.acs-wysiwyg-editable h2 { font-size: 1.25rem; font-weight: 700; margin: 1.25rem 0 0.5rem; }
.acs-wysiwyg-editable h3 { font-size: 1.05rem; font-weight: 600; margin: 1rem 0 0.4rem; }
.acs-wysiwyg-editable p { margin: 0.6rem 0; }
.acs-wysiwyg-editable ul, .acs-wysiwyg-editable ol { margin: 0.5rem 0 0.75rem 1.5rem; padding-left: 0.5rem; }
.acs-wysiwyg-editable ul li { list-style: disc; }
.acs-wysiwyg-editable ol li { list-style: decimal; }
.acs-wysiwyg-editable a { color: var(--acs-primary); text-decoration: underline; }
.acs-wysiwyg-editable strong { font-weight: 700; }
.acs-wysiwyg-editable em { font-style: italic; }

/* Legal-page prose (public). Professional policy-document typography. */
.acs-legal-prose {
    font-family: "Newsreader", Georgia, serif;
    color: #0F0F10;
    font-size: 1.0625rem;
    line-height: 1.75;
    max-width: 70ch;
}
.acs-legal-prose h1 { font-size: 1.75rem; font-weight: 600; margin: 2.5rem 0 0.75rem; letter-spacing: -0.01em; line-height: 1.25; }
.acs-legal-prose h2 { font-size: 1.4rem; font-weight: 600; margin: 2.25rem 0 0.5rem; letter-spacing: -0.005em; line-height: 1.3; color: #0F0F10; }
.acs-legal-prose h3 { font-size: 1.15rem; font-weight: 600; margin: 1.75rem 0 0.5rem; line-height: 1.35; color: #0F0F10; }
.acs-legal-prose h4 { font-size: 1.0625rem; font-weight: 600; margin: 1.5rem 0 0.4rem; color: #0F0F10; }
.acs-legal-prose p { margin: 1rem 0; }
.acs-legal-prose ul, .acs-legal-prose ol { margin: 0.75rem 0 1.25rem 1.5rem; padding-left: 0.5rem; }
.acs-legal-prose li { margin: 0.4rem 0; line-height: 1.65; }
.acs-legal-prose ul li { list-style: disc; }
.acs-legal-prose ol li { list-style: decimal; }
.acs-legal-prose strong, .acs-legal-prose b { font-weight: 600; color: #0F0F10; }
.acs-legal-prose em, .acs-legal-prose i { font-style: italic; }
.acs-legal-prose u { text-decoration: underline; text-underline-offset: 2px; }
.acs-legal-prose a { color: var(--acs-primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.acs-legal-prose a:hover { color: var(--acs-primary-strong); }
.acs-legal-prose blockquote { border-left: 3px solid #F08A85; padding-left: 1rem; margin: 1.25rem 0; font-style: italic; color: #6B6560; }
.acs-legal-prose code { background: #F1EDE8; padding: 1px 6px; border-radius: 4px; font-size: 0.9em; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.acs-legal-prose hr { border: 0; border-top: 1px solid #E6E2DD; margin: 2rem 0; }
.acs-legal-prose > *:first-child { margin-top: 0; }
.acs-legal-prose > *:last-child { margin-bottom: 0; }

/* Admin legal editor live preview — same prose rules */
.acs-legal-prose-sm h1 { font-size: 1.25rem; font-weight: 700; margin: 1rem 0 0.5rem; }
.acs-legal-prose-sm h2 { font-size: 1.1rem; font-weight: 700; margin: 1rem 0 0.4rem; }
.acs-legal-prose-sm h3 { font-size: 1rem; font-weight: 600; margin: 0.75rem 0 0.4rem; }
.acs-legal-prose-sm p { font-size: 0.875rem; line-height: 1.55; margin: 0.5rem 0; }
.acs-legal-prose-sm ul, .acs-legal-prose-sm ol { margin: 0.4rem 0 0.5rem 1.1rem; padding-left: 0.8rem; }
.acs-legal-prose-sm li { margin: 0.2rem 0; font-size: 0.875rem; }
.acs-legal-prose-sm ul li { list-style: disc; }
.acs-legal-prose-sm ol li { list-style: decimal; }
.acs-legal-prose-sm strong { font-weight: 700; }
.acs-legal-prose-sm em { font-style: italic; }
.acs-legal-prose-sm > *:first-child { margin-top: 0; }

/* Theme switch is handled by :root CSS vars at the top of this file +
   Tailwind config consuming --acs-primary-rgb. No per-selector overrides
   needed — everything coral flows through the vars. */

/* Horizontal-scroll wrapper used by admin data tables. Shows a visible
   scrollbar on touch devices and a soft fade on the right edge so visitors
   know there's more to swipe to. */
.acs-hscroll {
    position: relative;
    overflow-x: auto;
    scrollbar-color: rgba(107,101,96,0.4) transparent;
    scrollbar-width: thin;
}
.acs-hscroll::-webkit-scrollbar { height: 8px; }
.acs-hscroll::-webkit-scrollbar-thumb {
    background: rgba(107,101,96,0.35);
    border-radius: 4px;
}
.acs-hscroll::-webkit-scrollbar-track { background: transparent; }
/* Soft fade on the right edge, visible on narrow viewports where content overflows */
@media (max-width: 767.98px) {
    .acs-hscroll-wrap {
        position: relative;
    }
    .acs-hscroll-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to right, transparent, rgba(0,0,0,0.08));
        pointer-events: none;
        border-top-right-radius: inherit;
        border-bottom-right-radius: inherit;
    }
}

/* Reusable: scrollable container with no visible scrollbar — used for horizontal
   tab strips on mobile. */
.acs-hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.acs-hide-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Hide the admin sidebar's scrollbar — nav still scrolls, just no visible thumb */
.admin-sidebar nav { scrollbar-width: none; -ms-overflow-style: none; }
.admin-sidebar nav::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Lock body + html scroll while a drawer / modal is open so there's only one
   scrollbar on screen. Toggled from Blazor via JS on open/close. */
html.acs-scroll-lock,
body.acs-scroll-lock {
    overflow-y: hidden !important;
}

/* Belt-and-braces: hide the mobile search trigger on >=768px even if the
   Tailwind CDN hasn't emitted md:hidden yet. */
@media (min-width: 768px) {
    .acs-search-mobile-trigger { display: none !important; }
}

/* Mobile notification dropdown — pin to viewport so it never clips off-screen */
@media (max-width: 639.98px) {
    .acs-notif-dropdown {
        position: fixed !important;
        top: 68px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* Mobile admin search — full-width bar that drops in UNDER the header, with
   dark backdrop over the page behind. !important needed because Tailwind CDN
   injects utilities after site.css so .relative / .flex-1 would otherwise win. */
@media (max-width: 767.98px) {
    .acs-search-mobile-backdrop {
        position: fixed !important;
        top: 72px !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        background: rgba(15,15,16,0.5) !important;
        z-index: 45 !important;
    }
    .acs-search-mobile-open {
        position: fixed !important;
        top: 72px !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        flex: none !important;
        padding: 10px 12px !important;
        background: #FBF7F2 !important;
        border-bottom: 1px solid rgba(107,101,96,0.2) !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
        z-index: 50 !important;
        max-width: none !important;
    }
    .acs-search-mobile-open .acs-search-dropdown {
        position: absolute !important;
        left: 12px !important;
        right: 12px !important;
        top: 100% !important;
        width: auto !important;
        margin-top: 8px !important;
        max-height: calc(100vh - 150px) !important;
    }
    /* Icon + close button sit at container edges by default. Nudge them INSIDE
       the input's padding area so they look centered inside the input itself. */
    .acs-search-mobile-open > .material-symbols-outlined { left: 24px !important; }
    .acs-search-mobile-open > button[aria-label="Close search"] { right: 18px !important; }
}
@media (min-width: 768px) {
    .acs-search-mobile-backdrop { display: none !important; }
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: #4A4744;
  border-radius: 8px;
  transition: background-color 120ms ease, color 120ms ease;
  text-decoration: none;
  line-height: 1.2;
  min-height: 38px;
}
.admin-nav-link > .material-symbols-outlined {
  color: currentColor;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.admin-nav-link:hover {
  background: rgb(var(--acs-primary-rgb) / 0.06);
  color: var(--acs-primary);
}
.admin-nav-link.active {
  background: var(--acs-primary);
  color: #FFFFFF;
  font-weight: 600;
}

.admin-topbar { backdrop-filter: saturate(180%) blur(8px); }
.admin-topbar button { display: inline-flex; align-items: center; justify-content: center; }
.admin-topbar .material-symbols-outlined { line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.admin-topbar form { display: inline-flex; align-items: center; }

/* Admin global search dropdown */
.acs-search-dropdown {
  overflow-y: auto;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* IE/Edge */
}
.acs-search-dropdown::-webkit-scrollbar { width: 0; height: 0; display: none; }
.acs-search-row:focus-visible {
  outline: none;
  background: rgba(240, 138, 133, 0.18);
}
.acs-search-row:active { background: rgba(240, 138, 133, 0.32); }

/* Search filter chips (category tabs inside dropdown) */
.acs-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  color: #4B4740;
  background: transparent;
  border: 1px solid rgba(15, 15, 16, 0.12);
  cursor: pointer;
  line-height: 1.1;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
  white-space: nowrap;
}
.acs-search-chip:hover {
  background: rgba(240, 138, 133, 0.08);
  border-color: rgba(240, 138, 133, 0.4);
  color: #0F0F10;
}
.acs-search-chip.active {
  background: #F08A85;
  border-color: #F08A85;
  color: #FFFFFF;
}
.acs-search-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(15, 15, 16, 0.08);
  color: inherit;
}
.acs-search-chip.active .acs-search-chip-count {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

/* Admin filter pills (status tabs on inboxes) */
.filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4B4740;
  background: transparent;
  border: 1px solid rgba(15, 15, 16, 0.12);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  line-height: 1;
  white-space: nowrap;
}
.filter-pill:hover {
  background: rgba(240, 138, 133, 0.1);
  border-color: rgba(240, 138, 133, 0.4);
  color: #0F0F10;
}
.filter-pill.active {
  background: #F08A85;
  border-color: #F08A85;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(240, 138, 133, 0.3);
}
.filter-pill.active:hover {
  background: #E97B76;
  border-color: #E97B76;
  color: #FFFFFF;
}

/* Anchored sections should land clear of any sticky top chrome */
#quick-apply { scroll-margin-top: 96px; }

/* Chatbot — markdown rendering inside reply bubbles */
.chat-bubble-md p { margin: 0; }
.chat-bubble-md p + p { margin-top: 8px; }
.chat-bubble-md .acs-chat-h {
    font-size: 0.95em;
    font-weight: 700;
    margin: 10px 0 4px;
    letter-spacing: -0.01em;
}
.chat-bubble-md .acs-chat-h:first-child { margin-top: 0; }
.chat-bubble-md .acs-chat-list {
    margin: 6px 0;
    padding-left: 20px;
}
.chat-bubble-md .acs-chat-list li { margin: 2px 0; line-height: 1.45; }
.chat-bubble-md ul.acs-chat-list { list-style: disc; }
.chat-bubble-md ol.acs-chat-list { list-style: decimal; }
.chat-bubble-md strong { font-weight: 700; }
.chat-bubble-md em { font-style: italic; }
.chat-bubble-md .acs-chat-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(15, 15, 16, 0.06);
}

/* JS-driven confirm dialog (used by static server-rendered pages — matches the Blazor ConfirmDialog). */
.acs-js-confirm-root {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: acsConfirmFade 180ms ease-out both;
}
.acs-js-confirm-root.is-closing { animation: acsConfirmFadeOut 150ms ease-in both; }
.acs-js-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 16, 0.45);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
}
.acs-js-confirm-panel {
    position: relative;
    width: 100%;
    max-width: 28rem;
    background: #FFFFFF;
    border-radius: 1rem;
    border: 1px solid rgba(15, 15, 16, 0.08);
    box-shadow: 0 24px 60px -12px rgba(15, 15, 16, 0.35);
    overflow: hidden;
    animation: acsConfirmSlide 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: center;
    will-change: transform, opacity;
}
.acs-js-confirm-body { padding: 1.5rem 1.5rem 0.5rem; display: flex; gap: 0.75rem; align-items: flex-start; }
.acs-js-confirm-icon {
    width: 2.5rem; height: 2.5rem;
    border-radius: 9999px;
    background: rgba(240, 138, 133, 0.14);
    color: var(--acs-primary);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.acs-js-confirm-icon.is-destructive { background: #FEE2E2; color: #DC2626; }
.acs-js-confirm-icon .material-symbols-outlined { font-size: 22px; }
.acs-js-confirm-text { flex: 1; min-width: 0; padding-top: 2px; }
.acs-js-confirm-text h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: #0F0F10;
}
.acs-js-confirm-text p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #4B4740;
}
.acs-js-confirm-actions {
    padding: 0.75rem 1.5rem 1rem;
    background: rgba(245, 239, 230, 0.4);
    border-top: 1px solid rgba(15, 15, 16, 0.06);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.acs-js-confirm-cancel {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0F0F10;
    background: transparent;
    border: none;
    cursor: pointer;
}
.acs-js-confirm-cancel:hover { background: rgba(15, 15, 16, 0.05); }
.acs-js-confirm-ok {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--acs-primary);
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.acs-js-confirm-ok:hover { filter: brightness(0.95); }
.acs-js-confirm-ok.is-destructive { background: #DC2626; }
.acs-js-confirm-ok .material-symbols-outlined { font-size: 16px; }
@keyframes acsConfirmFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Confirm dialog: fade backdrop + slide-in panel */
.acs-confirm-backdrop {
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  animation: acsConfirmFade 180ms ease-out both;
}
.acs-confirm-panel {
  animation: acsConfirmSlide 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes acsConfirmFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes acsConfirmSlide {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .acs-confirm-backdrop,
  .acs-confirm-panel { animation: none; }
}

/* Coverage postcode chips */
.postcode-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.25rem 0.25rem 0.625rem;
  border-radius: 9999px;
  background: #FFFFFF;
  border: 1px solid rgba(240, 138, 133, 0.35);
  color: #0F0F10;
  box-shadow: 0 1px 2px rgba(15, 15, 16, 0.04);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.postcode-chip:hover {
  border-color: rgba(240, 138, 133, 0.65);
  box-shadow: 0 2px 6px rgba(240, 138, 133, 0.18);
}
.postcode-chip-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.postcode-chip-remove {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #6B6560;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.postcode-chip-remove:hover {
  background: #FEE2E2;
  color: #DC2626;
}

/* Pretty, thin scrollbar inside admin drawers (works in webkit + firefox) */
.acs-drawer-panel ::-webkit-scrollbar,
.acs-drawer-panel::-webkit-scrollbar { width: 8px; height: 8px; }
.acs-drawer-panel ::-webkit-scrollbar-track,
.acs-drawer-panel::-webkit-scrollbar-track { background: transparent; }
.acs-drawer-panel ::-webkit-scrollbar-thumb,
.acs-drawer-panel::-webkit-scrollbar-thumb {
    background: rgba(240, 138, 133, 0.35);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.acs-drawer-panel ::-webkit-scrollbar-thumb:hover,
.acs-drawer-panel::-webkit-scrollbar-thumb:hover { background: rgba(240, 138, 133, 0.6); background-clip: padding-box; }
.acs-drawer-panel { scrollbar-width: thin; scrollbar-color: rgba(240, 138, 133, 0.5) transparent; }
.acs-drawer-panel * { scrollbar-width: thin; scrollbar-color: rgba(240, 138, 133, 0.5) transparent; }

/* Side drawers (admin detail panels) — slide in from right + fade backdrop */
.acs-drawer-backdrop {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: acsDrawerFade 180ms ease-out both;
}
.acs-drawer-panel {
  animation: acsDrawerSlide 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
}
@keyframes acsDrawerFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes acsDrawerSlide {
  from { transform: translateX(32px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .acs-drawer-backdrop,
  .acs-drawer-panel { animation: none; }
}

/* Flash a content field when deep-linked from search */
.acs-field-flash {
  animation: acsFieldFlash 2.2s ease-out both;
}
@keyframes acsFieldFlash {
  0%   { box-shadow: 0 0 0 0 rgba(240, 138, 133, 0.45); background: rgba(240, 138, 133, 0.14); }
  40%  { box-shadow: 0 0 0 8px rgba(240, 138, 133, 0.0);  background: rgba(240, 138, 133, 0.10); }
  100% { box-shadow: 0 0 0 0 rgba(240, 138, 133, 0.0);    background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .acs-field-flash { animation: none; background: rgba(240, 138, 133, 0.12); }
}

/* Dashboard SVG line-chart data points — tooltip via native <title>, pop on hover */
.acs-chart-point { cursor: pointer; }
.acs-chart-dot { transition: r 120ms ease, stroke-width 120ms ease; }
.acs-chart-point:hover .acs-chart-dot { r: 5; stroke-width: 2.5; }

/* KPI card */
.kpi-card {
  background: #FFFFFF;
  border: 1px solid rgba(15, 15, 16, 0.06);
  border-radius: 12px;
  padding: 16px;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.kpi-card:hover {
  box-shadow: 0 8px 20px -6px rgba(15, 15, 16, 0.08);
  transform: translateY(-1px);
}
.kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #F5EFE6;
  color: #6B6560;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kpi-icon .material-symbols-outlined { color: #6B6560 !important; }
.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 6px;
}
.kpi-trend.up { background: rgba(34, 139, 90, 0.12); color: #1B7A4F; }
.kpi-trend.down { background: rgba(186, 26, 26, 0.12); color: #BA1A1A; }

/* Status pills */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.status-pill.new { background: rgb(var(--acs-primary-rgb) / 0.12); color: var(--acs-primary); }
.status-pill.inprogress { background: rgba(203, 128, 32, 0.12); color: #A65D00; }
.status-pill.booked { background: rgba(34, 139, 90, 0.12); color: #1B7A4F; }
.status-pill.closed { background: rgba(107, 101, 96, 0.15); color: #4A4744; }

/* Blazor default error UI — hidden by default, toggled by Blazor JS on real errors */
#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}