/**
 * SP2026 additions.
 *
 * The copied SP2024 stylesheets are left byte-identical, so anything new lives here.
 * Loaded last, after style.css and responsive.css.
 *
 * Colours are the existing brand values: #3B462E dark, #577038 mid, #84F000 lime.
 */

/* ---------------------------------------------------------------------------
   Lime call-to-action button.

   Used on the dark green panels, where .theme-btn.btn-two (an outlined button in
   #3B462E) would be almost invisible against the background.
   --------------------------------------------------------------------------- */
.theme-btn.btn-lime {
    background-color: #84F000;
    color: #3B462E;
    border: 2px solid #84F000;
    font-weight: 700;
}

.theme-btn.btn-lime:hover {
    background-color: transparent;
    color: #84F000;
    border-color: #84F000;
}

/* ---------------------------------------------------------------------------
   "Local Shear Power Team" panel on an area directory page.
   --------------------------------------------------------------------------- */
.local-team-panel .team-member {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
}

.local-team-panel .team-member img {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.local-team-panel .team-member .name {
    font-style: italic;
    line-height: 1.3;
}

.local-team-panel .team-member .role {
    font-weight: 700;
    line-height: 1.3;
}

/* ---------------------------------------------------------------------------
   Directory index — area links inside the accordion (/gardeners-near-me).

   SP2024's global `a{}` rule sets text-decoration only, never colour, so nothing
   overrides Bootstrap's default a{color:#007bff} for these links. On the live site
   this list renders as unstyled blue text with a bullet — confirmed against SP2024
   directly. Fixed here rather than carried over, since it is a readability bug, not a
   design choice.

   .area-list is a dedicated class so this does not touch .list elsewhere (SP2024 also
   uses that shared class on project-details, service-details and blog-details pages).

   The bullet itself is drawn by style.css's `.accordion-box .acc-content .list
   li:before` (3 ancestor classes deep). SP2024 offset each <li> from it with an inline
   `pl_20` utility class, which the port did not carry over — so the override here has to
   match that same ancestor chain, or the original rule wins on specificity regardless of
   source order and the dot renders at left:0 on top of the text.
   --------------------------------------------------------------------------- */
.accordion-box .acc-content .area-list.list li {
    padding-left: 0;
}

.accordion-box .acc-content .area-list.list li:before {
    content: none;
}

.accordion-box .acc-content .area-list.list li a {
    color: #3B462E;
    font-size: 17px;
    font-weight: 700;
}

.accordion-box .acc-content .area-list.list li a:hover {
    color: #577038;
}

/* ---------------------------------------------------------------------------
   Directory listing cards.

   A featured (paid) listing is the only one that carries a link and a phone
   number, so it needs to read as clearly different from the free entries.

   Rebuilt 2026-08-14 to actually match the "after" preview promised on
   /for-gardeners — icon rows for phone/website, a visible hover state — rather
   than a plainer stand-in for it. The featured card previously showed the
   website only as an invisible link on the business name; it is now also a
   named, visible line, same as the sales page shows it.
   --------------------------------------------------------------------------- */
.listing-card .inner-box {
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    border: 1px solid transparent;
}

.listing-card.is-featured .inner-box {
    background-color: #3B462E;
    border-color: rgba(132, 240, 0, .18);
}

.listing-card.is-free .inner-box {
    border-color: #ececec;
}

/* The lift: small and quick on purpose — a hover state on a whole grid of cards
   should read as "alive", not animate every entry into a distraction. */
.listing-card:hover .inner-box {
    transform: translateY(-5px);
}

.listing-card.is-featured:hover .inner-box {
    border-color: #84F000;
    box-shadow: 0 20px 38px rgba(59, 70, 46, .32);
}

.listing-card.is-free:hover .inner-box {
    border-color: #b7c9a0;
    box-shadow: 0 16px 30px rgba(59, 70, 46, .12);
}

.listing-card.is-featured .inner-box h5,
.listing-card.is-featured .inner-box h5 a,
.listing-card.is-featured .inner-box p,
.listing-card.is-featured .inner-box a {
    color: #fff;
}

.listing-card.is-featured .inner-box h5 a:hover,
.listing-card.is-featured .inner-box a:hover {
    color: #84F000;
}

.listing-card.is-featured .featured-label {
    color: #84F000;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.listing-card .listing-demo-link {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Phone/website/email rows on a featured card — the icon is what makes each line
   read as "this is included", matching the sp-card-line treatment on the sales
   page rather than the plain, icon-less lines the real card had before. */
.listing-card .listing-meta {
    margin-top: 4px;
}

.listing-card .listing-line {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-size: 15px;
    line-height: 26px;
    margin: 0 0 4px;
}

.listing-card .listing-line:last-child {
    margin-bottom: 0;
}

.listing-card .listing-line i {
    color: #84F000;
    font-size: 13px;
    width: 14px;
    flex: none;
}

/* A free listing is a name only — no link, no phone. Keep it visually quieter by
   default; the hint below only appears on hover, so nothing changes for anyone
   just scanning the grid. */
.listing-card.is-free .inner-box h5 {
    margin-bottom: 0;
}

.listing-card .listing-hint {
    margin: 10px 0 0;
    font-size: 13.5px;
    font-style: italic;
    color: #9aa295;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease;
}

.listing-card.is-free:hover .listing-hint {
    opacity: 1;
    transform: translateY(0);
}

.listing-card.is-compact .inner-box {
    min-height: 160px;
}

.pricing-preview {
    text-align: left;
}

.pricing-preview img {
    display: block;
    width: 100%;
    height: 148px;
    object-fit: cover;
    object-position: left top;
}

@media (prefers-reduced-motion: reduce) {
    .listing-card .inner-box,
    .listing-card .listing-hint {
        transition: none;
    }
    .listing-card:hover .inner-box {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   Slim header (layouts/header-slim.php) — conversion pages.

   Inherits style-two's top band, but sits in normal flow (style-two is
   position:absolute, made to overlay a hero image that these pages do not have)
   and puts the logo on a plain white bar. No nav, no button, nothing to leave for.
   --------------------------------------------------------------------------- */
.main-header.style-slim {
    position: relative;
}

.main-header.style-slim .header-lower {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}

.main-header.style-slim .outer-box {
    padding: 15px 0;
}

/* ---------------------------------------------------------------------------
   Price calculator (/uk|us/[area]/get-my-price).

   The service picker uses the site's default-form styling; only the pieces that
   have no SP2024 equivalent are defined here: the frequency toggle, the service
   checkbox rows, and the dark green estimate panel (same treatment as the
   local-team-panel and featured listing cards).
   --------------------------------------------------------------------------- */
.sp-calc-group {
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 20px 25px;
    margin-bottom: 20px;
}

.sp-calc-heading {
    font-size: 18px;
    font-weight: 700;
    color: #3B462E;
    margin-bottom: 15px;
}

.sp-calc-group .form-group label:not(.sr-only) {
    display: block;
    font-size: 15px;
    color: #3B462E;
    margin-bottom: 8px;
}

.sp-frequency {
    display: flex;
    gap: 15px;
}

/* Zero flex-basis keeps all three options on one line at any width;
   they stack only on small phones (media query below). */
.sp-frequency label {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.sp-frequency input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.sp-frequency span {
    display: block;
    border: 2px solid #e5e5e5;
    border-radius: 5px;
    padding: 14px 18px;
    font-weight: 700;
    color: #3B462E;
    transition: all .3s ease;
}

.sp-frequency span small {
    display: block;
    font-weight: 400;
    color: #777;
}

.sp-frequency input[type="radio"]:checked + span {
    border-color: #577038;
    background-color: #f4f8ef;
}

.sp-frequency input[type="radio"]:focus-visible + span {
    outline: 2px solid #577038;
    outline-offset: 2px;
}

.sp-check {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 12px;
    cursor: pointer;
}

.sp-check:last-child {
    margin-bottom: 0;
}

.sp-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    position: relative;
    top: 3px;
    accent-color: #577038;
}

.sp-check span {
    font-size: 17px;
    font-weight: 700;
    color: #3B462E;
    line-height: 1.4;
}

.sp-check span small {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #777;
}

.sp-service-fields {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #e5e5e5;
}

/* The estimate panel — same dark green treatment as the featured listing card. */
.sp-quote-panel {
    position: sticky;
    top: 30px;
    background-color: #3B462E;
    border-radius: 5px;
    padding: 35px 40px;
    color: #fff;
}

.sp-quote-panel h3 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 20px;
}

.sp-quote-panel ul {
    margin-bottom: 20px;
}

.sp-quote-panel ul li {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    font-size: 15px;
}

.sp-quote-panel ul li strong {
    color: #84F000;
    white-space: nowrap;
}

.sp-quote-panel .sp-quote-empty {
    border-bottom: none;
    color: rgba(255, 255, 255, .7);
}

.sp-quote-minimum {
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 10px;
}

.sp-quote-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 15px;
    padding-top: 10px;
    font-size: 18px;
    font-weight: 700;
}

.sp-quote-total strong {
    font-size: 34px;
    color: #84F000;
}

.sp-quote-note {
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .7);
}

