:root{
  --headline:#304862;
  --hover:#de4640;
  --text:#4d647e;
  --muted:#6b869c;

  --card-bg:#f7f9fb;
  --border:#e0e6ec;
  --shadow:0 10px 26px rgba(48,72,98,.18);
}

.brand-inner{
  width:min(1240px,95%);
  margin:0 auto;
}

.brands-nearest-section{
  padding: 1rem 0 1.25rem;
}

.brands-nearest-title{
  margin: 0 0 .85rem;
  text-align: center;
  color: var(--headline);
  font-weight: 700;
  letter-spacing: .2px;
}

.nearest-card{
  width: 100%;
  margin: 0 auto 1rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding: 1rem;
}

.nearest-card,
.nearest-card *{
  box-sizing: border-box;
  font: inherit;
}

.nearest-form{
  display:grid;
  grid-template-columns: 2fr 1.1fr .85fr auto;
  gap: 1rem;
  align-items: end;
}

.nearest-field{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  min-width: 0;
}

.nearest-field--sm{ min-width: 140px; }

.nearest-label{
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .3px;
}

.nearest-input,
.nearest-select{
  height: 46px;
  width: 100%;
  padding: .7rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--headline);
  font-weight: 800;
  letter-spacing: .2px;
  outline: none;
  transition: all .2s ease;
}

.nearest-input::placeholder{
  color: rgba(77,100,126,.70);
  font-weight: 400;
}

.nearest-select{
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg fill='%234d647e' height='10' width='10' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 12px;
  padding-right: 2.4rem;
}

.nearest-input:hover,
.nearest-select:hover{
  border-color: rgba(48,72,98,.50);
}

.nearest-input:focus,
.nearest-select:focus{
  border-color: var(--headline);
  box-shadow: none;
}

.nearest-actions{
  display:flex;
  align-items:end;
}

.nearest-btn{
  height: 46px;
  padding: 0 1.2rem;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0);
  background: var(--hover);
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 10px 22px rgba(222,70,64,.22);
  white-space: nowrap;
}

.nearest-btn:hover{
  filter: brightness(.98);
  box-shadow: 0 14px 28px rgba(222,70,64,.26);
}

.nearest-btn:active{
  transform: translateY(1px);
}

.map-container{
  width: min(1240px, 95%);
  height: 600px;
  margin: 1rem auto 1.25rem;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: #fff;
}

@media (max-width: 768px){
  .map-container{ height: 50vh; }
}

.brand-label,
.exotic-brand-label{
  background-color: var(--headline);
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.2;
  position: relative;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

.main-brand-label{
  background-color: var(--hover);
}

.precise-label{ position: relative; }

.exotic-brand-label::after,
.precise-label::after{
  content:'';
  position:absolute;
  bottom:-6px;
  left:50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: var(--headline) transparent transparent transparent;
}

.main-brand-label::after{
  border-color: var(--hover) transparent transparent transparent;
}

/* Map label link styling - remove underlines */
.brand-label a,
.exotic-brand-label a{
  text-decoration: none !important;
}

.brand-label a:hover,
.exotic-brand-label a:hover{
  text-decoration: none !important;
}

/* Map label city/location styling - lighter weight, muted appearance */
.brand-label a span:last-of-type,
.exotic-brand-label a span:last-of-type{
  font-weight: 400 !important;
  opacity: 0.85;
}

@media (max-width: 1024px){
  .nearest-form{
    grid-template-columns: 1.6fr 1fr .9fr auto;
  }
}

@media (max-width: 820px){
  .nearest-form{
    grid-template-columns: 1fr 1fr;
  }
  .nearest-actions{
    grid-column: 1 / -1;
  }
  .nearest-btn{
    width: 100%;
  }
}

@media (max-width: 520px){
  .nearest-form{
    grid-template-columns: 1fr;
  }
  .nearest-field--sm{
    min-width: 0;
  }
}