/* Accessibility Enhancements */

/* Icon Color Variables */

:root {
  /* Document Category Icons */
  --icon-legal: #9333ea;
  /* Purple - Legal Documents */
  --icon-insurance: #3b82f6;
  /* Blue - Insurance Papers */
  --icon-medical: #ef4444;
  /* Red - Medical Records */
  --icon-financial: #10b981;
  /* Green - Financial Documents */
  --icon-property: #f59e0b;
  /* Amber - Property Papers */
  --icon-personal: #6366f1;
  /* Indigo - Personal Documents */
  --icon-other: #64748b;
  /* Slate - Other Documents */

  /* Consultation Purpose Icons */
  --icon-general: #6366f1;
  /* Indigo - General Consultation */
  --icon-will: #f59e0b;
  /* Amber - Will Consultation */
  --icon-emotional: #ef4444;
  /* Red - Emotional Support */
  --icon-technical: #64748b;
  /* Slate - Platform Help */
}

/* High Contrast Mode */

.high-contrast {
  --navy-primary: #000000;
  --navy-secondary: #1a1a1a;
  --gold-primary: #daa520;
  /* Richer gold for secondary feel */
  --gold-secondary: #ffcc00;
  --text-primary: #ffffff;
  --text-secondary: #ffffff;
  --bg-primary: #000000;
  --bg-secondary: #1a1a1a;
  --border-color: #ffffff;
}

.high-contrast * {
  border-color: var(--border-color) !important;
}

.high-contrast input,
.high-contrast textarea,
.high-contrast select {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

.high-contrast input::-moz-placeholder, .high-contrast textarea::-moz-placeholder {
  color: #cccccc !important;
  opacity: 1;
}

.high-contrast input::placeholder,
.high-contrast textarea::placeholder {
  color: #cccccc !important;
  opacity: 1;
}

.high-contrast button {
  background-color: var(--gold-primary) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

:where(main p a, main li a, main td a):not(.app-btn):not([class*="btn"]):not([role="button"]):not(.footer-link) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

:where(main p a, main li a, main td a):not(.app-btn):not([class*="btn"]):not([role="button"]):not(.footer-link):hover {
  text-decoration-thickness: 2px;
}

/* Font Size Adjustments */

[data-font-size="small"] {
  font-size: 0.875rem;
}

[data-font-size="small"] .text-xs {
  font-size: 0.75rem;
}

[data-font-size="small"] .text-sm {
  font-size: 0.8125rem;
}

[data-font-size="small"] .text-base {
  font-size: 0.875rem;
}

[data-font-size="small"] .text-lg {
  font-size: 1rem;
}

[data-font-size="small"] .text-xl {
  font-size: 1.125rem;
}

[data-font-size="small"] .text-2xl {
  font-size: 1.25rem;
}

[data-font-size="small"] .text-3xl {
  font-size: 1.5rem;
}

[data-font-size="large"] {
  font-size: 1.125rem;
}

[data-font-size="large"] .text-xs {
  font-size: 0.875rem;
}

[data-font-size="large"] .text-sm {
  font-size: 1rem;
}

[data-font-size="large"] .text-base {
  font-size: 1.125rem;
}

[data-font-size="large"] .text-lg {
  font-size: 1.25rem;
}

[data-font-size="large"] .text-xl {
  font-size: 1.5rem;
}

[data-font-size="large"] .text-2xl {
  font-size: 1.75rem;
}

[data-font-size="large"] .text-3xl {
  font-size: 2rem;
}

/* Reduced Motion */

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Screen Reader Optimizations */

.screen-reader-mode {
  /* Enhanced focus indicators */
}

.screen-reader-mode *:focus {
  outline: 3px solid #ffff00 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(255, 255, 0, 0.3) !important;
}

/* Skip Links */

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000000;
  color: #ffffff;
  padding: 8px;
  text-decoration: none;
  z-index: 9999;
  border-radius: 4px;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
}

.skip-link:focus {
  top: 6px;
  opacity: 1;
  pointer-events: auto;
}

/* Focus Management */

.focus-trap {
  position: relative;
}

.focus-trap::before,
.focus-trap::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Screen Reader Only Content */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Enhanced Form Controls */

.form-field {
  position: relative;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: 3px solid #3B82F6;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select {
  border-color: #EF4444 !important;
  background-color: #FEF2F2 !important;
}

.form-field.has-error input:focus,
.form-field.has-error textarea:focus,
.form-field.has-error select:focus {
  outline-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Error Messages */

.error-message {
  color: #EF4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.error-message::before {
  content: '⚠';
  font-weight: bold;
}

/* Success Messages */

.success-message {
  color: #10B981;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.success-message::before {
  content: '✓';
  font-weight: bold;
}

/* Loading States */

.loading {
  position: relative;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Keyboard Navigation */

.keyboard-navigation button:focus,
.keyboard-navigation a:focus,
.keyboard-navigation input:focus,
.keyboard-navigation textarea:focus,
.keyboard-navigation select:focus {
  outline: 3px solid #3B82F6;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Mobile Accessibility */

@media (max-width: 768px) {
  .accessibility-toolbar {
    font-size: 0.75rem;
  }

  .accessibility-toolbar button {
    padding: 0.25rem 0.5rem;
  }
}

/* Print Styles */

@media print {

  .accessibility-toolbar,
  .floating-contact-buttons,
  .toast-container {
    display: none !important;
  }

  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Dark Mode Support - Disabled as app uses light theme */

/* @media (prefers-color-scheme: dark) {
  :root:not(.high-contrast) {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
  }
} */

/* Animation Preferences */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):not(.app-btn):focus-visible {
  outline: 3px solid var(--gold-light) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.25) !important;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: var(--gray-200); /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: var(--font-body), system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: JetBrains Mono, SF Mono, Monaco, Consolas, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: var(--gray-400); /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: var(--gray-400); /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

* {
    box-sizing: border-box;
  }

html {
    --font-heading: "DM Serif Display", serif;
    --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, sans-serif;
    font-family:
      var(--font-body),
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    /* CRITICAL: Ensure no padding/margin that could affect modal overlays */
    margin: 0 !important;
    padding: 0 !important;
  }

body {
    font-family:
      var(--font-body),
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif;
    color: var(--text-secondary);
    line-height: 1.6;
  }

html:lang(hi),
  html[lang="hi"],
  [lang="hi"] {
    --font-heading: "Noto Serif Devanagari", serif;
    --font-body: "Hind", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, sans-serif;
  }

html:lang(mr),
  html[lang="mr"],
  [lang="mr"] {
    --font-heading: "Noto Serif Devanagari", serif;
    --font-body: "Hind", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, sans-serif;
  }

html:lang(gu),
  html[lang="gu"],
  [lang="gu"] {
    --font-heading: "Noto Serif Gujarati", serif;
    --font-body: "Hind Vadodara", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, sans-serif;
  }

html:lang(bn),
  html[lang="bn"],
  [lang="bn"] {
    --font-heading: "Noto Serif Bengali", serif;
    --font-body: "Hind Siliguri", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, sans-serif;
  }

html:lang(ta),
  html[lang="ta"],
  [lang="ta"] {
    --font-heading: "Noto Serif Tamil", serif;
    --font-body: "Catamaran", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, sans-serif;
  }

html:lang(te),
  html[lang="te"],
  [lang="te"] {
    --font-heading: "Noto Serif Telugu", serif;
    --font-body: "NTR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, sans-serif;
  }

html:lang(pa),
  html[lang="pa"],
  [lang="pa"] {
    --font-heading: "Noto Serif Gurmukhi", serif;
    --font-body: "Baloo Paaji 2", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, sans-serif;
  }

html:lang(kn),
  html[lang="kn"],
  [lang="kn"] {
    --font-heading: "Noto Serif Kannada", serif;
    --font-body: "Noto Sans Kannada", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, sans-serif;
  }

html:lang(ml),
  html[lang="ml"],
  [lang="ml"] {
    --font-heading: "Noto Serif Malayalam", serif;
    --font-body: "Manjari", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, sans-serif;
  }

.font-sans,
  [class*="font-sans"] {
    font-family:
      var(--font-body),
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif !important;
  }

.font-serif,
  [class*="font-serif"] {
    font-family: var(--font-heading), serif !important;
  }

html:lang(hi),
  html[lang="hi"],
  [lang="hi"] {
    font-family:
      var(--font-body),
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif;
  }

/* Headings */

h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading), serif;
    /* DM Serif Display ships ONLY at weight 400; higher weights force ugly
       synthetic (faux) bold. The display serif is already bold by design. */
    font-weight: 400;
    color: var(--navy-primary);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

/* Neutralise font-bold/font-semibold utilities on serif headings (they would
     re-trigger faux bold). Headings explicitly switched to the sans family
     (e.g. footer small-caps titles) keep their utility weights. */

h1:not(.font-sans),
  h2:not(.font-sans),
  h3:not(.font-sans),
  h4:not(.font-sans),
  h5:not(.font-sans),
  h6:not(.font-sans) {
    font-weight: 400 !important;
  }

/* Labels should be more prominent */

label {
    color: var(--text-primary);
    font-weight: 500;
  }

/* Link Styling - Production Ready */

a:not(.footer-link) {
    color: var(--gold-primary);
    text-decoration: none;
    transition: color 0.2s ease;
    line-height: 1.6;
  }

a:not(.footer-link):hover {
    color: var(--gold-dark);
    text-decoration: none;
  }

/*
   * Use :focus-visible (keyboard-only) instead of :focus so a mouse click
   * doesn't leave a gold ring after navigation. The ring still appears for
   * keyboard users (Tab navigation) which is what accessibility needs.
   * Without this, sidebar links show both the gold left-bar active indicator
   * and an outline ring after click — two competing "active" cues.
   */

a:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 2px;
  }

/* Remove default margins */

h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    margin: 0;
  }

/* Button fonts are handled by the base .btn class */

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

/* Breadcrumb links — override browser native underline on all platforms */

.breadcrumb-link {
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
  }

.country-dropdown-portal {
    overflow: hidden;
    width: var(--country-dropdown-width, auto) !important;
    min-width: var(--country-dropdown-width, auto) !important;
    max-width: var(--country-dropdown-width, none) !important;
  }

.country-dropdown-portal::before {
    display: none;
  }

/* Layout Components - Proper CSS Architecture */

.sidebar-main {
    background: linear-gradient(
      180deg,
      var(--navy-primary) 0%,
      var(--navy-medium) 100%
    );
    /* Ensure proper height and scrolling on mobile */
    max-height: 100vh;
    overflow: hidden;
    pointer-events: auto !important;
  }

/* Ensure navigation area can scroll */

.sidebar-main nav {
    flex: 1;
    min-height: 0;
    /* Allow flex item to shrink */
    overflow-y: auto;
    overflow-x: hidden;
    /* Enable smooth scrolling on mobile */
    -webkit-overflow-scrolling: touch;
    /* Ensure touch interaction works properly */
    touch-action: pan-y;
  }

/* Ensure sidebar buttons have proper touch targets */

.sidebar-main button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

/* Sidebar nav items must stay left-aligned. The global button rule centers
     button content by default, which would mis-center <button>-type nav items. */

button.sidebar-menu-item,
  .sidebar-main button.sidebar-menu-item {
    justify-content: flex-start !important;
    text-align: left !important;
  }

/* Ensure sidebar menu items are interactive */

.sidebar-menu-item {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Ensure proper min touch target */
    min-height: 44px;
    /* Prevent text selection on mobile */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /* Ensure buttons are clickable */
    pointer-events: auto !important;
    cursor: pointer;
  }

/* Ensure sidebar container allows interaction */

/* Removed duplicate .sidebar-main definition - merged above */

/* Sidebar Scrollbar Styling */

.sidebar-main nav::-webkit-scrollbar {
    width: 6px;
  }

.sidebar-main nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
  }

.sidebar-main nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
  }

.sidebar-main nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
  }

.sidebar-header {
    background-color: rgba(20, 33, 61, 0.72);
  }

.sidebar-footer {
    background-color: rgba(20, 33, 61, 0.5);
  }

/* Section Header with Right-Aligned Buttons */

/* Consolidated section-header-actions - Single source of truth */

/* Animation Delay Classes - Replace Inline Styles */

.animate-delay-0 {
    animation-delay: 0ms;
  }

.animate-delay-150 {
    animation-delay: 150ms;
  }

.animate-delay-300 {
    animation-delay: 300ms;
  }

.animate-duration-3s {
    animation-duration: 3s;
  }

/* Text Shadow Classes - Replace Inline Styles */

.text-shadow-hero {
    text-shadow:
      0 4px 20px rgba(0, 0, 0, 1),
      0 2px 8px rgba(0, 0, 0, 0.8);
  }

.text-shadow-strong {
    text-shadow: 0 4px 20px rgba(0, 0, 0, 1);
  }

.text-shadow-medium {
    text-shadow: 0 3px 15px rgba(0, 0, 0, 1);
  }

.text-shadow-soft {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  }

/* Progress Bar */

.progress-bar {
    transition: width 0.3s ease-in-out;
  }

/* Pointer Events */

.pointer-events-auto {
    pointer-events: auto;
  }

/* PRODUCTION DESIGN CONSISTENCY SYSTEM */

/* Ensure all buttons have consistent styling */

.btn,
  button:not(.unstyled),
  a.app-btn,
  [role="button"] {
    font-family: inherit !important;
    font-weight: 500;
    border-radius: var(--radius-xl) !important;
    /* CRITICAL: All buttons use rounded-xl (12px) consistently */
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    outline: none;
  }

.btn:focus-visible,
  button:focus-visible,
  a.app-btn:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 2px;
  }

/* Force minimum heights for button consistency */

.btn,
  button:not(.unstyled),
  a.app-btn,
  [role="button"] {
    min-height: 36px !important;
  }

/* Loading state handled by JSX Button component (button.jsx).
     Spinner + hidden children are rendered via React; only position:relative
     is needed here so the absolute spinner can anchor correctly. */

.app-btn[data-loading="true"] {
    position: relative;
  }

/* Size-specific minimum heights */

/* CRITICAL: Ensure testimonial dots maintain perfect circular shape - highest specificity */

button.testimonial-dot.testimonial-nav-dot,
  button.testimonial-nav-dot.testimonial-dot {
    /* Override all global button styles with maximum specificity */
    min-height: 0.5rem !important;
    height: 0.5rem !important;
    width: 0.5rem !important;
    max-height: 0.5rem !important;
    max-width: 0.5rem !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    line-height: 1 !important;
    font-size: 0 !important;
    /* Remove any text sizing */
    vertical-align: top !important;
  }

/* Section header layout is now handled by the main .section-header rule */

/* Redundant - covered by main .section-header-content rule */

/* Ensure all section-header variants follow the same layout */

/* This rule is redundant - consolidated into main .section-header-actions rule */

/* Card Consistency - Professional Layout System - FIXED */

.card,
  [class*="rounded-xl shadow"],
  [class*="rounded-2xl shadow"],
  [class*="rounded-3xl shadow"] {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--navy-ultra-light);
    transition: all var(--transition-normal);
    position: relative;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    /* Ensure borders are never clipped - removed margin/padding overrides */
    box-sizing: border-box;
  }

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    will-change: transform, box-shadow;
    /* Optimize for smooth transitions */
  }

/* Standardize all white background cards across inner pages - FIXED */

.bg-white[class*="rounded"],
  [class*="bg-white"][class*="rounded"],
  [class*="rounded-xl"][class*="shadow"],
  [class*="rounded-2xl"][class*="shadow"],
  [class*="rounded-3xl"][class*="shadow"] {
    border: 1px solid var(--navy-ultra-light) !important;
    box-shadow: var(--shadow-md) !important;
    border-radius: var(--radius-2xl) !important;
    overflow: visible !important;
    position: relative;
    /* Prevent border truncation - add minimal margin for borders */
    box-sizing: border-box;
  }

/* Phone input group: the WRAPPER is the single bordered control; the country
     button and number input inside are flattened (no own border/radius/shadow),
     separated by one internal divider. !important beats both the global
     button-radius rule and the bg-white card rules, and the shadcn Input
     defaults. Focus ring lives on the wrapper via :focus-within. */

.phone-input-group {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-xl);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

.phone-input-group:focus-within {
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 3px rgb(184 134 11 / 0.15);
  }

.phone-input-group.phone-input-group-error {
    border-color: #ef4444;
  }

.phone-input-group .country-selector-btn,
  .phone-input-group .phone-number-input {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    background: #fff !important;
  }

.phone-input-group .country-selector-btn {
    border-radius: calc(var(--radius-xl) - 1px) 0 0 calc(var(--radius-xl) - 1px) !important;
    /* Base colour lives HERE, not as utility classes on the button: the legacy
       "button.text-navy-primary:hover *" contrast hack would otherwise force
       gold onto the dial code / chevron over the navy hover fill. */
    color: var(--navy-primary);
  }

.phone-input-group .country-selector-btn:hover,
  .phone-input-group .country-selector-btn:active,
  .phone-input-group .country-selector-btn[aria-expanded="true"] {
    background: var(--navy-primary) !important;
  }

/* White content on the navy fill (hover/active/open). */

.phone-input-group .country-selector-btn:hover *,
  .phone-input-group .country-selector-btn:active *,
  .phone-input-group .country-selector-btn[aria-expanded="true"] * {
    color: #fff !important;
  }

/* The input stretches to the button's height and shares its 16px text inset,
     so the dial code and the typed number sit on the same line and rhythm.
     (The global input[type=tel] rule injects padding/gradient/border we kill.) */

.phone-input-group > div:last-child {
    display: flex;
    align-items: stretch;
  }

.phone-input-group .phone-number-input {
    border-radius: 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 !important;
    height: auto !important;
    align-self: stretch;
    padding: 0 2.75rem 0 1rem !important;
  }

.phone-input-group > div:first-child {
    border-right: 1px solid #d1d5db;
  }

.phone-input-group.phone-input-group-error > div:first-child {
    border-right-color: #fca5a5;
  }

/* Modal/dialog panels must opt back INTO scrolling. The card rules above force
     overflow:visible, which pushes tall modal content (e.g. payout history) out
     of bounds instead of scrolling. Higher specificity (3 selectors) wins. */

[class*="rounded"][class*="max-h-"][class*="overflow-y-auto"] {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* The modal panel keeps its own scroll from chaining to the page behind. */
    overscroll-behavior: contain;
  }

/* Lock the page scroll while ANY modal dialog / overlay is open, so the
     background can't scroll or "bleed" behind it on mobile. Modals are
     conditionally rendered (unmounted when closed) and carry aria-modal / the
     .modal-overlay class, so this only applies while one is actually open.
     Higher specificity than the global `html/body { overflow-y: visible }`
     rules, so it wins. */

html:has([aria-modal="true"]),
  html:has(.modal-overlay),
  body:has([aria-modal="true"]),
  body:has(.modal-overlay) {
    overflow: hidden !important;
  }

/* Horizontal scroll strips (overflow-x-auto) compute overflow-y to `auto` per
     the CSS spec, which turns them into vertical scroll containers that TRAP
     touch scrolling on mobile — the page freezes when a drag starts on them.
     pan-x lets them scroll horizontally (and pinch-zoom still works) while
     vertical drags fall through to the page. Modal panels use overflow-y-auto
     (not overflow-x-auto) so they are unaffected and still scroll normally. */

[class*="overflow-x-auto"] {
    touch-action: pan-x pinch-zoom;
  }

/* Ensure cards with borders are never clipped */

[class*="bg-white"][class*="rounded"]:before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid transparent;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
  }

/* Text Consistency */

.\!text-navy-primary {
    color: var(--navy-primary) !important;
  }

.text-navy-primary {
    color: var(--navy-primary) !important;
  }

.text-gold-primary {
    color: var(--gold-text) !important;
  }

/* Consistent Typography Hierarchy */

.caption {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

/* Helper Text Classes */

/* Background Consistency */

.bg-navy-primary {
    background-color: var(--navy-primary) !important;
  }

.bg-gold-primary {
    background-color: var(--gold-primary) !important;
  }

/* LAYOUT CONSISTENCY SYSTEM */

/* Page Container Consistency */

.page-container {
    padding: 1.5rem;
    min-height: calc(100vh - 80px);
    overflow-x: hidden;
    position: relative;
    animation: fadeIn 0.4s ease-out;
  }

/* Responsive page container padding */

@media (max-width: 768px) {
    .page-container {
      padding: 1rem;
    }
  }

@media (max-width: 640px) {
    .page-container {
      padding: 0.75rem;
    }
  }

.page-content {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    animation: fadeInUp 0.5s ease-out;
  }

/* Increase max-width for better content layout */

.max-w-4xl {
    max-width: 72rem !important;
    /* Increased from 56rem (896px) to 72rem (1152px) */
  }

/* Ensure proper spacing in all sections */

.space-y-6 > * + * {
    margin-top: 1.5rem !important;
  }

/* Dashboard Grid Consistency */

/* Enhanced Layout Consistency System */

/* Consistent Content Areas */

/* Consistent Element Spacing */

/* Consistent Button Groups */

/* Consistent Form Layout */

.form-field {
    margin-bottom: var(--space-6);
  }

.form-field:last-child {
    margin-bottom: 0;
  }

/* Consistent Grid Layouts */

.grid-responsive {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

@media (min-width: 768px) {
    .grid-responsive {
      grid-template-columns: repeat(2, 1fr);
    }
  }

@media (min-width: 1024px) {
    .grid-responsive {
      grid-template-columns: repeat(3, 1fr);
    }
  }

/* Consistent List Layouts */

/* Animation Library */

/* Fade In Animations - Consolidated */

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out;
  }

/* Scale Animations */

.animate-scale-in {
    animation: scaleIn 0.3s ease-out;
  }

/* Hover Effects - Consolidated to prevent flickering */

.hover-lift {
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
    will-change: transform, box-shadow;
    /* Optimize for smooth transitions */
  }

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow:
      0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

/* Stagger Animation Delays */

.stagger-1 {
    animation-delay: 0.1s;
  }

.stagger-2 {
    animation-delay: 0.2s;
  }

/* Keyframe Definitions */

@keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

@keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

@keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

@keyframes bounceIn {
    0% {
      opacity: 0;
      transform: scale(0.3);
    }

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

    70% {
      transform: scale(0.9);
    }

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

/* Float Animation for Background Elements - Removed duplicate */

/* Removed duplicate float keyframe */

/* Pulse Animation for Interactive Elements */

.animate-pulse-gentle {
    animation: pulseGentle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

@keyframes pulseGentle {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.7;
    }
  }

/* Slide In Animations */

@keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

@keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(30px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

/* Form Consistency */

.form-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    width: 100%;
    padding: 0.875rem 1.125rem;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    font-family: inherit !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: all var(--transition-normal);
    background: linear-gradient(
      135deg,
      var(--white-pure) 0%,
      var(--gray-50) 100%
    );
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

/* Placeholder text visibility */

.form-input::-moz-placeholder, input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder {
    color: var(--text-muted);
    opacity: 1;
  }

.form-input::placeholder,
  input::placeholder,
  textarea::placeholder,
  select::placeholder {
    color: var(--text-muted);
    opacity: 1;
  }

/* Form select with option visibility */

select option {
    color: var(--text-primary);
    background-color: var(--white-pure);
  }

.form-input:focus,
  input:focus,
  textarea:focus,
  select:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow:
      0 0 0 4px rgba(184, 134, 11, 0.15),
      0 2px 8px rgba(0, 0, 0, 0.1);
    background: white;
    transform: translateY(-1px);
  }

/* Form error state */

.form-input.error,
  input.error,
  textarea.error,
  select.error {
    border-color: var(--border-error);
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
  }

.form-input.\!error,
  input.\!error,
  textarea.\!error,
  select.\!error {
    border-color: var(--border-error) !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1) !important;
  }

/* Form success state */

.form-input.success,
  input.success,
  textarea.success,
  select.success {
    border-color: var(--border-success);
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.1);
  }

.form-input.\!success,
  input.\!success,
  textarea.\!success,
  select.\!success {
    border-color: var(--border-success) !important;
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.1) !important;
  }

/* Disabled form elements */

.form-input:disabled,
  input:disabled,
  textarea:disabled,
  select:disabled {
    background-color: var(--gray-100);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
  }

/* Sidebar Consistency */

.sidebar-nav-active {
    color: white !important;
    background-color: transparent !important;
    position: relative;
  }

.sidebar-nav-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #d4af37 0%, #b8860b 100%);
    border-radius: 0 2px 2px 0;
  }

.sidebar-nav-active span,
  .sidebar-nav-active svg,
  .sidebar-nav-active svg {
    color: white !important;
    background-color: transparent !important;
  }

/* Force white color for active sidebar items with highest specificity */

.sidebar-main .sidebar-menu-item.sidebar-nav-active,
  .sidebar-main .sidebar-menu-item.sidebar-nav-active span,
  .sidebar-main .sidebar-menu-item.sidebar-nav-active svg,
  .sidebar-main button.sidebar-menu-item.sidebar-nav-active,
  .sidebar-main button.sidebar-menu-item.sidebar-nav-active span,
  .sidebar-main button.sidebar-menu-item.sidebar-nav-active svg,
  nav .sidebar-menu-item.sidebar-nav-active,
  nav .sidebar-menu-item.sidebar-nav-active span,
  nav .sidebar-menu-item.sidebar-nav-active svg,
  nav button.sidebar-menu-item.sidebar-nav-active,
  nav button.sidebar-menu-item.sidebar-nav-active span,
  nav button.sidebar-menu-item.sidebar-nav-active svg,
  nav button.sidebar-menu-item.sidebar-nav-active svg {
    color: white !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

.sidebar-nav-inactive {
    color: white !important;
    background-color: transparent !important;
  }

.sidebar-nav-inactive span,
  .sidebar-nav-inactive svg {
    color: white !important;
  }

/* Ensure sidebar menu items maintain white text color */

.sidebar-main .sidebar-menu-item.sidebar-nav-inactive,
  .sidebar-main .sidebar-menu-item.sidebar-nav-inactive span,
  .sidebar-main .sidebar-menu-item.sidebar-nav-inactive svg,
  nav .sidebar-menu-item.sidebar-nav-inactive,
  nav .sidebar-menu-item.sidebar-nav-inactive span,
  nav .sidebar-menu-item.sidebar-nav-inactive svg,
  .sidebar-main button.sidebar-nav-inactive,
  .sidebar-main button.sidebar-nav-inactive span,
  .sidebar-main button.sidebar-nav-inactive svg,
  nav button.sidebar-nav-inactive,
  nav button.sidebar-nav-inactive span,
  nav button.sidebar-nav-inactive svg {
    color: white !important;
    background-color: transparent !important;
    text-decoration: none !important;
  }

/* Force white color for all sidebar navigation elements */

.sidebar-main .sidebar-menu-item,
  .sidebar-main .sidebar-menu-item span,
  .sidebar-main .sidebar-menu-item svg,
  .sidebar-main button.sidebar-menu-item,
  .sidebar-main button.sidebar-menu-item span,
  .sidebar-main button.sidebar-menu-item svg,
  .sidebar-main .sidebar-nav-inactive button,
  .sidebar-main .sidebar-nav-inactive button span,
  .sidebar-main .sidebar-nav-inactive button svg,
  .sidebar-main .sidebar-nav-inactive button svg {
    color: white !important;
  }

.sidebar-main .sidebar-nav-inactive,
  .sidebar-main .sidebar-nav-inactive span,
  .sidebar-main .sidebar-nav-inactive svg {
    color: white !important;
  }

/* Override global button color inheritance for sidebar */

.sidebar-main button.sidebar-menu-item:not(.sidebar-nav-active),
  .sidebar-main button.sidebar-nav-inactive {
    color: white !important;
  }

.sidebar-main button.sidebar-menu-item:not(.sidebar-nav-active) span,
  .sidebar-main button.sidebar-nav-inactive span {
    color: white !important;
  }

.sidebar-main button.sidebar-menu-item:not(.sidebar-nav-active) svg,
  .sidebar-main button.sidebar-nav-inactive svg {
    color: white !important;
  }

.sidebar-nav-inactive:hover,
  .sidebar-main button.sidebar-nav-inactive:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--gold-primary) !important;
  }

.sidebar-nav-inactive:hover span,
  .sidebar-nav-inactive:hover svg,
  .sidebar-main button.sidebar-nav-inactive:hover span,
  .sidebar-main button.sidebar-nav-inactive:hover svg,
  .sidebar-main button.sidebar-nav-inactive:hover svg {
    color: var(--gold-primary) !important;
  }

/* Ensure logout button is always visible.
     Background is owned by the earlier .sidebar-footer rule (navy tint,
     same hue as the sidebar gradient) — the old #031774 override here
     made the footer a visibly different blue. */

.sidebar-footer {
    visibility: visible !important;
    opacity: 1 !important;
  }

.sidebar-footer button {
    /* Colour is owned by the button's own classes (ghost-red logout);
       forcing white here used to stomp the design. */
    visibility: visible !important;
    opacity: 1 !important;
  }

/* ADMIN PANEL SPECIFIC FIXES - Prevent Global CSS Conflicts */

.admin-panel-header {
    background: white !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

.admin-panel-nav {
    background: white !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
  }

.admin-panel-nav nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

@media (min-width: 640px) {
    .admin-panel-nav nav {
      gap: 1rem !important;
    }
  }

@media (min-width: 1024px) {
    .admin-panel-nav nav {
      gap: 2rem !important;
    }
  }

.admin-panel-nav nav::-webkit-scrollbar {
    display: none !important;
  }

.admin-panel-tab {
    display: flex;
    align-items: center;
    padding: 1rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    color: var(--text-primary);
    text-decoration: none;
    visibility: visible;
    opacity: 1;
    height: auto;
    min-height: 3rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

.admin-panel-tab:hover {
    color: var(--navy-primary);
    border-bottom-color: var(--gold-light);
  }

.admin-panel-tab.active {
    color: var(--gold-primary);
    border-bottom-color: var(--gold-primary);
  }

.admin-panel-tab svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
  }

@media (max-width: 768px) {
    .admin-panel-nav nav {
      gap: 0.5rem !important;
      padding: 0 1rem !important;
    }

    .admin-panel-tab {
      padding: 0.75rem 0.25rem;
      font-size: 0.75rem;
    }

    .admin-panel-tab svg {
      width: 1rem !important;
      height: 1rem !important;
      margin-right: 0.25rem !important;
    }
  }

/* Admin panel navigation container */

.admin-panel-nav nav {
    visibility: visible;
    opacity: 1;
    height: auto;
  }

/* NEW ADMIN DASHBOARD STYLES */

/* Gradient text support */

/* Card hover effects */

/* Status indicator animation */

@keyframes pulse-dot {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }

/* Dashboard stat card animations */

/* Sidebar link active state */

.sidebar-link:hover::before,
  .sidebar-link.active::before {
    transform: scaleY(1);
  }

/* PRODUCTION UX CONSISTENCY SYSTEM */

/* Loading States */

@keyframes shimmer {
    0% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

/* Hover Effects Consistency - Removed duplicate definition */

/* Focus States for Accessibility */

/* Error States */

/* Success States */

/* Mobile Responsiveness */

/* Comprehensive Responsive Box & Button Fixes */

/* Ensure all boxes are responsive. Exclude elements that explicitly set their
     own max-width (e.g. modal/dialog panels using Tailwind max-w-* utilities),
     otherwise this clobbers them to full width. */

.bg-white[class*="rounded"]:not([class*="max-w-"]),
  .card:not([class*="max-w-"]),
  [class*="shadow"]:not([class*="max-w-"]) {
    max-width: 100%;
    overflow-x: visible;
    word-wrap: break-word;
    box-sizing: border-box;
  }

/* Responsive padding for all containers */

@media (max-width: 640px) {
    .bg-white[class*="p-8"],
    .card[class*="p-8"] {
      padding: 1rem !important;
    }

    .bg-white[class*="p-6"],
    .card[class*="p-6"] {
      padding: 1rem !important;
    }

    /* Reduce spacing in button groups */
    .flex.gap-3,
    .flex.gap-4 {
      gap: 0.5rem !important;
    }

    /* Keep button groups in single row on mobile */
    .section-header-actions {
      flex-direction: row;
      align-items: center;
      width: auto;
      flex-wrap: nowrap;
    }

    .section-header-actions button {
      width: 100%;
      justify-content: center;
    }

    /* Search and filter sections */
    .flex.flex-col.md\\:flex-row {
      flex-direction: column !important;
    }

    /* Stats cards - ensure they stack properly */
    .grid.grid-cols-1.md\\:grid-cols-4,
    .grid.grid-cols-1.md\\:grid-cols-3,
    .grid.grid-cols-1.md\\:grid-cols-2 {
      grid-template-columns: 1fr !important;
    }

    /* Button text wrapping handled by responsive layout */
    button span {
      white-space: normal;
      max-width: 100%;
    }
    button span.payment-gateway-btn-label {
      white-space: nowrap;
      max-width: none;
    }

    /* Responsive font sizes */
    h1 {
      font-size: 1.5rem !important;
    }

    h2 {
      font-size: 1.25rem !important;
    }

    h3 {
      font-size: 1.125rem !important;
    }
  }

@media (min-width: 641px) and (max-width: 1024px) {
    /* Tablet adjustments */
    .bg-white[class*="p-8"] {
      padding: 1.5rem !important;
    }

    /* Button groups stay in single row on tablet */
    .section-header-actions {
      flex-wrap: nowrap;
    }

    /* Stats cards in 2 columns on tablet */
    .grid.grid-cols-1.md\\:grid-cols-4 {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

/* Button Responsive Fixes */

/* Removed duplicate .btn definition - merged into main definition below */

@media (min-width: 768px) {
    button,
    .btn {
      font-size: 1rem;
      padding: 0.75rem 1.5rem;
    }
  }

/* Ensure buttons with icons don't break - proper positioning and alignment */

button svg,
  .btn svg {
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 0.5rem !important;
  }

/* Remove margin for last child icons */

button svg:last-child,
  .btn svg:last-child {
    margin-right: 0 !important;
  }

/* Ensure buttons with icons have proper flex alignment */

button:has(svg),
  .btn:has(svg),
  a:has(svg) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

/* Icon-only buttons should center icons perfectly */

button:has(svg):not(:has(span)):not(:has(text)),
  .btn:has(svg):not(:has(span)):not(:has(text)),
  a:has(svg):not(:has(span)):not(:has(text)) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

button:has(svg):not(:has(span)):not(:has(text)) svg,
  .btn:has(svg):not(:has(span)):not(:has(text)) svg,
  a:has(svg):not(:has(span)):not(:has(text)) svg {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

/* Input field responsive fixes */

input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 1rem;
  }

/* Search box specific fixes */

input[type="text"][placeholder*="Search" i],
  input[type="search"] {
    padding-left: 2.5rem;
    padding-right: 1rem;
  }

/* Filter dropdown responsive - full width for consistency */

select.form-select {
    width: 100%;
  }

/* Card action buttons responsive */

.flex.items-center.gap-2.ml-4 {
    margin-left: 0.5rem !important;
    flex-shrink: 0;
  }

@media (max-width: 640px) {
    .flex.items-center.gap-2.ml-4 {
      flex-direction: column;
      gap: 0.25rem !important;
    }
  }

/* Grid responsive improvements */

.grid.gap-4,
  .grid.gap-6 {
    gap: 1rem;
  }

@media (max-width: 640px) {
    .grid.gap-4,
    .grid.gap-6 {
      gap: 0.75rem;
    }
  }

/* Prevent horizontal scroll - but allow sticky positioning */

body,
  html {
    overflow-x: hidden;
    max-width: 100vw;
    box-sizing: border-box;
    /* Ensure sticky positioning works */
    position: relative;
  }

#root {
    overflow-x: hidden;
    max-width: 100vw;
    box-sizing: border-box;
    /* Allow sticky children */
    position: relative;
    min-height: 100vh;
  }

/* Container max-width fixes */

.space-y-6,
  .space-y-8,
  [class*="space-y-"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

/* Floating Contact Button Responsive Fixes */

.fixed.bottom-6.right-6 {
    bottom: 1rem;
    right: 1rem;
  }

@media (max-width: 640px) {
    .fixed.bottom-6.right-6 {
      bottom: 0.75rem;
      right: 0.75rem;
    }

    /* Make floating contact popover properly sized on mobile */
    .fixed.bottom-6.right-6 > div {
      max-width: calc(100vw - 2rem);
    }

    .fixed.bottom-6.right-6 button {
      width: 3.5rem;
      height: 3.5rem;
    }
  }

/* Ensure floating buttons don't interfere with scrolling */

/* Print Styles */

@media print {
    .sidebar-main,
    .floating-contact,
    .scroll-to-top,
    .fixed.bottom-6.right-6 {
      display: none !important;
    }

    .page-content {
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  }

/* Container System */

.\!container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: var(--space-lg) !important;
    padding-right: var(--space-lg) !important;
    /* CRITICAL: Ensure containers size to their content */
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    /* CRITICAL: Ensure containers size to their content */
    height: auto;
    min-height: 0;
    box-sizing: border-box;
  }

/* Ensure containers never have fixed heights unless explicitly set */

.\!container:not([class*="min-h"]):not([class*="h-"]):not(
      [style*="height"]
    ):not([style*="min-height"]) {
    height: auto !important;
    min-height: 0 !important;
  }

.container:not([class*="min-h"]):not([class*="h-"]):not(
      [style*="height"]
    ):not([style*="min-height"]) {
    height: auto !important;
    min-height: 0 !important;
  }

/* Section Spacing */

.section {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
  }

.card + .card {
    margin-top: var(--space-xl);
  }

/* Form Element Spacing */

.form-field {
    margin-bottom: var(--space-lg);
    padding: 0;
  }

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
  }

@media (min-width: 768px) {
    .form-row {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-lg);
    }
  }

.form-label {
    margin-bottom: var(--space-sm);
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
  }

/* Form Helper Text */

/* Form Description Text */

/* Old form system removed - using production-ready system */

/* Old form labels removed - using production-ready system */

/* Modal System */

/* Enhanced Modal System with Animations */

.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    width: 100vw !important;
    /* CRITICAL: Use 100dvh for mobile to account for dynamic browser UI */
    height: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    /* Dynamic viewport height for mobile */
    min-width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    /* Dynamic viewport height for mobile */
    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    /* Dynamic viewport height for mobile */
    background: rgba(0, 0, 0, 0.75) !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    z-index: var(--z-modal-backdrop) !important;
    cursor: pointer;
    opacity: 1;
    animation: fadeIn 0.3s ease-out forwards;
    overflow-y: auto;
    /* CRITICAL: Ensure overlay covers full screen on mobile */
    -webkit-overflow-scrolling: touch;
  }

/* iOS Safari fix for viewport height */

@supports (-webkit-touch-callout: none) {
    .modal-overlay {
      height: -webkit-fill-available !important;
      min-height: -webkit-fill-available !important;
    }
  }

@media (min-width: 768px) {
    .modal-overlay {
      padding: 0 !important;
    }
  }

.modal {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    overflow-y: auto;
    width: 100%;
    max-width: 95vw;
    max-height: 95vh;
    max-height: 95dvh;
    /* Dynamic viewport height for mobile */
    cursor: default;
    pointer-events: auto;
    position: relative;
    z-index: var(--z-modal);
    transform: scale(0.95) translateY(20px);
    opacity: 0;
    animation: modalSlideIn 0.3s var(--transition-bounce) forwards;
    margin: auto;
    /* Ensure proper scrolling on mobile */
    -webkit-overflow-scrolling: touch;
    /* Prevent content from being cut off */
    display: flex;
    flex-direction: column;
  }

@media (min-width: 640px) {
    .modal {
      max-width: 90vw;
      border-radius: var(--radius-2xl);
    }
  }

@media (min-width: 768px) {
    .modal {
      max-width: 520px;
    }
  }

@keyframes modalSlideIn {
    to {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }

@keyframes modalSlideOut {
    to {
      transform: scale(0.95) translateY(-20px);
      opacity: 0;
    }
  }

.modal-xl {
    max-width: 900px;
  }

/* Mobile-first responsive modal sizing */

@media (max-width: 639px) {
    .modal {
      max-width: 95vw !important;
      max-height: 95vh !important;
      max-height: 95dvh !important;
      margin: 0.5rem !important;
    }

    /* Payment modal mobile fixes — width constraint removed; modals handle
       their own max-width. Only restrict max-height for scrollability. */
    div[role="dialog"][aria-modal="true"]
      div[class*="bg-white"][class*="rounded-2xl"],
    div[class*="fixed"][class*="inset-0"][class*="z-50"]
      div[class*="bg-white"][class*="rounded-2xl"][class*="max-w-md"] {
      max-height: 90vh !important;
      max-height: 90dvh !important;
    }

    /* Ensure content is scrollable on mobile */
    div[role="dialog"][aria-modal="true"] div[class*="flex-1"],
    div[class*="fixed"][class*="inset-0"][class*="z-50"] div[class*="flex-1"] {
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      max-height: calc(95vh - 200px) !important;
      /* Account for header and footer */
    }
  }

/* Modal form specific spacing - COMPACT */

.modal-body .form-field {
    margin-bottom: var(--space-md);
  }

.modal-body .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
  }

@media (max-width: 768px) {
    .modal-body .form-row {
      grid-template-columns: 1fr;
      gap: var(--space-sm);
    }
  }

/* Stagger animation classes */

/* Apply stagger delays to animations */

[class*="stagger-"] {
    animation-delay: var(--stagger, 0s);
  }

/* Enhanced form field spacing for better UX */

/* Form Field Structure - Optimized - REMOVED DUPLICATE */

/* Modal specific spacing */

/* Emergency contact section spacing */

/* Consolidated Text Shadow System - Removed Duplicates */

/* Old page layout removed - using production-ready system */

/* Admin specific container */

/* Ensure consistent spacing for all pages */

main {
    padding: 0;
  }

/* Fix modal positioning relative to header - ensure full screen coverage */

.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    /* CRITICAL: Use 100dvh for mobile to account for dynamic browser UI */
    height: 100vh !important;
    height: 100dvh !important;
    /* Dynamic viewport height for mobile */
    min-width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    /* Dynamic viewport height for mobile */
    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    /* Dynamic viewport height for mobile */
    z-index: var(--z-modal-backdrop) !important;
    /* CRITICAL: Ensure overlay is positioned relative to viewport, not any parent */
    transform: none !important;
    /* CRITICAL: Prevent any parent container from affecting positioning */
    contain: layout style paint !important;
  }

/* iOS Safari fix for viewport height */

@supports (-webkit-touch-callout: none) {
    .modal-overlay {
      height: -webkit-fill-available !important;
      min-height: -webkit-fill-available !important;
      /* CRITICAL: Ensure no spacing on iOS */
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  }

/* CRITICAL: Mobile-specific fixes for modal overlay spacing */

@media (max-width: 768px) {
    .modal-overlay {
      /* Force overlay to cover entire viewport on mobile */
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      height: 100dvh !important;
      min-width: 100vw !important;
      min-height: 100vh !important;
      min-height: 100dvh !important;
      max-width: 100vw !important;
      max-height: 100vh !important;
      max-height: 100dvh !important;
      margin: 0 !important;
      padding: 0 !important;
      /* Ensure no transform or positioning context issues */
      transform: none !important;
      contain: layout style paint !important;
    }

    /* Ensure html and body have no spacing on mobile */
    html,
    body {
      margin: 0 !important;
      padding: 0 !important;
      overflow-x: hidden !important;
    }

    /* Ensure #root doesn't add spacing */
    #root {
      margin: 0 !important;
      padding: 0 !important;
    }
  }

/* Enhanced modal styling for better spacing */

.modal {
    margin: var(--space-md);
    max-height: 85vh;
  }

/* Section Spacing */

.section {
    margin-bottom: var(--space-2xl);
    /* CRITICAL: Sections must allow overflow-y for sticky positioning */
    overflow-x: hidden !important;
    overflow-y: visible !important;
    position: relative !important;
  }

.section + .section {
    margin-top: var(--space-2xl);
  }

/* Card System - Enhanced with Animations - FIXED */

.card {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--navy-ultra-light);
    margin-bottom: var(--space-xl);
    overflow: visible !important;
    /* Changed from hidden to visible to prevent button edge clipping on hover */
    overflow-x: visible !important;
    overflow-y: visible !important;
    transition: all var(--transition-normal);
    position: relative;
    will-change: transform, box-shadow;
    box-sizing: border-box;
  }

.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-primary), var(--gold-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-normal);
  }

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

.card:hover::before {
    transform: scaleX(1);
  }

/* Profile specific spacing */

/* Button System - Enhanced with Consistent Rounded Corners */

/* Button System - Production Ready */

/* Old button styles removed - using production-ready system */

/* Form-input focus, error, and success states are defined above with the main form-input rule */

.form-label {
    display: block;

    font-weight: 500;
    color: var(--navy-primary);
    margin-bottom: var(--space-sm);
    font-size: 0.875rem;
  }

/* Removed duplicate card-premium definition */

/* Navigation - Consistent */

.nav-link.active {
    color: var(--gold-primary);
    background: var(--gold-light);
  }

/* Typography Utilities */

/* General text spacing improvements */

p {
    margin-bottom: var(--space-md);
    line-height: 1.7;
  }

p:last-child {
    margin-bottom: 0;
  }

/* Production-Ready Form System - No Template Literals */

.form-input-base {
    width: 100%;
    border-radius: var(--radius-xl);
    border-width: 1px;
    border-color: var(--gray-300);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }

.form-input-base:disabled {
    background-color: var(--gray-100);
  }

.form-input-base:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.form-input-base:disabled {
  cursor: not-allowed;
  background-color: var(--gray-100);
}

.form-input-with-icon {
  padding-left: 2.5rem;
}

.form-input-error {
    border-color: var(--border-error);
    border-color: var(--error);
    background-color: var(--error-light);
  }

.form-input-success {
    border-color: var(--border-success);
    border-color: var(--success);
    background-color: var(--success-light);
  }

.form-input-focus {
    border-color: var(--navy-primary);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: var(--navy-primary);
    --tw-ring-opacity: 0.2;
  }

.form-textarea-base {
    width: 100%;
    resize: vertical;
    border-radius: var(--radius-xl);
    border-width: 1px;
    border-color: var(--gray-300);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }

.form-textarea-base:disabled {
    background-color: var(--gray-100);
  }

.form-textarea-base:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.form-textarea-base:disabled {
  cursor: not-allowed;
  background-color: var(--gray-100);
}

@media (max-width: 640px) {

    /* Reduce spacing in button groups */
    .form-label-base.gap-3,.form-label-base.gap-4 {
      gap: 0.5rem;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .form-label-base.flex-col.md\\:flex-row {
      flex-direction: column;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .form-label-base.gap-3,.form-label-base.gap-4 {
      gap: 0.5rem;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .form-label-base.flex-col.md\\:flex-row {
      flex-direction: column;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .form-label-base.gap-3,.form-label-base.gap-4 {
      gap: 0.5rem;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .form-label-base.flex-col.md\\:flex-row {
      flex-direction: column;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
  }

.form-label-base.items-center.gap-2.ml-4 {
    margin-left: 0.5rem;
    flex-shrink: 0;
  }

.flex.form-label-base.gap-2.ml-4 {
    margin-left: 0.5rem;
    flex-shrink: 0;
  }

@media (max-width: 640px) {
    .form-label-base.items-center.gap-2.ml-4 {
      flex-direction: column;
      gap: 0.25rem;
    }
    .flex.form-label-base.gap-2.ml-4 {
      flex-direction: column;
      gap: 0.25rem;
    }
  }

.form-label-base > button + button {
    margin-left: 0;
  }

.search-dropdown .form-label-base {
    background: white;
  }

.form-label-base {
  display: flex;
  cursor: pointer;
  align-items: center;
  border-radius: var(--radius-xl);
  padding: 0.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.form-label-base.items-center > label:has(input[type="radio"]),.form-label-base > label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    align-self: center;
  }

.flex.form-label-base > label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    align-self: center;
  }

.form-label-base.items-center > label:has(input[type="radio"]),.form-label-base > label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    align-self: center;
  }

.form-label-base > * {
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.form-label-base svg,.form-label-base img {
  flex-shrink: 0;
}

.form-label-base svg,.form-label-base > svg {
  overflow: visible;
}

.form-label-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.gradient-section-overlay.form-label-disabled {
  background-color: rgba(0, 0, 0, 0.5);
}

.form-label-enabled:hover {
    background-color: var(--gray-50);
  }

.interactive-input {
    color: var(--navy-primary);
  }

.interactive-input:hover[class*="bg-navy"] {
    color: white;
  }


  nav button.hamburger-menu-button.interactive-input:hover,
  nav button[aria-label*="navigation menu"].interactive-input:hover,
  nav button[aria-label*="Open navigation menu"].interactive-input:hover,
  nav button[aria-label*="Close navigation menu"].interactive-input:hover,
  nav button[aria-expanded].interactive-input:hover,
  nav .lg\\:hidden button.interactive-input:hover,
  nav button.interactive-input[class*="hover:bg-white"]:hover {
    background-color: var(--navy-primary);
    border-color: var(--navy-dark);
    color: white;
  }

[class*="from-navy-dark"] .interactive-input,
  [class*="bg-navy-dark"] .interactive-input {
    color: white;
  }


  .bg-navy-ultra-light:hover .interactive-input,
  [class~="bg-navy-ultra-light"]:hover .interactive-input {
    color: var(--navy-primary);
  }

button.interactive-input:not([class*="hover:bg-navy"]) *:not(.red-badge-text):not(.red-badge-text *) {
    color: var(--navy-primary);
  }

button.interactive-input:not([class*="hover:bg-navy"]):hover
    *:not(.red-badge-text):not(.red-badge-text *):not(.btn-primary):not(
      .btn-primary *
    ) {
    color: var(--gold-primary);
  }

button.btn-primary.interactive-input:hover,
  button.btn-primary.interactive-input:hover * {
    color: white;
  }

.interactive-input {
  color: var(--navy-primary);
}

.interactive-input:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--navy-primary);
  --tw-ring-opacity: 0.2;
}

.text-required {
    color: var(--error);
  }

.text-help {
    color: var(--text-tertiary) !important;
    font-size: 0.875rem;
    line-height: 1.5;
  }

/* Production-Ready Spacing System */


  button[role="switch"].section-spacing.inline-flex {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 9999px;
    transition: background-color 0.3s ease;
    width: 2.75rem;
    height: 1.5rem;
  }

.section-spacing {
  position: relative;
}

/* Grid System - Production Ready */

@media (max-width: 640px) {

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .grid-stats.grid-cols-1.md\\:grid-cols-4,.grid-stats.grid-cols-1.md\\:grid-cols-3,.grid-stats.grid-cols-1.md\\:grid-cols-2 {
      grid-template-columns: 1fr;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .grid.grid-stats.md\\:grid-cols-4,
    .grid.grid-stats.md\\:grid-cols-3,
    .grid.grid-stats.md\\:grid-cols-2 {
      grid-template-columns: 1fr;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .grid-stats.grid-cols-1.md\\:grid-cols-4,.grid-stats.grid-cols-1.md\\:grid-cols-3,.grid-stats.grid-cols-1.md\\:grid-cols-2 {
      grid-template-columns: 1fr;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .grid.grid-stats.md\\:grid-cols-4,
    .grid.grid-stats.md\\:grid-cols-3,
    .grid.grid-stats.md\\:grid-cols-2 {
      grid-template-columns: 1fr;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .grid-stats.grid-cols-1.md\\:grid-cols-4,.grid-stats.grid-cols-1.md\\:grid-cols-3,.grid-stats.grid-cols-1.md\\:grid-cols-2 {
      grid-template-columns: 1fr;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .grid.grid-stats.md\\:grid-cols-4,
    .grid.grid-stats.md\\:grid-cols-3,
    .grid.grid-stats.md\\:grid-cols-2 {
      grid-template-columns: 1fr;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
  }

@media (min-width: 641px) and (max-width: 1024px) {
    /* Tablet adjustments */

    /* Button groups stay in single row on tablet */

    /* Stats cards in 2 columns on tablet */
    .grid-stats.grid-cols-1.md\\:grid-cols-4 {
      grid-template-columns: repeat(2, 1fr);
    }
    /* Tablet adjustments */

    /* Button groups stay in single row on tablet */

    /* Stats cards in 2 columns on tablet */
    .grid.grid-stats.md\\:grid-cols-4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

.grid-stats.gap-4,.grid-stats.gap-6 {
    gap: 1rem;
  }


  .grid.grid-stats {
    gap: 1rem;
  }

@media (max-width: 640px) {
    .grid-stats.gap-4,.grid-stats.gap-6 {
      gap: 0.75rem;
    }
    
    .grid.grid-stats {
      gap: 0.75rem;
    }
  }

@media (max-width: 768px) {
    .grid-stats[class*="grid-cols-2"],.grid-stats[class*="grid-cols-3"],.grid-stats[class*="grid-cols-4"] {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .grid-stats[class*="sm:grid-cols-2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-stats[class*="grid-cols-2"],.grid-stats[class*="grid-cols-3"],.grid-stats[class*="grid-cols-4"] {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .grid-stats[class*="sm:grid-cols-2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-stats[class*="grid-cols-2"],.grid-stats[class*="grid-cols-3"],.grid-stats[class*="grid-cols-4"] {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .grid-stats[class*="sm:grid-cols-2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-stats[class*="grid-cols-2"],.grid-stats[class*="grid-cols-3"],.grid-stats[class*="grid-cols-4"] {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .grid-stats[class*="sm:grid-cols-2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

.grid-stats {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

.grid-stats svg,.grid-stats img {
  flex-shrink: 0;
}

.grid-stats svg,.grid-stats > svg {
  overflow: visible;
}

@media (min-width: 768px) {

  .grid-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {

  .grid-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .grid-responsive.grid-cols-1.md\\:grid-cols-4,.grid-responsive.grid-cols-1.md\\:grid-cols-3,.grid-responsive.grid-cols-1.md\\:grid-cols-2 {
      grid-template-columns: 1fr;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .grid.grid-responsive.md\\:grid-cols-4,
    .grid.grid-responsive.md\\:grid-cols-3,
    .grid.grid-responsive.md\\:grid-cols-2 {
      grid-template-columns: 1fr;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .grid-responsive.grid-cols-1.md\\:grid-cols-4,.grid-responsive.grid-cols-1.md\\:grid-cols-3,.grid-responsive.grid-cols-1.md\\:grid-cols-2 {
      grid-template-columns: 1fr;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .grid.grid-responsive.md\\:grid-cols-4,
    .grid.grid-responsive.md\\:grid-cols-3,
    .grid.grid-responsive.md\\:grid-cols-2 {
      grid-template-columns: 1fr;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .grid-responsive.grid-cols-1.md\\:grid-cols-4,.grid-responsive.grid-cols-1.md\\:grid-cols-3,.grid-responsive.grid-cols-1.md\\:grid-cols-2 {
      grid-template-columns: 1fr;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .grid.grid-responsive.md\\:grid-cols-4,
    .grid.grid-responsive.md\\:grid-cols-3,
    .grid.grid-responsive.md\\:grid-cols-2 {
      grid-template-columns: 1fr;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
  }

@media (min-width: 641px) and (max-width: 1024px) {
    /* Tablet adjustments */

    /* Button groups stay in single row on tablet */

    /* Stats cards in 2 columns on tablet */
    .grid-responsive.grid-cols-1.md\\:grid-cols-4 {
      grid-template-columns: repeat(2, 1fr);
    }
    /* Tablet adjustments */

    /* Button groups stay in single row on tablet */

    /* Stats cards in 2 columns on tablet */
    .grid.grid-responsive.md\\:grid-cols-4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

.grid-responsive.gap-4,.grid-responsive.gap-6 {
    gap: 1rem;
  }


  .grid.grid-responsive {
    gap: 1rem;
  }

@media (max-width: 640px) {
    .grid-responsive.gap-4,.grid-responsive.gap-6 {
      gap: 0.75rem;
    }
    
    .grid.grid-responsive {
      gap: 0.75rem;
    }
  }

@media (max-width: 768px) {
    .grid-responsive[class*="grid-cols-2"],.grid-responsive[class*="grid-cols-3"],.grid-responsive[class*="grid-cols-4"] {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .grid-responsive[class*="sm:grid-cols-2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-responsive[class*="grid-cols-2"],.grid-responsive[class*="grid-cols-3"],.grid-responsive[class*="grid-cols-4"] {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .grid-responsive[class*="sm:grid-cols-2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-responsive[class*="grid-cols-2"],.grid-responsive[class*="grid-cols-3"],.grid-responsive[class*="grid-cols-4"] {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .grid-responsive[class*="sm:grid-cols-2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-responsive[class*="grid-cols-2"],.grid-responsive[class*="grid-cols-3"],.grid-responsive[class*="grid-cols-4"] {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .grid-responsive[class*="sm:grid-cols-2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

.grid-responsive {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

.grid-responsive svg,.grid-responsive img {
  flex-shrink: 0;
}

.grid-responsive svg,.grid-responsive > svg {
  overflow: visible;
}

@media (min-width: 768px) {

  .grid-responsive {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {

  .grid-responsive {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Production-Ready Layout System - Removed Duplicates (Using New System Above) */

/* Navigation System - Production Ready */

/* Main Navbar Navigation Items — quiet text links with a gold underline for
     the active page. Only the real CTA button is a filled pill, so the navbar
     stays calm and the hierarchy is clear. */

.nav-item-active {
    color: var(--navy-primary) !important;
    background-color: transparent !important;
    border: none;
    box-shadow: none !important;
    font-weight: 600;
    border-radius: 0 !important;
    border-bottom: 2px solid var(--gold-primary);
  }

.nav-item-inactive {
    color: var(--text-secondary) !important;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    border-radius: 0 !important;
  }

.nav-item-inactive:hover {
    color: var(--navy-primary) !important;
    background-color: transparent !important;
    border-bottom-color: var(--gold-light);
  }

/* Button Consistency Rules - Ensure white text on dark backgrounds */

:is(button, a.app-btn).bg-navy-primary,
  :is(button, a.app-btn).bg-navy-dark,
  :is(button, a.app-btn).bg-navy-medium,
  :is(button, a.app-btn).bg-navy-secondary,
  :is(button, a.app-btn).bg-blue-600,
  :is(button, a.app-btn).bg-blue-700,
  .btn-primary,
  .btn.bg-navy-primary,
  .btn.bg-navy-dark,
  .btn.bg-navy-medium,
  .btn.bg-navy-secondary,
  .btn.bg-blue-600,
  .btn.bg-blue-700 {
    color: white !important;
  }

:is(button, a.app-btn)[class*="bg-gradient-gold"],
  :is(button, a.app-btn)[class*="from-gold-"],
  :is(button, a.app-btn)[class*="to-gold-"],
  :is(button, a.app-btn)[class*="via-gold"],
  .btn-gold,
  .btn[class*="bg-gold"]:not([class*="ultra-light"]):not([class*="pale"]) {
    color: var(--navy-primary) !important;
  }

:is(button, a.app-btn)[class*="bg-gradient-gold"] *,
  :is(button, a.app-btn)[class*="from-gold-"] *,
  :is(button, a.app-btn)[class*="to-gold-"] *,
  :is(button, a.app-btn)[class*="via-gold"] *,
  .btn-gold * {
    color: var(--navy-primary) !important;
  }

/* Fix navy text over navy background issues - high specificity */

button[class*="text-navy"]:hover[class*="bg-navy"],
  .text-navy-primary:hover[class*="bg-navy"],
  .text-navy:hover[class*="bg-navy"] {
    color: white !important;
  }


  .\!text-navy-primary:hover[class*="bg-navy"] {
    color: white !important;
  }

/* Ensure outline buttons have proper hover/focus/active states - WCAG compliant */

.btn-outline:hover:not([class*="hover:bg-gold-50"]):not(
      [class~="hover:bg-red-50"]
    ):not([class*="hover:bg-navy-ultra-light"]),
  .btn-outline:hover:not([class*="hover:bg-gold-50"]):not(
      [class~="hover:bg-red-50"]
    ):not([class*="hover:bg-navy-ultra-light"])
    *,
  .btn-outline:focus:not([class*="hover:bg-gold-50"]):not(
      [class~="hover:bg-red-50"]
    ):not([class*="hover:bg-navy-ultra-light"]),
  .btn-outline:focus:not([class*="hover:bg-gold-50"]):not(
      [class~="hover:bg-red-50"]
    ):not([class*="hover:bg-navy-ultra-light"])
    *,
  .btn-outline:active:not([class*="hover:bg-gold-50"]):not(
      [class~="hover:bg-red-50"]
    ):not([class*="hover:bg-navy-ultra-light"]),
  .btn-outline:active:not([class*="hover:bg-gold-50"]):not(
      [class~="hover:bg-red-50"]
    ):not([class*="hover:bg-navy-ultra-light"])
    *,
  :is(button, a.app-btn)[class*="border"]:hover[class*="text-navy"]:not(
      [class*="hover:bg-gold-50"]
    ):not([class~="hover:bg-red-50"]):not(
      [class*="hover:bg-navy-ultra-light"]
    ):not(.hamburger-menu-button):not([aria-label*="navigation menu"]),
  :is(button, a.app-btn)[class*="border"]:focus[class*="text-navy"]:not(
      [class*="hover:bg-gold-50"]
    ):not([class~="hover:bg-red-50"]):not(
      [class*="hover:bg-navy-ultra-light"]
    ):not(.hamburger-menu-button):not([aria-label*="navigation menu"]),
  :is(button, a.app-btn)[class*="border"]:active[class*="text-navy"]:not(
      [class*="hover:bg-gold-50"]
    ):not([class~="hover:bg-red-50"]):not(
      [class*="hover:bg-navy-ultra-light"]
    ):not(.hamburger-menu-button):not([aria-label*="navigation menu"]),
  button[class*="border-primary"][class*="text-secondary"]:hover:not(
      [class*="hover:bg-gold-50"]
    ):not([class~="hover:bg-red-50"]):not([class*="hover:bg-navy-ultra-light"]),
  button[class*="border-primary"][class*="text-secondary"]:focus:not(
      [class*="hover:bg-gold-50"]
    ):not([class~="hover:bg-red-50"]):not([class*="hover:bg-navy-ultra-light"]),
  button[class*="border-primary"][class*="text-secondary"]:active:not(
      [class*="hover:bg-gold-50"]
    ):not([class~="hover:bg-red-50"]):not(
      [class*="hover:bg-navy-ultra-light"]
    ) {
    color: white !important;
    background-color: var(--navy-primary) !important;
  }

/* Fix navy button hover states with maximum specificity */

button.bg-navy-primary:hover,
  button.bg-navy-dark:hover,
  button.bg-navy-medium:hover,
  .bg-navy-primary:hover,
  .bg-navy-dark:hover,
  .bg-navy-medium:hover {
    background-color: var(--navy-dark) !important;
    color: white !important;
  }

/* CRITICAL FIX: Ensure all buttons with primary/navy backgrounds have white text */

.btn-primary,
  .btn-primary *,
  .bg-navy-primary,
  .bg-navy-primary *,
  .bg-navy-dark,
  .bg-navy-dark *,
  .bg-navy-darkest,
  .bg-navy-darkest *,
  .bg-navy-medium,
  .bg-navy-medium *,
  .bg-navy-600,
  .bg-navy-600 *,
  .bg-navy-700,
  .bg-navy-700 *,
  .bg-navy-secondary,
  .bg-navy-secondary * {
    color: white !important;
  }

/* CRITICAL: Ensure btn-primary buttons keep white text/icons on hover - highest specificity */

/* Ensure light backgrounds have dark text */

.bg-navy-ultra-light,
  .bg-navy-ultra-light *,
  .bg-navy-pale,
  .bg-navy-pale *,
  .bg-gold-ultra-light,
  .bg-gold-ultra-light *,
  .bg-blue-ultra-light,
  .bg-blue-ultra-light *,
  [class~="bg-navy-ultra-light"],
  [class~="bg-navy-ultra-light"] *,
  [class~="bg-gold-ultra-light"],
  [class~="bg-gold-ultra-light"] * {
    color: var(--navy-primary) !important;
  }

/* Override text-secondary and text-white on light backgrounds */

.bg-navy-ultra-light .text-secondary,
  .bg-navy-ultra-light .text-white,
  .bg-gold-ultra-light .text-secondary,
  .bg-gold-ultra-light .text-white,
  [class~="bg-navy-ultra-light"] .text-secondary,
  [class~="bg-navy-ultra-light"] .text-white,
  [class~="bg-gold-ultra-light"] .text-secondary,
  [class~="bg-gold-ultra-light"] .text-white {
    color: var(--navy-dark) !important;
  }


  .bg-navy-ultra-light .\!text-white,
  .bg-gold-ultra-light .\!text-white,
  [class~="bg-navy-ultra-light"] .\!text-white,
  [class~="bg-gold-ultra-light"] .\!text-white {
    color: var(--navy-dark) !important;
  }

/* Fix outline button children text color - preserve for icons/svgs only */

/* CRITICAL: Outline buttons use stroke-only icons for visibility */

.btn-outline svg,
  .btn-outline path,
  button[class*="border-navy"] svg,
  a.app-btn[class*="border-navy"] svg {
    color: var(--navy-primary) !important;
    fill: none !important;
    stroke: var(--navy-primary) !important;
    stroke-width: 2 !important;
  }

/* Ensure hover states override - white text for all children - HIGH SPECIFICITY */

/* CRITICAL: Remove background-color from child elements to prevent separate backgrounds */

/* CRITICAL: Icons in outline buttons on hover - white stroke icons on navy background */

/* Outline icons are stroke-based, so keep stroke white, don't fill */

/* CRITICAL: Remove background-color from btn-outline child elements on hover/focus/active */

/* This ensures child elements don't have separate backgrounds - only the button itself has background */

/* Fix notification icon button - remove outer circle effect */

button[class*="btn-icon"],
  .btn-icon {
    padding: 0.625rem !important;
    border-radius: 0.5rem !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(3, 23, 116, 0.12) !important;
  }

button[class*="btn-icon"]:hover,
  .btn-icon:hover {
    box-shadow: 0 4px 12px rgba(3, 23, 116, 0.18) !important;
  }

/* Fix help modal z-index to ensure it appears above everything */

.help-modal,
  [role="dialog"][aria-modal="true"] {
    z-index: 9999 !important;
  }

/* Ensure help modal backdrop is below the modal but above everything else */

.help-modal::before,
  div[class*="fixed"][class*="inset-0"][class*="z-"] {
    z-index: 9998 !important;
  }

/* Payment Modal Specific Fixes - Target existing PaymentGateway structure */

/* Fix for PaymentGateway modal container */

div[class*="fixed"][class*="inset-0"][class*="z-50"]
    div[class*="bg-white"][class*="rounded-2xl"][class*="max-w-md"] {
    max-width: 28rem !important;
    /* 448px - larger for payment forms */
    width: 95vw !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
  }

/* Fix header to not shrink */

div[class*="fixed"][class*="inset-0"][class*="z-50"]
    div[class*="bg-white"][class*="rounded-2xl"]
    div[class*="flex-shrink-0"]:first-child {
    flex-shrink: 0 !important;
  }

/* Fix body to be scrollable */

div[class*="fixed"][class*="inset-0"][class*="z-50"]
    div[class*="bg-white"][class*="rounded-2xl"]
    div[class*="flex-1"][class*="overflow-y-auto"] {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }

/* Fix footer to not shrink */

div[class*="fixed"][class*="inset-0"][class*="z-50"]
    div[class*="bg-white"][class*="rounded-2xl"]
    div[class*="flex-shrink-0"]:last-child {
    flex-shrink: 0 !important;
  }

/* Alternative approach - target by role and aria attributes */

div[role="dialog"][aria-modal="true"]
    div[class*="bg-white"][class*="rounded-2xl"] {
    max-width: 28rem !important;
    width: 95vw !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
  }

/* Coupon Modal Specific Fixes */

/* Razorpay Modal Z-Index Fixes - Handled dynamically by PaymentGateway component */

/* Note: Razorpay styles are injected dynamically to avoid conflicts */

/* CRITICAL: Hide payment modal when Razorpay is open */

body.razorpay-open div[class*="fixed"][class*="inset-0"][class*="z-10"] {
    display: none !important;
  }

/* Lock body when Razorpay is open to prevent scroll issues */

body.razorpay-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

/* Ensure maximum z-index for any Razorpay elements */

div[id*="razorpay"],
  iframe[src*="razorpay"],
  iframe[src*="checkout.razorpay.com"] {
    z-index: 2147483647 !important;
    position: fixed !important;
  }

/* CRITICAL: Fix all fixed inset-0 overlays on mobile - ensure full screen coverage */

/* This catches all modal overlays that use inline Tailwind classes like bg-black/75, bg-opacity, backdrop-blur */

div[class*="fixed"][class*="inset-0"][class*="bg-black"],
  div[class*="fixed"][class*="inset-0"][class*="bg-black/"],
  div[class*="fixed"][class*="inset-0"][class*="bg-opacity"],
  div[class*="fixed"][class*="inset-0"][class*="backdrop-blur"],
  div.fixed.inset-0[class*="bg-black"],
  div.fixed.inset-0[class*="bg-opacity"],
  [class*="fixed"][class*="inset-0"][class*="bg-black"],
  [class*="fixed"][class*="inset-0"][class*="bg-opacity"],
  /* Catch backdrop elements with backdrop-blur */
  div[class*="fixed"][class*="inset-0"][class*="backdrop-blur-sm"],
  div[class*="fixed"][class*="inset-0"][class*="backdrop-blur-md"],
  div[class*="fixed"][class*="inset-0"][class*="backdrop-blur-lg"] {
    /* CRITICAL: Use 100dvh for mobile to account for dynamic browser UI */
    height: 100vh !important;
    height: 100dvh !important;
    /* Dynamic viewport height for mobile */
    min-height: 100vh !important;
    min-height: 100dvh !important;
    /* Dynamic viewport height for mobile */
    max-height: 100vh !important;
    max-height: 100dvh !important;
    /* Dynamic viewport height for mobile */
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* CRITICAL: Ensure overlay is positioned relative to viewport, not any parent */
    transform: none !important;
    /* CRITICAL: Prevent any parent container from affecting positioning */
    contain: layout style paint !important;
    /* CRITICAL: Ensure no margin or padding that could cause spacing */
    margin: 0 !important;
    padding: 0 !important;
  }

/* iOS Safari fix for viewport height on all overlays */

@supports (-webkit-touch-callout: none) {
    div[class*="fixed"][class*="inset-0"][class*="bg-black"],
    div[class*="fixed"][class*="inset-0"][class*="bg-black/"],
    div[class*="fixed"][class*="inset-0"][class*="bg-opacity"],
    div[class*="fixed"][class*="inset-0"][class*="backdrop-blur"],
    div[class*="fixed"][class*="inset-0"][class*="backdrop-blur-sm"],
    div[class*="fixed"][class*="inset-0"][class*="backdrop-blur-md"],
    div[class*="fixed"][class*="inset-0"][class*="backdrop-blur-lg"],
    div.fixed.inset-0[class*="bg-black"],
    div.fixed.inset-0[class*="bg-opacity"],
    [class*="fixed"][class*="inset-0"][class*="bg-black"],
    [class*="fixed"][class*="inset-0"][class*="bg-opacity"] {
      height: -webkit-fill-available !important;
      min-height: -webkit-fill-available !important;
    }
  }

/* Fix text wrapping and line breaks for better responsiveness */

.break-words {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

/* Prevent awkward text breaks in titles and headings */

h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  [class*="font-bold"],
  [class*="font-semibold"] {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

/* Improve line clamping */

/* Line clamp utilities - use sparingly, responsive layout preferred */

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

/* COMPREHENSIVE RESPONSIVE DESIGN FIXES */

/* Fix button spacing and sizing on all screen sizes */

@media (max-width: 640px) {
    .btn,
    button[class*="btn-"],
    button[class*="getButtonClasses"] {
      min-height: 44px !important;
      padding-left: 1rem !important;
      padding-right: 1rem !important;
      font-size: 0.875rem !important;
    }
  }

/* Fix grid layouts for small screens */

@media (max-width: 768px) {
    .grid[class*="grid-cols-2"],
    .grid[class*="grid-cols-3"],
    .grid[class*="grid-cols-4"] {
      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .grid[class*="sm:grid-cols-2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

/* Improve card spacing on mobile */

@media (max-width: 640px) {
    [class*="rounded-xl"],
    [class*="rounded-2xl"],
    .card {
      padding: 1rem !important;
    }

    [class*="p-6"] {
      padding: 1rem !important;
    }

    [class*="p-8"] {
      padding: 1.5rem !important;
    }
  }

/* Ensure proper spacing in button groups */

.flex > button + button,
  [class*="gap-"] > button + button {
    margin-left: 0 !important;
  }

/* Fix modal and dialog responsiveness */

@media (max-width: 640px) {
    [role="dialog"],
    .modal,
    [class*="fixed"][class*="inset-0"] > div {
      max-width: calc(100vw - 2rem) !important;
      margin: 1rem !important;
    }
  }

/* Improve form input sizing on mobile */

@media (max-width: 640px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select,
    .form-input,
    .form-textarea,
    .form-select {
      font-size: 16px !important;
      /* Prevents zoom on iOS */
      min-height: 44px !important;
    }
  }

/* Fix heading sizes for better mobile readability */

@media (max-width: 640px) {
    h1 {
      font-size: 1.75rem !important;
      line-height: 2rem !important;
    }

    h2 {
      font-size: 1.5rem !important;
      line-height: 1.75rem !important;
    }

    h3 {
      font-size: 1.25rem !important;
      line-height: 1.5rem !important;
    }
  }

/* Ensure icons and images don't overflow - but preserve border-radius */

/* CRITICAL: Don't apply max-width: 100% to SVGs with explicit size classes - they should maintain their size */

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

img,
  video,
  canvas {
    overflow: clip;
  }

@supports not (overflow: clip) {
    img,
    video,
    canvas {
      overflow: hidden;
    }
  }

/* SVGs should maintain their explicit size - don't shrink them */

svg {
    flex-shrink: 0 !important;
    overflow: visible !important;
  }

/* SVGs with explicit size classes should NEVER shrink */

svg[class*="w-"],
  svg[class*="h-"] {
    flex-shrink: 0 !important;
    overflow: visible !important;
  }

/* Images with explicit size classes should maintain their size */

img[class*="w-"],
  img[class*="h-"] {
    flex-shrink: 0 !important;
  }

/* Fix image border-radius conflicts and edge clipping - only apply where needed */

img[class*="rounded"],
  img[class*="border"] {
    border-radius: inherit !important;
    /* Ensure borders are not clipped */
    box-sizing: border-box;
    /* Prevent border conflicts */
    border-style: solid;
  }

/* Ensure image containers don't clip borders */

img[class*="rounded"],
  img[class*="border"] {
    position: relative;
    /* Ensure border-radius is properly applied */
    border-radius: inherit !important;
  }

/* Fix for images with borders - prevent edge conflicts */

img[class*="border"] {
    /* Ensure border doesn't conflict with border-radius */
    border-style: solid !important;
    /* Prevent border clipping */
    box-sizing: border-box !important;
  }

/* Ensure loading spinners work properly - MUST come first to override other rules */

[class*="animate-spin"][class*="rounded-full"],
  [class*="animate-bounce"][class*="rounded-full"],
  [class*="animate-ping"][class*="rounded-full"],
  .rounded-full.animate-spin,
  .rounded-full.animate-bounce,
  .rounded-full.animate-ping,
  .animate-spin.rounded-full,
  .animate-bounce.rounded-full,
  .animate-ping.rounded-full {
    overflow: visible !important;
    border-radius: 50% !important;
  }

/* Ensure profile pictures are perfectly circular - only target specific profile picture containers */

img[class*="rounded-full"][class*="object-cover"],
  div[class*="rounded-full"][class*="overflow-hidden"] > img,
  .rounded-full img[class*="object-cover"] {
    border-radius: 50% !important;
    overflow: hidden !important;
  }

/* Personal message thumbnail - ensure strict 48px constraint */

div[class*="w-12"][class*="h-12"][class*="rounded-full"] img,
  .w-12.rounded-full img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }

/* Ensure rounded-full containers stay fully rounded - exclude animated elements.
     Use 9999px, NOT 50%: 50% turns wide pill/badge elements into ellipses,
     whereas 9999px renders a circle on square elements AND a clean capsule on
     wide ones. */

div[class*="rounded-full"]:not(.animate-spin):not(.animate-bounce):not(
      .animate-ping
    ),
  button[class*="rounded-full"]:not(.animate-spin):not(.animate-bounce),
  a[class*="rounded-full"]:not(.animate-spin):not(.animate-bounce) {
    border-radius: 9999px !important;
  }

/* Ensure profile pictures are always circular - only for images with object-cover */

img[class*="rounded-full"][class*="object-cover"],
  div[class*="rounded-full"] img[class*="object-cover"],
  .rounded-full img[class*="object-cover"] {
    border-radius: 50% !important;
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }

/* Fix for profile picture containers - specific size selectors */

div[class*="w-32"][class*="h-32"][class*="rounded-full"]:not(
      .animate-spin
    ):not(.animate-bounce):not(.animate-ping),
  div[class*="w-24"][class*="h-24"][class*="rounded-full"]:not(
      .animate-spin
    ):not(.animate-bounce):not(.animate-ping),
  div[class*="w-10"][class*="h-10"][class*="rounded-full"]:not(
      .animate-spin
    ):not(.animate-bounce):not(.animate-ping) {
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

/* CRITICAL: Ensure images inside w-24 h-24 containers are properly sized and loaded */

div[class*="w-24"][class*="h-24"][class*="rounded-full"] img,
  div.w-24.h-24.rounded-full img,
  div[class*="w-24"][class*="h-24"].rounded-full img {
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    display: block !important;
    border-radius: 50% !important;
  }

/* Ensure w-24 h-24 containers maintain aspect ratio */

div[class*="w-24"][class*="h-24"]:not(.animate-spin):not(.animate-bounce):not(
      .animate-ping
    ) {
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
  }

/* Fix table responsiveness */

@media (max-width: 768px) {
    table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

/* Improve touch targets for mobile */

@media (max-width: 768px) {
    button,
    a,
    [role="button"],
    [tabindex="0"] {
      min-height: 44px !important;
      min-width: 44px !important;
    }
  }

/* Fix buttons with navy text that hover to navy backgrounds */

button[class*="text-navy"]:hover[class*="bg-navy"]:not(
      [class*="ultra-light"]
    ):not([class*="pale"]),
  button[class*="text-navy"]:hover[class*="bg-navy"]:not(
      [class*="ultra-light"]
    ):not([class*="pale"]),
  [class*="text-navy-primary"]:hover[class*="bg-navy"]:not(
      [class*="ultra-light"]
    ):not([class*="pale"]),
  [class*="text-navy"]:hover[class*="bg-navy"]:not([class*="ultra-light"]):not(
      [class*="pale"]
    ) {
    color: white !important;
  }

/* Keep text dark when hovering to light backgrounds */

/* BUT: Allow explicit red text color for logout buttons and similar */

/* AND: Allow explicit gold text color for buttons with hover:text-gold-primary */

/* CRITICAL: Exclude action-icon-btn from this rule - they have their own hover rules */

button[class*="hover:bg-gold-50"]:hover:not([class*="hover:text-red"]):not(
      [class*="hover:text-gold"]
    ):not(.action-icon-btn):not([class*="action-icon-btn"]),
  button[class~="hover:bg-red-50"]:hover:not([class*="hover:text-red"]):not(
      [class*="hover:text-gold"]
    ):not(.action-icon-btn):not([class*="action-icon-btn"]),
  button[class*="hover:bg-navy-ultra-light"]:hover:not(
      [class*="hover:text-red"]
    ):not([class*="hover:text-gold"]):not(.action-icon-btn):not(
      [class*="action-icon-btn"]
    ) {
    color: var(--navy-primary) !important;
  }

button[class*="hover:bg-gold-50"]:hover:not(.action-icon-btn):not(
      [class*="action-icon-btn"]
    )
    *:not(.red-badge-text):not(.red-badge-text *):not(
      [class*="hover:text-red"]
    ):not([class*="hover:text-gold"]),
  button[class~="hover:bg-red-50"]:hover:not(:disabled):not([disabled]):not(
      [class*="opacity-50"]
    ):not(.action-icon-btn):not([class*="action-icon-btn"])
    *:not(.red-badge-text):not(.red-badge-text *):not(
      [class*="hover:text-red"]
    ):not([class*="hover:text-gold"]),
  button[class*="hover:bg-navy-ultra-light"]:hover:not(:disabled):not(
      [disabled]
    ):not([class*="opacity-50"]):not(.action-icon-btn):not(
      [class*="action-icon-btn"]
    )
    *:not(.red-badge-text):not(.red-badge-text *):not(
      [class*="hover:text-red"]
    ):not([class*="hover:text-gold"]) {
    color: var(--navy-primary) !important;
  }

/* CRITICAL: Ensure logout buttons with hover:text-red-600 show red text on hover */

button[class~="hover:bg-red-50"][class*="hover:text-red"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"]),
  button[class~="hover:bg-red-50"][class*="hover:text-red-600"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"]),
  button[class~="hover:bg-red-50"][class*="hover:text-red"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"])
    *,
  button[class~="hover:bg-red-50"][class*="hover:text-red-600"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"])
    * {
    color: #dc2626 !important;
    /* red-600 */
  }

/* CRITICAL: Ensure buttons with hover:text-gold-primary show gold text on hover, even with hover:bg-navy-ultra-light */

/* This must have higher specificity than the navy color rule above */

button[class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]),
  button[class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]) *,
  button[class*="hover:bg-navy-ultra-light"][class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]),
  button[class*="hover:bg-navy-ultra-light"][class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]) *,
  button[class*="hover:bg-gold-50"][class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]),
  button[class*="hover:bg-gold-50"][class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]) *,
  /* CRITICAL: Specifically target action-icon-btn with gold hover - highest specificity */
  .action-icon-btn[class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]),
  .action-icon-btn[class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]) *,
  button.action-icon-btn[class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]),
  button.action-icon-btn[class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]) *,
  button[class*="action-icon-btn"][class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]),
  button[class*="action-icon-btn"][class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]) *,
  .action-icon-btn[class*="hover:bg-navy-ultra-light"][class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]),
  .action-icon-btn[class*="hover:bg-navy-ultra-light"][class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]) *,
  button.action-icon-btn[class*="hover:bg-navy-ultra-light"][class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]),
  button.action-icon-btn[class*="hover:bg-navy-ultra-light"][class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]) *,
  button[class*="action-icon-btn"][class*="hover:bg-navy-ultra-light"][class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]),
  button[class*="action-icon-btn"][class*="hover:bg-navy-ultra-light"][class*="hover:text-gold-primary"]:hover:not(:disabled):not([disabled]):not([class*="opacity-50"]) * {
    color: var(--gold-primary) !important;
  }

/* Ensure icons inside buttons with hover:text-gold-primary also turn gold */

/* CRITICAL: Outline icons (from Heroicons) use stroke only, not fill */

/* CRITICAL: Specifically target action-icon-btn icons with gold hover - highest specificity */

.action-icon-btn[class*="hover:text-gold-primary"]:hover:not(:disabled):not(
      [disabled]
    ):not([class*="opacity-50"])
    svg,
  .action-icon-btn[class*="hover:text-gold-primary"]:hover:not(:disabled):not(
      [disabled]
    ):not([class*="opacity-50"])
    path,
  button.action-icon-btn[class*="hover:text-gold-primary"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"])
    svg,
  button.action-icon-btn[class*="hover:text-gold-primary"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"])
    path,
  button[class*="action-icon-btn"][class*="hover:text-gold-primary"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"])
    svg,
  button[class*="action-icon-btn"][class*="hover:text-gold-primary"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"])
    path,
  .action-icon-btn[class*="hover:bg-navy-ultra-light"][class*="hover:text-gold-primary"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"])
    svg,
  .action-icon-btn[class*="hover:bg-navy-ultra-light"][class*="hover:text-gold-primary"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"])
    path,
  button.action-icon-btn[class*="hover:bg-navy-ultra-light"][class*="hover:text-gold-primary"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"])
    svg,
  button.action-icon-btn[class*="hover:bg-navy-ultra-light"][class*="hover:text-gold-primary"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"])
    path,
  button[class*="action-icon-btn"][class*="hover:bg-navy-ultra-light"][class*="hover:text-gold-primary"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"])
    svg,
  button[class*="action-icon-btn"][class*="hover:bg-navy-ultra-light"][class*="hover:text-gold-primary"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"])
    path {
    color: var(--gold-primary) !important;
    fill: none !important;
    stroke: var(--gold-primary) !important;
    stroke-width: 2 !important;
  }

button[class*="hover:text-gold-primary"]:hover svg,
  button[class*="hover:text-gold-primary"]:hover svg *,
  button[class*="hover:text-gold-primary"]:hover path {
    color: var(--gold-primary) !important;
    stroke: var(--gold-primary) !important;
    fill: none !important;
    stroke-width: 2 !important;
  }

/* Ensure text stays navy on red-50 background (for report death badge) - highest specificity */

div[class~="bg-red-50"][class*="text-navy"],
  div[class~="bg-red-50"][class*="text-navy-primary"],
  div[class~="bg-red-50"][class*="text-navy"] *,
  div[class~="bg-red-50"][class*="text-navy-primary"] *,
  button div[class~="bg-red-50"][class*="text-navy"],
  button div[class~="bg-red-50"][class*="text-navy-primary"],
  button div[class~="bg-red-50"][class*="text-navy"] *,
  button div[class~="bg-red-50"][class*="text-navy-primary"] *,
  button[class~="hover:bg-red-50"] div[class~="bg-red-50"][class*="text-navy"],
  button[class~="hover:bg-red-50"]
    div[class~="bg-red-50"][class*="text-navy-primary"],
  button[class~="hover:bg-red-50"]
    div[class~="bg-red-50"][class*="text-navy"]
    *,
  button[class~="hover:bg-red-50"]
    div[class~="bg-red-50"][class*="text-navy-primary"]
    *,
  button[class~="hover:bg-red-50"]:hover
    div[class~="bg-red-50"][class*="text-navy"],
  button[class~="hover:bg-red-50"]:hover
    div[class~="bg-red-50"][class*="text-navy-primary"],
  button[class~="hover:bg-red-50"]:hover
    div[class~="bg-red-50"][class*="text-navy"]
    *,
  button[class~="hover:bg-red-50"]:hover
    div[class~="bg-red-50"][class*="text-navy-primary"]
    * {
    color: var(--navy-primary) !important;
  }

/* Ensure all text with text-navy-primary stays navy in buttons with hover:bg-red-50 */

/* But exclude btn-icon buttons which should have white icons on navy background */

button[class~="hover:bg-red-50"]:not(.btn-icon):not([class*="btn-icon"])
    div[class*="text-navy-primary"],
  button[class~="hover:bg-red-50"]:not(.btn-icon):not([class*="btn-icon"])
    div[class*="text-navy-primary"]
    *,
  button[class~="hover:bg-red-50"]:not(.btn-icon):not([class*="btn-icon"]):hover
    div[class*="text-navy-primary"],
  button[class~="hover:bg-red-50"]:not(.btn-icon):not([class*="btn-icon"]):hover
    div[class*="text-navy-primary"]
    * {
    color: var(--navy-primary) !important;
  }

/* Ensure btn-icon buttons with navy/primary background keep white icons */

button.btn-icon[class*="bg-navy"],
  button.btn-icon[class*="bg-primary"],
  button.btn-icon.btn-primary,
  button[class*="btn-icon"][class*="bg-navy"],
  button[class*="btn-icon"][class*="bg-primary"],
  button[class*="btn-icon"].btn-primary,
  button.btn-icon[class*="bg-navy"] *,
  button.btn-icon[class*="bg-primary"] *,
  button.btn-icon.btn-primary *,
  button[class*="btn-icon"][class*="bg-navy"] *,
  button[class*="btn-icon"][class*="bg-primary"] *,
  button[class*="btn-icon"].btn-primary *,
  button.btn-icon[class*="bg-navy"]:hover,
  button.btn-icon[class*="bg-primary"]:hover,
  button.btn-icon.btn-primary:hover,
  button[class*="btn-icon"][class*="bg-navy"]:hover,
  button[class*="btn-icon"][class*="bg-primary"]:hover,
  button[class*="btn-icon"].btn-primary:hover,
  button.btn-icon[class*="bg-navy"]:hover *,
  button.btn-icon[class*="bg-primary"]:hover *,
  button.btn-icon.btn-primary:hover *,
  button[class*="btn-icon"][class*="bg-navy"]:hover *,
  button[class*="btn-icon"][class*="bg-primary"]:hover *,
  button[class*="btn-icon"].btn-primary:hover * {
    color: #ffffff !important;
  }

/* Keep red badge text white on red background - only for badges/buttons with bg-error (dark red), NOT bg-error-light */

div[class*="bg-error"]:not([class*="bg-error-light"]):not(button):not(a),
  span[class*="bg-error"]:not([class*="bg-error-light"]):not(button):not(a),
  p[class*="bg-error"]:not([class*="bg-error-light"]):not(button):not(a),
  div[class*="bg-error"]:not([class*="bg-error-light"])[class*="text-white"],
  span[class*="bg-error"]:not([class*="bg-error-light"])[class*="text-white"],
  p[class*="bg-error"]:not([class*="bg-error-light"])[class*="text-white"] {
    color: #ffffff !important;
  }

div[class*="bg-error"]:not([class*="bg-error-light"]):not(button):not(a) *,
  span[class*="bg-error"]:not([class*="bg-error-light"]):not(button):not(a) *,
  p[class*="bg-error"]:not([class*="bg-error-light"]):not(button):not(a) *,
  div[class*="bg-error"]:not([class*="bg-error-light"])[class*="text-white"] *,
  span[class*="bg-error"]:not([class*="bg-error-light"])[class*="text-white"] *,
  p[class*="bg-error"]:not([class*="bg-error-light"])[class*="text-white"] * {
    color: #ffffff !important;
  }

/* CRITICAL: Ensure bg-error-light (light red background) has dark text for readability */

/* This must override any other rules - highest specificity */

div[class*="bg-error-light"],
  span[class*="bg-error-light"],
  p[class*="bg-error-light"],
  [class*="bg-error-light"],
  div[class*="bg-error-light"] *,
  span[class*="bg-error-light"] *,
  p[class*="bg-error-light"] *,
  [class*="bg-error-light"] *,
  [class*="bg-error-light"][class*="text-error"],
  [class*="bg-error-light"][class*="text-error"] *,
  div[class*="bg-error-light"][class*="text-error"],
  span[class*="bg-error-light"][class*="text-error"],
  p[class*="bg-error-light"][class*="text-error"] {
    color: var(--error) !important;
    /* Dark red text on light red background for readability */
  }

/* Override for red badge when parent button hovers to light background */

button[class~="hover:bg-red-50"]:hover div[class*="bg-error"],
  button[class~="hover:bg-red-50"]:hover span[class*="bg-error"],
  button[class~="hover:bg-red-50"]:hover p[class*="bg-error"],
  button[class~="hover:bg-red-50"]:hover div[class*="bg-error"] *,
  button[class~="hover:bg-red-50"]:hover span[class*="bg-error"] *,
  button[class~="hover:bg-red-50"]:hover p[class*="bg-error"] * {
    color: #ffffff !important;
    background-color: #dc2626 !important;
  }

/* Ensure text-white on bg-error is always white (but NOT on bg-error-light) */

[class*="bg-error"]:not([class*="bg-error-light"])[class*="text-white"],
  [class*="bg-error"]:not([class*="bg-error-light"])[class*="text-white"] * {
    color: #ffffff !important;
  }

/* Specific class for red badge text - cannot be overridden - highest specificity */

.red-badge-text,
  button .red-badge-text,
  button[class~="hover:bg-red-50"] .red-badge-text,
  button[class*="text-navy"] .red-badge-text,
  button[class*="text-navy-primary"] .red-badge-text {
    color: #ffffff !important;
    background-color: #dc2626 !important;
  }

.red-badge-text *,
  button .red-badge-text *,
  button[class~="hover:bg-red-50"] .red-badge-text *,
  button[class*="text-navy"] .red-badge-text *,
  button[class*="text-navy-primary"] .red-badge-text * {
    color: #ffffff !important;
  }

/* Ensure red badge text stays white even on hover - highest specificity */

button:hover .red-badge-text,
  button:hover .red-badge-text *,
  button[class~="hover:bg-red-50"]:hover .red-badge-text,
  button[class~="hover:bg-red-50"]:hover .red-badge-text *,
  button[class*="text-navy"]:hover .red-badge-text,
  button[class*="text-navy"]:hover .red-badge-text *,
  button[class*="text-navy-primary"]:hover .red-badge-text,
  button[class*="text-navy-primary"]:hover .red-badge-text *,
  .red-badge-text:hover,
  .red-badge-text:hover * {
    color: #ffffff !important;
    background-color: #dc2626 !important;
  }

/* Override for red badge when parent button hovers to light background - ensure badge stays red */

button[class~="hover:bg-red-50"]:hover .red-badge-text,
  button[class~="hover:bg-red-50"]:hover .red-badge-text * {
    color: #ffffff !important;
    background-color: #dc2626 !important;
  }

/* Override Tailwind hover states for navy buttons */

/* Fix admin action buttons */

.bg-green-600:hover {
    background-color: #16a34a !important;
    /* darker green */
  }

.bg-red-600:hover {
    background-color: #dc2626 !important;
    /* darker red */
  }

.bg-gray-500:hover {
    background-color: #6b7280 !important;
    /* darker gray */
  }

/* Form input consistency */

.form-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    border-color: var(--gray-300);
  }

.form-input:focus,
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="tel"]:focus,
  input[type="number"]:focus,
  textarea:focus,
  select:focus {
    border-color: var(--gold-primary);
    --tw-ring-color: var(--gold-primary);
  }

/* ====================================================================
     COMPREHENSIVE COLOR UTILITY SYSTEM - Single Source of Truth
     ====================================================================
     
     USAGE GUIDELINES:
     -----------------
     1. ALWAYS use semantic classes for text (text-primary, text-secondary, etc.)
     2. Use gray-scale classes (text-gray-600, text-gray-700) when semantic doesn't fit
     3. Brand colors (navy/gold) should be used sparingly for emphasis
     4. All classes use !important to override Tailwind defaults
     5. This is the ONLY place to define color utilities
     
     TEXT HIERARCHY:
     ---------------
     - text-primary   (gray-900) - Most important text, labels, form inputs
     - text-secondary (gray-700) - Body copy, descriptions
     - text-tertiary  (gray-600) - Helper text, captions, less important info
     - text-muted     (gray-500) - Placeholders, disabled text
     - text-heading   (navy-primary) - All headings (h1-h6)
     - text-link      (gold-primary) - Links and clickable text
     - text-inverse   (white) - Text on dark backgrounds
     
     FORMS:
     ------
     - Form labels: text-primary (dark, readable)
     - Form inputs: text-primary with text-muted placeholders
     - Helper text: text-tertiary
     - Error text: text-error
     - Success text: text-success
     
     ==================================================================== */

/* Semantic Text Colors - Use these for consistency */

.text-primary {
    color: var(--text-primary) !important;
  }

.text-secondary {
    color: var(--text-secondary) !important;
  }

.text-tertiary {
    color: var(--text-tertiary) !important;
  }

.text-muted {
    color: var(--text-muted) !important;
  }

.text-heading {
    color: var(--text-heading) !important;
  }

.text-link {
    color: var(--text-link) !important;
  }

/* Gray Scale Text - Complete Set */

.text-gray-300 {
    color: var(--gray-300) !important;
  }

.text-gray-400 {
    color: var(--gray-400) !important;
  }

.text-gray-500 {
    color: var(--gray-500) !important;
  }

.text-gray-600 {
    color: var(--gray-600) !important;
  }

.text-gray-700 {
    color: var(--gray-700) !important;
  }

.text-gray-800 {
    color: var(--gray-800) !important;
  }

.text-gray-900 {
    color: var(--gray-900) !important;
  }

/* Brand Colors - Navy (.text-navy-primary defined once, earlier) */

.text-navy-dark {
    color: var(--navy-dark) !important;
  }

.text-navy-light {
    color: var(--navy-light) !important;
  }

/* Use semantic color for better visibility */

.text-navy-600 {
    color: var(--navy-600) !important;
  }

/* Brand Colors - Gold */

.text-gold-primary {
    color: var(--gold-primary) !important;
  }

.text-gold-dark {
    color: var(--gold-dark) !important;
  }

.text-gold-light {
    color: var(--gold-light) !important;
  }

/* Status Colors */

.text-success {
    color: var(--success) !important;
  }

.text-error {
    color: var(--error) !important;
  }

.text-warning {
    color: var(--warning) !important;
  }

/* White Text */

.\!text-white {
    color: var(--white-pure) !important;
  }

.text-white {
    color: var(--white-pure) !important;
  }

/* ====================================================================
     COMPREHENSIVE BACKGROUND COLOR UTILITY CLASSES
     ==================================================================== */

/* Navy Backgrounds */

.bg-navy-primary {
    background-color: var(--navy-primary) !important;
  }

.bg-navy-ultra-light {
    background-color: var(--navy-ultra-light) !important;
  }

/* Gold Backgrounds */

.bg-gold-primary {
    background-color: var(--gold-primary) !important;
  }

.bg-gold-light {
    background-color: var(--gold-light) !important;
  }

.bg-gold-ultra-light {
    background-color: var(--gold-ultra-light) !important;
  }

/* Gray Backgrounds */

.bg-gray-50 {
    background-color: var(--gray-50) !important;
  }

.bg-gray-100 {
    background-color: var(--gray-100) !important;
  }

.bg-gray-200 {
    background-color: var(--gray-200) !important;
  }

.bg-gray-300 {
    background-color: var(--gray-300) !important;
  }

/* White Backgrounds */

.bg-white {
    background-color: var(--white-pure) !important;
  }

/* Status Backgrounds */

.bg-success-light {
    background-color: var(--success-light) !important;
  }

.bg-error-light {
    background-color: var(--error-light) !important;
  }

.bg-warning-light {
    background-color: var(--warning-light) !important;
  }

/* ====================================================================
     COMPREHENSIVE BORDER COLOR UTILITY CLASSES
     ==================================================================== */

/* Semantic Borders */

.border-primary {
    border-color: var(--border-primary) !important;
  }

.border-secondary {
    border-color: var(--border-secondary) !important;
  }

.border-error {
    border-color: var(--border-error) !important;
  }

.border-success {
    border-color: var(--border-success) !important;
  }

/* Gray Borders */

.border-gray-200 {
    border-color: var(--gray-200) !important;
  }

.border-gray-300 {
    border-color: var(--gray-300) !important;
  }

.border-gray-400 {
    border-color: var(--gray-400) !important;
  }

/* Brand Borders */

.border-navy-primary {
    border-color: var(--navy-primary) !important;
  }

.border-t-navy-primary {
    border-top-color: var(--navy-primary) !important;
  }

/* Loading spinner animation override - highest specificity */

.border-navy-light {
    border-color: var(--navy-light) !important;
  }

.border-navy-ultra-light {
    border-color: var(--navy-ultra-light) !important;
  }

.border-gold-primary {
    border-color: var(--gold-primary) !important;
  }

/* Golden gradient borders for premium cards */

.border-gold-gradient {
    position: relative;
    border: 2px solid transparent;
  }

.border-gold-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-primary));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

.border-gold-gradient-subtle {
    position: relative;
    border: 1px solid transparent;
  }

.border-gold-gradient-subtle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, #fefef8, #fefbf5);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

/* ====================================================================
     TEXT SIZE UTILITIES WITH PROPER COLORS
     ==================================================================== */

/* (removed) .text-xs override — its bare utility selector collided with
     Tailwind arbitrary-variant twins and was a no-op in the built bundle. */

/* Small Text */

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-secondary);
  }

/* Base Text */

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--text-secondary);
  }

/* Large Text */

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--text-secondary);
  }

/* ====================================================================
     COMPONENT-SPECIFIC UTILITIES
     ==================================================================== */

/* Card Text */

/* Button Text - Ensure white text on dark buttons */

/* List Item Text */

/* Badge/Tag Text */

/* ====================================================================
     OVERRIDE PROTECTION - Prevent Tailwind from overriding our colors
     ==================================================================== */

/* Ensure text colors in common Tailwind combinations stay visible */

.text-sm.text-gray-500,
  .text-sm.text-gray-600 {
    color: var(--text-tertiary) !important;
  }

.text-sm.text-gray-700,
  .text-base.text-gray-700 {
    color: var(--text-secondary) !important;
  }

.text-sm.text-gray-900,
  .text-base.text-gray-900 {
    color: var(--text-primary) !important;
  }

/* CRITICAL: Mobile Navigation Menu - Comprehensive Fix */

/* Ensure mobile menu container has proper positioning and z-index */

#mobile-navigation {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    z-index: calc(var(--z-sticky) + 1) !important;
    background: white !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    border-top: 1px solid rgba(3, 23, 116, 0.1) !important;
    animation: slideDown 0.3s ease-out forwards !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

/* Ensure mobile menu inner content doesn't overflow */

#mobile-navigation > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

@keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

/* ============================================
   * CRITICAL: NAVBAR STICKY POSITIONING
   * ============================================
   * This is the SINGLE source of truth for navbar sticky positioning
   * Must come AFTER all overflow rules to ensure highest priority
   * ============================================ */

/* Target Tailwind's .sticky class and all nav combinations */

nav.sticky,
  nav[class*="sticky"],
  nav[class*="bg-white"][class*="sticky"],
  nav[class*="backdrop-blur"][class*="sticky"],
  nav[class*="bg-white/95"][class*="sticky"],
  nav[class*="bg-white/95"] {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: var(--z-sticky) !important;
    will-change: transform !important;
    transform: none !important;
  }

/* Target navbar in ALL possible parent structures */

main nav[class*="sticky"],
  main > nav[class*="sticky"],
  main nav.sticky,
  main > nav.sticky,
  main > div nav[class*="sticky"],
  main > div > nav[class*="sticky"],
  main > div nav.sticky,
  main > div > nav.sticky,
  div nav[class*="sticky"],
  div > nav[class*="sticky"],
  div nav.sticky,
  div > nav.sticky,
  div[class*="min-h-screen"] nav[class*="sticky"],
  div[class*="min-h-screen"] > nav[class*="sticky"],
  div[class*="min-h-screen"] nav.sticky,
  div[class*="min-h-screen"] > nav.sticky,
  div[class*="no-tailwind-fonts"] nav[class*="sticky"],
  div[class*="no-tailwind-fonts"] > nav[class*="sticky"],
  div[class*="no-tailwind-fonts"] nav.sticky,
  div[class*="no-tailwind-fonts"] > nav.sticky,
  #root nav[class*="sticky"],
  #root > nav[class*="sticky"],
  #root nav.sticky,
  #root > nav.sticky,
  #root > div nav[class*="sticky"],
  #root > div > nav[class*="sticky"],
  #root > div nav.sticky,
  #root > div > nav.sticky,
  #root > div > main nav[class*="sticky"],
  #root > div > main > nav[class*="sticky"],
  #root > div > main nav.sticky,
  #root > div > main > nav.sticky,
  body nav[class*="sticky"],
  body > nav[class*="sticky"],
  body nav.sticky,
  body > nav.sticky {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: var(--z-sticky) !important;
    will-change: transform !important;
    transform: none !important;
  }

/* Ensure parent containers don't prevent sticky - Target all possible parent structures */

body > nav,
  #root > nav,
  html > body > nav,
  body > div > nav,
  #root > div > nav,
  main > nav,
  main nav,
  div > nav[class*="sticky"],
  div nav[class*="sticky"] {
    position: sticky !important;
    top: 0 !important;
  }

/* ============================================
   * CRITICAL: PARENT CONTAINERS FOR STICKY
   * ============================================
   * All parent containers MUST allow overflow-y: visible
   * for sticky positioning to work
   * ============================================ */

/* CRITICAL: main must allow sticky children to work */

main {
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* NEVER set overflow-y: hidden or overflow: hidden as it breaks sticky */
  }

/* All wrapper divs must allow overflow-y */

main > div,
  div[class*="min-h-screen"],
  div[class*="min-h-screen"][class*="bg-gradient"],
  div[class*="bg-gradient-navy-subtle"],
  div[class*="no-tailwind-fonts"],
  #root > div[class*="min-h-screen"],
  #root > div {
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* NEVER set overflow-y: hidden or overflow: hidden as it breaks sticky */
  }

/* CRITICAL: Root elements must allow overflow-y for sticky */

body,
  html {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* NEVER set overflow-y: hidden or overflow: hidden as it breaks sticky */
    position: relative !important;
  }

#root {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* NEVER set overflow-y: hidden or overflow: hidden as it breaks sticky */
    position: relative !important;
    min-height: 100vh !important;
  }

/* Ensure wrapper divs don't break sticky */

body > #root,
  #root > div:not([class*="overflow-hidden"]) {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    position: relative !important;
  }

/* Mobile Navigation - Fix for white background mobile menu */

@media (max-width: 1023px) {
    /* Navbar container should allow mobile menu to display properly */
    nav[class*="sticky"] > div {
      position: relative !important;
      overflow: visible !important;
    }

    /* Force mobile nav colors with maximum specificity */
    #mobile-navigation .nav-item-active,
    .lg\\:hidden + div .nav-item-active {
      background-color: var(--navy-primary) !important;
      color: white !important;
      border: 1px solid var(--navy-dark) !important;
      box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    }

    #mobile-navigation .nav-item-inactive,
    .lg\\:hidden + div .nav-item-inactive {
      background-color: transparent !important;
      color: var(--navy-primary) !important;
      border: 1px solid transparent !important;
    }

    #mobile-navigation .nav-item-active,
    #mobile-navigation .nav-item-inactive,
    .lg\\:hidden + div .nav-item-active,
    .lg\\:hidden + div .nav-item-inactive {
      border-radius: var(--radius-none) !important;
    }

    #mobile-navigation .nav-item-inactive:hover,
    .lg\\:hidden + div .nav-item-inactive:hover {
      background-color: var(--navy-primary) !important;
      color: white !important;
    }

    /* Force text and icon colors inside mobile nav items - Override global navy-muted */
    #mobile-navigation .nav-item-active span,
    #mobile-navigation .nav-item-active svg,
    #mobile-navigation .nav-item-active div,
    #mobile-navigation .nav-item-active p,
    .lg\\:hidden + div .nav-item-active span,
    .lg\\:hidden + div .nav-item-active svg,
    .lg\\:hidden + div .nav-item-active div,
    .lg\\:hidden + div .nav-item-active p {
      color: white !important;
    }

    #mobile-navigation .nav-item-inactive span,
    #mobile-navigation .nav-item-inactive svg,
    #mobile-navigation .nav-item-inactive div,
    #mobile-navigation .nav-item-inactive p,
    .lg\\:hidden + div .nav-item-inactive span,
    .lg\\:hidden + div .nav-item-inactive svg,
    .lg\\:hidden + div .nav-item-inactive div,
    .lg\\:hidden + div .nav-item-inactive p {
      color: var(--navy-primary) !important;
    }

    #mobile-navigation .nav-item-inactive:hover span,
    #mobile-navigation .nav-item-inactive:hover svg,
    #mobile-navigation .nav-item-inactive:hover div,
    #mobile-navigation .nav-item-inactive:hover p,
    .lg\\:hidden + div .nav-item-inactive:hover span,
    .lg\\:hidden + div .nav-item-inactive:hover svg,
    .lg\\:hidden + div .nav-item-inactive:hover div,
    .lg\\:hidden + div .nav-item-inactive:hover p {
      color: white !important;
    }

    /* Override global navy-muted color specifically in mobile navigation */
    #mobile-navigation .nav-item-active *,
    .lg\\:hidden + div .nav-item-active * {
      color: white !important;
    }

    /* CRITICAL: Mobile menu navigation icons - ensure proper fill/stroke for outline icons */
    #mobile-navigation svg,
    #mobile-navigation path,
    .lg\\:hidden + div svg,
    .lg\\:hidden + div path {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 2 !important;
    }

    /* Ensure mobile menu links are properly styled */
    #mobile-navigation a,
    #mobile-navigation button {
      display: flex !important;
      align-items: center !important;
      width: 100% !important;
      text-decoration: none !important;
      transition: all 0.2s ease !important;
    }

    /* Ensure mobile menu button (Start Planning) is properly styled */
    #mobile-navigation .btn-primary,
    #mobile-navigation button[class*="btn-primary"] {
      width: 100% !important;
      justify-content: center !important;
      margin: 0 !important;
    }
  }

/* Button Text Color Fix - Only for navy/dark background buttons */

.btn-primary,
  .btn-primary *,
  .btn-secondary,
  .btn-secondary *,
  .bg-navy-primary,
  .bg-navy-primary *,
  .bg-navy-dark,
  .bg-navy-dark *,
  .bg-gold-primary,
  .bg-gold-primary *,
  button.bg-navy-primary,
  button.bg-navy-primary *,
  button.bg-navy-dark,
  button.bg-navy-dark *,
  button.bg-gold-primary,
  button.bg-gold-primary *,
  .hover\\:bg-navy-primary:hover,
  .hover\\:bg-navy-primary:hover *,
  .hover\\:bg-navy-dark:hover,
  .hover\\:bg-navy-dark:hover *,
  .hover\\:bg-gold-primary:hover,
  .hover\\:bg-gold-primary:hover *,
  /* Additional specific selectors for comprehensive coverage */
  .sidebar-menu-item:hover,
  .sidebar-menu-item:active,
  .nav-item-active,
  .nav-item-active *,
  .bg-gradient-to-r.from-navy-dark,
  .bg-gradient-to-r.from-navy-dark * {
    color: white !important;
  }

/* Specific fix for loading states in navy/gold buttons only */

.btn-primary span,
  .btn-secondary span,
  .bg-navy-primary span,
  .bg-navy-dark span,
  .bg-gold-primary span {
    color: white !important;
  }

/* Specific fix for OTP and form submission text in navy/gold buttons */

.btn-primary button[type="submit"] span,
  .btn-primary button[type="submit"] div,
  .btn-primary button[type="submit"] p,
  .bg-navy-primary button[type="submit"] *,
  .bg-navy-dark button[type="submit"] *,
  .bg-gold-primary button[type="submit"] *,
  button[type="submit"].btn-primary span,
  button[type="submit"].btn-primary div,
  button[type="submit"].btn-primary p {
    color: white !important;
  }

/* Fix for loading state text in navy/gold buttons only */

.btn-primary:disabled span,
  .btn-primary:disabled div,
  .btn-primary:disabled p,
  .btn-secondary:disabled span,
  .btn-secondary:disabled div,
  .btn-secondary:disabled p,
  .btn-danger:disabled span,
  .btn-danger:disabled div,
  .btn-danger:disabled p,
  .bg-navy-primary:disabled span,
  .bg-navy-dark:disabled span,
  .bg-gold-primary:disabled span {
    color: white !important;
  }

/* Force white text for button content during loading states in navy/gold buttons */

.btn-primary .animate-spin + span,
  .btn-primary .animate-spin ~ span,
  .btn-primary .border-t-transparent + span,
  .btn-primary .border-t-transparent ~ span,
  .bg-navy-primary .animate-spin + span,
  .bg-navy-dark .animate-spin + span,
  .bg-gold-primary .animate-spin + span {
    color: white !important;
  }

/* Additional safeguard for text in primary buttons only */

/* Red Button Text Fix - Keep white text for red buttons */

.bg-red-500 span,
  .bg-red-500 div,
  .bg-red-500 p,
  .bg-red-500 *,
  .bg-red-600 span,
  .bg-red-600 div,
  .bg-red-600 p,
  .bg-red-600 *,
  button.bg-red-500,
  button.bg-red-500 *,
  button.bg-red-600,
  button.bg-red-600 *,
  .hover\\:bg-red-500:hover span,
  .hover\\:bg-red-500:hover div,
  .hover\\:bg-red-500:hover p,
  .hover\\:bg-red-500:hover *,
  .hover\\:bg-red-600:hover span,
  .hover\\:bg-red-600:hover div,
  .hover\\:bg-red-600:hover p,
  .hover\\:bg-red-600:hover * {
    color: white !important;
  }

/* Preserve original text colors for buttons that should not be white */

/* Note: Buttons without background colors should use semantic text colors */

/* Loading Button Text Fix - Force white text for spans in loading states */

button.bg-blue-600 span,
  button.bg-blue-600 div,
  button.bg-blue-600 p,
  button.bg-blue-700 span,
  button.bg-blue-700 div,
  button.bg-blue-700 p {
    color: white !important;
  }

/* Wish Category Selection Fix - Ensure pointer events work properly */

.wish-category-label {
    pointer-events: auto !important;
    cursor: pointer !important;
  }

.wish-category-input {
    pointer-events: auto !important;
  }

/* Sidebar Navigation - Removed Duplicates (Using New System Above) */

/* Z-Index Management - Production Ready */

.z-sticky {
    z-index: 1020;
  }

.z-modal-backdrop {
    z-index: 1040;
    position: fixed;
  }

.z-modal {
    z-index: 1050;
  }

/* ============================================
   * SECTION LAYER SYSTEM - Production Ready
   * ============================================
   * Standardized z-index for section backgrounds,
   * overlays, decorations, and content
   * ============================================ */

/* Section background layer (videos, images) */

section
    [class*="absolute"][class*="inset-0"]:not([class*="z-"]):not(
      [class*="overlay"]
    ):not([class*="decoration"]) {
    z-index: var(--z-section-background) !important;
  }

/* Section overlay layer (dark overlays for text contrast) */

section [class*="absolute"][class*="inset-0"][class*="bg-black"],
  section [class*="absolute"][class*="inset-0"][class*="overlay"],
  section .section-overlay {
    z-index: var(--z-section-overlay) !important;
    background-color: rgba(31, 31, 31, 0.40) !important;
  }

/* Section decoration layer (floating elements, gradients) */

section [class*="absolute"][class*="floating"],
  section [class*="absolute"][class*="decoration"],
  section [class*="absolute"][class*="bg-gradient"][class*="rounded-full"],
  section [class*="absolute"][class*="opacity"][class*="rounded-full"] {
    z-index: var(--z-section-decoration) !important;
  }

/* Section content layer (text, buttons, cards) */

section [class*="relative"][class*="z-"],
  section .container[class*="relative"],
  section [class*="relative"][class*="container"] {
    z-index: var(--z-section-content) !important;
  }


  section .\!container[class*="relative"] {
    z-index: var(--z-section-content) !important;
  }

/* Ensure proper stacking context for sections */

section {
    position: relative !important;
    isolation: isolate !important;
  }

/* Tutorial Overlay Positioning */

/* Tutorial overlay responsiveness for all screen sizes */

/* Extra small screens: Stack buttons vertically */

@media (max-width: 475px) {
    .tutorial-overlay-backdrop {
      left: 0;
    }

    .fixed.z-tutorial-overlay {
      margin-left: 0;
      max-width: calc(100vw - 1rem);
      left: 50%;
      transform: translateX(-50%);
      top: 20px !important;
      bottom: 20px !important;
      max-height: calc(100vh - 40px);
      overflow-y: auto;
    }
  }

/* Mobile: Sidebar is overlay, tutorial appears on full screen */

@media (min-width: 476px) and (max-width: 767px) {
    .tutorial-overlay-backdrop {
      left: 0;
    }

    .fixed.z-tutorial-overlay {
      margin-left: 0;
      max-width: calc(100vw - 2rem);
      left: 50%;
      transform: translateX(-50%);
    }
  }

/* Tablet: Account for potentially open sidebar */

@media (min-width: 768px) and (max-width: 1023px) {
    .tutorial-overlay-backdrop.sidebar-open {
      left: 320px;
      /* Sidebar width when open */
    }

    .tutorial-overlay-backdrop.sidebar-closed {
      left: 0;
      /* No sidebar when closed */
    }

    .fixed.z-tutorial-overlay.sidebar-open {
      margin-left: 320px;
      /* Account for sidebar */
      max-width: calc(100vw - 320px);
    }

    .fixed.z-tutorial-overlay.sidebar-closed {
      margin-left: 0;
      max-width: calc(100vw - 2rem);
    }
  }

/* Desktop: Sidebar always visible */

@media (min-width: 1024px) {
    .tutorial-overlay-backdrop {
      left: 320px;
      /* Sidebar width */
    }

    /* Ensure tutorial card appears above sidebar */
    .fixed.z-tutorial-overlay {
      margin-left: 320px;
      /* Account for sidebar width */
      max-width: calc(100vw - 320px);
      /* Prevent overflow */
    }
  }

.z-sidebar {
    z-index: 1050 !important;
  }

.z-tooltip {
    z-index: 1070;
  }

.z-toast {
    z-index: 1080;
  }

/* Notification Panel */

.notification-panel {
    position: absolute;
    top: 100%;
    right: -0.5rem;
    margin-top: 0.5rem;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
    z-index: 1090;
    overflow: hidden;
    animation: notifSlideDown 0.2s ease-out;
  }

@keyframes notifSlideDown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

@media (max-width: 640px) {
    .notification-panel {
      position: fixed;
      top: 3.5rem;
      left: 0.5rem;
      right: 0.5rem;
      width: auto;
      max-width: none;
      border-radius: 0.75rem;
      max-height: calc(100vh - 5rem);
    }
  }

@keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-0.5rem);
    }

    to {
      opacity: 1;
      transform: translateY(0.5rem);
    }
  }

/* Search Dropdown */

.search-dropdown[class*="rounded"] {
    border: 1px solid var(--navy-ultra-light);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-2xl);
    overflow: visible;
    position: relative;
    /* Prevent border truncation - add minimal margin for borders */
    box-sizing: border-box;
  }

.search-dropdown[class*="rounded"]:not([class*="max-w-"]) {
    max-width: 100%;
    overflow-x: visible;
    word-wrap: break-word;
    box-sizing: border-box;
  }

@media (max-width: 640px) {
    .search-dropdown[class*="p-8"] {
      padding: 1rem;
    }

    .search-dropdown[class*="p-6"] {
      padding: 1rem;
    }

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
    .search-dropdown[class*="p-8"] {
      padding: 1rem;
    }

    .search-dropdown[class*="p-6"] {
      padding: 1rem;
    }

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
  }

@media (min-width: 641px) and (max-width: 1024px) {
    /* Tablet adjustments */
    .search-dropdown[class*="p-8"] {
      padding: 1.5rem;
    }

    /* Button groups stay in single row on tablet */

    /* Stats cards in 2 columns on tablet */
  }

.search-dropdown {
    background-color: var(--white-pure);
    border-color: var(--navy-light);
  }

.search-dropdown .hover\\:text-white:hover,.search-dropdown button:hover[class*="hover:text-white"],.search-dropdown a:hover[class*="hover:text-white"] {
    color: var(--navy-primary);
  }


  button[role="switch"] > span.search-dropdown,
  button[role="switch"] > span[class*="inline-block"].search-dropdown {
    display: inline-block;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: transparent;
  }

button.search-dropdown,
  a.app-btn.search-dropdown,
  .btn.search-dropdown {
    /* Force all buttons to use rounded-xl */
    /* Force all buttons to use rounded-xl */
    border-radius: var(--radius-xl);
    /* Force all buttons to use rounded-xl */
  }

.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0px;
  right: 0px;
  margin-top: 0.5rem;
  border-radius: var(--radius-2xl);
  border-width: 1px;
  border-color: var(--navy-light);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.high-contrast .search-dropdown {
  background-color: #ffffff;
  color: #000000;
}

@media (prefers-contrast: high) {
  .search-dropdown {
    background-color: #ffffff;
    color: #000000;
  }
}

@media (forced-colors: active) {
  .search-dropdown {
    background-color: Canvas;
    color: CanvasText;
  }
  .search-dropdown * {
    color: CanvasText;
  }
}

.search-dropdown {
    z-index: 1000;
    max-height: 20rem;
    overflow-y: auto;
    pointer-events: auto;
  }

.search-dropdown .p-2 {
    background: white;
  }

.search-dropdown a {
    color: var(--navy-primary);
  }

.search-dropdown a:hover {
    background-color: var(--navy-ultra-light);
    color: var(--navy-primary);
  }

.search-dropdown a p {
    color: var(--navy-primary);
  }

.search-dropdown a p.text-sm {
    color: var(--navy-dark);
  }

/* Button System - Production Ready */

/* Header Icon Sizes - Force larger icons */

/* btn-icon inherits text color - CRITICAL: Outline icons need fill: none and stroke-width */

/* CRITICAL: Ensure btn-icon with text-white has white icons (sidebar close button) */

.btn-icon.\!text-white svg,
  .btn-icon.\!text-white path,
  .btn-icon.\!text-white:hover svg,
  .btn-icon.\!text-white:hover path,
  .btn-icon.\!text-white:focus svg,
  .btn-icon.\!text-white:focus path,
  .btn-icon.\!text-white:active svg,
  .btn-icon.\!text-white:active path {
    color: white !important;
    fill: none !important;
    stroke: white !important;
    stroke-width: 2 !important;
  }

.btn-icon.text-white svg,
  .btn-icon.text-white path,
  .btn-icon.text-white:hover svg,
  .btn-icon.text-white:hover path,
  .btn-icon.text-white:focus svg,
  .btn-icon.text-white:focus path,
  .btn-icon.text-white:active svg,
  .btn-icon.text-white:active path {
    color: white !important;
    fill: none !important;
    stroke: white !important;
    stroke-width: 2 !important;
  }

.btn-icon.\!text-white svg,
  .btn-icon.\!text-white path,
  .btn-icon.\!text-white:hover svg,
  .btn-icon.\!text-white:hover path,
  .btn-icon.\!text-white:focus svg,
  .btn-icon.\!text-white:focus path,
  .btn-icon.\!text-white:active svg,
  .btn-icon.\!text-white:active path {
    color: white !important;
    fill: none !important;
    stroke: white !important;
    stroke-width: 2 !important;
  }

/* CRITICAL: Ensure btn-icon.btn-primary has white icons on all states */

/* CRITICAL: Hamburger menu buttons (Navbar) - Fix hover state contrast - HIGHEST SPECIFICITY */

/* Use dedicated class for maximum specificity and to avoid Tailwind conflicts */

nav .hamburger-menu-button,
  nav button.hamburger-menu-button,
  nav button[aria-label*="navigation menu"],
  nav .lg\\:hidden button[aria-label*="navigation menu"],
  nav button[aria-label*="Open navigation menu"],
  nav button[aria-label*="Close navigation menu"],
  nav button[aria-expanded],
  nav .lg\\:hidden button,
  /* Override Tailwind bg-white/90 utility */
  nav button[class*="bg-white/90"],
  nav button[class*="bg-white/95"] {
    background-color: white !important;
    border-color: var(--navy-ultra-light) !important;
    color: var(--navy-primary) !important;
  }

/* Hover state - MUST override any Tailwind classes - MAXIMUM SPECIFICITY */

/* Target by class, aria-label, and all possible combinations */

nav .hamburger-menu-button:hover,
  nav button.hamburger-menu-button:hover,
  nav button.hamburger-menu-button.text-navy-primary:hover,
  nav button.hamburger-menu-button[class*="text-navy"]:hover,
  nav button[aria-label*="navigation menu"]:hover,
  nav button[aria-label*="navigation menu"].text-navy-primary:hover,
  nav button[aria-label*="navigation menu"][class*="text-navy"]:hover,
  nav .lg\\:hidden button[aria-label*="navigation menu"]:hover,
  nav button[aria-label*="Open navigation menu"]:hover,
  nav button[aria-label*="Open navigation menu"].text-navy-primary:hover,
  nav button[aria-label*="Close navigation menu"]:hover,
  nav button[aria-label*="Close navigation menu"].text-navy-primary:hover,
  nav button[aria-expanded]:hover,
  nav button[aria-expanded].text-navy-primary:hover,
  nav .lg\\:hidden button:hover,
  nav .lg\\:hidden button.text-navy-primary:hover,
  /* Override Tailwind's hover utilities directly - even more specific */
  nav button[class*="hover:bg-white"]:hover[aria-label*="navigation menu"],
  nav button[class*="hover:bg-white"]:hover[aria-label*="Open navigation menu"],
  nav button[class*="hover:bg-white"]:hover[aria-label*="Close navigation menu"],
  nav button.text-navy-primary[class*="hover:bg-white"]:hover,
  nav button[class*="text-navy-primary"][class*="hover:bg-white"]:hover {
    background-color: var(--navy-primary) !important;
    border-color: var(--navy-dark) !important;
    color: white !important;
  }


  nav button.hamburger-menu-button.\!text-navy-primary:hover,
  nav button[aria-label*="navigation menu"].\!text-navy-primary:hover,
  nav button[aria-label*="Open navigation menu"].\!text-navy-primary:hover,
  nav button[aria-label*="Close navigation menu"].\!text-navy-primary:hover,
  nav button[aria-expanded].\!text-navy-primary:hover,
  nav .lg\\:hidden button.\!text-navy-primary:hover,
  nav button.\!text-navy-primary[class*="hover:bg-white"]:hover {
    background-color: var(--navy-primary) !important;
    border-color: var(--navy-dark) !important;
    color: white !important;
  }

nav button[aria-label*="navigation menu"]:focus,
  nav .lg\\:hidden button[aria-label*="navigation menu"]:focus,
  nav button[aria-label*="Open navigation menu"]:focus,
  nav button[aria-label*="Close navigation menu"]:focus,
  nav button[aria-expanded]:focus,
  nav .lg\\:hidden button:focus {
    background-color: var(--navy-primary) !important;
    border-color: var(--navy-dark) !important;
    color: white !important;
    outline: 2px solid var(--gold-primary) !important;
    outline-offset: 2px !important;
  }

/* CRITICAL: Hamburger menu button icons - ensure proper fill/stroke and color */

nav .hamburger-menu-button svg,
  nav .hamburger-menu-button path,
  nav button.hamburger-menu-button svg,
  nav button.hamburger-menu-button path,
  nav button[aria-label*="navigation menu"] svg,
  nav button[aria-label*="navigation menu"] path,
  nav .lg\\:hidden button[aria-label*="navigation menu"] svg,
  nav .lg\\:hidden button[aria-label*="navigation menu"] path,
  nav button[aria-label*="Open navigation menu"] svg,
  nav button[aria-label*="Open navigation menu"] path,
  nav button[aria-label*="Close navigation menu"] svg,
  nav button[aria-label*="Close navigation menu"] path,
  nav button[aria-expanded] svg,
  nav button[aria-expanded] path,
  nav .lg\\:hidden button svg,
  nav .lg\\:hidden button path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    color: inherit !important;
  }

nav .hamburger-menu-button:hover svg,
  nav .hamburger-menu-button:hover path,
  nav button.hamburger-menu-button:hover svg,
  nav button.hamburger-menu-button:hover path,
  nav button[aria-label*="navigation menu"]:hover svg,
  nav button[aria-label*="navigation menu"]:hover path,
  nav .lg\\:hidden button[aria-label*="navigation menu"]:hover svg,
  nav .lg\\:hidden button[aria-label*="navigation menu"]:hover path,
  nav button[aria-label*="Open navigation menu"]:hover svg,
  nav button[aria-label*="Open navigation menu"]:hover path,
  nav button[aria-label*="Close navigation menu"]:hover svg,
  nav button[aria-label*="Close navigation menu"]:hover path,
  nav button[aria-expanded]:hover svg,
  nav button[aria-expanded]:hover path,
  nav .lg\\:hidden button:hover svg,
  nav .lg\\:hidden button:hover path {
    fill: none !important;
    stroke: white !important;
    stroke-width: 2 !important;
    color: white !important;
  }

nav .hamburger-menu-button:focus svg,
  nav .hamburger-menu-button:focus path,
  nav button.hamburger-menu-button:focus svg,
  nav button.hamburger-menu-button:focus path,
  nav button[aria-label*="navigation menu"]:focus svg,
  nav button[aria-label*="navigation menu"]:focus path,
  nav .lg\\:hidden button[aria-label*="navigation menu"]:focus svg,
  nav .lg\\:hidden button[aria-label*="navigation menu"]:focus path,
  nav button[aria-label*="Open navigation menu"]:focus svg,
  nav button[aria-label*="Open navigation menu"]:focus path,
  nav button[aria-label*="Close navigation menu"]:focus svg,
  nav button[aria-label*="Close navigation menu"]:focus path,
  nav button[aria-expanded]:focus svg,
  nav button[aria-expanded]:focus path,
  nav .lg\\:hidden button:focus svg,
  nav .lg\\:hidden button:focus path {
    fill: none !important;
    stroke: white !important;
    stroke-width: 2 !important;
    color: white !important;
  }

/* Fix px-4 padding issue specifically identified by user */

/* Override px-4 padding effects on icon containers */

.px-4 .btn-icon,
  [class*="px-4"] .btn-icon {
    padding: 0.5rem !important;
  }

/* (removed) padded-button icon-size enforcement — utility-name literals
     corrupted the build; Tailwind's own h-5/w-5 classes size these icons. */

/* Help Button Fixes - Ensure visibility and proper styling */

button[aria-label="Open help"],
  button[title*="help" i] {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.625rem !important;
    border: 2px solid var(--navy-primary) !important;
    background: white !important;
    color: var(--navy-primary) !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    z-index: 100 !important;
    position: relative !important;
  }

button[aria-label="Open help"]:hover,
  button[title*="help" i]:hover {
    background: var(--navy-primary) !important;
    color: white !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(3, 23, 116, 0.2) !important;
  }

button[aria-label="Open help"] svg,
  button[title*="help" i] svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
    flex-shrink: 0 !important;
  }

/* Summary sections with navy gradients should have white text */

.bg-gradient-to-r.from-navy-dark p,
  .bg-gradient-to-r.from-navy-dark h3,
  .bg-gradient-to-r.from-navy-dark span:not([class*="bg-"]) {
    color: white !important;
  }

/* Override navy text specifically in dark navy containers */

[class*="from-navy-dark"] .\!text-navy-primary,
  [class*="bg-navy-dark"] .\!text-navy-primary {
    color: white !important;
  }

[class*="from-navy-dark"] .text-navy-primary,
  [class*="from-navy-dark"] .text-navy-muted,
  [class*="bg-navy-dark"] .text-navy-primary,
  [class*="bg-navy-dark"] .text-navy-muted {
    color: white !important;
  }

[class*="from-navy-dark"] .\!text-navy-primary,
  [class*="bg-navy-dark"] .\!text-navy-primary {
    color: white !important;
  }

/* Outline button hover states are already handled by the @apply rules above */

/* WCAG: Ensure primary and danger buttons have white text for proper contrast */

/* WCAG: Secondary buttons have navy text on white for proper contrast */

/* Outline buttons now have white backgrounds by default - colors handled by base styles */

/* Ensure ghost buttons have proper contrast */

/* Button color fixes removed - handled by individual button classes above */

/* Enhanced button visibility and accessibility */

/* Removed duplicate .btn definition - user-select properties merged into main definition */

/* Ensure all buttons have proper focus indicators */

.btn:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 2px;
  }

/* Improve button readability in all contexts */

.btn:not(.btn-light) {
    /* Ensure text is always readable */
    text-shadow: none;
  }

/* Special handling for buttons on dark backgrounds */

/* Ensure outline buttons are visible on dark backgrounds */

/* Enhanced Visual Utility Classes */

/* Removed duplicate floating-animation class */

/* Removed duplicate float keyframe - keeping the subtle -6px version */

/* Utility Classes - Production Ready */

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

.scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

/* REMOVED DUPLICATE: hover-lift already defined above */

/* Animation Classes - Production Ready */

/* Shadow System - Production Ready */

.shadow-soft {
    box-shadow: var(--shadow-sm);
  }

.shadow-gold {
    box-shadow: var(--shadow-gold);
  }

/* Animation Classes - Removed unused animate-slide-up */

/* Sophisticated Gradient System */

.bg-gradient-hero {
    background: linear-gradient(
      135deg,
      var(--navy-darkest) 0%,
      var(--navy-dark) 25%,
      var(--navy-medium) 75%,
      var(--navy-primary) 100%
    );
  }

.bg-gradient-footer {
    background: linear-gradient(
      135deg,
      var(--navy-darkest) 0%,
      #000208 50%,
      var(--navy-darkest) 100%
    );
  }

.bg-gradient-navy-subtle {
    background: linear-gradient(
      135deg,
      var(--navy-ultra-light) 0%,
      var(--white-soft) 50%,
      var(--gray-50) 100%
    );
  }

.bg-gradient-gold-premium {
    /* Static rich gold — the old infinite shimmer animation read as "loud". */
    background: linear-gradient(
      135deg,
      var(--gold-secondary) 0%,
      var(--gold-primary) 50%,
      var(--gold-dark) 100%
    );
  }

/* Production-ready Report Death gradient using CSS custom property */

.death-report-header-icon {
    width: 5rem !important;
    height: 5rem !important;
    background-color: #dc2626 !important;
    background-image: linear-gradient(
      135deg,
      #dc2626 0%,
      #b91c1c 25%,
      #991b1b 50%,
      #b91c1c 75%,
      #dc2626 100%
    ) !important;
    border-radius: 9999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1.5rem !important;
    overflow: hidden !important;
  }

.death-report-header-icon svg {
    color: white !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

.death-report-header-icon path {
    stroke: white !important;
    stroke-width: 2 !important;
  }

.report-death-gradient {
    background: var(--gradient-red-premium) !important;
  }

/* Specific rules for Report Death elements to ensure they work */

div.report-death-gradient,
  button.report-death-gradient {
    background: linear-gradient(
      135deg,
      #dc2626 0%,
      #b91c1c 25%,
      #991b1b 50%,
      #b91c1c 75%,
      #dc2626 100%
    ) !important;
  }

/* Force override for any conflicting rules */

.report-death-gradient.w-12,
  .report-death-gradient.w-20 {
    background: linear-gradient(
      135deg,
      #dc2626 0%,
      #b91c1c 25%,
      #991b1b 50%,
      #b91c1c 75%,
      #dc2626 100%
    ) !important;
    background-color: transparent !important;
  }

/* CRITICAL: Ensure white text/icons on report-death-gradient background */

/* Outline icons (from Heroicons) use stroke only, not fill */

.report-death-gradient *,
  .report-death-gradient [class*="text-white"] {
    color: white !important;
  }

.report-death-gradient svg,
  .report-death-gradient path,
  div.report-death-gradient svg,
  div.report-death-gradient path,
  button.report-death-gradient svg,
  button.report-death-gradient path {
    color: white !important;
    stroke: white !important;
    fill: none !important;
    stroke-width: 2 !important;
  }

/* Fix sidebar menu items alignment - override global button centering */

.sidebar-menu-item,
  button[class*="justify-start"],
  button[class*="px-4"][class*="py-3"] {
    justify-content: flex-start !important;
  }

/* Premium Text Gradients - Removed duplicate, see unified definition below */

/* High Contrast Text Over Gradients - WCAG AA Compliant */

.text-over-navy {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
    font-weight: 600;
  }

.text-muted-over-dark {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    font-weight: 500;
  }

/* Metallic Gold Text Gradient - Unified Definition */

/* Metallic Gold for Dark Backgrounds */

.text-gradient-gold-dark {
    color: var(--gold-light);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
    font-weight: 700;
  }

/* Solid Metallic Gold */

/* Comprehensive Spacing Utilities */

/* Old duplicate page-container removed */

/* Old page-content definition removed - using production-ready system */

/* Internal Page Structure */

.section-spacing {
    margin-bottom: var(--space-12);
  }

/* Consistent Grid Layouts */

.grid-responsive {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
  }

@media (min-width: 768px) {
    .grid-responsive {
      grid-template-columns: repeat(2, 1fr);
    }
  }

@media (min-width: 1024px) {
    .grid-responsive {
      grid-template-columns: repeat(3, 1fr);
    }
  }

.grid-stats {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

/* Loading Spinner */

@keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

/* Premium Animations & Effects */

/* Removed duplicate fade-in definition */

.hover-glow {
    transition: all 0.3s ease;
  }

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
  }

/* Removed duplicate hover-lift definition */

@keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

@keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

@keyframes goldShimmer {
    0%,
    100% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }
  }

@keyframes shimmer {
    0% {
      left: -100%;
    }

    100% {
      left: 100%;
    }
  }

/* ============================================
   * COMPREHENSIVE CONTRAST FIXES
   * Fix light blue backgrounds with poor text contrast
   * ============================================ */

/* Ensure navy-ultra-light backgrounds always have dark text, never white */

.bg-navy-ultra-light,
  [class~="bg-navy-ultra-light"],
  .from-navy-ultra-light,
  [class~="from-navy-ultra-light"],
  .to-navy-ultra-light,
  [class~="to-navy-ultra-light"],
  .via-navy-ultra-light,
  [class~="via-navy-ultra-light"] {
    color: var(--navy-primary) !important;
  }

/* Override any white text on light blue backgrounds */

.bg-navy-ultra-light .text-white,
  [class~="bg-navy-ultra-light"] .text-white,
  .from-navy-ultra-light .text-white,
  [class~="from-navy-ultra-light"] .text-white,
  .to-navy-ultra-light .text-white,
  [class~="to-navy-ultra-light"] .text-white,
  .via-navy-ultra-light .text-white,
  [class~="via-navy-ultra-light"] .text-white {
    color: var(--navy-primary) !important;
  }

.bg-navy-ultra-light .\!text-white,
  [class~="bg-navy-ultra-light"] .\!text-white,
  .from-navy-ultra-light .\!text-white,
  [class~="from-navy-ultra-light"] .\!text-white,
  .to-navy-ultra-light .\!text-white,
  [class~="to-navy-ultra-light"] .\!text-white,
  .via-navy-ultra-light .\!text-white,
  [class~="via-navy-ultra-light"] .\!text-white {
    color: var(--navy-primary) !important;
  }

/* Ensure proper text colors on light blue backgrounds for all text elements */

.bg-navy-ultra-light p,
  .bg-navy-ultra-light h1,
  .bg-navy-ultra-light h2,
  .bg-navy-ultra-light h3,
  .bg-navy-ultra-light h4,
  .bg-navy-ultra-light h5,
  .bg-navy-ultra-light h6,
  .bg-navy-ultra-light
    span:not([class*="bg-"]):not([class*="text-gold"]):not(
      [class*="text-success"]
    ):not([class*="text-error"]):not([class*="text-red"]):not(
      [class*="text-orange"]
    ):not([class*="text-purple"]):not([class*="text-green"]):not(
      [class*="text-indigo"]
    ):not([class*="text-pink"]),
  .bg-navy-ultra-light div:not([class*="bg-"]),
  [class~="from-navy-ultra-light"] p,
  [class~="from-navy-ultra-light"] h1,
  [class~="from-navy-ultra-light"] h2,
  [class~="from-navy-ultra-light"] h3,
  [class~="from-navy-ultra-light"] h4,
  [class~="from-navy-ultra-light"] h5,
  [class~="from-navy-ultra-light"] h6,
  [class~="from-navy-ultra-light"]
    span:not([class*="bg-"]):not([class*="text-gold"]):not(
      [class*="text-success"]
    ):not([class*="text-error"]) {
    color: var(--navy-primary) !important;
  }

/* Fix hover states - ensure proper contrast on hover for all buttons and links */

/* EXCEPT hamburger menu buttons - they have their own rules */

.hover\\:bg-white:hover:not([aria-label*="navigation menu"]):not(
      [aria-label*="Open navigation menu"]
    ):not([aria-label*="Close navigation menu"]),
  button:hover[class*="hover:bg-white"]:not(
      [aria-label*="navigation menu"]
    ):not([aria-label*="Open navigation menu"]):not(
      [aria-label*="Close navigation menu"]
    ),
  a:hover[class*="hover:bg-white"] {
    background: white !important;
    color: var(--navy-primary) !important;
  }

button:hover[class*="hover:bg-white"]:not(
      [aria-label*="navigation menu"]
    ):not([aria-label*="Open navigation menu"]):not(
      [aria-label*="Close navigation menu"]
    )
    svg,
  a:hover[class*="hover:bg-white"] svg {
    color: var(--navy-primary) !important;
    stroke: var(--navy-primary) !important;
  }

/* Ensure text doesn't become white on white backgrounds on hover */

.bg-white .hover\\:text-white:hover,
  .bg-white button:hover[class*="hover:text-white"],
  .bg-white a:hover[class*="hover:text-white"],
  [class*="bg-white"] .hover\\:text-white:hover,
  [class*="bg-white"] button:hover[class*="hover:text-white"],
  [class*="bg-white"] a:hover[class*="hover:text-white"] {
    color: var(--navy-primary) !important;
  }

/* Fix light blue icon backgrounds with white icons */

.bg-navy-ultra-light svg,
  [class~="bg-navy-ultra-light"] svg,
  .from-navy-ultra-light svg,
  [class~="from-navy-ultra-light"] svg {
    color: var(--navy-primary) !important;
  }

/* Override for icon containers with light blue backgrounds */

.bg-navy-ultra-light .text-white svg,
  [class~="bg-navy-ultra-light"] .text-white svg {
    color: var(--navy-primary) !important;
  }

.bg-navy-ultra-light .\!text-white svg,
  [class~="bg-navy-ultra-light"] .\!text-white svg {
    color: var(--navy-primary) !important;
  }

/* Specific fixes for buttons with light backgrounds */

button.bg-navy-ultra-light,
  button[class~="bg-navy-ultra-light"],
  a.bg-navy-ultra-light,
  a[class~="bg-navy-ultra-light"] {
    color: var(--navy-primary) !important;
  }

button.bg-navy-ultra-light:hover,
  button[class~="bg-navy-ultra-light"]:hover,
  a.bg-navy-ultra-light:hover,
  a[class~="bg-navy-ultra-light"]:hover {
    background: var(--navy-primary) !important;
    color: white !important;
  }

/* CRITICAL: Ensure info boxes, tip boxes, and non-interactive elements maintain dark text on hover */

div.bg-navy-ultra-light:hover,
  div[class~="bg-navy-ultra-light"]:hover,
  p.bg-navy-ultra-light:hover,
  p[class~="bg-navy-ultra-light"]:hover,
  span.bg-navy-ultra-light:hover,
  span[class~="bg-navy-ultra-light"]:hover,
  .bg-navy-ultra-light:hover:not(button):not(a):not([role="button"]),
  [class~="bg-navy-ultra-light"]:hover:not(button):not(a):not([role="button"]) {
    background-color: var(--navy-ultra-light) !important;
    color: var(--navy-primary) !important;
  }

/* Ensure text inside info boxes stays dark on hover - CRITICAL: Exclude action-icon-btn and ensure proper contrast */

.bg-navy-ultra-light:hover
    *:not(button):not(a):not([role="button"]):not(.action-icon-btn):not(
      [class*="action-icon-btn"]
    ),
  [class~="bg-navy-ultra-light"]:hover
    *:not(button):not(a):not([role="button"]):not(.action-icon-btn):not(
      [class*="action-icon-btn"]
    ) {
    color: var(--navy-primary) !important;
  }

/* CRITICAL: Ensure text-secondary and text-navy-primary stay visible on hover in bg-navy-ultra-light containers */

.bg-navy-ultra-light:hover .text-secondary,
  .bg-navy-ultra-light:hover .text-navy-primary,
  .bg-navy-ultra-light:hover p,
  .bg-navy-ultra-light:hover
    span:not(.action-icon-btn):not([class*="action-icon-btn"]),
  [class~="bg-navy-ultra-light"]:hover .text-secondary,
  [class~="bg-navy-ultra-light"]:hover .text-navy-primary,
  [class~="bg-navy-ultra-light"]:hover p,
  [class~="bg-navy-ultra-light"]:hover
    span:not(.action-icon-btn):not([class*="action-icon-btn"]) {
    color: var(--navy-primary) !important;
  }


  .bg-navy-ultra-light:hover .\!text-navy-primary,
  [class~="bg-navy-ultra-light"]:hover .\!text-navy-primary {
    color: var(--navy-primary) !important;
  }

/* Ensure proper contrast for all light blue gradients */

.bg-gradient-to-br.from-navy-ultra-light,
  .bg-gradient-to-r.from-navy-ultra-light,
  .bg-gradient-to-l.from-navy-ultra-light,
  .bg-gradient-to-t.from-navy-ultra-light,
  .bg-gradient-to-b.from-navy-ultra-light,
  [class*="bg-gradient"][class~="from-navy-ultra-light"] {
    color: var(--navy-primary) !important;
  }

/* Override any white text in gradients containing navy-ultra-light */

.bg-gradient-to-br.from-navy-ultra-light .text-white,
  .bg-gradient-to-r.from-navy-ultra-light .text-white,
  [class*="bg-gradient"][class~="from-navy-ultra-light"] .text-white,
  [class*="bg-gradient"][class~="via-navy-ultra-light"] .text-white,
  [class*="bg-gradient"][class~="to-navy-ultra-light"] .text-white {
    color: var(--navy-primary) !important;
  }

.bg-gradient-to-br.from-navy-ultra-light .\!text-white,
  .bg-gradient-to-r.from-navy-ultra-light .\!text-white,
  [class*="bg-gradient"][class~="from-navy-ultra-light"] .\!text-white,
  [class*="bg-gradient"][class~="via-navy-ultra-light"] .\!text-white,
  [class*="bg-gradient"][class~="to-navy-ultra-light"] .\!text-white {
    color: var(--navy-primary) !important;
  }

/* CRITICAL FIX: Back buttons should never be white on light backgrounds */

button[class*="Back"]:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-gradient-gold"]
    ),
  a[class*="Back"]:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-gradient-gold"]
    ),
  button:has(svg[class*="ArrowLeft"]):not([class*="bg-navy"]):not(
      [class*="bg-primary"]
    ):not([class*="bg-gradient-gold"]),
  a:has(svg[class*="ArrowLeft"]):not([class*="bg-navy"]):not(
      [class*="bg-primary"]
    ):not([class*="bg-gradient-gold"]) {
    color: var(--navy-primary) !important;
  }

/* Ensure back button icons are never white on light backgrounds */

button[class*="Back"]
    svg:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-gradient-gold"]
    ),
  a[class*="Back"]
    svg:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-gradient-gold"]
    ),
  button:has(svg[class*="ArrowLeft"])
    svg:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-gradient-gold"]
    ),
  a:has(svg[class*="ArrowLeft"])
    svg:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-gradient-gold"]
    ) {
    color: var(--navy-primary) !important;
    stroke: var(--navy-primary) !important;
  }

/* Fix white text on light backgrounds for all navigation buttons */

/* Exclude btn-outline and btn-primary from this rule - they have their own styling */

/* Also exclude ALL gold background variations to prevent overriding white text on gold buttons */

button[class*="text-white"]:not([class*="bg-navy"]):not(
      [class*="bg-primary"]
    ):not([class*="bg-gradient-gold"]):not([class*="bg-gold"]):not(
      [class*="from-gold"]
    ):not([class*="to-gold"]):not([class*="via-gold"]):not(
      [class*="bg-error"]
    ):not([class*="bg-red"]):not(.btn-outline):not([class*="btn-outline"]):not(
      .btn-primary
    ):not([class*="btn-primary"]):not(.cta-on-dark-hero):not(
      [class*="cta-on-dark-hero"]
    ),
  a[class*="text-white"]:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-gradient-gold"]
    ):not([class*="bg-gold"]):not([class*="from-gold"]):not(
      [class*="to-gold"]
    ):not([class*="via-gold"]):not([class*="bg-error"]):not(
      [class*="bg-red"]
    ):not(.btn-outline):not([class*="btn-outline"]):not(.btn-primary):not(
      [class*="btn-primary"]
    ):not(.cta-on-dark-hero):not([class*="cta-on-dark-hero"]) {
    color: var(--navy-primary) !important;
  }

/* Fix buttons that should have dark text but are getting white text */

/* Only apply to buttons without explicit color classes */

.action-icon-btn:not([class*="text-red"]):not([class*="text-white"]):not(
      [class*="text-green"]
    ):not([class*="text-blue"]):not([class*="text-yellow"]):not(
      [class*="text-purple"]
    ):not([class*="text-pink"]):not([class*="text-orange"]):not(
      [class*="text-indigo"]
    ),
  .action-icon-btn:not([class*="text-red"]):not([class*="text-white"]):not(
      [class*="text-green"]
    ):not([class*="text-blue"]):not([class*="text-yellow"]):not(
      [class*="text-purple"]
    ):not([class*="text-pink"]):not([class*="text-orange"]):not(
      [class*="text-indigo"]
    )
    *,
  button.action-icon-btn:not([class*="text-red"]):not(
      [class*="text-white"]
    ):not([class*="text-green"]):not([class*="text-blue"]):not(
      [class*="text-yellow"]
    ):not([class*="text-purple"]):not([class*="text-pink"]):not(
      [class*="text-orange"]
    ):not([class*="text-indigo"]),
  button.action-icon-btn:not([class*="text-red"]):not(
      [class*="text-white"]
    ):not([class*="text-green"]):not([class*="text-blue"]):not(
      [class*="text-yellow"]
    ):not([class*="text-purple"]):not([class*="text-pink"]):not(
      [class*="text-orange"]
    ):not([class*="text-indigo"])
    *,
  button[class*="action-icon-btn"]:not([class*="text-red"]):not(
      [class*="text-white"]
    ):not([class*="text-green"]):not([class*="text-blue"]):not(
      [class*="text-yellow"]
    ):not([class*="text-purple"]):not([class*="text-pink"]):not(
      [class*="text-orange"]
    ):not([class*="text-indigo"]),
  button[class*="action-icon-btn"]:not([class*="text-red"]):not(
      [class*="text-white"]
    ):not([class*="text-green"]):not([class*="text-blue"]):not(
      [class*="text-yellow"]
    ):not([class*="text-purple"]):not([class*="text-pink"]):not(
      [class*="text-orange"]
    ):not([class*="text-indigo"])
    * {
    color: var(--navy-primary) !important;
  }

.action-icon-btn:not([class*="text-red"]):not([class*="text-white"]):not(
      [class*="text-green"]
    ):not([class*="text-blue"]):not([class*="text-yellow"]):not(
      [class*="text-purple"]
    ):not([class*="text-pink"]):not([class*="text-orange"]):not(
      [class*="text-indigo"]
    ):hover,
  button.action-icon-btn:not([class*="text-red"]):not(
      [class*="text-white"]
    ):not([class*="text-green"]):not([class*="text-blue"]):not(
      [class*="text-yellow"]
    ):not([class*="text-purple"]):not([class*="text-pink"]):not(
      [class*="text-orange"]
    ):not([class*="text-indigo"]):hover,
  button[class*="action-icon-btn"]:not([class*="text-red"]):not(
      [class*="text-white"]
    ):not([class*="text-green"]):not([class*="text-blue"]):not(
      [class*="text-yellow"]
    ):not([class*="text-purple"]):not([class*="text-pink"]):not(
      [class*="text-orange"]
    ):not([class*="text-indigo"]):hover {
    color: var(--gold-primary) !important;
  }

.action-icon-btn:not([class*="text-red"]):not([class*="text-white"]):not(
      [class*="text-green"]
    ):not([class*="text-blue"]):not([class*="text-yellow"]):not(
      [class*="text-purple"]
    ):not([class*="text-pink"]):not([class*="text-orange"]):not(
      [class*="text-indigo"]
    ):hover
    *,
  button.action-icon-btn:not([class*="text-red"]):not(
      [class*="text-white"]
    ):not([class*="text-green"]):not([class*="text-blue"]):not(
      [class*="text-yellow"]
    ):not([class*="text-purple"]):not([class*="text-pink"]):not(
      [class*="text-orange"]
    ):not([class*="text-indigo"]):hover
    *,
  button[class*="action-icon-btn"]:not([class*="text-red"]):not(
      [class*="text-white"]
    ):not([class*="text-green"]):not([class*="text-blue"]):not(
      [class*="text-yellow"]
    ):not([class*="text-purple"]):not([class*="text-pink"]):not(
      [class*="text-orange"]
    ):not([class*="text-indigo"]):hover
    * {
    color: var(--gold-primary) !important;
  }

/* Ensure delete buttons with red text maintain their color */

.action-icon-btn[class*="text-red"],
  .action-icon-btn[class*="text-red"] *,
  button.action-icon-btn[class*="text-red"],
  button.action-icon-btn[class*="text-red"] *,
  button[class*="action-icon-btn"][class*="text-red"],
  button[class*="action-icon-btn"][class*="text-red"] * {
    color: inherit !important;
  }

.action-icon-btn[class*="text-red"]:hover,
  .action-icon-btn[class*="text-red"]:hover *,
  button.action-icon-btn[class*="text-red"]:hover,
  button.action-icon-btn[class*="text-red"]:hover *,
  button[class*="action-icon-btn"][class*="text-red"]:hover,
  button[class*="action-icon-btn"][class*="text-red"]:hover * {
    color: inherit !important;
  }

/* CRITICAL: Prevent white text on white backgrounds for action buttons */

.action-icon-btn:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-red"]
    ):not([class*="bg-error"]):not([class*="bg-gradient"]),
  button.action-icon-btn:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-red"]
    ):not([class*="bg-error"]):not([class*="bg-gradient"]),
  button[class*="action-icon-btn"]:not([class*="bg-navy"]):not(
      [class*="bg-primary"]
    ):not([class*="bg-red"]):not([class*="bg-error"]):not(
      [class*="bg-gradient"]
    ) {
    background-color: transparent !important;
  }

.action-icon-btn:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-red"]
    ):not([class*="bg-error"]):not([class*="bg-gradient"])[class*="text-white"],
  .action-icon-btn:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-red"]
    ):not([class*="bg-error"]):not([class*="bg-gradient"])[class*="text-white"]
    *,
  button.action-icon-btn:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-red"]
    ):not([class*="bg-error"]):not([class*="bg-gradient"])[class*="text-white"],
  button.action-icon-btn:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-red"]
    ):not([class*="bg-error"]):not([class*="bg-gradient"])[class*="text-white"]
    *,
  button[class*="action-icon-btn"]:not([class*="bg-navy"]):not(
      [class*="bg-primary"]
    ):not([class*="bg-red"]):not([class*="bg-error"]):not(
      [class*="bg-gradient"]
    )[class*="text-white"],
  button[class*="action-icon-btn"]:not([class*="bg-navy"]):not(
      [class*="bg-primary"]
    ):not([class*="bg-red"]):not([class*="bg-error"]):not(
      [class*="bg-gradient"]
    )[class*="text-white"]
    * {
    color: var(--navy-primary) !important;
  }

/* Ensure Edit/Delete buttons have dark text, not white - but exclude red-badge-text */

/* Also exclude ALL gold background variations */

button[class*="text-navy-primary"]:not([class*="bg-navy"]):not(
      [class*="bg-primary"]
    ):not([class*="bg-gradient-gold"]):not([class*="bg-gold"]):not(
      [class*="from-gold"]
    ):not([class*="to-gold"]):not([class*="via-gold"])
    *:not(.red-badge-text):not(.red-badge-text *),
  button[class*="text-navy"]:not([class*="bg-navy"]):not(
      [class*="bg-primary"]
    ):not([class*="bg-gradient-gold"]):not([class*="bg-gold"]):not(
      [class*="from-gold"]
    ):not([class*="to-gold"]):not([class*="via-gold"])
    *:not(.red-badge-text):not(.red-badge-text *),
  button[class*="text-secondary"]:not([class*="bg-navy"]):not(
      [class*="bg-primary"]
    ):not([class*="bg-gradient-gold"]):not([class*="bg-gold"]):not(
      [class*="from-gold"]
    ):not([class*="to-gold"]):not([class*="via-gold"])
    *:not(.red-badge-text):not(.red-badge-text *) {
    color: var(--navy-primary) !important;
  }

/* Ensure buttons with explicit text color classes don't get overridden - but exclude red-badge-text */

button.\!text-navy-primary:not([class*="hover:bg-navy"]) *:not(.red-badge-text):not(.red-badge-text *) {
    color: var(--navy-primary) !important;
  }

button.text-navy-primary:not([class*="hover:bg-navy"]) *:not(.red-badge-text):not(.red-badge-text *),
  button.text-navy-dark:not([class*="hover:bg-navy"]) *:not(.red-badge-text):not(.red-badge-text *),
  button.text-navy *:not(.red-badge-text):not(.red-badge-text *),
  button.text-secondary *:not(.red-badge-text):not(.red-badge-text *) {
    color: var(--navy-primary) !important;
  }

button.\!text-navy-primary:not([class*="hover:bg-navy"]):hover
    *:not(.red-badge-text):not(.red-badge-text *):not(.btn-primary):not(
      .btn-primary *
    ) {
    color: var(--gold-primary) !important;
  }

button.text-navy-primary:not([class*="hover:bg-navy"]):hover
    *:not(.red-badge-text):not(.red-badge-text *):not(.btn-primary):not(
      .btn-primary *
    ),
  button.text-navy-dark:not([class*="hover:bg-navy"]):hover
    *:not(.red-badge-text):not(.red-badge-text *):not(.btn-primary):not(
      .btn-primary *
    ),
  button.text-navy:hover
    *:not(.red-badge-text):not(.red-badge-text *):not(.btn-primary):not(
      .btn-primary *
    ),
  button.text-secondary:hover
    *:not(.red-badge-text):not(.red-badge-text *):not(.btn-primary):not(
      .btn-primary *
    ) {
    color: var(--gold-primary) !important;
  }

/* CRITICAL: Exclude btn-primary from text-navy hover rules - they should stay white */

button.btn-primary.\!text-navy-primary:hover,
  button.btn-primary.\!text-navy-primary:hover * {
    color: white !important;
  }

button.btn-primary.text-navy-primary:hover,
  button.btn-primary.text-navy-primary:hover *,
  button.btn-primary.text-navy:hover,
  button.btn-primary.text-navy:hover *,
  button.btn-icon.btn-primary:hover,
  button.btn-icon.btn-primary:hover * {
    color: white !important;
  }

button.btn-primary.\!text-navy-primary:hover,
  button.btn-primary.\!text-navy-primary:hover * {
    color: white !important;
  }

/* ============================================
   * TOGGLE SWITCH STYLING - ACCESSIBILITY & THEME ALIGNMENT
   * ============================================ */

/* Toggle switches - make them match the theme with navy colors */

button[class*="inline-flex"][class*="rounded-full"][class*="transition"] {
    box-shadow: 0 2px 8px rgba(3, 23, 116, 0.15);
  }

/* Toggle switches - ensure proper styling with high specificity */

button[role="switch"][class*="inline-flex"][class*="rounded-full"],
  button[role="switch"].relative.inline-flex,
  button[role="switch"][class*="relative"][class*="inline-flex"] {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    border-radius: 9999px !important;
    transition: background-color 0.3s ease !important;
    width: 2.75rem !important;
    height: 1.5rem !important;
  }

/* Toggle OFF state - gray background - override any other styles */

button[role="switch"].bg-gray-200,
  button[role="switch"][class*="bg-gray-200"],
  button[role="switch"][class*="relative"][class*="inline-flex"].bg-gray-200 {
    background-color: rgb(229, 231, 235) !important;
    border: none !important;
  }

/* Toggle ON state - navy primary - override any other styles */

button[role="switch"].bg-navy-primary,
  button[role="switch"][class*="bg-navy-primary"],
  button[role="switch"][class*="relative"][class*="inline-flex"].bg-navy-primary {
    background-color: var(--navy-primary) !important;
    box-shadow:
      0 4px 12px rgba(3, 23, 116, 0.25),
      0 0 0 2px rgba(184, 134, 11, 0.2) !important;
    border: none !important;
  }

/* Toggle knob/handle styling - ensure it's visible and properly positioned */

button[role="switch"] > span[class*="inline-block"][class*="rounded-full"],
  button[role="switch"] > span.bg-white,
  button[role="switch"] > span[class*="inline-block"].bg-white,
  button[role="switch"] > span {
    display: inline-block !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    color: transparent !important;
  }

/* Override any color classes on toggle handle */

button[role="switch"] > span[class*="bg-"],
  button[role="switch"] > span[class*="text-"] {
    background-color: #ffffff !important;
    color: transparent !important;
  }

/* Toggle OFF state - handle position */

button[role="switch"].bg-gray-200 > span[class*="translate-x-0"],
  button[role="switch"].bg-gray-200 > span[class*="translate-x-0.5"],
  button[role="switch"][class*="bg-gray-200"] > span[class*="translate-x-0.5"] {
    transform: translateX(0.125rem) !important;
  }

/* Toggle ON state - handle position */

button[role="switch"].bg-navy-primary > span[class*="translate-x-6"],
  button[role="switch"][class*="bg-navy-primary"]
    > span[class*="translate-x-6"] {
    transform: translateX(1.5rem) !important;
  }

/* ============================================
   * NEED HELP SECTION STYLING
   * ============================================ */

/* Need Help sections - ensure consistent styling */

a[href^="tel:"],
  a[href^="mailto:"] {
    transition: all 0.2s ease;
  }

/* Need Help icons - ensure gold color is visible */

a[href^="tel:"] svg,
  a[href^="mailto:"] svg {
    color: var(--gold-primary) !important;
    flex-shrink: 0;
  }

/* Notification icon visibility - ensure it's always visible */

button[aria-label="Notifications"] svg,
  button[title="View notifications"] svg,
  button[title="View notifications"] svg {
    color: var(--navy-primary) !important;
    stroke: var(--navy-primary) !important;
    fill: none !important;
    flex-shrink: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

button[aria-label="Notifications"]:hover svg,
  button[title="View notifications"]:hover svg {
    color: var(--gold-primary) !important;
    stroke: var(--gold-primary) !important;
  }

/* ============================================
   * ACTION ICON SYSTEM - Prevent Compression on Mobile
   * ============================================ */

/* Action icon container - prevents compression and ensures visibility */

@media (max-width: 480px) {
    .action-icons-container {
      gap: 0.25rem !important;
    }

    .action-icon-btn {
      padding: 0.5rem !important;
      min-width: 2rem !important;
      height: 2rem !important;
    }
  }

/* Action icon button - prevents compression */

.action-icon-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0.5rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
    background-color: transparent !important;
    cursor: pointer !important;
    border: 1px solid var(--navy-ultra-light) !important;
  }

/* Disabled state - prevent all interactions and hover effects */

.action-icon-btn:disabled,
  .action-icon-btn[disabled],
  .action-icon-btn[class*="opacity-50"][class*="cursor-not-allowed"],
  button.action-icon-btn:disabled,
  button.action-icon-btn[disabled],
  button.action-icon-btn[class*="opacity-50"][class*="cursor-not-allowed"] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
  }

/* Active/Focused state */

.action-icon-btn:active:not(:disabled):not([disabled]):not(
      [class*="opacity-50"]
    ),
  .action-icon-btn:focus:not(:disabled):not([disabled]):not(
      [class*="opacity-50"]
    ),
  button.action-icon-btn:active:not(:disabled):not([disabled]):not(
      [class*="opacity-50"]
    ),
  button.action-icon-btn:focus:not(:disabled):not([disabled]):not(
      [class*="opacity-50"]
    ) {
    outline: 2px solid var(--gold-primary) !important;
    outline-offset: 2px !important;
  }

/* CRITICAL: Ensure delete buttons with red text are visible - use stroke only */

.action-icon-btn[class*="text-red"],
  .action-icon-btn[class*="text-red"] svg,
  button.action-icon-btn[class*="text-red"],
  button.action-icon-btn[class*="text-red"] svg,
  button[class*="action-icon-btn"][class*="text-red"],
  button[class*="action-icon-btn"][class*="text-red"] svg {
    color: #dc2626 !important;
    fill: none !important;
    stroke: #dc2626 !important;
    stroke-width: 2 !important;
  }

.action-icon-btn[class*="text-red"]:hover:not(:disabled):not([disabled]):not(
      [class*="opacity-50"]
    ),
  .action-icon-btn[class*="text-red"]:hover:not(:disabled):not([disabled]):not(
      [class*="opacity-50"]
    )
    svg,
  button.action-icon-btn[class*="text-red"]:hover:not(:disabled):not(
      [disabled]
    ):not([class*="opacity-50"]),
  button.action-icon-btn[class*="text-red"]:hover:not(:disabled):not(
      [disabled]
    ):not([class*="opacity-50"])
    svg,
  button[class*="action-icon-btn"][class*="text-red"]:hover:not(:disabled):not(
      [disabled]
    ):not([class*="opacity-50"]),
  button[class*="action-icon-btn"][class*="text-red"]:hover:not(:disabled):not(
      [disabled]
    ):not([class*="opacity-50"])
    svg {
    color: #b91c1c !important;
    fill: none !important;
    stroke: #b91c1c !important;
    stroke-width: 2 !important;
  }

/* Ensure action icons with navy text are visible - use stroke only */

/* BUT: Exclude icons inside gold containers - they should be white */

.action-icon-btn:not([class*="text-red"]):not([class*="text-white"]):not([class*="bg-gold"]):not([class*="from-gold"]):not([class*="to-gold"]):not([class*="via-gold"]) svg,
  .action-icon-btn:not([class*="text-red"]):not([class*="text-white"]):not([class*="bg-gold"]):not([class*="from-gold"]):not([class*="to-gold"]):not([class*="via-gold"]) path,
  /* Exclude action-icon-btn that are children of gold containers */
  [class*="bg-gold-primary"]:not([class*="ultra-light"]):not([class*="pale"]) .action-icon-btn:not([class*="text-red"]) svg,
  [class*="bg-gold-primary"]:not([class*="ultra-light"]):not([class*="pale"]) .action-icon-btn:not([class*="text-red"]) path,
  [class*="bg-gold-secondary"]:not([class*="ultra-light"]):not([class*="pale"]) .action-icon-btn:not([class*="text-red"]) svg,
  [class*="bg-gold-secondary"]:not([class*="ultra-light"]):not([class*="pale"]) .action-icon-btn:not([class*="text-red"]) path,
  [class*="bg-gradient-gold"] .action-icon-btn:not([class*="text-red"]) svg,
  [class*="bg-gradient-gold"] .action-icon-btn:not([class*="text-red"]) path,
  [class*="from-gold-primary"] .action-icon-btn:not([class*="text-red"]) svg,
  [class*="from-gold-primary"] .action-icon-btn:not([class*="text-red"]) path,
  [class*="to-gold-primary"] .action-icon-btn:not([class*="text-red"]) svg,
  [class*="to-gold-primary"] .action-icon-btn:not([class*="text-red"]) path,
  [class*="to-gold-secondary"] .action-icon-btn:not([class*="text-red"]) svg,
  [class*="to-gold-secondary"] .action-icon-btn:not([class*="text-red"]) path {
    color: var(--navy-primary) !important;
    fill: none !important;
    stroke: var(--navy-primary) !important;
    stroke-width: 2 !important;
  }

/* CRITICAL: Action icons inside gold containers MUST be white */

[class*="bg-gold-primary"]:not([class*="ultra-light"]):not([class*="pale"])
    .action-icon-btn
    svg,
  [class*="bg-gold-primary"]:not([class*="ultra-light"]):not([class*="pale"])
    .action-icon-btn
    path,
  [class*="bg-gold-secondary"]:not([class*="ultra-light"]):not([class*="pale"])
    .action-icon-btn
    svg,
  [class*="bg-gold-secondary"]:not([class*="ultra-light"]):not([class*="pale"])
    .action-icon-btn
    path,
  [class*="bg-gradient-gold"] .action-icon-btn svg,
  [class*="bg-gradient-gold"] .action-icon-btn path,
  [class*="from-gold-primary"] .action-icon-btn svg,
  [class*="from-gold-primary"] .action-icon-btn path,
  [class*="to-gold-primary"] .action-icon-btn svg,
  [class*="to-gold-primary"] .action-icon-btn path,
  [class*="to-gold-secondary"] .action-icon-btn svg,
  [class*="to-gold-secondary"] .action-icon-btn path,
  .action-icon-btn[class*="bg-gold-primary"]:not([class*="ultra-light"]):not(
      [class*="pale"]
    )
    svg,
  .action-icon-btn[class*="bg-gold-primary"]:not([class*="ultra-light"]):not(
      [class*="pale"]
    )
    path,
  .action-icon-btn[class*="bg-gold-secondary"]:not([class*="ultra-light"]):not(
      [class*="pale"]
    )
    svg,
  .action-icon-btn[class*="bg-gold-secondary"]:not([class*="ultra-light"]):not(
      [class*="pale"]
    )
    path,
  .action-icon-btn[class*="bg-gradient-gold"] svg,
  .action-icon-btn[class*="bg-gradient-gold"] path,
  .action-icon-btn[class*="from-gold-primary"] svg,
  .action-icon-btn[class*="from-gold-primary"] path,
  .action-icon-btn[class*="to-gold-primary"] svg,
  .action-icon-btn[class*="to-gold-primary"] path,
  .action-icon-btn[class*="to-gold-secondary"] svg,
  .action-icon-btn[class*="to-gold-secondary"] path {
    color: white !important;
    stroke: white !important;
    fill: none !important;
  }

/* CRITICAL: Allow gold hover color when explicitly set (fixes blue-on-blue issue) */

/* This must come after the default hover rules to override them */

.action-icon-btn[class*="hover:text-gold"]:hover:not(:disabled):not(
      [disabled]
    ):not([class*="opacity-50"]),
  .action-icon-btn[class*="hover:text-gold"]:hover:not(:disabled):not(
      [disabled]
    ):not([class*="opacity-50"])
    *,
  button.action-icon-btn[class*="hover:text-gold"]:hover:not(:disabled):not(
      [disabled]
    ):not([class*="opacity-50"]),
  button.action-icon-btn[class*="hover:text-gold"]:hover:not(:disabled):not(
      [disabled]
    ):not([class*="opacity-50"])
    *,
  button[class*="action-icon-btn"][class*="hover:text-gold"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"]),
  button[class*="action-icon-btn"][class*="hover:text-gold"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"])
    * {
    color: var(--gold-primary) !important;
  }

.action-icon-btn[class*="hover:text-gold"]:hover:not(:disabled):not(
      [disabled]
    ):not([class*="opacity-50"])
    svg,
  .action-icon-btn[class*="hover:text-gold"]:hover:not(:disabled):not(
      [disabled]
    ):not([class*="opacity-50"])
    path,
  button.action-icon-btn[class*="hover:text-gold"]:hover:not(:disabled):not(
      [disabled]
    ):not([class*="opacity-50"])
    svg,
  button.action-icon-btn[class*="hover:text-gold"]:hover:not(:disabled):not(
      [disabled]
    ):not([class*="opacity-50"])
    path,
  button[class*="action-icon-btn"][class*="hover:text-gold"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"])
    svg,
  button[class*="action-icon-btn"][class*="hover:text-gold"]:hover:not(
      :disabled
    ):not([disabled]):not([class*="opacity-50"])
    path {
    color: var(--gold-primary) !important;
    fill: none !important;
    stroke: var(--gold-primary) !important;
    stroke-width: 2 !important;
  }

/* Default hover state for non-gold buttons - only apply if no gold hover class and not disabled */

.action-icon-btn:not([class*="text-red"]):not([class*="text-white"]):not(
      [class*="hover:text-gold"]
    ):not(:disabled):not([disabled]):not([class*="opacity-50"]):hover
    svg,
  .action-icon-btn:not([class*="text-red"]):not([class*="text-white"]):not(
      [class*="hover:text-gold"]
    ):not(:disabled):not([disabled]):not([class*="opacity-50"]):hover
    path,
  button.action-icon-btn:not([class*="text-red"]):not(
      [class*="text-white"]
    ):not([class*="hover:text-gold"]):not(:disabled):not([disabled]):not(
      [class*="opacity-50"]
    ):hover
    svg,
  button.action-icon-btn:not([class*="text-red"]):not(
      [class*="text-white"]
    ):not([class*="hover:text-gold"]):not(:disabled):not([disabled]):not(
      [class*="opacity-50"]
    ):hover
    path {
    color: var(--navy-primary) !important;
    fill: none !important;
    stroke: var(--navy-primary) !important;
    stroke-width: 2 !important;
  }

/* Prevent hover effects on disabled buttons */

.action-icon-btn:disabled:hover,
  .action-icon-btn[disabled]:hover,
  .action-icon-btn[class*="opacity-50"][class*="cursor-not-allowed"]:hover,
  button.action-icon-btn:disabled:hover,
  button.action-icon-btn[disabled]:hover,
  button.action-icon-btn[class*="opacity-50"][class*="cursor-not-allowed"]:hover {
    background-color: transparent !important;
    color: inherit !important;
  }

.action-icon-btn:disabled:hover svg,
  .action-icon-btn[disabled]:hover svg,
  .action-icon-btn[class*="opacity-50"][class*="cursor-not-allowed"]:hover svg,
  button.action-icon-btn:disabled:hover svg,
  button.action-icon-btn[disabled]:hover svg,
  button.action-icon-btn[class*="opacity-50"][class*="cursor-not-allowed"]:hover
    svg {
    color: inherit !important;
    stroke: currentColor !important;
  }

/* Prevent white text on white/transparent backgrounds */

/* BUT: Exclude gold containers - they need white icons */

.action-icon-btn:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-red"]
    ):not([class*="bg-error"]):not([class*="bg-gold"]):not(
      [class*="from-gold"]
    ):not([class*="to-gold"]):not([class*="via-gold"])[class*="text-white"],
  .action-icon-btn:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-red"]
    ):not([class*="bg-error"]):not([class*="bg-gold"]):not(
      [class*="from-gold"]
    ):not([class*="to-gold"]):not([class*="via-gold"])[class*="text-white"]
    *,
  button.action-icon-btn:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-red"]
    ):not([class*="bg-error"]):not([class*="bg-gold"]):not(
      [class*="from-gold"]
    ):not([class*="to-gold"]):not([class*="via-gold"])[class*="text-white"],
  button.action-icon-btn:not([class*="bg-navy"]):not([class*="bg-primary"]):not(
      [class*="bg-red"]
    ):not([class*="bg-error"]):not([class*="bg-gold"]):not(
      [class*="from-gold"]
    ):not([class*="to-gold"]):not([class*="via-gold"])[class*="text-white"]
    * {
    color: var(--navy-primary) !important;
  }

@media (max-width: 640px) {
    .action-icon-btn {
      min-width: 2.75rem !important;
      min-height: 2.75rem !important;
      width: 2.75rem !important;
      height: 2.75rem !important;
      padding: 0.625rem !important;
    }
  }

/* Action icon SVG - prevents compression and ensures proper positioning */

.action-icon-btn svg {
    flex-shrink: 0 !important;
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;
    min-height: 1rem !important;
    max-width: 1rem !important;
    max-height: 1rem !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Removed aspect-ratio to prevent icon distortion */
    margin: 0 !important;
  }

/* CRITICAL: Ensure action icons have proper contrast - use stroke for outline icons */

.action-icon-btn svg,
  .action-icon-btn path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
  }

/* Action icons on hover - ensure proper contrast */

.action-icon-btn:hover svg,
  .action-icon-btn:hover path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
  }

@media (max-width: 640px) {
    .action-icon-btn svg {
      width: 1.125rem !important;
      height: 1.125rem !important;
      min-width: 1.125rem !important;
      min-height: 1.125rem !important;
      max-width: 1.125rem !important;
      max-height: 1.125rem !important;
      aspect-ratio: 1 / 1 !important;
    }
  }

/* Ensure consistent icon sizing on web without forcing aspect ratio */

@media (min-width: 641px) {
    /* Removed aspect-ratio forcing to prevent icon distortion */
    /* Icons will maintain their natural proportions */

    /* Ensure consistent icon sizing on web.
       NOTE: exact class selectors ONLY. The old substring selectors
       (svg[class*="h-5"][class*="w-5"]) collided with Tailwind's escaped
       arbitrary classnames during the build, producing corrupted CSS that
       made browsers silently drop the rest of the stylesheet. They also
       false-matched h-50/w-52 etc. */
    /* (removed) icon square-size enforcement — see corruption note above. */
  }

/* Card padding on mobile to prevent overlap with scroll-to-top button */

.card-action-padding {
    padding-bottom: 1rem !important;
  }

@media (max-width: 640px) {
    .card-action-padding {
      padding-bottom: 5rem !important;
      padding-right: 1rem !important;
    }
  }

/* Scroll-to-top button - production-ready implementation */

.scroll-to-top-btn {
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    z-index: 40 !important;
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
    min-height: 3rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--navy-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    cursor: pointer !important;
    transition:
      background-color 0.2s ease,
      transform 0.2s ease !important;
    outline: none !important;
  }

.scroll-to-top-btn:hover {
    background-color: var(--navy-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow:
      0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  }

.scroll-to-top-btn:active {
    transform: translateY(0) !important;
  }

.scroll-to-top-btn:focus {
    outline: 2px solid var(--gold-primary) !important;
    outline-offset: 2px !important;
  }

.scroll-to-top-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
    min-width: 1.5rem !important;
    min-height: 1.5rem !important;
    color: white !important;
    stroke: currentColor !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

@media (max-width: 640px) {
    .scroll-to-top-btn {
      bottom: 1rem !important;
      right: 1rem !important;
      width: 3.5rem !important;
      height: 3.5rem !important;
      min-width: 3.5rem !important;
      min-height: 3.5rem !important;
    }

    .scroll-to-top-icon {
      width: 1.75rem !important;
      height: 1.75rem !important;
      min-width: 1.75rem !important;
      min-height: 1.75rem !important;
    }
  }

/* Ensure all icons in cards have proper sizing */

/* Need Help hover states */

a[href^="tel:"]:hover,
  a[href^="mailto:"]:hover {
    background: var(--navy-ultra-light) !important;
  }

/* Ensure text is visible in Need Help sections */

a[href^="tel:"]:hover p,
  a[href^="mailto:"]:hover p {
    color: var(--navy-primary) !important;
  }

/* Footer links - simple, production-ready solution */

.footer-link {
    color: white !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    -webkit-text-decoration: none !important;
    transition: color 0.2s ease;
  }

.footer-link:hover {
    /* Footer sits on dark navy — hover must use the BRIGHT gold for contrast */
    color: var(--gold-light) !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    -webkit-text-decoration: none !important;
  }

/* ============================================
   * BACK AND CANCEL BUTTON STYLING
   * ============================================ */

/* Back buttons - icon buttons with ArrowLeft */

.btn-back svg,
  button.btn-back svg,
  a.btn-back svg {
    transition: all 0.2s ease;
  }

.btn-back:hover,
  button.btn-back:hover,
  a.btn-back:hover {
    background: var(--navy-primary) !important;
  }

.btn-back:hover svg,
  button.btn-back:hover svg,
  a.btn-back:hover svg {
    color: white !important;
  }

/* CRITICAL: Fix info boxes with bg-blue-50 and similar light backgrounds */

.bg-blue-50,
  .bg-blue-50 *:not(button):not(a):not([role="button"]),
  .bg-sky-50,
  .bg-sky-50 *:not(button):not(a):not([role="button"]),
  .bg-cyan-50,
  .bg-cyan-50 *:not(button):not(a):not([role="button"]),
  [class~="bg-blue-50"],
  [class~="bg-blue-50"] *:not(button):not(a):not([role="button"]),
  [class~="bg-sky-50"],
  [class~="bg-sky-50"] *:not(button):not(a):not([role="button"]),
  [class~="bg-cyan-50"],
  [class~="bg-cyan-50"] *:not(button):not(a):not([role="button"]) {
    color: var(--navy-primary) !important;
  }

/* CRITICAL: Fix error messages in light red backgrounds - ensure dark text */

.bg-red-50,
  .bg-red-50
    *:not(button):not(a):not([role="button"]):not([class*="text-white"]):not(
      [class*="bg-red-"]
    ),
  [class~="bg-red-50"],
  [class~="bg-red-50"]
    *:not(button):not(a):not([role="button"]):not([class*="text-white"]):not(
      [class*="bg-red-"]
    ) {
    color: #7f1d1d !important;
  }

/* Ensure error text stays dark on hover */

.bg-red-50:hover:not(button):not(a):not([role="button"]),
  [class~="bg-red-50"]:hover:not(button):not(a):not([role="button"]) {
    background-color: #fef2f2 !important;
    color: #7f1d1d !important;
  }

.bg-red-50:hover
    *:not(button):not(a):not([role="button"]):not([class*="text-white"]):not(
      [class*="bg-red-"]
    ),
  [class~="bg-red-50"]:hover
    *:not(button):not(a):not([role="button"]):not([class*="text-white"]):not(
      [class*="bg-red-"]
    ) {
    color: #7f1d1d !important;
  }

/* Ensure hover states for info boxes maintain dark text */

.bg-blue-50:hover:not(button):not(a):not([role="button"]),
  .bg-sky-50:hover:not(button):not(a):not([role="button"]),
  .bg-cyan-50:hover:not(button):not(a):not([role="button"]),
  [class~="bg-blue-50"]:hover:not(button):not(a):not([role="button"]),
  [class~="bg-sky-50"]:hover:not(button):not(a):not([role="button"]),
  [class~="bg-cyan-50"]:hover:not(button):not(a):not([role="button"]) {
    background-color: inherit !important;
    color: var(--navy-primary) !important;
  }

.bg-blue-50:hover *:not(button):not(a):not([role="button"]),
  .bg-sky-50:hover *:not(button):not(a):not([role="button"]),
  .bg-cyan-50:hover *:not(button):not(a):not([role="button"]),
  [class~="bg-blue-50"]:hover *:not(button):not(a):not([role="button"]),
  [class~="bg-sky-50"]:hover *:not(button):not(a):not([role="button"]),
  [class~="bg-cyan-50"]:hover *:not(button):not(a):not([role="button"]) {
    color: var(--navy-primary) !important;
  }

/* CRITICAL: Fix Cancel buttons with border-primary and text-secondary - ensure white text on navy hover */

button[class*="border-primary"][class*="text-secondary"]:hover,
  button[class*="border-primary"][class*="text-secondary"]:focus,
  button[class*="border-primary"][class*="text-secondary"]:active,
  button[class*="border-2"][class*="border-primary"][class*="text-secondary"]:hover,
  button[class*="border-2"][class*="border-primary"][class*="text-secondary"]:focus,
  button[class*="border-2"][class*="border-primary"][class*="text-secondary"]:active {
    color: white !important;
    background-color: var(--navy-primary) !important;
  }

/* CRITICAL: Ensure Cancel buttons with border-primary and text-navy-primary have visible text on white background */

button[class*="border-primary"][class*="text-navy-primary"]:not(:hover):not(
      :focus
    ):not(:active),
  button[class*="border-2"][class*="border-primary"][class*="text-navy-primary"]:not(
      :hover
    ):not(:focus):not(:active) {
    color: var(--navy-primary) !important;
    background-color: white !important;
    border-radius: var(--radius-xl) !important;
    /* Ensure consistent rounded-xl */
  }

/* CRITICAL: Override any rounded-xl or rounded-2xl on buttons - all buttons must use rounded-xl */

button.rounded-xl,
  button[class*="rounded-xl"],
  a.app-btn.rounded-xl,
  a.app-btn[class*="rounded-xl"],
  .btn.rounded-xl,
  .btn[class*="rounded-xl"],
  button.rounded-2xl,
  button[class*="rounded-2xl"],
  a.app-btn.rounded-2xl,
  a.app-btn[class*="rounded-2xl"],
  .btn.rounded-2xl,
  .btn[class*="rounded-2xl"] {
    border-radius: var(--radius-xl) !important;
    /* Force all buttons to use rounded-xl */
  }

/* Ensure error messages have high contrast */

.text-red-700,
  .text-red-800,
  div[class~="bg-red-50"] .text-red-700,
  div[class~="bg-red-50"] .text-red-800,
  div[class~="bg-red-50"] span[class*="text-red"] {
    color: #991b1b !important;
    /* red-800 for high contrast */
  }

div[class~="bg-red-50"] svg[class*="text-red"] {
    color: #b91c1c !important;
    /* red-700 for icons */
  }

/* Ensure Cancel buttons have minimum width */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.-inset-4 {
  inset: -1rem;
}

.inset-0 {
  inset: 0px;
}

.inset-2 {
  inset: 0.5rem;
}

.inset-4 {
  inset: 1rem;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.-bottom-16 {
  bottom: -4rem;
}

.-bottom-2 {
  bottom: -0.5rem;
}

.-bottom-40 {
  bottom: -10rem;
}

.-left-4 {
  left: -1rem;
}

.-left-40 {
  left: -10rem;
}

.-left-8 {
  left: -2rem;
}

.-right-1 {
  right: -0.25rem;
}

.-right-10 {
  right: -2.5rem;
}

.-right-2 {
  right: -0.5rem;
}

.-right-3 {
  right: -0.75rem;
}

.-right-4 {
  right: -1rem;
}

.-right-40 {
  right: -10rem;
}

.-right-6 {
  right: -1.5rem;
}

.-right-8 {
  right: -2rem;
}

.-top-1 {
  top: -0.25rem;
}

.-top-10 {
  top: -2.5rem;
}

.-top-12 {
  top: -3rem;
}

.-top-2 {
  top: -0.5rem;
}

.-top-3 {
  top: -0.75rem;
}

.-top-4 {
  top: -1rem;
}

.-top-40 {
  top: -10rem;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-24 {
  bottom: 6rem;
}

.bottom-4 {
  bottom: 1rem;
}

.bottom-full {
  bottom: 100%;
}

.left-0 {
  left: 0px;
}

.left-1 {
  left: 0.25rem;
}

.left-1\/2 {
  left: 50%;
}

.left-2 {
  left: 0.5rem;
}

.left-3 {
  left: 0.75rem;
}

.left-4 {
  left: 1rem;
}

.right-0 {
  right: 0px;
}

.right-1 {
  right: 0.25rem;
}

.right-2 {
  right: 0.5rem;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

.top-2 {
  top: 0.5rem;
}

.top-3 {
  top: 0.75rem;
}

.top-4 {
  top: 1rem;
}

.top-5 {
  top: 1.25rem;
}

.top-full {
  top: 100%;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[100\] {
  z-index: 100;
}

.z-\[1080\] {
  z-index: 1080;
}

.z-\[9999\] {
  z-index: 9999;
}

.z-modal {
  z-index: 1050;
}

.z-modal-backdrop {
  z-index: 1040;
}

.z-sticky {
  z-index: 1020;
}

.z-toast {
  z-index: 1080;
}

.z-tooltip {
  z-index: 1070;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-7 {
  margin-left: 1.75rem;
  margin-right: 1.75rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.-mb-px {
  margin-bottom: -1px;
}

.-ml-1 {
  margin-left: -0.25rem;
}

.-mt-1 {
  margin-top: -0.25rem;
}

.-mt-2 {
  margin-top: -0.5rem;
}

.mb-0\.5 {
  margin-bottom: 0.125rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-0\.5 {
  margin-left: 0.125rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.ml-80 {
  margin-left: 20rem;
}

.ml-9 {
  margin-left: 2.25rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mr-auto {
  margin-right: auto;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-\[10px\] {
  margin-top: 10px;
}

.mt-auto {
  margin-top: auto;
}

.box-border {
  box-sizing: border-box;
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.line-clamp-none {
  overflow: visible;
  display: block;
  -webkit-box-orient: horizontal;
  -webkit-line-clamp: none;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-1 {
  height: 0.25rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-28 {
  height: 7rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-32 {
  height: 8rem;
}

.h-36 {
  height: 9rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-48 {
  height: 12rem;
}

.h-5 {
  height: 1.25rem;
}

.h-52 {
  height: 13rem;
}

.h-6 {
  height: 1.5rem;
}

.h-64 {
  height: 16rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-80 {
  height: 20rem;
}

.h-9 {
  height: 2.25rem;
}

.h-96 {
  height: 24rem;
}

.h-\[50vh\] {
  height: 50vh;
}

.h-\[52px\] {
  height: 52px;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.max-h-48 {
  max-height: 12rem;
}

.max-h-60 {
  max-height: 15rem;
}

.max-h-\[300px\] {
  max-height: 300px;
}

.max-h-\[60vh\] {
  max-height: 60vh;
}

.max-h-\[85vh\] {
  max-height: 85vh;
}

.max-h-\[90vh\] {
  max-height: 90vh;
}

.max-h-\[95vh\] {
  max-height: 95vh;
}

.max-h-full {
  max-height: 100%;
}

.min-h-0 {
  min-height: 0px;
}

.min-h-96 {
  min-height: 24rem;
}

.min-h-\[120px\] {
  min-height: 120px;
}

.min-h-\[2\.5rem\] {
  min-height: 2.5rem;
}

.min-h-\[250px\] {
  min-height: 250px;
}

.min-h-\[3\.5rem\] {
  min-height: 3.5rem;
}

.min-h-\[32px\] {
  min-height: 32px;
}

.min-h-\[3rem\] {
  min-height: 3rem;
}

.min-h-\[400px\] {
  min-height: 400px;
}

.min-h-\[5rem\] {
  min-height: 5rem;
}

.min-h-\[60px\] {
  min-height: 60px;
}

.min-h-\[60vh\] {
  min-height: 60vh;
}

.min-h-\[80px\] {
  min-height: 80px;
}

.min-h-full {
  min-height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-1\/4 {
  width: 25%;
}

.w-1\/5 {
  width: 20%;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-3\/4 {
  width: 75%;
}

.w-32 {
  width: 8rem;
}

.w-36 {
  width: 9rem;
}

.w-4 {
  width: 1rem;
}

.w-4\/6 {
  width: 66.666667%;
}

.w-40 {
  width: 10rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-5\/6 {
  width: 83.333333%;
}

.w-6 {
  width: 1.5rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-72 {
  width: 18rem;
}

.w-8 {
  width: 2rem;
}

.w-80 {
  width: 20rem;
}

.w-9 {
  width: 2.25rem;
}

.w-96 {
  width: 24rem;
}

.w-\[28rem\] {
  width: 28rem;
}

.w-auto {
  width: auto;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.w-max {
  width: -moz-max-content;
  width: max-content;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[140px\] {
  min-width: 140px;
}

.min-w-\[170px\] {
  min-width: 170px;
}

.min-w-\[2\.5rem\] {
  min-width: 2.5rem;
}

.min-w-\[200px\] {
  min-width: 200px;
}

.min-w-\[220px\] {
  min-width: 220px;
}

.min-w-\[240px\] {
  min-width: 240px;
}

.min-w-\[260px\] {
  min-width: 260px;
}

.min-w-\[32px\] {
  min-width: 32px;
}

.min-w-full {
  min-width: 100%;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-\[400px\] {
  max-width: 400px;
}

.max-w-\[420px\] {
  max-width: 420px;
}

.max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem);
}

.max-w-full {
  max-width: 100%;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-none {
  max-width: none;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xl {
  max-width: 36rem;
}

.max-w-xs {
  max-width: 20rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-1\/2 {
  --tw-translate-x: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-6 {
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-1\/2 {
  --tw-translate-y: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-6 {
  --tw-rotate: -6deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-125 {
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform-none {
  transform: none;
}

@keyframes bounce {

  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

.animate-bounce {
  animation: bounce 1s infinite;
}

@keyframes ping {

  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse {

  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-default {
  cursor: default;
}

.cursor-help {
  cursor: help;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.touch-none {
  touch-action: none;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize-none {
  resize: none;
}

.resize-y {
  resize: vertical;
}

.resize {
  resize: both;
}

.list-inside {
  list-style-position: inside;
}

.list-decimal {
  list-style-type: decimal;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.\!justify-start {
  justify-content: flex-start !important;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-16 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(4rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--gray-100);
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--gray-200);
}

.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: center;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overscroll-contain {
  overscroll-behavior: contain;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hyphens-none {
  hyphens: none;
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: var(--radius-md);
}

.rounded-2xl {
  border-radius: var(--radius-3xl);
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-full {
  border-radius: var(--radius-full);
}

.rounded-lg {
  border-radius: var(--radius-xl);
}

.rounded-md {
  border-radius: var(--radius-lg);
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded-xl {
  border-radius: var(--radius-2xl);
}

.rounded-b-lg {
  border-bottom-right-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xl);
}

.rounded-r-lg {
  border-top-right-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

.rounded-bl-full {
  border-bottom-left-radius: var(--radius-full);
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-0 {
  border-bottom-width: 0px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-b-4 {
  border-bottom-width: 4px;
}

.border-l-2 {
  border-left-width: 2px;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-dashed {
  border-style: dashed;
}

.border-none {
  border-style: none;
}

.border-\[\#14213d\] {
  --tw-border-opacity: 1;
  border-color: rgb(20 33 61 / var(--tw-border-opacity, 1));
}

.border-\[\#dbeafe\] {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}

.border-\[rgba\(255\2c 255\2c 255\2c 0\.6\)\] {
  border-color: rgba(255,255,255,0.6);
}

.border-amber-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 243 199 / var(--tw-border-opacity, 1));
}

.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}

.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}

.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}

.border-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

.border-border {
  border-color: var(--gray-200);
}

.border-current {
  border-color: currentColor;
}

.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}

.border-error {
  border-color: var(--error);
}

.border-gold-light {
  border-color: var(--gold-light);
}

.border-gold-pale {
  border-color: var(--gold-pale);
}

.border-gold-primary {
  border-color: var(--gold-primary);
}

.border-gray-100 {
  border-color: var(--gray-100);
}

.border-gray-200 {
  border-color: var(--gray-200);
}

.border-gray-300 {
  border-color: var(--gray-300);
}

.border-gray-400 {
  border-color: var(--gray-400);
}

.border-gray-50 {
  border-color: var(--gray-50);
}

.border-green-100 {
  --tw-border-opacity: 1;
  border-color: rgb(220 252 231 / var(--tw-border-opacity, 1));
}

.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}

.border-green-200\/50 {
  border-color: rgb(187 247 208 / 0.5);
}

.border-green-300 {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}

.border-green-400 {
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}

.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-green-600 {
  --tw-border-opacity: 1;
  border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}

.border-indigo-200 {
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}

.border-navy-light {
  border-color: var(--navy-light);
}

.border-navy-medium {
  border-color: var(--navy-medium);
}

.border-navy-muted {
  border-color: var(--navy-muted);
}

.border-navy-primary {
  border-color: var(--navy-primary);
}

.border-navy-ultra-light {
  border-color: var(--navy-ultra-light);
}

.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}

.border-purple-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 232 255 / var(--tw-border-opacity, 1));
}

.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}

.border-purple-500 {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}

.border-red-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-border-opacity, 1));
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.border-red-200\/80 {
  border-color: rgb(254 202 202 / 0.8);
}

.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.border-slate-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}

.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

.border-slate-200\/80 {
  border-color: rgb(226 232 240 / 0.8);
}

.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

.border-success {
  border-color: var(--success);
}

.border-transparent {
  border-color: transparent;
}

.border-warning {
  border-color: var(--warning);
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}

.border-white\/40 {
  border-color: rgb(255 255 255 / 0.4);
}

.border-b-gold-primary {
  border-bottom-color: var(--gold-primary);
}

.border-b-navy-primary {
  border-bottom-color: var(--navy-primary);
}

.border-l-gold-primary {
  border-left-color: var(--gold-primary);
}

.border-l-navy-primary {
  border-left-color: var(--navy-primary);
}

.border-r-gold-primary {
  border-right-color: var(--gold-primary);
}

.border-r-navy-primary {
  border-right-color: var(--navy-primary);
}

.border-t-current {
  border-top-color: currentColor;
}

.border-t-gold-primary {
  border-top-color: var(--gold-primary);
}

.border-t-gold-secondary {
  border-top-color: var(--gold-secondary);
}

.border-t-navy-primary {
  border-top-color: var(--navy-primary);
}

.border-t-transparent {
  border-top-color: transparent;
}

.border-t-white {
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.bg-\[\#14213d\] {
  --tw-bg-opacity: 1;
  background-color: rgb(20 33 61 / var(--tw-bg-opacity, 1));
}

.bg-\[\#25D366\] {
  --tw-bg-opacity: 1;
  background-color: rgb(37 211 102 / var(--tw-bg-opacity, 1));
}

.bg-\[\#dbeafe\] {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-background-modal {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}

.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}

.bg-black\/75 {
  background-color: rgb(0 0 0 / 0.75);
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}

.bg-emerald-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}

.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}

.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.bg-error {
  background-color: var(--error);
}

.bg-error-light {
  background-color: var(--error-light);
}

.bg-gold-light {
  background-color: var(--gold-light);
}

.bg-gold-primary {
  background-color: var(--gold-primary);
}

.bg-gold-ultra-light {
  background-color: var(--gold-ultra-light);
}

.bg-gray-100 {
  background-color: var(--gray-100);
}

.bg-gray-200 {
  background-color: var(--gray-200);
}

.bg-gray-300 {
  background-color: var(--gray-300);
}

.bg-gray-50 {
  background-color: var(--gray-50);
}

.bg-gray-500 {
  background-color: var(--gray-500);
}

.bg-gray-600 {
  background-color: var(--gray-600);
}

.bg-gray-700 {
  background-color: var(--gray-700);
}

.bg-gray-800 {
  background-color: var(--gray-800);
}

.bg-gray-900 {
  background-color: var(--gray-900);
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}

.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}

.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-green-50\/50 {
  background-color: rgb(240 253 244 / 0.5);
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.bg-green-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}

.bg-navy-600 {
  background-color: var(--navy-600);
}

.bg-navy-primary {
  background-color: var(--navy-primary);
}

.bg-navy-ultra-light {
  background-color: var(--navy-ultra-light);
}

.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.bg-orange-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}

.bg-orange-600\/90 {
  background-color: rgb(234 88 12 / 0.9);
}

.bg-pink-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}

.bg-pink-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 242 248 / var(--tw-bg-opacity, 1));
}

.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-50\/40 {
  background-color: rgb(250 245 255 / 0.4);
}

.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.bg-red-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.bg-success {
  background-color: var(--success);
}

.bg-success-light {
  background-color: var(--success-light);
}

.bg-transparent {
  background-color: transparent;
}

.bg-warning {
  background-color: var(--warning);
}

.bg-warning-light {
  background-color: var(--warning-light);
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}

.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}

.bg-white\/30 {
  background-color: rgb(255 255 255 / 0.3);
}

.bg-white\/50 {
  background-color: rgb(255 255 255 / 0.5);
}

.bg-white\/60 {
  background-color: rgb(255 255 255 / 0.6);
}

.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}

.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}

.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}

.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}

.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.bg-opacity-10 {
  --tw-bg-opacity: 0.1;
}

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.bg-opacity-95 {
  --tw-bg-opacity: 0.95;
}

.bg-gradient-hero {
  background-image: linear-gradient(135deg, #011159 0%, #001845 55%, #6e5310 100%);
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-amber-400 {
  --tw-gradient-from: #fbbf24 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-amber-500 {
  --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black\/20 {
  --tw-gradient-from: rgb(0 0 0 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black\/80 {
  --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-50 {
  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-cyan-500 {
  --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-500 {
  --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gold-primary {
  --tw-gradient-from: var(--gold-primary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gold-secondary {
  --tw-gradient-from: var(--gold-secondary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gold-ultra-light {
  --tw-gradient-from: var(--gold-ultra-light) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-50 {
  --tw-gradient-from: var(--gray-50) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-100 {
  --tw-gradient-from: #dcfce7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(220 252 231 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-400 {
  --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-50 {
  --tw-gradient-from: #f0fdf4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-500 {
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-500 {
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-navy-dark {
  --tw-gradient-from: var(--navy-dark) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-navy-medium {
  --tw-gradient-from: var(--navy-medium) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-navy-primary {
  --tw-gradient-from: var(--navy-primary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-navy-ultra-light {
  --tw-gradient-from: var(--navy-ultra-light) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-orange-400 {
  --tw-gradient-from: #fb923c var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(251 146 60 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-orange-50 {
  --tw-gradient-from: #fff7ed var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 247 237 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pink-500 {
  --tw-gradient-from: #ec4899 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-500 {
  --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-100 {
  --tw-gradient-from: #fee2e2 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 226 226 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-400 {
  --tw-gradient-from: #f87171 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-50 {
  --tw-gradient-from: #fef2f2 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 242 242 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-500 {
  --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-rose-500 {
  --tw-gradient-from: #f43f5e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 63 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-100 {
  --tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-500 {
  --tw-gradient-from: #64748b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(100 116 139 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-warning {
  --tw-gradient-from: var(--warning) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-yellow-300 {
  --tw-gradient-from: #fde047 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(253 224 71 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-black\/30 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-emerald-50 {
  --tw-gradient-to: rgb(236 253 245 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ecfdf5 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-gold-secondary {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--gold-secondary) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-gold-ultra-light {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--gold-ultra-light) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-orange-50 {
  --tw-gradient-to: rgb(255 247 237 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff7ed var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-red-50 {
  --tw-gradient-to: rgb(254 242 242 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fef2f2 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-white\/30 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-amber-50 {
  --tw-gradient-to: #fffbeb var(--tw-gradient-to-position);
}

.to-amber-600 {
  --tw-gradient-to: #d97706 var(--tw-gradient-to-position);
}

.to-blue-100 {
  --tw-gradient-to: #dbeafe var(--tw-gradient-to-position);
}

.to-blue-50 {
  --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
}

.to-blue-600 {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}

.to-cyan-600 {
  --tw-gradient-to: #0891b2 var(--tw-gradient-to-position);
}

.to-emerald-100 {
  --tw-gradient-to: #d1fae5 var(--tw-gradient-to-position);
}

.to-emerald-50 {
  --tw-gradient-to: #ecfdf5 var(--tw-gradient-to-position);
}

.to-emerald-500 {
  --tw-gradient-to: #10b981 var(--tw-gradient-to-position);
}

.to-emerald-600 {
  --tw-gradient-to: #059669 var(--tw-gradient-to-position);
}

.to-gold-dark {
  --tw-gradient-to: var(--gold-dark) var(--tw-gradient-to-position);
}

.to-gold-pale {
  --tw-gradient-to: var(--gold-pale) var(--tw-gradient-to-position);
}

.to-gold-primary {
  --tw-gradient-to: var(--gold-primary) var(--tw-gradient-to-position);
}

.to-gold-secondary {
  --tw-gradient-to: var(--gold-secondary) var(--tw-gradient-to-position);
}

.to-gold-ultra-light {
  --tw-gradient-to: var(--gold-ultra-light) var(--tw-gradient-to-position);
}

.to-gray-100 {
  --tw-gradient-to: var(--gray-100) var(--tw-gradient-to-position);
}

.to-green-600 {
  --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
}

.to-indigo-50 {
  --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
}

.to-indigo-600 {
  --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position);
}

.to-navy-dark {
  --tw-gradient-to: var(--navy-dark) var(--tw-gradient-to-position);
}

.to-navy-light {
  --tw-gradient-to: var(--navy-light) var(--tw-gradient-to-position);
}

.to-navy-medium {
  --tw-gradient-to: var(--navy-medium) var(--tw-gradient-to-position);
}

.to-navy-primary {
  --tw-gradient-to: var(--navy-primary) var(--tw-gradient-to-position);
}

.to-navy-ultra-light {
  --tw-gradient-to: var(--navy-ultra-light) var(--tw-gradient-to-position);
}

.to-orange-300 {
  --tw-gradient-to: #fdba74 var(--tw-gradient-to-position);
}

.to-orange-50 {
  --tw-gradient-to: #fff7ed var(--tw-gradient-to-position);
}

.to-orange-500 {
  --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
}

.to-pink-50 {
  --tw-gradient-to: #fdf2f8 var(--tw-gradient-to-position);
}

.to-pink-600 {
  --tw-gradient-to: #db2777 var(--tw-gradient-to-position);
}

.to-purple-100 {
  --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);
}

.to-purple-600 {
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}

.to-red-50 {
  --tw-gradient-to: #fef2f2 var(--tw-gradient-to-position);
}

.to-red-500 {
  --tw-gradient-to: #ef4444 var(--tw-gradient-to-position);
}

.to-red-600 {
  --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
}

.to-rose-600 {
  --tw-gradient-to: #e11d48 var(--tw-gradient-to-position);
}

.to-slate-200 {
  --tw-gradient-to: #e2e8f0 var(--tw-gradient-to-position);
}

.to-slate-600 {
  --tw-gradient-to: #475569 var(--tw-gradient-to-position);
}

.to-teal-50 {
  --tw-gradient-to: #f0fdfa var(--tw-gradient-to-position);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.to-warning {
  --tw-gradient-to: var(--warning) var(--tw-gradient-to-position);
}

.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}

.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}

.fill-current {
  fill: currentColor;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-center {
  -o-object-position: center;
     object-position: center;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-12 {
  padding: 3rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-9 {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-14 {
  padding-bottom: 3.5rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pl-0 {
  padding-left: 0px;
}

.pl-10 {
  padding-left: 2.5rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pl-9 {
  padding-left: 2.25rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-12 {
  padding-right: 3rem;
}

.pr-20 {
  padding-right: 5rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-1\.5 {
  padding-top: 0.375rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pt-24 {
  padding-top: 6rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-8 {
  padding-top: 2rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.font-mono {
  font-family: JetBrains Mono, SF Mono, Monaco, Consolas, monospace;
}

.font-sans {
  font-family: var(--font-body), system-ui, sans-serif;
}

.font-serif {
  font-family: var(--font-heading), serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[120px\] {
  font-size: 120px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[0\.2px\] {
  letter-spacing: 0.2px;
}

.tracking-normal {
  letter-spacing: 0em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.\!text-navy-primary {
  color: var(--navy-primary) !important;
}

.\!text-red-600 {
  --tw-text-opacity: 1 !important;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1)) !important;
}

.\!text-white {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.text-\[\#14213d\] {
  --tw-text-opacity: 1;
  color: rgb(20 33 61 / var(--tw-text-opacity, 1));
}

.text-\[\#14213d\]\/60 {
  color: rgb(20 33 61 / 0.6);
}

.text-\[\#14213d\]\/80 {
  color: rgb(20 33 61 / 0.8);
}

.text-\[\#1da851\] {
  --tw-text-opacity: 1;
  color: rgb(29 168 81 / var(--tw-text-opacity, 1));
}

.text-\[\#ffff\] {
  color: #ffff;
}

.text-\[\#ffffff\] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-amber-100 {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}

.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}

.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.text-current {
  color: currentColor;
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.text-error {
  color: var(--error);
}

.text-error-dark {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-gold-dark {
  color: var(--gold-dark);
}

.text-gold-light {
  color: var(--gold-light);
}

.text-gold-pale {
  color: var(--gold-pale);
}

.text-gold-primary {
  color: var(--gold-primary);
}

.text-gray-300 {
  color: var(--gray-300);
}

.text-gray-400 {
  color: var(--gray-400);
}

.text-gray-500 {
  color: var(--gray-500);
}

.text-gray-600 {
  color: var(--gray-600);
}

.text-gray-700 {
  color: var(--gray-700);
}

.text-gray-800 {
  color: var(--gray-800);
}

.text-gray-900 {
  color: var(--gray-900);
}

.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}

.text-green-900 {
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}

.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}

.text-indigo-800 {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}

.text-navy-600 {
  color: var(--navy-600);
}

.text-navy-dark {
  color: var(--navy-dark);
}

.text-navy-light {
  color: var(--navy-light);
}

.text-navy-primary {
  color: var(--navy-primary);
}

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}

.text-orange-800 {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}

.text-pink-700 {
  --tw-text-opacity: 1;
  color: rgb(190 24 93 / var(--tw-text-opacity, 1));
}

.text-pink-800 {
  --tw-text-opacity: 1;
  color: rgb(157 23 77 / var(--tw-text-opacity, 1));
}

.text-purple-300 {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}

.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}

.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}

.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}

.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}

.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.text-slate-950 {
  --tw-text-opacity: 1;
  color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}

.text-success {
  color: var(--success);
}

.text-success-dark {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.text-text-muted {
  color: var(--gray-400);
}

.text-text-primary {
  color: var(--navy-primary);
}

.text-text-secondary {
  color: var(--gray-600);
}

.text-text-tertiary {
  color: var(--gray-500);
}

.text-transparent {
  color: transparent;
}

.text-warning {
  color: var(--warning);
}

.text-warning-dark {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}

.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}

.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}

.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}

.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}

.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.line-through {
  text-decoration-line: line-through;
}

.placeholder-gray-600::-moz-placeholder {
  color: var(--gray-600);
}

.placeholder-gray-600::placeholder {
  color: var(--gray-600);
}

.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-100 {
  opacity: 1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-5 {
  opacity: 0.05;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-\[0\.6\] {
  opacity: 0.6;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-card {
  --tw-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color), 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-modal {
  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-emerald-200 {
  --tw-shadow-color: #a7f3d0;
  --tw-shadow: var(--tw-shadow-colored);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-amber-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(251 191 36 / var(--tw-ring-opacity, 1));
}

.ring-white\/20 {
  --tw-ring-color: rgb(255 255 255 / 0.2);
}

.ring-white\/25 {
  --tw-ring-color: rgb(255 255 255 / 0.25);
}

.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}

.ring-offset-white {
  --tw-ring-offset-color: #fff;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-xl {
  --tw-blur: blur(24px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-2xl {
  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-lg {
  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-md {
  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-xl {
  --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.duration-1000 {
  transition-duration: 1000ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear {
  transition-timing-function: linear;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@keyframes pulse-gold {
    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4);
    }

    50% {
      box-shadow: 0 0 0 8px rgba(217, 119, 6, 0);
    }
  }

@keyframes float {
    0%,
    100% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-6px);
    }
  }

@keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

@keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

@keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-30px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

@keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

@keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(30px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

@keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

@keyframes shimmer {
    0% {
      background-position: -200px 0;
    }

    100% {
      background-position: calc(200px + 100%) 0;
    }
  }

@keyframes bounce {
    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-10px);
    }
  }

/* Enhanced Animation Classes */

.fade-in {
    animation: fadeIn 0.6s var(--transition-smooth);
  }

/* REMOVED DUPLICATE: hover-lift already defined above */

.hover-glow {
    transition: box-shadow var(--transition-normal);
  }

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(184, 134, 11, 0.3);
  }

/* Shimmer Loading Effect */

/* Removed duplicate stagger definitions - keeping the first set */

/* Universal Form Consistency - Override All Variations */

/* Enhanced Form Field Consistency */

/* Form structure already defined above */

/* Ensure ALL input types follow same styling */

input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="file"],
  input[type="password"],
  select,
  textarea {
    width: 100%;
    margin: var(--space-sm) 0 var(--space-lg) 0;
    padding: var(--space-lg) var(--space-md);
    border: 2px solid var(--navy-light);
    border-radius: var(--radius-lg);

    font-size: 1rem;
    line-height: 1.5;
    transition: all var(--transition-normal);
    background: white;
    color: var(--navy-primary);
    min-height: 44px;
    position: relative;
    will-change: border-color, box-shadow, transform;
  }

input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="tel"]:focus,
  input[type="number"]:focus,
  input[type="date"]:focus,
  input[type="file"]:focus,
  input[type="password"]:focus,
  select:focus,
  textarea:focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow:
      0 0 0 3px var(--gold-ultra-light),
      0 0 20px rgba(184, 134, 11, 0.1);
    transform: translateY(-1px);
  }

input[type="text"]:hover,
  input[type="email"]:hover,
  input[type="tel"]:hover,
  input[type="number"]:hover,
  input[type="date"]:hover,
  input[type="file"]:hover,
  input[type="password"]:hover,
  select:hover,
  textarea:hover {
    border-color: var(--navy-light);
  }

/* Checkbox and Radio Styling */

input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #B8860B;
    border: 2px solid #CBD5E1;
    border-radius: 4px;
    background: white;
    transition: all var(--transition-normal);
    margin: 0;
    min-height: auto;
    box-sizing: border-box;
    vertical-align: middle;
    flex-shrink: 0;
    cursor: pointer;
  }

input[type="checkbox"]:checked {
    background: #B8860B;
    border-color: #B8860B;
  }

input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.2);
  }

input[type="radio"] {
    width: 1rem;
    height: 1rem;
    color: var(--navy-primary);
    border: 2px solid var(--navy-primary);
    border-radius: 50%;
    background: white;
    transition: all var(--transition-normal);
    margin: 0;
    padding: 0;
    min-height: auto;
    box-sizing: border-box;
    vertical-align: middle;
    display: inline-block;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

input[type="radio"]:checked {
    background-color: var(--navy-primary);
    border-color: var(--navy-primary);
    position: relative;
    border-width: 2px;
    box-sizing: border-box;
  }

input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: white;
    box-sizing: border-box;
  }

input[type="checkbox"]:focus,
  input[type="radio"]:focus {
    outline: none;
    ring: 2px;
    ring-color: var(--gold-primary);
    ring-offset: 2px;
    border-color: var(--gold-primary);
    transform: none;
    box-shadow: 0 0 0 3px var(--gold-ultra-light);
    box-sizing: border-box;
  }

/* Ensure radio buttons maintain consistent height and alignment */

/* Use @supports for :has() selector compatibility */

@supports selector(:has(*)) {
    label:has(input[type="radio"]) {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    label:has(input[type="radio"]) input[type="radio"] {
      margin: 0;
      vertical-align: middle;
      align-self: center;
      flex-shrink: 0;
    }
  }

/* Fallback for browsers without :has() support */

@supports not selector(:has(*)) {
    label input[type="radio"] {
      margin: 0;
      vertical-align: middle;
      flex-shrink: 0;
    }
  }

/* Ensure radio button options are vertically aligned in flex containers */

.flex.items-center > label:has(input[type="radio"]),
  .flex > label:has(input[type="radio"]) {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
  }

/* Ensure radio buttons and their labels are properly aligned */

label:has(input[type="radio"]) {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

label:has(input[type="radio"]) input[type="radio"] {
    margin: 0 !important;
    align-self: center !important;
    flex-shrink: 0 !important;
  }

label:has(input[type="radio"]) span {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.5 !important;
  }

/* Label Consistency */

label {
    display: block;
    margin: var(--space-lg) 0 var(--space-sm) 0;
    font-weight: 600;
    color: var(--navy-primary);
    font-size: 0.875rem;
  }

/* Form Group Spacing */

/* Custom utilities without overrides */

/* Premium Loading Animations */

@keyframes spin-reverse {
    from {
      transform: rotate(360deg);
    }

    to {
      transform: rotate(0deg);
    }
  }

/* How-It-Works step carousel auto-advance progress bar */

@keyframes apStepProgress {
    from {
      width: 0%;
    }

    to {
      width: 100%;
    }
  }

/* Enhanced bounce with stagger */

.\[-ms-overflow-style\:none\] {
  -ms-overflow-style: none;
}

.\[scrollbar-width\:none\] {
  scrollbar-width: none;
}

/* Aakhri Pal Design System v2.2.0 - Single Source of Truth */

/* Cache Version: 2024-12-28-v2.2 - Major Fixes Applied */

:root {
  /* Sophisticated Navy Blue Spectrum - Exact Brand Colors */
  --navy-darkest: #0e1a3a;
  /* RGB(0, 3, 16) - Footer, deepest backgrounds */
  --navy-dark: #14213d;
  /* RGB(0, 10, 57) - Hero sections, premium areas */
  --navy-medium: #1b2a4a;
  /* RGB(1, 17, 89) - Navigation, cards */
  --navy-primary: #14213d;
  /* RGB(3, 23, 116) - Primary text, headings */
  --navy-secondary: #0e1a3a;
  /* RGB(5, 26, 107) - Secondary navy for gradients */
  --navy-light: #22335a;
  /* RGB(6, 30, 141) - Accents, borders */
  --navy-muted: #374151;
  /* Readable text - improved from #1e3a8a */
  --navy-soft: #3b82f6;
  /* Light navy for subtle elements */
  --navy-600: #1e40af;
  /* Medium navy for text */
  --navy-700: #1e3a8a;
  /* Darker navy for emphasis */
  --navy-ultra-light: #f7f3eb;
  /* Ultra light navy backgrounds */

  /* Premium Golden Metallic System — matched to the logo's metallic gold.
     PRIMARY is the deep goldenrod so gold reads richly next to white;
     SECONDARY/LIGHT are the brighter metallics for use on navy/dark. */
  --gold-darkest: #6e5310;
  /* Deep gold shadow (used for readable gold TEXT) */
  --gold-dark: #8a6a14;
  /* Deep antique gold */
  --gold-primary: #b8860b;
  /* Dark goldenrod — rich and legible beside white */
  --gold-secondary: #d4af37;
  /* Metallic gold — matches the logo body (for dark surfaces) */
  --gold-light: #efd27a;
  /* Bright gold highlight — matches the logo highlights (for dark surfaces) */
  --gold-text: var(--gold-darkest);
  --gold-pale: #fbf3dc;
  /* Pale golden backgrounds */
  --gold-ultra-light: #fffdf8;
  /* Ultra light golden tints */

  /* Premium Neutral Palette */
  --white-pure: #ffffff;
  /* Pure white */
  --white-soft: #f7f3eb;
  /* Soft off-white */
  --gray-50: #f7f3eb;
  /* Ultra light gray */
  --gray-100: #f3f4f6;
  /* Light gray backgrounds */
  --gray-200: #e5e7eb;
  /* Subtle borders */
  --gray-300: #d1d5db;
  /* Medium borders */
  --gray-400: #6b7280;
  /* Muted text - improved from #9ca3af */
  --gray-500: #4b5563;
  /* Secondary text - improved from #6b7280 */
  --gray-600: #2f2f2f;
  /* Primary readable text - improved from #4b5563 */
  --gray-700: #262626;
  /* Dark text - improved from #374151 */
  --gray-800: #111827;
  /* Very dark text - improved from #1f2937 */
  --gray-900: #1f1f1f;
  /* Darkest text - improved from #111827 */

  /* Text colors for light backgrounds - proper contrast */
  --text-on-light-blue: #14213d;
  /* Navy primary for light blue backgrounds */

  /* Status Colors */
  --success: #059669;
  /* Success Green */
  --success-light: #d1fae5;
  /* Light success background */
  --error: #dc2626;
  /* Error Red */

  /* Production-ready gradients */
  --gradient-red-premium: linear-gradient(
    135deg,
    #dc2626 0%,
    #b91c1c 25%,
    #991b1b 50%,
    #b91c1c 75%,
    #dc2626 100%
  );
  --error-light: #fee2e2;
  /* Light error background */
  --warning: #d97706;
  /* Warning Amber */
  --warning-light: #fef3c7;
  /* Light warning background */

  /* Professional Spacing Scale */
  --space-px: 1px;
  --space-0: 0;
  --space-1: 0.25rem;
  /* 4px */
  --space-2: 0.5rem;
  /* 8px */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px */
  --space-5: 1.25rem;
  /* 20px */
  --space-6: 1.5rem;
  /* 24px */
  --space-8: 2rem;
  /* 32px */
  --space-10: 2.5rem;
  /* 40px */
  --space-12: 3rem;
  /* 48px */
  --space-16: 4rem;
  /* 64px */
  --space-20: 5rem;
  /* 80px */
  --space-24: 6rem;
  /* 96px */
  --space-32: 8rem;
  /* 128px */
  --space-40: 10rem;
  /* 160px */
  --space-48: 12rem;
  /* 192px */

  /* Consistent Page Layout Spacing */
  --page-padding: var(--space-6);
  --section-gap: var(--space-8);
  --content-gap: var(--space-6);
  --element-gap: var(--space-4);

  /* Section Spacing */
  --section-padding-sm: var(--space-16);
  --section-padding-md: var(--space-20);
  --section-padding-lg: var(--space-24);
  --section-padding-xl: var(--space-32);

  /* Content Spacing */
  --content-gap-sm: var(--space-8);
  --content-gap-md: var(--space-12);
  --content-gap-lg: var(--space-16);
  --content-gap-xl: var(--space-20);

  /* Semantic Spacing Variables - BALANCED FOR FORMS */
  --space-xs: var(--space-1);
  /* 4px */
  --space-sm: var(--space-2);
  /* 8px */
  --space-md: var(--space-3);
  /* 12px */
  --space-lg: var(--space-4);
  /* 16px - BALANCED FORM SPACING */
  --space-xl: var(--space-6);
  /* 24px */
  --space-2xl: var(--space-8);
  /* 32px */
  --space-3xl: var(--space-12);
  /* 48px */

  /* Sophisticated Shadow System */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-gold:
    0 10px 15px -3px rgba(217, 119, 6, 0.1),
    0 4px 6px -2px rgba(217, 119, 6, 0.05);
  --shadow-navy:
    0 10px 15px -3px rgba(3, 23, 116, 0.1),
    0 4px 6px -2px rgba(3, 23, 116, 0.05);

  /* Premium Border Radius */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  /* 4px */
  --radius-md: 0.375rem;
  /* 6px */
  --radius-lg: 0.5rem;
  /* 8px */
  --radius-xl: 0.875rem;
  /* 14px */
  --radius-2xl: 1.125rem;
  /* 18px */
  --radius-3xl: 1.5rem;
  /* 24px */
  --radius-full: 9999px;
  /* Full circle */

  /* Animation & Transition System */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-elastic: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Z-Index Scale - Production Ready */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  --z-help-modal: 1090;
  --z-tutorial-overlay: 1100;
  --z-razorpay: 2000;
  /* Razorpay modal needs higher z-index */

  /* Section Layer Z-Index System */
  --z-section-background: 0;
  /* Background video/images */
  --z-section-overlay: 1;
  /* Dark overlays for contrast */
  --z-section-decoration: 2;
  /* Floating decorative elements */
  --z-section-content: 10;
  /* Main content */

  /* Semantic Text Colors - WCAG AA Compliant - Light Mode Only */
  --text-primary: var(--gray-900);
  /* Primary text - darkest, most readable */
  --text-secondary: var(--gray-600);
  /* Secondary text - body copy - CHANGED from gray-700 for better readability */
  --text-tertiary: var(--gray-500);
  /* Tertiary text - captions, labels */
  --text-muted: var(--gray-400);
  /* Muted text - placeholders, disabled */
  --text-heading: var(--navy-primary);
  /* Headings - brand color */
  --text-link: var(--gold-text);
  /* Links - brand accent */
  --text-inverse: var(--white-pure);
  /* Text on dark backgrounds */

  /* Semantic Border Colors */
  --border-primary: var(--gray-300);
  /* Primary borders */
  --border-secondary: var(--gray-200);
  /* Secondary borders */
  --border-focus: var(--gold-primary);
  /* Focus state borders */
  --border-error: var(--error);
  /* Error state borders */
  --border-success: var(--success);
  /* Success state borders */
}

/* Base Typography - Only 2 Font Families */

/* Consistent Component System */

/* ============================================
 * BACK BUTTON CONSISTENCY - DEDICATED CLASS
 * ============================================ */

/* Dedicated class for back buttons to prevent CSS overrides */

.btn-back,
button.btn-back,
a.btn-back {
  color: var(--navy-primary) !important;
  background: transparent !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
  cursor: pointer !important;
}

.btn-back:hover,
button.btn-back:hover,
a.btn-back:hover {
  color: var(--gold-primary) !important;
}

.btn-back svg,
button.btn-back svg,
a.btn-back svg {
  color: var(--navy-primary) !important;
  stroke: var(--navy-primary) !important;
  fill: none !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex-shrink: 0 !important;
}

.btn-back:hover svg,
button.btn-back:hover svg,
a.btn-back:hover svg {
  color: var(--gold-primary) !important;
  stroke: var(--gold-primary) !important;
}

/* Override any conflicting styles for back buttons */

button.btn-back.text-white,
a.btn-back.text-white,
button.btn-back[class*="text-white"],
a.btn-back[class*="text-white"] {
  color: var(--navy-primary) !important;
}

button.btn-back.text-white svg,
a.btn-back.text-white svg,
button.btn-back[class*="text-white"] svg,
a.btn-back[class*="text-white"] svg {
  color: var(--navy-primary) !important;
  stroke: var(--navy-primary) !important;
}

button.btn-back.text-white:hover svg,
a.btn-back.text-white:hover svg,
button.btn-back[class*="text-white"]:hover svg,
a.btn-back[class*="text-white"]:hover svg {
  color: var(--gold-primary) !important;
  stroke: var(--gold-primary) !important;
}

/* ============================================
 * ADDITIONAL COMPONENT ENHANCEMENTS
 * ============================================ */

/* Additional animations and keyframes */

/* Responsive Design */

@media (max-width: 768px) {
  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .text-heading-1 {
    font-size: 2.25rem;
  }

  .text-heading-2 {
    font-size: 1.875rem;
  }

  .text-heading-3 {
    font-size: 1.5rem;
  }
}

/* Utility layer for custom utilities */

/* Number and Text Overflow Handling */

.stat-number {
  word-break: break-all !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  line-height: 1.1 !important;
}

.currency-display {
  font-variant-numeric: tabular-nums !important;
  word-break: break-all !important;
  overflow-wrap: break-word !important;
}

/* Text overflow removed - responsiveness handles layout */

.text-break-words {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* Global Text Overflow Prevention - Applied to all containers */

/* Removed aggressive global overflow-x: hidden - it was causing truncation issues */

/* Specific container overflow handling - only for text containers, not layout containers */

/* Removed aggressive overflow rules that were causing truncation */

/* All sections should allow visible overflow to prevent border truncation */

/* BUT: Must allow overflow-y for sticky positioning - consolidated below */

/* Page container should allow visible overflow */

.page-container,
.page-content {
  overflow: visible !important;
}

/* Main content area should allow visible overflow - BUT preserve sticky positioning */

/* This rule is consolidated above - removing duplicate */

/* Text containers should not overflow - FIXED: Remove overflow-x hidden to prevent scrollbars */

p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
label,
a {
  /* Remove overflow-x: hidden - rely on word wrapping instead */
  /* Break long text */
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Handle very long words */
  hyphens: auto;
  word-break: break-word;
}

/* Form elements should contain their text - FIXED: Remove overflow-x hidden */

input,
textarea,
select {
  /* Remove overflow-x: hidden - rely on word wrapping */
  /* Break long text in inputs */
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Ensure proper box-sizing */
  box-sizing: border-box;
}

/* Cards and panels should contain their content */

.card,
.panel,
.modal,
.dropdown {
  /* Prevent content from breaking out */
  overflow-x: hidden;
  /* Ensure proper text wrapping */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Premium cards should not have overflow hidden to prevent border truncation */

.card-premium {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  position: relative;
  box-sizing: border-box;
  background: white !important;
  border: 2px solid var(--gray-200) !important;
  border-radius: var(--radius-2xl) !important;
  /* Consistent rounded-2xl (16px) */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.card-premium:hover {
  border-color: var(--gold-primary) !important;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Feature Card Premium - Vertical Layout with Icon Above Text */

.feature-card-premium {
  background: var(--white-pure) !important;
  border: 2px solid var(--gray-200) !important;
  border-radius: var(--radius-2xl) !important;
  padding: 1.5rem !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  transition: all var(--transition-normal) !important;
  overflow: visible !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  height: 100% !important;
}

@media (min-width: 768px) {
  .feature-card-premium {
    align-items: flex-start !important;
    text-align: left !important;
  }
}

@media (min-width: 640px) {
  .feature-card-premium {
    padding: 2rem !important;
  }
}

.feature-card-premium:hover {
  border-color: var(--gold-primary) !important;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  transform: translateY(-4px) !important;
}

.feature-card-icon-wrapper {
  width: 4.5rem !important;
  height: 4.5rem !important;
  background: linear-gradient(
    135deg,
    var(--gold-primary) 0%,
    var(--gold-secondary) 100%
  ) !important;
  border-radius: var(--radius-xl) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.3) !important;
  flex-shrink: 0 !important;
}

@media (min-width: 640px) {
  .feature-card-icon-wrapper {
    width: 5rem !important;
    height: 5rem !important;
    margin-bottom: 1.5rem !important;
  }
}

.feature-card-icon {
  width: 2rem !important;
  height: 2rem !important;
  color: var(--white-pure) !important;
  flex-shrink: 0 !important;
}

/* Landing benefit cards: photographic illustrations above copy */

.feature-card-media {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 1376 / 768 !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 4px 12px rgba(0, 26, 61, 0.08) !important;
  border: 1px solid var(--gray-200) !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
  background: var(--gray-50) !important;
}

@media (min-width: 640px) {
  .feature-card-media {
    margin-bottom: 1.5rem !important;
  }
}

.feature-card-benefit-image {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  -o-object-position: center !important;
     object-position: center !important;
  display: block !important;
}

.feature-card-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--navy-primary) !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

/* Override any conflicting text colors for feature card description */

.feature-card-premium .feature-card-description,
.feature-card-description {
  font-size: 1rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
  flex-grow: 1 !important;
}

/* Override any conflicting text colors for feature card title */

.feature-card-premium .feature-card-title,
.feature-card-premium h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--navy-primary) !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

.feature-card-benefit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin-top: auto !important;
  padding-top: 0.75rem !important;
}

.feature-card-check-icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
  color: #059669 !important;
  flex-shrink: 0 !important;
}

/* Override any conflicting text colors for feature card benefit text */

.feature-card-premium .feature-card-benefit-text,
.feature-card-benefit-text {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  line-height: 1.4 !important;
}

/* Ensure feature cards maintain proper colors even with global overrides */

.feature-card-premium * {
  box-sizing: border-box !important;
}

.feature-card-premium p,
.feature-card-premium span:not(.feature-card-icon) {
  color: var(--text-secondary) !important;
}

.feature-card-premium h3,
.feature-card-premium .feature-card-title {
  color: var(--navy-primary) !important;
}

/* Promotional Box Premium - Conversion Optimized with White & Gold */

.promo-box-premium {
  background: linear-gradient(
    135deg,
    var(--navy-dark) 0%,
    var(--navy-primary) 50%,
    var(--navy-dark) 100%
  ) !important;
  border: 2px solid var(--gold-light) !important;
  border-radius: var(--radius-2xl) !important;
  padding: 1.5rem 1.25rem !important;
  margin: 0 auto 1.5rem auto !important;
  max-width: 48rem !important;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2),
    0 0 30px rgba(255, 215, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
  overflow: visible !important;
  transition: all var(--transition-normal) !important;
}

.promo-box-premium:hover {
  border-color: var(--gold-light) !important;
  box-shadow:
    0 25px 30px -5px rgba(0, 0, 0, 0.4),
    0 15px 15px -5px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(255, 215, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px) !important;
}

@media (min-width: 640px) {
  .promo-box-premium {
    padding: 2rem 1.75rem !important;
    margin-bottom: 2rem !important;
  }
}

.promo-box-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  margin-bottom: 1rem !important;
}

@media (min-width: 640px) {
  .promo-box-header {
    gap: 1rem !important;
    margin-bottom: 1.25rem !important;
  }
}

.promo-box-clock-icon {
  width: 1.75rem !important;
  height: 1.75rem !important;
  color: var(--gold-light) !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.4)) !important;
}

@media (min-width: 640px) {
  .promo-box-clock-icon {
    width: 2rem !important;
    height: 2rem !important;
  }
}

@media (min-width: 1024px) {
  .promo-box-clock-icon {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }
}

.promo-box-price {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--white-pure) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(255, 215, 0, 0.4),
    0 0 24px rgba(255, 215, 0, 0.2) !important;
  position: relative !important;
}

@media (min-width: 640px) {
  .promo-box-price {
    font-size: 1.5rem !important;
  }
}

@media (min-width: 1024px) {
  .promo-box-price {
    font-size: 2rem !important;
  }
}

.promo-box-badge {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: var(--white-pure) !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  box-shadow:
    0 4px 12px rgba(220, 38, 38, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.3) !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

@media (min-width: 640px) {
  .promo-box-badge {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }
}

.promo-box-description {
  font-size: 0.875rem !important;
  color: var(--white-pure) !important;
  text-align: center !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  max-width: 42rem !important;
  margin: 0 auto !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  opacity: 0.95 !important;
}

@media (min-width: 640px) {
  .promo-box-description {
    font-size: 1rem !important;
  }
}

@media (min-width: 1024px) {
  .promo-box-description {
    font-size: 1.125rem !important;
  }
}

/* Ensure promotional box colors are never overridden */

.promo-box-premium * {
  box-sizing: border-box !important;
}

.promo-box-premium .promo-box-price,
.promo-box-premium .promo-box-description {
  color: var(--white-pure) !important;
}

.promo-box-premium .promo-box-clock-icon {
  color: var(--gold-light) !important;
}

/* Gradient Section System - Proper Height & Overlay Handling */

/* Hero Section with Video Background */

.hero-section-gradient {
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  display: flex;
  align-items: center;
  padding: 3rem 0;
  /* Height adjusts to content */
  height: auto;
  min-height: 0;
}

.hero-section-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-section-decoration);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.75%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3C/filter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url(%23n)%27%20opacity%3D%270.45%27/%3E%3C/svg%3E");
  background-size: 320px 320px;
  opacity: 0.022;
  mix-blend-mode: soft-light;
}

.hero-section-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-section-decoration);
  pointer-events: none;
  background:
    radial-gradient(1000px 520px at 82% 38%, rgba(214, 179, 90, 0.22) 0%, rgba(214, 179, 90, 0.12) 28%, rgba(214, 179, 90, 0) 72%),
    radial-gradient(920px 520px at 76% 34%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 62%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

@media (min-width: 640px) {
  .hero-section-gradient {
    padding: 4rem 0;
    min-height: 60vh;
  }
}

@media (min-width: 1024px) {
  .hero-section-gradient {
    min-height: 70vh;
  }
}

.hero-section-gradient .hero-bg-image {
  background-position: 70% center;
  filter: brightness(1.05) contrast(1.08) saturate(1.03);
}

.hero-section-gradient .hero-headline {
  line-height: 1.1 !important;
}

.hero-section-gradient .hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.64) 0%,
    rgba(0, 0, 0, 0.46) 35%,
    rgba(0, 0, 0, 0.16) 65%,
    rgba(0, 0, 0, 0.05) 100%
  ) !important;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero-section-gradient {
    padding: 3.5rem 0;
  }

  .hero-section-gradient .hero-bg-image {
    background-position: 68% center !important;
  }

  .hero-section-gradient .hero-content {
    max-width: 520px !important;
  }

  .hero-section-gradient .hero-headline {
    font-size: clamp(48px, 5vw, 72px) !important;
  }

  .hero-section-gradient .hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.45) 35%,
      rgba(0, 0, 0, 0.15) 65%,
      rgba(0, 0, 0, 0.05) 100%
    ) !important;
  }
}

/* Ensure hero containers size to content */

.hero-section-gradient .container {
  height: auto;
  min-height: 0;
}

/* ==========================================================================
   GRADIENT SECTIONS - SIMPLIFIED AND CLEAN
   ========================================================================== */

/* Base gradient section */

.gradient-section {
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
}

/* Gradient section with overlay */

.gradient-section-with-overlay {
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  background: linear-gradient(
    135deg,
    var(--navy-dark) 0%,
    var(--navy-primary) 50%,
    var(--navy-dark) 100%
  );
  box-sizing: border-box;
  /* Responsive padding */
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 640px) {
  .gradient-section-with-overlay {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1024px) {
  .gradient-section-with-overlay {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

@media (min-width: 1280px) {
  .gradient-section-with-overlay {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* Container within gradient sections */

.gradient-section-with-overlay .container,
.gradient-section-with-overlay > .container {
  position: relative;
  z-index: var(--z-section-content);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
  /* CRITICAL: Ensure container height adjusts to content */
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
}

/* Overlay - matches section height automatically */

.gradient-section-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--z-section-overlay);
  pointer-events: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.gradient-section-overlay.opacity-30 {
  background-color: rgba(0, 0, 0, 0.3);
}

.gradient-section-overlay.opacity-40 {
  background-color: rgba(0, 0, 0, 0.4);
}

.gradient-section-overlay.opacity-50 {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Decorative background elements */

.gradient-section-with-overlay
  [class*="absolute"][class*="inset-0"]:not(.gradient-section-overlay) {
  z-index: var(--z-section-decoration);
}

/* Blog Post Meta Information - Ensure proper white text with shadows */

.blog-post-meta,
.blog-post-meta * {
  color: var(--white-pure) !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.blog-post-meta svg {
  color: var(--white-pure) !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
}

.blog-post-meta button:hover {
  opacity: 1 !important;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.7),
    0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* Blog post hero with featured image */

.blog-post-hero-with-image {
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
  box-sizing: border-box;
}

.blog-post-hero-with-image
  > div[class*="absolute"][class*="inset-0"]:first-of-type {
  position: absolute;
  z-index: var(--z-section-background);
}

.blog-post-hero-with-image .container {
  position: relative;
  z-index: var(--z-section-content);
  /* Only set min-height for blog hero, allow natural height otherwise */
  min-height: 24rem;
  height: auto;
}

@media (min-width: 1024px) {
  .blog-post-hero-with-image .container {
    min-height: 31.25rem;
    height: auto;
  }
}

/* Full-screen gradient sections (LoginPage, PaymentCouponPage, etc.) */

div[class*="bg-gradient-hero"][class*="min-h-screen"] {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Ensure card borders are never clipped - FIXED */

.card,
.card-premium,
[class*="card"],
[class*="bg-white"][class*="rounded"] {
  position: relative;
  overflow: visible !important;
  box-sizing: border-box;
  /* Ensure borders are fully visible by allowing overflow */
}

/* CRITICAL: Fix for all sections - prevent top truncation */

/* BUT: sections MUST allow overflow-y for sticky positioning to work */

/* This is the SINGLE source of truth for section overflow */

section {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  position: relative !important;
}

/* Sections with overflow-hidden class should still allow sticky children */

/* CRITICAL: Even sections with overflow-hidden must allow overflow-y for sticky */

section[class*="overflow-hidden"] {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  position: relative !important;
}

/* Page container and content should allow overflow - BUT preserve sticky positioning */

.page-container,
.page-content {
  overflow: visible !important;
  position: relative;
}

/* Main should allow vertical overflow but prevent horizontal for sticky to work */

/* This rule is consolidated above - removing duplicate */

/* Tables should handle long content */

table {
  /* Prevent table overflow */
  overflow-x: auto;
  /* Ensure table cells wrap properly */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

table td,
table th {
  /* Break long text in table cells */
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Utility classes for text overflow control */

.text-contain {
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

.text-break-all {
  word-break: break-all;
  overflow-wrap: anywhere;
}

.text-break-normal {
  word-break: normal;
  overflow-wrap: normal;
}

/* Multi-row layout utilities */

.grid-responsive-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .grid-responsive-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-responsive-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .grid-responsive-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-responsive-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Better responsive flex layouts */

.flex-responsive {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .flex-responsive {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Content containers that adapt to content length */

.content-adaptive {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.content-adaptive > * {
  min-width: 0;
  /* Allow flex items to shrink below their minimum content size */
}

/* CRITICAL: Prevent icons and images from shrinking in content-adaptive containers */

.content-adaptive > svg,
.content-adaptive > img,
.content-adaptive > [class*="icon"],
.content-adaptive svg[class*="w-"],
.content-adaptive svg[class*="h-"],
.content-adaptive img[class*="w-"],
.content-adaptive img[class*="h-"] {
  min-width: auto !important;
  flex-shrink: 0 !important;
}

/* Button text that adapts to container size */

.btn-text-responsive {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 640px) {
  .btn-text-responsive {
    white-space: normal;
  }
}

/* Card content that wraps properly */

.card-content-responsive {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card-content-responsive > * {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ==========================================================================
   BUTTON STYLES - PRODUCTION READY
   ========================================================================== */

/* Base button styles */

.flex.btn.gap-2.ml-4 {
    margin-left: 0.5rem;
    flex-shrink: 0;
  }

@media (max-width: 640px) {
    .flex.btn.gap-2.ml-4 {
      flex-direction: column;
      gap: 0.25rem;
    }
  }


  button[role="switch"].relative.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 9999px;
    transition: background-color 0.3s ease;
    width: 2.75rem;
    height: 1.5rem;
  }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  font-weight: 600;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.flex.btn > label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    align-self: center;
  }

.btn > * {
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.btn:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn {
  border: none;
  border-radius: var(--radius-xl) !important;
  /* CRITICAL: Ensure all buttons use consistent rounded-xl (12px) */
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: visible;
  /* Changed from hidden to visible to prevent edge clipping on hover transforms */
  backface-visibility: hidden;
  /* Prevent flickering on transform */
  -webkit-font-smoothing: antialiased;
  /* Smooth text rendering */
  transform-style: preserve-3d;
  /* Optimize 3D transforms */
  min-height: 44px;
  /* Prevent text selection issues */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Button variants */

.btn-primary,
a.btn-primary {
  background: linear-gradient(
    135deg,
    var(--gold-light) 0%,
    var(--gold-secondary) 25%,
    var(--gold-primary) 50%,
    var(--gold-secondary) 75%,
    var(--gold-light) 100%
  );
  background-size: 200% 200%;
  animation: goldShimmer 4s ease-in-out infinite;
  color: white !important;
  /* WCAG: White text on gold gradient meets 4.5:1 (gold-primary #b8860b vs white = 4.8:1) */
  box-shadow:
    0 4px 6px -1px rgba(184, 134, 11, 0.1),
    0 2px 4px -1px rgba(184, 134, 11, 0.06);
  border: 2px solid transparent;
}

/* Removed white gradient shimmer effect on primary button */

.btn-primary:hover,
a.btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(
    135deg,
    var(--gold-light) 0%,
    var(--gold-secondary) 25%,
    var(--gold-primary) 50%,
    var(--gold-secondary) 75%,
    var(--gold-light) 100%
  ) !important;
  /* CRITICAL: Maintain gold gradient on hover */
  background-size: 200% 200% !important;
  box-shadow:
    0 10px 15px -3px rgba(184, 134, 11, 0.2),
    0 4px 6px -2px rgba(184, 134, 11, 0.1);
  border-color: var(--gold-secondary);
  color: white !important;
  /* WCAG: Ensure white text on gold gradient */
  will-change: transform, box-shadow;
  /* Optimize for smooth transitions */
}

.btn-primary:active,
a.btn-primary:active {
  transform: translateY(0);
  background: linear-gradient(
    135deg,
    var(--gold-light) 0%,
    var(--gold-secondary) 25%,
    var(--gold-primary) 50%,
    var(--gold-secondary) 75%,
    var(--gold-light) 100%
  ) !important;
  /* CRITICAL: Maintain gold gradient on active */
  background-size: 200% 200% !important;
  box-shadow:
    0 4px 6px -1px rgba(184, 134, 11, 0.2),
    0 2px 4px -1px rgba(184, 134, 11, 0.1);
  color: white !important;
  /* WCAG: Ensure white text on gold gradient */
}

.btn-primary:focus,
a.btn-primary:focus {
  background: linear-gradient(
    135deg,
    var(--gold-light) 0%,
    var(--gold-secondary) 25%,
    var(--gold-primary) 50%,
    var(--gold-secondary) 75%,
    var(--gold-light) 100%
  ) !important;
  /* CRITICAL: Maintain gold gradient on focus */
  background-size: 200% 200% !important;
  color: white !important;
  /* WCAG: Ensure white text on gold gradient */
}

.btn-primary:disabled,
.btn-primary[disabled],
button.btn-primary:disabled,
button.btn-primary[disabled],
a.btn-primary:disabled,
a.btn-primary[disabled] {
  color: white !important;
  /* Ensure white text even when disabled */
  opacity: 0.5;
}

.btn-primary:disabled *,
.btn-primary[disabled] *,
button.btn-primary:disabled *,
button.btn-primary[disabled] *,
a.btn-primary:disabled *,
a.btn-primary[disabled] * {
  color: white !important;
  /* Ensure white text on icons even when disabled */
}

.btn-secondary[class*="rounded"] {
    border: 1px solid var(--navy-ultra-light);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-2xl);
    overflow: visible;
    position: relative;
    /* Prevent border truncation - add minimal margin for borders */
    box-sizing: border-box;
  }

.btn-secondary[class*="rounded"]:not([class*="max-w-"]) {
    max-width: 100%;
    overflow-x: visible;
    word-wrap: break-word;
    box-sizing: border-box;
  }

@media (max-width: 640px) {
    .btn-secondary[class*="p-8"] {
      padding: 1rem;
    }

    .btn-secondary[class*="p-6"] {
      padding: 1rem;
    }

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
    .btn-secondary[class*="p-8"] {
      padding: 1rem;
    }

    .btn-secondary[class*="p-6"] {
      padding: 1rem;
    }

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
  }

@media (min-width: 641px) and (max-width: 1024px) {
    /* Tablet adjustments */
    .btn-secondary[class*="p-8"] {
      padding: 1.5rem;
    }

    /* Button groups stay in single row on tablet */

    /* Stats cards in 2 columns on tablet */
  }

.btn-secondary {
    background-color: var(--white-pure);
  }

.btn-secondary .hover\\:text-white:hover,.btn-secondary button:hover[class*="hover:text-white"],.btn-secondary a:hover[class*="hover:text-white"] {
    color: var(--navy-primary);
  }


  button[role="switch"] > span.btn-secondary,
  button[role="switch"] > span[class*="inline-block"].btn-secondary {
    display: inline-block;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: transparent;
  }

.btn-secondary {
  border-width: 2px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.high-contrast .btn-secondary {
  background-color: #ffffff;
  color: #000000;
}

@media (prefers-contrast: high) {
  .btn-secondary {
    background-color: #ffffff;
    color: #000000;
  }
}

@media (forced-colors: active) {
  .btn-secondary {
    background-color: Canvas;
    color: CanvasText;
  }
  .btn-secondary * {
    color: CanvasText;
  }
}

.btn-secondary:hover {
    background-color: var(--gray-50);
  }

.btn-secondary:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--navy-primary);
  --tw-ring-offset-width: 2px;
}

.btn-secondary {
  color: var(--navy-primary) !important;
  /* WCAG: Navy text on white meets 4.5:1 (#031774 vs #ffffff = 11.8:1) */
  border-color: var(--navy-primary);
  box-shadow:
    0 1px 3px 0 rgba(3, 23, 116, 0.1),
    0 1px 2px 0 rgba(3, 23, 116, 0.06);
}

.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 6px -1px rgba(3, 23, 116, 0.1),
    0 2px 4px -1px rgba(3, 23, 116, 0.06);
  border-color: var(--navy-secondary);
  color: var(--navy-primary) !important;
  /* WCAG: Navy text on white/gray-50 meets 4.5:1 */
  background-color: #f9fafb !important;
  /* Ensure gray-50 background for contrast */
  will-change: transform, box-shadow;
  /* Optimize for smooth transitions */
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px -1px rgba(3, 23, 116, 0.1);
  color: var(--navy-primary) !important;
  /* WCAG: Navy text on white meets 4.5:1 */
  background-color: #ffffff !important;
}

.btn-secondary:focus {
  color: var(--navy-primary) !important;
  /* WCAG: Navy text on white meets 4.5:1 */
}

/* Gold Button - For buttons with gold gradient backgrounds */

.btn-gold {
  background: linear-gradient(
    to right,
    var(--gold-primary),
    var(--gold-secondary)
  );
  color: white !important;
  /* CRITICAL: White text on gold background */
  border: 2px solid transparent;
  box-shadow:
    0 4px 6px -1px rgba(184, 134, 11, 0.1),
    0 2px 4px -1px rgba(184, 134, 11, 0.06);
  font-size: 1rem !important;
  /* 16px base font size - ensure readable */
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* Gold button size variants - ensure proper font sizes */

.btn-gold.text-sm {
  font-size: 0.875rem !important;
  /* 14px */
}

.btn-gold.text-base {
  font-size: 1rem !important;
  /* 16px */
}

.btn-gold.text-lg {
  font-size: 1.125rem !important;
  /* 18px */
}

.btn-gold:hover {
  transform: translateY(-1px);
  background: linear-gradient(
    to right,
    var(--gold-primary),
    var(--gold-secondary)
  ) !important;
  box-shadow:
    0 10px 15px -3px rgba(184, 134, 11, 0.2),
    0 4px 6px -2px rgba(184, 134, 11, 0.1);
  color: white !important;
}

.btn-gold:active {
  transform: translateY(0);
  box-shadow:
    0 4px 6px -1px rgba(184, 134, 11, 0.2),
    0 2px 4px -1px rgba(184, 134, 11, 0.1);
  color: white !important;
}

.btn-gold:focus {
  background: linear-gradient(
    to right,
    var(--gold-primary),
    var(--gold-secondary)
  ) !important;
  color: white !important;
  outline: 2px solid var(--gold-primary);
  outline-offset: 2px;
}

.btn-gold *,
.btn-gold svg,
.btn-gold path {
  color: white !important;
  stroke: white !important;
  fill: none !important;
  stroke-width: 2 !important;
}

.btn-gold:disabled,
.btn-gold[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  color: white !important;
}

.btn-gold:disabled *,
.btn-gold[disabled] * {
  color: white !important;
}

/* CRITICAL: Catch-all rule for any button with gold gradient backgrounds - ensure white text and proper font size */

button[class*="bg-gradient-to-r"][class*="from-gold-primary"][class*="to-gold-secondary"],
button[class*="bg-gradient-to-r"][class*="from-gold-primary"][class*="to-gold-secondary"]
  *,
button[class*="bg-gradient-gold-premium"],
button[class*="bg-gradient-gold-premium"] * {
  color: white !important;
  font-size: 1rem !important;
  /* Ensure readable font size */
}

button[class*="bg-gradient-to-r"][class*="from-gold-primary"][class*="to-gold-secondary"]:hover,
button[class*="bg-gradient-gold-premium"]:hover {
  color: white !important;
}

button[class*="bg-gradient-to-r"][class*="from-gold-primary"][class*="to-gold-secondary"]:focus,
button[class*="bg-gradient-gold-premium"]:focus {
  color: white !important;
}

button[class*="bg-gradient-to-r"][class*="from-gold-primary"][class*="to-gold-secondary"]:active,
button[class*="bg-gradient-gold-premium"]:active {
  color: white !important;
}

/* CRITICAL: Ensure ALL icons inside gold background containers are white */

/* This covers divs, buttons, and any other containers with gold backgrounds */

div[class*="bg-gold-primary"]:not([class*="ultra-light"]):not([class*="pale"])
  svg,
div[class*="bg-gold-primary"]:not([class*="ultra-light"]):not([class*="pale"])
  svg
  *,
div[class*="bg-gold-secondary"]:not([class*="ultra-light"]):not([class*="pale"])
  svg,
div[class*="bg-gold-secondary"]:not([class*="ultra-light"]):not([class*="pale"])
  svg
  *,
div[class*="bg-gradient-gold"] svg,
div[class*="bg-gradient-gold"] svg *,
div[class*="bg-gradient-gold-premium"] svg,
div[class*="bg-gradient-gold-premium"] svg *,
div[class*="from-gold-primary"] svg,
div[class*="from-gold-primary"] svg *,
div[class*="to-gold-primary"] svg,
div[class*="to-gold-primary"] svg *,
div[class*="to-gold-secondary"] svg,
div[class*="to-gold-secondary"] svg *,
div[class*="via-gold"] svg,
div[class*="via-gold"] svg *,
[class*="bg-gold-primary"]:not([class*="ultra-light"]):not([class*="pale"]) svg,
[class*="bg-gold-primary"]:not([class*="ultra-light"]):not([class*="pale"])
  svg
  *,
[class*="bg-gold-secondary"]:not([class*="ultra-light"]):not([class*="pale"])
  svg,
[class*="bg-gold-secondary"]:not([class*="ultra-light"]):not([class*="pale"])
  svg
  *,
[class*="bg-gradient-gold"] svg,
[class*="bg-gradient-gold"] svg *,
[class*="from-gold-primary"] svg,
[class*="from-gold-primary"] svg *,
[class*="to-gold-primary"] svg,
[class*="to-gold-primary"] svg *,
[class*="to-gold-secondary"] svg,
[class*="to-gold-secondary"] svg * {
  color: white !important;
  stroke: white !important;
  fill: none !important;
}

/* Ensure icons in gold containers maintain white color on hover/focus/active */

div[class*="bg-gold-primary"]:not([class*="ultra-light"]):not(
    [class*="pale"]
  ):hover
  svg,
div[class*="bg-gold-primary"]:not([class*="ultra-light"]):not(
    [class*="pale"]
  ):hover
  svg
  *,
div[class*="bg-gradient-gold"]:hover svg,
div[class*="bg-gradient-gold"]:hover svg *,
div[class*="bg-gradient-gold-premium"]:hover svg,
div[class*="bg-gradient-gold-premium"]:hover svg *,
[class*="from-gold-primary"]:hover svg,
[class*="from-gold-primary"]:hover svg *,
[class*="to-gold-primary"]:hover svg,
[class*="to-gold-primary"]:hover svg *,
[class*="to-gold-secondary"]:hover svg,
[class*="to-gold-secondary"]:hover svg * {
  color: white !important;
  stroke: white !important;
}

.btn-outline[class*="rounded"] {
    border: 1px solid var(--navy-ultra-light);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-2xl);
    overflow: visible;
    position: relative;
    /* Prevent border truncation - add minimal margin for borders */
    box-sizing: border-box;
  }

.btn-outline[class*="rounded"]:not([class*="max-w-"]) {
    max-width: 100%;
    overflow-x: visible;
    word-wrap: break-word;
    box-sizing: border-box;
  }

@media (max-width: 640px) {
    .btn-outline[class*="p-8"] {
      padding: 1rem;
    }

    .btn-outline[class*="p-6"] {
      padding: 1rem;
    }

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
    .btn-outline[class*="p-8"] {
      padding: 1rem;
    }

    .btn-outline[class*="p-6"] {
      padding: 1rem;
    }

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
  }

@media (min-width: 641px) and (max-width: 1024px) {
    /* Tablet adjustments */
    .btn-outline[class*="p-8"] {
      padding: 1.5rem;
    }

    /* Button groups stay in single row on tablet */

    /* Stats cards in 2 columns on tablet */
  }

.btn-outline {
    background-color: var(--white-pure);
  }

.btn-outline .hover\\:text-white:hover,.btn-outline button:hover[class*="hover:text-white"],.btn-outline a:hover[class*="hover:text-white"] {
    color: var(--navy-primary);
  }


  button[role="switch"] > span.btn-outline,
  button[role="switch"] > span[class*="inline-block"].btn-outline {
    display: inline-block;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: transparent;
  }

.btn-outline {
  border-width: 2px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.high-contrast .btn-outline {
  background-color: #ffffff;
  color: #000000;
}

@media (prefers-contrast: high) {
  .btn-outline {
    background-color: #ffffff;
    color: #000000;
  }
}

@media (forced-colors: active) {
  .btn-outline {
    background-color: Canvas;
    color: CanvasText;
  }
  .btn-outline * {
    color: CanvasText;
  }
}

.btn-outline:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--navy-primary);
  --tw-ring-offset-width: 2px;
}

.btn-outline {
  color: var(--navy-primary) !important;
  /* WCAG: Navy text on white meets 4.5:1 (#031774 vs #ffffff = 11.8:1) */
  border-color: var(--navy-primary);
  box-shadow:
    0 1px 3px 0 rgba(3, 23, 116, 0.1),
    0 1px 2px 0 rgba(3, 23, 116, 0.06);
}

.btn-outline:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 6px -1px rgba(3, 23, 116, 0.1),
    0 2px 4px -1px rgba(3, 23, 116, 0.06);
  border-color: var(--navy-secondary);
  background-color: var(--navy-primary) !important;
  /* WCAG: Navy background for white text */
  color: white !important;
  /* WCAG: White text on navy meets 4.5:1 */
  will-change: transform, box-shadow;
  /* Optimize for smooth transitions */
}

.btn-outline:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px -1px rgba(3, 23, 116, 0.1);
  background-color: var(--navy-primary) !important;
  /* WCAG: Navy background for white text */
  color: white !important;
  /* WCAG: White text on navy meets 4.5:1 */
}

.btn-outline:focus {
  background-color: var(--navy-primary) !important;
  /* WCAG: Navy background for white text */
  color: white !important;
  /* WCAG: White text on navy meets 4.5:1 */
}

/* Allow outline buttons with explicit light hover backgrounds to keep them */

.btn-outline[class*="hover:bg-navy-ultra-light"]:hover,
.btn-outline[class*="hover:bg-navy-ultra-light"]:focus,
.btn-outline[class*="hover:bg-navy-ultra-light"]:active {
  background-color: var(--navy-ultra-light) !important;
  color: var(--navy-primary) !important;
  border-color: var(--navy-primary) !important;
}

.btn-outline[class*="hover:bg-gold-50"]:hover,
.btn-outline[class*="hover:bg-gold-50"]:focus,
.btn-outline[class*="hover:bg-gold-50"]:active {
  background-color: var(--gold-pale) !important;
  color: var(--navy-primary) !important;
  border-color: var(--gold-primary) !important;
}

.btn-outline[class~="hover:bg-red-50"]:hover,
.btn-outline[class~="hover:bg-red-50"]:focus,
.btn-outline[class~="hover:bg-red-50"]:active {
  background-color: var(--error-light) !important;
  color: #b91c1c !important;
  border-color: #fca5a5 !important;
}

.btn-light[class*="rounded"] {
    border: 1px solid var(--navy-ultra-light);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-2xl);
    overflow: visible;
    position: relative;
    /* Prevent border truncation - add minimal margin for borders */
    box-sizing: border-box;
  }

.btn-light[class*="rounded"]:not([class*="max-w-"]) {
    max-width: 100%;
    overflow-x: visible;
    word-wrap: break-word;
    box-sizing: border-box;
  }

@media (max-width: 640px) {
    .btn-light[class*="p-8"] {
      padding: 1rem;
    }

    .btn-light[class*="p-6"] {
      padding: 1rem;
    }

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
    .btn-light[class*="p-8"] {
      padding: 1rem;
    }

    .btn-light[class*="p-6"] {
      padding: 1rem;
    }

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
  }

@media (min-width: 641px) and (max-width: 1024px) {
    /* Tablet adjustments */
    .btn-light[class*="p-8"] {
      padding: 1.5rem;
    }

    /* Button groups stay in single row on tablet */

    /* Stats cards in 2 columns on tablet */
  }

.btn-light {
    background-color: var(--white-pure);
    border-color: var(--gray-300);
  }

.btn-light .hover\\:text-white:hover,.btn-light button:hover[class*="hover:text-white"],.btn-light a:hover[class*="hover:text-white"] {
    color: var(--navy-primary);
  }


  button[role="switch"] > span.btn-light,
  button[role="switch"] > span[class*="inline-block"].btn-light {
    display: inline-block;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: transparent;
  }

.btn-light {
  border-width: 1px;
  border-color: var(--gray-300);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.high-contrast .btn-light {
  background-color: #ffffff;
  color: #000000;
}

@media (prefers-contrast: high) {
  .btn-light {
    background-color: #ffffff;
    color: #000000;
  }
}

@media (forced-colors: active) {
  .btn-light {
    background-color: Canvas;
    color: CanvasText;
  }
  .btn-light * {
    color: CanvasText;
  }
}

.btn-light:hover {
    background-color: var(--gray-50);
  }

.btn-light:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--gray-500);
  --tw-ring-offset-width: 2px;
}

.btn-light {
  color: var(--navy-primary) !important;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.btn-light:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-color: var(--navy-light);
  color: var(--navy-primary) !important;
  /* WCAG: Navy text on gray-50 meets 4.5:1 */
  background-color: #f9fafb !important;
  /* Light gray background on hover */
  will-change: transform, box-shadow;
  /* Optimize for smooth transitions */
}

.btn-light:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
  color: var(--navy-primary) !important;
  /* WCAG: Navy text on white meets 4.5:1 */
  background-color: #ffffff !important;
}

.btn-light:focus {
  color: var(--navy-primary) !important;
  /* WCAG: Navy text on white meets 4.5:1 */
}

/* CRITICAL: Ensure icons in all buttons have proper color and contrast - WCAG compliant */

/* Icons for button variants inherit text color */

.btn-primary svg,
.btn-primary path,
a.btn-primary svg,
a.btn-primary path,
.btn-secondary svg,
.btn-secondary path,
.btn-light svg,
.btn-light path,
.btn-ghost svg,
.btn-ghost path,
.btn-outline svg,
.btn-outline path,
.btn-danger svg,
.btn-danger path,
.btn-gold svg,
.btn-gold path {
  color: inherit !important;
  stroke: currentColor !important;
}

/* Outline buttons switch to white icons when background becomes navy */

button.btn-outline:hover svg,
button.btn-outline:hover path,
a.btn-outline:hover svg,
a.btn-outline:hover path,
.btn-outline:hover svg,
.btn-outline:hover path,
button.btn-outline:focus svg,
button.btn-outline:focus path,
a.btn-outline:focus svg,
a.btn-outline:focus path,
.btn-outline:focus svg,
.btn-outline:focus path,
button.btn-outline:active svg,
button.btn-outline:active path,
a.btn-outline:active svg,
a.btn-outline:active path,
.btn-outline:active svg,
.btn-outline:active path {
  color: inherit !important;
}

.btn-danger svg,
.btn-danger path,
.btn-danger * {
  color: white !important;
  /* WCAG: White icons on red background */
  fill: none !important;
  stroke: white !important;
  stroke-width: 2 !important;
}

.btn-danger:hover svg,
.btn-danger:hover path,
.btn-danger:hover *,
.btn-danger:active svg,
.btn-danger:active path,
.btn-danger:active *,
.btn-danger:focus svg,
.btn-danger:focus path,
.btn-danger:focus * {
  color: white !important;
  /* WCAG: White icons on red background */
  fill: none !important;
  stroke: white !important;
  stroke-width: 2 !important;
}

.btn-danger span,.btn-danger div,.btn-danger p,.btn-danger *,
  button.btn-danger,
  button.btn-danger * {
    color: white;
  }

.btn-danger {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.btn-danger:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}

.btn-danger {
  color: white !important;
  /* WCAG: White text on red-500 meets 4.5:1 (#ef4444 vs #ffffff = 4.6:1) */
  box-shadow:
    0 4px 6px -1px rgba(220, 38, 38, 0.1),
    0 2px 4px -1px rgba(220, 38, 38, 0.06);
}

.btn-danger:hover:hover {
    background-color: #dc2626;
    /* darker red */
  }

.btn-danger:hover span,.btn-danger:hover div,.btn-danger:hover p,.btn-danger:hover *,
  button.btn-danger:hover,
  button.btn-danger:hover * {
    color: white;
  }

.btn-danger:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
  transform: translateY(-2px);
  box-shadow:
    0 10px 15px -3px rgba(220, 38, 38, 0.2),
    0 4px 6px -2px rgba(220, 38, 38, 0.1);
  color: white !important;
  /* WCAG: White text on red-600 meets 4.5:1 */
  will-change: transform, box-shadow;
  /* Optimize for smooth transitions */
}

.btn-danger:active {
  transform: translateY(0);
  box-shadow:
    0 4px 6px -1px rgba(220, 38, 38, 0.2),
    0 2px 4px -1px rgba(220, 38, 38, 0.1);
  color: white !important;
  /* WCAG: White text on red-500 meets 4.5:1 */
}

.btn-danger:focus {
  color: white !important;
  /* WCAG: White text on red-500 meets 4.5:1 */
}

.btn-ghost {
  background-color: transparent;
}

.btn-ghost:hover {
    background-color: var(--gray-50);
  }

.btn-ghost:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--navy-primary);
  --tw-ring-offset-width: 2px;
}

.btn-ghost {
  color: var(--navy-primary) !important;
  /* WCAG: Navy text on transparent/white meets 4.5:1 (#031774 vs #ffffff = 11.8:1) */
  transition: all 0.3s ease;
}

.btn-ghost:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 6px -1px rgba(3, 23, 116, 0.1),
    0 2px 4px -1px rgba(3, 23, 116, 0.06);
  background-color: #f9fafb !important;
  /* WCAG: Gray-50 background for navy text */
  color: var(--navy-primary) !important;
  /* WCAG: Navy text on gray-50 meets 4.5:1 */
  will-change: transform, box-shadow;
  /* Optimize for smooth transitions */
}

.btn-ghost:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px -1px rgba(3, 23, 116, 0.1);
  background-color: #f3f4f6 !important;
  /* Slightly darker on active */
  color: var(--navy-primary) !important;
  /* WCAG: Navy text on gray-100 meets 4.5:1 */
}

.btn-ghost:focus {
  color: var(--navy-primary) !important;
  /* WCAG: Navy text on transparent/white meets 4.5:1 */
}

/* Button sizes */

.btn-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-secondary);
  }

.btn-sm.text-gray-500,.btn-sm.text-gray-600 {
    color: var(--text-tertiary);
  }

.btn-sm.text-gray-700 {
    color: var(--text-secondary);
  }

.btn-sm.text-gray-900 {
    color: var(--text-primary);
  }

.search-dropdown a p.btn-sm {
    color: var(--navy-dark);
  }

.btn-sm .btn-icon {
    padding: 0.5rem;
  }

.btn-sm {
  min-height: 36px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

[data-font-size="small"] .btn-sm {
  font-size: 0.8125rem;
}

[data-font-size="large"] .btn-sm {
  font-size: 1rem;
}

.btn-gold.btn-sm {
  font-size: 0.875rem;
  /* 14px */
}

.btn-md {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--text-secondary);
  }

.btn-md.text-gray-700 {
    color: var(--text-secondary);
  }

.btn-md.text-gray-900 {
    color: var(--text-primary);
  }

.btn-md {
  min-height: 44px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

[data-font-size="small"] .btn-md {
  font-size: 0.875rem;
}

[data-font-size="large"] .btn-md {
  font-size: 1.125rem;
}

.btn-gold.btn-md {
  font-size: 1rem;
  /* 16px */
}

.btn-lg {
    color: var(--text-secondary);
    min-height: 52px;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

[data-font-size="small"] .btn-lg {
  font-size: 1rem;
}

[data-font-size="large"] .btn-lg {
  font-size: 1.25rem;
}

.btn-gold.btn-lg {
  font-size: 1.125rem;
  /* 18px */
}

/* Button states - REMOVED DUPLICATE: hover transforms already defined in button variants above */

/* Disabled states - WCAG compliant with proper contrast */

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-outline:disabled,
.btn-light:disabled,
.btn-danger:disabled,
.btn-ghost:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.gradient-section-overlay.btn:disabled,.gradient-section-overlay
.btn-primary:disabled,.gradient-section-overlay
.btn-secondary:disabled,.gradient-section-overlay
.btn-outline:disabled,.gradient-section-overlay
.btn-light:disabled,.gradient-section-overlay
.btn-danger:disabled,.gradient-section-overlay
.btn-ghost:disabled {
  background-color: rgba(0, 0, 0, 0.5);
}

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-outline:disabled,
.btn-light:disabled,
.btn-danger:disabled,
.btn-ghost:disabled {
  transform: none !important;
  box-shadow: none !important;
  animation: none !important;
  pointer-events: none;
}

/* WCAG: Ensure disabled buttons maintain text readability with proper contrast */

.btn-primary:disabled,
.btn-primary[disabled] {
  color: white !important;
  /* WCAG: White text on gold gradient (reduced opacity still meets 4.5:1) */
  background: linear-gradient(
    135deg,
    var(--gold-light) 0%,
    var(--gold-secondary) 25%,
    var(--gold-primary) 50%,
    var(--gold-secondary) 75%,
    var(--gold-light) 100%
  ) !important;
}

.btn-primary:disabled *,
.btn-primary[disabled] * {
  color: white !important;
  /* WCAG: White text on gold gradient */
}

.btn-secondary:disabled,
.btn-secondary[disabled],
.btn-outline:disabled,
.btn-outline[disabled],
.btn-light:disabled,
.btn-light[disabled],
.btn-ghost:disabled,
.btn-ghost[disabled] {
  color: var(--navy-primary) !important;
  /* WCAG: Navy text on white/gray meets 4.5:1 */
  background-color: #f9fafb !important;
  /* Light gray background for disabled state */
}

/* CRITICAL: Buttons with grey backgrounds should have grey text, not primary colors */

button.disabled-button-grey,
button.disabled-button-grey *,
button[class*="bg-gray-100"]:not([class*="bg-gradient"]):not(
    [class*="bg-navy"]
  ):not([class*="bg-gold"]):not([class*="bg-primary"]),
button[class*="bg-gray-100"]:not([class*="bg-gradient"]):not(
    [class*="bg-navy"]
  ):not([class*="bg-gold"]):not([class*="bg-primary"])
  * {
  color: #374151 !important;
  /* gray-700 - darker grey for better contrast on grey-100 */
  border-color: #9ca3af !important;
  /* gray-400 - grey border */
}

.btn-secondary:disabled *,
.btn-secondary[disabled] *,
.btn-outline:disabled *,
.btn-outline[disabled] *,
.btn-light:disabled *,
.btn-light[disabled] *,
.btn-ghost:disabled *,
.btn-ghost[disabled] * {
  color: var(--navy-primary) !important;
  /* WCAG: Navy text on white/gray */
}

.btn-danger:disabled,
.btn-danger[disabled] {
  color: white !important;
  /* WCAG: White text on red (reduced opacity still meets 4.5:1) */
  background-color: #ef4444 !important;
  /* Red-500 background */
}

.btn-danger:disabled *,
.btn-danger[disabled] * {
  color: white !important;
  /* WCAG: White text on red */
}

/* Focus states - WCAG AA compliant */

.btn:focus-visible {
  outline: 3px solid var(--gold-primary);
  outline-offset: 2px;
}

.btn-primary:focus-visible {
  outline: 3px solid var(--gold-primary);
  outline-offset: 2px;
}

.btn-secondary:focus-visible,
.btn-outline:focus-visible {
  outline: 3px solid var(--navy-primary);
  outline-offset: 2px;
}

.btn-light:focus-visible {
  outline: 3px solid var(--navy-primary);
  outline-offset: 2px;
}

.btn-danger:focus-visible {
  outline: 3px solid #dc2626;
  outline-offset: 2px;
}

.btn-ghost:focus-visible {
  outline: 3px solid var(--navy-primary);
  outline-offset: 2px;
}

/* Ensure high contrast mode overrides work properly */

@media (prefers-contrast: high) {
  .btn:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 2px !important;
  }

  .btn-primary {
    background: var(--gold-primary) !important;
    color: white !important;
  }

  .btn-secondary,
  .btn-outline {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
  }
}

/* Reduced motion support */

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

  .btn-primary::before {
    display: none !important;
  }

  .btn,
  .btn:hover,
  .btn:focus {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   ACCESSIBILITY STYLES
   ========================================================================== */

/* High Contrast Mode */

.high-contrast {
  --navy-primary: #000000 !important;
  --navy-secondary: #000080 !important;
  --navy-dark: #000000 !important;
  --navy-light: #404040 !important;
  --navy-ultra-light: #e0e0e0 !important;
  --gold-primary: #ffd700 !important;
  --gold-light: #ffff00 !important;
  --success: #008000 !important;
  --error: #ff0000 !important;
  --warning: #ffa500 !important;
}

/* Preserve white backgrounds in high contrast mode */

.high-contrast .bg-white,
.high-contrast [class*="bg-white"] {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Preserve white text on dark backgrounds */

.high-contrast .bg-navy-primary,
.high-contrast .bg-navy-dark,
.high-contrast [class*="bg-navy-primary"],
.high-contrast [class*="bg-navy-dark"] {
  background-color: #000000 !important;
}

.high-contrast .bg-navy-primary *,
.high-contrast .bg-navy-dark *,
.high-contrast [class*="bg-navy-primary"] *,
.high-contrast [class*="bg-navy-dark"] * {
  color: #ffffff !important;
}

/* Fix buttons */

.high-contrast .btn-primary {
  background-color: #ffd700 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}

.high-contrast .btn-secondary,
.high-contrast .btn-outline {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}

/* Fix scroll-to-top button */

.high-contrast .scroll-to-top-btn {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

.high-contrast .scroll-to-top-icon {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Font Size Adjustments */

[data-font-size="small"] {
  font-size: 14px;
}

[data-font-size="small"] h1 {
  font-size: 1.75rem;
}

[data-font-size="small"] h2 {
  font-size: 1.5rem;
}

[data-font-size="small"] h3 {
  font-size: 1.25rem;
}

[data-font-size="small"] h4 {
  font-size: 1.125rem;
}

[data-font-size="small"] h5 {
  font-size: 1rem;
}

[data-font-size="small"] h6 {
  font-size: 0.875rem;
}

[data-font-size="normal"] {
  font-size: 16px;
}

[data-font-size="large"] {
  font-size: 18px;
}

[data-font-size="large"] h1 {
  font-size: 2.5rem;
}

[data-font-size="large"] h2 {
  font-size: 2rem;
}

[data-font-size="large"] h3 {
  font-size: 1.75rem;
}

[data-font-size="large"] h4 {
  font-size: 1.5rem;
}

[data-font-size="large"] h5 {
  font-size: 1.25rem;
}

[data-font-size="large"] h6 {
  font-size: 1.125rem;
}

[data-font-size="extra-large"] {
  font-size: 20px;
}

[data-font-size="extra-large"] h1 {
  font-size: 3rem;
}

[data-font-size="extra-large"] h2 {
  font-size: 2.5rem;
}

[data-font-size="extra-large"] h3 {
  font-size: 2rem;
}

[data-font-size="extra-large"] h4 {
  font-size: 1.75rem;
}

[data-font-size="extra-large"] h5 {
  font-size: 1.5rem;
}

[data-font-size="extra-large"] h6 {
  font-size: 1.375rem;
}

/* Reduced Motion */

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Screen Reader Mode */

.screen-reader-mode {
  /* Enhanced focus indicators */
}

.screen-reader-mode *:focus {
  outline: 3px solid #ffd700 !important;
  outline-offset: 2px !important;
}

.screen-reader-mode .skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000000;
  color: #ffffff;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
  border-radius: 4px;
}

.screen-reader-mode .skip-link:focus {
  top: 6px;
}

/* Accessibility Toolbar */

.accessibility-toolbar {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-bottom: 2px solid #ffd700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.accessibility-toolbar button {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.accessibility-toolbar button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.accessibility-toolbar button:active {
  transform: translateY(0);
}

/* Focus Management */

.accessibility-focus:focus {
  outline: 3px solid #ffd700;
  outline-offset: 2px;
}

/* Screen Reader Only Content */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* High contrast focus indicators */

@media (prefers-contrast: high) {
  *:focus {
    outline: 3px solid #000000 !important;
    outline-offset: 2px !important;
  }

  /* Preserve white backgrounds */
  .bg-white,
  [class*="bg-white"] {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

  /* Fix buttons */
  button:not(.btn-primary):not(.btn-secondary) {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
  }

  .btn-primary {
    background-color: #ffd700 !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
  }

  .scroll-to-top-btn {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
  }

  .scroll-to-top-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
  }
}

/* Windows High Contrast Mode (forced-colors) */

@media (forced-colors: active) {
  /* Preserve white backgrounds */
  .bg-white,
  [class*="bg-white"],
  .bg-white-pure {
    background-color: Canvas !important;
    color: CanvasText !important;
  }

  /* Fix buttons */
  button {
    background-color: ButtonFace !important;
    color: ButtonText !important;
    border-color: ButtonBorder !important;
  }

  .btn-primary {
    background-color: Highlight !important;
    color: HighlightText !important;
    border-color: Highlight !important;
  }

  .scroll-to-top-btn {
    background-color: ButtonFace !important;
    color: ButtonText !important;
    border-color: ButtonBorder !important;
  }

  .scroll-to-top-icon {
    color: ButtonText !important;
    fill: ButtonText !important;
  }

  /* Preserve text colors on white backgrounds */
  .bg-white *,
  [class*="bg-white"] * {
    color: CanvasText !important;
  }

  /* Preserve white text on dark backgrounds */
  .bg-navy-primary,
  .bg-navy-dark {
    background-color: Canvas !important;
    color: CanvasText !important;
  }

  .bg-navy-primary *,
  .bg-navy-dark * {
    color: CanvasText !important;
  }
}

/* Reduced motion preference */

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

  /* Disable motion; keep content visible (scroll-reveal classes start at opacity 0) */
  .animate-float,
  .animate-pulse-gentle,
  .animate-bounce,
  .animate-ping,
  .animate-gentle-bounce,
  .animate-fade-in,
  .animate-fade-in-up,
  .animate-fade-in-down,
  .animate-scale-in,
  .animate-slide-left,
  .animate-slide-right,
  .animate-bounce-in,
  .floating-element,
  .animate-subtle-pulse,
  .animate-subtle-glow {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* Enhanced focus styles for WCAG AA compliance */

*:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 2px;
}

/* Skip link focus styles */

.skip-link:focus {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: var(--navy-primary);
  color: white;
  text-decoration: none;
  border-radius: 0.5rem;
  outline: 2px solid var(--gold-primary);
  outline-offset: 2px;
}

/* ===== SUBTLE ANIMATIONS ===== */

/* Fade in animation for scroll-triggered elements - Optimized for smooth performance */

.animate-fade-in {
  opacity: 0;
  transform: translateY(20px) translateZ(0);
  /* translateZ forces GPU acceleration */
  will-change: opacity, transform;
  /* Hint browser for optimization */
  animation: fadeInSmooth 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  /* Smoother easing */
  backface-visibility: hidden;
  /* Prevent flickering */
  perspective: 1000px;
}

html.js .scroll-reveal {
  opacity: 0;
  transform: translateY(20px) translateZ(0);
  will-change: opacity, transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

html.js .scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  transition:
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInSmooth {
  from {
    opacity: 0;
    transform: translateY(20px) translateZ(0);
  }

  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

/* Staggered animation delays - faster and smoother */

.animate-fade-in:nth-child(1) {
  animation-delay: 0s;
}

.animate-fade-in:nth-child(2) {
  animation-delay: 0.05s;
}

.animate-fade-in:nth-child(3) {
  animation-delay: 0.1s;
}

.animate-fade-in:nth-child(4) {
  animation-delay: 0.15s;
}

.animate-fade-in:nth-child(5) {
  animation-delay: 0.2s;
}

.animate-fade-in:nth-child(6) {
  animation-delay: 0.25s;
}

.animate-fade-in:nth-child(n + 7) {
  animation-delay: 0.3s;
}

/* Subtle floating animation for decorative elements */

@keyframes gentle-float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}

.floating-element {
  animation: gentle-float 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-fade-in-up,
  .animate-fade-in-down,
  .animate-scale-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }

  .scroll-reveal,
  .scroll-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .floating-element,
  .decoration {
    animation: none !important;
  }

  .animate-pulse-gentle {
    animation: none !important;
  }
}

/* Smooth slide-in animations */

.animate-slide-left {
  animation: slideInLeft 0.8s ease-out forwards;
  opacity: 0;
  transform: translateX(-50px);
}

.animate-slide-right {
  animation: slideInRight 0.8s ease-out forwards;
  opacity: 0;
  transform: translateX(50px);
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Subtle pulse animation for highlights */

@keyframes subtle-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.8;
  }
}

.animate-subtle-pulse {
  animation: subtle-pulse 3s ease-in-out infinite;
}

/* Smooth scale animation for interactive elements */

.animate-scale-in {
  animation: scaleIn 0.6s ease-out forwards;
  opacity: 0;
  transform: scale(0.9);
}

@keyframes scaleIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Gentle bounce animation for icons */

@keyframes gentle-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-5px);
  }

  60% {
    transform: translateY(-3px);
  }
}

.animate-gentle-bounce {
  animation: gentle-bounce 2s infinite;
}

/* Subtle glow effect for special elements */

@keyframes subtle-glow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.1);
  }

  50% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
  }
}

.animate-subtle-glow {
  animation: subtle-glow 4s ease-in-out infinite;
}

/* Force MediaUpload positioning */

.media-upload-container {
  position: relative !important;
  z-index: 1 !important;
  order: 1 !important;
}

/* Ensure form sections maintain proper order */

.form-section {
  position: relative !important;
  z-index: auto !important;
}

/* Save button should always be last */

.save-button-section {
  order: 999 !important;
}

/* Comprehensive text handling to prevent awkward line breaks */

.text-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: none;
  text-align: justify;
  text-justify: inter-word;
}

.break-words {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: none;
}

/* Prevent hyphenation in headings and important text */

h1,
h2,
h3,
h4,
h5,
h6 {
  hyphens: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.2;
}

/* Global text wrapping improvements - comprehensive coverage */

*,
*::before,
*::after {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Specific text elements with enhanced wrapping */

p,
span,
div,
h1,
h2,
h3,
h4,
h5,
h6,
li,
dt,
dd,
blockquote,
pre,
code,
kbd,
samp,
a,
strong,
em,
b,
i,
u,
mark,
small,
sub,
sup,
abbr,
cite,
q,
dfn,
time,
var,
article,
aside,
section,
header,
footer,
nav,
main,
figure,
figcaption,
th,
td,
caption,
label,
legend,
summary {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: none !important;
}

/* Ensure flex items allow text wrapping */

.flex > *,
.inline-flex > *,
[class*="flex"] > *,
[class*="grid"] > * {
  min-width: 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* Form elements */

input,
textarea,
select,
button {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Better handling for long words and URLs */

.text-break-all {
  word-break: break-all;
  overflow-wrap: break-word;
}

.text-break-word {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Prevent text from breaking in inappropriate places */

.white-space-nowrap {
  white-space: nowrap;
}

/* Better line height for readability */

.leading-relaxed {
  line-height: 1.625;
}

.leading-tight {
  line-height: 1.25;
}

/* Ensure buttons and links don't break awkwardly */

button,
a,
input,
textarea,
select,
label {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* CRITICAL: Ensure cross buttons in floating popup are perfectly circular */

.floating-cross-btn {
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* CRITICAL: Prevent distortion of any small circular elements (w-2 h-2).
   Exact classes only — [class*="w-2"] also matched w-20/w-24 and risked
   build corruption against Tailwind arbitrary classnames. */

.w-2.h-2.rounded-full,
.h-2.w-2.rounded-full {
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  min-width: 0.5rem !important;
  /* 8px */
  min-height: 0.5rem !important;
  /* 8px */
  width: 0.5rem !important;
  /* 8px */
  height: 0.5rem !important;
  /* 8px */
  max-width: 0.5rem !important;
  /* 8px */
  max-height: 0.5rem !important;
  /* 8px */
}

/* Adjust floating contact button position - move lower */

.floating-contact-button {
  bottom: 5rem !important;
  /* 80px - 1em lower on mobile */
}

@media (min-width: 640px) {
  .floating-contact-button {
    bottom: 5rem !important;
    /* 80px - 2em lower on web (from 7rem to 5rem) */
  }
}

/* ============================================
 * ICON SIZE CONSISTENCY - Prevent Shrinking on Mobile/Tablet
 * ============================================ */

/* Ensure icon containers maintain size and don't shrink */

div[class*="w-10"][class*="h-10"][class*="rounded"],
div[class*="w-10"][class*="h-10"][class*="flex"],
div[class*="w-12"][class*="h-12"][class*="rounded"],
div[class*="w-12"][class*="h-12"][class*="flex"] {
  flex-shrink: 0 !important;
}

/* CRITICAL: Ensure icon containers with white backgrounds maintain proper size */

div[class*="w-10"][class*="h-10"][class*="bg-white"],
div[class*="w-12"][class*="h-12"][class*="bg-white"],
div[class*="w-14"][class*="h-14"][class*="bg-white"],
div[class*="w-16"][class*="h-16"][class*="bg-white"],
div[class*="w-20"][class*="h-20"][class*="bg-white"],
div[class*="w-24"][class*="h-24"][class*="bg-white"],
[class*="bg-white"][class*="rounded-full"][class*="w-10"][class*="h-10"],
[class*="bg-white"][class*="rounded-full"][class*="w-12"][class*="h-12"],
[class*="bg-white"][class*="rounded-full"][class*="w-14"][class*="h-14"],
[class*="bg-white"][class*="rounded-full"][class*="w-16"][class*="h-16"],
[class*="bg-white"][class*="rounded-full"][class*="w-20"][class*="h-20"],
[class*="bg-white"][class*="rounded-full"][class*="w-24"][class*="h-24"] {
  flex-shrink: 0 !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* (removed) w-10 container icon enforcement — utility-name literals
   corrupted the build; Tailwind classes already size these icons. */

/* Icons inside w-12 h-12 containers - maintain h-6 w-6 size on all devices */

div[class*="w-12"][class*="h-12"] svg[class*="h-6"][class*="w-6"],
div[class*="w-12"][class*="h-12"] svg.h-6.w-6,
div[class*="w-12"][class*="h-12"] svg[class*="h-6"],
div[class*="w-12"][class*="h-12"] svg[class*="w-6"] {
  width: 1.5rem !important;
  /* h-6 w-6 = 1.5rem */
  height: 1.5rem !important;
  min-width: 1.5rem !important;
  min-height: 1.5rem !important;
  max-width: 1.5rem !important;
  max-height: 1.5rem !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* SVG elements with explicit w-6 h-6 classes inside w-12 h-12 containers */

div[class*="w-12"][class*="h-12"] svg[class*="w-6"][class*="h-6"] {
  width: 1.5rem !important;
  height: 1.5rem !important;
  min-width: 1.5rem !important;
  min-height: 1.5rem !important;
  max-width: 1.5rem !important;
  max-height: 1.5rem !important;
  flex-shrink: 0 !important;
}

/* Prevent icon shrinking on mobile/tablet - ensure icons maintain size */

@media (max-width: 1024px) {
  /* Icons inside w-10 h-10 containers */
  div[class*="w-10"][class*="h-10"] svg {
    flex-shrink: 0 !important;
    display: block !important;
  }

  /* Icons inside w-12 h-12 containers */
  div[class*="w-12"][class*="h-12"] svg {
    flex-shrink: 0 !important;
    display: block !important;
  }

  /* Ensure containers themselves don't shrink */
  div[class*="w-10"][class*="h-10"][class*="rounded"],
  div[class*="w-10"][class*="h-10"][class*="flex"],
  div[class*="w-12"][class*="h-12"][class*="rounded"],
  div[class*="w-12"][class*="h-12"][class*="flex"] {
    flex-shrink: 0 !important;
  }
}

/* ============================================
 * COMPREHENSIVE ICON/IMAGE SHRINK PREVENTION
 * ============================================ */

/* CRITICAL: All SVGs with size classes should NEVER shrink */

svg[class*="w-4"],
svg[class*="h-4"],
svg[class*="w-5"],
svg[class*="h-5"],
svg[class*="w-6"],
svg[class*="h-6"],
svg[class*="w-7"],
svg[class*="h-7"],
svg[class*="w-8"],
svg[class*="h-8"],
svg[class*="w-10"],
svg[class*="h-10"],
svg[class*="w-12"],
svg[class*="h-12"],
svg[class*="w-14"],
svg[class*="h-14"],
svg[class*="w-16"],
svg[class*="h-16"],
svg[class*="w-20"],
svg[class*="h-20"],
svg[class*="w-24"],
svg[class*="h-24"] {
  flex-shrink: 0 !important;
}

/* All images with size classes should NEVER shrink */

img[class*="w-4"],
img[class*="h-4"],
img[class*="w-5"],
img[class*="h-5"],
img[class*="w-6"],
img[class*="h-6"],
img[class*="w-7"],
img[class*="h-7"],
img[class*="w-8"],
img[class*="h-8"],
img[class*="w-10"],
img[class*="h-10"],
img[class*="w-12"],
img[class*="h-12"],
img[class*="w-14"],
img[class*="h-14"],
img[class*="w-16"],
img[class*="h-16"],
img[class*="w-20"],
img[class*="h-20"],
img[class*="w-24"],
img[class*="h-24"],
img[class*="w-32"],
img[class*="h-32"] {
  flex-shrink: 0 !important;
}

/* Icon containers should never shrink */

[class*="icon"],
[class*="Icon"],
div[class*="w-"][class*="h-"][class*="flex"],
div[class*="w-"][class*="h-"][class*="rounded"] {
  flex-shrink: 0 !important;
}

/* Prevent flex containers from shrinking icons/images */

.flex svg,
.flex img,
[class*="flex"] svg,
[class*="flex"] img {
  flex-shrink: 0 !important;
}

/* Ensure icons/images in buttons don't shrink */

button svg,
button img,
a svg,
a img {
  flex-shrink: 0 !important;
}

/* Ensure icons/images in flex containers maintain size */

div[class*="flex"] > svg,
div[class*="flex"] > img,
[class*="flex"] > svg,
[class*="flex"] > img {
  flex-shrink: 0 !important;
}

/* Ensure icons/images in grid containers maintain size */

.grid svg,
.grid img,
[class*="grid"] svg,
[class*="grid"] img,
div[class*="grid"] > svg,
div[class*="grid"] > img,
[class*="grid"] > svg,
[class*="grid"] > img {
  flex-shrink: 0 !important;
}

/* Ensure icons/images in any container maintain size */

span svg,
span img,
div svg[class*="w-"],
div svg[class*="h-"],
div img[class*="w-"],
div img[class*="h-"] {
  flex-shrink: 0 !important;
}

/* ============================================
 * PREVENT ICON TRUNCATION - Overflow Protection
 * ============================================ */

/* CRITICAL: Icon containers must allow overflow to prevent truncation */

div[class*="w-"][class*="h-"][class*="rounded"] svg,
div[class*="w-"][class*="h-"][class*="flex"] svg,
div[class*="w-"][class*="h-"][class*="rounded"] > svg,
div[class*="w-"][class*="h-"][class*="flex"] > svg,
button[class*="w-"][class*="h-"] svg,
a[class*="w-"][class*="h-"] svg {
  overflow: visible !important;
}

/* Icon containers should not clip their children */

/* Exclude profile picture containers which need overflow-hidden for image clipping */

div[class*="w-10"][class*="h-10"]:not([class*="rounded-full"]):not(
    [class*="overflow-hidden"]
  ),
div[class*="w-12"][class*="h-12"]:not([class*="rounded-full"]):not(
    [class*="overflow-hidden"]
  ),
div[class*="w-14"][class*="h-14"]:not([class*="rounded-full"]):not(
    [class*="overflow-hidden"]
  ),
div[class*="w-16"][class*="h-16"]:not([class*="rounded-full"]):not(
    [class*="overflow-hidden"]
  ),
div[class*="w-20"][class*="h-20"]:not([class*="rounded-full"]):not(
    [class*="overflow-hidden"]
  ),
div[class*="w-24"][class*="h-24"]:not([class*="rounded-full"]):not(
    [class*="overflow-hidden"]
  ),
div[class*="w-28"][class*="h-28"]:not([class*="rounded-full"]):not(
    [class*="overflow-hidden"]
  ),
div[class*="w-32"][class*="h-32"]:not([class*="rounded-full"]):not(
    [class*="overflow-hidden"]
  ) {
  overflow: visible !important;
}

/* CRITICAL: Profile picture containers with overflow-hidden should maintain size */

/* Note: overflow-hidden is needed for image clipping, but container size must be maintained */

div[class*="w-24"][class*="h-24"][class*="rounded-full"][class*="overflow-hidden"],
div[class*="w-28"][class*="h-28"][class*="rounded-full"][class*="overflow-hidden"],
div[class*="w-32"][class*="h-32"][class*="rounded-full"][class*="overflow-hidden"],
div.w-24.h-24.rounded-full.overflow-hidden,
div.w-28.h-28.rounded-full.overflow-hidden,
div.w-32.h-32.rounded-full.overflow-hidden {
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* CRITICAL: Profile picture containers with responsive classes - maintain size at all breakpoints */

div[class*="w-24"][class*="h-24"][class*="sm:w-28"][class*="sm:h-28"][class*="lg:w-32"][class*="lg:h-32"][class*="rounded-full"],
div.w-24.h-24.sm\:w-28.sm\:h-28.lg\:w-32.lg\:h-32.rounded-full {
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  div[class*="w-24"][class*="h-24"][class*="sm:w-28"][class*="sm:h-28"][class*="rounded-full"],
  div.w-24.h-24.sm\:w-28.sm\:h-28.rounded-full {
    width: 7rem !important;
    height: 7rem !important;
    min-width: 7rem !important;
    min-height: 7rem !important;
    max-width: 7rem !important;
    max-height: 7rem !important;
  }
}

@media (min-width: 1024px) {
  div[class*="w-24"][class*="h-24"][class*="sm:w-28"][class*="sm:h-28"][class*="lg:w-32"][class*="lg:h-32"][class*="rounded-full"],
  div.w-24.h-24.sm\:w-28.sm\:h-28.lg\:w-32.lg\:h-32.rounded-full {
    width: 8rem !important;
    height: 8rem !important;
    min-width: 8rem !important;
    min-height: 8rem !important;
    max-width: 8rem !important;
    max-height: 8rem !important;
  }
}

/* CRITICAL: Ensure icon containers maintain their explicit width/height */

/* This prevents the white circle background from being too small */

/* Works with responsive Tailwind classes (w-24 sm:w-28 lg:w-32) */

div[class*="w-10"][class*="h-10"],
div.w-10.h-10 {
  width: 2.5rem !important;
  /* w-10 = 2.5rem = 40px */
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  max-width: 2.5rem !important;
  max-height: 2.5rem !important;
}

div[class*="w-12"][class*="h-12"] {
  width: 3rem !important;
  /* w-12 = 3rem = 48px */
  height: 3rem !important;
  min-width: 3rem !important;
  min-height: 3rem !important;
  max-width: 3rem !important;
  max-height: 3rem !important;
}

div[class*="w-14"][class*="h-14"] {
  width: 3.5rem !important;
  /* w-14 = 3.5rem = 56px */
  height: 3.5rem !important;
  min-width: 3.5rem !important;
  min-height: 3.5rem !important;
  max-width: 3.5rem !important;
  max-height: 3.5rem !important;
}

div[class*="w-16"][class*="h-16"] {
  width: 4rem !important;
  /* w-16 = 4rem = 64px */
  height: 4rem !important;
  min-width: 4rem !important;
  min-height: 4rem !important;
  max-width: 4rem !important;
  max-height: 4rem !important;
}

div[class*="w-20"][class*="h-20"] {
  width: 5rem !important;
  /* w-20 = 5rem = 80px */
  height: 5rem !important;
  min-width: 5rem !important;
  min-height: 5rem !important;
  max-width: 5rem !important;
  max-height: 5rem !important;
}

div[class*="w-24"][class*="h-24"],
div.w-24.h-24 {
  width: 6rem !important;
  /* w-24 = 6rem = 96px */
  height: 6rem !important;
  min-width: 6rem !important;
  min-height: 6rem !important;
  max-width: 6rem !important;
  max-height: 6rem !important;
}

div[class*="w-28"][class*="h-28"],
div.w-28.h-28 {
  width: 7rem !important;
  /* w-28 = 7rem = 112px */
  height: 7rem !important;
  min-width: 7rem !important;
  min-height: 7rem !important;
  max-width: 7rem !important;
  max-height: 7rem !important;
}

div[class*="w-32"][class*="h-32"],
div.w-32.h-32 {
  width: 8rem !important;
  /* w-32 = 8rem = 128px */
  height: 8rem !important;
  min-width: 8rem !important;
  min-height: 8rem !important;
  max-width: 8rem !important;
  max-height: 8rem !important;
}

/* CRITICAL: Handle responsive Tailwind classes for profile pages */

/* Profile pages use: w-24 sm:w-28 lg:w-32 - need to enforce size at each breakpoint */

@media (min-width: 640px) {
  div[class*="w-24"][class*="sm:w-28"],
  div.w-24.sm\:w-28 {
    width: 7rem !important;
    /* sm:w-28 = 7rem = 112px */
    min-width: 7rem !important;
    max-width: 7rem !important;
  }

  div[class*="h-24"][class*="sm:h-28"],
  div.h-24.sm\:h-28 {
    height: 7rem !important;
    min-height: 7rem !important;
    max-height: 7rem !important;
  }
}

@media (min-width: 1024px) {
  div[class*="w-24"][class*="sm:w-28"][class*="lg:w-32"],
  div[class*="w-24"][class*="lg:w-32"],
  div.w-24.sm\:w-28.lg\:w-32,
  div.w-24.lg\:w-32 {
    width: 8rem !important;
    /* lg:w-32 = 8rem = 128px */
    min-width: 8rem !important;
    max-width: 8rem !important;
  }

  div[class*="h-24"][class*="sm:h-28"][class*="lg:h-32"],
  div[class*="h-24"][class*="lg:h-32"],
  div.h-24.sm\:h-28.lg\:h-32,
  div.h-24.lg\:h-32 {
    height: 8rem !important;
    min-height: 8rem !important;
    max-height: 8rem !important;
  }
}

/* Buttons and links with icons should not clip them */

button svg,
a svg,
button > svg,
a > svg {
  overflow: visible !important;
}

/* Flex containers with icons should not clip them */

.flex svg,
[class*="flex"] svg,
.flex > svg,
[class*="flex"] > svg {
  overflow: visible !important;
}

/* Grid containers with icons should not clip them */

.grid svg,
[class*="grid"] svg,
.grid > svg,
[class*="grid"] > svg {
  overflow: visible !important;
}

/* Cards and panels should not clip icons */

.card svg,
.panel svg,
.modal svg,
.dropdown svg,
[class*="card"] svg {
  overflow: visible !important;
}

/* CRITICAL: Override any overflow-hidden on icon containers */

div[class*="w-"][class*="h-"][class*="overflow-hidden"] svg,
button[class*="overflow-hidden"] svg,
a[class*="overflow-hidden"] svg {
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

/* ============================================
 * ICON CONTAINER SIZE ENFORCEMENT
 * ============================================ */

/* CRITICAL: Ensure icon containers with white backgrounds maintain proper size */

/* This fixes the issue where white circle backgrounds appear too small */

div[class*="w-10"][class*="h-10"][class*="bg-white"],
div[class*="w-12"][class*="h-12"][class*="bg-white"],
div[class*="w-14"][class*="h-14"][class*="bg-white"],
div[class*="w-16"][class*="h-16"][class*="bg-white"],
div[class*="w-20"][class*="h-20"][class*="bg-white"],
div[class*="w-24"][class*="h-24"][class*="bg-white"],
div[class*="w-28"][class*="h-28"][class*="bg-white"],
div[class*="w-32"][class*="h-32"][class*="bg-white"],
[class*="bg-white"][class*="rounded-full"][class*="w-10"][class*="h-10"],
[class*="bg-white"][class*="rounded-full"][class*="w-12"][class*="h-12"],
[class*="bg-white"][class*="rounded-full"][class*="w-14"][class*="h-14"],
[class*="bg-white"][class*="rounded-full"][class*="w-16"][class*="h-16"],
[class*="bg-white"][class*="rounded-full"][class*="w-20"][class*="h-20"],
[class*="bg-white"][class*="rounded-full"][class*="w-24"][class*="h-24"],
[class*="bg-white"][class*="rounded-full"][class*="w-28"][class*="h-28"],
[class*="bg-white"][class*="rounded-full"][class*="w-32"][class*="h-32"],
div[class*="bg-white"][class*="rounded-full"][class*="w-10"][class*="h-10"],
div[class*="bg-white"][class*="rounded-full"][class*="w-12"][class*="h-12"],
div[class*="bg-white"][class*="rounded-full"][class*="w-14"][class*="h-14"],
div[class*="bg-white"][class*="rounded-full"][class*="w-16"][class*="h-16"],
div[class*="bg-white"][class*="rounded-full"][class*="w-20"][class*="h-20"],
div[class*="bg-white"][class*="rounded-full"][class*="w-24"][class*="h-24"],
div[class*="bg-white"][class*="rounded-full"][class*="w-28"][class*="h-28"],
div[class*="bg-white"][class*="rounded-full"][class*="w-32"][class*="h-32"] {
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ============================================
 * FINAL OVERRIDE - Ensure all icon containers maintain size
 * ============================================ */

/* CRITICAL: Direct override for any div with width/height classes */

/* This ensures size enforcement works even with Tailwind responsive classes */

div[class*="w-10"][class*="h-10"]:not([class*="animate"]),
div[class*="w-12"][class*="h-12"]:not([class*="animate"]),
div[class*="w-14"][class*="h-14"]:not([class*="animate"]),
div[class*="w-16"][class*="h-16"]:not([class*="animate"]),
div[class*="w-20"][class*="h-20"]:not([class*="animate"]),
div[class*="w-24"][class*="h-24"]:not([class*="animate"]),
div[class*="w-28"][class*="h-28"]:not([class*="animate"]),
div[class*="w-32"][class*="h-32"]:not([class*="animate"]) {
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure responsive classes don't override size at base breakpoint */

div[class*="w-24"][class*="h-24"]:not([class*="animate"]) {
  width: 6rem !important;
  height: 6rem !important;
  min-width: 6rem !important;
  min-height: 6rem !important;
  max-width: 6rem !important;
  max-height: 6rem !important;
}

/* ===== REMOVE COUPON BUTTON STYLES - HIGHEST SPECIFICITY ===== */

/* CRITICAL: Remove Coupon Button Class - Override all conflicting rules */

.btn-remove-coupon,
button.btn-remove-coupon,
.btn-remove-coupon:hover,
button.btn-remove-coupon:hover,
.btn-remove-coupon:focus,
button.btn-remove-coupon:focus,
.btn-remove-coupon:active,
button.btn-remove-coupon:active {
  background-color: #dc2626 !important;
  /* bg-red-600 */
  color: #ffffff !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  border-color: #dc2626 !important;
}

.btn-remove-coupon:hover,
button.btn-remove-coupon:hover {
  background-color: #b91c1c !important;
  /* bg-red-700 */
  border-color: #b91c1c !important;
}

/* Ensure all children elements have white text */

.btn-remove-coupon *,
button.btn-remove-coupon *,
.btn-remove-coupon:hover *,
button.btn-remove-coupon:hover *,
.btn-remove-coupon:focus *,
button.btn-remove-coupon:focus *,
.btn-remove-coupon:active *,
button.btn-remove-coupon:active * {
  color: #ffffff !important;
}

/* Override any conflicting text color rules */

.btn-remove-coupon span,
.btn-remove-coupon div,
.btn-remove-coupon p,
.btn-remove-coupon svg,
.btn-remove-coupon path,
button.btn-remove-coupon span,
button.btn-remove-coupon div,
button.btn-remove-coupon p,
button.btn-remove-coupon svg,
button.btn-remove-coupon path {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Fallback for solid red buttons. Token-exact ([class~=]) on purpose:
   the old substring match ([class*="bg-red-5"]) also caught prefixed
   tokens like hover:bg-red-500/15 (ghost-red logout) and forced them
   white in every state. */

button[class~="bg-red-500"]:not(.btn-remove-coupon),
button[class~="bg-red-600"]:not(.btn-remove-coupon),
button[class~="bg-red-700"]:not(.btn-remove-coupon) {
  color: #ffffff !important;
}

button[class~="bg-red-500"]:not(.btn-remove-coupon) *,
button[class~="bg-red-600"]:not(.btn-remove-coupon) *,
button[class~="bg-red-700"]:not(.btn-remove-coupon) * {
  color: #ffffff !important;
}

/* Prevent text wrapping only for specific button types that need it */

/* Remove buttons and action buttons should not wrap */

.btn-remove-coupon,
button.btn-remove-coupon,
.action-icon-btn,
button.action-icon-btn,
button[class*="action-icon-btn"] {
  white-space: nowrap !important;
}

/* Allow text wrapping for primary buttons and buttons with long text */

button[class*="btn-primary"],
button[class*="getButtonClasses"],
.btn-primary,
button[class*="w-full"] {
  white-space: normal !important;
  word-wrap: break-word;
  hyphens: auto;
}

/* Specific fix for remove buttons with title attribute (additional fallback) */

button[title*="Remove coupon"] {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
  background-color: #dc2626 !important;
}

button[title*="Remove coupon"] * {
  color: #ffffff !important;
}

/* Notification unread badge: lock white text on red in all states */

button[aria-label="Notifications"] .red-badge-text,
button[aria-label="Notifications"] .red-badge-text *,
button[aria-label="Notifications"]:hover .red-badge-text,
button[aria-label="Notifications"]:hover .red-badge-text *,
button[aria-label="Notifications"]:active .red-badge-text,
button[aria-label="Notifications"]:active .red-badge-text *,
button[aria-label="Notifications"]:focus .red-badge-text,
button[aria-label="Notifications"]:focus .red-badge-text *,
button[aria-label="Notifications"] .red-badge-text:hover,
button[aria-label="Notifications"] .red-badge-text:hover *,
button[title="View notifications"] .red-badge-text,
button[title="View notifications"] .red-badge-text *,
button[title="View notifications"]:hover .red-badge-text,
button[title="View notifications"]:hover .red-badge-text *,
button[title="View notifications"]:active .red-badge-text,
button[title="View notifications"]:active .red-badge-text *,
button[title="View notifications"]:focus .red-badge-text,
button[title="View notifications"]:focus .red-badge-text *,
button[title="View notifications"] .red-badge-text:hover,
button[title="View notifications"] .red-badge-text:hover * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #dc2626 !important;
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  forced-color-adjust: none;
}

/* Utility: force white text/icon color when global button rules override color */

.text-force-white,
.text-force-white *,
button.text-force-white,
button.text-force-white * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Language Selector Dropdown - Force white text and full visibility on hover */

button.lang-option-btn:hover {
  background-color: var(--navy-primary) !important;
}

button.lang-option-btn:hover * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

button.lang-option-btn:hover span {
  opacity: 1 !important;
}

/* PHONE INPUT CHEVRON ARROW FIX */

button[data-state="open"] svg.phone-chevron,
button:hover svg.phone-chevron,
.group[data-state="open"] svg.phone-chevron,
.group:hover svg.phone-chevron {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
}

/* THIN INVISIBLE SCROLLBAR */

.scrollbar-thin-invisible::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

.scrollbar-thin-invisible::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin-invisible::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.scrollbar-thin-invisible::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.15);
}

.scrollbar-thin-invisible {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.05) transparent;
}

/* Custom overrides for button text visibility */

.force-white-button {
  background-color: #14213d !important;
  color: #FFFFFF !important;
}

.force-white-button * {
  color: #FFFFFF !important;
}

/* Hero Section Button Alignment Fix */

.hero-action-fixed {
  min-height: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Membership Tab & Button System */

.membership-tab-container {
  background-color: var(--white-pure);
  padding: 0.375rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--navy-ultra-light);
}

.membership-tab-btn-active {
  background-color: var(--navy-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md);
  transform: scale(1.01);
  font-weight: 700 !important;
}

.membership-tab-btn-active * {
  color: #FFFFFF !important;
}

.membership-tab-btn-inactive {
  background-color: var(--white-pure) !important;
  color: var(--navy-primary) !important;
  border-radius: var(--radius-xl) !important;
  font-weight: 600 !important;
}

.membership-tab-btn-inactive:hover {
  background-color: var(--navy-ultra-light) !important;
  color: var(--navy-primary) !important;
}

@media (max-width: 640px) {

    /* Reduce spacing in button groups */
    .membership-form-btn-back.gap-3,.membership-form-btn-back.gap-4 {
      gap: 0.5rem;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .membership-form-btn-back.flex-col.md\\:flex-row {
      flex-direction: column;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .membership-form-btn-back.gap-3,.membership-form-btn-back.gap-4 {
      gap: 0.5rem;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .membership-form-btn-back.flex-col.md\\:flex-row {
      flex-direction: column;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .membership-form-btn-back.gap-3,.membership-form-btn-back.gap-4 {
      gap: 0.5rem;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .membership-form-btn-back.flex-col.md\\:flex-row {
      flex-direction: column;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
  }

.membership-form-btn-back.items-center.gap-2.ml-4 {
    margin-left: 0.5rem;
    flex-shrink: 0;
  }

.flex.membership-form-btn-back.gap-2.ml-4 {
    margin-left: 0.5rem;
    flex-shrink: 0;
  }

.flex.items-center.membership-form-btn-back.ml-4 {
    margin-left: 0.5rem;
    flex-shrink: 0;
  }

@media (max-width: 640px) {
    .membership-form-btn-back.items-center.gap-2.ml-4 {
      flex-direction: column;
      gap: 0.25rem;
    }
    .flex.membership-form-btn-back.gap-2.ml-4 {
      flex-direction: column;
      gap: 0.25rem;
    }
    .flex.items-center.membership-form-btn-back.ml-4 {
      flex-direction: column;
      gap: 0.25rem;
    }
  }

.membership-form-btn-back > button + button {
    margin-left: 0;
  }

.membership-form-btn-back .btn-icon {
    padding: 0.5rem;
  }

.membership-form-btn-back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-xl);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.membership-form-btn-back.items-center > label:has(input[type="radio"]),.membership-form-btn-back > label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    align-self: center;
  }

.flex.membership-form-btn-back > label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    align-self: center;
  }

.membership-form-btn-back.items-center > label:has(input[type="radio"]),.membership-form-btn-back > label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    align-self: center;
  }

.membership-form-btn-back > * {
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.membership-form-btn-back svg,.membership-form-btn-back img {
  flex-shrink: 0;
}

.membership-form-btn-back svg,.membership-form-btn-back > svg {
  overflow: visible;
}

.membership-form-btn-back {
  background-color: transparent;
  color: var(--navy-primary);
  border: 1px solid var(--navy-ultra-light);
  font-weight: 500;
}

.membership-form-btn-back:hover {
  background-color: var(--gray-100);
}

@media (max-width: 640px) {

    /* Reduce spacing in button groups */
    .membership-form-btn-save.gap-3,.membership-form-btn-save.gap-4 {
      gap: 0.5rem;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .membership-form-btn-save.flex-col.md\\:flex-row {
      flex-direction: column;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .membership-form-btn-save.gap-3,.membership-form-btn-save.gap-4 {
      gap: 0.5rem;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .membership-form-btn-save.flex-col.md\\:flex-row {
      flex-direction: column;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .membership-form-btn-save.gap-3,.membership-form-btn-save.gap-4 {
      gap: 0.5rem;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .membership-form-btn-save.flex-col.md\\:flex-row {
      flex-direction: column;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
  }

.membership-form-btn-save.items-center.gap-2.ml-4 {
    margin-left: 0.5rem;
    flex-shrink: 0;
  }

.flex.membership-form-btn-save.gap-2.ml-4 {
    margin-left: 0.5rem;
    flex-shrink: 0;
  }

.flex.items-center.membership-form-btn-save.ml-4 {
    margin-left: 0.5rem;
    flex-shrink: 0;
  }

@media (max-width: 640px) {
    .membership-form-btn-save.items-center.gap-2.ml-4 {
      flex-direction: column;
      gap: 0.25rem;
    }
    .flex.membership-form-btn-save.gap-2.ml-4 {
      flex-direction: column;
      gap: 0.25rem;
    }
    .flex.items-center.membership-form-btn-save.ml-4 {
      flex-direction: column;
      gap: 0.25rem;
    }
  }

.membership-form-btn-save > button + button {
    margin-left: 0;
  }

.membership-form-btn-save .btn-icon {
    padding: 0.5rem;
  }

.membership-form-btn-save {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-xl);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.membership-form-btn-save.items-center > label:has(input[type="radio"]),.membership-form-btn-save > label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    align-self: center;
  }

.flex.membership-form-btn-save > label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    align-self: center;
  }

.membership-form-btn-save.items-center > label:has(input[type="radio"]),.membership-form-btn-save > label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    align-self: center;
  }

.membership-form-btn-save > * {
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.membership-form-btn-save svg,.membership-form-btn-save img {
  flex-shrink: 0;
}

.membership-form-btn-save svg,.membership-form-btn-save > svg {
  overflow: visible;
}

.membership-form-btn-save {
  background-color: var(--navy-primary);
  color: var(--white-pure);
  font-weight: 500;
  border: none;
}

.membership-form-btn-save:hover:not(:disabled) {
  opacity: 0.9;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.membership-form-btn-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   NOMINEE VERIFICATION MODAL - CUSTOM CLASSES (HEX COLORS)
   ========================================================================== */

.nominee-verify-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 3, 16, 0.8);
  backdrop-filter: blur(4px);
  display: flex !important; /* Force flex to ensure center alignment */
  align-items: center;
  justify-content: center;
  z-index: 1050; /* Ensure it's above other elements like modals */
  padding: 1rem;
}

.nominee-verify-modal {
  background-color: #ffffff;
  width: 100%;
  max-width: 480px;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  border: 1px solid #e5e7eb;
  animation: nomineeModalFadeIn 0.3s ease-out;
  position: relative; /* Ensure it stays above overlay */
}

@keyframes nomineeModalFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.nominee-verify-header {
  background: linear-gradient(135deg, #0d1729 0%, #14213d 100%);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nominee-verify-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.nominee-verify-body {
  padding: 1.5rem;
}

.nominee-verify-icon-box {
  background-color: #fee2e2;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem auto;
}

.nominee-verify-warning-text {
  color: #374151;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 1.5rem;
}

.nominee-verify-footer {
  padding: 1.25rem 1.5rem;
  background-color: #f9fafb;
  display: flex;
  gap: 1rem;
  border-top: 1px solid #e5e7eb;
}

.nominee-verify-btn-cancel {
  flex: 1;
  padding: 0.75rem;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1.5px solid #d1d5db;
  color: #374151;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.nominee-verify-btn-cancel:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
}

.nominee-verify-btn-confirm {
  flex: 2;
  padding: 0.75rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #b8860b 0%, #daa520 100%);
  color: #ffffff;
  border: none;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(184, 134, 11, 0.4);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nominee-verify-btn-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 8px -1px rgba(184, 134, 11, 0.5);
}

.nominee-verify-btn-confirm:active {
  transform: translateY(0);
}

/* Mobile Responsiveness */

@media (max-width: 480px) {
  .nominee-verify-modal {
    margin: 0 0.5rem;
  }
  
  .nominee-verify-footer {
    flex-direction: column-reverse;
  }
  
  .nominee-verify-btn-confirm {
    width: 100%;
  }
}

.contact-view-btn-primary,
.contact-view-btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important; /* text-sm approx */
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  border: none !important;
}

.contact-view-btn-primary {
  background-color: #011159 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(1, 17, 89, 0.2) !important;
}

.contact-view-btn-primary:hover {
  background-color: #000a33 !important;
  box-shadow: 0 6px 8px -1px rgba(1, 17, 89, 0.3) !important;
}

.contact-view-btn-outline {
  background-color: transparent !important;
  border: 2px solid #011159 !important;
  color: #011159 !important;
}

.contact-view-btn-outline:hover {
  background-color: rgba(1, 17, 89, 0.05) !important;
  color: #000a33 !important;
}

/* ============================================================
 * NON-LAYERED SAFE ZONE
 * Selectors containing Tailwind utility-class tokens (h-5, w-5,
 * h-12, ...) MUST live outside @layer blocks: Tailwind rewrites
 * such tokens inside layered CSS into its generated utility
 * selectors (including arbitrary variants like
 * [&_[cmdk-item]_svg]:h-5), corrupting the emitted bundle.
 * ============================================================ */

@media (min-width: 641px) {
  svg.h-4.w-4 {
    width: 1rem !important;
    height: 1rem !important;
  }
  svg.h-5.w-5 {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
  svg.h-6.w-6 {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
}

.file\:text-navy-primary::file-selector-button {
    color: var(--navy-primary) !important;
  }

.file\:text-navy-primary[class*="bg-navy"]::file-selector-button:hover {
    color: white !important;
  }

.file\:bg-navy-ultra-light::file-selector-button,.file\:bg-navy-ultra-light::file-selector-button * {
    color: var(--navy-primary) !important;
  }

.file\:bg-navy-ultra-light::file-selector-button .text-secondary,.file\:bg-navy-ultra-light::file-selector-button .text-white {
    color: var(--navy-dark) !important;
  }

.file\:bg-navy-ultra-light::file-selector-button {
    background-color: var(--navy-ultra-light) !important;
  }

.file\:text-sm::file-selector-button {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-secondary);
  }

.file\:text-sm.text-gray-500::file-selector-button,.file\:text-sm.text-gray-600::file-selector-button {
    color: var(--text-tertiary) !important;
  }

.file\:text-sm.text-gray-700::file-selector-button {
    color: var(--text-secondary) !important;
  }

.file\:text-sm.text-gray-900::file-selector-button {
    color: var(--text-primary) !important;
  }

.search-dropdown a .file\:text-smp::file-selector-button {
    color: var(--navy-dark);
  }


  nav .file\:text-navy-primarybutton.hamburger-menu-button::file-selector-button:hover,
  nav .file\:text-navy-primarybutton[aria-label*="navigation menu"]::file-selector-button:hover,
  nav .file\:text-navy-primarybutton[aria-label*="Open navigation menu"]::file-selector-button:hover,
  nav .file\:text-navy-primarybutton[aria-label*="Close navigation menu"]::file-selector-button:hover,
  nav .file\:text-navy-primarybutton[aria-expanded]::file-selector-button:hover,
  nav .lg\\:hidden .file\:text-navy-primarybutton::file-selector-button:hover,
  nav .file\:text-navy-primarybutton[class*="hover:bg-white"]::file-selector-button:hover {
    background-color: var(--navy-primary) !important;
    border-color: var(--navy-dark) !important;
    color: white !important;
  }

.file\:px-4::file-selector-button .btn-icon {
    padding: 0.5rem !important;
  }

[class*="from-navy-dark"] .file\:text-navy-primary::file-selector-button,
  [class*="bg-navy-dark"] .file\:text-navy-primary::file-selector-button {
    color: white !important;
  }

.file\:bg-navy-ultra-light::file-selector-button {
    color: var(--navy-primary) !important;
  }

.file\:bg-navy-ultra-light::file-selector-button .text-white {
    color: var(--navy-primary) !important;
  }

.file\:bg-navy-ultra-light::file-selector-button p,.file\:bg-navy-ultra-light::file-selector-button h1,.file\:bg-navy-ultra-light::file-selector-button h2,.file\:bg-navy-ultra-light::file-selector-button h3,.file\:bg-navy-ultra-light::file-selector-button h4,.file\:bg-navy-ultra-light::file-selector-button h5,.file\:bg-navy-ultra-light::file-selector-button h6,.file\:bg-navy-ultra-light::file-selector-button
    span:not([class*="bg-"]):not([class*="text-gold"]):not(
      [class*="text-success"]
    ):not([class*="text-error"]):not([class*="text-red"]):not(
      [class*="text-orange"]
    ):not([class*="text-purple"]):not([class*="text-green"]):not(
      [class*="text-indigo"]
    ):not([class*="text-pink"]),.file\:bg-navy-ultra-light::file-selector-button div:not([class*="bg-"]) {
    color: var(--navy-primary) !important;
  }

.file\:bg-navy-ultra-light::file-selector-button svg {
    color: var(--navy-primary) !important;
  }

.file\:bg-navy-ultra-light::file-selector-button .text-white svg {
    color: var(--navy-primary) !important;
  }

.file\:bg-navy-ultra-lightbutton::file-selector-button,.file\:bg-navy-ultra-light
  a::file-selector-button {
    color: var(--navy-primary) !important;
  }

.file\:bg-navy-ultra-lightbutton::file-selector-button:hover,.file\:bg-navy-ultra-light
  a::file-selector-button:hover {
    background: var(--navy-primary) !important;
    color: white !important;
  }

.file\:bg-navy-ultra-lightdiv::file-selector-button:hover,.file\:bg-navy-ultra-light
  p::file-selector-button:hover,.file\:bg-navy-ultra-light
  span::file-selector-button:hover,.file\:bg-navy-ultra-light::file-selector-button:hover:not(button):not(a):not([role="button"]) {
    background-color: var(--navy-ultra-light) !important;
    color: var(--navy-primary) !important;
  }

.file\:bg-navy-ultra-light::file-selector-button:hover
    *:not(button):not(a):not([role="button"]):not(.action-icon-btn):not(
      [class*="action-icon-btn"]
    ) {
    color: var(--navy-primary) !important;
  }

.file\:bg-navy-ultra-light::file-selector-button:hover .text-secondary,.file\:bg-navy-ultra-light::file-selector-button:hover .text-navy-primary,.file\:bg-navy-ultra-light::file-selector-button:hover p,.file\:bg-navy-ultra-light::file-selector-button:hover
    span:not(.action-icon-btn):not([class*="action-icon-btn"]) {
    color: var(--navy-primary) !important;
  }


  .bg-navy-ultra-light:hover .file\:text-navy-primary::file-selector-button,
  [class~="bg-navy-ultra-light"]:hover .file\:text-navy-primary::file-selector-button {
    color: var(--navy-primary) !important;
  }

.file\:bg-navy-ultra-light::file-selector-button:hover .text-secondary,.file\:bg-navy-ultra-light::file-selector-button:hover .text-navy-primary,.file\:bg-navy-ultra-light::file-selector-button:hover p,.file\:bg-navy-ultra-light::file-selector-button:hover
    span:not(.action-icon-btn):not([class*="action-icon-btn"]) {
    color: var(--navy-primary) !important;
  }


  .bg-navy-ultra-light:hover .file\:text-navy-primary::file-selector-button,
  [class~="bg-navy-ultra-light"]:hover .file\:text-navy-primary::file-selector-button {
    color: var(--navy-primary) !important;
  }

.file\:text-navy-primary::file-selector-buttonbutton:not([class*="hover:bg-navy"]) *:not(.red-badge-text):not(.red-badge-text *) {
    color: var(--navy-primary) !important;
  }

.file\:text-navy-primary::file-selector-buttonbutton:not([class*="hover:bg-navy"]):hover
    *:not(.red-badge-text):not(.red-badge-text *):not(.btn-primary):not(
      .btn-primary *
    ) {
    color: var(--gold-primary) !important;
  }

.file\:text-navy-primarybutton.btn-primary::file-selector-button:hover,.file\:text-navy-primary::file-selector-button
  button.btn-primary:hover * {
    color: white !important;
  }

.placeholder\:text-gray-400::-moz-placeholder {
    color: var(--gray-400) !important;
  }

.placeholder\:text-gray-400::placeholder {
    color: var(--gray-400) !important;
  }

.hover\:bg-white:hover[class*="rounded"] {
    border: 1px solid var(--navy-ultra-light) !important;
    box-shadow: var(--shadow-md) !important;
    border-radius: var(--radius-2xl) !important;
    overflow: visible !important;
    position: relative;
    /* Prevent border truncation - add minimal margin for borders */
    box-sizing: border-box;
  }

.hover\:text-navy-primary:hover {
    color: var(--navy-primary) !important;
  }

.hover\:text-gold-primary:hover {
    color: var(--gold-text) !important;
  }

.hover\:bg-white:hover[class*="rounded"]:not([class*="max-w-"]) {
    max-width: 100%;
    overflow-x: visible;
    word-wrap: break-word;
    box-sizing: border-box;
  }

@media (max-width: 640px) {
    .hover\:bg-white:hover[class*="p-8"] {
      padding: 1rem !important;
    }

    .hover\:bg-white:hover[class*="p-6"] {
      padding: 1rem !important;
    }

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
    .hover\:bg-white:hover[class*="p-8"] {
      padding: 1rem !important;
    }

    .hover\:bg-white:hover[class*="p-6"] {
      padding: 1rem !important;
    }

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
  }

@media (min-width: 641px) and (max-width: 1024px) {
    /* Tablet adjustments */
    .hover\:bg-white:hover[class*="p-8"] {
      padding: 1.5rem !important;
    }

    /* Button groups stay in single row on tablet */

    /* Stats cards in 2 columns on tablet */
  }

.hover\:bg-navy-dark:hover
  :is(button, a.app-btn),.hover\:bg-navy-dark:hover
  .btn {
    color: white !important;
  }

.hover\:bg-navy-secondary:hover
  :is(button, a.app-btn),.hover\:bg-navy-secondary:hover
  .btn {
    color: white !important;
  }

.hover\:bg-navy-dark:hover
  :is(button, a.app-btn),.hover\:bg-navy-dark:hover
  .btn {
    color: white !important;
  }

.hover\:bg-navy-secondary:hover
  :is(button, a.app-btn),.hover\:bg-navy-secondary:hover
  .btn {
    color: white !important;
  }

.hover\:text-navy-primary:hover:hover[class*="bg-navy"] {
    color: white !important;
  }

.hover\:bg-navy-dark:hover
  button:hover,.hover\:bg-navy-dark:hover:hover {
    background-color: var(--navy-dark) !important;
    color: white !important;
  }

.hover\:bg-navy-dark:hover,.hover\:bg-navy-dark:hover * {
    color: white !important;
  }

.hover\:bg-navy-700:hover,.hover\:bg-navy-700:hover * {
    color: white !important;
  }

.hover\:bg-navy-secondary:hover,.hover\:bg-navy-secondary:hover * {
    color: white !important;
  }

.hover\:bg-navy-ultra-light:hover,.hover\:bg-navy-ultra-light:hover * {
    color: var(--navy-primary) !important;
  }

.hover\:bg-gold-ultra-light:hover,.hover\:bg-gold-ultra-light:hover * {
    color: var(--navy-primary) !important;
  }

.hover\:bg-navy-ultra-light:hover .text-secondary,.hover\:bg-navy-ultra-light:hover .text-white {
    color: var(--navy-dark) !important;
  }

.bg-navy-ultra-light .hover\:text-secondary:hover,
  .bg-gold-ultra-light .hover\:text-secondary:hover,
  [class~="bg-navy-ultra-light"] .hover\:text-secondary:hover,
  [class~="bg-gold-ultra-light"] .hover\:text-secondary:hover {
    color: var(--navy-dark) !important;
  }

.hover\:bg-navy-ultra-light:hover .text-secondary,.hover\:bg-navy-ultra-light:hover .text-white {
    color: var(--navy-dark) !important;
  }


  .bg-navy-ultra-light .hover\:text-white:hover,
  .bg-gold-ultra-light .hover\:text-white:hover,
  [class~="bg-navy-ultra-light"] .hover\:text-white:hover,
  [class~="bg-gold-ultra-light"] .hover\:text-white:hover {
    color: var(--navy-dark) !important;
  }

.hover\:bg-gold-ultra-light:hover .text-secondary,.hover\:bg-gold-ultra-light:hover .text-white {
    color: var(--navy-dark) !important;
  }

.bg-navy-ultra-light .hover\:text-secondary:hover,
  .bg-gold-ultra-light .hover\:text-secondary:hover,
  [class~="bg-navy-ultra-light"] .hover\:text-secondary:hover,
  [class~="bg-gold-ultra-light"] .hover\:text-secondary:hover {
    color: var(--navy-dark) !important;
  }

.hover\:bg-gold-ultra-light:hover .text-secondary,.hover\:bg-gold-ultra-light:hover .text-white {
    color: var(--navy-dark) !important;
  }


  .bg-navy-ultra-light .hover\:text-white:hover,
  .bg-gold-ultra-light .hover\:text-white:hover,
  [class~="bg-navy-ultra-light"] .hover\:text-white:hover,
  [class~="bg-gold-ultra-light"] .hover\:text-white:hover {
    color: var(--navy-dark) !important;
  }

.bg-navy-ultra-light .hover\:text-secondary:hover,
  .bg-gold-ultra-light .hover\:text-secondary:hover,
  [class~="bg-navy-ultra-light"] .hover\:text-secondary:hover,
  [class~="bg-gold-ultra-light"] .hover\:text-secondary:hover {
    color: var(--navy-dark) !important;
  }


  .bg-navy-ultra-light .hover\:text-white:hover,
  .bg-gold-ultra-light .hover\:text-white:hover,
  [class~="bg-navy-ultra-light"] .hover\:text-white:hover,
  [class~="bg-gold-ultra-light"] .hover\:text-white:hover {
    color: var(--navy-dark) !important;
  }

.bg-navy-ultra-light .hover\:text-secondary:hover,
  .bg-gold-ultra-light .hover\:text-secondary:hover,
  [class~="bg-navy-ultra-light"] .hover\:text-secondary:hover,
  [class~="bg-gold-ultra-light"] .hover\:text-secondary:hover {
    color: var(--navy-dark) !important;
  }


  .bg-navy-ultra-light .hover\:text-white:hover,
  .bg-gold-ultra-light .hover\:text-white:hover,
  [class~="bg-navy-ultra-light"] .hover\:text-white:hover,
  [class~="bg-gold-ultra-light"] .hover\:text-white:hover {
    color: var(--navy-dark) !important;
  }

.hover\:text-primary:hover {
    color: var(--text-primary) !important;
  }

.hover\:text-secondary:hover {
    color: var(--text-secondary) !important;
  }

.hover\:text-gray-600:hover {
    color: var(--gray-600) !important;
  }

.hover\:text-gray-700:hover {
    color: var(--gray-700) !important;
  }

.hover\:text-gray-900:hover {
    color: var(--gray-900) !important;
  }

.hover\:text-navy-secondary:hover {
    color: var(--navy-secondary) !important;
  }

.hover\:text-navy-dark:hover {
    color: var(--navy-dark) !important;
  }

.hover\:text-gold-primary:hover {
    color: var(--gold-primary) !important;
  }

.hover\:text-gold-secondary:hover {
    color: var(--gold-secondary) !important;
  }

.hover\:text-gold-dark:hover {
    color: var(--gold-dark) !important;
  }

.hover\:text-white:hover {
    color: var(--white-pure) !important;
  }

.hover\:bg-navy-secondary:hover {
    background-color: var(--navy-secondary) !important;
  }

.hover\:bg-navy-dark:hover {
    background-color: var(--navy-dark) !important;
  }

.hover\:bg-navy-light:hover {
    background-color: var(--navy-light) !important;
  }

.hover\:bg-navy-ultra-light:hover {
    background-color: var(--navy-ultra-light) !important;
  }

.hover\:bg-gold-pale:hover {
    background-color: var(--gold-pale) !important;
  }

.hover\:bg-gold-ultra-light:hover {
    background-color: var(--gold-ultra-light) !important;
  }

.hover\:bg-gray-50:hover {
    background-color: var(--gray-50) !important;
  }

.hover\:bg-gray-100:hover {
    background-color: var(--gray-100) !important;
  }

.hover\:bg-gray-200:hover {
    background-color: var(--gray-200) !important;
  }

.hover\:bg-gray-300:hover {
    background-color: var(--gray-300) !important;
  }

.hover\:bg-white:hover {
    background-color: var(--white-pure) !important;
  }

.hover\:border-primary:hover {
    border-color: var(--border-primary) !important;
  }

.hover\:border-gray-200:hover {
    border-color: var(--gray-200) !important;
  }

.hover\:border-gray-400:hover {
    border-color: var(--gray-400) !important;
  }

.hover\:border-navy-primary:hover {
    border-color: var(--navy-primary) !important;
  }

.hover\:border-navy-light:hover {
    border-color: var(--navy-light) !important;
  }

.hover\:border-gold-primary:hover {
    border-color: var(--gold-primary) !important;
  }

.hover\:text-gray-600:hover
  .text-sm {
    color: var(--text-tertiary) !important;
  }

.hover\:text-gray-700:hover.text-sm,.hover\:text-gray-700:hover
  .text-base {
    color: var(--text-secondary) !important;
  }

.hover\:text-gray-900:hover.text-sm,.hover\:text-gray-900:hover
  .text-base {
    color: var(--text-primary) !important;
  }

.hover\:bg-navy-dark:hover,.hover\:bg-navy-dark:hover *,.hover\:bg-navy-dark:hover
  button,.hover\:bg-navy-dark:hover
  button * {
    color: white !important;
  }

.hover\:bg-gradient-to-r:hover.from-navy-dark,.hover\:bg-gradient-to-r:hover.from-navy-dark * {
    color: white !important;
  }

.hover\:bg-navy-dark:hover span {
    color: white !important;
  }

.hover\:bg-navy-dark:hover button[type="submit"] * {
    color: white !important;
  }

.hover\:bg-navy-dark:hover:disabled span {
    color: white !important;
  }

.hover\:bg-navy-dark:hover .animate-spin + span {
    color: white !important;
  }

.hover\:text-white:hover.btn-icon svg,.hover\:text-white:hover
  .btn-icon path,.hover\:text-white:hover
  .btn-icon:hover svg,.hover\:text-white:hover
  .btn-icon:hover path,.hover\:text-white:hover
  .btn-icon:focus svg,.hover\:text-white:hover
  .btn-icon:focus path,.hover\:text-white:hover
  .btn-icon:active svg,.hover\:text-white:hover
  .btn-icon:active path {
    color: white !important;
    fill: none !important;
    stroke: white !important;
    stroke-width: 2 !important;
  }


  nav .hover\:text-navy-primary:hoverbutton.hamburger-menu-button:hover,
  nav .hover\:text-navy-primary:hoverbutton[aria-label*="navigation menu"]:hover,
  nav .hover\:text-navy-primary:hoverbutton[aria-label*="Open navigation menu"]:hover,
  nav .hover\:text-navy-primary:hoverbutton[aria-label*="Close navigation menu"]:hover,
  nav .hover\:text-navy-primary:hoverbutton[aria-expanded]:hover,
  nav .lg\\:hidden .hover\:text-navy-primary:hoverbutton:hover,
  nav .hover\:text-navy-primary:hoverbutton[class*="hover:bg-white"]:hover {
    background-color: var(--navy-primary) !important;
    border-color: var(--navy-dark) !important;
    color: white !important;
  }

.hover\:bg-gradient-to-r:hover.from-navy-dark p,.hover\:bg-gradient-to-r:hover.from-navy-dark h3,.hover\:bg-gradient-to-r:hover.from-navy-dark span:not([class*="bg-"]) {
    color: white !important;
  }

[class*="from-navy-dark"] .hover\:text-navy-primary:hover,
  [class*="bg-navy-dark"] .hover\:text-navy-primary:hover {
    color: white !important;
  }

.hover\:text-gradient-gold:hover {
    background: linear-gradient(
      135deg,
      var(--gold-primary) 0%,
      var(--gold-light) 50%,
      var(--gold-secondary) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    text-shadow: none;
  }

.hover\:bg-navy-ultra-light:hover {
    color: var(--navy-primary) !important;
  }

.hover\:bg-navy-ultra-light:hover .text-white {
    color: var(--navy-primary) !important;
  }

.bg-navy-ultra-light .hover\:text-white:hover,
  [class~="bg-navy-ultra-light"] .hover\:text-white:hover,
  .from-navy-ultra-light .hover\:text-white:hover,
  [class~="from-navy-ultra-light"] .hover\:text-white:hover,
  .to-navy-ultra-light .hover\:text-white:hover,
  [class~="to-navy-ultra-light"] .hover\:text-white:hover,
  .via-navy-ultra-light .hover\:text-white:hover,
  [class~="via-navy-ultra-light"] .hover\:text-white:hover {
    color: var(--navy-primary) !important;
  }

.hover\:bg-navy-ultra-light:hover p,.hover\:bg-navy-ultra-light:hover h1,.hover\:bg-navy-ultra-light:hover h2,.hover\:bg-navy-ultra-light:hover h3,.hover\:bg-navy-ultra-light:hover h4,.hover\:bg-navy-ultra-light:hover h5,.hover\:bg-navy-ultra-light:hover h6,.hover\:bg-navy-ultra-light:hover
    span:not([class*="bg-"]):not([class*="text-gold"]):not(
      [class*="text-success"]
    ):not([class*="text-error"]):not([class*="text-red"]):not(
      [class*="text-orange"]
    ):not([class*="text-purple"]):not([class*="text-green"]):not(
      [class*="text-indigo"]
    ):not([class*="text-pink"]),.hover\:bg-navy-ultra-light:hover div:not([class*="bg-"]) {
    color: var(--navy-primary) !important;
  }

.hover\:bg-white:hover .hover\\:text-white:hover,.hover\:bg-white:hover button:hover[class*="hover:text-white"],.hover\:bg-white:hover a:hover[class*="hover:text-white"] {
    color: var(--navy-primary) !important;
  }

.hover\:bg-navy-ultra-light:hover svg {
    color: var(--navy-primary) !important;
  }

.hover\:bg-navy-ultra-light:hover .text-white svg {
    color: var(--navy-primary) !important;
  }

.bg-navy-ultra-light .hover\:text-white:hover svg,
  [class~="bg-navy-ultra-light"] .hover\:text-white:hover svg {
    color: var(--navy-primary) !important;
  }

.hover\:bg-navy-ultra-light:hoverbutton,.hover\:bg-navy-ultra-light:hover
  a {
    color: var(--navy-primary) !important;
  }

.hover\:bg-navy-ultra-light:hoverbutton:hover,.hover\:bg-navy-ultra-light:hover
  a:hover {
    background: var(--navy-primary) !important;
    color: white !important;
  }

.hover\:bg-navy-ultra-light:hoverdiv:hover,.hover\:bg-navy-ultra-light:hover
  p:hover,.hover\:bg-navy-ultra-light:hover
  span:hover,.hover\:bg-navy-ultra-light:hover:hover:not(button):not(a):not([role="button"]) {
    background-color: var(--navy-ultra-light) !important;
    color: var(--navy-primary) !important;
  }

.hover\:bg-navy-ultra-light:hover:hover
    *:not(button):not(a):not([role="button"]):not(.action-icon-btn):not(
      [class*="action-icon-btn"]
    ) {
    color: var(--navy-primary) !important;
  }

.hover\:bg-navy-ultra-light:hover:hover .text-secondary,.hover\:bg-navy-ultra-light:hover:hover .text-navy-primary,.hover\:bg-navy-ultra-light:hover:hover p,.hover\:bg-navy-ultra-light:hover:hover
    span:not(.action-icon-btn):not([class*="action-icon-btn"]) {
    color: var(--navy-primary) !important;
  }

.bg-navy-ultra-light:hover .hover\:text-secondary:hover,
  [class~="bg-navy-ultra-light"]:hover .hover\:text-secondary:hover {
    color: var(--navy-primary) !important;
  }

.hover\:bg-navy-ultra-light:hover:hover .text-secondary,.hover\:bg-navy-ultra-light:hover:hover .text-navy-primary,.hover\:bg-navy-ultra-light:hover:hover p,.hover\:bg-navy-ultra-light:hover:hover
    span:not(.action-icon-btn):not([class*="action-icon-btn"]) {
    color: var(--navy-primary) !important;
  }


  .bg-navy-ultra-light:hover .hover\:text-navy-primary:hover,
  [class~="bg-navy-ultra-light"]:hover .hover\:text-navy-primary:hover {
    color: var(--navy-primary) !important;
  }

.hover\:bg-navy-ultra-light:hover:hover .text-secondary,.hover\:bg-navy-ultra-light:hover:hover .text-navy-primary,.hover\:bg-navy-ultra-light:hover:hover p,.hover\:bg-navy-ultra-light:hover:hover
    span:not(.action-icon-btn):not([class*="action-icon-btn"]) {
    color: var(--navy-primary) !important;
  }

.bg-navy-ultra-light:hover .hover\:text-secondary:hover,
  [class~="bg-navy-ultra-light"]:hover .hover\:text-secondary:hover {
    color: var(--navy-primary) !important;
  }


  .bg-navy-ultra-light:hover .hover\:text-navy-primary:hover,
  [class~="bg-navy-ultra-light"]:hover .hover\:text-navy-primary:hover {
    color: var(--navy-primary) !important;
  }

.hover\:bg-gradient-to-r:hover.from-navy-ultra-light {
    color: var(--navy-primary) !important;
  }

.bg-gradient-to-br.from-navy-ultra-light .hover\:text-white:hover,
  .bg-gradient-to-r.from-navy-ultra-light .hover\:text-white:hover,
  [class*="bg-gradient"][class~="from-navy-ultra-light"] .hover\:text-white:hover,
  [class*="bg-gradient"][class~="via-navy-ultra-light"] .hover\:text-white:hover,
  [class*="bg-gradient"][class~="to-navy-ultra-light"] .hover\:text-white:hover {
    color: var(--navy-primary) !important;
  }

.hover\:bg-gradient-to-r:hover.from-navy-ultra-light .text-white {
    color: var(--navy-primary) !important;
  }

.bg-gradient-to-br.from-navy-ultra-light .hover\:text-white:hover,
  .bg-gradient-to-r.from-navy-ultra-light .hover\:text-white:hover,
  [class*="bg-gradient"][class~="from-navy-ultra-light"] .hover\:text-white:hover,
  [class*="bg-gradient"][class~="via-navy-ultra-light"] .hover\:text-white:hover,
  [class*="bg-gradient"][class~="to-navy-ultra-light"] .hover\:text-white:hover {
    color: var(--navy-primary) !important;
  }

.hover\:text-navy-primary:hoverbutton:not([class*="hover:bg-navy"]) *:not(.red-badge-text):not(.red-badge-text *) {
    color: var(--navy-primary) !important;
  }

.hover\:text-navy-dark:hover
  button:not([class*="hover:bg-navy"]) *:not(.red-badge-text):not(.red-badge-text *) {
    color: var(--navy-primary) !important;
  }

.hover\:text-secondary:hover
  button *:not(.red-badge-text):not(.red-badge-text *) {
    color: var(--navy-primary) !important;
  }

.hover\:text-navy-primary:hoverbutton:not([class*="hover:bg-navy"]):hover
    *:not(.red-badge-text):not(.red-badge-text *):not(.btn-primary):not(
      .btn-primary *
    ) {
    color: var(--gold-primary) !important;
  }

.hover\:text-navy-dark:hover
  button:not([class*="hover:bg-navy"]):hover
    *:not(.red-badge-text):not(.red-badge-text *):not(.btn-primary):not(
      .btn-primary *
    ) {
    color: var(--gold-primary) !important;
  }

.hover\:text-secondary:hover
  button:hover
    *:not(.red-badge-text):not(.red-badge-text *):not(.btn-primary):not(
      .btn-primary *
    ) {
    color: var(--gold-primary) !important;
  }

.hover\:text-navy-primary:hoverbutton.btn-primary:hover,.hover\:text-navy-primary:hover
  button.btn-primary:hover * {
    color: white !important;
  }

.hover\:bg-gray-200:hoverbutton[role="switch"],.hover\:bg-gray-200:hover
  button[role="switch"][class*="relative"][class*="inline-flex"] {
    background-color: rgb(229, 231, 235) !important;
    border: none !important;
  }


  button[role="switch"] > .hover\:bg-white:hoverspan,
  button[role="switch"] > .hover\:bg-white:hoverspan[class*="inline-block"] {
    display: inline-block !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    color: transparent !important;
  }

.hover\:bg-gray-200:hoverbutton[role="switch"] > span[class*="translate-x-0"],.hover\:bg-gray-200:hover
  button[role="switch"] > span[class*="translate-x-0.5"] {
    transform: translateX(0.125rem) !important;
  }

.hover\:bg-red-50:hover,.hover\:bg-red-50:hover
    *:not(button):not(a):not([role="button"]):not([class*="text-white"]):not(
      [class*="bg-red-"]
    ) {
    color: #7f1d1d !important;
  }

.hover\:bg-red-50:hover:hover:not(button):not(a):not([role="button"]) {
    background-color: #fef2f2 !important;
    color: #7f1d1d !important;
  }

.hover\:bg-red-50:hover:hover
    *:not(button):not(a):not([role="button"]):not([class*="text-white"]):not(
      [class*="bg-red-"]
    ) {
    color: #7f1d1d !important;
  }

.hover\:\!text-red-700:hover,
  div[class~="bg-red-50"] .hover\:\!text-red-700:hover {
    color: #991b1b !important;
    /* red-800 for high contrast */
  }

.hover\:text-red-700:hover,
  div[class~="bg-red-50"] .hover\:text-red-700:hover {
    color: #991b1b !important;
    /* red-800 for high contrast */
  }

.hover\:text-red-800:hover,
  div[class~="bg-red-50"] .hover\:text-red-800:hover {
    color: #991b1b !important;
    /* red-800 for high contrast */
  }

.hover\:\!text-red-700:hover,
  div[class~="bg-red-50"] .hover\:\!text-red-700:hover {
    color: #991b1b !important;
    /* red-800 for high contrast */
  }

.hover\:text-red-700:hover,
  div[class~="bg-red-50"] .hover\:text-red-700:hover {
    color: #991b1b !important;
    /* red-800 for high contrast */
  }

.hover\:text-red-800:hover,
  div[class~="bg-red-50"] .hover\:text-red-800:hover {
    color: #991b1b !important;
    /* red-800 for high contrast */
  }

.hover\:file\:bg-navy-pale::file-selector-button:hover,.hover\:file\:bg-navy-pale::file-selector-button:hover * {
    color: var(--navy-primary) !important;
  }

.focus\:bg-navy-primary:focus {
    background-color: var(--navy-primary) !important;
  }

.focus\:bg-navy-primary:focus:is(button, a.app-btn),.focus\:bg-navy-primary:focus
  .btn {
    color: white !important;
  }

.focus\:bg-navy-primary:focusbutton:hover,.focus\:bg-navy-primary:focus:hover {
    background-color: var(--navy-dark) !important;
    color: white !important;
  }

.focus\:bg-navy-primary:focus,.focus\:bg-navy-primary:focus * {
    color: white !important;
  }


  .bg-navy-ultra-light .focus\:text-white:focus,
  .bg-gold-ultra-light .focus\:text-white:focus,
  [class~="bg-navy-ultra-light"] .focus\:text-white:focus,
  [class~="bg-gold-ultra-light"] .focus\:text-white:focus {
    color: var(--navy-dark) !important;
  }

.focus\:text-white:focus {
    color: var(--white-pure) !important;
  }

.focus\:bg-navy-primary:focus {
    background-color: var(--navy-primary) !important;
  }

.focus\:border-error:focus {
    border-color: var(--border-error) !important;
  }

.focus\:border-success:focus {
    border-color: var(--border-success) !important;
  }

.focus\:border-navy-primary:focus {
    border-color: var(--navy-primary) !important;
  }

.focus\:border-gold-primary:focus {
    border-color: var(--gold-primary) !important;
  }

.focus\:bg-navy-primary:focus,.focus\:bg-navy-primary:focus *,.focus\:bg-navy-primary:focus
  button,.focus\:bg-navy-primary:focus
  button * {
    color: white !important;
  }

.focus\:bg-navy-primary:focus span {
    color: white !important;
  }

.focus\:bg-navy-primary:focus button[type="submit"] * {
    color: white !important;
  }

.focus\:bg-navy-primary:focus:disabled span {
    color: white !important;
  }

.focus\:bg-navy-primary:focus .animate-spin + span {
    color: white !important;
  }

.focus\:text-white:focus.btn-icon svg,.focus\:text-white:focus
  .btn-icon path,.focus\:text-white:focus
  .btn-icon:hover svg,.focus\:text-white:focus
  .btn-icon:hover path,.focus\:text-white:focus
  .btn-icon:focus svg,.focus\:text-white:focus
  .btn-icon:focus path,.focus\:text-white:focus
  .btn-icon:active svg,.focus\:text-white:focus
  .btn-icon:active path {
    color: white !important;
    fill: none !important;
    stroke: white !important;
    stroke-width: 2 !important;
  }

.focus\:px-4:focus .btn-icon {
    padding: 0.5rem !important;
  }

.bg-navy-ultra-light .focus\:text-white:focus,
  [class~="bg-navy-ultra-light"] .focus\:text-white:focus,
  .from-navy-ultra-light .focus\:text-white:focus,
  [class~="from-navy-ultra-light"] .focus\:text-white:focus,
  .to-navy-ultra-light .focus\:text-white:focus,
  [class~="to-navy-ultra-light"] .focus\:text-white:focus,
  .via-navy-ultra-light .focus\:text-white:focus,
  [class~="via-navy-ultra-light"] .focus\:text-white:focus {
    color: var(--navy-primary) !important;
  }

.bg-navy-ultra-light .focus\:text-white:focus svg,
  [class~="bg-navy-ultra-light"] .focus\:text-white:focus svg {
    color: var(--navy-primary) !important;
  }

.bg-gradient-to-br.from-navy-ultra-light .focus\:text-white:focus,
  .bg-gradient-to-r.from-navy-ultra-light .focus\:text-white:focus,
  [class*="bg-gradient"][class~="from-navy-ultra-light"] .focus\:text-white:focus,
  [class*="bg-gradient"][class~="via-navy-ultra-light"] .focus\:text-white:focus,
  [class*="bg-gradient"][class~="to-navy-ultra-light"] .focus\:text-white:focus {
    color: var(--navy-primary) !important;
  }

.focus\:bg-navy-primary:focusbutton[role="switch"],.focus\:bg-navy-primary:focus
  button[role="switch"][class*="relative"][class*="inline-flex"] {
    background-color: var(--navy-primary) !important;
    box-shadow:
      0 4px 12px rgba(3, 23, 116, 0.25),
      0 0 0 2px rgba(184, 134, 11, 0.2) !important;
    border: none !important;
  }

.focus\:bg-navy-primary:focusbutton[role="switch"] > span[class*="translate-x-6"] {
    transform: translateX(1.5rem) !important;
  }

.active\:bg-navy-dark:active
  :is(button, a.app-btn),.active\:bg-navy-dark:active
  .btn {
    color: white !important;
  }

.active\:bg-navy-dark:active
  button:hover,.active\:bg-navy-dark:active:hover {
    background-color: var(--navy-dark) !important;
    color: white !important;
  }

.active\:bg-navy-dark:active,.active\:bg-navy-dark:active * {
    color: white !important;
  }

.active\:bg-navy-ultra-light:active,.active\:bg-navy-ultra-light:active * {
    color: var(--navy-primary) !important;
  }

.active\:bg-navy-ultra-light:active .text-secondary,.active\:bg-navy-ultra-light:active .text-white {
    color: var(--navy-dark) !important;
  }

.active\:bg-navy-dark:active {
    background-color: var(--navy-dark) !important;
  }

.active\:bg-navy-light:active {
    background-color: var(--navy-light) !important;
  }

.active\:bg-navy-ultra-light:active {
    background-color: var(--navy-ultra-light) !important;
  }

.active\:bg-gray-100:active {
    background-color: var(--gray-100) !important;
  }

.active\:bg-navy-dark:active,.active\:bg-navy-dark:active *,.active\:bg-navy-dark:active
  button,.active\:bg-navy-dark:active
  button * {
    color: white !important;
  }

.active\:bg-navy-dark:active span {
    color: white !important;
  }

.active\:bg-navy-dark:active button[type="submit"] * {
    color: white !important;
  }

.active\:bg-navy-dark:active:disabled span {
    color: white !important;
  }

.active\:bg-navy-dark:active .animate-spin + span {
    color: white !important;
  }

.active\:bg-navy-ultra-light:active {
    color: var(--navy-primary) !important;
  }

.active\:bg-navy-ultra-light:active .text-white {
    color: var(--navy-primary) !important;
  }

.active\:bg-navy-ultra-light:active p,.active\:bg-navy-ultra-light:active h1,.active\:bg-navy-ultra-light:active h2,.active\:bg-navy-ultra-light:active h3,.active\:bg-navy-ultra-light:active h4,.active\:bg-navy-ultra-light:active h5,.active\:bg-navy-ultra-light:active h6,.active\:bg-navy-ultra-light:active
    span:not([class*="bg-"]):not([class*="text-gold"]):not(
      [class*="text-success"]
    ):not([class*="text-error"]):not([class*="text-red"]):not(
      [class*="text-orange"]
    ):not([class*="text-purple"]):not([class*="text-green"]):not(
      [class*="text-indigo"]
    ):not([class*="text-pink"]),.active\:bg-navy-ultra-light:active div:not([class*="bg-"]) {
    color: var(--navy-primary) !important;
  }

.active\:bg-navy-ultra-light:active svg {
    color: var(--navy-primary) !important;
  }

.active\:bg-navy-ultra-light:active .text-white svg {
    color: var(--navy-primary) !important;
  }

.active\:bg-navy-ultra-light:activebutton,.active\:bg-navy-ultra-light:active
  a {
    color: var(--navy-primary) !important;
  }

.active\:bg-navy-ultra-light:activebutton:hover,.active\:bg-navy-ultra-light:active
  a:hover {
    background: var(--navy-primary) !important;
    color: white !important;
  }

.active\:bg-navy-ultra-light:activediv:hover,.active\:bg-navy-ultra-light:active
  p:hover,.active\:bg-navy-ultra-light:active
  span:hover,.active\:bg-navy-ultra-light:active:hover:not(button):not(a):not([role="button"]) {
    background-color: var(--navy-ultra-light) !important;
    color: var(--navy-primary) !important;
  }

.active\:bg-navy-ultra-light:active:hover
    *:not(button):not(a):not([role="button"]):not(.action-icon-btn):not(
      [class*="action-icon-btn"]
    ) {
    color: var(--navy-primary) !important;
  }

.active\:bg-navy-ultra-light:active:hover .text-secondary,.active\:bg-navy-ultra-light:active:hover .text-navy-primary,.active\:bg-navy-ultra-light:active:hover p,.active\:bg-navy-ultra-light:active:hover
    span:not(.action-icon-btn):not([class*="action-icon-btn"]) {
    color: var(--navy-primary) !important;
  }

.disabled\:bg-gray-100:disabled {
    background-color: var(--gray-100) !important;
  }

.group\/faq:hover .group-hover\/faq\:text-gold-primary {
    color: var(--gold-text) !important;
  }

.group:hover .group-hover\:text-gold-primary {
    color: var(--gold-text) !important;
  }


  .bg-navy-ultra-light .group:hover .group-hover\:\!text-white,
  .bg-gold-ultra-light .group:hover .group-hover\:\!text-white,
  [class~="bg-navy-ultra-light"] .group:hover .group-hover\:\!text-white,
  [class~="bg-gold-ultra-light"] .group:hover .group-hover\:\!text-white {
    color: var(--navy-dark) !important;
  }

.group\/faq:hover .group-hover\/faq\:text-gold-primary {
    color: var(--gold-primary) !important;
  }

.group:hover .group-hover\:text-gold-primary {
    color: var(--gold-primary) !important;
  }

.group:hover .group-hover\:\!text-white {
    color: var(--white-pure) !important;
  }

.group:hover .group-hover\:\!text-white.btn-icon svg,.group:hover .group-hover\:\!text-white
  .btn-icon path,.group:hover .group-hover\:\!text-white
  .btn-icon:hover svg,.group:hover .group-hover\:\!text-white
  .btn-icon:hover path,.group:hover .group-hover\:\!text-white
  .btn-icon:focus svg,.group:hover .group-hover\:\!text-white
  .btn-icon:focus path,.group:hover .group-hover\:\!text-white
  .btn-icon:active svg,.group:hover .group-hover\:\!text-white
  .btn-icon:active path {
    color: white !important;
    fill: none !important;
    stroke: white !important;
    stroke-width: 2 !important;
  }

.bg-navy-ultra-light .group:hover .group-hover\:\!text-white,
  [class~="bg-navy-ultra-light"] .group:hover .group-hover\:\!text-white,
  .from-navy-ultra-light .group:hover .group-hover\:\!text-white,
  [class~="from-navy-ultra-light"] .group:hover .group-hover\:\!text-white,
  .to-navy-ultra-light .group:hover .group-hover\:\!text-white,
  [class~="to-navy-ultra-light"] .group:hover .group-hover\:\!text-white,
  .via-navy-ultra-light .group:hover .group-hover\:\!text-white,
  [class~="via-navy-ultra-light"] .group:hover .group-hover\:\!text-white {
    color: var(--navy-primary) !important;
  }

.bg-navy-ultra-light .group:hover .group-hover\:\!text-white svg,
  [class~="bg-navy-ultra-light"] .group:hover .group-hover\:\!text-white svg {
    color: var(--navy-primary) !important;
  }

.bg-gradient-to-br.from-navy-ultra-light .group:hover .group-hover\:\!text-white,
  .bg-gradient-to-r.from-navy-ultra-light .group:hover .group-hover\:\!text-white,
  [class*="bg-gradient"][class~="from-navy-ultra-light"] .group:hover .group-hover\:\!text-white,
  [class*="bg-gradient"][class~="via-navy-ultra-light"] .group:hover .group-hover\:\!text-white,
  [class*="bg-gradient"][class~="to-navy-ultra-light"] .group:hover .group-hover\:\!text-white {
    color: var(--navy-primary) !important;
  }


  .bg-navy-ultra-light .group:active .group-active\:\!text-white,
  .bg-gold-ultra-light .group:active .group-active\:\!text-white,
  [class~="bg-navy-ultra-light"] .group:active .group-active\:\!text-white,
  [class~="bg-gold-ultra-light"] .group:active .group-active\:\!text-white {
    color: var(--navy-dark) !important;
  }

.group:active .group-active\:\!text-white {
    color: var(--white-pure) !important;
  }

.group:active .group-active\:\!text-white.btn-icon svg,.group:active .group-active\:\!text-white
  .btn-icon path,.group:active .group-active\:\!text-white
  .btn-icon:hover svg,.group:active .group-active\:\!text-white
  .btn-icon:hover path,.group:active .group-active\:\!text-white
  .btn-icon:focus svg,.group:active .group-active\:\!text-white
  .btn-icon:focus path,.group:active .group-active\:\!text-white
  .btn-icon:active svg,.group:active .group-active\:\!text-white
  .btn-icon:active path {
    color: white !important;
    fill: none !important;
    stroke: white !important;
    stroke-width: 2 !important;
  }

.bg-navy-ultra-light .group:active .group-active\:\!text-white,
  [class~="bg-navy-ultra-light"] .group:active .group-active\:\!text-white,
  .from-navy-ultra-light .group:active .group-active\:\!text-white,
  [class~="from-navy-ultra-light"] .group:active .group-active\:\!text-white,
  .to-navy-ultra-light .group:active .group-active\:\!text-white,
  [class~="to-navy-ultra-light"] .group:active .group-active\:\!text-white,
  .via-navy-ultra-light .group:active .group-active\:\!text-white,
  [class~="via-navy-ultra-light"] .group:active .group-active\:\!text-white {
    color: var(--navy-primary) !important;
  }

.bg-navy-ultra-light .group:active .group-active\:\!text-white svg,
  [class~="bg-navy-ultra-light"] .group:active .group-active\:\!text-white svg {
    color: var(--navy-primary) !important;
  }

.bg-gradient-to-br.from-navy-ultra-light .group:active .group-active\:\!text-white,
  .bg-gradient-to-r.from-navy-ultra-light .group:active .group-active\:\!text-white,
  [class*="bg-gradient"][class~="from-navy-ultra-light"] .group:active .group-active\:\!text-white,
  [class*="bg-gradient"][class~="via-navy-ultra-light"] .group:active .group-active\:\!text-white,
  [class*="bg-gradient"][class~="to-navy-ultra-light"] .group:active .group-active\:\!text-white {
    color: var(--navy-primary) !important;
  }

@media (min-width: 640px) {
  .sm\:space-y-6 > * + * {
    margin-top: 1.5rem !important;
  }
  @media (max-width: 640px) {

    /* Reduce spacing in button groups */
    .sm\:flex.gap-3,.sm\:flex.gap-4 {
      gap: 0.5rem !important;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .sm\:flex.flex-col.md\\:flex-row {
      flex-direction: column !important;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .sm\:gap-3.flex {
      gap: 0.5rem !important;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .sm\:flex.gap-3,.sm\:flex.gap-4 {
      gap: 0.5rem !important;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .sm\:flex.flex-col.md\\:flex-row {
      flex-direction: column !important;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .sm\:gap-4
    .flex {
      gap: 0.5rem !important;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .sm\:flex.gap-3,.sm\:flex.gap-4 {
      gap: 0.5rem !important;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .sm\:flex.flex-col.md\\:flex-row {
      flex-direction: column !important;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .sm\:flex-col.flex.md\\:flex-row {
      flex-direction: column !important;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .sm\:grid.grid-cols-1.md\\:grid-cols-4,.sm\:grid.grid-cols-1.md\\:grid-cols-3,.sm\:grid.grid-cols-1.md\\:grid-cols-2 {
      grid-template-columns: 1fr !important;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .sm\:grid-cols-1.grid.md\\:grid-cols-4,.sm\:grid-cols-1
    .grid.md\\:grid-cols-3,.sm\:grid-cols-1
    .grid.md\\:grid-cols-2 {
      grid-template-columns: 1fr !important;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .sm\:grid.grid-cols-1.md\\:grid-cols-4,.sm\:grid.grid-cols-1.md\\:grid-cols-3,.sm\:grid.grid-cols-1.md\\:grid-cols-2 {
      grid-template-columns: 1fr !important;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .sm\:grid-cols-1.grid.md\\:grid-cols-4,.sm\:grid-cols-1
    .grid.md\\:grid-cols-3,.sm\:grid-cols-1
    .grid.md\\:grid-cols-2 {
      grid-template-columns: 1fr !important;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .sm\:grid.grid-cols-1.md\\:grid-cols-4,.sm\:grid.grid-cols-1.md\\:grid-cols-3,.sm\:grid.grid-cols-1.md\\:grid-cols-2 {
      grid-template-columns: 1fr !important;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */
    .sm\:grid-cols-1.grid.md\\:grid-cols-4,.sm\:grid-cols-1
    .grid.md\\:grid-cols-3,.sm\:grid-cols-1
    .grid.md\\:grid-cols-2 {
      grid-template-columns: 1fr !important;
    }

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
  }

  @media (min-width: 641px) and (max-width: 1024px) {
    /* Tablet adjustments */

    /* Button groups stay in single row on tablet */

    /* Stats cards in 2 columns on tablet */
    .sm\:grid.grid-cols-1.md\\:grid-cols-4 {
      grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Tablet adjustments */

    /* Button groups stay in single row on tablet */

    /* Stats cards in 2 columns on tablet */
    .sm\:grid-cols-1.grid.md\\:grid-cols-4 {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
  .sm\:flex.items-center.gap-2.ml-4 {
    margin-left: 0.5rem !important;
    flex-shrink: 0;
  }
  .sm\:items-center.flex.gap-2.ml-4 {
    margin-left: 0.5rem !important;
    flex-shrink: 0;
  }
  .sm\:gap-2.flex.items-center.ml-4 {
    margin-left: 0.5rem !important;
    flex-shrink: 0;
  }
  .sm\:ml-4.flex.items-center.gap-2 {
    margin-left: 0.5rem !important;
    flex-shrink: 0;
  }

  @media (max-width: 640px) {
    .sm\:flex.items-center.gap-2.ml-4 {
      flex-direction: column;
      gap: 0.25rem !important;
    }
    .sm\:items-center.flex.gap-2.ml-4 {
      flex-direction: column;
      gap: 0.25rem !important;
    }
    .sm\:gap-2.flex.items-center.ml-4 {
      flex-direction: column;
      gap: 0.25rem !important;
    }
    .sm\:ml-4.flex.items-center.gap-2 {
      flex-direction: column;
      gap: 0.25rem !important;
    }
  }
  .sm\:grid.gap-4,.sm\:grid.gap-6 {
    gap: 1rem;
  }
  .sm\:gap-4.grid {
    gap: 1rem;
  }
  .sm\:grid.gap-4,.sm\:grid.gap-6 {
    gap: 1rem;
  }
  .sm\:gap-6
  .grid {
    gap: 1rem;
  }

  @media (max-width: 640px) {
    .sm\:grid.gap-4,.sm\:grid.gap-6 {
      gap: 0.75rem;
    }
    .sm\:gap-4.grid {
      gap: 0.75rem;
    }
    .sm\:grid.gap-4,.sm\:grid.gap-6 {
      gap: 0.75rem;
    }
    .sm\:gap-6
    .grid {
      gap: 0.75rem;
    }
  }
  .sm\:space-y-6 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .sm\:right-6.fixed.bottom-6 {
    bottom: 1rem;
    right: 1rem;
  }

  @media (max-width: 640px) {
    .sm\:right-6.fixed.bottom-6 {
      bottom: 0.75rem;
      right: 0.75rem;
    }

    /* Make floating contact popover properly sized on mobile */
    .sm\:right-6.fixed.bottom-6 > div {
      max-width: calc(100vw - 2rem);
    }

    .sm\:right-6.fixed.bottom-6 button {
      width: 3.5rem;
      height: 3.5rem;
    }
    .sm\:right-6.fixed.bottom-6 {
      bottom: 0.75rem;
      right: 0.75rem;
    }

    /* Make floating contact popover properly sized on mobile */
    .sm\:right-6.fixed.bottom-6 > div {
      max-width: calc(100vw - 2rem);
    }

    .sm\:right-6.fixed.bottom-6 button {
      width: 3.5rem;
      height: 3.5rem;
    }
    .sm\:right-6.fixed.bottom-6 {
      bottom: 0.75rem;
      right: 0.75rem;
    }

    /* Make floating contact popover properly sized on mobile */
    .sm\:right-6.fixed.bottom-6 > div {
      max-width: calc(100vw - 2rem);
    }

    .sm\:right-6.fixed.bottom-6 button {
      width: 3.5rem;
      height: 3.5rem;
    }
  }
  @media print {
    .sm\:right-6
    .fixed.bottom-6 {
      display: none !important;
    }
  }
  @media (max-width: 768px) {
    .sm\:grid[class*="grid-cols-2"],.sm\:grid[class*="grid-cols-3"],.sm\:grid[class*="grid-cols-4"] {
      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .sm\:grid[class*="sm:grid-cols-2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .sm\:grid[class*="grid-cols-2"],.sm\:grid[class*="grid-cols-3"],.sm\:grid[class*="grid-cols-4"] {
      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .sm\:grid[class*="sm:grid-cols-2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .sm\:grid[class*="grid-cols-2"],.sm\:grid[class*="grid-cols-3"],.sm\:grid[class*="grid-cols-4"] {
      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .sm\:grid[class*="sm:grid-cols-2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .sm\:grid[class*="grid-cols-2"],.sm\:grid[class*="grid-cols-3"],.sm\:grid[class*="grid-cols-4"] {
      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .sm\:grid[class*="sm:grid-cols-2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
  .sm\:flex > button + button {
    margin-left: 0 !important;
  }
  .sm\:w-12.rounded-full img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }
  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-secondary);
  }
  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--text-secondary);
  }
  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--text-secondary);
  }
  .sm\:text-sm.text-gray-500,.sm\:text-sm.text-gray-600 {
    color: var(--text-tertiary) !important;
  }

  .sm\:text-sm.text-gray-700 {
    color: var(--text-secondary) !important;
  }

  .sm\:text-base.text-gray-700 {
    color: var(--text-secondary) !important;
  }

  .sm\:text-sm.text-gray-900 {
    color: var(--text-primary) !important;
  }

  .sm\:text-base.text-gray-900 {
    color: var(--text-primary) !important;
  }

  .search-dropdown .sm\:p-2 {
    background: white;
  }

  .search-dropdown a p.sm\:text-sm {
    color: var(--navy-dark);
  }
  .sm\:px-4 .btn-icon {
    padding: 0.5rem !important;
  }
  .sm\:w-12.report-death-gradient {
    background: linear-gradient(
      135deg,
      #dc2626 0%,
      #b91c1c 25%,
      #991b1b 50%,
      #b91c1c 75%,
      #dc2626 100%
    ) !important;
    background-color: transparent !important;
  }
  .sm\:w-20
  .report-death-gradient {
    background: linear-gradient(
      135deg,
      #dc2626 0%,
      #b91c1c 25%,
      #991b1b 50%,
      #b91c1c 75%,
      #dc2626 100%
    ) !important;
    background-color: transparent !important;
  }
  
  button.sm\:rounded-2xl,
  a.sm\:rounded-2xl.app-btn,.sm\:rounded-2xl
  .btn {
    /* Force all buttons to use rounded-xl */
    /* Force all buttons to use rounded-xl */
    border-radius: var(--radius-xl) !important;
    /* Force all buttons to use rounded-xl */
  }
}

@media (min-width: 768px) {
  @media (max-width: 640px) {

    /* Reduce spacing in button groups */
    .md\:flex.gap-3,.md\:flex.gap-4 {
      gap: 0.5rem !important;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .md\:flex.flex-col.md\\:flex-row {
      flex-direction: column !important;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .md\:gap-3.flex {
      gap: 0.5rem !important;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .md\:flex.gap-3,.md\:flex.gap-4 {
      gap: 0.5rem !important;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .md\:flex.flex-col.md\\:flex-row {
      flex-direction: column !important;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .md\:gap-4
    .flex {
      gap: 0.5rem !important;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .md\:flex.gap-3,.md\:flex.gap-4 {
      gap: 0.5rem !important;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .md\:flex.flex-col.md\\:flex-row {
      flex-direction: column !important;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
  }
  .md\:flex.items-center.gap-2.ml-4 {
    margin-left: 0.5rem !important;
    flex-shrink: 0;
  }
  .md\:items-center.flex.gap-2.ml-4 {
    margin-left: 0.5rem !important;
    flex-shrink: 0;
  }

  @media (max-width: 640px) {
    .md\:flex.items-center.gap-2.ml-4 {
      flex-direction: column;
      gap: 0.25rem !important;
    }
    .md\:items-center.flex.gap-2.ml-4 {
      flex-direction: column;
      gap: 0.25rem !important;
    }
  }
  .md\:gap-4.grid {
    gap: 1rem;
  }

  @media (max-width: 640px) {
    .md\:gap-4.grid {
      gap: 0.75rem;
    }
  }
  .md\:flex > button + button {
    margin-left: 0 !important;
  }
  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-secondary);
  }
  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--text-secondary);
  }
  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--text-secondary);
  }
  .md\:text-sm.text-gray-500,.md\:text-sm.text-gray-600 {
    color: var(--text-tertiary) !important;
  }

  .md\:text-sm.text-gray-700 {
    color: var(--text-secondary) !important;
  }

  .md\:text-base.text-gray-700 {
    color: var(--text-secondary) !important;
  }

  .md\:text-sm.text-gray-900 {
    color: var(--text-primary) !important;
  }

  .md\:text-base.text-gray-900 {
    color: var(--text-primary) !important;
  }

  .search-dropdown a p.md\:text-sm {
    color: var(--navy-dark);
  }
}

@media (min-width: 1024px) {
  @media (max-width: 640px) {

    /* Reduce spacing in button groups */
    .lg\:flex.gap-3,.lg\:flex.gap-4 {
      gap: 0.5rem !important;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .lg\:flex.flex-col.md\\:flex-row {
      flex-direction: column !important;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .lg\:flex.gap-3,.lg\:flex.gap-4 {
      gap: 0.5rem !important;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .lg\:flex.flex-col.md\\:flex-row {
      flex-direction: column !important;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .lg\:gap-4
    .flex {
      gap: 0.5rem !important;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */
    .lg\:flex.gap-3,.lg\:flex.gap-4 {
      gap: 0.5rem !important;
    }

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .lg\:flex.flex-col.md\\:flex-row {
      flex-direction: column !important;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */

    /* Reduce spacing in button groups */

    /* Keep button groups in single row on mobile */

    /* Search and filter sections */
    .lg\:flex-col.flex.md\\:flex-row {
      flex-direction: column !important;
    }

    /* Stats cards - ensure they stack properly */

    /* Button text wrapping handled by responsive layout */

    /* Responsive font sizes */
  }
  .lg\:flex.items-center.gap-2.ml-4 {
    margin-left: 0.5rem !important;
    flex-shrink: 0;
  }
  .lg\:items-center.flex.gap-2.ml-4 {
    margin-left: 0.5rem !important;
    flex-shrink: 0;
  }

  @media (max-width: 640px) {
    .lg\:flex.items-center.gap-2.ml-4 {
      flex-direction: column;
      gap: 0.25rem !important;
    }
    .lg\:items-center.flex.gap-2.ml-4 {
      flex-direction: column;
      gap: 0.25rem !important;
    }
  }
  .lg\:gap-4.grid {
    gap: 1rem;
  }

  @media (max-width: 640px) {
    .lg\:gap-4.grid {
      gap: 0.75rem;
    }
  }
  .lg\:fixed.bottom-6.right-6 {
    bottom: 1rem;
    right: 1rem;
  }

  @media (max-width: 640px) {
    .lg\:fixed.bottom-6.right-6 {
      bottom: 0.75rem;
      right: 0.75rem;
    }

    /* Make floating contact popover properly sized on mobile */
    .lg\:fixed.bottom-6.right-6 > div {
      max-width: calc(100vw - 2rem);
    }

    .lg\:fixed.bottom-6.right-6 button {
      width: 3.5rem;
      height: 3.5rem;
    }
    .lg\:fixed.bottom-6.right-6 {
      bottom: 0.75rem;
      right: 0.75rem;
    }

    /* Make floating contact popover properly sized on mobile */
    .lg\:fixed.bottom-6.right-6 > div {
      max-width: calc(100vw - 2rem);
    }

    .lg\:fixed.bottom-6.right-6 button {
      width: 3.5rem;
      height: 3.5rem;
    }
    .lg\:fixed.bottom-6.right-6 {
      bottom: 0.75rem;
      right: 0.75rem;
    }

    /* Make floating contact popover properly sized on mobile */
    .lg\:fixed.bottom-6.right-6 > div {
      max-width: calc(100vw - 2rem);
    }

    .lg\:fixed.bottom-6.right-6 button {
      width: 3.5rem;
      height: 3.5rem;
    }
  }
  @media print {
    .lg\:fixed.bottom-6.right-6 {
      display: none !important;
    }
  }
  
  div.lg\:fixed.inset-0[class*="bg-black"],
  div.lg\:fixed.inset-0[class*="bg-opacity"] {
    /* CRITICAL: Use 100dvh for mobile to account for dynamic browser UI */
    /* Dynamic viewport height for mobile */
    /* Dynamic viewport height for mobile */
    /* Dynamic viewport height for mobile */
    /* CRITICAL: Ensure overlay is positioned relative to viewport, not any parent */
    /* CRITICAL: Prevent any parent container from affecting positioning */
    /* CRITICAL: Ensure no margin or padding that could cause spacing */
    /* CRITICAL: Use 100dvh for mobile to account for dynamic browser UI */
    height: 100vh !important;
    height: 100dvh !important;
    /* Dynamic viewport height for mobile */
    min-height: 100vh !important;
    min-height: 100dvh !important;
    /* Dynamic viewport height for mobile */
    max-height: 100vh !important;
    max-height: 100dvh !important;
    /* Dynamic viewport height for mobile */
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* CRITICAL: Ensure overlay is positioned relative to viewport, not any parent */
    transform: none !important;
    /* CRITICAL: Prevent any parent container from affecting positioning */
    contain: layout style paint !important;
    /* CRITICAL: Ensure no margin or padding that could cause spacing */
    margin: 0 !important;
    padding: 0 !important;
  }
  @supports (-webkit-touch-callout: none) {
    
    div.lg\:fixed.inset-0[class*="bg-black"],
    div.lg\:fixed.inset-0[class*="bg-opacity"] {
      height: -webkit-fill-available !important;
      min-height: -webkit-fill-available !important;
    }
  }
  .lg\:flex > button + button {
    margin-left: 0 !important;
  }
  .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--text-secondary);
  }
  @media (max-width: 475px) {

    .lg\:fixed.z-tutorial-overlay {
      margin-left: 0;
      max-width: calc(100vw - 1rem);
      left: 50%;
      transform: translateX(-50%);
      top: 20px !important;
      bottom: 20px !important;
      max-height: calc(100vh - 40px);
      overflow-y: auto;
    }
  }
  @media (min-width: 476px) and (max-width: 767px) {

    .lg\:fixed.z-tutorial-overlay {
      margin-left: 0;
      max-width: calc(100vw - 2rem);
      left: 50%;
      transform: translateX(-50%);
    }
  }
  @media (min-width: 768px) and (max-width: 1023px) {

    .lg\:fixed.z-tutorial-overlay.sidebar-open {
      margin-left: 320px;
      /* Account for sidebar */
      max-width: calc(100vw - 320px);
    }

    .lg\:fixed.z-tutorial-overlay.sidebar-closed {
      margin-left: 0;
      max-width: calc(100vw - 2rem);
    }

    .lg\:fixed.z-tutorial-overlay.sidebar-open {
      margin-left: 320px;
      /* Account for sidebar */
      max-width: calc(100vw - 320px);
    }

    .lg\:fixed.z-tutorial-overlay.sidebar-closed {
      margin-left: 0;
      max-width: calc(100vw - 2rem);
    }
  }
  @media (min-width: 1024px) {

    /* Ensure tutorial card appears above sidebar */
    .lg\:fixed.z-tutorial-overlay {
      margin-left: 320px;
      /* Account for sidebar width */
      max-width: calc(100vw - 320px);
      /* Prevent overflow */
    }
  }
}

@media (min-width: 1280px) {
  .xl\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--text-secondary);
  }

  .xl\:text-base.text-gray-700 {
    color: var(--text-secondary) !important;
  }

  .xl\:text-base.text-gray-900 {
    color: var(--text-primary) !important;
  }
}

.file\:mr-3::file-selector-button {
  margin-right: 0.75rem;
}

.file\:rounded-lg::file-selector-button {
  border-radius: var(--radius-xl);
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-navy-ultra-light::file-selector-button {
  background-color: var(--navy-ultra-light);
}

.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}

.file\:px-4::file-selector-button {
  padding-left: 1rem;
  padding-right: 1rem;
}

.file\:py-2::file-selector-button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.file\:text-navy-primary::file-selector-button {
  color: var(--navy-primary);
}

.placeholder\:text-gray-400::-moz-placeholder {
  color: var(--gray-400);
}

.placeholder\:text-gray-400::placeholder {
  color: var(--gray-400);
}

.placeholder\:text-slate-500::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.placeholder\:text-slate-500::placeholder {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.placeholder\:text-text-muted::-moz-placeholder {
  color: var(--gray-400);
}

.placeholder\:text-text-muted::placeholder {
  color: var(--gray-400);
}

.last\:mb-0:last-child {
  margin-bottom: 0px;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.focus-within\:ring-2:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-within\:ring-blue-600:focus-within {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity, 1));
}

.focus-within\:ring-offset-2:focus-within {
  --tw-ring-offset-width: 2px;
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.01\]:hover {
  --tw-scale-x: 1.01;
  --tw-scale-y: 1.01;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-\[\#14213d\]\/20:hover {
  border-color: rgb(20 33 61 / 0.2);
}

.hover\:border-gold-light:hover {
  border-color: var(--gold-light);
}

.hover\:border-gold-pale:hover {
  border-color: var(--gold-pale);
}

.hover\:border-gold-primary:hover {
  border-color: var(--gold-primary);
}

.hover\:border-gray-200:hover {
  border-color: var(--gray-200);
}

.hover\:border-gray-400:hover {
  border-color: var(--gray-400);
}

.hover\:border-gray-600:hover {
  border-color: var(--gray-600);
}

.hover\:border-green-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}

.hover\:border-green-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}

.hover\:border-green-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}

.hover\:border-navy-light:hover {
  border-color: var(--navy-light);
}

.hover\:border-navy-primary:hover {
  border-color: var(--navy-primary);
}

.hover\:border-red-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.hover\:border-red-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}

.hover\:border-red-400\/30:hover {
  border-color: rgb(248 113 113 / 0.3);
}

.hover\:border-slate-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

.hover\:border-white:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.hover\:bg-amber-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-black\/5:hover {
  background-color: rgb(0 0 0 / 0.05);
}

.hover\:bg-gold-dark:hover {
  background-color: var(--gold-dark);
}

.hover\:bg-gold-pale:hover {
  background-color: var(--gold-pale);
}

.hover\:bg-gold-ultra-light:hover {
  background-color: var(--gold-ultra-light);
}

.hover\:bg-gray-100:hover {
  background-color: var(--gray-100);
}

.hover\:bg-gray-200:hover {
  background-color: var(--gray-200);
}

.hover\:bg-gray-300:hover {
  background-color: var(--gray-300);
}

.hover\:bg-gray-50:hover {
  background-color: var(--gray-50);
}

.hover\:bg-gray-700:hover {
  background-color: var(--gray-700);
}

.hover\:bg-green-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.hover\:bg-navy-700:hover {
  background-color: var(--navy-700);
}

.hover\:bg-navy-dark:hover {
  background-color: var(--navy-dark);
}

.hover\:bg-navy-light:hover {
  background-color: var(--navy-light);
}

.hover\:bg-navy-ultra-light:hover {
  background-color: var(--navy-ultra-light);
}

.hover\:bg-orange-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-500\/15:hover {
  background-color: rgb(239 68 68 / 0.15);
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.hover\:bg-transparent:hover {
  background-color: transparent;
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}

.hover\:bg-white\/25:hover {
  background-color: rgb(255 255 255 / 0.25);
}

.hover\:bg-white\/80:hover {
  background-color: rgb(255 255 255 / 0.8);
}

.hover\:bg-opacity-75:hover {
  --tw-bg-opacity: 0.75;
}

.hover\:bg-gradient-to-r:hover {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.hover\:from-green-600:hover {
  --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-red-100:hover {
  --tw-gradient-from: #fee2e2 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(254 226 226 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:to-emerald-700:hover {
  --tw-gradient-to: #047857 var(--tw-gradient-to-position);
}

.hover\:to-orange-100:hover {
  --tw-gradient-to: #ffedd5 var(--tw-gradient-to-position);
}

.hover\:to-transparent:hover {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.hover\:\!text-red-700:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1)) !important;
}

.hover\:text-\[\#0d1729\]:hover {
  --tw-text-opacity: 1;
  color: rgb(13 23 41 / var(--tw-text-opacity, 1));
}

.hover\:text-amber-600:hover {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}

.hover\:text-amber-900:hover {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}

.hover\:text-gold-dark:hover {
  color: var(--gold-dark);
}

.hover\:text-gold-primary:hover {
  color: var(--gold-primary);
}

.hover\:text-gold-secondary:hover {
  color: var(--gold-secondary);
}

.hover\:text-gray-600:hover {
  color: var(--gray-600);
}

.hover\:text-gray-700:hover {
  color: var(--gray-700);
}

.hover\:text-gray-900:hover {
  color: var(--gray-900);
}

.hover\:text-green-600:hover {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.hover\:text-green-900:hover {
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}

.hover\:text-indigo-800:hover {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}

.hover\:text-indigo-900:hover {
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}

.hover\:text-navy-dark:hover {
  color: var(--navy-dark);
}

.hover\:text-navy-primary:hover {
  color: var(--navy-primary);
}

.hover\:text-orange-900:hover {
  --tw-text-opacity: 1;
  color: rgb(124 45 18 / var(--tw-text-opacity, 1));
}

.hover\:text-red-200:hover {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}

.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.hover\:text-red-800:hover {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.hover\:text-red-900:hover {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-700:hover {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:shadow-2xl:hover {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-sm:hover {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:ring-white\/40:hover {
  --tw-ring-color: rgb(255 255 255 / 0.4);
}

.hover\:brightness-105:hover {
  --tw-brightness: brightness(1.05);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focus\:absolute:focus {
  position: absolute;
}

.focus\:left-4:focus {
  left: 1rem;
}

.focus\:top-4:focus {
  top: 1rem;
}

.focus\:z-50:focus {
  z-index: 50;
}

.focus\:rounded-lg:focus {
  border-radius: var(--radius-xl);
}

.focus\:border-amber-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:border-blue-600:focus {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

.focus\:border-error:focus {
  border-color: var(--error);
}

.focus\:border-gold-primary:focus {
  border-color: var(--gold-primary);
}

.focus\:border-green-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.focus\:border-navy-primary:focus {
  border-color: var(--navy-primary);
}

.focus\:border-red-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.focus\:border-success:focus {
  border-color: var(--success);
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

.focus\:bg-navy-primary:focus {
  background-color: var(--navy-primary);
}

.focus\:px-4:focus {
  padding-left: 1rem;
  padding-right: 1rem;
}

.focus\:py-2:focus {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.focus\:text-white:focus {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-4:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-inset:focus {
  --tw-ring-inset: inset;
}

.focus\:ring-amber-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(251 191 36 / var(--tw-ring-opacity, 1));
}

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-blue-600:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity, 1));
}

.focus\:ring-gold-primary:focus {
  --tw-ring-color: var(--gold-primary);
}

.focus\:ring-gray-500:focus {
  --tw-ring-color: var(--gray-500);
}

.focus\:ring-green-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}

.focus\:ring-indigo-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}

.focus\:ring-navy-primary:focus {
  --tw-ring-color: var(--navy-primary);
}

.focus\:ring-orange-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity, 1));
}

.focus\:ring-red-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}

.focus\:ring-red-500\/20:focus {
  --tw-ring-color: rgb(239 68 68 / 0.2);
}

.focus\:ring-red-600:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1));
}

.focus\:ring-white\/50:focus {
  --tw-ring-color: rgb(255 255 255 / 0.5);
}

.focus\:ring-yellow-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(234 179 8 / var(--tw-ring-opacity, 1));
}

.focus\:ring-opacity-20:focus {
  --tw-ring-opacity: 0.2;
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-4:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-gold-light:focus-visible {
  --tw-ring-color: var(--gold-light);
}

.focus-visible\:ring-gold-primary:focus-visible {
  --tw-ring-color: var(--gold-primary);
}

.focus-visible\:ring-red-500\/20:focus-visible {
  --tw-ring-color: rgb(239 68 68 / 0.2);
}

.focus-visible\:ring-slate-950:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(2 6 23 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-white:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-navy-dark:focus-visible {
  --tw-ring-offset-color: var(--navy-dark);
}

.active\:border-\[rgba\(255\2c 255\2c 255\2c 0\.6\)\]:active {
  border-color: rgba(255,255,255,0.6);
}

.active\:bg-gray-100:active {
  background-color: var(--gray-100);
}

.active\:bg-green-800:active {
  --tw-bg-opacity: 1;
  background-color: rgb(22 101 52 / var(--tw-bg-opacity, 1));
}

.active\:bg-navy-dark:active {
  background-color: var(--navy-dark);
}

.active\:bg-navy-light:active {
  background-color: var(--navy-light);
}

.active\:bg-navy-ultra-light:active {
  background-color: var(--navy-ultra-light);
}

.active\:bg-red-500\/25:active {
  background-color: rgb(239 68 68 / 0.25);
}

.active\:bg-red-800:active {
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
}

.active\:bg-white\/15:active {
  background-color: rgb(255 255 255 / 0.15);
}

.active\:bg-white\/30:active {
  background-color: rgb(255 255 255 / 0.3);
}

.active\:opacity-95:active {
  opacity: 0.95;
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:bg-gray-100:disabled {
  background-color: var(--gray-100);
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group\/faq:hover .group-hover\/faq\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:bg-amber-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-blue-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-emerald-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-red-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}

.group\/faq:hover .group-hover\/faq\:text-gold-primary {
  color: var(--gold-primary);
}

.group:hover .group-hover\:\!text-white {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.group:hover .group-hover\:text-gold-primary {
  color: var(--gold-primary);
}

.group:hover .group-hover\:opacity-10 {
  opacity: 0.1;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group\/faq:hover .group-hover\/faq\:shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group:hover .group-hover\:shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group:hover .group-hover\:shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group:hover .group-hover\:shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group:focus .group-focus\:opacity-100 {
  opacity: 1;
}

.group:active .group-active\:\!text-white {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.aria-selected\:bg-slate-100[aria-selected="true"] {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.aria-selected\:text-slate-900[aria-selected="true"] {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}

.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}

@media (min-width: 640px) {

  .sm\:-right-4 {
    right: -1rem;
  }

  .sm\:bottom-28 {
    bottom: 7rem;
  }

  .sm\:bottom-32 {
    bottom: 8rem;
  }

  .sm\:left-4 {
    left: 1rem;
  }

  .sm\:right-10 {
    right: 2.5rem;
  }

  .sm\:right-4 {
    right: 1rem;
  }

  .sm\:right-6 {
    right: 1.5rem;
  }

  .sm\:order-1 {
    order: 1;
  }

  .sm\:order-2 {
    order: 2;
  }

  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:mb-0 {
    margin-bottom: 0px;
  }

  .sm\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .sm\:mb-12 {
    margin-bottom: 3rem;
  }

  .sm\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .sm\:mb-4 {
    margin-bottom: 1rem;
  }

  .sm\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .sm\:mb-8 {
    margin-bottom: 2rem;
  }

  .sm\:ml-4 {
    margin-left: 1rem;
  }

  .sm\:mr-0 {
    margin-right: 0px;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:mt-4 {
    margin-top: 1rem;
  }

  .sm\:mt-6 {
    margin-top: 1.5rem;
  }

  .sm\:mt-8 {
    margin-top: 2rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:table {
    display: table;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:aspect-\[4\/3\] {
    aspect-ratio: 4/3;
  }

  .sm\:h-10 {
    height: 2.5rem;
  }

  .sm\:h-12 {
    height: 3rem;
  }

  .sm\:h-14 {
    height: 3.5rem;
  }

  .sm\:h-16 {
    height: 4rem;
  }

  .sm\:h-20 {
    height: 5rem;
  }

  .sm\:h-28 {
    height: 7rem;
  }

  .sm\:h-4 {
    height: 1rem;
  }

  .sm\:h-40 {
    height: 10rem;
  }

  .sm\:h-5 {
    height: 1.25rem;
  }

  .sm\:h-6 {
    height: 1.5rem;
  }

  .sm\:h-7 {
    height: 1.75rem;
  }

  .sm\:h-8 {
    height: 2rem;
  }

  .sm\:h-\[52px\] {
    height: 52px;
  }

  .sm\:h-\[60px\] {
    height: 60px;
  }

  .sm\:h-\[65vh\] {
    height: 65vh;
  }

  .sm\:max-h-\[450px\] {
    max-height: 450px;
  }

  .sm\:max-h-full {
    max-height: 100%;
  }

  .sm\:min-h-\[420px\] {
    min-height: 420px;
  }

  .sm\:w-10 {
    width: 2.5rem;
  }

  .sm\:w-12 {
    width: 3rem;
  }

  .sm\:w-14 {
    width: 3.5rem;
  }

  .sm\:w-16 {
    width: 4rem;
  }

  .sm\:w-20 {
    width: 5rem;
  }

  .sm\:w-28 {
    width: 7rem;
  }

  .sm\:w-4 {
    width: 1rem;
  }

  .sm\:w-40 {
    width: 10rem;
  }

  .sm\:w-5 {
    width: 1.25rem;
  }

  .sm\:w-56 {
    width: 14rem;
  }

  .sm\:w-6 {
    width: 1.5rem;
  }

  .sm\:w-7 {
    width: 1.75rem;
  }

  .sm\:w-72 {
    width: 18rem;
  }

  .sm\:w-8 {
    width: 2rem;
  }

  .sm\:w-\[140px\] {
    width: 140px;
  }

  .sm\:w-\[52px\] {
    width: 52px;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:min-w-\[120px\] {
    min-width: 120px;
  }

  .sm\:min-w-\[14rem\] {
    min-width: 14rem;
  }

  .sm\:min-w-\[160px\] {
    min-width: 160px;
  }

  .sm\:min-w-\[16rem\] {
    min-width: 16rem;
  }

  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .sm\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-start {
    justify-content: flex-start;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:justify-center {
    justify-content: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-0 {
    gap: 0px;
  }

  .sm\:gap-1 {
    gap: 0.25rem;
  }

  .sm\:gap-12 {
    gap: 3rem;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .sm\:space-y-12 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(3rem * var(--tw-space-y-reverse));
  }

  .sm\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
  }

  .sm\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  .sm\:self-auto {
    align-self: auto;
  }

  .sm\:whitespace-nowrap {
    white-space: nowrap;
  }

  .sm\:rounded-2xl {
    border-radius: var(--radius-3xl);
  }

  .sm\:border-b {
    border-bottom-width: 1px;
  }

  .sm\:border-r-0 {
    border-right-width: 0px;
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

  .sm\:p-2 {
    padding: 0.5rem;
  }

  .sm\:p-3 {
    padding: 0.75rem;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sm\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .sm\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sm\:pb-8 {
    padding-bottom: 2rem;
  }

  .sm\:pl-14 {
    padding-left: 3.5rem;
  }

  .sm\:pl-2 {
    padding-left: 0.5rem;
  }

  .sm\:pr-16 {
    padding-right: 4rem;
  }

  .sm\:pt-4 {
    padding-top: 1rem;
  }

  .sm\:pt-6 {
    padding-top: 1.5rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-right {
    text-align: right;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-\[150px\] {
    font-size: 150px;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  .sm\:flex.items-center > label:has(input[type="radio"]),.sm\:flex > label:has(input[type="radio"]) {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
  }
  .sm\:items-center.flex > label:has(input[type="radio"]) {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
  }
  .sm\:flex.items-center > label:has(input[type="radio"]),.sm\:flex > label:has(input[type="radio"]) {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
  }
}

@media (min-width: 768px) {

  .md\:left-auto {
    left: auto;
  }

  .md\:right-4 {
    right: 1rem;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:mb-8 {
    margin-bottom: 2rem;
  }

  .md\:ml-8 {
    margin-left: 2rem;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-12 {
    height: 3rem;
  }

  .md\:h-16 {
    height: 4rem;
  }

  .md\:h-48 {
    height: 12rem;
  }

  .md\:w-64 {
    width: 16rem;
  }

  .md\:max-w-sm {
    max-width: 24rem;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-start {
    justify-content: flex-start;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-3 {
    gap: 0.75rem;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:p-12 {
    padding: 3rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:pl-1 {
    padding-left: 0.25rem;
  }

  .md\:pt-16 {
    padding-top: 4rem;
  }

  .md\:pt-2\.5 {
    padding-top: 0.625rem;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .md\:flex.items-center > label:has(input[type="radio"]),.md\:flex > label:has(input[type="radio"]) {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
  }
  .md\:items-center.flex > label:has(input[type="radio"]) {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
  }
  .md\:flex.items-center > label:has(input[type="radio"]),.md\:flex > label:has(input[type="radio"]) {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
  }
}

@media (min-width: 1024px) {

  .lg\:fixed {
    position: fixed;
  }

  .lg\:inset-y-0 {
    top: 0px;
    bottom: 0px;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:ml-14 {
    margin-left: 3.5rem;
  }

  .lg\:ml-64 {
    margin-left: 16rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:aspect-video {
    aspect-ratio: 16 / 9;
  }

  .lg\:h-16 {
    height: 4rem;
  }

  .lg\:h-32 {
    height: 8rem;
  }

  .lg\:h-\[500px\] {
    height: 500px;
  }

  .lg\:min-h-\[500px\] {
    min-height: 500px;
  }

  .lg\:w-1\/2 {
    width: 50%;
  }

  .lg\:w-16 {
    width: 4rem;
  }

  .lg\:w-32 {
    width: 8rem;
  }

  .lg\:w-64 {
    width: 16rem;
  }

  .lg\:w-auto {
    width: auto;
  }

  .lg\:shrink-0 {
    flex-shrink: 0;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:justify-start {
    justify-content: flex-start;
  }

  .lg\:justify-end {
    justify-content: flex-end;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

  .lg\:gap-4 {
    gap: 1rem;
  }

  .lg\:gap-5 {
    gap: 1.25rem;
  }

  .lg\:p-12 {
    padding: 3rem;
  }

  .lg\:p-14 {
    padding: 3.5rem;
  }

  .lg\:p-6 {
    padding: 1.5rem;
  }

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:pl-2 {
    padding-left: 0.5rem;
  }

  .lg\:text-left {
    text-align: left;
  }

  .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .lg\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .lg\:flex.items-center > label:has(input[type="radio"]),.lg\:flex > label:has(input[type="radio"]) {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
  }
  .lg\:items-center.flex > label:has(input[type="radio"]) {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
  }
  .lg\:flex.items-center > label:has(input[type="radio"]),.lg\:flex > label:has(input[type="radio"]) {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
  }
}

@media (min-width: 1280px) {

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
  display: none;
}

.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}

.\[\&_\[cmdk-group-heading\]\]\:text-slate-500 [cmdk-group-heading] {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}

.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}

.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}

.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}