/* MOBILE-FIRST PERFORMANCE OPTIMIZATIONS - Add at top of styles.css */

/* Mobile-first critical styles */
@media (max-width: 768px) {
  /* Hide unnecessary elements on mobile */
  .desktop-only,
  .animate__animated,
  .heavy-animation {
    display: none !important;
  }

  /* Mobile touch optimizations */
  button, a, .interactive-element {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
    min-height: 44px;
    min-width: 44px;
  }

  /* Mobile typography */
  body {
    font-size: 16px; /* Prevent iOS zoom */
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
  }

  /* Mobile hero section optimization */
  .hero, .hero-section {
    padding: 60px 20px 40px;
    min-height: 50vh;
  }

  .hero h1, .hero-section h1 {
    font-size: 1.8rem;
    line-height: 1.3;
    margin-bottom: 1rem;
  }

  .hero p, .hero-section p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
  }

  /* Mobile button optimization */
  .cta-button, .btn {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    margin: 10px 0;
    border-radius: 6px;
  }

  /* Mobile form optimization */
  input[type="text"],
  input[type="email"],
  textarea {
    font-size: 16px; /* Prevent iOS zoom */
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
  }

  /* Mobile container optimization */
  .container {
    padding: 15px;
    margin: 0 auto;
  }

  section {
    padding: 30px 0;
  }

  /* Mobile image optimization */
  img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
  }

  /* Mobile test cards */
  .test-card, .test-compact {
    margin: 15px 0;
    padding: 20px;
  }

  /* Mobile navigation improvements */
  #main-nav {
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Desktop optimizations */
@media (min-width: 769px) {
  /* Restore desktop features */
  .desktop-only {
    display: block !important;
  }

  /* Desktop hover effects */
  .hover-effect:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
  }

  /* Desktop typography */
  .hero h1, .hero-section h1 {
    font-size: 2.5rem;
  }

  .hero p, .hero-section p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 2rem;
  }
}

/* ==========================================================================
   Core Web Vitals Optimizations - FINAL VERSION
   ========================================================================== */

/* Image optimization */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent CLS from lazy-loaded images */
img[loading="lazy"] {
  min-height: 150px;
  background: #f5f5f5;
}

/* Section height reservations - CRITICAL FOR CLS */
.tests-section {
  min-height: 550px;
}

.blog-insights-section {
  min-height: 450px;
}

.blog-hero {
  min-height: 300px;
}

/* Grid stability */
.tests-grid {
  min-height: 400px;
}

.blog-grid {
  min-height: 350px;
}

/* Card containment */
.test-card,
.blog-card,
.personality-card {
  contain: layout style paint;
}

/* Font loading stability */
body {
  font-display: swap;
}

/* Touch optimization */
button, .cta-button, .btn {
  touch-action: manipulation;
  user-select: none;
  cursor: pointer;
  min-height: 44px;
}

button:focus, .cta-button:focus, .btn:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* Mobile: Remove reservations that cause white space */
@media (max-width: 768px) {
  .tests-section,
  .blog-insights-section,
  .blog-hero {
    min-height: auto !important;
  }

  .tests-grid,
  .blog-grid {
    min-height: auto !important;
  }
}
/* ==========================================================================
   Trait Path - Main Stylesheet
   Reorganized for better structure and maintainability
   ========================================================================== */

/* ==========================================================================
   Table of Contents:
   1. Base Styles and Variables
   2. Animations
   3. Header & Navigation
   4. Section Layout
   5. Hero Section
   6. Tests Section
   7. Expandable Sections
   8. About Section
   9. AI Approach Section
   10. Benefits Section
   11. FAQ Section
   12. Test Forms
   13. Progress Bar
   14. Instructions Panel
   15. Question Styling
   16. Choices Styling
   17. Submit Button
   18. Navigation Buttons
   19. Return Home Button
   20. Error Message
   21. Loading Spinner
   22. Results Container
   23. Action Buttons
   24. Step Indicator
   25. Email Collection Form
   26. Payment Form
   27. Notification Styles
   28. Career Questionnaire
   29. Premium Pitch
   30. Promo Grid
   31. Footer
   32. Scroll to top button
   33. Sample Reports Styles
   34. Mobile Menu & Responsive Styles
   35. Blog Section Styles
   36. Comment System Styles
   ========================================================================== */

/* ==========================================================================
   1. Base Styles and Variables
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

/* Font optimization for Font Awesome */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-display: swap;
}

:root {
  /* Color Palette */
  --primary: #0073e6;
  --primary-dark: #005bb5;
  --primary-rgb: 0, 115, 230;
  --secondary: #28a745;
  --secondary-dark: #218838;
  --accent: #f5a623;
  --text: #333;
  --text-light: #666;
  --gray-light: #f8f9fa;
  --gray-medium: #e9ecef;
  --white: #fff;
  --error: #dc3545;

  /* Common Values */
  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --transition: all 0.3s ease;

  /* Header height for scroll padding */
  --header-height: 70px;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  color: var(--text);
  background: linear-gradient(135deg, var(--gray-light), var(--gray-medium));
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Ensure body has no margin/padding that creates gap */
body.test-mode {
  margin: 0;
  padding: 0;
  padding-top: 60px; /* Account for fixed header height */
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

h1,
h2,
h3 {
  line-height: 1.3;
}

a {
  text-decoration: none;
  color: var(--primary);
  transition: var(--transition);
}

a:hover {
  color: var(--primary-dark);
}

ul {
  list-style: none;
}

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

button {
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  border: none;
  transition: var(--transition);
}

/* Utility Classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
}

/* Ensure the container starts right below header */
body.test-mode .container.test-mode {
  margin-top: 0;
  padding-top: 20px;
}

/* ==========================================================================
   2. Animations
   ========================================================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

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

@keyframes pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

/* ==========================================================================
   3. Header & Navigation
   ========================================================================== */
header {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  padding: 10px 5%;
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
  height: var(--header-height);
  width: 100%;
}

.header-minimized {
  padding: 5px 5% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  min-height: auto !important;
  height: auto !important;
}

.logo-container h1 {
  font-size: 1.5rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.5s ease;
}

.logo-container h1:hover {
  color: var(--primary-dark);
}

.logo-container i {
  font-size: 1.2rem;
}

.header-minimized .logo-container h1 {
  font-size: 1.2rem !important;
}

/* Mobile Menu Button */
#mobile-menu-btn {
  display: none;
  background: transparent;
  color: var(--primary);
  font-size: 1.3rem;
  padding: 5px;
  border-radius: var(--radius-sm);
  z-index: 10002;
}

#mobile-menu-btn:hover {
  background: rgba(0, 115, 230, 0.1);
}

#mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#mobile-menu-overlay.active {
  display: block;
  opacity: 1;
}

/* Navigation */
header nav {
  display: flex;
  align-items: center;
}

header nav ul {
  display: flex;
  gap: 15px;
}

.header-minimized nav ul {
  display: none !important;
}

header nav ul li a {
  font-weight: 500;
  color: var(--text);
  padding-bottom: 4px;
  position: relative;
  font-size: 0.9rem;
}

header nav ul li a:hover {
  color: var(--primary);
}

header nav ul li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.5s ease;
}

header nav ul li a:hover::after {
  width: 100%;
}

/* Test Mode Header */
.test-mode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--primary);
  color: white;
  padding: 12px 15px;
  z-index: 100;
  width: 100%;
  box-sizing: border-box;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin: 0; /* Ensure no margin */
}

/* Remove the menu-container styles since it won't exist */
.test-mode-header .menu-container {
  display: none;
}

/* Update logo container to ensure proper white text */
.test-mode-header .logo-container {
  display: flex;
  align-items: center;
  min-width: 50px;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
}

.test-mode-header .logo-container .site-logo {
  color: white !important;
  text-decoration: none;
}

.test-mode-header .logo-container .logo-text-container {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
}

.test-mode-header .logo-container .brain-icon,
.test-mode-header .logo-container .logo-text {
  color: white !important;
}

.test-mode-header .test-title-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: max-content;
  max-width: 60%;
}

/* Ensure test title has proper contrast */
.test-mode-header .test-title {
  color: white !important;
  font-size: 1.6rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.test-mode-header #mobile-menu-btn {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

/* ==========================================================================
   4. Section Layout
   ========================================================================== */
section {
  padding: 40px 0;
  margin-bottom: 15px;
  scroll-margin-top: var(--header-height);
}

section h2 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 30px;
  position: relative;
}

section h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  margin: 10px auto 0;
  border-radius: 2px;
  transition: width 0.5s ease;
}

section h2:hover::after {
  width: 80px;
}

/* ==========================================================================
   5. Hero Section
   ========================================================================== */
/* ==========================================================================
   5. Hero Section
   ========================================================================== */
.hero {
  background: linear-gradient(135deg, #0073e6, #10b981);
  color: var(--white);
  padding: 60px 20px;
  border-radius: var(--radius-lg);
  margin: 20px 0;
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: fadeIn 0.5s ease 0.2s forwards;
}

/* Neural Network Pattern Overlay */
.neural-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 40 599 102 382 127 80'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23FFFFFF'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

.hero.test-active {
  padding: 10px !important;
  margin: 5px 0 !important;
  min-height: auto !important;
  background: linear-gradient(135deg, #0073e6, #0056b3) !important;
}

.hero h1 {
  font-size: 2.2rem;
  margin-bottom: 15px;
  font-weight: 700;
  position: relative;
  z-index: 2;
}

.hero.test-active h1 {
  font-size: 1.5rem !important;
  margin: 0 !important;
  font-weight: 600 !important;
}

.hero-compact {
  padding: 30px 20px !important;
}

.page-title-container {
  text-align: center;
  padding: 1rem;
  border-radius: .5rem;
  margin: 1rem;
}

.hero .tagline {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 20px;
  opacity: 0.9;
  position: relative;
  z-index: 2;
}

.hero-cta {
  display: inline-block;
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  color: #0073e6;
  font-weight: 600;
  padding: 12px 30px;
  border-radius: 40px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  border: 2px solid transparent;
  text-decoration: none;
  margin-top: 20px;
}

.hero-cta:hover {
  transform: translateY(-3px);
  background: #ffffff;
  border-color: #10b981;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Launch Notice */
.launch-notice {
  background: linear-gradient(135deg, rgba(0, 115, 230, 0.1), rgba(16, 185, 129, 0.1));
  border-radius: 8px;
  padding: 15px;
  margin: 20px auto;
  max-width: 800px;
  text-align: center;
  border-left: 3px solid #0073e6;
}

.launch-notice h3 {
  color: #0073e6;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.launch-notice p {
  color: #333;
  margin-bottom: 0;
}

/* ===== PERFECTLY ALIGNED TEST CARDS ===== */

.tests-section {
    padding: 60px 0 10px;
    background: #f8fafc;
}

.tests-section .section-header {
    text-align: center;
    margin-bottom: 40px;
    display: block; /* Override generic flex display */
}

.tests-section .section-header h2 {
    font-size: 2.5rem;
    color: #334155;
    margin-bottom: 12px;
    font-weight: 700;
}

.tests-section .section-header p {
    font-size: 1.1rem;
    color: #64748b;
}

/* Flexible Grid - Adapts from 4 cards to 3 cards */
.tests-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* For larger screens, allow 4 columns if there's enough space */
@media (min-width: 1200px) {
    .tests-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1200px;
    }
}

/* Consistent Card Design - EXACT SAME HEIGHT FOR ALL */
.test-card {
    background: white;
    border-radius: 16px;
    border: 2px solid #e5e7eb; /* Consistent border for all cards */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: visible;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 420px; /* FIXED HEIGHT - ALL CARDS IDENTICAL */
}

.test-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Subtle Card Variations - Only background gradients */
.ifs-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.02), rgba(118, 75, 162, 0.01));
}

.comprehensive-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.02), rgba(16, 185, 129, 0.01));
}

