/* Voiceprint shell — Lucid Labs brand.
 *
 * Lifts the design language from LucidLabsAU/website: Mona Sans (variable
 * font), the signature purple → light-purple → blue hero gradient, the
 * Lucid palette, and the website's nav (white, logo-led) + footer (dark
 * purple, four-column) patterns.
 *
 * Loaded LAST in _Layout.cshtml so it wins the cascade.
 */

/* ---------- Font ---------------------------------------------------------- */

@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/MonaSans-VF.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------- */

:root {
  --lucid-dark-purple: #271d3b;
  --lucid-light-purple: #7454b3;
  --lucid-accent-blue: #677eb2;
  --lucid-teal: hsl(180, 60%, 55%);
  --lucid-rich-black: #101820;
  --lucid-light-grey: #cccccc;

  --lucid-surface: hsl(210, 40%, 98%);
  --lucid-surface-2: #ffffff;
  --lucid-text: hsl(222, 84%, 5%);
  --lucid-muted: hsl(215, 25%, 35%);
  --lucid-border: hsl(214, 32%, 91%);

  /* Radius scale — matches the public Lucid Labs site (client/src/index.css
     --radius: 0.5rem and Tailwind's rounded-md = calc(0.5rem - 2px) = 6px).
     Keep buttons / inputs on -md so a Voiceprint dashboard button looks
     identical to a website button. Cards use the base scale. */
  --lucid-radius: 0.5rem;     /* 8px — cards, panels */
  --lucid-radius-md: 0.375rem;/* 6px — buttons, inputs (matches website rounded-md) */
  --lucid-radius-sm: 0.25rem; /* 4px — chips, pills, dropdown items */

  --lucid-shadow-sm: 0 1px 2px rgba(16, 24, 32, 0.04), 0 1px 3px rgba(16, 24, 32, 0.06);
  --lucid-shadow-md: 0 4px 12px rgba(39, 29, 59, 0.08), 0 2px 4px rgba(39, 29, 59, 0.04);
  --lucid-shadow-lg: 0 24px 60px -12px rgba(39, 29, 59, 0.25);

  --font-stack:
    "Mona Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* ---------- Base --------------------------------------------------------- */

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-stack);
  font-feature-settings: "ss01", "cv11";
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--lucid-surface);
  color: var(--lucid-text);
  letter-spacing: -0.005em;
}

/* Kill the SaaS Accelerator's off-canvas top reservation
 * (customer-offcanvas.css sets `body { padding-top: 215px }`). */
body { padding-top: 0 !important; margin-bottom: 0 !important; }

/* Mona Sans VF in this repo has no italic axis — synthesised italic looks
 * skewed. Emphasise via colour instead. */
em, i { font-style: normal; color: var(--lucid-muted); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-stack);
  font-weight: 700;
  color: var(--lucid-dark-purple);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
h3 { font-size: 1.35rem; }

p { line-height: 1.55; color: var(--lucid-muted); }

a { color: var(--lucid-light-purple); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--lucid-dark-purple); text-decoration: underline; }

/* ---------- Top nav (vp-nav) -------------------------------------------- */
/* Matches the website nav pattern: white surface, sticky, shadow, logo on
 * left, muted links + primary CTA on the right. */

/* Neutralise the Accelerator's dark navbar styles in case any partial still uses them. */
.cm-top-nav-bar { display: none !important; }
.cm-menu-bar    { display: none !important; }

.vp-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--lucid-surface-2);
  border-bottom: 1px solid var(--lucid-border);
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.02), 0 2px 6px rgba(16, 24, 32, 0.04);
}

.vp-nav__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

.vp-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none !important;
  color: var(--lucid-dark-purple);
}

.vp-nav__brand:hover { text-decoration: none !important; }

.vp-nav__logo {
  height: 36px;
  width: auto;
  display: block;
}

.vp-nav__divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--lucid-border);
}
.vp-nav__divider--vert {
  margin: 0 0.5rem;
  background: rgba(39, 29, 59, 0.18);
}

.vp-nav__product {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--lucid-dark-purple);
}

.vp-nav__links {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
}

.vp-nav__link {
  color: var(--lucid-muted);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  text-decoration: none !important;
}
.vp-nav__link:hover {
  color: var(--lucid-dark-purple);
  border-bottom-color: var(--lucid-light-purple);
}

.vp-nav__user {
  color: var(--lucid-text);
  font-weight: 500;
  font-size: 0.92rem;
}

