/* Map container */
.rd-content-map {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  overflow: hidden;
  position: relative; /* For proper positioning of popups */
  aspect-ratio: 16/9; /* Maintain 16:9 aspect ratio */
  min-height: 450px; /* Minimum height regardless of width */
  background-color: #f5f5f5; /* Fallback background */
}

/* Loading placeholder - shown while map initializes */
.rd-map-loading-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  color: #6c757d;
  font-size: 14px;
  z-index: 1;
}

.rd-map-loading-placeholder span {
  padding: 12px 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Hide placeholder when map is initialized */
.rd-content-map.mapboxgl-map .rd-map-loading-placeholder,
.rd-content-map .mapboxgl-canvas-container ~ .rd-map-loading-placeholder {
  display: none;
}

/* Static map styles */
.rd-static-map-container {
  position: relative;
}

.rd-static-map-container .rd-static-map {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Static-first mode: static map as placeholder until dynamic loads */
.rd-static-first-container {
  position: relative;
}

.rd-static-first-container .rd-static-map-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* Transparent loading overlay for static-first mode */
.rd-static-first-loading {
  background: transparent;
}

.rd-static-first-loading .rd-map-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: rd-spin 0.8s linear infinite;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@keyframes rd-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   Dynamic Map Shortcode Styles
   ============================================ */

/* Base container for dynamic maps */
.rd-dynamic-map {
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
}

/* Loading placeholder for dynamic-only mode */
.rd-dynamic-map-loading-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 100%);
  gap: 12px;
}

.rd-dynamic-map-loading-placeholder span {
  color: #666;
  font-size: 14px;
}

/* Consent overlay */
.rd-map-consent-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.rd-map-consent-content {
  background: white;
  padding: 24px 32px;
  border-radius: 8px;
  text-align: center;
  max-width: 320px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.rd-map-consent-content p {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 15px;
  line-height: 1.5;
}

.rd-map-consent-button {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.rd-map-consent-button:hover {
  background: #2563eb;
}

/* Error state */
.rd-dynamic-map-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef2f2;
  color: #dc2626;
  font-size: 14px;
}

.rd-dynamic-map-unavailable {
  padding: 40px;
  text-align: center;
  background: #f5f5f5;
  color: #666;
  border-radius: 8px;
}

/* Selected marker styling - icon will be swapped in JS */
.rd-marker-selected {
  z-index: 1000 !important;
}

.rd-map-outer-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 30px;
  margin-top: 30px;
}

/* Simple breakout for GenerateBlocks gb-container (60px margin on each side) */
.rd-map-outer-container.rd-map-breakout-gb {
  width: calc(100% + 120px); /* 60px left + 60px right */
  margin-left: -60px;
  margin-right: -60px;
  max-width: calc(100% + 120px);
}

.rd-map-outer-container.rd-map-breakout-gb .rd-content-map {
  border-radius: 0; /* Remove border radius for full-width */
}

