/* Copyright © 2026 CampaignComply. All rights reserved. */

/* Shared Styles for FPPC Campaign Compliance Suite */
/* PROFESSIONAL CLEAN LEGAL-TECH DESIGN SYSTEM */
/* Inspired by EvenUp Law - Modern, Trustworthy, Approachable */

/* Import Inter Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

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

/* Better keyboard navigation visibility */
body.keyboard-nav *:focus {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

body:not(.keyboard-nav) *:focus {
    outline: none;
}

:root {
    /* PRIMARY COLORS - Logo-Inspired Warm Palette */
    --primary: #2B4A6F;              /* Warmer Navy from Logo */
    --primary-red: #D94A43;          /* Coral Red from Logo Top */
    --primary-cream: #F5E6D3;        /* Cream from Logo Stripe */
    --primary-light: #4A6FA0;        /* Lighter Navy */
    --primary-dark: #1E3350;         /* Darker Navy */
    --primary-hover: #3A5A87;        /* Hover State */

    /* SECONDARY - Warm Accent Colors */
    --secondary: #D94A43;            /* Coral Red */
    --secondary-light: #E67B75;      /* Light Red */
    --secondary-dark: #B83932;       /* Deep Red */

    /* ACCENT - Warm Cream & Navy */
    --accent: #D94A43;               /* Red for Emphasis */
    --accent-light: #F5E6D3;         /* Cream */
    --accent-dark: #2B4A6F;          /* Navy */

    /* Semantic Colors - Warm & Approachable */
    --danger: #EF4444;
    --danger-light: #FEE2E2;
    --success: #2B4A6F;              /* Navy for success - brand consistent */
    --success-light: #E8EDF4;        /* Light Navy for success backgrounds */
    --valid: #059669;                /* Muted emerald for form validation */
    --valid-light: #D1FAE5;          /* Light emerald for valid field backgrounds */
    --warning: #F59E0B;
    --accent-coral: #D94A43;         /* Coral for CTAs and accents */
    --warning-light: #FEF3C7;
    --info: #2B4A6F;                 /* Navy for Info (was bright blue) */
    --info-light: #E8EDF4;           /* Light Navy */

    /* LOCAL VERIFIED DATA (2026-07-17) — local lawyer-reviewed jurisdiction
       data renders in the SAME navy language as FPPC state content; the only
       local marker is the small "Verified" badge. One token, used by every
       local-data surface (.cf-*, coverage cards, search results). */
    --verified-accent: #2B4A6F;      /* navy — matches --primary/--info */
    --verified-accent-light: #E8EDF4;/* light navy tint — matches --info-light */
    --verified-accent-hover: #D8E1EC;/* slightly deeper tint for hover states */

    /* NEUTRAL PALETTE - Warm & Inviting */
    --bg-dark: #2B4A6F;              /* Warmer Navy */
    --bg-light: #FAF7F2;             /* Very Light Cream */
    --bg-secondary: #FFFFFF;         /* Pure White */
    --bg-tertiary: #F5E6D3;          /* Cream */
    --bg-subtle: #F9FAFB;            /* Light Gray - cards/sections */
    --bg-selected: #EFF6FF;          /* Light Blue - selected states */

    /* Text Colors - Professional Hierarchy */
    --text-primary: #111827;
    --text-secondary: #374151;
    --text: #111827;
    --text-light: #6B7280;             /* WCAG AA: 4.83:1 vs white (was #9CA3AF at 2.54:1) */

    /* Borders - Clean & Minimal */
    --border: #E5E7EB;
    --border-light: #F3F4F6;
    --border-medium: #D1D5DB;
    --border-dark: #9CA3AF;

    /* WARM SHADOWS - Approachable Depth */
    --shadow-sm: 0 1px 2px rgba(217, 74, 67, 0.08);
    --shadow-md: 0 4px 6px rgba(217, 74, 67, 0.12);
    --shadow-lg: 0 10px 15px rgba(217, 74, 67, 0.15);
    --shadow-xl: 0 20px 25px rgba(217, 74, 67, 0.18);

    /* LOGO-INSPIRED GRADIENTS - Navy Dominant */
    --gradient-primary: linear-gradient(135deg, #2B4A6F 0%, #2B4A6F 95%, #D94A43 100%);
    --gradient-hero: radial-gradient(circle at 20% 30%, rgba(217, 74, 67, 0.25) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(217, 74, 67, 0.2) 0%, transparent 50%), #2B4A6F;
    --gradient-cream: linear-gradient(135deg, #FAF7F2 0%, #F5E6D3 100%);
    --gradient-gold: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    --gradient-success: linear-gradient(135deg, #2B4A6F 0%, #1E3350 100%);  /* Navy gradient */
    --gradient-cyan: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%);

    /* Additional Color Definitions */
    --cyan: #06B6D4;
    --cyan-glow: rgba(6, 182, 212, 0.4);
    --success-dark: #1E3350;             /* Dark Navy for hover states */
    --success-glow: rgba(43, 74, 111, 0.4);  /* Navy glow (matches --success) */
    --border-accent: #E5E7EB;

    /* Additional Shadows */
    --shadow-2xl: 0 25px 50px rgba(217, 74, 67, 0.25);
    --shadow-glow: 0 0 20px rgba(217, 74, 67, 0.3);
    --shadow-glow-gold: 0 0 20px rgba(245, 158, 11, 0.5);

    /* Spacing Scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Border Radius - Friendly & Approachable */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-badge: 2rem;            /* NEW: Pill-shaped elements */
    --radius-full: 9999px;

    /* Typography Scale - Professional & Readable */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3rem;

    /* Font Weights - Bold Campaign Style */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 800;                /* Increased for campaign feel */
    --font-extrabold: 800;
    --font-black: 900;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Transitions - Smooth & Simple */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Focus Indicators - Accessibility */
    --focus-outline-width: 2px;
    --focus-outline-offset: 2px;
    --focus-outline-color: var(--primary);
    --focus-ring-shadow: 0 0 0 3px rgba(43, 74, 111, 0.15);

    /* Disabled State */
    --disabled-opacity: 0.6;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-light);
    color: var(--text-primary);
    line-height: var(--line-height-normal);
    font-size: var(--font-size-base);
    font-weight: var(--font-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* NAVIGATION - Clean & Professional */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: #FFFFFF;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    z-index: 1000;
    transition: box-shadow var(--transition-base);
}

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

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.125rem var(--space-xl);
    display: flex;
    justify-content: space-between;
    gap: var(--space-lg);
    align-items: center;
}

.logo {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    transition: color var(--transition-base);
}

.logo:hover {
    color: var(--primary-light);
}

.logo img {
    border-radius: 8px;
}

.nav-links {
    display: flex;
    gap: var(--space-lg);
    align-items: center;
    flex-wrap: nowrap;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: var(--font-medium);
    transition: all var(--transition-base);
    font-size: var(--font-size-base);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
}

.nav-links a:hover {
    color: var(--primary);
    background: var(--bg-tertiary);
}

.nav-links a.active {
    color: var(--primary);
    font-weight: var(--font-semibold);
    background: var(--bg-tertiary);
}

/* User Menu Dropdown */
.user-menu-container {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.user-menu {
    position: relative;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    transition: all var(--transition-base);
    min-height: 40px;
}

.user-menu-trigger:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-light);
}

.user-menu-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.user-menu-trigger .user-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-trigger .dropdown-arrow {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px;
    max-width: 12px;
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.user-menu-trigger svg {
    width: 12px !important;
    height: 12px !important;
}

.user-menu-trigger[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

.user-menu-items {
    position: absolute;
    top: calc(100% + var(--space-xs));
    right: 0;
    min-width: 180px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 1001;
}

.user-menu-items.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-items a,
.user-menu-items button {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    background: none;
    border: none;
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-base);
    min-height: 44px;
}

.user-menu-items a:hover,
.user-menu-items button:hover {
    background: var(--bg-tertiary);
}

.user-menu-items a:focus-visible,
.user-menu-items button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.user-menu-items .menu-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    max-width: 16px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.user-menu-items svg {
    width: 16px !important;
    height: 16px !important;
}

.user-menu-items .sign-out-item {
    border-top: 1px solid var(--border);
    color: var(--error);
}

.user-menu-items .sign-out-item:hover {
    background: var(--error-light);
}

.nav-sign-in {
    padding: var(--space-sm) var(--space-lg);
    background: var(--primary);
    color: white !important;
    border-radius: var(--radius-md);
    font-weight: var(--font-medium);
    transition: all var(--transition-base);
    min-height: 40px;
    display: flex;
    align-items: center;
}

.nav-sign-in:hover {
    background: var(--primary-dark) !important;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: var(--space-sm);
    z-index: 1001;
}

.hamburger-icon {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--primary);
    position: relative;
    transition: background 0.3s ease;
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    background: var(--primary);
    position: absolute;
    transition: all 0.3s ease;
}

.hamburger-icon::before {
    top: -8px;
}

.hamburger-icon::after {
    top: 8px;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon {
    background: transparent;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon::before {
    transform: rotate(45deg);
    top: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon::after {
    transform: rotate(-45deg);
    top: 0;
}

/* HERO SECTION - Clean & Professional */
.hero {
    margin-top: 160px;
    padding: var(--space-3xl) var(--space-xl);
    background: var(--gradient-hero);
    color: white;
    text-align: center;
    min-height: 200px;

    /* Flexbox for vertical centering */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Bear + star brand mark, carried on interior page headers (the landing page
   disables this — it has the full Capitol skyline instead). */
.hero::after {
    content: "";
    position: absolute;
    right: clamp(12px, 4vw, 72px);
    bottom: 0;
    width: clamp(120px, 20vw, 210px);
    aspect-ratio: 545 / 300;
    background: url("../images/ca-bear-star-mark.svg") no-repeat bottom right / contain;
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
}

.hero > * {
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-md);
    font-weight: var(--font-bold);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
}

.hero p {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-sm);
    opacity: 0.95;
    line-height: var(--line-height-relaxed);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-weight: var(--font-normal);
}

/* Hero Container - Centered with Flexbox */
.hero .container {
    text-align: center;
    padding: 0;  /* Remove padding - let hero padding handle spacing */
}

.hero .container h1,
.hero .container p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Main Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl);
}

@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
}

/* PROGRESS BAR - Enhanced with Glow */
.progress-container {
    background: var(--gradient-glass);
    padding: var(--space-xl);
    box-shadow: var(--shadow-xl);
    border: 2px solid var(--border-accent);
    border-radius: var(--radius-xl);
    position: sticky;
    top: 115px;
    z-index: 999;
    margin-bottom: var(--space-2xl);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    transition: all var(--transition-base);
}

.progress-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2xl);
    border-color: var(--primary);
}

.progress-bar {
    background: var(--bg-tertiary);
    height: 48px;
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-md);
    border: 2px solid var(--border-medium);
    position: relative;
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-fill {
    background: var(--gradient-success);
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--font-bold);
    font-size: var(--font-size-base);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4),
                0 4px 12px var(--success-glow);
    position: relative;
    overflow: hidden;
}

.progress-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.3),
        transparent);
    border-radius: var(--radius-full) var(--radius-full) 0 0;
}

.progress-text {
    text-align: center;
    font-weight: var(--font-bold);
    color: var(--primary);
    font-size: var(--font-size-base);
}

/* CHECKLIST SECTIONS - Modern Cards with Depth */
.checklist-section {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    transition: box-shadow var(--transition-base);
}

.checklist-section:hover {
    box-shadow: var(--shadow-lg);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--border-light);
}

.section-header h2 {
    color: var(--primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    line-height: var(--line-height-tight);
}

.section-status {
    padding: var(--space-sm) var(--space-xl);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 2px solid transparent;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.section-status:hover {
    transform: scale(1.05);
}

.status-incomplete {
    background: var(--gradient-gold);
    color: white;
    border-color: var(--accent-dark);
    box-shadow: var(--shadow-glow-gold);
}

.status-complete {
    background: var(--gradient-success);
    color: white;
    border-color: var(--success);
    box-shadow: 0 4px 12px var(--success-glow);
}

.status-na {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--border-medium) 100%);
    color: var(--text-primary);
    border-color: var(--border-dark);
}

/* CHECKLIST ITEMS - Enhanced with Neumorphism */
.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    padding: var(--space-xl);
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-secondary) 100%);
    border-radius: var(--radius-xl);
    border: 2px solid var(--border-light);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.checklist-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.checklist-item:hover {
    background: linear-gradient(135deg,
        rgba(15, 82, 255, 0.04) 0%,
        rgba(139, 92, 246, 0.06) 100%);
    border-color: var(--primary-light);
    transform: translateX(8px);
    box-shadow: var(--shadow-lg);
}

.checklist-item:hover::before {
    opacity: 1;
}

.checklist-item:last-child {
    margin-bottom: 0;
}

/* Hide checklist items with .hidden class */
.checklist-item.hidden {
    display: none !important;
}

/* General hidden class for all elements */
.hidden {
    display: none !important;
}

.checkbox-container {
    display: flex;
    align-items: center;
    min-width: 32px;
    padding-top: 2px;
}

input[type="checkbox"] {
    width: 32px;
    height: 32px;
    accent-color: var(--primary);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

input[type="checkbox"]:hover {
    transform: scale(1.15);
    box-shadow: var(--shadow-md);
}

input[type="checkbox"]:checked {
    accent-color: var(--primary);
    animation: checkboxPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkboxPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3) rotate(5deg); }
    75% { transform: scale(0.95) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Checkbox Card - Special styling for prominent checkboxes like Non-Partisan Office */
.checkbox-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    background: white;
    border-radius: var(--radius-lg);
    border: 3px solid var(--border-light);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    margin: var(--space-lg) 0;
    position: relative;
}

