/* ============================================
   CarInsuranceBest.com - Professional Design
   Clean, Modern, Emoji-Free Insurance Site
   ============================================ */

/* CSS Variables - Design System */
:root {
    /* Primary Brand - Trust Blue */
    --primary-900: #0c1e3e;
    --primary-800: #0f2a5a;
    --primary-700: #143c7c;
    --primary-600: #1a4fa3;
    --primary-500: #2063c9;
    --primary-400: #4a82d9;
    --primary-300: #7aa3e6;
    --primary-200: #aec8f2;
    --primary-100: #d6e5fa;
    --primary-50: #eef5ff;
    
    /* Secondary - Action Green */
    --secondary-900: #064e3b;
    --secondary-800: #065f46;
    --secondary-700: #047857;
    --secondary-600: #059669;
    --secondary-500: #10b981;
    --secondary-400: #34d399;
    
    /* Accent - Savings Orange */
    --accent-600: #ea580c;
    --accent-500: #f97316;
    --accent-400: #fb923c;
    --accent-100: #ffedd5;
    
    /* Neutral - Slate */
    --slate-950: #020617;
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --slate-50: #f8fafc;
    
    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    
    /* Border Radius */
    --radius: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.6; color: var(--slate-800); background-color: var(--slate-50); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ============================================
   LAYOUT
   ============================================ */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 640px) { .container { padding: 0 var(--space-6); } }
@media (min-width: 1024px) { .container { padding: 0 var(--space-8); } }

/* ============================================
   HEADER
   ============================================ */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--slate-200); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xl); font-weight: 800; color: var(--primary-700); letter-spacing: -0.025em; }
.logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, var(--primary-600), var(--primary-500)); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: white; font-size: var(--text-sm); }
.nav { display: none; }
@media (min-width: 768px) { .nav { display: flex; align-items: center; gap: var(--space-8); } }
.nav-link { font-size: var(--text-sm); font-weight: 600; color: var(--slate-600); transition: color 150ms; position: relative; }
.nav-link:hover { color: var(--primary-600); }
.nav-cta { background: var(--secondary-600); color: white; padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: 600; transition: all 150ms; }
.nav-cta:hover { background: var(--secondary-700); transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ============================================
   HERO
   ============================================ */
.hero { position: relative; padding: calc(72px + var(--space-16)) 0 var(--space-24); background: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-600) 50%, var(--primary-500) 100%); overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; text-align: center; }
.location-badge { display: inline-flex; align-items: center; gap: var(--space-2); background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); color: white; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-6); }
.hero-title { font-size: var(--text-4xl); font-weight: 800; color: white; line-height: 1.1; letter-spacing: -0.025em; margin-bottom: var(--space-6); }
@media (min-width: 640px) { .hero-title { font-size: var(--text-5xl); } }
@media (min-width: 1024px) { .hero-title { font-size: var(--text-6xl); } }
.hero-subtitle { font-size: var(--text-xl); color: rgba(255, 255, 255, 0.9); margin-bottom: var(--space-8); max-width: 600px; margin-left: auto; margin-right: auto; }
.hero-subtitle strong { color: var(--accent-400); font-weight: 700; }
.hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-10); }
.trust-pill { display: flex; align-items: center; gap: var(--space-2); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); color: white; font-size: var(--text-sm); font-weight: 500; }

/* CTA Card */
.cta-card { background: white; border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-2xl); max-width: 480px; margin: 0 auto; text-align: left; }
.cta-title { font-size: var(--text-lg); font-weight: 700; color: var(--slate-900); margin-bottom: var(--space-5); text-align: center; }
.form-group { margin-bottom: var(--space-5); }
.form-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--slate-700); margin-bottom: var(--space-2); }
.form-input { width: 100%; padding: var(--space-4); font-size: var(--text-lg); border: 2px solid var(--slate-200); border-radius: var(--radius-xl); transition: all 150ms; background: var(--slate-50); }
.form-input:focus { outline: none; border-color: var(--primary-400); background: white; box-shadow: 0 0 0 4px var(--primary-100); }
.form-input::placeholder { color: var(--slate-400); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-6); font-size: var(--text-lg); font-weight: 700; border-radius: var(--radius-xl); border: none; transition: all 150ms; cursor: pointer; width: 100%; }
.btn-primary { background: linear-gradient(135deg, var(--secondary-600), var(--secondary-500)); color: white; box-shadow: 0 4px 14px 0 rgba(5, 150, 105, 0.39); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px 0 rgba(5, 150, 105, 0.5); }
.btn-lg { padding: var(--space-5) var(--space-8); font-size: var(--text-xl); }
.btn-secondary { background: white; color: var(--primary-600); border: 2px solid var(--primary-200); }
.btn-secondary:hover { background: var(--primary-50); border-color: var(--primary-300); }

