/* ==========================================================================
   SAMClerk - Main Stylesheet
   A clean, professional government SaaS design (conservative SAM.gov-like)
   ========================================================================== */

/* ==========================================================================
   1. CSS Custom Properties (Design System Tokens)
   ========================================================================== */

:root {
    /* Primary Colors */
    --color-primary: #0071bc;
    --color-primary-hover: #205493;
    --color-primary-dark: #002d72;

    /* Accent Colors */
    --color-accent: #e22c2c;
    --color-accent-hover: #b91d1d;
    --color-accent-dark: #8b0000;

    /* Neutral Colors */
    --color-white: #ffffff;
    --color-gray-50: #f7f8f9;
    --color-gray-100: #f0f0f0;
    --color-gray-200: #dfe1e2;
    --color-gray-300: #d4d4d4;
    --color-gray-400: #a9aeb1;
    --color-gray-500: #71767a;
    --color-gray-600: #565c65;
    --color-gray-700: #3d4551;
    --color-gray-800: #2d2d2d;
    --color-gray-900: #1b1b1b;

    /* Semantic Colors */
    --color-success: #2e8540;
    --color-success-light: #e1f3e8;
    --color-info: #e1f3f8;
    --color-info-border: #297eb5;
    --color-warning: #fad980;
    --color-error: #b50909;
    --color-error-light: #fbecec;

    /* Typography */
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Font Sizes (8px rhythm) */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-md: 1.0625rem;
    /* 17px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 2rem;
    /* 32px */
    --text-4xl: 2.5rem;
    /* 40px */

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;

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

    /* Layout */
    --container-max: 1140px;
    --container-padding: var(--space-4);

    /* Borders */
    --border-width: 1px;
    --border-color: var(--color-gray-200);
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.12);

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

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-overlay: 1000;
    --z-modal: 10000;
    --z-toast: 10001;
}

/* ==========================================================================
   2. Reset & Base Styles
   ========================================================================== */

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

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--color-gray-600);
    background-color: var(--color-gray-100);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: var(--space-4);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-gray-700);
}

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

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

h3 {
    font-size: var(--text-xl);
}

h4 {
    font-size: var(--text-lg);
}

p {
    margin-top: 0;
    margin-bottom: var(--space-4);
}

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

a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

a:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

strong,
b {
    font-weight: var(--font-semibold);
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.container {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* ==========================================================================
   5. Header
   ========================================================================== */

header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-3) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

/* Branding Container */
.branding-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo {
    display: block;
}

.logo a {
    display: block;
    line-height: 0;
}

.logo a:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.logo img {
    width: 220px;
    height: auto;
    max-width: 250px;
    min-width: 120px;
}

/* Header Navigation */
.header-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    align-items: center;
}

.header-nav li {
    margin: 0;
}

/* Default nav link style - neutral */
.header-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--color-gray-700);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    white-space: nowrap;
    min-height: 38px;
    border: 1px solid transparent;
}

.header-nav a:hover {
    color: var(--color-primary);
    background-color: var(--color-gray-50);
}

.header-nav a:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Active page indicator */
.header-nav a[aria-current="page"] {
    color: var(--color-primary);
    background-color: rgba(0, 113, 188, 0.08);
}

/* Sign Up - Primary CTA */
.header-nav a.nav-signup {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-semibold);
}

.header-nav a.nav-signup:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-white);
}

/* Login - Secondary style */
.header-nav a.nav-login {
    color: var(--color-primary);
    border: 1px solid var(--color-gray-300);
}

.header-nav a.nav-login:hover {
    border-color: var(--color-primary);
    background-color: var(--color-gray-50);
}

/* Logout Button */
.header-nav a.nav-logout {
    background-color: var(--color-gray-600);
    color: var(--color-white);
}

.header-nav a.nav-logout:hover {
    background-color: var(--color-gray-700);
}

/* -------------------- Settings Dropdown -------------------- */

.nav-dropdown {
    position: relative;
}

/* Toggle Button */
.nav-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    background-color: transparent;
    color: var(--color-gray-700);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    white-space: nowrap;
    min-height: 38px;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
}

.nav-dropdown__toggle:hover {
    color: var(--color-primary);
    background-color: var(--color-gray-50);
}

.nav-dropdown__toggle:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Active state when dropdown is open */
.nav-dropdown__toggle[aria-expanded="true"] {
    color: var(--color-primary);
    background-color: var(--color-gray-50);
}

/* Active state when on a Settings page */
.nav-dropdown__toggle[data-settings-active="true"] {
    color: var(--color-primary);
    background-color: rgba(0, 113, 188, 0.08);
}

/* Chevron icon */
.nav-dropdown__icon {
    flex-shrink: 0;
    font-size: 0.75em;
    transition: transform 150ms ease;
}

.nav-dropdown__toggle[aria-expanded="true"] .nav-dropdown__icon {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.nav-dropdown__menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    z-index: 100;
    min-width: 120px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1) 0;
    list-style: none;
    margin: 0;
    ;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

/* Show menu when toggle is expanded (JS fallback) */
.nav-dropdown__toggle[aria-expanded="true"]+.nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Show menu on hover (primary behavior) */
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    flex-direction: column;
    align-items: start;
}

/* Rotate chevron on hover */
.nav-dropdown:hover .nav-dropdown__icon,
.nav-dropdown:focus-within .nav-dropdown__icon {
    transform: rotate(180deg);
}

/* Menu items */
.nav-dropdown__menu li {
    margin: 0;
    width: 100%;
}

.nav-dropdown__menu a {
    display: block;
    padding: var(--space-2) var(--space-4);
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    border-left: 3px solid transparent;
    transition: background-color 100ms ease, border-color 100ms ease;
    width: 100%;
}

.nav-dropdown__menu a:hover {
    background-color: var(--color-gray-50);
    color: var(--color-gray-900);
}

.nav-dropdown__menu a:focus {
    outline: none;
    background-color: var(--color-gray-50);
    color: var(--color-primary);
}

/* Active/current page item */
.nav-dropdown__menu a[aria-current="page"] {
    background-color: rgba(0, 113, 188, 0.08);
    color: var(--color-primary);
    font-weight: var(--font-medium);
    border-left-color: var(--color-primary);
}

/* ==========================================================================
   6. Main Content
   ========================================================================== */

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-6) var(--space-10) var(--space-6);
    background-color: var(--color-white);
    min-height: calc(100vh - 200px);
}

main h1 {
    margin-top: 0;
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

footer,
.site-footer {
    background-color: #1e3a4c;
    /* Dark navy/charcoal */
    color: #e5e7eb;
    /* Off-white */
    padding: var(--space-10) var(--space-6);
    text-align: center;
}

.footer-inner,
.site-footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

footer p,
.site-footer p {
    margin: var(--space-2) 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: #b8bfc7;
    /* Softer text */
}

footer p:first-child,
.site-footer__brand {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    margin-bottom: var(--space-3);
    color: #e5e7eb;
    /* Brighter for brand line */
}

.site-footer__links {
    font-size: var(--text-sm);
    color: #b8bfc7;
}

footer a,
.site-footer a {
    color: #d1d5db;
    text-decoration: none;
}

footer a:hover,
.site-footer a:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

footer a:focus,
.site-footer a:focus {
    outline: 2px solid #e5e7eb;
    outline-offset: 2px;
}

/* ==========================================================================
   8. Buttons
   ========================================================================== */

button {
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: 1;
    padding: var(--space-3) var(--space-6);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    background-color: var(--color-primary);
    color: var(--color-white);
}

button:hover {
    background-color: var(--color-primary-hover);
}

button:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

button:disabled {
    background-color: var(--color-gray-300);
    color: var(--color-gray-500);
    cursor: not-allowed;
}

/* CTA Button */
.cta-button {
    display: inline-block;
    background-color: var(--color-accent);
    color: var(--color-white);
    padding: var(--space-4) var(--space-8);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-bold);
    font-size: var(--text-xl);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.cta-button:hover {
    background-color: var(--color-accent-hover);
    text-decoration: none;
    color: var(--color-white);
    transform: translateY(-2px);
}

.cta-button:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   9. Forms
   ========================================================================== */

form {
    max-width: 600px;
    margin: 0 auto;
}

label {
    display: block;
    margin-top: var(--space-4);
    font-weight: var(--font-medium);
    color: var(--color-gray-700);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: var(--space-2);
    margin-top: var(--space-1);
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-gray-700);
    background-color: var(--color-white);
    border: var(--border-width) solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 113, 188, 0.15);
}

input:disabled,
textarea:disabled {
    background-color: var(--color-gray-50);
    cursor: not-allowed;
}

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

.helper-text {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-top: var(--space-1);
}

/* Checkbox Group */
.checkbox-group {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.checkbox-group label {
    margin-top: 0;
    font-weight: var(--font-normal);
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    gap: var(--space-3);
    line-height: 1.5;
}

/* Custom Checkbox Styling */
.checkbox-group input[type="checkbox"],
.checkbox-label input[type="checkbox"] {
    /* Hide default checkbox */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Custom size */
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    min-height: 1.125rem;

    /* Styling */
    border: 2px solid var(--color-gray-400);
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    cursor: pointer;
    margin: 0.125rem 0 0 0;
    flex-shrink: 0;

    /* Transition */
    transition: all var(--transition-fast);

    /* Position for checkmark */
    position: relative;
}

/* Checkbox hover state */
.checkbox-group input[type="checkbox"]:hover,
.checkbox-label input[type="checkbox"]:hover {
    border-color: var(--color-primary);
    background-color: var(--color-gray-50);
}

/* Checkbox focus state */
.checkbox-group input[type="checkbox"]:focus,
.checkbox-label input[type="checkbox"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 113, 188, 0.2);
}

/* Checkbox checked state */
.checkbox-group input[type="checkbox"]:checked,
.checkbox-label input[type="checkbox"]:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Checkmark icon */
.checkbox-group input[type="checkbox"]:checked::after,
.checkbox-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Disabled state */
.checkbox-group input[type="checkbox"]:disabled,
.checkbox-label input[type="checkbox"]:disabled {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-300);
    cursor: not-allowed;
}

.checkbox-group input[type="checkbox"]:disabled:checked,
.checkbox-label input[type="checkbox"]:disabled:checked {
    background-color: var(--color-gray-400);
}

/* ==========================================================================
   10. Tables
   ========================================================================== */

table {
    width: auto;
    min-width: 50%;
    border-collapse: collapse;
    margin: var(--space-4) auto;
    background-color: var(--color-white);
}

th,
td {
    text-align: center;
    padding: var(--space-3) var(--space-6);
    border-bottom: var(--border-width) solid var(--color-gray-200);
}

th {
    background-color: var(--color-gray-100);
    font-weight: var(--font-bold);
    color: var(--color-gray-600);
}

.report-btn {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-1) var(--space-3);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    transition: background-color var(--transition-fast);
}

.report-btn:hover {
    background-color: var(--color-primary-hover);
    text-decoration: none;
}

/* ==========================================================================
   11. Cards
   ========================================================================== */

.card {
    background-color: var(--color-white);
    border: var(--border-width) solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.card h2 {
    margin-top: 0;
    margin-bottom: var(--space-2);
    font-size: var(--text-xl);
    color: var(--color-primary);
    display: flex;
    align-items: center;
}

.card p {
    margin: var(--space-2) 0;
    color: var(--color-gray-600);
}

.card .field-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: var(--border-width) solid var(--color-gray-100);
}

.card .field-item {
    font-size: var(--text-sm);
}

.card .field-label {
    font-weight: var(--font-bold);
    color: var(--color-gray-700);
}

/* ==========================================================================
   12. SAM-style Card Layout
   ========================================================================== */

.sam-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.sam-card-left {
    flex: 1;
    min-width: 300px;
}

.sam-card-right {
    flex: 0 0 220px;
    text-align: right;
    border-left: var(--border-width) solid var(--color-gray-100);
    padding-left: var(--space-5);
}

.agency-hierarchy {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

.agency-hierarchy strong {
    color: var(--color-gray-700);
}

.sam-date-group {
    margin-bottom: var(--space-3);
}

.sam-label {
    display: block;
    font-size: var(--text-base);
    color: var(--color-gray-600);
}

.sam-value {
    display: block;
    font-size: var(--text-base);
    color: var(--color-gray-700);
    font-weight: var(--font-bold);
}

/* ==========================================================================
   13. Banners & Alerts
   ========================================================================== */

.info-banner {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-info);
    border: var(--border-width) solid var(--color-gray-600);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    white-space: nowrap;
}

.info-banner span {
    margin-right: var(--space-2);
    font-size: 1.1em;
    font-weight: var(--font-bold);
}

.info-setaside {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-success);
    border: var(--border-width) solid var(--color-gray-600);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-white);
    white-space: nowrap;
}

.info-setaside span {
    margin-right: var(--space-2);
    font-size: 1.1em;
    font-weight: var(--font-bold);
}

.warning-banner {
    display: flex;
    align-items: center;
    background-color: var(--color-error-light);
    border: var(--border-width) solid var(--color-error);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    color: var(--color-error);
    margin-bottom: var(--space-4);
    width: 100%;
}

.warning-banner span {
    margin-right: var(--space-3);
    font-size: 1.2em;
    font-weight: var(--font-bold);
}

/* ==========================================================================
   14. Utility Classes
   ========================================================================== */

.back-btn {
    display: inline-block;
    margin-bottom: var(--space-4);
    color: var(--color-gray-600);
    text-decoration: none;
    font-size: var(--text-sm);
    border: var(--border-width) solid var(--color-gray-300);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background-color: var(--color-gray-50);
    transition: all var(--transition-fast);
}

.back-btn:hover {
    background-color: var(--color-gray-100);
    text-decoration: none;
    color: var(--color-primary);
}

