/* ============================================================
   Financial Calculators — AffirmFunding Theme Overrides
   Created: 2026-02-12
   Purpose: Restyle all calculators to match the site's navy/
            gold palette, Montserrat & Open Sans typography,
            and pill-shaped CTA buttons.
   WARNING: Do NOT edit calculator JS — this file is CSS-only.
   ============================================================ */

/* ============================================================
   0. DESIGN TOKENS  (single source of truth)
   ============================================================ */
:root {
    /* —— Brand Palette —— */
    --fc-navy: #162347;
    --fc-navy-light: #1e3a5f;
    --fc-navy-dark: #0f1830;
    --fc-gold: #c59a5c;
    --fc-gold-light: #d4af7a;
    --fc-gold-dark: #a67d42;
    --fc-white: #ffffff;
    --fc-off-white: #F7F8F8;
    --fc-bg-section: #f9fafb;
    --fc-border: #e5e7eb;
    --fc-border-focus: rgba(197, 154, 92, 0.45);

    /* —— Semantic —— */
    --fc-success: #059669;
    --fc-success-bg: #ecfdf5;
    --fc-error: #dc2626;
    --fc-error-bg: #fef2f2;

    /* —— Neutral —— */
    --fc-text-dark: #1f2937;
    --fc-text: #374151;
    --fc-text-muted: #6b7280;

    /* —— Typography —— */
    --fc-font-heading: 'Montserrat', sans-serif;
    --fc-font-body: 'Open Sans', sans-serif;

    /* —— Shape —— */
    --fc-radius-input: 6px;
    --fc-radius-card: 8px;
    --fc-radius-pill: 50px;
    --fc-input-padding: 12px 16px;

    /* —— Transitions —— */
    --fc-transition: 0.2s ease;
}


/* ============================================================
   1. MORTGAGE CALCULATOR  (mc- prefix)
      Override the --mc-* variables so existing CSS references
      automatically pick up the new palette.
   ============================================================ */

/* --- Variable overrides --- */
.mc-calculator-wrapper {
    --mc-primary-color: var(--fc-navy);
    --mc-secondary-color: var(--fc-text-muted);
    --mc-success-color: var(--fc-success);
    --mc-background-color: var(--fc-white);
    --mc-border-color: var(--fc-border);
    --mc-text-color: var(--fc-text-dark);
    --mc-label-color: var(--fc-text);
    --mc-input-bg-color: var(--fc-white);
    --mc-button-bg-color: var(--fc-navy);
    --mc-button-text-color: var(--fc-off-white);
    --mc-result-bg-color: var(--fc-bg-section);
    --mc-border-radius: var(--fc-radius-input);
    --mc-input-padding: 12px 16px;
    --mc-font-family: var(--fc-font-body);
    --mc-font-size: 15px;
    font-family: var(--fc-font-body);
}

/* --- Title --- */
.mc-title {
    font-family: var(--fc-font-heading) !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px;
    color: var(--fc-navy) !important;
}

/* --- Section titles --- */
.mc-section-title {
    font-family: var(--fc-font-heading) !important;
    color: var(--fc-navy) !important;
    border-bottom-color: var(--fc-border);
}

/* --- Inputs focus ring --- */
.mc-input-group:focus-within {
    border-color: var(--fc-gold);
    box-shadow: 0 0 0 3px var(--fc-border-focus);
}

.mc-input-with-toggle input:focus {
    border-color: var(--fc-gold);
    box-shadow: 0 0 0 3px var(--fc-border-focus);
    outline: none;
}

.mc-date-group select:focus,
.mc-date-group input:focus {
    border-color: var(--fc-gold);
    box-shadow: 0 0 0 3px var(--fc-border-focus);
    outline: none;
}

/* --- Input prefix/suffix --- */
.mc-input-prefix,
.mc-input-suffix {
    background: var(--fc-bg-section);
    color: var(--fc-text-muted);
    font-size: 14px;
}

/* --- Toggle buttons --- */
.mc-toggle-btn.active {
    background: var(--fc-navy);
    color: var(--fc-white);
}

.mc-toggle-btn:hover:not(.active) {
    background: var(--fc-bg-section);
}

