:root{
  --bg:#ffffff; --fg:#0b0b0b; --muted:#6a6a6a;
  --border:#e6e6e6; --card:#ffffff;
  --btn-fg:#ffffff; --btn-bg:#111827; --btn-bg-h:#0b1220;
  --btn-br:#e5e7eb; --btn-ghost-fg:#111827; --btn-soft-bg:#f3f4f6;
  --focus:#2563eb;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--fg);
  background:var(--bg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
}
.brand{ font-weight:800; }
.nav a{ color:var(--fg); text-decoration:none; margin-left:16px; }
.nav a:hover{ text-decoration:underline; }

.hero{
  position:relative;
  color:#fff;
  text-align:center;
  padding:6rem 2rem;
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.65)),
    url('/assets/IMG_7553.JPEG') center/cover no-repeat;
}
.hero-inner{ max-width:960px; margin:0 auto; }
.hero h1{
  font-size:2.8rem; margin:0 0 1rem;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.hero p{
  font-size:1.2rem; max-width:650px; margin:0 auto 2rem; opacity:.95;
}
.cta-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:.75rem 1.5rem; border-radius:12px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  font-weight:600; line-height:1.2;
  background:var(--btn-bg); color:var(--btn-fg);
  transition: transform .04s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover{ background:var(--btn-bg-h); transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.12); }
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.btn-ghost{ background:#fff; color:var(--btn-ghost-fg); border-color:var(--btn-br); }
.btn-ghost:hover{ background:#f9fafb; }

.btn-soft{ background:var(--btn-soft-bg); color:#111827; border-color:var(--btn-br); }
.btn-soft:hover{ filter:brightness(.98); }

.btn-bmac{ background:#FFDD00; color:#111; border:none; }
.btn-bmac:hover{ background:#f5c800; transform:translateY(-2px); }

.btn-link{ color:#0a5ca8; text-decoration:none; font-weight:600; }
.btn-link:hover{ text-decoration:underline; }

.btn-icon{
  width:36px; height:36px; padding:0; border-radius:999px;
  display:inline-grid; place-items:center;
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid transparent;
}
.btn-icon svg{ width:18px; height:18px; display:block; fill:currentColor; }
.btn-icon:hover{ background:var(--btn-bg-h); }
.btn-icon:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.features{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  margin:3rem auto; max-width:1000px; padding:0 1rem;
}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:1.5rem; text-align:center;
  box-shadow:0 3px 12px rgba(0,0,0,.08);
}
.footer{ padding:20px; border-top:1px solid var(--border); text-align:center; }

.ad-wrap{ max-width:1024px; margin:18px auto 0; padding:0 20px; }
.ad-box{
  width:100%; min-height:120px; display:grid; place-items:center;
  border:1px dashed var(--border); border-radius:12px; background:#fafafa;
}
.ad-placeholder{ text-align:center; color:var(--muted); }
.ad-placeholder div{ font-weight:700; margin-bottom:4px; }

.donate{ max-width:960px; margin:24px auto; padding:0 20px; }
.donate h2{ margin-bottom:6px; }
.donate-row{ display:flex; gap:10px; flex-wrap:wrap; }

.subnav{
  display:flex; align-items:center; gap:16px;
  padding:10px 16px; border-bottom:1px solid var(--border);
}
#map{
  width:100vw;
  min-height: 300px;
  height:calc(100vh - 200px);
}

.leaflet-control.nwe-home{ box-shadow:none; border:none; background:transparent; }
.leaflet-control.nwe-home .btn-icon{ box-shadow:0 6px 18px rgba(0,0,0,.12); }
.leaflet-control.nwe-home .btn-icon:hover{ background:#0b1220; }

.filterbar-modern{
  background:#fff; border-bottom:1px solid var(--border); padding:12px;
}
.filter-center{ max-width:1100px; margin:0 auto; display:flex; justify-content:center; }
.filter-card{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; border:1px solid var(--border); border-radius:999px;
  background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.06); max-width:100%;
}
.filter-card .item{ display:flex; align-items:center; gap:8px; }
#filter-toggle{
  border:1px solid var(--btn-br); background:#fff; color:#111827;
  border-radius:999px; padding:6px 10px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
}
#filter-toggle:hover{ background:#f9fafb; }
#filter-toggle svg{ width:18px; height:18px; fill:currentColor; opacity:.75; }

.filter-card .field{ display:grid; gap:4px; }
.filter-card .field span{ font-size:12px; color:var(--muted); text-align:center; }
.filter-card select{
  height:38px; line-height:38px; padding:0 12px;
  border:1px solid var(--border); border-radius:10px; min-width:140px; background:#fff;
}
.filter-card .actions{ display:flex; gap:8px; }

.filter-card{ position: relative; }       
.filter-card .field select{ min-width: 140px; }  
	  
@media (min-width: 1024px){
  #filter-fields { display:flex; gap:12px; align-items:center; }
}

@media (max-width: 1023px){
  .filter-card{
    position: relative;
    padding: 0;               
    border: none;             
    box-shadow: none;      
    border-radius: 0;        
    width: auto;              
    gap: 0;
  }

  #filter-fields{ 
    display: none;
  }

.filter-card[data-open="true"] #filter-fields{
  display: block;
  position: absolute;
  top: calc(100% + 8px);

  left: 0;

  min-width: 240px;
  max-width: calc(100vw - 16px);

  z-index: 1000;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 12px;

  max-height: min(60vh, 420px);
  overflow: auto;
}

.filter-menu--align-right{
  left: auto !important;
  right: 0 !important;
}

  .filter-card #filter-fields .field{
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
  }
  .filter-card #filter-fields .field:last-child{
    margin-bottom: 0;
  }
  .filter-card #filter-fields .field span{
    font-size: 12px;
    color: var(--muted);
    text-align: left;
  }
  .filter-card #filter-fields .field select{
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
  }

  .filter-card #filter-fields .actions{
    display: flex;
    gap: 8px;
    margin-top: 6px;
  }
  .filter-card #filter-fields .actions .btn{
    width: 100%;
  }

  #filter-toggle{
    border: 1px solid var(--btn-br);
    background: #fff;
    color: #111827;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  #filter-toggle:hover{ background: #f9fafb; }
  #filter-toggle svg{ width: 18px; height: 18px; fill: currentColor; opacity: .75; }
}


