/**
 * Map Marker Details Drawer Styles
 * Theme-aware styling matching map-filter.css design language
 * Deterministic positioning - always viewport-anchored
 *
 * ARCHITECTURE: The drawer elements are moved to document.body by JS at init
 * time. This escapes any ancestor containing blocks (e.g. #main-content with
 * will-change:transform, #map-container with transform:translateX(-50%)) that
 * would break position:fixed. The JS positionOverlay() function calculates a
 * viewport-clamped top value on desktop; on mobile, CSS handles the bottom-sheet.
 */

/* Marker Details Backdrop - Remove dimming for clean spotlight effect */
.marker-details-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent; /* No dimming - rely on marker spotlight for focus */
  z-index: 1050; /* Must be above pledge section modal (1040/1041) so shared link info panels are visible */
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none; /* Allow interaction with map while drawer is open */
}

.marker-details-backdrop:not(.hidden) {
  opacity: 1;
}

.marker-details-backdrop.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Marker Details Overlay Container
 * Desktop: slides in from the right, vertically centered by JS.
 * top is set by JS positionOverlay() so no CSS top here.
 * Mobile: bottom sheet (see media query below). */
.marker-details-overlay {
  position: fixed;
  right: 4rem;
  transform: translateX(100%);
  z-index: 1051; /* Must be above pledge section modal (1040/1041) */
  width: 360px;
  max-width: 90vw;
  max-height: min(80vh, calc(100dvh - 24px));
  pointer-events: auto;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.marker-details-overlay:not(.hidden) {
  transform: translateX(0);
}

.marker-details-overlay.hidden {
  transform: translateX(100%);
  pointer-events: none;
}

/* Marker Details Container - Glassmorphism Design (matches filter) */
.marker-details-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Ensure proper flex calculation for children */
  min-height: 0;
}

.marker-details-container:focus-within {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Dark theme */
html.dark .marker-details-container {
  background: rgba(0, 0, 0, 0.95);
  border-color: rgba(147, 51, 234, 0.2);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Marker Details Header */
.marker-details-header {
  /* Use a three-column grid so the award can sit centered between the
     title area and the action rail regardless of title length. Title
     stretches, award is auto, actions are auto. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  /* tighter header padding to reduce overall panel height */
  padding: 6px 10px;
  border-bottom: 1px solid var(--theme-toggle-border, rgba(0,0,0,0.06));
}

.marker-details-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex-shrink: 0;
  position: relative;
}

.marker-details-award-floating {
  /* Place the award visually between the title group and action rail.
     Use normal document flow so it will center in the available gap when
     header is using flex layout. Keep it non-intrusive and pointer-friendly. */
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
  z-index: 11;
}

/* Award attention animation: small pop + subtle vertical motion to draw eye
   while confetti plays. Applied to the button (or inner img) via
   .marker-details-award-animate class. */
@keyframes award-pop {
  0% { transform: translateY(0) scale(1); }
  18% { transform: translateY(-8px) scale(1.08); }
  36% { transform: translateY(0) scale(1); }
  60% { transform: translateY(-4px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

.marker-details-award-animate {
  animation: award-pop 1.35s cubic-bezier(.2,.9,.3,1) both;
  will-change: transform;
}

.marker-details-award-animate .marker-details-award-img,
.marker-details-award-animate.marker-details-award-img {
  /* ensure the image also benefits from the transform origin */
  transform-origin: center center;
}

html.dark .marker-details-header {
  border-color: rgba(255, 255, 255, 0.06);
}

.marker-details-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--site-text, #000);
  margin: 0;
  text-align: left;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  flex: 1;
  min-width: 0;
  width: 100%;
  position: relative;
}

html.dark .marker-details-title {
  color: var(--site-text, #fff);
}

.marker-details-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: var(--site-text, rgba(0,0,0,0.6));
  margin: 0;
  text-align: center;
}

/* Header: owner label placed beside the title */
.marker-details-title-group {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  min-width: 0; /* allow flex children to shrink */
  overflow: hidden;
}

.marker-details-owner-label {
  /* Match section header typography exactly */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(147, 51, 234, 1);
  margin: 0;
  text-transform: uppercase;
  display: inline-block;
  flex: 0 0 auto;
  line-height: 1.2;
  text-align: left;
}

/* Wrapper for title + colocated text so they form a column aligned together */
.marker-details-title-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.marker-details-title-ticker-track {
  display: inline-flex;
  align-items: baseline;
  width: max-content;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.marker-details-title-ticker-item,
.marker-details-title-ticker-gap {
  display: inline-block;
  white-space: nowrap;
}

.marker-details-title-ticker-gap {
  width: 28px;
  opacity: 0;
  flex: 0 0 auto;
}

.marker-details-title--ticker-active .marker-details-title-ticker-track {
  animation: marker-details-title-ticker var(--ticker-duration, 14s) linear infinite;
}

@keyframes marker-details-title-ticker {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--ticker-distance, 0px)), 0, 0); }
}

