@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600;700;800&display=swap');
/* Accessibility Enhancements */
/* High Contrast Mode */
.high-contrast {
  --navy-primary: #000000;
  --navy-secondary: #1a1a1a;
  --gold-primary: #ffff00;
  --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: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border: 2px solid var(--border-color) !important;
}
.high-contrast button {
  background-color: var(--gold-primary) !important;
  color: var(--navy-primary) !important;
  border: 2px solid var(--navy-primary) !important;
}
/* 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;
  }
}
*, ::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: Lexend, Open Sans, 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;
  }
/* Single Font Family Declaration - Production Ready */
html {
    font-family: 'Lexend', 'Open Sans', 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;
  }
/* Devanagari Script Font (Hindi) - Uses Eczar only */
html:lang(hi),
  html[lang="hi"],
  [lang="hi"] {
    font-family: 'Eczar', 'Lexend', 'Open Sans', system-ui, sans-serif;
  }
/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--navy-primary);
    line-height: 1.2;
    letter-spacing: -0.025em;
  }
/* Body Text - Default to secondary text color */
p, span, div {
    color: var(--text-secondary);
    line-height: 1.6;
  }
/* Override for mobile navigation only */
#mobile-navigation p,
  #mobile-navigation span,
  #mobile-navigation div {
    color: inherit;
  }
/* 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 !important;
  }
/* Remove ALL hover underlines globally */
*:hover {
    text-decoration: none !important;
  }
/* Specific override for any remaining underlines */
a:focus {
    outline: 2px solid var(--gold-primary);
    outline-offset: 2px;
  }
/* Remove default margins */
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
  }
/* PRODUCTION FONT SYSTEM - Absolute Consistency */
.font-serif,
  [class*="font-serif"] {
    font-family: inherit !important;
  }
/* Ensure all elements use Lexend font (except Hindi content) */
*:not([lang="hi"]):not([lang="hi"] *):not(html:lang(hi)):not(html:lang(hi) *),
  *:not([lang="hi"]):not([lang="hi"] *)::before,
  *:not([lang="hi"]):not([lang="hi"] *)::after,
  *:not(html:lang(hi)):not(html:lang(hi) *)::before,
  *:not(html:lang(hi)):not(html:lang(hi) *)::after {
    font-family: 'Lexend', 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  }
/* Override any font-sans classes to ensure consistency */
.font-sans,
  [class*="font-sans"] {
    font-family: inherit !important;
  }
/* 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;
  }
}
/* 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;
  }
/* 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(3, 23, 116, 0.5);
  }
.sidebar-footer {
    background-color: rgba(3, 23, 116, 0.3);
  }
/* 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);
  }
.text-shadow-subtle {
    text-shadow: 0 2px 6px rgba(0,0,0,0.7);
  }
/* 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),
  [role="button"] {
    font-family: inherit !important;
    font-weight: 500;
    border-radius: var(--radius-lg) !important; /* CRITICAL: All buttons use rounded-lg (8px) 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 {
    outline: 2px solid var(--gold-primary);
    outline-offset: 2px;
  }
/* Force minimum heights for button consistency */
.btn,
  button:not(.unstyled),
  [role="button"] {
    min-height: 36px !important;
  }
/* 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;
  }
/* 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-gold-primary {
    color: var(--gold-primary) !important;
  }
/* Consistent Typography Hierarchy */
/* 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;
    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 .h-5,
  .sidebar-nav-active svg {
    color: white !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 .h-5,
  .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 .h-5,
  .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 .h-5,
  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 .h-5,
  nav button.sidebar-menu-item.sidebar-nav-active svg {
    color: white !important;
  }
.sidebar-nav-inactive {
    color: white !important;
    background-color: transparent !important;
  }
.sidebar-nav-inactive span,
  .sidebar-nav-inactive .h-5 {
    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 .h-5,
  nav .sidebar-menu-item.sidebar-nav-inactive,
  nav .sidebar-menu-item.sidebar-nav-inactive span,
  nav .sidebar-menu-item.sidebar-nav-inactive .h-5,
  .sidebar-main button.sidebar-nav-inactive,
  .sidebar-main button.sidebar-nav-inactive span,
  .sidebar-main button.sidebar-nav-inactive .h-5,
  nav button.sidebar-nav-inactive,
  nav button.sidebar-nav-inactive span,
  nav button.sidebar-nav-inactive .h-5 {
    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 .h-5,
  .sidebar-main button.sidebar-menu-item,
  .sidebar-main button.sidebar-menu-item span,
  .sidebar-main button.sidebar-menu-item .h-5,
  .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 .h-5,
  .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 .h-5 {
    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 .h-5,
  .sidebar-nav-inactive:hover svg,
  .sidebar-main button.sidebar-nav-inactive:hover span,
  .sidebar-main button.sidebar-nav-inactive:hover .h-5,
  .sidebar-main button.sidebar-nav-inactive:hover svg {
    color: var(--gold-primary) !important;
  }
/* Ensure logout button is always visible */
.sidebar-footer {
    background-color: rgba(3, 23, 116, 0.3) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
.sidebar-footer button {
    color: white !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
/* ADMIN PANEL SPECIFIC FIXES - Prevent Global CSS Conflicts */
.admin-panel-container {
    background: #f9fafb !important;
  }
.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;
  }
/* 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 */
.bg-white[class*="rounded"],
  .card,
  [class*="shadow"] {
    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%;
    }

    /* 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:last-child svg,
  .btn:last-child svg,
  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: 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 */
    background: 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;
    z-index: var(--z-modal-backdrop) !important;
    cursor: pointer;
    opacity: 0;
    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: 800px;
    }
  }
@keyframes modalSlideIn {
    to {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }
@keyframes modalSlideOut {
    to {
      transform: scale(0.95) translateY(-20px);
      opacity: 0;
    }
  }
/* 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 */
    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-width: 95vw !important;
      max-height: 95vh !important;
      max-height: 95dvh !important;
      margin: 0.5rem !important;
      width: calc(100vw - 1rem) !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);
    }
  }
/* Animation utilities */
.animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out;
  }
/* 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: 0.5rem; 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: 150ms; }
.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: 0.5rem; 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: 150ms; }
.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: 0.5rem;
  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: 150ms;
}
.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;
  }
.interactive-input { color: var(--navy-primary); }

  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(.red-badge-text):not(.red-badge-text *) {
    color: var(--navy-primary);
  }
button.interactive-input: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 - High Visibility */
.nav-item-active {
    color: white !important;
    background-color: var(--navy-primary) !important;
    border: 1px solid var(--navy-dark);
    box-shadow: var(--shadow-lg);
    font-weight: 700;
  }
.nav-item-inactive {
    color: var(--text-primary) !important;
    background-color: white;
    border: 1px solid transparent;
    font-weight: 600;
  }
.nav-item-inactive:hover {
    color: white !important;
    background-color: var(--navy-primary) !important;
  }
/* Button Consistency Rules - Ensure white text on dark backgrounds */
button[class*="bg-navy"],
  button[class*="bg-blue"],
  button[class*="bg-gold"]:not([class*="ultra-light"]):not([class*="pale"]),
  button[class*="bg-gradient-gold"],
  button[class*="from-gold-primary"],
  button[class*="from-gold-secondary"],
  button[class*="to-gold-primary"],
  button[class*="to-gold-secondary"],
  button[class*="via-gold"],
  .btn-primary,
  .btn-gold,
  .btn[class*="bg-navy"],
  .btn[class*="bg-blue"],
  .btn[class*="bg-gold"]:not([class*="ultra-light"]):not([class*="pale"]) {
    color: white !important;
    font-size: 1rem !important; /* Ensure readable font size - 16px */
  }
/* Ensure all child elements also have white text */
button[class*="bg-gradient-gold"] *,
  button[class*="from-gold-primary"] *,
  button[class*="to-gold-primary"] *,
  button[class*="to-gold-secondary"] *,
  .btn-gold * {
    color: white !important;
  }