.checkbox-card:hover {
    border-color: var(--primary);
    background: var(--bg-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.checkbox-card:has(input[type="checkbox"]:checked) {
    border-color: var(--primary);
    background: var(--info-light);
    box-shadow: var(--shadow-md), 0 0 0 3px rgba(43, 74, 111, 0.1);
}

.checkbox-card:has(input[type="checkbox"]:checked)::before {
    content: "";
    position: absolute;
    right: var(--space-xl);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-2xl);
    color: var(--primary);
    font-weight: var(--font-bold);
}

.checkbox-card input[type="checkbox"] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.checkbox-card label {
    font-size: var(--font-size-md);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    cursor: pointer;
    margin: 0;
    flex: 1;
}

.checkbox-card:has(input[type="checkbox"]:checked) label {
    color: var(--primary);
    font-weight: var(--font-bold);
}

.checklist-content {
    flex: 1;
    min-width: 0; /* Allow flex item to shrink below content size */
}

/* Mobile checklist fixes - reduce nested padding */
@media (max-width: 768px) {
    .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    .checklist-section {
        padding: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .checklist-item {
        flex-direction: column !important;
        gap: 0.5rem !important;
        padding: 0.75rem !important;
        overflow: visible !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .checklist-content {
        width: 100% !important;
        overflow: visible !important;
    }
    .checklist-title,
    .checklist-description {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    .section-collapsible-content {
        padding: 0 !important;
        overflow: visible !important;
    }
    /* Fix tables on mobile */
    table {
        font-size: 0.7rem !important;
        word-wrap: break-word !important;
    }
    td, th {
        padding: 0.4rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100px !important;
    }
}

.checklist-title {
    font-weight: var(--font-bold);
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
    letter-spacing: -0.015em;
    /* Fix mobile text wrapping */
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    hyphens: auto;
}

.checklist-description {
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    /* Fix mobile text wrapping */
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    hyphens: auto;
}

.checklist-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    flex-wrap: wrap;
}

/* BUTTONS - Bold & Interactive */
.form-link, .primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    min-height: 52px;
    background: var(--gradient-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    max-width: 100%;
    text-align: center;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
    font-weight: var(--font-bold);
    transition: all var(--transition-base);
    border: 2px solid transparent;
    box-shadow: var(--shadow-md), var(--shadow-glow);
    position: relative;
    overflow: visible;
    cursor: pointer;
}

.form-link:hover, .primary-button:hover {
    background: var(--primary-red);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.info-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    background: white;
    color: var(--primary);
    text-decoration: none;
    border: 3px solid var(--primary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: var(--font-bold);
    transition: all var(--transition-base);
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.info-link:hover {
    background: var(--primary-red);
    color: white;
    border-color: var(--primary-red);
}

.cta-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--gradient-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-badge);
    font-weight: var(--font-bold);
    font-size: var(--font-size-base);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
    border: none;
}

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

.cta-button:active {
    background: var(--secondary-dark);
    box-shadow: var(--shadow-sm);
    transform: translateY(0);
}

/* ALERT BOXES - Clean & Professional */
.warning-box {
    background: var(--warning-light);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    border: 1px solid #FDE68A;
}

.warning-box strong {
    color: var(--warning);
    font-weight: var(--font-semibold);
    display: block;
    margin-bottom: var(--space-sm);
}

.warning-box p, .warning-box li {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

/* Alert Box */
.alert-box {
    background: var(--danger-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    border: 1px solid #FCA5A5;
    border-left: 4px solid var(--danger);
}

.alert-box strong {
    color: var(--danger);
    font-weight: var(--font-semibold);
    display: block;
    margin-bottom: var(--space-sm);
}

.alert-box p, .alert-box li {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

/* Success Box */
.success-box {
    background: var(--success-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    border: 1px solid rgba(217, 74, 67, 0.2);
    border-left: 4px solid var(--success);
}

.success-box strong {
    color: var(--success);
    font-weight: var(--font-semibold);
    display: block;
    margin-bottom: var(--space-sm);
}

.success-box p, .success-box li {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

/* Info Box */
.info-box {
    background: var(--info-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    border: 1px solid #BFDBFE;
    border-left: 4px solid var(--info);
}

.info-box strong {
    color: var(--info);
    font-weight: var(--font-semibold);
    display: block;
    margin-bottom: var(--space-sm);
}

.info-box p, .info-box li {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

/* ===== INTERACTIVE PATH SELECTION BOXES ===== */
.path-box-selectable {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.path-box-selectable:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2),
                0 0 0 3px rgba(59, 130, 246, 0.3),
                0 0 20px rgba(59, 130, 246, 0.4) !important;
    animation: borderGlow 1.5s ease-in-out infinite;
}

@keyframes borderGlow {
    0%, 100% {
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2),
                    0 0 0 3px rgba(59, 130, 246, 0.3),
                    0 0 20px rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2),
                    0 0 0 4px rgba(59, 130, 246, 0.5),
                    0 0 30px rgba(59, 130, 246, 0.6);
    }
}

.path-box-selected {
    border-width: 4px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.path-box-selected::after {
    content: '✓';
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    background: var(--success);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.path-click-hint {
    text-align: center;
    font-size: var(--font-size-base);
    color: var(--primary);
    margin-top: var(--space-md);
    font-weight: var(--font-bold);
    opacity: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* DECISION TREE - Interactive Flow */
.decision-tree {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-xl);
    border: 2px solid var(--border-light);
    position: relative;
    overflow: hidden;
}

.decision-tree::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-cyan);
}

.question {
    background: linear-gradient(135deg,
        rgba(15, 82, 255, 0.03) 0%,
        rgba(6, 182, 212, 0.05) 100%);
    padding: var(--space-lg) var(--space-2xl);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-xl);
    border: 2px solid var(--border-accent);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.question:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--cyan);
}

.question h3 {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    line-height: var(--line-height-tight);
}

.answer-options {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.answer-btn {
    padding: var(--space-md) var(--space-2xl);
    background: white;
    border: 3px solid var(--primary);
    color: var(--primary);
    border-radius: var(--radius-full);
    font-weight: var(--font-bold);
    font-size: var(--font-size-base);
    transition: all var(--transition-base);
    font-family: inherit;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    min-height: 48px; /* WCAG 2.1 AA touch target size */
    cursor: pointer;
}

.answer-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    transition: left var(--transition-base);
    z-index: -1;
}

.answer-btn:hover {
    color: white;
    border-color: var(--primary-dark);
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.answer-btn:hover::before {
    left: 0;
}

.answer-btn:active {
    transform: translateY(-1px) scale(0.98);
}

.answer-btn.selected {
    color: white;
    background: var(--gradient-primary);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.answer-btn.selected::before {
    left: 0;
}

/* RESULTS PANEL - Dramatic Reveal */
.results-panel {
    display: none;
    background: linear-gradient(135deg,
        rgba(217, 74, 67, 0.08) 0%,
        rgba(245, 230, 211, 0.3) 100%);
    padding: var(--space-lg) var(--space-2xl);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-sm);
    border: 3px solid var(--primary-red);
    box-shadow: var(--shadow-xl), 0 0 30px rgba(217, 74, 67, 0.3);
    position: relative;
    overflow: hidden;
}

.results-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--gradient-primary);
}

.results-panel.show {
    display: block;
    animation: slideDownBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideDownBounce {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.results-header {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-black);
    margin-bottom: var(--space-sm);
    letter-spacing: -0.025em;
}

/* PRODUCT CARDS - Bold & Floating */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
    margin: var(--space-3xl) 0;
}

.product-card {
    background: var(--bg-light);
    border-radius: var(--radius-2xl);
    padding: var(--space-3xl);
    box-shadow: var(--shadow-xl);
    text-align: center;
    transition: all var(--transition-slow);
    border: 2px solid var(--primary-cream);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Center the 3rd product card (Campaign Communications) */
.product-card:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 50%;
}

/* Reassurance Badges */
.reassurance-badges {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}

.badge-pill {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-badge);
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.badge-time {
    background: linear-gradient(135deg, #2B4A6F 0%, #4A6FA0 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(43, 74, 111, 0.3);
}

.badge-free {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.badge-safe {
    background: linear-gradient(135deg, #D94A43 0%, #B83932 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(217, 74, 67, 0.3);
}

.badge-account {
    background: linear-gradient(135deg, #F5E6D3 0%, #E8D4BA 100%);
    color: #2B4A6F;
    box-shadow: 0 2px 6px rgba(245, 230, 211, 0.4);
}

/* Safety Message */
.safety-message {
    background: linear-gradient(135deg, rgba(43, 74, 111, 0.08) 0%, rgba(74, 111, 160, 0.12) 100%);
    border: 2px solid #2B4A6F;
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    font-weight: var(--font-semibold);
    color: #2B4A6F;
    font-size: var(--font-size-sm);
    text-align: center;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-slow);
}

.product-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: var(--shadow-2xl), var(--shadow-glow);
    border-color: var(--primary-red);
    background: white;
}

.product-card:hover::before {
    transform: scaleX(1);
}

.product-card .icon {
    font-size: 5rem;
    margin-bottom: var(--space-xl);
    filter: grayscale(30%);
    transition: all var(--transition-slow);
    transform: scale(1);
}

.product-card:hover .icon {
    filter: grayscale(0%) drop-shadow(0 8px 16px rgba(15, 82, 255, 0.3));
    transform: scale(1.1) rotate(-5deg);
}

/* PRODUCT CARD IMAGES - Professional Custom Images */
.product-card-image {
    width: 100%;
    max-width: 400px;
    height: 280px;
    object-fit: cover;
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-slow);
    border: 3px solid var(--border-light);
}
.product-card:hover .product-card-image {
    transform: scale(1.05) translateY(-8px);
    box-shadow: var(--shadow-2xl), 0 20px 40px rgba(15, 82, 255, 0.2);
    border-color: var(--primary);
}

.product-card h2 {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-extrabold);
    margin-bottom: var(--space-lg);
    line-height: var(--line-height-tight);
    letter-spacing: -0.025em;
}

.product-card p {
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-lg);
    font-weight: var(--font-medium);
}

.product-card .success-box {
    margin-top: auto;
}

/* FOOTER - Bold & Modern */
footer {
    background: #2B4A6F;
    color: white;
    padding: var(--space-lg) var(--space-xl);
    margin-top: var(--space-2xl);
    border-top: 1px solid var(--border-dark);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer-content p {
    line-height: var(--line-height-relaxed);
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-sm);
}

.footer-content h4 {
    color: white;
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-lg);
}

.footer-content strong {
    color: var(--primary-light);
}

.footer-disclaimer {
    margin-bottom: var(--space-xl);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

.footer-disclaimer p {
    margin-bottom: var(--space-md);
    color: rgba(255, 255, 255, 0.9);
}

.footer-disclaimer a {
    color: #FCD34D;
    text-decoration: underline;
}

.footer-disclaimer strong {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: var(--font-size-lg);
    font-weight: var(--font-extrabold);
    display: inline;
}

/* CREDIBILITY FOOTER - Team Bios */
.footer-credibility {
    padding: var(--space-xl) 0;
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-credibility h3 {
    text-align: center;
    color: white;
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-lg);
}

.credibility-bios {
    display: flex;
    justify-content: center;
    gap: var(--space-2xl);
    flex-wrap: wrap;
}

.credibility-bio {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    max-width: 400px;
}

.credibility-bio img {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.credibility-bio .bio-text {
    text-align: left;
}

.credibility-bio .bio-name {
    color: white;
    font-weight: var(--font-semibold);
    font-size: var(--font-size-base);
    margin-bottom: 0.25rem;
}

.credibility-bio .bio-title {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

@media (max-width: 768px) {
    .credibility-bios {
        flex-direction: column;
        align-items: center;
        gap: var(--space-lg);
    }

    .credibility-bio {
        width: 100%;
        max-width: 320px;
    }
}

.footer-dev-tools {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 1.5rem;
}

/* DISCLAIMER BANNER - Eye-Catching */
.disclaimer-banner {
    background: var(--gradient-gold);
    border-bottom: 4px solid var(--accent-dark);
    padding: var(--space-lg) var(--space-xl);
    text-align: center;
    color: var(--bg-dark);
    font-weight: var(--font-extrabold);
    font-size: var(--font-size-base);
    box-shadow: var(--shadow-md);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .container {
        padding: var(--space-lg);
    }

    .nav-container {
        padding: 0.125rem var(--space-lg);
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.5rem;
        --font-size-2xl: 1.25rem;
    }

    /* Larger touch targets on mobile */
    .answer-btn {
        min-height: 56px;
        padding: var(--space-lg) var(--space-2xl);
        font-size: var(--font-size-lg);
    }

    input[type="checkbox"] {
        width: 40px;
        height: 40px;
    }

    .hero {
        padding: var(--space-xl) var(--space-lg);
    }

    .hero h1 {
        font-size: var(--font-size-3xl);
    }

    .hero p {
        font-size: var(--font-size-base);
    }

    .nav-links {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: var(--space-lg);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 999;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    .nav-links.mobile-open {
        transform: translateX(0);
    }

    /* Simpler mobile navigation labels */
    .nav-links a {
        padding: var(--space-lg);
        border-bottom: 1px solid var(--border);
        width: 100%;
        font-size: var(--font-size-lg);
        min-height: 56px;
        display: flex;
        align-items: center;
    }

    .nav-links a:last-child {
        border-bottom: none;
    }

    /* User menu mobile styles */
    .user-menu-container {
        width: 100%;
        padding: var(--space-md) 0;
        border-bottom: 1px solid var(--border);
    }

    .user-menu {
        width: 100%;
    }

    .user-menu-trigger {
        width: 100%;
        justify-content: space-between;
        min-height: 56px;
        font-size: var(--font-size-lg);
    }

    .user-menu-items {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: var(--bg-tertiary);
        margin-top: var(--space-sm);
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

    .user-menu-items.open {
        display: block;
    }

    .user-menu-items a,
    .user-menu-items button {
        padding: var(--space-lg);
        font-size: var(--font-size-base);
        min-height: 56px;
    }

    .nav-sign-in {
        width: 100%;
        justify-content: center;
        min-height: 56px;
        font-size: var(--font-size-lg);
        margin: var(--space-md) 0;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .logo {
        font-size: var(--font-size-lg);
    }

    .container {
        padding: var(--space-md);
    }

    .progress-container {
        padding: var(--space-lg);
    }

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

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }

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

    .answer-options {
        flex-direction: column;
    }

    .answer-btn {
        width: 100%;
    }

    .checklist-item {
        flex-direction: column;
        gap: var(--space-md);
    }

    .checklist-actions {
        flex-direction: column;
    }

    .form-link, .info-link, .primary-button, .btn-secondary, .toggle-btn {
        width: 100%;
        justify-content: center;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .product-card {
        padding: var(--space-xl);
    }

    /* Full width for 3rd product card on mobile */
    .product-card:nth-child(3) {
        max-width: 100%;
    }

    /* Larger CTAs on mobile */
    .cta-button {
        padding: var(--space-lg) var(--space-2xl);
        font-size: var(--font-size-lg);
        min-height: 56px;
        font-weight: var(--font-bold);
    }

    /* Mobile badge adjustments */
    .badge-pill {
        font-size: 0.65rem;
        padding: 0.3rem 0.6rem;
    }

    /* Mobile safety message */
    .safety-message {
        font-size: var(--font-size-sm);
        padding: var(--space-sm);
    }

    /* Mobile table optimizations */
    .table-responsive table {
        font-size: 0.75rem;
        min-width: 500px;
    }

    .table-responsive th,
    .table-responsive td {
        padding: 0.5rem 0.4rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .table-responsive th {
        font-size: 0.7rem;
        line-height: 1.2;
    }

    /* Mobile header adjustments */
    h4 {
        font-size: 1.1rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.3;
    }

    h3 {
        font-size: 1.3rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Ensure toggle buttons in compliance page wrap properly */
    #contributionLimitsToggleBtn,
    #expenditureCeilingsToggleBtn {
        white-space: normal;
        word-wrap: break-word;
        min-height: 50px;
        padding: 0.75rem 1rem;
        text-align: center;
        line-height: 1.3;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: var(--font-size-2xl);
    }

    .container {
        padding: var(--space-sm);
    }

    .checklist-section {
        padding: var(--space-md);
    }

    .checklist-item {
        padding: var(--space-md);
    }
}

/* UTILITY CLASSES - Logo-Inspired Elements */

/* Cream highlight sections */
.cream-section {
    background: var(--primary-cream);
    padding: var(--space-2xl);
    border-radius: var(--radius-xl);
    border: 2px solid var(--accent-light);
}

/* Badge-style elements */
.badge-element {
    border-radius: var(--radius-badge);
    padding: var(--space-sm) var(--space-lg);
    background: var(--primary-red);
    color: white;
    font-weight: var(--font-bold);
    display: inline-block;
}

/* Warm card elevation */
.card-warm {
    background: var(--bg-light);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: 0 4px 12px rgba(217, 74, 67, 0.12);
    border: 1px solid var(--primary-cream);
    transition: all var(--transition-base);
}

.card-warm:hover {
    box-shadow: 0 8px 20px rgba(217, 74, 67, 0.18);
    transform: translateY(-2px);
}

/* Gradient text */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Quick Reference Form Links - Full Width */
.checklist-section ul .form-link {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 56px;
    height: auto;
    padding: 14px 20px;
    line-height: 1.625;
}

/* Info Tooltip Styles */
.info-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    cursor: default !important;
    vertical-align: middle;
}

.info-tooltip:hover {
    z-index: 100000;
}

.form-link:has(.info-tooltip:hover) {
    z-index: 100000;
}

.info-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--primary-light);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: var(--font-bold);
    vertical-align: middle;
}

.info-tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 12px);
    top: auto;
    /* Center tooltip without transform (prevents viewport clipping) */
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    /* Constrain to viewport edges - responsive width */
    max-width: calc(100vw - 40px);
    min-width: 200px;
    /* Mobile: fixed width to ensure text wrapping */
    width: min(320px, calc(100vw - 40px));
    background: var(--text-primary);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    z-index: 99999;
    transition: opacity 0.3s ease;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}

/* Desktop: restore compact tooltip width for better readability */
@media (min-width: 768px) {
    .info-tooltip-text {
        width: max-content;
        max-width: 400px;
    }
}

/* Vertical repositioning: flip to below when near top of viewport */
.info-tooltip-text[data-position="below"] {
    bottom: auto;
    top: calc(100% + 12px);
}

/* Programmatic visibility control for mobile/touch devices */
.info-tooltip-text.tooltip-visible {
    visibility: visible;
    opacity: 1;
}

.info-tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 0;
    border: 5px solid transparent;
    border-top-color: var(--text-primary);
    z-index: 99999;
}

/* Arrow flips when tooltip is positioned below */
.info-tooltip-text[data-position="below"]::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--text-primary);
}

.info-tooltip:hover .info-tooltip-text,
.info-tooltip-text:hover {
    visibility: visible;
    opacity: 1;
}

/* Keyboard focus state for accessibility */
.info-tooltip.keyboard-focus .info-tooltip-text {
    visibility: visible;
    opacity: 1;
}

.info-tooltip-icon:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Position specific tooltips below instead of above */
.info-tooltip-text.tooltip-below {
    bottom: auto;
    top: calc(100% + 12px);
}

/* Flip arrow for below-positioned tooltips */
.info-tooltip-text.tooltip-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--text-primary);
}