/* Colocated "and X others" text - aligned with the owner name, compact */
.marker-details-colocated {
  font-size: 11px;
  font-weight: 400;
  color: var(--site-text, rgba(0,0,0,0.45));
  margin-top: 1px;
  line-height: 1.2;
}

html.dark .marker-details-colocated {
  color: rgba(255, 255, 255, 0.45);
}


/* Section wrappers (OWNER / IMAGES / LOCATION / config-driven) */
.marker-details-sections {
  display: flex;
  flex-direction: column;
  /* slightly tighter spacing to make the panel more compact */
  gap: 6px;
  /* Keep modest horizontal padding so headers align with top header */
  padding: 4px 0;
}

/* Each logical section is a horizontal row: HEADER | BODY
   - Header should be all-caps, smaller than content and vertically aligned
   - Body should wrap and allow long content to break/wrap
   - Keeps image section untouched (image-specific classes stay the same)
*/
.marker-details-section {
  display: flex;
  flex-direction: row;
  /* default to flex-start; specific non-media sections will align by baseline */
  align-items: flex-start;
    gap: 8px;
  /* reduced vertical padding to keep panel shorter */
    padding: 4px 0;
  flex-wrap: wrap; /* allow content to wrap below header on very small widths */
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background-color 120ms ease, border-color 120ms ease;
}

/* For non-media rows (TYPE, LOCATION, OWNER) align items by text baseline
   so the label's bottom and the value's baseline sit visually consistent. */
.marker-details-section:not(.marker-details-section--media) {
  align-items: baseline;
}

.marker-details-section[data-section="description"] {
  align-items: flex-start;
  position: relative; /* make description section a positioning context for attribution */
}

.marker-details-section[data-section="description"] .marker-details-section-body {
  display: block;
}

.marker-details-section-header {
  font-size: 11px; /* smaller than content */
  font-weight: 700;
  letter-spacing: 0.04em;
  /* Use theme purple for section headers in light mode */
  color: rgba(147, 51, 234, 1);
  margin: 0;
  text-transform: uppercase;
  flex: 0 0 auto; /* auto width so labels don't waste horizontal space */
  min-width: 72px;
  line-height: 1.2;
  display: inline-block;
  align-self: flex-start; /* consistently align header at the top of the section */
  text-align: left; /* explicitly left-align header text */
  padding-right: 6px; /* small breathing room before the body */
}

/* Reserve vertical space for the gallery so the panel doesn't shift
   when the images load. The gallery main area + thumbnail track is
   approximated here and tuned for responsive breakpoints. */
.marker-details-gallery {
  min-height: 240px;
  margin: 0 0 8px 0;
}

.marker-details-gallery-loading,
.marker-details-gallery-placeholder {
  min-height: 180px; /* match marker-details-gallery-main-wrap min-height */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 8px;
  background: rgba(0,0,0,0.03);
}

