/*
 * Reasy - Main Application Stylesheet
 * Apple HIG-inspired design system
 *
 * This file contains all CSS modules concatenated:
 * - base/: Design tokens, reset, typography
 * - components/: Reusable UI components
 * - layouts/: Page layout patterns
 * - pages/: Page-specific styles
 *
 * Note: CSS files are concatenated rather than using @import
 * for compatibility with Propshaft asset pipeline.
 *
 * DO NOT EDIT THIS FILE DIRECTLY!
 * Edit the individual CSS files and run: bin/combine_css
 */

/* ================================================
   base/variables.css
   ================================================ */

/*
 * Reasy Design Tokens
 * Modern, clean design system for 35+ audience
 * Updated: 2026-01-16
 */

:root {
  /* ============================================
     Brand Colors - Modern, Professional Palette
     ============================================ */

  /* Primary - Deep indigo (warm, personal palette) */
  --color-primary: #312E81;
  --color-primary-dark: #272463;
  --color-primary-light: #3B378F;
  --color-primary-pale: #EEF2FF;

  /* Accent - Indigo for interactive elements */
  --color-accent: #4F46E5;
  --color-accent-dark: #4338CA;
  --color-accent-light: #6366F1;
  --color-accent-pale: var(--color-primary-pale);

  /* Secondary accent - Emerald for positive actions */
  --color-emerald: #10B981;
  --color-emerald-dark: #059669;
  --color-emerald-pale: #ECFDF5;

  /* Status colors */
  --color-success: #22C55E;
  --color-success-dark: #16A34A;
  --color-success-pale: #F0FDF4;

  --color-warning: #F59E0B;
  --color-warning-dark: #D97706;
  --color-warning-pale: #FFFBEB;

  --color-error: #EF4444;
  --color-error-dark: #DC2626;
  --color-error-pale: #FEF2F2;

  --color-info: #0EA5E9;
  --color-info-dark: #0284C7;
  --color-info-pale: #F0F9FF;

  /* Brand-specific */
  --color-beige: #FDF6EC;
  --color-beige-light: #FEFCF8;
  --color-beige-dark: #F0E4D0;

  --color-dark: #18181B;
  --color-dark-light: #27272A;

  /* ============================================
     Neutral Colors - Zinc scale (cooler grays)
     ============================================ */
  --color-white: #FFFFFF;
  --color-black: #000000;

  --color-gray-50: #FAF8F5;
  --color-gray-100: #F0ECE4;
  --color-gray-200: #E8E2D8;
  --color-gray-300: #D4CEC4;
  --color-gray-400: #9C9788;
  --color-gray-500: #6B6860;
  --color-gray-600: #52504A;
  --color-gray-700: #3F3D38;
  --color-gray-800: #2A2926;
  --color-gray-900: #1F1E1B;

  /* Semantic colors */
  --color-background: #FEFCF8;
  --color-background-secondary: #FAF8F5;
  --color-background-tertiary: #F0ECE4;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-warm: #FDF6EC;
  --color-surface-warm-border: #F0E4D0;

  --color-border: var(--color-gray-200);
  --color-border-light: var(--color-gray-100);
  --color-border-hover: var(--color-gray-300);
  --color-border-focus: rgba(49, 46, 129, 0.25);

  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-500);
  --color-text-muted: var(--color-gray-400);
  --color-text-inverse: var(--color-white);

  /* ============================================
     Typography
     ============================================ */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --font-family-mono: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, monospace;

  /* Font sizes - Accessible for 35+ audience */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  --font-size-6xl: 3.75rem;   /* 60px */

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.625;

  /* ============================================
     Spacing (4px base grid)
     ============================================ */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;         /* 16px — 8px grid */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px — 8px grid */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */

  /* Custom spacing aliases for requirements */
  --spacing-md: var(--space-4);  /* 20px (updated from 16px) */
  --spacing-lg: var(--space-6);  /* 32px (updated from 24px) */
  --spacing-xl: var(--space-12); /* 48px */

  /* ============================================
     Border Radius - Tighter, more modern
     ============================================ */
  --radius-none: 0;
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 1rem;      /* 16px */ /* Updated for modernization */
  --radius-xl: 1.25rem;   /* 20px */ /* Updated for modernization */
  --radius-2xl: 1rem;     /* 16px */
  --radius-full: 9999px;

  /* ============================================
     Shadows - Simplified, subtle
     ============================================ */
  --shadow-sm: 0 1px 2px 0 rgba(31, 30, 27, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(31, 30, 27, 0.06), 0 2px 4px -2px rgba(31, 30, 27, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(31, 30, 27, 0.08), 0 4px 6px -4px rgba(31, 30, 27, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(31, 30, 27, 0.08), 0 8px 10px -6px rgba(31, 30, 27, 0.04);

  /* Focus ring */
  --shadow-focus: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
  --shadow-focus-error: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-error);

  /* ============================================
     Transitions
     ============================================ */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  --transition-fast: 150ms var(--ease-default);
  --transition-base: 200ms var(--ease-default);
  --transition-slow: 300ms var(--ease-default);

  /* ============================================
     Layout
     ============================================ */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --header-height: 64px;
  --content-max-width: 1280px;
  --content-narrow-width: 768px;

  /* ============================================
     Z-Index Scale
     ============================================ */
  --z-base: 0;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;
  --z-celebration: 600;

  /* ============================================
     Gamification Colors (Duolingo-inspired)
     ============================================ */
  --color-xp-gold: #FFD700;
  --color-xp-gold-light: #FFF4CC;
  --color-xp-gold-dark: #E6C200;
  --color-streak-orange: #FF9500;
  --color-streak-orange-light: #FFEDD5;
  --color-streak-orange-dark: #EA580C;
  --color-level-green: #58CC02;
  --color-level-green-light: #D7FFBB;
  --color-level-green-dark: #4CAF00;
  --color-celebration-purple: #A560E8;
  --color-celebration-purple-light: #EDE9FE;
  --color-milestone-blue: #1CB0F6;
  --color-milestone-blue-light: #E0F4FF;

  /* ============================================
     Gradients
     ============================================ */
  --gradient-progress: linear-gradient(90deg, var(--color-primary) 0%, var(--color-level-green) 100%);
  --gradient-xp: linear-gradient(135deg, var(--color-xp-gold) 0%, var(--color-streak-orange) 100%);
  --gradient-achievement: linear-gradient(135deg, var(--color-celebration-purple) 0%, var(--color-primary) 100%);
  --gradient-streak: linear-gradient(135deg, var(--color-streak-orange) 0%, var(--color-error) 100%);
  --gradient-hero: linear-gradient(180deg, #FEFCF8 0%, #FAF8F5 100%);
  --gradient-card-shine: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 60%);

  /* ============================================
     Apple-style Glassmorphism
     ============================================ */
  --glass-background: rgba(254, 252, 248, 0.72);
  --glass-background-dark: rgba(254, 252, 248, 0.88);
  --glass-blur: 20px;
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

  /* ============================================
     Enhanced Shadows (Apple-inspired depth)
     ============================================ */
  --shadow-glow-primary: 0 0 20px rgba(49, 46, 129, 0.3);
  --shadow-glow-success: 0 0 20px rgba(34, 197, 94, 0.3);
  --shadow-glow-gold: 0 0 20px rgba(255, 215, 0, 0.4);
  --shadow-glow-celebration: 0 0 30px rgba(165, 96, 232, 0.4);
  --shadow-float: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-card-modern: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-card-hover-modern: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-button-hover: 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.12);

  /* ============================================
     Sidebar Dimensions
     ============================================ */
  --sidebar-width-expanded: 260px;
  --sidebar-width-collapsed: 72px;
  --sidebar-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
     Animation Easings
     ============================================ */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
     Animation Durations
     ============================================ */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;
  --duration-celebration: 600ms;
}

/* ============================================
   Compatibility Layer - Maps old tokens to new
   This allows gradual migration without breaking existing CSS
   ============================================ */
:root {
  /* Old color aliases (for backward compatibility) */
  --color-primary-dark: var(--color-primary-dark);
  --color-primary-light: var(--color-primary-light);

  /* Keep legacy shadow names working */
  --shadow-xs: var(--shadow-sm);
  --shadow-card: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --shadow-card-lift: var(--shadow-lg);

  /* Legacy radius aliases */
  --radius-3xl: var(--radius-2xl);

  /* Legacy font weight */
  --font-weight-light: 300;

  /* Legacy letter spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;

  /* Legacy section backgrounds - now using gray scale */
  --section-bg-beige: var(--color-gray-50);
  --section-bg-beige-light: var(--color-gray-50);
  --section-bg-blue-light: var(--color-primary-pale);
  --section-bg-accent-light: var(--color-accent-pale);

  /* Legacy hover effects - simplified */
  --hover-lift: translateY(-2px);
  --hover-lift-sm: translateY(-1px);
  --hover-scale: scale(1.01);
  --image-zoom-scale: 1.03;

  /* Legacy transitions */
  --transition-lift: transform var(--transition-base), box-shadow var(--transition-base);
  --transition-image-zoom: transform var(--transition-slow);
  --transition-slower: var(--transition-slow);

  /* Progress & gamification aliases */
  --progress-bar-height: 8px;
  --progress-bar-radius: var(--radius-full);
}


/* ================================================
   base/reset.css
   ================================================ */

/*
 * Modern CSS Reset
 * Minimal, sensible defaults
 */

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

/* Remove default margin/padding */
* {
  margin: 0;
  padding: 0;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove list styles */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Core body defaults */
body {
  min-height: 100vh;
  line-height: var(--line-height-relaxed);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  background: var(--color-background);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: var(--color-primary);
}

/* Make images easier to work with */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* Remove all animations for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Selection styling */
::selection {
  background: var(--color-primary-pale);
  color: var(--color-primary-dark);
}


/* ================================================
   base/typography.css
   ================================================ */

/*
 * Typography System
 * Hierarchical text styles for Reasy
 * Font stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif
 */

/* Apply modern font stack globally */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
}

/* ============================================
   Price Display Classes
   ============================================ */
.price-display {
  font-size: var(--font-size-2xl); /* 24px on cards */
  font-weight: var(--font-weight-semibold); /* 600 */
  color: var(--color-primary);
}

.price-display-detail {
  font-size: var(--font-size-4xl); /* 32px on detail pages */
  font-weight: var(--font-weight-semibold); /* 600 */
  color: var(--color-primary);
}

/* ============================================
   Headings
   ============================================ */
h1 {
  font-size: 2rem;        /* 32px — page titles */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

h2 {
  font-size: 1.75rem;     /* 28px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

h3 {
  font-size: 1.375rem;    /* 22px — section headers */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

h4 {
  font-size: 1.25rem;     /* 20px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

h5 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

h6 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

/* ============================================
   Body Text
   ============================================ */
p {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
}

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

/* Lead text - larger intro paragraphs */
.text-lead {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

/* Small text */
.text-small,
.text-sm,
small {
  font-size: var(--font-size-sm);
}

.text-xs {
  font-size: var(--font-size-xs);
}

/* ============================================
   Links
   ============================================ */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

.link-underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-underline:hover {
  text-decoration-thickness: 2px;
}

/* Action link with arrow */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold); /* Updated from medium to semibold */
}

.link-action::after {
  content: '\2192';
  transition: transform var(--transition-fast);
}

.link-action:hover::after {
  transform: translateX(4px);
}

/* ============================================
   Lists
   ============================================ */
ul, ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

li {
  margin-bottom: var(--space-2);
}

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

/* Unstyled list */
.list-none {
  list-style: none;
  padding-left: 0;
}

/* ============================================
   Text Colors
   ============================================ */
.text-primary {
  color: var(--color-text-primary);
}

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

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

.text-inverse {
  color: var(--color-text-inverse);
}

/* Metadata/captions: 13px, regular (400), use --color-gray-400 */
.text-metadata,
.text-caption {
  font-size: 0.8125rem; /* 13px */
  font-weight: var(--font-weight-regular); /* 400 */
  color: var(--color-gray-400);
}

/* Brand colors */
.text-blue {
  color: var(--color-primary);
}

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

.text-orange {
  color: var(--color-accent);
}

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

/* ============================================
   Text Alignment
   ============================================ */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

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

/* ============================================
   Font Weights
   ============================================ */
.font-light {
  font-weight: var(--font-weight-light);
}

.font-regular {
  font-weight: var(--font-weight-regular);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

/* ============================================
   Text Transform
   ============================================ */
.uppercase {
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.capitalize {
  text-transform: capitalize;
}

.lowercase {
  text-transform: lowercase;
}

/* ============================================
   Text Truncation
   ============================================ */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

/* ============================================
   Prose (Long-form content)
   ============================================ */
.prose {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  max-width: 65ch;
}

.prose h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-2xl);
}

.prose h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-xl);
}

.prose p {
  margin-bottom: var(--space-6);
}

.prose ul,
.prose ol {
  margin-bottom: var(--space-6);
}

.prose blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  background: var(--color-beige-light);
  border-left: 4px solid rgba(49, 46, 129, 0.35);
  border-radius: var(--radius-md);
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose code {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
  padding: var(--space-1) var(--space-2);
  background: var(--color-gray-100);
  border-radius: var(--radius-sm);
}

.prose pre {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  background: var(--color-gray-900);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.prose pre code {
  background: none;
  padding: 0;
  color: var(--color-gray-100);
}

/* ============================================
   Mobile Typography Scaling
   ============================================ */
@media (max-width: 768px) {
  /* Page titles on mobile: 28px, semibold (600) */
  h1 {
    font-size: 1.75rem; /* 28px */
    font-weight: var(--font-weight-semibold);
  }

  /* Section headers on mobile: 20px, semibold (600) */
  h2 {
    font-size: 1.25rem; /* 20px */
    font-weight: var(--font-weight-semibold);
  }

  h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
  }

  h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
  }

  h5 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
  }

  /* Body text: 16px, regular (400) */
  body, p {
    font-size: var(--font-size-base); /* 16px */
    font-weight: var(--font-weight-regular); /* 400 */
  }

  /* Lead text smaller on mobile */
  .text-lead {
    font-size: var(--font-size-lg);
  }

  /* Prose content adjustments */
  .prose {
    font-size: var(--font-size-base);
  }

  .prose h2 {
    font-size: 1.25rem; /* 20px */
    margin-top: var(--space-8);
  }

  .prose h3 {
    font-size: var(--font-size-lg);
    margin-top: var(--space-6);
  }
}

/* Smaller mobile devices */
@media (max-width: 480px) {
  h1 {
    font-size: var(--font-size-2xl);
  }

  h2 {
    font-size: var(--font-size-xl);
  }
}


/* ================================================
   base/utilities.css
   ================================================ */

/*
 * Utility Classes
 * DRY helper classes to reduce repetition across pages
 */

/* ============================================
   Layout Utilities
   ============================================ */

/* Container */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container-narrow {
  max-width: var(--content-narrow-width);
}

.container-wide {
  max-width: 1400px;
}

/* Flex */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Grid */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
}

@media (max-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
  .md\:flex-col { flex-direction: column; }
}

@media (max-width: 640px) {
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
}

/* ============================================
   Spacing Utilities
   ============================================ */

/* Gap */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Margin */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mx-auto { margin-inline: auto; }

/* Padding */
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }
.py-2 { padding-block: var(--space-2); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }
.py-8 { padding-block: var(--space-8); }
.py-12 { padding-block: var(--space-12); }
.py-16 { padding-block: var(--space-16); }

/* ============================================
   Typography Utilities
   ============================================ */

/* Text size */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }

/* Text weight */
.font-normal { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Text color */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-white { color: var(--color-white); }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Line height */
.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-base); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

/* ============================================
   Background Utilities
   ============================================ */
.bg-white { background-color: var(--color-white); }
.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-primary { background-color: var(--color-primary); }
.bg-primary-pale { background-color: var(--color-primary-pale); }
.bg-accent-pale { background-color: var(--color-accent-pale); }
.bg-success-pale { background-color: var(--color-success-pale); }
.bg-error-pale { background-color: var(--color-error-pale); }

/* ============================================
   Border Utilities
   ============================================ */
.border { border: 1px solid var(--color-border); }
.border-t { border-top: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }
.border-none { border: none; }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ============================================
   Shadow Utilities
   ============================================ */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ============================================
   Display Utilities
   ============================================ */
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.invisible { visibility: hidden; }

/* Responsive display */
@media (max-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
}

@media (min-width: 769px) {
  .md\:show { display: block; }
  .desktop-only { display: block; }
  .mobile-only { display: none; }
}

@media (max-width: 768px) {
  .desktop-only { display: none; }
  .mobile-only { display: block; }
}

/* ============================================
   Size Utilities
   ============================================ */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }

/* ============================================
   Position Utilities
   ============================================ */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* ============================================
   Overflow Utilities
   ============================================ */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

/* ============================================
   Cursor & Interaction Utilities
   ============================================ */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer-events-none { pointer-events: none; }
.select-none { user-select: none; }

/* ============================================
   Transition Utilities
   ============================================ */
.transition { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }

/* ============================================
   Opacity Utilities
   ============================================ */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

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

/* ============================================
   Text Truncation
   ============================================ */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

/* ============================================
   Common Patterns
   ============================================ */

/* Page section */
.section {
  padding-block: var(--space-12);
}

.section-lg {
  padding-block: var(--space-16);
}

/* Page header */
.page-header {
  margin-bottom: var(--space-6);
}

.page-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.page-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-muted);
}

.empty-state-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.empty-state-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.empty-state-text {
  color: var(--color-text-muted);
  max-width: 24rem;
  margin-inline: auto;
}

/* Divider */
.divider {
  height: 1px;
  background: var(--color-border);
  margin-block: var(--space-6);
}

/* Avatar */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-gray-200);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-xs);
}

.avatar-md {
  width: 40px;
  height: 40px;
  font-size: var(--font-size-sm);
}

.avatar-lg {
  width: 48px;
  height: 48px;
  font-size: var(--font-size-base);
}

/* Aspect ratio */
.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

/* Object fit for images */
.object-cover {
  object-fit: cover;
}

.object-contain {
  object-fit: contain;
}


/* ================================================
   base/animations.css
   ================================================ */

/*
 * Reasy Animation Keyframes
 * Duolingo-inspired celebration and progress animations
 * Apple-inspired subtle micro-interactions
 */

/* ============================================
   Celebration Animations
   ============================================ */

/* Main celebration bounce - Duolingo style */
@keyframes celebration-bounce {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  40% {
    transform: scale(1.15);
    opacity: 1;
  }
  60% {
    transform: scale(0.9);
  }
  80% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Points flying up and fading */
@keyframes points-fly-up {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-30px) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px) scale(0.8);
    opacity: 0;
  }
}

/* XP counter increment pulse */
@keyframes xp-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

/* Checkbox check animation */
@keyframes checkbox-pop {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* Checkmark draw animation */
@keyframes checkmark-draw {
  0% {
    stroke-dashoffset: 24;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Streak fire flicker */
@keyframes streak-fire {
  0%, 100% {
    transform: scale(1) rotate(-2deg);
    filter: brightness(1);
  }
  25% {
    transform: scale(1.05) rotate(2deg);
    filter: brightness(1.1);
  }
  50% {
    transform: scale(0.98) rotate(-1deg);
    filter: brightness(1.05);
  }
  75% {
    transform: scale(1.03) rotate(1deg);
    filter: brightness(1.15);
  }
}

/* Confetti burst particle */
@keyframes confetti-fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Confetti sway while falling */
@keyframes confetti-sway {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(25px);
  }
}

/* Confetti particle burst from center */
@keyframes confetti-burst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--confetti-x, 100px), var(--confetti-y, -100px)) scale(0);
    opacity: 0;
  }
}

/* ============================================
   List & Content Animations
   ============================================ */

/* Fade and slide up - for staggered lists */
@keyframes fade-slide-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade and slide in from left */
@keyframes fade-slide-left {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade and slide in from right */
@keyframes fade-slide-right {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Simple fade in */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Scale up from nothing */
@keyframes scale-in {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============================================
   Progress Animations
   ============================================ */

/* Progress bar fill animation */
@keyframes progress-fill {
  0% {
    width: 0;
  }
  100% {
    width: var(--progress-width, 100%);
  }
}

/* Progress ring fill (for SVG circle) */
@keyframes progress-ring-fill {
  0% {
    stroke-dashoffset: var(--progress-circumference, 283);
  }
  100% {
    stroke-dashoffset: var(--progress-offset, 0);
  }
}

/* Shimmer effect for loading/skeleton */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Pulse glow effect */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
  }
}

/* Gold glow pulse for rewards */
@keyframes gold-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(255, 215, 0, 0);
  }
}

/* ============================================
   Micro-interactions
   ============================================ */

/* Button press effect */
@keyframes button-press {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.97);
  }
}

/* Ripple effect for buttons */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* Gentle shake for errors/attention */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-5px);
  }
  40%, 80% {
    transform: translateX(5px);
  }
}

/* Subtle hover float */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Attention pulse (for notifications) */
@keyframes attention-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

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

/* ============================================
   Sidebar Animations
   ============================================ */

/* Nav item label fade */
@keyframes nav-label-fade {
  0% {
    opacity: 1;
    max-width: 200px;
  }
  100% {
    opacity: 0;
    max-width: 0;
  }
}

/* Tooltip appear */
@keyframes tooltip-appear {
  0% {
    opacity: 0;
    transform: translateX(-8px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================
   Animation Utility Classes
   ============================================ */

.animate-celebration-bounce {
  animation: celebration-bounce var(--duration-celebration) var(--ease-spring);
}

.animate-points-fly {
  animation: points-fly-up 800ms var(--ease-out) forwards;
}

.animate-xp-pulse {
  animation: xp-pulse 300ms var(--ease-bounce);
}

.animate-checkbox-pop {
  animation: checkbox-pop 400ms var(--ease-spring);
}

.animate-checkmark {
  animation: checkmark-draw 300ms var(--ease-out) forwards;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

.animate-streak-fire {
  animation: streak-fire 1.5s ease-in-out infinite;
}

.animate-fade-up {
  animation: fade-slide-up 400ms var(--ease-out) backwards;
}

.animate-fade-left {
  animation: fade-slide-left 400ms var(--ease-out) backwards;
}

.animate-fade-right {
  animation: fade-slide-right 400ms var(--ease-out) backwards;
}

.animate-fade-in {
  animation: fade-in 300ms var(--ease-out);
}

.animate-scale-in {
  animation: scale-in 300ms var(--ease-spring);
}

.animate-shimmer {
  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-gold-glow {
  animation: gold-glow-pulse 2s ease-in-out infinite;
}

.animate-shake {
  animation: shake 400ms var(--ease-out);
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-attention {
  animation: attention-pulse 2s ease-in-out infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Staggered animation delays for lists */
.stagger-1 { animation-delay: 50ms; }
.stagger-2 { animation-delay: 100ms; }
.stagger-3 { animation-delay: 150ms; }
.stagger-4 { animation-delay: 200ms; }
.stagger-5 { animation-delay: 250ms; }
.stagger-6 { animation-delay: 300ms; }
.stagger-7 { animation-delay: 350ms; }
.stagger-8 { animation-delay: 400ms; }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ================================================
   components/buttons.css
   ================================================ */

/*
 * Button Components
 * Clean, modern button system
 */

/* ============================================
   Base Button
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold); /* Updated from medium to semibold */
  line-height: 1.5;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

/* Subtle scale on active state */
.btn:active:not(:disabled) {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================
   Button Variants
   ============================================ */

/* Primary - Main CTA */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: rgba(49, 46, 129, 0.25);
  padding: 12px 24px;
  box-shadow: none;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn-primary:active:not(:disabled) {
  background: var(--color-primary-dark);
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* Secondary - Secondary actions */
.btn-secondary {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: rgba(49, 46, 129, 0.25);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-gray-50);
  border-color: var(--color-border-hover);
}

/* Ghost - Minimal emphasis */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-gray-100);
  color: var(--color-text-primary);
}

/* Outline - Medium emphasis */
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: rgba(49, 46, 129, 0.25);
}

.btn-outline:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Accent - Alternative CTA */
.btn-accent {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.btn-accent:hover:not(:disabled) {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

/* Success */
.btn-success {
  background: var(--color-success);
  color: var(--color-white);
  border-color: var(--color-success);
}

.btn-success:hover:not(:disabled) {
  background: var(--color-success-dark);
  border-color: var(--color-success-dark);
}

/* Danger */
.btn-danger {
  background: var(--color-error);
  color: var(--color-white);
  border-color: var(--color-error);
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-error-dark);
  border-color: var(--color-error-dark);
}

/* Text - Link style */
.btn-text {
  background: transparent;
  color: var(--color-primary);
  border-color: transparent;
  padding-inline: var(--space-2);
}

.btn-text:hover:not(:disabled) {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ============================================
   Button Sizes
   ============================================ */
.btn-xs {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
}

.btn-xl {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
}

/* ============================================
   Button Modifiers
   ============================================ */

/* Full width */
.btn-block {
  width: 100%;
}

/* Icon only */
.btn-icon {
  padding: var(--space-2);
}

.btn-icon.btn-sm {
  padding: var(--space-1);
}

.btn-icon.btn-lg {
  padding: var(--space-3);
}

/* Icon inside button */
.btn svg,
.btn-icon svg {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

/* ============================================
   Button Groups
   ============================================ */
.btn-group {
  display: inline-flex;
}

.btn-group .btn {
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}

.btn-group .btn:last-child {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.btn-group .btn:not(:last-child) {
  border-right: none;
}

.btn-group .btn.active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: rgba(49, 46, 129, 0.25);
}

/* ============================================
   Segmented Control
   ============================================ */
.segmented-control {
  display: inline-flex;
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
  gap: var(--space-1);
}

.segmented-control-item {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.segmented-control-item:hover:not(.active) {
  color: var(--color-text-primary);
}

.segmented-control-item.active {
  background: var(--color-white);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

/* ============================================
   Loading State
   ============================================ */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

.btn-primary.btn-loading::after,
.btn-accent.btn-loading::after,
.btn-success.btn-loading::after,
.btn-danger.btn-loading::after {
  border-color: rgba(255, 255, 255, 0.3);
  border-right-color: var(--color-white);
}

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

/* ============================================
   Mobile Touch Targets (48px minimum for accessibility)
   ============================================ */
@media (max-width: 768px) {
  .btn {
    min-height: 48px; /* Updated from 44px to 48px */
    padding: var(--space-3) var(--space-4);
  }

  .btn-primary {
    min-height: 48px;
    padding: 12px 24px;
  }

  .btn-sm {
    min-height: 44px; /* Keep smaller for btn-sm */
  }

  .btn-icon {
    min-width: 48px; /* Updated from 44px to 48px */
    min-height: 48px; /* Updated from 44px to 48px */
  }

  .segmented-control-item {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }
}

/* ============================================
   Legacy Compatibility
   ============================================ */

/* btn-gradient now maps to btn-accent (gradient removed for modern look) */
.btn-gradient {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: rgba(49, 46, 129, 0.25);
}

.btn-gradient:hover:not(:disabled) {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* btn-rounded - now default radius is sufficient */
.btn-rounded {
  border-radius: var(--radius-lg);
}

/* ============================================
   Modern Button Enhancements (2025)
   ============================================ */

/* Enhanced hover with subtle translateY */
.btn-lift {
  transition: all var(--transition-base);
}

.btn-lift:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-lift:active:not(:disabled) {
  transform: translateY(0);
}

/* Primary button with enhanced shadow */
.btn-primary-modern {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.btn-primary-modern:hover:not(:disabled) {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

.btn-primary-modern:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

/* Success button with enhanced shadow */
.btn-success-modern {
  background: var(--color-level-green);
  color: var(--color-white);
  border-color: var(--color-level-green);
  box-shadow: 0 2px 8px rgba(88, 204, 2, 0.25);
}

.btn-success-modern:hover:not(:disabled) {
  background: #4BB300;
  border-color: #4BB300;
  box-shadow: 0 4px 12px rgba(88, 204, 2, 0.35);
  transform: translateY(-1px);
}

/* Reward button with gold gradient glow */
.btn-reward {
  background: linear-gradient(135deg, var(--color-xp-gold) 0%, var(--color-streak-orange) 100%);
  color: var(--color-white);
  border: none;
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-reward:hover:not(:disabled) {
  box-shadow: var(--shadow-glow-gold);
  transform: translateY(-2px);
}

.btn-reward:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.25);
}

/* Shimmer effect on reward button */
.btn-reward::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: btn-shimmer 2s infinite;
}

@keyframes btn-shimmer {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

/* Celebration button with bounce animation */
.btn-celebrate {
  animation: celebration-bounce 0.6s var(--ease-spring);
}

/* ============================================
   Ripple Effect
   ============================================ */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 0.8s;
}

.btn-ripple:active::after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}

/* Dark ripple for light buttons */
.btn-secondary.btn-ripple::after,
.btn-ghost.btn-ripple::after {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.1) 10%, transparent 10.01%);
}

/* ============================================
   Icon Button Enhancements
   ============================================ */
.btn-icon-modern {
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.btn-icon-modern:hover:not(:disabled) {
  background: var(--color-gray-50);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-icon-modern:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Circular icon button */
.btn-icon-circle {
  padding: var(--space-3);
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.btn-icon-circle:hover:not(:disabled) {
  background: var(--color-gray-50);
  color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: scale(1.05);
}

/* ============================================
   Floating Action Button
   ============================================ */
.btn-fab {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
  z-index: 1000;
}

.btn-fab:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
  transform: scale(1.1);
}

.btn-fab:active {
  transform: scale(1);
}

.btn-fab svg {
  width: 24px;
  height: 24px;
}

/* Extended FAB */
.btn-fab-extended {
  width: auto;
  height: 48px;
  border-radius: var(--radius-full);
  padding: 0 var(--space-5) 0 var(--space-4);
  gap: var(--space-2);
}

/* ============================================
   Button Badge (notification count)
   ============================================ */
.btn-with-badge {
  position: relative;
}

.btn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  background: var(--color-error);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-white);
}

/* Animated badge pulse */
.btn-badge-pulse {
  animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ============================================
   Reduced Motion Support
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .btn-lift:hover:not(:disabled),
  .btn-primary-modern:hover:not(:disabled),
  .btn-success-modern:hover:not(:disabled),
  .btn-reward:hover:not(:disabled),
  .btn-icon-modern:hover:not(:disabled),
  .btn-icon-circle:hover:not(:disabled),
  .btn-fab:hover {
    transform: none;
  }

  .btn-reward::before {
    animation: none;
  }

  .btn-celebrate {
    animation: none;
  }

  .btn-badge-pulse {
    animation: none;
  }

  .btn-ripple::after {
    display: none;
  }
}


/* ================================================
   components/cards.css
   ================================================ */

/*
 * Card Components
 * Cards, metric cards, and panel layouts
 */

/* ============================================
   Base Card
   ============================================ */
.card {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(31, 30, 27, 0.06);
  border: 1px solid var(--color-border-light);
  transition: box-shadow var(--transition-base);
}

/* Interactive card - subtle shadow increase on hover */
.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ============================================
   Card Variants
   ============================================ */

/* Flat - minimal shadow */
.card-flat {
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  border: none; /* Remove borders */
}

.card-flat:hover {
  /* No border changes needed */
}

.card-flat.card-interactive:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: var(--hover-lift-sm);
}

/* Small card */
.card-sm {
  padding: var(--space-3); /* Smaller padding */
  border-radius: var(--radius-lg); /* 16px */
}

/* Large card */
.card-lg {
  padding: var(--space-8);
  border-radius: var(--radius-lg); /* Updated to use consistent radius */
}

/* Desktop padding adjustments for small/large cards */
@media (min-width: 769px) {
  .card-sm {
    padding: var(--space-4); /* Slightly larger on desktop */
  }
  
  .card-lg {
    padding: 2rem; /* 32px on desktop */
  }
}

/* Highlighted card */
.card-highlighted {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06), 0 0 0 2px var(--color-primary-pale);
  border: none; /* Remove borders */
}

/* ============================================
   Card Structure
   ============================================ */
.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.card-header-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.card-header-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.card-header-actions {
  display: flex;
  gap: var(--space-2);
}

.card-body {
  /* Default body styles */
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

/* ============================================
   Metric Card - Dashboard stats
   ============================================ */
.metric-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-surface);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--color-border-light);
  transition: box-shadow var(--transition-base);
}

.metric-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Desktop padding for metric cards — now 24px by default */

.metric-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.metric-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-xl);
}

/* Icon color variants */
.metric-card-icon-blue {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.metric-card-icon-green {
  background: var(--color-success-pale);
  color: var(--color-success);
}

.metric-card-icon-orange {
  background: var(--color-accent-pale);
  color: var(--color-accent);
}

.metric-card-icon-purple {
  background: #F5EAFA;
  color: #AF52DE;
}

.metric-card-icon-teal {
  background: #E5F6FD;
  color: #5AC8FA;
}

.metric-card-icon-red {
  background: var(--color-error-pale);
  color: var(--color-error);
}

.metric-card-content {
  flex: 1;
}

.metric-card-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.metric-card-value-lg {
  font-size: var(--font-size-4xl);
}

.metric-card-value-sm {
  font-size: var(--font-size-2xl);
}

.metric-card-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.metric-card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
}

.metric-card-change {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--font-weight-medium);
}

.metric-card-change-positive {
  color: var(--color-success);
}

.metric-card-change-negative {
  color: var(--color-error);
}

.metric-card-change-neutral {
  color: var(--color-text-muted);
}

.metric-card-period {
  color: var(--color-text-muted);
}

/* Metric card with sparkline */
.metric-card-sparkline {
  height: 40px;
  margin-top: var(--space-2);
}

/* ============================================
   Stat Cards Grid
   ============================================ */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.stat-cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.stat-cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1200px) {
  .stat-cards-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stat-cards-4,
  .stat-cards-3 {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Property Card - Rentberry-inspired design
   ============================================ */
.property-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(31, 30, 27, 0.06);
  border: 1px solid var(--color-border-light);
  transition: box-shadow var(--transition-base);
}

.property-card:hover {
  box-shadow: 0 2px 8px rgba(31, 30, 27, 0.08);
}

/* Property card list container */
.property-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Horizontal card variant for dashboard lists */
.property-card-horizontal {
  flex-direction: row;
  align-items: stretch;
}

.property-card-horizontal .property-card-image {
  width: 120px;
  min-width: 120px;
  aspect-ratio: auto;
  height: auto;
}

.property-card-horizontal .property-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
}

.property-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-gray-100);
  overflow: hidden;
}

.property-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-image-zoom);
}

/* Rentberry-style image zoom on card hover */
.property-card:hover .property-card-image img {
  transform: scale(var(--image-zoom-scale));
}

.property-card-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}

.property-card-love {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  z-index: 10;
}

.property-card-love:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-xl);
}

.property-card-love.loved,
.property-card-love.active {
  color: var(--color-error);
  background: var(--color-error-pale);
}

.property-card-content {
  padding: var(--spacing-md); /* 20px on mobile, 24px on desktop via media query */
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Desktop padding for property card content */
@media (min-width: 769px) {
  .property-card-content {
    padding: 1.5rem; /* 24px on desktop */
  }
}

.property-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.property-card-location {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.property-card-price {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.property-card-features {
  display: flex;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
}

.property-card-feature {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ============================================
   Empty State Card
   ============================================ */
.empty-state {
  text-align: center;
  padding: var(--space-12);
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border-radius: 50%;
  color: var(--color-text-muted);
}

.empty-state-icon svg {
  width: 32px;
  height: 32px;
}

.empty-state-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.empty-state-description {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   Action Card (Recommendation style)
   ============================================ */
.action-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border-left: 4px solid var(--color-gray-300);
  box-shadow: var(--shadow-card);
  transition: var(--transition-lift);
}

.action-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: var(--hover-lift-sm);
}

.action-card-high {
  border-left-color: var(--color-error);
}

.action-card-medium {
  border-left-color: var(--color-warning);
}

.action-card-low {
  border-left-color: rgba(49, 46, 129, 0.35);
}

.action-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
}

.action-card-content {
  flex: 1;
  min-width: 0;
}

.action-card-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.action-card-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.action-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ============================================
   Property Grid
   ============================================ */
.property-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1200px) {
  .property-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .property-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .property-grid {
    grid-template-columns: 1fr;
  }

  /* ============================================
     Mobile Touch Targets - Ensure 48px minimum
     ============================================ */
  .property-card-love,
  .card .btn,
  .card button,
  .card a.btn,
  .card-header-actions > * {
    min-height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Property Card Enhancements */
.property-card-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-primary-pale), var(--color-beige));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.property-card-love {
  border: none;
  color: var(--color-text-muted);
}

.property-card-love.active,
.property-card-love:hover {
  color: var(--color-error);
}

.property-card-content {
  text-decoration: none;
  color: inherit;
}

.property-card-content:hover {
  text-decoration: none;
}

.property-card-location {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.property-card-location svg {
  flex-shrink: 0;
}

.property-feature {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.property-feature svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.property-card-type {
  margin-top: var(--space-3);
}

/* Card Empty State (inline) */
.card-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
}

.card-empty-icon {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
}

.card-empty-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.card-empty-description {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

/* ============================================
   Apple-Style Card Enhancements (2025)
   ============================================ */

/* Modern base card with enhanced shadows */
.card-modern {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card-modern);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all var(--transition-base);
}

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

/* Glassmorphism card */
.card-glass {
  background: var(--glass-background);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Accent border card - shows accent on hover */
.card-accent {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card-modern);
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  transition: all var(--transition-base);
}

.card-accent:hover {
  border-bottom-color: rgba(49, 46, 129, 0.25);
  box-shadow: var(--shadow-card-hover-modern);
  transform: translateY(-2px);
}

.card-accent-success:hover {
  border-bottom-color: var(--color-level-green);
}

.card-accent-warning:hover {
  border-bottom-color: var(--color-streak-orange);
}

.card-accent-gold:hover {
  border-bottom-color: var(--color-xp-gold);
}

/* Featured card with glow */
.card-featured {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card-modern);
  border: 1px solid rgba(49, 46, 129, 0.25);
  position: relative;
}

.card-featured::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-2xl);
  background: var(--color-primary);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--transition-base);
  filter: blur(12px);
}

.card-featured:hover::before {
  opacity: 0.2;
}

/* ============================================
   Enhanced Metric Card
   ============================================ */
.metric-card-modern {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card-modern);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 3px solid transparent;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.metric-card-modern:hover {
  box-shadow: var(--shadow-card-hover-modern);
  transform: translateY(-2px);
  border-bottom-color: rgba(49, 46, 129, 0.25);
}

.metric-card-modern.metric-success:hover {
  border-bottom-color: var(--color-level-green);
}

.metric-card-modern.metric-warning:hover {
  border-bottom-color: var(--color-streak-orange);
}

.metric-card-modern.metric-gold:hover {
  border-bottom-color: var(--color-xp-gold);
}

/* Subtle background pattern */
.metric-card-modern::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--color-primary-pale) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.metric-card-modern:hover::after {
  opacity: 0.3;
}

/* Modern metric icon */
.metric-icon-modern {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  font-size: 24px;
  background: linear-gradient(135deg, var(--color-primary-pale) 0%, rgba(37, 99, 235, 0.1) 100%);
  color: var(--color-primary);
}

.metric-icon-modern.icon-success {
  background: linear-gradient(135deg, var(--color-level-green-light) 0%, rgba(88, 204, 2, 0.1) 100%);
  color: var(--color-level-green);
}

.metric-icon-modern.icon-gold {
  background: linear-gradient(135deg, var(--color-xp-gold-light) 0%, rgba(255, 215, 0, 0.1) 100%);
  color: var(--color-xp-gold-dark);
}

.metric-icon-modern.icon-orange {
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.15) 0%, rgba(255, 149, 0, 0.05) 100%);
  color: var(--color-streak-orange);
}

/* Value with animated counter support */
.metric-value-animated {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Sparkline area */
.metric-sparkline-area {
  height: 48px;
  margin-top: var(--space-3);
  opacity: 0.8;
}

/* ============================================
   Action Card Priority Variants
   ============================================ */
.action-card-modern {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  border-left: 4px solid var(--color-gray-300);
  box-shadow: var(--shadow-card-modern);
  transition: all var(--transition-base);
  cursor: pointer;
}

.action-card-modern:hover {
  box-shadow: var(--shadow-card-hover-modern);
  transform: translateX(4px);
}

.action-card-modern.priority-urgent {
  border-left-color: var(--color-error);
}

.action-card-modern.priority-urgent:hover {
  background: linear-gradient(90deg, var(--color-error-pale) 0%, var(--color-white) 30%);
}

.action-card-modern.priority-important {
  border-left-color: var(--color-warning);
}

.action-card-modern.priority-important:hover {
  background: linear-gradient(90deg, rgba(255, 204, 0, 0.1) 0%, var(--color-white) 30%);
}

.action-card-modern.priority-normal {
  border-left-color: rgba(49, 46, 129, 0.35);
}

.action-card-modern.priority-normal:hover {
  background: linear-gradient(90deg, var(--color-primary-pale) 0%, var(--color-white) 30%);
}

.action-card-modern.priority-success {
  border-left-color: var(--color-level-green);
}

/* ============================================
   Property Card Enhancements
   ============================================ */
.property-card-modern {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-card-modern);
  transition: all var(--transition-base);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.property-card-modern:hover {
  box-shadow: var(--shadow-float);
  transform: translateY(-4px);
}

.property-card-modern .property-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.property-card-modern .property-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.property-card-modern:hover .property-card-image img {
  transform: scale(1.05);
}

/* Gradient overlay on image */
.property-card-modern .property-card-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.property-card-modern:hover .property-card-image::after {
  opacity: 1;
}

/* ============================================
   Card Animation Utilities
   ============================================ */
.card-enter {
  animation: card-fade-in 0.3s ease forwards;
}

@keyframes card-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger animation for card grids */
.cards-stagger > * {
  animation: card-fade-in 0.4s var(--ease-spring) forwards;
  opacity: 0;
}

.cards-stagger > *:nth-child(1) { animation-delay: 0s; }
.cards-stagger > *:nth-child(2) { animation-delay: 0.05s; }
.cards-stagger > *:nth-child(3) { animation-delay: 0.1s; }
.cards-stagger > *:nth-child(4) { animation-delay: 0.15s; }
.cards-stagger > *:nth-child(5) { animation-delay: 0.2s; }
.cards-stagger > *:nth-child(6) { animation-delay: 0.25s; }
.cards-stagger > *:nth-child(7) { animation-delay: 0.3s; }
.cards-stagger > *:nth-child(8) { animation-delay: 0.35s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card-modern:hover,
  .card-accent:hover,
  .card-featured:hover,
  .metric-card-modern:hover,
  .action-card-modern:hover,
  .property-card-modern:hover {
    transform: none;
  }

  .cards-stagger > * {
    animation: none;
    opacity: 1;
  }
}


/* ================================================
   components/badges.css
   ================================================ */

/*
 * Badge Components
 * Status badges, tags, and indicators
 */

/* ============================================
   Base Badge
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}

/* ============================================
   Badge Colors
   ============================================ */
.badge-blue,
.badge-primary {
  background: var(--color-primary-pale);
  color: var(--color-primary-dark);
}

.badge-green,
.badge-success {
  background: var(--color-success-pale);
  color: var(--color-success-dark);
}

.badge-orange,
.badge-warning {
  background: var(--color-warning-pale);
  color: var(--color-warning-dark);
}

.badge-red,
.badge-error {
  background: var(--color-error-pale);
  color: var(--color-error-dark);
}

.badge-gray {
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
}

.badge-purple {
  background: #F5EAFA;
  color: #AF52DE;
}

.badge-teal {
  background: #E5F6FD;
  color: #0E8AC8;
}

/* ============================================
   Badge Sizes
   ============================================ */
.badge-sm {
  padding: 2px var(--space-2);
  font-size: 10px;
}

.badge-lg {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
}

/* ============================================
   Badge Variants
   ============================================ */

/* Pill - more rounded */
.badge-pill {
  border-radius: var(--radius-full);
}

/* Dot badge - just a circle */
.badge-dot {
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.badge-dot-lg {
  width: 12px;
  height: 12px;
}

.badge-dot-blue {
  background: var(--color-primary);
}

.badge-dot-green {
  background: var(--color-success);
}

.badge-dot-orange {
  background: var(--color-warning);
}

.badge-dot-red {
  background: var(--color-error);
}

/* ============================================
   Status Badges
   ============================================ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-badge-active {
  background: var(--color-success-pale);
  color: var(--color-success-dark);
}

.status-badge-active::before {
  background: var(--color-success);
}

.status-badge-pending {
  background: var(--color-warning-pale);
  color: var(--color-warning-dark);
}

.status-badge-pending::before {
  background: var(--color-warning);
}

.status-badge-inactive {
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
}

.status-badge-inactive::before {
  background: var(--color-gray-400);
}

.status-badge-error {
  background: var(--color-error-pale);
  color: var(--color-error-dark);
}

.status-badge-error::before {
  background: var(--color-error);
}

/* ============================================
   Priority Badges
   ============================================ */
.priority-badge {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  text-transform: none;
  letter-spacing: normal;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.priority-badge-high {
  background: var(--color-error-pale);
  color: var(--color-error);
}

.priority-badge-medium {
  background: var(--color-warning-pale);
  color: var(--color-warning-dark);
}

.priority-badge-low {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

/* ============================================
   Change Badges (for metrics)
   ============================================ */
.change-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.change-badge-positive {
  background: var(--color-success-pale);
  color: var(--color-success);
}

.change-badge-negative {
  background: var(--color-error-pale);
  color: var(--color-error);
}

.change-badge-neutral {
  background: var(--color-gray-100);
  color: var(--color-text-muted);
}

/* ============================================
   Count Badge (notification style)
   ============================================ */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-2);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  background: var(--color-error);
  border-radius: var(--radius-full);
}

.count-badge-sm {
  min-width: 16px;
  height: 16px;
  font-size: 10px;
}

.count-badge-blue {
  background: var(--color-primary);
}

.count-badge-green {
  background: var(--color-success);
}

/* ============================================
   Tags (removable badges)
   ============================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
}

.tag-removable {
  padding-right: var(--space-2);
}

.tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--color-gray-200);
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tag-remove:hover {
  background: var(--color-gray-300);
  color: var(--color-text-primary);
}

.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ============================================
   Role Badges
   ============================================ */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
}

.role-badge-buyer {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.role-badge-seller {
  background: var(--color-success-pale);
  color: var(--color-success-dark);
}

.role-badge-provider {
  background: #F5EAFA;
  color: #AF52DE;
}

.role-badge-admin {
  background: var(--color-gray-800);
  color: var(--color-white);
}

/* ============================================
   Listing Intent Badges
   ============================================ */
.intent-badge {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.intent-badge-sell {
  background: var(--color-success-pale);
  color: var(--color-success-dark);
}

.intent-badge-offers {
  background: var(--color-primary-pale);
  color: var(--color-primary-dark);
}

.intent-badge-exploring {
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
}

/* ============================================
   Verified Buyer Badge
   ============================================ */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #065F46;
  background: #D1FAE5;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 4px;
}


/* ================================================
   components/forms.css
   ================================================ */

/*
 * Form Components
 * Inputs, selects, checkboxes, and form layouts
 */

/* ============================================
   Form Structure
   ============================================ */
.form-group {
  margin-bottom: var(--space-5);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

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

@media (max-width: 768px) {
  .form-row,
  .form-row-3 {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Labels
   ============================================ */
.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.form-label-optional {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.form-label-required::after {
  content: ' *';
  color: var(--color-error);
}

/* ============================================
   Text Inputs - Rentberry-inspired rounded style
   ============================================ */
.form-input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: all var(--transition-fast);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.form-input:hover:not(:disabled) {
  border-color: var(--color-border-hover);
}

.form-input:focus {
  outline: none;
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: 0 0 0 2px rgba(49, 46, 129, 0.15);
}

.form-input:disabled {
  background: var(--color-gray-50);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Input states */
.form-input-error,
.form-input.error {
  border-color: #DC6B6B;
}

.form-input-error:focus,
.form-input.error:focus {
  box-shadow: 0 0 0 2px rgba(220, 107, 107, 0.15);
}

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

/* Input sizes */
.form-input-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-lg);
}

.form-input-lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-2xl);
}

/* ============================================
   Textarea
   ============================================ */
.form-textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  resize: vertical;
  transition: all var(--transition-fast);
}

.form-textarea:focus {
  outline: none;
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* ============================================
   Select - Pill-style dropdowns
   ============================================ */
.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-5);
  padding-right: var(--space-12);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23737373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  appearance: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 48px;
}

.form-select:hover:not(:disabled) {
  border-color: var(--color-border-hover);
}

.form-select:focus {
  outline: none;
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.form-select:disabled {
  background-color: var(--color-gray-50);
  cursor: not-allowed;
}

/* ============================================
   Checkbox & Radio
   ============================================ */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.form-check-input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.form-check-input[type="checkbox"] {
  border-radius: var(--radius-sm);
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}

.form-check-label {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  cursor: pointer;
}

/* Checkbox group */
.form-check-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-check-group-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-6);
}

/* ============================================
   Toggle Switch
   ============================================ */
.form-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.form-toggle-input {
  position: relative;
  width: 48px;
  height: 28px;
  appearance: none;
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.form-toggle-input::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

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

.form-toggle-input:checked::before {
  transform: translateX(20px);
}

.form-toggle-input:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.form-toggle-label {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

/* ============================================
   Help & Error Text
   ============================================ */
.form-help {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.form-error-text {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: #DC6B6B;
}

/* ============================================
   Input with Icon
   ============================================ */
.input-with-icon {
  position: relative;
}

.input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.input-icon-left {
  left: var(--space-4);
}

.input-icon-right {
  right: var(--space-4);
}

.input-with-icon-left .form-input {
  padding-left: var(--space-10);
}

.input-with-icon-right .form-input {
  padding-right: var(--space-10);
}

/* ============================================
   Search Input
   ============================================ */
.search-input-wrapper {
  position: relative;
}

.search-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  padding-left: var(--space-10);
  font-size: var(--font-size-base);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.search-input:focus {
  outline: none;
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: var(--shadow-focus);
}

.search-input-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
}

/* ============================================
   Range/Slider Input
   ============================================ */
.form-range {
  width: 100%;
  height: 6px;
  appearance: none;
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.form-range::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.form-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

/* ============================================
   File Input
   ============================================ */
.form-file {
  display: block;
  width: 100%;
}

.form-file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-10);
  background: var(--color-gray-50);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-2xl);
  cursor: pointer;
  transition: all var(--transition-base);
}

.form-file-label:hover {
  border-color: rgba(49, 46, 129, 0.25);
  background: var(--color-primary-pale);
}

.form-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.form-file-icon {
  width: 48px;
  height: 48px;
  color: var(--color-text-muted);
}

.form-file-text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.form-file-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ============================================
   Form Actions
   ============================================ */
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.form-actions-right {
  justify-content: flex-end;
}

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

/* ============================================
   Inline Form
   ============================================ */
.form-inline {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}

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

/* ============================================
   Form Hint
   ============================================ */
.form-hint {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ============================================
   Checkbox Grid (Card-style selection)
   ============================================ */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

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

.checkbox-card {
  position: relative;
  cursor: pointer;
}

.checkbox-card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: all var(--transition-base);
}

.checkbox-card:hover .checkbox-card-content {
  border-color: rgba(49, 46, 129, 0.25);
  background: var(--color-primary-pale);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.checkbox-card input:checked + .checkbox-card-content {
  border-color: rgba(49, 46, 129, 0.25);
  background: var(--color-primary-pale);
}

.checkbox-card input:focus + .checkbox-card-content {
  box-shadow: var(--shadow-focus);
}

.checkbox-card-icon {
  width: 32px;
  height: 32px;
  color: var(--color-text-muted);
}

.checkbox-card input:checked + .checkbox-card-content .checkbox-card-icon {
  color: var(--color-primary);
}

.checkbox-card-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
}

.checkbox-card input:checked + .checkbox-card-content .checkbox-card-label {
  color: var(--color-primary);
}

/* ============================================
   Radio Group (Card-style selection)
   ============================================ */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.radio-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-base);
}

.radio-card:hover {
  border-color: rgba(49, 46, 129, 0.25);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.radio-card:has(.radio-input:checked) {
  border-color: rgba(49, 46, 129, 0.25);
  background: var(--color-primary-pale);
}

.radio-input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-primary);
}

.radio-card-content {
  flex: 1;
}

.radio-card-label {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.radio-card-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ============================================
   Toggle Switch (Enhanced)
   ============================================ */
.toggle-switch {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.toggle-input {
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
  appearance: none;
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.toggle-input::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.toggle-input:checked {
  background: var(--color-primary);
}

.toggle-input:checked::before {
  transform: translateX(20px);
}

.toggle-input:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.toggle-slider {
  display: none;
}

.toggle-label {
  flex: 1;
}

.toggle-label-text {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.toggle-label-description {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ============================================
   Criteria List (Display styles)
   ============================================ */
.criteria-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.criteria-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-light);
}

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

.criteria-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.criteria-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* ============================================
   Score Weights Sliders
   ============================================ */
.score-weights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}

@media (max-width: 768px) {
  .score-weights-grid {
    grid-template-columns: 1fr;
  }
}

.weight-slider {
  padding: var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
}

.weight-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.weight-slider-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.weight-slider-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  min-width: 40px;
  text-align: right;
}

.weight-slider-input {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-gray-200);
  appearance: none;
  cursor: pointer;
}

.weight-slider-input::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.weight-slider-input::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.weight-slider-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid var(--color-white);
  box-shadow: var(--shadow-sm);
}

.weight-slider-description {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  line-height: 1.4;
}

.score-weights-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.score-weights-total-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.score-weights-total-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.score-weights-total-value.text-success {
  color: var(--color-success);
}

.score-weights-total-value.text-warning {
  color: var(--color-warning);
}

.score-weights-total-value.text-error {
  color: var(--color-error);
}

.score-weights-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ============================================
   Mobile Touch Targets (44px minimum per Apple HIG)
   ============================================ */
@media (max-width: 768px) {
  /* Ensure all text inputs meet 44px minimum */
  .form-input,
  .form-select,
  .search-input {
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  /* Larger checkbox/radio hit targets */
  .form-check {
    min-height: 44px;
    padding: var(--space-2) 0;
  }

  .form-check-input {
    width: 24px;
    height: 24px;
  }

  /* Toggle switch touch targets */
  .form-toggle,
  .toggle-switch {
    min-height: 44px;
  }

  .form-toggle-input,
  .toggle-input {
    min-width: 52px;
    min-height: 32px;
  }

  /* Radio/checkbox cards - larger tap targets */
  .radio-card,
  .checkbox-card-content {
    min-height: 44px;
    padding: var(--space-4);
  }

  /* Range slider thumb - larger for touch */
  .form-range::-webkit-slider-thumb,
  .weight-slider-input::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }

  /* Stack form actions on mobile */
  .form-actions {
    flex-direction: column;
    gap: var(--space-3);
  }

  .form-actions .btn {
    width: 100%;
  }

  /* Inline forms stack on mobile */
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }

  /* File upload larger touch area */
  .form-file-label {
    padding: var(--space-8);
  }
}

/* ============================================
   Google Places Autocomplete
   ============================================ */
.address-autocomplete-container {
  width: 100%;
}

.address-autocomplete-container gmp-place-autocomplete {
  width: 100%;
}

/* Style the Google Places input to match our form inputs */
.address-autocomplete-container input {
  width: 100%;
  height: 44px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.address-autocomplete-container input:focus {
  outline: none;
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: 0 0 0 3px var(--color-primary-pale);
}

.address-autocomplete-container input::placeholder {
  color: var(--color-text-muted);
}

/* ============================================
   Mobile Touch Target Improvements
   ============================================ */
@media (max-width: 768px) {
  /* Larger touch targets for card selections */
  .card.card-flat,
  .property-type-card,
  .property-type-card-inner {
    min-height: 48px;
  }

  /* Feature checkboxes larger on mobile */
  .form-check-input {
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex-shrink: 0;
  }

  /* Ensure card labels have good padding */
  .card.card-flat label,
  .card label {
    padding: var(--space-4);
  }

  /* Select dropdowns need good height */
  .form-select {
    min-height: 48px;
  }
}

/* ============================================
   Form Loading States
   ============================================ */

/* Spinner animation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  vertical-align: middle;
}

.spinner-sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.spinner-lg {
  width: 24px;
  height: 24px;
  border-width: 3px;
}

/* Button loading state */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}

.btn-loading .spinner {
  margin-right: var(--space-2);
}

.btn-loading-text {
  vertical-align: middle;
}

/* Form overlay to prevent interaction during submission */
.form-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  z-index: 10;
  cursor: wait;
}

/* Disabled button styles when loading */
button[disabled].btn-loading,
input[disabled].btn-loading {
  background-color: var(--color-gray-400);
  border-color: var(--color-gray-400);
  color: var(--color-white);
}

button[disabled].btn-loading.btn-primary,
input[disabled].btn-loading.btn-primary {
  background-color: var(--color-primary);
  border-color: rgba(49, 46, 129, 0.25);
}


/* ================================================
   components/navigation.css
   ================================================ */

/*
 * Navigation Components
 * Top nav, sidebar, tabs, and breadcrumbs
 */

/* ============================================
   Top Navigation (Public)
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding: var(--space-4) 0;
  background: rgba(254, 252, 248, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border-light);
  transition: all var(--transition-base);
}

.nav-scrolled {
  box-shadow: var(--shadow-md);
}

.nav-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  height: 36px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: var(--space-8);
}

.nav-links a {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-text-primary);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-dark);
  border-radius: 2px;
  transition: all var(--transition-base);
}

@media (max-width: 768px) {
  .nav {
    padding: var(--space-3) 0;
  }

  .nav-inner {
    padding: 0 var(--space-4);
  }

  .nav-logo {
    height: 32px;
  }

  .nav-links {
    display: none;
  }

  .nav-actions {
    display: none;
  }

  .nav-toggle {
    display: flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================
   Mobile Navigation Drawer
   Copied from working test page with !important
   ============================================ */
.mobile-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0,0,0,0.5) !important;
  z-index: 9998 !important;
}

.mobile-overlay-visible {
  display: block !important;
}

.mobile-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 280px !important;
  background: #fff !important;
  z-index: 9999 !important;
  transform: translateX(100%) !important;
  transition: transform 0.3s ease !important;
  padding: 20px !important;
  overflow-y: auto !important;
}

.mobile-drawer-open {
  transform: translateX(0) !important;
}

.mobile-drawer-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #eee !important;
  margin-bottom: 16px !important;
}

.mobile-drawer-title {
  font-size: 18px !important;
  font-weight: 600 !important;
}

.mobile-drawer-close {
  width: 44px !important;
  height: 44px !important;
  background: none !important;
  border: none !important;
  font-size: 24px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mobile-drawer-links {
  display: flex !important;
  flex-direction: column !important;
}

.mobile-drawer-link {
  display: block !important;
  padding: 16px !important;
  color: #333 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
}

.mobile-drawer-link:hover,
.mobile-drawer-link.active {
  background: #f0f0f0 !important;
}

.mobile-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-light);
}

/* Hamburger animation */
.nav-toggle-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Prevent body scroll when drawer is open */
body.mobile-nav-open {
  overflow: hidden;
}

/* Mobile touch targets for sidebar nav items */
@media (max-width: 1024px) {
  .nav-item {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }

  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  /* Tabs touch targets */
  .tab {
    min-height: 44px;
    padding: var(--space-3) var(--space-5);
  }

  /* Pills touch targets */
  .pill {
    min-height: 40px;
    padding: var(--space-3) var(--space-4);
  }
}

/* ============================================
   Sidebar Navigation (Dashboard) - Modern Light Theme
   Collapsible with smooth transitions
   ============================================ */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width-expanded);
  background: var(--color-background);
  border-right: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  z-index: var(--z-sticky);
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--sidebar-transition);
  box-shadow: var(--shadow-soft);
}

/* Collapsed state */
.sidebar.sidebar-collapsed {
  width: var(--sidebar-width-collapsed);
}

/* Sidebar header */
.sidebar-header {
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.sidebar-collapsed .sidebar-header {
  padding: var(--space-5) var(--space-3);
  justify-content: center;
}

/* Collapse toggle button */
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-gray-100);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
  background: var(--color-gray-200);
  color: var(--color-text-primary);
}

.sidebar-collapse-btn svg {
  transition: transform var(--transition-base);
}

.sidebar-collapsed .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

.sidebar-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-gray-100);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}

.sidebar-close-btn:hover {
  background: var(--color-gray-200);
  color: var(--color-text-primary);
}

@media (max-width: 1024px) {
  .sidebar-close-btn {
    display: flex;
  }
  .sidebar-collapse-btn {
    display: none;
  }
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  overflow: hidden;
}

.sidebar-logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  flex-shrink: 0;
  box-shadow: var(--shadow-button);
}

.sidebar-logo-text {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  white-space: nowrap;
  opacity: 1;
  transition: opacity var(--transition-fast);
}

.sidebar-logo-text span {
  color: var(--color-primary);
}

.sidebar-collapsed .sidebar-logo-text {
  opacity: 0;
  width: 0;
}

/* User/Customer selector */
.customer-selector {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.sidebar-collapsed .customer-selector {
  padding: var(--space-3);
}

.customer-selector-button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  background: var(--color-gray-50);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-fast);
  overflow: hidden;
}

.customer-selector-button:hover {
  background: var(--color-gray-100);
  border-color: var(--color-border-hover);
}

.sidebar-collapsed .customer-selector-button {
  padding: var(--space-2);
  justify-content: center;
  border-radius: var(--radius-lg);
}

.customer-avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.customer-info {
  flex: 1;
  text-align: left;
  min-width: 0;
  overflow: hidden;
}

.sidebar-collapsed .customer-info {
  display: none;
}

.customer-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-selector-chevron {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.sidebar-collapsed .customer-selector-chevron {
  display: none;
}

/* Sidebar nav */
.sidebar-nav {
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-collapsed .sidebar-nav {
  padding: var(--space-3);
}

/* Nav section */
.nav-section {
  margin-bottom: var(--space-5);
}

.nav-section-title {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--transition-fast);
}

.sidebar-collapsed .nav-section-title {
  opacity: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

/* Nav item */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  color: var(--color-text-secondary);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all var(--transition-fast);
  margin-bottom: var(--space-1);
  position: relative;
  overflow: hidden;
}

.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: var(--space-3);
}

.nav-item:hover {
  background: var(--color-gray-100);
  color: var(--color-text-primary);
}

.nav-item.active {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background: var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.sidebar-collapsed .nav-item.active::before {
  display: none;
}

.nav-item-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-item-icon svg {
  width: 20px;
  height: 20px;
}

.nav-item-label {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--transition-fast);
}

.sidebar-collapsed .nav-item-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* Nav item badge */
.nav-item-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-2);
  background: var(--color-error);
  color: var(--color-white);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.sidebar-collapsed .nav-item-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  font-size: 9px;
  padding: 0 var(--space-1);
}

.nav-item-badge-blue {
  background: var(--color-primary);
}

.nav-item-badge-green {
  background: var(--color-success);
}

.nav-item-badge-orange {
  background: var(--color-streak-orange);
}

/* Highlighted nav item (AI Chat) */
.nav-item-highlight {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  box-shadow: var(--shadow-button);
}

.nav-item-highlight:hover {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  color: var(--color-white);
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-1px);
}

.nav-item-highlight.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
}

.nav-item-highlight.active::before {
  display: none;
}

/* Sidebar footer */
.sidebar-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.sidebar-collapsed .sidebar-footer {
  padding: var(--space-3);
}

/* Tooltip for collapsed state */
.nav-item-tooltip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-gray-900);
  color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  z-index: var(--z-tooltip);
  box-shadow: var(--shadow-lg);
}

.nav-item-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: var(--color-gray-900);
}

.sidebar-collapsed .nav-item:hover .nav-item-tooltip {
  opacity: 1;
  visibility: visible;
}

/* XP Widget in sidebar (shown at bottom of nav) */
.sidebar-xp-widget {
  margin-top: auto;
  padding: var(--space-4);
  margin: var(--space-4);
  background: linear-gradient(135deg, var(--color-xp-gold-light) 0%, var(--color-white) 100%);
  border: 1px solid var(--color-xp-gold);
  border-radius: var(--radius-xl);
}

.sidebar-collapsed .sidebar-xp-widget {
  padding: var(--space-3);
  margin: var(--space-2);
}

.sidebar-xp-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.sidebar-xp-icon {
  font-size: 20px;
}

.sidebar-xp-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-xp-gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar-collapsed .sidebar-xp-label {
  display: none;
}

.sidebar-xp-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-xp-gold-dark);
  line-height: 1;
}

.sidebar-collapsed .sidebar-xp-value {
  font-size: var(--font-size-sm);
  text-align: center;
}

/* ============================================
   Tabs
   ============================================ */
.tabs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  width: fit-content;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.tab:hover {
  color: var(--color-text-primary);
  background: var(--color-white);
}

.tab.active,
.tab.tab-active {
  color: var(--color-primary);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

/* Tab badges */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-2);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  background: var(--color-gray-200);
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
}

.tab.active .tab-badge,
.tab.tab-active .tab-badge {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.tab-badge-success {
  background: var(--color-success-pale);
  color: var(--color-success);
}

.tab-badge-warning {
  background: var(--color-warning-pale);
  color: var(--color-warning-dark);
}

.tab-badge-error {
  background: var(--color-error-pale);
  color: var(--color-error);
}

/* Underline tab variant (for areas where segmented control doesn't fit) */
.tabs-underline {
  background: transparent;
  padding: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  width: 100%;
  gap: 0;
}

.tabs-underline .tab {
  border-radius: 0;
  padding: var(--space-3) var(--space-4);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}

.tabs-underline .tab:hover {
  background: transparent;
  border-bottom-color: var(--color-gray-300);
}

.tabs-underline .tab.active,
.tabs-underline .tab.tab-active {
  background: transparent;
  box-shadow: none;
  border-bottom-color: rgba(49, 46, 129, 0.25);
}

/* ============================================
   Pills (Button-style tabs)
   ============================================ */
.pills {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pill {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-gray-100);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pill:hover {
  background: var(--color-gray-200);
  color: var(--color-text-primary);
}

.pill.active {
  background: var(--color-dark);
  color: var(--color-white);
}

/* ============================================
   Breadcrumbs
   ============================================ */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.breadcrumb-item {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb-item:hover {
  color: var(--color-primary);
}

.breadcrumb-separator {
  color: var(--color-text-muted);
}

.breadcrumb-current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* ============================================
   Page Header
   ============================================ */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.page-header-content {
  flex: 1;
}

.page-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.page-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .page-header-actions {
    flex-wrap: wrap;
  }
}

/* ============================================
   Section Header
   ============================================ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ============================================
   Promotional Banner (Logged-out users)
   ============================================ */
.promo-banner {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: calc(var(--z-sticky) - 1);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  padding: var(--space-3) 0;
  box-shadow: var(--shadow-sm);
}

.promo-banner-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.promo-banner-icon {
  color: var(--color-white);
  opacity: 0.9;
  flex-shrink: 0;
}

.promo-banner-text {
  color: var(--color-white);
  font-size: var(--font-size-sm);
  text-align: center;
}

.promo-banner-text strong {
  font-weight: var(--font-weight-semibold);
}

.promo-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.promo-banner-cta:hover {
  background: var(--color-gray-100);
  transform: translateX(2px);
}

.promo-banner-cta svg {
  transition: transform var(--transition-fast);
}

.promo-banner-cta:hover svg {
  transform: translateX(2px);
}

@media (max-width: 768px) {
  .promo-banner {
    top: 60px;
    padding: var(--space-2) 0;
  }

  .promo-banner-inner {
    flex-direction: column;
    gap: var(--space-2);
  }

  .promo-banner-icon {
    display: none;
  }

  .promo-banner-text {
    font-size: var(--font-size-xs);
  }
}

/* ============================================
   Guest Sidebar (Non-logged-in users) - Light Theme
   ============================================ */
.guest-welcome {
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.guest-welcome-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.guest-welcome-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.guest-signup-form {
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.guest-form-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}

.sidebar-form .form-group {
  margin-bottom: var(--space-3);
}

.form-input-sidebar {
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  width: 100%;
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
}

.form-input-sidebar::placeholder {
  color: var(--color-text-muted);
}

.form-input-sidebar:focus {
  outline: none;
  border-color: rgba(49, 46, 129, 0.25);
  background: var(--color-white);
  box-shadow: var(--shadow-focus);
}

.btn-full {
  width: 100%;
  justify-content: center;
}

.guest-login-link {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  text-align: center;
  margin: var(--space-4) 0 0;
}

.guest-login-link a {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.guest-login-link a:hover {
  color: var(--color-primary-dark);
}

.guest-benefits {
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.guest-benefits-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.guest-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.guest-benefit-item:last-child {
  margin-bottom: 0;
}

.guest-benefit-icon {
  width: 32px;
  height: 32px;
  background: var(--color-primary-pale);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

.guest-benefit-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.guest-benefit-text strong {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.guest-benefit-text span {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.guest-nav {
  flex: 1;
  padding: var(--space-4);
}

.guest-nav .nav-item.active {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}


/* ================================================
   components/bottom-tabs.css
   ================================================ */

/*
 * Mobile Bottom Tab Bar Navigation
 * Clean, modern design with translucent background
 */

/* ============================================
   Bottom Tab Bar
   ============================================ */
.bottom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: rgba(254, 252, 248, 0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: calc(var(--z-sticky) + 10); /* Above content but below modals */
  padding-bottom: env(safe-area-inset-bottom); /* iPhone notch padding */
  box-shadow: 0 -2px 8px rgba(31, 30, 27, 0.06);
}

/* Hide on desktop */
@media (min-width: 769px) {
  .bottom-tab-bar {
    display: none;
  }
}

/* ============================================
   Individual Tab Styling
   ============================================ */
.bottom-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--color-gray-400);
  transition: all var(--transition-fast);
  padding: var(--space-2) var(--space-1);
  min-width: 44px; /* Touch target */
  min-height: 44px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  flex: 1;
  max-width: 80px;
}

.bottom-tab:hover {
  color: var(--color-text-secondary);
}

.bottom-tab-active {
  color: var(--color-primary);
}

/* Special styling for Reasy AI tab */
.bottom-tab-reasy {
  color: var(--color-primary);
}

.bottom-tab-reasy:hover {
  color: var(--color-primary-dark);
}

/* ============================================
   Tab Icons
   ============================================ */
.bottom-tab-icon {
  width: 24px;
  height: 24px;
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bottom-tab-icon svg {
  width: 22px;
  height: 22px;
  transition: all var(--transition-fast);
}

/* ============================================
   Tab Labels
   ============================================ */
.bottom-tab-label {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* ============================================
   Badge for Saved Count
   ============================================ */
.bottom-tab-badge {
  position: absolute;
  top: 2px;
  right: 50%;
  transform: translateX(50%);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--color-error);
  color: var(--color-white);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ============================================
   Layout Adjustments for Mobile Bottom Bar
   ============================================ */
@media (max-width: 768px) {
  /* Add bottom padding to main content so it's not hidden behind the tab bar */
  .layout-main {
    padding-bottom: calc(56px + env(safe-area-inset-bottom) + var(--space-4));
  }
  
  /* Hide the hamburger menu on mobile when bottom bar is present */
  .mobile-menu-toggle {
    display: none;
  }
  
  /* Adjust mobile header to account for missing hamburger menu */
  .mobile-header {
    padding: var(--space-4);
  }
  
  /* Hide the floating "Ask Reasy" button on mobile */
  .reasy-fab {
    display: none;
  }
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 480px) {
  .bottom-tab-label {
    font-size: 10px;
  }
  
  .bottom-tab-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* ============================================
   Dark Mode Support (if implemented)
   ============================================ */
@media (prefers-color-scheme: dark) {
  .bottom-tab-bar {
    background: rgba(0, 0, 0, 0.95);
    border-top-color: rgba(255, 255, 255, 0.1);
  }
}

/* ================================================
   components/alerts.css
   ================================================ */

/*
 * Alert Components
 * Notifications, flash messages, and inline alerts
 */

/* ============================================
   Base Alert
   ============================================ */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

.alert-description {
  color: inherit;
  opacity: 0.9;
}

.alert-close {
  flex-shrink: 0;
  padding: var(--space-1);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.alert-close:hover {
  opacity: 1;
}

/* Alert dismiss button */
.alert-dismiss {
  flex-shrink: 0;
  margin-left: auto;
  padding: var(--space-1);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
  color: inherit;
}

.alert-dismiss:hover {
  opacity: 1;
}

/* Auto-dismiss flash animations */
.flash-auto-dismiss {
  animation: flash-slide-in 0.3s var(--ease-out);
}

@keyframes flash-slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flash-dismissing {
  animation: flash-fade-out 0.3s var(--ease-in) forwards;
}

@keyframes flash-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* ============================================
   Alert Variants
   ============================================ */
.alert-success {
  background: var(--color-success-pale);
  color: var(--color-success-dark);
  border: 1px solid var(--color-success);
}

.alert-error {
  background: var(--color-error-pale);
  color: var(--color-error-dark);
  border: 1px solid var(--color-error);
}

.alert-warning {
  background: var(--color-warning-pale);
  color: var(--color-warning-dark);
  border: 1px solid var(--color-warning);
}

.alert-info {
  background: var(--color-primary-pale);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary-light);
}

.alert-neutral {
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* ============================================
   Alert with Actions
   ============================================ */
.alert-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* ============================================
   Flash Messages (Rails flash)
   ============================================ */
.flash-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 400px;
}

.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  animation: flash-in 0.3s var(--ease-out);
}

@keyframes flash-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.flash-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.flash-success .flash-icon {
  background: var(--color-success-pale);
  color: var(--color-success);
}

.flash-error .flash-icon {
  background: var(--color-error-pale);
  color: var(--color-error);
}

.flash-warning .flash-icon {
  background: var(--color-warning-pale);
  color: var(--color-warning);
}

.flash-info .flash-icon {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.flash-content {
  flex: 1;
}

.flash-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.flash-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.flash-close {
  flex-shrink: 0;
  padding: var(--space-1);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.flash-close:hover {
  color: var(--color-text-primary);
}

/* ============================================
   Info Banner (Preferred info style)
   ============================================ */
.info-banner {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-primary-pale);
  border-radius: var(--radius-lg);
  border-left: 4px solid rgba(49, 46, 129, 0.35);
}

.info-banner-icon {
  flex-shrink: 0;
  color: var(--color-primary);
}

.info-banner-icon svg {
  width: 20px;
  height: 20px;
}

.info-banner-content {
  flex: 1;
}

.info-banner-content strong {
  display: block;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-1);
}

.info-banner-content p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Info banner variants */
.info-banner-warning {
  background: var(--color-warning-pale);
  border-left-color: var(--color-warning);
}

.info-banner-warning .info-banner-icon {
  color: var(--color-warning);
}

.info-banner-warning .info-banner-content strong {
  color: var(--color-warning-dark);
}

.info-banner-success {
  background: var(--color-success-pale);
  border-left-color: var(--color-success);
}

.info-banner-success .info-banner-icon {
  color: var(--color-success);
}

.info-banner-success .info-banner-content strong {
  color: var(--color-success-dark);
}

/* ============================================
   Inline Notice
   ============================================ */
.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  border-left: 4px solid rgba(49, 46, 129, 0.35);
}

.notice-icon {
  flex-shrink: 0;
  color: var(--color-primary);
}

.notice-content {
  flex: 1;
}

.notice-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.notice-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Notice variants */
.notice-warning {
  border-left-color: var(--color-warning);
}

.notice-warning .notice-icon {
  color: var(--color-warning);
}

.notice-error {
  border-left-color: var(--color-error);
}

.notice-error .notice-icon {
  color: var(--color-error);
}

.notice-success {
  border-left-color: var(--color-success);
}

.notice-success .notice-icon {
  color: var(--color-success);
}

/* ============================================
   Callout (AI Assistant style)
   ============================================ */
.callout {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-beige-light);
  border-radius: var(--radius-lg);
}

.callout-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  font-size: var(--font-size-base);
}

.callout-content {
  flex: 1;
}

.callout-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.callout-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* ============================================
   Banner (Full width)
   ============================================ */
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-sm);
}

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

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

.banner a {
  color: inherit;
  text-decoration: underline;
}

.banner-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.8;
}

.banner-close:hover {
  opacity: 1;
}

/* ============================================
   Toast Notifications (Auto-dismiss)
   ============================================ */
.toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 400px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.05);
  animation: toast-in 0.3s var(--ease-out);
  pointer-events: auto;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(100%) scale(0.95);
  }
}

.toast-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-success .toast-icon {
  color: var(--color-success);
}

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

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

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

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
}

.toast-close {
  flex-shrink: 0;
  padding: var(--space-1);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.toast-close:hover {
  color: var(--color-text-primary);
  background: var(--color-gray-100);
}

/* Mobile positioning */
@media (max-width: 480px) {
  .toast-container {
    top: auto;
    bottom: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    max-width: none;
  }

  .toast {
    animation-name: toast-in-mobile;
  }

  @keyframes toast-in-mobile {
    from {
      opacity: 0;
      transform: translateY(100%) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}


/* ================================================
   components/tables.css
   ================================================ */

/*
 * Table Components
 * Data tables with sorting, pagination
 */

/* ============================================
   Table Container
   ============================================ */
.table-container {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
}

.table-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.table-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.table-wrapper {
  overflow-x: auto;
}

/* ============================================
   Base Table
   ============================================ */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.table th,
.table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  vertical-align: middle;
}

.table th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.table td {
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-light);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

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

/* ============================================
   Sortable Headers
   ============================================ */
.table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-fast);
}

.table th.sortable:hover {
  color: var(--color-text-primary);
}

.table th.sortable::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: var(--space-2);
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.3;
}

.table th.sortable.asc::after {
  opacity: 1;
  border-top: none;
  border-bottom: 4px solid currentColor;
}

.table th.sortable.desc::after {
  opacity: 1;
}

/* ============================================
   Cell Variants
   ============================================ */
.table-cell-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table-cell-center {
  text-align: center;
}

.table-cell-nowrap {
  white-space: nowrap;
}

.table-cell-primary {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* ============================================
   Table Variants
   ============================================ */
.table-compact th,
.table-compact td {
  padding: var(--space-3) var(--space-4);
}

.table-striped tbody tr:nth-child(even) {
  background: var(--color-gray-50);
}

.table-striped tbody tr:hover {
  background: var(--color-gray-100);
}

/* ============================================
   Row States
   ============================================ */
.table-row-success {
  background: var(--color-success-pale) !important;
}

.table-row-warning {
  background: var(--color-warning-pale) !important;
}

.table-row-error {
  background: var(--color-error-pale) !important;
}

.table-row-selected {
  background: var(--color-primary-pale) !important;
}

/* ============================================
   Table Footer
   ============================================ */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-light);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ============================================
   Pagination
   ============================================ */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pagination-item {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pagination-item:hover:not(:disabled) {
  background: var(--color-gray-100);
  color: var(--color-text-primary);
}

.pagination-item.active {
  background: var(--color-primary);
  color: var(--color-white);
}

.pagination-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-ellipsis {
  color: var(--color-text-muted);
  padding: 0 var(--space-2);
}

/* ============================================
   Expandable Rows
   ============================================ */
.table-row-expandable {
  cursor: pointer;
}

.table-row-expandable td:first-child::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: var(--space-2);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.table-row-expandable.expanded td:first-child::before {
  transform: rotate(90deg);
}

.table-row-details {
  display: none;
}

.table-row-details.visible {
  display: table-row;
}

.table-row-details td {
  padding: var(--space-4) var(--space-6);
  background: var(--color-gray-50);
}

/* ============================================
   Performance Indicators
   ============================================ */
.performance-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
}

.performance-indicator-excellent {
  background: var(--color-success-pale);
  color: var(--color-success-dark);
}

.performance-indicator-good {
  background: var(--color-primary-pale);
  color: var(--color-primary-dark);
}

.performance-indicator-average {
  background: var(--color-warning-pale);
  color: var(--color-warning-dark);
}

.performance-indicator-poor {
  background: var(--color-error-pale);
  color: var(--color-error-dark);
}

/* ============================================
   Empty Table State
   ============================================ */
.table-empty {
  padding: var(--space-12);
  text-align: center;
}

.table-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  color: var(--color-text-muted);
}

.table-empty-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.table-empty-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ============================================
   Mobile Responsive Tables
   ============================================ */
@media (max-width: 768px) {
  .table-container {
    border-radius: var(--radius-md);
  }

  .table-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .table-actions {
    flex-wrap: wrap;
  }

  .table-wrapper {
    /* Enable horizontal scroll on mobile */
    -webkit-overflow-scrolling: touch;
  }

  .table th,
  .table td {
    padding: var(--space-3);
    font-size: var(--font-size-sm);
  }

  /* Compact mode for mobile */
  .table-compact th,
  .table-compact td {
    padding: var(--space-2);
  }

  .table-footer {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    text-align: center;
  }

  .pagination {
    justify-content: center;
    flex-wrap: wrap;
  }

  .pagination-item {
    min-width: 40px;
    height: 40px;
  }

  /* Card-style table for mobile (apply .table-mobile-cards class) */
  .table-mobile-cards thead {
    display: none;
  }

  .table-mobile-cards tbody {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .table-mobile-cards tbody tr {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
  }

  .table-mobile-cards tbody tr:hover {
    background: var(--color-surface);
  }

  .table-mobile-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
  }

  .table-mobile-cards td:last-child {
    border-bottom: none;
  }

  .table-mobile-cards td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    margin-right: var(--space-3);
  }
}

/* Hide columns on mobile (apply .hide-mobile class to th/td) */
@media (max-width: 768px) {
  .hide-mobile {
    display: none;
  }
}

/* Show columns only on tablet and up */
@media (max-width: 1024px) {
  .hide-tablet {
    display: none;
  }
}


/* ================================================
   components/scores.css
   ================================================ */

/*
 * Score Components
 * Reasy Score badges, rings, and breakdown displays
 */

/* ============================================
   Score Badge (Property Cards)
   ============================================ */
.property-card-score {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  z-index: 2;
}

.reasy-score-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-md);
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.9);
}

.reasy-score-badge svg {
  width: 12px;
  height: 12px;
}

.top-investment-badge {
  position: absolute;
  top: calc(var(--space-3) + 28px);
  left: var(--space-3);
  z-index: 2;
}

/* ============================================
   Score Ring (Circular Progress)
   ============================================ */
.score-ring-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.score-ring-value {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.score-ring-value .score-number {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.score-ring-value .score-max {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Smaller ring for cards */
.score-ring-sm .score-number {
  font-size: var(--font-size-sm);
}

.score-ring-sm .score-max {
  display: none;
}

/* ============================================
   Score Overview Card (Detail Page)
   ============================================ */
.property-score-section {
  background: var(--color-white);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.score-overview-card {
  background: var(--color-gray-50);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}

.score-overview-main {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.score-overview-info {
  flex: 1;
}

.score-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.score-label {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
}

.score-label.badge-green {
  background: var(--color-success-pale);
  color: var(--color-success-dark);
}

.score-label.badge-blue {
  background: var(--color-primary-pale);
  color: var(--color-primary-dark);
}

.score-label.badge-orange {
  background: var(--color-warning-pale);
  color: var(--color-warning-dark);
}

.score-label.badge-red {
  background: var(--color-error-pale);
  color: var(--color-error-dark);
}

.score-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.score-expand-btn:hover {
  background: var(--color-gray-50);
  border-color: var(--color-border-hover);
}

.score-expand-btn svg {
  transition: transform var(--transition-fast);
}

.score-expand-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ============================================
   Score Bars (Hero Section)
   ============================================ */
.score-bars-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 280px;
}

.score-bar-row {
  display: grid;
  grid-template-columns: 70px 1fr 60px;
  align-items: center;
  gap: var(--space-3);
}

.score-bar-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.score-bar-track {
  height: 8px;
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s ease-out;
  background: var(--color-gray-400); /* Default fallback */
}

.score-bar-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: right;
}

/* Score bar colors by component */
.score-bar-fill-growth_score {
  background: var(--color-success);
}

.score-bar-fill-safety {
  background: var(--color-warning);
}

.score-bar-fill-transport {
  background: var(--color-primary);
}

.score-bar-fill-hazard {
  background: var(--color-error);
}

.score-bar-fill-education {
  background: #6366f1; /* Indigo */
}

.score-bar-fill-rental_yield {
  background: #06b6d4; /* Cyan */
}

.score-bar-fill-tenant_quality {
  background: #8b5cf6; /* Purple */
}

.score-bar-fill-socioeconomic {
  background: #14b8a6; /* Teal */
}

@media (max-width: 768px) {
  .score-bars-container {
    min-width: 100%;
  }

  .score-bar-row {
    grid-template-columns: 60px 1fr 50px;
    gap: var(--space-2);
  }

  .score-bar-label {
    font-size: var(--font-size-xs);
  }
}

/* ============================================
   Score Breakdown Panel
   ============================================ */
.score-breakdown-panel {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.score-breakdown-panel[hidden] {
  display: none;
}

.score-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.score-breakdown-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
}

.breakdown-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.breakdown-icon svg {
  width: 20px;
  height: 20px;
}

.breakdown-content {
  flex: 1;
  min-width: 0;
}

.breakdown-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1);
}

.breakdown-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.breakdown-period {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.breakdown-score {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: var(--space-1) 0 0;
}

.breakdown-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

.score-breakdown-disclaimer {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
}

/* ============================================
   Change/Trend Badges
   ============================================ */
.change-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
}

.change-badge-positive {
  background: var(--color-success-pale);
  color: var(--color-success-dark);
}

.change-badge-negative {
  background: var(--color-error-pale);
  color: var(--color-error-dark);
}

.change-badge-neutral {
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
}

/* ============================================
   Recommended Section
   ============================================ */
.recommended-section {
  background: var(--color-primary-pale);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.recommended-section .section-header {
  margin-bottom: var(--space-4);
}

.recommended-section .section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
}

.recommended-section .section-title svg {
  width: 20px;
  height: 20px;
  color: var(--color-warning);
}

.recommended-section .section-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.recommended-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.recommended-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition-lift);
}

.recommended-card:hover {
  box-shadow: var(--shadow-card-lift);
  transform: var(--hover-lift-sm);
}

.recommended-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-gray-100);
}

.recommended-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recommended-score {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: 50%;
  padding: var(--space-1);
  box-shadow: var(--shadow-md);
}

.recommended-score .score-value {
  position: absolute;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.recommended-card-content {
  padding: var(--space-3);
}

.recommended-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recommended-location {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.recommended-price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0;
}

.recommended-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 1024px) {
  .recommended-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .score-overview-main {
    flex-direction: column;
    text-align: center;
  }

  .score-breakdown-grid {
    grid-template-columns: 1fr;
  }

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

  .recommended-section {
    padding: var(--space-4);
  }
}


/* ================================================
   components/journey.css
   ================================================ */

/*
 * Journey Components
 * Gamification, progress tracking, and achievement styles
 */

/* ============================================
   Active Processes Section (Dashboard)
   ============================================ */
.active-processes-section {
  margin-bottom: var(--space-6);
}

.active-processes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.active-processes-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.active-processes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .active-processes-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Process Progress Hero
   ============================================ */
.process-hero {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-6);
}

.process-hero-image {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  height: 150px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.process-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.process-hero-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  color: var(--color-gray-400);
}

.process-hero-type-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-md);
}

.process-hero-type-badge.type-selling {
  background: var(--color-success);
  color: var(--color-white);
}

.process-hero-type-badge.type-buying {
  background: var(--color-primary);
  color: var(--color-white);
}

.process-hero-type-badge.type-renting {
  background: var(--color-warning);
  color: var(--color-white);
}

.process-hero-type-badge.type-leasing {
  background: var(--color-accent, #9333EA);
  color: var(--color-white);
}

.process-hero-content {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  flex: 1;
}

.process-hero-ring {
  position: relative;
  flex-shrink: 0;
}

.process-hero-ring .ring-bg {
  stroke: var(--color-gray-100);
}

.process-hero-ring .ring-progress {
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

.process-hero-ring .ring-selling { stroke: var(--color-success); }
.process-hero-ring .ring-buying { stroke: var(--color-primary); }
.process-hero-ring .ring-renting { stroke: var(--color-warning); }
.process-hero-ring .ring-leasing { stroke: var(--color-accent, #9333EA); }

.process-hero-ring .ring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.process-hero-ring .ring-percent {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.process-hero-info {
  flex: 1;
}

.process-hero-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.process-hero-address {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.process-hero-phase {
  margin-bottom: var(--space-3);
}

.process-hero-phase .phase-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
}

.process-hero-phase .phase-badge.phase-preparation { background: var(--color-primary-pale); color: var(--color-primary-dark); }
.process-hero-phase .phase-badge.phase-listing { background: var(--color-info-pale); color: var(--color-info-dark); }
.process-hero-phase .phase-badge.phase-offers { background: var(--color-warning-pale); color: var(--color-warning-dark); }
.process-hero-phase .phase-badge.phase-settlement { background: var(--color-success-pale); color: var(--color-success-dark); }

.process-hero-stats {
  display: flex;
  gap: var(--space-6);
}

.process-hero-stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.process-hero-stat .stat-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.process-hero-stat .stat-value.stat-points {
  color: var(--color-xp-gold-dark);
}

.process-hero-stat .stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .process-hero {
    flex-direction: column;
  }

  .process-hero-image {
    width: 100%;
    height: 180px;
  }

  .process-hero-content {
    flex-direction: column;
    text-align: center;
  }

  .process-hero-stats {
    justify-content: center;
  }
}

/* ============================================
   Next Action Card (Urgency-focused)
   ============================================ */
.next-action-card {
  position: relative;
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--color-primary-pale) 0%, var(--color-white) 100%);
  border: 1px solid rgba(49, 46, 129, 0.25);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-5);
}

.next-action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-progress);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.next-action-card.urgent {
  background: linear-gradient(135deg, var(--color-warning-pale) 0%, var(--color-white) 100%);
  border-color: var(--color-warning);
}

.next-action-card.urgent::before {
  background: linear-gradient(90deg, var(--color-warning), var(--color-error));
}

.next-action-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.next-action-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
}

.next-action-card.urgent .next-action-badge {
  background: var(--color-warning);
  color: var(--color-warning-dark);
}

.next-action-points {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-xp-gold-dark);
  background: var(--color-xp-gold-light);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
}

.next-action-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.next-action-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
}

.next-action-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.next-action-urgency {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.next-action-urgency svg {
  flex-shrink: 0;
}

.urgency-critical {
  color: var(--color-error);
  font-weight: var(--font-weight-semibold);
}

.urgency-warning {
  color: var(--color-warning-dark);
  font-weight: var(--font-weight-medium);
}

.urgency-info {
  color: var(--color-text-muted);
}

/* ============================================
   Process Timeline (Horizontal Phase Indicator)
   ============================================ */
.process-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
  overflow-x: auto;
}

.process-timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  min-width: 80px;
}

.process-timeline-dot {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: all var(--transition-fast);
}

.process-timeline-item.completed .process-timeline-dot {
  background: var(--color-success);
}

.process-timeline-item.current .process-timeline-dot {
  background: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-pale);
}

.process-timeline-dot .dot-pulse {
  width: 8px;
  height: 8px;
  background: var(--color-white);
  border-radius: var(--radius-full);
  animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.8); }
}

.process-timeline-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
}

.process-timeline-item.completed .process-timeline-label {
  color: var(--color-success-dark);
}

.process-timeline-item.current .process-timeline-label {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.process-timeline-connector {
  flex: 1;
  height: 3px;
  min-width: 20px;
  background: var(--color-gray-200);
  margin: 0 var(--space-2);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-full);
}

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

@media (max-width: 640px) {
  .process-timeline {
    padding: var(--space-3);
  }

  .process-timeline-item {
    min-width: 60px;
  }

  .process-timeline-label {
    font-size: 10px;
  }
}

/* ============================================
   Process Cards (Dashboard Active Processes)
   ============================================ */
.process-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.process-card:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.process-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.process-card-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.process-card-icon.selling {
  background: var(--color-success-pale);
  color: var(--color-success);
}

.process-card-icon.buying {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.process-card-icon.renting {
  background: var(--color-warning-pale);
  color: var(--color-warning);
}

.process-card-icon.leasing {
  background: var(--color-accent-pale, #F3E8FF);
  color: var(--color-accent, #9333EA);
}

.process-card-title {
  flex: 1;
  min-width: 0;
}

.process-card-type {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.process-card-address {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.process-card-phase {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
}

.process-card-phase.phase-preparation { background: var(--color-primary-pale); color: var(--color-primary-dark); }
.process-card-phase.phase-listing { background: var(--color-info-pale); color: var(--color-info-dark); }
.process-card-phase.phase-search { background: var(--color-info-pale); color: var(--color-info-dark); }
.process-card-phase.phase-offers { background: var(--color-warning-pale); color: var(--color-warning-dark); }
.process-card-phase.phase-applications { background: var(--color-warning-pale); color: var(--color-warning-dark); }
.process-card-phase.phase-due_diligence { background: #F3E8FF; color: #7C3AED; }
.process-card-phase.phase-settlement { background: var(--color-success-pale); color: var(--color-success-dark); }
.process-card-phase.phase-move_in { background: var(--color-success-pale); color: var(--color-success-dark); }

/* Progress bar */
.process-card-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.process-card-progress-bar {
  height: 6px;
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.process-card-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--gradient-progress);
  transition: width 0.5s ease;
}

.process-card-progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xs);
}

.process-card-progress-percent {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.process-card-progress-steps {
  color: var(--color-text-muted);
}

/* Next action */
.process-card-next {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
}

.process-card-next-icon {
  color: var(--color-warning);
  flex-shrink: 0;
}

.process-card-next-text {
  flex: 1;
  color: var(--color-text-secondary);
}

.process-card-next-text strong {
  color: var(--color-text-primary);
}

.process-card-next.urgent {
  background: var(--color-warning-pale);
}

.process-card-next.urgent .process-card-next-icon {
  color: var(--color-error);
}

/* Footer with action button */
.process-card-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-light);
}

/* Process cards container */
.process-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ============================================
   Phase Timeline (Horizontal)
   ============================================ */
.phase-timeline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
  overflow-x: auto;
}

.phase-timeline-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.phase-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--color-gray-300);
  flex-shrink: 0;
}

.phase-timeline-item.completed .phase-timeline-dot {
  background: var(--color-success);
}

.phase-timeline-item.current .phase-timeline-dot {
  background: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-pale);
}

.phase-timeline-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.phase-timeline-item.completed .phase-timeline-label {
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

.phase-timeline-item.current .phase-timeline-label {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.phase-timeline-connector {
  width: 24px;
  height: 2px;
  background: var(--color-gray-200);
  flex-shrink: 0;
}

.phase-timeline-item.completed + .phase-timeline-connector,
.phase-timeline-connector.completed {
  background: var(--color-success);
}

/* ============================================
   Octalysis Score Card
   ============================================ */
.score-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.score-card-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.score-card-phases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.score-card-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
}

.score-card-phase-name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
}

.score-card-phase-bar {
  width: 100%;
  height: 8px;
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.score-card-phase-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

.score-card-phase.complete .score-card-phase-fill {
  background: var(--color-success);
}

.score-card-phase-points {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.score-card-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
}

.score-card-total-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.score-card-total-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.score-card-level {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-xp-gold-light);
  border-radius: var(--radius-lg);
}

.score-card-level-icon {
  font-size: var(--font-size-lg);
}

.score-card-level-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-xp-gold-dark);
}

/* ============================================
   Level Badge
   ============================================ */
.journey-level-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
}

.journey-level-number {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
}

.journey-level-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* Level color variants */
.journey-level-badge.level-1 { background: var(--color-gray-100); }
.journey-level-badge.level-2 { background: #D1FAE5; }
.journey-level-badge.level-3 { background: #CCFBF1; }
.journey-level-badge.level-4 { background: #CFFAFE; }
.journey-level-badge.level-5 { background: #DBEAFE; }
.journey-level-badge.level-6 { background: #E0E7FF; }
.journey-level-badge.level-7 { background: #EDE9FE; }
.journey-level-badge.level-8 { background: #F3E8FF; }
.journey-level-badge.level-9 { background: #FCE7F3; }
.journey-level-badge.level-10 { background: #FEF3C7; }

/* Compact level indicator */
.journey-level-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 20px;
  padding: 0 var(--space-2);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  background: var(--color-gray-500);
  border-radius: var(--radius-full);
}

.journey-level-compact.level-1 { background: #6b7280; }
.journey-level-compact.level-2 { background: #10b981; }
.journey-level-compact.level-3 { background: #14b8a6; }
.journey-level-compact.level-4 { background: #06b6d4; }
.journey-level-compact.level-5 { background: #3b82f6; }
.journey-level-compact.level-6 { background: #6366f1; }
.journey-level-compact.level-7 { background: #8b5cf6; }
.journey-level-compact.level-8 { background: #a855f7; }
.journey-level-compact.level-9 { background: #ec4899; }
.journey-level-compact.level-10 { background: #f59e0b; }

/* ============================================
   Progress Bar
   ============================================ */
.journey-progress-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.journey-progress-bar {
  height: 8px;
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.journey-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

.journey-progress-current {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.journey-progress-remaining {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.journey-progress-max {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success);
}

/* ============================================
   Progress Ring
   ============================================ */
.journey-progress-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.journey-progress-ring svg {
  transform: rotate(-90deg);
}

.journey-progress-ring .ring-background {
  opacity: 0.3;
}

.journey-progress-ring .ring-progress {
  transition: stroke-dashoffset 0.5s ease;
}

.journey-progress-ring .ring-level {
  position: absolute;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* ============================================
   Mini Stats Block
   ============================================ */
.journey-stats-mini {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.journey-stats-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.journey-stats-text .stats-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.journey-stats-text .stats-points {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ============================================
   Journey Widget (Dashboard Sidebar)
   ============================================ */
.journey-widget {
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.journey-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.journey-widget-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.journey-widget-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.journey-widget-stats {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.journey-widget-level {
  flex-shrink: 0;
}

.journey-widget-info {
  flex: 1;
  min-width: 0;
}

.journey-widget-title-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.journey-widget-points {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.journey-widget-achievements {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.journey-widget-footer {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
}

/* ============================================
   Achievement Badge
   ============================================ */
.achievement-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.achievement-icon {
  font-size: var(--font-size-sm);
}

.achievement-title {
  white-space: nowrap;
}

/* Achievement type variants */
.achievement-badge.first_login { background: #FEF3C7; color: #D97706; }
.achievement-badge.profile_complete { background: #DBEAFE; color: #2563EB; }
.achievement-badge.first_search { background: #E0E7FF; color: #4F46E5; }
.achievement-badge.first_enquiry { background: #D1FAE5; color: #059669; }
.achievement-badge.first_offer { background: #FCE7F3; color: #DB2777; }
.achievement-badge.pre_approved { background: #F3E8FF; color: #9333EA; }
.achievement-badge.first_property_listed { background: #CCFBF1; color: #0D9488; }
.achievement-badge.first_offer_received { background: #CFFAFE; color: #0891B2; }
.achievement-badge.first_sale { background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #B45309; }

/* Mini achievement (icon only) */
.achievement-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-gray-100);
  border-radius: 50%;
  font-size: var(--font-size-sm);
}

/* ============================================
   Checklist Styles
   ============================================ */
.checklist-section {
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.checklist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-border-light);
}

.checklist-header-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.checklist-header-progress {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.checklist-items {
  padding: var(--space-2) 0;
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  transition: background var(--transition-fast);
  cursor: pointer;
}

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

.checklist-item.completed {
  opacity: 0.7;
}

.checklist-item.completed .checklist-title {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.checklist-checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  margin-top: 2px;
  transition: all var(--transition-fast);
}

.checklist-item:hover .checklist-checkbox {
  border-color: rgba(49, 46, 129, 0.25);
}

.checklist-item.completed .checklist-checkbox {
  background: var(--color-success);
  border-color: var(--color-success);
}

.checkbox-checked {
  font-size: 12px;
  color: var(--color-white);
}

.checkbox-unchecked {
  /* Empty state */
}

.checklist-content {
  flex: 1;
  min-width: 0;
}

.checklist-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  display: block;
}

.checklist-description {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: block;
  margin-top: var(--space-1);
}

.checklist-points {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success);
  padding: var(--space-1) var(--space-2);
  background: var(--color-success-pale);
  border-radius: var(--radius-full);
}

.checklist-item.completed .checklist-points {
  opacity: 0.5;
}

/* ============================================
   Journey Page Layout
   ============================================ */
.journey-page {
  max-width: 1000px;
  margin: 0 auto;
}

.journey-hero {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8);
  background: linear-gradient(135deg, var(--color-primary-pale), var(--color-beige));
  border-radius: var(--radius-2xl);
  margin-bottom: var(--space-6);
}

.journey-hero-ring {
  flex-shrink: 0;
}

.journey-hero-content {
  flex: 1;
}

.journey-hero-level {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.journey-hero-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.journey-hero-points {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.journey-hero-points strong {
  color: var(--color-primary);
}

.journey-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ============================================
   Achievement Gallery
   ============================================ */
.achievement-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
}

.achievement-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: var(--transition-lift);
}

.achievement-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: var(--hover-lift-sm);
}

.achievement-card.locked {
  opacity: 0.5;
  background: var(--color-gray-50);
}

.achievement-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border-radius: 50%;
  font-size: var(--font-size-xl);
}

.achievement-card-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.achievement-card-description {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.achievement-card-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ============================================
   Milestone Timeline
   ============================================ */
.milestone-timeline {
  position: relative;
  padding-left: var(--space-8);
}

.milestone-timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-gray-200);
}

.milestone-item {
  position: relative;
  padding-bottom: var(--space-6);
}

.milestone-item:last-child {
  padding-bottom: 0;
}

.milestone-dot {
  position: absolute;
  left: -28px;
  width: 12px;
  height: 12px;
  background: var(--color-gray-300);
  border: 2px solid var(--color-surface);
  border-radius: 50%;
}

.milestone-item.completed .milestone-dot {
  background: var(--color-success);
}

.milestone-item.current .milestone-dot {
  background: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-pale);
}

.milestone-content {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.milestone-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.milestone-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ============================================
   Points Animation
   ============================================ */
@keyframes points-pop {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.points-earned {
  animation: points-pop 0.3s ease;
}

/* Celebration animation for achievements */
@keyframes celebrate {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.achievement-celebrate {
  animation: celebrate 0.5s ease;
}

/* ============================================
   Modern Journey Page Layout (2025 Redesign)
   ============================================ */
.journey-page-modern {
  max-width: 900px;
  margin: 0 auto;
}

/* Compact Journey Hero - 3 Column Grid */
.journey-hero-compact {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card-modern);
  margin-bottom: var(--space-8);
}

.journey-hero-ring-col {
  flex-shrink: 0;
}

.journey-hero-info-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.journey-hero-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}

.journey-hero-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.journey-hero-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.journey-hero-stats {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.journey-hero-stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.journey-hero-stat-value {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.journey-hero-stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.journey-hero-actions-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .journey-hero-compact {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-4);
  }

  .journey-hero-ring-col {
    justify-self: center;
  }

  .journey-hero-stats {
    justify-content: center;
  }

  .journey-hero-actions-col {
    flex-direction: row;
    justify-content: center;
  }
}

/* ============================================
   Journey Timeline Layout
   ============================================ */
.journey-timeline {
  position: relative;
  padding-left: var(--space-10);
}

/* Vertical timeline line */
.journey-timeline::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
}

/* Phase section on timeline */
.journey-phase {
  position: relative;
  margin-bottom: var(--space-8);
}

.journey-phase:last-child {
  margin-bottom: 0;
}

/* Phase marker on timeline */
.journey-phase-marker {
  position: absolute;
  left: calc(var(--space-10) * -1 + 6px);
  top: 0;
  width: 28px;
  height: 28px;
  background: var(--color-white);
  border: 3px solid var(--color-gray-300);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  z-index: 1;
}

.journey-phase.phase-completed .journey-phase-marker {
  background: var(--color-level-green);
  border-color: var(--color-level-green);
  color: var(--color-white);
}

.journey-phase.phase-current .journey-phase-marker {
  background: var(--color-primary);
  border-color: rgba(49, 46, 129, 0.25);
  color: var(--color-white);
  box-shadow: 0 0 0 4px var(--color-primary-pale);
}

.journey-phase.phase-upcoming .journey-phase-marker {
  background: var(--color-white);
  border-color: var(--color-gray-300);
  color: var(--color-text-muted);
}

/* Phase header */
.journey-phase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.journey-phase-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.journey-phase-progress {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.journey-phase-progress .completed-count {
  font-weight: var(--font-weight-semibold);
  color: var(--color-level-green);
}

/* Phase steps container */
.journey-phase-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ============================================
   Modern Step Cards
   ============================================ */
.journey-step-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.journey-step-card:hover {
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: var(--shadow-card-hover-modern);
  transform: translateY(-2px);
}

.journey-step-card.step-completed {
  border-color: var(--color-level-green-light);
  background: linear-gradient(135deg, var(--color-level-green-light) 0%, var(--color-white) 100%);
}

.journey-step-card.step-current {
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: var(--shadow-glow-primary);
}

.journey-step-card.step-skipped {
  opacity: 0.6;
  background: var(--color-gray-50);
}

/* Step checkbox */
.journey-step-check {
  width: 28px;
  height: 28px;
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.journey-step-card:hover .journey-step-check {
  border-color: rgba(49, 46, 129, 0.25);
}

.journey-step-card.step-completed .journey-step-check {
  background: var(--color-level-green);
  border-color: var(--color-level-green);
  animation: checkbox-pop 0.4s var(--ease-spring);
}

.journey-step-check-icon {
  color: var(--color-white);
  font-size: 14px;
}

/* Step content */
.journey-step-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.journey-step-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
}

.journey-step-card.step-completed .journey-step-title {
  color: var(--color-level-green-dark);
}

.journey-step-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin: 0;
}

/* Step meta (points + actions) */
.journey-step-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.journey-step-points {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--color-xp-gold-light);
  color: var(--color-xp-gold-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
}

.journey-step-card.step-completed .journey-step-points {
  background: var(--color-level-green-light);
  color: var(--color-level-green-dark);
}

.journey-step-action {
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.journey-step-action:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.journey-step-skip {
  padding: var(--space-2) var(--space-3);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.journey-step-skip:hover {
  color: var(--color-text-secondary);
}

/* ============================================
   "Up Next" Highlight Card
   ============================================ */
.journey-next-step {
  position: relative;
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--color-primary-pale) 0%, var(--color-white) 100%);
  border: 1px solid rgba(49, 46, 129, 0.25);
  border-radius: var(--radius-2xl);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.journey-next-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-progress);
}

.journey-next-step-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.journey-next-step-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.journey-next-step-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
}

.journey-next-step-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.journey-next-step-reward {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.journey-next-step-reward-icon {
  font-size: 20px;
}

.journey-next-step-reward-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-xp-gold-dark);
}

/* ============================================
   Journey Complete Celebration
   ============================================ */
.journey-complete {
  text-align: center;
  padding: var(--space-12);
  background: linear-gradient(135deg, var(--color-xp-gold-light) 0%, var(--color-white) 100%);
  border: 2px solid var(--color-xp-gold);
  border-radius: var(--radius-2xl);
}

.journey-complete-icon {
  font-size: 64px;
  margin-bottom: var(--space-4);
  animation: celebration-bounce 0.6s var(--ease-spring);
}

.journey-complete-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.journey-complete-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6);
}

.journey-complete-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-6);
}

.journey-complete-stat {
  text-align: center;
}

.journey-complete-stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.journey-complete-stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* ============================================
   Responsive Timeline
   ============================================ */
@media (max-width: 640px) {
  .journey-timeline {
    padding-left: var(--space-6);
  }

  .journey-timeline::before {
    left: 12px;
  }

  .journey-phase-marker {
    left: calc(var(--space-6) * -1 + 2px);
    width: 24px;
    height: 24px;
  }

  .journey-step-card {
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  .journey-step-meta {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--space-2);
  }

  .journey-next-step {
    padding: var(--space-4);
  }

  .journey-complete {
    padding: var(--space-8);
  }

  .journey-complete-stats {
    gap: var(--space-4);
  }
}


/* ================================================
   components/gamification.css
   ================================================ */

/*
 * Gamification Components
 * Duolingo-inspired XP, streaks, levels, and celebration UI
 */

/* ============================================
   XP Counter
   ============================================ */
.xp-counter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--gradient-xp);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-glow-gold);
}

.xp-counter-icon {
  font-size: 18px;
  line-height: 1;
}

.xp-counter-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.xp-counter-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Small variant */
.xp-counter-sm {
  padding: var(--space-1) var(--space-3);
}

.xp-counter-sm .xp-counter-icon {
  font-size: 14px;
}

.xp-counter-sm .xp-counter-value {
  font-size: var(--font-size-sm);
}

/* ============================================
   Streak Counter
   ============================================ */
.streak-counter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--gradient-streak);
  border-radius: var(--radius-full);
  box-shadow: 0 0 20px rgba(255, 149, 0, 0.3);
}

.streak-counter-icon {
  font-size: 18px;
  line-height: 1;
  animation: streak-fire 1.5s ease-in-out infinite;
}

.streak-counter-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.streak-counter-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   Level Badge
   ============================================ */
.level-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-white);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card-modern);
}

.level-badge-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.level-badge-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.level-badge-ring .ring-bg {
  fill: none;
  stroke: var(--color-gray-200);
  stroke-width: 3;
}

.level-badge-ring .ring-fill {
  fill: none;
  stroke: var(--color-level-green);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s var(--ease-spring);
}

.level-badge-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  z-index: 1;
}

/* Large variant */
.level-badge-lg {
  width: 72px;
  height: 72px;
}

.level-badge-lg .level-badge-value {
  font-size: var(--font-size-2xl);
}

.level-badge-lg .ring-bg,
.level-badge-lg .ring-fill {
  stroke-width: 4;
}

/* ============================================
   Progress Ring (SVG)
   ============================================ */
.progress-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.progress-ring svg {
  transform: rotate(-90deg);
}

.progress-ring-bg {
  fill: none;
  stroke: var(--color-gray-200);
}

.progress-ring-fill {
  fill: none;
  stroke: var(--color-level-green);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s var(--ease-spring);
}

.progress-ring-fill.animate {
  animation: progress-ring-fill 1s var(--ease-spring) forwards;
}

.progress-ring-content {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.progress-ring-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

.progress-ring-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}

/* Size variants */
.progress-ring-sm { width: 60px; height: 60px; }
.progress-ring-md { width: 100px; height: 100px; }
.progress-ring-lg { width: 140px; height: 140px; }

.progress-ring-sm .progress-ring-value { font-size: var(--font-size-base); }
.progress-ring-lg .progress-ring-value { font-size: var(--font-size-4xl); }

/* ============================================
   Progress Bar
   ============================================ */
.progress-bar {
  width: 100%;
  height: var(--progress-bar-height);
  background: var(--color-gray-200);
  border-radius: var(--progress-bar-radius);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--gradient-progress);
  border-radius: var(--progress-bar-radius);
  transition: width 0.5s var(--ease-spring);
}

.progress-bar-fill.animate {
  animation: progress-fill 1s var(--ease-spring) forwards;
}

/* Variants */
.progress-bar-gold .progress-bar-fill {
  background: var(--gradient-xp);
}

.progress-bar-success .progress-bar-fill {
  background: var(--color-level-green);
}

/* Size variants */
.progress-bar-sm {
  height: 4px;
}

.progress-bar-lg {
  height: 12px;
}

/* ============================================
   Achievement Badge
   ============================================ */
.achievement-badge {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
}

.achievement-badge-icon {
  width: 64px;
  height: 64px;
  background: var(--gradient-achievement);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: var(--shadow-glow-celebration);
  transition: all var(--transition-base);
}

.achievement-badge:hover .achievement-badge-icon {
  transform: scale(1.1);
}

.achievement-badge-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.achievement-badge-description {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  max-width: 120px;
}

/* Locked state */
.achievement-badge-locked .achievement-badge-icon {
  background: var(--color-gray-200);
  box-shadow: none;
  filter: grayscale(100%);
  opacity: 0.5;
}

.achievement-badge-locked .achievement-badge-name {
  color: var(--color-text-muted);
}

/* Newly earned animation */
.achievement-badge-earned .achievement-badge-icon {
  animation: celebration-bounce 0.6s var(--ease-spring);
}

/* ============================================
   Points Fly Animation Container
   ============================================ */
.points-fly-container {
  position: relative;
}

.points-fly {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--gradient-xp);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  white-space: nowrap;
  pointer-events: none;
  animation: points-fly-up 800ms var(--ease-out) forwards;
  z-index: var(--z-celebration);
}

.points-fly-icon {
  font-size: 12px;
}

/* ============================================
   Celebration Overlay
   ============================================ */
.celebration-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: var(--z-celebration);
  animation: fade-in 300ms var(--ease-out);
}

.celebration-overlay[hidden] {
  display: none;
}

.celebration-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-10);
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-float);
  animation: celebration-bounce 0.6s var(--ease-spring);
  max-width: 400px;
  width: 90%;
}

.celebration-icon {
  font-size: 64px;
  margin-bottom: var(--space-4);
  animation: celebration-bounce 0.6s var(--ease-spring) 0.1s both;
}

.celebration-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.celebration-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6);
}

.celebration-xp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--gradient-xp);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-glow-gold);
  margin-bottom: var(--space-6);
  animation: xp-pulse 0.3s var(--ease-bounce) 0.3s;
}

.celebration-xp-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

.celebration-xp-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   Confetti Container
   ============================================ */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: var(--z-celebration);
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confetti-fall 3s linear forwards;
}

.confetti-piece:nth-child(odd) {
  animation: confetti-fall 3s linear forwards, confetti-sway 0.5s ease-in-out infinite alternate;
}

/* Confetti colors */
.confetti-gold { background: var(--color-xp-gold); }
.confetti-orange { background: var(--color-streak-orange); }
.confetti-green { background: var(--color-level-green); }
.confetti-purple { background: var(--color-celebration-purple); }
.confetti-blue { background: var(--color-primary); }

/* ============================================
   Gamification Stats Bar
   ============================================ */
.gamification-stats {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card-modern);
}

.gamification-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}

.gamification-stat-icon {
  font-size: 24px;
}

.gamification-stat-content {
  display: flex;
  flex-direction: column;
}

.gamification-stat-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.gamification-stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.gamification-stat-divider {
  width: 1px;
  height: 32px;
  background: var(--color-border-light);
}

/* ============================================
   Milestone Card
   ============================================ */
.milestone-card {
  position: relative;
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--color-milestone-blue-light) 0%, var(--color-white) 100%);
  border: 1px solid var(--color-milestone-blue);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.milestone-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-milestone-blue);
}

.milestone-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.milestone-card-icon {
  width: 40px;
  height: 40px;
  background: var(--color-milestone-blue);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.milestone-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.milestone-card-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
}

.milestone-card-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.milestone-card-progress .progress-bar {
  flex: 1;
}

.milestone-card-progress-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-milestone-blue);
  white-space: nowrap;
}

/* ============================================
   Journey Stats Widget (for dashboard)
   ============================================ */
.journey-stats-widget {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card-modern);
}

.journey-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-3);
}

.journey-stat-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.journey-stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

.journey-stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}

@media (max-width: 768px) {
  .journey-stats-widget {
    grid-template-columns: repeat(2, 1fr);
  }

  .gamification-stats {
    flex-wrap: wrap;
    justify-content: center;
  }

  .gamification-stat-divider {
    display: none;
  }
}

/* ============================================
   Step Completion Reward (inline)
   ============================================ */
.step-reward {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-xp-gold-light);
  color: var(--color-xp-gold-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
}

.step-reward-icon {
  font-size: 12px;
}

/* Completed state */
.step-reward-earned {
  background: var(--gradient-xp);
  color: var(--color-white);
}

/* ============================================
   Sidebar Gamification Widget
   ============================================ */
.sidebar-gamification {
  padding: var(--space-3) var(--space-4);
  margin: 0 var(--space-3) var(--space-3);
  background: var(--glass-background);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border-light);
}

.sidebar-gamification-stats {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.sidebar-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-align: center;
  min-width: 0;
}

.sidebar-stat-icon {
  font-size: 16px;
  margin-bottom: var(--space-1);
}

.sidebar-stat-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.sidebar-stat-label {
  font-size: 10px;
  color: var(--color-text-tertiary);
  text-transform: lowercase;
}

/* Hide in collapsed sidebar */
.sidebar.collapsed .sidebar-gamification {
  padding: var(--space-2);
  margin: 0 var(--space-2) var(--space-2);
}

.sidebar.collapsed .sidebar-gamification-stats {
  flex-direction: column;
  gap: var(--space-3);
}

.sidebar.collapsed .sidebar-stat {
  flex-direction: row;
  gap: var(--space-1);
  justify-content: center;
}

.sidebar.collapsed .sidebar-stat-value,
.sidebar.collapsed .sidebar-stat-label {
  display: none;
}

.sidebar.collapsed .sidebar-stat-icon {
  margin-bottom: 0;
  font-size: 18px;
}


/* ================================================
   components/readiness.css
   ================================================ */

/* ============================================
   Readiness Score Components
   Octalysis-based gamification for buyer/seller readiness
   ============================================ */

/* Score Ring */
.readiness-ring {
  transition: transform 0.2s ease;
}

.readiness-ring:hover {
  transform: scale(1.05);
}

.readiness-ring-progress {
  transition: stroke-dashoffset 0.5s ease;
}

/* Score Card */
.readiness-score-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.readiness-score-ring-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.readiness-score-value {
  position: absolute;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
}

.readiness-score-info {
  flex: 1;
}

.readiness-score-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--space-1);
}

.readiness-score-sublabel {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

/* Tier Badges */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.tier-badge svg {
  width: 14px;
  height: 14px;
}

.tier-badge-bronze {
  background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%);
  color: white;
}

.tier-badge-gold {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #5D4E37;
}

.tier-badge-platinum {
  background: linear-gradient(135deg, #E5E4E2 0%, #B8B8B8 100%);
  color: #333;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Readiness Breakdown */
.readiness-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.readiness-category {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.readiness-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.readiness-category-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-700);
}

.readiness-category-weight {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
}

.readiness-category-score {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-900);
}

/* Progress Bars */
.readiness-bar {
  height: 8px;
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.readiness-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.readiness-bar-fill.fill-success {
  background: var(--color-success);
}

.readiness-bar-fill.fill-primary {
  background: var(--color-primary);
}

.readiness-bar-fill.fill-warning {
  background: var(--color-warning);
}

.readiness-bar-fill.fill-muted {
  background: var(--color-gray-400);
}

/* Readiness Widget (Compact) */
.readiness-widget {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.readiness-widget-score {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
}

.readiness-widget-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

/* Improvement Suggestions */
.readiness-suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
  border-radius: var(--radius-md);
}

.readiness-suggestions-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-warning-800);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.readiness-suggestions-title svg {
  width: 16px;
  height: 16px;
  color: var(--color-warning-500);
}

.readiness-suggestions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.readiness-suggestions-list li {
  font-size: var(--font-size-sm);
  color: var(--color-warning-700);
  padding: var(--space-1) 0;
  padding-left: var(--space-4);
  position: relative;
}

.readiness-suggestions-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--color-warning-400);
  border-radius: 50%;
}

/* Finance Status Indicator */
.finance-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.finance-indicator-icon {
  width: 16px;
  height: 16px;
}

.finance-indicator-cash {
  color: var(--color-success);
}

.finance-indicator-preapproved {
  color: var(--color-primary);
}

.finance-indicator-needs {
  color: var(--color-warning);
}

.finance-indicator-exploring {
  color: var(--color-gray-400);
}

/* Readiness Panel (Full display) */
.readiness-panel {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.readiness-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-gray-100);
}

.readiness-panel-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0;
}

.readiness-panel-body {
  padding: var(--space-4);
}

.readiness-panel-score-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-100);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .readiness-score-card {
    flex-direction: column;
    text-align: center;
  }

  .readiness-panel-score-row {
    flex-direction: column;
    text-align: center;
  }

  .tier-badge {
    font-size: var(--font-size-2xs);
  }
}


/* ================================================
   components/wizard.css
   ================================================ */

/*
 * Wizard Step Indicator
 * Multi-step form progress indicator with mobile-first design
 */

/* ============================================
   Mobile: Simplified Progress Bar
   Shows "Step X of Y" with progress bar
   ============================================ */
.wizard-mobile {
  display: block;
}

.wizard-mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.wizard-mobile-step {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.wizard-mobile-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.wizard-mobile-track {
  height: 8px;
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.wizard-mobile-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

/* ============================================
   Desktop: Full Step Circles
   Traditional step indicator with circles and labels
   ============================================ */
.wizard-desktop {
  display: none;
}

.wizard-steps-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

/* Progress track (background line) */
.wizard-track {
  position: absolute;
  top: 20px;
  left: 40px;
  right: 40px;
  height: 3px;
  background: var(--color-gray-200);
  z-index: 0;
  border-radius: var(--radius-full);
}

/* Progress track fill (completed portion) */
.wizard-track-fill {
  position: absolute;
  top: 20px;
  left: 40px;
  height: 3px;
  background: var(--color-primary);
  z-index: 1;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

/* Individual step */
.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
  text-decoration: none;
  min-width: 70px;
}

/* Step circle */
.wizard-step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  background: var(--color-white);
  color: var(--color-gray-400);
  border: 2px solid var(--color-gray-200);
  margin-bottom: var(--space-2);
  transition: all 0.2s ease;
}

/* Step label */
.wizard-step-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: all 0.2s ease;
}

/* Active step */
.wizard-step.is-active .wizard-step-circle {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: 0 0 0 4px var(--color-primary-pale);
}

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

/* Completed step */
.wizard-step.is-completed .wizard-step-circle {
  background: var(--color-success);
  color: var(--color-white);
  border-color: var(--color-success);
}

.wizard-step.is-completed .wizard-step-label {
  color: var(--color-success);
}

.wizard-step.is-completed:hover .wizard-step-circle {
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}

/* ============================================
   Responsive: Show desktop version on larger screens
   ============================================ */
@media (min-width: 768px) {
  .wizard-mobile {
    display: none;
  }

  .wizard-desktop {
    display: block;
  }
}

/* Tablet: Slightly smaller circles */
@media (min-width: 768px) and (max-width: 1024px) {
  .wizard-step {
    min-width: 60px;
  }

  .wizard-step-circle {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-sm);
  }

  .wizard-step-label {
    font-size: var(--font-size-xs);
  }

  .wizard-track,
  .wizard-track-fill {
    top: 18px;
    left: 30px;
    right: 30px;
  }
}

/* ============================================
   Onboarding Progress Banner
   Used in seller onboarding
   ============================================ */
.onboarding-progress-banner {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.progress-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.progress-reward {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.progress-reward strong {
  color: var(--color-success);
}

.progress-bar-container {
  height: 8px;
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

/* Onboarding step content */
.onboarding-step-content {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Onboarding navigation */
.onboarding-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

@media (max-width: 480px) {
  .onboarding-progress-banner {
    padding: var(--space-4);
  }

  .progress-info {
    flex-direction: column;
    align-items: flex-start;
  }

  .progress-text {
    font-size: var(--font-size-lg);
  }

  .onboarding-step-content {
    padding: var(--space-4);
  }

  .onboarding-navigation {
    flex-direction: column-reverse;
    gap: var(--space-3);
  }

  .onboarding-navigation .btn {
    width: 100%;
  }
}

/* ============================================
   Form Actions (Wizard navigation buttons)
   ============================================ */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .form-actions {
    flex-direction: column-reverse;
  }

  .form-actions > div {
    width: 100%;
  }

  .form-actions .btn {
    width: 100%;
  }

  /* Step label can wrap on smaller screens */
  .wizard-step-label {
    white-space: normal;
    font-size: var(--font-size-xs);
  }
}

/* ============================================
   Location Picker (Map-based area selection)
   ============================================ */
.location-picker-map-wrapper {
  position: relative;
  margin-bottom: var(--space-4);
}

.location-picker-map {
  height: 400px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  background: var(--color-gray-100);
}

/* Circle label in center of search area */
.circle-label {
  background: transparent;
  border: none;
}

.circle-label span {
  display: block;
  background: var(--color-white);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.map-instructions {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

/* Search input */
.location-search-input {
  width: 100%;
}

.search-input-wrapper {
  position: relative;
  z-index: 1001;
}

.search-input-wrapper .form-input {
  width: 100%;
}

/* Search suggestions dropdown */
.search-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
}

.search-suggestion {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.search-suggestion:hover,
.search-suggestion.highlighted {
  background: var(--color-gray-50);
}

/* Circle controls */
.circle-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
}

.radius-control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}

.radius-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.radius-slider {
  flex: 1;
  max-width: 200px;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
  outline: none;
  cursor: pointer;
}

.radius-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
}

.radius-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.radius-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: none;
  box-shadow: var(--shadow-sm);
}

/* Selected areas list */
.selected-areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.selected-area-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-pale);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.15s ease;
}

.selected-area-tag:hover {
  background: var(--color-primary-light);
}

.selected-area-tag.selected {
  background: var(--color-primary);
  border-color: rgba(49, 46, 129, 0.25);
}

.selected-area-tag.selected .selected-area-label,
.selected-area-tag.selected .selected-area-radius {
  color: var(--color-white);
}

.selected-area-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

.selected-area-radius {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  opacity: 0.8;
  padding: 0 var(--space-1);
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
}

.selected-area-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-primary);
  opacity: 0.6;
  transition: all 0.15s ease;
}

.selected-area-remove:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

.selected-area-tag.selected .selected-area-remove {
  color: var(--color-white);
}

.selected-area-tag.selected .selected-area-remove:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Area count display */
.area-count-display {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Location picker notification */
.location-picker-notification {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-gray-900);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .location-picker-map {
    height: 300px;
  }

  .circle-controls {
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
  }

  .radius-control {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .radius-slider {
    max-width: 100%;
  }

  .map-instructions {
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-3);
  }
}

/* ============================================
   Property Card Preview (Seller Preview Step)
   ============================================ */
.property-card-preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.property-card-preview-image {
  position: relative;
  height: 220px;
  background: var(--color-gray-100);
}

.property-card-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.property-card-preview-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
}

.property-card-preview-badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  gap: var(--space-2);
}

.property-card-preview-photo-count {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: rgba(0, 0, 0, 0.7);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.property-card-preview-details {
  padding: var(--space-4);
}

.property-card-preview-price {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.property-card-preview-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
  line-height: 1.3;
}

.property-card-preview-address {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.property-card-preview-stats {
  display: flex;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.property-card-preview-stats span {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ============================================
   Seller Preview Frame
   Full-width preview container that breaks out of dashboard constraints
   ============================================ */

/* Container that breaks out of dashboard panel padding */
.preview-frame-container {
  /* Break out of dashboard panel padding */
  margin-left: calc(-1 * var(--space-6));
  margin-right: calc(-1 * var(--space-6));
  margin-top: var(--space-4);

  /* Visual styling */
  border-top: 1px solid var(--color-border);
  background: var(--color-gray-50);
}

@media (max-width: 768px) {
  .preview-frame-container {
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
  }
}

/* Loading state */
.preview-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  color: var(--color-text-muted);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-gray-200);
  border-top-color: rgba(49, 46, 129, 0.25);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-4);
}

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

/* Preview frame content styling */
.preview-frame-content {
  background: var(--color-gray-50);
}

.preview-frame-content .property-detail {
  padding-top: 0;
  min-height: auto;
}

.preview-frame-content .property-back-nav {
  display: none;
}

/* Ensure containers inside preview respect their own max-width */
.preview-frame-content .container {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Hide sections not relevant for preview */
.preview-frame-content .property-cta-section,
.preview-frame-content .property-similar-section {
  display: none;
}

/* ============================================
   Checklist Item Styling
   ============================================ */
.checklist-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.checklist-item-status {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-gray-300);
  flex-shrink: 0;
}

.checklist-item.is-complete .checklist-item-status {
  background: var(--color-success);
  border-color: var(--color-success);
  position: relative;
}

.checklist-item.is-complete .checklist-item-status::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checklist-item span {
  flex: 1;
  font-size: var(--font-size-sm);
}

.checklist-item.is-complete span {
  font-weight: var(--font-weight-medium);
}


/* ================================================
   components/ai_badges.css
   ================================================ */

/* AI Badges - Inline insight indicators for properties */

/* Base badge styles */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.ai-badge-icon {
  font-weight: 700;
}

.ai-badge-score {
  font-weight: 700;
  font-size: 13px;
}

.ai-badge-label {
  font-weight: 500;
}

/* Container for multiple badges */
.ai-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

/* Match Score Badges */
.ai-badge-match {
  background: var(--color-gray-100, #f3f4f6);
  color: var(--color-gray-700, #374151);
}

.ai-badge-match-excellent {
  background: var(--color-success-light, #dcfce7);
  color: var(--color-success-dark, #166534);
}

.ai-badge-match-good {
  background: var(--color-primary-light, #dbeafe);
  color: var(--color-primary-dark, #1e40af);
}

.ai-badge-match-moderate {
  background: var(--color-warning-light, #fef3c7);
  color: var(--color-warning-dark, #92400e);
}

.ai-badge-match-low {
  background: var(--color-gray-100, #f3f4f6);
  color: var(--color-gray-600, #4b5563);
}

/* Reasy Score Badges */
.ai-badge-reasy {
  background: var(--color-gray-100, #f3f4f6);
  color: var(--color-gray-700, #374151);
}

.ai-badge-reasy-excellent {
  background: var(--color-success-pale, #F0FDF4);
  color: var(--color-success-dark, #166534);
}

.ai-badge-reasy-good {
  background: var(--color-primary-pale, #EFF6FF);
  color: var(--color-primary-dark, #1e40af);
}

.ai-badge-reasy-average {
  background: var(--color-warning-pale, #FFFBEB);
  color: var(--color-warning-dark, #92400e);
}

.ai-badge-reasy-below_average,
.ai-badge-reasy-below-average {
  background: var(--color-gray-200, #e5e7eb);
  color: var(--color-gray-700, #374151);
}

.ai-badge-reasy-low {
  background: var(--color-gray-100, #f3f4f6);
  color: var(--color-gray-600, #4b5563);
}

/* Value Assessment Badges */
.ai-badge-value {
  font-weight: 500;
}

.ai-badge-value-opportunity {
  background: var(--color-success-light, #dcfce7);
  color: var(--color-success-dark, #166534);
}

.ai-badge-value-fair {
  background: var(--color-primary-light, #dbeafe);
  color: var(--color-primary-dark, #1e40af);
}

.ai-badge-value-above_market,
.ai-badge-value-above-market {
  background: var(--color-warning-light, #fef3c7);
  color: var(--color-warning-dark, #92400e);
}

/* Risk Badges */
.ai-badge-risk {
  background: var(--color-danger-light, #fee2e2);
  color: var(--color-danger-dark, #991b1b);
}

.ai-badge-risk .ai-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--color-danger, #ef4444);
  color: white;
  border-radius: 50%;
  font-size: 10px;
}

/* Opportunity Badges */
.ai-badge-opportunity {
  background: var(--color-success-light, #dcfce7);
  color: var(--color-success-dark, #166534);
}

.ai-badge-opportunity .ai-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--color-success, #22c55e);
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

/* Default badge */
.ai-badge-default {
  background: var(--color-gray-100, #f3f4f6);
  color: var(--color-gray-700, #374151);
}

/* Property card badge positioning */
.property-card .ai-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  margin: 0;
}

.property-card .ai-badge {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .ai-badge {
    padding: 3px 6px;
    font-size: 11px;
  }

  .ai-badge-score {
    font-size: 12px;
  }

  .ai-badges {
    gap: 4px;
  }
}


/* ================================================
   components/ai_analysis.css
   ================================================ */

/* AI Analysis Section - "What Prudens Thinks" */

.ai-analysis-section {
  background: white;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 12px;
  padding: 24px;
  margin: 24px 0;
}

/* Header with avatar and title */
.ai-analysis-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-gray-100, #f3f4f6);
}

.ai-analysis-avatar {
  flex-shrink: 0;
}

.ai-avatar-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: white;
}

.ai-avatar-stevie {
  background: linear-gradient(135deg, #1e40af, #3b82f6);
}

.ai-avatar-evie {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
}

.ai-analysis-title {
  flex: 1;
}

.ai-analysis-title h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-gray-900, #111827);
}

/* Match indicator */
.ai-match-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
}

.ai-match-score {
  font-weight: 700;
}

.ai-match-label {
  font-weight: 500;
}

.ai-match-excellent-match {
  background: var(--color-success-light, #dcfce7);
  color: var(--color-success-dark, #166534);
}

.ai-match-good-match {
  background: var(--color-primary-light, #dbeafe);
  color: var(--color-primary-dark, #1e40af);
}

.ai-match-moderate-match {
  background: var(--color-warning-light, #fef3c7);
  color: var(--color-warning-dark, #92400e);
}

.ai-match-low-match,
.ai-match-unknown {
  background: var(--color-gray-100, #f3f4f6);
  color: var(--color-gray-600, #4b5563);
}

/* Content groups */
.ai-analysis-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ai-analysis-group h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-700, #374151);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-analysis-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-analysis-group li {
  position: relative;
  padding: 6px 0 6px 20px;
  font-size: 14px;
  color: var(--color-gray-600, #4b5563);
  line-height: 1.5;
}

/* Strengths styling */
.ai-analysis-strengths h4::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--color-success, #22c55e);
  border-radius: 50%;
  margin-right: 4px;
}

.ai-analysis-strengths li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-success-light, #dcfce7);
  color: var(--color-success-dark, #166534);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

/* Considerations styling */
.ai-analysis-considerations h4::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--color-warning, #f59e0b);
  border-radius: 50%;
  margin-right: 4px;
}

.ai-analysis-considerations li::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-warning-light, #fef3c7);
  color: var(--color-warning-dark, #92400e);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}

/* Suggestion styling */
.ai-analysis-suggestion {
  background: var(--color-gray-50, #f9fafb);
  border-radius: 8px;
  padding: 16px;
  margin-top: 4px;
}

.ai-analysis-suggestion h4 {
  margin-bottom: 12px;
}

.ai-analysis-suggestion h4::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--color-primary, #3b82f6);
  border-radius: 50%;
  margin-right: 4px;
}

.ai-analysis-suggestion p {
  margin: 0;
  font-size: 14px;
  color: var(--color-gray-700, #374151);
  line-height: 1.6;
}

/* Login CTA */
.ai-analysis-cta-login {
  text-align: center;
  padding: 20px;
  background: var(--color-gray-50, #f9fafb);
  border-radius: 8px;
}

.ai-analysis-cta-login p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--color-gray-600, #4b5563);
}

/* Loading state */
.ai-analysis-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
}

.ai-loading-indicator {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.ai-loading-dot {
  width: 8px;
  height: 8px;
  background: var(--color-primary, #3b82f6);
  border-radius: 50%;
  animation: ai-loading-bounce 1.4s ease-in-out infinite both;
}

.ai-loading-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.ai-loading-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes ai-loading-bounce {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.ai-analysis-generating p {
  margin: 0;
  font-size: 14px;
  color: var(--color-gray-500, #6b7280);
}

/* Footer with chat button */
.ai-analysis-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-gray-100, #f3f4f6);
}

.ai-analysis-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--color-primary, #3b82f6);
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s;
}

.ai-analysis-chat-btn:hover {
  background: var(--color-primary-dark, #2563eb);
  color: white;
  text-decoration: none;
}

.ai-chat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive */
@media (max-width: 640px) {
  .ai-analysis-section {
    padding: 16px;
    margin: 16px 0;
  }

  .ai-analysis-header {
    gap: 12px;
  }

  .ai-avatar-circle {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .ai-analysis-title h3 {
    font-size: 16px;
  }

  .ai-match-indicator {
    font-size: 12px;
    padding: 3px 8px;
  }

  .ai-analysis-group li {
    font-size: 13px;
  }

  .ai-analysis-chat-btn {
    width: 100%;
    justify-content: center;
  }
}


/* ================================================
   components/lightbox.css
   ================================================ */

/*
 * Lightbox Component
 * Fullscreen image viewer with carousel navigation
 */

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

.lightbox-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  z-index: 10;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav--prev {
  left: var(--space-4);
}

.lightbox-nav--next {
  right: var(--space-4);
}

.lightbox-counter {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: var(--font-size-sm);
  background: rgba(0, 0, 0, 0.5);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
}

/* Clickable image thumbnails */
.photo-thumbnail {
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.photo-thumbnail:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* File upload drag states */
.file-upload-area {
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  background: var(--color-gray-50);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.file-upload-area.drag-over {
  border-color: rgba(49, 46, 129, 0.25);
  background: var(--color-primary-pale);
  transform: scale(1.01);
}

.file-upload-area:hover {
  border-color: rgba(49, 46, 129, 0.25);
  background: var(--color-primary-pale);
}


/* ================================================
   components/recent-sales.css
   ================================================ */

/*
 * Recent Sales Modal
 * Apple HIG-inspired design matching the site's design system
 */

/* ============================================
   Modal Backdrop
   ============================================ */
.recent-sales-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  padding: var(--space-6);
  overflow-y: auto;
}

.recent-sales-modal.active {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  animation: modalFadeIn var(--duration-fast) var(--ease-smooth);
}

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

/* ============================================
   Modal Container - Dashboard Panel Style
   ============================================ */
.recent-sales-modal-content {
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  width: 100%;
  max-width: 800px;
  max-height: calc(100vh - var(--space-12));
  display: flex;
  flex-direction: column;
  margin-top: var(--space-6);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  animation: modalSlideUp var(--duration-normal) var(--ease-spring);
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================
   Modal Header
   ============================================ */
.recent-sales-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.recent-sales-modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: var(--letter-spacing-tight);
}

.recent-sales-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-gray-100);
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.recent-sales-close:hover {
  background: var(--color-gray-200);
  color: var(--color-text-primary);
}

.recent-sales-close svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   Modal Body
   ============================================ */
.recent-sales-modal-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ============================================
   Loading State
   ============================================ */
.recent-sales-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  gap: var(--space-4);
}

.recent-sales-loading .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-gray-200);
  border-top-color: rgba(49, 46, 129, 0.25);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

.recent-sales-loading p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

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

/* ============================================
   Map Container
   ============================================ */
.recent-sales-map {
  height: 320px;
  min-height: 280px;
  background: var(--color-gray-100);
  flex-shrink: 0;
  position: relative;
}

/* Subtle inner shadow for depth */
.recent-sales-map::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 -1px 0 var(--color-border-light);
  z-index: 400;
}

/* ============================================
   Map Markers - Pill Style
   ============================================ */
.sale-marker-wrapper {
  background: transparent;
}

.sale-marker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-surface);
  color: var(--color-text-primary);
  padding: 6px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  box-shadow: var(--shadow-card-modern);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid var(--color-border-light);
}

.sale-marker::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.sale-marker:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover-modern);
  border-color: rgba(49, 46, 129, 0.25);
}

/* ============================================
   Leaflet Popup Override
   ============================================ */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 0;
  overflow: hidden;
}

.leaflet-popup-content {
  margin: 0;
  min-width: 200px;
}

.leaflet-popup-tip {
  background: var(--color-surface);
}

.sale-popup {
  padding: var(--space-4);
}

.sale-popup-price {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
  letter-spacing: var(--letter-spacing-tight);
}

.sale-popup-address {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-snug);
}

.sale-popup-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ============================================
   Summary Bar - Metric Card Style
   ============================================ */
.recent-sales-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.recent-sales-summary-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.recent-sales-summary-count strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.recent-sales-summary-mapped {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-surface);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-light);
}

.recent-sales-summary-mapped svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ============================================
   Sales List
   ============================================ */
.recent-sales-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  background: var(--color-background-secondary);
}

/* Custom scrollbar */
.recent-sales-list::-webkit-scrollbar {
  width: 8px;
}

.recent-sales-list::-webkit-scrollbar-track {
  background: transparent;
}

.recent-sales-list::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-background-secondary);
}

.recent-sales-list::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}

/* ============================================
   Sale Item - Property Card Horizontal Style
   ============================================ */
.recent-sale-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  margin-bottom: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

.recent-sale-item:last-child {
  margin-bottom: 0;
}

.recent-sale-item.has-marker {
  cursor: pointer;
}

.recent-sale-item.has-marker:hover {
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: var(--shadow-card-modern);
  transform: translateX(4px);
}

.recent-sale-item:not(.has-marker) {
  opacity: 0.6;
}

/* Left side - info */
.recent-sale-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.recent-sale-address {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  line-height: var(--line-height-snug);
}

.recent-sale-address svg {
  flex-shrink: 0;
  color: var(--color-primary);
  width: 14px;
  height: 14px;
}

.recent-sale-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Right side - price */
.recent-sale-price {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  flex-shrink: 0;
  letter-spacing: var(--letter-spacing-tight);
}

/* ============================================
   Empty State
   ============================================ */
.recent-sales-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-8);
  text-align: center;
}

.recent-sales-empty-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.recent-sales-empty-icon svg {
  width: 32px;
  height: 32px;
  color: var(--color-text-muted);
}

.recent-sales-empty p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 280px;
}

/* ============================================
   Responsive - Mobile Sheet Style
   ============================================ */
@media (max-width: 640px) {
  .recent-sales-modal {
    padding: 0;
    align-items: flex-end;
  }

  .recent-sales-modal-content {
    max-height: 85vh;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    margin-top: 0;
  }

  .recent-sales-modal-header {
    padding: var(--space-4) var(--space-5);
  }

  .recent-sales-modal-title {
    font-size: var(--font-size-base);
  }

  .recent-sales-map {
    height: 220px;
    min-height: 200px;
  }

  .recent-sales-summary {
    padding: var(--space-3) var(--space-4);
  }

  .recent-sales-list {
    padding: var(--space-2);
  }

  .recent-sale-item {
    padding: var(--space-3);
  }

  .recent-sale-address {
    font-size: var(--font-size-xs);
  }

  .recent-sale-price {
    font-size: var(--font-size-sm);
  }
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .recent-sales-modal.active,
  .recent-sales-modal-content {
    animation: none;
  }

  .recent-sale-item.has-marker:hover {
    transform: none;
  }

  .sale-marker:hover {
    transform: none;
  }
}


/* ================================================
   components/reasy-panel.css
   ================================================ */

/*
 * Reasy AI Assistant Panel
 * Right-side contextual panel for AI assistance
 * Shopify-style slide-in design
 */

/* ============================================
   CSS Variables (Reasy-specific)
   ============================================ */
:root {
  --reasy-panel-width: 360px;
  --reasy-fab-size: 48px;
  --reasy-fab-offset: 24px;
}

@media (max-width: 768px) {
  :root {
    --reasy-panel-width: 100%;
  }
}

/* ============================================
   Panel Container - Fixed viewport portal
   This creates a fixed layer that covers the viewport.
   All children are positioned relative to this container.
   ============================================ */
.reasy-panel-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  /* Prevent this from creating new stacking contexts issues */
  isolation: isolate;
}

/* Re-enable pointer events on interactive children */
.reasy-panel-container .reasy-fab,
.reasy-panel-container .reasy-panel,
.reasy-panel-container .reasy-overlay {
  pointer-events: auto;
}

/* ============================================
   Floating Action Button (FAB)
   ============================================ */
.reasy-fab {
  position: absolute;
  bottom: var(--reasy-fab-offset);
  right: var(--reasy-fab-offset);
  width: var(--reasy-fab-size);
  height: var(--reasy-fab-size);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg), 0 0 0 0 rgba(37, 99, 235, 0.4);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              background-color var(--transition-fast);
  padding: 0;
  animation: reasy-fab-pulse 3s ease-in-out infinite;
  z-index: 2;
}

/* Subtle pulse animation */
@keyframes reasy-fab-pulse {
  0%, 100% {
    box-shadow: var(--shadow-lg), 0 0 0 0 rgba(37, 99, 235, 0.4);
  }
  50% {
    box-shadow: var(--shadow-lg), 0 0 0 8px rgba(37, 99, 235, 0);
  }
}

.reasy-fab:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-xl), 0 0 20px rgba(37, 99, 235, 0.3);
  background: var(--color-primary-dark);
  animation: none;
}

.reasy-fab:active {
  transform: scale(0.98);
}

.reasy-fab img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Active state when panel is open */
.reasy-fab-active {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-glow-primary);
  animation: none;
}

/* Badge for notifications */
.reasy-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-error);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-white);
}

/* ============================================
   Panel - Uses right positioning for slide effect
   ============================================ */
.reasy-panel {
  position: absolute;
  top: 16px;
  right: -400px; /* Hidden off-screen */
  width: var(--reasy-panel-width);
  height: calc(100% - 112px);
  max-height: calc(100vh - 112px);
  max-height: calc(100dvh - 112px);
  background: var(--color-white);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  transition: right var(--transition-slow), opacity var(--transition-slow);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  opacity: 0;
  z-index: 1;
}

.reasy-panel-open {
  right: 16px; /* Slide into view */
  opacity: 1;
}

/* ============================================
   Mobile Overlay
   ============================================ */
.reasy-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
  z-index: 0;
}

.reasy-overlay-visible {
  opacity: 1;
  visibility: visible;
}

/* Only show overlay on mobile */
@media (min-width: 769px) {
  .reasy-overlay {
    display: none;
  }
}

/* ============================================
   Panel Header
   ============================================ */
.reasy-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-gray-50);
  flex-shrink: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.reasy-header-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reasy-header-icon img {
  width: 24px;
  height: 24px;
}

.reasy-header-text {
  flex: 1;
  min-width: 0;
}

.reasy-header-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: var(--line-height-tight);
}

.reasy-header-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.reasy-close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.reasy-close-btn:hover {
  background: var(--color-gray-200);
  color: var(--color-text-primary);
}

.reasy-close-btn svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   Suggestions Section
   ============================================ */
.reasy-suggestions {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-white);
  flex-shrink: 0;
}

.reasy-suggestions-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.reasy-suggestions-header svg {
  width: 16px;
  height: 16px;
  color: var(--color-warning);
}

/* Next step card */
.reasy-next-step {
  background: var(--color-primary-pale);
  border: 1px solid rgba(49, 46, 129, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.reasy-next-step-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-1) 0;
}

.reasy-next-step-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
  line-height: var(--line-height-relaxed);
}

.reasy-next-step-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.reasy-next-step-action:hover {
  color: var(--color-primary-dark);
}

/* Contextual prompts (property-specific) */
.reasy-contextual-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.reasy-contextual-prompt {
  padding: var(--space-2) var(--space-3);
  background: var(--color-white);
  border: 1px solid rgba(49, 46, 129, 0.25);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast);
  flex-shrink: 0;
}

.reasy-contextual-prompt:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-1px);
}

.reasy-contextual-prompt:active {
  transform: scale(0.98);
}

/* Quick questions */
.reasy-quick-questions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.reasy-quick-question {
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast);
}

.reasy-quick-question:hover {
  background: var(--color-primary-pale);
  border-color: rgba(49, 46, 129, 0.25);
}

/* ============================================
   Messages Section
   ============================================ */
.reasy-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Empty state */
.reasy-messages-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-tertiary);
}

.reasy-messages-empty img {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.reasy-messages-empty p {
  font-size: var(--font-size-sm);
  margin: 0;
  max-width: 200px;
}

/* Message bubbles */
.reasy-message {
  display: flex;
  flex-direction: column;
  max-width: 90%;
}

.reasy-message-user {
  align-self: flex-end;
}

.reasy-message-assistant {
  align-self: flex-start;
}

.reasy-message-content {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.reasy-message-user .reasy-message-content {
  background: var(--color-primary);
  color: var(--color-white);
  border-bottom-right-radius: var(--radius-sm);
}

.reasy-message-assistant .reasy-message-content {
  background: var(--color-gray-100);
  color: var(--color-text-primary);
  border-bottom-left-radius: var(--radius-sm);
}

.reasy-message-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.reasy-message-user .reasy-message-time {
  text-align: right;
}

/* Typing indicator */
.reasy-typing {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-sm);
  width: fit-content;
}

.reasy-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  animation: reasy-typing 1.4s infinite ease-in-out both;
}

.reasy-typing-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.reasy-typing-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes reasy-typing {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============================================
   Input Section
   ============================================ */
.reasy-input-section {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  background: var(--color-white);
  flex-shrink: 0;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.reasy-input-form {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}

.reasy-input-wrapper {
  flex: 1;
  min-width: 0;
}

.reasy-input {
  width: 100%;
  min-height: 40px;
  max-height: 120px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-family: inherit;
  line-height: var(--line-height-base);
  resize: none;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.reasy-input:focus {
  outline: none;
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: 0 0 0 3px var(--color-primary-pale);
}

.reasy-input::placeholder {
  color: var(--color-text-muted);
}

.reasy-submit-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast),
              transform var(--transition-fast);
  flex-shrink: 0;
}

.reasy-submit-btn:hover {
  background: var(--color-primary-dark);
}

.reasy-submit-btn:active {
  transform: scale(0.95);
}

.reasy-submit-btn:disabled {
  background: var(--color-gray-300);
  cursor: not-allowed;
}

.reasy-submit-btn svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   Mocked Warning
   ============================================ */
.reasy-mocked-warning {
  padding: var(--space-2) var(--space-3);
  background: var(--color-warning-pale);
  border-bottom: 1px solid var(--color-warning);
  font-size: var(--font-size-xs);
  color: var(--color-warning-dark);
  text-align: center;
}

/* ============================================
   Layout Adjustments
   ============================================ */

/* Adjust main content when panel is open on desktop */
@media (min-width: 769px) {
  body.reasy-panel-open .dashboard-content,
  body.reasy-panel-open .main-content {
    margin-right: var(--reasy-panel-width);
    transition: margin-right var(--transition-slow);
  }
}

/* Mobile: Full screen panel with slide-up animation */
@media (max-width: 768px) {
  .reasy-panel {
    top: 0;
    right: 0;
    bottom: 100%; /* Start off-screen at bottom */
    width: 100%;
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transition: bottom var(--transition-slow), opacity var(--transition-slow);
    transform: none; /* Reset any transforms */
  }

  .reasy-panel-open {
    bottom: 0; /* Slide up into view */
  }

  .reasy-header {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    position: relative;
  }

  .reasy-header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: var(--color-gray-300);
    border-radius: var(--radius-full);
  }

  .reasy-input-section {
    border-radius: 0;
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }

  /* Prevent body scroll when panel is open */
  body.reasy-panel-open {
    overflow: hidden;
  }
}

/* Hide FAB when panel is open on mobile */
@media (max-width: 768px) {
  body.reasy-panel-open .reasy-fab {
    opacity: 0;
    pointer-events: none;
  }
}

/* ============================================
   Ask Reasy Floating Action Button (Property Pages)
   ============================================ */
.ask-reasy-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--color-primary, #2563EB);
  color: white;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 100;
  font-size: var(--font-size-sm);
}

.ask-reasy-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  color: white;
  background: var(--color-primary-dark, #1d4ed8);
}

.ask-reasy-fab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.ask-reasy-fab .ask-reasy-icon {
  font-size: 18px;
  line-height: 1;
}

.ask-reasy-fab .ask-reasy-text {
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .ask-reasy-fab {
    bottom: 16px;
    right: 16px;
    padding: 10px 16px;
    gap: 6px;
  }
  
  .ask-reasy-fab .ask-reasy-text {
    font-size: var(--font-size-xs);
  }
}

/* ============================================
   Accessibility
   ============================================ */
.reasy-panel:focus-visible {
  outline: none;
}

/* Focus visible for keyboard users */
.reasy-fab:focus-visible,
.reasy-close-btn:focus-visible,
.reasy-quick-question:focus-visible,
.reasy-submit-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reasy-panel,
  .reasy-overlay,
  .reasy-fab,
  .reasy-typing-dot,
  .ask-reasy-fab {
    transition: none;
    animation: none;
  }
}


/* ================================================
   components/reasy-assistant.css
   ================================================ */

.reasy-assistant {
  background: #FDF6EC;
  border: 1px solid #F0E4D0;
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: reasy-fade-in 0.4s ease-out;
  position: relative;
}

.reasy-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.reasy-assistant-content {
  flex: 1;
  min-width: 0;
}

.reasy-assistant-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #5D4E37;
}

.reasy-assistant-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #B8A98E;
  flex-shrink: 0;
  transition: color 0.2s;
}

.reasy-assistant-dismiss:hover {
  color: #5D4E37;
}

@keyframes reasy-fade-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ================================================
   components/transitions.css
   ================================================ */

/*
 * Micro-interactions and Transitions
 * Subtle animations for enhanced UX
 */

/* ============================================
   Page Transitions (Turbo)
   ============================================ */
turbo-frame {
  transition: opacity 0.15s ease;
}

/* ============================================
   Button Press Interactions
   ============================================ */
.btn {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn:active {
  transform: scale(0.97);
}

/* Additional button types */
button,
input[type="submit"],
input[type="button"],
.button {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
.button:active {
  transform: scale(0.97);
}

/* ============================================
   Card Hover Effects
   ============================================ */
.card,
.property-card,
.listing-card,
.dashboard-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover,
.property-card:hover,
.listing-card:hover,
.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* ============================================
   Link Underline Animation
   ============================================ */
.nav-link,
.navigation-link,
.header-nav a,
.footer-nav a {
  position: relative;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-link::after,
.navigation-link::after,
.header-nav a::after,
.footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.navigation-link:hover::after,
.header-nav a:hover::after,
.footer-nav a:hover::after {
  width: 100%;
}

/* Special case for active nav items */
.nav-link.active::after,
.navigation-link.active::after,
.header-nav a.active::after,
.footer-nav a.active::after {
  width: 100%;
  background: var(--color-primary, #2563EB);
}

/* ============================================
   Form Input Focus Animations
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

input:focus,
textarea:focus,
select:focus {
  transform: translateY(-1px);
}

/* ============================================
   Loading States
   ============================================ */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  100% {
    left: 100%;
  }
}

/* ============================================
   Hover States for Interactive Elements
   ============================================ */
.clickable,
[role="button"],
.interactive {
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.clickable:hover,
[role="button"]:hover,
.interactive:hover {
  transform: scale(1.02);
}

.clickable:active,
[role="button"]:active,
.interactive:active {
  transform: scale(0.98);
}

/* ============================================
   Toast/Notification Animations
   ============================================ */
.toast,
.notification,
.alert {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateY(-10px);
  opacity: 0;
}

.toast.show,
.notification.show,
.alert.show {
  transform: translateY(0);
  opacity: 1;
}

/* ============================================
   Modal/Dialog Animations
   ============================================ */
.modal,
.dialog {
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
  transform: scale(0.95);
}

.modal.open,
.dialog.open {
  opacity: 1;
  transform: scale(1);
}

/* ============================================
   Accessibility - Respect Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================
   components/empty-states.css
   ================================================ */

/*
 * Empty States
 * Consistent styling for empty/no content states
 */

/* ============================================
   Main Empty State Container
   ============================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 320px;
  margin: 0 auto;
  padding: 48px;
}

/* ============================================
   Empty State Icon
   ============================================ */
.empty-state-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-4, 16px);
  color: var(--color-gray-300, #d1d5db);
  opacity: 0.8;
}

/* SVG icons inside empty state */
.empty-state-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Image icons inside empty state */
.empty-state-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.6;
}

/* ============================================
   Empty State Title
   ============================================ */
.empty-state-title {
  font-size: 20px;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #111827);
  margin: 0 0 var(--space-2, 8px) 0;
  line-height: var(--line-height-tight, 1.25);
}

/* ============================================
   Empty State Description
   ============================================ */
.empty-state-description {
  font-size: 14px;
  color: var(--color-gray-400, #9ca3af);
  margin: 0 0 var(--space-4, 16px) 0;
  line-height: var(--line-height-relaxed, 1.625);
  max-width: 280px;
}

/* ============================================
   Empty State Action Button
   ============================================ */
.empty-state-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  background: var(--color-primary, #2563eb);
  color: var(--color-white, #ffffff);
  border: none;
  border-radius: var(--radius-md, 6px);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.empty-state-action:hover {
  background: var(--color-primary-dark, #1d4ed8);
  color: var(--color-white, #ffffff);
  text-decoration: none;
}

.empty-state-action:active {
  transform: scale(0.98);
}

/* Secondary action button */
.empty-state-action.secondary {
  background: transparent;
  color: var(--color-text-secondary, #6b7280);
  border: 1px solid var(--color-border, #e5e7eb);
}

.empty-state-action.secondary:hover {
  background: var(--color-gray-50, #f9fafb);
  color: var(--color-text-primary, #111827);
  border-color: var(--color-border-dark, #d1d5db);
}

/* ============================================
   Variants
   ============================================ */

/* Compact variant */
.empty-state.compact {
  padding: var(--space-6, 24px);
  max-width: 280px;
}

.empty-state.compact .empty-state-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-3, 12px);
}

.empty-state.compact .empty-state-title {
  font-size: var(--font-size-lg, 18px);
}

.empty-state.compact .empty-state-description {
  font-size: var(--font-size-sm, 14px);
  margin-bottom: var(--space-3, 12px);
}

/* Large variant */
.empty-state.large {
  padding: var(--space-12, 48px) var(--space-8, 32px);
  max-width: 400px;
}

.empty-state.large .empty-state-icon {
  width: 80px;
  height: 80px;
  margin-bottom: var(--space-6, 24px);
}

.empty-state.large .empty-state-title {
  font-size: var(--font-size-2xl, 24px);
  margin-bottom: var(--space-3, 12px);
}

.empty-state.large .empty-state-description {
  font-size: var(--font-size-base, 16px);
  max-width: 320px;
}

/* ============================================
   Themed Variants
   ============================================ */

/* Error state */
.empty-state.error .empty-state-icon {
  color: var(--color-error, #ef4444);
}

.empty-state.error .empty-state-title {
  color: var(--color-error-dark, #dc2626);
}

/* Success state */
.empty-state.success .empty-state-icon {
  color: var(--color-success, #10b981);
}

.empty-state.success .empty-state-title {
  color: var(--color-success-dark, #047857);
}

/* Warning state */
.empty-state.warning .empty-state-icon {
  color: var(--color-warning, #f59e0b);
}

.empty-state.warning .empty-state-title {
  color: var(--color-warning-dark, #d97706);
}

/* ============================================
   Common Empty State Patterns
   ============================================ */

/* No search results */
.empty-state-search {
  padding: var(--space-8, 32px) var(--space-4, 16px);
}

.empty-state-search .empty-state-description {
  margin-bottom: var(--space-6, 24px);
}

/* No items in list/grid */
.empty-state-list {
  min-height: 200px;
  justify-content: center;
}

/* Loading state placeholder */
.empty-state-loading {
  opacity: 0.6;
}

.empty-state-loading .empty-state-icon {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
  .empty-state {
    padding: var(--space-6, 24px) var(--space-4, 16px);
    max-width: 280px;
  }

  .empty-state-icon {
    width: 56px;
    height: 56px;
  }

  .empty-state-title {
    font-size: var(--font-size-lg, 18px);
  }

  .empty-state-description {
    font-size: var(--font-size-sm, 14px);
  }
}

/* ============================================
   Accessibility
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .empty-state-loading .empty-state-icon,
  .empty-state * {
    animation: none;
  }
}

/* ================================================
   components/skeleton.css
   ================================================ */

/* Skeleton Loading Animations */

.skeleton {
  background: linear-gradient(90deg, 
    var(--color-gray-200) 25%, 
    var(--color-gray-100) 50%, 
    var(--color-gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
  border-radius: var(--radius-sm);
}

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

.skeleton-text {
  height: 16px;
  width: 80%;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.skeleton-text:last-child {
  margin-bottom: 0;
}

.skeleton-title {
  height: 24px;
  width: 60%;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.skeleton-card {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.skeleton-card::before {
  content: '';
  display: block;
  width: 100%;
  height: 120px;
  background: linear-gradient(90deg, 
    var(--color-gray-300) 25%, 
    var(--color-gray-200) 50%, 
    var(--color-gray-300) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.skeleton-card .skeleton-text:nth-child(2) {
  width: 90%;
}

.skeleton-card .skeleton-text:nth-child(3) {
  width: 70%;
}

.skeleton-card .skeleton-text:nth-child(4) {
  width: 50%;
  margin-bottom: 0;
}

.skeleton-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  margin-bottom: var(--space-3);
}

.skeleton-stat::before {
  content: '';
  width: 40px;
  height: 40px;
  background: linear-gradient(90deg, 
    var(--color-gray-300) 25%, 
    var(--color-gray-200) 50%, 
    var(--color-gray-300) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
  border-radius: 50%;
  margin-bottom: var(--space-2);
}

.skeleton-stat .skeleton-text:first-child {
  width: 60px;
  height: 20px;
  margin-bottom: var(--space-1);
}

.skeleton-stat .skeleton-text:last-child {
  width: 40px;
  height: 14px;
}

/* Skeleton variations for different content types */
.skeleton-map {
  width: 100%;
  height: 300px;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.skeleton-score {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto var(--space-4);
}

.skeleton-table {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .skeleton-card::before {
    height: 80px;
  }
  
  .skeleton-map {
    height: 200px;
  }
  
  .skeleton-score {
    width: 80px;
    height: 80px;
  }
}

/* ================================================
   components/property_tabs.css
   ================================================ */

/* Property Detail Tabs */

.property-tabs {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: var(--space-6);
}

.property-tabs-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.property-tabs-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-4) 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.property-tabs-nav::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Webkit */
}

.property-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  min-width: fit-content;
}

.property-tab:hover {
  background: var(--color-gray-200);
  color: var(--color-gray-900);
}

.property-tab.active {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.property-tab.active:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.property-tab svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* Tab content panels */
.property-tab-panel {
  display: none;
}

.property-tab-panel.active {
  display: block;
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
  .property-tabs-nav {
    padding: var(--space-3) 0;
    gap: var(--space-1);
  }
  
  .property-tab {
    padding: var(--space-2) var(--space-3);
    font-size: 0.85rem;
  }
  
  .property-tab svg {
    width: 16px;
    height: 16px;
  }
}

/* Smooth transitions for tab switching */
.property-tab-panel {
  transition: opacity 0.3s ease-in-out;
}

.property-tab-panel[style*="display: block"] {
  animation: fadeIn 0.3s ease-in-out;
}

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

/* Tab indicators on mobile for overflow */
.property-tabs-nav::before,
.property-tabs-nav::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 1;
}

.property-tabs-nav::before {
  left: 0;
  background: linear-gradient(to right, var(--color-white), transparent);
}

.property-tabs-nav::after {
  right: 0;
  background: linear-gradient(to left, var(--color-white), transparent);
}

@media (min-width: 769px) {
  .property-tabs-nav::before,
  .property-tabs-nav::after {
    display: none;
  }
}

/* ================================================
   components/sticky_header.css
   ================================================ */

/* Sticky Property Header */

.property-sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-sm);
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}

.property-sticky-header.visible {
  transform: translateY(0);
}

.sticky-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.sticky-header-info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
}

.sticky-header-address {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.sticky-header-price {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.sticky-header-stats {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.9rem;
  color: var(--color-gray-600);
  white-space: nowrap;
  flex-shrink: 0;
}

.sticky-header-stat {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.sticky-header-stat svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  color: var(--color-gray-500);
}

.sticky-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.sticky-header-love-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-gray-600);
  text-decoration: none;
  transition: all 0.2s ease;
}

.sticky-header-love-btn:hover {
  border-color: rgba(49, 46, 129, 0.25);
  color: var(--color-primary);
}

.sticky-header-love-btn.loved {
  background: var(--color-primary);
  border-color: rgba(49, 46, 129, 0.25);
  color: var(--color-white);
}

.sticky-header-love-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.sticky-header-enquiry-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.sticky-header-enquiry-btn:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .sticky-header-content {
    padding: var(--space-2) var(--space-4);
    gap: var(--space-2);
  }
  
  .sticky-header-info {
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
  }
  
  .sticky-header-address {
    font-size: 0.9rem;
    max-width: 150px;
  }
  
  .sticky-header-price {
    font-size: 1rem;
  }
  
  .sticky-header-stats {
    display: none; /* Hide stats on mobile to save space */
  }
  
  .sticky-header-enquiry-btn {
    padding: var(--space-2) var(--space-3);
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .sticky-header-address {
    max-width: 120px;
  }
  
  .sticky-header-price {
    font-size: 0.9rem;
  }
  
  .sticky-header-enquiry-btn {
    padding: var(--space-1) var(--space-2);
  }
}

/* Ensure sticky header doesn't interfere with property tabs */
.property-sticky-header.visible + * .property-tabs {
  top: 60px; /* Adjust based on sticky header height */
}

@media (max-width: 768px) {
  .property-sticky-header.visible + * .property-tabs {
    top: 50px;
  }
}

/* ================================================
   components/workspace.css
   ================================================ */

/* ==========================================================================
   Workspace Styles
   Transaction workspace (deal room) components for buyer-seller interactions
   ========================================================================== */

/* --------------------------------------------------------------------------
   Workspace Card (List View)
   -------------------------------------------------------------------------- */

.workspace-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--transition-fast);
  text-decoration: none;
  color: inherit;
}

.workspace-card:hover {
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.workspace-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.workspace-property {
  flex: 1;
}

.workspace-property h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs) 0;
}

.workspace-property-suburb {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.workspace-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
}

.workspace-status-badge.status-active {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.workspace-status-badge.status-pending_buyer {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.workspace-status-badge.status-pending_seller {
  background: var(--color-info-light);
  color: var(--color-info-dark);
}

.workspace-status-badge.status-completed {
  background: var(--color-neutral-100);
  color: var(--color-text-secondary);
}

.workspace-status-badge.status-cancelled {
  background: var(--color-error-light);
  color: var(--color-error-dark);
}

.workspace-card-body {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}

.workspace-participants-preview {
  display: flex;
  align-items: center;
}

.workspace-participant-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border: 2px solid var(--color-white);
  margin-left: -8px;
}

.workspace-participant-avatar:first-child {
  margin-left: 0;
}

.workspace-participant-count {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-neutral-100);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border: 2px solid var(--color-white);
  margin-left: -8px;
}

.workspace-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.workspace-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.workspace-meta-item svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.workspace-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
  margin-top: auto;
}

.workspace-role {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.workspace-role strong {
  color: var(--color-text-primary);
}

.workspace-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-xs);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

/* --------------------------------------------------------------------------
   Workspace Grid
   -------------------------------------------------------------------------- */

.workspace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .workspace-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Workspace Detail Layout
   -------------------------------------------------------------------------- */

.workspace-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-lg);
  min-height: calc(100vh - 200px);
}

@media (max-width: 1024px) {
  .workspace-layout {
    grid-template-columns: 1fr;
  }
}

/* Workspace Sidebar */
.workspace-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.workspace-nav {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.workspace-nav-header {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
}

.workspace-nav-header h2 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.workspace-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.workspace-nav-item {
  border-bottom: 1px solid var(--color-border-light);
}

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

.workspace-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.workspace-nav-link:hover {
  background: var(--color-neutral-50);
}

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

.workspace-nav-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.workspace-nav-link span {
  flex: 1;
}

.workspace-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-xs);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

/* Workspace Info Card */
.workspace-info-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.workspace-info-card h3 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-sm) 0;
}

.workspace-info-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  font-size: var(--font-size-sm);
}

.workspace-info-item:not(:last-child) {
  border-bottom: 1px solid var(--color-border-light);
}

.workspace-info-label {
  color: var(--color-text-secondary);
}

.workspace-info-value {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* --------------------------------------------------------------------------
   Workspace Chat
   -------------------------------------------------------------------------- */

.workspace-main {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.workspace-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-neutral-50);
}

.workspace-chat-header h2 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.workspace-chat-header h2 svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-secondary);
}

.channel-tabs {
  display: flex;
  gap: var(--space-xs);
}

.channel-tab {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.channel-tab:hover {
  border-color: rgba(49, 46, 129, 0.25);
  color: var(--color-primary);
}

.channel-tab.active {
  background: var(--color-primary);
  border-color: rgba(49, 46, 129, 0.25);
  color: var(--color-white);
}

.workspace-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 400px;
  max-height: 600px;
}

/* Message Styles */
.message {
  display: flex;
  gap: var(--space-sm);
  max-width: 85%;
}

.message.message-own {
  flex-direction: row-reverse;
  margin-left: auto;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

.message-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.message-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-xs);
}

.message-own .message-header {
  flex-direction: row-reverse;
}

.message-sender {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.message-role {
  color: var(--color-text-tertiary);
}

.message-time {
  color: var(--color-text-tertiary);
}

.message-bubble {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-neutral-100);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.message-own .message-bubble {
  background: var(--color-primary);
  color: var(--color-white);
}

.message-system {
  text-align: center;
  max-width: 100%;
  margin: var(--space-sm) auto;
}

.message-system .message-bubble {
  display: inline-block;
  background: var(--color-neutral-50);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  padding: var(--space-xs) var(--space-sm);
}

/* Chat Input */
.workspace-chat-input {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-top: 1px solid var(--color-border-light);
  background: var(--color-neutral-50);
}

.workspace-chat-input .form-control {
  flex: 1;
  border-radius: var(--radius-full);
  padding: var(--space-sm) var(--space-md);
}

.workspace-chat-input .btn {
  border-radius: var(--radius-full);
  padding: var(--space-sm) var(--space-md);
}

/* --------------------------------------------------------------------------
   Participants
   -------------------------------------------------------------------------- */

.participants-section {
  margin-bottom: var(--space-xl);
}

.participants-section .section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-md) 0;
}

.participants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
}

.participant-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.participant-card.participant-principal {
  border-left: 3px solid rgba(49, 46, 129, 0.35);
}

.participant-card.participant-buyer_legal,
.participant-card.participant-seller_legal {
  border-left: 3px solid var(--color-info);
}

.participant-card.participant-seller_agent {
  border-left: 3px solid var(--color-success);
}

.participant-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

.participant-info {
  flex: 1;
  min-width: 150px;
}

.participant-info h3 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-xs) 0;
}

.participant-role {
  display: inline-block;
  padding: 2px var(--space-xs);
  background: var(--color-neutral-100);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xs);
}

.participant-provider-type {
  display: inline-block;
  padding: 2px var(--space-xs);
  background: var(--color-info-light);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-info-dark);
  margin-left: var(--space-xs);
}

.participant-email {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.participant-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  width: 100%;
}

.permission-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.permission-badge.permission-granted {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.permission-badge.permission-denied {
  background: var(--color-neutral-100);
  color: var(--color-text-tertiary);
}

.participant-actions {
  width: 100%;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-light);
}

/* --------------------------------------------------------------------------
   Invitations
   -------------------------------------------------------------------------- */

.invitations-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.invitation-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.invitation-info {
  flex: 1;
  min-width: 200px;
}

.invitation-info h3 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-xs) 0;
}

.invitation-email {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.invitation-role {
  display: inline-block;
  padding: 2px var(--space-xs);
  background: var(--color-neutral-100);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
}

.invitation-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.invitation-actions {
  display: flex;
  gap: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Documents
   -------------------------------------------------------------------------- */

.document-category {
  margin-bottom: var(--space-xl);
}

.document-category .category-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-md) 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border-light);
}

.document-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
}

.document-card {
  display: flex;
  gap: var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.document-icon {
  width: 48px;
  height: 48px;
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.document-icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-text-secondary);
}

.document-info {
  flex: 1;
  min-width: 0;
}

.document-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-xs) 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xs);
}

.document-sensitive {
  color: var(--color-warning-dark);
  font-weight: var(--font-weight-medium);
}

.document-uploader {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.document-date {
  color: var(--color-text-tertiary);
}

.document-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Contract Execution
   -------------------------------------------------------------------------- */

.contract-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contract-status-card,
.contract-details-card,
.contract-signatures-card,
.contract-confirmations-card,
.confirmation-history-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.contract-status-card {
  text-align: center;
}

.contract-status-header {
  margin-bottom: var(--space-lg);
}

.contract-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.contract-status-badge.status-draft {
  background: var(--color-neutral-100);
  color: var(--color-text-secondary);
}

.contract-status-badge.status-awaiting_signatures {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.contract-status-badge.status-signed {
  background: var(--color-info-light);
  color: var(--color-info-dark);
}

.contract-status-badge.status-exchanged {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.contract-status-badge.status-settled {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* Contract Progress Steps */
.contract-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  max-width: 500px;
  margin: 0 auto;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.step-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.step-icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-tertiary);
}

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

.progress-step.completed .step-icon svg {
  color: var(--color-white);
}

.step-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.progress-step.completed .step-label {
  color: var(--color-success-dark);
  font-weight: var(--font-weight-medium);
}

.progress-line {
  flex: 1;
  height: 2px;
  background: var(--color-border-light);
  max-width: 60px;
}

/* Contract Details */
.contract-details-card h2,
.contract-signatures-card h2,
.contract-confirmations-card h2,
.confirmation-history-card h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-md) 0;
}

.contract-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
}

.contract-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.detail-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.detail-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.contract-conditions {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
}

.contract-conditions h3 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-sm) 0;
}

.contract-conditions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contract-conditions li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  color: var(--color-text-secondary);
}

.contract-conditions li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-warning);
}

/* Signatures */
.signatures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
}

.signature-box {
  border: 2px dashed var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}

.signature-box.signed {
  border-style: solid;
  border-color: var(--color-success);
  background: var(--color-success-light);
}

.signature-box h3 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-md) 0;
}

.signature-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-success-dark);
}

.signature-status svg {
  color: var(--color-success);
}

.signature-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.awaiting-signature {
  color: var(--color-text-tertiary);
  font-style: italic;
}

.signature-actions {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
  text-align: center;
}

/* Confirmations */
.confirmations-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.confirmation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
}

.confirmation-item {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.confirmation-item h3 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-sm) 0;
}

.confirmation-status {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.confirmation-check {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.confirmation-check.confirmed {
  color: var(--color-success-dark);
}

.confirmation-check svg {
  color: var(--color-success);
}

.confirm-deposit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Confirmation History */
.confirmation-history {
  list-style: none;
  padding: 0;
  margin: 0;
}

.confirmation-history li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.confirmation-history li:last-child {
  border-bottom: none;
}

.confirmation-milestone {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.confirmation-confirmer {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   Workspace List Items (Dashboard)
   -------------------------------------------------------------------------- */

.workspace-card-list {
  display: flex;
  flex-direction: column;
}

.workspace-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}

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

.workspace-list-item:hover {
  background: var(--color-neutral-50);
}

.workspace-list-item-content {
  flex: 1;
}

.workspace-list-item-address {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.workspace-list-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
}

.workspace-list-role {
  color: var(--color-text-secondary);
}

.workspace-list-item-arrow {
  color: var(--color-text-tertiary);
  transition: transform var(--transition-fast);
}

.workspace-list-item:hover .workspace-list-item-arrow {
  transform: translateX(4px);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Empty States
   -------------------------------------------------------------------------- */

.workspace-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  text-align: center;
}

.workspace-empty-state svg {
  width: 64px;
  height: 64px;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-md);
}

.workspace-empty-state h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-sm) 0;
}

.workspace-empty-state p {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-lg) 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .workspace-layout {
    grid-template-columns: 1fr;
  }

  .workspace-sidebar {
    order: 2;
  }

  .workspace-main {
    order: 1;
  }

  .contract-progress {
    flex-wrap: wrap;
  }

  .progress-line {
    display: none;
  }

  .signatures-grid,
  .confirmation-grid {
    grid-template-columns: 1fr;
  }
}


/* ================================================
   components/valuation.css
   ================================================ */

/* Property Valuation Estimate Styles */

.valuation-section {
  background: linear-gradient(135deg, #f6f9fc 0%, #e9f7f9 100%);
  border: 2px solid #e1f5fe;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.valuation-section .property-section-title {
  color: #0277bd;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.valuation-section .property-section-title svg {
  stroke: #0277bd;
}

.valuation-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.valuation-estimate {
  text-align: center;
  padding: 1rem 0;
}

.valuation-value {
  font-size: 2.25rem;
  font-weight: 700;
  color: #0277bd;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}

.valuation-confidence {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.confidence-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.confidence-high {
  background: #d1f2eb;
  color: #00875a;
}

.confidence-medium {
  background: #fff3cd;
  color: #856404;
}

.confidence-low {
  background: #f8d7da;
  color: #721c24;
}

.comparable-count {
  font-size: 0.875rem;
  color: #6e6e73;
}

.valuation-details {
  border-top: 1px solid #e1f5fe;
  padding-top: 1rem;
}

.valuation-details summary {
  cursor: pointer;
  font-weight: 600;
  color: #0277bd;
  padding: 0.5rem 0;
  list-style: none;
  position: relative;
  padding-left: 1.5rem;
}

.valuation-details summary::before {
  content: "▶";
  position: absolute;
  left: 0;
  transition: transform 0.2s ease;
  color: #0277bd;
}

.valuation-details[open] summary::before {
  transform: rotate(90deg);
}

.valuation-details summary::-webkit-details-marker {
  display: none;
}

.comparable-sales {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.comparable-item {
  background: white;
  border-radius: 8px;
  padding: 0.75rem;
  border: 1px solid #e3f2fd;
}

.comparable-address {
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 0.25rem;
}

.comparable-meta {
  font-size: 0.875rem;
  color: #6e6e73;
}

.valuation-methodology {
  font-size: 0.875rem;
  color: #6e6e73;
  font-style: italic;
  margin: 1rem 0 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid #e3f2fd;
}

.valuation-disclaimer {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 0.75rem;
  margin: 0;
  font-size: 0.875rem;
  color: #6c757d;
  text-align: center;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .valuation-section {
    padding: 1rem;
  }
  
  .valuation-value {
    font-size: 1.875rem;
  }
  
  .valuation-confidence {
    align-items: stretch;
    text-align: center;
  }
  
  .comparable-sales {
    gap: 0.5rem;
  }
  
  .comparable-item {
    padding: 0.5rem;
  }
}

/* ================================================
   components/portfolio.css
   ================================================ */

/* Investment Portfolio Styles */

/* Property Metrics */
.property-card-metrics {
  background: var(--color-background-secondary, #f8f9fa);
  border-radius: 8px;
  padding: 0.75rem;
  border: 1px solid var(--color-border-light, #e9ecef);
}

.property-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.property-metric:last-child {
  margin-bottom: 0;
}

.property-metric-label {
  font-size: 0.75rem;
  color: var(--color-text-secondary, #6c757d);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.property-metric-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary, #212529);
}

/* Portfolio Card Stats */
.card-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

.card-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}

.card-stat-content {
  flex: 1;
  min-width: 0;
}

.card-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary, #212529);
  margin: 0 0 0.25rem 0;
  line-height: 1.2;
}

.card-stat-label {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #6c757d);
  font-weight: 500;
}

/* Property Card Badge Variations */
.property-card-badge-secondary {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  z-index: 2;
}

.property-card-badge-secondary.badge-success {
  background: rgba(34, 197, 94, 0.9);
  color: white;
}

.property-card-badge-secondary.badge-warning {
  background: rgba(251, 191, 36, 0.9);
  color: #92400e;
}

/* Yield Color Coding */
.text-success {
  color: var(--color-success, #22c55e) !important;
  font-weight: 600;
}

.text-warning {
  color: var(--color-warning, #f59e0b) !important;
  font-weight: 600;
}

.text-danger {
  color: var(--color-error, #ef4444) !important;
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .card-stat {
    gap: 0.75rem;
  }
  
  .card-stat-icon {
    width: 40px;
    height: 40px;
  }
  
  .card-stat-value {
    font-size: 1.25rem;
  }
  
  .property-card-metrics {
    padding: 0.5rem;
  }
  
  .property-metric-label {
    font-size: 0.6875rem;
  }
  
  .property-metric-value {
    font-size: 0.8125rem;
  }
  
  .property-card-badge-secondary {
    right: 0.75rem;
    top: 0.75rem;
    font-size: 0.6875rem;
    padding: 0.1875rem 0.375rem;
  }
}

/* Grid layout for portfolio stats */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Renovation Potential Styles */
.renovation-potential-card {
  border: 1px solid var(--color-border-light, #e9ecef);
}

.renovation-high .investment-metric-value {
  color: var(--color-success, #22c55e) !important;
  font-weight: 700;
}

.renovation-moderate .investment-metric-value {
  color: var(--color-warning, #f59e0b) !important;
  font-weight: 600;
}

.renovation-low .investment-metric-value {
  color: var(--color-primary, #2563eb) !important;
  font-weight: 500;
}

.renovation-details summary {
  color: var(--color-primary, #2563eb);
  font-size: 0.875rem;
  cursor: pointer;
}

.renovation-details[open] summary {
  margin-bottom: 0.5rem;
}

/* Noise Assessment Styles */
.noise-assessment-section {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid #cbd5e0;
}

.loading-state {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--color-background-secondary, #f8f9fa);
  border-radius: 8px;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border-light, #e9ecef);
  border-top: 2px solid var(--color-primary, #2563eb);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.noise-results {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.noise-finding {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: white;
  border-radius: 8px;
  border-left: 4px solid var(--color-warning, #f59e0b);
}

.noise-finding.high-impact {
  border-left-color: var(--color-error, #ef4444);
}

.noise-finding.medium-impact {
  border-left-color: var(--color-warning, #f59e0b);
}

.quiet-location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--color-success-light, #f0f9f0);
  border-radius: 8px;
  border: 1px solid var(--color-success, #22c55e);
  color: var(--color-success-dark, #166534);
}

/* Development Pipeline Styles */
.infrastructure-section {
  background: linear-gradient(135deg, #fef7f0 0%, #fed7aa 100%);
  border: 1px solid #fdba74;
}

.pipeline-summary {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.pipeline-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.pipeline-stat.major-development {
  color: var(--color-warning, #f59e0b);
  font-weight: 600;
}

.pipeline-stat.quiet-development {
  color: var(--color-success, #22c55e);
  font-weight: 500;
}

.development-details {
  margin-top: 1rem;
}

.development-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.development-item {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid var(--color-border-light, #e9ecef);
}

.development-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
  gap: 1rem;
}

.development-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary, #212529);
  line-height: 1.3;
}

.development-address {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary, #6c757d);
  margin: 0 0 0.5rem 0;
}

.development-status {
  flex-shrink: 0;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.development-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--color-text-muted, #8e8e93);
}

.development-type,
.development-date {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.empty-state-small {
  text-align: center;
  padding: 1.5rem;
  color: var(--color-text-secondary, #6c757d);
  font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .development-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .development-meta {
    flex-direction: column;
    gap: 0.25rem;
  }
  
  .pipeline-summary {
    text-align: center;
  }
}

/* ================================================
   layouts/grid.css
   ================================================ */

/*
 * Grid & Layout Utilities
 * Flexible grid system and spacing utilities
 */

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

.container-narrow {
  max-width: var(--content-narrow-width);
}

.container-fluid {
  max-width: none;
}

/* ============================================
   Grid System
   ============================================ */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Column span utilities */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-full { grid-column: 1 / -1; }

/* Row span utilities */
.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }

/* Auto-fit grids */
.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Gap utilities */
.gap-0 { gap: 0; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ============================================
   Flexbox Utilities
   ============================================ */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow { flex-grow: 1; }

/* Alignment */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }

/* ============================================
   Spacing Utilities
   ============================================ */

/* Margin */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.ml-0 { margin-left: 0; }
.ml-2 { margin-left: var(--space-2); }
.ml-4 { margin-left: var(--space-4); }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: 0; }
.mr-2 { margin-right: var(--space-2); }
.mr-4 { margin-right: var(--space-4); }
.mr-auto { margin-right: auto; }

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

/* Padding */
.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.pt-0 { padding-top: 0; }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }

.pb-0 { padding-bottom: 0; }
.pb-4 { padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: var(--space-8); }

.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* ============================================
   Width Utilities
   ============================================ */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333%; }
.w-2\/3 { width: 66.666%; }

.max-w-xs { max-width: 320px; }
.max-w-sm { max-width: 384px; }
.max-w-md { max-width: 448px; }
.max-w-lg { max-width: 512px; }
.max-w-xl { max-width: 576px; }
.max-w-2xl { max-width: 672px; }
.max-w-full { max-width: 100%; }
.max-w-none { max-width: none; }

.min-w-0 { min-width: 0; }

/* ============================================
   Height Utilities
   ============================================ */
.h-full { height: 100%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }

.min-h-screen { min-height: 100vh; }

/* ============================================
   Display Utilities
   ============================================ */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

/* ============================================
   Position Utilities
   ============================================ */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; top: 0; }

/* ============================================
   Overflow
   ============================================ */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ============================================
   Dividers
   ============================================ */
.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-6) 0;
}

.divider-vertical {
  width: 1px;
  background: var(--color-border);
  margin: 0 var(--space-4);
  align-self: stretch;
}

/* ============================================
   Responsive Utilities
   ============================================ */
@media (max-width: 1200px) {
  .grid-cols-4 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-6 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-6 {
    grid-template-columns: 1fr;
  }

  /* Reset column spans on mobile - single column layout */
  .col-span-2,
  .col-span-3,
  .col-span-4,
  .col-span-5,
  .col-span-6 {
    grid-column: span 1 / span 1;
  }

  .container {
    padding: 0 var(--space-4);
  }

  /* Mobile visibility */
  .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}


/* ================================================
   layouts/dashboard.css
   ================================================ */

/*
 * Dashboard Layout
 * Sidebar + main content layout for logged-in users
 * Modernized with gamification and Apple-inspired design
 */

/* CSS Custom Property for dynamic sidebar */
:root {
  --sidebar-current-width: var(--sidebar-width-expanded);
}

/* ============================================
   Dashboard Shell
   ============================================ */
.layout {
  display: flex;
  min-height: 100vh;
}

.layout-sidebar {
  /* Sidebar styles in navigation.css */
}

.layout-main {
  flex: 1;
  margin-left: var(--sidebar-current-width);
  background: var(--gradient-hero);
  min-height: 100vh;
  transition: margin-left var(--sidebar-transition);
}

/* ============================================
   Content Area - Generous whitespace
   ============================================ */
.content {
  padding: var(--space-10);
  max-width: var(--content-max-width);
}

.content-full {
  max-width: none;
}

.content-padded {
  padding: var(--space-12);
}

.content-narrow {
  max-width: var(--content-narrow-width);
}

/* ============================================
   Dashboard Hero Section (Metric Cards)
   ============================================ */
.dashboard-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

@media (max-width: 1200px) {
  .dashboard-hero {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .dashboard-hero {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Dashboard Main Grid - More breathing room
   ============================================ */
.dashboard-main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-8);
}

@media (max-width: 1200px) {
  .dashboard-main {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Dashboard Panels - Larger radius, more padding
   ============================================ */
.dashboard-panel {
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
}

.dashboard-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.dashboard-panel-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.dashboard-panel-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.dashboard-panel-actions {
  display: flex;
  gap: var(--space-2);
}

/* Full-width panel */
.dashboard-panel-full {
  grid-column: 1 / -1;
}

/* ============================================
   Activity Feed
   ============================================ */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.activity-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast);
}

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

.activity-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-gray-100);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.activity-icon-blue {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.activity-icon-green {
  background: var(--color-success-pale);
  color: var(--color-success);
}

.activity-icon-orange {
  background: var(--color-accent-pale);
  color: var(--color-accent);
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.activity-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.activity-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ============================================
   Quick Actions
   ============================================ */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.quick-action {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: all var(--transition-base);
}

.quick-action:hover {
  background: var(--color-gray-100);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.quick-action-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.quick-action-content {
  flex: 1;
}

.quick-action-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.quick-action-description {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.quick-action-highlight {
  background: var(--color-primary-pale);
  border: 1px solid rgba(49, 46, 129, 0.25);
}

.quick-action-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-action-icon {
  position: relative;
}

/* ============================================
   Stats Summary
   ============================================ */
.stats-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.stats-row:last-child {
  border-bottom: none;
}

.stats-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.stats-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* ============================================
   Welcome Banner - More prominent
   ============================================ */
.welcome-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-8);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-2xl);
  color: var(--color-white);
  margin-bottom: var(--space-10);
  box-shadow: 0 8px 30px rgba(79, 125, 221, 0.25);
}

.welcome-banner-content h1 {
  font-size: var(--font-size-2xl);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.welcome-banner-content p {
  font-size: var(--font-size-base);
  opacity: 0.9;
  margin: 0;
}

.welcome-banner-actions {
  display: flex;
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .welcome-banner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-4);
  }
}

/* ============================================
   Role Switcher
   ============================================ */
.role-switcher {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.role-switcher-item {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-gray-100);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.role-switcher-item:hover {
  background: var(--color-gray-200);
}

.role-switcher-item.active {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ============================================
   Section Backgrounds (Rentberry-inspired)
   ============================================ */
.section-beige {
  background: var(--section-bg-beige);
  padding: var(--space-12) var(--space-8);
  margin: 0 calc(var(--space-10) * -1);
  margin-bottom: var(--space-10);
}

.section-beige-light {
  background: var(--section-bg-beige-light);
  padding: var(--space-10) var(--space-8);
  margin: 0 calc(var(--space-10) * -1);
  margin-bottom: var(--space-10);
}

.section-blue-light {
  background: var(--section-bg-blue-light);
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-2xl);
  margin-bottom: var(--space-8);
}

/* ============================================
   Dashboard Section Titles
   ============================================ */
.section-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.section-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: var(--space-8);
}

/* ============================================
   Responsive Layout
   ============================================ */
@media (max-width: 1024px) {
  .layout-main {
    margin-left: 0;
  }

  .content {
    padding: var(--space-6);
  }

  .section-beige,
  .section-beige-light {
    margin: 0 calc(var(--space-6) * -1);
    margin-bottom: var(--space-8);
    padding: var(--space-8) var(--space-6);
  }

  /* Hide desktop sidebar on tablet/mobile */
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-base);
  }

  .sidebar.sidebar-open {
    transform: translateX(0);
  }

  /* Show mobile header with toggle */
  .mobile-header {
    display: flex;
  }
}

@media (max-width: 768px) {
  .content {
    padding: var(--space-4);
  }

  .dashboard-panel {
    padding: var(--space-5);
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }

  .section-beige,
  .section-beige-light {
    margin: 0 calc(var(--space-4) * -1);
    margin-bottom: var(--space-6);
    padding: var(--space-6) var(--space-4);
  }
}

/* ============================================
   Gamification Header Bar (Dashboard Top)
   ============================================ */
.dashboard-gamification-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);
  margin: 0 calc(var(--space-10) * -1);
  margin-top: calc(var(--space-10) * -1);
  margin-bottom: var(--space-8);
}

.dashboard-gamification-left {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.dashboard-gamification-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.dashboard-greeting {
  display: flex;
  flex-direction: column;
}

.dashboard-greeting-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.dashboard-greeting-name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

@media (max-width: 768px) {
  .dashboard-gamification-bar {
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    margin: 0 calc(var(--space-4) * -1);
    margin-top: calc(var(--space-4) * -1);
    margin-bottom: var(--space-6);
  }

  .dashboard-gamification-left,
  .dashboard-gamification-right {
    width: 100%;
    justify-content: space-between;
  }
}

/* ============================================
   Journey Progress Card (Dashboard Widget)
   ============================================ */
.dashboard-journey-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card-modern);
  margin-bottom: var(--space-8);
}

.dashboard-journey-ring {
  flex-shrink: 0;
}

.dashboard-journey-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dashboard-journey-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.dashboard-journey-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.dashboard-journey-actions {
  display: flex;
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .dashboard-journey-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .dashboard-journey-ring {
    justify-self: center;
  }

  .dashboard-journey-actions {
    justify-content: center;
  }
}

/* ============================================
   Mobile Header (Dashboard) - Light Theme
   ============================================ */
.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);
  z-index: var(--z-sticky);
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  box-shadow: var(--shadow-sm);
}

.mobile-header-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
  text-decoration: none;
}

.mobile-header-logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
}

.mobile-header-logo-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.mobile-header-logo-text span {
  color: var(--color-primary);
}

.mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  background: var(--color-gray-100);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.mobile-menu-toggle:hover {
  background: var(--color-gray-200);
}

.mobile-menu-toggle span {
  width: 20px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: all var(--transition-base);
}

.mobile-menu-toggle.menu-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.menu-open span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.menu-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-sticky) - 1);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.sidebar-overlay.sidebar-overlay-visible {
  display: block;
  opacity: 1;
}

@media (max-width: 1024px) {
  .layout-main {
    padding-top: 60px;
  }

  body.sidebar-menu-open {
    overflow: hidden;
  }
}

/* ============================================
   Small Phone Adjustments (480px and below)
   ============================================ */
@media (max-width: 480px) {
  .page-title {
    font-size: var(--font-size-2xl);
  }

  .page-subtitle {
    font-size: var(--font-size-sm);
  }

  .dashboard-panel {
    padding: var(--space-4);
  }

  .dashboard-panel-header {
    padding: var(--space-4);
    margin: calc(var(--space-4) * -1);
    margin-bottom: var(--space-4);
  }

  .content {
    padding: var(--space-3);
  }

  /* Tighter spacing on page header */
  .page-header {
    padding: var(--space-4) var(--space-3);
  }

  .page-header-content {
    gap: var(--space-1);
  }
}

/* ============================================
   Compact Stats Bar
   ============================================ */
.stats-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
}

.stats-bar-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.stats-bar-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

.stats-bar-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.stats-bar-divider {
  width: 1px;
  height: 24px;
  background: var(--color-border-light);
}

@media (max-width: 768px) {
  .stats-bar {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .stats-bar-divider {
    display: none;
  }

  .stats-bar-item {
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 60px;
  }

  .stats-bar-value {
    font-size: var(--font-size-lg);
  }

  .stats-bar-label {
    font-size: var(--font-size-xs);
  }
}


/* ================================================
   pages/auth.css
   ================================================ */

/*
 * World-Class Authentication Pages
 * Premium UX with animations, glassmorphism, and micro-interactions
 */

/* ============================================
   Keyframe Animations
   ============================================ */

/* Mesh gradient background animation */
@keyframes meshShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Floating orb animation for background depth */
@keyframes floatOrb {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  25% {
    transform: translate(10%, -10%) scale(1.05);
    opacity: 0.6;
  }
  50% {
    transform: translate(-5%, 15%) scale(0.95);
    opacity: 0.4;
  }
  75% {
    transform: translate(-15%, -5%) scale(1.02);
    opacity: 0.55;
  }
}

/* Fade in and slide up entrance */
@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale in entrance */
@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pulse glow for active elements */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
  }
}

/* SVG stroke draw animation */
@keyframes strokeDraw {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Checkmark draw animation */
@keyframes drawCheckmark {
  0% {
    stroke-dashoffset: 24;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Shake animation for errors */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Button ripple effect */
@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

/* Success pop animation */
@keyframes successPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

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

/* Digit scale on input */
@keyframes digitPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Progress line fill animation */
@keyframes lineFill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

/* Subtle bounce for celebrations */
@keyframes celebrateBounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-8px); }
  50% { transform: translateY(-4px); }
  75% { transform: translateY(-6px); }
}

/* Confetti particle animation */
@keyframes confettiFall {
  0% {
    transform: translateY(-100%) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(400%) rotate(720deg);
    opacity: 0;
  }
}

/* ============================================
   Animation Utility Classes
   ============================================ */
.animate-in {
  animation: fadeSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.animate-scale {
  animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }

/* ============================================
   Auth Page Layout - Premium Background
   ============================================ */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  position: relative;
  overflow: hidden;

  /* Animated mesh gradient background */
  background: linear-gradient(
    -45deg,
    #e8f4fd,
    #f0f7ff,
    #fff5f5,
    #f0fdf4,
    #fef3c7,
    #e8f4fd
  );
  background-size: 400% 400%;
  animation: meshShift 20s ease infinite;
}

/* Floating orbs for depth */
.auth-page::before,
.auth-page::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.auth-page::before {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  animation: floatOrb 15s ease-in-out infinite;
}

.auth-page::after {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 70%);
  bottom: -50px;
  left: -50px;
  animation: floatOrb 18s ease-in-out infinite reverse;
}

/* ============================================
   Glassmorphism Card
   ============================================ */
.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  padding: var(--space-10);

  /* Glassmorphism effect */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  /* Premium border with transparency */
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-2xl);

  /* Layered shadow for depth */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.03),
    0 4px 6px rgba(0, 0, 0, 0.02),
    0 10px 20px rgba(0, 0, 0, 0.04),
    0 25px 50px rgba(0, 0, 0, 0.06);

  /* Entrance animation */
  animation: scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ============================================
   Auth Logo
   ============================================ */
.auth-logo {
  display: block;
  height: 44px;
  margin: 0 auto var(--space-6);
  animation: fadeSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
  opacity: 0;
}

/* ============================================
   Auth Icon (for step icons)
   ============================================ */
.auth-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-pale) 0%, rgba(59, 130, 246, 0.15) 100%);
  border-radius: var(--radius-xl);
  animation: fadeSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  opacity: 0;
}

.auth-icon svg {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
}

/* ============================================
   Auth Header
   ============================================ */
.auth-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.auth-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-tight);
  animation: fadeSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  opacity: 0;
}

.auth-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--line-height-relaxed);
  animation: fadeSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
  opacity: 0;
}

.auth-subtitle strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

/* ============================================
   Step Progress Indicator
   Uses ol.steps > li.step structure
   Lines created with ::after pseudo-elements
   ============================================ */

.steps {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  list-style: none;
  margin: 24px 0 32px;
  padding: 0;
  counter-reset: step;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 80px;
  text-align: center;
}

/* Connecting line - drawn from each step except the last */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 20px);
  width: calc(100% - 40px);
  height: 2px;
  background: #e5e7eb;
}

/* The circle indicator */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f3f4f6;
  border: 2px solid #d1d5db;
  font-size: 14px;
  font-weight: 600;
  color: #9ca3af;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

/* Step label text */
.step-text {
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
}

/* Active step */
.step.is-active .step-indicator {
  background: #eff6ff;
  border-color: #4f7ddd;
  color: #4f7ddd;
}

.step.is-active .step-text {
  color: #4f7ddd;
  font-weight: 600;
}

/* Completed step */
.step.is-complete .step-indicator {
  background: #22c55e;
  border-color: #22c55e;
  color: white;
}

.step.is-complete .step-text {
  color: #22c55e;
}

/* Completed step's connecting line turns green */
.step.is-complete:not(:last-child)::after {
  background: #22c55e;
}

/* ============================================
   Auth Form
   ============================================ */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  animation: fadeSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
  opacity: 0;
}

.auth-form .form-group {
  margin-bottom: 0;
}

/* Checkbox with label on same line */
.form-group.form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-group.form-checkbox label {
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
}

/* ============================================
   Premium Input Fields
   ============================================ */
.form-group-premium {
  position: relative;
}

.form-input-premium {
  width: 100%;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
  font-size: var(--font-size-base);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  color: var(--color-text-primary);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-input-premium:hover {
  border-color: var(--color-gray-300);
}

.form-input-premium:focus {
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1),
              0 0 20px rgba(59, 130, 246, 0.1);
  outline: none;
}

.form-input-premium::placeholder {
  color: var(--color-text-muted);
}

/* Input icon */
.input-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition: color 0.3s ease;
  pointer-events: none;
}

.form-input-premium:focus ~ .input-icon {
  color: var(--color-primary);
}

/* Success checkmark indicator */
.input-valid-check {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 20px;
  height: 20px;
  color: var(--color-success);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-input-premium.is-valid ~ .input-valid-check {
  transform: translateY(-50%) scale(1);
  opacity: 1;
  animation: successPop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Error state */
.form-input-premium.is-invalid {
  border-color: var(--color-error);
  animation: shake 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-input-premium.is-invalid:focus {
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

/* Floating label */
.floating-label {
  position: absolute;
  left: var(--space-12);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent;
  padding: 0 var(--space-1);
}

.form-input-premium:focus ~ .floating-label,
.form-input-premium:not(:placeholder-shown) ~ .floating-label {
  top: 0;
  left: var(--space-3);
  transform: translateY(-50%);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  background: var(--color-white);
  font-weight: var(--font-weight-medium);
}

/* ============================================
   Premium Buttons
   ============================================ */
.btn-premium {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary) 0%, #4f46e5 100%);
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
}

.btn-premium:active {
  transform: translateY(0);
}

/* Ripple effect on click */
.btn-premium .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

/* Loading state */
.btn-premium.is-loading {
  pointer-events: none;
  color: transparent;
}

.btn-premium.is-loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Success state */
.btn-premium.is-success {
  background: linear-gradient(135deg, var(--color-success) 0%, #059669 100%);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}

.btn-premium.is-success .btn-text {
  opacity: 0;
}

.btn-premium.is-success .btn-check {
  opacity: 1;
  animation: successPop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-check {
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Secondary/Ghost button */
.btn-secondary-premium {
  width: 100%;
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-secondary-premium:hover {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
}

/* Passkey button */
.btn-passkey {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-passkey:hover {
  border-color: rgba(49, 46, 129, 0.25);
  background: var(--color-primary-pale);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.btn-passkey svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

/* ============================================
   OTP Input - Enhanced
   ============================================ */
.otp-input-group {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin: var(--space-4) 0;
}

.otp-digit {
  width: 52px;
  height: 64px;
  text-align: center;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--color-white);
  color: var(--color-text-primary);
  caret-color: var(--color-primary);
}

.otp-digit:hover {
  border-color: var(--color-gray-300);
}

.otp-digit:focus {
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1),
              0 0 20px rgba(59, 130, 246, 0.1);
  outline: none;
}

/* Filled digit state */
.otp-digit.filled {
  border-color: rgba(49, 46, 129, 0.25);
  background: var(--color-primary-pale);
  animation: digitPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Group glow when any digit is focused */
.otp-input-group.focused .otp-digit {
  border-color: var(--color-gray-300);
}

.otp-digit::placeholder {
  color: var(--color-gray-300);
}

/* Error shake on wrong code */
.otp-input-group.error .otp-digit {
  border-color: var(--color-error);
  animation: shake 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Success state when all filled correctly */
.otp-input-group.success .otp-digit {
  border-color: var(--color-success);
  background: rgba(16, 185, 129, 0.05);
}

/* ============================================
   Countdown Timer - Circular Progress
   ============================================ */
.countdown-timer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.countdown-circle {
  width: 24px;
  height: 24px;
  position: relative;
}

.countdown-circle svg {
  width: 24px;
  height: 24px;
  transform: rotate(-90deg);
}

.countdown-circle .circle-bg {
  fill: none;
  stroke: var(--color-gray-200);
  stroke-width: 2;
}

.countdown-circle .circle-progress {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 62.8; /* 2 * PI * 10 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}

/* ============================================
   Resend Section
   ============================================ */
.resend-section {
  text-align: center;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-gray-100);
  animation: fadeSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
  opacity: 0;
}

.resend-section .btn-ghost {
  color: var(--color-primary);
  border: none;
  background: none;
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

.resend-section .btn-ghost:hover {
  background: var(--color-primary-pale);
}

/* ============================================
   Auth Divider
   ============================================ */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-5) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  animation: fadeSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
  opacity: 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gray-200), transparent);
}

/* ============================================
   Social Auth Buttons
   ============================================ */
.auth-social {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: fadeSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
  opacity: 0;
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-social:hover {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
  transform: translateY(-1px);
}

.btn-social svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   Trust Badges
   ============================================ */
.trust-badges {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-gray-100);
  animation: fadeSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
  opacity: 0;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.trust-badge svg {
  width: 14px;
  height: 14px;
  color: var(--color-success);
  flex-shrink: 0;
}

/* ============================================
   Auth Footer
   ============================================ */
.auth-footer {
  text-align: center;
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  animation: fadeSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
  opacity: 0;
}

.auth-footer a {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  transition: color 0.2s ease;
}

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

/* ============================================
   Alert Styles for Auth
   ============================================ */
.auth-form .alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: fadeSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-form .alert-error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.auth-form .alert-success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* ============================================
   Password Strength Indicator
   ============================================ */
.password-strength {
  margin-top: var(--space-2);
}

.password-strength-bar {
  height: 4px;
  background: var(--color-gray-200);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--space-1);
}

.password-strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.password-strength-fill.weak {
  width: 33%;
  background: var(--color-error);
}

.password-strength-fill.medium {
  width: 66%;
  background: var(--color-warning);
}

.password-strength-fill.strong {
  width: 100%;
  background: var(--color-success);
}

.password-strength-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ============================================
   Passkey Features List
   ============================================ */
.passkey-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
}

.passkey-feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.passkey-feature svg {
  width: 20px;
  height: 20px;
  color: var(--color-success);
  flex-shrink: 0;
}

/* ============================================
   Celebration Overlay
   ============================================ */
.celebration-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -10px;
  animation: confettiFall 3s ease-in-out forwards;
}

/* ============================================
   Onboarding Specific Styles
   ============================================ */

/* Wider card for onboarding */
.auth-card-wide {
  max-width: 520px;
}

.auth-form-onboarding {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.auth-form-onboarding .form-group {
  margin-bottom: 0;
}

/* Name row - side by side on desktop */
.onboarding-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* Role selection cards */
.onboarding-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.onboarding-role-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-base);
  min-height: 80px;
}

.onboarding-role-card:hover {
  border-color: rgba(49, 46, 129, 0.25);
  background: var(--color-primary-pale);
}

.onboarding-role-card:has(.onboarding-role-checkbox:checked) {
  border-color: rgba(49, 46, 129, 0.25);
  background: var(--color-primary-pale);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.onboarding-role-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.onboarding-role-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.onboarding-role-card:hover .onboarding-role-icon,
.onboarding-role-card:has(.onboarding-role-checkbox:checked) .onboarding-role-icon {
  background: var(--color-primary);
  color: var(--color-white);
}

.onboarding-role-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.onboarding-role-text strong {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.onboarding-role-text span {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 480px) {
  .auth-page {
    padding: var(--space-4);
    align-items: flex-start;
    padding-top: var(--space-8);
  }

  .auth-card {
    padding: var(--space-6);
    border-radius: var(--radius-xl);
  }

  /* CRITICAL: Ensure content is visible on mobile even if animations fail */
  .auth-logo,
  .auth-icon,
  .auth-title,
  .auth-subtitle,
  .auth-form,
  .auth-divider,
  .auth-social,
  .auth-footer,
  .resend-section,
  .animate-in,
  .animate-scale {
    opacity: 1 !important;
  }

  .auth-logo {
    height: 36px;
    margin-bottom: var(--space-4);
  }

  .auth-title {
    font-size: var(--font-size-xl);
  }

  .steps {
    margin: 16px 0 24px;
  }

  .step {
    flex: 0 0 70px;
  }

  .step-indicator {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .step:not(:last-child)::after {
    top: 14px;
    left: calc(50% + 18px);
    width: calc(100% - 36px);
  }

  .step-text {
    font-size: 11px;
  }

  .otp-input-group {
    gap: var(--space-1);
  }

  .otp-digit {
    width: 44px;
    height: 56px;
    font-size: var(--font-size-xl);
    border-radius: var(--radius-lg);
  }

  .form-input-premium {
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-10);
  }

  .input-icon {
    left: var(--space-3);
  }

  .btn-premium,
  .btn-secondary-premium,
  .btn-passkey {
    padding: var(--space-3) var(--space-4);
  }

  .trust-badges {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Stack grids on mobile within auth pages */
  .auth-card .grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* Ensure inputs have proper touch targets and prevent iOS zoom */
  .auth-card .form-input {
    min-height: 48px;
    font-size: 16px;
  }

  /* Role selection cards - full width stacked */
  .auth-card .card {
    padding: var(--space-4) !important;
  }

  /* Larger checkbox for touch on onboarding */
  .auth-card input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
  }

  /* Onboarding mobile - stack name fields */
  .onboarding-name-row {
    grid-template-columns: 1fr;
  }

  /* Onboarding mobile - stack role cards */
  .onboarding-roles {
    grid-template-columns: 1fr;
  }

  /* Role cards - optimized for touch */
  .onboarding-role-card {
    padding: var(--space-4);
    min-height: 72px;
  }

  .onboarding-role-icon {
    width: 44px;
    height: 44px;
  }

  .onboarding-role-icon svg {
    width: 22px;
    height: 22px;
  }
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .auth-page {
    animation: none;
  }

  .auth-page::before,
  .auth-page::after {
    animation: none;
  }

  .auth-card,
  .auth-logo,
  .auth-icon,
  .auth-title,
  .auth-subtitle,
  .registration-progress,
  .auth-form,
  .auth-divider,
  .auth-social,
  .trust-badges,
  .auth-footer,
  .resend-section,
  .animate-in,
  .animate-scale {
    animation: none;
    opacity: 1;
  }

  .progress-step.active .step-circle {
    animation: none;
  }

  .otp-digit.filled {
    animation: none;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   Legacy Support (fallback styles)
   ============================================ */

/* For browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(20px)) {
  .auth-card {
    background: rgba(255, 255, 255, 0.97);
  }
}

/* Legacy auth-simple class support */
.auth-simple {
  width: 100%;
  max-width: 440px;
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-2xl);
}

.auth-simple .auth-logo {
  margin: 0 auto var(--space-8);
}

.auth-simple .auth-header {
  text-align: center;
}

/* Legacy form styles for compatibility */
.auth-form .btn {
  margin-top: var(--space-2);
}

.form-input-lg {
  padding: var(--space-4);
  font-size: var(--font-size-base);
}

/* Legacy auth container for two-column layouts */
.auth-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1000px;
  width: 100%;
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
}

.auth-features {
  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary-dark) 100%);
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
}

@media (max-width: 900px) {
  .auth-container {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .auth-features {
    display: none;
  }
}


/* ================================================
   pages/ai-chat.css
   ================================================ */

/*
 * AI Chat Interface
 * Conversation UI for 6 AI Assistants
 */

/* ============================================
   Chat Layout
   ============================================ */
.ai-chat-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: calc(100vh - 64px);
  background: var(--color-background-secondary);
}

/* ============================================
   Conversation List (Sidebar)
   ============================================ */
.ai-conversations {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-conversations-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}

.ai-conversations-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.ai-conversations-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

.ai-conversation-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--transition-fast);
  margin-bottom: var(--space-2);
}

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

.ai-conversation-item.active {
  background: var(--color-primary-pale);
}

.ai-conversation-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.ai-conversation-content {
  flex: 1;
  min-width: 0;
}

.ai-conversation-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.ai-conversation-preview {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-conversation-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ============================================
   Assistant Selector
   ============================================ */
.ai-assistants {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}

.ai-assistants-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.ai-assistants-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.ai-assistant-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: none;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-assistant-btn:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
}

.ai-assistant-btn.active {
  background: var(--color-primary-pale);
  border-color: rgba(49, 46, 129, 0.25);
}

.ai-assistant-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
}

.ai-assistant-name {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* Assistant Colors */
.ai-avatar-max { background: var(--color-primary-pale); }
.ai-avatar-sage { background: var(--color-success-pale); }
.ai-avatar-nina { background: var(--color-accent-pale); }
.ai-avatar-doc { background: var(--color-gray-100); }
.ai-avatar-scout { background: #E0F2FE; }
.ai-avatar-ally { background: #FCE7F3; }

/* ============================================
   Chat Main Area
   ============================================ */
.ai-chat-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.ai-chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
}

.ai-chat-assistant {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}

.ai-chat-assistant-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
}

.ai-chat-assistant-info h2 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.ai-chat-assistant-info p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.ai-chat-actions {
  display: flex;
  gap: var(--space-2);
}

/* ============================================
   Messages Container
   ============================================ */
.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ============================================
   Message Bubbles
   ============================================ */
.ai-message {
  display: flex;
  gap: var(--space-3);
  max-width: 85%;
}

.ai-message--user {
  margin-left: auto;
  flex-direction: row-reverse;
}

.ai-message-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

.ai-message--user .ai-message-avatar {
  background: var(--color-primary);
  color: var(--color-white);
}

.ai-message-content {
  flex: 1;
}

.ai-message-bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.ai-message--assistant .ai-message-bubble {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-light);
  border-bottom-left-radius: var(--radius-sm);
}

.ai-message--user .ai-message-bubble {
  background: var(--color-primary);
  color: var(--color-white);
  border-bottom-right-radius: var(--radius-sm);
}

.ai-message-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  padding: 0 var(--space-1);
}

.ai-message--user .ai-message-time {
  text-align: right;
}

/* ============================================
   Typing Indicator
   ============================================ */
.ai-typing {
  display: flex;
  gap: var(--space-3);
  max-width: 85%;
}

.ai-typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-sm);
}

.ai-typing-dot {
  width: 8px;
  height: 8px;
  background: var(--color-gray-400);
  border-radius: 50%;
  animation: typing-bounce 1.4s ease-in-out infinite;
}

.ai-typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.ai-typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-4px);
  }
}

/* ============================================
   Suggestions
   ============================================ */
.ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-light);
  background: var(--color-gray-50);
}

.ai-suggestion {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-suggestion:hover {
  background: var(--color-primary-pale);
  border-color: rgba(49, 46, 129, 0.25);
  color: var(--color-primary);
}

/* ============================================
   Input Area
   ============================================ */
.ai-input-area {
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-light);
}

.ai-input-container {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  max-width: 800px;
  margin: 0 auto;
}

.ai-input-wrapper {
  flex: 1;
  position: relative;
}

.ai-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  padding-right: var(--space-12);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  resize: none;
  min-height: 44px;
  max-height: 120px;
  transition: border-color var(--transition-fast);
}

.ai-input:focus {
  outline: none;
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: 0 0 0 3px var(--color-primary-pale);
}

.ai-input::placeholder {
  color: var(--color-text-muted);
}

.ai-input-actions {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  display: flex;
  gap: var(--space-1);
}

.ai-input-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-input-btn:hover {
  background: var(--color-gray-100);
  color: var(--color-text-primary);
}

.ai-send-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-lg);
  color: var(--color-white);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.ai-send-btn:hover {
  background: var(--color-primary-dark);
}

.ai-send-btn:disabled {
  background: var(--color-gray-300);
  cursor: not-allowed;
}

/* ============================================
   Empty State (New Chat)
   ============================================ */
.ai-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
}

.ai-empty-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin-bottom: var(--space-6);
}

.ai-empty-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.ai-empty-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  max-width: 400px;
  margin-bottom: var(--space-8);
}

.ai-starter-prompts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  max-width: 500px;
}

.ai-starter-prompt {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-starter-prompt:hover {
  background: var(--color-primary-pale);
  border-color: rgba(49, 46, 129, 0.25);
}

.ai-starter-prompt-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.ai-starter-prompt-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 900px) {
  .ai-chat-layout {
    grid-template-columns: 1fr;
  }

  .ai-conversations {
    display: none;
  }

  .ai-conversations.mobile-open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    width: 100%;
    max-width: 320px;
  }

  .ai-message {
    max-width: 95%;
  }

  .ai-starter-prompts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .ai-input-area {
    padding: var(--space-3) var(--space-4);
  }

  .ai-messages {
    padding: var(--space-4);
  }
}


/* ================================================
   pages/map.css
   ================================================ */

/*
 * Interactive Map Search
 * Leaflet integration with three-tier pins
 */

/* ============================================
   Map Layout
   ============================================ */
.map-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  height: 100vh;
  padding-top: 80px; /* Account for fixed navbar */
  box-sizing: border-box;
  overflow: hidden;
}

/* ============================================
   Map Sidebar (Property List)
   ============================================ */
.map-sidebar {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.map-sidebar-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}

.map-sidebar-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.map-sidebar-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ============================================
   Map Filters
   ============================================ */
.map-filters {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.map-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.map-filter:hover {
  background: var(--color-gray-100);
}

.map-filter.active {
  background: var(--color-primary-pale);
  border-color: rgba(49, 46, 129, 0.25);
  color: var(--color-primary);
}

.map-filter select {
  background: none;
  border: none;
  font-size: var(--font-size-sm);
  color: inherit;
  cursor: pointer;
}

/* ============================================
   Property List
   ============================================ */
.map-property-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

.map-property-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.map-property-item:hover {
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: var(--shadow-md);
}

.map-property-item.active {
  border-color: rgba(49, 46, 129, 0.25);
  background: var(--color-primary-pale);
}

.map-property-image {
  width: 100px;
  height: 80px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

.map-property-content {
  flex: 1;
  min-width: 0;
}

.map-property-price {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.map-property-address {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-property-features {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.map-property-feature {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.map-property-match {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: 2px var(--space-2);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-sm);
}

.map-property-match-high {
  background: var(--color-success);
  color: var(--color-white);
}

.map-property-match-medium {
  background: var(--color-warning);
  color: var(--color-text-primary);
}

/* ============================================
   Map Container
   ============================================ */
.map-container {
  position: relative;
  height: 100%;
}

#property-map {
  height: 100%;
  width: 100%;
}

/* ============================================
   Map Controls Overlay
   ============================================ */
.map-controls {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 1000;
}

.map-controls > * {
  pointer-events: auto;
}

.map-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 400px;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.map-search input {
  flex: 1;
  border: none;
  font-size: var(--font-size-sm);
  background: none;
}

.map-search input:focus {
  outline: none;
}

.map-search-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-white);
  cursor: pointer;
}

.map-view-toggle {
  display: flex;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.map-view-btn {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.map-view-btn:hover {
  background: var(--color-gray-50);
}

.map-view-btn.active {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ============================================
   Map Legend
   ============================================ */
.map-legend {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}

.map-legend-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.map-legend-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.map-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.map-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.map-legend-dot-match { background: var(--color-success); }
.map-legend-dot-price { background: var(--color-warning); }
.map-legend-dot-other { background: var(--color-primary); }

/* ============================================
   Custom Map Markers
   ============================================ */
.map-marker {
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.map-marker-inner {
  transform: rotate(45deg);
  font-size: 12px;
  font-weight: bold;
  color: var(--color-white);
}

.map-marker-match {
  background: var(--color-success);
}

.map-marker-price {
  background: var(--color-warning);
}

.map-marker-other {
  background: var(--color-primary);
}

/* Price markers */
.map-price-marker {
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  border: 2px solid var(--color-success);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.map-price-marker:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

.map-price-marker-match {
  border-color: var(--color-success);
  background: var(--color-success-pale);
}

.map-price-marker-price {
  border-color: var(--color-warning);
  background: var(--color-warning-pale);
}

.map-price-marker-other {
  border-color: rgba(49, 46, 129, 0.25);
  background: var(--color-primary-pale);
}

/* ============================================
   Map Popup
   ============================================ */
.map-popup {
  min-width: 280px;
}

.map-popup-image {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.map-popup-price {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.map-popup-address {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.map-popup-features {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.map-popup-btn {
  width: 100%;
  padding: var(--space-2);
  font-size: var(--font-size-sm);
}

/* Leaflet overrides */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-xl);
}

.leaflet-popup-content {
  margin: 0;
}

.leaflet-popup-close-button {
  top: var(--space-2) !important;
  right: var(--space-2) !important;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
  .map-layout {
    grid-template-columns: 320px 1fr;
  }
}

@media (max-width: 768px) {
  .map-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 300px;
  }

  .map-sidebar {
    order: 2;
    border-right: none;
    border-top: 1px solid var(--color-border-light);
  }

  .map-container {
    order: 1;
  }

  .map-controls {
    flex-direction: column;
    gap: var(--space-3);
  }

  .map-search {
    max-width: none;
  }

  .map-view-toggle {
    align-self: flex-start;
  }
}

@media (max-width: 480px) {
  .map-property-item {
    flex-direction: column;
  }

  .map-property-image {
    width: 100%;
    height: 120px;
  }
}


/* ================================================
   pages/home.css
   ================================================ */

/*
 * Home / Landing Page
 * Public-facing marketing pages
 */

/* ============================================
   Hero Section
   ============================================ */
.hero {
  padding: var(--space-24) 0;
  padding-top: calc(var(--space-24) + 80px);
  background: linear-gradient(135deg, var(--color-primary-pale) 0%, var(--color-white) 50%, var(--color-beige-light) 100%);
}

.hero-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.hero-content {
  max-width: 560px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary-pale);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

.hero-title {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-6);
  letter-spacing: -0.02em;
}

.hero-title span {
  color: var(--color-primary);
}

.hero-description {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-8);
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero-image {
  position: relative;
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
}

/* ============================================
   Features Section
   ============================================ */
.features {
  padding: var(--space-24) 0;
  background: var(--color-white);
}

.features-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-16);
}

.features-header h2 {
  font-size: var(--font-size-4xl);
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

.features-header p {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.feature-card {
  padding: var(--space-8);
  background: var(--color-gray-50);
  border-radius: var(--radius-2xl);
  text-align: center;
  transition: all var(--transition-base);
}

.feature-card:hover {
  background: var(--color-white);
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-5);
  background: var(--color-primary-pale);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.feature-icon svg {
  width: 32px;
  height: 32px;
}

.feature-card h3 {
  font-size: var(--font-size-xl);
  color: var(--color-dark);
  margin-bottom: var(--space-3);
}

.feature-card p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================
   How It Works
   ============================================ */
.how-it-works {
  padding: var(--space-24) 0;
  background: var(--color-beige-light);
}

.how-it-works-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.how-it-works-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.how-it-works-header h2 {
  font-size: var(--font-size-4xl);
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.step {
  text-align: center;
  position: relative;
}

.step::after {
  content: '';
  position: absolute;
  top: 40px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: var(--color-border);
}

.step:last-child::after {
  display: none;
}

.step-number {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-5);
  background: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}

.step h4 {
  font-size: var(--font-size-lg);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.step p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================
   Testimonials
   ============================================ */
.testimonials {
  padding: var(--space-24) 0;
  background: var(--color-white);
}

.testimonials-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.testimonials-header h2 {
  font-size: var(--font-size-4xl);
  color: var(--color-dark);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.testimonial-card {
  padding: var(--space-8);
  background: var(--color-gray-50);
  border-radius: var(--radius-2xl);
}

.testimonial-stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-4);
  color: var(--color-warning);
}

.testimonial-text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.testimonial-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark);
}

.testimonial-role {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ============================================
   CTA Section
   ============================================ */
.cta {
  padding: var(--space-24) 0;
  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
}

.cta-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  text-align: center;
}

.cta h2 {
  font-size: var(--font-size-4xl);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.cta p {
  font-size: var(--font-size-xl);
  opacity: 0.9;
  margin-bottom: var(--space-8);
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

/* ============================================
   Footer
   ============================================ */
.footer {
  background: var(--color-dark);
  color: var(--color-white);
  padding: var(--space-16) 0;
}

.footer-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: var(--space-16);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
  height: 32px;
  margin-bottom: var(--space-4);
}

.footer-brand p {
  font-size: var(--font-size-base);
  color: var(--color-gray-400);
  margin: 0 0 var(--space-6);
  max-width: 320px;
  line-height: var(--line-height-relaxed);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
}

.footer-social a {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: all var(--transition-fast);
}

.footer-social a:hover {
  background: var(--color-primary);
  transform: translateY(-2px);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.footer-col h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-4);
}

.footer-col a {
  display: block;
  font-size: var(--font-size-base);
  color: var(--color-gray-300);
  padding: var(--space-2) 0;
}

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

.footer-bottom {
  padding-top: var(--space-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom p {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin: 0;
}

.footer-legal {
  display: flex;
  gap: var(--space-6);
}

.footer-legal a {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

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

/* ============================================
   Page Hero (for inner pages)
   ============================================ */
.page-hero {
  padding: var(--space-24) var(--space-6);
  padding-top: calc(var(--space-24) + 80px);
  background: linear-gradient(135deg, var(--color-primary-pale) 0%, var(--color-white) 50%, var(--color-beige-light) 100%);
  text-align: center;
}

.page-hero h1 {
  font-size: var(--font-size-4xl);
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

.page-hero p {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: 0 auto;
}

/* ============================================
   Content Sections
   ============================================ */
.prose-content {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-6);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .hero-content {
    max-width: none;
    text-align: center;
  }

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

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

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

  .step::after {
    display: none;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: var(--font-size-4xl);
  }

  .features-grid,
  .testimonials-grid,
  .steps {
    grid-template-columns: 1fr;
  }

  .footer-links {
    grid-template-columns: 1fr 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: var(--font-size-3xl);
  }

  .hero-description {
    font-size: var(--font-size-lg);
  }

  .footer-links {
    grid-template-columns: 1fr;
  }
}


/* ================================================
   pages/offers.css
   ================================================ */

/*
 * Offers Page Styles
 * Offer cards, status displays, and response forms
 */

/* ============================================
   Offers List
   ============================================ */
.offers-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ============================================
   Offer Card
   ============================================ */
.offer-card {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: all var(--transition-fast);
}

.offer-card:hover {
  border-color: var(--color-border-hover);
}

.offer-card-submitted,
.offer-card-viewed {
  border-left: 4px solid rgba(49, 46, 129, 0.35);
}

.offer-card-accepted {
  border-left: 4px solid var(--color-success);
}

.offer-card-rejected {
  border-left: 4px solid var(--color-error);
}

.offer-card-countered {
  border-left: 4px solid var(--color-warning);
}

.offer-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.offer-card-amount {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.offer-card-details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (max-width: 768px) {
  .offer-card-details {
    grid-template-columns: repeat(2, 1fr);
  }
}

.offer-card-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.offer-card-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.offer-card-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.offer-card-conditions {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.offer-conditions-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.offer-card-expiry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.offer-card-footer {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

/* ============================================
   Offer Status Banner
   ============================================ */
.offer-status-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
}

.offer-status-submitted,
.offer-status-viewed {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.offer-status-accepted {
  background: var(--color-success-pale);
  color: var(--color-success);
}

.offer-status-rejected {
  background: var(--color-error-pale);
  color: var(--color-error);
}

.offer-status-countered {
  background: var(--color-warning-pale);
  color: var(--color-warning);
}

.offer-status-withdrawn,
.offer-status-expired {
  background: var(--color-gray-100);
  color: var(--color-text-muted);
}

.offer-status-icon {
  flex-shrink: 0;
}

.offer-status-content {
  flex: 1;
}

.offer-status-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

.offer-status-description {
  font-size: var(--font-size-sm);
  opacity: 0.8;
}

/* ============================================
   Offer Summary
   ============================================ */
.offer-summary {
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.offer-summary-amount {
  text-align: center;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}

.offer-summary-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.offer-summary-value {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.offer-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.offer-summary-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.offer-summary-item-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.offer-summary-item-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* ============================================
   Conditions List
   ============================================ */
.conditions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.condition-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.condition-item svg {
  color: var(--color-success);
  flex-shrink: 0;
}

/* ============================================
   Message Box
   ============================================ */
.message-box {
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  border-left: 3px solid rgba(49, 46, 129, 0.35);
}

.message-box p {
  margin: 0;
  color: var(--color-text-secondary);
}

/* ============================================
   Response Actions
   ============================================ */
.response-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.response-form {
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
}

.response-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.response-divider::before,
.response-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.response-divider span {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* ============================================
   Buyer Info
   ============================================ */
.buyer-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.buyer-avatar {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-pale);
  color: var(--color-primary);
  border-radius: 50%;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.buyer-details {
  flex: 1;
}

.buyer-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.buyer-email {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.entity-info {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

/* ============================================
   Property Mini Card
   ============================================ */
.property-mini-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}

.property-mini-card:hover {
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: var(--shadow-md);
}

.property-mini-image {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.property-mini-details {
  padding: var(--space-3);
}

.property-mini-price {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.property-mini-address {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ============================================
   Cooling-Off Panel
   ============================================ */
.cooling-off-panel {
  border: 2px solid var(--color-warning);
  background: var(--color-warning-pale);
}

.cooling-off-countdown {
  text-align: center;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}

.countdown-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.countdown-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-warning);
}

.countdown-complete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

/* ============================================
   Input with Prefix
   ============================================ */
.input-with-prefix {
  position: relative;
}

.input-prefix {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.input-with-prefix .form-input {
  padding-left: var(--space-8);
}


/* ================================================
   pages/subscription.css
   ================================================ */

/*
 * Subscription Page Styles
 * Pricing cards, subscription status, billing UI
 */

/* ============================================
   Subscription Status
   ============================================ */
.subscription-status {
  padding: var(--space-6);
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
}

.subscription-plan {
  text-align: center;
}

.subscription-plan-badge {
  margin-bottom: var(--space-4);
}

.subscription-trial-info {
  margin-top: var(--space-4);
}

.subscription-trial-info p {
  margin: 0;
}

.subscription-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.subscription-detail {
  text-align: center;
}

.subscription-detail-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

.subscription-detail-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.subscription-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

/* ============================================
   Pricing Grid
   ============================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Pricing Card
   ============================================ */
.pricing-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: all var(--transition-fast);
}

.pricing-card:hover {
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: var(--shadow-lg);
}

.pricing-card-current {
  border-color: rgba(49, 46, 129, 0.25);
  background: var(--color-primary-pale);
}

.pricing-card-header {
  text-align: center;
  margin-bottom: var(--space-4);
}

.pricing-card-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.pricing-card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.pricing-card-price {
  text-align: center;
  padding: var(--space-4) 0;
  margin-bottom: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.pricing-amount {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.pricing-period {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
  flex: 1;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.pricing-features li svg {
  flex-shrink: 0;
  color: var(--color-success);
  margin-top: 2px;
}

/* ============================================
   Badge Sizes
   ============================================ */
.badge-lg {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-base);
}

.badge-sm {
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
}


/* ================================================
   pages/messaging.css
   ================================================ */

/*
 * Messaging & Notifications Styles
 * Conversations, messages, and notification UI
 */

/* ============================================
   Conversation List
   ============================================ */
.conversation-list {
  display: flex;
  flex-direction: column;
}

.conversation-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--color-border-light);
  transition: background var(--transition-fast);
}

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

.conversation-item:hover {
  background: var(--color-gray-50);
  text-decoration: none;
}

.conversation-item-unread {
  background: var(--color-primary-pale);
}

.conversation-item-unread:hover {
  background: var(--color-primary-light);
}

.conversation-item-avatar {
  position: relative;
  flex-shrink: 0;
}

.conversation-unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-1);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: 999px;
}

.conversation-item-content {
  flex: 1;
  min-width: 0;
}

.conversation-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.conversation-item-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-item-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.conversation-item-context {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.conversation-item-preview {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-item-you {
  color: var(--color-text-muted);
}

.conversation-item-arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

/* ============================================
   Conversation View
   ============================================ */
.conversation-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
  margin: calc(-1 * var(--space-6));
  margin-bottom: var(--space-4);
}

.conversation-header-left {
  flex-shrink: 0;
}

.conversation-header-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.conversation-header-avatars {
  display: flex;
  flex-shrink: 0;
}

.conversation-header-avatars .avatar + .avatar {
  margin-left: -8px;
}

.conversation-header-details {
  min-width: 0;
}

.conversation-header-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-header-context {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.conversation-header-context a {
  color: var(--color-primary);
}

.conversation-header-right {
  flex-shrink: 0;
}

/* ============================================
   Messages Container
   ============================================ */
.conversation-messages {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px);
  min-height: 400px;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.messages-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.messages-date-separator {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.messages-date-separator::before,
.messages-date-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border-light);
}

.messages-date-separator span {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   Message Bubble
   ============================================ */
.message {
  display: flex;
  gap: var(--space-2);
  max-width: 80%;
}

.message-mine {
  margin-left: auto;
  flex-direction: row-reverse;
}

.message-system {
  max-width: 100%;
  margin: var(--space-2) auto;
}

.message-avatar {
  flex-shrink: 0;
  align-self: flex-end;
}

.message-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.message-sender {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  margin-left: var(--space-3);
}

.message-bubble {
  padding: var(--space-3) var(--space-4);
  background: var(--color-gray-100);
  border-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-sm);
}

.message-mine .message-bubble {
  background: var(--color-primary);
  color: var(--color-white);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-sm);
}

.message-system .message-bubble {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.message-text {
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.message-text p {
  margin: 0;
}

.message-text p + p {
  margin-top: var(--space-2);
}

.message-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
}

.message-mine .message-meta {
  justify-content: flex-end;
}

.message-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.message-edited {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.message-ai-badge {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), #AF52DE);
  padding: 1px 6px;
  border-radius: 999px;
}

/* ============================================
   Message Input
   ============================================ */
.message-input-container {
  padding: var(--space-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-light);
}

.message-form {
  width: 100%;
}

.message-input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
  padding: var(--space-2) var(--space-3);
}

.message-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--space-2);
  font-size: var(--font-size-base);
  line-height: 1.5;
  resize: none;
  min-height: 24px;
  max-height: 200px;
}

.message-input:focus {
  outline: none;
}

.message-input::placeholder {
  color: var(--color-text-muted);
}

.btn-send {
  flex-shrink: 0;
}

/* ============================================
   Notification List
   ============================================ */
.notification-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.filter-pills {
  display: flex;
  gap: var(--space-2);
}

.filter-pill {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-gray-100);
  border-radius: 999px;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.filter-pill:hover {
  background: var(--color-gray-200);
  text-decoration: none;
}

.filter-pill-active {
  background: var(--color-primary);
  color: var(--color-white);
}

.filter-pill-active:hover {
  background: var(--color-primary-dark);
}

.notification-group {
  margin-bottom: var(--space-6);
}

.notification-group:last-child {
  margin-bottom: 0;
}

.notification-group-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-4);
  margin: 0;
}

.notification-list {
  display: flex;
  flex-direction: column;
}

.notification-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  transition: background var(--transition-fast);
}

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

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

.notification-item-unread {
  background: var(--color-primary-pale);
}

.notification-item-unread:hover {
  background: var(--color-primary-light);
}

.notification-item-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.notification-icon-blue {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.notification-icon-green {
  background: var(--color-success-pale);
  color: var(--color-success);
}

.notification-icon-orange {
  background: var(--color-accent-pale);
  color: var(--color-accent);
}

.notification-icon-red {
  background: var(--color-error-pale);
  color: var(--color-error);
}

.notification-icon-purple {
  background: #F5EAFA;
  color: #AF52DE;
}

.notification-icon-teal {
  background: #E5F6FD;
  color: #5AC8FA;
}

.notification-icon-gray {
  background: var(--color-gray-100);
  color: var(--color-text-muted);
}

.notification-item-content {
  flex: 1;
  min-width: 0;
}

.notification-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.notification-item-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.notification-item-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.notification-item-body {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
  line-height: 1.5;
}

.notification-item-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.notification-item-indicator {
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
}

/* ============================================
   Avatar Styles
   ============================================ */
.avatar {
  border-radius: 50%;
  object-fit: cover;
}

.avatar-sm {
  width: 32px;
  height: 32px;
}

.avatar-md {
  width: 44px;
  height: 44px;
}

.avatar-lg {
  width: 56px;
  height: 56px;
}

.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-pale), var(--color-primary-light));
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
}

.avatar-md.avatar-placeholder {
  font-size: var(--font-size-base);
}

.avatar-lg.avatar-placeholder {
  font-size: var(--font-size-lg);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  .conversation-header {
    padding: var(--space-3) var(--space-4);
  }

  .conversation-header-name {
    font-size: var(--font-size-base);
  }

  .message {
    max-width: 90%;
  }

  .notification-filters {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-pills {
    flex-wrap: wrap;
  }
}


/* ================================================
   pages/reviews.css
   ================================================ */

/*
 * Reviews System Styles
 * Review cards, ratings, forms, and disputes
 */

/* ============================================
   Review List
   ============================================ */
.review-list {
  display: flex;
  flex-direction: column;
}

/* ============================================
   Review Card
   ============================================ */
.review-card {
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}

.review-card:last-child {
  border-bottom: none;
}

.review-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.review-card-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.review-card-user-info {
  display: flex;
  flex-direction: column;
}

.review-card-user-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.review-card-user-role {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.review-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.review-card-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.review-card-status {
  margin-bottom: var(--space-3);
}

.review-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.review-card-body {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.review-card-body p {
  margin: 0;
}

.review-card-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
}

.review-category {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.review-category-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.review-category-stars {
  display: flex;
  gap: 2px;
}

.review-card-response {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--color-primary-pale);
  border-radius: var(--radius-lg);
  border-left: 3px solid rgba(49, 46, 129, 0.35);
}

.review-response-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.review-response-body {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.review-card-actions {
  display: flex;
  gap: var(--space-2);
}

/* ============================================
   Star Ratings
   ============================================ */
.review-stars {
  display: flex;
  gap: 2px;
}

.review-stars-lg {
  display: flex;
  gap: var(--space-1);
}

.star-filled {
  color: #FFB800;
  fill: #FFB800;
}

.star-empty {
  color: var(--color-gray-300);
}

/* ============================================
   Review Detail
   ============================================ */
.review-detail {
  padding: var(--space-2);
}

.review-detail-header {
  margin-bottom: var(--space-6);
}

.review-detail-rating {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.review-rating-value {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.review-detail-status {
  margin-top: var(--space-4);
}

.review-participants {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-6);
}

.review-participant {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.review-participant-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.review-participant-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.review-participant-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.review-participant-arrow {
  color: var(--color-text-muted);
}

.review-detail-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.review-detail-body {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-6);
}

.review-detail-body p {
  margin: 0 0 var(--space-3) 0;
}

.review-detail-categories {
  margin-bottom: var(--space-6);
}

.review-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.review-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.review-category-detail {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.review-category-bar {
  flex: 1;
  height: 8px;
  background: var(--color-gray-200);
  border-radius: 4px;
  overflow: hidden;
}

.review-category-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFB800, #FF9500);
  border-radius: 4px;
}

.review-category-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  min-width: 30px;
}

.review-detail-meta {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.review-response-detail {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.review-response-detail p {
  margin: 0 0 var(--space-3) 0;
}

.review-dispute-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.review-dispute-cta h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

.review-dispute-cta p {
  margin: 0;
}

.dispute-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dispute-info-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.dispute-info-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  min-width: 100px;
}

/* ============================================
   Review Form
   ============================================ */
.review-form {
  max-width: 700px;
}

.review-reviewee-info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.review-reviewee-info h3 {
  margin: 0 0 var(--space-1) 0;
}

.form-section {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
}

.form-section:last-of-type {
  border-bottom: none;
  margin-bottom: var(--space-4);
}

.form-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.form-section-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Rating Input */
.rating-input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.rating-star {
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.rating-star:hover {
  transform: scale(1.1);
}

.rating-star input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rating-star svg {
  color: var(--color-gray-300);
  transition: all var(--transition-fast);
}

.rating-star:hover svg,
.rating-star:has(input:checked) svg {
  color: #FFB800;
  fill: #FFB800;
}

.rating-star-sm svg {
  width: 20px;
  height: 20px;
}

.rating-label {
  margin-left: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Category Ratings */
.category-ratings-grid {
  display: grid;
  gap: var(--space-4);
}

.category-rating-input {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
}

.category-rating-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  min-width: 150px;
}

.category-rating-stars {
  display: flex;
  gap: var(--space-1);
}

.review-warning {
  margin-bottom: var(--space-6);
}

/* ============================================
   Dispute Form
   ============================================ */
.dispute-form {
  max-width: 700px;
}

.dispute-review-summary {
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
}

.dispute-review-rating {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-2);
}

.dispute-review-excerpt {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  font-style: italic;
  margin-bottom: var(--space-2);
}

.dispute-guidelines {
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}

.dispute-guidelines h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.dispute-guidelines ul {
  margin: 0;
  padding-left: var(--space-5);
}

.dispute-guidelines li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

/* ============================================
   Status Banners
   ============================================ */
.status-banner {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.status-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.status-banner strong {
  display: block;
  margin-bottom: var(--space-1);
}

.status-banner p {
  margin: 0;
  font-size: var(--font-size-sm);
}

.status-banner-warning {
  background: var(--color-accent-pale);
  color: var(--color-accent-dark);
}

.status-banner-error {
  background: var(--color-error-pale);
  color: var(--color-error-dark);
}

.status-banner-muted {
  background: var(--color-gray-100);
  color: var(--color-text-muted);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  .review-card-header {
    flex-direction: column;
    gap: var(--space-3);
  }

  .review-card-meta {
    align-items: flex-start;
    flex-direction: row;
    gap: var(--space-3);
  }

  .review-participants {
    flex-direction: column;
  }

  .review-participant-arrow {
    transform: rotate(90deg);
  }

  .category-rating-input {
    flex-direction: column;
    align-items: flex-start;
  }

  .review-dispute-cta {
    flex-direction: column;
    text-align: center;
  }
}


/* ================================================
   pages/co-users.css
   ================================================ */

/*
 * Co-Users & KYC Verification Styles
 * Co-user management, invitations, and identity verification
 */

/* ============================================
   Co-User List
   ============================================ */
.co-user-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.co-user-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
}

.co-user-card-main {
  display: flex;
  gap: var(--space-4);
}

.co-user-card-avatar {
  flex-shrink: 0;
}

.co-user-card-info {
  flex: 1;
  min-width: 0;
}

.co-user-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.co-user-card-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.co-user-card-email {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2) 0;
}

.co-user-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

.co-user-card-permissions h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.permission-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.permission-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
}

.permission-granted {
  color: var(--color-success);
}

.permission-denied {
  color: var(--color-text-muted);
}

.co-user-card-actions {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
}

/* ============================================
   Invitation List
   ============================================ */
.invitation-list {
  display: flex;
  flex-direction: column;
}

.invitation-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

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

.invitation-item-received {
  background: var(--color-primary-pale);
  margin: var(--space-2);
  border-radius: var(--radius-lg);
  border-bottom: none;
}

.invitation-item-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}

.invitation-item-info h4 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.invitation-item-info p {
  margin: 0;
  font-size: var(--font-size-sm);
}

.invitation-message {
  font-style: italic;
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.invitation-item-meta {
  flex-shrink: 0;
}

.invitation-item-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ============================================
   Invitation Form
   ============================================ */
.invitation-form {
  max-width: 600px;
}

.permission-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
}

.permission-preview-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-success);
}

/* ============================================
   Accept Invitation
   ============================================ */
.accept-invitation-wrapper {
  max-width: 500px;
  margin: 0 auto;
}

.accept-invitation {
  text-align: center;
  padding: var(--space-6);
}

.accept-invitation-header {
  margin-bottom: var(--space-6);
}

.accept-invitation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: var(--color-primary-pale);
  border-radius: 50%;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.accept-invitation-title {
  font-size: var(--font-size-2xl);
  margin: 0;
}

.accept-invitation-from {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.accept-invitation-from-info h3 {
  margin: 0;
  font-size: var(--font-size-xl);
}

.accept-invitation-from-info p {
  margin: 0;
  color: var(--color-text-muted);
}

.accept-invitation-relationship {
  margin-bottom: var(--space-4);
}

.accept-invitation-message {
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  font-style: italic;
  color: var(--color-text-secondary);
}

.accept-invitation-message p {
  margin: 0;
}

.accept-invitation-benefits {
  text-align: left;
  padding: var(--space-4);
  background: var(--color-success-pale);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}

.accept-invitation-benefits h4 {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-base);
}

.accept-invitation-benefits ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.accept-invitation-benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-success-dark);
}

.accept-invitation-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.accept-invitation-footer {
  margin-top: var(--space-4);
}

/* ============================================
   KYC Status Card
   ============================================ */
.kyc-status-card {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6);
}

.kyc-status-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.kyc-status-icon-pending {
  background: var(--color-accent-pale);
  color: var(--color-accent);
}

.kyc-status-icon-submitted,
.kyc-status-icon-under_review {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.kyc-status-icon-verified {
  background: var(--color-success-pale);
  color: var(--color-success);
}

.kyc-status-icon-rejected {
  background: var(--color-error-pale);
  color: var(--color-error);
}

.kyc-status-info {
  flex: 1;
}

.kyc-status-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-2) 0;
}

.kyc-status-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3) 0;
}

/* ============================================
   KYC Benefits
   ============================================ */
.kyc-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
}

.kyc-benefit {
  display: flex;
  gap: var(--space-3);
}

.kyc-benefit-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-pale);
  color: var(--color-primary);
  border-radius: var(--radius-lg);
}

.kyc-benefit h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-1) 0;
}

.kyc-benefit p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ============================================
   KYC Form
   ============================================ */
.kyc-form {
  max-width: 700px;
}

.kyc-document-uploads {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.kyc-upload-section h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-1) 0;
}

.kyc-upload-section > p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3) 0;
}

.kyc-upload-box {
  position: relative;
}

.kyc-upload-box input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}

.kyc-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--color-gray-50);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.kyc-upload-label:hover {
  background: var(--color-gray-100);
  border-color: rgba(49, 46, 129, 0.25);
}

.kyc-upload-label svg {
  color: var(--color-text-muted);
}

.kyc-upload-label span {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.kyc-requirements {
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}

.kyc-requirements h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-2) 0;
}

.kyc-requirements ul {
  margin: 0;
  padding-left: var(--space-5);
}

.kyc-requirements li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

/* ============================================
   KYC Waiting State
   ============================================ */
.kyc-waiting {
  text-align: center;
  padding: var(--space-8);
}

.kyc-waiting-animation {
  margin-bottom: var(--space-6);
}

.kyc-spinner {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border: 4px solid var(--color-gray-200);
  border-top-color: rgba(49, 46, 129, 0.25);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.kyc-waiting h3 {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-2) 0;
}

.kyc-waiting p {
  color: var(--color-text-muted);
  margin: 0;
}

/* ============================================
   KYC Verified State
   ============================================ */
.kyc-verified {
  text-align: center;
  padding: var(--space-8);
}

.kyc-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: var(--color-success-pale);
  color: var(--color-success);
  border-radius: 50%;
  margin-bottom: var(--space-4);
}

.kyc-verified h3 {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-2) 0;
}

.kyc-verified p {
  color: var(--color-text-muted);
  margin: 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  .kyc-status-card {
    flex-direction: column;
    text-align: center;
  }

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

  .kyc-document-uploads {
    grid-template-columns: 1fr;
  }

  .co-user-card-main {
    flex-direction: column;
    text-align: center;
  }

  .co-user-card-avatar {
    margin: 0 auto;
  }

  .co-user-card-header {
    justify-content: center;
  }

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

  .invitation-item {
    flex-direction: column;
    text-align: center;
  }

  .invitation-item-info {
    flex-direction: column;
  }
}


/* ================================================
   pages/documents.css
   ================================================ */

/*
 * Documents Management Styles
 * Document cards, upload forms, and file displays
 */

/* ============================================
   Document Filters
   ============================================ */
.document-filters {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ============================================
   Document List
   ============================================ */
.document-list {
  display: flex;
  flex-direction: column;
}

.document-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  transition: background var(--transition-fast);
}

.document-card:last-child {
  border-bottom: none;
}

.document-card:hover {
  background: var(--color-gray-50);
}

.document-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-pale);
  color: var(--color-primary);
  border-radius: var(--radius-lg);
}

.document-card-content {
  flex: 1;
  min-width: 0;
}

.document-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.document-card-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.document-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.document-card-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.document-card-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ============================================
   Modal
   ============================================ */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal.open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
}

.modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.modal-close {
  padding: var(--space-2);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background: var(--color-gray-100);
  color: var(--color-text-primary);
}

.modal-body {
  padding: var(--space-6);
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-light);
}

/* ============================================
   File Upload
   ============================================ */
.file-upload-box {
  position: relative;
}

.file-upload-box input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.file-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--color-gray-50);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.file-upload-label:hover {
  background: var(--color-gray-100);
  border-color: rgba(49, 46, 129, 0.25);
}

.file-upload-label svg {
  color: var(--color-text-muted);
}

.file-upload-label span {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.file-upload-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* File selected state */
.file-upload-box.has-file .file-upload-label {
  background: var(--color-success-pale);
  border-color: var(--color-success);
}

.file-upload-box.has-file .file-upload-label svg {
  color: var(--color-success);
}

/* ============================================
   Form Row
   ============================================ */
.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Upload Form
   ============================================ */
.upload-form .form-group {
  margin-bottom: var(--space-4);
}

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

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  .document-card {
    flex-direction: column;
  }

  .document-card-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .modal-content {
    margin: var(--space-4);
    max-height: calc(100vh - var(--space-8));
  }
}


/* ================================================
   pages/admin.css
   ================================================ */

/* Admin Panel Styles */

/* Admin Content Container */
.admin-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-6);
}

/* Admin Page Header */
.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
}

.admin-page-title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1) 0;
}

.admin-page-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Admin Panel (Card Container) */
.admin-panel {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.admin-panel-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-panel-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.admin-panel-content {
  padding: var(--space-5);
}

/* Admin Grid Layouts */
.admin-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.admin-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.admin-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1024px) {
  .admin-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .admin-grid-4,
  .admin-grid-3,
  .admin-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Admin Tables */
.admin-table-wrapper {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-border);
}

.admin-table td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

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

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

/* Table Cell Components */
.user-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.user-cell-name {
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  display: block;
}

.user-cell-name:hover {
  color: var(--color-primary);
}

.user-cell-email {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: block;
}

.table-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Admin Filters */
.admin-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.filter-pills {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.filter-pill {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all 0.15s ease;
}

.filter-pill:hover {
  background: var(--color-gray-50);
  color: var(--color-text-primary);
}

.filter-pill-active {
  background: var(--color-primary-pale);
  color: var(--color-primary);
  border-color: var(--color-primary-light);
}

.admin-search-form {
  display: flex;
  gap: var(--space-2);
}

/* Admin User Header (Show Page) */
.admin-user-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.admin-user-header-main {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.admin-user-header-info {
  flex: 1;
}

.admin-user-name {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1) 0;
}

.admin-user-email {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3) 0;
}

.admin-user-badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.admin-user-header-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Admin Detail List */
.admin-detail-list {
  padding: var(--space-4) var(--space-5);
}

.admin-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.admin-detail-row:last-child {
  border-bottom: none;
}

.admin-detail-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.admin-detail-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: 500;
}

/* Admin Quick Links */
.admin-quick-links {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  flex-wrap: wrap;
}

.admin-quick-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all 0.15s ease;
}

.admin-quick-link:hover {
  background: var(--color-gray-100);
  color: var(--color-text-primary);
}

.admin-quick-link svg {
  color: var(--color-text-muted);
}

/* Action Items Card */
.action-item-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-light);
  transition: background 0.15s ease;
}

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

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

.action-item-text {
  font-size: var(--font-size-sm);
}

.action-item-count {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-accent);
}

/* Recent Activity List */
.recent-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recent-activity-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

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

.recent-activity-info {
  flex: 1;
  min-width: 0;
}

.recent-activity-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-activity-name:hover {
  color: var(--color-primary);
}

.recent-activity-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.recent-activity-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* Badge Groups */
.badge-group {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

/* Admin Review Card */
.admin-review-card {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}

.admin-review-card:last-child {
  border-bottom: none;
}

.admin-review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-3);
}

.admin-review-meta {
  flex: 1;
}

.admin-review-participants {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.admin-review-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.admin-review-rating {
  display: flex;
  gap: var(--space-1);
}

.admin-review-content {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.admin-review-actions {
  display: flex;
  gap: var(--space-2);
}

/* Admin Property Card */
.admin-property-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}

.admin-property-card:last-child {
  border-bottom: none;
}

.admin-property-image {
  width: 100px;
  height: 75px;
  border-radius: var(--radius-md);
  background: var(--color-gray-100);
  overflow: hidden;
  flex-shrink: 0;
}

.admin-property-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-property-image .property-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-property-info {
  flex: 1;
}

.admin-property-address {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-1);
}

.admin-property-address:hover {
  color: var(--color-primary);
}

.admin-property-details {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.admin-property-price {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Pagination Wrapper */
.pagination-wrapper {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  justify-content: center;
}

/* Audit Log Entry */
.audit-log-entry {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}

.audit-log-entry:last-child {
  border-bottom: none;
}

.audit-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.audit-log-action {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.audit-log-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.audit-log-details {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.audit-log-user {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Settings Form */
.admin-settings-form {
  padding: var(--space-5);
}

.admin-settings-section {
  margin-bottom: var(--space-8);
}

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

.admin-settings-section-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* Admin Conversation View */
.admin-conversation-messages {
  max-height: 500px;
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--color-gray-50);
}

.admin-message {
  margin-bottom: var(--space-3);
  max-width: 80%;
}

.admin-message--user {
  margin-left: auto;
}

.admin-message--assistant {
  margin-right: auto;
}

.admin-message-bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.admin-message--user .admin-message-bubble {
  background: var(--color-primary);
  color: white;
  border-bottom-right-radius: var(--radius-sm);
}

.admin-message--assistant .admin-message-bubble {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: var(--radius-sm);
}

.admin-message-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}

/* ============================================
   Admin Chart & Analytics Styles
   ============================================ */

/* Chart Container */
.admin-chart-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-5);
}

.admin-chart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.admin-chart-card-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.admin-chart-card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.admin-chart-container {
  position: relative;
  width: 100%;
  min-height: 300px;
}

/* Chart Empty State */
.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

/* Chart Tooltip */
.chart-tooltip {
  position: absolute;
  background: var(--color-gray-900);
  color: white;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  pointer-events: none;
  z-index: 100;
  box-shadow: var(--shadow-lg);
}

/* Admin Metric Hero Section */
.admin-metric-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.admin-metric-hero-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}

.admin-metric-hero-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.admin-metric-hero-card-icon svg {
  width: 20px;
  height: 20px;
}

.admin-metric-hero-card-icon.green {
  background: var(--color-success-pale);
  color: var(--color-success);
}

.admin-metric-hero-card-icon.blue {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.admin-metric-hero-card-icon.orange {
  background: var(--color-accent-pale);
  color: var(--color-accent);
}

.admin-metric-hero-card-icon.purple {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.admin-metric-hero-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-1);
}

.admin-metric-hero-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.admin-metric-hero-change {
  font-size: var(--font-size-xs);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.admin-metric-hero-change.positive {
  color: var(--color-success);
}

.admin-metric-hero-change.negative {
  color: var(--color-error);
}

.admin-metric-hero-change.neutral {
  color: var(--color-text-muted);
}

/* Admin Section Navigation */
.admin-section-nav {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  padding: var(--space-1);
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  width: fit-content;
}

.admin-section-nav-item {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.admin-section-nav-item:hover {
  color: var(--color-text-primary);
}

.admin-section-nav-item.active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

/* Admin Stats Grid */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.admin-stat-item {
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.admin-stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

.admin-stat-value {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Admin Alert Banner */
.admin-alert-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.admin-alert-banner.warning {
  background: var(--color-warning-pale);
  border: 1px solid var(--color-warning);
  color: var(--color-warning-dark);
}

.admin-alert-banner.error {
  background: var(--color-error-pale);
  border: 1px solid var(--color-error);
  color: var(--color-error-dark);
}

.admin-alert-banner.success {
  background: var(--color-success-pale);
  border: 1px solid var(--color-success);
  color: var(--color-success-dark);
}

.admin-alert-banner-icon {
  flex-shrink: 0;
}

.admin-alert-banner-content {
  flex: 1;
}

.admin-alert-banner-title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-1);
}

.admin-alert-banner-message {
  font-size: var(--font-size-sm);
  opacity: 0.9;
}

/* Admin Data List */
.admin-data-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-data-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.admin-data-list-item:last-child {
  border-bottom: none;
}

.admin-data-list-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.admin-data-list-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.admin-data-list-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.admin-data-list-bar-fill {
  height: 8px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  min-width: 20px;
}

/* Chart Legend */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.chart-legend-color {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
}

/* Admin Sidebar Navigation Styles */
.admin-sidebar-section {
  padding: var(--space-4);
}

.admin-sidebar-section-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-3);
}

.admin-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.admin-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.admin-sidebar-link:hover {
  background: var(--color-gray-100);
  color: var(--color-text-primary);
}

.admin-sidebar-link.active {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.admin-sidebar-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1200px) {
  .admin-metric-hero {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .admin-metric-hero {
    grid-template-columns: 1fr;
  }

  .admin-stats-grid {
    grid-template-columns: 1fr;
  }

  .admin-section-nav {
    width: 100%;
    overflow-x: auto;
  }
}

/* ============================================
   Admin Form Styles
   ============================================ */

/* Admin form inputs - clean, professional look */
.admin-panel .input,
.admin-panel input[type="text"],
.admin-panel input[type="email"],
.admin-panel input[type="password"],
.admin-panel input[type="number"],
.admin-panel input[type="url"],
.admin-panel input[type="tel"],
.admin-panel input[type="search"],
.admin-panel select,
.admin-form .input,
.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form input[type="number"],
.admin-form input[type="url"],
.admin-form input[type="tel"],
.admin-form input[type="search"],
.admin-form select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-panel .input:hover:not(:disabled),
.admin-panel input:hover:not(:disabled),
.admin-panel select:hover:not(:disabled),
.admin-form .input:hover:not(:disabled),
.admin-form input:hover:not(:disabled),
.admin-form select:hover:not(:disabled) {
  border-color: var(--color-gray-400);
}

.admin-panel .input:focus,
.admin-panel input:focus,
.admin-panel select:focus,
.admin-form .input:focus,
.admin-form input:focus,
.admin-form select:focus {
  outline: none;
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: 0 0 0 3px var(--color-primary-pale);
}

.admin-panel .input:disabled,
.admin-panel input:disabled,
.admin-panel select:disabled,
.admin-form .input:disabled,
.admin-form input:disabled,
.admin-form select:disabled {
  background: var(--color-gray-50);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Admin textareas */
.admin-panel .textarea,
.admin-panel textarea,
.admin-form .textarea,
.admin-form textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-panel .textarea:focus,
.admin-panel textarea:focus,
.admin-form .textarea:focus,
.admin-form textarea:focus {
  outline: none;
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: 0 0 0 3px var(--color-primary-pale);
}

/* Admin select styling */
.admin-panel select,
.admin-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23737373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

/* Form groups in admin */
.admin-panel .form-group,
.admin-form .form-group {
  margin-bottom: var(--space-5);
}

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

.admin-panel .form-hint,
.admin-form .form-hint {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Form actions */
.admin-panel .form-actions,
.admin-form .form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-light);
}

/* ============================================
   Prompt Editor - Full Width Inputs
   ============================================ */

.prompt-editor-container {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-gray-50);
}

.editor-collaborators {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.collaborator {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  background: var(--color-white);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}

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

.no-collaborators {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.editor-status-bar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.connection-status {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-gray-100);
}

.connection-status.connected {
  background: var(--color-success-pale);
  color: var(--color-success-dark);
}

.connection-status.disconnected {
  background: var(--color-error-pale);
  color: var(--color-error-dark);
}

.save-indicator {
  font-weight: 500;
}

.save-indicator--saving {
  color: var(--color-warning);
}

.save-indicator--saved {
  color: var(--color-success);
}

.save-indicator--remote {
  color: var(--color-primary);
}

.editor-main {
  padding: var(--space-6);
}

.editor-meta {
  margin-bottom: var(--space-5);
}

.editor-meta .input,
.editor-meta input {
  max-width: 600px;
}

.editor-content {
  margin-bottom: var(--space-5);
}

.prompt-textarea {
  width: 100%;
  min-height: 500px;
  padding: var(--space-5);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--font-size-sm);
  line-height: 1.7;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  resize: vertical;
}

.prompt-textarea:focus {
  outline: none;
  border-color: rgba(49, 46, 129, 0.25);
  box-shadow: 0 0 0 3px var(--color-primary-pale);
}

.prompt-textarea:disabled {
  background: var(--color-gray-50);
  cursor: not-allowed;
}

.editor-notes {
  margin-bottom: var(--space-4);
}

.notes-textarea {
  font-family: var(--font-family);
  min-height: 100px;
}

.editor-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-light);
  background: var(--color-gray-50);
}

.version-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Hierarchy selector for prompt type selection */
.hierarchy-selector {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  max-height: 400px;
  overflow-y: auto;
  background: var(--color-white);
}

.hierarchy-area {
  border-bottom: 1px solid var(--color-border);
}

.hierarchy-area:last-child {
  border-bottom: none;
}

.hierarchy-area-name {
  padding: var(--space-3) var(--space-4);
  background: var(--color-gray-50);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-light);
}

.hierarchy-assistant {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.hierarchy-assistant:last-child {
  border-bottom: none;
}

.hierarchy-assistant-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
}

.hierarchy-types {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-left: var(--space-4);
}

.hierarchy-type-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  transition: background 0.15s ease;
}

.hierarchy-type-option:hover {
  background: var(--color-gray-50);
}

.hierarchy-type-option input[type="radio"] {
  accent-color: var(--color-primary);
}

.hierarchy-type-option input[type="radio"]:checked + span {
  color: var(--color-primary);
  font-weight: 500;
}

/* Prompt new/edit forms - wider content area */
.admin-panel--prompt .admin-panel-content {
  max-width: none;
}

.admin-panel--prompt .form-group .input.textarea,
.admin-panel--prompt .form-group textarea {
  width: 100%;
  min-height: 400px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

/* Full-width form layout for prompts */
.admin-form--full-width .form-group {
  max-width: none;
}

.admin-form--full-width .input,
.admin-form--full-width input[type="text"],
.admin-form--full-width textarea {
  max-width: none;
}

/* Admin form row layouts */
.admin-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

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

@media (max-width: 768px) {
  .admin-form-row,
  .admin-form-row-3 {
    grid-template-columns: 1fr;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .admin-content {
    padding: var(--space-4);
  }

  .admin-page-header {
    flex-direction: column;
    gap: var(--space-4);
  }

  .admin-user-header {
    flex-direction: column;
  }

  .admin-user-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .admin-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--space-2);
  }

  .admin-search-form {
    width: 100%;
  }

  .admin-search-form input {
    flex: 1;
  }
}


/* ================================================
   pages/index1.css
   ================================================ */

/* Direction 1: Apple Meets Stripe - Premium Minimalist */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
  /* Colors */
  --d1-white: #ffffff;
  --d1-black: #000000;
  --d1-gray-50: #f9fafb;
  --d1-gray-100: #f3f4f6;
  --d1-gray-200: #e5e7eb;
  --d1-gray-300: #d1d5db;
  --d1-gray-400: #9ca3af;
  --d1-gray-500: #6b7280;
  --d1-gray-600: #4b5563;
  --d1-gray-700: #374151;
  --d1-gray-800: #1f2937;
  --d1-gray-900: #111827;

  /* Brand - Blue palette to match logo */
  --d1-primary: #2563eb;
  --d1-primary-dark: #1d4ed8;
  --d1-gradient-start: #2563eb;
  --d1-gradient-end: #3b82f6;

  /* Typography */
  --d1-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --d1-font-mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

  /* Spacing */
  --d1-space-xs: 0.25rem;
  --d1-space-sm: 0.5rem;
  --d1-space-md: 1rem;
  --d1-space-lg: 1.5rem;
  --d1-space-xl: 2rem;
  --d1-space-2xl: 3rem;
  --d1-space-3xl: 4rem;
  --d1-space-4xl: 6rem;

  /* Sizing */
  --d1-max-width: 1200px;
  --d1-max-width-narrow: 800px;

  /* Effects */
  --d1-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --d1-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --d1-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --d1-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --d1-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --d1-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --d1-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Border Radius */
  --d1-radius-sm: 0.375rem;
  --d1-radius-md: 0.5rem;
  --d1-radius-lg: 0.75rem;
  --d1-radius-xl: 1rem;
  --d1-radius-full: 9999px;
}

/* ============================================
   Flash Messages
   ============================================ */
.d1-flash-container {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: 100%;
  max-width: 500px;
  padding: 0 var(--d1-space-md);
}

.d1-flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--d1-space-md);
  padding: var(--d1-space-md) var(--d1-space-lg);
  border-radius: var(--d1-radius-lg);
  background: white;
  box-shadow: var(--d1-shadow-lg);
  font-size: 0.9375rem;
  margin-bottom: var(--d1-space-md);
  animation: d1-flash-in 0.3s ease-out;
}

@keyframes d1-flash-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.d1-flash-success {
  border-left: 4px solid #22c55e;
}

.d1-flash-error {
  border-left: 4px solid #ef4444;
}

.d1-flash-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: var(--d1-gray-100);
  border-radius: var(--d1-radius-md);
  cursor: pointer;
  color: var(--d1-gray-500);
  transition: all var(--d1-transition-fast);
}

.d1-flash-close:hover {
  background: var(--d1-gray-200);
  color: var(--d1-gray-700);
}

/* ============================================
   Base Styles
   ============================================ */
.d1-page {
  font-family: var(--d1-font-sans);
  color: var(--d1-gray-900);
  background: var(--d1-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Navigation
   ============================================ */
.d1-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--d1-gray-100);
}

.d1-nav-inner {
  max-width: var(--d1-max-width);
  margin: 0 auto;
  padding: var(--d1-space-md) var(--d1-space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.d1-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.d1-logo-img {
  height: 32px;
  width: auto;
}

.d1-nav-links {
  display: flex;
  gap: var(--d1-space-xl);
}

.d1-nav-links a {
  color: var(--d1-gray-600);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color var(--d1-transition-fast);
}

.d1-nav-links a:hover {
  color: var(--d1-gray-900);
}

.d1-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--d1-space-md);
}

/* ============================================
   Buttons
   ============================================ */
.d1-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--d1-space-sm);
  padding: 0.625rem 1.25rem;
  background: linear-gradient(135deg, var(--d1-gradient-start), var(--d1-gradient-end));
  color: white;
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--d1-radius-full);
  text-decoration: none;
  transition: all var(--d1-transition-base);
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2), 0 4px 12px rgba(37, 99, 235, 0.15);
}

.d1-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2), 0 8px 20px rgba(37, 99, 235, 0.2);
}

.d1-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--d1-space-sm);
  padding: 0.625rem 1.25rem;
  background: var(--d1-gray-100);
  color: var(--d1-gray-700);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--d1-radius-full);
  text-decoration: none;
  transition: all var(--d1-transition-base);
}

.d1-btn-secondary:hover {
  background: var(--d1-gray-200);
}

.d1-btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1rem;
  color: var(--d1-gray-600);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--d1-transition-fast);
}

.d1-btn-ghost:hover {
  color: var(--d1-gray-900);
}

.d1-btn-lg {
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
}

.d1-btn-white {
  display: inline-flex;
  align-items: center;
  gap: var(--d1-space-sm);
  padding: 0.625rem 1.25rem;
  background: white;
  color: var(--d1-gray-900);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--d1-radius-full);
  text-decoration: none;
  transition: all var(--d1-transition-base);
}

.d1-btn-white:hover {
  transform: translateY(-1px);
  box-shadow: var(--d1-shadow-lg);
}

.d1-btn-ghost-white {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--d1-transition-fast);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--d1-radius-full);
}

.d1-btn-ghost-white:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   Hero Section
   ============================================ */
.d1-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--d1-space-4xl) var(--d1-space-xl);
  padding-top: calc(var(--d1-space-4xl) + 60px);
  overflow: hidden;
}

.d1-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.d1-gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}

.d1-gradient-orb-1 {
  width: 600px;
  height: 600px;
  background: linear-gradient(135deg, #c7d2fe 0%, #e0e7ff 100%);
  top: -100px;
  right: -100px;
}

.d1-gradient-orb-2 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #ddd6fe 0%, #f5d0fe 100%);
  bottom: 100px;
  left: -50px;
}

.d1-hero-content {
  position: relative;
  max-width: 800px;
  text-align: center;
}

.d1-hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--d1-space-lg);
  color: var(--d1-gray-900);
  white-space: nowrap;
}

.d1-gradient-text {
  background: linear-gradient(135deg, var(--d1-gradient-start), var(--d1-gradient-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.d1-hero-subtitle {
  font-size: 1.25rem;
  color: var(--d1-gray-600);
  max-width: 600px;
  margin: 0 auto var(--d1-space-xl);
  line-height: 1.7;
}

/* ============================================
   Hero Compact (Two-Card Layout)
   ============================================ */
.d1-hero-compact {
  min-height: auto;
  padding: calc(80px + var(--d1-space-2xl)) var(--d1-space-xl) var(--d1-space-2xl);
}

.d1-hero-compact .d1-hero-content {
  max-width: 900px;
}

.d1-hero-compact .d1-hero-title {
  margin-bottom: var(--d1-space-xl);
}

.d1-hero-cards {
  display: flex;
  gap: var(--d1-space-xl);
  justify-content: center;
  margin-bottom: var(--d1-space-lg);
}

.d1-hero-card {
  flex: 1;
  max-width: 380px;
  background: white;
  padding: var(--d1-space-lg);
  border-radius: var(--d1-radius-xl);
  box-shadow: var(--d1-shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.03);
  text-align: left;
  transition: all var(--d1-transition-base);
}

.d1-hero-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--d1-shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.d1-hero-card-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d1-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--d1-space-md);
}

.d1-hero-card-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--d1-gray-900);
  line-height: 1.3;
  margin: 0 0 var(--d1-space-sm);
  letter-spacing: -0.01em;
}

.d1-hero-card-text {
  font-size: 0.875rem;
  color: var(--d1-gray-600);
  line-height: 1.5;
  margin: 0 0 var(--d1-space-md);
}

.d1-btn-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
}

.d1-btn-cta {
  font-size: 1.125rem;
  padding: 0.875rem 1.5rem;
  letter-spacing: 0.02em;
}

.d1-trust-line {
  font-size: 0.9375rem;
  color: var(--d1-gray-500);
  margin: 0;
}

@media (max-width: 700px) {
  .d1-hero-cards {
    flex-direction: column;
    align-items: center;
  }

  .d1-hero-card {
    max-width: 100%;
    width: 100%;
  }

  .d1-hero-compact {
    padding-left: var(--d1-space-md);
    padding-right: var(--d1-space-md);
  }
}

/* ============================================
   Hero Showcase (New Design)
   ============================================ */
.d1-hero-showcase {
  position: relative;
  min-height: auto;
  padding: calc(60px + var(--d1-space-lg)) var(--d1-space-xl) var(--d1-space-xl);
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
  overflow: hidden;
}

.d1-hero-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  height: 100%;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(37, 99, 235, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 20% 80%, rgba(37, 99, 235, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

/* ============================================
   OPTION 2: Geometric Pattern Background
   Add class "d1-hero-geometric" to section
   ============================================ */
.d1-hero-geometric {
  background:
    radial-gradient(circle at 20% 80%, rgba(37, 99, 235, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
}

.d1-hero-geometric::before {
  background: none;
}

.d1-hero-geometric::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 2px 2px, rgba(37, 99, 235, 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 70%);
}

/* Floating circles decoration */
.d1-hero-geometric .d1-hero-content::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
  top: -100px;
  right: -150px;
  z-index: -1;
}

.d1-hero-geometric .d1-hero-content::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.04) 100%);
  bottom: -50px;
  left: -100px;
  z-index: -1;
}

/* ============================================
   OPTION 3: Gradient Mesh Background (Apple-style)
   Add class "d1-hero-mesh" to section
   ============================================ */
.d1-hero-mesh {
  background: #f8faff;
}

.d1-hero-mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 80% at 10% 0%, rgba(37, 99, 235, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 90% 20%, rgba(96, 165, 250, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(37, 99, 235, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 20% 60%, rgba(147, 197, 253, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 80% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
  pointer-events: none;
  animation: d1-mesh-shift 20s ease-in-out infinite alternate;
}

@keyframes d1-mesh-shift {
  0% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(1.05) translateY(-20px);
  }
}

.d1-hero-mesh::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.2), transparent);
}

/* ============================================
   OPTION 4: Cycling Background Images
   Add class "d1-hero-images" to section
   ============================================ */
.d1-hero-images {
  background: #f8faff;
}

.d1-hero-images::before {
  display: none;
}

.d1-hero-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}

/* Overlay to ensure text readability */
.d1-hero-bg-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(240, 245, 255, 0.65) 0%,
    rgba(245, 248, 255, 0.7) 50%,
    rgba(255, 255, 255, 0.8) 100%
  );
}

/* Blue tint overlay - helps with white images */
.d1-hero-bg-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.08) 0%,
    rgba(59, 130, 246, 0.05) 100%
  );
  z-index: 1;
}

.d1-hero-images .d1-hero-content {
  z-index: 2;
}

.d1-hero-showcase .d1-hero-content {
  max-width: 1000px;
  position: relative;
  z-index: 1;
}

/* Floating Cards */
.d1-hero-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.d1-float-card {
  position: absolute;
  background: white;
  border-radius: var(--d1-radius-lg);
  padding: var(--d1-space-md);
  box-shadow: var(--d1-shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.02);
  opacity: 0;
  animation: d1-float-in 0.8s ease-out forwards;
}

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

.d1-float-1 {
  top: 20%;
  left: 8%;
  animation-delay: 0.3s;
}

.d1-float-2 {
  top: 35%;
  right: 6%;
  animation-delay: 0.5s;
}

.d1-float-3 {
  bottom: 25%;
  left: 5%;
  animation-delay: 0.7s;
}

.d1-float-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--d1-gray-900);
  letter-spacing: -0.02em;
}

.d1-float-stat {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--d1-gray-900);
}

.d1-float-saved {
  font-size: 1.125rem;
  font-weight: 700;
  color: #22c55e;
}

.d1-float-label {
  font-size: 0.75rem;
  color: var(--d1-gray-500);
  margin-top: 2px;
}

.d1-float-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--d1-radius-md);
  background: linear-gradient(135deg, var(--d1-gradient-start), var(--d1-gradient-end));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--d1-space-sm);
}

.d1-float-icon svg {
  stroke: white;
}

@media (max-width: 1100px) {
  .d1-hero-floats {
    display: none;
  }
}

/* Hero Badge */
.d1-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--d1-space-sm);
  padding: 0.5rem 1rem;
  background: white;
  border-radius: var(--d1-radius-full);
  box-shadow: var(--d1-shadow-sm), 0 0 0 1px rgba(37, 99, 235, 0.1);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--d1-gray-700);
  margin-bottom: var(--d1-space-lg);
}

.d1-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--d1-gradient-start), var(--d1-gradient-end));
  animation: d1-pulse 2s ease-in-out infinite;
}

@keyframes d1-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

/* Large Hero Title */
.d1-hero-title-large {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: var(--d1-space-sm);
  color: var(--d1-gray-900);
}

.d1-hero-showcase .d1-hero-subtitle {
  font-size: 1.125rem;
  color: var(--d1-gray-600);
  max-width: 650px;
  margin: 0 auto var(--d1-space-md);
  line-height: 1.6;
}

.d1-hide-mobile {
  display: inline;
}

@media (max-width: 600px) {
  .d1-hide-mobile {
    display: none;
  }
}

/* Hero Search */
.d1-hero-search {
  width: 100%;
  max-width: 600px;
  margin: 0 auto var(--d1-space-lg);
}

.d1-search-bar-lg {
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  box-shadow: var(--d1-shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.d1-search-bar-lg .d1-search-input {
  font-size: 1.0625rem;
}

.d1-search-bar-lg .d1-search-btn {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

/* Card Icons */
.d1-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--d1-radius-md);
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--d1-space-sm);
}

.d1-card-icon svg {
  stroke: var(--d1-primary);
}

.d1-card-icon-seller {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.d1-card-icon-seller svg {
  stroke: #16a34a;
}

/* Enhanced CTA Cards */
.d1-hero-showcase .d1-hero-cards {
  margin-bottom: var(--d1-space-md);
}

.d1-hero-showcase .d1-hero-card {
  border: 1px solid var(--d1-gray-100);
  position: relative;
  overflow: hidden;
}

.d1-hero-showcase .d1-hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--d1-gradient-start), var(--d1-gradient-end));
  opacity: 0;
  transition: opacity var(--d1-transition-base);
}

.d1-hero-showcase .d1-hero-card:hover::before {
  opacity: 1;
}

.d1-hero-card-seller::before {
  background: linear-gradient(90deg, #22c55e, #16a34a) !important;
}

/* Button with Arrow */
.d1-hero-showcase .d1-btn-primary {
  gap: var(--d1-space-sm);
}

.d1-hero-showcase .d1-btn-primary svg {
  transition: transform var(--d1-transition-fast);
}

.d1-hero-showcase .d1-btn-primary:hover svg {
  transform: translateX(3px);
}

/* Enhanced Trust Line */
.d1-hero-showcase .d1-trust-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--d1-space-sm);
}

.d1-hero-showcase .d1-trust-line svg {
  flex-shrink: 0;
  stroke: var(--d1-primary);
}

/* Responsive */
@media (max-width: 700px) {
  .d1-hero-showcase {
    padding: calc(80px + var(--d1-space-xl)) var(--d1-space-md) var(--d1-space-xl);
  }

  .d1-hero-title-large {
    font-size: 2rem;
  }

  .d1-hero-showcase .d1-hero-subtitle {
    font-size: 1rem;
  }

  .d1-search-bar-lg .d1-search-btn {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }
}

/* ============================================
   Hero Search Bar
   ============================================ */
.d1-search-form {
  width: 100%;
  max-width: 520px;
  margin: 0 auto var(--d1-space-lg);
}

.d1-search-bar {
  display: flex;
  align-items: center;
  background: white;
  border-radius: var(--d1-radius-full);
  box-shadow: var(--d1-shadow-md), 0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: 0.375rem 0.375rem 0.375rem 1rem;
  transition: box-shadow var(--d1-transition-base);
}

.d1-search-bar:focus-within {
  box-shadow: var(--d1-shadow-lg), 0 0 0 2px var(--d1-primary);
}

.d1-search-icon {
  flex-shrink: 0;
  color: var(--d1-gray-400);
  margin-right: 0.75rem;
}

.d1-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1rem;
  color: var(--d1-gray-900);
  outline: none;
  min-width: 0;
}

.d1-search-input::placeholder {
  color: var(--d1-gray-400);
}

.d1-search-btn {
  flex-shrink: 0;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(135deg, var(--d1-gradient-start), var(--d1-gradient-end));
  color: white;
  font-weight: 600;
  font-size: 0.9375rem;
  border: none;
  border-radius: var(--d1-radius-full);
  cursor: pointer;
  transition: all var(--d1-transition-base);
}

.d1-search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

@media (max-width: 500px) {
  .d1-search-bar {
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
  }

  .d1-search-input {
    font-size: 0.9375rem;
  }

  .d1-search-input::placeholder {
    content: "Search suburb or postcode...";
  }

  .d1-search-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}

/* ============================================
   Hero Row (CTAs + Score)
   ============================================ */
.d1-hero-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--d1-space-lg);
  max-width: 900px;
  margin: 0 auto var(--d1-space-xl);
}

.d1-cta-card {
  flex: 1;
  max-width: 240px;
  background: white;
  padding: var(--d1-space-lg);
  border-radius: var(--d1-radius-xl);
  box-shadow: var(--d1-shadow-md);
  text-align: center;
  transition: all var(--d1-transition-base);
  display: flex;
  flex-direction: column;
}

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

.d1-cta-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--d1-gray-900);
  margin: 0 0 var(--d1-space-xs);
}

.d1-cta-card p {
  font-size: 0.875rem;
  color: var(--d1-gray-500);
  margin: 0 0 var(--d1-space-md);
  line-height: 1.5;
  flex: 1;
}

.d1-cta-card .d1-btn-primary {
  width: 100%;
  justify-content: center;
}

/* Score preview in row context */
.d1-hero-row .d1-score-preview {
  flex-direction: column;
  padding: var(--d1-space-lg);
  max-width: none;
  margin: 0;
  gap: var(--d1-space-md);
}

.d1-hero-row .d1-score-ring-container {
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.d1-hero-row .d1-score-factors {
  justify-content: center;
}

.d1-hero-row .d1-score-caption {
  text-align: center;
}

@media (max-width: 768px) {
  .d1-hero-row {
    flex-direction: column;
    align-items: center;
    max-width: 320px;
  }

  .d1-cta-card {
    max-width: 100%;
    width: 100%;
  }

  .d1-hero-row .d1-score-preview {
    order: -1;
  }
}

.d1-hero-actions {
  display: flex;
  gap: var(--d1-space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--d1-space-2xl);
}

.d1-hero-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--d1-space-md);
}

.d1-proof-avatars {
  display: flex;
}

.d1-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  border: 2px solid white;
  margin-left: -8px;
}

.d1-avatar:first-child {
  margin-left: 0;
}

.d1-proof-text {
  font-size: 0.9375rem;
  color: var(--d1-gray-600);
}

.d1-proof-text strong {
  color: var(--d1-gray-900);
}

/* ============================================
   Score Preview Widget (Hero)
   ============================================ */
.d1-score-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--d1-space-xl);
  background: white;
  padding: var(--d1-space-lg) var(--d1-space-xl);
  border-radius: var(--d1-radius-xl);
  box-shadow: var(--d1-shadow-lg), 0 0 0 1px rgba(37, 99, 235, 0.1);
  margin: 0 auto var(--d1-space-xl);
  max-width: 420px;
}

.d1-score-ring-container {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.d1-score-ring {
  width: 100%;
  height: 100%;
}

.d1-score-ring-bg {
  stroke: var(--d1-gray-100);
}

.d1-score-ring-fill {
  stroke: url(#score-gradient);
  stroke-linecap: round;
  animation: d1-score-fill 1.5s ease-out forwards;
}

@keyframes d1-score-fill {
  from {
    stroke-dashoffset: 327;
  }
  to {
    stroke-dashoffset: 42;
  }
}

.d1-score-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--d1-gray-900);
  letter-spacing: -0.02em;
}

.d1-score-info {
  text-align: left;
}

.d1-score-factors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--d1-space-xs);
  margin-bottom: var(--d1-space-sm);
}

.d1-factor {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--d1-radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.d1-factor-green {
  background: #dcfce7;
  color: #166534;
}

.d1-factor-blue {
  background: #dbeafe;
  color: #1e40af;
}

.d1-factor-orange {
  background: #ffedd5;
  color: #9a3412;
}

.d1-factor-purple {
  background: #f3e8ff;
  color: #7c3aed;
}

.d1-score-caption {
  font-size: 0.8125rem;
  color: var(--d1-gray-500);
  margin: 0;
}

/* ============================================
   Proof Stats (Hero)
   ============================================ */
.d1-proof-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--d1-space-lg);
  flex-wrap: wrap;
}

.d1-proof-stat {
  text-align: center;
}

.d1-proof-stat strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--d1-gray-900);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.d1-proof-stat span {
  font-size: 0.8125rem;
  color: var(--d1-gray-500);
}

.d1-proof-divider {
  width: 1px;
  height: 32px;
  background: var(--d1-gray-200);
}

@media (max-width: 600px) {
  .d1-score-preview {
    flex-direction: column;
    text-align: center;
    padding: var(--d1-space-lg);
    max-width: 300px;
  }

  .d1-score-info {
    text-align: center;
  }

  .d1-score-factors {
    justify-content: center;
  }

  .d1-proof-stats {
    gap: var(--d1-space-md);
  }

  .d1-proof-divider {
    display: none;
  }

  .d1-proof-stat strong {
    font-size: 1.25rem;
  }
}

/* ============================================
   Logos Section
   ============================================ */
.d1-logos {
  padding: var(--d1-space-3xl) var(--d1-space-xl);
  background: var(--d1-gray-50);
}

.d1-logos-label {
  text-align: center;
  font-size: 0.875rem;
  color: var(--d1-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--d1-space-lg);
}

.d1-logos-grid {
  max-width: var(--d1-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--d1-space-3xl);
  flex-wrap: wrap;
}

.d1-logo-item {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--d1-gray-400);
  letter-spacing: -0.01em;
}

/* ============================================
   Value Proposition Section
   ============================================ */
.d1-value {
  padding: var(--d1-space-4xl) var(--d1-space-xl);
  max-width: var(--d1-max-width);
  margin: 0 auto;
}

.d1-value-header {
  text-align: center;
  margin-bottom: var(--d1-space-3xl);
}

.d1-overline {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--d1-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--d1-space-md);
}

.d1-section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--d1-space-md);
  color: var(--d1-gray-900);
}

.d1-section-subtitle {
  font-size: 1.125rem;
  color: var(--d1-gray-600);
  max-width: 600px;
  margin: 0 auto;
}

.d1-value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--d1-space-xl);
}

.d1-value-card {
  padding: var(--d1-space-xl);
  border-radius: var(--d1-radius-xl);
  background: var(--d1-gray-50);
  transition: all var(--d1-transition-base);
}

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

.d1-value-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--d1-radius-lg);
  background: linear-gradient(135deg, var(--d1-gradient-start), var(--d1-gradient-end));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--d1-space-lg);
}

.d1-value-icon svg {
  stroke: white;
}

.d1-value-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--d1-space-sm);
  color: var(--d1-gray-900);
}

.d1-value-card p {
  font-size: 0.9375rem;
  color: var(--d1-gray-600);
  line-height: 1.6;
}

/* ============================================
   Process Section
   ============================================ */
.d1-process {
  padding: var(--d1-space-4xl) var(--d1-space-xl);
  background: var(--d1-gray-900);
  color: white;
}

.d1-process-header {
  text-align: center;
  margin-bottom: var(--d1-space-3xl);
}

.d1-process .d1-overline {
  color: var(--d1-gray-400);
}

.d1-process .d1-section-title {
  color: white;
}

.d1-process-steps {
  max-width: var(--d1-max-width);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--d1-space-lg);
  flex-wrap: wrap;
}

.d1-step {
  flex: 1;
  min-width: 250px;
  max-width: 320px;
  text-align: center;
}

.d1-step-number {
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--d1-gradient-start), var(--d1-gradient-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--d1-space-md);
}

.d1-step h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--d1-space-sm);
}

.d1-step p {
  font-size: 0.9375rem;
  color: var(--d1-gray-400);
  line-height: 1.6;
}

.d1-step-connector {
  width: 60px;
  height: 2px;
  background: var(--d1-gray-700);
  margin-top: 2.5rem;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .d1-step-connector {
    display: none;
  }
}

/* ============================================
   Reasy Score Section
   ============================================ */
.d1-score-section {
  padding: var(--d1-space-4xl) var(--d1-space-xl);
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
}

.d1-score-section-inner {
  max-width: var(--d1-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--d1-space-3xl);
  align-items: center;
}

.d1-score-content .d1-section-title {
  text-align: left;
}

.d1-score-content .d1-section-subtitle {
  text-align: left;
  margin-left: 0;
  margin-bottom: var(--d1-space-xl);
}

.d1-score-factors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--d1-space-lg);
}

.d1-score-factor {
  display: flex;
  flex-direction: column;
  gap: var(--d1-space-xs);
}

.d1-score-factor-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--d1-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--d1-space-xs);
}

.d1-score-factor-schools { background: #dbeafe; }
.d1-score-factor-schools svg { stroke: #2563eb; }

.d1-score-factor-transport { background: #fef3c7; }
.d1-score-factor-transport svg { stroke: #d97706; }

.d1-score-factor-safety { background: #dcfce7; }
.d1-score-factor-safety svg { stroke: #16a34a; }

.d1-score-factor-growth { background: #f3e8ff; }
.d1-score-factor-growth svg { stroke: #9333ea; }

.d1-score-factor-rental { background: #fce7f3; }
.d1-score-factor-rental svg { stroke: #db2777; }

.d1-score-factor-amenities { background: #e0e7ff; }
.d1-score-factor-amenities svg { stroke: #2563eb; }

.d1-score-factor h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--d1-gray-900);
  margin: 0;
}

.d1-score-factor p {
  font-size: 0.875rem;
  color: var(--d1-gray-600);
  line-height: 1.5;
  margin: 0;
}

/* Score Visual Demo */
.d1-score-visual {
  display: flex;
  justify-content: center;
}

.d1-score-demo {
  background: white;
  border-radius: var(--d1-radius-xl);
  padding: var(--d1-space-xl);
  box-shadow: var(--d1-shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.03);
  width: 100%;
  max-width: 360px;
}

.d1-score-demo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--d1-space-lg);
}

.d1-score-demo-suburb {
  font-weight: 600;
  color: var(--d1-gray-900);
}

.d1-score-demo-type {
  font-size: 0.75rem;
  color: var(--d1-gray-500);
  background: var(--d1-gray-100);
  padding: 0.25rem 0.5rem;
  border-radius: var(--d1-radius-full);
}

.d1-score-ring-large {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto var(--d1-space-lg);
}

.d1-score-ring-large svg {
  width: 100%;
  height: 100%;
}

.d1-score-number-large {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--d1-gray-900);
  letter-spacing: -0.02em;
}

.d1-score-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--d1-space-sm);
}

.d1-score-bar {
  display: grid;
  grid-template-columns: 70px 1fr 30px;
  align-items: center;
  gap: var(--d1-space-sm);
  font-size: 0.8125rem;
}

.d1-score-bar span:first-child {
  color: var(--d1-gray-600);
}

.d1-score-bar span:last-child {
  color: var(--d1-gray-900);
  font-weight: 600;
  text-align: right;
}

.d1-score-bar-track {
  height: 6px;
  background: var(--d1-gray-100);
  border-radius: var(--d1-radius-full);
  overflow: hidden;
}

.d1-score-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--d1-gradient-start), var(--d1-gradient-end));
  border-radius: var(--d1-radius-full);
}

.d1-score-bar-fill-green {
  background: linear-gradient(90deg, #22c55e, #16a34a);
}

.d1-score-demo-note {
  font-size: 0.75rem;
  color: var(--d1-gray-500);
  text-align: center;
  margin: var(--d1-space-md) 0 0;
}

@media (max-width: 900px) {
  .d1-score-section-inner {
    grid-template-columns: 1fr;
    gap: var(--d1-space-xl);
  }

  .d1-score-content .d1-section-title,
  .d1-score-content .d1-section-subtitle {
    text-align: center;
  }

  .d1-score-factors-grid {
    grid-template-columns: 1fr;
  }

  .d1-score-visual {
    order: -1;
  }
}

/* ============================================
   Testimonials Section
   ============================================ */
.d1-testimonials {
  padding: var(--d1-space-4xl) var(--d1-space-xl);
  max-width: var(--d1-max-width);
  margin: 0 auto;
}

.d1-testimonials-header {
  text-align: center;
  margin-bottom: var(--d1-space-3xl);
}

.d1-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--d1-space-xl);
}

.d1-testimonial {
  padding: var(--d1-space-xl);
  background: var(--d1-gray-50);
  border-radius: var(--d1-radius-xl);
}

.d1-testimonial-stars {
  color: #fbbf24;
  font-size: 1.125rem;
  margin-bottom: var(--d1-space-md);
  letter-spacing: 0.1em;
}

.d1-testimonial blockquote {
  font-size: 1rem;
  color: var(--d1-gray-700);
  line-height: 1.7;
  margin: 0 0 var(--d1-space-lg);
  font-style: normal;
}

.d1-testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--d1-space-md);
}

.d1-testimonial-author strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--d1-gray-900);
}

.d1-testimonial-author span {
  display: block;
  font-size: 0.8125rem;
  color: var(--d1-gray-500);
}

/* ============================================
   Pricing Preview Section
   ============================================ */
.d1-pricing-preview {
  padding: var(--d1-space-4xl) var(--d1-space-xl);
  background: var(--d1-gray-50);
}

.d1-pricing-card {
  max-width: 900px;
  margin: 0 auto;
  background: white;
  border-radius: var(--d1-radius-xl);
  box-shadow: var(--d1-shadow-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

@media (max-width: 700px) {
  .d1-pricing-card {
    grid-template-columns: 1fr;
  }
}

.d1-pricing-content {
  padding: var(--d1-space-2xl);
}

.d1-pricing-content h2 {
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--d1-space-xs);
  color: var(--d1-gray-900);
}

.d1-pricing-note {
  font-size: 1rem;
  color: var(--d1-gray-500);
  margin-bottom: var(--d1-space-xl);
}

.d1-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--d1-space-xl);
}

.d1-pricing-features li {
  padding: var(--d1-space-sm) 0;
  padding-left: var(--d1-space-lg);
  position: relative;
  color: var(--d1-gray-700);
  font-size: 0.9375rem;
}

.d1-pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--d1-primary);
  font-weight: 600;
}

.d1-pricing-comparison {
  background: linear-gradient(135deg, var(--d1-gradient-start), var(--d1-gradient-end));
  padding: var(--d1-space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
}

.d1-comparison-label {
  font-size: 0.875rem;
  opacity: 0.8;
  margin-bottom: var(--d1-space-sm);
}

.d1-comparison-value {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: line-through;
  opacity: 0.7;
  margin-bottom: var(--d1-space-md);
}

.d1-comparison-savings {
  font-size: 1.25rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.2);
  padding: var(--d1-space-sm) var(--d1-space-md);
  border-radius: var(--d1-radius-full);
  display: inline-block;
}

/* ============================================
   CTA Section
   ============================================ */
.d1-cta {
  position: relative;
  padding: var(--d1-space-4xl) var(--d1-space-xl);
  background: linear-gradient(135deg, var(--d1-gradient-start), var(--d1-gradient-end));
  overflow: hidden;
}

.d1-cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.d1-gradient-orb-3 {
  width: 500px;
  height: 500px;
  background: rgba(255, 255, 255, 0.1);
  top: -200px;
  right: -100px;
}

.d1-cta-content {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  color: white;
}

.d1-cta h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--d1-space-md);
}

.d1-cta p {
  font-size: 1.125rem;
  opacity: 0.9;
  margin-bottom: var(--d1-space-xl);
}

.d1-cta-actions {
  display: flex;
  gap: var(--d1-space-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   Footer
   ============================================ */
.d1-footer {
  padding: var(--d1-space-4xl) var(--d1-space-xl);
  background: var(--d1-gray-900);
  color: var(--d1-gray-400);
}

.d1-footer-grid {
  max-width: var(--d1-max-width);
  margin: 0 auto var(--d1-space-3xl);
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--d1-space-2xl);
}

@media (max-width: 800px) {
  .d1-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .d1-footer-grid {
    grid-template-columns: 1fr;
  }
}

.d1-footer-brand .d1-logo {
  margin-bottom: var(--d1-space-md);
}

.d1-footer-brand .d1-logo-text {
  color: white;
}

.d1-footer-brand p {
  font-size: 0.9375rem;
  line-height: 1.6;
}

.d1-footer-links h4 {
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--d1-space-md);
}

.d1-footer-links a {
  display: block;
  color: var(--d1-gray-400);
  text-decoration: none;
  font-size: 0.9375rem;
  padding: var(--d1-space-xs) 0;
  transition: color var(--d1-transition-fast);
}

.d1-footer-links a:hover {
  color: white;
}

.d1-footer-bottom {
  max-width: var(--d1-max-width);
  margin: 0 auto;
  padding-top: var(--d1-space-xl);
  border-top: 1px solid var(--d1-gray-800);
}

.d1-footer-bottom p {
  font-size: 0.875rem;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

/* Mobile Navigation */
.d1-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 110;
}

.d1-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--d1-gray-700);
  border-radius: 2px;
  transition: all var(--d1-transition-base);
}

/* Mobile overlay */
.d1-mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 998;
}

.d1-mobile-overlay.d1-open {
  display: block;
}

/* Mobile menu - slides in from right like test page */
.d1-mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: #fff;
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.d1-mobile-menu.d1-open {
  transform: translateX(0);
}

.d1-mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--d1-gray-100);
}

.d1-mobile-logo {
  display: flex;
  align-items: center;
}

.d1-mobile-logo-img {
  height: 28px;
  width: auto;
}

.d1-mobile-menu-close {
  width: 44px;
  height: 44px;
  background: var(--d1-gray-50);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--d1-gray-500);
  transition: all 0.2s ease;
}

.d1-mobile-menu-close:hover {
  background: var(--d1-gray-100);
  color: var(--d1-gray-700);
}

.d1-mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}

.d1-mobile-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 12px;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.d1-mobile-link:hover {
  background: var(--d1-gray-50);
}

.d1-mobile-link-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #EEF3FC 0%, #E8F0FE 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--d1-primary);
  flex-shrink: 0;
}

.d1-mobile-link-icon-green {
  background: linear-gradient(135deg, #E8F9F3 0%, #D1FAE5 100%);
  color: #059669;
}

.d1-mobile-link-icon-purple {
  background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%);
  color: #7C3AED;
}

.d1-mobile-link-icon-orange {
  background: linear-gradient(135deg, #FFF4E5 0%, #FED7AA 100%);
  color: #EA580C;
}

.d1-mobile-link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.d1-mobile-link-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--d1-gray-900);
}

.d1-mobile-link-desc {
  font-size: 0.875rem;
  color: var(--d1-gray-500);
}

.d1-mobile-menu-cta {
  padding: 16px 0;
}

.d1-mobile-cta-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #EEF3FC 0%, #E8F0FE 100%);
  border-radius: 16px;
  border: 1px solid rgba(79, 125, 221, 0.1);
}

.d1-mobile-cta-icon {
  width: 48px;
  height: 48px;
  background: var(--d1-primary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.d1-mobile-cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.d1-mobile-cta-text strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--d1-gray-900);
}

.d1-mobile-cta-text span {
  font-size: 0.875rem;
  color: var(--d1-gray-600);
}

.d1-mobile-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}

.d1-btn-lg {
  padding: 16px 24px;
  font-size: 1rem;
}

/* Nav toggle animation when open */
.d1-nav-toggle.d1-open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.d1-nav-toggle.d1-open span:nth-child(2) {
  opacity: 0;
}

.d1-nav-toggle.d1-open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.d1-hide-mobile {
  display: inline-flex;
}

@media (max-width: 768px) {
  .d1-nav-links {
    display: none;
  }

  .d1-nav-toggle {
    display: flex;
  }

  .d1-hide-mobile {
    display: none !important;
  }

  .d1-nav-inner {
    padding: var(--d1-space-sm) var(--d1-space-md);
  }

  .d1-nav-actions .d1-btn-primary {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  /* Hero Mobile */
  .d1-hero {
    padding-left: var(--d1-space-md);
    padding-right: var(--d1-space-md);
  }

  .d1-hero-showcase {
    padding-top: calc(60px + var(--d1-space-lg));
    padding-bottom: var(--d1-space-lg);
  }

  .d1-hero-title-large {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .d1-hero-title-large br {
    display: none;
  }

  .d1-hero-subtitle {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* Search bar mobile */
  .d1-hero-search {
    margin-bottom: var(--d1-space-lg);
  }

  .d1-search-bar-lg {
    flex-wrap: wrap;
    padding: var(--d1-space-sm);
    gap: var(--d1-space-sm);
  }

  .d1-search-bar-lg .d1-search-icon {
    display: none;
  }

  .d1-search-bar-lg .d1-search-input {
    width: 100%;
    padding: var(--d1-space-sm);
    font-size: 1rem;
  }

  .d1-search-bar-lg .d1-search-btn {
    display: none; /* Hide on mobile - users can tap enter */
  }

  /* Hero cards mobile */
  .d1-hero-cards {
    flex-direction: column;
    gap: var(--d1-space-md);
  }

  .d1-hero-card {
    max-width: 100%;
    padding: var(--d1-space-md);
  }

  .d1-card-icon {
    width: 36px;
    height: 36px;
  }

  .d1-card-icon svg {
    width: 18px;
    height: 18px;
  }

  .d1-hero-card-title {
    font-size: 1.125rem;
  }

  .d1-trust-line {
    font-size: 0.8125rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Logos section mobile */
  .d1-logos {
    padding: var(--d1-space-xl) var(--d1-space-md);
  }

  .d1-logos-grid {
    gap: var(--d1-space-lg);
  }

  .d1-logo-item {
    font-size: 0.875rem;
  }

  /* Value section mobile */
  .d1-value {
    padding: var(--d1-space-2xl) var(--d1-space-md);
  }

  .d1-section-title {
    font-size: 1.75rem;
  }

  .d1-section-title br {
    display: none;
  }

  .d1-section-subtitle {
    font-size: 1rem;
  }

  .d1-value-grid {
    grid-template-columns: 1fr;
    gap: var(--d1-space-md);
  }

  .d1-value-card {
    padding: var(--d1-space-lg);
  }

  /* Process section mobile */
  .d1-process {
    padding: var(--d1-space-2xl) var(--d1-space-md);
  }

  .d1-process-steps {
    flex-direction: column;
    gap: var(--d1-space-xl);
  }

  .d1-step {
    max-width: 100%;
  }

  .d1-step-number {
    font-size: 2rem;
  }

  /* Score section mobile */
  .d1-score-section {
    padding: var(--d1-space-2xl) var(--d1-space-md);
  }

  .d1-score-section-inner {
    grid-template-columns: 1fr;
    gap: var(--d1-space-xl);
  }

  .d1-score-content .d1-section-title,
  .d1-score-content .d1-section-subtitle {
    text-align: center;
  }

  .d1-score-factors-grid {
    grid-template-columns: 1fr;
    gap: var(--d1-space-md);
  }

  .d1-score-factor {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--d1-space-md);
  }

  .d1-score-factor-icon {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .d1-score-visual {
    order: -1;
  }

  .d1-score-demo {
    max-width: 320px;
    padding: var(--d1-space-lg);
  }

  .d1-score-ring-large {
    width: 120px;
    height: 120px;
  }

  .d1-score-number-large {
    font-size: 2rem;
  }

  /* Testimonials mobile */
  .d1-testimonials {
    padding: var(--d1-space-2xl) var(--d1-space-md);
  }

  .d1-testimonials-grid {
    grid-template-columns: 1fr;
  }

  .d1-testimonial {
    padding: var(--d1-space-lg);
  }

  /* Pricing mobile */
  .d1-pricing-preview {
    padding: var(--d1-space-2xl) var(--d1-space-md);
  }

  .d1-pricing-card {
    grid-template-columns: 1fr;
  }

  .d1-pricing-content {
    padding: var(--d1-space-lg);
  }

  .d1-pricing-content h2 {
    font-size: 2.5rem;
  }

  .d1-pricing-comparison {
    padding: var(--d1-space-lg);
  }

  /* CTA section mobile */
  .d1-cta {
    padding: var(--d1-space-2xl) var(--d1-space-md);
  }

  .d1-cta h2 {
    font-size: 1.5rem;
  }

  .d1-cta-actions {
    flex-direction: column;
  }

  .d1-cta-actions a {
    width: 100%;
    justify-content: center;
  }

  /* Footer mobile */
  .d1-footer {
    padding: var(--d1-space-2xl) var(--d1-space-md);
  }

  .d1-footer-grid {
    grid-template-columns: 1fr;
    gap: var(--d1-space-xl);
  }
}

/* Extra small screens */
@media (max-width: 380px) {
  .d1-hero-title-large {
    font-size: 1.5rem;
  }

  .d1-hero-card {
    padding: var(--d1-space-sm) var(--d1-space-md);
  }

  .d1-btn-primary,
  .d1-btn-secondary {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}

/* ============================================
   Hero Tabs
   ============================================ */
.d1-hero-tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--d1-space-xs);
  background: white;
  padding: var(--d1-space-xs);
  border-radius: var(--d1-radius-full);
  box-shadow: var(--d1-shadow-md), 0 0 0 1px rgba(0, 0, 0, 0.03);
  margin-bottom: var(--d1-space-lg);
}

.d1-hero-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--d1-space-sm);
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--d1-gray-600);
  background: transparent;
  border: none;
  border-radius: var(--d1-radius-full);
  cursor: pointer;
  transition: all var(--d1-transition-fast);
}

.d1-hero-tab:hover {
  color: var(--d1-gray-900);
  background: var(--d1-gray-50);
}

.d1-hero-tab-active {
  color: white;
  background: linear-gradient(135deg, var(--d1-gradient-start), var(--d1-gradient-end));
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.d1-hero-tab-active:hover {
  color: white;
  background: linear-gradient(135deg, var(--d1-gradient-start), var(--d1-gradient-end));
}

.d1-hero-tab svg {
  flex-shrink: 0;
}

/* Hidden search form */
.d1-hero-search-hidden {
  display: none;
}

/* Sell prompt */
.d1-sell-prompt {
  text-align: center;
  background: white;
  padding: var(--d1-space-lg) var(--d1-space-xl);
  border-radius: var(--d1-radius-xl);
  box-shadow: var(--d1-shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.d1-sell-prompt p {
  font-size: 1.125rem;
  color: var(--d1-gray-700);
  margin: 0 0 var(--d1-space-md);
}

/* ============================================
   Three-Card Layout
   ============================================ */
.d1-hero-cards-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--d1-space-lg);
  max-width: 1000px;
  margin: 0 auto var(--d1-space-lg);
}

.d1-hero-cards-three .d1-hero-card {
  max-width: none;
}

/* Rent card icon */
.d1-card-icon-rent {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.d1-card-icon-rent svg {
  stroke: #d97706;
}

/* Rent card with stacked buttons */
.d1-hero-card-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--d1-space-sm);
}

.d1-hero-card-buttons .d1-btn-primary,
.d1-hero-card-buttons .d1-btn-secondary {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
}

/* Card hover effects for buyer/seller/rent */
.d1-hero-card-buyer::before {
  background: linear-gradient(90deg, var(--d1-gradient-start), var(--d1-gradient-end)) !important;
}

.d1-hero-card-rent::before {
  background: linear-gradient(90deg, #f59e0b, #d97706) !important;
}

@media (max-width: 900px) {
  .d1-hero-cards-three {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
}

@media (max-width: 768px) {
  .d1-hero-tabs {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--d1-space-2xs);
    padding: var(--d1-space-xs);
  }

  .d1-hero-tab {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    gap: var(--d1-space-xs);
  }

  .d1-hero-tab svg {
    width: 14px;
    height: 14px;
  }
}

/* ============================================
   For Landlords Section
   ============================================ */
.d1-landlords {
  padding: var(--d1-space-4xl) var(--d1-space-xl);
  background: var(--d1-gray-50);
}

.d1-landlords-header {
  text-align: center;
  margin-bottom: var(--d1-space-3xl);
}

.d1-landlords-grid {
  max-width: var(--d1-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--d1-space-xl);
}

.d1-landlord-card {
  background: white;
  padding: var(--d1-space-xl);
  border-radius: var(--d1-radius-xl);
  box-shadow: var(--d1-shadow-sm);
  transition: all var(--d1-transition-base);
}

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

.d1-landlord-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--d1-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--d1-space-md);
}

.d1-landlord-icon-green {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.d1-landlord-icon-green svg {
  stroke: #16a34a;
}

.d1-landlord-icon-blue {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.d1-landlord-icon-blue svg {
  stroke: #2563eb;
}

.d1-landlord-icon-purple {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
}

.d1-landlord-icon-purple svg {
  stroke: #9333ea;
}

.d1-landlord-icon-orange {
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
}

.d1-landlord-icon-orange svg {
  stroke: #ea580c;
}

.d1-landlord-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--d1-gray-900);
  margin: 0 0 var(--d1-space-sm);
}

.d1-landlord-card p {
  font-size: 0.9375rem;
  color: var(--d1-gray-600);
  line-height: 1.6;
  margin: 0;
}

.d1-landlords-cta {
  text-align: center;
  margin-top: var(--d1-space-2xl);
}

@media (max-width: 1024px) {
  .d1-landlords-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .d1-landlords {
    padding: var(--d1-space-2xl) var(--d1-space-md);
  }

  .d1-landlords-grid {
    grid-template-columns: 1fr;
    gap: var(--d1-space-md);
  }

  .d1-landlord-card {
    padding: var(--d1-space-lg);
  }
}

/* ============================================
   For Renters Section
   ============================================ */
.d1-renters {
  padding: var(--d1-space-4xl) var(--d1-space-xl);
  background: linear-gradient(135deg, var(--d1-gray-900) 0%, #0f172a 100%);
  color: white;
}

.d1-renters-inner {
  max-width: var(--d1-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--d1-space-3xl);
  align-items: center;
}

.d1-renters-content .d1-overline {
  color: var(--d1-gray-400);
}

.d1-renters-content .d1-section-title {
  color: white;
}

.d1-renters-content .d1-section-subtitle {
  color: var(--d1-gray-400);
  text-align: left;
  margin-left: 0;
  margin-bottom: var(--d1-space-xl);
}

.d1-renters-features {
  display: flex;
  flex-direction: column;
  gap: var(--d1-space-lg);
  margin-bottom: var(--d1-space-xl);
}

.d1-renter-feature {
  display: flex;
  gap: var(--d1-space-md);
  align-items: flex-start;
}

.d1-renter-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--d1-radius-md);
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.d1-renter-feature-icon svg {
  stroke: var(--d1-gray-300);
}

.d1-renter-feature-text h4 {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  margin: 0 0 var(--d1-space-xs);
}

.d1-renter-feature-text p {
  font-size: 0.875rem;
  color: var(--d1-gray-400);
  line-height: 1.5;
  margin: 0;
}

.d1-renters-cta {
  display: flex;
  gap: var(--d1-space-md);
}

.d1-renters-cta .d1-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--d1-space-sm);
}

/* Renter card preview (visual) */
.d1-renters-visual {
  display: flex;
  justify-content: center;
}

.d1-renter-card-preview {
  background: white;
  border-radius: var(--d1-radius-xl);
  overflow: hidden;
  width: 100%;
  max-width: 320px;
  box-shadow: var(--d1-shadow-xl);
}

.d1-renter-card-header {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  height: 120px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--d1-space-md);
}

.d1-renter-card-badge {
  display: inline-flex;
  padding: 0.25rem 0.625rem;
  background: #22c55e;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--d1-radius-full);
}

.d1-renter-card-body {
  padding: var(--d1-space-lg);
}

.d1-renter-card-body h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--d1-gray-900);
  margin: 0 0 var(--d1-space-xs);
}

.d1-renter-card-body p {
  font-size: 0.9375rem;
  color: var(--d1-gray-600);
  margin: 0;
}

.d1-renter-card-location {
  font-size: 0.875rem !important;
  color: var(--d1-gray-500) !important;
  margin-top: var(--d1-space-xs) !important;
}

.d1-renter-card-action {
  padding: 0 var(--d1-space-lg) var(--d1-space-lg);
}

.d1-btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

@media (max-width: 900px) {
  .d1-renters-inner {
    grid-template-columns: 1fr;
    gap: var(--d1-space-xl);
  }

  .d1-renters-content .d1-section-title,
  .d1-renters-content .d1-section-subtitle {
    text-align: center;
  }

  .d1-renters-features {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .d1-renters-cta {
    justify-content: center;
  }

  .d1-renters-visual {
    order: -1;
  }
}

@media (max-width: 600px) {
  .d1-renters {
    padding: var(--d1-space-2xl) var(--d1-space-md);
  }

  .d1-renter-card-preview {
    max-width: 280px;
  }
}

/* ============================================
   Footer - Four Column
   ============================================ */
.d1-footer-grid {
  grid-template-columns: 2fr repeat(3, 1fr);
}

@media (max-width: 900px) {
  .d1-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .d1-footer-brand {
    grid-column: span 2;
  }
}

@media (max-width: 500px) {
  .d1-footer-grid {
    grid-template-columns: 1fr;
  }

  .d1-footer-brand {
    grid-column: span 1;
  }
}


/* ================================================
   pages/index2.css
   ================================================ */

/* Direction 2: Airbnb Warmth - Friendly & Human */

/* ============================================
   CSS Custom Properties
   ============================================ */
:root {
  /* Warm color palette */
  --d2-coral: #FF5A5F;
  --d2-coral-dark: #E54A4F;
  --d2-teal: #00A699;
  --d2-orange: #FC642D;
  --d2-purple: #914669;

  /* Neutrals - warmer grays */
  --d2-white: #ffffff;
  --d2-cream: #FAFAFA;
  --d2-gray-100: #F7F7F7;
  --d2-gray-200: #EBEBEB;
  --d2-gray-300: #DDDDDD;
  --d2-gray-400: #B0B0B0;
  --d2-gray-500: #717171;
  --d2-gray-600: #484848;
  --d2-gray-700: #222222;

  /* Typography */
  --d2-font-sans: 'Circular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  /* Spacing */
  --d2-space-xs: 0.25rem;
  --d2-space-sm: 0.5rem;
  --d2-space-md: 1rem;
  --d2-space-lg: 1.5rem;
  --d2-space-xl: 2rem;
  --d2-space-2xl: 3rem;
  --d2-space-3xl: 4rem;
  --d2-space-4xl: 6rem;

  /* Sizing */
  --d2-max-width: 1120px;

  /* Effects */
  --d2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --d2-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --d2-shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.12);
  --d2-shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --d2-transition: 200ms ease;

  /* Border Radius - more rounded, friendly */
  --d2-radius-sm: 8px;
  --d2-radius-md: 12px;
  --d2-radius-lg: 16px;
  --d2-radius-xl: 24px;
  --d2-radius-full: 9999px;
}

/* ============================================
   Base
   ============================================ */
.d2-page {
  font-family: var(--d2-font-sans);
  color: var(--d2-gray-700);
  background: var(--d2-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   Navigation
   ============================================ */
.d2-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--d2-white);
  border-bottom: 1px solid var(--d2-gray-200);
}

.d2-nav-inner {
  max-width: var(--d2-max-width);
  margin: 0 auto;
  padding: var(--d2-space-md) var(--d2-space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.d2-logo {
  display: flex;
  align-items: center;
  gap: var(--d2-space-sm);
  text-decoration: none;
  color: var(--d2-gray-700);
  font-weight: 700;
  font-size: 1.25rem;
}

.d2-logo-icon {
  flex-shrink: 0;
}

.d2-nav-links {
  display: flex;
  gap: var(--d2-space-xl);
}

.d2-nav-links a {
  color: var(--d2-gray-600);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--d2-space-sm);
  border-radius: var(--d2-radius-full);
  transition: var(--d2-transition);
}

.d2-nav-links a:hover {
  background: var(--d2-gray-100);
  color: var(--d2-gray-700);
}

.d2-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--d2-space-sm);
}

/* ============================================
   Buttons
   ============================================ */
.d2-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: var(--d2-coral);
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--d2-radius-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: var(--d2-transition);
}

.d2-btn-primary:hover {
  background: var(--d2-coral-dark);
  transform: scale(1.02);
}

.d2-btn-text {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: var(--d2-gray-700);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: var(--d2-transition);
}

.d2-btn-text:hover {
  background: var(--d2-gray-100);
  border-radius: var(--d2-radius-full);
}

.d2-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--d2-gray-700);
  font-weight: 600;
  font-size: 0.875rem;
  border: 2px solid var(--d2-gray-700);
  border-radius: var(--d2-radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: var(--d2-transition);
}

.d2-btn-outline:hover {
  background: var(--d2-gray-700);
  color: white;
}

.d2-btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  background: white;
  color: var(--d2-gray-700);
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--d2-radius-sm);
  text-decoration: none;
  transition: var(--d2-transition);
}

.d2-btn-white:hover {
  transform: scale(1.02);
  box-shadow: var(--d2-shadow-lg);
}

.d2-btn-ghost-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: var(--d2-transition);
}

.d2-btn-ghost-white:hover {
  text-decoration: underline;
}

/* ============================================
   Hero Section
   ============================================ */
.d2-hero {
  background: linear-gradient(180deg, var(--d2-cream) 0%, var(--d2-white) 100%);
  padding: var(--d2-space-4xl) var(--d2-space-xl);
  padding-top: var(--d2-space-3xl);
}

.d2-hero-content {
  max-width: var(--d2-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--d2-space-3xl);
  align-items: center;
}

@media (max-width: 900px) {
  .d2-hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.d2-hero-text h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--d2-gray-700);
  line-height: 1.15;
  margin-bottom: var(--d2-space-md);
  letter-spacing: -0.02em;
}

.d2-hero-text > p {
  font-size: 1.125rem;
  color: var(--d2-gray-500);
  margin-bottom: var(--d2-space-xl);
  line-height: 1.6;
}

.d2-hero-search {
  background: white;
  border-radius: var(--d2-radius-lg);
  box-shadow: var(--d2-shadow-lg);
  overflow: hidden;
}

.d2-search-tabs {
  display: flex;
  border-bottom: 1px solid var(--d2-gray-200);
}

.d2-tab {
  flex: 1;
  padding: var(--d2-space-md);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--d2-gray-500);
  background: none;
  border: none;
  cursor: pointer;
  transition: var(--d2-transition);
}

.d2-tab-active {
  color: var(--d2-gray-700);
  box-shadow: inset 0 -2px 0 var(--d2-coral);
}

.d2-search-bar {
  display: flex;
  align-items: center;
  padding: var(--d2-space-md);
  gap: var(--d2-space-md);
}

.d2-search-bar svg {
  color: var(--d2-gray-400);
  flex-shrink: 0;
}

.d2-search-bar input {
  flex: 1;
  border: none;
  font-size: 1rem;
  color: var(--d2-gray-700);
  outline: none;
}

.d2-search-bar input::placeholder {
  color: var(--d2-gray-400);
}

.d2-search-submit {
  padding: 0.75rem 1.5rem;
  background: var(--d2-coral);
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  border-radius: var(--d2-radius-sm);
  cursor: pointer;
  transition: var(--d2-transition);
}

.d2-search-submit:hover {
  background: var(--d2-coral-dark);
}

.d2-hero-image {
  display: flex;
  justify-content: center;
}

.d2-hero-card {
  width: 320px;
  background: white;
  border-radius: var(--d2-radius-lg);
  box-shadow: var(--d2-shadow-xl);
  overflow: hidden;
  position: relative;
}

.d2-card-badge {
  position: absolute;
  top: var(--d2-space-md);
  left: var(--d2-space-md);
  background: white;
  padding: var(--d2-space-xs) var(--d2-space-sm);
  border-radius: var(--d2-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d2-gray-700);
}

.d2-card-image {
  height: 200px;
  background: linear-gradient(135deg, var(--d2-coral) 0%, var(--d2-orange) 100%);
}

.d2-card-content {
  padding: var(--d2-space-lg);
}

.d2-card-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--d2-gray-700);
  margin-bottom: var(--d2-space-xs);
}

.d2-card-address {
  font-size: 0.9375rem;
  color: var(--d2-gray-600);
  margin-bottom: var(--d2-space-xs);
}

.d2-card-features {
  font-size: 0.875rem;
  color: var(--d2-gray-500);
}

/* ============================================
   Trust Bar
   ============================================ */
.d2-trust {
  background: var(--d2-white);
  padding: var(--d2-space-2xl) var(--d2-space-xl);
  border-bottom: 1px solid var(--d2-gray-200);
}

.d2-trust-inner {
  max-width: var(--d2-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--d2-space-2xl);
  flex-wrap: wrap;
}

.d2-trust-stat {
  text-align: center;
}

.d2-trust-stat strong {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--d2-gray-700);
}

.d2-trust-stat span {
  font-size: 0.875rem;
  color: var(--d2-gray-500);
}

.d2-trust-divider {
  width: 1px;
  height: 40px;
  background: var(--d2-gray-200);
}

@media (max-width: 600px) {
  .d2-trust-divider {
    display: none;
  }
}

/* ============================================
   How It Works
   ============================================ */
.d2-how {
  padding: var(--d2-space-4xl) var(--d2-space-xl);
}

.d2-how-inner {
  max-width: var(--d2-max-width);
  margin: 0 auto;
}

.d2-how-header {
  text-align: center;
  margin-bottom: var(--d2-space-3xl);
}

.d2-how-header h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--d2-gray-700);
  margin-bottom: var(--d2-space-md);
}

.d2-how-header p {
  font-size: 1.125rem;
  color: var(--d2-gray-500);
}

.d2-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--d2-space-xl);
}

@media (max-width: 800px) {
  .d2-how-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}

.d2-how-card {
  text-align: center;
  padding: var(--d2-space-xl);
}

.d2-how-illustration {
  margin-bottom: var(--d2-space-lg);
}

.d2-how-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--d2-gray-700);
  margin-bottom: var(--d2-space-sm);
}

.d2-how-card p {
  font-size: 0.9375rem;
  color: var(--d2-gray-500);
  line-height: 1.6;
}

/* ============================================
   AI Assistants
   ============================================ */
.d2-assistants {
  background: var(--d2-gray-100);
  padding: var(--d2-space-4xl) var(--d2-space-xl);
}

.d2-assistants-inner {
  max-width: var(--d2-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--d2-space-3xl);
  align-items: center;
}

@media (max-width: 900px) {
  .d2-assistants-inner {
    grid-template-columns: 1fr;
  }
}

.d2-badge {
  display: inline-block;
  padding: var(--d2-space-xs) var(--d2-space-md);
  background: var(--d2-coral);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--d2-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--d2-space-md);
}

.d2-assistants-text h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--d2-gray-700);
  margin-bottom: var(--d2-space-md);
  line-height: 1.2;
}

.d2-assistants-text > p {
  font-size: 1rem;
  color: var(--d2-gray-500);
  line-height: 1.6;
  margin-bottom: var(--d2-space-xl);
}

.d2-assistant-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--d2-space-md);
  margin-bottom: var(--d2-space-xl);
}

.d2-assistant {
  display: flex;
  align-items: center;
  gap: var(--d2-space-md);
}

.d2-assistant-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1rem;
}

.d2-assistant strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--d2-gray-700);
}

.d2-assistant span {
  font-size: 0.8125rem;
  color: var(--d2-gray-500);
}

.d2-chat-preview {
  display: flex;
  justify-content: center;
}

.d2-chat-window {
  width: 100%;
  max-width: 380px;
  background: white;
  border-radius: var(--d2-radius-lg);
  box-shadow: var(--d2-shadow-xl);
  overflow: hidden;
}

.d2-chat-header {
  display: flex;
  align-items: center;
  gap: var(--d2-space-md);
  padding: var(--d2-space-md) var(--d2-space-lg);
  border-bottom: 1px solid var(--d2-gray-200);
}

.d2-chat-header .d2-assistant-avatar {
  width: 36px;
  height: 36px;
}

.d2-chat-header strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--d2-gray-700);
}

.d2-chat-header span {
  font-size: 0.75rem;
  color: var(--d2-gray-500);
}

.d2-chat-messages {
  padding: var(--d2-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--d2-space-md);
}

.d2-message {
  max-width: 85%;
}

.d2-message-user {
  align-self: flex-end;
}

.d2-message-user p {
  background: var(--d2-gray-100);
  padding: var(--d2-space-md);
  border-radius: var(--d2-radius-lg);
  border-bottom-right-radius: var(--d2-space-xs);
  font-size: 0.9375rem;
  color: var(--d2-gray-700);
}

.d2-message-ai p {
  background: var(--d2-cream);
  padding: var(--d2-space-md);
  border-radius: var(--d2-radius-lg);
  border-bottom-left-radius: var(--d2-space-xs);
  font-size: 0.9375rem;
  color: var(--d2-gray-700);
  line-height: 1.5;
}

.d2-chat-input {
  display: flex;
  align-items: center;
  gap: var(--d2-space-sm);
  padding: var(--d2-space-md) var(--d2-space-lg);
  border-top: 1px solid var(--d2-gray-200);
}

.d2-chat-input input {
  flex: 1;
  border: none;
  font-size: 0.9375rem;
  outline: none;
}

.d2-chat-input button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--d2-coral);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--d2-transition);
}

.d2-chat-input button:hover {
  background: var(--d2-coral-dark);
}

/* ============================================
   Testimonials
   ============================================ */
.d2-testimonials {
  padding: var(--d2-space-4xl) var(--d2-space-xl);
}

.d2-testimonials-inner {
  max-width: var(--d2-max-width);
  margin: 0 auto;
}

.d2-testimonials-inner > h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--d2-gray-700);
  margin-bottom: var(--d2-space-2xl);
  text-align: center;
}

.d2-testimonials-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--d2-space-lg);
}

@media (max-width: 900px) {
  .d2-testimonials-grid {
    grid-template-columns: 1fr;
  }
}

.d2-testimonial-card {
  background: var(--d2-gray-100);
  border-radius: var(--d2-radius-lg);
  padding: var(--d2-space-xl);
}

.d2-testimonial-featured {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

.d2-testimonial-image {
  height: 200px;
  background: linear-gradient(135deg, var(--d2-teal) 0%, var(--d2-coral) 100%);
  border-radius: var(--d2-radius-md);
  margin-bottom: var(--d2-space-lg);
}

.d2-testimonial-card blockquote {
  font-size: 1rem;
  color: var(--d2-gray-600);
  line-height: 1.7;
  margin: 0 0 var(--d2-space-lg);
  flex: 1;
}

.d2-testimonial-featured blockquote {
  font-size: 1.125rem;
}

.d2-testimonial-author strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--d2-gray-700);
}

.d2-testimonial-author span {
  font-size: 0.8125rem;
  color: var(--d2-gray-500);
}

/* ============================================
   Pricing
   ============================================ */
.d2-pricing {
  background: var(--d2-cream);
  padding: var(--d2-space-4xl) var(--d2-space-xl);
}

.d2-pricing-inner {
  max-width: var(--d2-max-width);
  margin: 0 auto;
}

.d2-pricing-header {
  text-align: center;
  margin-bottom: var(--d2-space-2xl);
}

.d2-pricing-header h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--d2-gray-700);
  margin-bottom: var(--d2-space-sm);
}

.d2-pricing-header p {
  font-size: 1.125rem;
  color: var(--d2-gray-500);
}

.d2-pricing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--d2-space-xl);
  max-width: 800px;
  margin: 0 auto var(--d2-space-2xl);
}

@media (max-width: 700px) {
  .d2-pricing-cards {
    grid-template-columns: 1fr;
  }
}

.d2-price-card {
  background: white;
  border-radius: var(--d2-radius-lg);
  padding: var(--d2-space-xl);
  text-align: center;
  position: relative;
}

.d2-price-card-featured {
  box-shadow: var(--d2-shadow-xl);
  border: 2px solid var(--d2-coral);
}

.d2-popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--d2-coral);
  color: white;
  padding: var(--d2-space-xs) var(--d2-space-md);
  border-radius: var(--d2-radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.d2-price-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--d2-gray-700);
  margin-bottom: var(--d2-space-sm);
}

.d2-price {
  font-size: 3rem;
  font-weight: 700;
  color: var(--d2-gray-700);
  line-height: 1;
}

.d2-price-header > p {
  font-size: 0.875rem;
  color: var(--d2-gray-500);
  margin-bottom: var(--d2-space-lg);
}

.d2-price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--d2-space-xl);
  text-align: left;
}

.d2-price-features li {
  padding: var(--d2-space-sm) 0;
  padding-left: var(--d2-space-xl);
  position: relative;
  font-size: 0.9375rem;
  color: var(--d2-gray-600);
}

.d2-price-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--d2-teal);
  font-weight: 600;
}

.d2-savings-callout {
  display: flex;
  align-items: center;
  gap: var(--d2-space-lg);
  background: white;
  border-radius: var(--d2-radius-lg);
  padding: var(--d2-space-lg) var(--d2-space-xl);
  max-width: 600px;
  margin: 0 auto;
}

.d2-savings-icon {
  font-size: 2.5rem;
}

.d2-savings-callout strong {
  display: block;
  font-size: 1.125rem;
  color: var(--d2-gray-700);
  margin-bottom: var(--d2-space-xs);
}

.d2-savings-callout p {
  font-size: 0.9375rem;
  color: var(--d2-gray-500);
  margin: 0;
}

/* ============================================
   CTA Section
   ============================================ */
.d2-cta {
  background: var(--d2-coral);
  padding: var(--d2-space-4xl) var(--d2-space-xl);
}

.d2-cta-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  color: white;
}

.d2-cta h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: var(--d2-space-md);
}

.d2-cta p {
  font-size: 1.125rem;
  opacity: 0.9;
  margin-bottom: var(--d2-space-xl);
}

.d2-cta-actions {
  display: flex;
  gap: var(--d2-space-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   Footer
   ============================================ */
.d2-footer {
  background: var(--d2-gray-100);
  padding: var(--d2-space-4xl) var(--d2-space-xl);
}

.d2-footer-inner {
  max-width: var(--d2-max-width);
  margin: 0 auto;
}

.d2-footer-main {
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: var(--d2-space-3xl);
  margin-bottom: var(--d2-space-2xl);
}

@media (max-width: 700px) {
  .d2-footer-main {
    grid-template-columns: 1fr;
  }
}

.d2-footer-brand .d2-logo {
  margin-bottom: var(--d2-space-md);
}

.d2-footer-brand p {
  font-size: 0.9375rem;
  color: var(--d2-gray-500);
  line-height: 1.6;
}

.d2-footer-links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--d2-space-xl);
}

@media (max-width: 500px) {
  .d2-footer-links-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.d2-footer-col h4 {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--d2-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--d2-space-md);
}

.d2-footer-col a {
  display: block;
  color: var(--d2-gray-500);
  text-decoration: none;
  font-size: 0.9375rem;
  padding: var(--d2-space-xs) 0;
  transition: var(--d2-transition);
}

.d2-footer-col a:hover {
  color: var(--d2-gray-700);
}

.d2-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--d2-space-xl);
  border-top: 1px solid var(--d2-gray-200);
}

@media (max-width: 500px) {
  .d2-footer-bottom {
    flex-direction: column;
    gap: var(--d2-space-md);
    text-align: center;
  }
}

.d2-footer-bottom p {
  font-size: 0.875rem;
  color: var(--d2-gray-500);
}

.d2-footer-legal {
  display: flex;
  gap: var(--d2-space-lg);
}

.d2-footer-legal a {
  font-size: 0.875rem;
  color: var(--d2-gray-500);
  text-decoration: none;
  transition: var(--d2-transition);
}

.d2-footer-legal a:hover {
  color: var(--d2-gray-700);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  .d2-nav-links {
    display: none;
  }
}


/* ================================================
   pages/index3.css
   ================================================ */

/*
 * Direction 3: "Revolut Bold"
 * Disruptive fintech aesthetic - dark mode, bold colors, data-driven
 * All classes prefixed with .d3- to avoid conflicts
 */

/* ============================================
   Design Tokens / CSS Custom Properties
   ============================================ */
:root {
  /* Colors - Dark Mode First */
  --d3-bg-primary: #0a0a0f;
  --d3-bg-secondary: #111118;
  --d3-bg-tertiary: #1a1a24;
  --d3-bg-card: #16161f;
  --d3-bg-hover: #1e1e2a;

  /* Accent Colors */
  --d3-accent-primary: #6366f1;    /* Indigo */
  --d3-accent-secondary: #22d3ee;   /* Cyan */
  --d3-accent-green: #10b981;       /* Emerald */
  --d3-accent-red: #ef4444;         /* Red */
  --d3-accent-yellow: #fbbf24;      /* Amber */

  /* Gradients */
  --d3-gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  --d3-gradient-text: linear-gradient(135deg, #f97316 0%, #ef4444 50%, #ec4899 100%);
  --d3-gradient-glow: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.15) 0%, transparent 70%);

  /* Text Colors */
  --d3-text-primary: #ffffff;
  --d3-text-secondary: #a1a1aa;
  --d3-text-tertiary: #71717a;
  --d3-text-muted: #52525b;

  /* Border Colors */
  --d3-border-primary: #27272a;
  --d3-border-secondary: #3f3f46;
  --d3-border-accent: rgba(99, 102, 241, 0.3);

  /* Typography */
  --d3-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --d3-font-mono: 'SF Mono', 'Roboto Mono', 'IBM Plex Mono', monospace;

  /* Font Sizes */
  --d3-text-xs: 0.75rem;
  --d3-text-sm: 0.875rem;
  --d3-text-base: 1rem;
  --d3-text-lg: 1.125rem;
  --d3-text-xl: 1.25rem;
  --d3-text-2xl: 1.5rem;
  --d3-text-3xl: 2rem;
  --d3-text-4xl: 2.5rem;
  --d3-text-5xl: 3.5rem;
  --d3-text-6xl: 4.5rem;

  /* Spacing */
  --d3-space-1: 0.25rem;
  --d3-space-2: 0.5rem;
  --d3-space-3: 0.75rem;
  --d3-space-4: 1rem;
  --d3-space-5: 1.25rem;
  --d3-space-6: 1.5rem;
  --d3-space-8: 2rem;
  --d3-space-10: 2.5rem;
  --d3-space-12: 3rem;
  --d3-space-16: 4rem;
  --d3-space-20: 5rem;
  --d3-space-24: 6rem;

  /* Border Radius */
  --d3-radius-sm: 0.375rem;
  --d3-radius-md: 0.5rem;
  --d3-radius-lg: 0.75rem;
  --d3-radius-xl: 1rem;
  --d3-radius-2xl: 1.5rem;
  --d3-radius-full: 9999px;

  /* Effects */
  --d3-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --d3-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --d3-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --d3-shadow-glow: 0 0 40px rgba(99, 102, 241, 0.3);

  /* Transitions */
  --d3-transition-fast: 0.15s ease;
  --d3-transition-base: 0.2s ease;
  --d3-transition-slow: 0.3s ease;
}

/* ============================================
   Base / Page Container
   ============================================ */
.d3-page {
  font-family: var(--d3-font-sans);
  background: var(--d3-bg-primary);
  color: var(--d3-text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.d3-page *,
.d3-page *::before,
.d3-page *::after {
  box-sizing: border-box;
}

/* ============================================
   Navigation
   ============================================ */
.d3-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--d3-space-4) var(--d3-space-6);
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--d3-border-primary);
}

.d3-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.d3-logo {
  display: flex;
  align-items: center;
  gap: var(--d3-space-2);
  text-decoration: none;
  color: var(--d3-text-primary);
  font-weight: 700;
  font-size: var(--d3-text-xl);
}

.d3-logo-mark {
  width: 36px;
  height: 36px;
  background: var(--d3-gradient-primary);
  border-radius: var(--d3-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.d3-nav-links {
  display: flex;
  gap: var(--d3-space-8);
}

.d3-nav-links a {
  color: var(--d3-text-secondary);
  text-decoration: none;
  font-size: var(--d3-text-sm);
  font-weight: 500;
  transition: color var(--d3-transition-fast);
}

.d3-nav-links a:hover {
  color: var(--d3-text-primary);
}

.d3-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--d3-space-3);
}

/* ============================================
   Buttons
   ============================================ */
.d3-btn-ghost {
  padding: var(--d3-space-2) var(--d3-space-4);
  color: var(--d3-text-secondary);
  text-decoration: none;
  font-size: var(--d3-text-sm);
  font-weight: 500;
  border-radius: var(--d3-radius-md);
  transition: all var(--d3-transition-fast);
}

.d3-btn-ghost:hover {
  color: var(--d3-text-primary);
  background: var(--d3-bg-hover);
}

.d3-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--d3-space-2);
  padding: var(--d3-space-3) var(--d3-space-5);
  background: var(--d3-gradient-primary);
  color: white;
  text-decoration: none;
  font-size: var(--d3-text-sm);
  font-weight: 600;
  border-radius: var(--d3-radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--d3-transition-fast);
  box-shadow: var(--d3-shadow-sm);
}

.d3-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--d3-shadow-glow);
}

.d3-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--d3-space-2);
  padding: var(--d3-space-3) var(--d3-space-5);
  background: transparent;
  color: var(--d3-text-primary);
  text-decoration: none;
  font-size: var(--d3-text-sm);
  font-weight: 600;
  border-radius: var(--d3-radius-md);
  border: 1px solid var(--d3-border-secondary);
  cursor: pointer;
  transition: all var(--d3-transition-fast);
}

.d3-btn-outline:hover {
  border-color: var(--d3-text-secondary);
  background: var(--d3-bg-hover);
}

.d3-btn-lg {
  padding: var(--d3-space-4) var(--d3-space-8);
  font-size: var(--d3-text-base);
}

.d3-btn-xl {
  padding: var(--d3-space-5) var(--d3-space-10);
  font-size: var(--d3-text-lg);
  border-radius: var(--d3-radius-lg);
}

.d3-btn-block {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ============================================
   Hero Section
   ============================================ */
.d3-hero {
  position: relative;
  padding: var(--d3-space-24) var(--d3-space-6);
  padding-top: calc(var(--d3-space-24) + 80px);
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.d3-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

.d3-hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: var(--d3-gradient-glow);
  pointer-events: none;
}

.d3-hero-content {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.d3-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--d3-space-2);
  padding: var(--d3-space-2) var(--d3-space-4);
  background: var(--d3-bg-card);
  border: 1px solid var(--d3-border-primary);
  border-radius: var(--d3-radius-full);
  font-size: var(--d3-text-sm);
  font-weight: 500;
  color: var(--d3-text-secondary);
  margin-bottom: var(--d3-space-6);
}

.d3-pulse {
  width: 8px;
  height: 8px;
  background: var(--d3-accent-green);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  50% { opacity: 0.7; box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

.d3-hero h1 {
  font-size: var(--d3-text-6xl);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 var(--d3-space-6);
  letter-spacing: -0.03em;
}

.d3-gradient-text {
  background: var(--d3-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.d3-hero p {
  font-size: var(--d3-text-xl);
  color: var(--d3-text-secondary);
  margin: 0 0 var(--d3-space-8);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.d3-hero-actions {
  display: flex;
  gap: var(--d3-space-4);
  justify-content: center;
  margin-bottom: var(--d3-space-12);
}

/* Savings Calculator */
.d3-calculator {
  background: var(--d3-bg-card);
  border: 1px solid var(--d3-border-primary);
  border-radius: var(--d3-radius-xl);
  overflow: hidden;
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}

.d3-calc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--d3-space-4) var(--d3-space-5);
  border-bottom: 1px solid var(--d3-border-primary);
  font-size: var(--d3-text-sm);
  font-weight: 500;
  color: var(--d3-text-secondary);
}

.d3-calc-toggle {
  display: flex;
  background: var(--d3-bg-tertiary);
  border-radius: var(--d3-radius-md);
  padding: 2px;
}

.d3-calc-toggle button {
  padding: var(--d3-space-1) var(--d3-space-3);
  border: none;
  background: transparent;
  color: var(--d3-text-tertiary);
  font-size: var(--d3-text-xs);
  font-weight: 500;
  border-radius: var(--d3-radius-sm);
  cursor: pointer;
  transition: all var(--d3-transition-fast);
}

.d3-calc-toggle button.d3-toggle-active {
  background: var(--d3-bg-card);
  color: var(--d3-text-primary);
}

.d3-calc-body {
  padding: var(--d3-space-4) var(--d3-space-5);
}

.d3-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--d3-space-3) 0;
  font-size: var(--d3-text-sm);
  border-bottom: 1px solid var(--d3-border-primary);
}

.d3-calc-row:last-of-type {
  border-bottom: none;
}

.d3-calc-row span {
  color: var(--d3-text-secondary);
}

.d3-calc-row strong {
  font-weight: 600;
  font-family: var(--d3-font-mono);
}

.d3-calc-strikethrough strong {
  color: var(--d3-text-muted);
  text-decoration: line-through;
}

.d3-calc-highlight strong {
  color: var(--d3-accent-green);
}

.d3-calc-savings {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--d3-space-4);
  margin: var(--d3-space-3) calc(var(--d3-space-5) * -1);
  margin-bottom: calc(var(--d3-space-4) * -1);
  background: rgba(16, 185, 129, 0.1);
  border-top: 1px solid rgba(16, 185, 129, 0.2);
}

.d3-calc-savings span {
  font-weight: 600;
  color: var(--d3-accent-green);
}

.d3-calc-savings strong {
  font-size: var(--d3-text-2xl);
  font-weight: 700;
  color: var(--d3-accent-green);
  font-family: var(--d3-font-mono);
}

/* ============================================
   Stats Bar
   ============================================ */
.d3-stats {
  background: var(--d3-bg-secondary);
  border-top: 1px solid var(--d3-border-primary);
  border-bottom: 1px solid var(--d3-border-primary);
  padding: var(--d3-space-8) var(--d3-space-6);
}

.d3-stats-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--d3-space-8);
}

.d3-stat {
  text-align: center;
}

.d3-stat strong {
  display: block;
  font-size: var(--d3-text-3xl);
  font-weight: 700;
  color: var(--d3-text-primary);
  font-family: var(--d3-font-mono);
  margin-bottom: var(--d3-space-1);
}

.d3-stat span {
  font-size: var(--d3-text-sm);
  color: var(--d3-text-tertiary);
}

/* ============================================
   Problem/Solution Section
   ============================================ */
.d3-problem {
  padding: var(--d3-space-24) var(--d3-space-6);
}

.d3-problem-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--d3-space-16);
}

.d3-label {
  display: inline-block;
  padding: var(--d3-space-1) var(--d3-space-3);
  background: rgba(239, 68, 68, 0.1);
  color: var(--d3-accent-red);
  font-size: var(--d3-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--d3-radius-sm);
  margin-bottom: var(--d3-space-4);
}

.d3-label-green {
  background: rgba(16, 185, 129, 0.1);
  color: var(--d3-accent-green);
}

.d3-problem h2,
.d3-solution-content h2 {
  font-size: var(--d3-text-3xl);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--d3-space-8);
  letter-spacing: -0.02em;
}

.d3-problem-list,
.d3-solution-list {
  display: flex;
  flex-direction: column;
  gap: var(--d3-space-6);
}

.d3-problem-item,
.d3-solution-item {
  display: flex;
  gap: var(--d3-space-4);
}

.d3-problem-icon {
  font-size: var(--d3-text-2xl);
  flex-shrink: 0;
}

.d3-solution-icon {
  width: 24px;
  height: 24px;
  background: var(--d3-accent-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--d3-text-sm);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.d3-problem-item strong,
.d3-solution-item strong {
  display: block;
  font-size: var(--d3-text-lg);
  font-weight: 600;
  margin-bottom: var(--d3-space-1);
}

.d3-problem-item p,
.d3-solution-item p {
  margin: 0;
  color: var(--d3-text-secondary);
  font-size: var(--d3-text-base);
  line-height: 1.5;
}

/* ============================================
   Features Grid
   ============================================ */
.d3-features {
  padding: var(--d3-space-24) var(--d3-space-6);
  background: var(--d3-bg-secondary);
}

.d3-features-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.d3-features-header {
  text-align: center;
  margin-bottom: var(--d3-space-16);
}

.d3-features-header h2 {
  font-size: var(--d3-text-4xl);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.02em;
}

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

.d3-feature-card {
  background: var(--d3-bg-card);
  border: 1px solid var(--d3-border-primary);
  border-radius: var(--d3-radius-xl);
  padding: var(--d3-space-6);
  transition: all var(--d3-transition-base);
}

.d3-feature-card:hover {
  border-color: var(--d3-border-accent);
  transform: translateY(-2px);
}

.d3-feature-large {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

.d3-feature-icon {
  font-size: var(--d3-text-3xl);
  margin-bottom: var(--d3-space-4);
}

.d3-feature-card h3 {
  font-size: var(--d3-text-lg);
  font-weight: 600;
  margin: 0 0 var(--d3-space-2);
}

.d3-feature-card p {
  margin: 0;
  font-size: var(--d3-text-sm);
  color: var(--d3-text-secondary);
  line-height: 1.5;
}

.d3-feature-visual {
  flex: 1;
  margin-bottom: var(--d3-space-6);
}

/* AI Demo */
.d3-ai-demo {
  background: var(--d3-bg-tertiary);
  border-radius: var(--d3-radius-lg);
  padding: var(--d3-space-4);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.d3-ai-header {
  display: flex;
  align-items: center;
  gap: var(--d3-space-3);
  margin-bottom: var(--d3-space-4);
}

.d3-ai-avatar {
  width: 40px;
  height: 40px;
  background: var(--d3-gradient-primary);
  border-radius: var(--d3-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: var(--d3-text-lg);
}

.d3-ai-header strong {
  display: block;
  font-size: var(--d3-text-sm);
}

.d3-ai-header span {
  font-size: var(--d3-text-xs);
  color: var(--d3-text-tertiary);
}

.d3-ai-message {
  background: var(--d3-bg-card);
  border: 1px solid var(--d3-border-primary);
  border-radius: var(--d3-radius-lg);
  padding: var(--d3-space-4);
  font-size: var(--d3-text-sm);
  color: var(--d3-text-secondary);
  line-height: 1.6;
  flex: 1;
}

/* ============================================
   Testimonials
   ============================================ */
.d3-proof {
  padding: var(--d3-space-24) var(--d3-space-6);
}

.d3-proof-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.d3-proof-header {
  text-align: center;
  margin-bottom: var(--d3-space-12);
}

.d3-proof-header h2 {
  font-size: var(--d3-text-3xl);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
}

.d3-testimonials-slider {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--d3-space-6);
}

.d3-testimonial {
  background: var(--d3-bg-card);
  border: 1px solid var(--d3-border-primary);
  border-radius: var(--d3-radius-xl);
  padding: var(--d3-space-6);
  display: flex;
  flex-direction: column;
}

.d3-testimonial-content {
  flex: 1;
}

.d3-testimonial-rating {
  color: var(--d3-accent-yellow);
  font-size: var(--d3-text-sm);
  letter-spacing: 2px;
  margin-bottom: var(--d3-space-4);
}

.d3-testimonial blockquote {
  margin: 0;
  font-size: var(--d3-text-base);
  color: var(--d3-text-secondary);
  line-height: 1.6;
}

.d3-testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--d3-space-3);
  margin-top: var(--d3-space-6);
  padding-top: var(--d3-space-4);
  border-top: 1px solid var(--d3-border-primary);
}

.d3-author-avatar {
  width: 40px;
  height: 40px;
  background: var(--d3-bg-tertiary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--d3-text-sm);
  font-weight: 600;
  color: var(--d3-text-secondary);
}

.d3-testimonial-author strong {
  display: block;
  font-size: var(--d3-text-sm);
  font-weight: 600;
}

.d3-testimonial-author span {
  font-size: var(--d3-text-xs);
  color: var(--d3-text-tertiary);
}

/* ============================================
   Pricing Section
   ============================================ */
.d3-pricing {
  padding: var(--d3-space-24) var(--d3-space-6);
  background: var(--d3-bg-secondary);
}

.d3-pricing-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.d3-pricing-header {
  text-align: center;
  margin-bottom: var(--d3-space-12);
}

.d3-pricing-header h2 {
  font-size: var(--d3-text-4xl);
  font-weight: 700;
  margin: 0 0 var(--d3-space-3);
  letter-spacing: -0.02em;
}

.d3-pricing-header p {
  font-size: var(--d3-text-lg);
  color: var(--d3-text-secondary);
  margin: 0;
}

.d3-pricing-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--d3-space-6);
  margin-bottom: var(--d3-space-16);
}

.d3-price-card {
  background: var(--d3-bg-card);
  border: 1px solid var(--d3-border-primary);
  border-radius: var(--d3-radius-xl);
  padding: var(--d3-space-8);
  position: relative;
}

.d3-price-featured {
  border-color: var(--d3-accent-primary);
  box-shadow: var(--d3-shadow-glow);
}

.d3-price-badge {
  position: absolute;
  top: calc(var(--d3-space-4) * -1);
  left: 50%;
  transform: translateX(-50%);
  background: var(--d3-gradient-primary);
  color: white;
  font-size: var(--d3-text-xs);
  font-weight: 600;
  padding: var(--d3-space-1) var(--d3-space-4);
  border-radius: var(--d3-radius-full);
}

.d3-price-card h3 {
  font-size: var(--d3-text-xl);
  font-weight: 600;
  margin: 0 0 var(--d3-space-4);
}

.d3-price-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: var(--d3-space-1);
}

.d3-price-currency {
  font-size: var(--d3-text-2xl);
  font-weight: 600;
  color: var(--d3-text-secondary);
}

.d3-price-value {
  font-size: var(--d3-text-5xl);
  font-weight: 700;
  font-family: var(--d3-font-mono);
  line-height: 1;
}

.d3-price-period {
  font-size: var(--d3-text-sm);
  color: var(--d3-text-tertiary);
  margin: 0 0 var(--d3-space-6);
}

.d3-price-features {
  list-style: none;
  margin: 0 0 var(--d3-space-6);
  padding: 0;
}

.d3-price-features li {
  display: flex;
  align-items: center;
  gap: var(--d3-space-3);
  padding: var(--d3-space-2) 0;
  font-size: var(--d3-text-sm);
  color: var(--d3-text-secondary);
}

.d3-price-features li::before {
  content: "✓";
  color: var(--d3-accent-green);
  font-weight: 700;
}

/* Comparison Table */
.d3-price-comparison {
  background: var(--d3-bg-card);
  border: 1px solid var(--d3-border-primary);
  border-radius: var(--d3-radius-xl);
  padding: var(--d3-space-6);
}

.d3-price-comparison h4 {
  font-size: var(--d3-text-lg);
  font-weight: 600;
  margin: 0 0 var(--d3-space-4);
  text-align: center;
}

.d3-comparison-table {
  display: flex;
  flex-direction: column;
}

.d3-comparison-row {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--d3-space-4);
  padding: var(--d3-space-3) var(--d3-space-4);
  font-size: var(--d3-text-sm);
  border-bottom: 1px solid var(--d3-border-primary);
}

.d3-comparison-row:last-child {
  border-bottom: none;
}

.d3-comparison-header {
  font-weight: 600;
  color: var(--d3-text-tertiary);
  text-transform: uppercase;
  font-size: var(--d3-text-xs);
  letter-spacing: 0.05em;
}

.d3-comparison-row span {
  font-family: var(--d3-font-mono);
}

.d3-text-muted {
  color: var(--d3-text-muted);
  text-decoration: line-through;
}

.d3-text-green {
  color: var(--d3-accent-green);
  font-weight: 600;
}

/* ============================================
   CTA Section
   ============================================ */
.d3-cta {
  padding: var(--d3-space-24) var(--d3-space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.d3-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 400px;
  background: var(--d3-gradient-glow);
  pointer-events: none;
}

.d3-cta-inner {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.d3-cta h2 {
  font-size: var(--d3-text-4xl);
  font-weight: 700;
  margin: 0 0 var(--d3-space-4);
  letter-spacing: -0.02em;
}

.d3-cta p {
  font-size: var(--d3-text-lg);
  color: var(--d3-text-secondary);
  margin: 0 0 var(--d3-space-8);
}

.d3-cta-note {
  font-size: var(--d3-text-sm);
  color: var(--d3-text-tertiary);
  margin-top: var(--d3-space-4) !important;
}

/* ============================================
   Footer
   ============================================ */
.d3-footer {
  background: var(--d3-bg-secondary);
  border-top: 1px solid var(--d3-border-primary);
  padding: var(--d3-space-16) var(--d3-space-6);
}

.d3-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.d3-footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--d3-space-12);
  margin-bottom: var(--d3-space-12);
}

.d3-footer-brand p {
  margin: var(--d3-space-4) 0 0;
  font-size: var(--d3-text-sm);
  color: var(--d3-text-tertiary);
}

.d3-footer-col h4 {
  font-size: var(--d3-text-sm);
  font-weight: 600;
  color: var(--d3-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--d3-space-4);
}

.d3-footer-col a {
  display: block;
  color: var(--d3-text-secondary);
  text-decoration: none;
  font-size: var(--d3-text-sm);
  padding: var(--d3-space-1) 0;
  transition: color var(--d3-transition-fast);
}

.d3-footer-col a:hover {
  color: var(--d3-text-primary);
}

.d3-footer-bottom {
  padding-top: var(--d3-space-8);
  border-top: 1px solid var(--d3-border-primary);
}

.d3-footer-bottom p {
  margin: 0;
  font-size: var(--d3-text-sm);
  color: var(--d3-text-tertiary);
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 1024px) {
  .d3-features-grid {
    grid-template-columns: 1fr 1fr;
  }

  .d3-feature-large {
    grid-column: span 2;
    grid-row: auto;
  }
}

@media (max-width: 900px) {
  .d3-hero h1 {
    font-size: var(--d3-text-5xl);
  }

  .d3-problem-inner {
    grid-template-columns: 1fr;
    gap: var(--d3-space-12);
  }

  .d3-testimonials-slider {
    grid-template-columns: 1fr;
    gap: var(--d3-space-4);
  }

  .d3-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--d3-space-8);
  }

  .d3-footer-brand {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .d3-nav-links {
    display: none;
  }

  .d3-hero h1 {
    font-size: var(--d3-text-4xl);
  }

  .d3-hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .d3-stats-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--d3-space-6);
  }

  .d3-features-grid {
    grid-template-columns: 1fr;
  }

  .d3-feature-large {
    grid-column: auto;
  }

  .d3-pricing-cards {
    grid-template-columns: 1fr;
  }

  .d3-comparison-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--d3-space-2);
  }

  .d3-comparison-row span:nth-child(1),
  .d3-comparison-row span:nth-child(2) {
    grid-column: span 1;
  }

  .d3-comparison-row span:nth-child(3),
  .d3-comparison-row span:nth-child(4) {
    grid-column: span 1;
  }
}

@media (max-width: 500px) {
  .d3-hero {
    padding-top: calc(var(--d3-space-16) + 80px);
    padding-left: var(--d3-space-4);
    padding-right: var(--d3-space-4);
  }

  .d3-hero h1 {
    font-size: var(--d3-text-3xl);
  }

  .d3-hero p {
    font-size: var(--d3-text-base);
  }

  .d3-calc-header {
    flex-direction: column;
    gap: var(--d3-space-3);
    align-items: flex-start;
  }

  .d3-stat strong {
    font-size: var(--d3-text-2xl);
  }

  .d3-problem h2,
  .d3-solution-content h2,
  .d3-features-header h2 {
    font-size: var(--d3-text-2xl);
  }

  .d3-pricing-header h2,
  .d3-cta h2 {
    font-size: var(--d3-text-2xl);
  }

  .d3-footer-grid {
    grid-template-columns: 1fr;
  }

  .d3-footer-brand {
    grid-column: auto;
  }
}


/* ================================================
   pages/index4.css
   ================================================ */

/*
 * Reasy Official Brand Design
 * Based on Reasy Style Guide 2025
 * Typography: Gilroy | Colors: Brand palette
 */

/* ============================================
   Brand Design Tokens (from Style Guide)
   ============================================ */
:root {
  /* Primary Colors */
  --reasy-blue: #4F7DDD;
  --reasy-blue-dark: #3D6BC7;
  --reasy-blue-light: #6B91E5;

  /* Secondary Colors */
  --reasy-orange: #FF785D;
  --reasy-orange-dark: #E5624A;
  --reasy-green: #3DD6A0;
  --reasy-green-dark: #2BC08A;

  /* Neutral Colors */
  --reasy-beige: #F0E9DF;
  --reasy-beige-light: #F7F3ED;
  --reasy-dark: #212650;
  --reasy-dark-light: #2D3366;

  /* Additional UI Colors */
  --reasy-peach: #FFCBB8;
  --reasy-yellow: #FFC947;
  --reasy-white: #FFFFFF;
  --reasy-gray-100: #F8F9FA;
  --reasy-gray-200: #E9ECEF;
  --reasy-gray-300: #DEE2E6;
  --reasy-gray-500: #6C757D;
  --reasy-gray-700: #495057;

  /* Typography - Gilroy fallback to system fonts */
  --reasy-font: 'Gilroy', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;

  /* Font Sizes */
  --reasy-text-xs: 0.75rem;
  --reasy-text-sm: 0.875rem;
  --reasy-text-base: 1rem;
  --reasy-text-lg: 1.125rem;
  --reasy-text-xl: 1.25rem;
  --reasy-text-2xl: 1.5rem;
  --reasy-text-3xl: 2rem;
  --reasy-text-4xl: 2.5rem;
  --reasy-text-5xl: 3.5rem;
  --reasy-text-6xl: 4.5rem;

  /* Spacing */
  --reasy-space-1: 0.25rem;
  --reasy-space-2: 0.5rem;
  --reasy-space-3: 0.75rem;
  --reasy-space-4: 1rem;
  --reasy-space-5: 1.25rem;
  --reasy-space-6: 1.5rem;
  --reasy-space-8: 2rem;
  --reasy-space-10: 2.5rem;
  --reasy-space-12: 3rem;
  --reasy-space-16: 4rem;
  --reasy-space-20: 5rem;
  --reasy-space-24: 6rem;

  /* Border Radius - rounded, friendly */
  --reasy-radius-sm: 0.5rem;
  --reasy-radius-md: 0.75rem;
  --reasy-radius-lg: 1rem;
  --reasy-radius-xl: 1.5rem;
  --reasy-radius-2xl: 2rem;
  --reasy-radius-full: 9999px;

  /* Shadows */
  --reasy-shadow-sm: 0 1px 2px rgba(33, 38, 80, 0.05);
  --reasy-shadow-md: 0 4px 12px rgba(33, 38, 80, 0.08);
  --reasy-shadow-lg: 0 8px 24px rgba(33, 38, 80, 0.12);
  --reasy-shadow-xl: 0 16px 48px rgba(33, 38, 80, 0.16);

  /* Transitions */
  --reasy-transition-fast: 0.15s ease;
  --reasy-transition-base: 0.2s ease;
  --reasy-transition-slow: 0.3s ease;
}

/* ============================================
   Base Styles
   ============================================ */
.reasy-page {
  font-family: var(--reasy-font);
  background: var(--reasy-beige);
  color: var(--reasy-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.reasy-page *,
.reasy-page *::before,
.reasy-page *::after {
  box-sizing: border-box;
}

/* ============================================
   Navigation
   ============================================ */
.reasy-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--reasy-space-4) var(--reasy-space-6);
  background: rgba(240, 233, 223, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(33, 38, 80, 0.05);
}

.reasy-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reasy-logo {
  height: 32px;
  width: auto;
}

.reasy-nav-links {
  display: flex;
  gap: var(--reasy-space-8);
}

.reasy-nav-links a {
  color: var(--reasy-dark);
  text-decoration: none;
  font-size: var(--reasy-text-sm);
  font-weight: 500;
  opacity: 0.8;
  transition: opacity var(--reasy-transition-fast);
}

.reasy-nav-links a:hover {
  opacity: 1;
}

.reasy-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--reasy-space-3);
}

/* ============================================
   Buttons
   ============================================ */
.reasy-btn-ghost {
  padding: var(--reasy-space-2) var(--reasy-space-4);
  color: var(--reasy-dark);
  text-decoration: none;
  font-size: var(--reasy-text-sm);
  font-weight: 500;
  border-radius: var(--reasy-radius-full);
  transition: all var(--reasy-transition-fast);
}

.reasy-btn-ghost:hover {
  background: rgba(33, 38, 80, 0.05);
}

.reasy-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--reasy-space-2);
  padding: var(--reasy-space-3) var(--reasy-space-6);
  background: var(--reasy-blue);
  color: var(--reasy-white);
  text-decoration: none;
  font-size: var(--reasy-text-sm);
  font-weight: 600;
  border-radius: var(--reasy-radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--reasy-transition-fast);
  box-shadow: var(--reasy-shadow-sm);
}

.reasy-btn-primary:hover {
  background: var(--reasy-blue-dark);
  transform: translateY(-1px);
  box-shadow: var(--reasy-shadow-md);
}

.reasy-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--reasy-space-2);
  padding: var(--reasy-space-3) var(--reasy-space-6);
  background: var(--reasy-white);
  color: var(--reasy-dark);
  text-decoration: none;
  font-size: var(--reasy-text-sm);
  font-weight: 600;
  border-radius: var(--reasy-radius-full);
  border: 2px solid var(--reasy-dark);
  cursor: pointer;
  transition: all var(--reasy-transition-fast);
}

.reasy-btn-secondary:hover {
  background: var(--reasy-dark);
  color: var(--reasy-white);
}

.reasy-btn-lg {
  padding: var(--reasy-space-4) var(--reasy-space-8);
  font-size: var(--reasy-text-base);
}

.reasy-btn-xl {
  padding: var(--reasy-space-5) var(--reasy-space-10);
  font-size: var(--reasy-text-lg);
}

.reasy-btn-block {
  width: 100%;
}

/* ============================================
   Hero Section
   ============================================ */
.reasy-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--reasy-space-16);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--reasy-space-24) var(--reasy-space-6);
  padding-top: calc(var(--reasy-space-24) + 80px);
  min-height: 100vh;
  align-items: center;
}

.reasy-hero-content h1 {
  font-size: var(--reasy-text-6xl);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 var(--reasy-space-6);
  letter-spacing: -0.03em;
  color: var(--reasy-dark);
}

.reasy-text-orange {
  color: var(--reasy-orange);
}

.reasy-text-beige {
  color: var(--reasy-beige);
}

.reasy-hero-subtitle {
  font-size: var(--reasy-text-xl);
  color: var(--reasy-gray-700);
  margin: 0 0 var(--reasy-space-8);
  max-width: 480px;
  line-height: 1.5;
}

.reasy-hero-actions {
  display: flex;
  gap: var(--reasy-space-4);
  margin-bottom: var(--reasy-space-10);
}

.reasy-hero-trust {
  display: flex;
  align-items: center;
  gap: var(--reasy-space-4);
}

.reasy-trust-avatars {
  display: flex;
}

.reasy-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--reasy-blue);
  color: var(--reasy-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--reasy-text-sm);
  font-weight: 600;
  border: 3px solid var(--reasy-beige);
  margin-left: -12px;
}

.reasy-avatar:first-child {
  margin-left: 0;
}

.reasy-avatar:nth-child(2) {
  background: var(--reasy-orange);
}

.reasy-avatar:nth-child(3) {
  background: var(--reasy-green);
}

.reasy-avatar:nth-child(4) {
  background: var(--reasy-dark);
}

.reasy-hero-trust span {
  font-size: var(--reasy-text-sm);
  color: var(--reasy-gray-500);
}

.reasy-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.reasy-hero-card {
  background: var(--reasy-blue);
  border-radius: var(--reasy-radius-2xl);
  padding: var(--reasy-space-12);
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}

/* The distinctive "a" graphic from the brand */
.reasy-a-graphic {
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 90%;
  height: 90%;
  background: var(--reasy-orange);
  border-radius: 50%;
  clip-path: polygon(
    0% 100%,
    0% 30%,
    30% 0%,
    70% 0%,
    100% 30%,
    100% 100%,
    70% 100%,
    70% 50%,
    50% 50%,
    50% 70%,
    30% 70%,
    30% 50%,
    50% 50%,
    70% 50%,
    70% 100%
  );
}

/* Simplified "a" graphic using circles */
.reasy-a-graphic {
  position: absolute;
  bottom: -15%;
  left: -5%;
  width: 80%;
  height: 80%;
}

.reasy-a-graphic::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--reasy-orange);
  border-radius: 50%;
}

.reasy-a-graphic::after {
  content: '';
  position: absolute;
  width: 40%;
  height: 40%;
  top: 30%;
  left: 30%;
  background: var(--reasy-blue);
  border-radius: 50%;
}

/* ============================================
   Value Prop Pills
   ============================================ */
.reasy-pills {
  padding: var(--reasy-space-8) var(--reasy-space-6);
  background: var(--reasy-dark);
  overflow: hidden;
}

.reasy-pills-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--reasy-space-4);
  justify-content: center;
  align-items: center;
}

.reasy-pill {
  padding: var(--reasy-space-3) var(--reasy-space-6);
  border-radius: var(--reasy-radius-full);
  font-size: var(--reasy-text-lg);
  font-weight: 500;
  white-space: nowrap;
}

.reasy-pill-blue {
  background: var(--reasy-blue);
  color: var(--reasy-white);
}

.reasy-pill-orange {
  background: var(--reasy-orange);
  color: var(--reasy-white);
}

.reasy-pill-peach {
  background: var(--reasy-peach);
  color: var(--reasy-dark);
}

.reasy-pill-beige {
  background: var(--reasy-beige);
  color: var(--reasy-dark);
}

.reasy-pill-outline {
  background: transparent;
  color: var(--reasy-white);
  border: 2px solid var(--reasy-white);
}

.reasy-pill-gradient {
  background: linear-gradient(135deg, var(--reasy-orange) 0%, var(--reasy-blue) 100%);
  color: var(--reasy-white);
}

.reasy-pill-icon,
.reasy-pill-icon-heart,
.reasy-pill-icon-chart {
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--reasy-beige);
  color: var(--reasy-dark);
  font-size: var(--reasy-text-xl);
}

.reasy-pill-icon-heart::before {
  content: '';
  width: 24px;
  height: 24px;
  background: var(--reasy-blue);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.reasy-pill-icon-chart::before {
  content: '';
  width: 24px;
  height: 24px;
  background: var(--reasy-dark);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ============================================
   Sections
   ============================================ */
.reasy-section {
  padding: var(--reasy-space-24) var(--reasy-space-6);
}

.reasy-section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.reasy-section-beige {
  background: var(--reasy-beige);
}

.reasy-section-dark {
  background: var(--reasy-dark);
  color: var(--reasy-white);
}

.reasy-section-blue {
  background: var(--reasy-orange);
  color: var(--reasy-white);
}

.reasy-label {
  display: inline-block;
  padding: var(--reasy-space-1) var(--reasy-space-3);
  background: rgba(33, 38, 80, 0.1);
  color: var(--reasy-dark);
  font-size: var(--reasy-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--reasy-radius-sm);
  margin-bottom: var(--reasy-space-4);
}

.reasy-label-blue {
  background: rgba(79, 125, 221, 0.15);
  color: var(--reasy-blue);
}

.reasy-label-light {
  background: rgba(255, 255, 255, 0.2);
  color: var(--reasy-white);
}

.reasy-section-title {
  font-size: var(--reasy-text-4xl);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--reasy-space-12);
  letter-spacing: -0.02em;
}

/* ============================================
   Two Column Layout
   ============================================ */
.reasy-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--reasy-space-16);
  align-items: center;
}

.reasy-col h2 {
  font-size: var(--reasy-text-3xl);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--reasy-space-6);
}

.reasy-col p {
  font-size: var(--reasy-text-lg);
  opacity: 0.85;
  line-height: 1.6;
  margin: 0;
}

.reasy-problem-stats {
  display: flex;
  flex-direction: column;
  gap: var(--reasy-space-4);
}

.reasy-stat-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--reasy-radius-lg);
  padding: var(--reasy-space-6);
}

.reasy-stat-number {
  display: block;
  font-size: var(--reasy-text-4xl);
  font-weight: 700;
  color: var(--reasy-orange);
  margin-bottom: var(--reasy-space-2);
}

.reasy-stat-label {
  font-size: var(--reasy-text-base);
  opacity: 0.8;
}

/* ============================================
   Features Grid
   ============================================ */
.reasy-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--reasy-space-6);
}

.reasy-feature-card {
  background: var(--reasy-white);
  border-radius: var(--reasy-radius-xl);
  padding: var(--reasy-space-8);
  box-shadow: var(--reasy-shadow-sm);
  transition: all var(--reasy-transition-base);
}

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

.reasy-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--reasy-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--reasy-space-5);
}

.reasy-feature-icon-blue {
  background: rgba(79, 125, 221, 0.1);
  color: var(--reasy-blue);
}

.reasy-feature-icon-orange {
  background: rgba(255, 120, 93, 0.1);
  color: var(--reasy-orange);
}

.reasy-feature-icon-green {
  background: rgba(61, 214, 160, 0.1);
  color: var(--reasy-green);
}

.reasy-feature-card h3 {
  font-size: var(--reasy-text-xl);
  font-weight: 600;
  margin: 0 0 var(--reasy-space-3);
  color: var(--reasy-dark);
}

.reasy-feature-card p {
  margin: 0;
  color: var(--reasy-gray-500);
  line-height: 1.5;
}

/* ============================================
   Steps / How It Works
   ============================================ */
.reasy-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--reasy-space-4);
}

.reasy-step {
  flex: 1;
  max-width: 280px;
  text-align: center;
}

.reasy-step-number {
  width: 64px;
  height: 64px;
  background: var(--reasy-blue);
  color: var(--reasy-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--reasy-text-2xl);
  font-weight: 700;
  margin: 0 auto var(--reasy-space-5);
}

.reasy-step h3 {
  font-size: var(--reasy-text-xl);
  font-weight: 600;
  margin: 0 0 var(--reasy-space-3);
}

.reasy-step p {
  margin: 0;
  color: var(--reasy-gray-500);
  font-size: var(--reasy-text-base);
}

.reasy-step-connector {
  width: 80px;
  height: 2px;
  background: var(--reasy-gray-300);
  margin-top: 32px;
  flex-shrink: 0;
}

/* ============================================
   Savings Section
   ============================================ */
.reasy-section-blue .reasy-section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--reasy-space-16);
  align-items: center;
}

.reasy-savings-intro {
  font-size: var(--reasy-text-lg);
  margin: 0 0 var(--reasy-space-2);
  opacity: 0.9;
}

.reasy-savings-headline {
  font-size: var(--reasy-text-5xl);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 var(--reasy-space-8);
}

.reasy-savings-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--reasy-space-3);
}

.reasy-savings-pill {
  padding: var(--reasy-space-2) var(--reasy-space-4);
  border-radius: var(--reasy-radius-full);
  font-size: var(--reasy-text-sm);
  font-weight: 500;
}

.reasy-savings-pill-green {
  background: var(--reasy-green);
  color: var(--reasy-dark);
}

.reasy-savings-pill-blue {
  background: var(--reasy-blue);
  color: var(--reasy-white);
}

.reasy-savings-pill-yellow {
  background: var(--reasy-yellow);
  color: var(--reasy-dark);
}

.reasy-savings-calculator {
  background: var(--reasy-white);
  border-radius: var(--reasy-radius-xl);
  padding: var(--reasy-space-8);
  color: var(--reasy-dark);
}

.reasy-savings-calculator h4 {
  font-size: var(--reasy-text-lg);
  font-weight: 600;
  margin: 0 0 var(--reasy-space-6);
}

.reasy-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--reasy-space-3) 0;
  border-bottom: 1px solid var(--reasy-gray-200);
  font-size: var(--reasy-text-base);
}

.reasy-calc-row span {
  color: var(--reasy-gray-500);
}

.reasy-calc-row strong {
  font-weight: 600;
}

.reasy-calc-old strong {
  color: var(--reasy-gray-500);
  text-decoration: line-through;
}

.reasy-calc-new strong {
  color: var(--reasy-green);
}

.reasy-calc-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--reasy-space-4) 0;
  margin-top: var(--reasy-space-2);
  font-size: var(--reasy-text-lg);
}

.reasy-calc-total span {
  font-weight: 600;
  color: var(--reasy-dark);
}

.reasy-calc-total strong {
  font-size: var(--reasy-text-2xl);
  font-weight: 700;
  color: var(--reasy-green);
}

/* ============================================
   Testimonials
   ============================================ */
.reasy-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--reasy-space-6);
}

.reasy-testimonial {
  background: var(--reasy-white);
  border-radius: var(--reasy-radius-xl);
  padding: var(--reasy-space-6);
  display: flex;
  flex-direction: column;
}

.reasy-testimonial-content {
  flex: 1;
  margin-bottom: var(--reasy-space-6);
}

.reasy-testimonial-content p {
  margin: 0;
  font-size: var(--reasy-text-base);
  color: var(--reasy-gray-700);
  line-height: 1.6;
  font-style: italic;
}

.reasy-testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--reasy-space-3);
  padding-top: var(--reasy-space-4);
  border-top: 1px solid var(--reasy-gray-200);
}

.reasy-author-avatar {
  width: 44px;
  height: 44px;
  background: var(--reasy-blue);
  color: var(--reasy-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--reasy-text-sm);
  font-weight: 600;
}

.reasy-testimonial:nth-child(2) .reasy-author-avatar {
  background: var(--reasy-orange);
}

.reasy-testimonial:nth-child(3) .reasy-author-avatar {
  background: var(--reasy-green);
}

.reasy-testimonial-author strong {
  display: block;
  font-size: var(--reasy-text-sm);
  font-weight: 600;
}

.reasy-testimonial-author span {
  font-size: var(--reasy-text-xs);
  color: var(--reasy-gray-500);
}

/* ============================================
   Pricing Cards
   ============================================ */
.reasy-pricing-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--reasy-space-6);
  max-width: 800px;
  margin: 0 auto;
}

.reasy-price-card {
  background: var(--reasy-white);
  border-radius: var(--reasy-radius-xl);
  padding: var(--reasy-space-8);
  text-align: center;
  position: relative;
  border: 2px solid transparent;
}

.reasy-price-card-featured {
  border-color: var(--reasy-blue);
  box-shadow: var(--reasy-shadow-lg);
}

.reasy-price-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--reasy-blue);
  color: var(--reasy-white);
  font-size: var(--reasy-text-xs);
  font-weight: 600;
  padding: var(--reasy-space-1) var(--reasy-space-4);
  border-radius: var(--reasy-radius-full);
}

.reasy-price-card h3 {
  font-size: var(--reasy-text-xl);
  font-weight: 600;
  margin: 0 0 var(--reasy-space-4);
}

.reasy-price {
  margin-bottom: var(--reasy-space-4);
}

.reasy-price-amount {
  font-size: var(--reasy-text-5xl);
  font-weight: 700;
  color: var(--reasy-dark);
}

.reasy-price-note {
  display: block;
  font-size: var(--reasy-text-sm);
  color: var(--reasy-gray-500);
  margin-top: var(--reasy-space-1);
}

.reasy-price-card p {
  font-size: var(--reasy-text-base);
  color: var(--reasy-gray-500);
  margin: 0 0 var(--reasy-space-6);
}

/* ============================================
   Final CTA
   ============================================ */
.reasy-cta {
  background: var(--reasy-blue);
  padding: var(--reasy-space-24) var(--reasy-space-6);
  overflow: hidden;
}

.reasy-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--reasy-space-12);
  align-items: center;
}

.reasy-cta-graphic {
  position: relative;
  height: 300px;
}

.reasy-a-graphic-large {
  position: absolute;
  width: 280px;
  height: 280px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.reasy-a-graphic-large::before {
  background: var(--reasy-orange);
}

.reasy-a-graphic-large::after {
  background: var(--reasy-blue);
}

.reasy-cta-content {
  color: var(--reasy-white);
}

.reasy-cta-content h2 {
  font-size: var(--reasy-text-5xl);
  font-weight: 700;
  margin: 0 0 var(--reasy-space-4);
  line-height: 1.1;
}

.reasy-cta-content p {
  font-size: var(--reasy-text-xl);
  opacity: 0.9;
  margin: 0 0 var(--reasy-space-8);
  max-width: 500px;
}

.reasy-cta .reasy-btn-primary {
  background: var(--reasy-white);
  color: var(--reasy-blue);
}

.reasy-cta .reasy-btn-primary:hover {
  background: var(--reasy-beige);
}

/* ============================================
   Footer
   ============================================ */
.reasy-footer {
  background: var(--reasy-dark);
  color: var(--reasy-white);
  padding: var(--reasy-space-16) var(--reasy-space-6);
}

.reasy-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.reasy-footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--reasy-space-12);
  margin-bottom: var(--reasy-space-12);
}

.reasy-footer-logo {
  height: 28px;
  width: auto;
  margin-bottom: var(--reasy-space-4);
}

.reasy-footer-brand p {
  font-size: var(--reasy-text-sm);
  opacity: 0.7;
  margin: 0;
  max-width: 280px;
}

.reasy-footer-col h4 {
  font-size: var(--reasy-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.5;
  margin: 0 0 var(--reasy-space-4);
}

.reasy-footer-col a {
  display: block;
  color: var(--reasy-white);
  text-decoration: none;
  font-size: var(--reasy-text-sm);
  padding: var(--reasy-space-1) 0;
  opacity: 0.8;
  transition: opacity var(--reasy-transition-fast);
}

.reasy-footer-col a:hover {
  opacity: 1;
}

.reasy-footer-bottom {
  padding-top: var(--reasy-space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.reasy-footer-bottom p {
  margin: 0;
  font-size: var(--reasy-text-sm);
  opacity: 0.5;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 1024px) {
  .reasy-hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--reasy-space-12);
  }

  .reasy-hero-content h1 {
    font-size: var(--reasy-text-5xl);
  }

  .reasy-hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .reasy-hero-actions {
    justify-content: center;
  }

  .reasy-hero-trust {
    justify-content: center;
  }

  .reasy-hero-card {
    max-width: 360px;
    margin: 0 auto;
  }

  .reasy-section-blue .reasy-section-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .reasy-savings-headline {
    font-size: var(--reasy-text-4xl);
  }

  .reasy-savings-pills {
    justify-content: center;
  }

  .reasy-cta-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .reasy-cta-graphic {
    order: 2;
    height: 200px;
  }

  .reasy-cta-content {
    order: 1;
  }

  .reasy-cta-content p {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 900px) {
  .reasy-two-col {
    grid-template-columns: 1fr;
    gap: var(--reasy-space-10);
  }

  .reasy-features-grid {
    grid-template-columns: 1fr;
  }

  .reasy-testimonials {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  .reasy-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--reasy-space-8);
  }

  .reasy-footer-brand {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .reasy-nav-links {
    display: none;
  }

  .reasy-hero-content h1 {
    font-size: var(--reasy-text-4xl);
  }

  .reasy-hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .reasy-hero-trust {
    flex-direction: column;
    gap: var(--reasy-space-3);
  }

  .reasy-section-title {
    font-size: var(--reasy-text-3xl);
  }

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

  .reasy-step-connector {
    width: 2px;
    height: 40px;
    margin: 0;
  }

  .reasy-pricing-cards {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .reasy-pills-inner {
    gap: var(--reasy-space-2);
  }

  .reasy-pill {
    padding: var(--reasy-space-2) var(--reasy-space-4);
    font-size: var(--reasy-text-base);
  }
}

@media (max-width: 500px) {
  .reasy-hero {
    padding-top: calc(var(--reasy-space-16) + 70px);
    padding-left: var(--reasy-space-4);
    padding-right: var(--reasy-space-4);
  }

  .reasy-hero-content h1 {
    font-size: var(--reasy-text-3xl);
  }

  .reasy-section {
    padding: var(--reasy-space-16) var(--reasy-space-4);
  }

  .reasy-section-title {
    font-size: var(--reasy-text-2xl);
  }

  .reasy-savings-headline {
    font-size: var(--reasy-text-3xl);
  }

  .reasy-cta-content h2 {
    font-size: var(--reasy-text-3xl);
  }

  .reasy-footer-grid {
    grid-template-columns: 1fr;
  }

  .reasy-footer-brand {
    grid-column: auto;
  }
}


/* ================================================
   pages/index5.css
   ================================================ */

/*
 * Reasy Homepage - Emotional, Trust-focused Design
 * Target audience: 35+ home buyers/sellers
 * Priority: Readability, trust, emotional connection
 */

/* ============================================
   Design Tokens
   ============================================ */
:root {
  /* Brand Colors */
  --r5-blue: #4F7DDD;
  --r5-blue-dark: #3D6BC7;
  --r5-blue-light: #6B91E5;
  --r5-blue-pale: #EEF3FC;

  --r5-orange: #FF785D;
  --r5-orange-dark: #E5624A;
  --r5-orange-light: #FF9580;
  --r5-orange-pale: #FFF0ED;

  --r5-green: #3DD6A0;
  --r5-green-dark: #2BC08A;

  --r5-beige: #F0E9DF;
  --r5-beige-light: #F7F3ED;
  --r5-beige-dark: #E5DCD0;

  --r5-dark: #212650;
  --r5-dark-light: #2D3366;

  /* Neutral */
  --r5-white: #FFFFFF;
  --r5-gray-50: #FAFAFA;
  --r5-gray-100: #F5F5F5;
  --r5-gray-200: #E5E5E5;
  --r5-gray-300: #D4D4D4;
  --r5-gray-400: #A3A3A3;
  --r5-gray-500: #737373;
  --r5-gray-600: #525252;
  --r5-gray-700: #404040;
  --r5-gray-800: #262626;
  --r5-gray-900: #171717;

  /* Typography - LARGER for 35+ audience */
  --r5-font: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --r5-text-sm: 1rem;        /* 16px - minimum readable */
  --r5-text-base: 1.125rem;  /* 18px - body text */
  --r5-text-lg: 1.25rem;     /* 20px */
  --r5-text-xl: 1.5rem;      /* 24px */
  --r5-text-2xl: 1.875rem;   /* 30px */
  --r5-text-3xl: 2.25rem;    /* 36px */
  --r5-text-4xl: 3rem;       /* 48px */
  --r5-text-5xl: 3.75rem;    /* 60px */
  --r5-text-6xl: 4.5rem;     /* 72px */

  /* Spacing */
  --r5-space-1: 0.25rem;
  --r5-space-2: 0.5rem;
  --r5-space-3: 0.75rem;
  --r5-space-4: 1rem;
  --r5-space-5: 1.25rem;
  --r5-space-6: 1.5rem;
  --r5-space-8: 2rem;
  --r5-space-10: 2.5rem;
  --r5-space-12: 3rem;
  --r5-space-16: 4rem;
  --r5-space-20: 5rem;
  --r5-space-24: 6rem;
  --r5-space-32: 8rem;

  /* Border Radius */
  --r5-radius-sm: 0.5rem;
  --r5-radius-md: 0.75rem;
  --r5-radius-lg: 1rem;
  --r5-radius-xl: 1.5rem;
  --r5-radius-2xl: 2rem;
  --r5-radius-full: 9999px;

  /* Shadows - softer, more premium */
  --r5-shadow-sm: 0 1px 3px rgba(33, 38, 80, 0.04), 0 1px 2px rgba(33, 38, 80, 0.06);
  --r5-shadow-md: 0 4px 6px rgba(33, 38, 80, 0.04), 0 2px 4px rgba(33, 38, 80, 0.06);
  --r5-shadow-lg: 0 10px 25px rgba(33, 38, 80, 0.08), 0 4px 10px rgba(33, 38, 80, 0.04);
  --r5-shadow-xl: 0 20px 40px rgba(33, 38, 80, 0.1), 0 8px 16px rgba(33, 38, 80, 0.06);
  --r5-shadow-2xl: 0 25px 50px rgba(33, 38, 80, 0.15);

  /* Transitions */
  --r5-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --r5-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --r5-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --r5-transition-fast: 150ms var(--r5-ease);
  --r5-transition-base: 200ms var(--r5-ease);
  --r5-transition-slow: 300ms var(--r5-ease);
}

/* ============================================
   Base Styles
   ============================================ */
.r5-page {
  font-family: var(--r5-font);
  font-size: var(--r5-text-base);
  line-height: 1.7;
  color: var(--r5-gray-700);
  background: var(--r5-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.r5-page *,
.r5-page *::before,
.r5-page *::after {
  box-sizing: border-box;
}

.r5-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--r5-space-6);
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--r5-dark);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--r5-text-5xl); }
h2 { font-size: var(--r5-text-4xl); }
h3 { font-size: var(--r5-text-2xl); }
h4 { font-size: var(--r5-text-xl); }

.r5-eyebrow {
  display: inline-block;
  font-size: var(--r5-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--r5-blue);
  margin-bottom: var(--r5-space-4);
}

.r5-eyebrow-orange {
  color: var(--r5-orange);
}

.r5-lead {
  font-size: var(--r5-text-lg);
  color: var(--r5-gray-600);
  line-height: 1.7;
}

/* ============================================
   Navigation
   ============================================ */
.r5-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--r5-space-4) 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(33, 38, 80, 0.06);
  transition: all var(--r5-transition-base);
}

.r5-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--r5-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.r5-logo {
  height: 36px;
  width: auto;
}

.r5-nav-links {
  display: flex;
  gap: var(--r5-space-8);
}

.r5-nav-links a {
  font-size: var(--r5-text-sm);
  font-weight: 500;
  color: var(--r5-gray-600);
  text-decoration: none;
  transition: color var(--r5-transition-fast);
}

.r5-nav-links a:hover {
  color: var(--r5-dark);
}

.r5-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--r5-space-4);
}

.r5-link {
  font-size: var(--r5-text-sm);
  font-weight: 500;
  color: var(--r5-gray-600);
  text-decoration: none;
  transition: color var(--r5-transition-fast);
}

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

.r5-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--r5-space-2);
  background: none;
  border: none;
  cursor: pointer;
}

.r5-nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--r5-dark);
  border-radius: 2px;
  transition: all var(--r5-transition-base);
}

/* Nav scrolled state */
.r5-nav-scrolled {
  box-shadow: var(--r5-shadow-md);
}

/* Mobile nav open state */
.r5-nav-toggle-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.r5-nav-toggle-open span:nth-child(2) {
  opacity: 0;
}

.r5-nav-toggle-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
  .r5-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--r5-white);
    flex-direction: column;
    padding: var(--r5-space-4) var(--r5-space-6);
    box-shadow: var(--r5-shadow-lg);
    gap: 0;
  }

  .r5-nav-links-open {
    display: flex;
  }

  .r5-nav-links a {
    padding: var(--r5-space-3) 0;
    border-bottom: 1px solid var(--r5-gray-100);
  }
}

/* ============================================
   Buttons
   ============================================ */
.r5-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r5-space-2);
  padding: var(--r5-space-3) var(--r5-space-6);
  font-family: var(--r5-font);
  font-size: var(--r5-text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r5-radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--r5-transition-base);
}

.r5-btn-primary {
  background: var(--r5-blue);
  color: var(--r5-white);
  border-color: var(--r5-blue);
}

.r5-btn-primary:hover {
  background: var(--r5-blue-dark);
  border-color: var(--r5-blue-dark);
  transform: translateY(-2px);
  box-shadow: var(--r5-shadow-lg);
}

.r5-btn-secondary {
  background: var(--r5-white);
  color: var(--r5-dark);
  border-color: var(--r5-gray-300);
}

.r5-btn-secondary:hover {
  border-color: var(--r5-dark);
  background: var(--r5-gray-50);
}

.r5-btn-orange {
  background: var(--r5-orange);
  color: var(--r5-white);
  border-color: var(--r5-orange);
}

.r5-btn-orange:hover {
  background: var(--r5-orange-dark);
  border-color: var(--r5-orange-dark);
  transform: translateY(-2px);
  box-shadow: var(--r5-shadow-lg);
}

.r5-btn-white {
  background: var(--r5-white);
  color: var(--r5-blue);
  border-color: var(--r5-white);
}

.r5-btn-white:hover {
  background: var(--r5-beige);
  border-color: var(--r5-beige);
  transform: translateY(-2px);
}

.r5-btn-xl {
  padding: var(--r5-space-4) var(--r5-space-8);
  font-size: var(--r5-text-base);
}

/* ============================================
   Hero Section
   ============================================ */
.r5-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--r5-space-32) var(--r5-space-6);
  padding-top: calc(var(--r5-space-32) + 80px);
  overflow: hidden;
}

.r5-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.r5-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--r5-blue-pale) 0%,
    var(--r5-white) 50%,
    var(--r5-beige-light) 100%
  );
}

.r5-hero-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image: radial-gradient(var(--r5-blue) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%);
}

.r5-hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.r5-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--r5-space-2);
  padding: var(--r5-space-2) var(--r5-space-4);
  background: var(--r5-white);
  border-radius: var(--r5-radius-full);
  font-size: var(--r5-text-sm);
  font-weight: 500;
  color: var(--r5-gray-600);
  box-shadow: var(--r5-shadow-md);
  margin-bottom: var(--r5-space-8);
}

.r5-badge-dot {
  width: 8px;
  height: 8px;
  background: var(--r5-green);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

.r5-hero h1 {
  font-size: var(--r5-text-6xl);
  margin: 0 0 var(--r5-space-6);
  line-height: 1.1;
}

.r5-hero h1 em {
  font-style: normal;
  color: var(--r5-blue);
}

.r5-hero-lead {
  font-size: var(--r5-text-xl);
  color: var(--r5-gray-600);
  margin: 0 0 var(--r5-space-10);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.r5-hero-cta {
  display: flex;
  gap: var(--r5-space-4);
  justify-content: center;
  margin-bottom: var(--r5-space-12);
}

/* Compact Hero - Search Focused */
.r5-hero-compact {
  min-height: auto;
  padding: var(--r5-space-16) var(--r5-space-6);
  padding-top: calc(var(--r5-space-16) + 80px);
  padding-bottom: var(--r5-space-12);
}

.r5-hero-compact .r5-hero-content {
  max-width: 900px;
}

.r5-hero-compact h1 {
  font-size: var(--r5-text-5xl);
  margin: 0 0 var(--r5-space-3);
}

.r5-hero-subtitle {
  font-size: var(--r5-text-xl);
  color: var(--r5-gray-600);
  margin: 0 0 var(--r5-space-8);
}

/* Wide Search Widget - THE HERO */
.r5-hero-search-wide {
  margin: 0 auto var(--r5-space-6);
  max-width: 800px;
  width: 100%;
}

.r5-search-form-wide {
  display: flex;
  align-items: stretch;
  background: var(--r5-white);
  border-radius: var(--r5-radius-xl);
  box-shadow: 0 12px 48px rgba(33, 38, 80, 0.15), 0 4px 16px rgba(33, 38, 80, 0.1);
  overflow: hidden;
}

.r5-search-field {
  flex: 1;
  padding: var(--r5-space-4) var(--r5-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--r5-space-1);
}

.r5-search-label {
  font-size: var(--r5-text-sm);
  font-weight: 600;
  color: var(--r5-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.r5-search-input-group {
  display: flex;
  align-items: center;
  gap: var(--r5-space-3);
}

.r5-search-icon {
  flex-shrink: 0;
  color: var(--r5-gray-400);
}

.r5-search-input-wide {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--r5-text-xl);
  font-family: var(--r5-font);
  color: var(--r5-dark);
  background: transparent;
  padding: var(--r5-space-2) 0;
}

.r5-search-input-wide::placeholder {
  color: var(--r5-gray-400);
}

.r5-search-btn-wide {
  flex-shrink: 0;
  padding: var(--r5-space-6) var(--r5-space-10);
  background: var(--r5-blue);
  color: var(--r5-white);
  border: none;
  font-size: var(--r5-text-lg);
  font-weight: 600;
  font-family: var(--r5-font);
  cursor: pointer;
  transition: all 0.2s ease;
}

.r5-search-btn-wide:hover {
  background: var(--r5-blue-dark);
}

/* Hero Actions */
.r5-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--r5-space-4);
  margin-bottom: var(--r5-space-8);
}

.r5-hero-or {
  font-size: var(--r5-text-sm);
  color: var(--r5-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.r5-hero-cta-inline {
  display: flex;
  gap: var(--r5-space-3);
}

/* Inline Trust Indicators */
.r5-hero-trust-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--r5-space-4);
  font-size: var(--r5-text-sm);
  color: var(--r5-gray-500);
}

.r5-trust-dot {
  width: 4px;
  height: 4px;
  background: var(--r5-gray-300);
  border-radius: 50%;
}

.r5-hero-trust {
  display: flex;
  justify-content: center;
  gap: var(--r5-space-8);
  flex-wrap: wrap;
}

.r5-trust-item {
  display: flex;
  align-items: center;
  gap: var(--r5-space-2);
  font-size: var(--r5-text-sm);
  color: var(--r5-gray-500);
}

.r5-trust-item svg {
  color: var(--r5-blue);
  flex-shrink: 0;
}

/* ============================================
   Social Proof Bar
   ============================================ */
.r5-proof-bar {
  background: var(--r5-dark);
  padding: var(--r5-space-12) var(--r5-space-6);
}

.r5-proof-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--r5-space-12);
}

.r5-proof-stat {
  text-align: center;
}

.r5-stat-number {
  font-size: var(--r5-text-4xl);
  font-weight: 700;
  color: var(--r5-white);
  line-height: 1;
}

.r5-stat-suffix {
  font-size: var(--r5-text-xl);
  font-weight: 600;
  color: var(--r5-blue-light);
  margin-left: var(--r5-space-1);
}

.r5-stat-label {
  display: block;
  font-size: var(--r5-text-sm);
  color: var(--r5-gray-400);
  margin-top: var(--r5-space-2);
}

.r5-proof-divider {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.15);
}

/* ============================================
   Benefits Sections
   ============================================ */
.r5-benefits {
  padding: var(--r5-space-24) 0;
}

.r5-benefits-buyers {
  background: var(--r5-white);
}

.r5-benefits-sellers {
  background: var(--r5-beige-light);
}

.r5-benefits .r5-section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--r5-space-16);
  align-items: center;
}

.r5-benefits-content h2 {
  font-size: var(--r5-text-4xl);
  margin: 0 0 var(--r5-space-6);
}

.r5-benefits-content .r5-lead {
  margin: 0 0 var(--r5-space-8);
}

.r5-benefit-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--r5-space-8);
}

.r5-benefit-list li {
  display: flex;
  gap: var(--r5-space-4);
  margin-bottom: var(--r5-space-6);
}

.r5-benefit-icon {
  width: 48px;
  height: 48px;
  background: var(--r5-blue-pale);
  border-radius: var(--r5-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--r5-blue);
}

.r5-benefit-icon-orange {
  background: var(--r5-orange-pale);
  color: var(--r5-orange);
}

.r5-benefit-list strong {
  display: block;
  font-size: var(--r5-text-lg);
  font-weight: 600;
  color: var(--r5-dark);
  margin-bottom: var(--r5-space-1);
}

.r5-benefit-list span {
  font-size: var(--r5-text-base);
  color: var(--r5-gray-600);
  line-height: 1.6;
}

/* Phone Mockup */
.r5-benefits-visual {
  display: flex;
  justify-content: center;
}

.r5-phone-mockup {
  width: 320px;
  background: var(--r5-gray-900);
  border-radius: 40px;
  padding: 12px;
  box-shadow: var(--r5-shadow-2xl);
}

.r5-phone-screen {
  background: var(--r5-white);
  border-radius: 32px;
  padding: var(--r5-space-4);
  min-height: 500px;
}

.r5-app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--r5-space-4);
  font-weight: 600;
  color: var(--r5-dark);
}

.r5-app-badge {
  background: var(--r5-orange);
  color: var(--r5-white);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--r5-radius-full);
}

.r5-property-card {
  background: var(--r5-gray-50);
  border-radius: var(--r5-radius-lg);
  overflow: hidden;
  margin-bottom: var(--r5-space-3);
}

.r5-property-image {
  height: 140px;
  background: linear-gradient(135deg, var(--r5-blue-pale) 0%, var(--r5-beige) 100%);
}

.r5-property-info {
  padding: var(--r5-space-4);
}

.r5-property-tag {
  display: inline-block;
  background: var(--r5-green);
  color: var(--r5-white);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r5-radius-full);
  margin-bottom: var(--r5-space-2);
}

.r5-property-tag-new {
  background: var(--r5-blue);
}

.r5-property-info h4 {
  font-size: var(--r5-text-sm);
  margin: 0 0 var(--r5-space-1);
}

.r5-property-info p {
  font-size: 13px;
  color: var(--r5-gray-500);
  margin: 0;
}

.r5-property-meta {
  display: flex;
  gap: var(--r5-space-3);
  margin-top: var(--r5-space-2);
  font-size: 12px;
  color: var(--r5-gray-400);
}

.r5-property-card-small .r5-property-image {
  height: 80px;
}

/* Savings Showcase */
.r5-savings-showcase {
  background: var(--r5-white);
  border-radius: var(--r5-radius-2xl);
  padding: var(--r5-space-8);
  box-shadow: var(--r5-shadow-xl);
  max-width: 400px;
}

.r5-savings-card {
  background: var(--r5-gray-50);
  border-radius: var(--r5-radius-lg);
  padding: var(--r5-space-4);
  margin-bottom: var(--r5-space-6);
  text-align: center;
}

.r5-savings-label {
  display: block;
  font-size: var(--r5-text-sm);
  color: var(--r5-gray-500);
  margin-bottom: var(--r5-space-1);
}

.r5-savings-value {
  font-size: var(--r5-text-3xl);
  font-weight: 700;
  color: var(--r5-dark);
}

.r5-savings-comparison {
  margin-bottom: var(--r5-space-6);
}

.r5-comparison-row {
  display: flex;
  justify-content: space-between;
  padding: var(--r5-space-3) 0;
  border-bottom: 1px solid var(--r5-gray-200);
  font-size: var(--r5-text-base);
}

.r5-comparison-old span:last-child {
  color: var(--r5-gray-400);
}

.r5-strikethrough {
  text-decoration: line-through;
}

.r5-comparison-new span:last-child {
  color: var(--r5-green);
  font-weight: 600;
}

.r5-savings-result {
  background: linear-gradient(135deg, var(--r5-green) 0%, var(--r5-green-dark) 100%);
  border-radius: var(--r5-radius-lg);
  padding: var(--r5-space-6);
  text-align: center;
  color: var(--r5-white);
}

.r5-savings-result span:first-child {
  display: block;
  font-size: var(--r5-text-sm);
  opacity: 0.9;
  margin-bottom: var(--r5-space-2);
}

.r5-savings-amount {
  display: block;
  font-size: var(--r5-text-4xl);
  font-weight: 700;
  line-height: 1;
}

.r5-savings-extra {
  font-size: var(--r5-text-sm);
  opacity: 0.9;
  margin-top: var(--r5-space-1);
}

/* ============================================
   How It Works
   ============================================ */
.r5-how-it-works {
  padding: var(--r5-space-24) 0;
  background: var(--r5-white);
}

.r5-section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--r5-space-16);
}

.r5-section-header h2 {
  margin: 0 0 var(--r5-space-4);
}

.r5-section-header p {
  font-size: var(--r5-text-lg);
  color: var(--r5-gray-600);
  margin: 0;
}

.r5-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  max-width: 1000px;
  margin: 0 auto;
}

.r5-step {
  flex: 1;
  text-align: center;
  padding: 0 var(--r5-space-6);
}

.r5-step-number {
  width: 72px;
  height: 72px;
  background: var(--r5-blue);
  color: var(--r5-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--r5-text-2xl);
  font-weight: 700;
  margin: 0 auto var(--r5-space-6);
  box-shadow: var(--r5-shadow-lg);
}

.r5-step-content h3 {
  font-size: var(--r5-text-xl);
  margin: 0 0 var(--r5-space-3);
}

.r5-step-content p {
  font-size: var(--r5-text-base);
  color: var(--r5-gray-600);
  margin: 0;
  line-height: 1.6;
}

.r5-step-line {
  width: 80px;
  height: 3px;
  background: var(--r5-gray-200);
  margin-top: 36px;
  flex-shrink: 0;
}

/* ============================================
   Testimonials
   ============================================ */
.r5-testimonials {
  padding: var(--r5-space-24) 0;
  background: var(--r5-beige-light);
}

.r5-testimonial-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--r5-space-6);
  align-items: start;
}

.r5-testimonial {
  background: var(--r5-white);
  border-radius: var(--r5-radius-xl);
  padding: var(--r5-space-6);
  box-shadow: var(--r5-shadow-sm);
}

.r5-testimonial-featured {
  grid-row: span 2;
  padding: var(--r5-space-8);
}

.r5-testimonial-quote {
  position: relative;
}

.r5-testimonial-quote svg {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--r5-blue);
}

.r5-testimonial blockquote {
  margin: 0 0 var(--r5-space-6);
  font-size: var(--r5-text-base);
  color: var(--r5-gray-700);
  line-height: 1.7;
}

.r5-testimonial-featured blockquote {
  font-size: var(--r5-text-lg);
  padding-top: var(--r5-space-12);
}

.r5-testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--r5-space-3);
}

.r5-author-photo {
  width: 48px;
  height: 48px;
  background: var(--r5-blue);
  color: var(--r5-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--r5-text-sm);
  font-weight: 600;
}

.r5-author-info {
  flex: 1;
}

.r5-author-info strong {
  display: block;
  font-size: var(--r5-text-base);
  color: var(--r5-dark);
}

.r5-author-info span {
  display: block;
  font-size: var(--r5-text-sm);
  color: var(--r5-gray-500);
}

.r5-testimonial-result {
  color: var(--r5-green) !important;
  font-weight: 600 !important;
}

/* ============================================
   Trust Section
   ============================================ */
.r5-trust {
  padding: var(--r5-space-24) 0;
  background: var(--r5-white);
}

.r5-trust-content {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--r5-space-12);
}

.r5-trust-content h2 {
  margin: 0 0 var(--r5-space-4);
}

.r5-trust-content p {
  font-size: var(--r5-text-lg);
  color: var(--r5-gray-600);
  margin: 0;
}

.r5-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--r5-space-6);
}

.r5-trust-card {
  text-align: center;
  padding: var(--r5-space-8);
  background: var(--r5-gray-50);
  border-radius: var(--r5-radius-xl);
  transition: all var(--r5-transition-base);
}

.r5-trust-card:hover {
  background: var(--r5-white);
  box-shadow: var(--r5-shadow-lg);
  transform: translateY(-4px);
}

.r5-trust-icon {
  width: 64px;
  height: 64px;
  background: var(--r5-blue-pale);
  border-radius: var(--r5-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--r5-space-5);
  color: var(--r5-blue);
}

.r5-trust-card h3 {
  font-size: var(--r5-text-lg);
  margin: 0 0 var(--r5-space-3);
}

.r5-trust-card p {
  font-size: var(--r5-text-base);
  color: var(--r5-gray-600);
  margin: 0;
  line-height: 1.6;
}

/* ============================================
   Final CTA
   ============================================ */
.r5-final-cta {
  position: relative;
  padding: var(--r5-space-32) var(--r5-space-6);
  background: var(--r5-blue);
  overflow: hidden;
}

.r5-cta-bg {
  position: absolute;
  inset: 0;
}

.r5-cta-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
}

.r5-cta-shape-1 {
  width: 600px;
  height: 600px;
  background: var(--r5-white);
  top: -200px;
  right: -100px;
}

.r5-cta-shape-2 {
  width: 400px;
  height: 400px;
  background: var(--r5-orange);
  bottom: -150px;
  left: -100px;
}

.r5-cta-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.r5-cta-content h2 {
  font-size: var(--r5-text-5xl);
  color: var(--r5-white);
  margin: 0 0 var(--r5-space-6);
}

.r5-cta-content p {
  font-size: var(--r5-text-xl);
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--r5-space-10);
  line-height: 1.6;
}

.r5-cta-actions {
  margin-bottom: var(--r5-space-6);
}

.r5-cta-note {
  font-size: var(--r5-text-sm);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* ============================================
   Footer
   ============================================ */
.r5-footer {
  background: var(--r5-dark);
  color: var(--r5-white);
  padding: var(--r5-space-16) 0;
}

.r5-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--r5-space-6);
}

.r5-footer-main {
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: var(--r5-space-16);
  padding-bottom: var(--r5-space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.r5-footer-logo {
  height: 32px;
  margin-bottom: var(--r5-space-4);
}

.r5-footer-brand p {
  font-size: var(--r5-text-base);
  color: var(--r5-gray-400);
  margin: 0 0 var(--r5-space-6);
  max-width: 320px;
  line-height: 1.6;
}

.r5-footer-social {
  display: flex;
  gap: var(--r5-space-4);
}

.r5-footer-social a {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--r5-white);
  transition: all var(--r5-transition-fast);
}

.r5-footer-social a:hover {
  background: var(--r5-blue);
  transform: translateY(-2px);
}

.r5-footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--r5-space-8);
}

.r5-footer-col h4 {
  font-size: var(--r5-text-sm);
  font-weight: 600;
  color: var(--r5-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--r5-space-4);
}

.r5-footer-col a {
  display: block;
  font-size: var(--r5-text-base);
  color: var(--r5-gray-300);
  text-decoration: none;
  padding: var(--r5-space-2) 0;
  transition: color var(--r5-transition-fast);
}

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

.r5-footer-bottom {
  padding-top: var(--r5-space-8);
}

.r5-footer-bottom p {
  font-size: var(--r5-text-sm);
  color: var(--r5-gray-500);
  margin: 0 0 var(--r5-space-2);
  line-height: 1.6;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 1024px) {
  .r5-hero h1 {
    font-size: var(--r5-text-5xl);
  }

  .r5-benefits .r5-section-inner {
    grid-template-columns: 1fr;
    gap: var(--r5-space-12);
  }

  .r5-benefits-sellers .r5-benefits-visual {
    order: 2;
  }

  .r5-benefits-sellers .r5-benefits-content {
    order: 1;
  }

  .r5-testimonial-grid {
    grid-template-columns: 1fr 1fr;
  }

  .r5-testimonial-featured {
    grid-column: span 2;
    grid-row: auto;
  }

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

  .r5-footer-main {
    grid-template-columns: 1fr;
    gap: var(--r5-space-10);
  }
}

@media (max-width: 768px) {
  .r5-nav-links {
    display: none;
  }

  .r5-nav-toggle {
    display: flex;
  }

  .r5-hero {
    padding: var(--r5-space-24) var(--r5-space-4);
    padding-top: calc(var(--r5-space-24) + 80px);
  }

  .r5-hero h1 {
    font-size: var(--r5-text-4xl);
  }

  .r5-hero-lead {
    font-size: var(--r5-text-lg);
  }

  .r5-hero-cta {
    flex-direction: column;
    align-items: center;
  }

  /* Mobile compact hero */
  .r5-hero-compact {
    padding-top: calc(var(--r5-space-12) + 70px);
    padding-bottom: var(--r5-space-8);
  }

  .r5-hero-compact h1 {
    font-size: var(--r5-text-3xl);
  }

  .r5-hero-subtitle {
    font-size: var(--r5-text-lg);
    margin-bottom: var(--r5-space-6);
  }

  /* Mobile wide search widget */
  .r5-search-form-wide {
    flex-direction: column;
    border-radius: var(--r5-radius-xl);
  }

  .r5-search-field {
    padding: var(--r5-space-4);
  }

  .r5-search-input-wide {
    font-size: var(--r5-text-lg);
  }

  .r5-search-btn-wide {
    padding: var(--r5-space-4) var(--r5-space-6);
    font-size: var(--r5-text-base);
  }

  .r5-hero-actions {
    flex-direction: column;
    gap: var(--r5-space-3);
  }

  .r5-hero-cta-inline {
    flex-direction: column;
    width: 100%;
  }

  .r5-hero-cta-inline .r5-btn {
    width: 100%;
    justify-content: center;
  }

  .r5-hero-trust-inline {
    flex-wrap: wrap;
    gap: var(--r5-space-2);
  }

  .r5-hero-trust {
    flex-direction: column;
    gap: var(--r5-space-4);
  }

  .r5-proof-inner {
    flex-direction: column;
    gap: var(--r5-space-8);
  }

  .r5-proof-divider {
    width: 60px;
    height: 1px;
  }

  .r5-steps {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .r5-step {
    max-width: 320px;
  }

  .r5-step-line {
    width: 3px;
    height: 40px;
    margin: 0;
  }

  .r5-testimonial-grid {
    grid-template-columns: 1fr;
  }

  .r5-testimonial-featured {
    grid-column: auto;
  }

  .r5-trust-grid {
    grid-template-columns: 1fr;
  }

  .r5-cta-content h2 {
    font-size: var(--r5-text-3xl);
  }

  .r5-footer-links {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .r5-hero h1 {
    font-size: var(--r5-text-3xl);
  }

  .r5-benefits-content h2,
  .r5-section-header h2 {
    font-size: var(--r5-text-2xl);
  }

  .r5-phone-mockup {
    width: 280px;
  }

  .r5-savings-showcase {
    padding: var(--r5-space-6);
  }

  .r5-footer-links {
    grid-template-columns: 1fr;
    gap: var(--r5-space-6);
  }
}


/* ================================================
   pages/property-show.css
   ================================================ */

/* ================================================
   Property Show Page Styles
   ================================================ */

/* Override content padding for property detail page */
.content:has(.property-detail) {
  padding: 0;
  max-width: none;
}

/* Main container - account for fixed navbar */
.property-detail {
  padding-top: 64px; /* Fixed navbar height */
}

/* When promo banner is visible (logged out), add extra padding */
body:has(.promo-banner) .property-detail {
  padding-top: 108px; /* 64px navbar + 44px promo banner */
}

/* Back Navigation */
.property-back-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
}

.property-back-nav .back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color 0.2s;
}

.property-back-nav .back-link:hover {
  color: var(--color-primary);
}

/* Gallery Section */
.property-gallery {
  background: var(--color-surface);
  padding: var(--space-6) 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

.gallery-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--color-surface-alt);
}

.gallery-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-muted);
  gap: var(--space-2);
}

.gallery-count-badge {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(0, 0, 0, 0.75);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.2s;
}

.gallery-count-badge:hover {
  background: rgba(0, 0, 0, 0.9);
}

.gallery-thumbnails {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.gallery-thumbnail {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.gallery-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-weight: var(--font-weight-semibold);
}

/* Header Section */
.property-header-section {
  background: var(--color-surface);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
}

.property-header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .property-header-content {
    flex-direction: column;
  }
}

.property-header-info {
  flex: 1;
}

.property-status-badges {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.property-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.property-address {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin: 0;
}

.property-header-price {
  text-align: right;
}

@media (max-width: 768px) {
  .property-header-price {
    text-align: left;
  }
}

.property-price-display {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0;
}

/* Stats Row */
.property-stats-row {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}

.property-stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
}

.property-stat-value {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* Main Content Layout - Two Columns */
.property-content-section {
  background: var(--color-background);
  padding: var(--space-8) 0;
}

.property-content-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 1024px) {
  .property-content-grid {
    grid-template-columns: 1fr;
  }
}

/* Main Column */
.property-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Property Sections */
.property-section {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
}

.property-section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.property-description {
  color: var(--color-text-secondary);
  line-height: 1.7;
  white-space: pre-wrap;
}

/* Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}

.feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.feature-item svg {
  color: var(--color-success);
  flex-shrink: 0;
}

/* Details Table */
.property-details-table {
  width: 100%;
  border-collapse: collapse;
}

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

.property-details-table th {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-normal);
  width: 40%;
}

.property-details-table td {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

/* Map Placeholder */
.property-map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  text-align: center;
  gap: var(--space-2);
}

/* Sidebar */
.property-sidebar {
  position: sticky;
  top: var(--space-6);
}

@media (max-width: 1024px) {
  .property-sidebar {
    position: static;
  }
}

/* Enquiry Card */
.enquiry-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.enquiry-card-price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.enquiry-card-type {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
}

.enquiry-card-love {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.love-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s;
}

.love-button:hover {
  border-color: rgba(49, 46, 129, 0.25);
  color: var(--color-primary);
}

.love-button.loved {
  background: var(--color-error-light);
  border-color: var(--color-error);
  color: var(--color-error);
}

.love-count {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.love-count svg {
  color: var(--color-error);
}

.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-4) 0;
}

.enquiry-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.enquiry-card-signup {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
}

.enquiry-card-signup a {
  color: var(--color-primary);
}

/* Agent Card */
.agent-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
}

.agent-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.agent-avatar-placeholder {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.agent-info {
  flex: 1;
}

.agent-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.agent-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

/* Investment Insights Section */
.investment-insights-section {
  background: linear-gradient(135deg, var(--color-primary-pale) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-primary-light);
}

.investment-insights-section .property-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.investment-insights-section .property-section-title svg {
  color: var(--color-primary);
}

.investment-insights-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 var(--space-5);
}

.investment-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.investment-metric-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
}

.investment-metric-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.investment-metric-icon.rent-icon {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.investment-metric-icon.yield-icon {
  background: var(--color-success-pale);
  color: var(--color-success);
}

.investment-metric-icon.annual-icon {
  background: var(--color-warning-pale);
  color: var(--color-warning);
}

.investment-metric-content {
  flex: 1;
}

.investment-metric-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1);
}

.investment-metric-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.investment-metric-value.yield-good {
  color: var(--color-success);
}

.investment-metric-value.yield-average {
  color: var(--color-warning);
}

.investment-metric-value.yield-low {
  color: var(--color-text-secondary);
}

.investment-metric-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.investment-insights-disclaimer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
}

@media (max-width: 768px) {
  .investment-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Enhanced Mobile Responsiveness
   ============================================ */
@media (max-width: 768px) {
  /* Adjust main container for mobile */
  .property-detail {
    padding-top: 56px;
  }

  body:has(.promo-banner) .property-detail {
    padding-top: 96px;
  }

  /* Gallery mobile optimizations */
  .property-gallery {
    padding: var(--space-3) 0;
  }

  .gallery-hero {
    border-radius: 0;
    aspect-ratio: 16/9;
  }

  .gallery-count-badge {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }

  .gallery-thumbnails {
    display: none;
  }

  /* Header mobile layout */
  .property-header-section {
    padding: var(--space-4) 0;
  }

  .property-title {
    font-size: var(--font-size-2xl);
  }

  .property-address {
    font-size: var(--font-size-base);
  }

  .property-price-display {
    font-size: var(--font-size-xl);
  }

  /* Stats row mobile */
  .property-stats-row {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .property-stat {
    flex: 1 1 auto;
    min-width: fit-content;
  }

  /* Content section mobile */
  .property-content-section {
    padding: var(--space-4) 0;
  }

  .property-section {
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }

  .property-section-title {
    font-size: var(--font-size-lg);
  }

  /* Features grid mobile */
  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .feature-item {
    min-height: 44px;
  }

  /* Details table mobile */
  .property-details-table th,
  .property-details-table td {
    padding: var(--space-3) var(--space-2);
    font-size: var(--font-size-sm);
  }

  .property-details-table th {
    width: 45%;
  }

  /* Enquiry card mobile - sticky CTA at bottom */
  .enquiry-card {
    border-radius: var(--radius-md);
    padding: var(--space-4);
  }

  .enquiry-card-price {
    font-size: var(--font-size-xl);
  }

  .love-button {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }

  .enquiry-card-actions .btn {
    min-height: 48px;
  }

  /* Agent card mobile */
  .agent-card {
    padding: var(--space-3);
  }

  .agent-avatar,
  .agent-avatar-placeholder {
    width: 48px;
    height: 48px;
  }
}

/* Sticky CTA for mobile */
@media (max-width: 1024px) {
  .property-mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .property-mobile-cta .mobile-price {
    flex: 1;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
  }

  .property-mobile-cta .btn {
    min-height: 48px;
  }

  /* Add bottom padding to content for sticky CTA */
  .property-content-section {
    padding-bottom: calc(var(--space-8) + 72px);
  }
}

/* ============================================
   Development Applications List
   ============================================ */
.da-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.da-item {
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-border);
  transition: border-color 0.2s;
}

.da-item.da-active {
  border-left-color: var(--color-warning);
  background: linear-gradient(to right, var(--color-warning-pale), var(--color-surface-alt));
}

.da-item.da-approved {
  border-left-color: var(--color-success);
}

.da-item.da-refused {
  border-left-color: var(--color-error);
}

.da-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.da-number {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.da-status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.da-status-under_assessment,
.da-status-pending {
  background: var(--color-warning-pale);
  color: var(--color-warning-dark);
}

.da-status-on_exhibition {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.da-status-approved,
.da-status-approved_with_conditions,
.da-status-determined {
  background: var(--color-success-pale);
  color: var(--color-success-dark);
}

.da-status-refused {
  background: var(--color-error-pale);
  color: var(--color-error);
}

.da-status-withdrawn,
.da-status-deferred {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.da-description {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.da-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.da-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.da-meta-item svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.da-address {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.da-address svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .da-header {
    flex-direction: column;
    gap: var(--space-2);
  }

  .da-meta {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* ===========================================
   Planning Applications Section (NSW ePlanning)
   =========================================== */

.planning-applications-section {
  margin-top: var(--space-6);
}

.planning-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
}

.planning-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.planning-stat-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1.2;
}

.planning-stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.planning-app-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.planning-app-item {
  padding: var(--space-5);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.planning-app-item:hover {
  box-shadow: var(--shadow-sm);
}

.planning-app-item.planning-pending {
  border-left-color: var(--color-warning);
  background: linear-gradient(to right, var(--color-warning-pale), var(--color-surface-alt));
}

.planning-app-item.planning-approved {
  border-left-color: var(--color-success);
}

.planning-app-item.planning-cdc {
  border-left-color: rgba(49, 46, 129, 0.35);
}

.planning-app-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.planning-app-number {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.planning-app-type {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.planning-app-type.type-da {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.planning-app-type.type-cdc {
  background: var(--color-secondary-pale);
  color: var(--color-secondary);
}

.planning-app-status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  margin-left: auto;
}

.planning-app-status.status-lodged,
.planning-app-status.status-under-assessment {
  background: var(--color-warning-pale);
  color: var(--color-warning-dark);
}

.planning-app-status.status-approved {
  background: var(--color-success-pale);
  color: var(--color-success-dark);
}

.planning-app-status.status-refused {
  background: var(--color-error-pale);
  color: var(--color-error);
}

.planning-app-status.status-withdrawn,
.planning-app-status.status-lapsed,
.planning-app-status.status-deferred {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.planning-app-description {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  line-height: 1.4;
}

.planning-app-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.planning-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.planning-meta-item svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.planning-meta-item.planning-subdivision {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.planning-meta-item.planning-subdivision svg {
  color: var(--color-primary);
}

.planning-app-address {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  margin-top: var(--space-2);
}

.planning-app-address svg {
  flex-shrink: 0;
}

.planning-app-determination {
  font-size: var(--font-size-xs);
  margin-top: var(--space-2);
  font-weight: var(--font-weight-medium);
}

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

  .planning-app-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .planning-app-status {
    margin-left: 0;
  }

  .planning-app-meta {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* Planning Applications Map */
.planning-map-container {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.planning-map {
  height: 300px;
  background: var(--color-gray-100);
  position: relative;
}

.planning-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-50);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.planning-map-loading .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-gray-200);
  border-top-color: rgba(49, 46, 129, 0.25);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-2);
}

/* Planning Application Date - more prominent */
.planning-app-date {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
}

.planning-app-date svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ================================================
   Development Applications (DA) Map & List
   ================================================ */

.da-map-container {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-white);
}

.da-map {
  height: 320px;
  background: var(--color-gray-100);
}

.da-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
}

.da-map-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
}

.da-map-legend-marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.da-map-legend-property {
  background: var(--color-primary);
}

.da-map-legend-pending {
  background: var(--color-warning);
}

.da-map-legend-approved {
  background: var(--color-success);
}

.da-map-legend-refused {
  background: var(--color-error);
}

/* DA List */
.da-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.da-item {
  padding: var(--space-5);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-gray-300);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.da-item:hover {
  box-shadow: var(--shadow-sm);
}

.da-item.da-active {
  border-left-color: var(--color-warning);
  background: linear-gradient(to right, var(--color-warning-pale), var(--color-white));
}

.da-item.da-approved {
  border-left-color: var(--color-success);
}

.da-item.da-refused {
  border-left-color: var(--color-error);
}

.da-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.da-number {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.da-status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  margin-left: auto;
}

.da-status-under_assessment,
.da-status-pending,
.da-status-on_exhibition {
  background: var(--color-warning-pale);
  color: var(--color-warning-dark);
}

.da-status-approved,
.da-status-determined {
  background: var(--color-success-pale);
  color: var(--color-success-dark);
}

.da-status-refused,
.da-status-rejected {
  background: var(--color-error-pale);
  color: var(--color-error);
}

.da-status-withdrawn,
.da-status-lapsed {
  background: var(--color-gray-100);
  color: var(--color-text-muted);
}

.da-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}

.da-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.da-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.da-meta-item svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .da-map {
    height: 250px;
  }

  .da-map-legend {
    gap: var(--space-3);
    justify-content: center;
  }

  .da-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .da-status {
    margin-left: 0;
  }

  .da-meta {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* ================================================
   Preview Banner (Seller Preview Mode)
   ================================================ */
.preview-banner {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, #3a5bc7) 100%);
  color: white;
  padding: var(--space-3) 0;
  position: sticky;
  top: 64px;
  z-index: var(--z-sticky, 100);
  box-shadow: var(--shadow-md);
}

body:has(.promo-banner) .preview-banner {
  top: 108px;
}

.preview-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.preview-banner-content svg {
  flex-shrink: 0;
  opacity: 0.9;
}

.preview-banner-content span {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.preview-banner .btn-white {
  background: white;
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}

.preview-banner .btn-white:hover {
  background: var(--color-gray-100);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .preview-banner-content {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }

  .preview-banner-content svg {
    display: none;
  }
}
  /* Property Detail Page */
  .property-detail {
    background: var(--color-gray-50);
    min-height: 100vh;
  }

  /* Back Navigation */
  .property-back-nav {
    background: var(--color-white);
    padding: calc(var(--space-20) + 80px) 0 var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
  }

  .back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

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

  /* Gallery Section */
  .property-gallery {
    background: var(--color-white);
    padding: var(--space-6) 0;
  }

  .gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-4);
  }

  .gallery-hero {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--color-primary-pale) 0%, var(--color-beige) 100%);
  }

  .gallery-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .gallery-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    color: var(--color-text-muted);
  }

  .gallery-count-badge {
    position: absolute;
    bottom: var(--space-4);
    right: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
  }

  .gallery-count-badge:hover {
    background: rgba(0, 0, 0, 0.85);
  }

  .gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .gallery-thumbnail {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
  }

  .gallery-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
  }

  .gallery-thumbnail:hover img {
    transform: scale(1.05);
  }

  .thumbnail-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: var(--color-white);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
  }

  /* Active thumbnail state */
  .gallery-thumbnail.active {
    box-shadow: 0 0 0 3px var(--color-primary);
  }

  .gallery-thumbnail.active img {
    transform: scale(1);
  }

  /* Gallery navigation buttons */
  .gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
    opacity: 0;
  }

  .gallery-hero:hover .gallery-nav {
    opacity: 1;
  }

  .gallery-nav:hover {
    background: var(--color-white);
    transform: translateY(-50%) scale(1.1);
  }

  .gallery-nav-prev {
    left: var(--space-4);
  }

  .gallery-nav-next {
    right: var(--space-4);
  }

  .gallery-nav svg {
    color: var(--color-text-primary);
  }

  /* Lightbox styles */
  .gallery-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .gallery-lightbox.active {
    display: flex;
  }

  .lightbox-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition-fast);
    z-index: 10;
  }

  .lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .lightbox-close svg {
    color: var(--color-white);
  }

  .lightbox-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 90vw;
    max-height: 80vh;
    position: relative;
  }

  .lightbox-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
  }

  .lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
  }

  .lightbox-nav svg {
    color: var(--color-white);
  }

  .lightbox-prev {
    left: var(--space-4);
  }

  .lightbox-next {
    right: var(--space-4);
  }

  .lightbox-counter {
    position: absolute;
    bottom: var(--space-6);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    background: rgba(0, 0, 0, 0.5);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
  }

  /* Header Section */
  .property-header-section {
    background: var(--color-white);
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border-light);
  }

  .property-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .property-status-badges {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  .badge-lg {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
  }

  .property-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
  }

  .property-location {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin: 0;
  }

  .property-header-price {
    text-align: right;
  }

  /* Stats Section */
  .property-stats-section {
    background: var(--color-white);
    padding: 0 0 var(--space-6);
  }

  .stat-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
  }

  .stat-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-pale);
    color: var(--color-primary);
    border-radius: var(--radius-lg);
  }

  .stat-card-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1;
  }

  .stat-card-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: var(--space-1) 0 0;
  }

  /* Content Section */
  .property-content-section {
    padding: var(--space-8) 0 var(--space-12);
  }

  .property-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }

  /* Property Details (Left Column) */
  .property-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .property-price-section {
    background: var(--color-white);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
  }

  .property-price-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-1);
  }

  .property-price {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0;
  }

  .property-section {
    background: var(--color-white);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
  }

  .property-section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4);
  }

  .property-description {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .property-description p {
    margin: 0 0 var(--space-4);
  }

  .property-description p:last-child {
    margin-bottom: 0;
  }

  /* Features Grid */
  .features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .feature-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
  }

  /* Property Details Table */
  .property-details-table {
    width: 100%;
    border-collapse: collapse;
  }

  .property-details-table tr {
    border-bottom: 1px solid var(--color-border-light);
  }

  .property-details-table tr:last-child {
    border-bottom: none;
  }

  .property-details-table th,
  .property-details-table td {
    padding: var(--space-3) 0;
    font-size: var(--font-size-base);
    text-align: left;
  }

  .property-details-table th {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    width: 40%;
  }

  .property-details-table td {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
  }

  /* Map Placeholder */
  .property-map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
    text-align: center;
    color: var(--color-text-muted);
  }

  .property-map-placeholder svg {
    margin-bottom: var(--space-3);
    opacity: 0.5;
  }

  .property-map-placeholder p {
    margin: 0;
    font-size: var(--font-size-base);
  }

  /* Gallery Map (when no photos) */
  .gallery-map-placeholder {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border-radius: var(--radius-xl);
  }

  /* Location Map */
  .property-location-map {
    width: 100%;
    height: 300px;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    overflow: hidden;
  }

  .property-location-address {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }

  /* Places of Worship */
  .section-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4);
  }

  .places-of-worship-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .worship-place-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
  }

  .worship-place-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    flex-shrink: 0;
  }

  .worship-place-icon.christian {
    background: var(--color-primary-pale);
    color: var(--color-primary);
  }

  .worship-place-icon.muslim {
    background: var(--color-success-pale);
    color: var(--color-success);
  }

  .worship-place-icon.jewish {
    background: var(--color-info-pale);
    color: var(--color-info);
  }

  .worship-place-icon.buddhist,
  .worship-place-icon.hindu {
    background: var(--color-warning-pale);
    color: var(--color-warning);
  }

  .worship-place-icon.sikh {
    background: var(--color-orange-pale);
    color: var(--color-orange);
  }

  .worship-place-info {
    flex: 1;
    min-width: 0;
  }

  .worship-place-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .worship-place-details {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
  }

  .worship-denomination {
    color: var(--color-text-muted);
  }

  .worship-place-distance {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
  }

  /* Score Hover Tooltip */
  .score-hover-trigger {
    position: relative;
    cursor: pointer;
  }

  .score-hover-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--space-2);
    padding: var(--space-4);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 100;
  }

  .score-hover-trigger:hover .score-hover-tooltip {
    opacity: 1;
    visibility: visible;
  }

  .score-tooltip-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-light);
  }

  .score-tooltip-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .score-tooltip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
  }

  .score-tooltip-item span:first-child {
    color: var(--color-text-muted);
  }

  .score-tooltip-item span:last-child {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
  }

  /* Sidebar (Right Column) */
  .property-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .enquiry-card {
    background: var(--color-white);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
  }

  .enquiry-card-price {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0;
  }

  .enquiry-card-type {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin: var(--space-1) 0 var(--space-4);
  }

  .enquiry-card-love {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .love-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
  }

  .love-button:hover {
    background: var(--color-gray-100);
    border-color: var(--color-border-hover);
  }

  .love-button.loved {
    color: var(--color-error);
    background: var(--color-error-pale);
    border-color: var(--color-error);
  }

  .love-count {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-error);
  }

  .enquiry-card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .enquiry-card-signup {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin: var(--space-2) 0 0;
  }

  .enquiry-card-signup a {
    color: var(--color-primary);
  }

  .enquiry-card-owner {
    margin-top: var(--space-2);
  }

  .enquiry-card-owner-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
  }

  .owner-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .owner-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: 50%;
    color: var(--color-text-muted);
  }

  .owner-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin: 0;
  }

  .owner-role {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: var(--space-1) 0 0;
  }

  /* Property Stats Card */
  .property-stats-card {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-4);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
  }

  .stats-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  /* Utility classes */
  .text-muted {
    color: var(--color-text-muted);
  }

  .text-sm {
    font-size: var(--font-size-sm);
  }

  .text-center {
    text-align: center;
  }

  .mb-4 {
    margin-bottom: var(--space-4);
  }

  .mt-3 {
    margin-top: var(--space-3);
  }

  .divider {
    height: 1px;
    background: var(--color-border-light);
    margin: var(--space-4) 0;
  }

  /* Enhanced Reasy Score Section */
  .property-score-section {
    background: linear-gradient(135deg, var(--color-primary-pale) 0%, var(--color-beige) 50%, var(--color-white) 100%);
    padding: var(--space-8) 0;
  }

  .score-hero-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
  }

  .score-hero-content {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-8);
    align-items: center;
  }

  .score-hero-left {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  .score-ring-large {
    position: relative;
    flex-shrink: 0;
  }

  .score-ring-value-large {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .score-number-large {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1;
  }

  .score-max-large {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  .score-hero-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
  }

  .score-hero-label {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-lg);
    margin: 0 0 var(--space-2);
  }

  /* Score Bar Chart */
  .score-bars-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
    max-width: 400px;
  }

  .score-bar-row {
    display: grid;
    grid-template-columns: 70px 1fr 60px;
    align-items: center;
    gap: var(--space-3);
  }

  .score-bar-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
  }

  .score-bar-track {
    height: 8px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
  }

  .score-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s ease-out;
  }

  .score-bar-fill-growth_score { background: var(--color-success); }
  .score-bar-fill-safety { background: var(--color-warning); }
  .score-bar-fill-education { background: #6366f1; }
  .score-bar-fill-rental_yield { background: #14b8a6; }
  .score-bar-fill-tenant_quality { background: var(--color-primary); }
  .score-bar-fill-socioeconomic { background: #a855f7; }

  .score-bar-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-align: right;
  }

  /* Score Explanation Section */
  .score-explanation {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
  }

  .score-explanation-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    background: var(--color-primary-pale);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .score-explanation-trigger:hover {
    background: var(--color-primary);
    color: var(--color-white);
  }

  .score-explanation-trigger .chevron {
    transition: transform var(--transition-fast);
  }

  .score-explanation-trigger[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
  }

  .score-explanation-content {
    padding: var(--space-6) 0 0;
  }

  .score-explanation-content p {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
  }

  .score-ranges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .score-range {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
  }

  .score-range-excellent { background: rgba(34, 197, 94, 0.1); }
  .score-range-good { background: rgba(59, 130, 246, 0.1); }
  .score-range-average { background: rgba(245, 158, 11, 0.1); }
  .score-range-low { background: rgba(239, 68, 68, 0.1); }

  .score-range-badge {
    padding: var(--space-1) var(--space-2);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
  }

  .score-range-excellent .score-range-badge { background: var(--color-success); color: var(--color-white); }
  .score-range-good .score-range-badge { background: var(--color-primary); color: var(--color-white); }
  .score-range-average .score-range-badge { background: var(--color-warning); color: var(--color-white); }
  .score-range-low .score-range-badge { background: var(--color-error); color: var(--color-white); }

  .score-explanation-content h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
  }

  .score-components-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
  }

  .score-components-list li {
    position: relative;
    padding-left: var(--space-5);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
  }

  .score-components-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
  }

  .score-data-sources {
    font-size: var(--font-size-xs) !important;
    color: var(--color-text-muted) !important;
    padding: var(--space-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
  }

  /* Score Expand Button */
  .score-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-4);
    margin-top: var(--space-6);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .score-expand-btn:hover {
    background: var(--color-gray-100);
    border-color: var(--color-border-hover);
  }

  .score-expand-btn svg {
    transition: transform var(--transition-fast);
  }

  .score-expand-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  /* Score Breakdown Panel */
  .score-breakdown-panel {
    padding: var(--space-6) 0 0;
    margin-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
  }

  .score-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .score-breakdown-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
  }

  .breakdown-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
  }

  .metric-card-icon-green { background: rgba(34, 197, 94, 0.15); color: var(--color-success); }
  .metric-card-icon-orange { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); }
  .metric-card-icon-blue { background: rgba(59, 130, 246, 0.15); color: var(--color-primary); }
  .metric-card-icon-purple { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
  .metric-card-icon-teal { background: rgba(20, 184, 166, 0.15); color: #14b8a6; }
  .metric-card-icon-indigo { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
  .metric-card-icon-gray { background: var(--color-gray-100); color: var(--color-text-muted); }

  .breakdown-content {
    flex: 1;
    min-width: 0;
  }

  .breakdown-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .breakdown-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
  }

  .breakdown-period {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
  }

  .breakdown-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: var(--space-1) 0 0;
  }

  .breakdown-score {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: var(--space-1) 0 0;
  }

  .breakdown-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    margin-left: var(--space-2);
  }

  .change-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
  }

  .change-badge-positive { background: rgba(34, 197, 94, 0.15); color: var(--color-success); }
  .change-badge-negative { background: rgba(239, 68, 68, 0.15); color: var(--color-error); }
  .change-badge-neutral { background: var(--color-gray-100); color: var(--color-text-muted); }

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

  /* Responsive */
  @media (max-width: 1024px) {
    .property-content-grid {
      grid-template-columns: 1fr;
    }

    .property-sidebar {
      position: static;
    }

    .score-hero-content {
      grid-template-columns: 1fr;
      gap: var(--space-6);
    }

    .score-hero-left {
      flex-direction: column;
      text-align: center;
    }

    .score-bars-container {
      max-width: 100%;
    }

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

    .score-ranges {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 768px) {
    .property-back-nav {
      padding-top: calc(var(--space-16) + 60px);
    }

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

    .gallery-thumbnails {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-2);
    }

    .property-title {
      font-size: var(--font-size-2xl);
    }

    .stat-cards-4 {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-3);
    }

    .stat-card {
      padding: var(--space-3);
      gap: var(--space-3);
    }

    .stat-card-icon {
      width: 40px;
      height: 40px;
    }

    .stat-card-icon svg {
      width: 20px;
      height: 20px;
    }

    .stat-card-value {
      font-size: var(--font-size-xl);
    }

    .stat-card-label {
      font-size: var(--font-size-xs);
    }

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

    .hide-mobile {
      display: none !important;
    }

    .score-hero-card {
      padding: var(--space-6);
    }

    .score-breakdown-grid {
      grid-template-columns: 1fr;
    }

    .score-bar-row {
      grid-template-columns: 60px 1fr 50px;
    }
  }

  @media (min-width: 769px) {
    .hide-desktop {
      display: none !important;
    }
  }

  /* Investment Calculator Styles */
  .investment-calculator {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
  }

  .calculator-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-5);
  }

  .calculator-title svg {
    color: var(--color-primary);
  }

  .calculator-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .calculator-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .calculator-input-group label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
  }

  .input-with-prefix,
  .input-with-suffix {
    position: relative;
    display: flex;
    align-items: center;
  }

  .input-prefix {
    position: absolute;
    left: var(--space-3);
    color: var(--color-text-muted);
    pointer-events: none;
  }

  .input-suffix {
    position: absolute;
    right: var(--space-3);
    color: var(--color-text-muted);
    pointer-events: none;
  }

  .input-with-prefix input {
    padding-left: var(--space-10) !important;
  }

  .input-with-suffix input {
    padding-right: var(--space-8);
  }

  .calculator-input-group input[type="text"] {
    width: 100%;
    padding: var(--space-3);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    transition: border-color var(--transition-fast);
  }

  .calculator-input-group input[type="text"]:focus {
    outline: none;
    border-color: rgba(49, 46, 129, 0.25);
    box-shadow: 0 0 0 3px var(--color-primary-pale);
  }

  .calculator-input-group input[type="text"].input-error {
    border-color: var(--color-error);
    background: rgba(239, 68, 68, 0.05);
  }

  .calculator-input-group input[type="text"].input-error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
  }

  .calculator-warning {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-warning-dark, #b45309);
  }

  .calculator-warning svg {
    flex-shrink: 0;
    color: var(--color-warning);
  }

  .input-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
  }

  .checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }

  .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
  }

  /* Calculator Results */
  .calculator-results {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
  }

  .calculator-no-data {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    padding: var(--space-4);
    margin: 0;
  }

  .calculator-summary {
    margin-bottom: var(--space-4);
  }

  .calculator-summary-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }

  .calculator-summary-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--color-border-light);
  }

  .calculator-summary-item.highlight-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--color-success);
  }

  .calculator-summary-item.highlight-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--color-warning);
  }

  .summary-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .summary-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
  }

  .calculator-gearing {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
  }

  .calculator-gearing.negatively-geared {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(49, 46, 129, 0.25);
  }

  .calculator-gearing.positively-geared {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid var(--color-success);
  }

  .gearing-badge {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
  }

  .negatively-geared .gearing-badge {
    background: var(--color-primary);
    color: var(--color-white);
  }

  .positively-geared .gearing-badge {
    background: var(--color-success);
    color: var(--color-white);
  }

  .gearing-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }

  /* Workings Accordion */
  .calculator-workings {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-white);
  }

  .calculator-workings summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    list-style: none;
    transition: background var(--transition-fast);
  }

  .calculator-workings summary::-webkit-details-marker {
    display: none;
  }

  .calculator-workings summary:hover {
    background: var(--color-gray-50);
  }

  .calculator-workings[open] summary {
    border-bottom: 1px solid var(--color-border-light);
  }

  .workings-content {
    padding: var(--space-4);
  }

  .workings-content h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: var(--space-4) 0 var(--space-3);
  }

  .workings-content h4:first-child {
    margin-top: 0;
  }

  .workings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
  }

  .workings-table td {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
  }

  .workings-table td:first-child {
    color: var(--color-text-secondary);
  }

  .workings-table td:last-child {
    text-align: right;
    font-weight: var(--font-weight-medium);
  }

  .workings-table .total-row {
    font-weight: var(--font-weight-semibold);
  }

  .workings-table .total-row td {
    border-bottom: 2px solid var(--color-border);
    padding-top: var(--space-3);
  }

  .workings-table .total-row.highlight td {
    background: var(--color-gray-50);
    padding: var(--space-3);
    border-radius: var(--radius-md);
  }

  .workings-table .positive { color: var(--color-success); }
  .workings-table .negative { color: var(--color-error); }

  .assumptions-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
    font-style: italic;
  }

  /* Projections Table */
  .projections-table-wrapper {
    overflow-x: auto;
    margin: 0 calc(-1 * var(--space-4));
    padding: 0 var(--space-4);
  }

  .projections-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: var(--font-size-xs);
  }

  .projections-table th,
  .projections-table td {
    padding: var(--space-2) var(--space-3);
    text-align: right;
    border-bottom: 1px solid var(--color-border-light);
  }

  .projections-table th {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    background: var(--color-gray-50);
    position: sticky;
    top: 0;
  }

  .projections-table th:first-child,
  .projections-table td:first-child {
    text-align: left;
    font-weight: var(--font-weight-medium);
  }

  .projections-table .break-even-row {
    background: rgba(34, 197, 94, 0.1);
  }

  .projections-table .break-even-row td {
    font-weight: var(--font-weight-semibold);
  }

  .projections-table .positive { color: var(--color-success); }
  .projections-table .negative { color: var(--color-error); }

  /* Stamp Duty Icon */
  .investment-metric-icon.stamp-duty-icon {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
  }

  /* Break-Even Chart */
  .breakeven-chart {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
  }

  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
  }

  .chart-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
  }

  .chart-title svg {
    color: var(--color-primary);
  }

  .chart-description {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
    line-height: 1.4;
  }

  .chart-legend {
    display: flex;
    gap: var(--space-3);
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
  }

  .legend-item::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
  }

  .legend-positive::before {
    background: var(--color-success);
  }

  .legend-negative::before {
    background: var(--color-error);
  }

  .legend-tax-benefit::before {
    background: var(--color-primary);
  }

  .chart-wrapper {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }

  .chart-container {
    position: relative;
    flex: 1;
  }

  .chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0;
    min-width: 55px;
    height: 160px; /* Match positive zone (80px) + negative zone (80px) */
  }

  .y-axis-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    line-height: 1;
  }

  .y-axis-top {
    color: var(--color-success);
  }

  .y-axis-zero {
    /* Centered between top and bottom */
  }

  .y-axis-bottom {
    color: var(--color-error);
  }

  .chart-zero-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 80px; /* Exactly at the boundary between positive (80px) and negative zones */
    height: 2px;
    background: var(--color-border);
    z-index: 1;
  }

  .chart-bars {
    display: flex;
    justify-content: space-between;
    gap: var(--space-1);
  }

  .chart-bar-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .chart-bar-positive-zone {
    height: 80px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
  }

  .chart-bar-negative-zone {
    height: 80px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
  }

  .chart-bar {
    position: relative;
    width: 100%;
    max-width: 28px;
    min-height: 4px;
    transition: height 0.3s ease-out;
  }

  .chart-bar-positive {
    background: linear-gradient(180deg, var(--color-success) 0%, rgba(34, 197, 94, 0.7) 100%);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }

  .chart-bar-negative {
    background: linear-gradient(0deg, var(--color-error) 0%, rgba(239, 68, 68, 0.7) 100%);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }

  .chart-bar-stack {
    position: relative;
    width: 100%;
    max-width: 28px;
    height: 100%;
  }

  .chart-bar-stack .chart-bar {
    max-width: none;
    width: 100%;
  }

  .chart-tax-benefit {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    background: linear-gradient(0deg, var(--color-primary) 0%, rgba(59, 130, 246, 0.7) 100%);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    border: 1px solid rgba(49, 46, 129, 0.25);
    border-top: none;
  }

  .chart-bar-breakeven {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
  }

  .breakeven-marker {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-success);
    color: var(--color-white);
    font-size: 9px;
    font-weight: var(--font-weight-semibold);
    padding: 2px 6px;
    border-radius: var(--radius-full);
    white-space: nowrap;
  }

  /* Cashflow Chart */
  .cashflow-chart {
    margin-top: var(--space-5);
  }

  .cashflow-initial {
    flex: 0.7;
    border-right: 1px dashed var(--color-border);
    margin-right: var(--space-2);
    padding-right: var(--space-2);
  }

  .chart-bar-initial {
    background: linear-gradient(0deg, #7c3aed 0%, rgba(124, 58, 237, 0.7) 100%) !important;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }

  .chart-bar-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
  }

  .chart-summary {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
  }

  .chart-stat {
    text-align: center;
  }

  .chart-stat-label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
  }

  .chart-stat-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
  }

  .chart-stat-value.positive {
    color: var(--color-success);
  }

  .chart-stat-value.negative {
    color: var(--color-error);
  }

  @media (max-width: 768px) {
    .calculator-inputs {
      grid-template-columns: 1fr;
    }

    .calculator-summary-row {
      grid-template-columns: 1fr;
    }

    .calculator-gearing {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-2);
    }
  }

  /* Login Required Component */
  .login-required-wrapper {
    position: relative;
    min-height: 200px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%);
  }

  .login-required-preview {
    filter: blur(8px);
    opacity: 0.5;
    pointer-events: none;
  }

  .login-required-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
  }

  .login-required-content {
    text-align: center;
    padding: var(--space-6);
    max-width: 320px;
  }

  .login-required-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-pale);
    border-radius: 50%;
    color: var(--color-primary);
  }

  .login-required-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
  }

  .login-required-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-5);
    line-height: var(--line-height-relaxed);
  }

  .login-required-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
  }

  .login-required-actions .btn {
    min-width: 120px;
  }
}

/* ================================================
   Cost Calculator Section
   ================================================ */

.cost-calculator-section {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.calculator-subtitle {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.deposit-adjustment {
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

.deposit-adjustment label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.deposit-slider-container {
  position: relative;
  margin-bottom: var(--space-3);
}

.deposit-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--color-gray-200);
  outline: none;
  -webkit-appearance: none;
}

.deposit-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.deposit-values {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.deposit-display {
  text-align: center;
  font-size: var(--font-size-lg);
  color: var(--color-primary);
}

.cost-breakdown-table {
  margin-bottom: var(--space-6);
}

.cost-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.cost-table th,
.cost-table td {
  padding: var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.cost-table th {
  background: var(--color-gray-50);
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.cost-item-name {
  display: block;
  font-weight: 500;
  margin-bottom: var(--space-1);
}

.cost-item-details {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.cost-amount {
  text-align: right;
  font-weight: 600;
  min-width: 120px;
}

.cost-total-row {
  background: var(--color-gray-50);
  font-weight: 600;
}

.cost-total-row .cost-amount {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
}

.cost-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.cost-summary-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}

.cost-summary-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.cost-summary-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary);
}

.cost-disclaimer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-blue-50);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border-left: 3px solid rgba(49, 46, 129, 0.35);
}

/* ================================================
   Investment Cash Flow Section
   ================================================ */

.investment-cashflow-section {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.investment-analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.analysis-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.analysis-card-header {
  margin-bottom: var(--space-4);
}

.analysis-card h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.analysis-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
}

.analysis-value.positive {
  color: var(--color-success);
}

.analysis-value.negative {
  color: var(--color-error);
}

.analysis-breakdown {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
}

.breakdown-row.total {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  font-weight: 600;
}

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

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

.investment-insights-note {
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.insight-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

.insight-item.negative-geared {
  color: var(--color-warning-dark);
  background: var(--color-warning-light);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-warning);
}

.insight-item.positive-geared {
  color: var(--color-success-dark);
  background: var(--color-success-light);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-success);
}

.investment-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-gray-50);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-gray-400);
}

/* ================================================
   Walkability Score Section
   ================================================ */

.walkability-section {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.walkability-content {
  margin-bottom: var(--space-4);
}

.walkability-hero {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.walkability-score-circle {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(var(--color-primary) 0deg, var(--color-primary) var(--score-angle, 0deg), var(--color-gray-200) var(--score-angle, 0deg));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.score-circle-inner {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.walkability-score-number {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.walkability-score-max {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.walkability-rating {
  flex: 1;
}

.walkability-rating-label {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.walkability-amenity-count {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.walkability-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.walkability-data-source {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Responsive adjustments for calculators */
@media (max-width: 768px) {
  .cost-summary-cards {
    grid-template-columns: 1fr;
  }
  
  .investment-analysis-grid {
    grid-template-columns: 1fr;
  }
  
  .walkability-hero {
    flex-direction: column;
    text-align: center;
  }
  
  .walkability-score-circle {
    width: 100px;
    height: 100px;
  }
  
  .score-circle-inner {
    width: 75px;
    height: 75px;
  }
  
  .walkability-score-number {
    font-size: var(--font-size-2xl);
  }
}

/* ================================================
   Nearby Schools Section Styles
   ================================================ */

.nearby-schools-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.school-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.school-group-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-700);
  margin: 0;
  padding: 0 var(--space-2);
}

.school-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

.school-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  flex-shrink: 0;
}

.school-icon.school-primary {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.school-icon.school-secondary {
  background: var(--color-success-pale);
  color: var(--color-success);
}

.school-icon.school-combined {
  background: var(--color-warning-pale);
  color: var(--color-warning);
}

.school-icon.school-special {
  background: var(--color-purple-100);
  color: var(--color-purple-600);
}

.school-info {
  flex: 1;
  min-width: 0; /* Allow text truncation */
}

.school-name {
  font-weight: 500;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-1) 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.school-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.school-type-badge {
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.school-type-badge.school-type-primary {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.school-type-badge.school-type-secondary {
  background: var(--color-success-pale);
  color: var(--color-success);
}

.school-type-badge.school-type-combined {
  background: var(--color-warning-pale);
  color: var(--color-warning);
}

.school-type-badge.school-type-special {
  background: var(--color-purple-100);
  color: var(--color-purple-600);
}

.school-sector-badge {
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.school-sector-badge.school-sector-government {
  background: var(--color-blue-100);
  color: var(--color-blue-700);
}

.school-sector-badge.school-sector-catholic {
  background: var(--color-indigo-100);
  color: var(--color-indigo-700);
}

.school-sector-badge.school-sector-independent {
  background: var(--color-emerald-100);
  color: var(--color-emerald-700);
}

.school-icsea-badge {
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.school-icsea-badge.badge-green {
  background: var(--color-success-pale);
  color: var(--color-success);
}

.school-icsea-badge.badge-blue {
  background: var(--color-info-pale);
  color: var(--color-info);
}

.school-icsea-badge.badge-orange {
  background: var(--color-warning-pale);
  color: var(--color-warning);
}

.school-icsea-badge.badge-red {
  background: var(--color-error-pale);
  color: var(--color-error);
}

.school-icsea-badge.badge-gray {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.school-distance {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-600);
  flex-shrink: 0;
  min-width: 50px;
  text-align: right;
}

/* Mobile responsiveness for schools */
@media (max-width: 640px) {
  .school-badges {
    gap: var(--space-1);
  }
  
  .school-name {
    font-size: var(--font-size-sm);
  }
  
  .school-type-badge,
  .school-sector-badge,
  .school-icsea-badge {
    font-size: 10px;
    padding: 1px 4px;
  }
  
  .school-distance {
    font-size: 12px;
    min-width: 40px;
  }
}


/* ================================================
   pages/properties-index.css
   ================================================ */

/* ================================================
   Properties Index Page Styles
   ================================================ */

/* Property Search Section - Compact Two-Row Layout */
.property-search-section {
  background: var(--color-white);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.property-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.search-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.search-field {
  flex: 1;
  min-width: 0;
}

.search-field-location {
  flex: 2;
}

.search-field .input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.search-field .input-icon {
  position: absolute;
  left: var(--space-3);
  color: var(--color-text-muted);
  pointer-events: none;
}

.search-field .input-with-icon .form-input {
  padding-left: calc(var(--space-3) + 18px + var(--space-2));
}

.search-field .form-input,
.search-field .form-select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

.search-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: var(--color-gray-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-icon:hover {
  background: var(--color-gray-200);
  color: var(--color-text-primary);
}

/* Results Section */
.property-results-section {
  padding: 0;
  min-height: 60vh;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.results-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.results-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

.results-filter-badge {
  margin: var(--space-2) 0 0;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-primary-pale);
  color: var(--color-primary-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-primary-light);
}

.filter-chip svg {
  flex-shrink: 0;
}

.filter-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--space-1);
  padding: 2px;
  background: transparent;
  border-radius: 50%;
  color: var(--color-primary-dark);
  opacity: 0.7;
  transition: all var(--transition-fast);
}

.filter-chip-remove:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

.results-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.results-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-label-inline {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.view-toggle {
  display: flex;
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
}

.view-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

.view-toggle-btn:hover {
  color: var(--color-text-primary);
}

.view-toggle-btn.active {
  background: var(--color-white);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

/* Property Grid - Adjusted for narrower container */
.property-grid {
  margin-bottom: var(--space-6);
}

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

/* Property Card enhancements */
.property-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--color-primary-pale) 0%, var(--color-beige) 100%);
  overflow: hidden;
}

.property-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.property-card:hover .property-card-image img {
  transform: scale(1.05);
}

.property-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.property-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.property-card-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
}

.property-card-love {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: none;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-text-secondary);
}

.property-card-love:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-lg);
}

.property-card-love.loved {
  color: var(--color-error);
}

.property-card-photo-count {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
}

.property-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
}

.property-card-love-count {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-error);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

.property-card-type {
  margin-left: auto;
}

/* Pagination */
.pagination-container {
  display: flex;
  justify-content: center;
  padding-top: var(--space-4);
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.pagination-btn:hover:not(.disabled) {
  background: var(--color-gray-50);
  border-color: var(--color-border-hover);
}

.pagination-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-numbers {
  display: flex;
  gap: var(--space-1);
}

.pagination-number {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.pagination-number:hover:not(.active) {
  background: var(--color-gray-50);
  color: var(--color-text-primary);
}

.pagination-number.active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: rgba(49, 46, 129, 0.25);
}

.pagination-gap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  color: var(--color-text-muted);
}

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

/* Responsive - Tablet */
@media (max-width: 1024px) {
  .property-grid.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .property-search-section {
    padding: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .search-row {
    flex-direction: column;
    gap: var(--space-2);
  }

  .search-field {
    flex: none;
    width: 100%;
    min-width: 100%;
  }

  .search-field-location {
    flex: none;
    width: 100%;
  }

  .search-field .form-input,
  .search-field .form-select {
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    font-size: 16px;
  }

  .search-field .input-with-icon .form-input {
    padding-left: calc(var(--space-4) + 18px + var(--space-2));
  }

  .search-actions {
    flex: none;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--space-2);
  }

  .search-actions .btn {
    min-height: 48px;
  }

  .search-actions .btn-icon {
    min-width: 48px;
    min-height: 48px;
    width: 48px;
    height: 48px;
  }

  .property-grid.grid-cols-4 {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .results-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .results-controls {
    width: 100%;
    justify-content: space-between;
  }

  .results-sort {
    flex: 1;
  }

  .results-sort .form-select {
    min-height: 44px;
    font-size: 16px;
  }

  .view-toggle-btn {
    width: 44px;
    height: 44px;
  }

  /* Pagination mobile-friendly */
  .pagination-numbers {
    display: none;
  }

  .pagination-btn {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }

  .pagination-container {
    padding-top: var(--space-6);
    padding-bottom: var(--space-4);
  }

  /* Property card touch targets */
  .property-card-love {
    width: 44px;
    height: 44px;
  }

  /* Filter chips scroll horizontally */
  .results-filter-badge {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .filter-chip {
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
  }
}


/* ================================================
   pages/rentals.css
   ================================================ */

/* ================================================
   Rentals Index Page Styles
   ================================================ */

/* Rental Search Section */
.rental-search-section {
  background: var(--color-white);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.rental-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Checkbox field styling */
.search-field-checkbox {
  flex: 0 0 auto;
  min-width: auto;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  user-select: none;
}

.checkbox-label:hover {
  color: var(--color-text-primary);
}

.form-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.checkbox-text {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.checkbox-text svg {
  color: var(--color-text-muted);
}

.checkbox-label:hover .checkbox-text svg {
  color: var(--color-primary);
}

/* Active filters */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Results Section */
.rental-results-section {
  padding: 0;
  min-height: 60vh;
}

/* Rental Grid */
.rental-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Rental Card */
.rental-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition-lift);
}

.rental-card:hover {
  box-shadow: var(--shadow-card-lift);
  transform: var(--hover-lift);
}

/* Rental Card Image */
.rental-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--color-primary-pale) 0%, var(--color-beige) 100%);
  overflow: hidden;
}

.rental-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.rental-card:hover .rental-card-image img {
  transform: scale(1.05);
}

.rental-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Badge positions */
.rental-card-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
}

.rental-card-furnished-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
}

.rental-card-photo-count {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
}

/* Rental Card Content */
.rental-card-content {
  padding: var(--space-4);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.rental-card-price {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.rental-card-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
  line-height: 1.3;
}

.rental-card-location {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* Rental Card Features */
.rental-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
}

.rental-card-feature {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.rental-card-feature svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.rental-card-type {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-gray-100);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  margin-left: auto;
}

/* Availability tag */
.rental-card-availability {
  margin-top: var(--space-3);
}

.availability-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.availability-tag svg {
  color: var(--color-text-muted);
}

.availability-tag.availability-now {
  color: var(--color-success);
}

.availability-tag.availability-now svg {
  color: var(--color-success);
}

/* CTA Button */
.rental-card-cta {
  margin-top: auto;
  padding-top: var(--space-3);
}

.btn-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
}

/* Badge variants for rentals */
.badge-blue {
  background: var(--color-primary-pale);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-light);
}

/* ================================================
   Responsive Styles
   ================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .rental-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .rental-search-section {
    padding: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .search-row {
    flex-direction: column;
    gap: var(--space-2);
  }

  .search-field {
    flex: none;
    width: 100%;
    min-width: 100%;
  }

  .search-field-checkbox {
    flex: none;
    width: auto;
  }

  .search-field .form-input,
  .search-field .form-select {
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    font-size: 16px;
  }

  .search-actions {
    flex: none;
    width: 100%;
    display: flex;
    gap: var(--space-2);
  }

  .search-actions .btn {
    flex: 1;
    min-height: 48px;
  }

  .rental-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .results-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .results-controls {
    width: 100%;
    justify-content: space-between;
  }

  .checkbox-label {
    min-height: 44px;
  }

  .form-checkbox {
    width: 22px;
    height: 22px;
  }

  /* Active filters scroll horizontally */
  .active-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-1);
  }

  .filter-chip {
    flex-shrink: 0;
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
  }
}

/* ================================================
   Rental Detail Page Styles
   ================================================ */

/* Override content padding for rental detail page */
.content:has(.rental-detail) {
  padding: 0;
  max-width: none;
}

/* Main container */
.rental-detail {
  padding-top: 64px; /* Fixed navbar height */
}

body:has(.promo-banner) .rental-detail {
  padding-top: 108px;
}

/* Back Navigation */
.rental-back-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
}

.rental-back-nav .back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color 0.2s;
}

.rental-back-nav .back-link:hover {
  color: var(--color-primary);
}

/* Gallery Section - reuse property gallery styles */
.rental-gallery {
  background: var(--color-surface);
  padding: var(--space-6) 0;
}

/* Header Section */
.rental-header-section {
  background: var(--color-surface);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
}

.rental-header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
}

.rental-header-info {
  flex: 1;
}

.rental-status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.rental-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.rental-location {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin: 0;
}

.rental-location svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.rental-header-price {
  text-align: right;
}

.rental-price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0;
}

/* Stats Section */
.rental-stats-section {
  background: var(--color-surface);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.rental-stats-row {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.rental-stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
}

.rental-stat svg {
  color: var(--color-primary);
}

.rental-stat-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.rental-stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Content Section - Two Column Layout */
.rental-content-section {
  background: var(--color-background-secondary);
  padding: var(--space-8) 0;
}

.rental-content-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8);
  align-items: start;
}

/* Main Column */
.rental-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Rental Sections */
.rental-section {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
}

.rental-section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}

.rental-description {
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.rental-description p {
  margin: 0 0 var(--space-3);
}

.rental-description p:last-child {
  margin-bottom: 0;
}

/* Features Grid */
.feature-item-success {
  color: var(--color-success);
}

.feature-item-success svg {
  color: var(--color-success);
}

.feature-item-info {
  color: var(--color-primary);
}

.feature-item-info svg {
  color: var(--color-primary);
}

.feature-item-muted {
  color: var(--color-text-muted);
}

.feature-item-muted svg {
  color: var(--color-text-muted);
}

/* Bills Grid */
.bills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}

.bill-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-success-pale);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-success);
}

.bill-item svg {
  flex-shrink: 0;
}

/* Details Table */
.rental-details-table {
  width: 100%;
  border-collapse: collapse;
}

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

.rental-details-table th {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-normal);
  width: 40%;
}

.rental-details-table td {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

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

/* Location */
.location-info {
  margin-bottom: var(--space-4);
}

.location-address {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  margin: 0;
}

.location-address svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.rental-map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  text-align: center;
  gap: var(--space-2);
}

/* Sidebar */
.rental-sidebar {
  position: sticky;
  top: calc(64px + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Application Card */
.application-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.application-card-price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0 0 var(--space-1);
}

.application-card-type {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
}

.application-card-stats {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.stat-pill svg {
  color: var(--color-text-muted);
}

.application-card-bond {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
}

.application-card-availability {
  margin-bottom: var(--space-4);
}

.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.availability-badge svg {
  color: var(--color-text-muted);
}

.availability-badge.availability-now {
  background: var(--color-success-pale);
  color: var(--color-success);
}

.availability-badge.availability-now svg {
  color: var(--color-success);
}

.application-card-actions {
  margin-bottom: var(--space-4);
}

.existing-application-notice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-primary-pale);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.existing-application-notice svg {
  flex-shrink: 0;
}

.application-card-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: var(--space-3) 0 0;
}

.application-card-note svg {
  flex-shrink: 0;
}

.application-card-note a {
  color: var(--color-primary);
}

.application-card-info {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-info-pale);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-info);
  margin-bottom: var(--space-3);
}

.application-card-info svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.application-card-info p {
  margin: 0;
}

.application-card-contact {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* Actions Card */
.rental-actions-card {
  display: flex;
  gap: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
}

.action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn:hover {
  background: var(--color-gray-100);
  color: var(--color-primary);
}

.action-btn svg {
  color: inherit;
}

/* Button variants */
.btn-outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.btn-outline:hover {
  border-color: rgba(49, 46, 129, 0.25);
  color: var(--color-primary);
}

.btn-lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-lg);
}

/* Utility classes */
.hide-desktop {
  display: none;
}

/* ================================================
   Rental Detail Responsive Styles
   ================================================ */

@media (max-width: 1024px) {
  .rental-content-grid {
    grid-template-columns: 1fr;
  }

  .rental-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .rental-header-content {
    flex-direction: column;
  }

  .rental-header-price {
    text-align: left;
  }

  .hide-desktop {
    display: block;
  }

  .rental-title {
    font-size: var(--font-size-2xl);
  }

  .rental-stats-row {
    gap: var(--space-4);
  }

  .rental-content-section {
    padding: var(--space-4) 0;
  }

  .rental-section {
    padding: var(--space-4);
  }

  .rental-actions-card {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    z-index: 100;
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }

  .rental-detail {
    padding-bottom: 80px; /* Space for fixed actions */
  }
}


/* ================================================
   pages/landlord-dashboard.css
   ================================================ */

/* ================================================
   Landlord Dashboard Styles
   ================================================ */

/* Dashboard Layout Grid */
.dashboard-column-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.dashboard-column-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Stat Cards */
.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  display: flex;
  gap: var(--space-4);
  box-shadow: var(--shadow-card);
  transition: var(--transition-lift);
}

.stat-card:hover {
  box-shadow: var(--shadow-card-lift);
  transform: var(--hover-lift);
}

.stat-card-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
}

.stat-card-primary .stat-card-value,
.stat-card-primary .stat-card-label {
  color: var(--color-white);
}

.stat-card-primary .stat-card-delta {
  color: rgba(255, 255, 255, 0.8);
}

.stat-card-primary .stat-card-icon {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
}

.stat-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.stat-card-icon-green {
  background: var(--color-success-pale);
  color: var(--color-success);
}

.stat-card-icon-blue {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.stat-card-icon-orange {
  background: var(--color-accent-pale);
  color: var(--color-accent);
}

.stat-card-content {
  flex: 1;
  min-width: 0;
}

.stat-card-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.stat-card-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.stat-card-delta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.stat-card-delta-success {
  color: var(--color-success);
}

.stat-card-delta-warning {
  color: var(--color-warning);
}

.stat-card-delta-info {
  color: var(--color-primary);
}

/* Landlord Table */
.landlord-table {
  width: 100%;
  border-collapse: collapse;
}

.landlord-table th {
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.landlord-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

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

.landlord-table tbody tr:last-child td {
  border-bottom: none;
}

/* Property Cell */
.property-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.property-cell-image {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.property-cell-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.property-cell-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  color: var(--color-text-muted);
}

.property-cell-info {
  min-width: 0;
}

.property-cell-address {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.property-cell-location {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Tenant Cell */
.tenant-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tenant-name {
  font-size: var(--font-size-sm);
}

/* Table Actions */
.table-actions {
  text-align: right;
  width: 48px;
}

/* Text Helpers */
.text-bold {
  font-weight: var(--font-weight-semibold);
}

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

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

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

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

.text-sm {
  font-size: var(--font-size-sm);
}

/* Empty State Small */
.empty-state-sm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
  gap: var(--space-3);
}

.empty-state-sm svg {
  color: var(--color-text-muted);
}

.empty-state-sm p {
  margin: 0;
  font-size: var(--font-size-sm);
}

/* Applications List */
.applications-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.application-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast);
}

.application-item:hover {
  background: var(--color-gray-100);
}

.application-item-avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

.application-item-content {
  flex: 1;
  min-width: 0;
}

.application-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.application-item-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.application-item-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.application-item-property {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}

.application-item-property svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.application-item-details {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.application-item-actions {
  flex-shrink: 0;
}

/* Expiring Leases */
.dashboard-panel-warning {
  border-left: 4px solid var(--color-warning);
}

.dashboard-panel-warning .dashboard-panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dashboard-panel-warning .dashboard-panel-title svg {
  color: var(--color-warning);
}

.expiring-leases-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.expiring-lease-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  background: var(--color-warning-pale);
  border-radius: var(--radius-lg);
}

.expiring-lease-info {
  flex: 1;
  min-width: 0;
}

.expiring-lease-property {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
}

.expiring-lease-tenant {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.expiring-lease-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.expiring-lease-days {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.expiring-lease-rent {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.expiring-lease-actions {
  flex-shrink: 0;
}

/* Maintenance List */
.maintenance-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.maintenance-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast);
}

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

.maintenance-item-urgency {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.maintenance-item-urgency.urgency-emergency {
  background: var(--color-error-pale);
  color: var(--color-error);
}

.maintenance-item-urgency.urgency-urgent {
  background: var(--color-warning-pale);
  color: var(--color-warning);
}

.maintenance-item-urgency.urgency-routine {
  background: var(--color-gray-100);
  color: var(--color-text-muted);
}

.maintenance-item-content {
  flex: 1;
  min-width: 0;
}

.maintenance-item-title {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
}

.maintenance-item-property {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}

.maintenance-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.maintenance-item-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.maintenance-item-actions {
  flex-shrink: 0;
}

/* Quick Actions Stack */
.quick-actions-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.quick-action-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
}

.quick-action-link:hover {
  background: var(--color-gray-100);
  transform: translateX(4px);
}

.quick-action-link-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Stats Row Warning */
.stats-row-warning {
  background: var(--color-error-pale);
  margin: 0 calc(var(--space-3) * -1);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  border-radius: var(--radius-md);
}

/* Health Indicators */
.health-indicators {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.health-indicator {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.health-indicator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.health-indicator-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.health-indicator-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.health-indicator-bar {
  height: 8px;
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.health-indicator-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

.health-indicator-fill-good {
  background: var(--color-success);
}

.health-indicator-fill-warning {
  background: var(--color-warning);
}

.health-indicator-fill-poor {
  background: var(--color-error);
}

/* Health Metrics */
.health-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.health-metric {
  text-align: center;
}

.health-metric-value {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.health-metric-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Muted Panel */
.dashboard-panel-muted {
  background: var(--color-gray-50);
}

/* Help Links */
.help-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.help-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
}

.help-link:hover {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

.help-link svg {
  color: inherit;
}

/* Button Variants */
.btn-ghost {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  padding: var(--space-2);
}

.btn-ghost:hover {
  background: var(--color-gray-100);
  color: var(--color-primary);
}

.btn-xs {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
}

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

.btn-white:hover {
  background: var(--color-gray-100);
}

/* Badge Variants */
.badge-xs {
  font-size: 10px;
  padding: 2px 6px;
}

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

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

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

/* ================================================
   Responsive Styles
   ================================================ */

@media (max-width: 1024px) {
  .dashboard-main {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 768px) {
  .stat-card {
    padding: var(--space-4);
  }

  .stat-card-value {
    font-size: var(--font-size-xl);
  }

  .landlord-table {
    display: block;
    overflow-x: auto;
  }

  .landlord-table th,
  .landlord-table td {
    padding: var(--space-2) var(--space-3);
  }

  .property-cell-image {
    width: 40px;
    height: 40px;
  }

  .application-item {
    flex-wrap: wrap;
  }

  .application-item-actions {
    width: 100%;
    margin-top: var(--space-2);
  }

  .application-item-actions .btn {
    width: 100%;
  }

  .expiring-lease-item {
    flex-wrap: wrap;
  }

  .expiring-lease-meta {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    margin-top: var(--space-2);
  }

  .health-metrics {
    gap: var(--space-2);
  }

  .health-metric-value {
    font-size: var(--font-size-lg);
  }
}


/* ================================================
   pages/tenant-dashboard.css
   ================================================ */

/* =====================================================
   Tenant Dashboard Styles
   ===================================================== */

/* Tenant Lease Card */
.tenant-lease-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.tenant-lease-property {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.tenant-lease-image {
  flex-shrink: 0;
  width: 120px;
  height: 80px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tenant-lease-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tenant-lease-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
}

.tenant-lease-info {
  flex: 1;
  min-width: 0;
}

.tenant-lease-address {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-2xs) 0;
}

.tenant-lease-location {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-sm) 0;
}

.tenant-lease-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.tenant-lease-details span {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.tenant-lease-details svg {
  color: var(--color-gray-400);
}

/* Lease Stats */
.tenant-lease-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.tenant-lease-stat {
  text-align: center;
}

.tenant-lease-stat-value {
  display: block;
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
}

.tenant-lease-stat-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-2xs);
}

/* Lease Alert */
.tenant-lease-alert {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--radius-md);
  color: var(--color-error);
  font-size: var(--text-sm);
}

.tenant-lease-alert span {
  flex: 1;
}

.tenant-lease-alert-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

/* Payments List */
.payments-list {
  display: flex;
  flex-direction: column;
}

.payment-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

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

.payment-item-overdue {
  background: var(--color-error-bg);
  border-radius: var(--radius-md);
  border-bottom: none;
  margin-bottom: var(--space-xs);
}

.payment-item-date {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.payment-item-overdue .payment-item-date {
  background: var(--color-error);
  color: white;
}

.payment-item-day {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1;
}

.payment-item-month {
  font-size: var(--text-xs);
  text-transform: uppercase;
  opacity: 0.8;
}

.payment-item-content {
  flex: 1;
  min-width: 0;
}

.payment-item-property {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-2xs) 0;
}

.payment-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.payment-item-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
}

.payment-item-value {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

/* Application Item with Property Image */
.application-item-property-image {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.application-item-property-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.application-item-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
}

.application-item-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Contact List */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.contact-item-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
}

.contact-item-info {
  flex: 1;
  min-width: 0;
}

.contact-item-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
}

.contact-item-role {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .tenant-lease-property {
    flex-direction: column;
  }

  .tenant-lease-image {
    width: 100%;
    height: 140px;
  }

  .tenant-lease-stats {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .tenant-lease-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border);
  }

  .tenant-lease-stat:last-child {
    border-bottom: none;
  }

  .tenant-lease-stat-label {
    margin-top: 0;
    order: -1;
  }

  .payment-item {
    flex-wrap: wrap;
  }

  .payment-item-amount {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
  }

  .payment-item-overdue .payment-item-amount {
    border-top-color: var(--color-error-border);
  }
}


/* ================================================
   pages/pm-dashboard.css
   ================================================ */

/* =====================================================
   Property Manager Dashboard Styles
   ===================================================== */

/* Agency Welcome Banner */
.welcome-banner-agency {
  background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-900) 100%);
}

/* Urgent Panel */
.dashboard-panel-urgent {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
}

.dashboard-panel-urgent .dashboard-panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-error);
}

.dashboard-panel-urgent .dashboard-panel-subtitle {
  color: var(--color-error);
  opacity: 0.8;
}

/* Urgent Items Grid */
.urgent-items-grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .urgent-items-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

.urgent-section {
  background: white;
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.urgent-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-md) 0;
}

.urgent-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-xs);
  border-radius: 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: white;
}

.urgent-badge-emergency {
  background: var(--color-error);
}

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

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

/* Urgent Item */
.urgent-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

.urgent-item:last-child {
  margin-bottom: 0;
}

.urgent-item-emergency {
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid var(--color-error);
}

.urgent-item-warning {
  background: rgba(245, 158, 11, 0.1);
  border-left: 3px solid var(--color-warning);
}

.urgent-item-error {
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid var(--color-error);
}

.urgent-item-content {
  flex: 1;
  min-width: 0;
}

.urgent-item-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.urgent-item-meta {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin: var(--space-2xs) 0 0 0;
}

/* Pipeline Stats */
.pipeline-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.pipeline-stage {
  text-align: center;
  flex: 1;
  max-width: 120px;
}

.pipeline-stage-count {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pipeline-stage-label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin: var(--space-2xs) 0 var(--space-sm) 0;
}

.pipeline-stage-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--color-gray-200);
}

.pipeline-stage-pending .pipeline-stage-bar,
.pipeline-stage-pending {
  position: relative;
}

.pipeline-stage-pending .pipeline-stage-bar::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--color-blue-500);
  border-radius: 2px;
}

.pipeline-stage-shortlisted .pipeline-stage-bar::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--color-warning);
  border-radius: 2px;
}

.pipeline-stage-approved .pipeline-stage-bar::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--color-success);
  border-radius: 2px;
}

.pipeline-stage-shortlisted .pipeline-stage-bar,
.pipeline-stage-approved .pipeline-stage-bar {
  position: relative;
}

.pipeline-arrow {
  color: var(--color-gray-400);
  flex-shrink: 0;
}

/* Application Strength */
.application-strength {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-warning);
  font-weight: 500;
}

/* Maintenance Summary Grid */
.maintenance-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.maintenance-summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  text-align: center;
}

.maintenance-summary-emergency {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
}

.maintenance-summary-emergency .maintenance-summary-icon {
  color: var(--color-error);
}

.maintenance-summary-open {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
}

.maintenance-summary-open .maintenance-summary-icon {
  color: var(--color-warning);
}

.maintenance-summary-progress {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
}

.maintenance-summary-progress .maintenance-summary-icon {
  color: var(--color-info);
}

.maintenance-summary-icon {
  margin-bottom: var(--space-sm);
}

.maintenance-summary-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.maintenance-summary-count {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
}

.maintenance-summary-label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* Stats Row Highlight */
.stats-row-highlight {
  background: var(--color-primary-bg);
  margin: var(--space-xs) calc(var(--space-sm) * -1);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
}

.stats-row-highlight .stats-label {
  font-weight: 500;
}

/* Quick Action Badge */
.quick-action-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-xs);
  background: var(--color-primary);
  color: white;
  border-radius: 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-left: auto;
}

/* Responsive */
@media (max-width: 640px) {
  .pipeline-stats {
    flex-wrap: wrap;
  }

  .pipeline-arrow {
    display: none;
  }

  .pipeline-stage {
    min-width: 80px;
  }

  .maintenance-summary-grid {
    grid-template-columns: 1fr;
  }

  .urgent-items-grid {
    grid-template-columns: 1fr;
  }
}


/* ================================================
   pages/seller-analytics.css
   ================================================ */

/* Seller Property Analytics Dashboard */

/* Chart Styles */
.analytics-chart {
  position: relative;
  height: 200px;
  margin: 20px 0;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  height: 160px;
  gap: 2px;
  padding-left: 40px;
  padding-right: 10px;
}

.chart-bar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  height: 100%;
  position: relative;
}

.chart-bar {
  width: 100%;
  max-width: 12px;
  background: linear-gradient(135deg, #007AFF, #5856D6);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.chart-bar:hover {
  background: linear-gradient(135deg, #0056CC, #4240B8);
  transform: translateY(-2px);
}

.chart-bar-label {
  font-size: 10px;
  color: #8E8E93;
  margin-top: 4px;
  white-space: nowrap;
}

.chart-y-axis {
  position: absolute;
  left: 0;
  top: 0;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 35px;
}

.y-axis-label {
  font-size: 12px;
  color: #8E8E93;
  text-align: right;
}

/* Activity Feed Styles */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #F2F2F7;
}

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

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-view {
  background: #E3F2FD;
  color: #007AFF;
}

.activity-save {
  background: #FFEBEE;
  color: #FF3B30;
}

.activity-enquiry {
  background: #E8F5E8;
  color: #34C759;
}

.activity-content {
  flex: 1;
}

.activity-description {
  font-size: 14px;
  color: #1C1C1E;
  margin: 0;
  line-height: 1.4;
}

.activity-time {
  font-size: 12px;
  color: #8E8E93;
  margin: 2px 0 0 0;
}

/* Comparison Styles */
.comparison-stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
}

@media (max-width: 768px) {
  .comparison-stats {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 16px;
  }
}

.comparison-item {
  text-align: center;
}

.comparison-vs {
  justify-self: center;
  font-size: 14px;
  color: #8E8E93;
  font-weight: 500;
}

.comparison-result {
  justify-self: center;
}

.performance-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
}

.performance-above {
  background: #E8F5E8;
  color: #34C759;
}

.performance-below {
  background: #FFEBEE;
  color: #FF3B30;
}

.performance-average {
  background: #FFF9C4;
  color: #FF9500;
}

/* Stats Cards Grid */
@media (max-width: 768px) {
  .grid.grid-cols-1.md\\:grid-cols-4 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Chart Responsiveness */
@media (max-width: 768px) {
  .analytics-chart {
    height: 180px;
  }
  
  .chart-bars {
    height: 140px;
    padding-left: 30px;
  }
  
  .chart-y-axis {
    height: 140px;
    width: 25px;
  }
  
  .y-axis-label {
    font-size: 10px;
  }
  
  .chart-bar-label {
    font-size: 9px;
  }
}

/* ================================================
   pages/seller_calendar.css
   ================================================ */

/* Seller Calendar Styles */
.calendar-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-white);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-sm);
}

.calendar-month-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-900);
}

.calendar-grid {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}

.calendar-header-day {
  padding: 0.75rem 0.5rem;
  text-align: center;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-gray-700);
  border-right: 1px solid var(--color-gray-200);
}

.calendar-header-day:last-child {
  border-right: none;
}

.calendar-body {
  display: flex;
  flex-direction: column;
}

.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--color-gray-200);
}

.calendar-week:last-child {
  border-bottom: none;
}

.calendar-day {
  min-height: 120px;
  padding: 0.5rem;
  border-right: 1px solid var(--color-gray-200);
  cursor: pointer;
  transition: background-color 0.15s ease;
  display: flex;
  flex-direction: column;
}

.calendar-day:last-child {
  border-right: none;
}

.calendar-day:hover {
  background: var(--color-gray-50);
}

.calendar-day-other-month {
  background: var(--color-gray-25);
  color: var(--color-gray-400);
}

.calendar-day-number {
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--color-gray-900);
}

.calendar-day-other-month .calendar-day-number {
  color: var(--color-gray-400);
}

.calendar-day-events {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow: hidden;
}

.calendar-event {
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  line-height: 1.2;
  border-left: 3px solid;
}

.calendar-event-inspection {
  background: var(--color-blue-50);
  border-left-color: var(--color-blue-500);
  color: var(--color-blue-900);
}

.calendar-event-viewing {
  background: var(--color-green-50);
  border-left-color: var(--color-green-500);
  color: var(--color-green-900);
}

.calendar-event-task {
  background: var(--color-orange-50);
  border-left-color: var(--color-orange-500);
  color: var(--color-orange-900);
}

.calendar-event-time {
  font-weight: 500;
}

.calendar-event-title {
  margin: 0.125rem 0;
}

.calendar-event-location {
  color: var(--color-gray-600);
  font-size: 0.625rem;
}

.calendar-event-badge {
  background: var(--color-white);
  color: var(--color-gray-700);
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  margin-left: 0.25rem;
  border: 1px solid var(--color-gray-200);
}

/* Events List */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.event-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.event-item-time {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-gray-600);
  white-space: nowrap;
  min-width: 0;
}

.event-item-title {
  font-weight: 500;
  color: var(--color-gray-900);
  margin-bottom: 0.25rem;
}

.event-item-meta {
  font-size: 0.75rem;
  color: var(--color-gray-600);
}

.event-item-actions {
  margin-left: auto;
}

.card-empty-small {
  padding: 1rem;
  text-align: center;
  color: var(--color-gray-500);
  font-size: 0.875rem;
}

/* Open Inspections in Property Detail */
.open-inspections-section {
  margin: 1rem 0;
}

.open-inspections-section .section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0;
}

.open-inspections-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.inspection-item {
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-200);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.inspection-datetime {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.inspection-date {
  font-weight: 600;
  color: var(--color-blue-900);
  font-size: 0.875rem;
}

.inspection-time {
  font-size: 0.75rem;
  color: var(--color-blue-700);
}

.inspection-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.inspection-status {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-blue-800);
  display: flex;
  align-items: center;
}

.inspection-notes {
  font-size: 0.75rem;
  color: var(--color-gray-600);
  line-height: 1.4;
}

.inspection-rsvp-btn {
  align-self: flex-start;
  margin-top: 0.25rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .calendar-grid {
    display: none;
  }
  
  /* Show list view instead */
  .calendar-list-view {
    display: block;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-sm);
  }
  
  .calendar-day-list {
    padding: 1rem;
    border-bottom: 1px solid var(--color-gray-200);
  }
  
  .calendar-day-list:last-child {
    border-bottom: none;
  }
  
  .calendar-day-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
  }
  
  .calendar-day-list-date {
    font-weight: 600;
    color: var(--color-gray-900);
  }
  
  .calendar-day-list-events {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .calendar-navigation {
    padding: 0.75rem 1rem;
  }
  
  .calendar-month-title {
    font-size: 1.125rem;
  }
}

@media (max-width: 480px) {
  .calendar-event {
    font-size: 0.625rem;
  }
  
  .calendar-day {
    min-height: 80px;
    padding: 0.25rem;
  }
  
  .inspection-item {
    padding: 0.75rem;
  }
}

/* ================================================
   pages/suburb_comparison.css
   ================================================ */

/* Suburb Comparison Page */

.suburb-comparison {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.page-header {
  text-align: center;
  margin-bottom: 3rem;
}

.page-header h1 {
  color: #1d1d1f;
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.page-header p {
  color: #6e6e73;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Suburb Selector Form */
.suburb-selector {
  background: #f5f5f7;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 3rem;
}

.suburb-form {
  display: flex;
  align-items: end;
  gap: 1rem;
  flex-wrap: wrap;
}

.suburb-inputs {
  display: flex;
  gap: 1rem;
  flex: 1;
  flex-wrap: wrap;
}

.suburb-input-group {
  flex: 1;
  min-width: 250px;
}

.suburb-input-group label {
  display: block;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 0.5rem;
}

.input-pair {
  display: flex;
  gap: 0.5rem;
}

.suburb-select, .state-select {
  padding: 0.75rem;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
}

.suburb-select {
  flex: 2;
}

.state-select {
  flex: 1;
  min-width: 80px;
}

.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background: #007aff;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
}

.btn-secondary {
  background: #f5f5f7;
  color: #1d1d1f;
  border: 1px solid #d2d2d7;
}

.btn-secondary:hover {
  background: #e8e8ed;
}

/* Comparison Table */
.comparison-results {
  margin-top: 3rem;
}

.comparison-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 2rem;
}

.table-header {
  display: grid;
  grid-template-columns: 200px repeat(auto-fit, minmax(200px, 1fr));
  background: #1d1d1f;
  color: white;
}

.table-header .metric-column {
  padding: 1.5rem 1rem;
  font-weight: 600;
  background: #2c2c2e;
}

.table-header .suburb-column {
  padding: 1.5rem 1rem;
  text-align: center;
}

.table-header .suburb-column h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.table-header .suburb-column .postcode {
  margin: 0;
  opacity: 0.8;
  font-size: 0.9rem;
}

.table-body {
  background: white;
}

.comparison-row {
  display: grid;
  grid-template-columns: 200px repeat(auto-fit, minmax(200px, 1fr));
  border-bottom: 1px solid #f0f0f0;
}

.comparison-row:last-child {
  border-bottom: none;
}

.metric-label {
  padding: 1rem;
  font-weight: 600;
  color: #1d1d1f;
  background: #fafafa;
  display: flex;
  align-items: center;
}

.metric-value {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #1d1d1f;
  transition: all 0.2s ease;
}

.metric-value.winner {
  background: #d1f2eb;
  color: #00875a;
  font-weight: 600;
  position: relative;
}

.metric-value.winner::before {
  content: "🏆";
  margin-right: 0.5rem;
}

/* Share Section */
.share-section {
  background: #f5f5f7;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.share-section p {
  margin: 0;
  font-weight: 600;
  color: #1d1d1f;
}

.share-url {
  flex: 1;
  min-width: 300px;
  padding: 0.75rem;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  background: white;
  font-family: monospace;
}

/* No Results / Getting Started */
.no-results, .getting-started {
  text-align: center;
  padding: 3rem;
  background: #f5f5f7;
  border-radius: 12px;
  margin-top: 2rem;
}

.no-results p, .getting-started p {
  color: #6e6e73;
  font-size: 1.1rem;
  margin: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .suburb-comparison {
    padding: 1rem;
  }
  
  .page-header h1 {
    font-size: 2rem;
  }
  
  .suburb-form {
    flex-direction: column;
  }
  
  .suburb-inputs {
    flex-direction: column;
  }
  
  .suburb-input-group {
    min-width: 100%;
  }
  
  .input-pair {
    flex-direction: column;
  }
  
  .suburb-select, .state-select {
    flex: 1;
  }
  
  /* Stack comparison columns vertically on mobile */
  .table-header, .comparison-row {
    grid-template-columns: 1fr;
  }
  
  .table-header .metric-column {
    display: none;
  }
  
  .table-header .suburb-column {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .comparison-row {
    margin-bottom: 1rem;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .metric-label {
    background: #2c2c2e;
    color: white;
  }
  
  .share-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .share-url {
    min-width: 100%;
  }
}

/* ================================================
   pages/settlement_tracker.css
   ================================================ */

/* Settlement Tracker - Visual Timeline */

.settlement-tracker-header {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.property-info {
  margin-bottom: 1.5rem;
}

.property-address {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.5rem 0;
}

.sale-price {
  font-size: 1.125rem;
  font-weight: 500;
  color: #059669;
  margin-bottom: 0.25rem;
}

.user-role {
  font-size: 0.875rem;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.progress-section {
  margin-top: 1rem;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.progress-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.progress-percentage {
  font-size: 0.875rem;
  font-weight: 600;
  color: #059669;
}

.progress-bar {
  height: 8px;
  background: #F3F4F6;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10B981, #059669);
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* Main Layout Grid */
.settlement-tracker-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Timeline Section */
.timeline-section {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 1.5rem 0;
}

.milestone-timeline {
  position: relative;
}

.milestone-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  position: relative;
}

.milestone-item:last-child {
  margin-bottom: 0;
}

.milestone-connector {
  position: relative;
  width: 24px;
  flex-shrink: 0;
}

.connector-line {
  position: absolute;
  top: -1.5rem;
  left: 11px;
  width: 2px;
  height: 1.5rem;
  background: #E5E7EB;
}

.connector-line.completed {
  background: #10B981;
}

.milestone-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

/* Completed milestone */
.milestone-item.completed .milestone-circle {
  background: #10B981;
  color: white;
}

/* Current milestone */
.milestone-item.current .milestone-circle {
  background: #3B82F6;
  border: 3px solid #DBEAFE;
}

.current-pulse {
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Future milestone */
.milestone-item.future .milestone-circle {
  background: #F3F4F6;
  border: 2px solid #E5E7EB;
}

.future-dot {
  width: 8px;
  height: 8px;
  background: #9CA3AF;
  border-radius: 50%;
}

.milestone-content {
  margin-left: 1rem;
  flex: 1;
}

.milestone-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.25rem;
}

.milestone-icon {
  font-size: 1rem;
  margin-right: 0.5rem;
}

.milestone-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  margin: 0;
}

.milestone-date {
  font-size: 0.75rem;
  color: #059669;
  font-weight: 500;
}

.milestone-status {
  font-size: 0.75rem;
  font-weight: 500;
}

.milestone-status.current {
  color: #3B82F6;
}

.milestone-status.pending {
  color: #9CA3AF;
}

/* Sidebar Section */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-panel {
  background: white;
  padding: 1.25rem;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.panel-title {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 1rem 0;
}

.panel-title svg {
  margin-right: 0.5rem;
  color: #6B7280;
}

/* Key Dates */
.dates-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.date-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.date-label {
  font-size: 0.75rem;
  color: #6B7280;
  font-weight: 500;
}

.date-value {
  font-size: 0.75rem;
  color: #111827;
  font-weight: 500;
  text-align: right;
}

.days-remaining {
  display: block;
  font-size: 0.6875rem;
  color: #7C3AED;
  font-weight: 600;
  margin-top: 0.125rem;
}

/* Next Steps */
.next-step-item {
  display: flex;
  align-items: flex-start;
}

.step-icon {
  font-size: 1rem;
  margin-right: 0.75rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.step-content {
  flex: 1;
}

.step-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.25rem;
}

.step-description {
  font-size: 0.6875rem;
  color: #6B7280;
  line-height: 1.4;
}

.all-complete {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  color: #059669;
  font-weight: 500;
}

.all-complete svg {
  margin-right: 0.5rem;
}

/* Quick Actions */
.quick-actions-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.action-link {
  display: block;
  font-size: 0.75rem;
  color: #3B82F6;
  text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid #F3F4F6;
  transition: color 0.2s ease;
}

.action-link:hover {
  color: #1D4ED8;
}

.action-link:last-child {
  border-bottom: none;
}

/* Back to Dashboard */
.back-to-dashboard {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .settlement-tracker-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .settlement-tracker-header {
    padding: 1rem;
  }
  
  .property-address {
    font-size: 1.25rem;
  }
  
  .timeline-section,
  .info-panel {
    padding: 1rem;
  }
  
  .milestone-item {
    margin-bottom: 1.25rem;
  }
  
  .milestone-content {
    margin-left: 0.75rem;
  }
}

/* Dark mode support (if implemented) */
@media (prefers-color-scheme: dark) {
  .settlement-tracker-header,
  .timeline-section,
  .info-panel {
    background: #1F2937;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  .property-address,
  .section-title,
  .panel-title,
  .milestone-title,
  .step-title,
  .date-value {
    color: #F9FAFB;
  }
  
  .user-role,
  .progress-label,
  .date-label,
  .step-description {
    color: #9CA3AF;
  }
  
  .progress-bar {
    background: #374151;
  }
  
  .connector-line {
    background: #4B5563;
  }
  
  .milestone-item.future .milestone-circle {
    background: #374151;
    border-color: #4B5563;
  }
  
  .future-dot {
    background: #6B7280;
  }
  
  .action-link {
    border-bottom-color: #374151;
  }
}

/* ================================================
   pages/conversational-onboarding.css
   ================================================ */

/* ================================================
   Conversational Onboarding
   Warm, friendly chat-style onboarding flow
   ================================================ */

.conversational-onboarding {
  min-height: 100vh;
  background: #FDF6EC;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.onboarding-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(49, 46, 129, 0.1);
  z-index: 100;
}

.onboarding-progress-fill {
  height: 100%;
  background: #312E81;
  border-radius: 0 2px 2px 0;
  transition: width 0.5s ease;
}

.onboarding-container {
  max-width: 520px;
  width: 100%;
  padding: 2rem 1.5rem;
  margin: 0 auto;
}

.onboarding-logo {
  text-align: center;
  margin-bottom: 2.5rem;
  padding-top: 1rem;
}

.onboarding-logo-img {
  height: 40px;
  width: auto;
}

/* Chat bubbles */
.chat-bubbles {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chat-bubble {
  background: white;
  border-radius: 1.25rem 1.25rem 1.25rem 0.25rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  max-width: 90%;
}

.chat-bubble p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #1a1a2e;
}

.chat-bubble p + p {
  margin-top: 0.75rem;
}

.chat-bubble-greeting {
  font-size: 1.5rem;
  font-weight: 600;
  color: #312E81;
  display: block;
}

/* Animation */
.chat-bubble-animate {
  opacity: 0;
  transform: translateY(12px);
  animation: chatBubbleFadeIn 0.5s ease forwards;
}

.chat-bubble-animate:nth-child(1) { animation-delay: 0.15s; }
.chat-bubble-animate:nth-child(2) { animation-delay: 0.45s; }
.chat-bubble-animate:nth-child(3) { animation-delay: 0.75s; }
.chat-bubble-animate:nth-child(4) { animation-delay: 1.05s; }

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

/* Action buttons */
.chat-actions {
  margin-top: 0.5rem;
  width: 100%;
  max-width: 100%;
}

.chat-actions form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.btn-conversational {
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.btn-conversational-primary {
  background: #312E81;
  color: white;
}

.btn-conversational-primary:hover {
  background: #3b378f;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(49, 46, 129, 0.3);
}

.btn-conversational-ghost {
  background: transparent;
  color: #312E81;
  border: 2px solid rgba(49, 46, 129, 0.2);
}

.btn-conversational-ghost:hover {
  background: rgba(49, 46, 129, 0.05);
  border-color: rgba(49, 46, 129, 0.4);
}

.onboarding-back {
  text-align: center;
  margin-top: 1rem;
}

.onboarding-back a {
  color: #666;
  font-size: 0.95rem;
  text-decoration: none;
}

.onboarding-back a:hover {
  color: #312E81;
}

/* Property status card (seller property show) */
.property-status-card {
  background: white;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-gray-200, #e5e7eb);
}

.property-status-card .status-label {
  font-size: 0.8rem;
  color: var(--color-gray-500, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.status-selector-options {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.status-option {
  padding: 0.625rem 1.25rem;
  border-radius: 2rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border: 2px solid var(--color-gray-200, #e5e7eb);
  background: white;
  color: var(--color-gray-700, #374151);
  transition: all 0.2s ease;
}

.status-option:hover {
  border-color: #312E81;
  color: #312E81;
}

.status-option.active {
  background: #312E81;
  border-color: #312E81;
  color: white;
}

.status-option.active-green {
  background: #065f46;
  border-color: #065f46;
  color: white;
}

.status-option.active-amber {
  background: #92400e;
  border-color: #92400e;
  color: white;
}

.status-option.active-gray {
  background: var(--color-gray-500, #6b7280);
  border-color: var(--color-gray-500, #6b7280);
  color: white;
}

.status-requirements {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: #fef3c7;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  color: #92400e;
}

/* Responsive */
@media (max-width: 640px) {
  .onboarding-container {
    padding: 1.5rem 1rem;
  }

  .chat-bubble-greeting {
    font-size: 1.3rem;
  }

  .chat-bubble p {
    font-size: 1rem;
  }

  .status-selector-options {
    flex-direction: column;
  }
}