/* Inline tooltip content that appears below link text */
.inline-tooltip-content {
    display: none;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border-left: 3px solid var(--primary);
    border-radius: 4px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 100%;
    word-wrap: break-word;
}

/* Show inline tooltip on hover of parent list item */
li:hover .inline-tooltip-content {
    display: block;
}

/* Footnote Styles for Contribution Limits */
.footnote-ref {
    color: var(--primary);
    font-weight: 600;
    cursor: help;
    font-size: 0.85em;
    vertical-align: super;
    margin-left: 2px;
}

.contribution-footnotes {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #f9fafb;
    border-left: 3px solid #2B4A6F;
    font-size: 0.8rem;
    line-height: 1.6;
}

.contribution-footnotes p {
    margin: 0.25rem 0;
}

/* Inline Tooltip Styles for Technical Terms */
.tooltip-term {
    position: relative;
    display: inline;
    border-bottom: 1px dotted var(--primary);
    cursor: help;
    color: var(--primary);
    font-weight: var(--font-medium);
}

.tooltip-term .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    top: auto;
    /* Horizontal overflow prevention */
    left: 50%;
    transform: translateX(-50%);
    /* Constrain to viewport edges */
    max-width: calc(100vw - 24px);
    width: 280px;
    background: var(--text-primary);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    white-space: normal;
    word-wrap: break-word;
    z-index: 99999;
    transition: opacity 0.3s ease;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    text-align: left;
    line-height: 1.4;
}

/* Vertical repositioning: flip to below when near top of viewport */
.tooltip-term .tooltip-text[data-position="below"] {
    bottom: auto;
    top: calc(100% + 8px);
}

.tooltip-term .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--text-primary);
}

/* Arrow flips when tooltip is positioned below */
.tooltip-term .tooltip-text[data-position="below"]::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--text-primary);
}

.tooltip-term:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Mobile tooltip adjustments */
@media (max-width: 768px) {
    .tooltip-term .tooltip-text {
        max-width: 220px;
        min-width: 160px;
        font-size: var(--font-size-xs);
        padding: 0.4rem 0.6rem;
    }
}

/* CAMPAIGN JOURNEY WIDGET */
.campaign-journey-widget {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--border-light);
}

.journey-stages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.journey-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--transition-base);
    min-width: 120px;
    text-align: center;
}

.journey-stage:hover {
    background: var(--bg-light);
    transform: translateY(-4px);
}

.journey-stage.active {
    background: linear-gradient(135deg, rgba(217, 74, 67, 0.1) 0%, rgba(245, 230, 211, 0.2) 100%);
    border: 2px solid var(--primary-red);
}

.journey-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.journey-stage:hover .journey-circle,
.journey-stage.active .journey-circle {
    transform: scale(1.15);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.journey-label {
    font-weight: var(--font-bold);
    color: var(--primary);
    font-size: var(--font-size-base);
}

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

.journey-arrow {
    font-size: var(--font-size-2xl);
    color: var(--primary);
    font-weight: var(--font-bold);
}

/* Mobile Journey Widget */
@media (max-width: 768px) {
    .journey-stages {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .journey-arrow {
        transform: rotate(90deg);
        margin: 0;
    }

    .journey-stage {
        width: 100%;
        max-width: 280px;
    }
}

/* FAQ SECTION */
.faq-section {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--border-light);
}

.faq-grid {
    display: grid;
    gap: var(--space-lg);
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    border: 2px solid var(--border-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-base);
}

.faq-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.faq-question {
    width: 100%;
    background: var(--bg-light);
    border: none;
    padding: var(--space-lg) var(--space-xl);
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    font-family: inherit;
    transition: all var(--transition-base);
    min-height: 60px;
}

.faq-question:hover {
    background: var(--bg-tertiary);
}

.faq-question-text {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--primary);
    flex: 1;
}

.faq-toggle {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    color: var(--primary);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    transition: all var(--transition-base);
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
    background: var(--primary);
    color: white;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    background: white;
    padding: 0 var(--space-xl);
}

.faq-item.active .faq-answer {
    max-height: 600px;
    padding: var(--space-lg) var(--space-xl);
    border-top: 2px solid var(--border-light);
}

.faq-answer p {
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-base);
}

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

.faq-answer li {
    margin-bottom: var(--space-sm);
    line-height: var(--line-height-relaxed);
}

/* Mobile FAQ */
@media (max-width: 768px) {
    .faq-question {
        padding: var(--space-md) var(--space-lg);
    }

    .faq-question-text {
        font-size: var(--font-size-base);
    }

    .faq-answer {
        padding: 0 var(--space-lg);
    }

    .faq-item.active .faq-answer {
        padding: var(--space-md) var(--space-lg);
    }
}

/* WIZARD PROGRESS INDICATOR */
.wizard-progress-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
    background: linear-gradient(135deg, rgba(217, 74, 67, 0.05) 0%, rgba(245, 230, 211, 0.15) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

.wizard-progress-step {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--border-medium);
    transition: all var(--transition-base);
    position: relative;
}

.wizard-progress-step.active {
    background: var(--gradient-primary);
    box-shadow: 0 0 12px rgba(217, 74, 67, 0.4);
    transform: scale(1.2);
}

.wizard-progress-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 2px;
    background: var(--border-medium);
}

.wizard-progress-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--primary);
    margin-left: var(--space-md);
}

/* WIZARD RESET BUTTON - Navigation buttons in committee wizard */
.wizard-reset-button {
    padding: var(--space-sm) var(--space-lg);
    background: white;
    border: 2px solid var(--primary);
    color: var(--primary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    min-height: 40px;
}

.wizard-reset-button:hover {
    background: var(--bg-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.wizard-reset-button:active {
    transform: translateY(0);
}

.wizard-reset-button:disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
    transform: none;
}

/* COMMITTEE TYPE BADGE */
.committee-type-badge {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-md);
}

/* RESULTS SUMMARY CARD */
.results-summary-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    border: 2px solid var(--border-light);
    box-shadow: var(--shadow-md);
}

.summary-item {
    text-align: center;
    padding: var(--space-md);
}

.summary-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.summary-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-black);
    color: var(--primary);
    line-height: 1;
}

.summary-value-small {
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
}

/* RESPONSIVE - Wizard Elements */
@media (max-width: 768px) {
    .wizard-progress-indicator {
        flex-wrap: wrap;
        padding: var(--space-md);
    }

    .wizard-progress-step {
        width: 12px;
        height: 12px;
    }

    .wizard-progress-step:not(:last-child)::after {
        width: 16px;
    }

    .wizard-progress-text {
        width: 100%;
        text-align: center;
        margin: var(--space-sm) 0 0 0;
    }

    .wizard-reset-button {
        font-size: var(--font-size-xs);
        padding: var(--space-xs) var(--space-lg);
        min-height: 36px;
    }

    .committee-type-badge {
        font-size: var(--font-size-xs);
    }

    .results-summary-card {
        padding: var(--space-md);
    }

    .summary-value {
        font-size: var(--font-size-2xl);
    }
}

/* ==========================================
   CHATBOT WIDGET STYLES
   ========================================== */