/* Smaller gallery footprint on narrow screens */
@media (max-width: 480px) {
  .marker-details-gallery { min-height: 220px; }
  .marker-details-gallery-loading, .marker-details-gallery-placeholder { min-height: 140px; }
}

.marker-details-section-header {
  font-size: 11px; /* smaller than content */
  font-weight: 700;
  letter-spacing: 0.04em;
  /* Use theme purple for section headers in light mode */
  color: rgba(147, 51, 234, 1);
  margin: 0;
  text-transform: uppercase;
  flex: 0 0 auto; /* auto width so labels don't waste horizontal space */
  min-width: 56px; /* shrink label column to free space for values */
  line-height: 1.2;
  display: inline-block;
  align-self: baseline; /* align header baseline with value baseline for consistent rows */
  text-align: left; /* explicitly left-align header text */
  padding-right: 4px; /* smaller breathing room before the body */
}

.marker-details-description-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--site-text, rgba(0,0,0,0.9));
}

.marker-details-description-scroll {
  max-height: 200px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
}

.marker-details-description-scroll::-webkit-scrollbar {
  width: 6px;
}

.marker-details-description-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.marker-details-description-scroll::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.35);
  border-radius: 3px;
}

.marker-details-description-section {
  margin: 0 0 12px;
}

.marker-details-description-section:last-child {
  margin-bottom: 0;
}