/* Card Badges */
.card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.new-badge { background: linear-gradient(135deg, #667eea, #764ba2); }
.popular-badge { background: #ef4444; }
.premium-badge { background: #10b981; }

/* Card Header - CONSISTENT HEIGHT */
.card-header {
    padding: 30px 25px 20px;
    text-align: center;
    flex-shrink: 0;
    height: 140px; /* FIXED HEADER HEIGHT */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.test-icon {
    width: 55px;
    height: 55px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: white;
    margin: 0 auto 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ifs-icon { background: linear-gradient(135deg, #667eea, #764ba2); }
.comprehensive-icon { background: #10b981; }
.career-icon { background: #f59e0b; }

.card-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #334155;
    line-height: 1.3;
}

.card-subtitle {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* Card Body - FLEXIBLE HEIGHT TO PUSH BUTTONS TO SAME LEVEL */
.card-body {
    padding: 0 25px;
    flex-grow: 1; /* Takes remaining space */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 120px;
}

.test-meta {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: #64748b;
    padding: 4px 8px;
    background: #f1f5f9;
    border-radius: 8px;
    font-weight: 500;
}

.meta-item.free {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.meta-item.free-to-start {
    color: var(--primary);
    background: rgba(0, 115, 230, 0.1);
}

.meta-item i {
    font-size: 0.75rem;
}

/* Card Features */
.card-features {
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.6;
}

.feature-list li {
    margin-bottom: 4px;
}

/* IFS Specific Elements */
.parts-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.parts-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot.manager { background: #10b981; }
.dot.firefighter { background: #f59e0b; }
.dot.exile { background: #ef4444; }
.dot.self { background: #667eea; }

.unique-label {
    font-size: 0.75rem;
    color: #667eea;
    font-weight: 500;
    font-style: italic;
}


/* Card Footer - CRITICAL FOR BUTTON ALIGNMENT */
.card-footer {
    padding: 20px 25px 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    margin-top: auto; /* PUSHES TO BOTTOM */
    height: 80px; /* FIXED HEIGHT FOR PERFECT ALIGNMENT */
    justify-content: flex-end;
}

/* Single Button Footer (IFS Card) - SAME HEIGHT AS OTHERS */
.card-footer.single-button {
    padding: 20px 25px 25px;
    height: 80px; /* EXACT SAME HEIGHT */
    display: flex;
    align-items: flex-start; /* Aligns button to same position */
    justify-content: center;
}

/* Primary Buttons - PERFECTLY ALIGNED */
.btn-primary {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    text-align: center;
    height: 44px; /* SAME HEIGHT FOR ALL PRIMARY BUTTONS */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Learn More Link - Subtle and Clearly Different */
.learn-more-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  color: var(--primary);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  border: none;
  background: none;
  transition: all 0.3s ease;
  cursor: pointer;
  border-radius: 6px;
}

.learn-more-link:hover {
  background: rgba(0, 115, 230, 0.1);
  color: var(--primary-dark);
}

/* Button Colors */
.ifs-btn { background: linear-gradient(135deg, #667eea, #764ba2); }
.comprehensive-btn { background: #10b981; }
.career-btn { background: #f59e0b; }

.btn-primary:hover {
    transform: translateY(-1px);
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .tests-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .test-card {
        height: auto;
        min-height: 400px;
    }

    .card-header {
        padding: 25px 20px 15px;
        height: 130px;
    }

    .card-body {
        padding: 0 20px;
    }

    .card-footer,
    .card-footer.single-button {
        padding: 18px 20px 22px;
        height: 85px;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    /* Make badges smaller and less intrusive on mobile */
    .card-badge {
        top: 8px;
        right: 8px;
        padding: 4px 8px;
        font-size: 0.6rem;
        letter-spacing: 0.3px;
        border-radius: 8px;
    }
}

@media (max-width: 480px) {
    /* Even smaller badges for very small screens */
    .card-badge {
        top: 6px;
        right: 6px;
        padding: 3px 6px;
        font-size: 0.55rem;
        letter-spacing: 0.2px;
    }

    .card-header {
        height: 120px;
    }

    .card-footer,
    .card-footer.single-button {
        height: 80px;
    }
}

/* ===== END PERFECTLY ALIGNED TEST CARDS ===== */

/* ==========================================================================
   MODAL STYLES
   ========================================================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  overflow: hidden;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 700px;
  width: 90%;
  max-height: 85vh;
  height: auto;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  margin: auto;
}

.modal-overlay.active .modal-container {
  transform: scale(1);
}

.modal-header {
  padding: 25px 30px 0;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
}

.modal-header h2 {
  margin: 0 0 20px 0;
  color: var(--primary);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 5px;
  transition: all 0.3s ease;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text);
}

.modal-body {
  padding: 30px;
  overflow-y: auto;
  flex-grow: 1;
}

.modal-section {
  margin-bottom: 30px;
}

.modal-section:last-child {
  margin-bottom: 0;
}

.modal-section h3 {
  margin: 0 0 15px 0;
  color: var(--primary);
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}

.modal-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.4;
}

.modal-features-list i {
  color: var(--primary);
  font-size: 0.9rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.modal-sample-preview {
  background: linear-gradient(135deg, #f8f9fa, #f0f4ff);
  padding: 20px;
  border-radius: 10px;
  border-left: 4px solid var(--primary);
  margin: 20px 0;
}

.modal-sample-preview h4 {
  margin: 0 0 12px 0;
  color: var(--primary);
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-sample-preview blockquote {
  margin: 0;
  padding: 0;
  font-style: italic;
  color: var(--text-light);
  font-size: 0.9rem;
  line-height: 1.5;
  border: none;
}

.modal-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.modal-detail-item {
  background: var(--white);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  text-align: center;
}

.modal-detail-item i {
  color: var(--primary);
  font-size: 1.5rem;
  margin-bottom: 8px;
  display: block;
}

.modal-detail-item strong {
  display: block;
  color: var(--text);
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.modal-detail-item span {
  color: var(--text-light);
  font-size: 0.85rem;
}

.modal-footer {
  padding: 20px 30px;
  border-top: 1px solid #e9ecef;
  background: #f8f9fa;
  flex-shrink: 0;
}

.modal-cta-button {
  width: 100%;
  padding: 16px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--white);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(0, 115, 230, 0.2);
}

.modal-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 115, 230, 0.3);
}

/* Premium Modal Styling */
.modal-overlay.premium .modal-header h2,
.modal-overlay.premium .modal-section h3,
.modal-overlay.premium .modal-sample-preview h4,
.modal-overlay.premium .modal-sample-preview {
  color: #10b981;
  border-left-color: #10b981;
}

.modal-overlay.premium .modal-features-list i,
.modal-overlay.premium .modal-detail-item i {
  color: #10b981;
}

.modal-overlay.premium .modal-cta-button {
  background: linear-gradient(135deg, #10b981, #0e9a6e);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.modal-overlay.premium .modal-cta-button:hover {
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

/* Mobile Modal Centering Fix */
@media (max-width: 768px) {
  /* Ensure body doesn't interfere with overlay */
  body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Force absolute full screen coverage */
    width: 100vw;
    height: 100vh;
    min-width: 100vw;
    min-height: 100vh;
    max-width: 100vw;
    max-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 66px;
    margin: 0;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;

    /* Ensure it's above everything */
    isolation: isolate;
  }

  .modal-container {
    /* Reset positioning completely */
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0;
    transform: none;

    /* Responsive sizing for perfect proportions */
    width: calc(100vw - 132px);
    max-width: 420px;
    min-width: 280px;
    height: auto;
    max-height: calc(100vh - 132px);
    min-height: auto;

    /* Styling */
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;

    /* Flexbox for content */
    display: flex;
    flex-direction: column;
  }

  /* Content sections with optimized spacing */
  .modal-header {
    padding: 16px 16px 0 16px;
    flex-shrink: 0;
  }

  .modal-body {
    padding: 16px;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: #bbb transparent;
  }

  .modal-body::-webkit-scrollbar {
    width: 6px;
  }

  .modal-body::-webkit-scrollbar-track {
    background: transparent;
  }

  .modal-body::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 3px;
  }

  .modal-body::-webkit-scrollbar-thumb:hover {
    background: #999;
  }

  .modal-footer {
    padding: 0 16px 16px 16px;
    flex-shrink: 0;
  }

  /* Content optimizations */
  .modal-header h2 {
    font-size: 1.4rem;
    margin-bottom: 16px;
  }

  .modal-section {
    margin-bottom: 20px;
  }

  .modal-features-list {
    grid-template-columns: 1fr;
    gap: 8px 15px;
  }

  .modal-details-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

/* Smaller mobile devices */
@media (max-width: 480px) {
  .modal-overlay {
    padding: 55px;
    /* Double-ensure full coverage on small screens */
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
  }

  .modal-container {
    width: calc(100vw - 110px);
    max-width: none;
    max-height: calc(100vh - 110px);
    border-radius: 12px;
  }

  .modal-header {
    padding: 14px 14px 0 14px;
  }

  .modal-body {
    padding: 14px;
    max-height: calc(100vh - 150px);
  }

  .modal-footer {
    padding: 0 14px 14px 14px;
  }

  .modal-header h2 {
    font-size: 1.3rem;
  }

  .modal-section h3 {
    font-size: 1.1rem;
  }

  .modal-features-list li {
    font-size: 0.85rem;
  }
}

/* Very small devices */
@media (max-width: 360px) {
  .modal-overlay {
    padding: 45px;
    /* Triple-ensure full coverage on very small screens */
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
  }

  .modal-container {
    width: calc(100vw - 90px);
    max-height: calc(100vh - 90px);
    border-radius: 8px;
  }

  .modal-header {
    padding: 12px 12px 0 12px;
  }

  .modal-body {
    padding: 12px;
    max-height: calc(100vh - 120px);
  }

  .modal-footer {
    padding: 0 12px 12px 12px;
  }

  .modal-header h2 {
    font-size: 1.2rem;
  }

  .modal-cta-button {
    padding: 14px 20px;
    font-size: 0.9rem;
  }
}

/* Responsive Cards */
@media (max-width: 992px) {
  .tests {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
  }

  .test-compact {
    padding: 25px;
  }
}

@media (max-width: 768px) {
  .tests-section {
    padding: 60px 20px;
  }

  .tests-section h2 {
    font-size: 2rem;
  }

  .tests {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .test-compact {
    padding: 20px;
  }

  .test-info-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .test-price {
    align-self: flex-end;
  }
}

@media (max-width: 480px) {
  .test-compact {
    padding: 15px;
  }

  .test-icon {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

  .test-compact h3 {
    font-size: 1.2rem;
  }

  .premium-badge,
  .popular-badge {
    font-size: 0.7rem;
    padding: 3px 8px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .modal-overlay,
  .modal-container,
  .test-compact,
  .test-cta-button {
    transition: none;
    animation: none;
  }

  .popular-badge {
    animation: none;
  }
}
/* Additional Modal Enhancements */

/* Smooth backdrop blur animation */
.modal-overlay {
  backdrop-filter: blur(0px);
  transition: all 0.3s ease, backdrop-filter 0.3s ease;
}

.modal-overlay.active {
  backdrop-filter: blur(4px);
}

/* Focus trap styling */
.modal-container:focus-within {
  outline: none;
}

/* Modal scroll improvements */
.modal-body::-webkit-scrollbar {
  width: 6px;
}

.modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Modal loading state */
.modal-container.loading {
  pointer-events: none;
  opacity: 0.7;
}

.modal-container.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Enhanced focus indicators */
.learn-more-link:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.test.premium .learn-more-link:focus {
  outline-color: var(--secondary);
}



/* Print styles for modal content */
@media print {
  .modal-overlay {
    position: static;
    background: none;
    backdrop-filter: none;
  }

  .modal-container {
    box-shadow: none;
    transform: none;
    max-height: none;
    overflow: visible;
  }

  .modal-close {
    display: none;
  }
}
/* ==========================================================================
   7. Expandable Sections - Improved Layout
   ========================================================================== */
.expandable-content-section {
  padding: 60px 0;
  margin-bottom: 30px;
  background: linear-gradient(135deg, rgba(0, 115, 230, 0.03), rgba(16, 185, 129, 0.03));
}

.expandable-content-section h2 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 40px;
  position: relative;
}

.expandable-content-section h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  margin: 10px auto 0;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.expandable-sections-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.expandable-section {
  margin-bottom: 20px;
  border-radius: var(--radius-lg);
  background-color: var(--white);
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.expandable-section:hover {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.section-header {
  padding: 22px 25px;
  background-color: var(--white);
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  border-bottom: 1px solid var(--gray-medium);
  transition: background-color 0.3s ease;
}

.expandable-section.expanded .section-header {
  border-bottom-color: transparent;
  background-color: rgba(0, 115, 230, 0.03);
}

.section-header i {
  font-size: 1.6rem;
  color: var(--primary);
  margin-right: 18px;
  transition: transform 0.3s ease;
}

.expandable-section.expanded .section-header i {
  transform: scale(1.1);
}

.section-header h3 {
  flex: 1;
  margin: 0;
  font-size: 1.3rem;
  color: var(--text);
  font-weight: 600;
  transition: color 0.3s ease;
}

.expandable-section:hover .section-header h3 {
  color: var(--primary);
}

.toggle-icon {
  color: var(--primary);
  transition: transform 0.3s ease;
}

.expandable-section.expanded .toggle-icon i {
  transform: rotate(180deg);
}

.section-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  opacity: 0;
  padding: 0 25px;
}

.expandable-section.expanded .section-content {
  max-height: 2000px;
  opacity: 1;
  padding: 25px;
}

/* Process Steps - New Component */
.process-steps {
  margin: 30px 0;
}

.process-step {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;
  padding-left: 10px;
}

.process-step .step-number {
  background: var(--primary);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.1rem;
  margin-right: 15px;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0, 115, 230, 0.25);
}

.process-step .step-content {
  flex: 1;
}

.process-step h4 {
  margin: 0 0 8px 0;
  font-size: 1.15rem;
  color: var(--primary);
}

.process-step p {
  margin: 0;
  color: var(--text-light);
}

/* About Section Improvements */
.about-content {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.about-text {
  flex: 3;
  min-width: 280px;
}

.about-text > p {
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 25px;
  line-height: 1.6;
}

.about-stats {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 220px;
}

.stat-box {
  background: white;
  padding: 20px;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
  border-left: 4px solid var(--primary);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.stat-box:nth-child(2) {
  border-left-color: var(--secondary);
}

.stat-box:nth-child(3) {
  border-left-color: var(--accent);
}

.stat-box:nth-child(1) .stat-number {
  color: var(--primary);
}

.stat-box:nth-child(2) .stat-number {
  color: var(--secondary);
}

.stat-box:nth-child(3) .stat-number {
  color: var(--accent);
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1;
}

.stat-label {
  font-size: 1rem;
  color: var(--text);
  font-weight: 500;
}

/* AI Approach Section Improvements */
.ai-approach-content {
  display: flex;
  gap: 40px;
  align-items: center;
}

.ai-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 180px;
  max-width: 220px;
}

.ai-image {
  font-size: 7rem;
  color: var(--primary);
  transition: transform 0.5s ease, color 0.5s ease;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ai-image:hover {
  transform: scale(1.05);
  color: var(--secondary);
}

.ai-text {
  flex: 3;
  min-width: 280px;
}

.ai-text > p {
  margin-bottom: 25px;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1.6;
}

.ai-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ai-feature {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  background: white;
  padding: 20px;
  border-radius: var(--radius-md);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ai-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
}

.ai-feature:nth-child(1) {
  border-left: 4px solid var(--primary);
}

.ai-feature:nth-child(2) {
  border-left: 4px solid var(--secondary);
}

.ai-feature:nth-child(3) {
  border-left: 4px solid var(--accent);
}

.ai-feature i {
  font-size: 2rem;
  color: var(--primary);
  margin-top: 5px;
  flex-shrink: 0;
}

.ai-feature:nth-child(2) i {
  color: var(--secondary);
}

.ai-feature:nth-child(3) i {
  color: var(--accent);
}

.ai-feature h4 {
  margin: 0 0 8px 0;
  font-size: 1.15rem;
  color: var(--text);
}

.ai-feature p {
  margin: 0;
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Science Reference Styling */
.science-reference {
  margin-top: 30px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(0, 115, 230, 0.05), rgba(16, 185, 129, 0.05));
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-start;
  gap: 15px;
  border-left: 4px solid #6c5ce7;
}

.science-reference i {
  font-size: 1.8rem;
  color: #6c5ce7;
  flex-shrink: 0;
}

.science-reference p {
  margin: 0 !important;
  font-size: 0.95rem !important;
  color: var(--text) !important;
}

/* Benefits Section Improvements */
.benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.benefit {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

.benefit-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, rgba(0, 115, 230, 0.1), rgba(16, 185, 129, 0.1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: transform 0.5s ease;
}

.benefit:hover .benefit-icon {
  transform: scale(1.1) rotate(5deg);
}

.benefit-icon i {
  font-size: 2.2rem;
  color: var(--primary);
}

.benefit:nth-child(2) .benefit-icon i {
  color: var(--secondary);
}

.benefit:nth-child(3) .benefit-icon i {
  color: var(--accent);
}

.benefit h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: var(--text);
}

.benefit p {
  color: var(--text-light);
  font-size: 1rem;
  line-height: 1.6;
}

/* FAQ Section Improvements - Fixed Expansion */
.faq-items {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: 15px;
  border-radius: var(--radius-md);
  overflow: visible; /* Changed from hidden to allow content to fully expand */
  background: white;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
}

.faq-question {
  padding: 18px 20px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  font-size: 1.1rem;
  color: var(--text);
  transition: color 0.3s ease;
  background: rgba(0, 115, 230, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-question:hover {
  color: var(--primary);
}


.faq-question.active {
  color: var(--primary);
  border-bottom: 1px solid rgba(0, 115, 230, 0.1);
}

.faq-question.active::after {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden; /* This handles the collapse effect */
  opacity: 0;
  transition: all 0.4s ease;
  color: var(--text-light);
  font-size: 1rem;
  line-height: 1.6;
}

.faq-answer.active {
  padding: 20px;
  max-height: none; /* Changed from fixed px to none, allowing full expansion */
  opacity: 1;
}


/* Additional helper classes to ensure proper expansion */
.faq-section.expanded .faq-items {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.expandable-section.expanded {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.expandable-section.expanded .section-content {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

#faq-section.expandable-section.expanded {
  overflow: visible !important;
  height: auto !important;
}

.faq-item.active {
  height: auto !important;
  overflow: visible !important;
}

/* These ensure visibility of nested expansions */
.faq-answer.active {
  overflow: visible !important;
  height: auto !important;
}

/* Responsive Design - Expandable Sections */
@media (max-width: 992px) {
  .about-content,
  .ai-approach-content {
    flex-direction: column;
  }

  .about-stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
  }

  .stat-box {
    flex: 1;
    min-width: 180px;
  }

  .ai-visual {
    max-width: none;
    margin-bottom: 20px;
  }

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

@media (max-width: 768px) {
  .expandable-content-section {
    padding: 40px 0;
  }

  .expandable-content-section h2 {
    font-size: 1.8rem;
  }

  .section-header {
    padding: 18px 20px;
  }

  .section-header i {
    font-size: 1.4rem;
    margin-right: 12px;
  }

  .section-header h3 {
    font-size: 1.1rem;
  }

  .process-step {
    margin-bottom: 20px;
  }

  .process-step .step-number {
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
  }

  .process-step h4 {
    font-size: 1.05rem;
  }

  .benefits {
    grid-template-columns: 1fr;
  }

  .benefit {
    padding: 25px;
  }

  .benefit-icon {
    width: 60px;
    height: 60px;
  }

  .benefit-icon i {
    font-size: 1.8rem;
  }

  .benefit h3 {
    font-size: 1.2rem;
  }

  .faq-question {
    font-size: 1rem;
    padding: 15px;
  }

  .faq-answer.active {
    padding: 15px;
  }

  .science-reference {
    padding: 15px;
    margin-top: 25px;
  }

  .science-reference i {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .expandable-section {
    margin-bottom: 15px;
  }

  .stat-box {
    min-width: 100%;
  }

  .process-step {
    flex-direction: column;
    align-items: flex-start;
  }

  .process-step .step-number {
    margin-bottom: 10px;
  }

  .ai-feature {
    flex-direction: column;
  }

  .ai-feature i {
    margin-bottom: 10px;
  }

  .science-reference {
    flex-direction: column;
  }

  .science-reference i {
    margin-bottom: 10px;
  }
}

/* ==========================================================================
   12. Test Forms
   ========================================================================== */
.personality-test,
.comprehensive-test,
.career-test {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 5px;
  box-shadow: var(--shadow-md);
  margin: 0 auto 5px;
  max-width: 900px;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

/* ==========================================================================
   13. Progress Bar
   ========================================================================== */
.progress-bar-container {
  width: 100%;
  height: 4px;
  background: var(--gray-medium);
  border-radius: 3px;
  margin: 5px 0;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transition: width 0.5s ease;
  border-radius: 3px;
}

/* ==========================================================================
   14. Instructions Panel
   ========================================================================== */
.instructions-panel {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 30px;
  max-width: 800px;
  margin: 20px auto;
  font-family: "Poppins", sans-serif;
}

.instructions-header {
  margin-bottom: 25px;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 15px;
  text-align: center;
}

.instructions-header h3 {
  color: var(--primary);
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.instructions-header h3 i {
  margin-right: 10px;
}

.instructions-header p {
  color: #666;
  font-size: 1.1rem;
  margin: 0;
}

.instructions-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 25px;
}

.instruction-step {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  transition: transform 0.3s ease;
}

.instruction-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.step-number {
  background: var(--primary);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-content h4 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  color: #333;
  font-weight: 600;
}

.step-content p {
  margin: 0;
  color: #555;
  font-size: 1rem;
  line-height: 1.5;
}

.instructions-footer {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #eaeaea;
  text-align: center;
}

.instructions-footer p {
  color: #666;
  font-size: 1rem;
  margin-bottom: 20px;
}

.start-test-button {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 5px;
  padding: 12px 30px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.start-test-button:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 115, 230, 0.2);
}

/* ==========================================================================
   15. Question Styling
   ========================================================================== */
.question {
  background: var(--white);
  padding: 25px 25px 80px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin: 0 auto 15px;
  width: 95%;
  max-width: 800px;
  min-height: 400px;
  position: relative;
  display: none;
  overflow: visible;
}

.question.active {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.5s ease forwards;
}

.question p {
  text-align: center;
  font-size: 1.7rem;
  margin: 0 0 30px 0;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--gray-medium);
}

/* ==========================================================================
   16. Choices Styling
   ========================================================================== */
.choices-container {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 15px;
  max-width: 700px;
  margin: 0 auto;
}

.choices {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: nowrap;
  width: 100%;
}

.choices button {
  min-width: 120px;
  max-width: 120px;
  height: 50px;
  text-align: center;
  background-color: var(--white);
  color: var(--text);
  border: 2px solid var(--gray-medium);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.choices button:hover {
  background-color: var(--gray-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.choices button.selected {
  background-color: var(--primary);
  color: var(--white);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.choices button.disagree-choice {
  border-left: 3px solid #dc3545;
}

.choices button.agree-choice {
  border-left: 3px solid #28a745;
}

/* ==========================================================================
   17. Submit Button
   ========================================================================== */
.submit-button {
  background: var(--secondary);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  width: 180px;
  text-align: center;
  border: 2px solid var(--secondary);
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

.submit-button:hover {
  background: var(--secondary-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.submit-button:disabled {
  background: var(--gray-medium);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  border-color: var(--gray-medium);
}

/* ==========================================================================
   18. Navigation Buttons
   ========================================================================== */
.navigation-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
  height: 60px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.navigation-buttons::before,
.navigation-buttons::after {
  content: "";
  width: 45px;
  display: block;
  opacity: 0;
}

.navigation-buttons button {
  background: var(--primary);
  color: var(--white);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  width: 100px;
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  transition: all 0.3s ease;
}

.navigation-buttons button:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.navigation-buttons button:disabled {
  background: var(--gray-light);
  color: var(--gray-medium);
  border-color: var(--gray-medium);
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
  box-shadow: none;
}

/* ==========================================================================
   19. Return Home Button
   ========================================================================== */
.error-message {
  text-align: center;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 1rem 0;
}

.retry-button {
  background: #007bff;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 1rem;
}

.loading-questions {
  text-align: center;
  padding: 2rem;
  font-style: italic;
  color: #666;
}

.return-home-button {
  position: fixed;
  bottom: 10px;
  right: 15px;
  z-index: 110;
  width: 40px;
  height: 40px;
  background-color: var(--primary);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  animation: fadeInScale 0.5s ease 0.5s forwards;
}

.return-home-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.return-home-button i {
  font-size: 1.3rem;
}

body.test-mode .return-home-button {
  display: none !important;
}

/* ==========================================================================
   20. Error Message
   ========================================================================== */
.error-message {
  background-color: #f8d7da;
  color: #721c24;
  padding: 12px;
  border-radius: var(--radius-md);
  margin-bottom: 15px;
  text-align: center;
  border-left: 5px solid #f5c6cb;
  opacity: 0;
  animation: slideDown 0.5s ease forwards;
}

/* ==========================================================================
   21. Loading Spinner
   ========================================================================== */
.spinner-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

.spinner-content {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 450px;
  width: 90%;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid var(--gray-medium);
  border-top: 5px solid var(--primary);
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
  margin: 0 auto 20px;
}

.spinner-heading {
  color: var(--primary);
  font-size: 1.4rem;
  margin: 0 0 15px 0;
  font-weight: 600;
}

.spinner-text {
  color: var(--text);
  font-size: 1rem;
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.spinner-subtext {
  color: var(--text-light);
  font-size: 0.9rem;
  margin: 0 0 20px 0;
}

.spinner-progress {
  padding: 10px;
  border-top: 1px solid var(--gray-medium);
  margin-top: 10px;
}

.progress-indicator {
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 500;
  animation: pulse 2s infinite;
}

/* ==========================================================================
   22. Results Container
   ========================================================================== */
.results-container {
  background: var(--white);
  padding: 25px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: left;
  max-width: 700px;
  margin: 0 auto;
  max-height: 80vh;
  overflow-y: auto;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

.results-header {
  text-align: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--gray-medium);
}

.results-header h2 {
  color: var(--text);
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.results-subtitle {
  color: var(--text-light);
  font-size: 1rem;
}

.analysis-section {
  background: var(--gray-light);
  padding: 20px;
  margin-bottom: 15px;
  border-radius: var(--radius-md);
  border-left: 5px solid var(--primary);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.analysis-section:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.analysis-section h3 {
  color: var(--primary);
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.section-content {
  color: var(--text);
  line-height: 1.6;
}

.section-content p {
  margin: 8px 0;
  padding-left: 15px;
  position: relative;
  font-size: 0.9rem;
}

.section-content p:before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: bold;
}

/* Section variants */
.section-0 {
  border-left: 5px solid #0073e6;
}
.section-1 {
  border-left: 5px solid #28a745;
}
.section-2 {
  border-left: 5px solid #f5a623;
}
.section-3 {
  border-left: 5px solid #6c5ce7;
}

/* ==========================================================================
   23. Action Buttons
   ========================================================================== */
.action-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 25px;
  padding-top: 15px;
  border-top: 2px solid var(--gray-medium);
}

.action-buttons button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--white);
  transition: all 0.3s ease;
}

.action-buttons .print-button {
  background: var(--primary);
}

.action-buttons .email-button {
  background: var(--secondary);
}

.action-buttons .restart-button {
  background: #6c757d;
}

.action-buttons button:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   24. Step Indicator
   ========================================================================== */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70px;
}

.step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--gray-medium);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: 5px;
  transition:
    background-color 0.5s ease,
    color 0.5s ease;
}

.step.active .step-number {
  background-color: var(--primary);
  color: var(--white);
}

.step.completed .step-number {
  background-color: var(--secondary);
  color: var(--white);
}

.step-connector {
  flex-grow: 1;
  height: 2px;
  background-color: var(--gray-medium);
  max-width: 50px;
  transition: background-color 0.5s ease;
}

.step-label {
  font-size: 0.8rem;
  color: var(--text-light);
}

.step.active .step-label {
  color: var(--primary);
  font-weight: 500;
}

/* ==========================================================================
   25. Email Collection Form
   ========================================================================== */
.email-collection-form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-md);
  max-width: 500px;
  margin: 30px auto;
  text-align: center;
  border-top: 5px solid var(--primary);
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

.email-collection-form h3 {
  font-size: 1.6rem;
  margin-bottom: 12px;
  color: var(--primary);
}

.email-collection-form p {
  color: var(--text-light);
  margin-bottom: 20px;
  font-size: 1rem;
}

.email-collection-form .form-group {
  margin-bottom: 15px;
  text-align: left;
}

.email-collection-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

.email-collection-form input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--gray-medium);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  transition:
    border-color 0.5s ease,
    box-shadow 0.5s ease;
}

.email-collection-form input[type="email"]:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.2);
}

.email-collection-form input[type="email"].error {
  border-color: #dc3545;
}

.email-collection-form .consent-checkbox {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  text-align: left;
}

.email-collection-form .consent-checkbox input {
  margin-top: 5px;
  margin-right: 8px;
}

.email-collection-form .consent-checkbox label {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.4;
}

.email-collection-form .submit-email-button {
  background: var(--primary);
  color: var(--white);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1rem;
  width: 100%;
  margin-top: 8px;
  border: none;
  transition: all 0.3s ease;
}

.email-collection-form .submit-email-button:hover {
  background: var(--primary-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.email-collection-form .submit-email-button:disabled {
  background: var(--gray-medium);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ==========================================================================
   26. Payment Form
   ========================================================================== */
.payment-form-container {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-md);
  max-width: 500px;
  margin: 30px auto;
  text-align: center;
  border-top: 5px solid var(--secondary);
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

.payment-form-container h3 {
  font-size: 1.6rem;
  margin-bottom: 12px;
  color: var(--secondary);
}

.payment-form-container p {
  color: var(--text-light);
  margin-bottom: 20px;
  font-size: 1rem;
}

.payment-test-name {
  font-weight: 600;
  margin-bottom: 25px;
}

/* Card element styling */
.card-element-container {
  border: 2px solid var(--gray-medium);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 15px;
  background: var(--gray-light);
  transition: border-color 0.5s ease;
}

.card-element-container label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-light);
  font-size: 0.9rem;
  text-align: left;
}

#card-element {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid var(--gray-medium);
  transition: all 0.3s ease;
}

#card-element:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 115, 230, 0.2);
}

/* Payment details section */
.payment-details {
  margin-bottom: 20px;
  padding: 12px;
  background: var(--gray-light);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--secondary);
  text-align: left;
}

.payment-email {
  font-size: 0.9rem;
  color: var(--text-light);
}

.payment-email p {
  margin: 0;
}

.payment-security-note {
  margin-top: 20px;
  font-size: 0.85rem;
  color: var(--text-light);
  display: flex;
  justify-content: center;
  align-items: center;
}

.payment-security-note i {
  margin-right: 8px;
  color: var(--secondary);
}

.payment-note {
  margin-top: 25px;
  padding: 12px;
  border-top: 1px solid var(--gray-medium);
  font-size: 0.85rem;
  color: var(--text-light);
}

/* Payment button */
.payment-form-container .payment-button {
  background: var(--secondary);
  color: var(--white);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1rem;
  width: 100%;
  margin-top: 8px;
  border: none;
  transition: all 0.3s ease;
}

.payment-form-container .payment-button:hover {
  background: var(--secondary-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.payment-form-container .payment-button:disabled {
  background: var(--gray-medium);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Processing indicator */
.payment-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
  min-height: 70px;
}

.payment-spinner {
  border: 3px solid var(--gray-light);
  border-top: 3px solid var(--secondary);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
  margin-bottom: 8px;
}

/* Error container */
.payment-error-container {
  max-width: 500px;
  margin: 30px auto;
  padding: 30px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  border-top: 5px solid var(--error);
}

.payment-error-container h3 {
  color: var(--error);
  margin-top: 0;
  margin-bottom: 16px;
}

.payment-error-container p {
  margin-bottom: 24px;
  color: var(--text-light);
}

/* Buttons for error handling */
.retry-button,
.continue-anyway-button {
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  margin: 0 8px;
  transition: all 0.3s ease;
}

.retry-button {
  background: var(--secondary);
  color: var(--white);
  border: none;
}

.continue-anyway-button {
  background: transparent;
  color: var(--text-light);
  border: 1px solid var(--gray-medium);
}

.retry-button:hover {
  background: var(--secondary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.continue-anyway-button:hover {
  background: var(--gray-light);
}

/* Mock Stripe UI for development/testing */
.mock-card-element {
  height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--gray-medium);
  border-radius: var(--radius-md);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  position: relative;
  transition: border-color 0.3s;
}

.mock-card-element:hover {
  border-color: var(--secondary);
}

.mock-card-element:before {
  content: "●●●● ●●●● ●●●● ●●●●";
  display: inline-block;
  margin-right: 10px;
  letter-spacing: 2px;
}

.mock-card-element:after {
  content: "01/26 - 123";
  display: inline-block;
  position: absolute;
  right: 12px;
  opacity: 0.7;
}

/* ==========================================================================
   Promo Code Section
   ========================================================================== */
.promo-code-section {
  margin: 20px 0;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.promo-code-section label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}

.promo-code-input-group {
  display: flex;
  gap: 8px;
}

.promo-code-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 0.95rem;
  text-transform: uppercase;
  transition: border-color 0.3s ease;
}

.promo-code-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.promo-code-input:disabled {
  background: #e9ecef;
  cursor: not-allowed;
}

.apply-promo-button {
  padding: 10px 20px;
  background: var(--secondary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.apply-promo-button:hover:not(:disabled) {
  background: var(--secondary-dark);
  transform: translateY(-1px);
}

.apply-promo-button:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
}

.promo-message {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  display: none;
}

.promo-message.success {
  display: block;
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.promo-message.error {
  display: block;
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.payment-test-name .original-price {
  transition: all 0.3s ease;
}

.final-price {
  transition: all 0.3s ease;
}

/* ==========================================================================
   27. Notification Styles
   ========================================================================== */
.success-notification,
.error-notification {
  position: fixed;
  bottom: 15px;
  right: 15px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  max-width: 80%;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.5s ease forwards;
}

.success-notification {
  background-color: var(--secondary);
  color: var(--white);
}

.error-notification {
  background-color: #dc3545;
  color: var(--white);
}

/* ==========================================================================
   28. Career Questionnaire
   ========================================================================== */
.career-questionnaire {
  font-family: "Poppins", sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.questionnaire-header {
  margin-bottom: 2rem;
  text-align: center;
}

.questionnaire-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.questionnaire-title h2 {
  margin: 0;
  font-size: 1.75rem;
  color: var(--primary);
}

.questionnaire-subtitle {
  margin: 0.5rem 0 1.5rem;
  color: var(--text-light);
  font-size: 1rem;
}

.optional-tag,
.optional-badge {
  background-color: #f3f4f6;
  color: #4b5563;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.optional-badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 0 0.5rem 0 0.5rem;
  font-size: 0.75rem;
}

.intro-buttons {
  text-align: center;
  margin: 1.5rem auto;
  width: 100%;
}

.intro-button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 220px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 0 0.5rem;
}

.take-btn {
  background-color: var(--primary);
  border: none;
  color: white;
}

.take-btn:hover {
  background-color: var(--primary-dark);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.skip-btn {
  background-color: #ffffff;
  border: 2px solid #d1d5db;
  color: #4b5563;
}

.skip-btn:hover {
  background-color: #f3f4f6;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* Career questionnaire step indicator - specific styling */
.career-questionnaire .step-indicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0;
  position: relative;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.career-questionnaire .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  position: relative;
  z-index: 2;
}

.career-questionnaire .step-number {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #e9ecef;
  color: #495057;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.career-questionnaire .step.active .step-number {
  background-color: var(--primary);
  color: white;
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 115, 230, 0.3);
}

.career-questionnaire .step.completed .step-number {
  background-color: var(--secondary);
  color: white;
}

.career-questionnaire .step-connector {
  flex-grow: 1;
  height: 3px;
  background-color: #e9ecef;
  position: relative;
  z-index: 1;
  max-width: 50px;
  margin: 0 0.5rem;
  top: -1rem;
}

.career-questionnaire .step-label {
  font-size: 0.85rem;
  color: #6c757d;
  text-align: center;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.career-questionnaire .step.active .step-label {
  color: var(--primary);
  font-weight: 600;
}

/* Question panel styles */
.question-panel {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  border: 1px solid #e5e7eb;
  animation: fadeIn 0.3s ease-in-out;
}

.panel-section {
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.section-title {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  color: #111827;
}

/* Info boxes */
.info-box {
  padding: 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}

.info-box p {
  margin: 0 0 0.5rem 0;
}

.info-box p:last-child {
  margin-bottom: 0;
}

.info-box-primary {
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
}

.info-box-final {
  background-color: #f0fdf4;
  border: 1px solid #86efac;
}

.info-note {
  background-color: #f9fafb;
  padding: 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  margin: 0.5rem 0 1rem;
}

/* Form elements */
.form-group {
  margin-bottom: 1.25rem;
}

.form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-group-half {
  flex: 1;
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #111827;
}

.form-select,
.form-input,
.form-textarea {
  width: 100%;
  padding: 0.625rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 1rem;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.form-select:focus,
.form-input:focus,
.form-textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.25);
}

.form-select {
  background-color: #ffffff;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-textarea {
  min-height: 5rem;
  resize: vertical;
}

.form-hint {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.375rem;
}

/* Checkbox and radio styles */
.checkbox-grid {
  display: grid;
  gap: 0.5rem 1rem;
}

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

.checkbox-item {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  padding: 8px 12px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.checkbox-item:hover {
  background-color: #e9ecef;
}

.checkbox-item input[type="checkbox"] {
  margin-right: 10px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.checkbox-item label {
  margin-bottom: 0;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Navigation buttons */
.nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.buttons-group {
  display: flex;
  gap: 0.75rem;
}

.prev-button,
.next-button,
.submit-button {
  padding: 12px 25px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

.prev-button {
  background-color: #f8f9fa;
  color: #495057;
  border: 1px solid #ced4da;
}

.prev-button:hover:not(:disabled) {
  background-color: #e9ecef;
}

.prev-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.next-button {
  background-color: var(--primary);
  color: white;
}

.next-button:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 115, 230, 0.2);
}

.privacy-note {
  margin-top: 30px;
  padding-top: 15px;
  border-top: 1px solid #e9ecef;
  text-align: center;
  font-size: 0.85rem;
  color: #6c757d;
}

.skip-container {
  margin-top: 1rem;
  padding: 0.5rem;
  background-color: #f9fafb;
  border-radius: 0.375rem;
}

.mt-4 {
  margin-top: 1rem;
}

/* ==========================================================================
   29. Premium Pitch
   ========================================================================== */
/* Clean Premium CTA CSS */

.premium-pitch.clean-approach {
  background: linear-gradient(135deg, #0073e6, #10b981);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin: 30px 0;
  overflow: hidden;
  transition: all 0.4s ease;
}

.premium-pitch.clean-approach:hover {
  box-shadow: 0 8px 25px rgba(0, 115, 230, 0.2);
  transform: translateY(-3px);
}

.premium-pitch.clean-approach .premium-message {
  padding: 30px;
  text-align: center;
  color: white;
}

.premium-pitch.clean-approach h3 {
  font-size: 1.7rem;
  margin-bottom: 12px;
  font-weight: 600;
}

.premium-pitch.clean-approach p {
  font-size: 1.05rem;
  max-width: 700px;
  margin: 0 auto 25px;
  opacity: 0.9;
  line-height: 1.5;
}

.premium-pitch.clean-approach .premium-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.premium-pitch.clean-approach .premium-btn {
  background: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  min-width: 220px;
}

.premium-pitch.clean-approach .premium-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.premium-pitch.clean-approach .comprehensive-btn {
  color: #0073e6;
}

.premium-pitch.clean-approach .comprehensive-btn:hover {
  background: rgba(255, 255, 255, 0.9);
}

.premium-pitch.clean-approach .career-btn {
  color: #28a745;
}

.premium-pitch.clean-approach .career-btn:hover {
  background: rgba(255, 255, 255, 0.9);
}

.premium-pitch.clean-approach .samples-link {
  margin-top: 5px;
}

.premium-pitch.clean-approach .samples-link a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.premium-pitch.clean-approach .samples-link a:hover {
  color: white;
}

.premium-pitch.clean-approach .samples-link i {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

.premium-pitch.clean-approach .samples-link a:hover i {
  transform: translateX(3px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .premium-pitch.clean-approach .premium-message {
    padding: 25px 20px;
  }

  .premium-pitch.clean-approach h3 {
    font-size: 1.4rem;
  }

  .premium-pitch.clean-approach p {
    font-size: 0.95rem;
    margin-bottom: 20px;
  }

  .premium-pitch.clean-approach .premium-actions {
    gap: 10px;
  }

  .premium-pitch.clean-approach .premium-btn {
    padding: 10px 20px;
    font-size: 0.95rem;
    min-width: 200px;
  }
}

@media (max-width: 480px) {
  .premium-pitch.clean-approach h3 {
    font-size: 1.25rem;
  }

  .premium-pitch.clean-approach p {
    font-size: 0.9rem;
    margin-bottom: 15px;
  }

  .premium-pitch.clean-approach .premium-actions {
    flex-direction: column;
    width: 100%;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
  }


  .premium-pitch.clean-approach .premium-btn {
    width: 100%;
  }
}
/* ==========================================================================
   30. Promo Grid
   ========================================================================== */
.featured-promo-section {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.featured-promo-container {
  width: 100%;
}

.featured-promo-content {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--primary), #10b981);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  color: white;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.featured-promo-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 115, 230, 0.15);
}

.featured-promo-content::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 40 599 102 382 127 80'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23FFFFFF'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 30px 30px;
  opacity: 0.2;
}

.featured-promo-icon {
  flex: 0 0 80px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin-right: 2rem;
  transition: transform 0.4s ease;
}

.featured-promo-content:hover .featured-promo-icon {
  transform: scale(1.1) rotate(5deg);
}

.featured-promo-text {
  flex: 1;
}

.featured-promo-text h2 {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
  color: white;
}

.featured-promo-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 0;
  opacity: 0.9;
  color: white;
}

.featured-promo-cta {
  flex: 0 0 auto;
  margin-left: 2rem;
}

.featured-cta-btn {
  display: inline-block;
  background-color: white;
  color: var(--primary);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.featured-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  background-color: #f8f9fa;
  color: var(--primary-dark);
}

.featured-cta-btn i {
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

.featured-cta-btn:hover i {
  transform: translateX(3px);
}

/* Reference links within expandable sections */
.inline-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed var(--primary);
  transition: all 0.2s ease;
}

.inline-link:hover {
  color: var(--primary-dark);
  border-bottom-style: solid;
}

/* Enhanced sample reminder styling */
.sample-reminder-container {
  text-align: center;
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 0;
  padding: 0 20px;
}

.sample-reminder {
  font-size: 1.05rem;
  color: var(--text-light);
  background-color: var(--gray-light);
  display: inline-block;
  padding: 12px 20px;
  border-radius: 20px;
  transition: all 0.4s ease;
  margin: 0;
  border-left: 3px solid var(--primary);
}

.sample-reminder:hover {
  background-color: var(--gray-medium);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.sample-link {
  color: var(--primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.sample-link:hover {
  color: var(--primary-dark);
}

.sample-link i {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.sample-link:hover i {
  transform: translateX(5px);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .featured-promo-content {
    padding: 2rem;
  }

  .featured-promo-icon {
    flex: 0 0 70px;
    height: 70px;
    font-size: 2rem;
    margin-right: 1.5rem;
  }

  .featured-promo-text h3 {
    font-size: 1.6rem;
  }

  .featured-promo-text p {
    font-size: 1rem;
  }

  .featured-promo-cta {
    margin-left: 1.5rem;
  }
}

@media (max-width: 768px) {
  .featured-promo-content {
    flex-direction: column;
    text-align: center;
    padding: 2rem;
  }

  .featured-promo-icon {
    margin-right: 0;
    margin-bottom: 1.5rem;
  }

  .featured-promo-text {
    margin-bottom: 1.5rem;
  }

  .featured-promo-cta {
    margin-left: 0;
  }

  .sample-reminder {
    font-size: 0.95rem;
    padding: 10px 16px;
  }
}

@media (max-width: 480px) {
  .featured-promo-content {
    padding: 1.5rem;
  }

  .featured-promo-icon {
    flex: 0 0 60px;
    height: 60px;
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  .featured-promo-text h3 {
    font-size: 1.4rem;
  }

  .featured-promo-text p {
    font-size: 0.9rem;
  }

  .featured-cta-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }

  .sample-reminder {
    font-size: 0.9rem;
    padding: 8px 14px;
  }
}
.featured-promo-content::before {
  pointer-events: none; /* This ensures the overlay doesn't capture clicks */
}
/* ==========================================================================
   31. Footer
   ========================================================================== */
footer {
  background: #333;
  color: var(--white);
  padding: 40px 0 15px;
  margin-top: 40px;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

.footer-column h3,
.footer-column h4 {
  color: var(--white);
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
  font-size: 1.2rem;
}

.footer-column h3::after,
.footer-column h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 30px;
  height: 3px;
  background: var(--primary);
  transition: width 0.5s ease;
}

.footer-column h3:hover::after,
.footer-column h4:hover::after {
  width: 40px;
}

.footer-column p {
  color: #aaa;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.footer-column ul li {
  margin-bottom: 10px;
}

.footer-column ul li a {
  color: #aaa;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.footer-column ul li a:hover {
  color: var(--white);
  padding-left: 5px;
}

.footer-column i {
  margin-right: 8px;
}

.footer-bottom {
  max-width: 1200px;
  margin: 30px auto 0;
  padding: 15px 15px 0;
  border-top: 1px solid #444;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  color: #aaa;
  font-size: 0.85rem;
}

.footer-links a {
  color: #aaa;
  margin-left: 15px;
}

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

/* ==========================================================================
   32. Scroll to top button
   ========================================================================== */
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background-color: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  z-index: 90;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
}

.scroll-to-top.visible {
  opacity: 1;
}

.scroll-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   33. Sample Reports Styles
   ========================================================================== */
/* Page header for sample reports */
.page-header {
  background: linear-gradient(135deg, #0073e6, #10b981);
  color: white;
  text-align: center;
  padding: 15px 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  display: block;
}

.page-header h1 {
  font-size: 1.6rem;
  margin: 0;
  color: white;
  line-height: 1.2;
}

.page-header p {
  font-size: 1rem;
  margin: 5px 0 0 0;
  color: white;
  line-height: 1.2;
}

/* Report intro */
.report-intro {
  max-width: 700px;
  margin: 20px auto;
  text-align: center;
  padding: 0 20px;
}

.report-intro h2 {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 10px;
}

.report-intro p {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
  max-width: 800px;
  margin: 0 auto;
}

/* Report selector buttons */
.report-selector {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 30px 0;
  flex-wrap: wrap;
}

.report-btn {
  padding: 12px 24px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333;
}

.report-btn.active {
  background: #0073e6;
  color: white;
  border-color: #0073e6;
  box-shadow: 0 4px 15px rgba(0, 115, 230, 0.2);
}

.report-btn:hover:not(.active) {
  background: #e9ecef;
  transform: translateY(-2px);
}

/* Report container */
.report-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  padding-bottom: 80px;
}

/* Report section display */
.report-section {
  display: block;
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: all 0.5s ease;
}

.report-section.active {
  display: block;
  opacity: 1;
  visibility: visible;
  height: auto;
  overflow: visible;
  animation: fadeIn 0.5s ease forwards;
}

/* Bottom navigation */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  padding: 15px 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

.back-to-home {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0073e6;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.back-to-home:hover {
  transform: translateX(-5px);
}

/* Fix for making results display without scrollable containers */
.results-container,
.results-display,
.results-content {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.section-container,
.content-section {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Override any scrollable elements */
.scrollable-content {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ==========================================================================
   34. Mobile Menu & Responsive Styles
   ========================================================================== */

/* Touch device adjustments - FIXED */
@media (hover: none) {
  .test-compact {
    min-height: auto;
    padding-bottom: 65px;
  }

  .test-compact:hover {
    transform: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }

  /* REMOVED: Automatic feature visibility on touch devices */
  .test-features {
    opacity: 0; /* Changed from 1 to 0 */
    transform: translateY(10px); /* Reset transform */
    height: 0; /* Changed from auto to 0 */
  }

  .hover-prompt {
    display: block; /* Changed from none to block */
    opacity: 0.7; /* Make it slightly visible */
  }

  /* Only show features when explicitly touched */
  .test-compact.touched .test-features {
    opacity: 1;
    transform: translateY(0);
    height: auto;
    padding: 10px 5px 5px 5px;
    margin-top: 5px;
  }

  .test-compact.touched .hover-prompt {
    opacity: 0;
  }

  .test-compact.touched {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 115, 230, 0.15);
  }

  .test-compact.touched::before {
    opacity: 1;
  }
}

/* Mobile Menu Styles */
#mobile-menu-btn {
  display: none;
}

#main-nav {
  transition: transform 0.3s ease;
}


/* Ensure consistent mobile nav styling across all pages */
#main-nav.mobile-active {
    right: 0 !important;
}
@media (max-width: 768px) {
  #mobile-menu-btn {
    display: block;
    position: relative;
    z-index: 110;
    background: transparent;
    font-size: 1.5rem;
    color: var(--primary);
    border: none;
    cursor: pointer;
  }

  #main-nav {
    position: fixed;
    top: 0;
    right: 0; /* Changed from -100% */
    height: 100vh;
    width: 80%;
    max-width: 300px;
    background: white;
    z-index: 10001;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    padding: 70px 20px 20px;
    overflow-y: auto;
    transform: translateX(100%); /* Start off-screen */
    visibility: hidden; /* Hide accessibility-wise */
    transition: transform 0.3s ease, visibility 0.3s ease;
  }

  #main-nav.mobile-active {
    transform: translateX(0); /* Slide in */
    visibility: visible; /* Make visible */
  }

  #main-nav ul {
    flex-direction: column;
    gap: 0;
  }

  #main-nav ul li {
    width: 100%;
    border-bottom: 1px solid var(--gray-medium);
  }

  #main-nav ul li a {
    display: block;
    padding: 15px 10px;
    font-size: 1.1rem;
  }

  .menu-open {
    overflow: hidden;
  }

  .choices {
    flex-direction: column;
    width: 100%;
  }

  .choices button {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    height: 45px;
    font-size: 0.85rem;
  }

  .question {
    position: relative;
    min-height: 500px;
    padding: 20px 15px 350px 15px;
  }

  .question p {
    font-size: 1.3rem;
    text-align: left;
    margin-bottom: 40px;
    line-height: 1.4;
  }

  .choices-container {
    position: absolute;
    bottom: 70px;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 15px;
  }

  .choices {
    display: flex;
    flex-direction: column-reverse; /* Strongly Agree on top */
    width: 100%;
    gap: 6px;
  }

  .choices button {
    width: 60vw; /* Full viewport width */
    max-width: none; /* Remove any inherited max width */
    min-height: 44px;
    height: 44px; /* Keep uniform height */
    padding: 10px; /* Increase padding for better touch experience */
    font-size: 1rem;
    white-space: normal; /* Allow text wrapping if needed */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
  }
}

/* Responsive Styles */
@media (max-width: 1200px) {
  .container,
  .footer-content,
  .footer-bottom {
    padding: 0 20px;
  }

  .tests {
    padding: 0 20px;
    max-width: 100%;
  }

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

@media (max-width: 992px) {
  :root {
    --header-height: 60px;
  }

  .hero h1 {
    font-size: 2rem;
  }
  .hero .tagline {
    font-size: 1rem;
  }

  .about-content,
  .ai-approach-content {
    flex-direction: column;
  }

  .about-stats {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .stat-box {
    flex: 0 0 auto;
    width: 30%;
    min-width: 200px;
  }

  .tests {
    flex-direction: column;
    align-items: center;
  }

  .test {
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
  }

  .premium-options {
    flex-direction: column;
    align-items: center;
  }

  .premium-option {
    max-width: 100%;
  }

  .ai-highlight {
    flex-direction: row;
    align-items: flex-start;
  }

  .hero-cta {
    padding: 10px 25px;
    font-size: 0.95rem;
  }

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

  .promo-card {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  header {
    padding: 8px 15px;
    height: auto;
  }

  .logo-container h1 {
    font-size: 1.3rem;
  }

  .hero {
    padding: 40px 15px;
    margin: 15px 0;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .hero .tagline {
    font-size: 0.95rem;
  }

  section h2 {
    font-size: 1.6rem;
  }

  .email-collection-form,
  .payment-form-container {
    padding: 25px 20px;
    margin: 20px auto;
  }

  .email-collection-form h3,
  .payment-form-container h3 {
    font-size: 1.4rem;
  }

  .premium-pitch-header h3 {
    font-size: 1.5rem;
  }

  .report-preview {
    padding: 25px;
  }

  .report-preview-text h3 {
    font-size: 1.5rem;
  }

  .info-callout {
    padding: 20px;
  }

  .info-callout h3 {
    font-size: 1.4rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .footer-links a {
    margin-left: 0;
  }

  .test-mode-header .test-title {
    font-size: 1rem;
  }

  .career-questionnaire {
    padding: 20px;
  }

  .questionnaire-title {
    flex-direction: column;
    gap: 0.25rem;
  }

  .questionnaire-title h2 {
    font-size: 1.5rem;
  }

  .form-row {
    flex-direction: column;
    gap: 1rem;
  }

  .nav-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }

  .buttons-group {
    width: 100%;
  }

  .prev-button,
  .next-button,
  .submit-button {
    flex: 1;
  }

  .career-questionnaire .step {
    width: 60px;
  }

  .career-questionnaire .step-number {
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
  }

  .intro-button {
    display: block;
    width: 80%;
    max-width: 280px;
    margin: 0.5rem auto;
  }

  .tests-compact {
    grid-template-columns: 1fr;
    max-width: 500px;
  }

  .test-compact {
    min-height: auto;
  }

  .promo-grid {
    grid-template-columns: 1fr;
  }

  /* Sample reports page responsive fixes */
  .page-header p {
    display: none;
  }

  .page-header h1 {
    font-size: 1.2rem;
  }

  .report-selector {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .report-btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .hero h1 {
    font-size: 1.6rem;
  }

  .hero-cta {
    width: 100%;
    max-width: 250px;
  }

  .test {
    padding: 20px 15px;
  }

  .test-icon {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  .test h3 {
    font-size: 1.2rem;
  }

  .test-features li {
    font-size: 0.8rem;
  }

  .premium-badge {
    font-size: 0.7rem;
    top: 10px;
    right: 10px;
  }

  .limited-time {
    font-size: 0.65rem;
    top: 35px;
  }

  .results-container {
    max-width: 100%;
    padding: 20px;
  }

  .results-header h2 {
    font-size: 1.5rem;
  }

  .analysis-section h3 {
    font-size: 1.1rem;
  }

  .section-content p {
    font-size: 0.85rem;
  }

  .premium-option {
    padding: 20px;
  }

  .option-header h4 {
    font-size: 1.3rem;
  }

  .price-tag {
    font-size: 1.2rem;
  }

  .benefits-list li {
    font-size: 0.9rem;
  }

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

  .tests-section h2 {
    font-size: 1.8rem;
  }

  .test-compact {
    padding: 20px;
  }

  .test-icon {
    font-size: 2rem;
  }

  .test-compact h3 {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.4rem;
  }

  .hero .tagline {
    font-size: 0.9rem;
  }

  section {
    padding: 30px 0;
  }

  section h2 {
    font-size: 1.4rem;
  }

  .launch-notice h3 {
    font-size: 1.1rem;
  }

  .launch-notice p {
    font-size: 0.9rem;
  }

  .test h3 {
    font-size: 1.1rem;
  }

  .test p {
    font-size: 0.85rem;
  }

  .test button {
    font-size: 0.9rem;
    padding: 10px 15px;
  }

  .test-pricing-info {
    margin-bottom: 40px;
  }

  .ai-image {
    font-size: 4rem;
  }

  .ai-highlight i {
    font-size: 1.5rem;
  }

  .ai-highlight-content h4 {
    font-size: 1rem;
  }

  .benefit-icon {
    font-size: 1.5rem;
  }

  .benefit h3 {
    font-size: 1.1rem;
  }

  .info-callout h3 {
    font-size: 1.2rem;
  }

  .info-callout p {
    font-size: 0.9rem;
  }

  .learn-more-btn,
  .view-samples-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .test-mode-header .logo-container h1 {
    font-size: 1rem !important;
  }

  .test-mode-header .test-title {
    font-size: 0.9rem !important;
  }

  .brain-icon {
    display: none !important;
  }

  .form-select,
  .form-input,
  .form-textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  .checkbox-item {
    min-height: 36px; /* Better tap target size */
  }

  .checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .prev-button,
  .next-button,
  .submit-button {
    padding: 0.75rem 1rem;
    min-height: 44px; /* Apple recommended minimum tap target size */
    font-size: 0.9rem;
  }

  .step-indicator {
    padding: 0 0.5rem;
  }

  .career-questionnaire .step-label {
    font-size: 0.75rem;
  }

  .test-info-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .test-price {
    align-self: flex-end;
  }

  .test-compact {
    min-height: 480px;
  }
}

/* For very small screens */
@media (max-width: 320px) {
  .logo-text {
    display: none;
  }

  .brain-icon {
    display: inline-block !important;
  }

  .test-mode-header .test-title {
    font-size: 0.8rem !important;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .question-panel {
    background-color: #1f2937;
    border-color: #374151;
  }

  .form-label,
  .section-title {
    color: #f9fafb;
  }

  .form-select,
  .form-input,
  .form-textarea {
    background-color: #111827;
    border-color: #4b5563;
    color: #f9fafb;
  }

  .info-box-primary {
    background-color: #172554;
    border-color: #1e40af;
  }

  .info-box-final {
    background-color: #14532d;
    border-color: #15803d;
  }

  .step-number {
    background-color: #374151;
    color: #f9fafb;
  }

  .optional-badge,
  .optional-tag {
    background-color: #374151;
    color: #d1d5db;
  }

  .info-note {
    background-color: #111827;
  }

  .prev-button {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
  }

  .prev-button:hover:not(:disabled) {
    background-color: #4b5563;
  }
}

/* Test Mode Override - Force hide all sections when in test mode */
body.test-mode section:not(.personality-test):not(.comprehensive-test):not(.career-test),
body.test-mode .promo-section,
body.test-mode .sample-reports-section,
body.test-mode #personality-science,
body.test-mode #sample-reports,
body.test-mode footer {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Only show the active test form */
body.test-mode .personality-test,
body.test-mode .comprehensive-test,
body.test-mode .career-test {
  display: block;
}

/* Fix for footer specifically to ensure all styles apply properly */
footer * {
  color: var(--white);
}

/* Make sure the promo section content is visible */
.info-callout * {
  box-sizing: border-box;
  max-width: 100%;
}

/* Make sure sample reports section content is visible */
.sample-reports-content * {
  box-sizing: border-box;
  max-width: 100%;
}

/* Ensure all sections use proper box sizing and display */
section {
  box-sizing: border-box;
  display: block;
  width: 100%;
}

/* Add these fallback styles to ensure layout integrity */
.promo-section,
.sample-reports-section {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Ensure buttons are always visible */
button,
.learn-more-btn,
.view-samples-btn {
  opacity: 1 !important;
  visibility: visible !important;
}

/* This fix addresses specificity issues by ensuring these styles apply when needed */
#personality-science,
.sample-reports-section,
footer {
  box-sizing: border-box;
  width: 100%;
  clear: both;
  display: block;
}

/* Make sure footer links stay visible and properly styled */
.footer-column ul li a,
.footer-links a,
.back-to-home {
  opacity: 1;
  visibility: visible;
  color: inherit;
  text-decoration: none;
}

.footer-column ul li a:hover,
.footer-links a:hover,
.back-to-home:hover {
  color: white;
}
/* ==========================================================================
   Blog Section Styles - COMPACT ENHANCED DESIGN
   ========================================================================== */
.blog-insights-section {
    padding: 50px 0 40px; /* Reduced from 60px 0 50px */
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    text-align: center;
    position: relative;
}

.blog-section-header {
    text-align: center;
    margin-bottom: 30px; /* Reduced from 40px */
}

.blog-insights-section h2 {
    font-size: 2.3rem; /* Reduced from 2.5rem */
    margin-bottom: 15px; /* Reduced from 20px */
    color: #1e293b;
    position: relative;
    display: inline-block;
    font-weight: 700;
}

.blog-insights-section h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    margin: 12px auto 0; /* Reduced from 15px */
    border-radius: 2px;
    transition: width 0.5s ease;
}

.blog-insights-section h2:hover::after {
    width: 80px;
}

.blog-description {
    font-size: 1.1rem;
    color: #64748b;
    margin: 0 auto 30px; /* Reduced from 40px */
    max-width: 600px;
    line-height: 1.6;
}

/* Enhanced Blog Grid - More Compact */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px; /* Reduced from 30px */
    max-width: 1100px;
    margin: 0 auto 40px; /* Reduced from 60px */
    padding: 0 20px;
}

.blog-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    min-height: 330px; /* Use min-height to prevent clipping */
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
}

.blog-icon-container {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    flex-shrink: 0;
}

.blog-icon-container i {
    color: white;
    font-size: 1.4rem;
}

.blog-content {
    text-align: center; /* Center the content */
}

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

.blog-content {
    padding: 18px; /* Reduced from 24px */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-content h3 {
    font-size: 1.15rem; /* Reduced from 1.25rem */
    margin-bottom: 10px; /* Reduced from 12px */
    color: #1e293b;
    line-height: 1.3;
    font-weight: 600;
}

.blog-content p {
    color: #64748b;
    font-size: 0.9rem; /* Reduced from 0.95rem */
    line-height: 1.5; /* Reduced from 1.6 */
    margin-bottom: 12px; /* Reduced from 16px */
    flex-grow: 1;
}

.read-more {
    color: #667eea;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    font-size: 0.85rem; /* Reduced from 0.9rem */
    transition: all 0.3s ease;
    text-decoration: none;
}

.read-more:hover {
    color: #5a6fd8;
    transform: translateX(2px);
}

.read-more i {
    font-size: 0.75rem; /* Reduced from 0.8rem */
    transition: transform 0.3s ease;
}

.read-more:hover i {
    transform: translateX(3px);
}

.blog-tags {
    padding: 0 18px 16px; /* Reduced padding */
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* Reduced from 8px */
}

.blog-tags span {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    color: #667eea;
    padding: 3px 10px; /* Reduced from 4px 12px */
    border-radius: 14px; /* Reduced from 16px */
    font-size: 0.7rem; /* Reduced from 0.75rem */
    font-weight: 500;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

/* Quiz Feature Notice with Integrated Button */
.quiz-feature-notice {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 16px;
    padding: 24px; /* Reduced from 30px */
    margin: 20px auto 0; /* Reduced top margin from 40px */
    max-width: 600px;
    color: white;
    position: relative;
    overflow: hidden;
}

.quiz-feature-notice::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    z-index: 1;
}

.quiz-notice-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px; /* Space for button */
}

.quiz-notice-icon {
    width: 55px; /* Reduced from 60px */
    height: 55px; /* Reduced from 60px */
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quiz-notice-icon i {
    color: white;
    font-size: 1.6rem; /* Reduced from 1.8rem */
}

.quiz-notice-text h4 {
    margin: 0 0 6px 0; /* Reduced from 8px */
    font-size: 1.2rem; /* Reduced from 1.3rem */
    font-weight: 600;
    color: white;
}

.quiz-notice-text p {
    margin: 0;
    font-size: 0.95rem; /* Reduced from 1rem */
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4; /* Reduced from 1.5 */
}

.feature-badge {
    display: inline-block;
    background: #ff6b6b;
    color: white;
    padding: 3px 8px; /* Reduced from 4px 10px */
    border-radius: 10px; /* Reduced from 12px */
    font-size: 0.65rem; /* Reduced from 0.7rem */
    font-weight: 600;
    margin-bottom: 6px; /* Reduced from 8px */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Integrated Button Inside Quiz Notice */
.quiz-notice-button {
    position: relative;
    z-index: 2;
    text-align: center;
}

.quiz-notice-cta {
    display: inline-block;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 10px 24px; /* Slightly smaller than previous external button */
    border-radius: 20px; /* Reduced from 25px */
    font-weight: 600;
    font-size: 0.9rem; /* Reduced from 1rem */
    transition: all 0.3s ease;
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3);
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.quiz-notice-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    color: white;
    border-color: rgba(255, 255, 255, 0.4);
}

.quiz-notice-cta i {
    margin-left: 5px;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.quiz-notice-cta:hover i {
    transform: translateX(3px);
}

/* Remove the old external button container */
.view-all-container {
    display: none; /* Hide the old container since button is now integrated */
}

/* Mobile responsive improvements */
@media (max-width: 768px) {
    .blog-insights-section {
        padding: 35px 0 25px; /* Further reduced */
    }

    .blog-insights-section h2 {
        font-size: 1.8rem;
        margin-bottom: 12px;
    }

    .blog-description {
        font-size: 1rem;
        padding: 0 20px;
        margin-bottom: 25px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        gap: 18px;
        margin-bottom: 30px;
        padding: 0 20px;
    }

    .blog-card {
        height: 280px; /* Reduced mobile height */
    }

    .blog-image {
        height: 70px; /* Further reduced */
        font-size: 1.6rem;
    }

    .blog-content {
        padding: 15px;
    }

    .blog-content h3 {
        font-size: 1rem;
    }

    .blog-content p {
        font-size: 0.85rem;
    }

    .quiz-feature-notice {
        margin: 15px 20px 0; /* Reduced margins */
        padding: 20px;
    }

    .quiz-notice-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        margin-bottom: 18px;
    }

    .quiz-notice-icon {
        width: 50px;
        height: 50px;
        margin: 0 auto;
    }

    .quiz-notice-icon i {
        font-size: 1.4rem;
    }

    .quiz-notice-text h4 {
        font-size: 1.1rem;
    }

    .quiz-notice-text p {
        font-size: 0.9rem;
    }

    .quiz-notice-cta {
        padding: 9px 20px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .blog-insights-section {
        padding: 30px 0 20px;
    }

    .blog-insights-section h2 {
        font-size: 1.6rem;
    }

    .blog-grid {
        max-width: 350px;
        gap: 15px;
    }

    .blog-card {
        height: 260px; /* Compact mobile height */
    }

    .blog-image {
        height: 60px;
        font-size: 1.4rem;
    }

    .quiz-feature-notice {
        padding: 18px;
        margin: 12px 15px 0;
    }

    .quiz-notice-content {
        gap: 12px;
        margin-bottom: 15px;
    }

    .quiz-notice-icon {
        width: 45px;
        height: 45px;
    }

    .quiz-notice-icon i {
        font-size: 1.3rem;
    }

    .quiz-notice-cta {
        padding: 8px 18px;
        font-size: 0.8rem;
    }
}
/* Social Proof Section */
.social-proof-section {
    padding: 50px 0;
    background: linear-gradient(135deg, rgba(0, 115, 230, 0.05), rgba(16, 185, 129, 0.05));
    margin-bottom: 0;
}

.social-proof-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.social-proof-section h2 {
    margin-bottom: 30px;
    font-size: 2.2rem;
    color: var(--primary);
    position: relative;
    display: inline-block;
}

.social-proof-section h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    margin: 15px auto 0;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.social-proof-section h2:hover::after {
    width: 80px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.testimonial-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.testimonial-content {
    margin-bottom: 20px;
}

.testimonial-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text);
    font-style: italic;
    position: relative;
}

.testimonial-content p::before {
    content: "“";
    position: absolute;
    top: -20px;
    left: -10px;
    font-size: 3rem;
    color: rgba(0, 115, 230, 0.1);
    font-family: Georgia, serif;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-initial {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}

.author-role {
    color: var(--text-light);
    font-size: 0.85rem;
}


/* ==========================================================================
   36. Comment System Styles
   ========================================================================== */

/* Main Comments Container */
.comments-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e0e0e0;
}

.comments-section h3 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: #333;
  font-weight: 600;
}

/* Comment Form */
.comment-form {
  background-color: #f7f9fc;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.comment-form textarea {
  width: 100%;
  min-height: 100px;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  transition: border-color 0.3s ease;
}

.comment-form textarea:focus {
  border-color: #6d5acd;
  outline: none;
  box-shadow: 0 0 0 2px rgba(109, 90, 205, 0.1);
}

.comment-form button {
  background-color: #6d5acd;
  color: white;
  font-weight: 600;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background-color 0.2s ease;
}

.comment-form button:hover {
  background-color: #5b4ba8;
}

.comment-form button:disabled {
  background-color: #a999e2;
  cursor: not-allowed;
}

/* Individual Comment */
.comment {
  background-color: white;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comment:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  align-items: center;
}

.comment-author {
  font-weight: 700;
  color: #333;
  font-size: 1.1rem;
}

.comment-date {
  color: #777;
  font-size: 0.85rem;
}

.comment-body {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: #444;
}

.comment-body p {
  margin: 0.5rem 0;
}

.comment-actions {
  display: flex;
  gap: 1rem;
}

.comment-actions button {
  background: none;
  border: none;
  color: #666;
  font-size: 0.9rem;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.2s ease;
}

.comment-actions button:hover {
  background-color: #f0f0f0;
  color: #444;
}

.comment-actions button i {
  font-size: 0.9rem;
}

/* Like button states */
.like-button.liked {
  color: #6d5acd;
  animation: pulse 0.3s ease-in-out;
}

.like-button .likes-count {
  display: inline-block;
  min-width: 15px;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Loading and empty states */
.comments-loading,
.no-comments,
.comments-error {
  text-align: center;
  padding: 2rem;
  color: #666;
}

.comments-loading i {
  margin-right: 0.5rem;
  color: #6d5acd;
}

.comments-error {
  color: #e74c3c;
}

/* Toast notifications */
.toast-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 20px;
  background-color: #333;
  color: white;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 300px;
}

.toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-success {
  background-color: #2ecc71;
}

.toast-error {
  background-color: #e74c3c;
}

.toast-info {
  background-color: #3498db;
}

/* User name prompt modal */
.user-name-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

.modal-content {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.modal-content h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #333;
}

.modal-content input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.modal-content input:focus {
  border-color: #6d5acd;
  outline: none;
}

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.modal-buttons button {
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

#save-name-button {
  background-color: #6d5acd;
  color: white;
  border: none;
}

#save-name-button:hover {
  background-color: #5b4ba8;
}

#skip-name-button {
  background-color: transparent;
  color: #666;
  border: 1px solid #ddd;
}

#skip-name-button:hover {
  background-color: #f5f5f5;
  border-color: #ccc;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .comment-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .comment-date {
    margin-top: 0.25rem;
  }

  .comment-actions {
    flex-direction: column;
    gap: 0.5rem;
  }

  .comment-actions button {
    width: fit-content;
  }
}

/* ==============================================
   SEO & PERFORMANCE OPTIMIZATIONS
   ============================================== */

/* Image Performance Optimization */
img {
  loading: lazy;
  decoding: async;
  height: auto;
  max-width: 100%;
}

/* Prevent Cumulative Layout Shift for article/blog images */
.article-image, .blog-image {
  aspect-ratio: 16/9;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin: 20px 0;
}

.article-image i, .blog-image i {
  font-size: 4rem;
  color: #667eea;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.article-image:hover i, .blog-image:hover i {
  opacity: 0.8;
}

/* Internal Link Styling */
.internal-link {
  color: #667eea;
  text-decoration: underline;
  text-decoration-color: #667eea;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: all 0.3s ease;
}

.internal-link:hover {
  color: #5a6fd8;
  text-decoration-color: #5a6fd8;
  text-decoration-thickness: 2px;
}

/* Related Article Links */
.related-article-link {
  color: #28a745;
  text-decoration: underline;
  text-decoration-color: #28a745;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: all 0.3s ease;
}

.related-article-link:hover {
  color: #218838;
  text-decoration-color: #218838;
  text-decoration-thickness: 2px;
}

/* FAQ Section Styling */
.faq-section {
  margin: 40px 0;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 30px;
}

.faq-section h2 {
  color: #333;
  margin-bottom: 20px;
  font-size: 1.5rem;
}

.faq-item {
  margin-bottom: 20px;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 15px;
}

.faq-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.faq-question {
  font-weight: 600;
  color: #495057;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-answer {
  color: #6c757d;
  line-height: 1.6;
  padding-left: 0;
}

.faq-toggle {
  font-size: 0.8rem;
  color: #667eea;
  transition: transform 0.3s ease;
}

.faq-item.open .faq-toggle {
  transform: rotate(180deg);
}

/* Performance optimizations for animations */
.animate__animated {
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

/* Optimize font loading */
@font-face {
  font-family: 'Inter';
  font-display: swap;
  src: url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
}

/* Critical CSS for above-the-fold content - non-conflicting */
.hero.critical-fallback {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

/* Optimize button hover effects */
.btn, .cta-button, .test-button {
  transition: all 0.3s ease;
  will-change: transform;
}

.btn:hover, .cta-button:hover, .test-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.site-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-logo i {
    font-size: 1.2rem;
}

/* ==========================================================================
   DISTINCT COLOR SCHEME FOR EACH TEST TYPE
   ========================================================================== */


/* Comprehensive Test - Green (keep current) */
.test.premium .test-icon {
  background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
}

.test.premium h3 {
  color: var(--secondary);
}

.test.premium .core-features-list i {
  color: var(--secondary);
}

.test.premium .learn-more-link {
  color: var(--secondary);
}

.test.premium .learn-more-link:hover {
  background: rgba(40, 167, 69, 0.1);
  color: var(--secondary-dark);
}

.test.premium .test-cta-button {
  background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
}

.test.premium .test-cta-button:hover {
  box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
}

.test.premium .test-price {
  color: var(--secondary);
}

.test.premium:hover {
  border-color: var(--secondary);
}

/* Career Test - Purple (new distinct color) */
.test#career-test .test-icon {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
}

.test#career-test h3 {
  color: #8b5cf6 !important;
}

.test#career-test .core-features-list i {
  color: #8b5cf6 !important;
}

.test#career-test .learn-more-link {
  color: #8b5cf6 !important;
}

.test#career-test .learn-more-link:hover {
  background: rgba(139, 92, 246, 0.1) !important;
  color: #7c3aed !important;
}

.test#career-test .test-cta-button {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2) !important;
}

.test#career-test .test-cta-button:hover {
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4) !important;
}

.test#career-test .test-price {
  color: #8b5cf6 !important;
}

.test#career-test:hover {
  border-color: #8b5cf6 !important;
}

/* Update premium badge for career test to match new color */
.test#career-test .premium-badge {
  background: #8b5cf6 !important;
}

/* Modal color updates for career test */
.modal-overlay.career .modal-header h2,
.modal-overlay.career .modal-section h3,
.modal-overlay.career .modal-sample-preview h4,
.modal-overlay.career .modal-sample-preview {
  color: #f59e0b !important;
  border-left-color: #f59e0b !important;
}

.modal-overlay.career .modal-features-list i,
.modal-overlay.career .modal-detail-item i {
  color: #f59e0b !important;
}

.modal-overlay.career .modal-cta-button {
  background: linear-gradient(135deg, #f59e0b, #d98e0a) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2) !important;
}

.modal-overlay.career .modal-cta-button:hover {
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3) !important;
}

/* Focus states for career test */
.test#career-test .learn-more-link:focus {
  outline-color: rgba(139, 92, 246, 0.3) !important;
}


.retry-button {
    background: #007bff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 1rem;
}

.loading-questions {
    text-align: center;
    padding: 2rem;
    font-style: italic;
    color: #666;
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
  background: #f8f9fa;
  padding: 12px 20px;
  border-bottom: 1px solid #e9ecef;
  font-size: 0.9rem;
}

.breadcrumb-list {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item:not(:last-child)::after {
  content: '›';
  margin: 0 8px;
  color: #6c757d;
  font-weight: bold;
}

.breadcrumb-item a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.breadcrumb-item.active span {
  color: #6c757d;
  font-weight: 500;
}

@media (max-width: 768px) {
  .breadcrumb-nav {
    padding: 8px 15px;
    font-size: 0.8rem;
  }

  .breadcrumb-item:not(:last-child)::after {
    margin: 0 6px;
  }
}

/* ==========================================================================
   Preview Mode & Locked Tabs Styles
   ========================================================================== */

/* Preview mode indicator */
.preview-mode .preview-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 25px;
}

.preview-header h2 {
    margin-bottom: 8px;
    font-size: 1.8rem;
}

.preview-subtitle {
    opacity: 0.9;
    font-size: 1rem;
}

.preview-subtitle i {
    margin: 0 5px;
}

/* Locked tab styles */
.locked-tab {
    opacity: 0.6;
    cursor: not-allowed !important;
    position: relative;
}

.locked-tab:hover {
    transform: none !important;
    background: #f1f5f9 !important;
}

.tab-lock-icon {
    margin-left: 8px;
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Locked panel overlay */
.locked-panel {
    position: relative;
}

.locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(2px);
    border-radius: 8px;
}

.lock-content {
    text-align: center;
    padding: 40px;
    max-width: 300px;
}

.lock-content i {
    font-size: 3rem;
    color: #94a3b8;
    margin-bottom: 20px;
}

.lock-content h4 {
    color: var(--text);
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.lock-content p {
    color: var(--text-light);
    margin-bottom: 20px;
}

.unlock-button {
    background: var(--primary);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.unlock-button:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

/* Upgrade prompt styles */
.upgrade-prompt {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
    padding: 40px;
    margin-top: 30px;
    text-align: center;
    border: 2px solid #e2e8f0;
}

.upgrade-content {
    max-width: 600px;
    margin: 0 auto;
}

.upgrade-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: white;
    font-size: 1.5rem;
}

.upgrade-prompt h3 {
    color: var(--primary);
    margin-bottom: 15px;
    font-size: 1.6rem;
}

.upgrade-prompt > p {
    color: var(--text-light);
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.locked-sections-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 25px 0;
}

.section-preview {
    background: white;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-left: 3px solid #94a3b8;
}

.section-preview i {
    color: #94a3b8;
    font-size: 1.1rem;
}

.section-preview span {
    font-weight: 500;
    color: var(--text);
}

.upgrade-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

.upgrade-main-button {
    background: var(--primary);
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;

    cursor: pointer;
    transition: all 0.3s ease;
}

.upgrade-main-button:hover {
    background: var(--primary-dark);

    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.download-preview-button {
    background: white;
    color: var(--primary);
    padding: 15px 25px;
    border: 2px solid var(--primary);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.download-preview-button:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

/* Save Results Without Upgrading Button */
.save-results-only-button {
    background: white;
    color: #667eea;
    padding: 12px 24px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.save-results-only-button i {
    font-size: 0.95rem;
    transition: transform 0.3s ease;
}

.save-results-only-button:hover {
    background: #f8f9fa;
    border-color: #667eea;
    color: #5a6fd8;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.15);
}

.save-results-only-button:hover i {
    transform: scale(1.15);
}

.save-results-only-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.save-results-only-button.loading {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.save-results-only-button.loading i {
    animation: spin 1s linear infinite;
}

@media (max-width: 768px) {
    .save-results-only-button {
        padding: 11px 20px;
        font-size: 0.95rem;
        margin-top: 10px;
    }

    .save-results-only-button i {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .save-results-only-button {
        padding: 10px 16px;
        font-size: 0.9rem;
        border-radius: 6px;
    }
}

/* Promo Banner in Upgrade Prompt */
.upgrade-promo-banner {
    background: linear-gradient(135deg, #fff3cd 0%, #fff8e1 100%);
    border: 2px solid #ffc107;
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

.upgrade-promo-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: rgba(255, 193, 7, 0.1);
    border-radius: 50%;
    transform: translate(30px, -30px);
}

.upgrade-promo-badge {
    display: inline-block;
    background: #ff6b35;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.upgrade-promo-text {
    font-size: 1.1rem;
    color: #ff6b35;
    margin: 10px 0 8px 0;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.upgrade-promo-code {
    color: #333;
    margin: 6px 0 8px 0;
    position: relative;
    z-index: 1;
}

.promo-code-badge {
    background: #ff6b35;
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-family: monospace;
    font-weight: 700;
    font-size: 0.95rem;
}

.upgrade-promo-slots {
    color: #666;
    font-size: 0.85rem;
    margin: 6px 0 0 0;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .upgrade-promo-banner {
        padding: 12px;
        margin: 15px 0;
    }

    .upgrade-promo-text {
        font-size: 1rem;
    }

    .promo-code-badge {
        font-size: 0.9rem;
    }
}

/* Updated modal styles - no email required */
.upgrade-benefits {
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.upgrade-benefits h4 {
    color: var(--primary);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    color: var(--text);
}

.benefits-list i {
    color: #10b981;
    font-size: 1rem;
}

.optional-email-section {
    margin-top: 20px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 6px;
}

.optional-email-section label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 10px;
}

.optional-email-section input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    margin-top: 10px;
}

/* Success banner */
.unlock-success-banner {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #10b981;
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    z-index: 1001;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideDown 0.3s ease;
}

.success-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.success-content i {
    font-size: 1.2rem;
}

.dismiss-success {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 5px;
    margin-left: 10px;
}

.dismiss-success:hover {
    opacity: 0.8;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .locked-sections-preview {
        grid-template-columns: 1fr;
    }

    .upgrade-buttons {
        flex-direction: column;
        align-items: center;
    }

    .upgrade-main-button,
    .download-preview-button {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .lock-content {
        padding: 30px 20px;
    }

    .unlock-success-banner {
        left: 20px;
        right: 20px;
        transform: none;
    }
}

/* Tab navigation fixes for locked state */
.preview-mode .tabs-navigation .tab-button.locked-tab,
.preview-mode .ifs-tab-navigation .ifs-tab-button.locked-tab {
    pointer-events: auto; /* Allow clicks to show upgrade modal */
}

.preview-mode .tabs-navigation .tab-button:not(.locked-tab):not(.active):hover,
.preview-mode .ifs-tab-navigation .ifs-tab-button:not(.locked-tab):not(.active):hover {
    background: #f1f5f9;
    transform: translateY(-1px);

}

/* ==========================================================================
   Upgrade Modal Styles (Freemium)
   ========================================================================== */

.upgrade-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
    backdrop-filter: blur(4px);
}

.upgrade-modal {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.upgrade-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 30px 20px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.upgrade-modal .modal-header h3 {
    margin: 0;
    color: var(--primary);
    font-size: 1.4rem;
    font-weight: 600;
}

.upgrade-modal .modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upgrade-modal .modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.upgrade-modal .modal-body {
    padding: 25px 30px;
    flex-grow: 1;
    overflow-y: auto;
}

.upgrade-modal .modal-footer {
    padding: 20px 30px 30px;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

/* Email section */
.email-section {
    margin-bottom: 25px;
}

.email-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text);
    font-size: 0.95rem;
}

.email-section input[type="email"] {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.email-section input[type="email"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.email-section input.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Payment section */
.payment-section {
    margin-bottom: 25px;
}

.payment-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text);
    font-size: 0.95rem;
}

#upgrade-card-element {
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    min-height: 44px;
    transition: border-color 0.3s ease;
}

#upgrade-card-element:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

#upgrade-card-errors {
    color: #ef4444;
    margin-top: 8px;
    font-size: 0.9rem;
    min-height: 20px;
}

/* Benefits section */
.upgrade-benefits {
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.upgrade-benefits h4 {
    color: var(--primary);
    margin-bottom: 15px;
    font-size: 1.1rem;
    font-weight: 600;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    color: var(--text);
    font-size: 0.95rem;
}

.benefits-list i {
    color: #10b981;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Price summary */
.price-summary {
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

.price-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1.1rem;
}

.price {
    color: var(--primary);
    font-size: 1.3rem;
    font-weight: 700;
}

/* Purchase button */
.complete-purchase-button {
    width: 100%;
    background: var(--primary);
    color: white;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.complete-purchase-button:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.complete-purchase-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Processing indicator */
.processing-indicator {
    text-align: center;
    padding: 30px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.processing-indicator .spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

.processing-indicator p {
    margin: 0;
    color: var(--text-light);
    font-weight: 500;
}

/* Error message styling */
.error-message {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: none;
}

.error-message[style*="block"] {
    display: block !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .upgrade-modal {
        margin: 20px;
        max-width: calc(100vw - 40px);
    }

    .upgrade-modal .modal-header,
    .upgrade-modal .modal-body,
    .upgrade-modal .modal-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .upgrade-modal .modal-header {
        padding-top: 20px;
        padding-bottom: 15px;
    }

    .upgrade-modal .modal-body {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .upgrade-modal .modal-footer {
        padding-top: 15px;
        padding-bottom: 20px;
    }
}

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

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

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

/* Fix modal benefits list conflicts */
.upgrade-modal .benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.upgrade-modal .benefits-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    color: var(--text);
    font-size: 0.95rem;
    position: static !important;
    padding-left: 0 !important;
}

.upgrade-modal .benefits-list li::before {
    content: none !important;
}

.upgrade-modal .benefits-list i {
    color: #10b981;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Fix section preview lock icons */
.upgrade-prompt .section-preview i {
    color: #94a3b8;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.upgrade-prompt .section-preview i::before {
    content: none !important;
}