.vp-nav__signout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--lucid-radius-md);
  color: var(--lucid-muted);
  background: transparent;
  transition: color 0.15s ease, background 0.15s ease;
}
.vp-nav__signout:hover {
  color: var(--lucid-dark-purple);
  background: rgba(116, 84, 179, 0.1);
  text-decoration: none !important;
}

.vp-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  background: var(--lucid-dark-purple);
  color: #fff !important;
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: var(--lucid-radius-sm);
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.05s ease;
}
.vp-nav__cta:hover {
  background: var(--lucid-light-purple);
  text-decoration: none !important;
}
.vp-nav__cta:active { transform: translateY(1px); }

@media (max-width: 640px) {
  .vp-nav__inner { padding: 0.7rem 1rem; gap: 0.5rem; }
  .vp-nav__product { display: none; }
  .vp-nav__divider:not(.vp-nav__divider--vert) { display: none; }
  .vp-nav__links { gap: 0.85rem; }
  .vp-nav__user { display: none; }
}

/* ---------- Shell content wrapper --------------------------------------- */

.vp-shell {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2rem;
}

/* ---------- Hero --------------------------------------------------------- */

.vp-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #271d3b 0%, #7454b3 50%, #677eb2 100%);
  color: #fff;
  border-radius: var(--lucid-radius);
  margin: 1.5rem auto 2.5rem;
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3.5rem);
  box-shadow: var(--lucid-shadow-lg);
}

.vp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% -20%, rgba(255, 255, 255, 0.15), transparent 60%);
  pointer-events: none;
}

.vp-hero__inner {
  position: relative;
  max-width: 720px;
  z-index: 2;
}

.vp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--lucid-radius-md);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 1.25rem;
}

.vp-hero__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lucid-teal);
  box-shadow: 0 0 8px var(--lucid-teal);
}

.vp-hero__heading {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 1.15rem;
}

.vp-hero__accent {
  color: var(--lucid-teal);
  display: inline-block;
}

.vp-hero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  max-width: 36rem;
  margin: 0 0 2rem;
}

.vp-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.btn-vp-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  background: #fff;
  color: var(--lucid-dark-purple) !important;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--lucid-radius-sm);
  border: none;
  text-decoration: none !important;
  box-shadow: var(--lucid-shadow-md);
  transition: transform 0.08s ease, box-shadow 0.2s ease;
}
.btn-vp-primary:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(16, 24, 32, 0.2);
}

.btn-vp-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  color: #fff !important;
  font-weight: 600;
  font-size: 1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--lucid-radius-sm);
  text-decoration: none !important;
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-vp-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.vp-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--lucid-radius-md);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}

.vp-hero__cloud {
  position: absolute;
  right: -2rem;
  top: -2rem;
  width: 360px;
  max-width: 50%;
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}
.vp-hero__cloud img { width: 100%; height: auto; display: block; }

@media (max-width: 720px) {
  .vp-hero__cloud { opacity: 0.1; right: -4rem; top: -3rem; width: 280px; }
}

/* ---------- Feature cards ----------------------------------------------- */

.vp-features {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 3rem;
}

.vp-feature {
  background: var(--lucid-surface-2);
  border: 1px solid var(--lucid-border);
  border-radius: var(--lucid-radius);
  padding: 1.75rem;
  box-shadow: var(--lucid-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}
.vp-feature:hover {
  transform: translateY(-2px);
  box-shadow: var(--lucid-shadow-md);
  border-color: rgba(116, 84, 179, 0.3);
}

.vp-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lucid-dark-purple), var(--lucid-light-purple));
  color: #fff;
  margin-bottom: 1rem;
}

.vp-feature h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--lucid-dark-purple);
  margin: 0 0 0.5rem;
}

.vp-feature p { margin: 0; color: var(--lucid-muted); font-size: 0.95rem; }

/* ---------- Buttons (Bootstrap fallback overrides) ---------------------- */

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background: var(--lucid-dark-purple);
  border-color: var(--lucid-dark-purple);
  color: #fff;
  font-weight: 600;
  padding: 0.6rem 1.35rem;
  border-radius: var(--lucid-radius-sm);
  transition: background 0.15s ease, transform 0.05s ease;
}
.btn-primary:hover {
  background: var(--lucid-light-purple);
  border-color: var(--lucid-light-purple);
  color: #fff;
}

.btn-outline-primary {
  color: var(--lucid-dark-purple);
  border-color: var(--lucid-dark-purple);
  border-radius: var(--lucid-radius-sm);
}
.btn-outline-primary:hover {
  background: var(--lucid-dark-purple);
  border-color: var(--lucid-dark-purple);
  color: #fff;
}

/* ---------- Cards, tables, alerts --------------------------------------- */