/* --- Collapse toggles --- */
.mc-collapse-toggle {
    background: var(--fc-navy);
    border-radius: var(--fc-radius-input);
    font-family: var(--fc-font-body);
}

.mc-collapse-toggle:hover {
    background: var(--fc-navy-light);
    opacity: 1;
}

.mc-sub-toggle {
    background: var(--fc-text-muted);
}

.mc-sub-toggle:hover {
    background: var(--fc-text);
    opacity: 1;
}

/* --- Calculate button (PILL) --- */
.mc-btn-calculate {
    background: var(--fc-navy) !important;
    color: var(--fc-off-white) !important;
    border-radius: var(--fc-radius-pill) !important;
    font-family: var(--fc-font-heading) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 16px 32px !important;
    transition: all var(--fc-transition);
}

.mc-btn-calculate:hover {
    background: var(--fc-navy-light) !important;
    box-shadow: 0 6px 20px rgba(22, 35, 71, 0.35) !important;
    transform: translateY(-2px);
    opacity: 1;
}

/* --- Summary amount --- */
.mc-summary-amount {
    color: var(--fc-navy) !important;
    font-family: var(--fc-font-heading) !important;
}

/* --- Summary table header --- */
.mc-summary-table th {
    background: var(--fc-bg-section);
    color: var(--fc-text);
    font-family: var(--fc-font-body);
}

.mc-summary-total {
    background: var(--fc-bg-section);
}

/* --- Tab buttons --- */
.mc-tab-btn.active {
    color: var(--fc-navy);
    border-bottom-color: var(--fc-gold);
}

.mc-tab-btn:hover {
    color: var(--fc-navy);
}

/* --- Schedule table header --- */
.mc-schedule-table th {
    background: var(--fc-navy) !important;
    color: var(--fc-off-white) !important;
    font-family: var(--fc-font-body) !important;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Spinner --- */
.mc-spinner {
    border-top-color: var(--fc-gold);
}

/* --- Biweekly box --- */
.mc-biweekly-box h4 {
    font-family: var(--fc-font-heading);
    color: var(--fc-navy);
}


/* ============================================================
   2. REFINANCE CALCULATOR  (refin-calc- prefix)
      Uses hardcoded colors — override with theme tokens.
   ============================================================ */

/* --- Container typography --- */
.refin-calc-container {
    font-family: var(--fc-font-body) !important;
}

/* --- Header --- */
.refin-calc-header h2 {
    font-family: var(--fc-font-heading) !important;
    color: var(--fc-navy) !important;
}

/* --- Section headings --- */
.refin-calc-section h3 {
    font-family: var(--fc-font-heading) !important;
    color: var(--fc-navy) !important;
}

/* --- Input focus ring --- */
.refin-calc-field input:focus,
.refin-calc-field select:focus,
.refin-calc-select:focus {
    border-color: var(--fc-gold);
    box-shadow: 0 0 0 3px var(--fc-border-focus);
}

/* --- Buttons (PILL) --- */
.refin-calc-btn {
    font-family: var(--fc-font-heading) !important;
    border-radius: var(--fc-radius-pill) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all var(--fc-transition);
}

.refin-calc-btn-primary {
    background-color: var(--fc-navy) !important;
}

.refin-calc-btn-primary:hover {
    background-color: var(--fc-navy-light);
    box-shadow: 0 6px 20px rgba(22, 35, 71, 0.35);
}

.refin-calc-btn-secondary {
    border: 1px solid var(--fc-border);
}

.refin-calc-btn-secondary:hover {
    background-color: var(--fc-bg-section);
    border-color: var(--fc-text-muted);
}

/* --- Comparison table header --- */
.refin-calc-comparison-table .refin-calc-table thead {
    background-color: var(--fc-navy);
}

/* --- Card headings --- */
.refin-calc-card h4 {
    font-family: var(--fc-font-heading);
    color: var(--fc-navy);
}

/* --- Chart headings --- */
.refin-calc-chart-container h3 {
    font-family: var(--fc-font-heading);
    color: var(--fc-navy);
}

/* --- APR summary heading --- */
.refin-calc-apr-summary h3 {
    font-family: var(--fc-font-heading);
    color: var(--fc-navy);
}

/* --- Tab active indicator --- */
.refin-table-tab.active {
    border-bottom-color: var(--fc-gold);
    color: var(--fc-navy);
}

.refin-table-tab:hover {
    color: var(--fc-navy);
}

/* --- Spinner --- */
.refin-calc-spinner {
    border-top-color: var(--fc-gold);
}

/* --- Stat value colors --- */
.refin-stat-value-large {
    color: var(--fc-success);
}

.refin-highlight-red .refin-stat-value-large {
    color: var(--fc-error);
}

/* --- Amortization table header --- */
.refin-calc-table thead {
    background-color: var(--fc-bg-section);
}


/* ============================================================
   3. AFFORDABILITY CALCULATOR  (hac- prefix)
      Uses --refin-* design system vars — update at :root level
      and add font overrides.
   ============================================================ */

/* --- Override the affordability design system variables --- */
.hac-container {
    --refin-primary: var(--fc-navy);
    --refin-primary-light: var(--fc-navy-light);
    --refin-primary-dark: var(--fc-navy-dark);
    --refin-secondary: var(--fc-gold);
    --refin-secondary-light: var(--fc-gold-light);
    --refin-secondary-dark: var(--fc-gold-dark);
    --refin-font-family: var(--fc-font-body);
    font-family: var(--fc-font-body);
}

/* --- Heading typography --- */
.hac-header h2 {
    font-family: var(--fc-font-heading);
    color: var(--fc-navy);
}

.hac-section-title h3 {
    font-family: var(--fc-font-heading);
    color: var(--fc-navy);
}

/* ---- FIELD LAYOUT OVERHAUL ---- */

/* Stack label on top, input below — cleaner and consistent */
.hac-form-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-bottom: 20px !important;
}