.expand-arrow {
    text-decoration: none;
    font-size: var(--text-xl);
    margin-left: var(--space-1);
    color: var(--color-primary);
    vertical-align: middle;
}

.expand-arrow:hover {
    color: var(--color-primary-hover);
}

.title-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.title-container h1 {
    margin: 0;
}

/* Favorites */
.fav-icon {
    cursor: pointer;
    color: var(--color-gray-300);
    margin-right: var(--space-3);
    font-size: var(--text-2xl);
    line-height: 1;
    transition: color var(--transition-base);
}

.fav-icon.active {
    color: var(--color-accent);
}

.fav-icon:hover {
    color: var(--color-accent);
}

/* ==========================================================================
   15. Loading & Spinner
   ========================================================================== */

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: var(--z-toast);
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    border: 6px solid var(--color-gray-200);
    border-top: 6px solid var(--color-primary);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 0.8s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   16. Cookie Banner
   ========================================================================== */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-gray-700);
    color: var(--color-white);
    padding: var(--space-4);
    text-align: center;
    z-index: var(--z-toast);
    display: none;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.cookie-banner button {
    margin-top: 0;
    margin-left: var(--space-4);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

/* ==========================================================================
   17. Modals
   ========================================================================== */

.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal);
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

.custom-modal {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 90%;
    max-width: 400px;
    overflow: hidden;
    animation: modalFadeIn 0.2s ease-out;
}

.modal-header {
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-3) var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--font-bold);
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--color-white);
    font-size: var(--text-2xl);
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
}

#customModalOverlay .modal-close-btn {
    color: var(--color-white);
}

.modal-close-btn:hover {
    background: none;
    color: var(--color-gray-200);
}

.modal-body {
    padding: var(--space-5);
    font-size: var(--text-base);
    color: var(--color-gray-700);
}

.modal-footer {
    padding: var(--space-3) var(--space-4);
    border-top: var(--border-width) solid var(--color-gray-100);
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

.modal-ok-btn {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-top: 0;
    font-weight: var(--font-medium);
}

.modal-ok-btn:hover {
    background-color: var(--color-primary-hover);
}

/* Secondary modal button - replaces inline style on Log Out button */
.modal-btn-secondary {
    background-color: var(--color-gray-500);
}

.modal-btn-secondary:hover {
    background-color: var(--color-gray-600);
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   18. Dropdowns
   ========================================================================== */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--color-gray-50);
    min-width: 180px;
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    border-radius: var(--radius-sm);
    text-align: left;
    top: 100%;
}

.dropdown-content a {
    color: var(--color-gray-700) !important;
    background-color: transparent !important;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    display: block;
    margin: 0;
    font-weight: var(--font-normal);
}

.dropdown-content a:hover {
    background-color: var(--color-gray-200) !important;
    color: var(--color-gray-900) !important;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropbtn {
    cursor: pointer;
}

/* ==========================================================================
   19. NAICS Autocomplete
   ========================================================================== */

.autocomplete-container {
    position: relative;
    width: 100%;
}

.autocomplete-items {
    position: absolute;
    border: var(--border-width) solid var(--color-gray-300);
    border-top: none;
    z-index: var(--z-dropdown);
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    max-height: 200px;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
}

.autocomplete-items div {
    padding: var(--space-3);
    cursor: pointer;
    border-bottom: var(--border-width) solid var(--color-gray-300);
}

.autocomplete-items div:hover {
    background-color: var(--color-gray-100);
}

.selected-naics-list {
    list-style: none;
    padding: 0;
    margin-top: var(--space-5);
    border: var(--border-width) solid var(--color-gray-200);
    border-radius: var(--radius-sm);
}

.selected-naics-list li {
    padding: var(--space-3);
    border-bottom: var(--border-width) solid var(--color-gray-100);
    background-color: var(--color-gray-50);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.selected-naics-list li:hover {
    background-color: var(--color-error-light);
    color: var(--color-error);
}

.selected-naics-list li:last-child {
    border-bottom: none;
}

/* ==========================================================================
   20. HOME PAGE SPECIFIC STYLES
   ========================================================================== */

/* Home Container - replaces inline style */
.home-container {
    max-width: 1080px;
    margin: 0 auto;
}

/* Title Container Centered - replaces inline style */
.title-container--centered {
    justify-content: center;
    margin-bottom: var(--space-8);
}

/* Intro Paragraph - replaces inline style */
.intro-text {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

/* Section framing for the home page */
.section-divider {
    margin-top: var(--space-12);
    padding-top: var(--space-10);
    border-top: var(--border-width) solid var(--color-gray-200);
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.section-header h2 {
    font-size: var(--text-2xl);
    color: var(--color-gray-800);
    margin-bottom: var(--space-3);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    border-top: 3px solid rgb(198, 30, 30);
    border-bottom: 3px solid rgb(13, 74, 129);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.section-header p {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--space-4);
    color: var(--color-gray-500);
    max-width: 640px;
}

/* Hero */
.hero {
    margin-top: var(--space-6);
}

.hero-panel {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 55%, #f5f7f9 100%);
    border: var(--border-width) solid var(--color-gray-200);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
}

.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-gray-500);
    margin-bottom: var(--space-3);
}

.hero h1 {
    font-size: var(--text-4xl);
    color: var(--color-gray-900);
    margin-bottom: var(--space-4);
}

.hero-subtext {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-600);
    max-width: 720px;
    margin-bottom: var(--space-4);
}

.hero-highlights {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.hero-highlights li {
    background-color: var(--color-white);
    border: var(--border-width) solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast);
}

.hero-highlights li:hover {
    box-shadow: var(--shadow-md);
}

.hero-highlight__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.hero-highlight__title {
    display: block;
    font-weight: var(--font-semibold);
    color: var(--color-gray-800);
    margin-bottom: var(--space-1);
    font-size: var(--text-base);
}

.hero-highlight__text {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
}

/* Hero Lead Text */
.hero-subtext--lead {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    color: var(--color-gray-700);
}

/* Hero CTA Button */
.hero-cta-button {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-3) var(--space-6);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.hero-cta-button:hover {
    background-color: var(--color-primary-hover);
    text-decoration: none;
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.hero-cta-button:focus {
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 2px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    font-size: var(--text-sm);
}

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

.hero-meta {
    color: var(--color-gray-500);
    border-left: var(--border-width) solid var(--color-gray-200);
    padding-left: var(--space-4);
}

/* Steps */
.steps-section {
    margin-top: 0;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
}

.step-card {
    background-color: var(--color-white);
    border: var(--border-width) solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    min-height: 100%;
}

.step-card__number {
    background-color: var(--color-primary);
    color: var(--color-white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.step-card__body {
    flex: 1;
}

.step-card__title {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-lg);
    color: var(--color-gray-800);
}

.step-card__desc {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
}

/* Steps Section Title - replaces inline style */
.steps-title {
    text-align: center;
    margin-top: var(--space-10);
    color: var(--color-primary);
}

/* Steps Container */
.steps-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

/* Step Card (improved design) */
.step-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    background-color: var(--color-white);
    border: var(--border-width) solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
}

.step-item:hover {
    box-shadow: var(--shadow-md);
}

.step-circle {
    background-color: var(--color-primary);
    color: var(--color-white);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    font-size: var(--text-xl);
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
}

.step-text {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

.step-text strong {
    display: block;
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
}

/* CTA Section - replaces inline style */
.cta-section {
    text-align: center;
    margin-top: var(--space-12);
    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
    padding: var(--space-12) var(--space-8);
    border-radius: var(--radius-lg);
    border: var(--border-width) solid var(--color-gray-200);
    box-shadow: var(--shadow-sm);
}

.cta-content {
    max-width: 640px;
    margin: 0 auto;
}

.cta-section h2 {
    margin-bottom: var(--space-4);
    color: var(--color-gray-900);
    font-size: var(--text-2xl);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    border-top: 3px solid rgb(198, 30, 30);
    border-bottom: 3px solid rgb(13, 74, 129);
    display: inline-block;
}

.cta-text {
    font-size: var(--text-lg);
    margin-bottom: var(--space-5);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
}

.cta-note {
    margin: 0 0 var(--space-6) 0;
    color: var(--color-gray-700);
    font-size: var(--text-lg);
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    justify-content: center;
}

.cta-button--serious {
    background-color: var(--color-primary);
    border-radius: var(--radius-sm);
    font-size: var(--text-lg);
    padding: var(--space-4) var(--space-8);
    box-shadow: var(--shadow-md);
}

.cta-button--serious:hover {
    background-color: var(--color-primary-dark);
    transform: none;
    box-shadow: var(--shadow-lg);
}

/* CTA Pricing Card */
.cta-pricing-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-6);
    box-shadow: var(--shadow-md);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.cta-pricing {
    text-align: center;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-gray-100);
}

.cta-pricing__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-2);
}

.cta-pricing__amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-2);
}

.cta-pricing__original {
    font-size: var(--text-lg);
    color: var(--color-gray-400);
}

.cta-pricing__original del {
    text-decoration: line-through;
    text-decoration-color: var(--color-accent);
}

.cta-pricing__current {
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--color-gray-900);
    letter-spacing: -0.02em;
}

.cta-pricing__period {
    font-size: var(--text-base);
    color: var(--color-gray-500);
    font-weight: 500;
}

.cta-guarantee {
    display: flex;
    align-items: flex-start;
    text-align: left;
    padding: var(--space-4);
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
    color: #065f46;
    line-height: 1.5;
}

.cta-guarantee__icon {
    flex-shrink: 0;
    color: #059669;
    margin-top: 5px;
}

.cta-guarantee strong {
    color: #047857;
}

.cta-pricing-card .cta-actions {
    margin-bottom: var(--space-4);
}

.cta-pricing-card .cta-button--serious {
    width: 100%;
    justify-content: center;
}

.cta-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-gray-400);
}

.cta-secure svg {
    color: var(--color-gray-400);
}

/* CTA Stripe Trust */
.cta-stripe-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-100);
    font-size: var(--text-xs);
    color: var(--color-gray-400);
}

.cta-stripe-logo {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* ==========================================================================
   21. PRODUCT PREVIEW SECTION
   ========================================================================== */

.product-preview {
    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
    padding: var(--space-12) var(--space-8);
    border-radius: var(--radius-lg);
    border: var(--border-width) solid var(--color-gray-200);
    box-shadow: var(--shadow-sm);
}

.product-preview__header {
    text-align: center;
    margin-bottom: var(--space-8);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
}

.product-preview__title {
    font-size: var(--text-2xl);
    color: var(--color-gray-800);
    margin-bottom: var(--space-3);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    border-top: 3px solid rgb(198, 30, 30);
    border-bottom: 3px solid rgb(13, 74, 129);
}

.product-preview__subtitle {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    margin: 0;
    line-height: var(--leading-relaxed);
}

/* Screenshot Grid - Improved Layout */
.preview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-width: 1080px;
    margin: 0 auto;
}

/* Featured card (first card) - full width showcase */
.preview-card--featured {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
}

.preview-card--featured .preview-card__image {
    padding-top: 0;
    height: 380px;
    border-bottom: none;
    border-right: var(--border-width) solid var(--color-gray-200);
}

.preview-card--featured .preview-card__content {
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.preview-card--featured .preview-card__title {
    font-size: var(--text-xl);
}

.preview-card--featured .preview-card__desc {
    font-size: var(--text-lg);
}

/* Secondary cards - 4-column grid */
.preview-grid__secondary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.preview-card {
    background-color: var(--color-white);
    border: var(--border-width) solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    -webkit-border-radius: var(--radius-lg);
    -moz-border-radius: var(--radius-lg);
    -ms-border-radius: var(--radius-lg);
    -o-border-radius: var(--radius-lg);
}

.preview-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: var(--color-gray-300);
}

.preview-card:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.preview-card__image {
    position: relative;
    height: 240px;
    background-color: var(--color-gray-100);
    overflow: hidden;
    border-bottom: var(--border-width) solid var(--color-gray-200);
}

.preview-card__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.8s ease-out;
}

/* Scroll effect on hover for tall images */
.preview-card:hover .preview-card__image img {
    transform: translateY(calc(-100% + 220px));
}

.preview-card--featured:hover .preview-card__image img {
    transform: translateY(calc(-100% + 380px));
}

/* Placeholder for missing images */
.preview-card__placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-100);
    color: var(--color-gray-400);
    font-size: var(--text-sm);
}

.preview-card__placeholder svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-2);
    opacity: 0.5;
}

.preview-card__content {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex-grow: 1;
}

.preview-card__title {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--color-gray-800);
    font-weight: var(--font-semibold);
}

.preview-card__desc {
    margin: 0;
    color: var(--color-gray-600);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

/* Click hint for preview cards */
.preview-card__hint {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-primary);
    font-weight: var(--font-medium);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.preview-card:hover .preview-card__hint {
    opacity: 1;
    transform: translateY(0);
}

.preview-card__hint svg {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Hero Image Transformation (Before → After with AI)
   ========================================================================== */

/* Hero Container - Compact & Balanced */
.preview-card--hero .preview-card__hero-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-12) var(--space-6) var(--space-8);
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    min-height: auto;
}

/* Before & After Sections - Equal Flex */
.hero-before,
.hero-after {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 50%;
}

.hero-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 300px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border: 2px solid var(--color-gray-200);
    background: white;
}

.hero-image-wrapper:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    border-color: var(--color-primary);
}

.hero-image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Badges - Refined Hierarchy */
.hero-badge {
    position: absolute;
    bottom: var(--space-3);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    z-index: 2;
    letter-spacing: 0.025em;
}

/* Before Badge - Smaller, Less Prominent */
.hero-badge--before {
    background: rgba(220, 38, 38, 0.9);
    color: var(--color-white);
    border: 2px solid rgba(185, 28, 28, 0.4);
    font-size: 12px;
    padding: 6px 14px;
    opacity: 0.95;
}