/* Chatbot Toggle Button - Floating */
.chatbot-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-base);
    font-weight: var(--font-bold);
    font-family: inherit;
    box-shadow: var(--shadow-xl), 0 0 20px rgba(217, 74, 67, 0.4);
    cursor: pointer;
    z-index: 9998;
    transition: all var(--transition-base);
    animation: pulse 2s infinite;
}

.chatbot-toggle:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: var(--shadow-2xl), 0 0 30px rgba(217, 74, 67, 0.6);
}

@keyframes pulse {
    0%, 100% {
        box-shadow: var(--shadow-xl), 0 0 20px rgba(217, 74, 67, 0.4);
    }
    50% {
        box-shadow: var(--shadow-2xl), 0 0 35px rgba(217, 74, 67, 0.7);
    }
}

.chatbot-icon {
    height: 28px;
    width: auto;
}

.chatbot-badge {
    white-space: nowrap;
}

/* Chatbot Window */
.chatbot-window {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 420px;
    max-width: calc(100vw - 48px);
    height: 600px;
    max-height: calc(100vh - 100px);
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl), 0 0 40px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Chatbot Header */
.chatbot-header {
    background: var(--gradient-primary);
    color: white;
    padding: var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.chatbot-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.chatbot-avatar {
    height: 40px;
    width: auto;
}

.chatbot-header h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    margin: 0;
    color: white;
}

.chatbot-status {
    font-size: var(--font-size-xs);
    opacity: 0.9;
    margin: 0;
}

.chatbot-close-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: var(--font-size-2xl);
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatbot-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Chatbot Messages Area */
.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
    background: var(--bg-light);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.chatbot-messages::-webkit-scrollbar {
    width: 6px;
}

.chatbot-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chatbot-messages::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: var(--radius-full);
}

.chatbot-messages::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

/* Message Bubbles */
.chatbot-message {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-xl);
    max-width: 85%;
    animation: fadeIn 0.3s ease-out;
    line-height: var(--line-height-relaxed);
    white-space: pre-wrap;
}

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

.bot-message {
    background: white;
    color: var(--text-primary);
    border: 2px solid var(--border-light);
    align-self: flex-start;
    box-shadow: var(--shadow-sm);
}

.user-message {
    background: var(--gradient-primary);
    color: white;
    align-self: flex-end;
    box-shadow: var(--shadow-md);
}

/* Chatbot Options */
.chatbot-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    animation: fadeIn 0.4s ease-out;
}

.chatbot-option-btn {
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: left;
    box-shadow: var(--shadow-sm);
    min-height: 48px;
}

.chatbot-option-btn:hover {
    background: var(--primary);
    color: white;
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.chatbot-option-btn:active {
    transform: translateX(2px);
}

/* Chatbot Footer */
.chatbot-footer {
    padding: var(--space-md) var(--space-lg);
    background: white;
    border-top: 2px solid var(--border-light);
    display: flex;
    justify-content: center;
}

.chatbot-restart-btn {
    background: var(--bg-light);
    color: var(--primary);
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-full);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-base);
}

.chatbot-restart-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: scale(1.05);
}

/* Chatbot Link Button */
.chatbot-link-btn {
    display: inline-block;
    background: var(--gradient-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    text-decoration: none;
    font-weight: bold;
    margin-top: 0.5rem;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

.chatbot-link-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Mobile Chatbot Styles */
@media (max-width: 768px) {
    .chatbot-toggle {
        bottom: 16px;
        right: 16px;
        padding: var(--space-sm) var(--space-lg);
    }

    .chatbot-badge {
        display: none;
    }

    .chatbot-window {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .chatbot-message {
        max-width: 90%;
    }

    .chatbot-option-btn {
        font-size: var(--font-size-sm);
    }
}

/* ==========================================
   FORM 501 BUILDER MODAL STYLES
   ========================================== */

/* Modal Overlay */
.form-builder-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(43, 74, 111, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    animation: fadeIn 0.3s ease-out;
    overflow-y: auto;
    padding: var(--space-lg);
}

.form-builder-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal Container */
.form-builder-container {
    background: white;
    border-radius: var(--radius-2xl);
    max-width: min(90vw, 800px);
    width: 100%;
    box-shadow: var(--shadow-2xl), 0 0 60px rgba(217, 74, 67, 0.3);
    animation: slideUp 0.4s ease-out;
    position: relative;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Modal Header */
.form-builder-header {
    background: var(--gradient-primary);
    color: white;
    padding: var(--space-xl);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    position: relative;
    border-bottom: 3px solid var(--primary-red);
}

.form-builder-header h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    margin: 0 0 var(--space-sm) 0;
    color: white;
    line-height: var(--line-height-tight);
}

.form-builder-header p {
    font-size: var(--font-size-sm);
    margin: 0;
    opacity: 0.95;
    color: white;
    line-height: var(--line-height-relaxed);
}

.form-builder-close {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: var(--font-size-2xl);
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
}

.form-builder-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) scale(1.1);
}

/* Progress Indicator */
.form-builder-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: linear-gradient(135deg, rgba(217, 74, 67, 0.05) 0%, rgba(245, 230, 211, 0.15) 100%);
    border-bottom: 2px solid var(--border-light);
}

.progress-step {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.progress-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--border-medium);
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    font-size: var(--font-size-base);
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.progress-step.active .progress-step-circle {
    background: var(--gradient-primary);
    color: white;
    border-color: var(--primary-red);
    box-shadow: 0 0 16px rgba(217, 74, 67, 0.5);
    transform: scale(1.15);
}

.progress-step.completed .progress-step-circle {
    background: var(--gradient-success);
    color: white;
}

.progress-step-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    transition: color var(--transition-base);
}

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

.progress-step.completed .progress-step-label {
    color: var(--success);
}

.progress-connector {
    width: 40px;
    height: 2px;
    background: var(--border-medium);
    transition: background var(--transition-base);
}

.progress-step.completed + .progress-connector {
    background: var(--gradient-success);
}

/* Form Body */
.form-builder-body {
    padding: var(--space-2xl);
    overflow-y: auto;
    flex: 1;
    max-height: calc(90vh - 300px);
}

/* Form Builder Navigation (used across multiple form wizards) */
.form-builder-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.form-builder-nav .btn {
    flex-shrink: 0;
    width: auto;
    max-width: fit-content;
}

.form-builder-body::-webkit-scrollbar {
    width: 8px;
}

.form-builder-body::-webkit-scrollbar-track {
    background: var(--bg-light);
    border-radius: var(--radius-md);
}

.form-builder-body::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: var(--radius-md);
}

.form-builder-body::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Form Parts */
.form-part {
    display: none;
}

.form-part.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

.form-part h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--primary);
    margin: 0 0 var(--space-lg) 0;
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--border-light);
    line-height: var(--line-height-tight);
}

.form-part-description {
    background: var(--info-light);
    border-left: 4px solid var(--info);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--text-primary);
}

/* Form Rows */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.form-row.full-width {
    grid-template-columns: 1fr;
}

/* Form Groups */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Form Divider - Creates visual and spatial separation between form sections */
.form-divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--space-xl) 0;
    opacity: 0.5;
}

/* Voluntary Expenditure Limits Display */
.limits-box {
    background: linear-gradient(135deg, var(--info-light) 0%, var(--bg-light) 100%);
    border: 3px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin: var(--space-lg) 0;
    box-shadow: var(--shadow-md);
}

.limits-box h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--primary-dark);
    margin: 0 0 var(--space-lg) 0;
}

.office-selector-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

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

.office-selector {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-md);
    font-weight: var(--font-semibold);
    border: 2px solid var(--primary);
    border-radius: var(--radius-md);
    background: white;
    color: var(--primary);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.office-selector:hover {
    border-color: var(--primary-dark);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.office-selector:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-md), 0 0 0 3px rgba(43, 74, 111, 0.2);
}

.limits-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-lg) 0;
}

.limits-description strong {
    color: var(--primary);
    font-weight: var(--font-bold);
}

.limits-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.limits-table thead {
    background: var(--primary);
    color: white;
}

.limits-table th {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.limits-table td {
    padding: var(--space-lg) var(--space-lg);
    font-size: var(--font-size-md);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
}

.limits-table tbody tr:last-child td {
    border-bottom: none;
}

.limits-table tbody tr {
    transition: all var(--transition-base);
}

.limits-table tbody tr:hover {
    background: var(--bg-light);
}

.limits-table tbody tr.highlight {
    background: var(--success-light);
    font-weight: var(--font-bold);
    border-left: 5px solid var(--success);
}

.limits-table tbody tr.highlight td:first-child {
    padding-left: calc(var(--space-lg) - 5px);
}

.limits-table tbody tr.highlight td:last-child {
    color: var(--success);
    font-size: var(--font-size-lg);
}

.limits-note {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-style: italic;
    margin: var(--space-md) 0 0 0;
    line-height: 1.5;
}

/* Table responsive container for horizontal scrolling on mobile */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--space-md) 0;
}

.table-responsive table {
    min-width: 600px; /* Ensure table doesn't get too small */
}

#exemptMessage {
    padding: var(--space-md);
    background: var(--warning-light);
    border: 2px solid var(--warning);
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Main question labels (direct children of form-group) - make more prominent */
.form-group > label {
    font-size: var(--font-size-md);
    font-weight: var(--font-bold);
    color: var(--primary-dark);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    line-height: 1.5;
}

/* Party Preference - Enhanced visibility */
#partyPreferenceGroup {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    border: 2px solid var(--border-light);
}

#partyPreferenceGroup > label {
    font-size: var(--font-size-md);
    font-weight: var(--font-bold);
    color: var(--primary-dark);
    margin-bottom: var(--space-sm);
}

.form-group label .required {
    color: var(--danger);
    font-weight: var(--font-bold);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    padding: var(--space-md);
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-family: inherit;
    transition: all var(--transition-base);
    background: white;
    color: var(--text-primary);
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="date"]:focus,
.form-group input[type="number"]:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(43, 74, 111, 0.1);
}

.form-group input[type="text"].error,
.form-group input[type="email"].error,
.form-group input[type="tel"].error,
.form-group input[type="date"].error,
.form-group input[type="number"].error,
.form-group select.error,
.form-group textarea.error {
    border-color: var(--danger);
}

.form-group textarea {
    min-height: 80px;
    resize: vertical;
}

.form-group select {
    cursor: pointer;
}

.form-hint {
    font-size: var(--font-size-xs);
    color: var(--text-light);
    line-height: var(--line-height-normal);
}

.form-error {
    font-size: var(--font-size-xs);
    color: var(--danger);
    font-weight: var(--font-semibold);
    display: none;
}

/* Override ALL browser validation styling - no red borders by default */
.form-group input:invalid,
.form-group input:valid {
    /* Force green for all non-empty inputs, gray for empty */
    box-shadow: none !important;
}

/* Default state - all inputs get gray border */
.form-group input[type="text"]:not(:focus),
.form-group input[type="email"]:not(:focus),
.form-group input[type="tel"]:not(:focus),
.form-group input[type="date"]:not(:focus),
.form-group input[type="number"]:not(:focus) {
    border-color: var(--border-medium) !important;
}

/* When focused, show primary color */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="date"]:focus,
.form-group input[type="number"]:focus {
    border-color: var(--primary) !important;
}

/* JavaScript can add 'is-valid' class for green borders if needed */
.form-group input.is-valid {
    border-color: var(--success) !important;
}

/* Only show red if explicitly marked with error class */
.form-group input.is-invalid {
    border-color: var(--danger) !important;
}

.form-error.show {
    display: block;
}

/* Checkbox Group - Enhanced Card Style */
.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: white;
    border-radius: var(--radius-lg);
    border: 3px solid var(--border-light);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.checkbox-group:hover {
    border-color: var(--primary);
    background: var(--bg-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.checkbox-group:has(input[type="checkbox"]:checked) {
    border-color: var(--primary);
    background: var(--info-light);
    box-shadow: var(--shadow-md), 0 0 0 3px rgba(43, 74, 111, 0.1);
}

.checkbox-group input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    accent-color: var(--primary);
    cursor: pointer;
}

.checkbox-group label {
    font-size: var(--font-size-base);
    font-weight: var(--font-normal);
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
    flex: 1;
    cursor: pointer;
}

.checkbox-group:has(input[type="checkbox"]:checked) label {
    font-weight: var(--font-semibold);
    color: var(--primary);
}

/* Radio Group - Enhanced Card Style */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: white;
    border-radius: var(--radius-lg);
    border: 3px solid var(--border-light);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.radio-group label:hover {
    border-color: var(--primary);
    background: var(--bg-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.radio-group input[type="radio"] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--primary);
}

.radio-group input[type="radio"]:checked {
    accent-color: var(--primary);
}

.radio-group label:has(input[type="radio"]:checked) {
    border-color: var(--primary);
    background: var(--info-light);
    font-weight: var(--font-bold);
    color: var(--primary);
    box-shadow: var(--shadow-md), 0 0 0 3px rgba(43, 74, 111, 0.1);
}

.radio-group label:has(input[type="radio"]:checked)::before {
    content: "";
    position: absolute;
    right: var(--space-lg);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-xl);
    color: var(--primary);
    font-weight: var(--font-bold);
}

.radio-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-light);
    cursor: pointer;
    transition: all var(--transition-base);
    overflow: visible;
}

/* Ensure tooltips in radio options can extend outside */
.radio-option .radio-option-label,
.radio-option .radio-option-content {
    overflow: visible;
}

