/* ==============================================
   MAIN.CSS - TheThaimassage Design System
   Foundation: Base Styles & Reset
   ============================================== */

/* ==============================================
   1. CSS VARIABLES - Design Tokens
   Note: Variables will be populated in US-012
   ============================================== */
:root {
  /* ============================================
     COLOR SYSTEM - Design Tokens
     Thai Massage Studio - Weinrot/Rosa/Grün Farbschema
     ============================================ */

  /* Primary Palette - Weinrot (10 shades) */
  --color-primary-25: #FFFBFD;      /* sehr sehr helles Rosa-Weinrot */
  --color-primary-50: #F9E6F1;      /* sehr helles Rosa-Weinrot */
  --color-primary-100: #F2CDE3;     /* helles Rosa-Weinrot */
  --color-primary-200: #E09AC7;     /* mittleres Rosa */
  --color-primary-300: #C567A5;     /* Rosa-Lila */
  --color-primary-400: #A65C94;     /* Rosa-Akzent */
  --color-primary-500: #661652;     /* Weinrot (Hauptfarbe) */
  --color-primary-600: #550F43;     /* dunkleres Weinrot */
  --color-primary-700: #480437;     /* dunkles Weinrot (Hover) */
  --color-primary-800: #3A032D;     /* sehr dunkles Weinrot */
  --color-primary-900: #2C0021;     /* fast schwarz Weinrot (Footer) */

  /* Secondary Palette - Grün (10 shades) */
  --color-secondary-50: #E8F5E3;    /* sehr helles Grün */
  --color-secondary-100: #D1EBC7;   /* helles Grün */
  --color-secondary-200: #B3DC9F;   /* helles Pastellgrün */
  --color-secondary-300: #85C16B;   /* mittleres Grün (weicher Akzent) */
  --color-secondary-400: #5FA947;   /* kräftiges Grün */
  --color-secondary-500: #36771A;   /* Grün (Hauptakzent - CTAs) */
  --color-secondary-600: #2D6315;   /* dunkleres Grün */
  --color-secondary-700: #1D5405;   /* dunkles Grün (Hover) */
  --color-secondary-800: #164402;   /* sehr dunkles Grün */
  --color-secondary-900: #0F3301;   /* fast schwarzes Grün */

  /* Neutral Palette - Rosa-getönt (12 values) */
  --color-neutral-white: #FFFFFF;
  --color-neutral-50: #FDFBFC;      /* fast weiß mit rosa Touch */
  --color-neutral-100: #F9F6F8;     /* sehr hell rosa-grau */
  --color-neutral-200: #E6D4DC;     /* Light rosa-grey (borders) */
  --color-neutral-300: #E8D3DD;     /* helles Rosa-Grau */
  --color-neutral-400: #D4B8C5;     /* mittleres Rosa-Grau */
  --color-neutral-500: #B89BAA;     /* Rosa-Grau */
  --color-neutral-600: #8A6D7B;     /* dunkles Rosa-Grau */
  --color-neutral-700: #6B5361;     /* sehr dunkles Rosa-Grau */
  --color-neutral-800: #4D3B46;     /* dunkelbraun-rosa */
  --color-neutral-900: #2F232B;     /* fast schwarz rosa-braun */
  --color-neutral-black: #000000;

  /* Accent Palette - Rosa */
  --color-accent-light: #F5E3EF;    /* sehr helles Rosa */
  --color-accent-main: #A65C94;     /* Rosa (Badges, Tags) */
  --color-accent-dark: #8A4C7B;     /* dunkleres Rosa */

  /* Semantic Colors - Success (Grün) */
  --color-success-light: #D1EBC7;
  --color-success-main: #36771A;
  --color-success-dark: #1D5405;

  /* Semantic Colors - Error (Rosa-getönt) */
  --color-error-light: #F9E6F1;
  --color-error-main: #8A4C7B;
  --color-error-dark: #661652;

  /* Semantic Colors - Warning (Rosa) */
  --color-warning-light: #F5E3EF;
  --color-warning-main: #A65C94;
  --color-warning-dark: #8A4C7B;

  /* Semantic Colors - Info (mittleres Grün) */
  --color-info-light: #E8F5E3;
  --color-info-main: #5FA947;
  --color-info-dark: #36771A;

  /* Decorative Colors - Premium Design Elements */
  --color-decorative-copper: #8B6F47;  /* Copper for animated ball and divider */
  --color-label-background: #2C3E50;   /* Dark navy for bottom label section */
  --color-decorative-gold: #C9A76B;    /* Alternative gold for divider */

  /* ============================================
     TYPOGRAPHY SYSTEM
     ============================================ */

  /* Font Families */
  --font-heading: 'Marcellus', 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Font Size Scale (13 sizes: xs to 7xl) */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */
  --font-size-6xl: 3.75rem;     /* 60px */
  --font-size-7xl: 4.5rem;      /* 72px */

  /* Font Weights (9 values) */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Line Heights (6 values) */
  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* Letter Spacing (6 values) */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  --letter-spacing-widest: 0.15em;

  /* ============================================
     SPACING SCALE (8px Base Grid)
     ============================================ */

  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0-5: 0.125rem;    /* 2px */
  --spacing-1: 0.25rem;       /* 4px */
  --spacing-1-5: 0.375rem;    /* 6px */
  --spacing-2: 0.5rem;        /* 8px */
  --spacing-2-5: 0.625rem;    /* 10px */
  --spacing-3: 0.75rem;       /* 12px */
  --spacing-3-5: 0.875rem;    /* 14px */
  --spacing-4: 1rem;          /* 16px */
  --spacing-5: 1.25rem;       /* 20px */
  --spacing-6: 1.5rem;        /* 24px */
  --spacing-7: 1.75rem;       /* 28px */
  --spacing-8: 2rem;          /* 32px */
  --spacing-9: 2.25rem;       /* 36px */
  --spacing-10: 2.5rem;       /* 40px */
  --spacing-11: 2.75rem;      /* 44px */
  --spacing-12: 3rem;         /* 48px */
  --spacing-14: 3.5rem;       /* 56px */
  --spacing-16: 4rem;         /* 64px */
  --spacing-20: 5rem;         /* 80px */
  --spacing-24: 6rem;         /* 96px */
  --spacing-28: 7rem;         /* 112px */
  --spacing-32: 8rem;         /* 128px */
  --spacing-36: 9rem;         /* 144px */
  --spacing-40: 10rem;        /* 160px */
  --spacing-44: 11rem;        /* 176px */
  --spacing-48: 12rem;        /* 192px */
  --spacing-52: 13rem;        /* 208px */
  --spacing-56: 14rem;        /* 224px */
  --spacing-60: 15rem;        /* 240px */
  --spacing-64: 16rem;        /* 256px */
  --spacing-72: 18rem;        /* 288px */
  --spacing-80: 20rem;        /* 320px */
  --spacing-96: 24rem;        /* 384px */

  /* ============================================
     MAX-WIDTH SCALE (Container Constraints)
     ============================================ */

  --max-width-sm: 640px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --max-width-xl: 1280px;
  --max-width-2xl: 1440px;
  --max-width-7xl: 1536px;

  /* ============================================
     SHADOWS
     ============================================ */

  --shadow-none: none;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-default: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.2);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* ============================================
     BORDER RADIUS
     ============================================ */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-default: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* ============================================
     BORDER WIDTH
     ============================================ */

  --border-width-0: 0;
  --border-width-default: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;

  /* ============================================
     TRANSITIONS
     ============================================ */

  /* Timing Functions */
  --timing-linear: linear;
  --timing-in: cubic-bezier(0.4, 0, 1, 1);
  --timing-out: cubic-bezier(0, 0, 0.2, 1);
  --timing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --timing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --timing-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --timing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Duration */
  --duration-0: 0ms;
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  /* Combined Transitions (Common Patterns) */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
     OPACITY SCALE
     ============================================ */

  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-15: 0.15;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;

  /* ============================================
     Z-INDEX SCALE
     ============================================ */

  --z-index-0: 0;
  --z-index-10: 10;
  --z-index-20: 20;
  --z-index-30: 30;
  --z-index-40: 40;
  --z-index-50: 50;
  --z-index-auto: auto;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;

  /* ============================================
     ALIASES - Compatibility Aliases for Convenience
     ============================================ */

  /* Color Aliases */
  --color-white: var(--color-neutral-white);
  --color-black: var(--color-neutral-black);
  --color-primary: var(--color-primary-500);
  --color-primary-dark: var(--color-primary-700);
  --color-gold: var(--color-accent-main);

  /* Border Radius Aliases */
  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
  --border-radius-xl: var(--radius-xl);
  --border-radius-full: var(--radius-full);

  /* Transition Aliases */
  --transition-base: var(--transition-normal);

  /* Font Size Aliases for Headings */
  --font-size-h1: var(--font-size-5xl);
  --font-size-h2: var(--font-size-4xl);
  --font-size-h3: var(--font-size-3xl);
  --font-size-h4: var(--font-size-2xl);
  --font-size-h5: var(--font-size-xl);
  --font-size-h6: var(--font-size-lg);
}