/* After Badge - Larger, More Prominent */
.hero-badge--after {
    background: rgba(16, 185, 129, 0.96);
    color: var(--color-white);
    border: 2px solid rgba(5, 150, 105, 0.6);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 15px;
    padding: 10px 20px;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
}

.hero-badge--after i {
    font-size: 17px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.12);
    }
}

/* Arrow Transition - Subtle & Calm */
.hero-arrow {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.25);
    border: 3px solid rgba(255, 255, 255, 0.4);
    animation: slideRight 1.5s ease-in-out infinite;
    z-index: 3;
    opacity: 0.85;
}

@keyframes slideRight {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }
}

/* Brand Badge */
.hero-brand-badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 100px;
    height: auto;
    opacity: 0.2;
    transition: opacity var(--transition-base);
    z-index: 1;
}

.preview-card--hero:hover .hero-brand-badge {
    opacity: 0.35;
}

.hero-brand-badge img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%);
}

/* Adjust featured card for hero */
.preview-card--hero.preview-card--featured {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.preview-card--hero .preview-card__content {
    background: var(--color-white);
}

/* Secondary Cards Brand Badge - Watermark Style */
.secondary-brand-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: auto;
    opacity: 0.2;
    transition: opacity var(--transition-base);
    z-index: 2;
    pointer-events: none;
}

.preview-card:hover .secondary-brand-badge {
    opacity: 0.35;
}

.secondary-brand-badge img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%) brightness(1.2);
}

/* ==========================================================================
   22. LIGHTBOX MODAL
   ========================================================================== */

.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: var(--z-modal);
    display: none;
    justify-content: center;
    align-items: center;
    padding: var(--space-4);
}

.lightbox-overlay.is-active {
    display: flex;
}

.lightbox-content {
    position: relative;
    max-width: 900px;
    width: 90vw;
    max-height: 90vh;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    animation: lightboxFadeIn 0.25s ease-out;
    display: flex;
    flex-direction: column;
}

@keyframes lightboxFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scrollable image container */
.lightbox-image-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(90vh - 120px);
    background: var(--color-gray-100);
}

.lightbox-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.lightbox-caption {
    padding: var(--space-5);
    text-align: left;
    background-color: var(--color-gray-50);
    border-top: var(--border-width) solid var(--color-gray-200);
    color: var(--color-gray-700);
}

.lightbox-title {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-lg);
    color: var(--color-gray-800);
}

.lightbox-description {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-gray-600);
}

.lightbox-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 40px;
    height: 40px;
    background-color: var(--color-white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: background-color var(--transition-fast);
    z-index: 10;
    padding: 0;
}

.lightbox-close:hover {
    background-color: var(--color-gray-100);
}

.lightbox-close:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.lightbox-close svg,
.lightbox-close i {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: var(--color-gray-700);
    display: block;
    line-height: 1;
}

/* ==========================================================================
   23. Responsive Styles
   ========================================================================== */

/* Tablet breakpoint */
@media (max-width: 992px) {
    .hero-highlights {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }

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

    .preview-card--featured {
        grid-template-columns: 1fr;
    }

    .preview-card--featured .preview-card__image {
        height: 280px;
        border-right: none;
        border-bottom: var(--border-width) solid var(--color-gray-200);
    }

    .preview-card--featured .preview-card__content {
        padding: var(--space-5);
    }

    .preview-card--featured:hover .preview-card__image img {
        transform: translateY(calc(-100% + 280px));
    }

    /* Hero Image - Tablet Responsive */
    .preview-card--hero .preview-card__hero-container {
        flex-direction: column;
        gap: var(--space-5);
        padding: var(--space-6) var(--space-5);
        min-height: auto;
    }

    .hero-before,
    .hero-after {
        max-width: 100%;
    }

    .hero-image-wrapper {
        max-width: 380px;
        height: 280px;
    }

    .hero-arrow {
        transform: rotate(90deg);
        width: 46px;
        height: 46px;
        font-size: 22px;
    }

    @keyframes slideRight {

        0%,
        100% {
            transform: rotate(90deg) translateX(0);
        }

        50% {
            transform: rotate(90deg) translateX(10px);
        }
    }

    .hero-brand-badge {
        width: 70px;
    }

    /* Watermark on Tablet */
    .secondary-brand-badge {
        width: 100px;
    }
}

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

    .preview-card__image {
        height: 180px;
    }

    .preview-card:hover .preview-card__image img {
        transform: translateY(calc(-100% + 180px));
    }

    .preview-card--featured .preview-card__image {
        height: 200px;
    }

    .preview-card--featured:hover .preview-card__image img {
        transform: translateY(calc(-100% + 200px));
    }

    /* Hero Image - Mobile Responsive */
    .preview-card--hero .preview-card__hero-container {
        padding: var(--space-5) var(--space-4);
        gap: var(--space-4);
    }

    .hero-image-wrapper {
        max-width: 280px;
        height: 220px;
    }

    .hero-arrow {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .hero-badge {
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-3);
        bottom: var(--space-2);
    }

    .hero-brand-badge {
        width: 60px;
        top: var(--space-2);
        right: var(--space-2);
    }

    /* Watermark on Mobile */
    .secondary-brand-badge {
        width: 80px;
    }
}

@media (max-width: 768px) {
    :root {
        --text-3xl: 1.75rem;
        --text-4xl: 2rem;
    }

    /* Header responsive */
    .header-inner {
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }

    .branding-container {
        align-items: center;
        width: 100%;
    }

    .logo img {
        width: 160px;
        max-width: 180px;
    }

    .header-nav {
        width: 100%;
    }

    .header-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-1);
    }

    .header-nav a {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
        min-height: 36px;
    }

    /* Dropdown responsive */
    .nav-dropdown__toggle {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
        min-height: 36px;
    }

    .nav-dropdown__menu {
        right: auto;
        left: 50%;
        transform: translateX(-50%) translateY(-4px);
        min-width: 200px;
    }

    .nav-dropdown__toggle[aria-expanded="true"]+.nav-dropdown__menu,
    .nav-dropdown:hover .nav-dropdown__menu,
    .nav-dropdown:focus-within .nav-dropdown__menu {
        transform: translateX(-50%) translateY(0);
    }

    /* Footer responsive */
    footer {
        padding: var(--space-8) var(--space-4);
    }

    main {
        padding: var(--space-4) var(--space-4) var(--space-8) var(--space-4);
    }

    .hero-panel {
        padding: var(--space-5);
    }

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

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

    .hero-subtext--lead {
        font-size: var(--text-lg);
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .hero-meta {
        border-left: none;
        padding-left: 0;
    }

    .hero-highlights {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .hero-highlights li {
        padding: var(--space-4);
    }

    /* Steps section tablet */
    .steps-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .step-card {
        flex-direction: row;
        align-items: flex-start;
    }

    /* Product Preview tablet */
    .product-preview {
        padding: var(--space-8) var(--space-4);
        margin-left: calc(-1 * var(--space-4));
        margin-right: calc(-1 * var(--space-4));
    }

    .product-preview__header {
        margin-bottom: var(--space-6);
    }

    .product-preview__title {
        font-size: var(--text-xl);
    }

    .product-preview__subtitle {
        font-size: var(--text-base);
    }

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

    .preview-card__content {
        padding: var(--space-4);
    }

    .preview-card__hint {
        display: none;
    }

    /* CTA section tablet */
    .cta-section {
        padding: var(--space-8) var(--space-5);
    }

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

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

    /* SAM Card mobile */
    .sam-card-container {
        flex-direction: column;
    }

    .sam-card-right {
        text-align: left;
        border-left: none;
        border-top: var(--border-width) solid var(--color-gray-100);
        padding-left: 0;
        padding-top: var(--space-4);
        margin-top: var(--space-3);
        flex: auto;
    }

    .lightbox-content {
        max-width: 95vw;
    }

    footer {
        padding: var(--space-6) var(--space-4);
    }
}

@media (max-width: 480px) {
    main {
        padding: var(--space-3);
    }

    .hero {
        margin-top: var(--space-4);
    }

    .hero-panel {
        padding: var(--space-4);
        border-left-width: 3px;
    }

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

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

    .hero-cta-button {
        width: 100%;
        text-align: center;
        padding: var(--space-3) var(--space-4);
    }

    .cta-button {
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-base);
        width: 100%;
        text-align: center;
    }

    .cta-button--serious {
        width: 100%;
    }

    .step-card {
        padding: var(--space-4);
        gap: var(--space-3);
    }

    .step-card__number {
        width: 36px;
        height: 36px;
        font-size: var(--text-base);
    }

    .step-card__title {
        font-size: var(--text-base);
    }

    .step-card__desc {
        font-size: var(--text-sm);
    }

    .step-circle {
        width: 40px;
        height: 40px;
        font-size: var(--text-lg);
    }

    .section-divider {
        margin-top: var(--space-8);
        padding-top: var(--space-6);
    }

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

    .product-preview {
        padding: var(--space-6) var(--space-3);
        margin-left: calc(-1 * var(--space-3));
        margin-right: calc(-1 * var(--space-3));
    }

    .preview-card__image {
        padding-top: 56.25%;
        /* 16:9 aspect ratio for mobile */
    }

    .preview-card__title {
        font-size: var(--text-base);
    }

    .preview-card__desc {
        font-size: var(--text-sm);
    }

    .cta-section {
        padding: var(--space-6) var(--space-4);
        margin-top: var(--space-8);
    }
}

/* ==========================================================================
   24. Print Styles
   ========================================================================== */

@media print {

    header,
    footer,
    .cookie-banner,
    .custom-modal-overlay,
    .lightbox-overlay {
        display: none !important;
    }

    body {
        background-color: white;
        color: black;
    }
}

/* ==========================================================================
   25. Accessibility
   ========================================================================== */

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

/* Focus Visible */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-2) var(--space-4);
    z-index: 10000;
    transition: top var(--transition-fast);
}

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

/* ==========================================================================
   Trial Banner Slot
   Client: Remove [hidden] attribute to show. Inject content via JS.
   No layout shift: hidden = no space; visible = reserved space.
   ========================================================================== */

.trial-banner[hidden] {
    display: none;
}

.trial-banner:not([hidden]) {
    display: block;
    width: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: var(--color-white);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    text-align: center;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    min-height: 56px;
    box-shadow: var(--shadow-md);
}

.trial-banner:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.trial-banner:not([hidden]) a {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.trial-banner:not([hidden]) a:hover {
    text-decoration-thickness: 2px;
}

.live-activity {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-4);
    min-height: 1.75em;

    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--color-gray-200);
    transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.live-activity.is-transitioning {
    background-color: rgba(0, 113, 188, 0.10);
    border-color: rgba(0, 113, 188, 0.25);
    box-shadow: 0 0 0 3px rgba(0, 113, 188, 0.10);
}

.live-activity__label {
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--text-xs);
}

.live-activity__text {
    opacity: 1;
    transition: opacity 250ms ease-in-out;
}

.live-activity__text.is-fading {
    opacity: 0;
}

/* optional: subtle "pulse" to make change noticeable */
@keyframes livePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 113, 188, 0.16);
    }

    100% {
        box-shadow: 0 0 0 6px rgba(0, 113, 188, 0.0);
    }
}

.live-activity.is-transitioning {
    animation: livePulse 420ms ease-out;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .live-activity,
    .live-activity__text {
        transition: none;
    }

    .live-activity.is-transitioning {
        animation: none;
        box-shadow: none;
    }
}


/* ==========================================================================
   REPORTS PAGE STYLES
   ========================================================================== */

/* Reports Container */
.reports-container {
    max-width: 900px;
    margin: 0 auto;
}

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

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

.page-description {
    font-size: var(--text-base);
    color: var(--color-gray-500);
    margin-bottom: 0;
    max-width: 600px;
}

/* Reports Card */
.reports-card {
    background-color: var(--color-white);
    border: var(--border-width) solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Table Wrapper - enables horizontal scroll on mobile */
.reports-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Reports Table */
.reports-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.reports-table thead {
    background-color: var(--color-gray-50);
    border-bottom: 2px solid var(--color-gray-200);
}

.reports-table th {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.reports-table td {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    font-size: var(--text-base);
    color: var(--color-gray-700);
    border-bottom: var(--border-width) solid var(--color-gray-100);
    vertical-align: middle;
}

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

.reports-table tbody tr:hover {
    background-color: var(--color-gray-50);
}

/* Report Date */
.report-date {
    display: block;
    font-weight: var(--font-medium);
    color: var(--color-gray-800);
}

/* Report Badge (e.g., "Intro Report") */
.report-badge {
    display: inline-block;
    margin-top: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    background-color: rgba(0, 113, 188, 0.1);
    border-radius: var(--radius-sm);
}

/* Report Count */
.report-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-gray-700);
    background-color: var(--color-gray-100);
    border-radius: var(--radius-sm);
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

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

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-white);
    text-decoration: none;
}

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

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

.reports-empty-state p {
    font-size: var(--text-base);
    color: var(--color-gray-500);
    margin: 0;
}

/* Responsive: Stack table on mobile */
@media (max-width: 600px) {
    .reports-table thead {
        display: none;
    }

    .reports-table,
    .reports-table tbody,
    .reports-table tr,
    .reports-table td {
        display: block;
        width: 100%;
    }

    .reports-table tr {
        padding: var(--space-4);
        border-bottom: var(--border-width) solid var(--color-gray-200);
    }

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

    .reports-table td {
        padding: var(--space-2) 0;
        border-bottom: none;
        text-align: left;
    }

    .reports-table td::before {
        content: attr(data-label);
        display: block;
        font-size: var(--text-xs);
        font-weight: var(--font-semibold);
        color: var(--color-gray-500);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: var(--space-1);
    }

    .reports-table td[data-label="Action"] {
        margin-top: var(--space-2);
    }

    .report-count {
        min-width: auto;
    }
}


