/* =========================================================
   UI CONTROLS (buttons, chips, links)
   ========================================================= */

/* Base button + selects */
.icon-btn, select, .btn{
  background:#222;               /* tweak base fill */
  border:1px solid #333;         /* tweak base border */
  color:var(--text);
  padding:.4rem .6rem;
  border-radius:.5rem;
  cursor:pointer;
}
.icon-btn{ font-size:1.1rem; line-height:1; }
.btn.secondary{ opacity:.9; }
.link{ display:inline-block; text-decoration:none; }

/* Chips / pills */
.chip{
  background:var(--chip);
  border:1px solid #333;
  border-radius:999px;
  padding:.25rem .6rem;
}
.chip.active{ border-color: var(--accent); }

/* =========================================================
   SEGMENTED CONTROL
   ========================================================= */

.segmented{
  position: fixed; z-index: 35;
  top: calc(var(--topbar-h) + 8px);
  left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: 1fr 1fr;
  width: min(92vw, 420px);
  height: 44px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.seg-btn{
  position: relative; z-index: 2;
  border: 0; background: transparent; color:#fff;
  font: 600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  cursor: pointer; border-radius: 999px;
}
.seg-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.seg-indicator{
  position:absolute; z-index:1; top:3px; left:3px;
  width: calc(50% - 6px); height: calc(100% - 6px);
  background: rgba(255,255,255,.92);
  border-radius:999px; box-shadow:0 6px 24px rgba(0,0,0,.25);
  transition: transform .25s ease;
}
/* active text turns dark over the light indicator */
.segmented .seg-btn.active{ color:#111; font-weight:600; mix-blend-mode:normal; }

/* =========================================================
   CAROUSEL NAV ARROWS (match hero/back look)
   ========================================================= */

.car-nav{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px;
  background: rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.16);
  color:#fff; font-size:22px; font-weight:bold; line-height:1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:0 6px 24px rgba(0,0,0,.28);
  cursor:pointer;
  transition: transform .1s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  z-index:35;
}
.car-nav:hover{
  background: rgba(0,0,0,.48);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 8px 28px rgba(0,0,0,.34);
}
.car-nav:active{ transform: translateY(1px) scale(.96); }

/* Position hooks (set top/vertical on the container you use) */
#carPrev{ left:.5rem; }
#carNext{ right:.5rem; }

/* =========================================================
   HOME OVERLAY (text box over hero)
   ========================================================= */

.home-overlay{
  position:absolute; bottom:0; left:0; width:100%;
  padding:16px; z-index:2; color:#fff;
}
.home-overlay-box{
  background: rgba(255,255,255,.85);
  border-radius:12px;
  padding:12px 14px;
  max-width:90%; margin:0 auto;
  color:#111;
}
.home-overlay-box .ol-title  { font:800 20px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial; margin:0 0 6px; }
.home-overlay-box .ol-tagline{ font:600 14px/1.2  system-ui,-apple-system,Segoe UI,Roboto,Arial; margin:0 0 6px; }
.home-overlay-box .ol-summary{ font:400 14px/1.4  system-ui,-apple-system,Segoe UI,Roboto,Arial; margin:0; }

/* =========================================================
   BACK BUTTON (standalone version)
   NOTE: If you’ve centralized to `.hero-round-btn` in components.css,
         you can remove this block and use that shared class instead.
   ========================================================= */

.back-btn{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  left: 12px;
  z-index: 10001;

  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; line-height:1;

  color:#fff;
  background: rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:0 6px 24px rgba(0,0,0,.28);
}
.back-btn:hover{
  background: rgba(0,0,0,.48);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 8px 28px rgba(0,0,0,.34);
}
.back-btn:active{ transform: translateY(1px) scale(.98); }

/* =========================================================
   WALK META (distance / duration rows)
   ========================================================= */

.meta-block{ display:flex; flex-direction:column; gap:.35rem; margin-top:.35rem; }
.meta-row  { display:flex; align-items:center; gap:.35rem; color:var(--muted); font-size:14px; }
.meta-icon { flex-shrink:0; fill:currentColor; opacity:.85; }

/* Location label button in top bar */
.location-btn{
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-btn #currentCityLabel{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-btn .caret{
  opacity: .85;
  flex: 0 0 auto;
}

/* City dropdown in drawer header */
#citySelect{
  max-width: 170px;
  margin-left: auto;
}

.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-left,
.topbar-right{
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}


/* =========================================================
   AUDIO BADGE (Top Right Ribbon)
   ========================================================= */
.audio-badge {
  position: absolute;
  top: 100px;
  right: 0;
  background: #1DB954;
  color: #fff;
  padding: 8px 16px 8px 20px;
  border-radius: 24px 0 0 24px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.audio-badge svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
}