.marker-details-description-section-title {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.marker-details-description-section-title--lvl-3 {
  font-size: 12.5px;
  opacity: 0.96;
}

.marker-details-description-section-title--lvl-4,
.marker-details-description-section-title--lvl-5,
.marker-details-description-section-title--lvl-6 {
  font-size: 12px;
  opacity: 0.92;
}

.marker-details-description-section-body p {
  margin: 0 0 8px;
}

.marker-details-description-section-body p:last-child {
  margin-bottom: 0;
}

.marker-details-description-text--loading {
  opacity: 0.82;
}

.marker-details-description-text--muted {
  opacity: 0.72;
}

.marker-details-scientific-name {
  margin-bottom: 6px;
  font-size: 1.05em;
}

.marker-details-description-attribution {
  position: absolute;
  right: 8px; /* small inset from right edge of the description section */
  bottom: 8px; /* anchor just above the section bottom */
  z-index: 3; /* ensure it sits above the description content */
}

.marker-details-description-attribution-container {
  position: relative;
}

.marker-details-description-attribution-icon {
  border: none;
  background: transparent;
  color: var(--site-text, #111);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.marker-details-description-attribution-icon:hover {
  transform: translateY(-1px);
}

.marker-details-description-attribution-tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 200px;
  max-width: min(82vw, 320px);
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(17, 17, 17, 0.98);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  font-size: 12px;
  line-height: 1.35;
  z-index: 20;
}

.marker-details-description-attribution-container.is-open .marker-details-description-attribution-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.marker-details-description-attribution-tooltip a {
  color: #c4b5fd;
  text-decoration: underline;
}

html.dark .marker-details-description-text {
  color: rgba(255, 255, 255, 0.92);
}

html.dark .marker-details-description-attribution-icon {
  color: rgba(255, 255, 255, 0.95);
}

html.dark .marker-details-description-attribution-icon:hover {
  transform: translateY(-1px);
}

/* Vertically center the section body content for non-media rows so labels
   (like TYPE / LOCATION) align neatly with their values. Media sections keep
   their column layout and don't use this rule. */
.marker-details-section:not(.marker-details-section--media) .marker-details-section-body {
  display: flex;
  align-items: baseline; /* align value baseline with header baseline */
  padding-left: 4px; /* smaller separation from the header label */
}

.marker-details-section[data-section="description"] .marker-details-section-body {
  align-items: flex-start;
}

/* Media sections (IMAGE/Gallery) should stack vertically so the image
   body gets the full drawer width, maximizing image size. */
.marker-details-section--media {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px 0 0 0; /* slightly tighter top padding for media */
  border-bottom: none; /* avoid double border under media blocks */
}

.marker-details-section--media .marker-details-section-header {
  flex: 0 0 auto;
  text-align: left;
  margin-bottom: 4px;
  align-self: flex-start; /* ensure media headers sit at the left edge above media */
}

.marker-details-section--media .marker-details-section-body {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.marker-details-owner-name {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: clamp(16px, 5vw, 22px); /* auto-scale: generous size, never below 16px */
  line-height: 1.15;
  color: var(--site-text, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Container query: on very small widths allow text to wrap at smaller size */
@container (max-width: 260px) {
  .marker-details-owner-name {
    white-space: normal;
    font-size: 15px;
  }
}
.marker-details-owner-email { font-size:13px; color:rgba(0,0,0,0.6); }

.marker-details-photo-wrap { text-align:center; }
.marker-details-single-photo { max-width:100%; border-radius:8px; display:block; margin:0 auto; }

.marker-details-list { margin:0 0 0 16px; padding:0; }
.marker-details-list li { margin-bottom:4px; }
.marker-details-kv { margin-bottom:6px; }

/* Dark theme: use a slightly muted purple for better contrast on dark backgrounds */
/* Dark theme: use bright yellow for headers for visibility on dark backgrounds */
html.dark .marker-details-section-header { color: #ffd700; }
html.dark .marker-details-section-body { color: rgba(255,255,255,0.9); }

html.dark .marker-details-subtitle {
  color: #ffffff;
}

/* Make dividers visible in dark mode: use a light translucent divider on dark backgrounds */
html.dark .marker-details-section {
  border-bottom-color: rgba(255,255,255,0.08);
}

/* Slightly stronger divider for focused / hovered sections to improve contrast */
.marker-details-section:focus-within,
.marker-details-section:hover {
  border-bottom-color: rgba(0,0,0,0.12);
}

/* Ensure hover/focus state uses a light divider in dark mode */
html.dark .marker-details-section:focus-within,
html.dark .marker-details-section:hover {
  border-bottom-color: rgba(255,255,255,0.12);
}

.marker-details-breed {
  font-size: 13px;
  color: var(--site-text, rgba(0,0,0,0.7));
  margin: 4px 0 0 0;
  text-align: left;
  font-style: italic;
}

html.dark .marker-details-breed {
  color: #ffffff;
}

/* Dark-mode override for owner label to match section headers */
html.dark .marker-details-owner-label { color: #ffd700; }

/* Marker Details Content - Scrollable area */
.marker-details-content {
  flex: 1;
  overflow-y: auto;
  /* Slightly reduced padding to keep panel compact while retaining readability */
  padding: 8px 12px;
  scrollbar-width: thin;
  /* Ensure minimum height for scrolling to work properly */
  min-height: 0;
}

.marker-details-content::-webkit-scrollbar {
  width: 6px;
}

.marker-details-content::-webkit-scrollbar-track {
  background: transparent;
}

.marker-details-content::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.3);
  border-radius: 3px;
}

/* Image Gallery Section */
.marker-details-gallery {
  margin: 0 0 16px 0;
}

.marker-details-gallery-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.marker-details-gallery-nav {
  background: none;
  border: 1px solid rgba(128, 128, 128, 0.25);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--site-text, #333);
  transition: all 0.2s ease;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.marker-details-gallery-nav:hover {
  background: rgba(128, 128, 128, 0.1);
  border-color: rgba(128, 128, 128, 0.4);
}

.marker-details-gallery-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

html.dark .marker-details-gallery-nav {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.15);
}

html.dark .marker-details-gallery-nav:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.marker-details-gallery-main-wrap {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4/3;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  cursor: pointer;
}

html.dark .marker-details-gallery-main-wrap {
  background: rgba(255, 255, 255, 0.05);
}

.marker-details-gallery-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.marker-details-gallery-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.marker-details-gallery-track::-webkit-scrollbar {
  height: 4px;
}

.marker-details-gallery-track::-webkit-scrollbar-track {
  background: transparent;
}

.marker-details-gallery-track::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.3);
  border-radius: 2px;
}

.marker-details-gallery-thumb {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
  touch-action: manipulation;
}

.marker-details-gallery-thumb:hover {
  border-color: rgba(220, 38, 38, 0.5);
}

.marker-details-gallery-thumb.active {
  border-color: rgba(220, 38, 38, 1);
}

html.dark .marker-details-gallery-thumb:hover {
  border-color: rgba(147, 51, 234, 0.5);
}

html.dark .marker-details-gallery-thumb.active {
  border-color: rgba(147, 51, 234, 1);
}

.marker-details-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.marker-details-gallery-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
}

html.dark .marker-details-gallery-loading {
  color: rgba(255, 255, 255, 0.5);
}

.marker-details-gallery-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: marker-details-spin 0.8s linear infinite;
  margin-right: 6px;
}

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