/* ========================= Favorites Page ========================= */

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

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

.page-subtitle {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    margin: 0;
}

/* Favorites List */
.favorites-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Favorite Card */
.favorite-card {
    display: flex;
    gap: var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: box-shadow var(--transition-base);
}

.favorite-card:hover {
    box-shadow: var(--shadow-md);
}

.favorite-card__main {
    flex: 1;
    min-width: 0;
}

.favorite-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

/* Favorite Button (Heart) */
.favorite-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-gray-400);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-base);
}

.favorite-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.favorite-btn.active {
    color: #e53e3e;
    border-color: #e53e3e;
}

.favorite-btn.active:hover {
    color: #c53030;
    border-color: #c53030;
    background-color: transparent;
}

/* Card Title */
.favorite-card__title {
    flex: 1;
    min-width: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: 1.4;
    margin: 0;
}

.favorite-card__title a {
    color: var(--color-primary);
    text-decoration: none;
}

.favorite-card__title a:hover {
    text-decoration: underline;
}

/* External Link Icon */
.external-link-icon {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-left: var(--space-1);
    vertical-align: middle;
    opacity: 0.5;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}

.favorite-card__title a:hover .external-link-icon,
.favorite-card__title a:focus .external-link-icon {
    opacity: 1;
    transform: translate(1px, -1px);
}

/* Trash Toggle Button */
.favorite-card__trash {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray-400);
    opacity: 0.6;
    transition: opacity var(--transition-base), color var(--transition-base);
}

.favorite-card__trash:hover {
    opacity: 1;
    background: none;
        color: #c62828;
}

.favorite-card__trash:focus {
    outline: none;
    outline-offset: 0;
}

.favorite-card__trash.is-active {
    color: #c62828;
    opacity: 1;
}

/* Badge */
.favorite-card__badge {
    display: inline-block;
    background: var(--color-success-light);
    color: var(--color-success);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}

/* Notice ID */
.favorite-card__notice-id {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
}

/* Description */
.favorite-card__desc {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: var(--space-3);
}

.favorite-card__desc-full {
    display: none;
}

.expand-arrow {
    display: inline-block;
    margin-left: var(--space-1);
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--text-sm);
}

.expand-arrow:hover {
    text-decoration: none;
}

/* Metadata Grid */
.favorite-card__meta {
    font-size: var(--text-sm);
}

.meta-grid {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
    overflow: hidden;
}

.meta-grid__header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
}

.meta-grid__header span {
    padding: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

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

.meta-grid__values span {
    padding: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    border-right: 1px solid var(--color-gray-200);
}

.meta-grid__values span:last-child {
    border-right: none;
}

.favorite-card__naics {
    color: var(--color-gray-600);
}

/* Aside / Date Column */
.favorite-card__aside {
    flex-shrink: 0;
    width: 220px;
    background: var(--color-gray-50);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
}

.meta-row {
    margin-bottom: var(--space-3);
}

.meta-row:last-child {
    margin-bottom: 0;
}

.meta-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--space-1);
}

.meta-value {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-gray-800);
    font-weight: var(--font-medium);
}

.meta-note {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    font-style: italic;
}

/* Cookie Banner (reused from baseline) */
.cookie-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-gray-800);
    color: var(--color-white);
    padding: var(--space-3) var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    z-index: 1000;
}

.cookie-banner button {
    margin-left: var(--space-3);
    padding: var(--space-1) var(--space-3);
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
}

.cookie-banner button:hover {
    background: var(--color-primary-dark);
}

/* Custom Modal (reused from baseline) */
.custom-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.custom-modal {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-width: 400px;
    width: 90%;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-gray-200);
    font-weight: var(--font-semibold);
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: var(--text-xl);
    color: var(--color-gray-500);
    cursor: pointer;
    line-height: 1;
}

.modal-close-btn:hover {
    color: var(--color-gray-700);
}

.modal-body {
    padding: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.6;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-gray-200);
}

.modal-ok-btn {
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
}

.modal-ok-btn:hover {
    background: var(--color-primary-dark);
}

.modal-btn-secondary {
    background: var(--color-gray-200);
    color: var(--color-gray-700);
}

.modal-btn-secondary:hover {
    background: var(--color-gray-300);
}


/* -------------------- Favorites Page Responsive -------------------- */

@media (max-width: 768px) {
    .favorite-card {
        flex-direction: column;
    }

    .favorite-card__aside {
        width: 100%;
    }

    .meta-grid__header,
    .meta-grid__values {
        grid-template-columns: 1fr;
    }

    .meta-grid__header span,
    .meta-grid__values span {
        border-right: none;
        border-bottom: 1px solid var(--color-gray-200);
    }

    .meta-grid__header span:last-child,
    .meta-grid__values span:last-child {
        border-bottom: none;
    }
}


/* ========================= Settings Pages (NAICS, Keywords, etc.) ========================= */

/* Settings Page Container */
.settings-page {
    max-width: 700px;
    margin: 0 auto;
}

/* Settings Page Header */
.settings-page__header {
    margin-bottom: var(--space-4);
}

.settings-page__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-3) 0;
}

.settings-page__info-banner {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    background-color: var(--color-blue-50);
    border: 1px solid var(--color-gray-300);
    border-radius: 20px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
}

.settings-page__info-banner .info-icon {
    flex-shrink: 0;
    font-weight: var(--font-bold);
    color: var(--color-primary);
}

.settings-page__subtitle {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    margin-bottom: var(--space-5);
}

/* Context Hint */
.settings-page__context-hint {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: var(--space-3) 0 var(--space-4) 0;
    line-height: 1.5;
}

/* Settings Card */
.settings-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.settings-card__section {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-200);
}

.settings-card__section-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-2) 0;
}

.settings-card__helper-text {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0 0 var(--space-3) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-gray-50);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-gray-300);
}

.settings-card__helper-text strong {
    color: var(--color-gray-700);
}

.helper-hint-icon {
    font-size: var(--text-base);
    line-height: 1;
}

/* Settings Form */
.settings-form {
    max-width: 100%;
}

.settings-form__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-gray-700);
    margin-bottom: var(--space-1);
}

.settings-form__hint {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin: 0 0 var(--space-3) 0;
}

.settings-form--search {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-gray-100);
    margin-bottom: var(--space-5);
}

.settings-form--search .settings-form__input {
    border-width: 2px;
    padding: var(--space-3) var(--space-4);
}

.settings-form__input {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-family: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.settings-form__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 113, 188, 0.15);
}

.settings-form__input::placeholder {
    color: var(--color-gray-400);
}

/* Autocomplete Container */
.autocomplete-container {
    position: relative;
    width: 100%;
}

.autocomplete-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    max-height: 240px;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
}

.autocomplete-items div {
    padding: var(--space-3);
    cursor: pointer;
    border-bottom: 1px solid var(--color-gray-100);
    font-size: var(--text-sm);
    transition: background-color var(--transition-fast);
}

.autocomplete-items div:last-child {
    border-bottom: none;
}

.autocomplete-items div:hover {
    background-color: var(--color-gray-50);
}

.autocomplete-items div strong {
    color: var(--color-primary);
}

/* Selected NAICS List */
.selected-naics-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.selected-naics-list li {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-gray-100);
    background-color: var(--color-gray-50);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Compact variant for longer lists */
.selected-naics-list--compact li {
    padding: var(--space-2) var(--space-4);
}

.selected-naics-list li:last-child {
    border-bottom: none;
}

.selected-naics-list li:hover {
    background-color: #ffebeb;
    color: #c00;
}

.selected-naics-list li strong {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
}

.selected-naics-list li:hover strong {
    color: #c00;
}

/* Empty State */
.selected-naics-list__empty {
    padding: var(--space-6);
    text-align: center;
    background-color: var(--color-gray-50);
    border: 1px dashed var(--color-gray-300);
    border-radius: var(--radius-sm);
}

.selected-naics-list__empty p {
    margin: 0;
    color: var(--color-gray-500);
    font-size: var(--text-sm);
}

/* Loading Overlay */
.settings-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.settings-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-gray-200);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: settingsSpinnerRotate 0.8s linear infinite;
}

@keyframes settingsSpinnerRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Settings Form Textarea */
.settings-form__textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-family: inherit;
    line-height: var(--leading-relaxed);
    resize: vertical;
    min-height: 200px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.settings-form__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 113, 188, 0.15);
}

.settings-form__textarea::placeholder {
    color: var(--color-gray-400);
}

/* Settings Card Actions */
.settings-card__actions {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-100);
}

/* Settings Buttons */
.settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
    border: none;
    font-family: inherit;
}

.settings-btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.settings-btn--primary:hover {
    background-color: var(--color-primary-hover);
}

.settings-btn--primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 113, 188, 0.3);
}

/* Settings Tips List */
.settings-tips-list {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0 0;
}

.settings-tips-list li {
    position: relative;
    padding: var(--space-2) 0 var(--space-2) var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    border-bottom: 1px solid var(--color-gray-100);
}

.settings-tips-list li:last-child {
    border-bottom: none;
}

.settings-tips-list li::before {
    content: "•";
    position: absolute;
    left: var(--space-2);
    color: var(--color-primary);
    font-weight: var(--font-bold);
}

.settings-tips-list li strong {
    color: var(--color-gray-700);
}

/* Settings Form - Profile specific styles */
.settings-form--profile {
    max-width: 600px;
}

.settings-form__divider {
    margin: var(--space-5) 0;
    border: 0;
    border-top: 1px solid var(--color-gray-200);
}

/* Remove duplicate - checkbox styles are defined above in Forms section */

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-base);
    color: var(--color-gray-700);
    cursor: pointer;
    margin-top: var(--space-2);
    line-height: 1.5;
}

.checkbox-label span {
    display: inline;
}

.checkbox-label em {
    color: var(--color-gray-500);
    font-style: italic;
    font-size: var(--text-sm);
    display: block;
    margin-top: var(--space-1);
}

.required {
    color: #c61e1e;
}

.required-hint {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-left: var(--space-3);
}


/* -------------------- Settings Page Responsive -------------------- */

@media (max-width: 768px) {
    .settings-page {
        padding: 0 var(--space-2);
    }

    .settings-page__info-banner {
        display: block;
        border-radius: var(--radius-sm);
    }

    .settings-card {
        padding: var(--space-4);
    }
}

/* ==========================================================================
   FAQ Page Styles
   ========================================================================== */

.faq-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4) var(--space-12);
    background-color: var(--color-white);
    min-height: 80vh;
}

.faq-page__header {
    text-align: center;
    margin-bottom: var(--space-10);
    padding-bottom: var(--space-6);
    border-bottom: 2px solid var(--color-gray-100);
}

.faq-page__header h1 {
    margin: 0 0 var(--space-3) 0;
    color: var(--color-gray-800);
    font-size: var(--text-3xl);
}

.faq-page__subtitle {
    margin: 0;
    color: var(--color-gray-500);
    font-size: var(--text-lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* FAQ Section */
.faq-section {
    margin-bottom: var(--space-8);
}

.faq-section__title {
    font-size: var(--text-xl);
    color: var(--color-primary);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-gray-100);
}

/* FAQ List */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* FAQ Item */
.faq-item {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

.faq-item:hover {
    box-shadow: var(--shadow-sm);
}

.faq-item.is-open {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

/* FAQ Trigger Button */
.faq-item__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-white);
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background-color var(--transition-fast);
}

.faq-item__trigger:hover {
    background-color: var(--color-gray-50);
}

.faq-item__trigger:focus {
    outline: none;
    background-color: var(--color-gray-50) !important;
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

.faq-item.is-open .faq-item__trigger {
    background-color: rgba(0, 113, 188, 0.05);
}

.faq-item__question {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-gray-700);
    flex: 1;
    line-height: 1.4;
}

.faq-item__icon {
    flex-shrink: 0;
    color: var(--color-gray-400);
    transition: transform var(--transition-base), color var(--transition-fast);
}

.faq-item.is-open .faq-item__icon {
    transform: rotate(180deg);
    color: var(--color-primary);
}

/* FAQ Content */
.faq-item__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base) ease-out;
}

.faq-item__content[hidden] {
    display: block;
    max-height: 0;
}

.faq-item__content:not([hidden]) {
    max-height: 500px;
    transition: max-height var(--transition-slow) ease-in;
}

.faq-item__answer {
    padding: 0 var(--space-5) var(--space-5) var(--space-5);
    border-top: 1px solid var(--color-gray-100);
    background-color: var(--color-gray-50);
}

.faq-item__answer p {
    margin: var(--space-4) 0 0 0;
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
}

.faq-item__answer p:first-child {
    margin-top: var(--space-4);
}

.faq-item__answer ul {
    margin: var(--space-3) 0 0 0;
    padding-left: var(--space-5);
    color: var(--color-gray-600);
}

.faq-item__answer li {
    margin-bottom: var(--space-2);
    line-height: var(--leading-relaxed);
}

.faq-item__answer strong {
    color: var(--color-gray-700);
}

.faq-item__answer a {
    color: var(--color-primary);
}

.faq-item__answer a:hover {
    text-decoration: underline;
}

/* FAQ Page Responsive */
@media (max-width: 768px) {
    .faq-page {
        padding: var(--space-4) var(--space-3) var(--space-8);
    }

    .faq-page__header h1 {
        font-size: var(--text-2xl);
    }

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

    .faq-item__trigger {
        padding: var(--space-3) var(--space-4);
    }

    .faq-item__question {
        font-size: var(--text-sm);
    }

    .faq-item__answer {
        padding: 0 var(--space-4) var(--space-4) var(--space-4);
    }
}

/* ==========================================================================
   Auth Pages Styles (Login / Sign Up)
   ========================================================================== */

.auth-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-gray-100);
}

