/* Mobile-only full-width quotation inputs and actions. No desktop layout changes. */
@media screen and (max-width: 767px) {
  /* Both source templates and CMS-saved page markup use this quotation container. */
  [data-quote-fields], #quote[data-quote-fields] { min-width: 0 !important; box-sizing: border-box !important; }
  [data-quote-fields] :is(input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), select, textarea) {
    display: block !important; width: 100% !important; max-width: 100% !important;
    min-width: 0 !important; box-sizing: border-box !important;
  }
  /* All two- and three-column input groups become single columns. */
  [data-quote-fields] div[style*="grid-template-columns"]:has(> :is(input,select,textarea)) {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important; width: 100% !important;
  }
  [data-quote-fields] div[style*="grid-template-columns"]:has(> :is(input,select,textarea)) > * {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    grid-column: 1 / -1 !important;
  }
  /* Quote and WhatsApp actions should each span the whole form on mobile. */
  [data-quote-fields] div:has(> [data-action="send-quote"]),
  [data-quote-fields] div:has(> [data-action="send-turnover-quote"]) {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    gap: 12px !important; width: 100% !important;
  }
  [data-quote-fields] :is(button[data-action="send-quote"], button[data-action="send-turnover-quote"], a.helprite-whatsapp),
  [data-quote-fields] div:has(> [data-action="send-quote"]) > :is(a,button) {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    flex: 0 0 auto !important; box-sizing: border-box !important;
    white-space: normal !important; text-align: center !important;
    font-size: 14px !important;
  }
  /* Location search and geolocation button need a single-column mobile layout. */
  [data-quote-fields] div:has(> [data-action="use-location"]) {
    flex-direction: column !important; align-items: stretch !important; width: 100% !important;
  }
  [data-quote-fields] [data-action="use-location"] { width:100% !important; text-align:center !important; justify-content:center !important; }
  /* Existing full-width controls must not force horizontal page scrolling. */
  [data-quote-fields] .helprite-quote-map, [data-quote-fields] .leaflet-container {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
  }
}

/* Fix mobile location input's flex-basis creating a blank 290px row above the button. */
@media (max-width:767px){
 [data-quote-fields] .helprite-location-controls {
   display:flex!important;flex-direction:column!important;align-items:stretch!important;
   flex-wrap:nowrap!important;gap:10px!important;height:auto!important;min-height:0!important;
 }
 [data-quote-fields] .helprite-location-controls>.helprite-location-field {
   flex:0 0 auto!important;flex-basis:auto!important;display:block!important;
   width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;
 }
 [data-quote-fields] .helprite-location-controls>.helprite-location-field>input {
   display:block!important;width:100%!important;height:auto!important;min-height:48px!important;
   max-height:72px!important;box-sizing:border-box!important;
 }
 [data-quote-fields] .helprite-location-controls>[data-action="use-location"] {
   flex:0 0 auto!important;width:100%!important;min-height:46px!important;
   margin:0!important;align-self:stretch!important;
 }
 [data-quote-fields] .helprite-address-suggestions {max-height:210px!important;}
 [data-quote-fields] .helprite-interactive-map {margin-top:8px!important;}
 [data-quote-fields] .helprite-pin-row {flex-wrap:wrap!important;}
 [data-quote-fields] .helprite-pin-row span {flex:1 1 160px!important;}
}