/* ==============================================
   2. RESET/BASE STYLES
   ============================================== */

/* Box-sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margins and paddings */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li {
  margin: 0;
  padding: 0;
}

/* Base font-size for rem calculations */
html {
  font-size: 16px; /* 1rem = 16px */
}

/* Remove list styles */
ul,
ol {
  list-style: none;
}

/* ==============================================
   GLOBAL STYLES - Base HTML Elements
   ============================================== */

html, body {
  font-family: var(--font-body), sans-serif;
  background-color: var(--color-neutral-50); /* Light pink background matching sections */
}

a {
  color: var(--color-info-main);
}

.content {
  padding-top: var(--spacing-5);
}

h1:focus {
  outline: none;
}

/* ==============================================
   VALIDATION STYLES - Form Validation
   ============================================== */

.valid.modified:not([type=checkbox]) {
  outline: var(--border-width-default) solid var(--color-success-main);
}

.invalid {
  outline: var(--border-width-default) solid var(--color-error-main);
}

.validation-message {
  color: var(--color-error-main);
}

/* ==============================================
   BLAZOR ERROR BOUNDARY
   ============================================== */

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-error-dark);
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) calc(var(--spacing-4) * 2.4);
  color: var(--color-neutral-white);
}

.blazor-error-boundary::after {
  content: "An error has occurred."
}