/* Auth Header - Minimal centered logo */
.auth-header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: var(--space-4) var(--space-4);
}

.auth-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.auth-header .logo img {
    width: 180px;
    height: auto;
}

/* Auth Page Container */
.auth-page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    background: transparent;
}

/* Auth Card */
.auth-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    min-width: 420px;
    max-width: 500px;
    overflow: hidden;
}

.auth-card--wide {
    max-width: 650px;
}

.auth-card__header {
    padding: var(--space-6) var(--space-6) var(--space-4);
    text-align: center;
    border-bottom: 1px solid var(--color-gray-100);
}

.auth-card__title {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-2xl);
    color: var(--color-gray-800);
}

.auth-card__subtitle {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.auth-card__footer {
    padding: var(--space-4) var(--space-6);
    text-align: center;
    background-color: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-100);
}

.auth-card__footer p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.auth-card__footer a {
    color: var(--color-primary);
    font-weight: var(--font-semibold);
}

/* Auth Form */
.auth-form {
    padding: var(--space-6);
}

.auth-form__section {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-gray-100);
}

.auth-form__section:last-of-type {
    margin-bottom: var(--space-4);
    padding-bottom: 0;
    border-bottom: none;
}

.auth-form__section-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-4) 0;
}

.auth-form__group {
    margin-bottom: var(--space-4);
}

.auth-form__group:last-child {
    margin-bottom: 0;
}

.auth-form__row {
    display: flex;
    gap: var(--space-4);
}

.auth-form__group--half {
    flex: 1;
}

.auth-form__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
}

.auth-form__label-hint {
    font-weight: var(--font-normal);
    color: var(--color-gray-500);
    font-size: var(--text-xs);
}

.auth-form__input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-family: inherit;
    line-height: 1.4;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-form__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 113, 188, 0.15);
}

.auth-form__input::placeholder {
    color: var(--color-gray-400);
}

/* Auth Form Actions */
.auth-form__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.auth-form__submit {
    flex: 1;
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-form__submit:hover {
    background-color: var(--color-primary-hover);
}

.auth-form__submit:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 113, 188, 0.3);
}

/* Auth Form Links */
.auth-form__links {
    text-align: center;
    margin-top: var(--space-4);
}

.auth-form__link {
    font-size: var(--text-sm);
    color: var(--color-primary);
}

.auth-form__link:hover {
    text-decoration: underline;
}

/* Auth Pages Responsive */
@media (max-width: 600px) {
    .auth-page {
        padding: var(--space-4) var(--space-3);
    }

    .auth-card {
        border-radius: var(--radius-md);
        min-width: auto;
    }

    .auth-card__header {
        padding: var(--space-4);
    }

    .auth-card__title {
        font-size: var(--text-xl);
    }

    .auth-form {
        padding: var(--space-4);
    }

    .auth-form__row {
        flex-direction: column;
        gap: 0;
    }

    .auth-form__group--half {
        margin-bottom: var(--space-4);
    }
}

/* ==========================================================================
   Payment Page Styles
   Clean, trustworthy, professional payment flow
   ========================================================================== */

/* Payment Card - Container */
.payment-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    border: 1px solid var(--color-gray-200);
}

/* Payment Card Header */
.payment-card__header {
    padding: var(--space-6) var(--space-6) var(--space-5);
    text-align: center;
    border-bottom: 1px solid var(--color-gray-100);
    background-color: var(--color-gray-50);
}

.payment-card__title {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-gray-800);
}

.payment-card__subtitle {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    line-height: var(--leading-normal);
}

/* Payment Card Body */
.payment-card__body {
    padding: var(--space-6);
}

/* Pricing Section */
.payment-pricing {
    text-align: center;
    padding: var(--space-5) 0;
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-gray-100);
}

.payment-pricing__label {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Original Price (strikethrough for promos) */
.payment-pricing__original {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--text-base);
    color: var(--color-gray-400);
}

.payment-pricing__original del {
    text-decoration: line-through;
}

/* Current/Discounted Price */
.payment-pricing__amount {
    margin: 0;
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-gray-900);
    line-height: 1.2;
}

.payment-pricing__period {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--color-gray-500);
}

/* Assurance Section */
.payment-assurance {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    background-color: var(--color-success-light);
    border: 1px solid #c3e6cb;
    border-radius: var(--radius-md);
}

.payment-assurance__icon {
    flex-shrink: 0;
    color: var(--color-success);
    margin-top: 2px;
    font-size: 1.5rem;
}

.payment-assurance__text {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: var(--leading-normal);
}

.payment-assurance__text strong {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-success);
    margin-bottom: var(--space-1);
}

.payment-assurance__text span {
    color: var(--color-gray-600);
}

/* CTA Section */
.payment-cta {
    text-align: center;
}

.payment-cta__button {
    display: block;
    width: 100%;
    padding: var(--space-4) var(--space-6);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.payment-cta__button:hover {
    background-color: var(--color-primary-hover);
    text-decoration: none;
    color: var(--color-white);
}

.payment-cta__button:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.payment-cta__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-4) 0 0 0;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

.payment-cta__lock-icon {
    color: var(--color-gray-400);
}

/* =========================
   Payment - Extra polish
   ========================= */

/* Value bullets (trust + clarity) */
.payment-value {
    padding: var(--space-5) 0 0;
}

.payment-value__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
}

.payment-value__item {
    position: relative;
    padding-inline-start: calc(var(--space-4) + 4px);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: var(--leading-normal);
}

.payment-value__item::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.35em;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid var(--color-primary);
}

/* Pricing hierarchy tweaks */
.payment-pricing {
    padding-top: var(--space-4);
}

.payment-pricing__amount {
    letter-spacing: -0.02em;
}

.payment-pricing__period {
    margin-inline-start: 4px;
}

/* Promo support */
.is-hidden {
    display: none !important;
}

.payment-pricing__original del {
    text-decoration-thickness: 2px;
    text-decoration-color: var(--color-gray-300);
}

/* Assurance: calmer + more “trust” */
.payment-assurance {
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
}

.payment-assurance__icon {
    color: var(--color-primary);
}

.payment-assurance__text strong {
    color: var(--color-gray-900);
}

/* CTA: stronger focus ring + subtle hover */
.payment-cta__button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.payment-cta__button:hover {
    box-shadow: var(--shadow-md);
}

/* Make secure line more reassuring */
.payment-cta__secure {
    margin-top: var(--space-3);
}

/* Payment Page Responsive */
@media (max-width: 600px) {
    .payment-card {
        border-radius: var(--radius-md);
        margin: 0 var(--space-2);
    }

    .payment-card__header {
        padding: var(--space-5) var(--space-4);
    }

    .payment-card__title {
        font-size: var(--text-lg);
    }

    .payment-card__body {
        padding: var(--space-4);
    }

    .payment-pricing__amount {
        font-size: var(--text-2xl);
    }

    .payment-cta__button {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-base);
    }
}

/* --- PAYMENT CARD CONTAINER --- */
.payment-card {
    position: relative;
    background: var(--color-white);
    border-radius: 16px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 6px 16px rgba(0, 0, 0, 0.08),
        0 24px 48px rgba(0, 0, 0, 0.06);
    width: 100%;
    max-width: 440px;
    overflow: visible;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Subtle top accent line */
.payment-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, #1a6eb5 100%);
    border-radius: 0 0 4px 4px;
}

/* --- HEADER --- */
.payment-card__header {
    padding: 32px 32px 24px;
    text-align: center;
    background: linear-gradient(180deg, #fafbfc 0%, var(--color-white) 100%);
    border-bottom: none;
}

.payment-card__title {
    margin: 0 0 8px 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.payment-card__subtitle {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-gray-500);
    line-height: 1.5;
}

/* --- BODY --- */
.payment-card__body {
    padding: 0 32px 32px;
}

/* --- VALUE PROPOSITION BULLETS --- */
.payment-value {
    padding: 0 0 24px;
    margin: 0 0 24px;
    border-bottom: 1px solid var(--color-gray-100);
}

.payment-value__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-value__item {
    position: relative;
    padding-left: 28px;
    font-size: 0.9375rem;
    color: var(--color-gray-700);
    line-height: 1.5;
}

.payment-value__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2300529b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

/* --- PRICING SECTION --- */
.payment-pricing {
    text-align: center;
    padding: 24px 0;
    margin-bottom: 20px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 1px solid var(--color-gray-100);
}

.payment-pricing__label {
    margin: 0 0 12px 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Original Price (strikethrough for promos) */
.payment-pricing__original {
    margin: 0 0 4px 0;
    font-size: 1rem;
    color: var(--color-gray-400);
    line-height: 1;
}

.payment-pricing__original del {
    text-decoration: line-through;
    text-decoration-color: #ef4444;
    text-decoration-thickness: 2px;
}

/* Hidden state for original price when no promo */
.payment-pricing__original.is-hidden {
    display: none;
}

/* Current/Discounted Price */
.payment-pricing__amount {
    margin: 0;
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-gray-900);
    line-height: 1;
    letter-spacing: -0.03em;
}

.payment-pricing__period {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-gray-500);
    letter-spacing: 0;
}

/* Promo badge when there's a discount */
.payment-pricing__badge {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 100px;
    border: 1px solid rgba(146, 64, 14, 0.15);
}

/* --- ASSURANCE SECTION --- */
.payment-assurance {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-radius: 10px;
}

.payment-assurance__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #059669;
    margin-top: 1px;
}

.payment-assurance__text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-gray-700);
    line-height: 1.5;
}

.payment-assurance__text strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #047857;
    margin-bottom: 2px;
}

.payment-assurance__text span {
    color: #065f46;
    font-size: 0.8125rem;
}

/* --- CTA SECTION --- */
.payment-cta {
    text-align: center;
}

.payment-cta__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px 24px;
    background: linear-gradient(180deg, var(--color-primary) 0%, #004080 100%);
    color: var(--color-white);
    font-size: 1.0625rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(0, 82, 155, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.payment-cta__button:hover {
    background: linear-gradient(180deg, #0062b3 0%, #003366 100%);
    color: var(--color-white);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.12),
        0 8px 20px rgba(0, 82, 155, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.payment-cta__button:active {
    transform: translateY(0);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 82, 155, 0.2);
}

.payment-cta__button:focus {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(0, 82, 155, 0.3),
        0 4px 12px rgba(0, 82, 155, 0.25);
}

/* Arrow icon after button text */
.payment-cta__button::after {
    content: "";
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    transition: transform 0.2s ease;
}

.payment-cta__button:hover::after {
    transform: translateX(3px);
}

/* Secure payment note */
.payment-cta__secure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 16px 0 0 0;
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-500);
    background: var(--color-gray-50);
    border-radius: 6px;
}

.payment-cta__lock-icon {
    color: var(--color-gray-400);
    width: 12px;
    height: 12px;
}

/* --- STRIPE TRUST INDICATOR --- */
.stripe-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-gray-100);
}

.stripe-trust__text {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    font-weight: var(--font-medium);
    letter-spacing: 0.02em;
}

.stripe-trust__logo {
    color: var(--color-gray-400);
    flex-shrink: 0;
}

.stripe-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-4);
    color: var(--color-gray-400);
    font-size: var(--text-xs);
}

.stripe-trust__text {
    line-height: 1;
}

.stripe-trust__logo {
    height: 16px;
    width: auto;
    opacity: 0.5;
    filter: grayscale(100%);
}

/* --- PAYMENT METHODS LOGOS (optional) --- */
.payment-methods {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-gray-100);
}

.payment-methods__label {
    font-size: 0.6875rem;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.payment-methods__logos {
    display: flex;
    gap: 8px;
    opacity: 0.6;
}

.payment-methods__logos img {
    height: 20px;
    width: auto;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 480px) {
    .payment-card {
        max-width: 100%;
        border-radius: 12px;
        margin: 0 16px;
    }

    .payment-card__header {
        padding: 24px 20px 20px;
    }

    .payment-card__title {
        font-size: 1.25rem;
    }

    .payment-card__body {
        padding: 0 20px 24px;
    }

    .payment-pricing {
        padding: 20px 16px;
    }

    .payment-pricing__amount {
        font-size: 2.5rem;
    }

    .payment-cta__button {
        padding: 16px 20px;
        font-size: 1rem;
    }

    .payment-value__item {
        font-size: 0.875rem;
    }
}

/* ========================================================================== */
/* ==========================================================================
   Document Pages Styles (Privacy Policy / Terms of Service)
   ========================================================================== */

/* Doc Header - Minimal centered logo */
.doc-header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: var(--space-4) var(--space-4);
}

.doc-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.doc-header .logo img {
    width: 180px;
    height: auto;
}

/* Doc Page Container */
.doc-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4) var(--space-12);
    background-color: var(--color-white);
    min-height: 80vh;
}

/* Doc Content */
.doc-content {
    line-height: var(--leading-relaxed);
}

.doc-content__header {
    text-align: center;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 2px solid var(--color-gray-100);
}

.doc-content__header h1 {
    margin: 0 0 var(--space-3) 0;
    color: var(--color-gray-800);
    font-size: var(--text-3xl);
}

.doc-content__updated {
    margin: 0;
    color: var(--color-gray-500);
    font-size: var(--text-sm);
}

/* Doc Sections */
.doc-section {
    margin-bottom: var(--space-8);
}


.doc-section h2 {
    color: var(--color-primary);
    font-size: var(--text-xl);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-gray-100);
}

.doc-section h3 {
    color: var(--color-gray-700);
    font-size: var(--text-lg);
    margin: var(--space-6) 0 var(--space-3) 0;
}

.doc-section p {
    margin: 0 0 var(--space-4) 0;
    color: var(--color-gray-600);
}

.doc-section ul {
    margin: var(--space-2) 0 var(--space-4) 0;
    padding-left: var(--space-6);
    color: var(--color-gray-600);
}

