/* ---------- Basic layout ---------- */
:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --muted: #777;
  --border: #e9e9e9;
  --accent: #2b7cff;
}

* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family: Inter, Arial, sans-serif; background:var(--bg); color:#222; }

header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 18px;
  border-bottom:1px solid var(--border);
  background: #fafafa;
}
header h1 { margin:0; font-size:16px; font-weight:600; }
header .controls { display:flex; gap:8px; align-items:center; }
header button { padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:white; cursor:pointer; }
header label.small { font-size:13px; color:var(--muted); margin-left:6px; }

/* Main responsive split */
#container {
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:12px;
  height: calc(100vh - 92px);
  padding:12px;
}


@media (max-width:1000px) {
  #container { grid-template-columns: 1fr 1fr; 
    height: calc(100vh - 92px); 
  }
}



@media (max-width:600px) {
  #container { grid-template-columns: 1fr; grid-template-rows: 50vh 1fr;
    height: calc(100vh - 92px); 
  }
}

/* Video area */
#videoContainer { position:relative; background:#000; border-radius:10px; overflow:hidden; }
#videoContainer video { width:100%; height:100%; object-fit:cover; display:block; background:#000; }
#hint {
  position:absolute;
  top:10%;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.5);
  color:#fff;
  padding:8px 14px;
  border-radius:8px;
  z-index:10;
  font-size:14px;
}

/* Side / map */
#side { display:flex; flex-direction:column; gap:12px;  }
.panel { background:var(--panel); border-radius:10px; padding:12px; border:1px solid var(--border); height: 100%; display:flex; flex-direction:column; }
.search-row { display:flex; gap:8px; margin-bottom:8px; }
.search-row input { flex:1; padding:8px 10px; border-radius:8px; border:1px solid var(--border); }
.search-row select { padding:8px; border-radius:8px; border:1px solid var(--border); }

/* AQI widget */
.aqi-widget { width:100%; background:#fff; border-radius:10px; padding:12px; box-shadow:0 6px 18px rgba(0,0,0,0.03); border:1px solid var(--border); margin-bottom:10px; }
.aqi-widget h3 { margin:0 0 8px 0; font-size:15px; }
.aqi-row { display:flex; justify-content:space-between; margin-bottom:6px; }
.aqi-label { color:var(--muted); font-size:13px; }
.aqi-value { font-weight:700; font-size:14px; }
.aqi-status { margin-top:8px; padding:8px; text-align:center; border-radius:8px; font-weight:600; background:#f6f6f6; border:1px solid var(--border); }

/* Map container */
.map { flex:1; border-radius:8px; overflow:hidden; border:1px solid var(--border); height: 100%; width: 100%;}

/* Legend style for leaflet */
.leaflet-control .legend { background: rgba(255,255,255,0.95); padding:8px 10px; border-radius:8px; font-size:13px; color:#222; box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.legend i { width:16px; height:16px; float:left; margin-right:8px; border-radius:3px; opacity:0.9; }

.legend {
  background: rgba(255,255,255,0.9);
  padding: 10px 14px;
  border-radius: 8px;
  line-height: 22px;
  font-size: 14px;
  color: #000;
}
.legend i {
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 10px;
  opacity: 0.8;
  border-radius: 4px;
}
.legend h4 {
  margin: 0 0 6px 0;
  padding: 0;
  font-size: 16px;
}

/* footer */
footer { padding:8px 14px; font-size:12px; color:var(--muted); border-top:1px solid var(--border); }

/* small responsive tweaks */
@media (max-width:600px) {
  header h1 { font-size:14px; }
  #hint { font-size:13px; padding:6px 10px; }
  #side { display:flex; flex-direction:row; gap:12px;  height: calc((100vh/2) - 92px);}
  .panel { background:var(--panel); border-radius:10px; padding:12px; border:1px solid var(--border); height: 100%; width: 100%; display:flex; flex-direction:column; }
}

.circle-marker {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-weight: bold;
  font-size: 12px;
  border: 2px solid #000;
}