#shipping-map{
}

.container{
  width:100%;
  max-width:1400px;
  margin:auto;
  padding:20px;
	border: 2px solid var(--purple-1);
	border-radius: var(--soft);
}

.top{
  background:#fff;
  padding:20px;
  border-radius:14px;
  margin-bottom:20px;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

.search{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
	position: relative;
}

.search input{
  flex:1;
  min-width:260px;
  padding:14px;
  border:1px solid #d1d5db;
  border-radius:10px;
  outline:none;
  font-size:16px;
}

.search button{
  border:none;
  background:#6d28d9;
  color:#fff;
  padding:14px 22px;
  border-radius:10px;
  cursor:pointer;
  font-size:16px;
}

.search button:hover{
  background:#5b21b6;
}

#result{
  margin-top:15px;
  padding:14px;
  border-radius:10px;
  display:none;
  line-height:1.6;
  font-size:15px;
}

.success{
  background:#ede9fe;
  color:#5b21b6;
}

.warning{
  background:#fef3c7;
  color:#92400e;
}

.error{
  background:#fee2e2;
  color:#991b1b;
}

#map{
  width:100%;
  height:75vh;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.custom-marker{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#7c3aed;
  border:3px solid #fff;
  box-shadow:0 0 0 4px rgba(124,58,237,.25);
}

.user-marker{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#2563eb;
  border:3px solid #fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.25);
}

.legend{
  background:#fff;
  padding:10px 14px;
  border-radius:10px;
  line-height:1.8;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
}

.legend div{
  display:flex;
  align-items:center;
  gap:8px;
}

.box{
  width:16px;
  height:16px;
  border-radius:4px;
}

.leaflet-interactive:focus {
  outline: none !important;
}

.autocomplete-box {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	max-width: calc(100% - 110px);
	background: #fff;
	border-radius: 10px;
	margin-top: 8px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0,0,0,.15);
	z-index: 1000; 
}

.autocomplete-item{
  padding:12px 14px;
  cursor:pointer;
  border-bottom:1px solid #eee;
  transition:.2s;
}

.autocomplete-item:hover{
  background:#f3f4f6;
}

.autocomplete-item:last-child{
  border-bottom:none;
}