
/* NILA v21.49 Mobile Search Flow Fix */
:root{
  --v49-ink:#071b31;
  --v49-green:#075f3c;
  --v49-teal:#007f78;
  --v49-yellow:#ffc400;
  --v49-line:rgba(7,27,49,.12);
  --v49-muted:#52677f;
}

/* Mobile homepage exact flow:
   Header text -> category/postcode/location CTA -> image -> trust row */
@media(max-width:780px){
  body.page-home .v42-hero,
  body[data-nila-page="index"] .v42-hero{
    padding:22px 0 26px!important;
  }
  body.page-home .v42-hero-inner,
  body[data-nila-page="index"] .v42-hero-inner{
    display:flex!important;
    flex-direction:column!important;
    gap:16px!important;
  }
  body.page-home .v42-hero-copy,
  body[data-nila-page="index"] .v42-hero-copy{
    display:flex!important;
    flex-direction:column!important;
    order:1!important;
  }

  /* CTA panel directly under header copy */
  body.page-home .v42-search-shell,
  body[data-nila-page="index"] .v42-search-shell{
    display:block!important;
    order:2!important;
    margin-top:16px!important;
    padding:12px!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.94)!important;
    border:1px solid rgba(7,27,49,.12)!important;
    box-shadow:0 22px 60px rgba(7,27,49,.14)!important;
  }
  body.page-home .v42-search-shell #heroSearch,
  body[data-nila-page="index"] .v42-search-shell #heroSearch{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  /* Bring back useful category and postcode fields, not blank boxes */
  body.page-home .v42-search-shell .hs-field,
  body[data-nila-page="index"] .v42-search-shell .hs-field{
    display:block!important;
    min-height:auto!important;
    padding:12px!important;
    border-radius:18px!important;
    background:#fff!important;
    border:1px solid rgba(7,27,49,.12)!important;
    box-shadow:none!important;
  }
  body.page-home .v42-search-shell .hs-field label,
  body[data-nila-page="index"] .v42-search-shell .hs-field label{
    display:block!important;
    color:var(--v49-muted)!important;
    font-size:11px!important;
    font-weight:950!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
    margin:0 0 7px!important;
  }
  body.page-home #servicePickerWrap,
  body.page-home .hs-loc-wrap,
  body[data-nila-page="index"] #servicePickerWrap,
  body[data-nila-page="index"] .hs-loc-wrap{
    display:block!important;
    position:relative!important;
    min-height:42px!important;
  }
  body.page-home #serviceInput,
  body.page-home #locInput,
  body[data-nila-page="index"] #serviceInput,
  body[data-nila-page="index"] #locInput{
    display:block!important;
    width:100%!important;
    min-height:42px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:var(--v49-ink)!important;
    font-size:16px!important;
    font-weight:850!important;
    outline:none!important;
    box-shadow:none!important;
  }
  body.page-home #serviceToggle,
  body[data-nila-page="index"] #serviceToggle{
    display:none!important;
  }
  body.page-home #v49MobileCategory,
  body[data-nila-page="index"] #v49MobileCategory{
    display:block!important;
    width:100%!important;
    min-height:42px!important;
    border:0!important;
    background:transparent!important;
    color:var(--v49-ink)!important;
    font-size:16px!important;
    font-weight:850!important;
    outline:none!important;
    appearance:auto!important;
    -webkit-appearance:menulist!important;
  }
  body.page-home #serviceInput.v49-hidden-mobile-input,
  body[data-nila-page="index"] #serviceInput.v49-hidden-mobile-input{
    display:none!important;
  }

  /* Location pin and submit are the primary CTAs */
  body.page-home .v42-location-action,
  body.page-home .v42-search-shell .hs-submit,
  body[data-nila-page="index"] .v42-location-action,
  body[data-nila-page="index"] .v42-search-shell .hs-submit{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:62px!important;
    border-radius:18px!important;
    font-size:18px!important;
    font-weight:950!important;
    text-decoration:none!important;
  }
  body.page-home .v42-location-action,
  body[data-nila-page="index"] .v42-location-action{
    background:var(--v49-yellow)!important;
    color:var(--v49-ink)!important;
    border:0!important;
  }
  body.page-home .v42-search-shell .hs-submit,
  body[data-nila-page="index"] .v42-search-shell .hs-submit{
    background:var(--v49-green)!important;
    color:#fff!important;
    border:0!important;
  }

  /* Image comes after CTA panel */
  body.page-home .v42-hero-visual,
  body[data-nila-page="index"] .v42-hero-visual{
    order:2!important;
    width:100%!important;
    transform:none!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.page-home .v42-hero-visual img,
  body[data-nila-page="index"] .v42-hero-visual img{
    aspect-ratio:1.62/1!important;
    border-radius:22px!important;
    box-shadow:0 22px 60px rgba(7,27,49,.14)!important;
  }

  /* Trust row moves under the image */
  body.page-home .v42-trust-row,
  body[data-nila-page="index"] .v42-trust-row{
    order:3!important;
    margin-top:0!important;
    width:100%!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.82)!important;
    border:1px solid rgba(7,27,49,.08)!important;
    padding:12px!important;
    box-shadow:0 14px 40px rgba(7,27,49,.06)!important;
  }

  /* The hero copy should only contain text + CTA, so trust row is moved by JS after image. */
  body.page-home .v42-hero-inner > .v42-trust-row,
  body[data-nila-page="index"] .v42-hero-inner > .v42-trust-row{
    display:flex!important;
  }
}