/* Location Info */
.marker-details-location {
  font-size: 14px;
  color: var(--site-text, rgba(0,0,0,0.6));
  text-align: left;
  margin: 0; /* remove top margin so the value aligns with the label baseline */
  padding: 0 8px; /* remove vertical padding to keep baseline alignment */
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
}

/* Ensure the values rendered inside section bodies align left and sit vertically
   centered with their headers. These classes are used by the renderer. */
.marker-details-breed-value,
.marker-details-location-content,
.marker-details-owner-name,
.marker-details-single-photo {
  text-align: left;
  margin: 0; /* normalize margins to keep vertical alignment stable */
  line-height: 1.2;
  display: inline-block; /* ensure baseline aligns predictably */
  vertical-align: baseline;
}

html.dark .marker-details-location {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.marker-details-header { position: relative; }
.marker-details-award-top {
  position: relative;
  background: none;
  border: none;
  color: inherit;
  border-radius: 10px;
  cursor: pointer;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  padding: 3px;
  flex-shrink: 0;
  min-width: 52px;
  min-height: 52px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}

.marker-details-award-top.is-hidden {
  display: none;
}

.marker-details-award-top:hover {
  background: rgba(0, 0, 0, 0.04);
}

html.dark .marker-details-award-top:hover {
  background: rgba(255, 255, 255, 0.08);
}

.marker-details-award-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}

.marker-details-award-tooltip {
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(50%, calc(100% + 12px));
  min-width: 180px;
  max-width: min(78vw, 280px);
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(17, 17, 17, 0.98);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  text-align: left;
  word-break: break-word;
  overflow-wrap: anywhere;
  z-index: 25;
}

.marker-details-award-top.is-open + .marker-details-award-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(50%, calc(100% + 8px));
}

.marker-details-share-top {
  /* Participate in header flex layout so it aligns vertically with the title */
  position: relative;
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  z-index: 10; /* Increased z-index to ensure button is above all header content */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  flex-shrink: 0;
  /* Ensure clickable on all devices */
  min-width: 44px; /* iOS minimum touch target */
  min-height: 44px; /* iOS minimum touch target */
  touch-action: manipulation;
  /* iOS Brave fix: Use semi-transparent highlight for better feedback */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  /* Explicitly enable pointer events */
  pointer-events: auto;
  /* Prevent text selection on emoji */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  /* Ensure button is on its own layer for better touch handling */
  isolation: isolate;
}
.marker-details-share-top:hover { background: rgba(0,0,0,0.04); }
html.dark .marker-details-share-top:hover { background: rgba(255,255,255,0.04); }

/* Close button in header */
.marker-details-close-btn {
  background: none;
  border: none;
  color: var(--site-text, #333);
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
  margin-left: 2px;
}
.marker-details-close-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
html.dark .marker-details-close-btn {
  color: rgba(255, 255, 255, 0.8);
}
html.dark .marker-details-close-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.marker-details-close-btn:focus-visible {
  outline: 2px solid rgba(185, 28, 28, 0.5);
  outline-offset: 2px;
}
html.dark .marker-details-close-btn:focus-visible {
  outline-color: rgba(147, 51, 234, 0.5);
}

/* Footer with Share Button */
.marker-details-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--theme-toggle-border, rgba(0,0,0,0.06));
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