/* ==============================================
   3. TYPOGRAPHY SYSTEM
   Note: Typography implementation: US-012
   ============================================== */

/* Base mobile typography */
h1 {
  font-family: var(--font-heading), serif;
  font-size: var(--font-size-4xl); /* 2.25rem mobile */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-4);
}

h2 {
  font-family: var(--font-heading), serif;
  font-size: var(--font-size-3xl); /* 1.875rem mobile */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-4);
}

/* Tablet breakpoint (768px+) */
@media (min-width: 768px) {
  h1 {
    font-size: var(--font-size-5xl); /* 3rem tablet */
  }

  h2 {
    font-size: var(--font-size-4xl); /* 2.25rem tablet */
  }
}

/* Desktop breakpoint (1024px+) */
@media (min-width: 1024px) {
  h1 {
    font-size: var(--font-size-6xl); /* 3.75rem desktop */
  }

  h2 {
    font-size: 2.75rem; /* 2.75rem desktop - per DesignProfile.js */
  }
}

h3 {
  font-family: var(--font-heading), serif;
  font-size: var(--font-size-2xl); /* 1.5rem mobile */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  margin-bottom: var(--spacing-3);
}

@media (min-width: 768px) {
  h3 {
    font-size: calc(var(--font-size-2xl) + 0.25rem); /* 1.75rem tablet */
  }
}