@media (max-width: 991px) {
    .sp-quote-panel {
        position: static;
        margin-top: 30px;
    }
}

@media (max-width: 575px) {
    .sp-frequency {
        flex-direction: column;
    }
}

/* ---------------------------------------------------------------------------
   Country → region → area picker (/join, /become-a-licensee, /for-gardeners).
   Native selects (nice-select is skipped via .ignore) so a few thousand areas
   never dump onto the page as a list.
   --------------------------------------------------------------------------- */
.sp-area-picker label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #3B462E;
    margin-bottom: 8px;
}

.sp-area-picker select.ignore {
    display: block;
    width: 100%;
    height: 50px;
    background-color: #fff;
    border: 1px solid #dfe6e6;
    border-radius: 5px;
    font-size: 15px;
    color: #141417;
    padding: 10px 30px;
}

.sp-area-gate {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 30px 30px 10px;
    margin-bottom: 20px;
}

.sp-area-picker.is-attention select.ignore {
    border-color: #577038;
    box-shadow: 0 0 0 3px rgba(87, 112, 56, 0.15);
}

/* --- Size guides on the order page (2026-08-16) ------------------------------------
 *
 * Body-relative size charts: a customer indoors cannot judge inches, but they know
 * whether the grass clears their ankle. Settling it at booking is what stops the crew
 * renegotiating on the doorstep.
 */
