/* MPC Map Extension v2.3 — Mobile drawer (top-anchored)
 *
 * UX redesign: replaces the bottom-sheet + FAB pattern with a top-anchored
 * drawer. The panel is always partially visible as a "summary bar" at the
 * top of the map (width: 100%) with icon, dynamic label and a chevron. Tap
 * expands to peek/full; an explicit ✕ button closes back to the bar. All
 * styles are scoped under .mpc-map-wrap.mpc-v23-mobile so desktop is untouched.
 */

.mpc-map-wrap {
  /* defaults — overridden per-instance by JS via setProperty */
  --mpc-v23-anim:           320ms;
  --mpc-v23-peek-pct:       45%;
  --mpc-v23-full-pct:       85%;
  --mpc-v23-radius:         18px;
  --mpc-v23-shadow:         0 8px 32px rgba(0,0,0,.45);
  --mpc-v23-sheet-bg:       var(--mpc-panel-bg);
  --mpc-v23-sheet-border:   var(--mpc-border);
  --mpc-v23-bar-height:     56px;
  --mpc-v23-bar-bg:         var(--mpc-panel-bg);
  --mpc-v23-bar-text:       var(--mpc-text);
  --mpc-v23-bar-accent:     var(--mpc-primary);
}

/* ── Panel becomes a top-anchored drawer in mobile mode ─────────────────── */
.mpc-map-wrap.mpc-v23-mobile .mpc-panel {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--mpc-v23-bar-height);
  max-height: var(--mpc-v23-full-pct);
  background: var(--mpc-v23-sheet-bg);
  border: 1px solid var(--mpc-v23-sheet-border);
  border-top: none;
  border-radius: 0 0 var(--mpc-v23-radius) var(--mpc-v23-radius);
  box-shadow: var(--mpc-v23-shadow);
  transform: none !important;
  transition: height var(--mpc-v23-anim) cubic-bezier(.32,.72,.0,1);
  z-index: 12;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: pan-y;
  will-change: height;
}

/* Older desktop-mobile fallback styles are completely overridden when v23 is active */
.mpc-map-wrap.mpc-v23-mobile .mpc-toggle-panel { display: none !important; }
.mpc-map-wrap.mpc-v23-mobile .mpc-panel.is-hidden { transform: none !important; opacity: 1; pointer-events: auto; }

/* ── States ────────────────────────────────────────────────────────────── */
.mpc-map-wrap.mpc-v23-mobile.mpc-v23-state-closed .mpc-panel { height: var(--mpc-v23-bar-height); }
.mpc-map-wrap.mpc-v23-mobile.mpc-v23-state-peek   .mpc-panel { height: var(--mpc-v23-peek-pct); }
.mpc-map-wrap.mpc-v23-mobile.mpc-v23-state-full   .mpc-panel { height: var(--mpc-v23-full-pct); }
.mpc-map-wrap.mpc-v23-mobile.mpc-v23-state-full .mpc-v23-backdrop { opacity: 1; pointer-events: auto; }

/* Disable the height transition while dragging so the panel tracks the finger */
.mpc-map-wrap.mpc-v23-mobile.mpc-v23-dragging .mpc-panel { transition: none; }

/* ── Summary bar (only rendered in mobile mode) ────────────────────────── */
/* Hidden by default; the wrap toggling .mpc-v23-mobile makes it visible. */
.mpc-v23-summary { display: none; }
.mpc-map-wrap.mpc-v23-mobile .mpc-v23-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px 0 16px;
  height: var(--mpc-v23-bar-height);
  flex-shrink: 0;
  background: var(--mpc-v23-bar-bg);
  border-bottom: 1px solid var(--mpc-v23-sheet-border);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.mpc-v23-summary::before {
  /* small drag indicator at the very top, hints at "swipe-able" */
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--mpc-v23-bar-text);
  opacity: .18;
  transform: translateX(-50%);
}

.mpc-v23-summary-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--mpc-v23-bar-accent) 18%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mpc-v23-bar-accent);
}
.mpc-v23-summary-icon svg { width: 16px; height: 16px; }