html.dark .marker-details-footer {
  border-color: rgba(255, 255, 255, 0.06);
}

.marker-details-share-btn {
  background: none;
  border: 1px solid rgba(128, 128, 128, 0.25);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--site-text, #333);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  touch-action: manipulation;
  /* iOS Brave fix: Use semi-transparent highlight for better feedback */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  /* Explicitly enable pointer events */
  pointer-events: auto;
  /* Prevent text selection */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  /* Ensure minimum touch target size */
  min-height: 44px;
}

.marker-details-share-btn:hover {
  background: rgba(128, 128, 128, 0.1);
  border-color: rgba(128, 128, 128, 0.4);
}

html.dark .marker-details-share-btn {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.15);
}

html.dark .marker-details-share-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Mobile & Tablet Responsive - Bottom Sheet anchored to viewport bottom */
@media (max-width: 768px) {
  /* Bottom sheet slides up from viewport bottom.
     top:auto!important prevents any JS-set inline top from overriding.
     Increased max-height from 80vh to 85vh to ensure location section is accessible. */
  .marker-details-overlay {
    width: 100%;
    max-width: none;
    right: 0;
    left: 0;
   /* Make the overlay occupy the full viewport on small screens so the
     sheet is not pushed below the fold and there's no unnecessary top gap. */
     top: 0 !important;
     bottom: 0 !important;
     /* Respect safe-area insets for notched devices while filling the full
       usable viewport so nothing is pushed off-screen. Subtract both top
       and bottom insets to avoid leaving extra whitespace on devices with
       bottom home indicators. */
     height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
     max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    transform: translateY(100%);
    border-radius: 1rem 1rem 0 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .marker-details-overlay:not(.hidden) {
    transform: translateY(0);
  }
  
  .marker-details-overlay.hidden {
    transform: translateY(100%);
  }
  
  .marker-details-container {
    border-radius: 1rem 1rem 0 0;
    /* Add drag handle visual indicator at top */
    padding-top: 8px;
    height: 100%;
  }
  /* Visual handle for browsers without explicit element (legacy) */
  /* legacy visual-only pseudo-handle removed in favor of explicit handle element */
  .marker-details-container::before { display: none; }

  /* Real handle element (receives pointer events) */
  /* Keep visible handle small but make the entire top edge grabable */
  .marker-details-container { position: relative; }

  .marker-details-drag-handle {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 80px; /* invisible hit area covering header + small buffer */
    display: block;
    -webkit-tap-highlight-color: transparent;
    touch-action: none; /* we handle pointer events */
    cursor: grab;
    background: transparent;
    z-index: 1; /* below header controls */
    pointer-events: auto;
  }

  .marker-details-drag-handle::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 8px;
    width: 40px;
    height: 4px;
    background: rgba(128, 128, 128, 0.3);
    border-radius: 2px;
    pointer-events: none;
    transition: background-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  }

  /* Active / pressed state: provide tactile visual feedback */
  .marker-details-drag-handle.active::after,
  .marker-details-drag-handle:active::after {
    background: rgba(128, 128, 128, 0.52);
    transform: translateX(-50%) scaleX(1.06);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  }

  /* Make header pass pointer events through except for interactive controls
     so taps on non-interactive header areas reach the handle underneath. */
  .marker-details-header { position: relative; z-index: 2; pointer-events: none; }
  /* Keep interactive controls clickable; let title/owner text pass through to the handle */
  .marker-details-header button,
  .marker-details-header a,
  .marker-details-header [role="button"],
  .marker-details-header .marker-details-share-top,
  .marker-details-header .marker-details-close-btn {
    pointer-events: auto;
  }
  
  .marker-details-award-floating {
    right: 90px;
  }

  .marker-details-award-top {
    min-width: 44px;
    min-height: 44px;
  }

  .marker-details-award-img {
    width: 28px;
    height: 28px;
  }

  .marker-details-award-tooltip {
    right: 50%;
    top: 50%;
    transform: translate(50%, calc(100% + 10px));
    max-width: min(86vw, 300px);
    min-width: 160px;
    text-align: center;
  }

  .marker-details-award-top.is-open + .marker-details-award-tooltip {
    transform: translate(50%, calc(100% + 6px));
  }

  .marker-details-gallery-main-wrap {
    min-height: 160px;
    aspect-ratio: 4/3;
  }

  /* Make the description area deterministic on mobile: fixed height with
     an internal scrollbar so the description cannot change the overall
     panel height. This prevents nondeterministic layout shifts. */
  .marker-details-description-scroll {
    height: 180px;
    max-height: none;
    overflow-y: auto;
  }

  /* Ensure share button clears control gutter on mobile */
  .marker-details-share-top {
    margin-right: 8px;
  }

  /* Keep owner name readable on mobile */
  .marker-details-owner-name {
    font-size: clamp(15px, 4.5vw, 20px);
  }

  /* Larger touch targets on mobile */
  .marker-details-gallery-nav {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 14px;
  }

  /* Gallery thumbnails row - optimize for horizontal scrolling */
  .marker-details-gallery-thumb {
    width: 64px;
    height: 64px;
  }

  .marker-details-description-wrap {
    padding-right: 40px;
  }

  .marker-details-description-text {
    font-size: 15px;
  }

  .marker-details-description-scroll {
    max-height: 160px;
  }
}