/* ============================================
   TRUST BAR
   ============================================ */
.trust-bar { background: white; padding: var(--space-10) 0; border-bottom: 1px solid var(--slate-200); }
.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
@media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item { text-align: center; }
.trust-number { font-size: var(--text-4xl); font-weight: 800; color: var(--primary-600); line-height: 1; margin-bottom: var(--space-2); }
.trust-label { font-size: var(--text-sm); font-weight: 600; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.05em; }

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb { background: var(--slate-100); padding: var(--space-4) 0; border-bottom: 1px solid var(--slate-200); }
.breadcrumb-list { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--slate-600); }
.breadcrumb-link { color: var(--primary-600); font-weight: 500; transition: color 150ms; }
.breadcrumb-link:hover { color: var(--primary-700); text-decoration: underline; }
.breadcrumb-separator { color: var(--slate-400); }
.breadcrumb-current { color: var(--slate-800); font-weight: 600; }

/* ============================================
   MAIN CONTENT
   ============================================ */
.main { padding: var(--space-16) 0; }
.section { margin-bottom: var(--space-20); }
.section-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-12); }
.section-title { font-size: var(--text-3xl); font-weight: 800; color: var(--slate-900); margin-bottom: var(--space-4); letter-spacing: -0.025em; }
@media (min-width: 640px) { .section-title { font-size: var(--text-4xl); } }
.section-subtitle { font-size: var(--text-lg); color: var(--slate-600); }
.section-intro { font-size: var(--text-lg); color: var(--slate-600); max-width: 800px; margin: 0 auto var(--space-10); line-height: 1.8; }

/* ============================================
   STATES GRID
   ============================================ */
.states-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 480px) { .states-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .states-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .states-grid { grid-template-columns: repeat(5, 1fr); } }
.state-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-5); background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-xl); transition: all 150ms; box-shadow: var(--shadow-sm); }
.state-card:hover { border-color: var(--primary-300); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.state-code { font-size: var(--text-2xl); font-weight: 800; color: var(--primary-600); line-height: 1; }
.state-name { font-size: var(--text-sm); font-weight: 600; color: var(--slate-600); margin-top: var(--space-1); text-align: center; }
.state-rate { font-size: var(--text-xs); font-weight: 700; color: var(--secondary-600); margin-top: var(--space-2); padding: var(--space-1) var(--space-2); background: var(--secondary-50); border-radius: var(--radius-full); }

/* ============================================
   CITIES GRID
   ============================================ */
.cities-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--space-4); }
@media (min-width: 480px) { .cities-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .cities-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cities-grid { grid-template-columns: repeat(4, 1fr); } }
.city-card { display: block; padding: var(--space-5); background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-xl); transition: all 150ms; box-shadow: var(--shadow-sm); }
.city-card:hover { border-color: var(--primary-300); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.city-name { font-size: var(--text-lg); font-weight: 700; color: var(--slate-900); margin-bottom: var(--space-1); }
.city-meta { font-size: var(--text-sm); color: var(--slate-500); margin-bottom: var(--space-3); }
.city-rate { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: 700; color: var(--secondary-700); padding: var(--space-1) var(--space-3); background: var(--secondary-100); border-radius: var(--radius-full); }
.city-arrow { color: var(--primary-400); margin-left: auto; }

/* ============================================
   RATES TABLE
   ============================================ */
.rates-section { background: white; border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-sm); border: 1px solid var(--slate-200); }
.rates-title { font-size: var(--text-xl); font-weight: 700; color: var(--slate-900); margin-bottom: var(--space-6); }
.rates-table { width: 100%; border-collapse: collapse; }
.rates-table th, .rates-table td { padding: var(--space-4); text-align: left; border-bottom: 1px solid var(--slate-200); }
.rates-table th { font-size: var(--text-xs); font-weight: 700; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.05em; background: var(--slate-50); }
.rates-table tr:last-child td { border-bottom: none; }
.rates-table td { font-size: var(--text-base); color: var(--slate-700); }
.rate-amount { font-weight: 700; color: var(--slate-900); }
.rate-highlight { color: var(--primary-600); font-weight: 800; }

/* ============================================
   AFFILIATE CARDS
   ============================================ */
