/* ============================================================================
   mwl-quote.css — the standalone quote pages (/quick-quote/, /mifuneral/
   buy-online/), the quote + call-me overlays injected by mwl-quote.js, and the
   contact form. Field primitives (.qq-field, .qq-seg, errors) live in mwl-base.
   ========================================================================== */

/* ---------- page scaffold ---------- */
.page{display:flex;flex-direction:column;min-height:100vh}
.page__main{flex:1 0 auto;display:flex;flex-direction:column}
.page-eyebrow{font:var(--fw-semibold) var(--fs-label)/1.35 var(--font-body);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent)}
.page-title{font:var(--type-display);letter-spacing:var(--tracking-display);margin:var(--space-1) 0 var(--space-2)}
.page-lede{font:var(--type-body-lg);color:var(--text-body);max-width:var(--measure-lede)}

/* ---------- quote split: lead left, form right ---------- */
.qq{flex:1;display:grid;grid-template-columns:1fr 1fr;max-width:var(--container);margin:0 auto;width:100%;padding:var(--space-3) var(--gutter) var(--space-5);gap:var(--space-7);align-items:start}
.qq__lead h1{margin:var(--space-1) 0 var(--space-2)}
.qq__intro{font:var(--type-body-lg);color:var(--text-body);max-width:var(--measure-lede)}
.qq__steps{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-direction:column}
.qq__steps li{display:flex;gap:var(--space-2);align-items:baseline;padding:10px 0;border-bottom:var(--border-w) solid var(--border-default);font:var(--type-label);color:var(--text-muted)}
.qq__steps li span{font:var(--fw-semibold) var(--fs-legal)/1 var(--font-body);letter-spacing:0.08em;color:var(--text-muted);width:24px}
.qq__steps li[aria-current="step"]{color:var(--ink);font-weight:var(--fw-semibold)}
.qq__steps li[aria-current="step"] span{color:var(--brand-pink)}
.qq__form{background:var(--paper);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-card);padding:26px var(--space-4) 28px}

.qq-row{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-3);align-items:start}
.qq-submit{margin-top:14px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.qq__form .mwl-submit{width:auto;padding-left:36px;padding-right:36px}
.qq-check{display:flex;gap:10px;align-items:flex-start;font:var(--fw-regular) 14px/1.5 var(--font-body);color:var(--text-body);cursor:pointer}
.qq-check input{margin:3px 0 0;width:18px;height:18px;flex:0 0 auto;accent-color:var(--brand-pink)}
.qq-row .qq-field,.qq-row .qq-choice,.qq-row fieldset.qq-choice{margin-top:10px;min-width:0}
.qq__form .qq-field,.qq__form fieldset.qq-choice{margin-top:10px}
.qq__form form>:first-child{margin-top:0}
.qq__form .qq-field label,.qq__form .qq-choice>legend{margin:0 0 4px;line-height:1.2}
.qq__form .qq-field{gap:0}
.qq__form .qq-field input,.qq__form .qq-field select,.qq__form .msel__btn{height:47px;min-height:47px;padding-top:0;padding-bottom:0;box-sizing:border-box}
.qq__form .msel{display:block}
.qq__form .qq-seg{min-height:45px;align-items:stretch}
.qq__form .qq-seg label{padding:8px 0 8px}
.qq__form .mwl-submit{min-height:46px;padding-top:12px;padding-bottom:12px}
.qq__form .qq-seg label{display:flex;align-items:flex-end;white-space:nowrap}
.qq__form .qq-choice>legend{white-space:nowrap}
.qq__form{width:100%;min-width:0}
@media (max-width:640px){.qq-row{grid-template-columns:1fr}}
@media (max-width:960px){.qq{grid-template-columns:1fr;gap:var(--space-4)}}

/* ---------- submit button (shared with overlays + contact) ---------- */
.mwl-submit{border-radius:var(--radius-button);background:var(--action-primary);color:var(--action-primary-text);font:var(--fw-semibold) var(--fs-body)/1 var(--font-body);letter-spacing:0.02em;padding:12px 32px;min-height:44px;border:0;border-radius:var(--radius-button);cursor:pointer;width:100%;transition:var(--transition-colour)}
.mwl-submit:hover{background:var(--action-primary-hover)}
a.mwl-submit{text-decoration:none}
a.mwl-submit:hover,a.mwl-submit:focus{color:var(--action-primary-text);text-decoration:none}
.mwl-submit:active{transform:translateY(1px)}

/* ---------- status / result states (mwl-quote-page.js) ---------- */
.qq-status{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2) 0}
.qq-status__label{font:var(--type-title);letter-spacing:var(--tracking-title)}
.qq-status__label--bad{color:var(--status-error)}
.qq-status__note{font:var(--type-body);color:var(--text-body)}
.qq-bar{height:3px;background:var(--band-2);overflow:hidden}
.qq-bar i{display:block;height:100%;width:38%;background:var(--brand-pink);animation:qqbar 1.1s var(--ease-standard) infinite}
@keyframes qqbar{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.qq-result__title{font:var(--type-headline);letter-spacing:var(--tracking-headline)}
.qq-result__sub{font:var(--type-body);color:var(--text-body)}
.qq-slider{display:flex;flex-direction:column;gap:var(--space-1);margin:var(--space-2) 0}
.qq-slider__value{font:var(--fw-bold) clamp(28px,4vw,40px)/1.1 var(--font-display);letter-spacing:var(--tracking-headline);color:var(--ink)}
.qq-slider input[type=range],.mwl-slider input[type=range]{width:100%;appearance:none;-webkit-appearance:none;height:3px;background:var(--band-2);outline-offset:8px}
.qq-slider input[type=range]::-webkit-slider-thumb,.mwl-slider input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;border-radius:0;background:var(--brand-pink);border:0;cursor:pointer}
.qq-slider input[type=range]::-moz-range-thumb,.mwl-slider input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:0;background:var(--brand-pink);border:0;cursor:pointer}
.qq-slider__scale{display:flex;justify-content:space-between;font:var(--type-legal);color:var(--text-muted)}
.qq-premium{display:flex;flex-direction:column;gap:2px;border-top:var(--border-w) solid var(--border-default);padding-top:var(--space-2);margin-bottom:var(--space-2)}
.qq-premium__label{font:var(--fw-semibold) var(--fs-legal)/1.35 var(--font-body);letter-spacing:var(--tracking-eyebrow);color:var(--text-muted)}
.qq-premium__value{font:var(--fw-bold) clamp(32px,5vw,48px)/1.05 var(--font-display);letter-spacing:var(--tracking-display);color:var(--brand-pink)}
.qq-premium__per{font:var(--fw-semibold) var(--fs-legal)/1.35 var(--font-body);letter-spacing:var(--tracking-eyebrow);color:var(--text-muted)}