.doc-section li {
    margin-bottom: var(--space-2);
    line-height: var(--leading-relaxed);
}

.doc-section strong {
    color: var(--color-gray-700);
}

.doc-section a {
    color: var(--color-primary);
}

.doc-section a:hover {
    text-decoration: underline;
}

/* Doc Page Responsive */
@media (max-width: 768px) {
    .doc-page {
        padding: var(--space-4) var(--space-3) var(--space-8);
    }

    .doc-content__header h1 {
        font-size: var(--text-2xl);
    }

    .doc-section h2 {
        font-size: var(--text-lg);
    }

    .doc-section h3 {
        font-size: var(--text-base);
    }
}




/* ==========================================================================
   NEW CODE - 26/1/2026
   Task: Inactive Favorite Cards Visual Styling
   
   IMPORTANT: "Inactive" refers to the opportunity status from backend,
   NOT the favorite/heart state. The heart functionality remains unchanged.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. INACTIVE STATUS LABEL (Badge)
   Prominent label showing the opportunity is no longer active
   ----------------------------------------------------------------------------- */

.favorite-card__status-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-sm);
    margin-right: var(--space-2);
}

/* INACTIVE label styling */
.favorite-card__status-label--inactive {
    background-color: var(--color-gray-200);
    color: var(--color-gray-600);
    border: 1px dashed var(--color-gray-400);
}

/* Optional icon inside the label */
.favorite-card__status-label--inactive::before {
    content: "⊘";
    font-size: 0.875em;
}

/* -----------------------------------------------------------------------------
   2. INACTIVE CARD STYLING (Class-based: .is-inactive)
   Backend adds this class to cards for inactive opportunities
   ----------------------------------------------------------------------------- */

.favorite-card.is-inactive {
    position: relative;
    opacity: 0.7;
    border: 1px dashed var(--color-gray-300);
    background-color: var(--color-gray-50);
}

/* Reduce hover effect on inactive cards */
.favorite-card.is-inactive:hover {
    box-shadow: var(--shadow-sm);
    transform: none;
}

/* Muted title link */
.favorite-card.is-inactive .favorite-card__title a {
    color: var(--color-gray-500);
}

.favorite-card.is-inactive .favorite-card__title a:hover {
    color: var(--color-gray-600);
}

/* Muted aside section */
.favorite-card.is-inactive .favorite-card__aside {
    background: var(--color-gray-100);
    border-left-color: var(--color-gray-300);
}

/* Muted badge (set-aside type) */
.favorite-card.is-inactive .favorite-card__badge {
    background: var(--color-gray-100);
    color: var(--color-gray-500);
}

/* Muted description text */
.favorite-card.is-inactive .favorite-card__desc {
    color: var(--color-gray-500);
}

/* Muted meta information */
.favorite-card.is-inactive .meta-value,
.favorite-card.is-inactive .meta-grid__values span {
    color: var(--color-gray-500);
}

/* IMPORTANT: Heart button remains fully functional - only visually muted */
.favorite-card.is-inactive .favorite-btn {
    opacity: 0.8;
    /* cursor and click behavior unchanged */
}

/* -----------------------------------------------------------------------------
   3. DATA ATTRIBUTE SUPPORT (data-status="inactive")
   Alternative backend implementation using data attribute
   ----------------------------------------------------------------------------- */

.favorite-card[data-status="inactive"] {
    position: relative;
    opacity: 0.7;
    border: 1px dashed var(--color-gray-300);
    background-color: var(--color-gray-50);
}

.favorite-card[data-status="inactive"]:hover {
    box-shadow: var(--shadow-sm);
    transform: none;
}

.favorite-card[data-status="inactive"] .favorite-card__title a {
    color: var(--color-gray-500);
}

.favorite-card[data-status="inactive"] .favorite-card__title a:hover {
    color: var(--color-gray-600);
}

.favorite-card[data-status="inactive"] .favorite-card__aside {
    background: var(--color-gray-100);
}

.favorite-card[data-status="inactive"] .favorite-card__badge {
    background: var(--color-gray-100);
    color: var(--color-gray-500);
}

.favorite-card[data-status="inactive"] .favorite-card__desc {
    color: var(--color-gray-500);
}

.favorite-card[data-status="inactive"] .meta-value,
.favorite-card[data-status="inactive"] .meta-grid__values span {
    color: var(--color-gray-500);
}

.favorite-card[data-status="inactive"] .favorite-btn {
    opacity: 0.8;
}

/* -----------------------------------------------------------------------------
   4. CSS :has() SELECTOR SUPPORT
   Auto-style parent card when inactive badge is present
   ----------------------------------------------------------------------------- */

.favorite-card:has(.favorite-card__status-label--inactive) {
    position: relative;
    opacity: 0.7;
    border: 1px dashed var(--color-gray-300);
    background-color: var(--color-gray-50);
}

.favorite-card:has(.favorite-card__status-label--inactive):hover {
    box-shadow: var(--shadow-sm);
}

.favorite-card:has(.favorite-card__status-label--inactive) .favorite-card__title a {
    color: var(--color-gray-500);
}

.favorite-card:has(.favorite-card__status-label--inactive) .favorite-card__aside {
    background: var(--color-gray-100);
}

.favorite-card:has(.favorite-card__status-label--inactive) .favorite-card__badge {
    background: var(--color-gray-100);
    color: var(--color-gray-500);
}

/* ========================================================================== */


/* ================================================================================
NEW CODE - 26/1/2026

Task: Reports Table - Compact Row Height

Reducing row height to minimize scrolling while maintaining readability

========================================================================== */

/* Compact table header */
.reports-table th {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
}

/* Compact table cells */
.reports-table td {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.4;
}

/* Smaller report date */
.report-date {
    font-size: var(--text-sm);
}

/* Compact badge */
.report-badge {
    margin-top: 2px;
    padding: 2px var(--space-2);
    font-size: 0.6875rem;
    /* 11px */
}

/* Smaller count badge */
.report-count {
    min-width: 2.5rem;
    padding: 2px var(--space-2);
    font-size: var(--text-sm);
}

/* Compact button inside table */
.reports-table .btn-sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
}

/* Sticky header for long tables */
.reports-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--color-gray-50);
}

/* Scrollable table container - max 500px height */
.reports-table-wrapper {
    max-height: 500px;
    overflow-y: auto;
}

/* ========================================================================== */

/* =========================================================================
NEW CODE - 1/26/2026

Task: Navigation Links Normalization (Unified Button Style)

Unify the appearance of all nav elements so they all have the same base style.

The only change is in: hover / aria-current="page" / .is-active

Problem: Backend: Use the nav-login class on all links.

Solution: Override all special classes to match the base style.

========================================================================= */

/* Reset nav-login to match base nav link style */
.header-nav a.nav-login {
    background-color: transparent;
    color: var(--color-gray-700);
    border: 1px solid transparent;
    font-weight: var(--font-medium);
}

.header-nav a.nav-login:hover {
    color: var(--color-primary);
    background-color: var(--color-gray-50);
    border-color: transparent;
}

/* Reset nav-signup to match base nav link style */
.header-nav a.nav-signup {
    background-color: transparent;
    color: var(--color-gray-700);
    font-weight: var(--font-medium);
}

.header-nav a.nav-signup:hover {
    color: var(--color-primary);
    background-color: var(--color-gray-50);
}

/* Reset nav-logout to match base nav link style */
.header-nav a.nav-logout {
    background-color: transparent;
    color: var(--color-gray-700);
}

.header-nav a.nav-logout:hover {
    color: var(--color-primary);
    background-color: var(--color-gray-50);
}

/* Active state for any nav item with special class */
.header-nav a.nav-login[aria-current="page"],
.header-nav a.nav-signup[aria-current="page"],
.header-nav a.nav-logout[aria-current="page"],
.header-nav a.nav-login.is-active,
.header-nav a.nav-signup.is-active,
.header-nav a.nav-logout.is-active {
    color: var(--color-primary);
    background-color: rgba(0, 113, 188, 0.08);
}

/* ========================================================================== */


/* ==========================================================================
   NEW CODE - 26/1/2026
   Task 4: Favorites meta grid mobile fix
   
   Problem: On mobile, the 3-column Department/Subtier/Office grid becomes
   unreadable because labels and values stack separately.
   
   Solution: On small screens, pair each label directly above its value
   using CSS Grid positioning (no HTML changes needed).
   ========================================================================== */

@media (max-width: 640px) {

    /* Convert the meta-grid to a stacked layout with label above value */
    .meta-grid {
        display: flex;
        flex-direction: column;
    }

    /* Hide the header row - we'll show labels inline instead */
    .meta-grid__header {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Stack values vertically */
    .meta-grid__values {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Style each value item as a row with label */
    .meta-grid__values span {
        display: flex;
        flex-direction: column;
        padding: var(--space-3);
        border-right: none;
        border-bottom: 1px solid var(--color-gray-200);
    }

    .meta-grid__values span:last-child {
        border-bottom: none;
    }

    /* Add labels using ::before pseudo-elements */
    .meta-grid__values span:nth-child(1)::before {
        content: "Department/Ind.Agency";
    }

    .meta-grid__values span:nth-child(2)::before {
        content: "Subtier";
    }

    .meta-grid__values span:nth-child(3)::before {
        content: "Office";
    }

    /* Style the ::before labels */
    .meta-grid__values span::before {
        display: block;
        font-size: var(--text-xs);
        font-weight: var(--font-semibold);
        color: var(--color-gray-500);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: var(--space-1);
    }
}

/* ========================================================================== */


/* ==========================================================================
   NEW CODE - 26/1/2026
   Task 1: Pagination Component
   Task 2: Banner Styles (warning/success/error)
   ========================================================================== */

/* -----------------------------------------------------------------------------
   PAGINATION COMPONENT
   Government-style, accessible pagination for tables
   ----------------------------------------------------------------------------- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
}

/* Pagination positioned at top of table */
.pagination--top {
    border-bottom: 1px solid var(--color-gray-200);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Pagination positioned at bottom of table */
.pagination--bottom {
    border-top: 1px solid var(--color-gray-200);
    background-color: var(--color-gray-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Pagination info text (e.g., "Page 1 of 10") */
.pagination__info {
    color: var(--color-gray-500);
    font-size: var(--text-xs);
    margin: 0 var(--space-2);
}

/* Pagination buttons and page links */
.pagination__btn,
.pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-gray-600);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
}

.pagination__btn:hover:not(:disabled),
.pagination__page:hover:not([aria-current="page"]) {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: rgba(0, 113, 188, 0.05);
    text-decoration: none;
}

.pagination__btn:focus,
.pagination__page:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Active/Current page */
.pagination__page[aria-current="page"] {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    cursor: default;
}

/* Disabled state */
.pagination__btn:disabled,
.pagination__btn[aria-disabled="true"] {
    color: var(--color-gray-400);
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-200);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Previous/Next button text */
.pagination__btn-text {
    margin: 0 var(--space-1);
}

/* Arrow icons in buttons */
.pagination__btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Ellipsis for truncated pages */
.pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    color: var(--color-gray-400);
    font-size: var(--text-sm);
    cursor: default;
}

/* Responsive: Stack on very small screens */
@media (max-width: 480px) {
    .pagination {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .pagination__btn-text {
        display: none;
    }

    .pagination__info {
        width: 100%;
        text-align: center;
        order: -1;
        margin-bottom: var(--space-2);
    }
}


/* -----------------------------------------------------------------------------
   BANNER STYLES (Warning / Success / Error / Info)
   Restyle existing banner classes to match new design system
   ----------------------------------------------------------------------------- */

/* Base banner styles */
.warning-banner,
.success-banner,
.error-banner,
.info-banner {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
    width: 100%;
    border-width: 1px;
    border-style: solid;
}

/* Banner icon (first child span) */
.warning-banner>span:first-child,
.success-banner>span:first-child,
.error-banner>span:first-child,
.info-banner>span:first-child {
    flex-shrink: 0;
    font-size: 1.125em;
    line-height: 1;
    margin-right: 0;
}

/* Warning Banner - Amber/Yellow tones */
.warning-banner {
    background-color: #fef3cd;
    border-color: #e4c76b;
    color: #725c0f;
}

.warning-banner>span:first-child {
    color: #a17d0a;
}

/* Success Banner - Green tones */
.success-banner {
    background-color: var(--color-success-light);
    border-color: #8bc78f;
    color: #1a5928;
}

.success-banner>span:first-child {
    color: var(--color-success);
}

/* Error Banner - Red tones */
.error-banner {
    background-color: var(--color-error-light);
    border-color: #e5a3a3;
    color: #7a1b1b;
}

.error-banner>span:first-child {
    color: var(--color-error);
}

/* Info Banner - Blue tones */
.info-banner {
    background-color: var(--color-info);
    border-color: #8ec6de;
    color: #155a7a;
}

.info-banner>span:first-child {
    color: var(--color-info-border);
}

/* Banner links */
.warning-banner a,
.success-banner a,
.error-banner a,
.info-banner a {
    color: inherit;
    font-weight: var(--font-semibold);
    text-decoration: underline;
}

.warning-banner a:hover,
.success-banner a:hover,
.error-banner a:hover,
.info-banner a:hover {
    text-decoration-thickness: 2px;
}

/* Banner with close button */
.warning-banner button,
.success-banner button,
.error-banner button,
.info-banner button {
    margin-left: auto;
    padding: var(--space-1);
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
    line-height: 1;
}

.warning-banner button:hover,
.success-banner button:hover,
.error-banner button:hover,
.info-banner button:hover {
    opacity: 1;
}

.banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-inline-end: var(--space-3);
}

.banner__text {
    margin: 0;
}

/* Responsive: Full width and slightly more padding on mobile */
@media (max-width: 600px) {

    .warning-banner,
    .success-banner,
    .error-banner,
    .info-banner {
        padding: var(--space-3);
        font-size: var(--text-sm);
    }
}

/* ========================================================================== */


/* ==========================================================================
   NEW CODE - 27/1/2026
   Task: Due Date Badges for Favorites Cards (TODAY / TOMORROW)
   
   Usage:
   <span class="meta-note">
     <span class="due-badge due-badge--today">TODAY</span>
   </span>
   
   or
   
   <span class="meta-note">
     <span class="due-badge due-badge--tomorrow">TOMORROW</span>
   </span>
   ========================================================================== */

/* Base badge style */
.due-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    vertical-align: middle;
}

/* TODAY - Urgent (soft red/coral tones) */
.due-badge--today {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* TOMORROW - Warning (soft amber/yellow tones) */
.due-badge--tomorrow {
    background-color: #fffbeb;
    color: #92400e;
    border: 1px solid #fcd34d;
}

/* Optional: OVERDUE variant */
.due-badge--overdue {
    background-color: #fef2f2;
    color: #7f1d1d;
    border: 1px solid #f87171;
    font-weight: var(--font-bold);
}

/* Optional: THIS WEEK variant (low urgency) */
.due-badge--soon {
    background-color: #eff6ff;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

/* When badge is inside .meta-note, adjust spacing */
.meta-note .due-badge {
    margin-left: 0;
}

/* Ensure badge doesn't break layout in meta-row */
.meta-row .due-badge {
    margin-top: var(--space-1);
}

/* ==========================================================================
   AI Badge - AI-Generated Content Indicator
   A colorful inline badge to signal AI-generated summaries
   ========================================================================== */

.ai-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: #ffffff;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
    border-radius: var(--radius-sm);
    vertical-align: middle;
    margin-right: var(--space-2);
    cursor: help;
    transition: all var(--transition-fast);
    position: relative;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.ai-badge::before {
    content: "AI";
    font-size: 0.65rem;
    font-weight: 700;
}

.ai-badge i {
    font-size: 0.7rem;
    color: #ffffff;
    opacity: 0.95;
}

.ai-badge:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.5);
    transform: translateY(-1px) scale(1.02);
}

/* Sparkle animation on hover */
.ai-badge:hover i {
    animation: ai-sparkle 0.5s ease-in-out;
}

@keyframes ai-sparkle {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.2) rotate(-5deg);
    }

    50% {
        transform: scale(1.1) rotate(5deg);
    }

    75% {
        transform: scale(1.15) rotate(-3deg);
    }
}