/* Responsive: disable breakout on mobile */
@media (max-width: 768px) {
  .rd-map-outer-container.rd-map-breakout-gb {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Breakout styling - breaks out of narrow content containers */
.rd-map-outer-container.rd-map-breakout {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.rd-map-outer-container.rd-map-breakout .rd-content-map {
  border-radius: 0; /* Remove border radius for full-width */
}

/* Alternative: Breakout with max-width constraint */
.rd-map-outer-container.rd-map-breakout-constrained {
  width: 100vw;
  max-width: 1400px; /* Or whatever max width you prefer */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  margin-right: 0;
  border: 20px solid white;
}

.rd-map-outer-container.rd-map-breakout-constrained .rd-content-map {
  border-radius: 0; /* Remove border radius for full-width */
}

/* Responsive: disable breakout on mobile if desired */
@media (max-width: 768px) {
  .rd-map-outer-container.rd-map-breakout,
  .rd-map-outer-container.rd-map-breakout-constrained {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }
}

/* Map loading state */
.rd-map-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  z-index: 10;
}

.rd-map-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.rd-map-loading-text {
  color: #333;
  font-size: 16px;
  margin-top: 10px;
}

.rd-map-error {
  padding: 20px;
  background: #ffebee;
  color: #c62828;
  border-radius: 4px;
  text-align: center;
  max-width: 80%;
}

.rd-map-error-detail {
  font-size: 14px;
  margin-top: 10px;
  color: #9e9e9e;
}

/* Pulse effect */
.rd-pulse {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 123, 255, 0.4);
  opacity: 1;
  animation: pulse 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  70% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}

/* New class-based pulse effect for markers */
.rd-pulse-marker {
  animation: marker-pulse 0.6s ease-out;
}

@keyframes marker-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

/* Marker pulse effect */
.rd-marker-pulse {
  animation: rd-marker-pulse 0.6s ease-in-out;
}

@keyframes rd-marker-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

/* Make sure the marker element can be animated */
.mapboxgl-marker {
  will-change: transform;
  cursor: pointer;
}

/* Custom marker styling - no background circle */
.rd-custom-marker {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  /* No background color, border or border-radius */
}

/* Primary and secondary marker styling */
.rd-primary-marker {
  /* Primary markers are slightly larger */
  width: 30px;
  height: 40px;
}

.rd-secondary-marker {
  /* Secondary markers are slightly smaller */
  width: 25px;
  height: 35px;
  opacity: 0.85; /* Slightly transparent */
}

/* Primary marker styling */
.rd-marker-primary {
  background-color: #2e99ce;
}

/* Secondary marker styling */
.rd-marker-secondary {
  background-color: #1a5980;
}

/* Status update marker styling */
.rd-marker-type-status_update.rd-marker-primary,
.rd-marker-type-status_update {
  background-color: #fc0d87 !important;
}

.rd-marker-type-status_update.rd-marker-secondary {
  background-color: #a9075b !important;
}

/* Rich content marker styling */
.rd-marker-content {
  display: flex;
  flex-direction: row; /* Horizontal layout by default */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  width: 100%;
  max-width: 100%;
  gap: 12px; /* Space between image and content */
}

.rd-marker-image {
  flex: 0 0 auto; /* Don't grow or shrink */
  width: 100px; /* Fixed width for image container */
  margin-bottom: 0;
  border-radius: 4px;
  overflow: hidden;
}

.rd-marker-image img {
  width: 100%;
  height: auto; /* Maintain natural aspect ratio */
  max-height: none; /* Remove height restriction */
  object-fit: cover; /* Maintain aspect ratio while covering container */
  display: block;
}

.rd-marker-info {
  flex: 1; /* Take up remaining space */
  min-width: 0; /* Allow text to truncate */
  overflow: hidden; /* Hide overflow */
}

.rd-marker-info h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.3;
  white-space: normal; /* Allow title to wrap */
  overflow: visible; /* Show full title */
}

.rd-marker-info h3 a {
  color: #0073aa;
  text-decoration: none;
}

.rd-marker-info h3 a:hover {
  text-decoration: underline;
}

