/* Full-viewport single-screen, touch-friendly controls */
:root{
  --control-size:48px;
  --accent:#e85a27;
}
html,body,#map{height:100%;margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;background:#f7f7f7}
/* slightly larger base font for improved readability on mobile */
body{ font-size:15px; }
#map{position:fixed;inset:0}
#controls{
  position:fixed;
  right:12px;
  bottom:24px;
  display:flex;
  gap:8px;
  align-items:center;
  z-index:999;
}

/* New fixed logo in top-left */
#logo{
  position:fixed;
  left:12px;
  top:12px;
  display:inline-flex;
  gap:6px; /* tighter spacing */
  align-items:center;
  padding:6px 8px; /* reduced padding to take less room */
  background: transparent; /* changed from rgba(255,255,255,0.95) to transparent */
  border-radius:10px; /* slightly smaller radius */
  box-shadow:0 6px 14px rgba(0,0,0,0.10); /* softer shadow for professional look */
  z-index:1500;
  touch-action:manipulation;
  min-height:40px;
  transform: translateZ(0);
}
/* doubled logo SVG size for better visibility */
#logo svg{ width:72px; height:72px; display:block; border-radius:6px; } /* was 36x36 */
.logo-text{
  font-weight:600;
  color:#2f2f2f; /* more neutral professional color */
  font-size:40px; /* increased per request */
  line-height:1;
  user-select:none;
  display:inline-block;
  margin-right:4px;
  letter-spacing:0.2px; /* subtle refinement */
  white-space:nowrap;
}
#controls button{
  width:var(--control-size);
  height:var(--control-size);
  border-radius:12px;
  border:0;
  background:var(--accent);
  color:white;
  font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
  touch-action:manipulation;
}
.leaflet-container { touch-action: pan-y pinch-zoom; }
.leaflet-control-attribution, .leaflet-control-zoom { display:none; }

/* Mobile hamburger menu (hidden on wider screens) */
#menuBtn{
  position:fixed;
  right:12px;
  top:12px;
  width:44px;
  height:44px;
  padding:8px;
  display:none; /* visible on small screens via media query */
  align-items:center;
  justify-content:center;
  flex-direction:column; /* stack bars vertically */
  border-radius:10px;
  background:rgba(255,255,255,0.95);
  box-shadow:0 6px 14px rgba(0,0,0,0.10);
  border:0;
  z-index:1600;
  touch-action:manipulation;
}
/* double the hamburger touch target size on mobile */
#menuBtn.large{
  width:88px;
  height:88px;
  padding:14px;
}
#menuBtn .bar{
  display:block;
  width:22px;
  height:2px;
  background:#2f2f2f;
  margin:3px 0;
  border-radius:2px;
  transform-origin:center;
}
#mobileMenu{
  position:fixed;
  right:12px;
  top:64px;
  width:calc(100% - 36px);
  max-width:300px;
  background:white;
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,0.18);
  z-index:1550;
  transform-origin: top right;
  transform: translateY(-8px) scaleY(0.98);
  opacity:0;
  pointer-events:none;
  transition: opacity 180ms ease, transform 180ms ease;
}
#mobileMenu[aria-hidden="false"]{
  transform: translateY(0) scaleY(1);
  opacity:1;
  pointer-events:auto;
}
#mobileMenu ul{
  list-style:none;
  margin:0;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#mobileMenu a{
  display:block;
  padding:10px 12px;
  border-radius:8px;
  color:#2f2f2f;
  text-decoration:none;
  font-weight:600;
  font-size:15px;
}
#mobileMenu a:hover{ background:rgba(232,90,39,0.06); }

/* Right-side vertical bars list beneath the hamburger */
/* doubled width and item sizes for improved legibility */
#barsList{
  position:fixed;
  right:12px;
  top:64px;
  width:30%; /* set bars to 20% width as requested */
  max-width:calc(100% - 36px);
  z-index:1550;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:auto;
}
#barsList ul{
  list-style:none;
  margin:0;
  padding:2px;
  display:flex;
  flex-direction:column;
  gap:6px; /* reduced gap between items to save vertical space (was 8px) */
}
.bar-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:2px 4px; /* tightened padding (was 6px 8px) */
  background:rgba(255,255,255,0.95);
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  cursor:pointer;
  min-height:10px; /* reduced height (was 44px) */
  touch-action:manipulation;
}

/* new left cluster to hold icon + name */
.bar-left{
  display:flex;
  align-items:center;
  gap:0; /* removed gap between icon and name */
  min-width:0;
  flex:1 1 auto;
  /* ensure items don't wrap awkwardly when name is vertical */
  align-self:stretch;
}

/* icon box and svg sizing */
.bar-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:flex-start; /* left-align icon instead of centering */
  padding-left:0; /* removed inset so icon sits flush against name */
  flex:0 0 42px;
}
.bar-icon svg{ width:30px; height:30px; display:block; }