.mpc-v23-summary-text {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--mpc-v23-bar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.mpc-v23-summary-text small {
  display: block;
  font-size: 11px;
  color: var(--mpc-muted);
  font-weight: 400;
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* Bar buttons (close + toggle) — defended against theme overrides with
 * high-specificity selectors and !important on the visual properties that
 * tend to be reset by Elementor / Astra / common WP themes (background,
 * color, border, padding, line-height).
 */
.mpc-map-wrap .mpc-v23-summary-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  cursor: pointer;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--mpc-v23-bar-accent) !important;
  line-height: 1 !important;
  box-shadow: none !important;
  font: inherit;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.mpc-map-wrap .mpc-v23-summary-btn:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
.mpc-map-wrap .mpc-v23-summary-btn:active { transform: scale(0.94); }
.mpc-map-wrap .mpc-v23-summary-btn:focus,
.mpc-map-wrap .mpc-v23-summary-btn:focus-visible { outline: none !important; }
/* Force the svg dimensions even if the theme has `button > * { width:auto }` */
.mpc-map-wrap .mpc-v23-summary-btn svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  flex-shrink: 0;
  stroke: currentColor;
}

.mpc-v23-summary-toggle .mpc-v23-arrow {
  transition: transform var(--mpc-v23-anim);
}
.mpc-map-wrap.mpc-v23-mobile.mpc-v23-state-peek .mpc-v23-summary-toggle .mpc-v23-arrow,
.mpc-map-wrap.mpc-v23-mobile.mpc-v23-state-full .mpc-v23-summary-toggle .mpc-v23-arrow {
  transform: rotate(180deg);
}

/* Close button — visible whenever the drawer is open (peek OR full). */
.mpc-v23-summary-close { display: none !important; }
.mpc-map-wrap.mpc-v23-mobile.mpc-v23-state-peek .mpc-v23-summary-close,
.mpc-map-wrap.mpc-v23-mobile.mpc-v23-state-full .mpc-v23-summary-close {
  display: flex !important;
}

/* When the drawer is closed, hide the default panel header / tabs / route footer
 * so only the summary bar is visible inside the bar-height clip. */
.mpc-map-wrap.mpc-v23-mobile.mpc-v23-state-closed .mpc-panel-hd,
.mpc-map-wrap.mpc-v23-mobile.mpc-v23-state-closed .mpc-cat-tabs,
.mpc-map-wrap.mpc-v23-mobile.mpc-v23-state-closed .mpc-pts-list,
.mpc-map-wrap.mpc-v23-mobile.mpc-v23-state-closed .mpc-route-foot,
.mpc-map-wrap.mpc-v23-mobile.mpc-v23-state-closed .mpc-v22-bar {
  display: none;
}

/* ── Backdrop ──────────────────────────────────────────────────────────── */
.mpc-v23-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mpc-v23-anim);
}

/* ── Legend handling on mobile ─────────────────────────────────────────── */
.mpc-map-wrap.mpc-v23-mobile .mpc-legend { display: none; }
.mpc-map-wrap.mpc-v23-mobile.mpc-v23-show-legend .mpc-legend {
  /* Keep the same flex layout the core CSS sets so legend_layout
     (row/column) keeps working on mobile too. */
  display: flex;
  bottom: 12px;
  right: 12px;
}

/* ── Smooth scrolling inside the list ──────────────────────────────────── */
.mpc-map-wrap.mpc-v23-mobile .mpc-pts-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── Device preview switcher (admin) ───────────────────────────────────── */
.mpc-v23-device-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: #1f2426;
  border-radius: 6px;
  margin-bottom: 8px;
  width: max-content;
}
.mpc-v23-device-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #b6c2c0;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  transition: background .15s, color .15s, border-color .15s;
}
.mpc-v23-device-btn:hover {
  background: rgba(255,255,255,.04);
  color: #e8ede9;
}
.mpc-v23-device-btn.is-active {
  background: rgba(87,185,163,.15);
  color: #57B9A3;
  border-color: rgba(87,185,163,.3);
}
.mpc-v23-device-frame {
  margin: 0 auto;
  transition: width .25s ease, max-width .25s ease;
  position: relative;
}
.mpc-v23-device-frame[data-device="mobile"]  { max-width: 375px; }
.mpc-v23-device-frame[data-device="tablet"]  { max-width: 768px; }
.mpc-v23-device-frame[data-device="desktop"] { max-width: 100%; }
.mpc-v23-device-frame[data-device="mobile"]::after,
.mpc-v23-device-frame[data-device="tablet"]::after {
  content: attr(data-device-label);
  position: absolute;
  top: -22px;
  right: 0;
  font-size: 11px;
  color: #909090;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}