/* Inactive card AI badge - muted styling */
.is-inactive .ai-badge {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.25);
}

.is-inactive .ai-badge:hover {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    box-shadow: 0 3px 8px rgba(107, 114, 128, 0.35);
    transform: translateY(-1px);
}

/* ========================================================================== */


/* ==========================================================================
   NEW CODE - 27/1/2026
   Task: Improve metadata column separation in Favorites cards
   
   Changes:
   - Added subtle left border accent to aside
   - Added light dividers between meta-rows
   - Improved internal spacing for better scanability
   ========================================================================== */

/* Enhanced aside styling with subtle left border accent */
.favorite-card__aside {
    border-left: 3px solid var(--color-gray-200);
    background: linear-gradient(to right, var(--color-gray-50), var(--color-white));
}

/* Add subtle dividers between meta-rows */
.meta-row {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-gray-100);
}

.meta-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

/* Highlight the first meta-row (Current Response Date) as more prominent */
.favorite-card__aside .meta-row:first-child {
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-gray-200);
}

.favorite-card__aside .meta-row:first-child .meta-value {
    color: var(--color-gray-900);
    font-weight: var(--font-semibold);
}

/* Responsive: Remove left border on mobile, use top border instead */
@media (max-width: 768px) {
    .favorite-card__aside {
        border-left: none;
        border-top: 2px solid var(--color-gray-200);
        background: var(--color-gray-50);
        margin-top: var(--space-3);
        padding-top: var(--space-4);
    }
}

/* ========================================================================== */


/* ==========================================================================
   NEW CODE - 27/1/2026
   Task: Favorites Page Comprehensive UI Improvements
   
   Enhancements:
   1. Card header with title link improvements
   2. Enhanced badge styling (set-aside type)
   3. Improved Notice ID presentation
   4. Better description area with expand button
   5. Enhanced meta-grid styling
   6. Improved NAICS row
   7. Better card hover and focus states
   8. Empty state styling
   9. Bulk actions bar
   10. Card numbering/count indicator
   ========================================================================== */

/* --- 1. CARD HEADER IMPROVEMENTS --- */

/* Card title link - more prominent hover */
.favorite-card__title a {
    display: inline;
    background-image: linear-gradient(transparent calc(100% - 2px), var(--color-primary) 2px);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease, color var(--transition-base);
}

.favorite-card__title a:hover {
    text-decoration: none;
    background-size: 100% 100%;
}

/* Heart button improvements */
.favorite-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.favorite-btn:active {
    transform: scale(0.9);
}

.favorite-btn.active {
    background-color: #fef2f2;
}

/* Pulse animation on hover for active heart */
.favorite-btn.active:hover {
    animation: heartPulse 0.6s ease-in-out;
}

@keyframes heartPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* --- 2. ENHANCED BADGE STYLING --- */

.favorite-card__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: linear-gradient(135deg, var(--color-success-light) 0%, #d1fae5 100%);
    color: #047857;
    font-size: 0.6875rem;
    font-weight: var(--font-semibold);
    padding: var(--space-1) var(--space-3);
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid rgba(4, 120, 87, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Badge icon (optional - for backend to add) */
/* .favorite-card__badge::before {
    content: "";
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    opacity: 0.7;
} */

/* --- 3. IMPROVED NOTICE ID PRESENTATION --- */

.favorite-card__notice-id {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    background: var(--color-gray-50);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-gray-100);
    margin-bottom: var(--space-3);
    width: fit-content;
}

.favorite-card__notice-id .meta-label {
    color: var(--color-gray-500);
    font-weight: var(--font-medium);
    font-family: var(--font-family);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0;
}

/* Copy button for Notice ID (optional enhancement) */
.favorite-card__notice-id .copy-btn {
    margin-left: auto;
    padding: var(--space-1);
    border: none;
    background: transparent;
    color: var(--color-gray-400);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
}

.favorite-card__notice-id .copy-btn:hover {
    color: var(--color-primary);
    background: var(--color-gray-100);
}

/* --- 4. BETTER DESCRIPTION AREA --- */

.favorite-card__desc {
    position: relative;
    background: var(--color-gray-50);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-gray-200);
    margin-bottom: var(--space-4);
}

/* Expand arrow button enhancement */
.expand-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: var(--space-2);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-size: 0.75rem;
    transition: all var(--transition-base);
}

.expand-arrow:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- 5. ENHANCED META-GRID STYLING --- */

.meta-grid {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.meta-grid__header {
    background: linear-gradient(to bottom, var(--color-gray-50), var(--color-gray-100));
    border-bottom: 1px solid var(--color-gray-200);
}

.meta-grid__header span {
    position: relative;
    padding: var(--space-2) var(--space-3);
    font-size: 0.6875rem;
    font-weight: var(--font-bold);
    color: var(--color-gray-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Column dividers in header */
.meta-grid__header span:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: var(--color-gray-200);
}

.meta-grid__values span {
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-gray-800);
    background: var(--color-white);
}

/* Zebra striping for better readability */
.meta-grid__values span:nth-child(2) {
    background: rgba(0, 0, 0, 0.01);
}

/* --- 6. IMPROVED NAICS ROW --- */

.favorite-card__naics {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-100);
}

.favorite-card__naics .meta-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.625rem;
    font-weight: var(--font-bold);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- 7. BETTER CARD HOVER AND FOCUS STATES --- */

.favorite-card {
    position: relative;
    border-left: 4px solid var(--color-gray-200);
    ;
    transition: all 0.25s ease;
}

.favorite-card:hover {
    border-left-color: var(--color-primary);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.favorite-card:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Card number indicator */
.favorite-card::before {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-gray-300);
    font-weight: var(--font-medium);
}

/* --- 8. EMPTY STATE STYLING --- */

.favorites-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
    background: var(--color-gray-50);
    border: 2px dashed var(--color-gray-200);
    border-radius: var(--radius-lg);
    margin: var(--space-6) 0;
}

.favorites-empty__icon {
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-4);
    color: var(--color-gray-300);
}

.favorites-empty__title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-gray-700);
    margin: 0 0 var(--space-2);
}

.favorites-empty__text {
    font-size: var(--text-base);
    color: var(--color-gray-500);
    margin: 0 0 var(--space-6);
    max-width: 400px;
}

.favorites-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-medium);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-base);
}

.favorites-empty__btn:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* --- 9. BULK ACTIONS BAR --- */

.favorites-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.favorites-actions__count {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.favorites-actions__count strong {
    color: var(--color-gray-900);
    font-weight: var(--font-semibold);
}

.favorites-actions__buttons {
    display: flex;
    gap: var(--space-2);
}

.favorites-actions__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
}

.favorites-actions__btn--secondary {
    background: var(--color-white);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-300);
}

.favorites-actions__btn--secondary:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-400);
}

.favorites-actions__btn--danger {
    background: var(--color-white);
    color: #dc2626;
    border: 1px solid #fecaca;
}

.favorites-actions__btn--danger:hover {
    background: #fef2f2;
    border-color: #f87171;
}

/* --- 10. SORT/FILTER DROPDOWN --- */

.favorites-filters {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.favorites-filter {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.favorites-filter__label {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    font-weight: var(--font-medium);
}

.favorites-filter__select {
    padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E") no-repeat right 8px center;
    appearance: none;
    cursor: pointer;
    transition: border-color var(--transition-base);
}

.favorites-filter__select:hover {
    border-color: var(--color-gray-400);
}

.favorites-filter__select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 82, 155, 0.1);
}

/* --- 11. CARD SKELETON LOADING --- */

.favorite-card--skeleton {
    pointer-events: none;
}

.favorite-card--skeleton .skeleton {
    background: linear-gradient(90deg,
            var(--color-gray-100) 25%,
            var(--color-gray-200) 50%,
            var(--color-gray-100) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton--title {
    height: 24px;
    width: 80%;
}

.skeleton--badge {
    height: 22px;
    width: 200px;
}

.skeleton--text {
    height: 16px;
    width: 100%;
    margin-bottom: var(--space-2);
}

.skeleton--text:last-child {
    width: 60%;
}

@keyframes skeletonShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* --- 12. VIEW TOGGLE (LIST/GRID) --- */

.view-toggle {
    display: flex;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.view-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-white);
    border: none;
    color: var(--color-gray-400);
    cursor: pointer;
    transition: all var(--transition-base);
}

.view-toggle__btn:not(:last-child) {
    border-right: 1px solid var(--color-gray-300);
}

.view-toggle__btn:hover {
    color: var(--color-gray-600);
    background: var(--color-gray-50);
}

.view-toggle__btn.active {
    background: var(--color-primary);
    color: var(--color-white);
}

/* --- 13. QUICK ACTIONS ON HOVER --- */

.favorite-card__quick-actions {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: flex;
    gap: var(--space-1);
    opacity: 0;
    transform: translateY(-4px);
    transition: all 0.2s ease;
}

.favorite-card:hover .favorite-card__quick-actions {
    opacity: 1;
    transform: translateY(0);
}

.quick-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    color: var(--color-gray-500);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.quick-action-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: rgba(0, 82, 155, 0.05);
}

.quick-action-btn--danger:hover {
    color: #dc2626;
    border-color: #dc2626;
    background: #fef2f2;
}

/* --- RESPONSIVE ADJUSTMENTS --- */

@media (max-width: 768px) {
    .favorites-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .favorites-actions__buttons {
        justify-content: flex-end;
    }

    .favorites-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .favorites-filter {
        width: 100%;
    }

    .favorites-filter__select {
        flex: 1;
    }

    .favorite-card__quick-actions {
        opacity: 1;
        transform: translateY(0);
    }

    .view-toggle {
        display: none;
    }

    /* Adjust card hover on mobile */
    .favorite-card:hover {
        transform: none;
    }
}

/* ==========================================================================
   FONT AWESOME ICON UTILITIES
   Global icon styles for Font Awesome integration
   ========================================================================== */

/* Base icon class */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

/* Standard icon sizes */
.icon--sm {
    font-size: 0.75em;
}

.icon--md {
    font-size: 1em;
}

.icon--lg {
    font-size: 1.25em;
}

/* Icon spacing (when before text) */
.icon+span,
.icon+.btn-text,
[class*="fa-"]+span {
    margin-left: var(--space-2);
}

/* Icon spacing (when after text) */
span+.icon,
.btn-text+.icon,
span+[class*="fa-"] {
    margin-left: var(--space-1);
}