.radio-option .info-tooltip-text {
    max-width: min(450px, 90vw);
    white-space: normal;
}

/* Ensure radio-group and form containers allow tooltip overflow */
.radio-group,
.form-step,
.step-content {
    overflow: visible;
}

.radio-option:hover {
    border-color: var(--primary);
    background: white;
}

.radio-option input[type="radio"] {
    flex-shrink: 0;
    cursor: pointer;
}

.radio-option label {
    font-size: var(--font-size-base);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    cursor: pointer;
    flex: 1;
}

.radio-option input[type="radio"]:checked + label {
    font-weight: var(--font-bold);
    color: var(--primary);
}

/* Signature Section */
.signature-section {
    background: linear-gradient(135deg, rgba(217, 74, 67, 0.05) 0%, rgba(245, 230, 211, 0.15) 100%);
    border: 2px solid var(--primary-cream);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    margin-top: var(--space-xl);
}

.signature-section h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--primary);
    margin: 0 0 var(--space-md) 0;
}

.signature-section p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    line-height: var(--line-height-relaxed);
}

/* Form Footer */
.form-builder-footer {
    padding: var(--space-xl);
    background: var(--bg-light);
    border-top: 2px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

.form-builder-footer button {
    padding: var(--space-md) var(--space-2xl);
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: var(--font-bold);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-base);
    border: 2px solid transparent;
    min-height: 48px;
    min-width: 120px;
}

/* Primary Button - Main Actions (Next, Continue) */
.form-builder-footer .btn-primary {
    background: linear-gradient(135deg, #2B4A6F 0%, #3A5A87 50%, #D94A43 100%);
    color: white;
    box-shadow: var(--shadow-md), 0 0 15px rgba(43, 74, 111, 0.3);
    border: 2px solid transparent;
}

.form-builder-footer .btn-primary:hover {
    background: var(--primary-red);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(217, 74, 67, 0.4);
}

.form-builder-footer .btn-primary:active {
    transform: translateY(0);
}

.form-builder-footer .btn-primary:disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
    transform: none;
}

/* Secondary Button - Secondary Actions (Previous, Reset) */
.form-builder-footer .btn-secondary {
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
    box-shadow: var(--shadow-sm);
}

.form-builder-footer .btn-secondary:hover {
    background: var(--bg-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.form-builder-footer .btn-secondary:active {
    transform: translateY(0);
}

.form-builder-footer .btn-secondary:disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
    transform: none;
}

/* Success Button - Final Action (Generate PDF) */
.form-builder-footer .btn-success {
    background: linear-gradient(135deg, #D94A43 0%, #E67B75 50%, #D94A43 100%);
    color: white;
    box-shadow: var(--shadow-md), 0 0 15px rgba(217, 74, 67, 0.3);
    border: 2px solid transparent;
}

.form-builder-footer .btn-success:hover {
    background: var(--secondary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 25px rgba(217, 74, 67, 0.5);
}

.form-builder-footer .btn-success:active {
    transform: translateY(0);
}

.form-builder-footer .btn-success:disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
    transform: none;
}

/* Save Draft Button */
.save-draft-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-medium);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-sm);
    min-width: auto;
}

.save-draft-btn:hover {
    background: var(--bg-light);
    color: var(--primary);
    border-color: var(--primary);
}

/* Sample Data Loader - Testing Only */
.sample-data-container {
    background: var(--accent-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-xl);
    margin: var(--space-lg) var(--space-xl);
    border: 2px dashed var(--border-medium);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.sample-data-container .label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
}

.sample-data-buttons {
    display: flex;
    gap: var(--space-sm);
}

.btn-sample {
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-base);
    min-height: 36px;
    box-shadow: var(--shadow-sm);
}

.btn-sample:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-sample:active {
    transform: translateY(0);
}

/* Tooltip Styles */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-bold);
    cursor: help;
    margin-left: var(--space-xs);
    position: relative;
}

.help-icon:hover {
    background: var(--primary-red);
    transform: scale(1.1);
}

.help-tooltip {
    position: absolute;
    bottom: 100%;
    top: auto;
    /* Horizontal overflow prevention */
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    /* Constrain to viewport edges */
    max-width: calc(100vw - 24px);
    width: 280px;
    background: var(--primary-dark);
    color: white;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-normal);
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
}

/* Vertical repositioning: flip to below when near top of viewport */
.help-tooltip[data-position="below"] {
    bottom: auto;
    top: 100%;
    transform: translateX(-50%) translateY(8px);
}

.help-icon:hover .help-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

.help-icon:hover .help-tooltip[data-position="below"] {
    transform: translateX(-50%) translateY(4px);
}

.help-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--primary-dark);
}

/* Arrow flips when tooltip is positioned below */
.help-tooltip[data-position="below"]::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--primary-dark);
}

/* Inline Notification System */
.inline-notification {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin: var(--space-md) 0;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--font-size-sm);
    animation: slideInDown 0.3s ease-out;
}

.inline-notification.success {
    background: var(--success-light);
    border: 2px solid var(--success);
    color: var(--text-primary);
}

.inline-notification.error {
    background: var(--danger-light);
    border: 2px solid var(--danger);
    color: var(--text-primary);
}

.inline-notification.info {
    background: var(--info-light);
    border: 2px solid var(--info);
    color: var(--text-primary);
}

.inline-notification.warning {
    background: var(--warning-light);
    border: 2px solid var(--warning);
    color: var(--text-primary);
}

.inline-notification .icon {
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.inline-notification .message {
    flex: 1;
}

.inline-notification .close-btn {
    background: none;
    border: none;
    color: inherit;
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition-base);
}

.inline-notification .close-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

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

/* Mobile Responsive */
@media (max-width: 768px) {
    .form-builder-modal {
        padding: 0;
    }

    .form-builder-container {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .form-builder-header {
        border-radius: 0;
        padding: var(--space-lg);
    }

    .form-builder-header h2 {
        font-size: var(--font-size-xl);
        padding-right: var(--space-3xl);
    }

    .form-builder-header p {
        font-size: var(--font-size-xs);
    }

    .form-builder-close {
        top: var(--space-md);
        right: var(--space-md);
        width: 36px;
        height: 36px;
    }

    .form-builder-progress {
        padding: var(--space-md);
        gap: var(--space-sm);
        flex-wrap: wrap;
    }

    .progress-step {
        gap: var(--space-sm);
    }

    .progress-step-circle {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-sm);
    }

    .progress-step-label {
        font-size: var(--font-size-xs);
    }

    .progress-connector {
        width: 20px;
    }

    .form-builder-body {
        padding: var(--space-lg);
        max-height: calc(100vh - 350px);
    }

    .form-part h3 {
        font-size: var(--font-size-lg);
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        margin-bottom: var(--space-md);
    }

    .form-builder-footer {
        padding: var(--space-lg);
        flex-direction: column-reverse;
        gap: var(--space-sm);
    }

    .form-builder-footer button {
        width: 100%;
        min-width: auto;
    }

    .save-draft-btn {
        width: auto;
        align-self: center;
    }

    .sample-data-container {
        flex-direction: column;
        padding: var(--space-md);
        margin: var(--space-md);
        text-align: center;
    }

    .sample-data-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-sample {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .form-builder-header h2 {
        font-size: var(--font-size-base);
    }

    .form-part h3 {
        font-size: var(--font-size-base);
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: var(--font-size-sm);
    }

    .progress-step-label {
        display: none;
    }

    .progress-connector {
        width: 12px;
    }
}

/* Print Styles */
@media print {
    nav, footer, .cta-button, .chatbot-toggle, .chatbot-window, .form-builder-modal {
        display: none;
    }

    .hero {
        background: white;
        color: black;
        border-bottom: 2px solid var(--border-dark);
    }

    .checklist-section {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--border-dark);
    }
}

/* ============================================
   PHASE 1: FORM VALIDATION STYLES
   ============================================ */

/* Input validation states */
.field-valid {
    border-color: var(--primary) !important;
    background-color: var(--info-light);
}

.field-invalid {
    border-color: #dc3545 !important;
    background-color: #fff5f5;
}

/* Validation indicators (checkmark/X) */
.field-indicator {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: bold;
    pointer-events: none;
    z-index: 10;
}

.field-indicator-valid {
    color: var(--primary);
}

.field-indicator-invalid {
    color: #dc3545;
}

/* Validation error message */
.field-validation-message {
    display: block;
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.375rem;
    font-weight: 500;
    animation: slideDown 0.2s ease-out;
}

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Form group positioning for indicators */
.form-group {
    position: relative;
}

/* Ensure input has padding for indicator */
.field-valid,
.field-invalid {
    padding-right: 40px !important;
}

/* Focus states with validation */
.field-valid:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(43, 74, 111, 0.1);
}

.field-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .field-indicator {
        right: 10px;
        font-size: 16px;
    }

    .field-validation-message {
        font-size: 0.8125rem;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .field-valid {
        border-width: 3px;
        border-color: var(--primary-dark) !important;
    }

    .field-invalid {
        border-width: 3px;
        border-color: #8b0000 !important;
    }

    .field-indicator-valid {
        color: var(--primary-dark);
    }

    .field-indicator-invalid {
        color: #8b0000;
    }
}

/* ============================================
   PHASE 2: HELP TOOLTIPS & ENHANCED CONTROLS
   ============================================ */

/* Help icon (?) button/span */
.help-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    border: 2px solid var(--primary);
    border-radius: 50%;
    color: var(--primary);
    font-size: 12px;
    font-weight: bold;
    cursor: help;
    margin-left: 6px;
    vertical-align: middle;
    background: white;
    position: relative;
    transition: all 0.2s ease;
}

.help-icon:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.1);
}

/* Help tooltip */
.help-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 1000;
    bottom: calc(100% + 8px);
    top: auto;
    /* Horizontal overflow prevention */
    left: 50%;
    transform: translateX(-50%);
    /* Constrain to viewport edges */
    max-width: calc(100vw - 24px);
    width: 280px;
    background: var(--primary-dark, #1a365d);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    font-weight: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Vertical repositioning: flip to below when near top of viewport */
.help-tooltip[data-position="below"] {
    bottom: auto;
    top: calc(100% + 8px);
}

/* Tooltip arrow */
.help-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--primary-dark, #1a365d);
}

/* Arrow flips when tooltip is positioned below */
.help-tooltip[data-position="below"]::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--primary-dark, #1a365d);
}

/* Show tooltip on hover */
.help-icon:hover .help-tooltip,
.help-icon:focus .help-tooltip {
    visibility: visible;
    opacity: 1;
    bottom: calc(100% + 12px);
}

/* Button-style help icon (for data-tooltip attribute) */
button.help-icon,
span.help-icon {
    border: 2px solid var(--primary);
    padding: 0;
    background: white;
}

button.help-icon:hover,
span.help-icon:hover {
    background: var(--primary);
    color: white;
}

/* Tooltip for button-style help icons */
button.help-icon[data-tooltip],
span.help-icon[data-tooltip] {
    position: relative;
}

button.help-icon[data-tooltip]::before,
span.help-icon[data-tooltip]::before {
    content: attr(data-tooltip);
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 1000;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-dark, #1a365d);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    width: 280px;
    max-width: 90vw;
    text-align: left;
    font-weight: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    white-space: normal;
}

button.help-icon[data-tooltip]::after,
span.help-icon[data-tooltip]::after {
    content: '';
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: calc(100% - 16px);
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    border: 6px solid transparent;
    border-top-color: var(--primary-dark, #1a365d);
    transition: all 0.3s ease;
    z-index: 1001;
}

button.help-icon[data-tooltip]:hover::before,
button.help-icon[data-tooltip]:focus::before,
button.help-icon[data-tooltip]:hover::after,
button.help-icon[data-tooltip]:focus::after,
span.help-icon[data-tooltip]:hover::before,
span.help-icon[data-tooltip]:hover::after {
    visibility: visible;
    opacity: 1;
}

button.help-icon[data-tooltip]:hover::before,
button.help-icon[data-tooltip]:focus::before,
span.help-icon[data-tooltip]:hover::before {
    bottom: calc(100% + 12px);
}

/* Mobile tooltip adjustments.
   The tooltip's base rule centers it on the icon (left:50%; transform:
   translateX(-50%)). For an icon placed near the right edge of a narrow
   viewport (e.g. at the end of a sentence), a centered 240px-wide box
   pushes well past the screen edge — and critically, even hidden
   (visibility:hidden/opacity:0), an absolutely-positioned box that extends
   past 100vw can expand the browser's layout viewport beyond the visual
   viewport, which then corrupts the width of every unrelated fixed-position
   element on the page (the site nav bar and its mobile dropdown menu both
   compute against that inflated viewport instead of the real one — found on
   disclaimer-wizard.html/la-disclaimer-wizard.html, whose hero tooltip text
   is long enough to trigger it).
   Fix: anchor the tooltip's right edge to the icon's right edge and let it
   grow only leftward, capped to the viewport width. This can only ever
   overflow the LEFT edge for an icon within ~240px of the page's left edge —
   a far less common layout than icons trailing off at a line's end — and
   never regresses the icon's on-screen position, just which direction the
   box extends. Confirmed via a documentElement.clientWidth-based test that
   this eliminates the layout-viewport-expansion bug entirely. */
@media (max-width: 768px) {
    .help-tooltip,
    button.help-icon[data-tooltip]::before,
    span.help-icon[data-tooltip]::before {
        width: 240px;
        max-width: calc(100vw - 32px);
        left: auto;
        right: 0;
        transform: none;
        font-size: 12px;
        padding: 10px 12px;
    }

    button.help-icon[data-tooltip]::after,
    span.help-icon[data-tooltip]::after {
        left: auto;
        right: 8px;
        transform: translateY(-100%);
    }

    .help-icon {
        width: 18px;
        height: 18px;
        line-height: 16px;
        font-size: 11px;
    }
}

/* Touch device support - show tooltip on tap */
@media (hover: none) and (pointer: coarse) {
    .help-icon:active .help-tooltip,
    button.help-icon[data-tooltip]:active::before,
    button.help-icon[data-tooltip]:active::after,
    span.help-icon[data-tooltip]:active::before,
    span.help-icon[data-tooltip]:active::after {
        visibility: visible;
        opacity: 1;
    }
}

/* ============================================================================
   FORM VALIDATION STYLES
   ============================================================================ */

/* Validation States */
.form-group input.valid,
.form-group select.valid,
.form-group textarea.valid {
    border-color: var(--success);
    background-color: rgba(217, 74, 67, 0.02);
}

.form-group input.invalid,
.form-group select.invalid,
.form-group textarea.invalid {
    border-color: var(--danger);
    background-color: rgba(239, 68, 68, 0.02);
}

/* Validation Icons */
.form-group {
    position: relative;
}

.form-group .validation-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    pointer-events: none;
}

