/**
 * Fadox Latin Design System
 * Modern unified design system - May 2025
 * Replaces multiple fragmented CSS files with a cohesive, elegant design
 */

/* ===== 1. CSS CUSTOM PROPERTIES (DESIGN TOKENS) ===== */
:root {
  /* === MODERN COLOR PALETTE === */
  /* Primary Brand Colors */
  --color-primary: #0f3d28;              /* Dark forest green */
  --color-primary-light: #1a5f3f;        /* Medium forest green */
  --color-primary-dark: #0a2a1c;         /* Very dark green */
  
  /* Secondary/Accent Colors */
  --color-gold: #c9a961;                 /* Refined gold */
  --color-gold-light: #d4b876;           /* Light gold for backgrounds */
  --color-gold-dark: #b8984c;            /* Dark gold for emphasis */
  
  /* Neutral Palette - Adjusted for brand consistency */
  --color-white: #ffffff;
  --color-gray-50: #f8f9fa;              /* Very light background */
  --color-gray-100: #f1f3f4;             /* Light background */
  --color-gray-200: #e8eaed;             /* Borders, dividers */
  --color-gray-300: #dadce0;             /* Disabled states */
  --color-gray-400: #9aa0a6;             /* Placeholder text */
  --color-gray-500: #5f6368;             /* Secondary text */
  --color-gray-600: #3c4043;             /* Primary text */
  --color-gray-700: #202124;             /* Headings */
  --color-gray-800: #1a1a1a;             /* Dark headings */
  --color-gray-900: #0f3d28;             /* Use brand dark green instead of gray */
  --color-black: #000000;
  
  /* Semantic Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  
  /* === TYPOGRAPHY === */
  --font-family-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-family-secondary: 'Inter', var(--font-family-primary);
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Font Sizes */
  --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 */
  
  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* === SPACING === */
  --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 */
  
  /* === LAYOUT === */
  --container-max-width: 1280px;
  --container-padding: var(--space-6);
  
  /* Header Heights */
  --header-height: 80px;
  --header-height-scrolled: 64px;
  --header-height-mobile: 60px;
  
  /* === BORDERS & RADIUS === */
  --border-width: 1px;
  --border-width-thick: 2px;
  --border-radius-sm: 0.375rem;    /* 6px */
  --border-radius-base: 0.5rem;    /* 8px */
  --border-radius-lg: 0.75rem;     /* 12px */
  --border-radius-xl: 1rem;        /* 16px */
  --border-radius-2xl: 1.5rem;     /* 24px */
  --border-radius-full: 9999px;    /* Fully rounded */
  
  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 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);
  
  /* === TRANSITIONS === */
  --transition-fast: 150ms ease-out;
  --transition-base: 250ms ease-out;
  --transition-slow: 350ms ease-out;
  --transition-spring: 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* === Z-INDEX === */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-toast: 700;
  --z-preloader: 99999;
}

/* ===== ACCESSIBILITY ===== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: 8px;
  z-index: 1000;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* ===== 2. RESET & BASE STYLES ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-gray-800);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Homepage specific body styles */
body.homepage {
  height: 100vh;
  overflow: hidden;
  background-color: #181818;
  color: #fffbe6;
}

/* Other pages maintain normal layout */
body:not(.homepage) {
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Remove default button styles */
button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

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

/* Remove default link underlines */
a {
  text-decoration: none;
  color: inherit;
}

/* Improve image defaults */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===== 3. UTILITY CLASSES ===== */

/* === LAYOUT === */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  width: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.col,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
  position: relative;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col { flex: 1 0 0%; }
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

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

.justify-content-between {
  justify-content: space-between;
}

.g-4 > * {
  padding: 0.75rem;
}

/* Medium screens and up */
@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Large screens and up */
@media (min-width: 992px) {
  .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Mobile responsive */
@media (max-width: 767px) {
  .col-md-4, .col-md-6, .col-md-8, .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ===== 6. FORM COMPONENTS ===== */
.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-gray-700);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--border-radius-base);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(26, 95, 63, 0.25);
}

.form-select {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-gray-700);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--border-radius-base);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(26, 95, 63, 0.25);
}

.form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
  margin-bottom: 0.125rem;
}

.form-check-input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.25rem;
  margin-left: -1.5rem;
  vertical-align: top;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check-label {
  color: var(--color-gray-700);
  margin-left: 0.5rem;
}