.sp-guide-link { margin: 6px 0 0; font-size: 14px; }

.sp-guide-open {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: #84f000;
    text-decoration: underline;
    cursor: pointer;
}

.sp-guide {
    border: 0;
    border-radius: 12px;
    padding: 0;
    max-width: min(920px, 94vw);
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.sp-guide::backdrop { background: rgba(0, 0, 0, .6); }

.sp-guide-body { padding: 28px; }
.sp-guide-body h3 { margin: 0 0 16px; font-size: 22px; }

/* The charts are wide; letting them scale keeps the dialog inside a phone screen. */
.sp-guide-body img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.sp-guide-body p { margin: 14px 0 0; color: #555; font-size: 15px; }

.sp-guide-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: 0;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    color: #666;
}

.sp-guide-close:hover { color: #000; }

/* --- Native selects on the order page (2026-08-16) --------------------------------
 *
 * These carry .ignore so jquery.nice-select leaves them alone. Its stylesheet is never
 * linked in head.php, so the plugin was swapping a working native control for an
 * unstyled div — options rendered as loose text over the page. Native is also simply
 * better here: a customer filling this in on a phone in the garden gets the iOS or
 * Android picker rather than a bespoke list.
 */
.sp-select {
    display: block;
    width: 100%;
    padding: 12px 40px 12px 14px;
    font: inherit;
    color: #1c1c1c;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    cursor: pointer;

    /*
     * Our own chevron, since appearance:none removes the platform one — except that the
     * unprefixed property alone leaves Safari's and older Firefox's native arrow in place
     * *alongside* this one, so both a double chevron. -webkit-/-moz- are what actually
     * suppress it in those engines; the unprefixed property is only Chrome/Edge's.
     */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23555' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* Old Edge/IE draw their own dropdown arrow on top of ours regardless of appearance. */
.sp-select::-ms-expand {
    display: none;
}

.sp-select:focus {
    outline: 2px solid #84f000;
    outline-offset: 1px;
    border-color: #84f000;
}

/* --- The staged order page (2026-08-17, build plan §7.4.1) ------------------------
 *
 * Six steps in one form. The staging is entirely a class: `.sp-order--staged` is added
 * by assets/js/order.js, so without JavaScript every section stays visible and the form
 * is the long one it replaced rather than a blank page with a dead Continue button.
 */
.sp-order--staged .sp-step {
    display: none;
}

.sp-order--staged .sp-step.is-current {
    display: block;
    animation: sp-step-in .18s ease-out;
}

@keyframes sp-step-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Not staged: the sections need separating from each other, since nothing else does it. */
.sp-order:not(.sp-order--staged) .sp-step {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #ececec;
}

.sp-step-title {
    position: relative;
    display: block;
    margin-bottom: 8px;
    font-size: 28px;
    line-height: 36px;
}

.sp-step-note {
    margin: 0 0 22px;
    color: #666;
    font-size: 15px;
    line-height: 24px;
}

.sp-pencil-note {
    margin-top: 22px;
    padding: 14px 16px;
    background: #f6f8f3;
    border-left: 3px solid #84f000;
    border-radius: 4px;
}

/* --- The breadcrumb of steps --- */
.sp-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    counter-reset: sp-step;
}

.sp-steps li {
    position: relative;
    padding-left: 26px;
    color: #aaa;
    font-size: 14px;
    counter-increment: sp-step;
}

.sp-steps li::before {
    content: counter(sp-step);
    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background: #ccc;
    border-radius: 50%;
}

.sp-steps li.is-done::before { background: #7a9c3f; content: "\2713"; }
.sp-steps li.is-current { color: #1c1c1c; font-weight: 600; }
.sp-steps li.is-current::before { background: #84f000; color: #1c1c1c; }

/* --- Moving between steps --- */
.sp-step-nav {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.sp-step-error {
    margin: 0 0 14px;
    padding: 12px 14px;
    color: #7a2a2a;
    background: #fdf0f0;
    border-left: 3px solid #d46a6a;
    border-radius: 4px;
    font-size: 15px;
}

/* --- Hedges are a list, not a field --- */
.sp-hedge-run {
    position: relative;
    padding: 16px 18px 4px;
    margin-bottom: 14px;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
}

.sp-hedge-run legend {
    width: auto;
    padding: 0 8px;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 600;
    color: #555;
    border: 0;
}

.sp-hedge-remove {
    padding: 0;
    margin-bottom: 12px;
    color: #a05555;
    font-size: 14px;
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

.sp-hedge-add { margin-right: 14px; }

/* --- The day picker --- */
.sp-day-week {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

/* Five to a row on a desktop, wrapping down to two on a phone — a week reads as a week. */
.sp-day {
    flex: 1 1 120px;
    min-width: 110px;
    margin: 0;
    cursor: pointer;
}

.sp-day input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sp-day span {
    display: block;
    /* Full height so a one-word "Available" tile lines up with a three-line reason. */
    height: 100%;
    padding: 12px 10px;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: all .15s ease;
}

.sp-day span strong { display: block; font-size: 15px; color: #1c1c1c; }
.sp-day span small  { display: block; margin-top: 3px; font-size: 12px; line-height: 15px; color: #7a9c3f; }

.sp-day input:checked + span {
    border-color: #84f000;
    background: #f4ffe5;
    box-shadow: 0 0 0 2px rgba(132, 240, 0, .35);
}

.sp-day input:focus-visible + span { outline: 2px solid #84f000; outline-offset: 2px; }

/* An unavailable day still says why — a licensee looking at their own area needs to
 * know whether it is "fully booked" or "no crew set up yet". */
.sp-day.is-full { cursor: not-allowed; }
.sp-day.is-full span { background: #f7f7f7; border-style: dashed; opacity: .65; }
.sp-day.is-full span strong { color: #999; }
.sp-day.is-full span small  { color: #999; }

/* --- The estimate panel while it is catching up --- */
.sp-quote-panel.is-working { opacity: .6; transition: opacity .2s ease; }

.sp-quote-panel ul li span { display: block; }

.sp-quote-duration {
    margin: 10px 0 0;
    color: #cfe6a8;
    font-size: 14px;
}

.sp-billing-note {
    padding: 12px 14px;
    background: #f6f8f3;
    border-radius: 4px;
}

.sp-lookup-column { display: flex; flex-direction: column; justify-content: flex-end; }

.sp-lookup-results {
    margin-top: 8px;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.sp-lookup-results button {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.sp-lookup-results button:hover { background: #f4ffe5; }
.sp-lookup-results button:last-child { border-bottom: 0; }

/* The lookup can fail in several ordinary ways — no credits, provider down, a postcode
 * that does not exist — and every one of them ends with "type it in below", so the note
 * is informational rather than an error. */
.sp-lookup-status {
    margin: 8px 0 0;
    color: #666;
    font-size: 14px;
    line-height: 20px;
}

.sp-lookup-btn[disabled] { opacity: .6; cursor: wait; }

@media (max-width: 767px) {
    .sp-step-title { font-size: 24px; line-height: 32px; }
    .sp-day { flex: 1 1 45%; }
    .sp-step-nav { position: sticky; bottom: 0; padding: 12px 0; background: #fff; z-index: 5; }
}

/* --- Order page: the visit series and the waste question (2026-08-17) --------------
 *
 * A booking is a short series of visits, not one price. The panel says so.
 */
.sp-visit { margin-bottom: 18px; }
.sp-visit + .sp-visit { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .15); }

.sp-visit h4 {
    margin: 0 0 8px;
    color: #84f000;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sp-visit ul { margin: 0; padding: 0; list-style: none; }

.sp-visit-total {
    margin: 8px 0 0;
    color: #cfe6a8;
    font-size: 14px;
}

/* The ongoing block is the one that matters most, so it is the one that stands out. */
.sp-quote-ongoing {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.sp-quote-billing { margin: 6px 0 0; color: #cfe6a8; font-size: 14px; }

/* --- Waste --- */
.sp-waste-volume {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: #f6f8f3;
    border-left: 3px solid #84f000;
    border-radius: 4px;
    font-size: 15px;
}

.sp-waste-options { display: flex; flex-direction: column; gap: 10px; }

.sp-waste-option { margin: 0; cursor: pointer; }
.sp-waste-option input { position: absolute; opacity: 0; pointer-events: none; }

.sp-waste-option span {
    display: block;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: all .15s ease;
}

.sp-waste-option span strong { display: block; font-size: 16px; color: #1c1c1c; }
.sp-waste-option span small  { display: block; margin-top: 3px; color: #666; font-size: 14px; }

.sp-waste-option input:checked + span {
    border-color: #84f000;
    background: #f4ffe5;
    box-shadow: 0 0 0 2px rgba(132, 240, 0, .35);
}

.sp-waste-option input:focus-visible + span { outline: 2px solid #84f000; outline-offset: 2px; }

/* --- Measuring blocks --- */
.sp-measure-heading {
    margin: 26px 0 6px;
    font-size: 19px;
    font-weight: 600;
}

.sp-run {
    position: relative;
    padding: 16px 18px 12px;
    margin-bottom: 14px;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
}

.sp-run legend {
    width: auto;
    padding: 0 8px;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 600;
    color: #555;
    border: 0;
}

.sp-measure {
    padding: 8px 14px;
    margin-right: 10px;
    font-size: 14px;
    color: #1c1c1c;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 20px;
    cursor: pointer;
}

.sp-measure:hover { border-color: #84f000; }
.sp-measure.is-active { background: #84f000; border-color: #84f000; font-weight: 600; }

.sp-run-remove {
    padding: 0;
    color: #a05555;
    font-size: 14px;
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

/* --- The map-first, declutter-the-typed-fields state (2026-08-19) -----------------
 *
 * .sp-run-manual is never removed, only collapsed: it is the fallback for a customer
 * whose map fails to load, so it must always be reachable, just not always visible.
 */
.sp-run-summary {
    margin: 0 0 14px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 600;
    color: #3f6212;
    background: #f4ffe5;
    border-radius: 6px;
}

.sp-run-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.sp-run-manual-toggle {
    padding: 0;
    color: #666;
    font-size: 14px;
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

.sp-run-manual-toggle:hover { color: #1c1c1c; }

/* --- The window-count and hours steppers (2026-08-19) ------------------------------
 *
 * A count of windows or a number of hours suits +/- buttons better than a tiny native
 * spinner nobody can hit accurately with a thumb. The underlying <input> is unchanged —
 * this is styling and a pair of buttons around it, not a new field.
 */
.sp-stepper {
    display: inline-flex;
    align-items: stretch;
    width: 100%;
    max-width: 220px;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    overflow: hidden;
}

.sp-stepper-btn {
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: #1c1c1c;
    background: #f6f8f3;
    border: 0;
    cursor: pointer;
    /* Comfortably tappable on a phone, which is exactly who is filling this in mid-garden. */
    min-height: 52px;
}

.sp-stepper-btn:hover { background: #eaf3df; }
.sp-stepper-btn:active { background: #84f000; }

.sp-stepper-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #1c1c1c;
    background: #fff;
    /* The buttons are the control now; the native spinner is redundant on top of them. */
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.sp-stepper-input::-webkit-outer-spin-button,
.sp-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sp-stepper-input:focus {
    outline: none;
    background: #f4ffe5;
}

/* --- The size charts, on the page rather than behind a link --- */
.sp-guides { margin-top: 22px; }

.sp-guide-card {
    padding: 18px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
}

.sp-guide-card h4 { margin: 0 0 12px; font-size: 17px; }
.sp-guide-card img { display: block; width: 100%; height: auto; border-radius: 6px; }
.sp-guide-card p { margin: 12px 0 0; color: #555; font-size: 14px; line-height: 21px; }

/* --- The measuring window (2026-08-17) ---------------------------------------------
 *
 * The map used to sit in the middle of the measuring step, so every measurement was a
 * scroll down to the map, a scroll back to the field, and a hunt for the right button.
 * It now opens on request, already knowing what it is measuring, and stays open while
 * the customer works through their lawns and hedges.
 */
.sp-map-modal {
    display: none;
    width: min(920px, 94vw);
    max-width: none;
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    overflow: hidden;
}

/* Shown with show() rather than showModal(): Google Maps does not paint in the browser's
 * top layer, so a modal dialog gives the customer a grey rectangle to tap on. Everything
 * showModal() would have handled — backdrop, Escape, click-outside, holding the page
 * still — is done in order.js instead. */
.sp-map-modal[open] {
    display: block;
    position: fixed;
    inset: auto;
    top: 4vh;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 1050;
}

.sp-map-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .6);
}

/* The map must not scroll away underneath a half-finished measurement. */
body.sp-modal-open { overflow: hidden; }

.sp-map-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #ececec;
}

.sp-map-head h3 { margin: 0; font-size: 20px; }

.sp-map-close {
    padding: 0;
    width: 34px;
    height: 34px;
    font-size: 26px;
    line-height: 1;
    color: #777;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.sp-map-close:hover { color: #000; background: #f2f2f2; }

.sp-map-help {
    margin: 0;
    padding: 12px 22px;
    color: #444;
    font-size: 15px;
    background: #f6f8f3;
}

/* Tall enough to recognise a garden on, short enough to leave the buttons visible. */
.sp-map-canvas {
    width: 100%;
    height: min(56vh, 460px);
    background: #e5e3df;
}

/*
 * Where a run's condition question(s) sit while it is being measured — moved in from
 * the row, moved back out on close (2026-08-18). Empty and invisible for a run with
 * nothing to ask (a lawn when only lawn care was picked), since .sp-run-details carries
 * no padding of its own — only its own visible content ever takes up room here.
 */
.sp-map-fields:not(:empty) {
    padding: 4px 22px 0;
}

.sp-map-fields .sp-run-details .row { margin: 0 -8px; }
.sp-map-fields .sp-run-details .form-group { padding: 0 8px; margin-bottom: 16px; }
.sp-map-fields .sp-run-details label { display: block; margin-bottom: 6px; font-size: 14px; color: #444; }

.sp-map-tools,
.sp-map-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
}

.sp-map-done[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

.sp-map-undo,
.sp-map-clear,
.sp-map-again {
    padding: 9px 16px;
    font-size: 14px;
    color: #1c1c1c;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 20px;
    cursor: pointer;
}

.sp-map-undo:hover,
.sp-map-clear:hover,
.sp-map-again:hover { border-color: #84f000; }

/* Save sits to the right of the tidying-up buttons, where the eye ends up. */
.sp-map-done { margin-left: auto; }

.sp-map-saved { border-top: 1px solid #ececec; }

.sp-map-saved p {
    margin: 0;
    padding: 16px 22px 0;
    font-size: 16px;
    font-weight: 600;
    color: #3f6212;
}

@media (max-width: 575px) {
    .sp-map-modal { width: 100vw; max-height: 100vh; border-radius: 0; }
    .sp-map-canvas { height: 46vh; }
    .sp-map-done { margin-left: 0; width: 100%; }
}