/**
 * @file
 * Reusable Interactive Map & Tooltip Card Stylesheet
 * SMIP EC Knowledge Hub module.
 */

/* ==========================================================================
   Map Panel Container (Results Page Column 3)
   ========================================================================== */
.ecl-results-map-panel {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 100% !important;
  flex: 1 1 100% !important;
  border-radius: var(--Radius-s);
  border: 1px solid #cfd8dc;
  overflow: hidden;
  background: #aad3df;
  box-sizing: border-box;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  position: relative !important;
}

.ecl-results-map__wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.ecl-results-map__canvas {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ecl-map-visual {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Unified Interactive Map Component
   ========================================================================== */
.ecl-interactive-map-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  flex: 1 1 auto !important;
  position: relative !important;
}

.ecl-interactive-map__wrapper {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  position: relative !important;
}

.ecl-map-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Map Pins & Hover States */
.ecl-map-pin {
  cursor: pointer !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.ecl-map-pin:focus,
.ecl-map-pin:focus-visible,
.ecl-map-pin:active {
  outline: none !important;
  box-shadow: none !important;
}

.ecl-map-pin__hit-area {
  fill: transparent !important;
  pointer-events: all !important;
}

.ecl-map-pin__circle,
.ecl-map-pin circle:not(.ecl-map-pin__hit-area) {
  r: 16px;
  fill: #CC16F9 !important;
  stroke: none !important;
  filter:
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)) drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)) !important;
  transition: r 0.2s ease, fill 0.2s ease, filter 0.2s ease !important;
}

.ecl-map-pin text {
  pointer-events: none !important;
  user-select: none !important;
}

.ecl-map-pin__label {
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  fill: #FFFFFF !important;
}

.ecl-map-pin:hover .ecl-map-pin__circle,
.ecl-map-pin.is-active .ecl-map-pin__circle,
.ecl-map-pin:hover circle:not(.ecl-map-pin__hit-area),
.ecl-map-pin.is-active circle:not(.ecl-map-pin__hit-area) {
  r: 17px !important;
  fill: #CC16F9 !important;
  filter:
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)) drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)) !important;
}

/* ==========================================================================
   Interactive Map Tooltip Card (Common Styles)
   ========================================================================== */