@media (min-width: 1024px) {
  h3 {
    font-size: calc(var(--font-size-2xl) + 0.5rem); /* 2rem desktop */
  }
}

h4 {
  font-family: var(--font-heading), serif;
  font-size: var(--font-size-xl); /* 1.25rem mobile */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  margin-bottom: var(--spacing-3);
}

@media (min-width: 768px) {
  h4 {
    font-size: calc(var(--font-size-xl) + 0.125rem); /* 1.375rem tablet */
  }
}

@media (min-width: 1024px) {
  h4 {
    font-size: var(--font-size-2xl); /* 1.5rem desktop */
  }
}

h5 {
  font-family: var(--font-heading), serif;
  font-size: var(--font-size-lg); /* 1.125rem mobile */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-2);
}

@media (min-width: 768px) {
  h5 {
    font-size: var(--font-size-xl); /* 1.25rem tablet */
  }
}

@media (min-width: 1024px) {
  h5 {
    font-size: var(--font-size-xl); /* 1.25rem desktop */
  }
}

h6 {
  font-family: var(--font-heading), serif;
  font-size: var(--font-size-base); /* 1rem mobile */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-2);
}

@media (min-width: 768px) {
  h6 {
    font-size: var(--font-size-lg); /* 1.125rem tablet */
  }
}

@media (min-width: 1024px) {
  h6 {
    font-size: var(--font-size-lg); /* 1.125rem desktop */
  }
}

/* Base body text - mobile default */
body, p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

/* Desktop body text scaling */
@media (min-width: 1024px) {
  body, p {
    font-size: var(--font-size-lg); /* 1.125rem (18px) */
  }
}

/* ==============================================
   4. LAYOUT COMPONENTS
   Note: Layout styles implementation: US-014
   ============================================== */

/* ==============================================
   GLOBAL COMPONENTS - Error UI
   ============================================== */

.blazor-error-ui {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--color-white);
  display: none;
  left: 50%;
  max-width: 500px;
  padding: var(--spacing-5);
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  z-index: var(--z-index-modal);
  text-align: center;
}

.blazor-error-ui::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--border-radius-lg);
  z-index: -2;
  filter: blur(20px);
}

.blazor-error-ui__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  text-align: left;
}

.blazor-error-ui__icon {
  font-size: 3rem;
  flex-shrink: 0;
  opacity: 0.9;
}

.blazor-error-ui__text {
  flex: 1;
}

.blazor-error-ui__title {
  font-family: var(--font-heading), serif;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-1);
  color: var(--color-white);
}

.blazor-error-ui__message {
  font-size: var(--font-size-base);
  opacity: 0.95;
  line-height: 1.5;
}

.blazor-error-ui__reload-btn {
  background: var(--color-white);
  border: none;
  border-radius: var(--border-radius-md);
  color: var(--color-primary-dark);
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-body), sans-serif;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  padding: var(--spacing-3) var(--spacing-5);
  text-decoration: none;
  transition: all var(--transition-base);
  width: 100%;
}

.blazor-error-ui__reload-btn:hover {
  background: var(--color-gold);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.blazor-error-ui__dismiss {
  position: absolute;
  right: var(--spacing-3);
  top: var(--spacing-3);
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--color-white);
  opacity: 0.7;
  transition: opacity var(--transition-base);
  line-height: 1;
}

.blazor-error-ui__dismiss:hover {
  opacity: 1;
}

/* ==============================================
   GLOBAL COMPONENTS - Reconnection Modal
   ============================================== */

#components-reconnect-modal {
  backdrop-filter: blur(20px) brightness(1.3) !important;
  opacity: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--spacing-5) !important;
}

