html {
    scroll-behavior: smooth;
}
/* Prevent layout shift when body scroll is locked */
body.overflow-hidden {
    padding-right: 0px; /* Adjust if scrollbar width is an issue, but modern browsers handle this well with overlay */
}
.category-card {
    display: flex; /* Re-applied by JS filter */
    flex-direction: column;
    align-items: center; /* NEW: Center-align flex items */
    text-align: center; /* NEW: Center-align text */
    gap: 0.25rem; /* MODIFIED: Was 0.375rem */
    padding: 0.75rem; /* MODIFIED: Was 1rem */
    border-radius: 0.5rem; /* MODIFIED: Was 0.75rem */
    border: 1px solid rgba(241, 32, 61, 0.15); /* MODIFIED: Faint brand-red border */
    background: #ffffff; /* Solid white for better shadow */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05); /* Smooth shadow */
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.category-card:hover {
    transform: translateY(-4px);
    border-color: #F1203D; /* MODIFIED: Solid brand-red on hover */
    box-shadow: 0 10px 30px rgba(241, 32, 61, 0.1); /* Prominent red-tinted shadow */
}
/* Applied H3 size via Tailwind */
.category-card h3 {
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    color: #0f172a; /* MODIFIED: Darkened from #050505 to slate-900 equivalent for consistent dark text */
}
/* Applied desc text size via Tailwind */
.category-card p {
    color: #334155; /* MODIFIED: Darkened from rgb(71 85 105) (slate-500) to slate-700 equivalent for better contrast */
}
.category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem; /* MODIFIED: Was 2rem */
    height: 1.75rem; /* MODIFIED: Was 2rem */
    border-radius: 9999px;
    font-size: 0.75rem; /* MODIFIED: Was 0.875rem */
    /* NEW: Gradient background for icons */
    background-image: linear-gradient(135deg, #f97316, #F1203D);
    color: white;
}
.subcategory-list {
    display: none;
    padding-left: 1rem; /* MODIFIED: Was 1.25rem */
    margin-top: 0.25rem;
    list-style: disc;
    color: #475569; /* MODIFIED: Darkened from rgb(100 116 139) (slate-500) to slate-600 for better contrast */
    font-size: 11px; /* MODIFIED: Was 12px */
}
.subcategory-list.is-visible {
    display: block;
}

/* MODIFIED: 
  Custom focus styles are now applied directly in the header HTML.
  This block can be simplified or removed, but we'll keep the base
  style for any *other* search bars just in case.
*/
#calculatorSearch:focus {
    outline: none;
}

/* REMOVED: .hide-scrollbar styles 
  (They are now injected by js/global.js) 
*/

/* --- Mobile Menu Link Styles --- */
/* These styles are used by the injected mobile menu */
.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 0.625rem; /* 10px */
    padding: 0.625rem 1rem; /* 10px 16px */
    border-radius: 0.5rem; /* 8px */
    font-size: 0.75rem; /* 12px (Was 13px) */
    font-weight: 800; /* Extra Bold */
    color: rgb(226 232 240); /* slate-200 */
    transition: background-color 0.2s ease;
}
.mobile-menu-link:hover, .mobile-menu-link:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}
.mobile-menu-link i {
    width: 1.25rem; /* 20px */
    text-align: center;
    color: rgb(241 32 61); /* brand-red */
    opacity: 0.9;
}

/* --- NEW: Form Styles --- */
/* Added styles for the new contact form */
.form-label {
    display: block;
    margin-bottom: 0.375rem; /* 6px (Was 4px) */
    font-size: 0.875rem; /* 14px (Was 12px) */
    font-weight: 600; /* MODIFIED: Increased weight for better legibility */
    color: #334155; /* MODIFIED: Darkened text color */
}

.form-input {
    display: block;
    width: 100%;
    border-radius: 0.5rem; /* 8px */
    border: 1px solid rgb(203 213 225); /* slate-300 */
    padding: 0.625rem 0.875rem; /* 10px 14px */
    font-size: 0.875rem; /* 14px */
    color: #0f172a; /* MODIFIED: Darker text input color */
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: #F1203D; /* brand-red */
    box-shadow: 0 0 0 2px rgba(241, 32, 61, 0.2); /* brand-red focus ring */
}

