/*
 * CREDIT CARD PAYOFF CALCULATOR — AI-POWERED DEBT ANALYZER - PRODUCTION CSS v1.0
 * FinGuid USA - Market Domination Build
 * Inherits design system from mortgage-calculator.css for platform consistency
 */

/* === FinGuid Color Tokens & Base (From mortgage-calculator.css) === */
:root {
    --color-white: rgba(255, 255, 255, 1);
    --color-black: rgba(0, 0, 0, 1);
    --color-cream-100: rgba(255, 255, 253, 1);
    --color-gray-200: rgba(245, 245, 245, 1);
    --color-gray-300: rgba(183, 184, 185, 1);
    --color-charcoal-700: rgba(31, 33, 33, 1);
    --color-charcoal-800: rgba(24, 25, 25, 1);
    --color-slate-500: rgba(100, 116, 139, 1);
    --color-slate-900: rgba(19, 52, 59, 1);
    --color-teal-400: rgba(36, 172, 185, 1);
    --color-teal-300: rgba(87, 203, 215, 1);
    --color-red-500: rgba(239, 68, 68, 1);
    --color-green-500: rgba(16, 185, 129, 1);
    --color-brown-600: rgba(148, 82, 42, 1);
    --color-orange-500: rgba(249, 115, 22, 1); /* For Medium Priority */

    /* Global Scheme Variables (Light Mode Defaults) */
    --color-text: var(--color-charcoal-700);
    --color-text-light: var(--color-slate-500);
    --color-background: var(--color-cream-100);
    --color-card-background: var(--color-white);
    --color-border: var(--color-gray-200);
    --color-primary: var(--color-slate-900);
    --color-accent: var(--color-teal-400);

    /* Spacing */
    --space-4: 0.25rem;
    --space-8: 0.5rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-64: 4rem;

    /* Typography */
    --font-family-primary: 'Helvetica Neue', Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2.25rem;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Dark Mode Overrides */
[data-color-scheme="dark"] {
    --color-text: var(--color-white);
    --color-text-light: var(--color-gray-300);
    --color-background: var(--color-charcoal-700);
    --color-card-background: var(--color-charcoal-800);
    --color-border: var(--color-brown-600);
    --color-primary: var(--color-teal-400);
    --color-accent: var(--color-teal-300);
}

/* === Base Styles (Inherited) === */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-family-primary);
    background-color: var(--color-background);
    color: var(--color-text);
    transition: background-color 0.3s, color 0.3s;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { color: var(--color-accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-primary); }
h1, h2, h3 { color: var(--color-primary); margin-bottom: var(--space-16); line-height: 1.2; }
[data-color-scheme="dark"] h1, 
[data-color-scheme="dark"] h2, 
[data-color-scheme="dark"] h3 {
    color: var(--color-primary);
}


/* === Header (Inherited) === */
.main-header {
    background-color: var(--color-card-background);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-16) var(--space-24);
    box-shadow: var(--shadow-sm);
}
.header-content {
    max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
}
.logo { font-size: var(--font-size-xl); font-weight: 900; margin: 0; }
.logo a { color: var(--color-slate-900); text-decoration: none; }
.logo span { color: var(--color-accent); font-size: var(--font-size-base); font-weight: 500; margin-left: var(--space-4); }
[data-color-scheme="dark"] .logo a { color: var(--color-white); }
.tagline { font-size: var(--font-size-lg); color: var(--color-text-light); margin: 0 var(--space-24) 0 0; flex-grow: 1; }
.features-quick { display: flex; gap: var(--space-16); flex-wrap: wrap; margin-right: var(--space-24); }
.feature-quick { font-size: var(--font-size-sm); color: var(--color-accent); }
.accessibility-controls { display: flex; gap: var(--space-12); }
.control-button {
    background: none; border: 1px solid var(--color-border); color: var(--color-text); padding: var(--space-8); border-radius: var(--space-4); cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; font-size: var(--font-size-sm);
}
.control-button:hover { background-color: var(--color-gray-200); }
[data-color-scheme="dark"] .control-button:hover { background-color: var(--color-charcoal-700); }
.voice-status { position: relative; display: flex; align-items: center; }
.voice-inactive { color: var(--color-text-light); }
.voice-active { color: var(--color-red-500); border-color: var(--color-red-500); animation: pulse 1s infinite; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.install-button { background-color: var(--color-green-500); color: var(--color-white); border-color: var(--color-green-500); }
.hidden { display: none !important; }

/* === Main Layout (Inherited) === */
.main-content { flex-grow: 1; max-width: 1200px; margin: var(--space-32) auto; padding: 0 var(--space-24); }
.calculator-container { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-32); }
.card {
    background-color: var(--color-card-background); padding: var(--space-24); border-radius: var(--space-8); box-shadow: var(--shadow-md); border: 1px solid var(--color-border);
}
.card-mini { padding: var(--space-16); margin-bottom: var(--space-24); }
.input-section { align-self: flex-start; }
.section-title {
    font-size: var(--font-size-xl); border-bottom: 2px solid var(--color-accent); padding-bottom: var(--space-8); margin-bottom: var(--space-24); display: flex; align-items: center; gap: var(--space-8);
}

