/* ==================== MAP VIEW ==================== */
.map-view{
  position:relative;
  flex:1;
}

#map{
  width:100%;
  height:100%;
}

/* Map Back Button */
.map-back-btn{
  position:absolute;
  top:20px;
  left:20px;
  z-index:100;
  padding:12px 20px;
  border-radius:0;
  background:var(--card-bg);
  backdrop-filter:blur(20px);
  border:1px solid var(--border);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:all .3s;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  box-shadow:var(--shadow);
}

.map-back-btn:hover{
  background:rgba(26,14,8,1);
  transform:translateY(-2px);
}

/* ==================== MAP POPUP STYLING ==================== */
.mapboxgl-popup-content{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:0;
  padding:0;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}

.mapboxgl-popup-close-button{
  color:#fff;
  font-size:20px;
  padding:8px;
  opacity:.7;
}

.mapboxgl-popup-close-button:hover{
  background:transparent;
  opacity:1;
}

.popup-header{
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.popup-name{
  margin:0 0 4px;
  font-size:16px;
  font-weight:800;
  color:#fff;
}

.popup-city{
  margin:0;
  font-size:13px;
  color:rgba(255,255,255,.6);
}

.popup-body{
  padding:12px 16px;
}

.popup-detail{
  margin-bottom:8px;
  font-size:13px;
  color:rgba(255,255,255,.8);
}

.popup-detail:last-child{
  margin-bottom:0;
}

.popup-action{
  padding:12px 16px;
  border-top:1px solid rgba(255,255,255,.1);
}

.popup-view-btn{
  width:100%;
  padding:10px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:0;
  color:#fff;
  font-weight:700;
  font-size:12px;
  cursor:pointer;
  transition:all .3s;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.popup-view-btn:hover{
  background:rgba(255,255,255,.15);
}

/* ==================== MAP CLUSTER CIRCLES ==================== */
/* Clusters will be styled via JavaScript paint properties */
/* But we can add some CSS for hover states */

.mapboxgl-canvas-container.mapboxgl-interactive{
  cursor:default;
}

/* ==================== MAP MARKERS ==================== */
/* Custom marker styling if needed */
.custom-marker{
  width:24px;
  height:24px;
  background:#fff;
  border:3px solid #1A0E08;
  cursor:pointer;
  transition:transform .3s;
}

.custom-marker:hover{
  transform:scale(1.2);
}

/* ==================== MAPBOX OVERRIDES ==================== */
.mapboxgl-ctrl-attrib{
  background:rgba(26,14,8,.8) !important;
  color:#fff !important;
}

.mapboxgl-ctrl-attrib a{
  color:#fff !important;
}

.mapboxgl-ctrl-logo{
  opacity:.5;
}

/* Navigation Controls */
.mapboxgl-ctrl-group{
  background:var(--card-bg) !important;
  border-radius:0 !important;
  box-shadow:var(--shadow) !important;
}

.mapboxgl-ctrl-group button{
  background:transparent !important;
  border-color:var(--border) !important;
}

.mapboxgl-ctrl-group button:hover{
  background:rgba(255,255,255,.1) !important;
}

.mapboxgl-ctrl-icon{
  filter:invert(1);
}

/* Compass */
.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E") !important;
}

/* Mobile Map Adjustments */
@media(max-width:768px){
  .map-back-btn{
    top:10px;
    left:10px;
    padding:8px 16px;
    font-size:11px;
  }
  
  .mapboxgl-ctrl-top-right{
    top:10px;
    right:10px;
  }
  
  .mapboxgl-popup-content{
    max-width:280px;
  }
}