/* Fix navy text over navy background issues - high specificity */
button[class*="text-navy"]:hover[class*="bg-navy"],
  button[class*="text-navy"]:hover[class*="bg-navy"],
  .text-navy-primary:hover[class*="bg-navy"],
  .text-navy: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"]) *,
  button[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"]),
  button[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"]),
  button[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 *,
  button[class*="bg-navy"]:not([class*="ultra-light"]):not([class*="pale"]),
  button[class*="bg-navy"]:not([class*="ultra-light"]):not([class*="pale"]) *,
  .bg-navy-primary,
  .bg-navy-primary *,
  .bg-navy-dark,
  .bg-navy-dark *,
  [class*="bg-navy-"]:not([class*="ultra-light"]):not([class*="pale"]),
  [class*="bg-navy-"]:not([class*="ultra-light"]):not([class*="pale"]) * {
    color: white !important;
  }
/* CRITICAL: Ensure btn-primary buttons keep white text/icons on hover - highest specificity */
.btn-primary:hover,
  .btn-primary:hover *,
  button.btn-primary:hover,
  button.btn-primary:hover *,
  a.btn-primary:hover,
  a.btn-primary:hover *,
  button.btn-icon.btn-primary:hover,
  button.btn-icon.btn-primary:hover *,
  button[class*="btn-icon"].btn-primary:hover,
  button[class*="btn-icon"].btn-primary:hover * {
    color: white !important;
  }
/* 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;
  }
/* 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 {
    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 */
button.btn-outline:hover,
  button.btn-outline:hover *,
  a.btn-outline:hover,
  a.btn-outline:hover *,
  .btn-outline:hover,
  .btn-outline:hover *,
  .btn-outline:hover span {
    color: white !important;
  }
/* 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 */
.btn-outline:hover svg,
  .btn-outline:hover path,
  button.btn-outline:hover svg,
  button.btn-outline:hover path,
  a.btn-outline:hover svg,
  a.btn-outline:hover path {
    color: white !important;
    fill: none !important;
    stroke: white !important;
    stroke-width: 2 !important;
  }
button.btn-outline:focus,
  button.btn-outline:focus *,
  a.btn-outline:focus,
  a.btn-outline:focus *,
  .btn-outline:focus,
  .btn-outline:focus *,
  .btn-outline:focus span {
    color: white !important;
  }
.btn-outline:focus svg,
  .btn-outline:focus path,
  button.btn-outline:focus svg,
  button.btn-outline:focus path,
  a.btn-outline:focus svg,
  a.btn-outline:focus path {
    color: white !important;
    fill: none !important;
    stroke: white !important;
    stroke-width: 2 !important;
  }
button.btn-outline:active,
  button.btn-outline:active *,
  a.btn-outline:active,
  a.btn-outline:active *,
  .btn-outline:active,
  .btn-outline:active *,
  .btn-outline:active span {
    color: white !important;
  }
.btn-outline:active svg,
  .btn-outline:active path,
  button.btn-outline:active svg,
  button.btn-outline:active path,
  a.btn-outline:active svg,
  a.btn-outline:active path {
    color: white !important;
    fill: none !important;
    stroke: white !important;
    stroke-width: 2 !important;
  }
/* 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 */
button.btn-outline:hover *:not(svg):not(path),
  a.btn-outline:hover *:not(svg):not(path),
  .btn-outline:hover *:not(svg):not(path),
  button.btn-outline:focus *:not(svg):not(path),
  a.btn-outline:focus *:not(svg):not(path),
  .btn-outline:focus *:not(svg):not(path),
  button.btn-outline:active *:not(svg):not(path),
  a.btn-outline:active *:not(svg):not(path),
  .btn-outline:active *:not(svg):not(path) {
    background-color: transparent !important;
  }
/* 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;
    }
  }
/* Fix flex layouts that might wrap awkwardly */
.flex-wrap {
    flex-wrap: wrap !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;
  }
/* 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.h-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 maintain circular shape - exclude animated elements */
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: 50% !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 */
/* Ensure red badge text stays white even on hover - highest specificity */
/* Override for red badge when parent button hovers to light background - ensure badge stays red */
/* 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 */
  }
/* 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-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 { color: var(--navy-primary) !important; }
.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; }
/* ====================================================================
     COMPREHENSIVE BACKGROUND COLOR UTILITY CLASSES
     ==================================================================== */
/* Navy Backgrounds */
.bg-navy-primary { background-color: var(--navy-primary) !important; }
.bg-navy-light { background-color: var(--navy-light) !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-secondary { background-color: var(--gold-secondary) !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 {
    border: 2px solid transparent;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-primary)) border-box;
    -o-border-image: linear-gradient(135deg, var(--gold-light), var(--gold-primary)) 1;
       border-image: linear-gradient(135deg, var(--gold-light), var(--gold-primary)) 1;
  }
.border-gold-gradient-subtle {
    border: 1px solid transparent;
    background: linear-gradient(135deg, #fefef8, #fefbf5) border-box;
    -o-border-image: linear-gradient(135deg, #fefef8, #fefbf5) 1;
       border-image: linear-gradient(135deg, #fefef8, #fefbf5) 1;
  }
/* ====================================================================
     TEXT SIZE UTILITIES WITH PROPER COLORS
     ==================================================================== */
/* Extra Small Text */
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--text-tertiary);
  }
/* 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 */
.btn-primary,
  .btn-navy {
    color: var(--text-inverse) !important;
  }
.btn-primary *,
  .btn-navy * {
    color: var(--text-inverse) !important;
  }
/* List Item Text */
/* Badge/Tag Text */
/* ====================================================================
     OVERRIDE PROTECTION - Prevent Tailwind from overriding our colors
     ==================================================================== */
/* Ensure text colors in common Tailwind combinations stay visible */
.text-xs.text-gray-500,
  .text-sm.text-gray-500,
  .text-xs.text-gray-600,
  .text-sm.text-gray-600 {
    color: var(--text-tertiary) !important;
  }
.text-xs.text-gray-700,
  .text-sm.text-gray-700,
  .text-base.text-gray-700 {
    color: var(--text-secondary) !important;
  }
.text-xs.text-gray-900,
  .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 > div:not([class*="overflow-hidden"]),
  #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-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 */
.btn-primary span,
  .btn-primary div,
  .btn-primary p,
  .btn-primary strong,
  .btn-primary em {
    color: white !important;
  }
/* 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[class*="bg-blue"] span,
  button[class*="bg-blue"] div,
  button[class*="bg-blue"] p {
    color: white !important;
  }
/* Red Button Text Fix for all red background elements */
button[class*="bg-red"] span,
  button[class*="bg-red"] div,
  button[class*="bg-red"] p,
  div[class*="bg-red"] span,
  div[class*="bg-red"] div,
  div[class*="bg-red"] 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;
  }
/* ============================================
   * 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;
  }
/* 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"] {
    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 System */
.notification-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 */
    max-width: 100%;
    overflow-x: visible;
    word-wrap: break-word;
    box-sizing: border-box;
  }
@media (max-width: 640px) {
    .notification-dropdown[class*="p-8"] {
      padding: 1rem;
    }

    .notification-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 */
    .notification-dropdown[class*="p-8"] {
      padding: 1rem;
    }

    .notification-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 */
    .notification-dropdown[class*="p-8"] {
      padding: 1.5rem;
    }

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

    /* Stats cards in 2 columns on tablet */
  }
.notification-dropdown { background-color: var(--white-pure); border-color: var(--navy-light); }
.notification-dropdown .hover\\:text-white:hover,.notification-dropdown button:hover[class*="hover:text-white"],.notification-dropdown a:hover[class*="hover:text-white"] {
    color: var(--navy-primary);
  }

  button[role="switch"] > span.notification-dropdown,
  button[role="switch"] > span[class*="inline-block"].notification-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.notification-dropdown,
  .btn.notification-dropdown { /* Force all buttons to use rounded-lg */
    border-radius: var(--radius-lg); /* Force all buttons to use rounded-lg */
  }
.notification-dropdown{
  position: absolute;
  right: 0px;
  margin-top: 0.5rem;
  width: 20rem;
  border-radius: 0.75rem;
  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 .notification-dropdown {
  background-color: #FFFFFF;
  color: #000000;
}
@media (prefers-contrast: high) {
  .notification-dropdown {
    background-color: #FFFFFF;
    color: #000000;
  }
}
@media (forced-colors: active) {
  .notification-dropdown {
    background-color: Canvas;
    color: CanvasText;
  }
  .notification-dropdown * {
    color: CanvasText;
  }
}
.notification-dropdown {
    z-index: 1090;
    transform: translateY(0.5rem);
    animation: slideDown 0.2s ease-out;
  }
.notification-dropdown h3 {
    color: var(--navy-primary);
  }
.notification-dropdown p {
    color: var(--navy-dark);
  }
@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 */
    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,
  .btn.search-dropdown { /* Force all buttons to use rounded-lg */
    border-radius: var(--radius-lg); /* Force all buttons to use rounded-lg */
  }
.search-dropdown{
  position: absolute;
  top: 100%;
  left: 0px;
  right: 0px;
  margin-top: 0.5rem;
  border-radius: 0.75rem;
  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;
  }
.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 */
.flex.btn-icon.gap-2.ml-4 {
    margin-left: 0.5rem;
    flex-shrink: 0;
  }
@media (max-width: 640px) {
    .flex.btn-icon.gap-2.ml-4 {
      flex-direction: column;
      gap: 0.25rem;
    }
  }

  button[role="switch"].relative.btn-icon {
    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-icon{
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.flex.btn-icon > label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    align-self: center;
  }
.btn-icon > * {
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

div.btn-icon.h-10 {
  width: 2.5rem; /* w-10 = 2.5rem = 40px */
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  max-width: 2.5rem;
  max-height: 2.5rem;
}

div.w-10.btn-icon {
  width: 2.5rem; /* w-10 = 2.5rem = 40px */
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  max-width: 2.5rem;
  max-height: 2.5rem;
}
.btn-icon:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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;
}
.btn-icon {
    position: relative;
    z-index: 10;
  }
/* Header Icon Sizes - Force larger icons */
.btn-icon svg {
    width: 2rem !important;
    height: 2rem !important;
    flex-shrink: 0 !important;
    display: block !important;
    margin: 0 !important;
  }
/* btn-icon inherits text color - CRITICAL: Outline icons need fill: none and stroke-width */
.btn-icon svg,
.btn-icon path,
.btn-icon:hover svg,
.btn-icon:hover path,
.btn-icon:focus svg,
.btn-icon:focus path,
.btn-icon:active svg,
.btn-icon:active path {
  color: inherit !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}
/* 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;
}
/* CRITICAL: Ensure btn-icon.btn-primary has white icons on all states */
.btn-icon.btn-primary svg,
.btn-icon.btn-primary path,
.btn-icon.btn-primary:hover svg,
.btn-icon.btn-primary:hover path,
.btn-icon.btn-primary:focus svg,
.btn-icon.btn-primary:focus path,
.btn-icon.btn-primary:active svg,
.btn-icon.btn-primary:active path {
  color: white !important;
  fill: none !important;
  stroke: white !important;
  stroke-width: 2 !important;
}
/* 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[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;
  }
/* Ensure dashboard icons maintain proper size despite parent padding */
.section-header-actions .btn-icon svg,
  .px-4 svg[class*="h-5"],
  .px-4 svg[class*="h-6"],
  [class*="px-4"] svg[class*="h-5"],
  [class*="px-4"] svg[class*="h-6"] {
    flex-shrink: 0 !important;
    width: 1.25rem !important; /* h-5 = 20px */
    height: 1.25rem !important;
  }
/* Specific fix for h-6 w-6 icons */
.px-4 svg[class*="h-6"],
  [class*="px-4"] svg[class*="h-6"] {
    width: 1.5rem !important; /* h-6 = 24px */
    height: 1.5rem !important;
  }
/* 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*="from-navy-dark"] .text-navy-muted,
  [class*="bg-navy-dark"] .text-navy-primary,
  [class*="bg-navy-dark"] .text-navy-muted {
    color: white !important;
  }
.btn-ghost[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-ghost {
    color: var(--navy-primary);
  }
.btn-ghost[class*="rounded"] {
    max-width: 100%;
    overflow-x: visible;
    word-wrap: break-word;
    box-sizing: border-box;
  }
@media (max-width: 640px) {
    .btn-ghost[class*="p-8"] {
      padding: 1rem;
    }

    .btn-ghost[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-ghost[class*="p-8"] {
      padding: 1rem;
    }

    .btn-ghost[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-ghost[class*="p-8"] {
      padding: 1.5rem;
    }

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

    /* Stats cards in 2 columns on tablet */
  }
.btn-ghost:hover[class*="bg-navy"] {
    color: white;
  }
.btn-ghost { color: var(--navy-primary); background-color: var(--white-pure); border-color: var(--navy-primary); }

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

  .bg-navy-ultra-light:hover .btn-ghost,
  [class*="bg-navy-ultra-light"]:hover .btn-ghost {
    color: var(--navy-primary);
  }
button.btn-ghost *:not(.red-badge-text):not(.red-badge-text *) {
    color: var(--navy-primary);
  }
button.btn-ghost:hover *:not(.red-badge-text):not(.red-badge-text *):not(.btn-primary):not(.btn-primary *) {
    color: var(--gold-primary);
  }
button.btn-primary.btn-ghost:hover,
  button.btn-primary.btn-ghost:hover * {
    color: white;
  }

  button[role="switch"] > span.btn-ghost,
  button[role="switch"] > span[class*="inline-block"].btn-ghost {
    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-ghost{
  border-width: 2px;
  border-color: var(--navy-primary);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  color: var(--navy-primary);
}
.high-contrast .btn-ghost {
  background-color: #FFFFFF;
  color: #000000;
}
@media (prefers-contrast: high) {
  .btn-ghost {
    background-color: #FFFFFF;
    color: #000000;
  }
}
@media (forced-colors: active) {
  .btn-ghost {
    background-color: Canvas;
    color: CanvasText;
  }
  .btn-ghost * {
    color: CanvasText;
  }
}
.btn-ghost:hover {
    background-color: var(--navy-primary);
  }
.btn-ghost:hoverbutton:hover,.btn-ghost:hover:hover {
    background-color: var(--navy-dark);
    color: white;
  }
.btn-ghost:hover,.btn-ghost:hover * {
    color: white;
  }

  .bg-navy-ultra-light .btn-ghost:hover,
  .bg-gold-ultra-light .btn-ghost:hover,
  [class*="bg-navy-ultra-light"] .btn-ghost:hover,
  [class*="bg-gold-ultra-light"] .btn-ghost:hover {
    color: var(--navy-dark);
  }
.btn-ghost:hover { color: var(--white-pure); background-color: var(--navy-primary); }
.btn-ghost:hover,.btn-ghost:hover *,.btn-ghost:hover
  button,.btn-ghost:hover
  button * {
    color: white;
  }
.btn-ghost:hover span {
    color: white;
  }
.btn-ghost:hover button[type="submit"] * {
    color: white;
  }
.btn-ghost:hover:disabled span {
    color: white;
  }
.btn-ghost:hover .animate-spin + span {
    color: white;
  }
.btn-ghost:hover.btn-icon svg,.btn-ghost:hover
.btn-icon path,.btn-ghost:hover
.btn-icon:hover svg,.btn-ghost:hover
.btn-icon:hover path,.btn-ghost:hover
.btn-icon:focus svg,.btn-ghost:hover
.btn-icon:focus path,.btn-ghost:hover
.btn-icon:active svg,.btn-ghost:hover
.btn-icon:active path {
  color: white;
  fill: none;
  stroke: white;
  stroke-width: 2;
}
.bg-navy-ultra-light .btn-ghost:hover,
  [class*="bg-navy-ultra-light"] .btn-ghost:hover,
  .from-navy-ultra-light .btn-ghost:hover,
  [class*="from-navy-ultra-light"] .btn-ghost:hover,
  .to-navy-ultra-light .btn-ghost:hover,
  [class*="to-navy-ultra-light"] .btn-ghost:hover,
  .via-navy-ultra-light .btn-ghost:hover,
  [class*="via-navy-ultra-light"] .btn-ghost:hover {
    color: var(--navy-primary);
  }
.bg-navy-ultra-light .btn-ghost:hover svg,
  [class*="bg-navy-ultra-light"] .btn-ghost:hover svg {
    color: var(--navy-primary);
  }
.bg-gradient-to-br.from-navy-ultra-light .btn-ghost:hover,
  .bg-gradient-to-r.from-navy-ultra-light .btn-ghost:hover,
  [class*="bg-gradient"][class*="from-navy-ultra-light"] .btn-ghost:hover,
  [class*="bg-gradient"][class*="via-navy-ultra-light"] .btn-ghost:hover,
  [class*="bg-gradient"][class*="to-navy-ultra-light"] .btn-ghost:hover {
    color: var(--navy-primary);
  }
.btn-ghost:hoverbutton[role="switch"],.btn-ghost:hover
  button[role="switch"][class*="relative"][class*="inline-flex"] {
    background-color: var(--navy-primary);
    box-shadow: 0 4px 12px rgba(3, 23, 116, 0.25), 0 0 0 2px rgba(184, 134, 11, 0.2);
    border: none;
  }
.btn-ghost:hoverbutton[role="switch"] > span[class*="translate-x-6"] {
    transform: translateX(1.5rem);
  }
.btn-ghost:hover{
  border-color: var(--navy-dark);
  background-color: var(--navy-primary);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-ghost:focus {
    background-color: var(--navy-primary);
  }
.btn-ghost:focusbutton:hover,.btn-ghost:focus:hover {
    background-color: var(--navy-dark);
    color: white;
  }
.btn-ghost:focus,.btn-ghost:focus * {
    color: white;
  }

  .bg-navy-ultra-light .btn-ghost:focus,
  .bg-gold-ultra-light .btn-ghost:focus,
  [class*="bg-navy-ultra-light"] .btn-ghost:focus,
  [class*="bg-gold-ultra-light"] .btn-ghost:focus {
    color: var(--navy-dark);
  }
.btn-ghost:focus { color: var(--white-pure); background-color: var(--navy-primary); }
.btn-ghost:focus,.btn-ghost:focus *,.btn-ghost:focus
  button,.btn-ghost:focus
  button * {
    color: white;
  }
.btn-ghost:focus span {
    color: white;
  }
.btn-ghost:focus button[type="submit"] * {
    color: white;
  }
.btn-ghost:focus:disabled span {
    color: white;
  }
.btn-ghost:focus .animate-spin + span {
    color: white;
  }
.btn-ghost:focus.btn-icon svg,.btn-ghost:focus
.btn-icon path,.btn-ghost:focus
.btn-icon:hover svg,.btn-ghost:focus
.btn-icon:hover path,.btn-ghost:focus
.btn-icon:focus svg,.btn-ghost:focus
.btn-icon:focus path,.btn-ghost:focus
.btn-icon:active svg,.btn-ghost:focus
.btn-icon:active path {
  color: white;
  fill: none;
  stroke: white;
  stroke-width: 2;
}
.bg-navy-ultra-light .btn-ghost:focus,
  [class*="bg-navy-ultra-light"] .btn-ghost:focus,
  .from-navy-ultra-light .btn-ghost:focus,
  [class*="from-navy-ultra-light"] .btn-ghost:focus,
  .to-navy-ultra-light .btn-ghost:focus,
  [class*="to-navy-ultra-light"] .btn-ghost:focus,
  .via-navy-ultra-light .btn-ghost:focus,
  [class*="via-navy-ultra-light"] .btn-ghost:focus {
    color: var(--navy-primary);
  }
.bg-navy-ultra-light .btn-ghost:focus svg,
  [class*="bg-navy-ultra-light"] .btn-ghost:focus svg {
    color: var(--navy-primary);
  }
.bg-gradient-to-br.from-navy-ultra-light .btn-ghost:focus,
  .bg-gradient-to-r.from-navy-ultra-light .btn-ghost:focus,
  [class*="bg-gradient"][class*="from-navy-ultra-light"] .btn-ghost:focus,
  [class*="bg-gradient"][class*="via-navy-ultra-light"] .btn-ghost:focus,
  [class*="bg-gradient"][class*="to-navy-ultra-light"] .btn-ghost:focus {
    color: var(--navy-primary);
  }
.btn-ghost:focusbutton[role="switch"],.btn-ghost:focus
  button[role="switch"][class*="relative"][class*="inline-flex"] {
    background-color: var(--navy-primary);
    box-shadow: 0 4px 12px rgba(3, 23, 116, 0.25), 0 0 0 2px rgba(184, 134, 11, 0.2);
    border: none;
  }
.btn-ghost:focusbutton[role="switch"] > span[class*="translate-x-6"] {
    transform: translateX(1.5rem);
  }
.btn-ghost:focus{
  border-color: var(--navy-dark);
  background-color: var(--navy-primary);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-ghost{
  --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);
}
.btn-ghost: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);
}
.btn-ghost:focus{
  --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);
}
.btn-ghost{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.btn-outline {
    background: white;
    border: 2px solid var(--navy-primary);
    color: var(--navy-primary);
    box-shadow: 0 4px 12px rgba(3, 23, 116, 0.15), 0 2px 4px rgba(3, 23, 116, 0.1);
    transition: all 0.2s ease;
  }
.btn-outline:hover {
    background: var(--navy-primary) !important;
    color: white !important;
    border-color: var(--navy-dark) !important;
    box-shadow: 0 8px 25px rgba(3, 23, 116, 0.25), 0 4px 10px rgba(3, 23, 116, 0.15) !important;
    transform: translateY(-1px);
  }
.btn-outline:focus {
    background: var(--navy-primary) !important;
    border-color: var(--navy-dark) !important;
    color: white !important;
    box-shadow: 0 0 0 4px rgba(3, 23, 116, 0.2), 0 8px 25px rgba(3, 23, 116, 0.25) !important;
    outline: none;
  }
.btn-outline:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(3, 23, 116, 0.2) !important;
  }
.btn-outline:disabled,
  .btn-outline[disabled] {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #6b7280 !important; /* WCAG: Gray-500 text on gray-100 meets 4.5:1 (better than gray-400) */
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important; /* Remove opacity overlay, use explicit colors for WCAG compliance */
  }
.btn-light {
    color: var(--navy-primary);
  }
.btn-light:hover[class*="bg-navy"] {
    color: white;
  }
.btn-light { color: var(--navy-primary); }

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

  .bg-navy-ultra-light:hover .btn-light,
  [class*="bg-navy-ultra-light"]:hover .btn-light {
    color: var(--navy-primary);
  }
button.btn-light *:not(.red-badge-text):not(.red-badge-text *) {
    color: var(--navy-primary);
  }
button.btn-light:hover *:not(.red-badge-text):not(.red-badge-text *):not(.btn-primary):not(.btn-primary *) {
    color: var(--gold-primary);
  }
button.btn-primary.btn-light:hover,
  button.btn-primary.btn-light:hover * {
    color: white;
  }
.btn-light{
  border-width: 2px;
  border-color: rgb(255 255 255 / 0.4);
  background-color: rgb(255 255 255 / 0.95);
  color: var(--navy-primary);
  --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);
    /* WCAG: Removed hover/focus navy background - keep light background for better contrast */
}
.btn-light:hover {
    color: var(--navy-primary);
  }
