/* v13: Map left, light sidebar RIGHT */

.map-layout{
  width: 90vw;
  height: 90vh;
  margin: 0 auto;
  display: flex;
  gap: 14px;
  align-items: stretch;
}

@media(min-width: 1200px){.map-layout{width:70vw}}
@media(min-width: 1800px){.map-layout{width:70vw}}

@media(max-width: 900px){
  .map-layout{
    height: auto;
    flex-direction: column;
  }
}

/* Map wrapper (left) */
.map-wrapper{
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  min-height: 360px;
}

@media(max-width: 900px){
  .map-wrapper{
    height: 70vh;
  }
}

#north-scottsdale-map{
  width: 100%;
  height: 100%;
}

/* Sidebar (right) - light theme */
.sidebar{
  width: 340px;
  max-width: 340px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.10);
}

@media(max-width: 900px){
  .sidebar{
    width: 100%;
    max-width: none;
  }
}

.sidebar-list{
  padding: 12px;
  overflow: auto;
  flex: 1;
}

@media(min-width: 901px){
  .sidebar-list{
    max-height: 90vh;
  }
}

/* Card buttons */
.card{
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.10);
  text-align: left;
  cursor: pointer;
  padding: 12px 12px;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  display: block;
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.card + .card{ margin-top: 10px; }

.card:hover{
  transform: translateY(-1px);
  background: rgba(15, 23, 42, 0.02);
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}

.card.is-active{
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow: 0 12px 28px rgba(59, 130, 246, 0.18);
  background: rgba(59, 130, 246, 0.06);
}

.card-name{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.15;
}

/* Controls overlay */
.map-controls{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:10;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.control-toggle{
  pointer-events:auto;
  position:absolute;
  top:14px;
  left:14px;
  display:inline-flex;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.16);
  border: 1px solid rgba(0,0,0,0.10);
}

.control-toggle button{
  appearance:none;
  border:0;
  background:transparent;
  padding:10px 14px;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  color:#0f172a;
}

.control-toggle button + button{
  border-left:1px solid rgba(0,0,0,0.10);
}

.control-toggle button.is-active{
  background:#f3f4f6;
}

.control-zoom{
  pointer-events:auto;
  position:absolute;
  right:14px;
  top:50%;
  transform: translateY(-50%);
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.16);
  border: 1px solid rgba(0,0,0,0.10);
  display:flex;
  flex-direction:column;
}

.control-zoom button{
  appearance:none;
  border:0;
  background:transparent;
  padding:10px 12px;
  font-size:24px;
  font-weight:900;
  cursor:pointer;
  line-height:1;
}

.control-zoom button + button{
  border-top:1px solid rgba(0,0,0,0.10);
}

/* Label bubbles */
.gm-style .area-marker-label{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: #0f172a;
  white-space: nowrap;
}
@media(max-width: 599px){
  .gm-style .area-marker-label{font-size: 11px; padding: 5px 8px;}
}