/* Labels: subtle, uniform */
.hac-form-row label {
    font-family: var(--fc-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--fc-text) !important;
    letter-spacing: 0.02em;
    text-align: left !important;
}

/* Input group — full width, with proper alignment */
.hac-input-group {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0 !important;
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-input);
    background: var(--fc-white);
    overflow: hidden;
    transition: border-color var(--fc-transition), box-shadow var(--fc-transition);
}

.hac-input-group:focus-within {
    border-color: var(--fc-gold);
    box-shadow: 0 0 0 3px var(--fc-border-focus);
}

/* Inputs inside group: remove own borders, grow to fill */
.hac-input-group .hac-input {
    flex: 1 1 auto !important;
    width: auto !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--fc-font-body);
    font-size: 15px;
    padding: 12px 16px !important;
    background: transparent;
    min-width: 0;
}

.hac-input-group .hac-input:focus {
    box-shadow: none !important;
    border: none !important;
    outline: none;
}

/* Prefix ($) — left edge of the group */
.hac-input-group .hac-input-prefix {
    padding: 12px 0 12px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fc-text-muted);
    background: var(--fc-bg-section);
    border-right: 1px solid var(--fc-border);
    line-height: 1;
    display: flex;
    align-items: center;
    padding-right: 12px;
}

/* Suffix (years, per year, etc.) — right edge */
.hac-input-group .hac-input-suffix {
    padding: 12px 16px 12px 8px;
    font-size: 13px;
    color: var(--fc-text-muted);
    white-space: nowrap;
    border-left: 1px solid var(--fc-border);
    background: var(--fc-bg-section);
}

/* Toggle group: input + unit selector fused together */
.hac-toggle-group {
    gap: 0 !important;
}

.hac-toggle-group .hac-input {
    border-right: none !important;
}

.hac-toggle-group .hac-unit-toggle {
    border: none !important;
    border-left: 1px solid var(--fc-border) !important;
    border-radius: 0 !important;
    background: var(--fc-bg-section);
    padding: 12px 14px !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--fc-text);
    min-width: 50px;
    text-align: center;
    cursor: pointer;
}

.hac-toggle-group .hac-unit-toggle:focus {
    box-shadow: none !important;
}

.hac-toggle-group .hac-input-suffix {
    border-left: 1px solid var(--fc-border);
}

/* Standalone inputs (not inside .hac-input-group) */
.hac-form-row>.hac-input,
.hac-form-row>input.hac-input {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid var(--fc-border) !important;
    border-radius: var(--fc-radius-input) !important;
    font-family: var(--fc-font-body);
    font-size: 15px;
    transition: border-color var(--fc-transition), box-shadow var(--fc-transition);
}