.rd-marker-meta {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rd-marker-excerpt {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limit to 3 lines by default */
  line-clamp: 3; /* Standard property for compatibility */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rd-marker-link {
  margin-top: 5px;
}

.rd-marker-link a {
  display: inline-block;
  padding: 4px 10px;
  background: #52c5ff;
  color: white;
  text-decoration: none;
  border-radius: 3px;
  font-size: 13px;
}

.rd-marker-link a:hover {
  background: #005c8a;
  color: white;
}

/* Map popup styling */
.rd-map-popup {
  max-width: 300px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.rd-map-popup h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 1.2;
  color: #333;
  font-weight: 600;
}

/* Marker content layout */
.rd-marker-content {
  display: flex;
  flex-direction: column;
}

/* For larger screens, use a two-column layout */
@media (min-width: 480px) {
  .rd-marker-content {
    flex-direction: row;
  }

  .rd-marker-image {
    width: 40%;
    margin-right: 15px;
  }

  .rd-marker-info {
    width: 60%;
  }
}

/* Image styling */
.rd-marker-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* Post type badge */
.rd-marker-type {
  display: inline-flex;
  align-items: center;
  background-color: #f0f0f0;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.rd-marker-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Content excerpt */
.rd-marker-excerpt {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

/* Link button */
.rd-marker-link {
  margin-top: 10px;
}

.rd-marker-button {
  display: inline-block;
  padding: 6px 12px;
  background-color: #52c5ff; /* Requested blue color */
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
}

.rd-marker-button:hover {
  background-color: #3ab0e9;
}

/* Navigation button styles */
.rd-map-navigate {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 8px;
}

.rd-map-navigate-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 12px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #333;
}

.rd-map-navigate-button:hover {
  background-color: #e0e0e0;
}

.rd-map-navigate-icon {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L19 21 12 17 5 21 12 2z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}

.rd-map-navigate-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 0;
  width: 100%;
  display: none;
  z-index: 10;
  margin-top: 4px;
  overflow: hidden;
}

.rd-map-navigate-dropdown.active {
  display: block;
}

.rd-map-navigate-dropdown a {
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: #333;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
}

.rd-map-navigate-dropdown a:last-child {
  border-bottom: none;
}

.rd-map-navigate-dropdown a:hover {
  background-color: #f5f5f5;
  text-decoration: none !important;
}

/* Secondary marker popup styling */
.rd-map-popup-secondary .rd-marker-button {
  background-color: #888;
}

.rd-map-popup-secondary .rd-marker-button:hover {
  background-color: #666;
}

/* Ensure Mapbox canvas respects container */
.rd-content-map .mapboxgl-canvas-container,
.rd-content-map .mapboxgl-canvas {
  max-width: 100%;
  box-sizing: border-box;
}

/* Mapbox popup overrides */
.rd-content-map .mapboxgl-popup-content {
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  overflow: hidden; /* Hide overflow instead of scrolling */
}

.rd-content-map .mapboxgl-popup {
  max-width: var(
    --popup-width,
    300px
  ) !important; /* Use CSS variable with fallback */
  z-index: 10; /* Ensure popup is above other elements */
}

/* Reset any custom positioning that might interfere with Mapbox's positioning */
.rd-content-map .rd-mapbox-popup {
  position: relative !important;
  transform: none !important;
}

.rd-content-map .mapboxgl-popup-content h3 {
  margin: 0 0 0px;
  font-size: 16px;
  line-height: 1.3;
}

.rd-content-map .mapboxgl-popup-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.rd-content-map .mapboxgl-popup-close-button {
  font-size: 18px;
  padding: 5px 10px;
  z-index: 15; /* Ensure close button is above all content */

  border-radius: 50%; /* Make it circular */
  top: 5px;
  right: 5px;
  color: #333;
  border: none;
  cursor: pointer;
}

.rd-content-map .mapboxgl-popup-close-button:hover {
  color: #000;
}

/* Fix for secondary markers */
.rd-secondary-marker {
  opacity: 0.85;
  transform: scale(0.9);
}

/* Style secondary marker popups differently */
.rd-map-popup-secondary {
}

.rd-map-popup-secondary h3 {
  font-size: 1em;
  margin-bottom: 0.5em;
}

.rd-map-popup-secondary .rd-map-popup-image {
  max-height: 100px;
}

.rd-map-popup-secondary .rd-map-popup-content {
  font-size: 0.9em;
  font-style: italic;
}

/* Desktop-specific enhancements */
@media (min-width: 768px) {
  .rd-content-map {
    aspect-ratio: 16/9; /* Widescreen on desktop */
    min-height: 500px; /* Taller minimum height on desktop */
  }

  .rd-marker-image {
    width: 200px; /* Larger image on desktop */
  }

  .rd-marker-image img {
    width: 100%;
    height: auto; /* Maintain natural aspect ratio */
    max-height: none; /* Remove height restriction */
  }

  .rd-marker-info h3 {
    font-size: 18px; /* Larger title on desktop */
    margin-bottom: 10px;
  }

  .rd-marker-excerpt {
    font-size: 15px; /* Larger excerpt text */
    line-height: 1.6;
    -webkit-line-clamp: 5; /* Show more lines on desktop */
    line-clamp: 5; /* Standard property for compatibility */
    margin-bottom: 15px;
  }

  .rd-marker-link a {
    padding: 5px 12px; /* Larger button */
    font-size: 14px;
  }

  .rd-content-map .mapboxgl-popup {
    max-width: 500px !important; /* Even larger width on desktop */
  }

  .rd-content-map .mapboxgl-popup-content {
    padding: 20px; /* More padding on desktop */
  }

  .rd-marker-image {
    height: auto;
    min-height: 100px;
    max-height: none;
  }
}

/* Mobile-specific adjustments */
@media (max-width: 767px) {
  .rd-content-map {
    aspect-ratio: 1/1; /* Square on mobile */
  }

  .rd-marker-content {
    flex-direction: column; /* Stack vertically on mobile */
  }

  .rd-marker-image {
    width: 80px; /* Smaller width on mobile */
    margin-bottom: 10px;
    float: left; /* Float image left on mobile */
    margin-right: 10px;
  }

  .rd-content-map .mapboxgl-popup-content {
    padding: 12px;
  }

  .rd-content-map .mapboxgl-popup {
    max-width: var(
      --rd-popup-mobile-width,
      90%
    ) !important; /* Use mobile width variable */
  }

  .rd-marker-info h3 {
    font-size: 15px;
    margin-bottom: 6px;
  }

  .rd-marker-excerpt {
    font-size: 13px;
    line-height: 1.4;
    -webkit-line-clamp: 2; /* Limit to 2 lines on mobile */
    line-clamp: 2; /* Standard property for compatibility */
    clear: both; /* Clear the float */
  }
}

.rd-content-map-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  color: #334155; /* neutral dark slate */
  border: 1px solid #e6eef7; /* soft blue-gray border */
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  text-align: center;
  font-size: 14px;
  line-height: 1.3;
  max-width: 720px;
  margin: 10px auto;
}

.rd-content-map-unavailable::before {
  content: "🗺️"; /* small map emoji as a lightweight icon */
  font-size: 20px;
  display: inline-block;
  line-height: 1;
}

/* ==========================================================================
   Auto-Inserted Location Section
   ========================================================================== */

.rd-auto-location-section {
  margin: 30px 0;
  padding: 20px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.rd-auto-location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.rd-auto-location-map {
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  min-width: 0; /* Prevent grid blowout */
}

.rd-auto-location-map .rd-content-map {
  height: 280px;
  width: 100%;
}

.rd-auto-location-map .rd-content-map .mapboxgl-map {
  width: 100% !important;
  height: 100% !important;
}

.rd-auto-location-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rd-auto-location-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
}

.rd-auto-location-title--centered {
  text-align: center;
  margin-bottom: 16px;
}

.rd-auto-location-address {
  color: #475569;
}

.rd-auto-location-address strong {
  display: block;
  margin-bottom: 4px;
  color: #334155;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.rd-auto-location-address p {
  margin: 0;
  line-height: 1.5;
}

.rd-auto-google-maps-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #3b82f6;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background-color 0.2s;
  width: fit-content;
}