/* === Form Styles (Inherited) === */
.input-group { margin-bottom: var(--space-16); }
.input-group label { display: block; margin-bottom: var(--space-4); font-weight: bold; font-size: var(--font-size-sm); }
input[type="text"], input[type="number"], input[type="month"], select {
    width: 100%; padding: var(--space-12); border: 1px solid var(--color-border); border-radius: var(--space-4); background-color: var(--color-card-background); color: var(--color-text); font-size: var(--font-size-base); transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus {
    border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px rgba(36, 172, 185, 0.2);
}
.input-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.input-note, .fred-source-note {
    display: block; font-size: var(--font-size-xs); color: var(--color-text-light); margin-top: var(--space-4);
}
.fred-source-note { color: var(--color-green-500); margin-bottom: var(--space-16); }
[data-color-scheme="dark"] .fred-source-note { color: var(--color-teal-300); }
.input-group-sub-title {
    font-size: var(--font-size-base); font-weight: bold; color: var(--color-text); margin: var(--space-24) 0 var(--space-16) 0; padding-left: var(--space-4); border-left: 3px solid var(--color-accent);
}
.action-group { margin-top: var(--space-32); }
.primary-button {
    width: 100%; padding: var(--space-16); background-color: var(--color-primary); color: var(--color-white); border: 1px solid var(--color-primary); border-radius: var(--space-4); font-size: var(--font-size-lg); font-weight: bold; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: var(--space-8);
}
.primary-button:hover:not(:disabled) { background-color: var(--color-slate-900); opacity: 0.9; }
[data-color-scheme="dark"] .primary-button {
    background-color: var(--color-accent); color: var(--color-charcoal-700); border-color: var(--color-accent);
}
[data-color-scheme="dark"] .primary-button:hover:not(:disabled) { background-color: var(--color-teal-300); }
.primary-button:disabled { opacity: 0.5; cursor: not-allowed; }
.secondary-button {
    width: 100%; padding: var(--space-12); background-color: var(--color-card-background); color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--space-4); font-size: var(--font-size-base); cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: var(--space-8);
}
.secondary-button:hover { background-color: var(--color-primary); color: var(--color-white); }
[data-color-scheme="dark"] .secondary-button {
    color: var(--color-accent); border-color: var(--color-accent);
}
[data-color-scheme="dark"] .secondary-button:hover {
    background-color: var(--color-accent); color: var(--color-charcoal-700);
}

/* === NEW: Dynamic Card Inputs === */
.card-input-group {
    border: 1px solid var(--color-border);
    border-radius: var(--space-8);
    padding: var(--space-16);
    margin-bottom: var(--space-16);
    position: relative;
    background-color: rgba(0,0,0,0.02);
}
[data-color-scheme="dark"] .card-input-group {
    background-color: rgba(255,255,255,0.03);
}
.remove-card-btn {
    position: absolute;
    top: var(--space-8);
    right: var(--space-8);
    background: none;
    border: none;
    color: var(--color-red-500);
    cursor: pointer;
    font-size: var(--font-size-lg);
    padding: var(--space-4);
    line-height: 1;
}
.remove-card-btn:hover {
    color: var(--color-black);
}
[data-color-scheme="dark"] .remove-card-btn:hover {
    color: var(--color-white);
}
.min-payment-percent {
    opacity: 0.7;
}