#components-reconnect-modal h5 {
  color: var(--color-white) !important;
  font-family: var(--font-heading), serif !important;
  font-size: var(--font-size-h4) !important;
  font-weight: var(--font-weight-bold) !important;
  margin: 0 0 var(--spacing-4) 0 !important;
  text-align: center !important;
  max-width: 600px !important;
  line-height: 1.5 !important;
}

#components-reconnect-modal h5 a {
  color: var(--color-gold) !important;
  text-decoration: underline !important;
  transition: color var(--transition-base) !important;
}

#components-reconnect-modal h5 a:hover {
  color: var(--color-white) !important;
}

#components-reconnect-modal div[style*="border-radius: 50%"] {
  border-color: var(--color-white) rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.3) !important;
  width: 3em !important;
  height: 3em !important;
  margin: var(--spacing-4) auto !important;
  animation: spin 1s linear infinite !important;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#components-reconnect-modal button {
  background: var(--color-white) !important;
  border: none !important;
  border-radius: var(--border-radius-md) !important;
  color: var(--color-primary-dark) !important;
  cursor: pointer !important;
  font-family: var(--font-body), sans-serif !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-semibold) !important;
  padding: var(--spacing-3) var(--spacing-6) !important;
  margin: var(--spacing-3) auto !important;
  transition: all var(--transition-base) !important;
  box-shadow: var(--shadow-md) !important;
  min-width: 150px !important;
}

#components-reconnect-modal button:hover {
  background: var(--color-gold) !important;
  color: var(--color-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}

#components-reconnect-modal p {
  color: var(--color-white) !important;
  font-family: var(--font-body), sans-serif !important;
  font-size: var(--font-size-sm) !important;
  margin: var(--spacing-2) 0 0 0 !important;
  opacity: 0.9 !important;
}

#components-reconnect-modal p a {
  color: var(--color-gold) !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  transition: color var(--transition-base) !important;
}

#components-reconnect-modal p a:hover {
  color: var(--color-white) !important;
}

/* ==============================================
   5. PAGE COMPONENTS
   Note: Page component styles implementation: US-014
   ============================================== */

/* ==============================================
   6. SHARED COMPONENTS
   Note: Shared component styles implementation: US-014
   ============================================== */

/* ============================================
   EXTRACT TO: components/sections/hero-section.css
   Lines: 790-1333 (544 lines)
   Target User Story: US-011-003
   Component: HeroSection
   Description: Homepage hero with gradient background, CTA buttons, and responsive layout
   Dependencies: CSS variables from main.css
   ============================================ */


/* ==============================================
   7. UTILITY CLASSES
   Bootstrap Replacements (US-013)
   ============================================== */

/* Container System */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-6); /* 24px mobile */
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--spacing-8); /* 32px tablet */
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 var(--spacing-12); /* 48px desktop */
  }
}

.container-fluid {
  width: 100%;
  padding: 0 var(--spacing-6); /* 24px mobile */
}

@media (min-width: 768px) {
  .container-fluid {
    padding: 0 var(--spacing-8); /* 32px tablet */
  }
}

@media (min-width: 1024px) {
  .container-fluid {
    padding: 0 var(--spacing-12); /* 48px desktop */
  }
}

/* Button System */
.button {
  /* display handled by mobile-first media queries below */
  padding: var(--spacing-3) var(--spacing-5); /* 12px 20px */
  font-family: var(--font-body), sans-serif;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-normal);
  background-color: var(--color-neutral-300);
  color: var(--color-neutral-900);
}

.button-primary {
  background-color: var(--color-primary-500);
  color: var(--color-neutral-white);
  border-color: var(--color-primary-600);
}

.button-primary:hover {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-700);
}

.button-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-neutral-white), 0 0 0 4px var(--color-primary-400);
}

.button-primary:active {
  background-color: var(--color-primary-700);
}

.button-secondary {
  background-color: var(--color-secondary-500);
  color: var(--color-neutral-white);
  border-color: var(--color-secondary-600);
}

.button-secondary:hover {
  background-color: var(--color-secondary-600);
  border-color: var(--color-secondary-700);
}

