/* map-controls — styles for components/map-controls.php

   Owned by that component. Nothing else should style these selectors: the
   map spent a long time with its rules split between map-style.css and an
   inline <style> in map.php, where the inline copy silently won and the
   responsive rules never applied. One selector, one file. */

.zb {
  /* Bottom left, level with the calculator button on the opposite side.

     The old right: 284px was clearing the 272px side panel, which is gone —
     the controls were floating in the middle of the plan for no reason. */
  position: fixed;
  top: auto;
  bottom: 24px;
  left: 24px;
  right: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  z-index: 100;

  /* One capsule, not four loose elements — matching the calculator button at
     the opposite corner: same fill, same white, same 50px radius. The zoom
     percentage is a 10px label between the buttons; unbacked it read as stray
     text sitting on the plan rather than part of the control. */
  padding: 6px;
  background: var(--buy);
  border: none;
  border-radius: 50px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(140,29,30,.28), 0 2px 8px rgba(0,0,0,.10);
}

.zb .zbtn {
  background: transparent;
  border-color: transparent;
  color: #fff;
  backdrop-filter: none;
  border-radius: 50%;
}

.zb .zbtn:hover,
.zb .zbtn:focus-visible {
  background: rgba(255, 255, 255, .18);
  border-color: transparent;
  color: #fff;
}

.zb .zbtn:active {
  background: rgba(255, 255, 255, .28);
}

.zb .zoom-pct {
  color: #fff;
  /* Hairlines in the white rather than the border token, which is tuned for
     the light chrome and disappears on this fill. */
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  margin: 3px 2px;
  opacity: .85;
}

.zbtn {
  width: 32px;
  height: 32px;
  background: var(--bg2);  /* was rgba(13,18,32,.92) */
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  backdrop-filter: blur(8px);
  font-family: 'Outfit', Helvetica, Arial, sans-serif;
  font-weight: 500;
}

.zbtn:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: scale(1.08); }

.zbtn:active { transform: scale(.95); }

.zb {
        padding: 6px;
        gap: 4px;
    }

.zbtn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

.zbtn:hover {
        background: inherit;
    }

.zbtn:active {
        background: rgba(0,0,0,0.1);
    }

@media (max-width: 768px) {
  .zb {
      top: auto;
      bottom: 20px;
      left: 20px;
      right: auto;
      /* A horizontal pill on mobile: it costs width, which there is more of
         here than height once the on-screen keyboard appears. */
      flex-direction: row;
      align-items: center;
    }

  .zb .zoom-pct {
      border-top: none;
      border-bottom: none;
      border-left: 1px solid rgba(255, 255, 255, .22);
      border-right: 1px solid rgba(255, 255, 255, .22);
      margin: 2px 3px;
      padding: 0 8px;
    }

  .zbtn { width: 40px; height: 40px; font-size: 1.1rem; }

  .zbtn { min-height: 44px; }
}

@media (max-width: 992px) {
  .zb {
          left: 12px;
          top: auto;
          bottom: 12px;
          right: auto;
          padding: 8px;
          gap: 6px;
      }

  .zbtn {
          width: 36px;
          height: 36px;
          font-size: 16px;
      }

  .zoom-pct {
          font-size: 9px;
          padding: 3px 0;
      }
}

/* Coarse pointers get a larger hit area than the 32px desktop button. */
@media (hover: none) and (pointer: coarse) {
  .zbtn {
    width: 40px;
    height: 40px;
  }
}

/* Hidden on phones.

   Pinch and double-tap already do everything these buttons do, so on a small
   screen they are chrome competing with the plan for room rather than a way
   to reach anything. The only control left floating is the calculator. */
@media (max-width: 768px) {
  .zb {
    display: none;
  }
}