/**
 * Map Cards Interaction - Styles
 */

/* ===== LAYOUT: Map 100% right, cards scroll left ===== */
.mci-layout-root {
  display: flex !important;
  flex-direction: row !important;
  min-height: 100vh !important;
  position: relative;
}

/* Left: Scroll column */
.mci-scroll-content {
  flex: 1 1 50% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  min-height: 0 !important;
}

/* Right: Map column - full height */
.mci-scroll-map {
  flex: 1 1 50% !important;
  min-height: 100vh !important;
  height: 100% !important;
  position: sticky !important;
  top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Map container fill */
.mci-scroll-map .wpgmp_map_container,
.mci-scroll-map .wpgmza_map,
.mci-scroll-map .wpgmp_map_parent,
.mci-scroll-map .wpgmp_map,
.mci-scroll-map .mci-map-wrapper {
  flex: 1 !important;
  min-height: 100% !important;
  height: 100% !important;
}

.mci-scroll-map [id^="map"],
.mci-scroll-map .mci-map-container {
  min-height: 100% !important;
  height: 100% !important;
}

/* ===== CARD HIGHLIGHT (bottom border when in viewport) ===== */
.mci-scroll-content .mci-card-highlight {
  border-bottom-width: 3px !important;
  border-bottom-style: solid !important;
  border-bottom-color: var(--mci-highlight, #A31E22) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ===== STICKY BOTTOM CARD ON MAP (replaces tooltip) ===== */
.mci-sticky-card {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  background: #fff !important;
  border-top: 3px solid var(--mci-highlight, #A31E22) !important;
  padding: 16px 20px !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 72px !important;
}

.mci-sticky-card-inner {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
}

.mci-sticky-card-number {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% 50% 50% 0 !important;
  background: var(--mci-highlight, #A31E22) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mci-sticky-card-title {
  flex: 1 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: #333 !important;
}

.mci-sticky-card-link {
  flex-shrink: 0 !important;
  padding: 10px 20px !important;
  background: var(--mci-highlight, #A31E22) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  transition: opacity 0.2s !important;
}

.mci-sticky-card-link:hover {
  color: #fff !important;
  opacity: 0.9 !important;
}

/* Hide default map tooltip/infowindow - we use sticky card instead */
.mci-scroll-map .gm-style-iw,
.mci-scroll-map .gm-style-iw-c,
.mci-scroll-map .gm-style-iw-d,
.mci-scroll-map .wpgmp_infowindow,
.mci-scroll-map .wpgmza-infowindow {
  display: none !important;
  visibility: hidden !important;
}

/* ===== NUMBERED MAP PINS (overlay labels) ===== */
.mci-marker-label {
  position: absolute !important;
  z-index: 100 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% 50% 50% 0 !important;
  background: var(--mci-highlight, #A31E22) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: rotate(-45deg) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
  pointer-events: none !important;
}

.mci-marker-label span {
  transform: rotate(45deg) !important;
}

.mci-marker-label.active {
  background: #1a73e8 !important;
  transform: rotate(-45deg) scale(1.15) !important;
}

/* ===== MOBILE TOGGLE ===== */
.mci-mobile-toggle {
  display: none !important;
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 1000 !important;
  background: #fff !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
  padding: 4px !important;
  gap: 2px !important;
}

.mci-mobile-toggle button {
  width: 44px !important;
  height: 44px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #444 !important;
  transition: background 0.2s, color 0.2s !important;
}

.mci-mobile-toggle button:hover,
.mci-mobile-toggle button.active {
  background: var(--mci-highlight, #A31E22) !important;
  color: #fff !important;
}

.mci-mobile-toggle svg {
  width: 22px !important;
  height: 22px !important;
}

/* ===== MOBILE (≤991px) ===== */
@media (max-width: 991px) {
  .mci-mobile-toggle {
    display: flex !important;
  }

  .mci-layout-root {
    flex-direction: column !important;
  }

  .mci-scroll-content {
    flex: 1 1 auto !important;
    min-height: 50vh !important;
  }

  .mci-scroll-map {
    min-height: 50vh !important;
    position: relative !important;
  }

  .scroll-content-column.mci-hidden,
  .mci-scroll-content.mci-hidden {
    display: none !important;
  }

  .scroll-map-column.mci-hidden,
  .mci-scroll-map.mci-hidden {
    display: none !important;
  }

  .mci-sticky-card {
    position: relative !important;
    margin-top: auto !important;
  }
}