@media (max-width: 400px) {
  /* Keep overlay sizing consistent on very small screens — rely on the
     main mobile rule that respects both safe-area insets. */
  
  .marker-details-gallery-thumb {
    width: 56px;
    height: 56px;
  }
  
  .marker-details-owner-name {
    font-size: clamp(14px, 4.2vw, 18px);
  }
}

/* iPhone SE and very small screens */
@media (max-width: 375px) {
  /* Keep overlay sizing consistent on very small screens — rely on the
     main mobile rule that respects both safe-area insets. */
  
  .marker-details-header {
    /* Increased horizontal padding from 10px to 12px for better touch target spacing */
    /* This gives share button more breathing room from container edge */
    padding: 6px 12px;
  }
  
  .marker-details-content {
    padding: 4px 10px;
  }
  
  .marker-details-owner-label {
    font-size: 10px;
  }
  
  .marker-details-section-header {
    flex: 0 0 70px;
    font-size: 10px;
  }

  .marker-details-gallery-main-wrap {
    min-height: 140px;
  }

  .marker-details-description-scroll {
    max-height: 145px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marker-details-backdrop,
  .marker-details-overlay,
  .marker-details-gallery-nav,
  .marker-details-share-btn,
  .marker-details-gallery-thumb {
    transition: none;
  }
  
  .marker-details-gallery-spinner {
    animation: none;
  }
}

/* Diagnostic override: remove any accidental colored accent (outline/box-shadow/border)
   on the overlay, container, header and drag handle. This targets visual artifacts
   like the thin colored bar that can come from pseudo-elements, outlines or shadows.
   Keep this narrowly scoped and avoid changing button focus styles (close/share buttons
   still have their explicit focus-visible rules). */
.marker-details-overlay,
.marker-details-container,
.marker-details-header,
.marker-details-drag-handle,
.marker-details-drag-handle::before,
.marker-details-drag-handle::after,
.marker-details-container::before,
.marker-details-container::after {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background-image: none !important;
}

.marker-details-drag-handle:focus,
.marker-details-drag-handle:focus-visible,
.marker-details-drag-handle:active,
.marker-details-drag-handle.active {
  outline: none !important;
  box-shadow: none !important;
}