.card {
  border-radius: var(--lucid-radius);
  border-color: var(--lucid-border);
  box-shadow: var(--lucid-shadow-sm);
}

.cm-panel-default {
  background: var(--lucid-surface-2);
  border: 1px solid var(--lucid-border);
  border-radius: var(--lucid-radius);
  padding: 1.5rem;
  box-shadow: var(--lucid-shadow-sm);
}

.cm-section-heading {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lucid-dark-purple);
  padding: 0.4rem 0.85rem;
  background: rgba(116, 84, 179, 0.08);
  border-radius: var(--lucid-radius-md);
  margin-bottom: 1rem;
}

table.table thead th {
  background: var(--lucid-dark-purple);
  color: #fff;
  border-color: var(--lucid-dark-purple);
  font-weight: 600;
}

.alert { border-radius: var(--lucid-radius); border-color: var(--lucid-border); }
.alert-info {
  background: linear-gradient(135deg, rgba(116, 84, 179, 0.06), rgba(103, 126, 178, 0.06));
  color: var(--lucid-muted);
  border-color: rgba(116, 84, 179, 0.2);
}

#cookieConsent, .alert-secondary {
  background: var(--lucid-surface-2);
  color: var(--lucid-muted);
  border: 1px solid var(--lucid-border);
  border-radius: var(--lucid-radius);
}

/* ---------- Footer (vp-footer) ------------------------------------------ */
/* Four-column dark-purple footer, matching the website pattern. */

.vp-footer {
  background: var(--lucid-dark-purple);
  color: #fff;
  padding: 3rem 0 1.75rem;
  margin-top: 3rem;
}

.vp-footer__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.vp-footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 2fr 1fr 1fr 1fr;
}

@media (max-width: 900px) {
  .vp-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .vp-footer__grid { grid-template-columns: 1fr; }
}

.vp-footer__brand img {
  width: 75%;
  max-width: 240px;
  height: auto;
  display: block;
  margin-bottom: 1.25rem;
}

.vp-footer__tagline {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1.25rem;
  max-width: 22rem;
}

.vp-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.vp-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--lucid-radius-md);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.vp-footer__social a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
  transform: translateY(-1px);
}

.vp-footer__col h3 {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 1rem;
}

.vp-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.vp-footer__col a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.92rem;
  transition: color 0.15s ease;
}
.vp-footer__col a:hover {
  color: #fff;
  text-decoration: none;
}

.vp-footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.vp-footer__bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
}

.vp-footer__legal {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
}

.vp-footer__legal a {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  transition: color 0.15s ease;
}
.vp-footer__legal a:hover {
  color: #fff;
  text-decoration: none;
}

/* ---------- Misc / accessibility ---------------------------------------- */

main ul li::marker { color: var(--lucid-light-purple); }