.affiliates-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--space-6); }
@media (min-width: 640px) { .affiliates-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .affiliates-grid { grid-template-columns: repeat(3, 1fr); } }
.affiliate-card { background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-2xl); padding: var(--space-8); text-align: center; transition: all 150ms; box-shadow: var(--shadow-sm); }
.affiliate-card:hover { border-color: var(--primary-300); box-shadow: var(--shadow-xl); transform: translateY(-4px); }
.affiliate-logo { font-size: var(--text-2xl); font-weight: 800; color: var(--primary-700); margin-bottom: var(--space-4); }
.affiliate-tagline { font-size: var(--text-sm); color: var(--slate-500); margin-bottom: var(--space-6); }
.affiliate-commission { font-size: var(--text-xs); font-weight: 600; color: var(--secondary-600); background: var(--secondary-50); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); display: inline-block; margin-bottom: var(--space-4); }
.affiliate-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: var(--space-3) var(--space-5); font-size: var(--text-base); font-weight: 700; color: white; background: linear-gradient(135deg, var(--primary-600), var(--primary-500)); border-radius: var(--radius-xl); transition: all 150ms; }
.affiliate-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* ============================================
   STEPS
   ============================================ */
.steps-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--space-8); }
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }
.step-card { text-align: center; padding: var(--space-8); }
.step-number { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-5); font-size: var(--text-2xl); font-weight: 800; color: white; background: linear-gradient(135deg, var(--primary-600), var(--primary-500)); border-radius: var(--radius-full); box-shadow: var(--shadow-lg); }
.step-title { font-size: var(--text-xl); font-weight: 700; color: var(--slate-900); margin-bottom: var(--space-2); }
.step-desc { font-size: var(--text-base); color: var(--slate-600); }

/* ============================================
   CONTENT STYLES
   ============================================ */
.content-block { background: white; border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-sm); border: 1px solid var(--slate-200); margin-bottom: var(--space-8); }
.content-block h3 { font-size: var(--text-xl); font-weight: 700; color: var(--slate-900); margin-bottom: var(--space-4); }
.content-block p { color: var(--slate-600); line-height: 1.8; margin-bottom: var(--space-4); }
.content-block ul { margin-left: var(--space-6); color: var(--slate-600); }
.content-block li { margin-bottom: var(--space-2); }

/* ============================================
   CITY BROWSER
   ============================================ */
.city-browser { background: white; border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-sm); border: 1px solid var(--slate-200); }
.city-browser-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); flex-wrap: wrap; gap: var(--space-4); }
.city-browser-title { font-size: var(--text-2xl); font-weight: 800; color: var(--slate-900); }
.city-search { display: flex; gap: var(--space-3); }
.city-search-input { padding: var(--space-3) var(--space-4); border: 2px solid var(--slate-200); border-radius: var(--radius-lg); font-size: var(--text-base); min-width: 250px; }
.city-search-input:focus { outline: none; border-color: var(--primary-400); }
.city-alpha-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--slate-200); }
.alpha-link { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--primary-600); background: var(--primary-50); border-radius: var(--radius); transition: all 150ms; }
.alpha-link:hover { background: var(--primary-600); color: white; }
.city-list { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--space-3); }
@media (min-width: 480px) { .city-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .city-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .city-list { grid-template-columns: repeat(4, 1fr); } }
.city-list-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); background: var(--slate-50); border-radius: var(--radius-lg); transition: all 150ms; }
.city-list-item:hover { background: var(--primary-50); }
.city-list-name { font-weight: 600; color: var(--slate-700); }
.city-list-rate { font-size: var(--text-xs); font-weight: 700; color: var(--secondary-600); }

/* ============================================
   FOOTER
   ============================================ */
.footer { background: var(--slate-900); color: var(--slate-300); padding: var(--space-16) 0 var(--space-8); }
.footer-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--space-10); margin-bottom: var(--space-12); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-title { font-size: var(--text-lg); font-weight: 700; color: white; margin-bottom: var(--space-4); }
.footer-links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-link { font-size: var(--text-sm); color: var(--slate-400); transition: color 150ms; }
.footer-link:hover { color: white; }
.footer-bottom { padding-top: var(--space-8); border-top: 1px solid var(--slate-800); text-align: center; }
.footer-copyright { font-size: var(--text-sm); color: var(--slate-500); }
.footer-disclaimer { font-size: var(--text-xs); color: var(--slate-600); margin-top: var(--space-4); max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.6; }

/* ============================================
   UTILITY
   ============================================ */
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.highlight { background: linear-gradient(120deg, var(--accent-100) 0%, var(--accent-100) 100%); background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 88%; padding: 0 4px; }