/* === cd-quote-e4.css - every quote form in E4 (owner 2026-11-06 "build it", mockups/qf-health-e4-2026-11-06.css) ===
   Same look as plans / details / apply: light grey page, the plans top (uc/quotes/qftop.ascx: orange strip, white hero with
   the product's mascot, named steps), ONE white 8px card, dark text, ONE green action. CSS over the existing markup scoped to
   form.qf-e4 - no input, name or handler changes. Two form shapes exist and both are covered:
     - the newer one (health / life / CI / PA): .qf-container > ... > .qf-card
     - the older one (dental, home, pet, travel, lp/quotes/*): .ui.grid.container > .eight.wide.column > .ui.form */
html, body { background: #F5F5F5 !important; }
.qf-e4, .qf-e4 button, .qf-e4 input, .qf-e4 select, .qf-e4 textarea, .qf-e4 h1, .qf-e4 .ui.button, .qf-e4 .ui.menu, .qf-e4 .ui.dropdown { font-family: Lato, Kanit, sans-serif; }

/* top (= plans / apply) */
.qf-e4 .cd-breadcrumb { display: none !important; }
.qf-e4 .header-strip { background: linear-gradient(135deg, #F7881F, #F99F38 50%, #FFB000); padding: 10px 0; }
.qf-e4 .breadcrumb-v5 { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.9); }
.qf-e4 .breadcrumb-v5 a { color: #fff; text-decoration: none; }
.qf-e4 .breadcrumb-v5 .sep { margin: 0 6px; opacity: 0.5; }
.qf-e4 .plans-hero { background: #fff; border-bottom: 1px solid #eee; padding: 24px 0 18px; }
.qf-e4 .plans-hero > .ui.container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.qf-e4 .plans-hero h1 { font-size: 2.2rem; margin: 0; line-height: 1.3; color: rgba(0,0,0,.87); font-weight: 700; }
.qf-e4 .plans-hero h1 .accent { color: #F7881F; }
.qf-e4 .plans-hero .pd-sub { margin-top: 4px; font-size: 15px; color: #555; }
.qf-e4 .qf-hero-text { flex: 1 1 auto; min-width: 0; }   /* lets a long product name wrap instead of pushing the mascot off a phone */
.qf-e4 .qf-mascot { flex: none; width: auto; height: 120px; margin: -14px 0 -12px; object-fit: contain; }

/* steps: named chips, here = dark, later = grey (the apply page's chips) */
.qf-e4 .qf-steps { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; margin: 22px auto 16px; padding: 0 12px; }
.qf-e4 .qf-steps .qfs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: #999; white-space: nowrap; }
.qf-e4 .qf-steps .qfs + .qfs::before { content: ""; display: block; width: 36px; height: 2px; background: #ddd; margin: 0 10px; }
.qf-e4 .qf-steps .qfs b { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #e4e4e4; color: #777; font-size: 12px; font-weight: 700; }
.qf-e4 .qf-steps .qfs.here { color: #1a1d23; font-weight: 700; }
.qf-e4 .qf-steps .qfs.here b { background: #1a1d23; color: #fff; }

/* newer shape: the container sits right under the steps */
.qf-e4 .qf-container { background: transparent !important; padding: 0 0 40px !important; min-height: 0 !important; }
.qf-e4 .qf-container > .ui.grid { margin-top: 0 !important; }   /* Fomantic's -1rem pulled the card up onto the steps */
.qf-e4 .qf-container .ui.grid.container > .column { padding-top: 0 !important; }
.qf-e4 .qf-heading, .qf-e4 .qf-subtitle { display: none; }   /* the hero says it now */

/* the card - newer shape (.qf-card) and older shape (the centred eight-wide column) */
.qf-e4 .qf-card,
.qf-e4 > div > .ui.grid.container.centered > .eight.wide.column { max-width: 560px !important; width: 100% !important; margin: 0 auto 40px !important; background: #fff; border: 0 !important; border-radius: 8px !important; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5 !important; padding: 24px 26px 26px !important; }
.qf-e4 > div > .ui.grid.container.centered { margin-top: 0 !important; }   /* > div: the help strip (a section) has the same grid */
.qf-e4 > div[style*="margin-top"] { margin-top: 0 !important; }

/* individual / family = one segmented control */
.qf-e4 .qf-card > .ui.two.item.menu { background: #F2F2F2 !important; border: 0 !important; border-radius: 8px !important; padding: 4px !important; min-height: 0 !important; margin: 0 0 20px !important; }
.qf-e4 .qf-card > .ui.two.item.menu > .item { border-radius: 6px !important; font-size: 15px !important; font-weight: 600 !important; color: #666 !important; padding: 10px 0 !important; }
.qf-e4 .qf-card > .ui.two.item.menu > .item::before { display: none !important; }
.qf-e4 .qf-card > .ui.two.item.menu > .item.active { background: #fff !important; color: #1a1d23 !important; box-shadow: 0 1px 2px rgba(0,0,0,.12) !important; }

/* labels + inputs (both shapes) */
.qf-e4 .ui.form .field > label, .qf-e4 .qf-label { font-size: 14px !important; color: #1a1d23 !important; font-weight: 600 !important; }
.qf-e4 .ui.form .field input[type="number"], .qf-e4 .ui.form .field input[type="text"], .qf-e4 .ui.form .field input[type="email"],
.qf-e4 .ui.form .field input[type="tel"], .qf-e4 .ui.form .field input[type="date"], .qf-e4 .ui.form .field select,
.qf-e4 .ui.form .ui.selection.dropdown, .qf-e4 .qf-card .ui.dropdown, .qf-e4 .qf-fam-row input, .qf-e4 .qf-fam-row select {
    border: 1px solid #d4d4d5 !important; border-radius: 8px !important; min-height: 48px; font-size: 16px; box-shadow: none !important; }
.qf-e4 .ui.form .field input:focus, .qf-e4 .ui.form .field select:focus, .qf-e4 .ui.form .ui.selection.dropdown.active, .qf-e4 .qf-fam-row input:focus { border-color: #1a1d23 !important; }
.qf-e4 .ui.form .ui.selection.dropdown.active .menu { border-color: #1a1d23 !important; border-radius: 0 0 8px 8px !important; }

/* gender: two buttons over the same select (cd-quote-e4.js; the select stays in the form, hidden) */
.qf-e4 .qf-gender { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qf-e4 .qf-gender button { height: 48px; border: 1px solid #d4d4d5; border-radius: 8px; background: #fff; font-size: 15px; font-weight: 600; color: #555; cursor: pointer; }
.qf-e4 .qf-gender button.on { border: 2px solid #1a1d23; color: #1a1d23; }
.qf-e4 .qf-gender button:focus-visible { outline: 2px solid #1A518C; outline-offset: 2px; }
.qf-e4 .qf-card .ui.dropdown.qf-gender-src, .qf-e4 .ui.form .ui.dropdown.qf-gender-src, .qf-e4 .qf-gender-src { display: none !important; }   /* beats .qf-card .ui.dropdown { display:flex !important } */

/* coverage rows (health / life / CI): neutral, chosen = green (was yellow) */
.qf-e4 .qf-coverage-item { border: 1px solid #e3e3e3 !important; border-radius: 8px !important; background: #fff !important; padding: 12px 14px !important; }
.qf-e4 .qf-coverage-item .icon { color: #1a1d23 !important; opacity: .75; }
.qf-e4 .qf-coverage-locked { background: #FAFAFA !important; }
.qf-e4 .qf-coverage-badge { background: #E8F7EE !important; color: #15803D !important; border-radius: 20px !important; font-weight: 700 !important; }
.qf-e4 .qf-coverage-toggle:hover { border-color: #bdbdbd !important; }
.qf-e4 .qf-coverage-toggle.active { background: #F3FBF5 !important; border-color: #21BA45 !important; }
.qf-e4 .qf-coverage-toggle.active .icon { color: #15803D !important; opacity: 1; }
.qf-e4 .ui.toggle.checkbox input:checked ~ label::before, .qf-e4 .ui.toggle.checkbox input:focus:checked ~ label::before { background-color: #21BA45 !important; }
.qf-e4 .ui.checkbox input:checked ~ label::after { color: #1a1d23 !important; }
.qf-e4 .qf-coverage-name { color: #1a1d23 !important; }
.qf-e4 .qf-coverage-desc { color: #777 !important; }
.qf-e4 .qf-extras-trigger { color: #1A518C !important; font-weight: 600 !important; padding: 8px 2px !important; }
.qf-e4 .qf-extras-trigger:hover { color: #0f3a66 !important; }

/* kids notes: neutral, not orange */
.qf-e4 .qf-kid-parent-msg, .qf-e4 .qf-fam-kidmsg { background: #F7F7F7 !important; border: 1px solid #e3e3e3 !important; color: #1a1d23 !important; }
.qf-e4 .qf-fam-kidmsg.is-error { background: #FDECEA !important; border-color: rgba(192,38,31,.35) !important; color: #c0261f !important; }

/* family rows + add button */
.qf-e4 .qf-fam-row .ui.icon.basic.button { border-radius: 8px !important; height: 48px; }
.qf-e4 #qfFamAdd { border-radius: 8px !important; border: 1px dashed #bdbdbd !important; box-shadow: none !important; color: #1A518C !important; font-weight: 600 !important; background: #fff !important; }

/* the one action (both shapes: .ui.yellow.button, any colour of the submit) */
.qf-e4 .ui.yellow.button, .qf-e4 .ui.form .ui.submit.button { background: #21BA45 !important; color: #fff !important; min-height: 52px !important; font-size: 17px !important; font-weight: 600 !important; border-radius: 8px !important; box-shadow: none !important; display: flex !important; align-items: center; justify-content: center; gap: 6px; }
.qf-e4 .ui.yellow.button span, .qf-e4 .ui.form .ui.submit.button span { color: #fff !important; }
.qf-e4 .ui.yellow.button svg, .qf-e4 .ui.form .ui.submit.button svg { fill: #fff; }
.qf-e4 .ui.yellow.button:hover, .qf-e4 .ui.form .ui.submit.button:hover { background: #16AB39 !important; transform: none !important; }

/* help strip: sits on the grey page instead of a second grey band 8em down */
.qf-e4 [id$="help_helppanel"], body:has(form.qf-e4) [id$="help_helppanel"] {   /* drone puts the strip after </form> */ background: #fff !important; margin-top: 0 !important; border-top: 1px solid #e5e5e5; }

@media (max-width: 767px) {
    .qf-e4 .plans-hero { padding: 12px 0 10px; }
    .qf-e4 .plans-hero h1 { font-size: 1.6rem; }
    .qf-e4 .plans-hero .pd-sub { font-size: 14px; }
    .qf-e4 .qf-mascot { height: 72px; margin: -4px 0 -8px; }
    .qf-e4 .plans-hero h1 { font-size: 1.45rem; }
    .qf-e4 .qf-steps { margin: 18px auto 12px; }
    .qf-e4 .qf-steps .qfs { font-size: 12px; gap: 5px; }
    .qf-e4 .qf-steps .qfs + .qfs::before { width: 14px; margin: 0 6px; }
    .qf-e4 .qf-steps .qfs:not(.here) span { display: none; }   /* phone: only the step you are on keeps its name */
    .qf-e4 .qf-card, .qf-e4 > div > .ui.grid.container.centered > .eight.wide.column { padding: 18px 16px 20px !important; margin: 0 0 28px !important; border-radius: 8px !important; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5 !important; }
    .qf-e4 > div > .ui.stackable.grid.container.centered { padding: 0 12px !important; }
}