.btn-light:hover:hover[class*="bg-navy"] {
    color: white;
  }
.btn-light:hover { color: var(--navy-primary); background-color: var(--gray-50); border-color: var(--gray-300); }

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

  .bg-navy-ultra-light:hover .btn-light:hover,
  [class*="bg-navy-ultra-light"]:hover .btn-light:hover {
    color: var(--navy-primary);
  }
.btn-light:hoverbutton *:not(.red-badge-text):not(.red-badge-text *) {
    color: var(--navy-primary);
  }
.btn-light:hoverbutton:hover *:not(.red-badge-text):not(.red-badge-text *):not(.btn-primary):not(.btn-primary *) {
    color: var(--gold-primary);
  }
.btn-light:hoverbutton.btn-primary:hover,.btn-light:hover
  button.btn-primary:hover * {
    color: white;
  }
.btn-light:focus[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:focus {
    color: var(--navy-primary);
  }
.btn-light:focus[class*="rounded"] {
    max-width: 100%;
    overflow-x: visible;
    word-wrap: break-word;
    box-sizing: border-box;
  }
@media (max-width: 640px) {
    .btn-light:focus[class*="p-8"] {
      padding: 1rem;
    }

    .btn-light:focus[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:focus[class*="p-8"] {
      padding: 1rem;
    }

    .btn-light:focus[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:focus[class*="p-8"] {
      padding: 1.5rem;
    }

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

    /* Stats cards in 2 columns on tablet */
  }
.btn-light:focus:hover[class*="bg-navy"] {
    color: white;
  }
.btn-light:focus { color: var(--navy-primary); background-color: var(--white-pure); border-color: var(--navy-primary); }

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

  .bg-navy-ultra-light:hover .btn-light:focus,
  [class*="bg-navy-ultra-light"]:hover .btn-light:focus {
    color: var(--navy-primary);
  }
.btn-light:focusbutton *:not(.red-badge-text):not(.red-badge-text *) {
    color: var(--navy-primary);
  }
.btn-light:focusbutton:hover *:not(.red-badge-text):not(.red-badge-text *):not(.btn-primary):not(.btn-primary *) {
    color: var(--gold-primary);
  }
.btn-light:focusbutton.btn-primary:hover,.btn-light:focus
  button.btn-primary:hover * {
    color: white;
  }

  button[role="switch"] > .btn-light:focusspan,
  button[role="switch"] > .btn-light:focusspan[class*="inline-block"] {
    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:hover{
  border-color: var(--gray-300);
  background-color: var(--gray-50);
  color: var(--navy-primary);
}
.btn-light:focus{
  border-color: var(--navy-primary);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  color: var(--navy-primary);
}
.btn-light: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);
}
.btn-light:focus{
  --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);
}
.btn-light{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

  .bg-navy-ultra-light .btn-danger,
  .bg-gold-ultra-light .btn-danger,
  [class*="bg-navy-ultra-light"] .btn-danger,
  [class*="bg-gold-ultra-light"] .btn-danger {
    color: var(--navy-dark);
  }
.btn-danger { color: var(--white-pure); }
.btn-danger span,.btn-danger div,.btn-danger p,.btn-danger *,
  button.btn-danger,
  button.btn-danger * {
    color: white;
  }
.btn-icon.btn-danger svg,
.btn-icon.btn-danger path,
.btn-icon.btn-danger:hover svg,
.btn-icon.btn-danger:hover path,
.btn-icon.btn-danger:focus svg,
.btn-icon.btn-danger:focus path,
.btn-icon.btn-danger:active svg,
.btn-icon.btn-danger:active path {
  color: white;
  fill: none;
  stroke: white;
  stroke-width: 2;
}
.bg-navy-ultra-light .btn-danger,
  [class*="bg-navy-ultra-light"] .btn-danger,
  .from-navy-ultra-light .btn-danger,
  [class*="from-navy-ultra-light"] .btn-danger,
  .to-navy-ultra-light .btn-danger,
  [class*="to-navy-ultra-light"] .btn-danger,
  .via-navy-ultra-light .btn-danger,
  [class*="via-navy-ultra-light"] .btn-danger {
    color: var(--navy-primary);
  }
.bg-navy-ultra-light .btn-danger svg,
  [class*="bg-navy-ultra-light"] .btn-danger svg {
    color: var(--navy-primary);
  }
.bg-gradient-to-br.from-navy-ultra-light .btn-danger,
  .bg-gradient-to-r.from-navy-ultra-light .btn-danger,
  [class*="bg-gradient"][class*="from-navy-ultra-light"] .btn-danger,
  [class*="bg-gradient"][class*="via-navy-ultra-light"] .btn-danger,
  [class*="bg-gradient"][class*="to-navy-ultra-light"] .btn-danger {
    color: var(--navy-primary);
  }
.btn-danger{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
button.btn-back.btn-danger,
a.btn-back.btn-danger {
  color: var(--navy-primary);
}
button.btn-back.btn-danger svg,
a.btn-back.btn-danger svg {
  color: var(--navy-primary);
  stroke: var(--navy-primary);
}
button.btn-back.btn-danger:hover svg,
a.btn-back.btn-danger:hover svg {
  color: var(--gold-primary);
  stroke: var(--gold-primary);
}
.btn-danger:hover:hover {
    background-color: #dc2626; /* darker red */
  }
.btn-danger:hover span,.btn-danger:hover div,.btn-danger:hover p,.btn-danger:hover *,.btn-danger:hover
  button,.btn-danger:hover
  button * {
    color: white;
  }
.btn-danger:focus:hover {
    background-color: #dc2626; /* darker red */
  }
.btn-danger:focus span,.btn-danger:focus div,.btn-danger:focus p,.btn-danger:focus *,.btn-danger:focus
  button,.btn-danger:focus
  button * {
    color: white;
  }
.btn-danger:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.btn-danger:focus{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.btn-danger{
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.btn-danger:hover{
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.btn-danger:focus{
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.btn-danger{
  --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);
}
.btn-danger: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);
}
.btn-danger:focus{
  --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);
}
.btn-danger{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
/* Outline button hover states are already handled by the @apply rules above */
/* WCAG: Ensure primary and danger buttons have white text for proper contrast */
.btn-primary:not(.btn-light),
  .btn-danger {
    color: white !important; /* WCAG: White text on gold/red backgrounds meets 4.5:1 */
  }
.btn-primary:not(.btn-light) *,
  .btn-danger * {
    color: white !important; /* WCAG: White text on gold/red backgrounds meets 4.5:1 */
  }
/* WCAG: Secondary buttons have navy text on white for proper contrast */
.btn-secondary:not(.btn-light) {
    color: var(--navy-primary) !important; /* WCAG: Navy text on white meets 4.5:1 */
  }
.btn-secondary:not(.btn-light) * {
    color: var(--navy-primary) !important; /* WCAG: Navy text on white meets 4.5:1 */
  }
/* Outline buttons now have white backgrounds by default - colors handled by base styles */
/* Ensure ghost buttons have proper contrast */
.btn-ghost {
    color: var(--navy-primary) !important;
  }
.btn-ghost * {
    color: var(--navy-primary) !important;
  }
/* 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 */
[class*="bg-navy-dark"] .btn-ghost,
  [class*="bg-navy-medium"] .btn-ghost,
  [class*="from-navy-dark"] .btn-ghost,
  [class*="from-navy-medium"] .btn-ghost {
    border-color: rgba(255, 255, 255, 0.3);
    color: white !important;
  }
[class*="bg-navy-dark"] .btn-ghost:hover,
  [class*="bg-navy-medium"] .btn-ghost:hover,
  [class*="from-navy-dark"] .btn-ghost:hover,
  [class*="from-navy-medium"] .btn-ghost:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: white !important;
  }
/* Ensure outline buttons are visible on dark backgrounds */
[class*="bg-navy-dark"] .btn-outline,
  [class*="bg-navy-medium"] .btn-outline,
  [class*="from-navy-dark"] .btn-outline,
  [class*="from-navy-medium"] .btn-outline {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: var(--navy-primary) !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(255, 255, 255, 0.05) !important;
  }
[class*="bg-navy-dark"] .btn-outline:hover,
  [class*="bg-navy-medium"] .btn-outline:hover,
  [class*="from-navy-dark"] .btn-outline:hover,
  [class*="from-navy-medium"] .btn-outline:hover {
    background: white !important;
    border-color: white !important;
    color: var(--navy-primary) !important;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2), 0 4px 10px rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-1px) !important;
  }
/* Enhanced Visual Utility Classes */
/* Removed duplicate floating-animation class */
/* Removed duplicate float keyframe - keeping the subtle -6px version */
/* Utility Classes - Production Ready */
/* 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 {
    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;
  }
/* Production-ready Report Death gradient using CSS custom property */
.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;
  }