/* ===== 7. BUTTON COMPONENTS ===== */
.btn {
  display: inline-block;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: var(--border-radius-base);
  transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  border-color: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-lg {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: var(--border-radius-lg);
}

.d-grid {
  display: grid;
}

.d-grid .btn {
  width: 100%;
}

/* ===== 8. UTILITY CLASSES ===== */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

.me-2 { margin-right: 0.5rem; }
.me-3 { margin-right: 1rem; }

.lead {
  font-size: 1.25rem;
  font-weight: var(--font-weight-light);
  line-height: 1.5;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* ===== 9. RESPONSIVE UTILITIES ===== */
@media (max-width: 640px) {
  .container {
    padding: 0 1rem;
  }
  
  .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  
  .col,
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
  .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* === B2B PORTAL SPECIFIC COMPONENTS === */

/* Hero Section */
.hero-section {
  background: linear-gradient(
    135deg, 
    rgba(15, 61, 40, 0.9) 0%, 
    rgba(26, 95, 63, 0.8) 50%, 
    rgba(0, 0, 0, 0.7) 100%
  ), url('../images/services/global-trading.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.logo-section {
  text-align: center;
  margin-bottom: 2rem;
}

.logo-image {
  width: 120px;
  height: auto;
  margin: 0 auto 1rem auto;
  filter: brightness(1.1);
}

.logo-section h1 {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}

.logo-section p {
  font-size: 1.1rem;
  opacity: 0.9;
  font-weight: var(--font-weight-regular);
}

/* Badge Component */
.badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--border-radius-full);
}

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

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

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

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

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

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

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

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

.rounded-pill {
  border-radius: var(--border-radius-full) !important;
}

/* Features Section */
.features-section {
  padding: 3rem 0;
  background: var(--color-gray-50);
}

.feature-card {
  background: white;
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-base);
  border: 1px solid var(--color-gray-200);
  height: 100%;
  transition: all 0.3s ease;
}

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

.feature-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: white;
  font-size: 1.5rem;
}

/* Registration Section */
.registration-section {
  padding: 4rem 0;
  background: white;
}

.registration-form {
  background: white;
  padding: 3rem;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-gray-200);
}

.success-message {
  background: var(--color-success);
  color: white;
  padding: 1rem;
  border-radius: var(--border-radius-base);
  margin-bottom: 2rem;
  display: none;
}

/* Footer */
.footer {
  background: var(--color-primary-dark);
  color: var(--color-gold-light);
  padding: 4rem 0 2rem 0;
}

.footer a {
  color: var(--color-gold-light);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: var(--color-gold);
}

.footer h5 {
  color: var(--color-gold);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 1rem;
}

.footer-logo {
  width: 120px;
  height: auto;
  filter: brightness(1.2);
  transition: filter 0.3s ease;
}

.footer-logo:hover {
  filter: brightness(1.4);
}

.footer-tagline {
  font-size: 0.9rem;
  opacity: 0.9;
  line-height: 1.5;
}

.footer .fas {
  color: var(--color-gold);
  width: 16px;
}

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

.text-start {
  text-align: left;
}

.text-end {
  text-align: right;
}

.text-md-start {
  text-align: left;
}

.text-md-end {
  text-align: right;
}

.lead {
  font-size: 1.25rem;
  font-weight: var(--font-weight-light);
  line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-section {
    padding: 2rem 0;
  }
  
  .logo-section h1 {
    font-size: 2rem;
  }
  
  .logo-image {
    width: 100px;
  }
  
  .registration-form {
    padding: 2rem;
  }
  
  .footer {
    padding: 3rem 0 2rem 0;
  }
  
  .footer .col-md-4 {
    text-align: center !important;
  }
  
  .footer-logo {
    width: 100px;
    margin-bottom: 1rem;
  }
  
  .footer h5 {
    margin-top: 2rem;
  }
  
  .text-md-start,
  .text-md-end {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 1.5rem 0;
  }
  
  .logo-section h1 {
    font-size: 1.8rem;
  }
  
  .logo-image {
    width: 80px;
  }
  
  .registration-form {
    padding: 1.5rem;
  }
  
  .feature-card {
    padding: 1.5rem;
  }
  
  .feature-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  
  .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
  }
}

@media (max-width: 320px) {
  .container {
    padding: 0 1rem;
  }
  
  .logo-section h1 {
    font-size: 1.5rem;
  }
  
  .registration-form {
    padding: 1rem;
  }
  
  .feature-card {
    padding: 1rem;
  }
}

/* Page-specific body styles */
body {
  font-family: var(--font-family-primary);
  background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%);
  min-height: 100vh;
}

/* Enhanced form styles */
.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(26, 95, 63, 0.25);
}