.form-group.has-label-above .validation-icon {
    top: calc(50% + 12px);
}

.form-group .validation-icon.valid {
    color: var(--success);
}

.form-group .validation-icon.invalid {
    color: var(--danger);
}

/* Validation Messages */
.validation-message {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

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

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

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

/* Hide validation for untouched fields */
.form-group input:not(.touched),
.form-group select:not(.touched),
.form-group textarea:not(.touched) {
    border-color: var(--border);
    background-color: white;
}

.form-group input:not(.touched) + .validation-icon,
.form-group select:not(.touched) + .validation-icon,
.form-group textarea:not(.touched) + .validation-icon {
    display: none;
}

/* Focus states */
.form-group input.valid:focus,
.form-group select.valid:focus,
.form-group textarea.valid:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(217, 74, 67, 0.1);
}

.form-group input.invalid:focus,
.form-group select.invalid:focus,
.form-group textarea.invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ==================================================================== */
/* ACCESSIBILITY & UX ENHANCEMENTS */
/* ==================================================================== */

/* Help Tooltips - Subtle Inline Icons */
.help-icon {
    display: inline;
    padding: 0;
    margin-left: 0.25rem;
    background: transparent;
    color: #374151;
    opacity: 0.6;
    border: none;
    cursor: pointer;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1;
    transition: opacity 0.2s ease;
    position: relative;
    vertical-align: baseline;
}

.help-icon:hover,
.help-icon:focus {
    opacity: 1;
    color: var(--primary);
}

.help-icon:active {
    opacity: 0.8;
}

/* Mobile: Larger touch target for accessibility */
@media (max-width: 768px) {
    .help-icon {
        padding: 0.5rem;
        margin: 0 0.25rem;
    }
}

/* Help Tooltip Content */
.help-tooltip {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: #2B4A6F;
    color: white;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    max-width: 300px;
    font-size: 0.875rem;
    line-height: 1.5;
    animation: tooltipFadeIn 0.2s ease;
}

.help-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 1.5rem;
    border: 6px solid transparent;
    border-bottom-color: #2B4A6F;
}

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

/* Mobile: Stack tooltips better */
@media (max-width: 768px) {
    .help-tooltip {
        position: fixed;
        left: 1rem;
        right: 1rem;
        top: auto;
        bottom: 1rem;
        max-width: none;
        margin: 0;
    }

    .help-tooltip::before {
        display: none;
    }
}

/* Validation Messages - Enhanced */
.validation-message {
    display: block;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    line-height: 1.4;
}

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

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

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

/* Disabled States - Standardized */
button:disabled,
.btn:disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
    transform: none;
}

button.loading {
    position: relative;
    color: transparent;
}

button.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid white;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spinner 0.6s linear infinite;
}

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

/* External Link Indicators */
a[target="_blank"]::after {
    content: '';
    font-size: 0.875em;
    opacity: 0.7;
    margin-left: 0.125rem;
}

/* Mobile Touch Targets - Ensure 44x44px minimum */
@media (max-width: 768px) {
    button,
    .btn,
    .help-icon,
    a.button,
    input[type="submit"],
    input[type="button"],
    input[type="radio"] + label,
    input[type="checkbox"] + label {
        min-height: 44px;
        min-width: 44px;
    }

    /* Radio and checkbox labels */
    .radio-group label,
    .checkbox-card {
        padding: 1rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Form rows should stack on mobile */
    .form-row {
        flex-direction: column;
    }

    .form-row .form-group {
        width: 100%;
        margin-bottom: 1rem;
    }
}

/* Focus Indicators - Additional elements (main rules in accessibility section below) */
.help-icon:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .help-tooltip {
        border: 2px solid white;
    }

    button,
    .btn {
        border: 2px solid currentColor;
    }
}

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

/* Color Contrast Improvements */
.text-secondary {
    color: #374151; /* Ensure WCAG AA contrast ratio */
}

/* Standardized Button Classes */
.primary-button,
.btn-primary {
    background: var(--primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.primary-button:hover,
.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.secondary-button,
.btn-secondary {
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.secondary-button:hover,
.btn-secondary:hover {
    background: var(--bg-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--border);
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-outline:hover {
    background: var(--bg-light);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.btn-success {
    background: var(--success);
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-success:hover {
    background: var(--success-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Modal Z-Index Standardization */
.form-builder-modal {
    z-index: 10000;
}

#form501FilingModal {
    z-index: 10001;
}

#digitalSignatureModal {
    z-index: 10002;
}

/* ARIA Live Regions */
[aria-live="polite"],
[aria-live="assertive"],
[role="status"],
[role="alert"] {
    position: relative;
}

/* Improved spacing consistency */
.form-builder-modal .form-builder-body > div {
    margin-bottom: 1.5rem;
}

.info-box,
.success-box,
.warning-box,
.error-box {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.success-box {
    background: var(--success-light);
    border-left: 4px solid var(--success);
}

/* Remove success-box border on mobile for cleaner display */
@media (max-width: 768px) {
    .success-box.nomination-timeline-container {
        border-left: none !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
}

.warning-box {
    background: var(--warning-light);
    border-left: 4px solid var(--warning);
}

.error-box {
    background: var(--danger-light);
    border-left: 4px solid var(--danger);
}

.info-box {
    background: var(--info-light);
    border-left: 4px solid var(--info);
}

/* Part 3 Enhanced Visual Hierarchy */
#form501Part3 .form-builder-header {
    border-bottom: 3px solid var(--primary);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

#form501Summary {
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--bg-light) 0%, white 100%);
    border: 2px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

#form501Summary strong {
    color: var(--primary);
    font-size: 1.1rem;
}

/* Improved tooltip positioning to prevent layout shift */
label {
    position: relative;
    display: inline-block;
}

.help-icon + .help-tooltip {
    position: absolute;
    left: calc(100% + 0.5rem);
    top: 0;
}

/* For narrower screens, position below instead */
@media (max-width: 768px) {
    .help-icon + .help-tooltip {
        left: 0;
        top: calc(100% + 0.5rem);
    }
}

/* ============================================
   CALENDAR EXPORT & EMAIL REMINDERS
   ============================================ */

/* Bulk Action Buttons - Large Primary Style */
.deadline-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--space-md) var(--space-lg);
    min-height: 52px;
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-bold);
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
}

.deadline-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.deadline-action-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-md);
}

.deadline-action-btn svg {
    flex-shrink: 0;
}

/* Calendar Button - Primary Gradient */
.calendar-btn {
    background: var(--gradient-primary);
    color: white;
}

.calendar-btn:hover {
    background: linear-gradient(135deg, #1E3A5F 0%, #1E3A5F 95%, #B83C36 100%);
}

/* Email Button - Red Gradient */
.email-btn {
    background: linear-gradient(135deg, #D94A43 0%, #E67B75 100%);
    color: white;
}

.email-btn:hover {
    background: linear-gradient(135deg, #B83C36 0%, #D94A43 100%);
}

/* Individual Card Action Buttons - Small Compact Style */
.deadline-card-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: var(--font-semibold);
    border-radius: var(--radius-badge);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

.deadline-card-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.deadline-card-action-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.deadline-card-action-btn svg {
    flex-shrink: 0;
}

/* Small Calendar Button */
.calendar-btn-small {
    background: var(--gradient-primary);
    color: white;
}

.calendar-btn-small:hover {
    background: linear-gradient(135deg, #1E3A5F 0%, #1E3A5F 95%, #B83C36 100%);
}

/* Small Email Button */
.email-btn-small {
    background: linear-gradient(135deg, #D94A43 0%, #E67B75 100%);
    color: white;
}

.email-btn-small:hover {
    background: linear-gradient(135deg, #B83C36 0%, #D94A43 100%);
}

/* Toast Notifications for Calendar Export */
.calendar-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: white;
    color: var(--text-primary);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border-left: 4px solid var(--primary);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-medium);
    max-width: 400px;
    z-index: 10000;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.calendar-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.calendar-toast-success {
    border-left-color: var(--primary-red);
}

.calendar-toast-error {
    border-left-color: var(--danger);
    background: var(--danger-light);
}

/* Email Modal Styles */
.email-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 1rem;
}

.email-modal-overlay.show {
    opacity: 1;
}

.email-modal-overlay.closing {
    opacity: 0;
}

.email-modal {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    max-width: 500px;
    width: 100%;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.email-modal-overlay.show .email-modal {
    transform: scale(1);
}

.email-modal-header {
    padding: 1.5rem;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.email-modal-header h3 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
}

.email-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.email-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.email-modal-body {
    padding: 2rem 1.5rem;
}

.email-modal-body p {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
}

.email-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: var(--font-size-base);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    margin-bottom: 1rem;
}

.email-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(43, 74, 111, 0.1);
}

.email-privacy-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--info-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.email-privacy-note svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--info);
}

.email-modal-footer {
    padding: 1rem 1.5rem;
    background: var(--bg-light);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.email-modal-btn {
    padding: 0.75rem 1.5rem;
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-lg);
    border: 2px solid;
    cursor: pointer;
    transition: all var(--transition-base);
}

.email-modal-cancel {
    background: white;
    color: var(--text-secondary);
    border-color: var(--border-medium);
}

.email-modal-cancel:hover {
    background: var(--bg-light);
    border-color: var(--border-dark);
}

.email-modal-send {
    background: var(--primary-red);
    color: white;
    border-color: var(--primary-red);
}

.email-modal-send:hover {
    background: var(--secondary-dark);
    border-color: var(--secondary-dark);
}

/* ============================================
   ENHANCED EMAIL & CALENDAR MODAL STYLES
   ============================================ */

/* Enhanced Modal - Larger size for new features */
.email-modal-enhanced,
.calendar-preview-modal {
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.calendar-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 1rem;
}

.calendar-preview-overlay.show {
    opacity: 1;
}

.calendar-preview-overlay.closing {
    opacity: 0;
}

.calendar-preview-modal {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    width: 100%;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.calendar-preview-overlay.show .calendar-preview-modal {
    transform: scale(1);
}

.calendar-preview-header,
.email-modal-enhanced .email-modal-header {
    padding: 1.5rem;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.calendar-preview-header h3,
.email-modal-enhanced .email-modal-header h3 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
}

.calendar-preview-close {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.calendar-preview-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Modal Body - Scrollable */
.email-modal-enhanced .email-modal-body,
.calendar-preview-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    max-height: calc(90vh - 200px);
}

/* Deadline Count Display */
.email-deadline-count,
.calendar-deadline-count {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.email-deadline-count strong,
.calendar-deadline-count strong {
    font-size: var(--font-size-lg);
    color: var(--primary);
}

.deadline-count-note {
    display: block;
    margin-top: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Section Styling */
.email-section,
.calendar-section {
    margin-bottom: 1.5rem;
}

.email-label,
.calendar-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

/* Committee Name Input */
.committee-name-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: var(--font-size-base);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    margin-bottom: 0.5rem;
}

.committee-name-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(43, 74, 111, 0.1);
}

.calendar-input-helper,
.email-input-helper {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-light);
    margin-top: -0.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

/* Validation Errors */
.email-validation-error {
    display: none;
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--danger-light);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-md);
    color: var(--danger);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
}

.email-input.input-error {
    border-color: var(--danger);
}

.email-input.input-error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Deadline Selection Header */
.deadline-selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.link-button {
    background: none;
    border: none;
    color: var(--primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.link-button:hover {
    background: var(--primary-light-bg);
    color: var(--primary-dark);
}

/* Deadline Checkbox List */
.deadline-checkbox-list {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-height: 400px;
    overflow-y: auto;
}

.deadline-checkbox-item {
    display: flex;
    align-items: start;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s ease;
}

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

.deadline-checkbox-item:hover {
    background: var(--bg-light);
}

.deadline-checkbox-item.deadline-past {
    opacity: 0.6;
}

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

.deadline-checkbox-content {
    flex: 1;
}

.deadline-checkbox-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.deadline-checkbox-header strong {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
}

.deadline-date {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}

.deadline-date.urgent {
    color: var(--danger);
    font-weight: var(--font-semibold);
}

.deadline-date.soon {
    color: #D97706;
    font-weight: var(--font-semibold);
}

.deadline-checkbox-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
}

.deadline-checkbox-meta span {
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-badge);
    background: var(--bg-light);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
}