/* === NEW: Monetization Slots === */
.affiliate-slot {
    background: rgba(var(--color-teal-400-rgb, 36, 172, 185), 0.1);
    border: 1px dashed var(--color-accent);
    border-left: 4px solid var(--color-accent);
    padding: var(--space-16);
    margin: var(--space-24) 0;
    border-radius: var(--space-8);
}
.affiliate-slot h4 {
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: var(--space-8);
}
.affiliate-slot p {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--space-16);
}
.affiliate-link-cta {
    font-size: var(--font-size-sm);
    padding: var(--space-8) var(--space-12);
    width: auto;
    display: inline-block;
}
.affiliate-slot.high-value-affiliate {
    background: rgba(var(--color-green-500-rgb, 16, 185, 129), 0.1);
    border-color: var(--color-green-500);
}
.affiliate-slot.high-value-affiliate h4 {
    color: var(--color-green-500);
}
[data-color-scheme="dark"] .affiliate-slot.high-value-affiliate h4 {
    color: var(--color-green-500);
}
.affiliate-slot.high-value-affiliate .primary-button {
    background-color: var(--color-green-500);
    border-color: var(--color-green-500);
    color: var(--color-white);
}
[data-color-scheme="dark"] .affiliate-slot.high-value-affiliate .primary-button {
    color: var(--color-black);
}

/* === Results Section (Inherited) === */
.summary-card {
    background-color: var(--color-accent);
    color: var(--color-white);
    text-align: center;
    border: none;
}
[data-color-scheme="dark"] .summary-card {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.summary-label { font-size: var(--font-size-sm); opacity: 0.8; margin-bottom: var(--space-4); }
.payment-display { display: flex; align-items: flex-end; justify-content: center; margin-bottom: var(--space-8); }
.payment-figure { font-size: var(--font-size-xxl); font-weight: 900; line-height: 1; }
.piti-breakdown-summary { font-size: var(--font-size-sm); opacity: 0.9; }

/* === Tabs (Inherited) === */
.tabs-container {
    margin-top: var(--space-24); border: 1px solid var(--color-border); border-radius: var(--space-8); overflow: hidden; background-color: var(--color-card-background);
}
.tab-buttons {
    display: flex; border-bottom: 1px solid var(--color-border); overflow-x: auto; background-color: var(--color-gray-200);
}
[data-color-scheme="dark"] .tab-buttons { background-color: var(--color-charcoal-700); }
.tab-button {
    flex-shrink: 0; padding: var(--space-12) var(--space-16); border: none; background: none; cursor: pointer; font-weight: 500; color: var(--color-text-light); transition: color 0.2s, border-bottom 0.2s; border-bottom: 3px solid transparent;
}
.tab-button:hover { color: var(--color-text); }
.tab-button.active {
    color: var(--color-accent); border-bottom: 3px solid var(--color-accent); font-weight: bold;
}
.tab-content { padding: var(--space-24); display: none; }
.tab-content.active { display: block; }
.chart-container { height: 300px; width: 100%; margin-bottom: var(--space-24); }

/* === NEW: AI Insights Box === */
.ai-insight-box {
    background-color: var(--color-gray-200);
    border-left: 5px solid var(--color-green-500);
    padding: var(--space-24);
    border-radius: var(--space-8);
}
[data-color-scheme="dark"] .ai-insight-box {
    background-color: var(--color-charcoal-700);
    border-left-color: var(--color-green-500);
}
#ai-insights-content p { margin-bottom: var(--space-16); }
#ai-insights-content strong { color: var(--color-text); }
[data-color-scheme="dark"] #ai-insights-content strong { color: var(--color-white); }
#ai-insights-content a { font-weight: bold; text-decoration: underline; }

/* AI Recommendation Alerts */
.recommendation-alert {
    padding: var(--space-16); margin: var(--space-16) 0; border-radius: var(--space-4); font-weight: bold; display: flex; align-items: center; gap: var(--space-12);
}
.recommendation-alert i { font-size: var(--font-size-lg); }
.recommendation-alert.high-priority {
    background-color: var(--color-red-500);
    color: var(--color-white);
}
.recommendation-alert.medium-priority {
    background-color: var(--color-orange-500);
    color: var(--color-white);
}
.recommendV-alert.low-priority {
    background-color: var(--color-green-500);
    color: var(--color-white);
}
[data-color-scheme="dark"] .recommendation-alert.low-priority {
    color: var(--color-black);
}

/* === Payoff Schedule Table (Inherited) === */
.amortization-table-container {
    max-height: 400px; overflow-y: scroll; border: 1px solid var(--color-border); border-radius: var(--space-4);
}
#payoff-schedule-table {
    width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); text-align: right;
}
#payoff-schedule-table th, #payoff-schedule-table td {
    padding: var(--space-8) var(--space-12); border-bottom: 1px solid var(--color-border);
}
#payoff-schedule-table th {
    background-color: var(--color-gray-200); position: sticky; top: 0; z-index: 10; color: var(--color-primary); text-align: right;
}
[data-color-scheme="dark"] #payoff-schedule-table th {
    background-color: var(--color-charcoal-700);
}
#payoff-schedule-table tbody tr:hover { background-color: var(--color-gray-200); }
[data-color-scheme="dark"] #payoff-schedule-table tbody tr:hover { background-color: var(--color-charcoal-700); }

