/* ═══════════════════════════════════════════════════════════════
   4D RESTORATION SERVICE AREA WIDGET STYLES
   Add this to Appearance > Customize > Additional CSS
   ═══════════════════════════════════════════════════════════════ */

/* Widget Variables */
.sa-wrapper {
  --sa-blue: #4f62ad;
  --sa-gold: #967f3c;
  --sa-gray: #4b445c;
  --sa-road: #6351a2;
  --sa-blueT: #4f62ad66;
  --sa-goldT: #967f3c66;
}

.sa-wrapper {
  max-width: 960px;
  margin: 3rem auto 5rem;
  padding: 0 1rem;
  text-align: center;
}
@media(min-width:768px) {
  .sa-wrapper { margin: 4.5rem auto 7rem; }
}

.sa-wrapper h2 {
  font-size: 2.05rem;
  margin-bottom: 1.15rem;
  color: var(--sa-blue);
}

.sa-wrapper .lead {
  font-size: 1.06rem;
  margin: 0 auto 2.4rem;
  max-width: 720px;
  line-height: 1.6;
  text-align: center;
}

/* Lookup UI */
.sa-wrapper .address-ui {
  max-width: 600px;
  margin: 0 auto 2.6rem;
  display: grid;
  gap: 1.1rem;
}

.sa-wrapper #address-input {
  padding: 1rem 1.15rem;
  border: 4px solid var(--sa-goldT);
  border-radius: 32px;
  font-size: 1rem;
  transition: border-color .25s, box-shadow .25s;
}
.sa-wrapper #address-input:focus {
  outline: none;
  border-color: var(--sa-gold);
  box-shadow: 0 0 0 4px #967f3c55;
}

.sa-wrapper #address-submit {
  padding: 1.05rem 1.4rem;
  font-size: 1rem;
  border: 4px solid var(--sa-blue);
  border-radius: 32px;
  cursor: pointer;
  background: var(--sa-blue);
  color: #fff;
  transition: background .25s, transform .25s;
}
.sa-wrapper #address-submit:hover {
  background: #3d4e89;
  border-color: #3d4e89;
  transform: translateY(-2px);
}

/* Map Container */
.sa-wrapper .map-wrap {
  position: relative;
  border: 4px solid var(--sa-blue);
  border-radius: 28px;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
  overflow: hidden;
}
.sa-wrapper #map {
  width: 100%;
  height: 440px;
  position: relative;
  z-index: 2;
}
@media(min-width:768px) {
  .sa-wrapper #map { height: 640px; }
}
.sa-wrapper #overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(45deg, var(--sa-blueT), var(--sa-goldT));
  opacity: 0.15;
  z-index: 1;
}

/* Feedback Banner */
.sa-wrapper #feedback {
  margin-top: 1.6rem;
  font-size: 1rem;
  line-height: 1.5;
}
.sa-wrapper .feedback {
  padding: 1rem 1.3rem;
  border-radius: 28px;
  color: #fff;
}
.sa-wrapper .positive { background: var(--sa-blue); }
.sa-wrapper .negative { background: var(--sa-gold); }
.sa-wrapper .call-link {
  color: #fff;
  text-decoration: underline;
}

/* InfoWindow Styling */
.sa-wrapper .info-box {
  background: var(--sa-blue);
  color: #fff;
  border: 4px solid var(--sa-gold);
  border-radius: 24px;
  padding: 1rem 1.2rem;
  max-width: 260px;
  line-height: 1.45;
  text-align: left;
}
.sa-wrapper .info-box h3 {
  font-size: 1rem;
  margin: 0 0 .4rem;
  color: var(--sa-gold);
}
.sa-wrapper .info-box p {
  margin: .35rem 0;
  font-size: .9rem;
}
.sa-wrapper .info-box a {
  display: block;
  color: #ffc;
  text-decoration: none;
  margin-top: .5rem;
}
.sa-wrapper .info-box a:hover {
  text-decoration: underline;
}

/* Google Maps InfoWindow Chrome Override */
.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-d,
.gm-style .gm-style-iw-t {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.gm-style .gm-ui-hover-effect {
  top: 8px !important;
  right: 8px !important;
}
.gm-style .gm-ui-hover-effect span {
  background: #4f62ad !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
}
.gm-style .gm-ui-hover-effect:hover span {
  background: #967f3c !important;
}
.gm-style .gm-ui-hover-effect img {
  filter: invert(1);
  width: 12px !important;
  height: 12px !important;
  margin: 8px;
}