.button-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-neutral-white), 0 0 0 4px var(--color-secondary-400);
}

.button-secondary:active {
  background-color: var(--color-secondary-700);
}

.button-lg {
  padding: var(--spacing-4) var(--spacing-6); /* 16px 24px */
  font-size: var(--font-size-lg);
}

/* Mobile button adjustments - mobile-first approach */
.button,
.button-primary,
.button-secondary {
  width: 100%; /* Mobile default: full-width */
  display: block;
}

/* Tablet and up: inline buttons */
@media (min-width: 640px) {
  .button,
  .button-primary,
  .button-secondary {
    width: auto;
    display: inline-block;
  }
}

/* Grid/Flexbox Utilities */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--spacing-3) * -1); /* -12px negative margin */
}

.row > * {
  padding: 0 var(--spacing-3); /* 12px gutter */
}

.justify-content-center {
  justify-content: center;
}

/* Column System (only sizes currently in use) */
.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Small screens (640px and up) - col-sm-* classes */
@media (min-width: 640px) {
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Medium screens (768px and up) - col-md-* classes */
@media (min-width: 768px) {
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
}

@media (min-width: 1024px) {
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
}

/* Spacing Utilities */
.mt-4 {
  margin-top: var(--spacing-6); /* 24px - Bootstrap mt-4 equivalent */
}

.me-3 {
  margin-right: var(--spacing-4); /* 16px - Bootstrap me-3 equivalent */
}

.px-3 {
  padding-left: var(--spacing-4); /* 16px */
  padding-right: var(--spacing-4);
}

.px-4 {
  padding-left: var(--spacing-5); /* 20px */
  padding-right: var(--spacing-5);
}

.ps-3 {
  padding-left: var(--spacing-4); /* 16px */
}

/* Section Padding Utility */
.section {
  padding: var(--spacing-12) 0; /* 3rem (48px) vertical mobile */
}

@media (min-width: 768px) {
  .section {
    padding: var(--spacing-20) 0; /* 5rem (80px) vertical tablet */
  }
}

@media (min-width: 1024px) {
  .section {
    padding: var(--spacing-24) 0; /* 6rem (96px) vertical desktop */
  }
}

/* Text Utilities */
.text-center {
  text-align: center;
}

/* Navigation Utilities */
.navbar {
  display: flex;
  align-items: center;
  padding: var(--spacing-3) 0;
}

.navbar-dark {
  background-color: var(--color-primary-800);
  color: var(--color-neutral-white);
}

.navbar-brand {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  color: inherit;
}

.nav-item {
  display: block;
}

.nav-link {
  display: block;
  padding: var(--spacing-2) 0;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--transition-normal);
}

.nav-link:hover {
  opacity: 0.8;
}

/* Table Utilities */
.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-4);
}

.table th,
.table td {
  padding: var(--spacing-3);
  text-align: left;
  border-bottom: 1px solid var(--color-neutral-300);
}

.table th {
  font-weight: var(--font-weight-semibold);
  background-color: var(--color-neutral-100);
}

.table tbody tr:hover {
  background-color: var(--color-neutral-50);
}

/* ==============================================
   8. RESPONSIVE OVERRIDES - Mobile First
   ============================================== */

/* Large desktop: 1280px+ */
@media (min-width: 1280px) {
  /* Container max-width remains 1200px - no change needed */
  /* Typography and spacing already optimal at 1024px+ */
}

/* Extra large desktop: 1536px+ */
@media (min-width: 1536px) {
  /* Ultra-wide screen optimizations */
  /* Container max-width remains 1200px - intentional design constraint */
  /* Typography and spacing already optimal */
}

/* ============================================
   EXTRACT TO: components/sections/faq-section.css
   Lines: 1654-1828 (175 lines)
   Target User Story: US-011-005
   Component: FaqSection
   Description: FAQ accordion section with collapsible items and hover effects
   Dependencies: CSS variables from main.css
   ============================================ */