.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(26, 95, 63, 0.25);
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border: none;
  border-radius: var(--border-radius-base);
  padding: 0.75rem 2rem;
  font-weight: var(--font-weight-semibold);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}

/* Loading State */
.loading {
  opacity: 0.7;
  pointer-events: none;
}

.loading::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 8px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Animation for success message */
.success-message {
  animation: slideIn 0.5s ease-out;
}

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

/* Enhanced feature cards */
.feature-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Enhanced logo hover effects */
.logo-image {
  transition: all 0.3s ease;
}

.logo-image:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

/* Enhanced button interactions */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

/* Enhanced form validation */
.form-control:invalid {
  border-color: var(--color-error);
}

.form-control:valid {
  border-color: var(--color-success);
}

/* Enhanced checkbox styles */
.form-check-input {
  cursor: pointer;
}

.form-check-label {
  cursor: pointer;
}

/* Enhanced mobile responsiveness */
@media (max-width: 576px) {
  .hero-section {
    padding: 1rem 0;
  }
  
  .hero-content {
    padding: 0 1rem;
  }
  
  .badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
  }
  
  .feature-icon {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
  
  .footer {
    padding: 2rem 0 1rem 0;
  }
  
  .footer-logo {
    width: 80px;
  }
}

/* Enhanced animations */
@media (prefers-reduced-motion: no-preference) {
  .hero-section {
    animation: fadeIn 1s ease-out;
  }
  
  .feature-card {
    animation: fadeInUp 0.6s ease-out;
  }
  
  .feature-card:nth-child(1) { animation-delay: 0.1s; }
  .feature-card:nth-child(2) { animation-delay: 0.2s; }
  .feature-card:nth-child(3) { animation-delay: 0.3s; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced accessibility */
.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;
}

/* Focus indicators */
.btn:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .hero-section {
    background: var(--color-primary-dark);
  }
  
  .feature-card {
    border: 2px solid var(--color-gray-400);
  }
  
  .btn-primary {
    border: 2px solid var(--color-primary);
  }
}

/* Print styles */
@media print {
  .hero-section {
    background: white;
    color: black;
    padding: 1rem 0;
  }
  
  .btn, .badge {
    display: none;
  }
  
  .footer {
    background: white;
    color: black;
  }
}

/* Form validation states */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
}

.form-check.is-invalid {
  border: 1px solid var(--color-error);
  border-radius: var(--border-radius-base);
  padding: 0.5rem;
  background-color: rgba(239, 68, 68, 0.1);
}

.toast.error {
  background: var(--color-error);
}

.toast.warning {
  background: var(--color-warning);
}

.toast.info {
  background: var(--color-info);
}

/* Enhanced floating labels */
.form-floating > .form-control,
.form-floating > .form-select {
  padding: 1rem 0.75rem;
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.form-floating > .form-control::placeholder {
  color: transparent;
}

.form-floating > .form-control:focus::placeholder {
  color: transparent;
}

.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  color: var(--color-gray-500);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

/* Enhanced button loading state */
.btn.loading {
  position: relative;
  color: transparent;
}

.btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Improved accessibility */
.form-control:focus-visible,
.form-select:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Enhanced responsive design */
@media (max-width: 576px) {
  .progress-bar {
    margin-bottom: 1.5rem;
  }
  
  .section-header {
    flex-direction: column;
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .section-icon {
    margin-bottom: 0.5rem;
    margin-right: 0;
  }
  
  .form-floating > .form-control,
  .form-floating > .form-select {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
  }
  
  .form-floating > label {
    padding: 0.8rem 0.75rem;
  }
  
  .btn-lg {
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .enhanced-form-section {
    background: var(--color-gray-800);
    color: var(--color-gray-100);
  }
  
  .form-control,
  .form-select {
    background: var(--color-gray-700);
    color: var(--color-gray-100);
    border-color: var(--color-gray-600);
  }
  
  .form-control:focus,
  .form-select:focus {
    background: var(--color-gray-700);
    color: var(--color-gray-100);
  }
  
  .checkbox-group {
    background: var(--color-gray-700);
  }
}

/* Force light inputs on portal forms */
.registration-form {
  color-scheme: light;
}

.registration-form .form-control,
.registration-form .form-select,
.registration-form .form-check-input {
  background-color: var(--color-white) !important;
  color: var(--color-gray-700) !important;
  border-color: var(--color-gray-300) !important;
}

/* Contextual help system */
.help-tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  margin-left: 0.5rem;
}

.help-tooltip .tooltip-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -5px;
  left: 125%;
  z-index: 1000;
  background: var(--color-gray-800);
  color: white;
  padding: 0.75rem;
  border-radius: var(--border-radius-base);
  font-size: 0.875rem;
  line-height: 1.4;
  width: 250px;
  box-shadow: var(--shadow-lg);
  transition: all 0.3s ease;
}

.help-tooltip:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
}