.days-until.urgent {
    background: #FEE2E2;
    color: #DC2626;
}

.days-until.soon {
    background: #FEF3C7;
    color: #D97706;
}

.days-until.upcoming {
    background: #DBEAFE;
    color: #2563EB;
}

.days-until.past {
    background: #F3F4F6;
    color: #6B7280;
}

.deadline-form {
    background: #EFF6FF;
    color: #2B4A6F;
}

.deadline-reminders {
    background: #F0FDF4;
    color: #059669;
}

.deadline-recurring {
    background: #FEF3C7;
    color: #D97706;
}

/* Email Preview Section */
.email-preview-section {
    margin: 1.5rem 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.email-preview-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    cursor: pointer;
    background: var(--bg-light);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    user-select: none;
    transition: background 0.2s ease;
}

.email-preview-toggle:hover {
    background: #E5E7EB;
}

.preview-icon {
    transition: transform 0.2s ease;
}

.email-preview-section[open] .preview-icon {
    transform: rotate(180deg);
}

.email-preview-content {
    padding: 1rem;
    border-top: 1px solid var(--border);
    background: white;
}

.preview-subject {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    font-size: var(--font-size-base);
}

.preview-body {
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.preview-empty {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* Email Options */
.email-options {
    margin: 1.5rem 0 0 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Calendar Platform Selection */
.calendar-platform-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.calendar-platform-option {
    display: flex;
    align-items: start;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.calendar-platform-option:hover {
    border-color: var(--primary);
    background: var(--bg-light);
}

.calendar-platform-option:has(input:checked) {
    border-color: var(--primary);
    background: #EFF6FF;
}

.calendar-platform-option input[type="radio"] {
    margin-top: 0.25rem;
    cursor: pointer;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--primary);
}

.calendar-platform-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.calendar-platform-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.calendar-platform-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.calendar-platform-info strong {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
}

.calendar-platform-desc {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* Calendar Info Box */
.calendar-info-box {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #EFF6FF;
    border-left: 3px solid #2B4A6F;
    border-radius: var(--radius-md);
    margin-top: 1.5rem;
}

.calendar-info-box svg {
    flex-shrink: 0;
    color: #2B4A6F;
    margin-top: 0.125rem;
}

.calendar-info-box strong {
    display: block;
    margin-bottom: 0.5rem;
    color: #1F2937;
}

.calendar-info-box ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: var(--font-size-sm);
    color: #374151;
    line-height: 1.6;
}

.calendar-info-box li {
    margin-bottom: 0.25rem;
}

/* Urgency Color Indicators */
.deadline-checkbox-item.deadline-urgent {
    border-left: 4px solid #DC2626;
    background: linear-gradient(90deg, #FEF2F2 0%, #FFFFFF 100%);
}

.deadline-checkbox-item.deadline-soon {
    border-left: 4px solid #F59E0B;
    background: linear-gradient(90deg, #FFFBEB 0%, #FFFFFF 100%);
}

.deadline-urgency-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: #DC2626;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.deadline-checkbox-item.deadline-soon .deadline-urgency-badge {
    background: #F59E0B;
}

/* Platform Help Icons */
.platform-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    margin-left: 0.375rem;
    cursor: help;
    position: relative;
}

.platform-help-icon:hover::after,
.platform-help-icon:focus::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    top: -100%;
    transform: translateX(-50%) translateY(-8px);
    background: #1F2937;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: normal;
    white-space: nowrap;
    max-width: 200px;
    white-space: normal;
    text-align: center;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.platform-help-icon:hover::before,
.platform-help-icon:focus::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -100%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #1F2937;
    z-index: 1000;
}

/* Improved Modal Scrolling */
.calendar-preview-body {
    max-height: calc(80vh - 140px);
    overflow-y: auto;
    padding: 1.5rem;
}

.calendar-preview-header,
.calendar-preview-footer {
    flex-shrink: 0;
}

.deadline-checkbox-list {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.deadline-checkbox-list::-webkit-scrollbar {
    width: 8px;
}

.deadline-checkbox-list::-webkit-scrollbar-track {
    background: #F3F4F6;
    border-radius: 4px;
}

.deadline-checkbox-list::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

.deadline-checkbox-list::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .calendar-preview-modal {
        width: 95%;
        max-width: none;
        max-height: 95vh;
    }

    .calendar-preview-body {
        max-height: calc(95vh - 140px);
        padding: 1rem;
    }

    .calendar-platform-option {
        padding: 0.875rem;
    }

    .deadline-checkbox-item {
        padding: 0.875rem;
    }

    .platform-help-icon:hover::after,
    .platform-help-icon:focus::after {
        max-width: 150px;
        font-size: 0.6875rem;
    }
}

/* Enhanced Modal Footer */
.email-modal-enhanced .email-modal-footer {
    padding: 1rem 1.5rem;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
    border-top: 1px solid var(--border);
}

.calendar-preview-footer {
    padding: 1rem 1.5rem;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-shrink: 0;
    border-top: 1px solid var(--border);
}

.email-modal-actions {
    display: flex;
    gap: 0.75rem;
}

.email-modal-secondary,
.calendar-preview-btn {
    padding: 0.75rem 1.5rem;
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-lg);
    border: 2px solid;
    cursor: pointer;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.email-modal-secondary {
    background: white;
    color: var(--primary);
    border-color: var(--primary);
}

.email-modal-secondary:hover {
    background: var(--primary);
    color: white;
}

.email-modal-secondary:disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

.calendar-preview-cancel {
    background: white;
    color: var(--text-secondary);
    border-color: var(--border-medium);
}

.calendar-preview-cancel:hover {
    background: var(--bg-light);
    border-color: var(--border-dark);
}

.calendar-preview-export {
    background: var(--gradient-primary);
    color: white;
    border-color: var(--primary);
}

.calendar-preview-export:hover {
    background: linear-gradient(135deg, #1E3A5F 0%, #1E3A5F 95%, #B83C36 100%);
}

.calendar-preview-export:disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .deadline-action-btn {
        font-size: 0.875rem;
        padding: 0.625rem 1.25rem;
    }

    .deadline-card-action-btn {
        font-size: 0.75rem;
        padding: 0.35rem 0.625rem;
    }

    .deadline-card-action-btn svg {
        width: 12px;
        height: 12px;
    }

    .calendar-toast {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: none;
    }

    .email-modal,
    .email-modal-enhanced,
    .calendar-preview-modal {
        margin: 0.5rem;
        max-width: none;
        max-height: 95vh;
    }

    .email-modal-body,
    .calendar-preview-body {
        max-height: calc(95vh - 180px);
    }

    .email-modal-footer {
        flex-direction: column;
    }

    .email-modal-btn {
        width: 100%;
    }

    .email-modal-enhanced .email-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .email-modal-actions {
        flex-direction: column;
        width: 100%;
    }

    .email-modal-actions .email-modal-btn {
        width: 100%;
    }

    .email-modal-secondary {
        order: -1;
    }

    .calendar-preview-footer {
        flex-direction: column;
    }

    .calendar-preview-btn {
        width: 100%;
    }

    .deadline-checkbox-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .deadline-date {
        align-self: flex-start;
    }

    .calendar-info-box {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Email modal mobile fixes - ensure email input is always visible */
    .email-section {
        flex-shrink: 0;
        margin-bottom: 1rem;
    }

    .email-input,
    .committee-name-input {
        font-size: 16px;
        min-height: 44px;
    }

    .email-label {
        font-size: 0.9375rem;
    }

    .deadline-checkbox-list {
        max-height: 250px;
    }

    .email-modal-enhanced .email-modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .email-preview-section {
        margin: 1rem 0;
    }
}

/* Email Suggestion Styling */
.email-suggestion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #eff6ff;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.email-suggestion .suggestion-text {
    flex: 1;
    color: #1e40af;
}

.email-suggestion strong {
    color: #1e3a8a;
    font-weight: 600;
}

.email-suggestion .suggestion-accept {
    padding: 0.375rem 0.875rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.email-suggestion .suggestion-accept:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.email-suggestion .suggestion-dismiss {
    padding: 0.25rem 0.5rem;
    background: transparent;
    color: #6b7280;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

.email-suggestion .suggestion-dismiss:hover {
    color: #374151;
}

/* Enhanced Keyboard Navigation */
.skip-to-content {
    position: absolute;
    left: -9999px;
    z-index: 10000;
    padding: 1rem 1.5rem;
    background: var(--primary);
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 8px 0;
}

.skip-to-content:focus {
    left: 0;
    top: 0;
}

/* Enhanced focus indicators (WCAG 2.4.7 Enhanced)
 * Consolidated focus rules - this is the canonical source.
 * Uses CSS variables: --focus-outline-width, --focus-outline-offset, --focus-outline-color, --focus-ring-shadow
 */
*:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Buttons and links get additional visual feedback */
button:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
    box-shadow: var(--focus-ring-shadow);
}

/* Form inputs - outline inside the border for cleaner look */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: 0;
    border-color: var(--focus-outline-color);
    box-shadow: var(--focus-ring-shadow);
}

/* Radio/checkbox - standard offset for circular elements */
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Google Places Autocomplete - Override black dropdown styling */
gmp-place-autocomplete {
    width: 100%;
    --gmp-list-item-background-color: white !important;
    --gmp-list-item-text-color: var(--text-primary) !important;
    --gmp-list-item-hover-background-color: var(--bg-light) !important;
    --gmp-list-item-selected-background-color: var(--primary-light) !important;
}

/* Override any remaining black backgrounds in autocomplete */
.pac-container,
.pac-item {
    background-color: white !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

.pac-item:hover {
    background-color: var(--bg-light) !important;
}

.pac-item-selected,
.pac-item-selected:hover {
    background-color: var(--primary-light) !important;
    color: white !important;
}

.pac-icon {
    filter: invert(0) !important;
}

.pac-matched {
    font-weight: 600 !important;
    color: var(--primary) !important;
}

/* Step Part Dividers - For multi-part steps like Committee Type & Name */
.step-part-divider {
    margin: 1.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-light);
}

.step-part-heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===========================================
   UNIFIED COMPONENT SYSTEM
   Standardized styles for UX consistency
   =========================================== */

/* Base Button Class */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Button Sizes */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: var(--font-size-lg);
}

/* Button with icon */
.btn svg,
.btn i {
    width: 1em;
    height: 1em;
}

/* Danger Button (for destructive actions) */
.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: #DC2626;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Ghost Button (minimal style) */
.btn-ghost {
    background: transparent;
    color: var(--primary);
    border: none;
}

.btn-ghost:hover:not(:disabled) {
    background: var(--bg-light);
}

/* Link styled as button */
.btn-link {
    background: transparent;
    color: var(--primary);
    padding: 0;
    font-weight: 500;
    text-decoration: underline;
}

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

/* ===========================================
   FORM INPUT STANDARDIZATION
   =========================================== */

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    background: white;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

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

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(43, 74, 111, 0.1);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    background: var(--bg-light);
    color: var(--text-light);
    cursor: not-allowed;
}

/* Input with error state */
.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
    border-color: var(--danger);
}

.form-input.is-error:focus,
.form-select.is-error:focus,
.form-textarea.is-error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Input with success state */
.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid {
    border-color: var(--success);
}

.form-input.is-valid:focus,
.form-select.is-valid:focus,
.form-textarea.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Form Label */
.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

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

/* Form Help Text */
.form-help {
    margin-top: 0.375rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Form Error Message */
.form-error {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
    font-size: var(--font-size-sm);
    color: var(--danger);
}

.form-error::before {
    content: '';
    width: 0.875rem;
    height: 0.875rem;
    background: var(--danger);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    flex-shrink: 0;
}

/* ===========================================
   LOADING STATES
   =========================================== */

.is-loading {
    position: relative;
    pointer-events: none;
}

.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.25rem;
    height: 1.25rem;
    margin: -0.625rem 0 0 -0.625rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spinner 0.6s linear infinite;
}

.btn.is-loading {
    color: transparent;
}

.btn.is-loading::after {
    border-color: white;
    border-top-color: transparent;
}

/* Skeleton loading placeholder */
.skeleton {
    background: linear-gradient(90deg, var(--bg-light) 25%, var(--border-light) 50%, var(--bg-light) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===========================================
   ALERT / NOTIFICATION COMPONENTS
   =========================================== */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    border-left: 4px solid;
    line-height: 1.5;
}

.alert-success {
    background: var(--success-light);
    border-left-color: var(--success);
    color: #065F46;
}

.alert-warning {
    background: var(--warning-light);
    border-left-color: var(--warning);
    color: #92400E;
}

.alert-danger {
    background: var(--danger-light);
    border-left-color: var(--danger);
    color: #991B1B;
}

.alert-info {
    background: var(--info-light);
    border-left-color: var(--info);
    color: #1E3A5F;
}

/* ===========================================
   CARD COMPONENT
   =========================================== */

.card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-light);
}

.card-body {
    padding: 1.5rem;
}

.card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--bg-light);
}

/* Card hover state (for clickable cards) */
.card-interactive {
    cursor: pointer;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

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

/* ===========================================
   MOBILE RESPONSIVENESS FIXES
   Audit fixes for breakpoints 480px, 768px
   =========================================== */

/* Form 501 Import Banner - Mobile Stack */
#form501ImportBanner {
    container-type: inline-size;
}