.ecl-map-tooltip-card {
  position: absolute;
  z-index: 1000 !important;
  width: 270px !important;
  max-width: calc(100% - 24px) !important;
  box-sizing: border-box !important;
  padding: 20px !important;
  gap: 8px !important;
  background: var(--Surface-surface-inverted, #FFFFFF) !important;
  border-radius: var(--Radius-s, 4px) !important;
  box-shadow:
    0 12px 32px 0 var(--ECEffectElevation03, rgba(0, 0, 46, 0.16)),
    0 0 0.5px 0.5px var(--ECEffectElevation05, rgba(0, 0, 46, 0.18)) !important;
  border: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: left !important;
  animation: eclFadeInUp 0.18s ease-out forwards;
  outline: none !important;
}

.ecl-map-tooltip-card,
.ecl-map-tooltip-card *,
.ecl-map-tooltip-card *:focus,
.ecl-map-tooltip-card *:focus-visible,
.ecl-map-tooltip-card *:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.ecl-map-tooltip-card[hidden] {
  display: none !important;
}

/* Adaptive Angle / Arrow Pointer */
.ecl-map-tooltip-card__arrow {
  position: absolute !important;
  left: 50%;
  transform: translateX(-50%) rotate(45deg) !important;
  width: 14px !important;
  height: 14px !important;
  background: #FFFFFF !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.ecl-map-tooltip-card__arrow--top,
.ecl-map-tooltip-card__arrow:not(.ecl-map-tooltip-card__arrow--bottom) {
  top: -7px !important;
  bottom: auto !important;
  border-top: 1px solid rgba(0, 0, 46, 0.08) !important;
  border-left: 1px solid rgba(0, 0, 46, 0.08) !important;
  box-shadow: -2px -2px 4px rgba(0, 0, 46, 0.04) !important;
}

.ecl-map-tooltip-card__arrow--bottom {
  bottom: -7px !important;
  top: auto !important;
  border-bottom: 1px solid rgba(0, 0, 46, 0.08) !important;
  border-right: 1px solid rgba(0, 0, 46, 0.08) !important;
  box-shadow: 2px 2px 4px rgba(0, 0, 46, 0.04) !important;
}

@keyframes eclFadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Close Button at Top Right */
.ecl-map-tooltip-card__close-btn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  z-index: 3 !important;
  transition: opacity 0.12s ease !important;
}

.ecl-map-tooltip-card__close-btn:hover {
  opacity: 0.7 !important;
}

.ecl-map-tooltip-card__close-icon {
  width: 16px !important;
  height: 16px !important;
  stroke: #00002E !important;
  stroke-width: 1.5px !important;
}

/* Title — match AI overview tooltip (clickable, same Visit Source URL) */
.ecl-map-tooltip-card__title {
  margin: 0 !important;
  padding: 0 !important;
  padding-right: 24px !important;
  position: relative !important;
  z-index: 2 !important;
}

.ecl-map-tooltip-card__title-link {
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 18px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--ec-color-primary, #004494) !important;
  text-decoration: none !important;
  text-align: left !important;
  display: block !important;
  cursor: pointer !important;
  transition: color 0.15s ease, text-decoration 0.15s ease !important;
}

/* Suppress any PDF, document, extlink, or file icons in map tooltip */
.ecl-map-tooltip-card a::before,
.ecl-map-tooltip-card a::after,
.ecl-map-tooltip-card__title::before,
.ecl-map-tooltip-card__title::after,
.ecl-map-tooltip-card__title-link::before,
.ecl-map-tooltip-card__title-link::after,
.ecl-map-tooltip-card img,
.ecl-map-tooltip-card .ext,
.ecl-map-tooltip-card [class*="pdf"],
.ecl-map-tooltip-card [class*="file-icon"],
.ecl-map-tooltip-card [class*="document"],
.ecl-map-tooltip-card svg:not(.ecl-map-tooltip-card__close-icon):not(.ecl-button__icon-external) {
  content: none !important;
  display: none !important;
}

.ecl-map-tooltip-card__title-link:hover,
.ecl-map-tooltip-card__title-link:focus-visible {
  text-decoration: underline !important;
  color: var(--ec-color-primary, #004494) !important;
  outline: none !important;
}

/* Bottom Action: Visit Source — match AI overview tooltip button */
.ecl-map-tooltip-card__action {
  display: flex !important;
  align-items: center !important;
  margin-top: 0 !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

.ecl-button--map-source {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 123px !important;
  height: 32px !important;
  padding: 8px var(--Spacing-s, 10px) !important;
  background: var(--ec-color-search-button, #FFBE5C) !important;
  color: var(--ec-color-text, #00002E) !important;
  border-radius: var(--Radius-s, 4px) !important;
  border: none !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease, opacity 0.15s ease !important;
}

.ecl-button--map-source:hover,
.ecl-button--map-source:focus-visible {
  background: var(--Surface-surface-secondary, #FFBE5C) !important;
  color: var(--ec-color-text, #00002E) !important;
  text-decoration: none !important;
  opacity: 0.92 !important;
  outline: none !important;
}

.ecl-button--map-source svg,
.ecl-button--map-source .ecl-button__icon-external,
.ecl-button--map-source .ecl-icon--external {
  width: 12px !important;
  height: 12px !important;
  stroke: var(--ec-color-text, #00002E) !important;
  stroke-width: 1.5px !important;
  color: var(--ec-color-text, #00002E) !important;
  fill: none !important;
  flex-shrink: 0 !important;
}

.ecl-button--map-source svg *,
.ecl-button--map-source .ecl-icon * {
  fill: none !important;
  stroke: var(--ec-color-text, #00002E) !important;
  stroke-width: 1.5px !important;
}

/* ==========================================================================
   Preview Mode Adaptations (Used inside Drawer Map Preview)
   ========================================================================== */
.ecl-interactive-map--preview {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.ecl-interactive-map--preview .ecl-interactive-map__wrapper {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.ecl-interactive-map--preview .ecl-map-svg,
.ecl-map-svg--preview {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

/* Drawer map preview tooltip inherits exact same styling as result page map tooltip */
.ecl-interactive-map--preview .ecl-map-tooltip-card,
.ecl-map-tooltip-card--preview {
  width: 250px !important;
  max-width: calc(100% - 16px) !important;
  z-index: 1000 !important;
}

.ecl-interactive-map--preview .ecl-map-tooltip-card[hidden],
.ecl-map-tooltip-card--preview[hidden] {
  display: none !important;
}

/* ==========================================================================
   Leaflet.js Real Interactive Map Integration
   ========================================================================== */
.ecl-leaflet-map-element {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  background: #f8fafc;
  z-index: 1;
}

.ecl-results-map-panel .ecl-interactive-map-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  flex: 1 1 100% !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.ecl-results-map-panel .ecl-interactive-map__wrapper {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow: hidden !important;
}

.ecl-results-map-panel .ecl-leaflet-map-element,
.ecl-results-map-panel .leaflet-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: #aad3df !important;
  z-index: 1 !important;
}

.ecl-results-map-panel .leaflet-tile-container img,
.ecl-results-map-panel .leaflet-tile {
  max-width: none !important;
  max-height: none !important;
}

/* Keep the selected location pin visible alongside the tooltip card. */
.ecl-results-map-panel .leaflet-marker-pane {
  z-index: 1001 !important;
}

.ecl-leaflet-pin-icon {
  background: transparent !important;
  border: none !important;
}

.ecl-leaflet-pin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 36px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transform-origin: 14px 36px;
  transition: transform 0.18s ease, filter 0.18s ease;
  filter: none !important;
}

.ecl-leaflet-marker-pin {
  display: block;
  width: 28px;
  height: 36px;
  overflow: visible;
  flex-shrink: 0;
}

.ecl-leaflet-marker-pin__body {
  fill: #CC16F9;
  transition: fill 0.18s ease;
}

.ecl-leaflet-marker-pin__hole {
  fill: #FFFFFF;
}

.ecl-leaflet-pin-badge:hover,
.ecl-leaflet-pin-badge.is-active,
.ecl-leaflet-pin-badge.is-hovered {
  transform: scale(1.18);
  filter: none !important;
}

.ecl-leaflet-pin-badge:hover .ecl-leaflet-marker-pin__body,
.ecl-leaflet-pin-badge.is-active .ecl-leaflet-marker-pin__body,
.ecl-leaflet-pin-badge.is-hovered .ecl-leaflet-marker-pin__body {
  /* Keep the resource-specific inline marker color on hover. */
  fill: inherit;
}

.leaflet-popup-content-wrapper {
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 0;
}

.leaflet-popup-content {
  margin: 12px 14px;
  font-family: var(--Font-family-inter), 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #1e293b;
}

.ecl-leaflet-popup-title {
  font-weight: 700;
  font-size: 14px;
  color: #0046FF;
  text-decoration: none;
  display: block;
  margin-bottom: 6px;
}

.ecl-leaflet-popup-title:hover {
  text-decoration: underline;
}

.ecl-leaflet-popup-meta {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 6px;
}

.ecl-leaflet-popup-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 12px;
  background: #e2e8f0;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
}

/* ==========================================================================
   Leaflet Zoom Controls (+ / -) in European Commission Style
   Applies identically to Main Results Map and Drawer Map Preview
   ========================================================================== */
.leaflet-control-zoom.leaflet-bar {
  border: 1px solid #CFD5E8 !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 46, 0.12) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  margin-top: 12px !important;
  margin-left: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 800 !important;
}

.leaflet-control-zoom a,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  width: 32px !important;
  height: 32px !important;
  line-height: 30px !important;
  background-color: #ffffff !important;
  color: #0046FF !important;
  font-family: var(--Font-family-inter), 'Inter', -apple-system, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  cursor: pointer !important;
  user-select: none !important;
}

.leaflet-control-zoom-in {
  border-bottom: 1px solid #E1E6F4 !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}

.leaflet-control-zoom-out {
  border-top: none !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover {
  background-color: #F0F4FF !important;
  color: #002B99 !important;
}

.leaflet-control-zoom-in:active,
.leaflet-control-zoom-out:active {
  background-color: #E2ECFF !important;
}

/* Drawer Mini-Map Preview sizing & unified container */
.ecl-side-drawer__map-preview .ecl-leaflet-map-element,
.ecl-side-drawer__map-preview .leaflet-container,
#ecl-drawer-interactive-map {
  width: 100% !important;
  height: 100% !important;
  min-height: 220px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: #aad3df !important;
  z-index: 1 !important;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
  touch-action: none !important;
}

/* Prevent scroll chaining across all interactive map containers */
.ecl-results-map-panel,
.ecl-side-drawer__map-preview,
.ecl-interactive-map-container,
.ecl-interactive-map__wrapper,
.ecl-leaflet-map-element,
.leaflet-container {
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
  touch-action: none !important;
}