.help-tooltip .tooltip-content::before {
  content: '';
  position: absolute;
  top: 12px;
  left: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 5px 0;
  border-color: transparent var(--color-gray-800) transparent transparent;
}

/* Progress indicators */
.field-progress {
  width: 100%;
  height: 2px;
  background: var(--color-gray-200);
  margin-top: 0.5rem;
  border-radius: 1px;
  overflow: hidden;
}

.field-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-success) 100%);
  width: 0%;
  transition: width 0.3s ease;
}

/* Enhanced form steps */
.step-connector {
  position: absolute;
  top: 12px;
  left: calc(50% + 24px);
  right: calc(-50% + 24px);
  height: 2px;
  background: var(--color-gray-300);
  z-index: -1;
}

.step.completed .step-connector {
  background: var(--color-success);
}

.step-indicator {
  position: relative;
}

/* Smart form features */
.smart-suggestion {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--color-gray-300);
  border-top: none;
  border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
  box-shadow: var(--shadow-base);
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
}

.suggestion-item {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-gray-200);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.suggestion-item:hover {
  background: var(--color-gray-50);
}

.suggestion-item:last-child {
  border-bottom: none;
}

/* Enhanced animations */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

.enhanced-form-section {
  animation: slideInFromRight 0.3s ease-out;
}

.enhanced-form-section.slide-out {
  animation: slideOutToLeft 0.3s ease-out;
}

/* Smart field completion */
.completion-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 20px;
  height: 20px;
  background: var(--color-success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.form-floating.completed .completion-badge {
  opacity: 1;
}

/* Enhanced security indicators */
.security-indicator {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.security-level {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.25rem;
}

.security-level.weak {
  background: var(--color-error);
}

.security-level.medium {
  background: var(--color-warning);
}

.security-level.strong {
  background: var(--color-success);
}

/* Enhanced mobile experience */
@media (max-width: 768px) {
  .help-tooltip .tooltip-content {
    left: -200px;
    width: 200px;
  }
  
  .step-indicator {
    padding: 0 1rem;
  }
  
  .step {
    font-size: 0.8rem;
  }
  
  .step-number {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
  }
  
  .smart-suggestion {
    max-height: 150px;
  }
}

/* Print-friendly styles */
@media print {
  .step-indicator,
  .progress-bar,
  .help-tooltip,
  .btn {
    display: none;
  }
  
  .enhanced-form-section {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000;
  }
  
  .section-header {
    border-bottom: 1px solid #000;
  }
}

/* Form validation feedback */
.form-group.has-error .form-control {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-group.has-error .form-label {
    color: #dc3545;
}

.form-check.is-invalid {
    border: 1px solid #dc3545;
    border-radius: 4px;
    padding: 8px;
    background-color: rgba(220, 53, 69, 0.05);
}

.form-check.is-invalid .form-check-label {
    color: #dc3545;
}

/* Button states */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Loading state for buttons */
.btn.loading {
    position: relative;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Step validation feedback */
.step-content {
    position: relative;
}

.step-content.validating::before {
    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;
}

/* Improved select styling */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

.form-select:focus {
    border-color: #1A5F3F;
    box-shadow: 0 0 0 0.2rem rgba(26, 95, 63, 0.25);
}

.form-select.is-invalid {
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dc3545' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Checkbox and radio improvements */
.form-check-input:checked {
    background-color: #1A5F3F;
    border-color: #1A5F3F;
}

.form-check-input:focus {
    border-color: #1A5F3F;
    box-shadow: 0 0 0 0.2rem rgba(26, 95, 63, 0.25);
}

.form-check-input.is-invalid {
    border-color: #dc3545;
}

.form-check-input.is-invalid:checked {
    background-color: #dc3545;
    border-color: #dc3545;
}

/* Textarea improvements */
.form-control[rows] {
    resize: vertical;
    min-height: 120px;
}

.form-control[rows]:focus {
    min-height: 150px;
}

/* Progress bar enhancements */
.progress {
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    transition: width 0.3s ease;
    background: linear-gradient(90deg, #1A5F3F 0%, #2B7A56 100%);
}

/* Step indicators enhancements */
.step-indicator {
    transition: all 0.3s ease;
}

.step-indicator.active {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(26, 95, 63, 0.2);
}

.step-indicator.completed {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.step-indicator.completed::before {
    content: '✓';
    font-weight: bold;
}