.leaflet-marker-icon.photo-marker-img{
  width:54px; height:54px; border-radius:12px !important;
  border:2px solid #fff; object-fit:cover;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  transition: transform .1s ease, box-shadow .2s ease;
}
.leaflet-marker-icon.photo-marker-img.hovered{
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
@media (max-width:640px){
  .leaflet-marker-icon.photo-marker-img{ width:44px; height:44px; }
}

.marker-cluster .cluster-inner{
  display:grid; place-items:center; width:40px; height:40px;
  border-radius:999px; background:rgba(17,24,39,.12); border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.2); font-weight:700;
}
.marker-cluster-small .cluster-inner{ width:36px; height:36px; }
.marker-cluster-medium .cluster-inner{ width:44px; height:44px; }
.marker-cluster-large .cluster-inner{ width:52px; height:52px; }
.marker-cluster .cluster-inner span{ font-size:13px; color:#111827; }

.nwe-popup .leaflet-popup-content{ margin:0; padding:10px 12px; }
.nwe-popup .leaflet-popup-tip{ filter:drop-shadow(0 4px 10px rgba(0,0,0,.08)); }
.nwe-popup .popup img.preview{
  width:100%; max-height:240px; display:block; object-fit:cover;
  border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.nwe-popup .popup .meta{ margin:8px 2px 10px; display:grid; gap:2px; }
.nwe-popup .popup .title{ font-weight:700; }
.nwe-popup .popup .time{ color:#6b7280; }
.nwe-popup .popup .btn{ margin-top:2px; }
.nwe-popup .nav-row{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.nwe-popup .nav-row .counter{ flex:1; text-align:center; font-size:12px; color:#6b7280; }
@media (max-width:768px){ .nwe-popup .popup img.preview{ max-height:200px; } }
@media (max-width:480px){ .nwe-popup .popup img.preview{ max-height:180px; } }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-bottom:1px solid var(--border);
}
.container{ max-width:960px; margin:16px auto; padding:0 16px; }
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ border-bottom:1px solid var(--border); padding:8px; text-align:left; font-size:14px; }
.alert{ padding:10px; border:1px solid var(--border); border-radius:8px; background:#f0f7f2; margin-bottom:10px; }
.alert.bad{ background:#fff2f2; border-color:#ffd0d0; }

body.auth{ display:grid; place-items:center; min-height:100vh; }
.auth-card{ width:360px; max-width:92vw; border:1px solid var(--border); border-radius:12px; padding:20px; background:#fff; }
.auth-card form{ display:grid; gap:8px; }
.auth-card input{ padding:10px; border:1px solid var(--border); border-radius:8px; }
.auth-card button{ padding:10px; border:none; border-radius:8px; background:var(--btn-bg); color:#fff; font-weight:600; }

#consent-banner{
  position:fixed; left:0; right:0; bottom:0;
  background:#fff; border-top:1px solid var(--border);
  box-shadow:0 -6px 20px rgba(0,0,0,.08); z-index:9999;
}
#consent-banner .consent-inner{
  max-width:1100px; margin:0 auto; padding:12px 16px;
  display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
#consent-banner .consent-text{ font-size:14px; color:var(--fg); }
#consent-banner .consent-text a{ color:#0a5ca8; text-decoration:underline; }
#consent-banner .consent-actions{ display:flex; gap:8px; }
@media (max-width:600px){
  #consent-banner .consent-actions{ width:100%; justify-content:flex-end; }
}

@media (max-width:767px){
  .hero h1{ font-size:30px; }
  .hero p{ font-size:16px; }
  #map{ height:calc(100vh - 140px); }
}
@media (min-width:1024px) and (max-width:1279px){
  .hero h1{ font-size:42px; }
}
@media (min-width:1280px){
  .hero h1{ font-size:48px; }
}

@media (min-width: 641px){
  #filter-toggle:hover { 
    background: #fff;
    border-color: var(--btn-br);
  }
}

.lang-switch { display:flex; gap:8px; align-items:center; } 
.lang-switch a { font-weight:600; text-decoration:none; color:#1f2937; padding:4px 8px; border-radius:8px; border:1px solid var(--border); }   
.lang-switch a:hover { background:#f9fafb; } 
	  
.hero .lang-switch{ position:absolute; top:12px; right:16px; display:flex; gap:8px; z-index:100; } 
.hero .lang-switch{ position:absolute; top: calc(12px - 6rem); right:16px; display:flex; gap:8px; z-index:100; } 
	
@media (max-width: 1024px){ 
	.hero .lang-switch{ right: 8px; 
} } 
	
@media (max-width: 640px){ 
	.hero .lang-switch{ right: 4px; 
} } 

.about-hero{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:20px;
  margin:24px 0;
}
.about-hero-text .sub{
  color:#6b7280;
  margin-top:-6px;
}
.about-hero-photos{
  display:grid;
  gap:12px;
}
.about-hero:not(.card) .about-hero-photos img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
}
.about-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  margin:16px 0 24px;
}
.about-grid .card h2{ margin-top:0 }
.about-grid .clean{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:6px;
}
.about-cta{
  text-align:center;
  margin:12px 0 36px;
  display:grid;
  gap:8px;
  justify-items:center;
}
.about-teaser-wrap{
  max-width:1000px;
  margin:24px auto;
  padding:0 16px;
}
.about-teaser{
  border-radius:20px;
  overflow:hidden;
  padding:0;
}
.about-teaser .about-teaser-inner{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:stretch;
}
.about-teaser-text{
  padding:24px;
  display:grid;
  gap:12px;
}
.about-teaser-rotator{
  position:relative;
  min-height:260px;
}
.about-teaser-rotator img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .6s ease;
  opacity:0;
}
@media (max-width: 900px){
  .about-teaser .about-teaser-inner{ grid-template-columns:1fr; }
  .about-teaser-rotator{ min-height:220px; }
}

.about-hero.card{
  border-radius:20px;
  overflow:hidden;
  padding:0;
  align-items:stretch;
}

.about-hero-text{ padding:24px; display:grid; gap:12px; }

.container .features.about-grid{ margin:24px 0; padding:0; }

.about-cta.card{ text-align:center; display:grid; gap:8px; justify-items:center; }
.about-cta.card .btn{ margin-top:4px; }

.about-hero.card .about-hero-photos{ position:relative; }
.about-hero.card .about-hero-photos img{
  width:100%;
  height:100%;
  min-height:320px;
  display:block;
  object-fit:cover;
  border-radius:0;
  box-shadow:none;
}

@media (max-width: 900px){
  .about-hero.card .about-hero-photos img{ min-height:220px; }
}

.about-hero{
  grid-template-areas: "text photo";
}
.about-hero-text{ grid-area: text; }
.about-hero-photos{ grid-area: photo; }

@media (max-width: 900px){
  .about-hero{
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "photo";
  }
}