/* External link icon - subtle indicator */
.icon-external {
    font-size: 0.75em;
    opacity: 0.5;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

a:hover .icon-external,
a:focus .icon-external {
    opacity: 1;
    transform: translate(1px, -1px);
}

/* Dropdown chevron icon */
.icon-chevron {
    font-size: 0.75em;
    transition: transform var(--transition-fast);
}

/* Rotate chevron when expanded */
[aria-expanded="true"] .icon-chevron,
.is-open .icon-chevron {
    transform: rotate(180deg);
}

/* Banner/Alert icon colors */
.banner--success .icon,
.banner--success [class*="fa-"] {
    color: var(--color-success);
}

.banner--error .icon,
.banner--error [class*="fa-"] {
    color: var(--color-error);
}

.banner--warning .icon,
.banner--warning [class*="fa-"] {
    color: #946c00;
}

.banner--info .icon,
.banner--info [class*="fa-"] {
    color: var(--color-info-border);
}

/* Heart/Favorite icon states */
.icon-heart {
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.icon-heart:hover {
    transform: scale(1.1);
}

.icon-heart.is-active,
.favorite-btn.active .icon-heart {
    color: var(--color-accent);
}

/* Pagination icon disabled state */
.pagination__btn:disabled .icon,
.pagination__btn:disabled [class*="fa-"] {
    opacity: 0.4;
}

/* Close button icon */
.icon-close {
    font-size: 1.25em;
    line-height: 1;
}

/* Lock/Security icon */
.icon-lock {
    font-size: 0.875em;
    opacity: 0.7;
}

/* Info icon */
.icon-info {
    font-size: 1em;
    color: var(--color-info-border);
}

/* Hint/Tip icon */
.icon-hint {
    font-size: 1em;
    color: #b8860b;
}

/* Expand/Fullscreen icon */
.icon-expand {
    font-size: 0.875em;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.preview-card:hover .icon-expand {
    opacity: 1;
}

/* Shield/Trust icon */
.icon-shield {
    color: var(--color-success);
}

/* Screen reader only text (for icon accessibility) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   FAVORITES PAGE - META LABEL ICONS
   Icons for labels and badges on favorite cards
   ========================================================================== */

/* Meta label icons (subtle, small) */
.meta-label i[class*="fa-"] {
    font-size: 0.85em;
    opacity: 0.6;
    margin-right: 0.25em;
}

/* Badge icons */
.favorite-card__badge i[class*="fa-"] {
    font-size: 0.8em;
    margin-right: 0.35em;
}

/* Status label icons */
.favorite-card__status-label i[class*="fa-"] {
    font-size: 0.9em;
    margin-right: 0.3em;
}

/* NAICS tag icon color */
.favorite-card__naics i.fa-tag {
    opacity: 0.7;
    margin-right: .2rem;
}

/* Notice ID hashtag icon */
.favorite-card__notice-id i.fa-hashtag {
    color: var(--color-gray-500);
}

/* Response date clock icon - highlight when urgent */
.due-badge--today~.meta-label i.fa-clock,
.meta-row:has(.due-badge--today) .meta-label i.fa-clock {
    color: var(--color-error);
    opacity: 1;
}

.due-badge--tomorrow~.meta-label i.fa-clock,
.meta-row:has(.due-badge--tomorrow) .meta-label i.fa-clock {
    color: #b45309;
    opacity: 1;
}

/* ==========================================================================
   HOME PAGE - STEP CARD & PREVIEW CARD ICONS
   Icons for step cards and preview card titles
   ========================================================================== */

/* Step card title icons */
.step-card__title i[class*="fa-"] {
    color: var(--color-primary);
    margin-right: 0.5em;
    font-size: 0.9em;
}

/* Preview card title icons */
.preview-card__title i[class*="fa-"] {
    color: var(--color-primary);
    margin-right: 0.5em;
    font-size: 0.85em;
    opacity: 0.85;
}

/* Specific icon colors for preview cards */
.preview-card__title i.fa-bell {
    color: #f59e0b;
}

.preview-card__title i.fa-heart {
    color: #ef4444;
}

.preview-card__title i.fa-file-lines {
    color: var(--color-primary);
}

.preview-card__title i.fa-circle-question {
    color: #6366f1;
}

/* ==========================================================================
   REPORTS PAGE - TABLE & PAGE HEADER ICONS
   Icons for reports table headers and page elements
   ========================================================================== */

/* Page title icon */
.page-title i[class*="fa-"] {
    color: var(--color-primary);
    margin-right: 0.5em;
    font-size: 0.9em;
}

/* Table header icons */
.reports-table th i[class*="fa-"] {
    font-size: 0.85em;
    opacity: 0.7;
    margin-right: 0.25em;
}

/* View Report button icon */
.btn i[class*="fa-"] {
    margin-right: 0.25em;
    font-size: 0.9em;
}

/* Report badge icon (Intro Report star) */
.report-badge i[class*="fa-"] {
    font-size: 0.8em;
    margin-right: 0.15em;
    color: #f59e0b;
}

/* Empty state icon */
.reports-empty-state i[class*="fa-"] {
    display: block;
    font-size: 2.5rem;
    color: var(--color-gray-400);
    margin-bottom: var(--space-3);
}

/* ==========================================================================
   PAGE TITLE ICONS - ALL PAGES
   Unified icon styling for page headers across the site
   ========================================================================== */

/* Settings page title icons */
.settings-page__title i[class*="fa-"] {
    color: var(--color-primary);
    margin-right: 0.5em;
    font-size: 0.85em;
    opacity: 0.85;
}

/* Auth page title icons (Login, Signup) */
.auth-card__title i[class*="fa-"] {
    color: var(--color-primary);
    margin-right: 0.5em;
    font-size: 0.85em;
    opacity: 0.9;
}

/* Payment page title icon */
.payment-card__title i[class*="fa-"] {
    color: var(--color-primary);
    margin-right: 0.5em;
    font-size: 0.8em;
    opacity: 0.9;
}

/* FAQ page title icon */
.faq-page__header h1 i[class*="fa-"] {
    color: var(--color-primary);
    margin-right: 0.5em;
    font-size: 0.85em;
    opacity: 0.9;
}

/* Document page title icons (Privacy, Terms) */
.doc-content__header h1 i[class*="fa-"] {
    color: var(--color-primary);
    margin-right: 0.5em;
    font-size: 0.8em;
    opacity: 0.85;
}

/* ==========================================================================
   INPUT WITH ICON
   Adds icon prefix to form inputs
   ========================================================================== */

.input-with-icon {
    position: relative;
    display: block;
}

.input-with-icon input {
    padding-left: 2.5rem;
    width: 100%;
    margin-top: 0;
}

.input-icon {
    position: absolute;
    left: 0.875rem;
    top: calc(50% + 0.125rem);
    transform: translateY(-50%);
    color: var(--color-gray-400);
    font-size: 0.875rem;
    pointer-events: none;
    transition: color 0.2s ease;
    z-index: 1;
}

/* Icon color change on input focus */
.input-with-icon input:focus+.input-icon,
.input-with-icon input:focus~.input-icon {
    color: var(--color-primary);
}

/* When combined with password wrapper */
.input-with-icon.password-wrapper input {
    padding-left: 2.5rem;
    padding-right: 2.75rem;
}

/* ==========================================================================
   PASSWORD VISIBILITY TOGGLE
   Eye icon button to show/hide password
   ========================================================================== */

.password-wrapper {
    position: relative;
    display: block;
}

.password-wrapper input {
    margin-top: 0;
    padding-right: 2.75rem;
    width: 100%;
}

.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: calc(50% + 0.125rem);
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #9ca3af;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.password-toggle:hover {
    color: #6b7280;
    background-color: transparent;
}

.password-toggle:focus {
    outline: none;
}

.password-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-radius: 4px;
}

/* Active state when password is visible */
.password-toggle.is-visible {
    color: var(--color-primary);
}

.password-toggle.is-visible:hover {
    color: #1d4ed8;
}

/* ==========================================================================
   NAICS SEO Page - Content-First Styles
   Consistent with Reports / Favorites design patterns
   ========================================================================== */

/* Container */
.naics-seo-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Page Subtitle (under H1) */
.naics-seo-container .page-subtitle {
    font-size: var(--text-lg);
    color: var(--color-gray-500);
    margin: 0;
    font-weight: var(--font-normal);
}

/* Stats Banner - Simple info bar */
.naics-seo-stats {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background-color: var(--color-info);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    color: var(--color-gray-700);
    margin-bottom: var(--space-6);
}

.naics-seo-stats i {
    color: var(--color-info-border);
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.naics-seo-stats strong {
    color: var(--color-gray-900);
    font-weight: var(--font-semibold);
}

/* Results Section */
.naics-seo-results {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.naics-seo-results__heading {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-gray-700);
    padding: var(--space-4) var(--space-5);
    margin: 0;
    border-bottom: 1px solid var(--color-gray-200);
    background-color: var(--color-gray-50);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Promotional Text - Subtle hint, persuasive but not competing */
.naics-seo-promo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-gray-600);
    background-color: var(--color-primary-50, #eff6ff);
    border-bottom: 1px solid var(--color-gray-100);
    line-height: var(--leading-relaxed);
}

.naics-seo-promo i {
    font-size: var(--text-sm);
    color: var(--color-primary-500, #3b82f6);
}

.naics-seo-results__list {
    margin: 0;
    padding: 0;
}

/* Individual Opportunity Item */
.naics-seo-item {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-gray-100);
}

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

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

.naics-seo-item__title {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-gray-800);
    margin: 0 0 var(--space-2) 0;
    line-height: var(--leading-normal);
}

.naics-seo-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.naics-seo-item__agency,
.naics-seo-item__date {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.naics-seo-item__agency i,
.naics-seo-item__date i {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
}

/* Gated Item - Softly blurred to indicate locked content */
.naics-seo-item--gated {
    position: relative;
    pointer-events: none;
    user-select: none;
}

.naics-seo-item--gated .naics-seo-item__title {
    filter: blur(3px);
    color: var(--color-gray-400);
}

.naics-seo-item--gated .naics-seo-item__meta {
    filter: blur(2px);
    opacity: 0.5;
}

.naics-seo-item--gated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0.85) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Empty State Banner - Centered with neutral icon */
.naics-seo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-5);
    background-color: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
    text-align: center;
}

.naics-seo-empty i {
    color: var(--color-gray-400);
    font-size: var(--text-2xl);
}

.naics-seo-empty p {
    margin: 0;
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.naics-seo-empty p {
    margin: 0;
}

.naics-seo-empty[hidden] {
    display: none;
}

/* CTA Section - Clean, professional, not overpowering */
.naics-seo-cta {
    padding: var(--space-6) var(--space-5);
    background-color: var(--color-white);
    border-top: 1px solid var(--color-gray-200);
    text-align: center;
}

.naics-seo-cta__count {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin: 0 0 var(--space-3) 0;
}

.naics-seo-cta__count strong {
    color: var(--color-gray-600);
    font-weight: var(--font-medium);
}

.naics-seo-cta__text {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin: 0 0 var(--space-4) 0;
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
}

.naics-seo-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-8);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.naics-seo-cta__button:hover {
    background-color: var(--color-primary-hover);
    text-decoration: none;
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.naics-seo-cta__button:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Source Note */
.naics-seo-source {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-100);
}

.naics-seo-source i {
    font-size: var(--text-sm);
}

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

/* ==========================================================================
   NAICS SEO Page - Responsive Styles
   ========================================================================== */

@media (max-width: 768px) {
    .naics-seo-stats {
        flex-direction: column;
        text-align: center;
        gap: var(--space-2);
    }

    .naics-seo-item__meta {
        flex-direction: column;
        gap: var(--space-1);
    }
}

@media (max-width: 480px) {
    .naics-seo-container .page-subtitle {
        font-size: var(--text-base);
    }

    .naics-seo-stats {
        padding: var(--space-3);
        font-size: var(--text-sm);
    }

    .naics-seo-results__heading {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
    }

    .naics-seo-item {
        padding: var(--space-3) var(--space-4);
    }

    .naics-seo-item__title {
        font-size: var(--text-sm);
    }

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

    .naics-seo-cta {
        padding: var(--space-4);
    }

    .naics-seo-cta__button {
        width: 100%;
        padding: var(--space-3) var(--space-4);
    }
}

/* ==========================================================================
   TESTIMONIALS SECTION
   Social proof section matching site design system
   ========================================================================== */

.testimonials-section {
    padding: var(--space-12) 0;
    background-color: var(--color-white);
}

.testimonials-section .section-header {
    max-width: var(--container-max);
    margin: 0 auto var(--space-8);
    padding: 0 var(--container-padding);
}

/* Slider Wrapper */
.testimonials-wrapper {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    overflow: hidden;
}

/* Cards Container - flex row that slides */
.testimonials-grid {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 24px;
}

/* Testimonial Card */
.testimonial-card {
    /* Desktop: 3 cards per view, accounting for gaps */
    /* With 2 gaps of 24px each in a view of 3 cards, and 6 total cards */
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: 0; /* Prevent flex item from overflowing */
    display: flex;
    flex-direction: column;
    background-color: var(--color-gray-50);
    border: var(--border-width) solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-sizing: border-box;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.testimonial-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-gray-300);
}

.testimonial-card__body {
    flex: 1;
}

.testimonial-card__quote {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: var(--leading-relaxed);
    margin: 0;
    font-style: normal;
    position: relative;
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-primary);
}

.testimonial-card__footer {
    margin-top: var(--space-5);
    padding-top: var(--space-4);

    padding-bottom: 0;
    border-top: 1px solid var(--color-gray-200);
    background-color: transparent;
}

.testimonial-card__author {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.testimonial-card__name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-gray-800);
}

.testimonial-card__role {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

/* Slider Dots */
.testimonials-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.testimonials-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-gray-300);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonials-dot:hover {
    background-color: var(--color-gray-400);
}

.testimonials-dot.is-active {
    background-color: var(--color-primary);
    transform: scale(1.3);
}

.testimonials-dot:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Tablet: 2 cards per view */
@media (max-width: 992px) and (min-width: 769px) {
    .testimonials-grid {
        gap: 20px;
    }
    .testimonial-card {
        /* 2 cards with 1 gap of 20px */
        flex: 0 0 calc((100% - 20px) / 2);
    }
}

/* Mobile: 1 card per view */
@media (max-width: 768px) {
    .testimonials-wrapper {
        padding: 0 var(--space-4);
    }
    
    .testimonials-grid {
        gap: 16px;
    }
    
    .testimonial-card {
        /* 1 card per view = 100% width */
        flex: 0 0 100%;
    }

    .testimonials-dots {
        margin-top: var(--space-4);
    }

    .testimonials-dot {
        width: 8px;
        height: 8px;
    }
}