a:focus-visible,
button:focus-visible,
.vp-nav__link:focus-visible,
.vp-nav__cta:focus-visible,
.vp-nav__signout:focus-visible,
.btn-vp-primary:focus-visible,
.btn-vp-outline:focus-visible {
  outline: 2px solid var(--lucid-teal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================================================
   DASHBOARD COMPONENTS
   ----------------------------------------------------------------------------
   The shell vendors the Microsoft SaaS Accelerator, which ships with Bootstrap
   5 markup and a few legacy `cm-*` utility classes. Rather than refactor every
   view (risky, big diff), this section is the single source of truth that
   re-skins each of those classes with the Lucid Labs design language.
   Components inside any /home/* or /product/* view render with this look.

   Canonical Lucid component vocabulary — view authors should reach for these
   when introducing new markup:

     .vp-page                — outer container (1280px max, 1.5rem padding)
     .vp-card                — content card on the surface
     .vp-card--narrow        — 640px max card (forms, single-action screens)
     .vp-card__actions       — right-aligned action row inside a card
     .vp-section__heading    — section heading (replaces .cm-section-heading)
     .vp-muted               — muted body copy
     .vp-empty-state         — centred empty-state card with CTA
     .vp-button[--primary|--secondary|--danger] — buttons
     .vp-alert[--error|--info|--success|--warning] — alerts

   Legacy class names still in the SaaS Accelerator views are aliased to the
   same look below so /home/subscriptions, /home/subscriptiondetail and
   friends pick up the brand automatically.
   ========================================================================== */

/* ---- 1. Page + card primitives ---- */

.vp-page {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
}

.vp-card,
.cm-panel-default,
.card,
.card.card-header {
  background: var(--lucid-surface-2);
  border: 1px solid var(--lucid-border);
  border-radius: var(--lucid-radius);
  box-shadow: var(--lucid-shadow-sm);
  padding: 1.5rem 1.75rem;
  margin: 1rem 0;
}
.card-body { padding: 0; background: transparent; }
.vp-card--narrow { max-width: 640px; margin: 2rem auto; }
.vp-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Headings inside content. */
.vp-section__heading,
.cm-section-heading {
  display: block;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 700;
  color: var(--lucid-dark-purple);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 1rem;
}
.cm-table-head th { font-weight: 600; color: var(--lucid-dark-purple); }

.vp-muted { color: var(--lucid-muted); }

/* ---- 2. Empty state ---- */

.vp-empty-state {
  max-width: 640px;
  margin: 4rem auto;
  padding: 2.75rem 2.5rem;
  background: var(--lucid-surface-2);
  border: 1px solid var(--lucid-border);
  border-radius: var(--lucid-radius);
  box-shadow: var(--lucid-shadow-md);
  text-align: center;
}
.vp-empty-state h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.85rem;
  color: var(--lucid-dark-purple);
  letter-spacing: -0.02em;
}
.vp-empty-state p {
  color: var(--lucid-muted);
  margin: 0 0 1.75rem;
  line-height: 1.55;
}

/* ---- 3. Buttons — every variant in one model ---- */
/* Canonical vp-button + legacy cm-button-* + Bootstrap btn-* all reach the
   same Lucid pill-radius rectangle so the shell matches the public website. */

/* `.btn-vp-primary` / `.btn-vp-outline` are HERO-context buttons (white pill
   on the purple gradient) and stay with their own rules above — do NOT pull
   them into the dashboard component skin or they'd render dark-on-dark. */

.vp-button,
.btn.cm-button-default,
.cm-button-default,
.btn.btn-primary,
.btn.btn-success,
.cm-button-error,
.btn.btn-default,
.cm-button-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--lucid-radius-md);
  font-family: var(--font-stack);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none !important;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 60ms ease;
}
.vp-button:active,
.btn.cm-button-default:active,
.cm-button-default:active,
.btn.btn-primary:active,
.btn.btn-success:active,
.cm-button-error:active,
.btn.btn-default:active,
.cm-button-danger:active { transform: translateY(1px); }

/* Primary (Lucid dark purple → lighter purple on hover, mirroring the website). */
.vp-button--primary,
.btn.cm-button-default,
.cm-button-default,
.btn.btn-primary,
.btn.btn-success,
.cm-button-error {
  background: var(--lucid-dark-purple);
  color: #ffffff;
  border-color: var(--lucid-dark-purple);
}
.vp-button--primary:hover,
.btn.cm-button-default:hover,
.cm-button-default:hover,
.btn.btn-primary:hover,
.btn.btn-success:hover,
.cm-button-error:hover {
  background: var(--lucid-light-purple);
  color: #ffffff;
  border-color: var(--lucid-light-purple);
}

/* Secondary / outline (dashboard contexts only — the hero outline is separate). */
.vp-button--secondary,
.btn.btn-default {
  background: transparent;
  color: var(--lucid-dark-purple);
  border-color: var(--lucid-border);
}
.vp-button--secondary:hover,
.btn.btn-default:hover {
  background: var(--lucid-surface-2);
  border-color: var(--lucid-light-purple);
}

/* Danger (destructive — Unsubscribe etc.). */
.vp-button--danger,
.cm-button-danger {
  background: #b91c1c;
  color: #ffffff;
  border-color: #b91c1c;
}
.vp-button--danger:hover,
.cm-button-danger:hover {
  background: #991b1b;
  border-color: #991b1b;
}

/* ---- 4. Alerts ---- */

.alert.alert-danger,
.vp-alert.vp-alert--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: var(--lucid-radius);
  padding: 0.9rem 1.15rem;
  margin: 1rem 0;
}
.alert.alert-info,
.vp-alert.vp-alert--info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  border-radius: var(--lucid-radius);
  padding: 0.9rem 1.15rem;
  margin: 1rem 0;
}
.alert.alert-success,
.vp-alert.vp-alert--success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  border-radius: var(--lucid-radius);
  padding: 0.9rem 1.15rem;
  margin: 1rem 0;
}
.alert.alert-warning,
.vp-alert.vp-alert--warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: var(--lucid-radius);
  padding: 0.9rem 1.15rem;
  margin: 1rem 0;
}

/* ---- 5. Tables ---- */

