/* ============================================================
   OSM Maps — Frontend styles
   ============================================================ */

.wosm-wrap { display: block; }
.wosm-map  { border-radius: 10px; overflow: hidden; }

/* ── Auto popup (Leaflet) — default browser styling ── */
.wosm-map .leaflet-popup-content-wrapper a { text-decoration: none; }
.wosm-map .leaflet-popup-content-wrapper a:hover { text-decoration: underline; }
.wosm-map .leaflet-control-attribution { font-size: 11px; }

/* ── Map style presets — CSS filter applied to tile layer only ── */
.wosm-style-greyscale  .leaflet-tile-pane { filter: grayscale(100%) contrast(1.02) brightness(1.02); }
.wosm-style-softred    .leaflet-tile-pane { filter: saturate(0.9) sepia(0.35) hue-rotate(-10deg) brightness(1.03) contrast(1.02); }
.wosm-style-teal       .leaflet-tile-pane { filter: hue-rotate(155deg) saturate(0.8) brightness(1.05); }
.wosm-style-dark       .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(1.1); }
.wosm-style-white      .leaflet-tile-pane { filter: grayscale(100%) brightness(1.25) contrast(0.85); }
.wosm-style-soft       .leaflet-tile-pane { filter: saturate(0.6) brightness(1.08) contrast(0.9); }
.wosm-style-green      .leaflet-tile-pane { filter: hue-rotate(80deg) saturate(0.75) brightness(1.04); }
.wosm-style-blue       .leaflet-tile-pane { filter: hue-rotate(195deg) saturate(0.8) brightness(1.06); }
.wosm-style-bright     .leaflet-tile-pane { filter: saturate(1.6) contrast(1.05) brightness(1.05); }
.wosm-style-gowalla    .leaflet-tile-pane { filter: sepia(0.5) saturate(1.2) hue-rotate(10deg) brightness(1.05); }
.wosm-style-gray       .leaflet-tile-pane { filter: grayscale(85%) brightness(1.0) contrast(1.05); }
.wosm-style-gray2      .leaflet-tile-pane { filter: grayscale(60%) brightness(0.95) contrast(1.1) sepia(0.1); }
.wosm-style-midnight   .leaflet-tile-pane { filter: invert(1) hue-rotate(200deg) saturate(0.6) brightness(0.75) contrast(1.15); }
.wosm-style-neon       .leaflet-tile-pane { filter: invert(1) hue-rotate(120deg) saturate(2.0) brightness(1.1) contrast(1.2); }
.wosm-style-refreshed  .leaflet-tile-pane { filter: hue-rotate(15deg) saturate(1.3) brightness(1.06) contrast(1.02); }
.wosm-style-paper      .leaflet-tile-pane { filter: sepia(0.8) brightness(1.1) contrast(0.9) saturate(0.7); }
.wosm-style-ultralight .leaflet-tile-pane { filter: grayscale(30%) brightness(1.15) contrast(0.88) saturate(0.7); }
.wosm-style-mapbox     .leaflet-tile-pane { filter: grayscale(20%) brightness(1.05) contrast(1.05) saturate(0.85); }

/* ============================================================
   WOSM Modal — full-screen overlay for HTML Builder / Text / Shortcode
   ============================================================ */
#wosm-modal-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         999999;
  background:      rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  /* Always centred — 5vw gap each side, 10vh from top */
  align-items:     flex-start;
  justify-content: center;
  padding:         10vh 5vw 5vw;
  box-sizing:      border-box;
  opacity:         0;
  transition:      opacity 0.22s ease;
  /* Allow scrolling the overlay itself as last resort */
  overflow-y:      auto;
}
#wosm-modal-overlay.wosm-modal-open {
  display: flex;
  opacity: 1;
}

body.wosm-modal-body-lock { overflow: hidden; }

#wosm-modal-box {
  position:          relative;
  background:        #fff;
  border-radius:     14px;
  box-shadow:        0 24px 80px rgba(0, 0, 0, 0.35);
  /* Box scrolls when content is taller than viewport */
  overflow-y:        auto;
  overflow-x:        hidden;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  /* Width from JS; max-width from CSS (90vw = 5% gap each side) */
  width:             680px;
  max-width:         90vw;
  /* No max-height — overlay padding provides top gap, content defines height */
  transform:         translateY(20px) scale(0.97);
  transition:        transform 0.22s ease;
  /* Prevent box from ever exceeding visible area */
  max-height:        calc(100vh - 15vw);
}
#wosm-modal-overlay.wosm-modal-open #wosm-modal-box {
  transform: translateY(0) scale(1);
}

/* ── Content reset ──────────────────────────────────────────
   Wipe ALL inherited theme/Leaflet CSS inside the modal.
   ─────────────────────────────────────────────────────────── */
#wosm-modal-content {
  all:        initial;
  display:    block;
  position:   relative;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-size:  15px;
  line-height: 1.5;
  color:      #111;
}

/* Reset leaked opacity — but never touch .wosm-bg-overlay */
#wosm-modal-content *:not(.wosm-bg-overlay) {
  opacity: 1 !important;
}