/* === NEW: SEO Content Section === */
.seo-content {
    margin-top: var(--space-32);
    grid-column: 1 / -1; /* Spans full width below calculator */
}
.seo-content h3 {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-top: var(--space-24);
}
.seo-content p, .seo-content ul {
    margin-bottom: var(--space-16);
    color: var(--color-text);
    line-height: 1.7;
}
[data-color-scheme="dark"] .seo-content p, [data-color-scheme="dark"] .seo-content ul {
    color: var(--color-text-light);
}
.seo-content ul {
    margin-left: var(--space-24);
}

/* === Footer (Inherited) === */
.main-footer {
    margin-top: var(--space-64); background-color: var(--color-charcoal-700); color: var(--color-white); padding-top: var(--space-32); border-top: 5px solid var(--color-accent);
}
.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-24) var(--space-32); }
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; padding-bottom: var(--space-24); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footer-logo-info { flex-basis: 300px; margin-bottom: var(--space-24); }
.footer-logo-info .logo a { color: var(--color-white); }
.footer-logo-info p { font-size: var(--font-size-sm); opacity: 0.8; }
.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-32); flex-grow: 1; margin-left: var(--space-32); }
.nav-column h4 { color: var(--color-accent); font-size: var(--font-size-base); margin-bottom: var(--space-12); }
.nav-column ul { list-style: none; }
.nav-column ul li a { color: var(--color-gray-300); font-size: var(--font-size-sm); line-height: 2; transition: color 0.2s; }
.nav-column ul li a:hover { color: var(--color-white); }
.footer-bottom { padding-top: var(--space-24); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.footer-disclaimer { flex-basis: 60%; }
.footer-disclaimer p { font-size: var(--font-size-xs); opacity: 0.6; }
.footer-badges { display: flex; gap: var(--space-16); flex-wrap: wrap; margin-top: var(--space-16); }
.badge {
    font-size: var(--font-size-xs); background-color: rgba(255, 255, 255, 0.1); padding: var(--space-4) var(--space-8); border-radius: var(--space-4); display: flex; align-items: center; gap: var(--space-4); opacity: 0.8;
}

/* === Toast Notifications (Inherited) === */
.toast-container {
    position: fixed; bottom: var(--space-24); right: var(--space-24); z-index: 1000;
}
.toast {
    margin-top: var(--space-8); padding: var(--space-12) var(--space-24); border-radius: var(--space-4); color: var(--color-white); box-shadow: var(--shadow-md); transform: translateY(100px); transition: transform 0.3s ease-out;
}
.toast.show { transform: translateY(0); }
.toast.success { background-color: var(--color-green-500); }
.toast.error { background-color: var(--color-red-500); }
.toast.info { background-color: var(--color-primary); }


/* === Mobile Responsiveness (Inherited) === */
@media (max-width: 1024px) {
    .calculator-container { grid-template-columns: 1fr; }
    .header-content { flex-direction: column; align-items: flex-start; }
    .logo { margin-bottom: var(--space-8); }
    .tagline, .features-quick { margin: var(--space-4) 0; }
    .tagline { font-size: var(--font-size-base); }
    .features-quick { order: 3; font-size: var(--font-size-xs); margin-bottom: var(--space-16); }
    .accessibility-controls { order: 2; width: 100%; justify-content: flex-end; margin-top: var(--space-8); }
    .input-split { grid-template-columns: 1fr; }
    .footer-nav { grid-template-columns: 1fr; margin-left: 0; }
    .footer-content { flex-direction: column; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .footer-disclaimer, .footer-badges { flex-basis: 100%; margin-top: var(--space-16); }
}