/* --- NEW: Toast Notification Styles --- */
#clipboard-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(3rem); /* Start off-screen */
    background-color: #222; /* Dark background */
    color: white;
    padding: 0.75rem 1.5rem; /* 12px 24px */
    border-radius: 9999px; /* Full pill shape */
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 100;
    white-space: nowrap;
}

#clipboard-toast.toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* Slide up */
}

/* --- NEW: Centralized Page Widths --- */
.main-container {
    max-width: 1050px;
}
.category-container {
    max-width: 1050px; /* MODIFIED: Increased from 1000px */
}

/* --- CENTRALIZED PRINT STYLES --- */
/* Applied automatically to all pages */
@media print {
    /* Hide Non-Essential Layout Elements */
    #header-placeholder, 
    #footer-placeholder, 
    nav[aria-label="Breadcrumb"], 
    h1, 
    .calc-tool-header, 
    #mobile-widget-placeholder, 
    #desktop-widget-placeholder,
    .calc-section-divider, 
    .w-full.max-w-\[702px\], /* SEO Section */
    .lg\:w-\[300px\], /* Sidebar */
    .ad-box,
    #chartTooltip,
    #toggleMoreOptions, /* Hide toggles */
    .no-print,
    .calc-seo-content, /* Hides SEO content */
    .content-section /* Hides Guide container */
    {
        display: none !important;
    }

    /* Reset Main Containers for Full Width */
    body, main, .main-container {
        background-color: white !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Layout Grid Reset */
    .flex-col.lg\:flex-row {
        flex-direction: column !important;
        gap: 0 !important;
        margin: 0 !important;
    }

    .flex-1.min-w-0 {
        width: 100% !important;
        flex: none !important;
    }

    /* Calculator Wrapper Styling */
    #calculator-wrapper, 
    .calc-body-wrapper { /* Supports both ID and class naming conventions */
        margin: 0 auto !important;
        width: 100% !important;
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        /* UPDATED: Allows long content (like tables) to span multiple pages */
        break-inside: auto !important; 
        display: block !important;
    }
    
    /* Ensure Input Section stays together on one page if possible */
    .calc-input-section {
        background-color: #f3f4f6 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        break-inside: avoid;
        margin-bottom: 20px !important; /* Spacing between inputs and results in print */
    }
    
    /* Hide Action Buttons in Print */
    #saveBtn, #shareBtn, #printBtn, #downloadCsvBtn, #toggleTableBtn, 
    .calc-action-group {
        display: none !important;
    }

    /* Ensure Chart Colors Print */
    .chart-segment {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* --- SPECIFIC FIXES FOR EXPANDABLE TABLES (Like Mortgage) --- */
    
    /* 1. Force the container to show and expand height */
    #amortizationContainer {
        display: block !important; /* Override .hidden */
        max-height: none !important; /* Remove max-height limit */
        height: auto !important;
        overflow: visible !important; /* Remove scrollbars */
        margin-top: 20px !important;
        border: 1px solid #e2e8f0 !important;
        break-inside: auto !important; /* Allow page breaking inside */
    }

    /* 2. Reset the inner scroll wrapper */
    #amortizationContainer .overflow-x-auto, 
    #amortizationContainer .slim-scroll {
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* 3. Hide the Close button in the table header */
    #amortizationContainer button {
        display: none !important;
    }
}

/* --- CLS PREVENTION --- */
/* Reserve space for injected header to prevent layout jump */
#header-placeholder {
    min-height: 52px; /* Mobile: Header Only (16px padding + 36px content) */
}

@media (min-width: 640px) {
    #header-placeholder {
        min-height: 60px; /* Tablet: Expanded Header (24px padding + 36px content) */
    }
}

@media (min-width: 768px) {
    #header-placeholder {
        /* Desktop: Header (60px) + Category Quick Bar (~41px) */
        min-height: 101px; 
    }
}

/* --- Footer Accessibility Fixes --- */
/* Ensure sufficient contrast for footer text on dark background */
footer .text-slate-500 {
    color: #94a3b8 !important; /* lighten to slate-400 for contrast > 4.5:1 */
}
footer .text-slate-400 {
    color: #cbd5e1 !important; /* lighten to slate-300 for even better readability */
}