/* Select (dropdown) — full width, consistent height */
.hac-select {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid var(--fc-border) !important;
    border-radius: var(--fc-radius-input) !important;
    font-family: var(--fc-font-body) !important;
    font-size: 15px !important;
    color: var(--fc-text-dark);
    background: var(--fc-white);
    cursor: pointer;
    transition: border-color var(--fc-transition), box-shadow var(--fc-transition);
}

/* Checkbox row — keep single column */
.hac-checkbox-row {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
}

.hac-checkbox-row label {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
    font-weight: 500 !important;
}

/* Indented rows (fee fields) */
.hac-indent {
    padding-left: 20px;
    border-left: 3px solid var(--fc-border);
}

/* Form wrapper — add a subtle card look */
.hac-form {
    border: 1px solid var(--fc-border) !important;
    border-radius: var(--fc-radius-card) !important;
    padding: 28px !important;
    background: var(--fc-white) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Button row — centered */
.hac-button-row {
    margin-top: 24px !important;
    gap: 12px !important;
    justify-content: center !important;
    display: flex !important;
}

/* --- Input focus ring --- */
.hac-input:focus,
.hac-select:focus,
.hac-unit-toggle:focus {
    border-color: var(--fc-gold);
    box-shadow: 0 0 0 3px var(--fc-border-focus);
}

/* --- Focus-visible --- */
.hac-button:focus-visible,
.hac-input:focus-visible,
.hac-select:focus-visible,
.hac-unit-toggle:focus-visible {
    outline: 2px solid var(--fc-gold);
    outline-offset: 2px;
}

/* --- Buttons (PILL) --- */
.hac-button {
    font-family: var(--fc-font-heading) !important;
    border-radius: var(--fc-radius-pill) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all var(--fc-transition);
}

.hac-button-primary {
    background: var(--fc-navy);
    border-color: var(--fc-navy);
}

.hac-button-primary:hover {
    background: var(--fc-navy-light);
    border-color: var(--fc-navy-light);
    box-shadow: 0 6px 20px rgba(22, 35, 71, 0.35);
}

.hac-button-primary:active,
.hac-button-primary:focus {
    background: var(--fc-navy-dark);
    border-color: var(--fc-navy-dark);
}

.hac-button-secondary {
    border: 1px solid var(--fc-border);
}

.hac-button-secondary:hover {
    border-color: var(--fc-text-muted);
    background: var(--fc-bg-section);
}

/* --- Results header --- */
.hac-results-header {
    background: var(--fc-navy);
}

.hac-results-header h3 {
    font-family: var(--fc-font-heading);
}

/* --- Highlight color --- */
.hac-highlight {
    color: var(--fc-success);
    font-family: var(--fc-font-heading);
}


/* ============================================================
   4. SHARED POLISH — applies across all calculators
   ============================================================ */

/* Ensure Google Fonts are available (loaded by Astra theme) */

/* --- Smooth transitions on all inputs --- */
.mc-input-group input,
.mc-input-with-toggle input,
.mc-date-group select,
.mc-date-group input,
.refin-calc-field input,
.refin-calc-field select,
.hac-input,
.hac-select {
    transition: border-color var(--fc-transition),
        box-shadow var(--fc-transition);
}

/* --- Remove browser default outlines, rely on box-shadow --- */
.mc-input-group input:focus,
.mc-input-with-toggle input:focus,
.refin-calc-field input:focus,
.refin-calc-field select:focus,
.hac-input:focus,
.hac-select:focus {
    outline: none;
}

/* --- Number input spinner removal for cleaner look --- */
.mc-calculator-wrapper input[type="number"]::-webkit-inner-spin-button,
.mc-calculator-wrapper input[type="number"]::-webkit-outer-spin-button,
.refin-calc-container input[type="number"]::-webkit-inner-spin-button,
.refin-calc-container input[type="number"]::-webkit-outer-spin-button,
.hac-container input[type="number"]::-webkit-inner-spin-button,
.hac-container input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mc-calculator-wrapper input[type="number"],
.refin-calc-container input[type="number"],
.hac-container input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* --- Container elevation --- */
.mc-calculator-container,
.refin-calc-container,
.hac-calculator-wrapper {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}