/* Coverage page — post-office search + map. Brand colours: #ea2325 / #212121. */
.coverage-block {
  max-width: 860px;
  margin: 0 auto;
  padding: 64px 16px 80px;
  text-align: center;
}
.coverage-heading {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  color: #212121;
  margin: 0 0 12px;
}
.coverage-heading .highlight {
  color: #ea2325;
}
.coverage-sub {
  font-size: 16px;
  line-height: 28px;
  color: #616161;
  margin: 0 0 32px;
}

.coverage-search {
  position: relative;
  z-index: 1000;
  max-width: 520px;
  margin: 0 auto;
}
.coverage-search > input {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  font-size: 16px;
  color: #212121;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.coverage-search > input:focus {
  border-color: #ea2325;
}

.coverage-suggestions {
  position: absolute;
  z-index: 1001;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  text-align: left;
}
.coverage-suggestions li {
  margin: 0;
}
.coverage-suggestions button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  color: #212121;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.coverage-suggestions .sugg-name {
  font-size: 15px;
  font-weight: 600;
  color: #212121;
}
.coverage-suggestions .sugg-meta {
  font-size: 13px;
  color: #757575;
}
.coverage-suggestions button:hover,
.coverage-suggestions button:hover .sugg-name {
  background: #ea2325;
  color: #fff;
}
.coverage-suggestions button:hover .sugg-meta {
  color: rgba(255, 255, 255, 0.85);
}

/* Selected post-office details card. */
.coverage-selected-card {
  position: relative;
  max-width: 520px;
  margin: 20px auto 0;
  padding: 22px 24px;
  text-align: left;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
.coverage-office-name {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #212121;
  margin: 0 96px 14px 0;
}
.coverage-office-details {
  list-style: none;
  margin: 0;
  padding: 0;
}
.coverage-office-details li {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  font-size: 15px;
  line-height: 1.5;
  border-top: 1px solid #f0f0f0;
}
.coverage-office-details li span {
  flex: 0 0 90px;
  color: #9a9a9a;
  font-weight: 600;
}
.coverage-office-details li strong {
  color: #212121;
  font-weight: 500;
}
.coverage-reset {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #212121;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.coverage-reset:hover {
  background: #ea2325;
}

.coverage-map {
  position: relative;
  z-index: 1;
  margin-top: 36px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid #eee;
}
.coverage-map iframe,
.coverage-leaflet,
.coverage-map-loading {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
}
.coverage-map-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: #9a9a9a;
  font-size: 14px;
}

/* Brand-red dot markers (div icons — no external image assets). */
.coverage-pin span {
  display: block;
  width: 100%;
  height: 100%;
  background: #ea2325;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.coverage-pin--selected span {
  background: #b71c1c;
  box-shadow: 0 0 0 4px rgba(234, 35, 37, 0.3), 0 1px 4px rgba(0, 0, 0, 0.4);
}
.coverage-map-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}
.coverage-directions-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 700;
  color: #ea2325;
  background: #fff;
  border: 2px solid #ea2325;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.coverage-directions-btn::before {
  content: "➤";
  font-size: 13px;
  line-height: 1;
}
.coverage-directions-btn:hover,
.coverage-directions-btn:focus {
  background: #ea2325;
  color: #fff;
}
.coverage-map-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #616161;
  text-decoration: none;
}
.coverage-map-link:hover {
  color: #ea2325;
}

@media (max-width: 767px) {
  /* The Globax theme pins .vc-container (the row) to a narrow ~272px centred
     width on phones, which squeezed the whole coverage block (heading, search,
     map) into the middle. Let this page's row use the full width so the content
     fills the screen; .coverage-block's own 16px padding then gives every
     child — including the map — consistent left/right gutters. */
  .page-id-8112 .vc-container {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .coverage-heading {
    font-size: 30px;
  }
  .coverage-block {
    padding: 40px 16px 56px;
  }
  .coverage-map iframe,
  .coverage-leaflet,
  .coverage-map-loading {
    /* Fill most of the viewport on phones so the whole country map is legible. */
    height: 75vh;
    min-height: 480px;
  }
}