/* Fullscreen single-view, touch-friendly controls */
:root{
  --accent:#e24b4b; /* hot color */
  --cold:#2c98f0;
  --bg:#f7f7f7;
  --nav-bg: rgba(255,255,255,0.95);
  --nav-height: 0px;
}
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* top navbar */
.topbar{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:var(--nav-height);
  background:var(--nav-bg);
  display:flex;
  align-items:center;
  padding:6px 10px;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
  z-index:1000;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.topbar .brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  width:44px;
  height:44px;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
}
.topbar .brand img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* navbar actions (page buttons) */
.topbar .nav-actions{
  margin-left:12px;
  display:flex;
  gap:8px;
  margin-inline-start:auto;
  margin-inline-end:8px;
  align-items:center;
}
.topbar .nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:56px;
  height:36px;
  padding:0 12px;
  border-radius:10px;
  text-decoration:none;
  color:#222;
  background:rgba(0,0,0,0.04);
  font-weight:600;
  font-size:14px;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
.topbar .nav-btn[aria-current="page"]{
  background:linear-gradient(180deg, rgba(226,75,75,0.12), rgba(226,75,75,0.08));
  color:var(--accent);
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
@media (max-width:420px){
  .topbar .nav-actions{ gap:6px; margin-inline-end:6px; }
  .topbar .nav-btn{ min-width:48px; height:36px; font-size:13px; padding:0 10px; }
}

/* Map area sits below the navbar */
#map{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  height:100vh;
  width:100vw;
  touch-action:manipulation;
}

/* Simple popup styling tweaks for clarity on mobile */
.leaflet-popup-content-wrapper{
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
  font-family:inherit;
  font-size:15px;
}
.leaflet-marker-icon {
  transform: translate(-12px, -12px) scale(1);
}

/* Startup modal (centered card, bilingual) */
.startup-modal {
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.46);
  z-index:2000;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding:20px;
  box-sizing:border-box;
}
.startup-card{
  width:100%;
  max-width:760px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,0.35);
  padding:16px;
  outline:none;
}
.startup-card h2{ margin:6px 0 8px; font-size:18px; text-align:center; }
.startup-content{ display:flex; gap:12px; flex-wrap:wrap; }
.startup-content .col{ flex:1 1 220px; min-width:180px; font-size:14px; line-height:1.35; color:#222; }
.startup-content .he{ direction:rtl; text-align:right; }
.startup-content .en{ direction:ltr; text-align:left; }
.startup-actions{ display:flex; justify-content:center; margin-top:12px; }
.btn{
  background:linear-gradient(180deg, rgba(226,75,75,0.12), rgba(226,75,75,0.08));
  color:var(--accent);
  border:0;
  padding:10px 16px;
  border-radius:10px;
  font-weight:700;
  min-width:140px;
  font-size:15px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
@media (max-width:520px){
  .startup-card{ padding:12px; border-radius:12px; }
  .startup-content{ gap:10px; }
  .startup-card h2{ font-size:16px; }
  .startup-content .col{ font-size:13px; }
  .btn{ min-width:120px; padding:10px 12px; font-size:14px; }
}