.rd-auto-google-maps-link:hover {
  background: #2563eb;
  color: white;
}

.rd-auto-google-maps-link svg {
  flex-shrink: 0;
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
  .rd-auto-location-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .rd-auto-location-section {
    padding: 16px;
  }
}

/* ==========================================================================
   Auto-Inserted POI Section
   ========================================================================== */

.rd-auto-poi-section {
  margin: 40px 0;
  padding: 24px 0;
  border-top: 1px solid #e2e8f0;
}

.rd-auto-poi-title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1e293b;
}

.rd-auto-poi-description {
  margin: 0 0 20px;
  color: #64748b;
  font-size: 1rem;
}

/* ==========================================================================
   2-Column Layout for Map + List
   ========================================================================== */

.rd-dynamic-map-layout-2col {
  display: flex;
  gap: 24px;
  width: 100%;
}

.rd-dynamic-map-layout-2col .rd-dynamic-map-layout-map,
.rd-dynamic-map-layout-2col .rd-dynamic-map-layout-list {
  flex: 1 1 0;
  min-width: 0;
}

.rd-dynamic-map-layout-2col .rd-dynamic-map-layout-list {
  max-height: 600px;
  overflow-y: auto;
}

/* Stack vertically on narrow viewports */
@media (max-width: 700px) {
  .rd-dynamic-map-layout-2col {
    flex-direction: column;
  }

  .rd-dynamic-map-layout-2col .rd-dynamic-map-layout-list {
    max-height: none;
  }
}