/* ---------- overlays (mwl-quote.js injects this markup) ---------- */
.mwl-overlay{position:fixed;inset:0;background:var(--scrim);display:none;align-items:flex-start;justify-content:center;overflow:auto;z-index:80;padding:var(--space-4) var(--gutter)}
.mwl-overlay[data-open="true"]{display:flex}
.mwl-sheet{position:relative;background:var(--paper);width:min(560px,100%);margin:auto;padding:var(--space-4);box-shadow:var(--shadow-dialog);border-radius:var(--radius-card)}
.mwl-sheet--narrow{width:min(420px,100%)}
.mwl-sheet__close{position:absolute;top:8px;right:8px;width:44px;height:44px;background:transparent;border:0;font-size:26px;line-height:1;color:var(--ink);cursor:pointer}
.mwl-sheet__close:hover{color:var(--brand-pink)}
.mwl-sheet__heading{font:var(--fw-semibold) var(--fs-label)/1.35 var(--font-body);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent);margin-bottom:var(--space-1)}
.mwl-sheet__title{font:var(--type-headline);letter-spacing:var(--tracking-headline);margin:0 0 var(--space-1)}
.mwl-steps{margin-bottom:var(--space-2)}
.mwl-steps ol{list-style:none;display:flex;gap:4px;padding:0;margin:0;flex-wrap:wrap}
.mwl-steps li{display:flex;align-items:center;gap:6px;font:var(--type-legal);color:var(--text-muted);padding:4px 6px 4px 0}
.mwl-steps li .dot{width:22px;height:22px;display:grid;place-items:center;background:var(--band);font:var(--fw-semibold) 12px/1 var(--font-body);color:var(--text-muted)}
.mwl-steps li[aria-current="step"]{color:var(--ink);font-weight:var(--fw-semibold)}
.mwl-steps li[aria-current="step"] .dot{background:var(--brand-pink);color:#fff}
.mwl-steps li .label{display:none}
.mwl-steps li[aria-current="step"] .label{display:inline}
.mwl-field{display:flex;flex-direction:column;gap:2px;margin-top:var(--space-2)}
.mwl-field label{font:var(--fw-medium) var(--fs-legal)/1.35 var(--font-body);letter-spacing:0.06em;text-transform:uppercase;color:#4D4D4D}
.mwl-field input,.mwl-field select,.mwl-field textarea{font:var(--type-body);color:var(--ink);background:var(--paper);border:var(--border-w) solid var(--border-field);border-radius:var(--radius-field);padding:12px 14px;min-height:48px;outline:none;transition:var(--transition-colour)}
.mwl-field input:focus,.mwl-field select:focus,.mwl-field textarea:focus{border-color:var(--ink-muted);box-shadow:inset 0 0 0 1px var(--ink-muted)}
.mwl-field select{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231C1C1E' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;padding-right:24px}
.mwl-field input::placeholder,.mwl-field textarea::placeholder{color:var(--ink-muted)}
.mwl-field input:focus,.mwl-field select:focus,.mwl-field textarea:focus{outline:none;border-bottom-color:transparent;box-shadow:inset 0 calc(-1 * var(--border-w-field-active)) 0 0 var(--border-focus)}
.mwl-field textarea{min-height:96px;resize:vertical}
.mwl-fieldset{border:0;padding:0;margin:var(--space-2) 0 0}
.mwl-fieldset legend{font:var(--fw-medium) var(--fs-legal)/1.35 var(--font-body);letter-spacing:0.06em;text-transform:uppercase;color:#4D4D4D;padding:0;margin-bottom:6px}
.mwl-radios{display:flex;gap:var(--space-3)}
.mwl-radios input{position:absolute;opacity:0;width:1px;height:1px}
.mwl-radios label{font:var(--fw-semibold) var(--fs-label)/1 var(--font-body);letter-spacing:0.04em;color:var(--text-muted);padding:12px 0 10px;border-bottom:2px solid var(--border-field);cursor:pointer;min-height:var(--tap-min);display:inline-flex;align-items:center}
.mwl-radios input:checked+label{color:var(--text-accent);border-bottom-color:var(--brand-pink)}
.mwl-radios input:focus-visible+label{outline:var(--focus-ring-w) solid var(--border-focus);outline-offset:var(--focus-ring-offset)}
.mwl-check{display:flex;gap:var(--space-1);align-items:flex-start;margin:var(--space-2) 0;font:var(--type-label);color:var(--text-body)}
.mwl-check input{width:18px;height:18px;accent-color:var(--brand-pink);margin-top:2px}
.mwl-sheet form .mwl-submit{margin-top:var(--space-2)}
.mwl-message{display:none;font:var(--type-body-lg);color:var(--ink);padding:var(--space-4) 0 var(--space-2)}
.mwl-message[data-show="true"]{display:block}
.mwl-message b{font-family:var(--font-display)}
/* result view inside the overlay */
.mwl-result__title{font:var(--type-headline);letter-spacing:var(--tracking-headline);margin:0}
.mwl-result__sub{font:var(--type-body);color:var(--text-body);margin:4px 0 var(--space-2)}
.mwl-slider{display:flex;flex-direction:column;gap:var(--space-1);margin:var(--space-2) 0}
.mwl-slider__value{font:var(--fw-bold) clamp(28px,4vw,40px)/1.1 var(--font-display);color:var(--ink)}
.mwl-slider__scale{display:flex;justify-content:space-between;font:var(--type-legal);color:var(--text-muted)}
.mwl-premium__heading{font:var(--fw-semibold) var(--fs-legal)/1.35 var(--font-body);letter-spacing:var(--tracking-eyebrow);color:var(--text-muted);margin:var(--space-2) 0 4px}
.mwl-premium{border-top:var(--border-w) solid var(--border-default);padding-top:var(--space-2);margin-bottom:var(--space-2)}
.mwl-premium__label{font:var(--fw-semibold) var(--fs-legal)/1.35 var(--font-body);letter-spacing:var(--tracking-eyebrow);color:var(--text-muted)}
.mwl-premium__value{font:var(--fw-bold) clamp(32px,5vw,48px)/1.05 var(--font-display);letter-spacing:var(--tracking-display);color:var(--brand-pink)}
.mwl-premium__per{font:var(--fw-semibold) var(--fs-legal)/1.35 var(--font-body);letter-spacing:var(--tracking-eyebrow);color:var(--text-muted)}

/* ---------- contact (hero + centred form, client brief Sep 2026) ---------- */
.contact-form-row{flex:1}
.contact-form-wrap{max-width:none;margin-left:0;margin-right:auto}
#mwl-contact-form{max-width:480px}
.contact-form-title{font:var(--type-headline);letter-spacing:var(--tracking-headline);color:var(--text-heading);text-align:left;margin:0 0 var(--space-4);width:max-content;max-width:100%}
@media (min-width:768px){.contact-form-title{white-space:nowrap}}
#mwl-contact-form{background:none;border:0;border-radius:0;padding:0}
#mwl-contact-form .mwl-field{margin-top:var(--space-3)}
#mwl-contact-form .mwl-field:first-child{margin-top:0}
#mwl-contact-form .mwl-field label{color:var(--text-heading);font-weight:var(--fw-regular);letter-spacing:0.04em}
#mwl-contact-form .mwl-field label::after{content:":"}
#mwl-contact-form .mwl-field input,#mwl-contact-form .mwl-field textarea{border:0;border-bottom:var(--border-w) solid var(--text-body);border-radius:0;padding-left:0;padding-right:0;background:transparent;color:var(--text-heading)}
#mwl-contact-form .mwl-field input::placeholder,#mwl-contact-form .mwl-field textarea::placeholder{color:var(--text-heading);opacity:.9}
#mwl-contact-form .mwl-field select,#mwl-contact-form .msel__btn{color:var(--text-heading);border-color:var(--text-body)}
#mwl-contact-form .mwl-field textarea{min-height:110px}
#mwl-contact-form .mwl-field input:focus,#mwl-contact-form .mwl-field textarea:focus{outline:none;box-shadow:none}
#mwl-contact-form .mwl-field select{border-radius:999px;padding-left:36px;padding-right:44px;background-position:right 36px center;min-height:56px}
#mwl-contact-form .msel__btn{border-radius:999px;padding-left:36px;padding-right:44px;min-height:56px}
#mwl-contact-form .msel__panel{border-radius:16px}
#mwl-contact-form .mwl-submit{margin-top:var(--space-4);width:auto;padding:14px 28px}
.mwl-message[data-contact-message]{max-width:480px;margin:0 auto 0 0}

.mwl-field select{background-color:var(--paper);border:1.5px solid var(--border-field);padding:12px;padding-right:32px;background-position:right 12px center}
.mwl-field select:focus{border-color:var(--ink-muted);box-shadow:none}
.mwl-invalid select{border-color:var(--status-error) !important;box-shadow:none}

/* ---------- mobile: "Step 01 of N — Label" outside the form card, progress
   bar along its top edge. Label + fill derive from the page's own step list
   (li[aria-current="step"]); N and fill come from --qq-of / --qq-progress,
   set inline on pages with totals other than 7. ---------- */
@media (max-width:960px){
  .qq{display:flex;flex-direction:column;gap:0}
  .qq__lead{display:contents}
  .qq__lead .eyebrow{display:none}
  .qq__lead h1{order:1}
  .qq__lead .qq__intro{order:2;margin-top:var(--space-1);font-size:var(--fs-body)}
  .qq__lead .qq__steps{order:3;margin:var(--space-4) 0 0;display:block}
  .qq__steps{counter-reset:qqstep}
  .qq__steps li{counter-increment:qqstep;display:block;height:0;margin:0;padding:0;border:0;overflow:hidden}
  .qq__steps li[aria-current="step"]{height:auto;overflow:visible;font:var(--fw-semibold) 12px/1 var(--font-body);letter-spacing:0.08em;text-transform:uppercase;color:var(--text-accent)}
  .qq__steps li[aria-current="step"]::before{content:"Step " counter(qqstep) var(--qq-of," of 7 ") "\2014  "}
  .qq__steps li[aria-current="step"] span{display:none}
  .qq__form{order:4;margin-top:12px;background-image:linear-gradient(to right,var(--brand-pink) 0 var(--qq-progress,14.28%),var(--band-2) var(--qq-progress,14.28%) 100%);background-repeat:no-repeat;background-size:100% 3px;background-position:top left}
}

/* ---------- Sep 2026 brief (quote / buy-online / contact): boxed fields with pill rounding (matches buttons + selects) ---------- */
.mwl-field input[type="text"],.mwl-field input[type="email"],.mwl-field input[type="tel"],.mwl-field input[type="number"]{border:1.5px solid var(--border-field);border-radius:999px;padding-left:16px;padding-right:16px;background:var(--paper)}
.mwl-field textarea{border:1.5px solid var(--border-field);border-radius:16px;padding-left:16px;padding-right:16px;background:var(--paper)}
.mwl-field input[type="text"]:focus,.mwl-field input[type="email"]:focus,.mwl-field input[type="tel"]:focus,.mwl-field input[type="number"]:focus,.mwl-field textarea:focus{border-color:var(--ink-muted);box-shadow:none;outline:none}
.mwl-field select{border-radius:999px;padding-left:16px}
.mwl-field .msel__btn{border-radius:999px;padding-left:16px}
#mwl-contact-form .mwl-field .msel{margin-top:8px}
.mwl-field .msel__panel{border-radius:16px}


/* quick-quote / buy-online text inputs: underline style, same as the contact form; selects stay pills */
.qq__form .qq-field input[type="text"],.qq__form .qq-field input[type="email"],.qq__form .qq-field input[type="tel"]{border:0;border-bottom:var(--border-w) solid var(--text-body);border-radius:0;padding-left:0;padding-right:0;background:transparent;box-shadow:none}
.qq__form .qq-field input[type="text"]:focus,.qq__form .qq-field input[type="email"]:focus,.qq__form .qq-field input[type="tel"]:focus{outline:none;box-shadow:none}