:root {
  /* ── Global color palette ────────────────────────────────
     Single source of truth for all colors. Every page's local
     variable block (--nf-*, --eh-*, --ed-*, --se-*) should
     map to these rather than re-defining raw hex values.      */

  /* Teal — primary brand accent */
  --cx-teal:         #0e6f6f;
  --cx-teal-strong:  #008b8b;
  --cx-teal-bright:  #20b2aa;
  --cx-teal-soft:    #dff4f6;
  --cx-teal-muted:   rgba(14, 111, 111, 0.08);

  /* Text hierarchy */
  --cx-ink:          #1e293b;   /* Primary headings & dark text */
  --cx-text:         #334155;   /* Body copy */
  --cx-muted:        #455f6e;   /* Secondary / meta text — AA on white and teal-bg */
  --cx-subtle:       #647d8d;   /* Hint / placeholder text — minimum readable */

  /* Surfaces & backgrounds */
  --cx-bg:           #dde9ed;   /* Teal-tinted page background — deeper for card separation */
  --cx-surface:      #ffffff;
  --cx-surface-alt:  rgba(255, 255, 255, 0.96);

  /* Borders */
  --cx-line:         rgba(14, 111, 111, 0.22);   /* Default border — visible but soft */
  --cx-line-mid:     rgba(14, 111, 111, 0.34);   /* Dividers / stronger separators */

  /* Status */
  --cx-success:      #41984e;
  --cx-error:        #b91c1c;

  /* ── Global type scale ────────────────────────────────────
     Mirror the Home page's visual hierarchy. Every page should
     use these for the matching element type so the app feels
     typographically unified as users navigate between pages.  */
  --font-hero:       clamp(26px, 3vw, 44px);         /* Page h1 hero title */
  --font-section:    clamp(22px, 2.2vw, 32px);       /* Major section h2 */
  --font-heading:    18px;                             /* Panel / card h3 */
  --font-subheading: 16px;                             /* Sub-panel headings */
  --font-body:       15px;                             /* Body copy */
  --font-meta:       13px;                             /* Secondary / meta text */
  --font-label:      11px;                             /* Eyebrows, badges, hints */
  --font-button:     14px;                             /* Button labels */
  --font-stat:       clamp(1.4rem, 1.15vw, 1.85rem); /* Stat values in heroes */
  --font-stat-label: 11px;                             /* Stat labels */

  --color-primary: #20B2AA;
  --color-secondary: #008B8B;
  --color-accent: #008B8B;
  --color-bg: #e0f2f1;
  --color-bg-tint: #e0f2f1;
  --color-bg-mid: #e0f2f1;
  --app-page-bg: var(--cx-bg);
  --gradient-primary: linear-gradient(135deg, #20B2AA, #008B8B);
  --gradient-accent: linear-gradient(90deg, #1e293b, #008B8B, #20B2AA);

  /* Height the fixed AppHeader actually occupies, including the device's
     top safe-area inset. Pages that sit beneath the header should clear it
     with padding-top: var(--app-header-height) instead of hard-coded values. */
  --app-header-pad-y: 14px;
  --app-header-logo-height: 80px;
  --app-header-height: calc((var(--app-header-pad-y) * 2) + var(--app-header-logo-height) + env(safe-area-inset-top, 0px));
    --app-shell-inline-pad: clamp(12px, 2.8vw, 32px);
  /* Reserved space for the MAUI bottom tab bar (only present on phone widths
     in the .host-maui shell). 0 by default so web layouts are unaffected. */
  --app-bottom-tabs-height: 0px;

  /* ─────────── Page hero design tokens ───────────
     All non-Home page heroes (full-bleed banners and inset hero cards alike)
     should consume these so the app feels visually unified. The top padding
     always clears the fixed AppHeader. */
  --app-hero-pad-top: calc(var(--app-header-height) + 28px);
  --app-hero-pad-bottom: clamp(28px, 4vw, 44px);
  --app-hero-pad-bottom-lg: clamp(34px, 5vw, 68px);
  --app-hero-pad-x: clamp(20px, 5vw, 60px);
  --app-hero-bg: linear-gradient(160deg, #f3f6f8 0%, rgba(224, 242, 241, 0.58) 52%, #ffffff 100%);
  --app-hero-border: 1px solid rgba(14, 111, 111, 0.14);
  --app-hero-title-color: #0f2c34;
  --app-hero-sub-color: #45626a;
  --app-hero-accent: #0e6f6f;
  --app-hero-eyebrow-color: #0e6f6f;
  --app-offering-hero-bg:
    radial-gradient(circle at top left, rgba(47, 110, 219, 0.12), transparent 34%),
    radial-gradient(circle at bottom right, rgba(14, 138, 145, 0.14), transparent 32%),
    linear-gradient(160deg, #f3f6f8 0%, rgba(224, 242, 241, 0.52) 50%, #ffffff 100%);
  --app-offering-hero-border: 1px solid rgba(255, 255, 255, 0.72);
  --app-offering-hero-shadow: 0 24px 60px rgba(17, 47, 90, 0.11);
  --app-offering-hero-radius: 28px;
  --app-offering-hero-pad-y: clamp(28px, 4vw, 36px);
  --app-offering-hero-pad-x: clamp(18px, 4vw, 36px);
  --app-live-module-max-width: 1320px;
    --app-content-max-width: min(100%, var(--app-live-module-max-width));
    --app-surface-bg: rgba(255, 255, 255, 0.94);
    --app-surface-border: 1px solid rgba(14, 111, 111, 0.12);
    --app-surface-radius: 24px;
    --app-surface-shadow: 0 12px 34px rgba(15, 23, 42, 0.12);
    --app-section-gap: clamp(14px, 2vw, 26px);
  /* For pages that render the page body without a full-bleed hero banner
     (e.g. Dashboard, MyProfile), use --app-page-pad-top so the first content
     card clears the header. */
  --app-page-pad-top: calc(var(--app-header-height) + 24px);
  --app-page-pad-bottom: clamp(24px, 4vw, 48px);
  --app-page-pad-bottom-lg: clamp(36px, 6vw, 84px);

  /* ─────────── Shop module tokens ───────────
     The Shop reuses the platform's teal/slate palette rather than the
     navy-and-gold of the original prototype, so a shopper moving between
     Mentor, Newsfeed and Shop stays in one product. Everything here maps
     back to a --cx-* value; no raw hex belongs in a Shop stylesheet. */
  --shop-ink:            var(--cx-ink);
  --shop-text:           var(--cx-text);
  --shop-muted:          var(--cx-muted);
  --shop-subtle:         var(--cx-subtle);
  --shop-accent:         var(--cx-teal);
  --shop-accent-strong:  var(--cx-teal-strong);
  --shop-accent-bright:  var(--cx-teal-bright);
  --shop-accent-soft:    var(--cx-teal-soft);
  --shop-surface:        var(--cx-surface);
  --shop-surface-alt:    var(--cx-surface-alt);
  --shop-line:           var(--cx-line);
  --shop-line-mid:       var(--cx-line-mid);
  --shop-success:        var(--cx-success);
  --shop-error:          var(--cx-error);

  /* Merchandising accents. Gold is used sparingly — a "faculty pick" ribbon
     means nothing if every card has one. */
  --shop-gold:           #a97d1f;
  --shop-gold-soft:      #fbf3e2;
  --shop-navy:           #14405c;

  --shop-radius:         16px;
  --shop-radius-sm:      10px;
  --shop-radius-pill:    100px;
  --shop-shadow:         0 1px 2px rgba(14, 111, 111, 0.05), 0 8px 22px rgba(15, 23, 42, 0.07);
  --shop-shadow-hover:   0 4px 10px rgba(14, 111, 111, 0.08), 0 16px 38px rgba(15, 23, 42, 0.13);

  --shop-card-width:     186px;
  --shop-cover-ratio:    3 / 4;
}

@media (max-width: 1140px) {
  :root {
    --app-header-logo-height: 70px;
  }
}

@media (max-width: 900px) {
  :root {
    --app-header-pad-y: 12px;
    --app-header-logo-height: 56px;
  }
}

@media (max-width: 480px) {
  :root {
    --app-header-pad-y: 10px;
    --app-header-logo-height: 48px;
  }
}

/* ── Dark mode ──────────────────────────────────────
   Toggled by AppHeader (adds/removes this class on <html>). Overrides the
   --cx-* tokens above, so any page whose local variables map to them (which
   is most of them — see the note at the top of :root) repaints automatically.
   Pages still using raw hex values instead of these tokens won't react;
   point them at --cx-*/--shop-*/etc. to pick up dark mode. */
html.theme-dark {
  --cx-teal:         #2dd4bf;
  --cx-teal-strong:  #5eead4;
  --cx-teal-bright:  #34d8cf;
  --cx-teal-soft:    rgba(45, 212, 191, 0.14);
  --cx-teal-muted:   rgba(45, 212, 191, 0.12);

  --cx-ink:          #f1f5f9;
  --cx-text:         #dbe4ee;
  --cx-muted:        #9db0c4;
  --cx-subtle:       #7f93aa;

  --cx-bg:           #0b1220;
  --cx-surface:      #141b2d;
  --cx-surface-alt:  rgba(26, 35, 56, 0.96);

  --cx-line:         #263248;
  --cx-line-mid:     #324058;

  --cx-success:      #4ade80;
  --cx-error:        #f87171;

  /* Legacy/duplicate palette aliases — a handful of older components still
     reference these directly instead of --cx-*. */
  --color-primary:   var(--cx-teal-bright);
  --color-secondary: var(--cx-teal-strong);
  --color-accent:    var(--cx-teal-strong);
  --color-bg:        var(--cx-bg);
  --color-bg-tint:   var(--cx-bg);
  --color-bg-mid:    var(--cx-bg);
  --gradient-primary: linear-gradient(135deg, var(--cx-teal-bright), var(--cx-teal-strong));
  --gradient-accent:  linear-gradient(90deg, var(--cx-ink), var(--cx-teal-strong), var(--cx-teal-bright));

  /* Page hero banners (full-bleed + inset "offering" cards). */
  --app-hero-bg: linear-gradient(160deg, var(--cx-surface) 0%, var(--cx-teal-muted) 52%, var(--cx-bg) 100%);
  --app-hero-border: 1px solid var(--cx-line);
  --app-hero-title-color: var(--cx-ink);
  --app-hero-sub-color: var(--cx-muted);
  --app-hero-accent: var(--cx-teal);
  --app-hero-eyebrow-color: var(--cx-teal);
  --app-offering-hero-bg:
    radial-gradient(circle at top left, var(--cx-teal-muted), transparent 34%),
    radial-gradient(circle at bottom right, rgba(94, 234, 212, 0.10), transparent 32%),
    linear-gradient(160deg, var(--cx-surface) 0%, var(--cx-teal-muted) 50%, var(--cx-bg) 100%);
  --app-offering-hero-border: 1px solid rgba(255, 255, 255, 0.08);
  --app-offering-hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);

  /* Shared card surface (.panel, .auth-panel, .profile-panel, etc.) */
  --app-surface-bg: var(--cx-surface-alt);
  --app-surface-border: 1px solid var(--cx-line);
  --app-surface-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);

  /* Form inputs (.auth-input, .form-control, .booking-input, etc.) */
  --form-surface: var(--cx-surface-alt);
  --form-border: var(--cx-line);
  --form-border-strong: var(--cx-line-mid);
  --form-text: var(--cx-ink);
  --form-label: var(--cx-ink);
  --form-help: var(--cx-muted);
  --form-placeholder: var(--cx-subtle);
  --form-focus: var(--cx-teal);
  --form-focus-ring: var(--cx-teal-muted);
  --form-invalid: var(--cx-error);
  --form-invalid-ring: rgba(248, 113, 113, 0.18);
  --form-invalid-surface: rgba(248, 113, 113, 0.08);
  --form-invalid-text: var(--cx-error);
  --form-disabled: rgba(255, 255, 255, 0.04);
  --form-disabled-text: var(--cx-subtle);
}

/* MAUI bottom tab bar — no dark path previously, so it stayed white
   regardless of theme. */
html.theme-dark .bottom-tabs {
  background: rgba(20, 27, 45, 0.92);
  border-top: 1px solid var(--cx-line);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.35);
}

html.theme-dark .bottom-tabs__item {
  color: var(--cx-muted);
}

html.theme-dark .bottom-tabs__item:active {
  background: var(--cx-teal-muted);
}

html.theme-dark .bottom-tabs__item--pending {
  color: var(--cx-teal);
  background: var(--cx-teal-muted);
}

html.theme-dark .bottom-tabs__item.active,
html.theme-dark .bottom-tabs__item.active .bottom-tabs__icon {
  color: var(--cx-teal);
}

html.theme-dark .eyebrow {
  background: var(--cx-teal-muted);
  border-color: rgba(45, 212, 191, 0.28);
  color: var(--cx-teal);
}

html.theme-dark .footnote {
  color: var(--cx-muted);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  background: var(--app-page-bg);
  color: var(--cx-ink, #1e293b);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  transition: background 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, h6, p, a, span, li {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

:where(h1, h2, h3, h4, h5, h6)[tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

code {
  font-family: 'Cascadia Code', 'Consolas', monospace;
}

.panel {
  background: var(--app-surface-bg);
  border: var(--app-surface-border);
  border-radius: var(--app-surface-radius);
  padding: 1.5rem;
  box-shadow: var(--app-surface-shadow);
}

/* App-wide page wrapper rhythm.
   Kept intentionally light to avoid fighting page-specific layouts. */
.app-shell__page :where(.dashboard-shell, .auth-shell, .register-shell, .profile-shell, .payment-status-shell, .slotmgr-shell, .mdash, .mts-page, .mentor-profile-edit, .mentor-agreement, .ed-shell, .ed-related, .se-shell, .ambassador-apply, .ambassador-info, .policy-page, .mentorship-hero__content, .mentor-section, .mts-container) {
  width: var(--app-content-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Shared card language for frequent shell panels. */
:where(.auth-panel, .register-panel, .profile-panel, .profile-summary, .mdash-panel, .slotmgr-card, .payment-status-card) {
  background: var(--app-surface-bg);
  border: var(--app-surface-border);
  border-radius: var(--app-surface-radius);
  box-shadow: var(--app-surface-shadow);
}

:where(.dashboard-shell, .profile-shell, .mdash, .slotmgr-shell) {
  gap: var(--app-section-gap);
}

.panel--narrow {
  max-width: 44rem;
  margin: 120px auto 2rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 139, 139, 0.08);
  border: 1px solid rgba(0, 139, 139, 0.18);
  color: #0e6f6f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ================================================================
   MAUI HOST: native-feel rules that ONLY apply inside the BlazorWebView.
   Gated by .host-maui on <html>, which is only set in the MAUI index.html.
   ================================================================ */
.host-maui {
  /* Use the system font stack so the app matches the OS chrome. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable',
               'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.host-maui body {
  /* Disable iOS long-press callout & text selection on chrome. Page text
     stays selectable because content elements re-enable it below. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.host-maui p,
.host-maui h1,
.host-maui h2,
.host-maui h3,
.host-maui h4,
.host-maui h5,
.host-maui h6,
.host-maui li,
.host-maui input,
.host-maui textarea,
.host-maui [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* Inputs at <16px trigger iOS auto-zoom on focus — bump the floor. */
.host-maui input,
.host-maui select,
.host-maui textarea {
  font-size: max(16px, 1rem);
}

/* Disable webby hover transforms on touch devices — they fire on tap and
   make the UI feel laggy/unnative. */
@media (hover: none) {
  .host-maui *:hover {
    transform: none !important;
  }
}

/* Reserve room for the bottom tab bar (only set non-zero on phone widths
   below). Pages that have their own sticky bottom bars should also pad by
   var(--app-bottom-tabs-height). */
.host-maui .app-shell {
  padding-bottom: var(--app-bottom-tabs-height);
}

/* Phone-only: activate the bottom tab bar layout. */
@media (max-width: 900px) {
  .host-maui {
    --app-bottom-tabs-height: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

/* ================================================================
   Bottom tab bar (MAUI phone shell)
   Lives in unscoped CSS because it needs to react to .host-maui on <html>,
   which Blazor scoped stylesheets cannot reach.
   ================================================================ */
.bottom-tabs {
  display: none;
}

.host-maui .bottom-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1500;
  padding: 6px calc(8px + env(safe-area-inset-right))
           calc(6px + env(safe-area-inset-bottom))
           calc(8px + env(safe-area-inset-left));
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 -2px 14px rgba(15, 23, 42, 0.05);
  box-sizing: border-box;
  display: none; /* shown only at phone widths below */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
}

@media (max-width: 900px) {
  .host-maui .bottom-tabs {
    display: grid;
  }
}

.bottom-tabs__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 4px 6px;
  color: #64748b;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  transition: color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.bottom-tabs__item:active {
  background: rgba(0, 139, 139, 0.08);
}

.bottom-tabs__item--pending {
  color: #008B8B;
  background: rgba(0, 139, 139, 0.08);
}

.bottom-tabs__item--pending .bottom-tabs__icon {
  animation: bottom-tab-pulse 0.9s ease-in-out infinite;
}

.bottom-tabs__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}

.bottom-tabs__label {
  line-height: 1;
  letter-spacing: 0.2px;
}

.bottom-tabs__item.active,
.bottom-tabs__item.active .bottom-tabs__icon {
  color: #008B8B;
}

@keyframes bottom-tab-pulse {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-tabs__item--pending .bottom-tabs__icon {
    animation: none;
  }
}

/* When the bottom tab bar is active on phones, hide the hamburger button so
   we don't show two competing primary navs. The header still shows the logo
   and (optional) profile chip. */
@media (max-width: 900px) {
  .host-maui .mobile-menu-btn {
    display: none !important;
  }
  /* The web footer (links, contact, legal) is desktop-oriented chrome. In the
     phone-sized MAUI shell, the bottom tab bar replaces it; legal links stay
     reachable from the My-Profile / settings surfaces. */
  .host-maui footer,
  .host-maui .app-footer {
    display: none !important;
  }
}

.footnote {
  color: #4d6378;
}

:root {
  --form-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 252, 0.98));
  --form-border: #d8e7eb;
  --form-border-strong: #c1d8de;
  --form-text: #17313a;
  --form-label: #18323b;
  --form-help: #617b84;
  --form-placeholder: #8ea2aa;
  --form-focus: #0f766e;
  --form-focus-ring: rgba(15, 118, 110, 0.16);
  --form-invalid: #d1435b;
  --form-invalid-ring: rgba(209, 67, 91, 0.16);
  --form-invalid-surface: linear-gradient(180deg, #ffffff, #fff7f8);
  --form-invalid-text: #8f1d2d;
  --form-disabled: linear-gradient(180deg, #edf4f6, #f8fbfc);
  --form-disabled-text: #70858d;
}

body :is(.auth-input, .profile-input, .form-control, .srf-input, .booking-input, .se-input, .coupon-input) {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 16px !important;
  border: 1px solid var(--form-border) !important;
  background: var(--form-surface) !important;
  color: var(--form-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
  scroll-margin-top: calc(var(--app-header-height) + 28px);
}

body textarea:is(.auth-input, .profile-input, .form-control, .srf-input, .booking-input, .se-input) {
  min-height: 132px;
  resize: vertical;
}

body :is(.auth-input, .profile-input, .form-control, .srf-input, .booking-input, .se-input, .coupon-input)::placeholder {
  color: var(--form-placeholder);
  font-size: 0.98rem;
  opacity: 1;
}

body :is(.auth-input, .profile-input, .form-control, .srf-input, .booking-input, .se-input, .coupon-input):focus {
  outline: none;
  border-color: var(--form-focus) !important;
  box-shadow: 0 0 0 4px var(--form-focus-ring), 0 16px 32px rgba(15, 118, 110, 0.08) !important;
  transform: translateY(-1px);
}

body :is(.auth-input, .profile-input, .form-control, .srf-input, .booking-input, .se-input, .coupon-input).invalid,
body :is(.auth-input, .profile-input, .form-control, .srf-input, .booking-input, .se-input, .coupon-input)[aria-invalid="true"] {
  border-color: var(--form-invalid) !important;
  background: var(--form-invalid-surface) !important;
  box-shadow: 0 0 0 4px var(--form-invalid-ring) !important;
}

body :is(.auth-input, .profile-input, .form-control, .srf-input, .booking-input, .se-input, .coupon-input).invalid:focus,
body :is(.auth-input, .profile-input, .form-control, .srf-input, .booking-input, .se-input, .coupon-input)[aria-invalid="true"]:focus {
  border-color: var(--form-invalid) !important;
  box-shadow: 0 0 0 4px var(--form-invalid-ring), 0 16px 32px rgba(209, 67, 91, 0.1) !important;
}

body :is(.auth-input, .profile-input, .form-control, .srf-input, .booking-input, .se-input, .coupon-input):disabled,
body :is(.auth-input, .profile-input, .form-control, .srf-input, .booking-input, .se-input, .coupon-input)[readonly] {
  background: var(--form-disabled) !important;
  color: var(--form-disabled-text) !important;
}

body :is(.auth-field label, .profile-field label, .form-row label, .booking-form-field label, .coupon-entry-header label, .se-field > label, .slot-request-grid label > span, .srf-block > label, .srf-block > span) {
  color: var(--form-label);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

body :is(.auth-field__hint, .booking-form-note) {
  color: var(--form-help);
  font-size: 0.95rem;
  line-height: 1.55;
}

.cx-required-marker {
  margin-left: 0.25rem;
  color: var(--form-invalid);
  font-weight: 800;
}

body .validation-message {
  color: var(--form-invalid-text);
  font-size: 0.92rem;
  line-height: 1.45;
}

body .validation-summary-errors {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--form-invalid-ring);
  background: var(--form-invalid-surface);
  color: var(--form-invalid-text);
}

body .validation-summary-errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

body input[type="checkbox"].invalid,
body input[type="checkbox"][aria-invalid="true"],
body input[type="radio"].invalid,
body input[type="radio"][aria-invalid="true"] {
  outline: 3px solid var(--form-invalid-ring);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .panel {
    padding: 1.1rem;
    border-radius: 18px;
  }

  .panel--narrow {
    margin: 110px 16px 24px;
  }
}

/* ── Shake animation – applied by ClinexusForm on invalid submit ── */
@keyframes btn-shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-6px); }
  30%       { transform: translateX(6px); }
  45%       { transform: translateX(-4px); }
  60%       { transform: translateX(4px); }
  75%       { transform: translateX(-2px); }
  90%       { transform: translateX(2px); }
}

.btn--shake {
  animation: btn-shake 0.45s ease-in-out;
}