@media (max-width: 480px) {
    #form501ImportBanner > div {
        flex-direction: column !important;
        gap: 1rem;
    }

    #form501ImportBanner > div > div:last-child {
        flex-direction: column !important;
        width: 100%;
    }

    #form501ImportBanner button {
        width: 100%;
        min-height: 48px;
    }

    /* Close button positioning */
    #form501ImportBanner > div > button:last-child {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        width: auto;
        min-width: 44px;
        min-height: 44px;
    }

    #form501ImportBanner {
        position: relative;
        padding-top: 2.5rem !important;
    }
}

/* Table Responsive - Reduce min-width on mobile */
@media (max-width: 480px) {
    .table-responsive table {
        min-width: 100% !important;
    }

    .table-responsive th,
    .table-responsive td {
        padding: 0.5rem;
        font-size: var(--font-size-sm);
    }
}

/* Modal Mobile Improvements */
@media (max-width: 480px) {
    .form-builder-modal {
        padding: var(--space-sm);
    }

    .form-builder-content {
        padding: var(--space-md);
        max-height: 85vh;
        overflow-y: auto;
    }

    .form-builder-header {
        padding: var(--space-md);
    }

    .form-builder-body {
        padding: var(--space-md);
    }

    .form-builder-footer {
        padding: var(--space-md);
        flex-direction: column;
        gap: 0.5rem;
    }

    .form-builder-footer button {
        width: 100%;
    }
}

/* Close Buttons - Ensure 44px minimum touch target */
.form-builder-close,
.modal-close,
[aria-label="Close"],
[aria-label="Close banner"],
button[class*="close"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hero Text - Fluid Scaling */
.hero h1,
.hero-content h1 {
    font-size: clamp(1.75rem, 5vw, 3.5rem);
}

.hero p,
.hero-content p {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
}

/* ========================================
   CANDIDATE STATEMENT WORD COUNTER
   ======================================== */

/* Word Counter Base Styles */
.word-counter {
    transition: all 0.3s ease;
}

.word-counter.warning {
    background: rgba(254, 243, 199, 0.95) !important;
    color: #92400E !important;
    border-color: #F59E0B !important;
}

.word-counter.error {
    background: rgba(254, 226, 226, 0.95) !important;
    color: #EF4444 !important;
    border-color: #EF4444 !important;
    animation: pulse 0.5s ease-in-out;
}

/* Standardized Word Count Badge Styles */
.word-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.word-count-badge.state-valid {
    color: #059669;
    background: #D1FAE5;
}

.word-count-badge.state-warning {
    color: #D97706;
    background: #FEF3C7;
}

.word-count-badge.state-error {
    color: #DC2626;
    background: #FEE2E2;
}

.word-count-badge.state-neutral {
    color: #6B7280;
    background: #F3F4F6;
}

/* Progress Bar Standardized Styles */
.progress-bar-container {
    height: 8px;
    background: #E5E7EB;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.progress-bar-fill.state-valid {
    background: #059669;
}

.progress-bar-fill.state-warning {
    background: #F59E0B;
}

.progress-bar-fill.state-error {
    background: #DC2626;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Word Count Help Section */
.word-count-help {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--color-background-alt, #f5f5f5);
    border-radius: 4px;
}

.help-toggle {
    background: none;
    border: none;
    color: var(--primary, #2B4A6F);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0;
    text-align: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.2s ease;
}

.help-toggle:hover {
    text-decoration: underline;
}

.help-icon {
    transition: transform 0.2s;
    display: inline-block;
    margin-left: 0.5rem;
}

.help-toggle[aria-expanded="true"] .help-icon {
    transform: rotate(180deg);
}

.help-content {
    margin-top: 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.help-content h4 {
    margin-top: 0;
    color: var(--primary, #2B4A6F);
}

.help-content ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.help-content li {
    margin: 0.5rem 0;
}

/* Undo/Redo Buttons */
#undoStatementBtn,
#redoStatementBtn {
    color: var(--primary, #2B4A6F);
}

#undoStatementBtn:hover:not(:disabled),
#redoStatementBtn:hover:not(:disabled) {
    background: var(--primary, #2B4A6F);
    color: white;
    border-color: var(--primary, #2B4A6F);
}

#undoStatementBtn:disabled,
#redoStatementBtn:disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

#undoStatementBtn:focus,
#redoStatementBtn:focus {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Textarea States */
#candidateStatementText {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#candidateStatementText:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(43, 74, 111, 0.1);
}

#candidateStatementText.error {
    border-color: #EF4444 !important;
}

#candidateStatementText.warning {
    border-color: #F59E0B !important;
}

#candidateStatementText.error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

#candidateStatementText.warning:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* Logo Mobile Sizing */
@media (max-width: 768px) {
    .logo img {
        max-height: 100px;
        width: auto;
    }
}

@media (max-width: 480px) {
    .logo img {
        max-height: 80px;
    }
}

/* Toast Mobile Positioning */
@media (max-width: 480px) {
    .toast-container,
    [class*="toast"] {
        left: 10px !important;
        right: 10px !important;
        max-width: calc(100vw - 20px) !important;
    }
}

/* Grid Products - Single Column on Small Mobile */
@media (max-width: 360px) {
    .products-grid,
    .tools-grid,
    .features-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Landscape Mode Height Adjustments */
@media (max-height: 500px) and (orientation: landscape) {
    .chatbot-window {
        height: 100vh;
        max-height: 100vh;
    }

    .form-builder-content {
        max-height: 90vh;
    }

    .hero {
        min-height: auto;
        padding: var(--space-lg) 0;
    }
}

/* Form Group Spacing on Mobile */
@media (max-width: 768px) {
    .form-group {
        margin-bottom: 1.25rem;
    }

    .form-row {
        gap: 1rem;
    }
}

/* Ensure All Interactive Elements Have Touch-Friendly Size */
@media (max-width: 768px) {
    .icon-button,
    .help-icon,
    .info-icon,
    button[class*="icon"] {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }
}

/* User Menu Mobile - Reduce name width */
@media (max-width: 480px) {
    .user-menu-trigger .user-name {
        max-width: 100px;
    }
}

/* Small Mobile (480px) - Compact phones */
@media (max-width: 480px) {
    /* Reduce base padding */
    .container {
        padding: 0.75rem;
    }

    /* Hide user name on very small screens, show icon only */
    .user-menu-trigger .user-name {
        display: none;
    }

    /* Reduce hero padding */
    .hero {
        padding: var(--space-lg) var(--space-sm);
    }

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

    /* Compact form spacing */
    .form-group {
        margin-bottom: 1rem;
    }

    /* Smaller buttons */
    .btn {
        padding: 0.625rem 1rem;
        font-size: var(--font-size-sm);
    }

    /* Reduce card padding */
    .card-body {
        padding: 1rem;
    }

    /* Feedback widget - icon only */
    .feedback-toggle span {
        display: none;
    }

    .feedback-toggle {
        padding: 0.75rem;
        border-radius: 50%;
    }
}

/* ==========================================================================
   Candidate-filing verified cards (.cf-*)
   Shared by candidate-filing-checklist.html and setup.html's Local Candidate
   flow — both render lawyer-reviewed field-group cards via
   modules/candidate-filing.js (cityCardHtml). Keep in sync with that module.
   ========================================================================== */

.cf-city-card {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.cf-city-name {
    margin: 0 0 1.25rem;
    color: var(--primary);
    font-size: 1.5rem;
}

.cf-group {
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.cf-group-published { border-left: 4px solid var(--verified-accent); }
.cf-group-pending {
    border-left: 4px solid #D97706;
    background: #FFFBEB;
}
.cf-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.cf-group-label {
    font-weight: 700;
    color: #1F2937;
    font-size: 1.05rem;
}
.cf-verified-badge, .cf-pending-badge {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}
.cf-verified-badge { background: var(--verified-accent-light); color: var(--verified-accent); }
.cf-pending-badge { background: var(--warning-light); color: #92400E; }

.cf-fields { margin-top: 0.75rem; }
.cf-field-row {
    display: grid;
    grid-template-columns: minmax(120px, 200px) 1fr;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 0.95rem;
}
.cf-field-row:last-child { border-bottom: none; }
.cf-field-key {
    color: #64748B;
    font-weight: 600;
    word-break: break-word;
}
.cf-field-value {
    color: #1F2937;
    white-space: pre-line;
    word-break: break-word;
}

.cf-sources {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #E5E7EB;
    font-size: 0.85rem;
}
.cf-source a { color: var(--primary); }

.cf-pending-note {
    margin: 0.6rem 0 0.9rem;
    color: #78350F;
    font-size: 0.9rem;
    line-height: 1.5;
}
.cf-prioritize-btn {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.7rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.cf-prioritize-btn:hover:not(:disabled) { background: #1e3a5f; }
.cf-prioritize-btn:disabled { opacity: 0.65; cursor: default; }

.cf-empty { color: #94A3B8; font-style: italic; margin: 0; }

/* City-specifics block injected into setup.html step sections
   (modules/coverage-card.js cityStepBlockHtml) — state-language navy card,
   NOT a green addendum. */
.cf-city-block {
    background: white;
    border: 1px solid var(--border);
    border-left: 4px solid var(--verified-accent);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.25rem;
}
.cf-city-block-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--verified-accent);
    font-weight: 700;
    margin-bottom: 0.4rem;
}

/* Jurisdiction search-result buttons (setup.html + compliance.html).
   Verified = navy (state language); contact-only = amber (separate,
   legitimate status distinction). */
.cf-result-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    margin: 0.25rem 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
}
.cf-result-verified {
    background: var(--verified-accent-light);
    border: 2px solid var(--verified-accent);
    color: var(--verified-accent);
}
.cf-result-verified:hover { background: var(--verified-accent-hover); }
.cf-result-contact {
    background: #FFF7ED;
    border: 2px solid var(--warning);
    color: #92400E;
}
.cf-result-contact:hover { background: var(--warning-light); }
.cf-result-tag {
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}
.cf-result-verified .cf-result-tag { background: var(--verified-accent); }
.cf-result-contact .cf-result-tag { background: var(--warning); }

/* The one-and-only "Verified" pill in the jurisdiction banner. */
.cf-banner-badge {
    background: var(--verified-accent);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    margin-left: 0.5rem;
}

/* Prioritize-request panel + its post-submit confirmation
   (setup.html and compliance.html share this). */
.cf-request-panel {
    margin-top: 1rem;
    background: var(--info-light);
    border: 2px solid var(--primary);
    border-radius: 12px;
    padding: 1.25rem;
}
.cf-request-panel h4 {
    margin: 0 0 0.5rem 0;
    color: var(--primary);
    font-size: 1.05rem;
}
.cf-request-confirm {
    margin-top: 1rem;
    background: var(--info-light);
    border: 2px solid var(--primary);
    border-radius: 12px;
    padding: 1.25rem;
}
.cf-request-confirm p {
    margin: 0;
    color: var(--primary-dark);
    font-weight: 600;
}

@media (max-width: 768px) {
    .cf-field-row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* Jurisdiction-selector attention nudge (setup.html Step 0) -- highlight ring
   after a candidate picks "Local Office", so the jurisdiction search below
   can't be missed. Skippable, non-blocking; fires once then removes itself
   (see setup.js showJurisdictionSelectorSection). Coral, not navy (2026-07-18
   fix): the box already has a navy border + light-navy background, so a navy
   ring was low-contrast and easy to miss -- coral matches nothing else on
   this box, and the added scale gives a visible motion cue too. */
.jurisdiction-attention-pulse {
    animation: jurisdictionAttentionPulse 1s ease-in-out 3;
}
@keyframes jurisdictionAttentionPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(217, 74, 67, 0.6);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 12px rgba(217, 74, 67, 0);
    }
}

/* ── Evidence disclosure (contribution-logic.js) ─────────────────────────────
   Shows the verbatim ordinance text a displayed value was read from, so the
   reader can check our arithmetic against the source rather than trusting it. */
.evidence-disclosure {
    margin: 1.25rem 0;
    border: 1px solid #D1D9E6;
    border-radius: 6px;
    background: #F8FAFC;
}
.evidence-disclosure > summary {
    cursor: pointer;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--primary);
    font-size: 0.9375rem;
}
.evidence-disclosure > summary:hover { background: #EEF2F7; }
.evidence-disclosure > *:not(summary) { padding: 0 1rem; }
.evidence-item { padding-bottom: 0.75rem; }
.evidence-item h4 {
    margin: 0.75rem 0 0.375rem;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4B5B72;
}
.evidence-quote {
    margin: 0;
    padding: 0.625rem 0.875rem;
    border-left: 3px solid var(--primary);
    background: #fff;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #1E3350;
}
.evidence-absence {
    margin: 0;
    padding: 0.625rem 0.875rem;
    border-left: 3px solid #9AA5B5;
    background: #fff;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #40506A;
}
.evidence-citation {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    color: #6B7280;
}
.evidence-review-flag {
    margin: 0.75rem 0;
    padding: 0.625rem 0.875rem;
    border-left: 3px solid #B45309;
    background: #FFFBEB;
    font-size: 0.875rem;
    color: #7C4A11;
}
.evidence-footnote {
    margin: 0.5rem 0 0;
    padding-bottom: 1rem;
    font-size: 0.8125rem;
    color: #6B7280;
}
@media (max-width: 480px) {
    .evidence-quote, .evidence-absence { font-size: 0.875rem; }
}