/* 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;
  }
/* 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;
  }
/* 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;
  }
/* 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;
  }
/* 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"]),
  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"]) {
    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(.red-badge-text):not(.red-badge-text *),
  button.text-navy-dark *: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:hover *:not(.red-badge-text):not(.red-badge-text *):not(.btn-primary):not(.btn-primary *),
  button.text-navy-dark: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 *,
  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;
  }
/* ============================================
   * 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[aria-label="Notifications"] .h-6,
  button[title="View notifications"] svg,
  button[title="View notifications"] .h-6 {
    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 */
.action-icons-container {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
    min-width: -moz-fit-content !important;
    min-width: fit-content !important;
    margin-left: auto !important; /* Push to the right instead of fixed margin */
    position: relative !important; /* Ensure it's positioned within the card */
  }
@media (max-width: 768px) {
    .action-icons-container {
      margin-left: 0.75rem !important;
    }
  }
@media (max-width: 640px) {
    .action-icons-container {
      margin-left: 0 !important;
      margin-top: 0.75rem !important;
      width: 100% !important;
      justify-content: center !important;
      padding: 0 !important;
      border-top: 1px solid #e5e7eb !important;
      padding-top: 0.75rem !important;
    }
  }
@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,
  .action-icon-btn .h-4,
  .action-icon-btn .h-5,
  .action-icon-btn .h-6 {
    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,
    .action-icon-btn .h-4,
    .action-icon-btn .h-5,
    .action-icon-btn .h-6 {
      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 */
    svg[class*="h-4"][class*="w-4"],
    svg.h-4.w-4 {
      width: 1rem !important;
      height: 1rem !important;
    }

    svg[class*="h-5"][class*="w-5"],
    svg.h-5.w-5 {
      width: 1.25rem !important;
      height: 1.25rem !important;
    }

    svg[class*="h-6"][class*="w-6"],
    svg.h-6.w-6 {
      width: 1.5rem !important;
      height: 1.5rem !important;
    }
  }
/* 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;
    transition: color 0.2s ease;
  }
.footer-link:hover {
    color: var(--gold-primary) !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-lg) !important; /* Ensure consistent rounded-lg */
  }