/* text styles remain but allow truncation */
/* Business name displayed vertically */
.bar-item .bar-name{
  font-weight:700;
  color:#2f2f2f;
  font-size:12px;
  /* make the name vertical */
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex: 1 1 auto; /* allow name to take remaining horizontal space */
  line-height:1;
  display:block;
  align-self:center;
  padding:0 4px; /* tightened padding to remove excess space */
  word-break:normal;
  text-align:left; /* left-align the business text */
}
/* reserve a tighter fixed width so distance has room on the right */
.bar-item .bar-dist{
  font-weight:600;
  color:#6b6b6b;
  font-size:11px;
  margin-left:auto;
  flex: 0 0 28px; /* keep distance column compact */
  text-align:right;
  padding-left:2px; /* reduced from 4px */
}
/* keep it compact on small screens */
@media (max-width:420px){
  /* Give bars more horizontal room on very small screens so names can show more */
  #barsList{ right:8px; width:45%; top:64px; } 
  .bar-item{ padding:4px 6px; min-height:34px; }
  .bar-item .bar-name{
    font-size:11px;
    flex: 1 1 auto;
    padding:0 4px;
    text-align:left;
    white-space:normal;   /* allow wrapping to show more of the name */
    line-height:1.2;
  }
  .bar-icon{ width:42px; height:42px; flex:0 0 42px; justify-content:flex-start; padding-left:6px; } /* mirror left-align on small screens */
  .bar-icon svg{ width:28px; height:28px; }
}

/* show hamburger on small viewports */
@media (max-width:720px){
  #menuBtn{ display:flex; }
  /* restore hamburger to original smaller touch size */
  #menuBtn{ width:44px; height:44px; padding:8px; border-radius:10px; }
  #menuBtn .bar{ width:22px; height:2px; margin:3px 0; }
}
/* keep menu accessible and constrained on very small screens */
@media (max-width:420px){
  #mobileMenu{ right:8px; top:56px; width:calc(100% - 16px); max-width:none; }
}

/* Deal Points box in bottom-right, styled like bar-item but semi-transparent */
#dealPoints{
  position:fixed;
  right:12px;
  bottom:16px;
  z-index:1600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:6px 10px;
  background:rgba(255,255,255,0.5); /* 50% transparent */
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  min-height:34px;
  touch-action:manipulation;
  pointer-events:auto;
}
#dealPoints .deal-label{
  font-size:11px;
  font-weight:600;
  color:#6b6b6b;
}
#dealPoints .deal-value{
  font-size:16px;
  font-weight:700;
  color:#2f2f2f;
}
@media (max-width:420px){
  #dealPoints{
    right:8px;
    bottom:12px;
    padding:6px 10px;
  }
}

/* Dialog styles */
#coffeeDialog[aria-hidden="true"] { display:none; }
#coffeeDialog {
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:flex-start; /* place dialog at top */
  justify-content:center;
  padding:16px 0 0; /* small offset from top */
}
.dialog-backdrop {
  position:absolute;
  inset:0;
  background:transparent; /* keep map + address popup fully visible */
  border-radius:8px;
}
.dialog-panel {
  position:relative;
  background:white;
  padding:18px;
  width:min(84%,420px);
  border-radius:12px; /* fully rounded for floating card look */
  box-shadow:0 -4px 18px rgba(0,0,0,0.25);
  z-index:1;
  transform-origin:bottom center; /* animate from bottom edge if animated */
  font-size:15px;
}
/* user marker icon sizing (restored smaller size) */
.user-marker-svg {
  display:block;
  width:56px;
  height:72px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
/* center the icon in the marker element */
.leaflet-marker-icon.user-marker { transform-origin: center bottom; }
/* end dialog styles */
.dialog-close{
  position:absolute;
  top:8px;
  right:8px;
  background:transparent;
  border:0;
  font-size:20px;
  line-height:1;
  padding:8px;
  cursor:pointer;
}
.dialog-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.dialog-action{
  display:inline-block;
  padding:10px 14px;
  background:var(--accent);
  color:white;
  text-decoration:none;
  border-radius:10px;
  font-weight:600;
  border:none;
  cursor:pointer;
}
.dialog-secondary{
  background:#ffffff;
  color:var(--accent);
  border:1px solid rgba(0,0,0,0.08);
}
@media (max-width:420px){
  .dialog-panel{ width:84%; padding:14px; border-radius:10px; }
}

/* Directions popup styling */
.directions-popup .leaflet-popup-content {
  position: relative;
  margin: 8px 10px;
  font-size: 13px;
  line-height: 1.3;
}

.directions-popup .directions-popup-inner {
  position: relative;
  padding-right: 18px; /* space for the X button */
}

.directions-popup .directions-close {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}