:root{
  --bg-main:#f8f9fa;
  --bg-white:#ffffff;
  --text-main:#2d3436;
  --text-muted:#636e72;
  --border-light:#dfe6e9;

  --accent:#e63946;

  --shadow-card:0 10px 40px -10px rgba(0,0,0,0.10);
  --shadow-hover:0 20px 50px -10px rgba(0,0,0,0.15);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'Montserrat',sans-serif;
  background:var(--bg-main);
  color:var(--text-main);
  overflow-x:hidden;
}

/* Core-style gradient heading */
.gradient-heading{
  font-family:"Caveat", cursive;
  background: linear-gradient(120deg,#0a2540,#1f6feb,#38bdf8,#0a2540);
  background-size:300% 300%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 6px 18px rgba(56,189,248,0.25));
  animation: heroGradient 7s ease-in-out infinite;
}

@keyframes heroGradient{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* HERO */
.dest-hero-section{
  padding:60px 5%;
  background:var(--bg-white);
  border-bottom:1px solid var(--border-light);
}

.dest-hero-container{
  max-width:1200px;
  margin:0 auto;
}

.dest-hero-heading{
  font-size:clamp(2.2rem,5vw,3.8rem);
  margin:20px 0 40px;
  line-height:1.1;
  text-align:center;
}

.dest-hero-content{
  display:flex;
  align-items:center;
  gap:50px;
}

.dest-hero-text{ flex:1; }

.dest-hero-text p{
  font-size:1.1rem;
  line-height:1.8;
  color:var(--text-muted);
}

.dest-hero-image{
  flex:1;
  height:400px;
  overflow:hidden;
  border-radius:20px;
  box-shadow:var(--shadow-card);
}

.dest-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}

.dest-hero-image:hover img{ transform:scale(1.03); }

/* MAP */
.nepal-map{
  position:relative;
  padding:40px 2%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:linear-gradient(180deg, rgba(15,61,62,.04), rgba(15,61,62,.01));
}

.nepal-map-heading{
  font-size:clamp(2rem, 3vw, 3rem);
  letter-spacing:1px;
  margin:0 0 18px;
  text-align:center;
}

.province-controls{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin:0 auto 30px;
  max-width:700px;
}

.province-controls button{
  appearance:none;
  border:1px solid rgba(15,61,62,.2);
  background:rgba(255,255,255,.95);
  color:var(--text-main);
  padding:12px 22px;
  border-radius:30px;
  cursor:pointer;
  font-size:.9rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.8px;
  white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.province-controls button:hover{
  background:var(--text-main);
  color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.province-controls button.active{
  background:var(--text-main);
  color:var(--accent);
  border-color:var(--text-main);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.map-stage-container{
  width:100%;
  max-width:1400px;
  height:700px;
  background:var(--bg-white);
  border-radius:30px;
  box-shadow:var(--shadow-card);
  overflow:hidden;
}

#mapContainer{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image:radial-gradient(#e0e0e0 1px, transparent 1px);
  background-size:20px 20px;
}

svg .district{
  fill:#e0e0e0;
  stroke:#fff;
  stroke-width:.5;
  transition:fill .25s ease, filter .25s ease, transform .25s ease, opacity .25s ease;
  cursor:pointer;
}

svg .district.active{
  fill:var(--accent);
  opacity:1;
  filter:drop-shadow(0 5px 15px rgba(0,0,0,.2));
}

svg .district:hover{
  fill:#2d3436;
  transform:translateY(-2px);
}

/* DETAIL */
.province-detail-section{
  width:100%;
  padding:100px 5%;
  background:var(--bg-white);
  border-top:1px solid #eee;
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.detail-container{
  max-width:1200px;
  width:100%;
  display:flex;
  gap:60px;
  align-items:center;
}

.detail-image-wrapper{
  flex:1;
  height:500px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.15);
}

.detail-image-wrapper img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1);
  will-change:transform;
}

.detail-content{
  flex:1;
}

.detail-subtitle{
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--accent);
  font-weight:800;
  display:block;
  margin:0 0 10px;
}

.detail-heading{
  font-size:3rem;
  line-height:1.1;
  margin:0 0 18px;
  color:var(--text-main);
}

.detail-text{
  font-size:1.1rem;
  line-height:1.8;
  color:var(--text-muted);
  margin:0 0 26px;
}

.detail-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:0 0 22px;
}

.stat-box{
  background:var(--bg-main);
  padding:15px;
  border-radius:12px;
  border-left:3px solid var(--accent);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.stat-label{
  font-size:.75rem;
  text-transform:uppercase;
  color:#888;
  margin:0 0 6px;
  font-weight:800;
}

.stat-box strong{
  font-size:1.08rem;
  color:var(--text-main);
}

.feature-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.chip{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
}

.chip-muted{ opacity:.65; font-weight:700; }

.detail-btn-group{
  display:flex;
  gap:14px;
  margin-top:10px;
}

.explore-btn{
  padding:15px 38px;
  background:var(--text-main);
  color:#fff;
  border:none;
  font-size:1rem;
  cursor:pointer;
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
  border-radius:999px;
  font-weight:800;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.explore-btn:hover{
  background:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.explore-btn.outline{
  background:transparent;
  border:2px solid var(--accent);
  color:var(--accent);
}

.explore-btn.outline:hover{
  background:var(--accent);
  color:#fff;
}

.province-districts-grid{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(0,0,0,.08);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.district-btn{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}

.district-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
}

.district-btn-name{
  font-size:13px;
  font-weight:800;
  color:var(--text-main);
}

.district-loading,
.no-districts{
  font-size:13px;
  opacity:.7;
  padding:8px 0;
}

/* RESPONSIVE */
@media (max-width: 900px){
  .dest-hero-content{ flex-direction:column-reverse; gap:30px; }
  .dest-hero-image{ height:250px; width:100%; }
  .map-stage-container{ height:420px; border-radius:20px; }
  .detail-container{ flex-direction:column; gap:40px; }
  .detail-image-wrapper{ width:100%; height:320px; }
  .detail-heading{ font-size:2.2rem; }
  .detail-stats{ grid-template-columns:1fr; }
}

@media (max-width: 600px){
  .nepal-map{ padding:60px 20px; }
  .province-controls{ max-width:520px; width:fit-content; }
  .province-controls button{
    min-width:240px;
    padding:14px 26px;
    border-radius:18px;
  }
}

@media (max-width: 360px){
  .province-controls button{ min-width:200px; }
}