/* ============================================================ QuickFund Closing Cost Calculator — v2.9.3 External stylesheet — visual polish layer only. Critical structural CSS lives in wp_add_inline_style() in the plugin PHP so it is always present in . CSS variables here MUST match the --q-* names in the PHP. ============================================================ */ /* ─── Variable aliases for readability in this file ─── */ #qfm-calc-wrap { --qfm-primary: var(--q-pri, #2563a8); --qfm-pri-dk: var(--q-pri-dk, #1a4f8c); --qfm-pri-lt: var(--q-pri-lt, #3b7cc4); --qfm-pri-bg: var(--q-pri-bg, #e8f0fb); --qfm-orange: var(--q-ora, #e87722); --qfm-ora-lt: var(--q-ora-lt, #f49a40); --qfm-bg: var(--q-bg, #edf2f9); --qfm-border: var(--q-border, #c8d5e8); --qfm-border-dk: var(--q-border-dk, #a8bcd8); --qfm-label: var(--q-label, #1e293b); --qfm-text: var(--q-text, #0f172a); --qfm-muted: var(--q-muted, #475569); --qfm-subtle: var(--q-subtle,#94a3b8); --qfm-green: var(--q-green, #166534); --qfm-shadow: var(--q-shadow,0 2px 14px rgba(37,99,168,.11)); --qfm-radius: var(--q-radius, 9px); --qfm-radius-lg: var(--q-radius-lg,13px); } /* ─── PAGE HEADER ─── */ .qfm-page-header { background: linear-gradient(130deg, var(--qfm-pri-dk) 0%, var(--qfm-primary) 55%, var(--qfm-pri-lt) 100%); padding: 24px 0 0; margin-bottom: 24px; border-radius: var(--qfm-radius-lg) var(--qfm-radius-lg) 0 0; position: relative; overflow: hidden; } .qfm-page-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--qfm-orange), var(--qfm-ora-lt), var(--qfm-orange)); } .qfm-page-header-inner { padding: 0 24px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .qfm-page-title { font-family: 'Raleway', sans-serif; font-size: 24px !important; font-weight: 800 !important; color: #fff !important; margin: 0 0 5px !important; padding: 0 !important; line-height: 1.2; border: none !important; } .qfm-page-subtitle { font-size: 12.5px; color: rgba(255,255,255,0.72); margin: 0 !important; } .qfm-apply-btn { display: inline-flex; align-items: center; background: linear-gradient(135deg, var(--qfm-orange), var(--qfm-ora-lt)); color: #fff !important; padding: 10px 20px; border-radius: var(--qfm-radius); font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 13px; text-decoration: none !important; white-space: nowrap; box-shadow: 0 3px 10px rgba(232,119,34,0.38); transition: transform 0.18s, box-shadow 0.18s; -webkit-tap-highlight-color: transparent; } .qfm-apply-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(232,119,34,0.48); } /* ─── CARD ICON ─── */ .qfm-card-hdr-icon { font-size: 17px; } /* ─── TABS ─── */ .qfm-tab { transition: background 0.15s, color 0.15s, box-shadow 0.15s; -webkit-tap-highlight-color: transparent; } .qfm-tab:hover { background: rgba(37,99,168,0.09); color: var(--qfm-primary); } /* ─── FORM SECTIONS ─── */ .qfm-form-section { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--qfm-border); } .qfm-form-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } /* ─── LABELS ─── */ #qfm-calc-wrap label, .qfm-field > label { font-size: 12.5px !important; font-weight: 700 !important; color: var(--qfm-label) !important; display: block !important; margin-bottom: 0 !important; line-height: 1.3 !important; letter-spacing: 0.1px !important; } /* ─── INPUT BASE ─── */ #qfm-calc-wrap input[type="number"], #qfm-calc-wrap input[type="text"], #qfm-calc-wrap input[type="date"], #qfm-calc-wrap select { width: 100%; padding: 9px 12px; border: 1.5px solid var(--qfm-border-dk); border-radius: 8px; font-family: 'Open Sans', sans-serif; font-size: 13.5px; font-weight: 500; color: var(--qfm-text); background: #fff; transition: border-color 0.18s, box-shadow 0.18s; -webkit-appearance: none; appearance: none; height: auto !important; box-shadow: 0 1px 4px rgba(37,99,168,0.08); line-height: 1.4; } #qfm-calc-wrap input::placeholder { color: var(--qfm-subtle); font-weight: 400; } #qfm-calc-wrap input:focus, #qfm-calc-wrap select:focus { outline: none; border-color: var(--qfm-primary); box-shadow: 0 0 0 3px rgba(37,99,168,0.14); } /* ─── STATE INFO BADGE ─── */ .qfm-state-info { background: var(--qfm-pri-bg); border-left: 3px solid var(--qfm-primary); border-radius: 0 8px 8px 0; padding: 9px 12px; margin-bottom: 12px; font-size: 12px; font-weight: 500; color: var(--qfm-muted); line-height: 1.55; } /* ─── ENDORSEMENTS SECTION ─── */ .qfm-endorse-intro { font-size: 12px; color: var(--qfm-muted); margin: 0 0 8px !important; font-style: italic; } /* Outer wrapper — plain block, no grid on this element */ #qfm-endorsements-grid { display: block; } /* Empty / placeholder message */ .qfm-endorse-empty { font-size: 12px; color: var(--qfm-subtle); text-align: center; padding: 14px 12px; border: 1.5px dashed var(--qfm-border); border-radius: 8px; font-style: italic; } /* Each group section (Required / Optional) */ .qfm-endorse-section { margin-bottom: 10px; } /* Sub-grid that actually holds the tiles — 2 columns */ .qfm-endorse-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } /* ── Tile ── */ .qfm-endorse-item { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 10px 11px; border: 1.5px solid var(--qfm-border); border-radius: 7px; cursor: pointer; background: #fff; transition: border-color 0.15s, background 0.15s; min-height: 52px; box-sizing: border-box; overflow: hidden; } .qfm-endorse-item:hover { border-color: var(--qfm-primary); background: var(--qfm-pri-bg); } .qfm-endorse-item.qfm-selected { border-color: var(--qfm-primary); background: var(--qfm-pri-bg); } /* ── Text block ── */ .qfm-endorse-txt { flex: 1; min-width: 0; display: block; } .qfm-en-name { display: block; font-size: 12px; font-weight: 700; color: #0f172a; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qfm-en-desc { display: block; font-size: 11px; font-weight: 400; color: #94a3b8; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Fee badge ── */ .qfm-endorse-fee { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--qfm-orange); white-space: nowrap; text-align: right; } /* Mobile: single column */ @media (max-width: 600px) { .qfm-endorse-subgrid { grid-template-columns: 1fr; } } /* ─── TOOLTIP ─── */ .qfm-tip { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; background: var(--qfm-subtle); border-radius: 50%; color: #fff; font-size: 9px; font-weight: 800; cursor: help; vertical-align: middle; margin-left: 3px; } /* ─── CALCULATE BUTTON ─── */ .qfm-calc-btn { transition: transform 0.18s, box-shadow 0.18s; -webkit-tap-highlight-color: transparent; } .qfm-calc-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(232,119,34,0.48); } .qfm-calc-btn:active { transform: translateY(0); } /* ─── PLACEHOLDER ─── */ .qfm-placeholder-icon { font-size: 48px; margin-bottom: 14px; opacity: 0.22; } .qfm-placeholder h3 { font-family: 'Raleway', sans-serif; font-size: 19px !important; color: var(--qfm-muted) !important; margin: 0 0 8px !important; font-weight: 700 !important; padding: 0 !important; } .qfm-placeholder p { font-size: 13px; color: var(--qfm-subtle); margin: 0; } /* ─── RESULTS: SUMMARY CARDS ─── */ .qfm-summary-card:nth-child(2) { border-top-color: var(--qfm-orange); } .qfm-summary-card:nth-child(3) { border-top-color: var(--qfm-green); } @keyframes qfmFadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } .qfm-summary-card { animation: qfmFadeUp 0.3s ease forwards; } .qfm-summary-card:nth-child(2) { animation-delay: 0.07s; } .qfm-summary-card:nth-child(3) { animation-delay: 0.14s; } .qfm-cfpb-wrap { animation: qfmFadeUp 0.35s ease 0.1s forwards; opacity:0; } .qfm-cash-box { animation: qfmFadeUp 0.35s ease 0.2s forwards; opacity:0; } .qfm-action-bar { animation: qfmFadeUp 0.3s ease 0.05s forwards; opacity:0; } /* ─── ACTION BAR ─── */ .qfm-action-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,168,0.22); } /* ─── CFPB SECTION HEADER ─── */ .qfm-cfpb-sec-hdr { transition: background 0.12s; } .qfm-cfpb-sec-hdr:hover { background: #f8f9fc; } /* ─── DISCLAIMER ─── */ .qfm-disclaimer-section { margin-top: 30px; background: #fff; border-radius: var(--qfm-radius-lg); box-shadow: var(--qfm-shadow); border: 1px solid var(--qfm-border); border-top: 4px solid var(--qfm-primary); overflow: hidden; } .qfm-disclaimer-header { background: var(--qfm-primary); padding: 15px 22px; display: flex; align-items: center; gap: 11px; } .qfm-disclaimer-icon { font-size: 21px; } .qfm-disclaimer-header h3 { font-family: 'Raleway', sans-serif; font-size: 15px !important; font-weight: 700 !important; color: #fff !important; margin: 0 !important; padding: 0 !important; } .qfm-disclaimer-grid { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--qfm-border); } .qfm-disclaimer-block { padding: 17px 19px; border-right: 1px solid var(--qfm-border); border-bottom: 1px solid var(--qfm-border); } .qfm-disclaimer-block:nth-child(3n) { border-right: none; } .qfm-disclaimer-block:nth-last-child(-n+3) { border-bottom: none; } .qfm-disclaimer-block h4 { font-family: 'Raleway', sans-serif; font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.8px; color: var(--qfm-orange) !important; margin: 0 0 7px !important; padding: 0 !important; } .qfm-disclaimer-block p { font-size: 11.5px; color: var(--qfm-muted); line-height: 1.65; margin: 0 !important; } .qfm-disclaimer-footer { background: #f8f9fc; padding: 14px 22px; border-top: 1px solid var(--qfm-border); } .qfm-disclaimer-license, .qfm-disclaimer-contact { font-size: 12px; color: var(--qfm-muted); margin-bottom: 7px; font-weight: 600; } .qfm-disclaimer-license a, .qfm-disclaimer-contact a { color: var(--qfm-primary); text-decoration: none; } .qfm-disclaimer-license a:hover, .qfm-disclaimer-contact a:hover { text-decoration: underline; } .qfm-disclaimer-reg p { font-size: 11px; color: var(--qfm-subtle); line-height: 1.6; margin: 0 0 4px !important; } .qfm-disclaimer-license::after { content: ' 🏠'; } /* ─── PRINT ─── */ /* ─── Loan Info Banner (results header) ─── */ .qfm-info-banner { background: linear-gradient(135deg, #1a4f8c, #2563a8); border-radius: var(--qfm-radius-lg); padding: 16px 20px; margin-bottom: 14px; color: #fff; } .qfm-ib-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .qfm-ib-type { font-family: "Raleway", sans-serif; font-size: 15px; font-weight: 800; color: #f49a40; } .qfm-ib-state { font-size: 12px; color: rgba(255,255,255,0.65); font-weight: 500; } .qfm-ib-grid { display: flex; flex-wrap: wrap; gap: 6px 16px; } .qfm-ib-item { display: flex; flex-direction: column; min-width: 100px; } .qfm-ib-label { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.5); } .qfm-ib-val { font-family: "Raleway", sans-serif; font-size: 14px; font-weight: 700; color: #fff; } @media (max-width: 600px) { .qfm-ib-grid { gap: 8px 12px; } .qfm-ib-item { min-width: 80px; } .qfm-ib-val { font-size: 13px; } } @media print { .qfm-inputs-col, .qfm-action-bar, .qfm-page-header, .qfm-apply-btn, .qfm-calc-btn, .qfm-disclaimer-section { display: none !important; } .qfm-layout { grid-template-columns: 1fr !important; } .qfm-cfpb-lines { display: block !important; } .qfm-cfpb-section { page-break-inside: avoid; } .qfm-summary-row { grid-template-columns: repeat(3,1fr) !important; } } /* ─── TABLET (≤900px) ─── */ @media (max-width: 900px) { .qfm-disclaimer-grid { grid-template-columns: repeat(2,1fr); } .qfm-disclaimer-block:nth-child(3n) { border-right: 1px solid var(--qfm-border); } .qfm-disclaimer-block:nth-child(2n) { border-right: none; } .qfm-disclaimer-block:nth-last-child(-n+3) { border-bottom: 1px solid var(--qfm-border); } .qfm-disclaimer-block:nth-last-child(-n+2) { border-bottom: none; } } /* ─── MOBILE (≤600px) ─── */ @media (max-width: 600px) { .qfm-page-header-inner { padding: 0 14px 18px; flex-direction: column; align-items: flex-start; } .qfm-page-title { font-size: 20px !important; } .qfm-apply-btn { width: 100%; justify-content: center; } .qfm-card-body { padding: 14px; } .qfm-tab { padding: 10px 2px; font-size: 10.5px; } #qfm-calc-wrap label, .qfm-field > label { font-size: 13.5px !important; } .qfm-sc-amt { font-size: 26px; } .qfm-cfpb-sec-hdr { padding: 13px 14px; gap: 9px; } .qfm-sec-name { font-size: 12px; } .qfm-sec-total { font-size: 14px; } .qfm-cfpb-lines { padding: 0 14px 12px; } .qfm-line-item { font-size: 12px; } .qfm-grand-total { padding: 13px 14px; } .qfm-gt-label { font-size: 11.5px; } .qfm-gt-amt { font-size: 22px; } .qfm-disclaimer-grid { grid-template-columns: 1fr; } .qfm-disclaimer-block { border-right: none !important; border-bottom: 1px solid var(--qfm-border) !important; } .qfm-disclaimer-block:last-child { border-bottom: none !important; } .qfm-disclaimer-header { padding: 13px 16px; } .qfm-disclaimer-footer { padding: 13px 16px; } .qfm-calc-btn { font-size: 14px; padding: 14px; } } /* ─── TINY PHONES (≤360px) ─── */ @media (max-width: 360px) { .qfm-loan-tabs { grid-template-columns: 1fr; } .qfm-tab { padding: 11px; border-radius: 7px; } } /* ─── Additional Options checkboxes & labels ─── */ .qfm-checks { display: flex; flex-direction: column; gap: 9px; } #qfm-calc-wrap .qfm-check { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--qfm-label) !important; cursor: pointer; line-height: 1.4 !important; margin-bottom: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; width: auto !important; box-shadow: none !important; } /* ─── ENDORSEMENT GROUP HEADERS & REQUIRED BADGE ─── */ .qfm-endorse-group-hdr { grid-column: 1 / -1; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; color: var(--qfm-primary); padding: 6px 2px 3px; border-bottom: 1.5px solid var(--qfm-border); margin-bottom: 2px; font-family: 'Raleway', sans-serif; } .qfm-endorse-group-hdr--opt { color: var(--qfm-muted); margin-top: 6px; } .qfm-endorse-required { border-color: var(--qfm-primary) !important; background: #f0f5ff !important; opacity: 0.92; } .qfm-endorse-req-badge { display: inline-block; font-size: 9px; font-weight: 700; background: var(--qfm-primary); color: #fff; border-radius: 3px; padding: 1px 5px; letter-spacing: 0.5px; vertical-align: middle; margin-left: 4px; text-transform: uppercase; } /* ─── ENDORSEMENT SUB-LINES (indented under title policy) ─── */ .qfm-line-indent { padding-left: 28px !important; background: #f8fafc; border-bottom-color: transparent !important; } .qfm-line-indent .qfm-line-name { font-size: 12px !important; font-weight: 500 !important; color: #475569 !important; } .qfm-line-indent .qfm-line-note { font-size: 10px !important; }