/* Day Group homepage calculator - matches daydebt-homepage.html hero card */ /* NOTE: the source had width:100% here because the card was a CSS Grid item. As an Elementor flex child it must honour its own --width, so no width here. */ .dd-calc-card{background:#143A42;border-radius:22px;overflow:hidden;border:1px solid rgba(175,194,220,.10);box-shadow:0 4px 40px rgba(0,0,0,.18)} .dd-hc-tag{padding:22px 26px 0;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(175,194,220,.42);font-weight:500} .dd-hc-step{padding:18px 26px 22px} .dd-hc-step-title{font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:20px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.2;margin-bottom:20px} .dd-hc-step-title em{font-style:italic;font-family:'Source Serif 4',Georgia,serif;font-weight:300;color:#E0913B} /* --- Drive Formidable's own styling from brand tokens -------------------- Formidable's slider JS paints the fill inline using var(--slider-color), so overriding these variables is more reliable than fighting its stylesheet. */ .dd-calc-card .frm_forms,.dd-calc-card .with_frm_style{ --slider-color:#E0913B; --slider-bar-color:rgba(255,255,255,0.10); --slider-track-size:5px; --slider-circle-size:18px; --label-color:rgba(175,194,220,0.65); --text-color:#ffffff; --border-radius:10px; --field-margin:0px; --form-width:100%; } /* household slider reads teal in the source */ .dd-calc-card #frm_field_169_container{--slider-color:#2E8B99} /* --- Formidable reset inside the dark card --- */ .dd-calc-card .frm_forms,.dd-calc-card .frm_form_fields,.dd-calc-card fieldset{border:0;padding:0;margin:0;background:none} .dd-calc-card .frm_form_fields>fieldset>legend{display:none} .dd-calc-card .frm_form_field{margin:0 0 18px} .dd-calc-card .frm_primary_label{font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:12px;font-weight:600;color:rgba(175,194,220,.65);letter-spacing:.04em;padding:0;margin:0} .dd-calc-card .frm_description,.dd-calc-card .frm_none_container .frm_primary_label{display:none} /* --- Sliders --- */ .dd-calc-card .dd-slider-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px} .dd-calc-card .dd-slider-val{font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:24px;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1} .dd-calc-card input[type=range]{width:100%;height:5px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.1);border-radius:3px;cursor:pointer;outline:none;display:block;padding:0;border:0} .dd-calc-card .with_frm_style input[type=range]::-webkit-slider-thumb, .dd-calc-card input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;width:18px!important;height:18px!important;border-radius:50%!important;background:#E0913B!important;border:2.5px solid #143A42!important;box-shadow:0 0 0 2px #E0913B!important;cursor:pointer} .dd-calc-card .with_frm_style input[type=range]::-moz-range-thumb, .dd-calc-card input[type=range]::-moz-range-thumb{width:18px!important;height:18px!important;border-radius:50%!important;background:#E0913B!important;border:2.5px solid #143A42!important;box-shadow:0 0 0 2px #E0913B!important;cursor:pointer} .dd-calc-card #frm_field_169_container input[type=range]::-webkit-slider-thumb{background:#2E8B99!important;box-shadow:0 0 0 2px #2E8B99!important} .dd-calc-card #frm_field_169_container input[type=range]::-moz-range-thumb{background:#2E8B99!important;box-shadow:0 0 0 2px #2E8B99!important} /* Astra also styles the WebKit track; keep it flat so the JS/Formidable fill shows */ .dd-calc-card input[type=range]::-webkit-slider-runnable-track{background:transparent!important;box-shadow:none!important;border:0!important;height:5px!important} /* Hide only Formidable's own numeric readout - NOT every span in the container, which would also hide the label/value we inject. */ .dd-calc-card .frm_range_value,.dd-calc-card .frm_range_container .frm-text-center{display:none!important} .dd-calc-card .dd-scale{display:flex;justify-content:space-between;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:10px;color:rgba(175,194,220,.3);margin-top:6px;letter-spacing:.04em} /* --- Text fields --- */ .dd-calc-card input[type=text],.dd-calc-card input[type=tel],.dd-calc-card input[type=email]{width:100%;background:rgba(0,0,0,.22);border:1px solid rgba(175,194,220,.15);border-radius:10px;padding:12px 14px;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:14px;font-weight:500;color:#fff;outline:none;transition:border-color .15s;box-shadow:none} .dd-calc-card input::placeholder{color:rgba(175,194,220,.38)} .dd-calc-card input[type=text]:focus,.dd-calc-card input[type=tel]:focus,.dd-calc-card input[type=email]:focus{border-color:rgba(46,139,153,.6)} .dd-calc-card .dd-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .dd-calc-card .dd-field-row .frm_form_field{margin-bottom:0} .dd-calc-card .frm_form_field.dd-stack{margin-top:10px} /* --- Submit --- */ .dd-calc-card .frm_submit{margin:14px 0 0} /* Formidable's own submit rule is .frm_style_x.with_frm_style .frm_submit button (specificity 0,3,1) and hard-codes its blue, so match and beat it. */ .dd-calc-card .frm_forms.with_frm_style .frm_submit button, .dd-calc-card .frm_forms.with_frm_style .frm_submit input[type=submit], .dd-calc-card .frm_submit button, .dd-calc-card .frm_submit input[type=submit]{width:100%!important;background:#E0913B!important;color:#fff!important;font-family:'Hanken Grotesk',system-ui,sans-serif!important;font-weight:700!important;font-size:14.5px!important;padding:14px 20px!important;border-radius:10px!important;border:none!important;box-shadow:none!important;text-shadow:none!important;margin:0!important;cursor:pointer;transition:background .15s} .dd-calc-card .frm_forms.with_frm_style .frm_submit button:hover, .dd-calc-card .frm_submit button:hover, .dd-calc-card .frm_submit input[type=submit]:hover{background:#F0A855!important;color:#fff!important} .dd-hc-privacy{font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:10.5px;color:rgba(175,194,220,.35);text-align:center;margin-top:10px;line-height:1.5} .dd-calc-card .frm_error,.dd-calc-card .frm_error_style{color:#F0A855;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:11.5px;background:none;border:0;padding:4px 0 0} .dd-calc-card .frm_blank_field input{border-color:rgba(224,145,59,.7)!important} /* --- Results --- */ .dd-hc-results{display:none;padding:18px 26px 22px} .dd-hc-results.dd-visible{display:block} .dd-hc-results-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .dd-hc-results-title{font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:13px;font-weight:600;color:rgba(175,194,220,.55);letter-spacing:.08em} /* plain