/* CRITICAL: Override any rounded-xl or rounded-2xl on buttons - all buttons must use rounded-lg */
button.rounded-xl,
  button[class*="rounded-xl"],
  .btn.rounded-xl,
  .btn[class*="rounded-xl"],
  button.rounded-2xl,
  button[class*="rounded-2xl"],
  .btn.rounded-2xl,
  .btn[class*="rounded-2xl"] {
    border-radius: var(--radius-lg) !important; /* Force all buttons to use rounded-lg */
  }
/* 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 */
.btn-ghost {
    min-width: 100px;
  }
.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;
}
.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-2{
  bottom: -0.5rem;
}
.-bottom-20{
  bottom: -5rem;
}
.-bottom-40{
  bottom: -10rem;
}
.-left-16{
  left: -4rem;
}
.-left-20{
  left: -5rem;
}
.-left-32{
  left: -8rem;
}
.-left-4{
  left: -1rem;
}
.-left-40{
  left: -10rem;
}
.-right-1{
  right: -0.25rem;
}
.-right-16{
  right: -4rem;
}
.-right-2{
  right: -0.5rem;
}
.-right-20{
  right: -5rem;
}
.-right-3{
  right: -0.75rem;
}
.-right-32{
  right: -8rem;
}
.-right-4{
  right: -1rem;
}
.-right-40{
  right: -10rem;
}
.-right-6{
  right: -1.5rem;
}
.-top-1{
  top: -0.25rem;
}
.-top-2{
  top: -0.5rem;
}
.-top-20{
  top: -5rem;
}
.-top-3{
  top: -0.75rem;
}
.-top-4{
  top: -1rem;
}
.-top-40{
  top: -10rem;
}
.bottom-0{
  bottom: 0px;
}
.bottom-1\/4{
  bottom: 25%;
}
.bottom-10{
  bottom: 2.5rem;
}
.bottom-20{
  bottom: 5rem;
}
.bottom-24{
  bottom: 6rem;
}
.bottom-4{
  bottom: 1rem;
}
.bottom-40{
  bottom: 10rem;
}
.bottom-60{
  bottom: 15rem;
}
.bottom-full{
  bottom: 100%;
}
.left-0{
  left: 0px;
}
.left-1\/2{
  left: 50%;
}
.left-1\/4{
  left: 25%;
}
.left-10{
  left: 2.5rem;
}
.left-2{
  left: 0.5rem;
}
.left-20{
  left: 5rem;
}
.left-3{
  left: 0.75rem;
}
.left-4{
  left: 1rem;
}
.right-0{
  right: 0px;
}
.right-1\/4{
  right: 25%;
}
.right-10{
  right: 2.5rem;
}
.right-2{
  right: 0.5rem;
}
.right-20{
  right: 5rem;
}
.right-3{
  right: 0.75rem;
}
.right-4{
  right: 1rem;
}
.top-0{
  top: 0px;
}
.top-1\/2{
  top: 50%;
}
.top-1\/4{
  top: 25%;
}
.top-10{
  top: 2.5rem;
}
.top-2{
  top: 0.5rem;
}
.top-20{
  top: 5rem;
}
.top-3{
  top: 0.75rem;
}
.top-4{
  top: 1rem;
}
.top-40{
  top: 10rem;
}
.z-0{
  z-index: 0;
}
.z-10{
  z-index: 10;
}
.z-40{
  z-index: 40;
}
.z-50{
  z-index: 50;
}
.z-\[100\]{
  z-index: 100;
}
.order-1{
  order: 1;
}
.order-2{
  order: 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-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.-mt-1{
  margin-top: -0.25rem;
}
.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-16{
  margin-bottom: 4rem;
}
.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-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-auto{
  margin-left: auto;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-1\.5{
  margin-right: 0.375rem;
}
.mr-2{
  margin-right: 0.5rem;
}
.mr-3{
  margin-right: 0.75rem;
}
.mr-4{
  margin-right: 1rem;
}
.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-3{
  margin-top: 0.75rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-8{
  margin-top: 2rem;
}
.mt-auto{
  margin-top: auto;
}
.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;
}
.hidden{
  display: none;
}
.aspect-square{
  aspect-ratio: 1 / 1;
}
.aspect-video{
  aspect-ratio: 16 / 9;
}
.h-1{
  height: 0.25rem;
}
.h-10{
  height: 2.5rem;
}
.h-12{
  height: 3rem;
}
.h-14{
  height: 3.5rem;
}
.h-16{
  height: 4rem;
}
.h-2{
  height: 0.5rem;
}
.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-56{
  height: 14rem;
}
.h-6{
  height: 1.5rem;
}
.h-64{
  height: 16rem;
}
.h-7{
  height: 1.75rem;
}
.h-8{
  height: 2rem;
}
.h-80{
  height: 20rem;
}
.h-96{
  height: 24rem;
}
.h-auto{
  height: auto;
}
.h-full{
  height: 100%;
}
.max-h-40{
  max-height: 10rem;
}
.max-h-48{
  max-height: 12rem;
}
.max-h-64{
  max-height: 16rem;
}
.max-h-96{
  max-height: 24rem;
}
.max-h-\[80vh\]{
  max-height: 80vh;
}
.max-h-\[85vh\]{
  max-height: 85vh;
}
.max-h-\[90vh\]{
  max-height: 90vh;
}
.max-h-full{
  max-height: 100%;
}
.min-h-0{
  min-height: 0px;
}
.min-h-96{
  min-height: 24rem;
}
.min-h-\[180px\]{
  min-height: 180px;
}
.min-h-\[2\.5rem\]{
  min-height: 2.5rem;
}
.min-h-\[3\.5rem\]{
  min-height: 3.5rem;
}
.min-h-\[32px\]{
  min-height: 32px;
}
.min-h-\[36px\]{
  min-height: 36px;
}
.min-h-\[3rem\]{
  min-height: 3rem;
}
.min-h-\[400px\]{
  min-height: 400px;
}
.min-h-\[44px\]{
  min-height: 44px;
}
.min-h-\[500px\]{
  min-height: 500px;
}
.min-h-\[52px\]{
  min-height: 52px;
}
.min-h-\[56px\]{
  min-height: 56px;
}
.min-h-\[600px\]{
  min-height: 600px;
}
.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-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-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-56{
  width: 14rem;
}
.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-96{
  width: 24rem;
}
.w-\[28rem\]{
  width: 28rem;
}
.w-fit{
  width: -moz-fit-content;
  width: fit-content;
}
.w-full{
  width: 100%;
}
.w-px{
  width: 1px;
}
.min-w-0{
  min-width: 0px;
}
.min-w-\[140px\]{
  min-width: 140px;
}
.min-w-\[2\.5rem\]{
  min-width: 2.5rem;
}
.min-w-\[200px\]{
  min-width: 200px;
}
.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-\[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-xs{
  max-width: 20rem;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-shrink-0{
  flex-shrink: 0;
}
.flex-grow-0{
  flex-grow: 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-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));
}
.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-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-not-allowed{
  cursor: not-allowed;
}
.cursor-pointer{
  cursor: pointer;
}
.resize-none{
  resize: none;
}
.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;
}
.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-wrap{
  flex-wrap: wrap;
}
.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;
}
.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-3{
  gap: 0.75rem;
}
.gap-4{
  gap: 1rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-8{
  gap: 2rem;
}
.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-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * 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-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-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));
}
.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-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-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-200 > :not([hidden]) ~ :not([hidden]){
  border-color: var(--gray-200);
}
.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;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hyphens-none{
  hyphens: none;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.whitespace-pre-wrap{
  white-space: pre-wrap;
}
.break-words{
  overflow-wrap: break-word;
}
.break-all{
  word-break: break-all;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-2xl{
  border-radius: 1rem;
}
.rounded-3xl{
  border-radius: 1.5rem;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.rounded-md{
  border-radius: 0.375rem;
}
.rounded-xl{
  border-radius: 0.75rem;
}
.rounded-b-lg{
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.rounded-l-md{
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.rounded-l-none{
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.rounded-t-lg{
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.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-2{
  border-bottom-width: 2px;
}
.border-b-4{
  border-bottom-width: 4px;
}
.border-l-4{
  border-left-width: 4px;
}
.border-r{
  border-right-width: 1px;
}
.border-r-0{
  border-right-width: 0px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-2{
  border-top-width: 2px;
}
.border-dashed{
  border-style: dashed;
}
.border-amber-200{
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / 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-600{
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.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-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-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-200{
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / 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-600{
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / 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-white\/50{
  border-color: rgb(255 255 255 / 0.5);
}
.border-yellow-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}
.border-b-gold-primary{
  border-bottom-color: var(--gold-primary);
}
.border-b-gold-secondary{
  border-bottom-color: var(--gold-secondary);
}
.border-b-navy-primary{
  border-bottom-color: var(--navy-primary);
}
.border-l-error{
  border-left-color: var(--error);
}
.border-l-gold-primary{
  border-left-color: var(--gold-primary);
}
.border-l-gray-500{
  border-left-color: var(--gray-500);
}
.border-l-navy-primary{
  border-left-color: var(--navy-primary);
}
.border-l-success{
  border-left-color: var(--success);
}
.border-l-warning{
  border-left-color: var(--warning);
}
.border-r-gold-primary{
  border-right-color: var(--gold-primary);
}
.border-r-navy-primary{
  border-right-color: var(--navy-primary);
}
.border-t-gold-primary{
  border-top-color: var(--gold-primary);
}
.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-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-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/30{
  background-color: rgb(0 0 0 / 0.3);
}
.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-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-emerald-100{
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / 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-error{
  background-color: var(--error);
}
.bg-error-light{
  background-color: var(--error-light);
}
.bg-gold-primary{
  background-color: var(--gold-primary);
}
.bg-gold-secondary{
  background-color: var(--gold-secondary);
}
.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-600{
  background-color: var(--gray-600);
}
.bg-gray-700{
  background-color: var(--gray-700);
}
.bg-gray-800{
  background-color: var(--gray-800);
}
.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / 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-400\/10{
  background-color: rgb(74 222 128 / 0.1);
}
.bg-green-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.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-light{
  background-color: var(--navy-light);
}
.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-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-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\/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-yellow-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-opacity-10{
  --tw-bg-opacity: 0.1;
}
.bg-opacity-100{
  --tw-bg-opacity: 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 50%, #fbbf24 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-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-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-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-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-green-500\/10{
  --tw-gradient-from: rgb(34 197 94 / 0.1) 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-light{
  --tw-gradient-from: var(--navy-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-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-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-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-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-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-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-500\/5{
  --tw-gradient-to: rgb(16 185 129 / 0.05) 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-light{
  --tw-gradient-to: var(--gold-light) 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-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-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-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;
}
.p-1{
  padding: 0.25rem;
}
.p-12{
  padding: 3rem;
}
.p-2{
  padding: 0.5rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-5{
  padding: 1.25rem;
}
.p-6{
  padding: 1.5rem;
}
.p-8{
  padding: 2rem;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.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-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}
.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-24{
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.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-12{
  padding-bottom: 3rem;
}
.pb-16{
  padding-bottom: 4rem;
}
.pb-2{
  padding-bottom: 0.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-20{
  padding-left: 5rem;
}
.pl-3{
  padding-left: 0.75rem;
}
.pl-4{
  padding-left: 1rem;
}
.pl-8{
  padding-left: 2rem;
}
.pr-10{
  padding-right: 2.5rem;
}
.pr-12{
  padding-right: 3rem;
}
.pr-2{
  padding-right: 0.5rem;
}
.pr-20{
  padding-right: 5rem;
}
.pr-3{
  padding-right: 0.75rem;
}
.pr-4{
  padding-right: 1rem;
}
.pr-6{
  padding-right: 1.5rem;
}
.pr-8{
  padding-right: 2rem;
}
.pt-1\.5{
  padding-top: 0.375rem;
}
.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;
}
.font-mono{
  font-family: JetBrains Mono, SF Mono, Monaco, Consolas, monospace;
}
.font-sans{
  font-family: Lexend, Open Sans, system-ui, sans-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-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-semibold{
  font-weight: 600;
}
.uppercase{
  text-transform: uppercase;
}
.capitalize{
  text-transform: capitalize;
}
.italic{
  font-style: italic;
}
.leading-none{
  line-height: 1;
}
.leading-relaxed{
  line-height: 1.625;
}
.leading-tight{
  line-height: 1.25;
}
.tracking-tight{
  letter-spacing: -0.025em;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.tracking-widest{
  letter-spacing: 0.1em;
}
.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-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-gold-dark{
  color: var(--gold-dark);
}
.text-gold-light{
  color: var(--gold-light);
}
.text-gold-primary{
  color: var(--gold-primary);
}
.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-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-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-success{
  color: var(--success);
}
.text-transparent{
  color: transparent;
}
.text-warning{
  color: var(--warning);
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/80{
  color: rgb(255 255 255 / 0.8);
}
.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-800{
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.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-15{
  opacity: 0.15;
}
.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;
}
.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-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-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);
}
.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-white\/20{
  --tw-ring-color: rgb(255 255 255 / 0.2);
}
.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-2xl{
  --tw-blur: blur(40px);
  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-lg{
  --tw-blur: blur(16px);
  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-md{
  --tw-blur: blur(12px);
  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-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: 150ms;
}
.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.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: 150ms;
}
.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow{
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000{
  transition-duration: 1000ms;
}
.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 */
.float-animation {
    animation: float 8s ease-in-out infinite;
    will-change: transform;
  }
/* 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: 1rem;
    height: 1rem;
    color: var(--gold-primary);
    border: 2px solid var(--navy-light);
    border-radius: var(--radius-sm);
    background: white;
    transition: all var(--transition-normal);
    margin: 0;
    min-height: auto;
    box-sizing: border-box;
    vertical-align: middle;
    flex-shrink: 0;
  }
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;
  }
label:first-child {
    margin-top: 0;
  }
/* Form Group Spacing */
/* Custom utilities without overrides */
/* Premium Loading Animations */
@keyframes spin-reverse {
    from {
      transform: rotate(360deg);
    }
    to {
      transform: rotate(0deg);
    }
  }
/* Enhanced bounce with stagger */
/* 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: #000310;    /* RGB(0, 3, 16) - Footer, deepest backgrounds */
  --navy-dark: #000A39;       /* RGB(0, 10, 57) - Hero sections, premium areas */
  --navy-medium: #011159;     /* RGB(1, 17, 89) - Navigation, cards */
  --navy-primary: #031774;    /* RGB(3, 23, 116) - Primary text, headings */
  --navy-secondary: #051A6B;  /* RGB(5, 26, 107) - Secondary navy for gradients */
  --navy-light: #061E8D;      /* 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: #dbeafe; /* Ultra light navy backgrounds */
  
  /* Premium Golden Metallic System - True Metallic Gold */
  --gold-darkest: #6b4e00;    /* Deep bronze-gold shadows */
  --gold-dark: #8b6914;       /* Rich bronze-gold metallic */
  --gold-primary: #b8860b;    /* Primary dark golden rod */
  --gold-secondary: #daa520;  /* Secondary golden rod */
  --gold-light: #ffd700;      /* Light metallic gold */
  --gold-pale: #fff8dc;       /* Pale golden backgrounds */
  --gold-ultra-light: #fffef7; /* Ultra light golden tints */
  
  /* Premium Neutral Palette */
  --white-pure: #ffffff;      /* Pure white */
  --white-soft: #fefefe;      /* Soft off-white */
  --gray-50: #f9fafb;         /* 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: #374151;        /* Primary readable text - improved from #4b5563 */
  --gray-700: #1f2937;        /* Dark text - improved from #374151 */
  --gray-800: #111827;        /* Very dark text - improved from #1f2937 */
  --gray-900: #0f172a;        /* Darkest text - improved from #111827 */
  
  /* Text colors for light backgrounds - proper contrast */
  --text-on-light-blue: #031774;  /* 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.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --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-primary);     /* 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 */
p, span, h1, h2, h3, h4, h5, h6, label, a {
  /* Prevent horizontal overflow */
  overflow-x: hidden;
  /* 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 */
input, textarea, select {
  /* Ensure text doesn't overflow input bounds */
  overflow-x: hidden;
  /* Break long text in inputs */
  word-wrap: break-word;
  overflow-wrap: break-word;
}
/* 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;
}
.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;
}
@media (min-width: 640px) {
  .hero-section-gradient {
    padding: 4rem 0;
    min-height: 60vh;
  }
}
@media (min-width: 1024px) {
  .hero-section-gradient {
    min-height: 70vh;
  }
}
/* 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: 0.5rem;
  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-lg) !important; /* CRITICAL: Ensure all buttons use consistent rounded-lg (8px) */
  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 */
    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 */
    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 */
    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 svg[class*="h-5"],.btn-sm svg[class*="h-6"] { /* h-5 = 20px */
    flex-shrink: 0;
    width: 1.25rem; /* h-5 = 20px */
    height: 1.25rem;
  }
.btn-sm svg[class*="h-6"] {
    width: 1.5rem; /* h-6 = 24px */
    height: 1.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 all animations and transitions */
  .animate-float,
  .animate-pulse-gentle,
  .animate-bounce,
  .animate-ping,
  .animate-fade-in,
  .animate-fade-in-up {
    animation: none !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; /* Improve 3D context */
  contain: layout style paint; /* Prevent layout shifts */
}
/* Animation cleanup - remove will-change after animation completes */
.animate-fade-in:not(.animate-fade-in) {
  will-change: auto;
}
@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;
}
/* 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;
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .floating-element,
  .animate-slide-left,
  .animate-slide-right,
  .animate-subtle-pulse,
  .animate-scale-in,
  .animate-gentle-bounce,
  .animate-subtle-glow {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* 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) */
[class*="w-2"][class*="h-2"][class*="rounded-full"],
.w-2.h-2.rounded-full,
.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;
}
/* Icons inside w-10 h-10 containers - maintain h-5 w-5 size on all devices */
div[class*="w-10"][class*="h-10"] svg[class*="h-5"][class*="w-5"],
div[class*="w-10"][class*="h-10"] svg.h-5.w-5,
div[class*="w-10"][class*="h-10"] svg[class*="h-5"],
div[class*="w-10"][class*="h-10"] svg[class*="w-5"] {
  width: 1.25rem !important; /* h-5 w-5 = 1.25rem */
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  flex-shrink: 0 !important;
  display: block !important;
}
/* 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 any red buttons */
button[class*="bg-red-5"]:not(.btn-remove-coupon),
button[class*="bg-red-6"]:not(.btn-remove-coupon) {
  color: #ffffff !important;
}
button[class*="bg-red-5"]:not(.btn-remove-coupon) *,
button[class*="bg-red-6"]: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;
}
.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-primary) !important;
  }
.hover\:bg-white:hover[class*="rounded"] {
    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\: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-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\:bg-red-600:hover:hover {
    background-color: #dc2626 !important; /* darker red */
  }
.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-900:hover { color: var(--gray-900) !important; }
.hover\:text-navy-primary:hover { color: var(--navy-primary) !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-error:hover { color: var(--error) !important; }
.hover\:text-warning:hover { color: var(--warning) !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-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-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-xs,.hover\:text-gray-600:hover
  .text-sm {
    color: var(--text-tertiary) !important;
  }
.hover\:text-gray-900:hover.text-xs,.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\:bg-red-600:hover span,.hover\:bg-red-600:hover div,.hover\:bg-red-600:hover p,.hover\:bg-red-600:hover *,.hover\:bg-red-600:hover
  button,.hover\:bg-red-600:hover
  button * {
    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\:shadow-gold:hover {
    box-shadow: var(--shadow-gold);
  }
.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(.red-badge-text):not(.red-badge-text *) {
    color: var(--navy-primary) !important;
  }
.hover\:text-navy-dark:hover
  button *: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: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: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-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-800:hover,
  div[class*="bg-red-50"] .hover\:text-red-800:hover {
    color: #991b1b !important; /* red-800 for high contrast */
  }
.focus\:bg-navy-primary:focus {
    background-color: var(--navy-primary) !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-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;
  }
.focus\:px-4:focus svg[class*="h-5"],.focus\:px-4:focus svg[class*="h-6"] { /* h-5 = 20px */
    flex-shrink: 0 !important;
    width: 1.25rem !important; /* h-5 = 20px */
    height: 1.25rem !important;
  }
.focus\:px-4:focus svg[class*="h-6"] {
    width: 1.5rem !important; /* h-6 = 24px */
    height: 1.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;
  }
.disabled\:bg-gray-100:disabled { background-color: var(--gray-100) !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\/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; }
@media (min-width: 640px){

  
  .sidebar-nav-active .sm\:h-5 {
    color: white !important;
  }
  
  .sidebar-main .sidebar-menu-item.sidebar-nav-active .sm\:h-5,
  .sidebar-main button.sidebar-menu-item.sidebar-nav-active .sm\:h-5,
  nav .sidebar-menu-item.sidebar-nav-active .sm\:h-5,
  nav button.sidebar-menu-item.sidebar-nav-active .sm\:h-5 {
    color: white !important;
  }

  
  .sidebar-nav-inactive .sm\:h-5 {
    color: white !important;
  }
  
  .sidebar-main .sidebar-menu-item.sidebar-nav-inactive .sm\:h-5,
  nav .sidebar-menu-item.sidebar-nav-inactive .sm\:h-5,
  .sidebar-main button.sidebar-nav-inactive .sm\:h-5,
  nav button.sidebar-nav-inactive .sm\:h-5 {
    color: white !important;
    background-color: transparent !important;
    text-decoration: none !important;
  }
  
  .sidebar-main .sidebar-menu-item .sm\:h-5,
  .sidebar-main button.sidebar-menu-item .sm\:h-5,
  .sidebar-main .sidebar-nav-inactive button .sm\:h-5 {
    color: white !important;
  }

  
  .sidebar-main .sidebar-nav-inactive .sm\:h-5 {
    color: white !important;
  }

  
  .sidebar-nav-inactive:hover .sm\:h-5,
  .sidebar-main button.sidebar-nav-inactive:hover .sm\:h-5 {
    color: var(--gold-primary) !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 */
  }
  .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\: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\:ml-4.flex.items-center.gap-2 {
      flex-direction: column;
      gap: 0.25rem !important;
    }
  }
  .sm\:gap-4.grid {
    gap: 1rem;
  }
  .sm\:gap-6
  .grid {
    gap: 1rem;
  }

  @media (max-width: 640px) {
    .sm\:gap-4.grid {
      gap: 0.75rem;
    }
    .sm\:gap-6
    .grid {
      gap: 0.75rem;
    }
  }
  .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;
    }
  }
  .sm\:flex > button + button {
    margin-left: 0 !important;
  }
  .sm\:w-12.h-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\:h-12
  .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 a p.sm\:text-sm {
    color: var(--navy-dark);
  }
  .sm\:px-4 .btn-icon {
    padding: 0.5rem !important;
  }
  .sm\:px-4 svg[class*="h-5"],.sm\:px-4 svg[class*="h-6"] { /* h-5 = 20px */
    flex-shrink: 0 !important;
    width: 1.25rem !important; /* h-5 = 20px */
    height: 1.25rem !important;
  }
  .sm\:px-4 svg[class*="h-6"] {
    width: 1.5rem !important; /* h-6 = 24px */
    height: 1.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[aria-label="Notifications"] .sm\:h-6,
  button[title="View notifications"] .sm\:h-6 {
    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;
  }
  
  .action-icon-btn .sm\:h-5 {
    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;
  }
  
  .action-icon-btn .sm\:h-6 {
    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;
  }

  @media (max-width: 640px) {
    
    .action-icon-btn .sm\:h-5 {
      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;
    }
    
    .action-icon-btn .sm\:h-6 {
      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;
    }
  }
  @media (min-width: 641px) {
    /* Removed aspect-ratio forcing to prevent icon distortion */
    /* Icons will maintain their natural proportions */

    /* Ensure consistent icon sizing on web */

    
    svg.sm\:h-5.w-5 {
      width: 1.25rem !important;
      height: 1.25rem !important;
    }
    /* Removed aspect-ratio forcing to prevent icon distortion */
    /* Icons will maintain their natural proportions */

    /* Ensure consistent icon sizing on web */

    
    svg.sm\:w-5.h-5 {
      width: 1.25rem !important;
      height: 1.25rem !important;
    }
    /* Removed aspect-ratio forcing to prevent icon distortion */
    /* Icons will maintain their natural proportions */

    /* Ensure consistent icon sizing on web */

    
    svg.sm\:h-6.w-6 {
      width: 1.5rem !important;
      height: 1.5rem !important;
    }
    /* Removed aspect-ratio forcing to prevent icon distortion */
    /* Icons will maintain their natural proportions */

    /* Ensure consistent icon sizing on web */

    
    svg.sm\:w-6.h-6 {
      width: 1.5rem !important;
      height: 1.5rem !important;
    }
  }
  
  button.sm\:rounded-2xl,.sm\:rounded-2xl
  .btn { /* Force all buttons to use rounded-lg */
    border-radius: var(--radius-lg) !important; /* Force all buttons to use rounded-lg */
  }
}
@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\: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\: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;
  }

  @media (max-width: 640px) {
    .md\:flex.items-center.gap-2.ml-4 {
      flex-direction: column;
      gap: 0.25rem !important;
    }
  }
  .md\:flex > button + button {
    margin-left: 0 !important;
  }
  .md\:h-12
  .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;
  }
  .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\: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 */
  }
  .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\:flex > button + button {
    margin-left: 0 !important;
  }
  .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--text-secondary);
  }
}
.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\: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-blue-500:hover{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.hover\:border-gold-light:hover{
  border-color: var(--gold-light);
}
.hover\:border-gold-primary:hover{
  border-color: var(--gold-primary);
}
.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-600:hover{
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / 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-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-red-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / 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-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.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\/80:hover{
  background-color: rgb(255 255 255 / 0.8);
}
.hover\:bg-yellow-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.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-amber-900:hover{
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.hover\:text-error:hover{
  color: var(--error);
}
.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-900:hover{
  color: var(--gray-900);
}
.hover\:text-green-900:hover{
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / 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-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-warning:hover{
  color: var(--warning);
}
.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\: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);
}
.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: 0.5rem;
}
.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-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-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-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-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-green-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / 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-600:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / 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;
}
.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}
.disabled\:bg-gray-100:disabled{
  background-color: var(--gray-100);
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.disabled\:opacity-75:disabled{
  opacity: 0.75;
}
.group:hover .group-hover\:visible{
  visibility: visible;
}
.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\/faq:hover .group-hover\/faq\:text-gold-primary{
  color: var(--gold-primary);
}
.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-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);
}
@media (min-width: 640px){
  .sm\:bottom-28{
    bottom: 7rem;
  }
  .sm\:right-6{
    right: 1.5rem;
  }
  .sm\:order-1{
    order: 1;
  }
  .sm\:order-2{
    order: 2;
  }
  .sm\:col-span-2{
    grid-column: span 2 / span 2;
  }
  .sm\:mx-0{
    margin-left: 0px;
    margin-right: 0px;
  }
  .sm\:mb-10{
    margin-bottom: 2.5rem;
  }
  .sm\:mb-12{
    margin-bottom: 3rem;
  }
  .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\:mt-4{
    margin-top: 1rem;
  }
  .sm\:block{
    display: block;
  }
  .sm\:inline{
    display: inline;
  }
  .sm\:flex{
    display: flex;
  }
  .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-40{
    height: 10rem;
  }
  .sm\:h-5{
    height: 1.25rem;
  }
  .sm\:h-6{
    height: 1.5rem;
  }
  .sm\:h-8{
    height: 2rem;
  }
  .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-40{
    width: 10rem;
  }
  .sm\:w-5{
    width: 1.25rem;
  }
  .sm\:w-6{
    width: 1.5rem;
  }
  .sm\:w-8{
    width: 2rem;
  }
  .sm\:w-auto{
    width: auto;
  }
  .sm\:min-w-\[120px\]{
    min-width: 120px;
  }
  .sm\:flex-initial{
    flex: 0 1 auto;
  }
  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:flex-row{
    flex-direction: row;
  }
  .sm\:items-start{
    align-items: flex-start;
  }
  .sm\:items-center{
    align-items: center;
  }
  .sm\:justify-start{
    justify-content: flex-start;
  }
  .sm\:justify-between{
    justify-content: space-between;
  }
  .sm\:gap-12{
    gap: 3rem;
  }
  .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-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\:self-auto{
    align-self: auto;
  }
  .sm\:rounded-2xl{
    border-radius: 1rem;
  }
  .sm\:rounded-3xl{
    border-radius: 1.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-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .sm\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .sm\:py-3{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .sm\:py-6{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .sm\:pb-8{
    padding-bottom: 2rem;
  }
  .sm\:pl-14{
    padding-left: 3.5rem;
  }
  .sm\:pr-16{
    padding-right: 4rem;
  }
  .sm\:pt-6{
    padding-top: 1.5rem;
  }
  .sm\:text-left{
    text-align: left;
  }
  .sm\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .sm\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .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\: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\:mb-8{
    margin-bottom: 2rem;
  }
  .md\:block{
    display: block;
  }
  .md\:flex{
    display: flex;
  }
  .md\:h-12{
    height: 3rem;
  }
  .md\:h-16{
    height: 4rem;
  }
  .md\:h-48{
    height: 12rem;
  }
  .md\:w-64{
    width: 16rem;
  }
  .md\:w-auto{
    width: auto;
  }
  .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\:p-12{
    padding: 3rem;
  }
  .md\:p-8{
    padding: 2rem;
  }
  .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-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .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;
  }
}
@media (min-width: 1024px){
  .lg\:col-span-1{
    grid-column: span 1 / span 1;
  }
  .lg\:col-span-2{
    grid-column: span 2 / span 2;
  }
  .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-48{
    height: 12rem;
  }
  .lg\:h-\[500px\]{
    height: 500px;
  }
  .lg\:min-h-\[700px\]{
    min-height: 700px;
  }
  .lg\:w-1\/2{
    width: 50%;
  }
  .lg\:w-16{
    width: 4rem;
  }
  .lg\:w-32{
    width: 8rem;
  }
  .lg\:w-48{
    width: 12rem;
  }
  .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\:flex-row{
    flex-direction: row;
  }
  .lg\:flex-row-reverse{
    flex-direction: row-reverse;
  }
  .lg\:items-center{
    align-items: center;
  }
  .lg\:gap-8{
    gap: 2rem;
  }
  .lg\:p-12{
    padding: 3rem;
  }
  .lg\:p-16{
    padding: 4rem;
  }
  .lg\:p-8{
    padding: 2rem;
  }
  .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .lg\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .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));
  }
}