/* maps_climate.css */
:root{
  --bg:#ffffff;
  --ink:#1d2430;
  --muted:#6e7b8f;
  --card:#f7f9fc;
  --border:#e5edf7;
  --accent:#1e88e5;
  --accent-2:#90caf9;
}



html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial}
.wrap{max-width:980px;margin:28px auto;padding:0 16px}
h1{font-size:24px;margin:12px 0 16px}

.card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 6px 20px rgba(28,70,142,.06);padding:18px;margin:12px 0}

.row{display:flex;flex-wrap:wrap;gap:12px}
.col{flex:1 1 240px;min-width:220px}

label{display:block;font-size:13px;color:var(--muted);margin:0 0 6px 2px}

input[type="text"],select{width:100%;margin:-12px;  padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--ink);outline:0}
input[type="text"]:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,136,229,.15)}

.seg{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.seg input[type=radio]{display:none}
.seg label{user-select:none;padding:8px 12px;border:1px solid var(--border);border-radius:999px;cursor:pointer;color:var(--ink);background:#fff}
.seg input:checked+label{border-color:var(--accent);background:var(--accent-2);color:#0a2a53}

button{appearance:none;background:var(--accent);color:#fff;border:0;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:600}
button:hover{filter:brightness(.95)}
button[aria-busy="true"]{opacity:.75;cursor:progress}

.hint{color:var(--muted);font-size:12px;margin-top:8px}
.notfound{padding:12px 14px;border:1px dashed var(--border);border-radius:10px;background:#fff}

.mc-figure{margin:0}
.mc-image{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--border);background:#fff;cursor:zoom-in}
.mc-image-link{display:inline-block}

/* Lightbox */
.mc-lightbox{display:none;position:fixed;inset:0;z-index:1000}
.mc-lb-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.mc-lb-content{position:absolute;inset:5% 3%;display:flex;align-items:center;justify-content:center}
.mc-lb-content img#mc-lb-img{max-width:90vw;max-height:80vh;border-radius:12px;border:1px solid var(--border);background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.3);position:relative;z-index:1}

.mc-lb-close,
.mc-lb-prev,
.mc-lb-next{
  position:absolute;
  background:rgba(205, 205, 208, 0.95);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.4rem .7rem;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  user-select:none
}

/* Navigation buttons */
.mc-lb-nav{
  width:48px;height:48px;
  display:grid;place-items:center;
  box-shadow:0 8px 20px rgba(28,70,142,.18);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  z-index:5;
}
.mc-lb-prev{ left:12px; top:50%; transform:translateY(-50%); }
.mc-lb-next{ right:12px; top:50%; transform:translateY(-50%); }
.mc-lb-close{ top:10px; right:12px; z-index:6; }

.mc-lb-nav:hover{ transform:translateY(-50%) scale(1.04); box-shadow:0 10px 28px rgba(28,70,142,.24); }
.mc-lb-nav:active{ transform:translateY(-50%) scale(0.98); }

.mc-lb-nav svg{
  width:22px;height:22px;
  stroke: var(--accent);
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Download button */
.mc-lb-dl{
  position:absolute; top:10px; right:60px; z-index:6;
  display:grid; place-items:center; width:42px; height:42px;
  background:rgba(255,255,255,.95);
  border:1px solid var(--border); border-radius:999px;
  box-shadow:0 8px 20px rgba(28,70,142,.18);
  text-decoration:none;
}
.mc-lb-dl:hover{ box-shadow:0 10px 28px rgba(28,70,142,.24); }
.mc-lb-dl svg{
  width:20px;height:20px;
  stroke: var(--accent);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mc-lb-caption{
  position:absolute;bottom:10px;left:0;right:0;text-align:center;color:#0a2a53;
  background:rgba(255,255,255,.9);border:1px solid var(--border);display:inline-block;margin:0 auto;
  padding:.35rem .6rem;border-radius:999px;width:fit-content
}

/* Mobile tweaks */
@media (max-width:640px){
  .mc-lb-nav{ width:56px;height:56px; }
  .mc-lb-nav svg{ width:24px;height:24px; }
  .mc-lb-dl{ width:46px;height:46px; right:62px; }
  .mc-lb-dl svg{ width:22px;height:22px; }
}
:root{ --seg-radius: 8px; }
.seg label{ border-radius: var(--seg-radius); }