/** * Loan Calculator — Minimal CSS * * INTENTIONALLY UNSTYLED beyond the structural rules required for: * 1. The modal mode to function correctly (positioning, overlay, hidden state). * 2. The $ and % adornments to appear inside the relevant input wrappers. * * All visual styling — colors, typography, spacing, borders, layout — is left * to the site's designer. * * -------------------------------------------------------------------------- * CLASS HOOK REFERENCE (for the designer) * -------------------------------------------------------------------------- * * Wrappers: * .sr-loan-calc Root wrapper for any instance. * .sr-loan-calc--inline Modifier: rendered inline on the page. * .sr-loan-calc--modal Modifier: rendered as a modal overlay. * .sr-loan-calc.is-open Applied to modal instance when visible. * * .sr-loan-calc__open-btn The trigger button for modal mode. * .sr-loan-calc__backdrop Modal backdrop (click to close). * .sr-loan-calc__panel Inner panel that holds the form. * .sr-loan-calc__close-btn Modal close button. * * Layout: * .sr-loan-calc__header Wraps the title. * .sr-loan-calc__title

calculator heading. * .sr-loan-calcbody Wraps fields + results. * .sr-loan-calcfields Container for all input fields. * .sr-loan-calcresults Container for the three output values. * * Per-field: * .sr-loan-calcfield Each field wrapper. * .sr-loan-calcfield--amount * .sr-loan-calcfield--term * .sr-loan-calcfield--rate * .sr-loan-calcfield--balloon (down payment field — class name retained * from prior version for stylesheet stability) * .sr-loan-calclabel element. * .sr-loan-calcinput-wrap Wraps the input. * .sr-loan-calcinput-wrap--currency Renders a leading "$" adornment. * .sr-loan-calcinput-wrap--percent Renders a trailing "%" adornment. * .sr-loan-calcinput The input element itself. * * Per-result: * .sr-loan-calcresult Wrapper for one result row. * .sr-loan-calcresult--payment * .sr-loan-calcresult--interest * .sr-loan-calcresult--total * .sr-loan-calcresult-label The label text. * .sr-loan-calcresult-value The dollar value (live-updated by JS). * * Body state: * body.sr-loan-calc-modal-open Applied to when any modal is open. * * -------------------------------------------------------------------------- / / ---- Structural: hidden state ---- / .sr-loan-calc[hidden] { display: none !important; } / ---- Structural: modal positioning ---- / .sr-loan-calc--modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; } .sr-loan-calc--modal .sr-loan-calcbackdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); cursor: pointer; } .sr-loan-calc--modal .sr-loan-calcpanel { position: relative; z-index: 1; max-height: 90vh; overflow-y: auto; } .sr-loan-calc--modal .sr-loan-calcclose-btn { position: absolute; top: 0; right: 0; } / ---- Adornments: $ prefix on currency inputs, % suffix on rate ---- / / * These rules render the $ / % markers using ::before / ::after on the * input wrapper. They use absolute positioning so the marker overlays the * left/right edge of the input without entering the input's own value. * * The designer can override appearance (color, font, size, spacing) but * the structural positioning here keeps the adornments visible in any * styling pass. / .sr-loan-calcinput-wrap--currency, .sr-loan-calcinput-wrap--percent { position: relative; display: inline-block; } .sr-loan-calcinput-wrap--currency .sr-loan-calcinput { padding-left: 1.4em; } .sr-loan-calcinput-wrap--percent .sr-loan-calcinput { padding-right: 1.4em; } .sr-loan-calcinput-wrap--currency::before { content: "$"; position: absolute; left: 0.5em; top: 50%; transform: translateY(-50%); pointer-events: none; line-height: 1; } .sr-loan-calcinput-wrap--percent::after { content: "%"; position: absolute; right: 0.5em; top: 50%; transform: translateY(-50%); pointer-events: none; line-height: 1; } / End of structural CSS. Everything below the line is the designer's territory. */