/* ====== BEGIN Service AREA Map CSS ====== */
  .map-container {
    position: relative;
    width: 100%;
    height: 600px;
    margin: 20px auto;
  }
  #map {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  /* Centered control version (when injected into map controls) */
  #searchBox, #search-box, .map-search-control {
    width: 100%;
    max-width: 420px;
  }
  .map-search-control {
    background:#ffffff;
    padding:8px 10px;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
    display:flex;
    gap:8px;
    align-items:center;
  }
  #searchBox input, #search-box input, .map-search-control input {
    width:100%;
    padding:8px 10px;
    font-size:15px;
    border:1px solid #cfcfcf;
    border-radius:4px;
    box-shadow:0 1px 2px rgba(0,0,0,0.08) inset;
  }

  /* Ensure Google Places autocomplete dropdown sits above fullscreen map */
  .pac-container {
    z-index: 2147483647 !important; /* ensure always on top, even in fullscreen */
    font-family: Baskerville, serif;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  }
  .pac-container .pac-item { font-size: 14px; }
  .pac-container .pac-item-query { font-weight: 600; }

  /* Fallback custom predictions (if native pac dropdown fails in fullscreen) */
  #custom-predictions {
    position:absolute;
    left:0; top:100%;
    width:100%;
    background:#fff;
    border:1px solid #cfcfcf;
    border-top:none;
    border-radius:0 0 6px 6px;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
    z-index:2147483647;
    max-height:260px;
    overflow-y:auto;
    font-family:Baskerville, serif;
    display:none;
  }
  #custom-predictions .pred-item {
    padding:8px 10px;
    cursor:pointer;
    font-size:14px;
    line-height:1.2;
  }
  #custom-predictions .pred-item:hover, #custom-predictions .pred-item.active {
    background:#016B75;
    color:#CDAF6F;
  }

  /* Mobile refinement: avoid full edge-to-edge width for the search control */
  @media (max-width: 600px) {
    .map-search-control {
      width:88% !important;       /* leave comfortable side gutters */
      max-width:88% !important;
      padding:6px 8px;             /* slightly tighter padding on small screens */
    }
    .map-search-control input {
      font-size:14px;
      padding:6px 8px;
    }
  }
  /* hide visually but keep accessible */
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    border: 0;
  }
  
  @media (max-width: 600px) {
    /* push the fullscreen control down under the search box on mobile */
    .gm-fullscreen-control {
      top: 60px !important;
    }
  }
  /* ====== END Service AREA Map CSS ====== */