/* The theme sets h1 via an !important inline rule, so match it to hit the design's 34px. */
.mlq-quote-request h1 { font-size: 2.25rem !important; letter-spacing: -.01em; }
@media (max-width: 767.98px) { .mlq-quote-request h1 { font-size: 1.75rem !important; } }
.mlq-quote-request .mlq-step { color: var(--bs-primary, #8cc63f); font-weight: 600; margin-right: .5rem; }
.mlq-quote-request .mlq-aside { position: sticky; top: 110px; }
.mlq-quote-request .mlq-aside-card { border: 1px solid #e6e9ed; border-radius: 10px; padding: 24px 22px; margin-bottom: 16px; }
.mlq-quote-request .mlq-aside-title { font-size: 1rem; font-weight: 600; color: #414a54; margin-bottom: 16px; }
.mlq-quote-request .mlq-aside-step { display: flex; gap: 12px; padding-bottom: 16px; }
.mlq-quote-request .mlq-aside-step:last-child { padding-bottom: 0; }
.mlq-quote-request .mlq-aside-num { width: 22px; height: 22px; border-radius: 50%; background: #f0f6e6; color: #6fa22a; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mlq-quote-request .mlq-aside-step-title { font-size: .85rem; font-weight: 600; color: #414a54; margin-bottom: 3px; }
.mlq-quote-request .mlq-aside-step-body { font-size: .8rem; color: #8a939c; line-height: 1.55; }
.mlq-quote-request .mlq-aside-note { border-radius: 10px; background: #f5f8f0; padding: 20px 22px; }
.mlq-quote-request .mlq-aside-note-title { font-size: .82rem; font-weight: 700; color: #414a54; margin-bottom: 6px; }
.mlq-quote-request .mlq-aside-note-body { font-size: .8rem; color: #6c7680; line-height: 1.6; }
.mlq-quote-request .mlq-service-radio { position: absolute; opacity: 0; pointer-events: none; }
.mlq-quote-request .mlq-service-card { display: flex; flex-direction: column; gap: .5rem; border: 2px solid #e1e5e9; border-radius: 10px; padding: 18px 16px; cursor: pointer; transition: border-color .15s, background .15s; }
.mlq-quote-request .mlq-service-radio:checked + .mlq-service-card { border-color: var(--bs-primary, #8cc63f); background: #f5f8f0; }
.mlq-quote-request .mlq-service-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; }
.mlq-quote-request .mlq-service-text { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.mlq-quote-request .mlq-service-name { font-weight: 600; }
.mlq-quote-request .mlq-service-blurb { font-size: .8rem; color: #8a939c; }
/* Phones: the design turns the picker into full-width horizontal cards —
   38px icon square on the left, name + blurb on the right. */
@media (max-width: 767.98px) {
    .mlq-quote-request .mlq-service-card { flex-direction: row; align-items: center; gap: 12px; padding: 14px; }
    .mlq-quote-request .mlq-service-icon { width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; }
    .mlq-quote-request .mlq-service-text { gap: 2px; }
    .mlq-quote-request .mlq-service-blurb { line-height: 1.45; }
}
/* One flowing 2-col grid: fields fill row by row, so no column runs short and
   leaves dead space (which is what the old fixed col-xl-6 split did). */
.mlq-quote-request .mlq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.mlq-quote-request .mlq-grid > .mlq-span-2 { grid-column: span 2; }
.mlq-quote-request .mlq-grid > input[type="hidden"] { display: none; }
.mlq-quote-request .mlq-grid textarea { min-height: 110px; resize: vertical; }
.mlq-quote-request .mlq-access-title { font-weight: 600; font-size: .9rem; margin: 1rem 0 .5rem; }
.mlq-quote-request .mlq-access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
@media (max-width: 575.98px) {
    .mlq-quote-request .mlq-grid,
    .mlq-quote-request .mlq-access-grid { grid-template-columns: 1fr; }
    /* Without this the span-2 fields still ask for a second track, and the grid
       quietly grows an implicit column instead of collapsing. */
    .mlq-quote-request .mlq-grid > .mlq-span-2 { grid-column: auto; }
}
.mlq-quote-request .mlq-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; max-width: 640px; }
.mlq-quote-request .mlq-photo-item { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #e9ecef; }
.mlq-quote-request .mlq-photo-item img,
.mlq-quote-request .mlq-photo-item video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Says "video" on a tile whose first frame may be black, so an upload that worked is
   never mistaken for one that failed. Bottom-left, clear of the remove button. */
.mlq-quote-request .mlq-photo-badge { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: .7rem; line-height: 1.4; pointer-events: none; }
.mlq-quote-request .mlq-photo-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; line-height: 1; cursor: pointer; }
.mlq-quote-request .mlq-photo-add { aspect-ratio: 1; border-radius: 8px; border: 2px dashed #cbd2d8; background: none; color: #98a1a9; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.mlq-quote-request .mlq-photo-add:hover { border-color: var(--bs-primary, #8cc63f); color: var(--bs-primary, #8cc63f); }
.mlq-quote-request .mlq-error { color: #dc3545; font-size: .85rem; margin-top: .25rem; }

/* The line under a section heading. Not .mlq-error, so it stays grey when a field
   goes red and the two messages do not read as one. */
.mlq-quote-request .mlq-help-line { color: #8a939c; font-size: .85rem; margin-top: .35rem; }

/* ---- Section 02: when do you want it done? --------------------------------
   Three chips, and a calendar that only opens for the middle one, so somebody
   who just wants it done soon is never made to pick a day they do not care
   about. Palette from the MulchSpot Quote Requests design. */

.mlq-quote-request .mlq-when-summary { font-size: .78rem; font-weight: 500; color: #5F8F21; white-space: nowrap; }
.mlq-quote-request .mlq-when-summary:empty { display: none; }

.mlq-quote-request .mlq-urgency { display: flex; gap: 8px; flex-wrap: wrap; }
/* Off-screen rather than display:none, so the radios keep their place in the tab
   order and arrow keys still move through the group. */
.mlq-quote-request .mlq-urgency-radio,
.mlq-quote-request .mlq-slot-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: -1px; overflow: hidden; }
.mlq-quote-request .mlq-urgency-chip {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid #E1E5E9; background: #fff; color: #7C8794;
    border-radius: 999px; padding: 10px 18px;
    font-size: .78rem; font-weight: 600; cursor: pointer;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
/* Inline SVG rather than an icon font, so it inherits the chip's colour and
   scales with it. Sized here once for every icon in this section. */
.mlq-quote-request .mlq-ico { width: 13px; height: 13px; flex-shrink: 0; display: block; }
.mlq-quote-request .mlq-cal-nav .mlq-ico { width: 11px; height: 11px; margin: 0 auto; }

.mlq-quote-request .mlq-urgency-chip:hover { border-color: #B9D98A; color: #5F8F21; }
.mlq-quote-request .mlq-urgency-radio:checked + .mlq-urgency-chip { border-color: #8CC63F; background: #F0F6E6; color: #5F8F21; }
.mlq-quote-request .mlq-urgency-radio:focus-visible + .mlq-urgency-chip { outline: 2px solid #8CC63F; outline-offset: 2px; }

.mlq-quote-request .mlq-datepick {
    display: flex; flex-direction: column; gap: 20px;
    border: 1px solid #E6E9ED; border-radius: 10px;
    padding: 20px 22px; margin-top: 16px; max-width: 420px; background: #fff;
}
.mlq-quote-request .mlq-datepick[hidden] { display: none; }

.mlq-quote-request .mlq-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mlq-quote-request .mlq-cal-nav {
    width: 30px; height: 30px; border: 1px solid #E1E5E9; background: #fff;
    border-radius: 6px; cursor: pointer; color: #7C8794; font-size: 10px; line-height: 1; padding: 0;
}
.mlq-quote-request .mlq-cal-nav:hover { border-color: #8CC63F; color: #5F8F21; }
.mlq-quote-request .mlq-cal-nav[disabled] { opacity: .35; cursor: not-allowed; }
.mlq-quote-request .mlq-cal-nav[disabled]:hover { border-color: #E1E5E9; color: #7C8794; }
.mlq-quote-request .mlq-cal-month { font-size: .875rem; font-weight: 600; color: #414A54; }

.mlq-quote-request .mlq-cal-names,
.mlq-quote-request .mlq-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mlq-quote-request .mlq-cal-names { margin-bottom: 6px; }
.mlq-quote-request .mlq-cal-names span { text-align: center; font-size: .656rem; font-weight: 600; color: #A6AEB5; letter-spacing: .04em; }

.mlq-quote-request .mlq-cal-day {
    height: 38px; border: 1px solid #E6E9ED; background: #fff; color: #414A54;
    border-radius: 7px; font-size: .78rem; font-weight: 400; cursor: pointer; padding: 0;
}
.mlq-quote-request .mlq-cal-day:hover:not([disabled]) { border-color: #8CC63F; color: #5F8F21; }
.mlq-quote-request .mlq-cal-day[disabled] { background: #F7F8F9; border-color: #F1F3F5; color: #C7CDD2; cursor: not-allowed; }
.mlq-quote-request .mlq-cal-day.is-on { background: #8CC63F; border-color: #8CC63F; color: #fff; font-weight: 600; }
/* An empty cell before the 1st. Not a button, so it cannot be tabbed to. */
.mlq-quote-request .mlq-cal-pad { height: 38px; }

.mlq-quote-request .mlq-cal-legend { display: flex; gap: 16px; margin-top: 12px; font-size: .688rem; color: #A6AEB5; }
.mlq-quote-request .mlq-cal-legend span { display: flex; align-items: center; gap: 6px; }
.mlq-quote-request .mlq-swatch { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.mlq-quote-request .mlq-swatch.is-sel { background: #8CC63F; }
.mlq-quote-request .mlq-swatch.is-off { background: #F1F3F5; border: 1px solid #E6E9ED; }

.mlq-quote-request .mlq-cal-foot { border-top: 1px solid #F1F3F5; padding-top: 18px; }
.mlq-quote-request .mlq-cal-subtitle { font-size: .8rem; font-weight: 600; color: #414A54; margin-bottom: 9px; }

.mlq-quote-request .mlq-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.mlq-quote-request .mlq-slot {
    display: flex; flex-direction: column; gap: 5px; min-height: 66px;
    border: 1px solid #E1E5E9; background: #fff; border-radius: 8px;
    padding: 12px 10px; cursor: pointer;
}
.mlq-quote-request .mlq-slot-top { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; color: #414A54; }
.mlq-quote-request .mlq-slot-dot {
    width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #D5DAE0;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.mlq-quote-request .mlq-slot-dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.mlq-quote-request .mlq-slot-hint { font-size: .688rem; color: #8A939C; line-height: 1.35; }
.mlq-quote-request .mlq-slot-radio:checked + .mlq-slot { border-color: #8CC63F; background: #F0F6E6; }
.mlq-quote-request .mlq-slot-radio:checked + .mlq-slot .mlq-slot-dot { border-color: #8CC63F; }
.mlq-quote-request .mlq-slot-radio:checked + .mlq-slot .mlq-slot-dot::after { background: #8CC63F; }
.mlq-quote-request .mlq-slot-radio:focus-visible + .mlq-slot { outline: 2px solid #8CC63F; outline-offset: 2px; }

.mlq-quote-request .mlq-flexdays .form-check-label { font-size: .78rem; color: #6C7680; line-height: 1.5; }

/* One column on a phone: three slot cards side by side leaves each too narrow to
   read its hint. */
@media (max-width: 575.98px) {
    .mlq-quote-request .mlq-datepick { padding: 16px; }
    .mlq-quote-request .mlq-slots { grid-template-columns: 1fr; }
    .mlq-quote-request .mlq-slot { min-height: 0; flex-direction: row; align-items: center; gap: 10px; }
    .mlq-quote-request .mlq-slot-hint { margin-left: auto; }
    .mlq-quote-request .mlq-urgency-chip { flex: 1 1 auto; justify-content: center; }
    .mlq-quote-request .mlq-when-summary { display: none; }
}

/* A per-service question that was left blank. Marked on the group rather than the
   control, because a checkbox question is several controls answering as one and
   the message has to sit with the question, not with the last tickbox. */
.mlq-quote-request .mlq-svc-q.is-missing .form-select,
.mlq-quote-request .mlq-svc-q.is-missing .form-control { border-color: #dc3545; }
.mlq-quote-request .mlq-svc-q.is-missing .mlq-access-title,
.mlq-quote-request .mlq-svc-q.is-missing .mlq-flabel,
.mlq-quote-request .mlq-svc-q.is-missing .form-check-label { color: #dc3545; }

/* A "pick any" group answers as one question, so Bootstrap's per-control valid
   state says nothing useful about it: an unticked box is not an error, and a
   whole group left blank is invisible to it. It was painting every box and label
   green regardless. Silenced, and the group's own is-missing state above carries
   the answer instead. */
.mlq-quote-request .was-validated .mlq-svc-q .form-check-input:valid,
.mlq-quote-request .was-validated .mlq-svc-q .form-check-input:invalid {
    border-color: rgba(0, 0, 0, .25);
    background-image: none;
}
.mlq-quote-request .was-validated .mlq-svc-q .form-check-input:valid:checked,
.mlq-quote-request .was-validated .mlq-svc-q .form-check-input:invalid:checked { background-color: #86b640; border-color: #86b640; }
.mlq-quote-request .was-validated .mlq-svc-q .form-check-input:valid ~ .form-check-label,
.mlq-quote-request .was-validated .mlq-svc-q .form-check-input:invalid ~ .form-check-label { color: inherit; }

/* =====================================================================
   Phone wizard (design: "Quote form A - Outlined")

   Below 992px the four sections page one at a time behind a progress
   header and a sticky Continue button. Every rule here is inside the
   media query: above it the form is the single page it has always been,
   and the wizard chrome does not exist.

   `!important` appears only against the parent theme's own !important
   rules (h3 sizing, .form-control/.form-select, .btn colours), which is
   the documented reason this codebase allows it.
   ===================================================================== */

@media (max-width: 991.98px) {

    /* ---- Outlined fields ---- */

    .mlq-quote-request .mlq-quote-form .form-control,
    .mlq-quote-request .mlq-quote-form .form-select {
        min-height: 52px;
        border: 1.5px solid #E7EAED !important;
        border-radius: 8px !important;
        background-color: #FFFFFF !important;
        padding: 0 14px;
        font-size: 15px;
        color: #212529;
    }

    .mlq-quote-request .mlq-quote-form textarea.form-control {
        min-height: 104px;
        padding: 12px 14px;
        line-height: 1.5;
    }

    .mlq-quote-request .mlq-quote-form .form-control:focus,
    .mlq-quote-request .mlq-quote-form .form-select:focus {
        border-color: #86B640 !important;
        box-shadow: none;
    }

    .mlq-quote-request .mlq-service-card {
        border-width: 1.5px;
        border-radius: 8px;
    }

    .mlq-quote-request .mlq-service-icon {
        border-radius: 8px;
    }

    /* ---- Step paging ---- */

    .mlq-quote-request .mlq-fstep[hidden] {
        display: none;
    }

    /* The wizard header carries the step title, so the numbered heading
       inside each section would be a second copy of it. */
    .mlq-quote-request .mlq-fstep > h3 {
        display: none;
    }

    /* Except step 3's, which also holds the live photo counter. */
    .mlq-quote-request .mlq-fstep[data-mlq-step="3"] > h3 {
        display: flex;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #6B7683;
    }

    .mlq-quote-request .mlq-fstep[data-mlq-step="3"] > h3 .mlq-step {
        display: none;
    }

    /* ---- Progress header ---- */

    .mlq-quote-request .mlq-wiz-head {
        position: sticky;
        top: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 16px;
        padding: 12px 0 11px;
        border-bottom: 1px solid #E7EAED;
        background: #FFFFFF;
    }

    .mlq-quote-request .mlq-wiz-back {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid #DEE2E6;
        border-radius: 8px;
        background: #FFFFFF;
        color: #495057;
    }

    .mlq-quote-request .mlq-wiz-back[disabled] {
        opacity: 0.35;
    }

    .mlq-quote-request .mlq-wiz-headmain {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mlq-quote-request .mlq-wiz-title {
        font-family: Poppins, sans-serif;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.2px;
        color: #212529;
    }

    .mlq-quote-request .mlq-wiz-bars {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 7px;
    }

    .mlq-quote-request .mlq-wiz-bar {
        flex: 1;
        height: 4px;
        border-radius: 2px;
        background: #E7EAED;
    }

    .mlq-quote-request .mlq-wiz-bar.is-on {
        background: #86B640;
    }

    .mlq-quote-request .mlq-wiz-count {
        flex-shrink: 0;
        font-size: 12px;
        font-weight: 600;
        color: #8590A6;
    }

    /* ---- "What happens next?" accordion (step 1) ---- */

    .mlq-quote-request .mlq-wiz-next {
        margin-top: 22px;
    }

    .mlq-quote-request .mlq-wiz-next-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        padding: 14px;
        border: 1px solid #E7EAED;
        border-radius: 8px;
        background: #FFFFFF;
        text-align: left;
    }

    .mlq-quote-request .mlq-wiz-next-toggle.is-open {
        border-radius: 8px 8px 0 0;
    }

    .mlq-quote-request .mlq-wiz-next-label {
        font-family: Poppins, sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #212529;
    }

    .mlq-quote-request .mlq-wiz-next-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #8590A6;
    }

    .mlq-quote-request .mlq-wiz-next-toggle.is-open .mlq-wiz-next-meta svg {
        transform: rotate(180deg);
    }

    .mlq-quote-request .mlq-wiz-next-meta svg {
        transition: transform 0.2s ease;
    }

    .mlq-quote-request .mlq-wiz-next-body[hidden] {
        display: none;
    }

    .mlq-quote-request .mlq-wiz-next-body {
        padding: 4px 14px 14px;
        border: 1px solid #E7EAED;
        border-top: 0;
        border-radius: 0 0 8px 8px;
        background: #FFFFFF;
    }

    .mlq-quote-request .mlq-wiz-next-step {
        display: flex;
        gap: 11px;
        padding: 11px 0;
        border-top: 1px solid #F1F3F5;
    }

    /* ---- Sticky footer ---- */

    .mlq-quote-request .mlq-wiz-foot {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: 8px -12px 0;
        padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
        border-top: 1px solid #E7EAED;
        background: #FFFFFF;
    }

    .mlq-quote-request .mlq-wiz-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 54px;
        border: 0;
        border-radius: 8px;
        /* Reachable even when the step is incomplete — pressing it is how you
           find out what is missing. It just does not look primary yet. */
        background: #E7EAED;
        color: #A9B2BC;
        font-family: Poppins, sans-serif;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    .mlq-quote-request .mlq-wiz-cta.is-ready {
        background: #86B640;
        color: #FFFFFF;
    }

    .mlq-quote-request .mlq-wiz-hint {
        margin-top: 8px;
        text-align: center;
        font-size: 12px;
        color: #8590A6;
    }

    .mlq-quote-request .mlq-wiz-hint.is-error {
        color: #D64545;
    }

    /* The sticky footer replaces it. */
    .mlq-quote-request .mlq-desktop-submit {
        display: none;
    }

    /* The aside's content lives in the step 1 accordion at this width. */
    .mlq-quote-request .mlq-aside {
        display: none;
    }
}

/* Desktop keeps the single-page form, so none of the wizard chrome exists. */
@media (min-width: 992px) {

    .mlq-quote-request .mlq-wiz-head,
    .mlq-quote-request .mlq-wiz-foot,
    .mlq-quote-request .mlq-wiz-next {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   Phone: closing the remaining gaps against the design
   --------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    /* The step header is the heading here. Keeping the page H1 and its intro
       on every step cost the whole top of the screen. */
    .mlq-quote-request > .container > .row > .col-12 > h1,
    .mlq-quote-request > .container > .row > .col-12 > p {
        display: none;
    }

    .mlq-quote-request .mlq-wiz-lede {
        margin: 0 0 14px;
        font-size: 13px;
        line-height: 1.55;
        color: #6B7683;
    }

    .mlq-quote-request .mlq-wiz-head {
        margin-top: 0;
    }

    /* Step 3's heading is the only one kept, for its photo counter — but the
       title half of it repeats the wizard header, so only the counter shows. */
    .mlq-quote-request .mlq-fstep[data-mlq-step="3"] > h3 .mlq-h3-text {
        display: none;
    }

    /* ---- Labels ---- */

    .mlq-quote-request .mlq-flabel {
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
        font-weight: 600;
        color: #495057;
    }

    /* Suburb + postcode, and state + timing, sit two-up as the design has. */
    .mlq-quote-request .mlq-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px 10px;
    }

    .mlq-quote-request .mlq-grid > .mlq-span-2 {
        grid-column: 1 / -1;
    }

    /* ---- Service cards ---- */

    .mlq-quote-request .mlq-service-card {
        position: relative;
        padding-right: 46px;
    }

    .mlq-quote-request .mlq-service-tick {
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border: 2px solid #CED4DA;
        border-radius: 50%;
        background: #FFFFFF;
        color: #FFFFFF;
    }

    .mlq-quote-request .mlq-service-tick svg {
        opacity: 0;
    }

    .mlq-quote-request .mlq-service-radio:checked + .mlq-service-card .mlq-service-tick {
        border-color: #86B640;
        background: #86B640;
    }

    .mlq-quote-request .mlq-service-radio:checked + .mlq-service-card .mlq-service-tick svg {
        opacity: 1;
    }

    /* ---- Site access as pill chips ----
       The checkboxes stay exactly as they are for the form data; only their
       presentation changes. */

    .mlq-quote-request .mlq-access-title {
        margin: 20px 0 8px;
        font-family: Poppins, sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #212529;
    }

    .mlq-quote-request .mlq-access-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .mlq-quote-request .mlq-access-grid .form-check {
        margin: 0;
        padding: 0;
        min-height: 0;
    }

    .mlq-quote-request .mlq-access-grid .form-check-input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .mlq-quote-request .mlq-access-grid .form-check-label {
        display: flex;
        align-items: center;
        height: 40px;
        padding: 0 14px;
        border: 1.5px solid #E7EAED;
        border-radius: 999px;
        background: #FFFFFF;
        color: #495057;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

    .mlq-quote-request .mlq-access-grid .form-check-input:checked + .form-check-label {
        border-color: #86B640;
        background: #F2F7EA;
        color: #3F6A17;
    }

    /* ---- Photos ---- */

    .mlq-quote-request .mlq-photo-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .mlq-quote-request .mlq-photo-grid > * {
        aspect-ratio: 1;
        width: auto;
        height: auto;
        border-radius: 8px;
    }

    .mlq-quote-request .mlq-photo-add {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 1.5px dashed #B9C2CC;
        background: #FFFFFF;
        color: #6B7683;
    }

    /* ---- Consent ---- */

    .mlq-quote-request .mlq-quote-form .form-check-input[type="checkbox"]#mlq_consent {
        /* The wrapper is a flex row, so without this the box is squashed to
           about 10px by the long label beside it. */
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        /* Bootstrap floats .form-check-input and pulls it left by 1.5em to sit
           in the wrapper's padding. The wrapper is a flex row with no padding
           here, so that negative margin hangs the box off the card edge. */
        float: none;
        margin: 1px 0 0;
        border: 2px solid #CED4DA !important;
        border-radius: 8px;
    }

    .mlq-quote-request .mlq-quote-form #mlq_consent:checked {
        border-color: #86B640 !important;
        background-color: #86B640;
    }

    .mlq-quote-request .mlq-quote-form .form-check:has(#mlq_consent) {
        display: flex;
        gap: 11px;
        padding-left: 0;
    }

    .mlq-quote-request .mlq-quote-form .form-check:has(#mlq_consent) .form-check-label {
        font-size: 13px;
        line-height: 1.5;
        color: #495057;
    }

    /* ---- Alternative phone behind a link ---- */

    .mlq-quote-request .mlq-altphone-add {
        margin-top: 10px;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: 13px;
        font-weight: 600;
        color: #5F8F2A;
    }
}

/* Desktop keeps the placeholder-only fields and the always-visible alternative
   phone it has always had. */
@media (min-width: 992px) {

    .mlq-quote-request .mlq-flabel,
    .mlq-quote-request .mlq-wiz-lede,
    .mlq-quote-request .mlq-service-tick,
    .mlq-quote-request .mlq-altphone-add {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   Service pins and group headings
   The marker replaces the coloured icon square at every width, so the
   picker matches the map, the legend, the chips and the cards.
   --------------------------------------------------------------------- */

.mlq-quote-request .mlq-service-icon--pin {
    background: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mlq-quote-request .mlq-service-icon--pin img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Group label above a set of controls, matching the design's
   "How soon do you need it?" heading. */
.mlq-quote-request .mlq-group-title {
    margin: 0 0 10px;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #212529;
}

@media (max-width: 991.98px) {

    /* A pin is taller than it is wide, so the square that suited a glyph
       would letterbox it. */
    .mlq-quote-request .mlq-service-icon--pin {
        width: 30px;
        height: 40px;
    }

    .mlq-quote-request .mlq-group-title {
        margin-top: 4px;
    }
}

/* ---- Upload in progress ----------------------------------------------------
   The tile exists from the moment a file is chosen, so a large video shows
   something happening rather than nothing until it lands. */
.mlq-quote-request .mlq-photo-item.is-uploading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; background: #f1f3f5; border: 1px dashed #cbd2d8; }
.mlq-quote-request .mlq-photo-progress { width: 70%; height: 6px; border-radius: 100px; background: #dee2e6; overflow: hidden; }
/* Transitioned so a chunk boundary reads as movement rather than a jump. */
.mlq-quote-request .mlq-photo-progress-bar { display: block; width: 0; height: 100%; border-radius: 100px; background: var(--bs-primary, #8cc63f); transition: width .2s linear; }
.mlq-quote-request .mlq-photo-pct { font-size: .75rem; font-weight: 600; color: #6c757d; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .mlq-quote-request .mlq-photo-progress-bar { transition: none; }
}