.cm-table,
table.table.cm-table,
table.table-bordered.cm-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--lucid-surface-2);
  border: 1px solid var(--lucid-border);
  border-radius: var(--lucid-radius);
  overflow: hidden;
  font-size: 0.92rem;
  margin: 1rem 0;
}
.cm-table th,
.cm-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--lucid-border);
}
.cm-table thead th,
.cm-table-head th {
  background: var(--lucid-surface);
  font-weight: 600;
  color: var(--lucid-dark-purple);
  border-bottom-width: 1px;
  border-bottom-color: var(--lucid-border);
}
.cm-table tbody tr:last-child td { border-bottom: 0; }
.cm-table tbody tr:hover { background: var(--lucid-surface); }

/* ---- 6. Modals ---- */
/* Bootstrap's modal JS toggles `.modal show` on the dialog; we keep those
   hooks and just re-paint the surfaces. */

.modal-dialog { margin-top: 4rem; }
.modal-content {
  background: var(--lucid-surface-2);
  border: 1px solid var(--lucid-border);
  border-radius: var(--lucid-radius);
  box-shadow: var(--lucid-shadow-lg);
  overflow: hidden;
}
.modal-header,
.modal-header.header-bg {
  background: var(--lucid-surface);
  border-bottom: 1px solid var(--lucid-border);
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title { margin: 0; font-weight: 700; color: var(--lucid-dark-purple); letter-spacing: -0.015em; }
.modal-body { padding: 1.5rem 1.75rem; color: var(--lucid-text); }
.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--lucid-border);
  background: var(--lucid-surface);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}
.btn-close {
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: var(--lucid-radius-sm);
  color: var(--lucid-muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.btn-close:hover { background: var(--lucid-border); color: var(--lucid-dark-purple); }

/* ---- 7. Dropdowns ---- */

.nav-item.dropdown,
.cm-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-link.dropdown.cm-link-button {
  padding: 0.4rem 0.55rem;
  border-radius: var(--lucid-radius-md);
  color: var(--lucid-muted);
  transition: background 120ms ease, color 120ms ease;
}
.nav-link.dropdown.cm-link-button:hover {
  background: var(--lucid-surface);
  color: var(--lucid-dark-purple);
}
.dropdown-menu {
  background: var(--lucid-surface-2);
  border: 1px solid var(--lucid-border);
  border-radius: var(--lucid-radius);
  box-shadow: var(--lucid-shadow-md);
  padding: 0.5rem;
  min-width: 12rem;
}
.dropdown-item,
.cm-dropdown-option {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--lucid-radius-sm);
  color: var(--lucid-text);
  font-weight: 500;
  font-size: 0.92rem;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 120ms ease, color 120ms ease;
}
.dropdown-item:hover,
.cm-dropdown-option:hover {
  background: var(--lucid-surface);
  color: var(--lucid-dark-purple);
}

/* ---- 8. Forms ---- */
/* The dl/row layout in SubscriptionDetail / SubscriptionQuantityDetail
   relies on Bootstrap grid; align the typography + spacing to Lucid. */

dl.row dt {
  font-weight: 600;
  color: var(--lucid-dark-purple);
  padding-top: 0.55rem;
  padding-bottom: 0.25rem;
}
dl.row dd {
  color: var(--lucid-text);
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.form-control {
  border: 1px solid var(--lucid-border);
  border-radius: var(--lucid-radius-md);
  padding: 0.55rem 0.75rem;
  font-size: 0.95rem;
  font-family: var(--font-stack);
  color: var(--lucid-text);
  background: var(--lucid-surface-2);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.form-control:focus {
  border-color: var(--lucid-light-purple);
  box-shadow: 0 0 0 3px rgba(116, 84, 179, 0.18);
  outline: none;
}
.red-star { color: #b91c1c; margin-left: 0.15rem; }

/* ---- 9. Spinner ---- */

.spinner-border {
  width: 1.2rem;
  height: 1.2rem;
  border-width: 0.18rem;
  border-color: var(--lucid-light-purple);
  border-right-color: transparent;
}

/* ---- 10. Cookie consent banner ---- */

#cookieConsent.alert {
  background: var(--lucid-surface-2);
  border: 1px solid var(--lucid-border);
  color: var(--lucid-text);
  border-radius: var(--lucid-radius);
  box-shadow: var(--lucid-shadow-md);
  padding: 0.85rem 1.15rem;
}
#cookieConsent .accept-policy.close {
  border: 0;
  background: transparent;
  color: var(--lucid-dark-purple) !important;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0.65rem;
  border-radius: var(--lucid-radius-sm);
}
#cookieConsent .accept-policy.close:hover { background: var(--lucid-surface); }

/* ---- 11. Utility — text helpers ---- */

.cm-ellipsis {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}