/* Close button — always visible, floats above content */
#wosm-modal-close {
  position:        absolute;
  top:             10px;
  right:           10px;
  z-index:         100;
  background:      rgba(0, 0, 0, 0.55);
  color:           #fff;
  border:          none;
  border-radius:   50%;
  width:           28px;
  height:          28px;
  font-size:       16px;
  line-height:     28px;
  text-align:      center;
  padding:         0;
  cursor:          pointer;
  pointer-events:  auto;
  transition:      background 0.15s;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
#wosm-modal-close:hover { background: rgba(0, 0, 0, 0.85); }

/* ── .wosm-popup-custom inner structure ─────────────────────
   The PHP wrapper uses position:relative + overflow:hidden.
   Make sure it never forces a height that pushes content down.
   ─────────────────────────────────────────────────────────── */
.wosm-popup-custom {
  overflow: visible !important;  /* let box handle clipping */
}

/* ── Responsive — phones ≤ 600px ── */
@media (max-width: 600px) {
  #wosm-modal-overlay {
    padding: 5vh 5vw 5vw;
  }
  #wosm-modal-box {
    width:         100% !important;
    max-width:     90vw !important;
    max-height:    calc(100vh - 10vh);
    border-radius: 12px;
  }

  /* ── Store template: side-by-side → stacked ── */
  /* Outer flex wrapper: stack vertically, reset height */
  #wosm-modal-content [style*="flex:0 0 33%"],
  #wosm-modal-content [style*="flex: 0 0 33%"] {
    flex:       none !important;
    width:      100% !important;
    height:     220px !important;     /* fixed image height when stacked */
    min-height: 0 !important;        /* override the 280px min-height */
    position:   relative !important; /* keep as positioning context for abs img */
  }

  /* The absolutely-positioned img inside — let it fill the 220px container */
  #wosm-modal-content [style*="flex:0 0 33%"] img,
  #wosm-modal-content [style*="flex: 0 0 33%"] img {
    position: absolute !important;
    width:    100% !important;
    height:   100% !important;
    object-fit: cover !important;
  }

  /* The outer flex div (display:flex;width:100%;height:100%) — stack it */
  #wosm-modal-content [style*="display:flex"][style*="width:100%"],
  #wosm-modal-content [style*="display: flex"][style*="width: 100%"] {
    flex-direction: column !important;
    height:         auto !important;  /* kill the height:100% */
  }

  /* Right content column: full width */
  #wosm-modal-content [style*="flex:1"][style*="padding:clamp"],
  #wosm-modal-content [style*="flex: 1"][style*="padding: clamp"] {
    width: 100% !important;
  }
}

/* ============================================================
   Filter bar — category buttons above the map
   ============================================================ */
.wosm-filter-bar {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
  padding:    10px 0;
}
.wosm-filter-btn {
  padding:          6px 14px;
  font-size:        13px;
  font-weight:      600;
  border-radius:    20px;
  cursor:           pointer;
  transition:       all 0.15s;
  line-height:      1.4;
  border:           2px solid var(--wosm-filter-border, #dcdcde);
  background:       var(--wosm-filter-bg,     #f6f7f7);
  color:            var(--wosm-filter-color,  #333);
}
.wosm-filter-btn:hover {
  border-color: var(--wosm-filter-active-bg, #2271b1);
  color:        var(--wosm-filter-active-bg, #2271b1);
  background:   var(--wosm-filter-bg, #f6f7f7);
}
.wosm-filter-btn.wosm-filter-active {
  background:   var(--wosm-filter-active-bg,    #2271b1);
  border-color: var(--wosm-filter-active-bg,    #2271b1);
  color:        var(--wosm-filter-active-color,  #fff);
}

/* ============================================================
   Search + locate bar — above the map
   ============================================================ */
.wosm-search-bar {
  display:     flex;
  gap:         6px;
  padding:     10px 0;
  align-items: center;
}
.wosm-search-input {
  flex:          1;
  min-width:     0;
  padding:       8px 12px;
  font-size:     14px;
  border:        2px solid #dcdcde;
  border-radius: 8px;
  outline:       none;
  transition:    border-color 0.15s;
  font-family:   inherit;
}
.wosm-search-input:focus { border-color: #2271b1; }
.wosm-search-btn,
.wosm-locate-btn {
  padding:       8px 12px;
  font-size:     16px;
  border:        2px solid #dcdcde;
  border-radius: 8px;
  background:    #fff;
  cursor:        pointer;
  transition:    all 0.15s;
  flex-shrink:   0;
  line-height:   1;
}
.wosm-search-btn:hover,
.wosm-locate-btn:hover {
  border-color: #2271b1;
  background:   #f0f6ff;
}

/* Nearest location note (auto-dismissed after 5s) */
.wosm-locate-note {
  padding:       8px 14px;
  background:    #2271b1;
  color:         #fff;
  font-size:     13px;
  font-weight:   600;
  border-radius: 8px;
  margin-bottom: 8px;
  animation:     wosm-fade-in 0.3s ease;
}
@keyframes wosm-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}