/* Cemetery360 Player — Modern Design Layer
   Loaded after player.css and player_with_featured.css.
   Visual overrides only; no layout logic changes. */

/* ── Design Tokens ────────────────────────────────── */
:root {
  --pm-glass:      rgba(6, 15, 9, 0.70);
  --pm-glass-dark: rgba(4, 10, 6, 0.88);
  --pm-border:     rgba(255, 255, 255, 0.09);
  --pm-accent:     #5cd876;
  --pm-text:       rgba(240, 248, 242, 0.96);
  --pm-shadow:     0 4px 22px rgba(0, 0, 0, 0.65);
  --pm-radius:     10px;
  --pm-blur:       blur(14px);
  --pm-ease:       0.15s ease;
}

/* ── Loading overlay ──────────────────────────────── */
#loading {
  background: rgba(0, 0, 0, 0.82) !important;
  /* Do NOT use display:flex !important — jQuery .hide() sets inline display:none
     and !important in a stylesheet overrides inline styles, breaking the hide. */
}
#loading table,
#loading .full-width-heigh { display: none !important; }

/* Spinner is absolutely centered inside #loading (which is position:absolute) */
.c360-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.10);
  border-top-color: var(--pm-accent);
  border-radius: 50%;
  animation: pm-spin 0.72s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }

/* ── Toolbar panels (.centro / .derecha) ──────────── */
#navegador .centro,
#navegador .derecha {
  background: rgba(8, 18, 12, 0.93) !important;
  backdrop-filter: var(--pm-blur) !important;
  -webkit-backdrop-filter: var(--pm-blur) !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  border-radius: var(--pm-radius) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.88), 0 0 0 0.5px rgba(255,255,255,0.10) !important;
  padding: 5px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  float: none !important;
  width: auto !important;
}
#navegador .derecha {
  right: 12px !important;
  top: 12px !important;
  padding-top: 5px !important;
}
#navegador .centro {
  right: 12px !important;
  bottom: 28% !important;
}
#navegador .centro li,
#navegador .derecha li {
  display: block !important;
  margin: 0 !important;
  height: auto !important;
  list-style: none !important;
}
#navegador li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 1.0) !important;
  opacity: 1 !important;
  transition: background var(--pm-ease), color var(--pm-ease), transform var(--pm-ease) !important;
  cursor: pointer;
}
#navegador li a:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--pm-accent) !important;
  transform: scale(1.08) !important;
  opacity: 1 !important;
  -webkit-filter: none !important;
  filter: none !important;
}
/* SVG icons */
#navegador li a svg { display: block; pointer-events: none; }
/* Hide all old PNG imgs */
#navegador li a img,
#bar-ui-zoom-plus img, #bar-ui-zoom-minus img,
#bar-ui-copy img, #bar-ui-direction img,
#bar-ui-vr-mode img, #bar-ui-vr-modenew img {
  display: none !important;
}
/* VR button: desktop hidden, mobile shown.
   Needs #navegador li a specificity (0,2,2) + !important to beat the
   #navegador li a { display:flex !important } rule above. */
#navegador li a#bar-ui-vr-mode { display: none !important; }
@media only screen and (max-width: 768px) {
  #navegador li a#bar-ui-vr-mode { display: flex !important; }
}

/* Separator between .centro and .derecha groups */
#navegador .pm-divider {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--pm-border);
  margin: 2px 0;
}

/* ── Mini-map expand overlay ──────────────────────── */
/* Overlay covers the full mini-map; expand icon is top-right corner */
#playerMap-mini-overlay ul {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#playerMap-mini-overlay ul li {
  display: block !important;
  margin: 0 !important;
  text-align: right !important;
}
#playerMap-mini-overlay ul li img { display: none !important; }
#playerMap-mini-overlay .pm-expand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--pm-glass-dark);
  border: 1px solid var(--pm-border);
  border-radius: 7px;
  color: var(--pm-text);
  backdrop-filter: var(--pm-blur);
  -webkit-backdrop-filter: var(--pm-blur);
  transition: background var(--pm-ease), color var(--pm-ease);
}
#playerMap-mini-overlay ul li:hover .pm-expand-icon {
  background: rgba(4, 10, 6, 0.97);
  color: var(--pm-accent);
}
#playerMap-mini-overlay ul li.mm-zoom-btn {
  display: block !important;
  margin-top: 4px !important;
  text-align: right !important;
}
#playerMap-mini-overlay .mm-zoom-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--pm-glass-dark);
  border: 1px solid var(--pm-border);
  border-radius: 7px;
  color: var(--pm-text);
  backdrop-filter: var(--pm-blur);
  -webkit-backdrop-filter: var(--pm-blur);
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background var(--pm-ease), color var(--pm-ease);
}
#playerMap-mini-overlay ul li.mm-zoom-btn:hover .mm-zoom-icon {
  background: rgba(4, 10, 6, 0.97);
  color: var(--pm-accent);
}
/* Google Maps zoom bundle: hidden in mini mode (overlay captures all clicks anyway).
   Shown in expanded mode via JS. Positioned below the close button (top 60px). */
#playerMap .gm-bundled-control-on-bottom {
  display: none !important;
  right: 12px !important;
  bottom: auto !important;
  top: 60px !important;
  margin: 0 !important;
}
/* In expanded mode the bundle has class toggled via JS — class added to playerMap */
#playerMap.map-expanded .gm-bundled-control-on-bottom {
  display: block !important;
}
/* Fix child gmnoprint: use right:0 instead of left:0 so buttons stay inside boundary */
#playerMap .gm-bundled-control-on-bottom > .gmnoprint {
  right: 0 !important;
  left: auto !important;
}
/* Strip the white container background; individual buttons are already dark-glass styled */
#playerMap .gm-bundled-control-on-bottom > .gmnoprint > div {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Close button on expanded map — matches toolbar buttons */
#playerMap ul:has(#close-btn-map) {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  z-index: 9999 !important;
}
/* display is controlled by jQuery show/hide — no !important override here */
#close-btn-map {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  background: var(--pm-glass-dark) !important;
  backdrop-filter: var(--pm-blur) !important;
  -webkit-backdrop-filter: var(--pm-blur) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--pm-shadow) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
#close-btn-map img { display: none !important; }
#close-btn-map::after {
  content: '✕';
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#close-btn-map:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}
#close-btn-map:hover::after { color: var(--pm-accent); }

/* ── Gallery wrapper ──────────────────────────────── */
#player-gallery-wrapper {
  background: var(--pm-glass-dark) !important;
  backdrop-filter: var(--pm-blur) !important;
  -webkit-backdrop-filter: var(--pm-blur) !important;
  border-top: 1px solid var(--pm-border) !important;
}

/* Gallery nav bar — positioned as direct child of #playerStage */
.gallery-navigation {
  position: absolute !important;
  left: 2% !important;
  bottom: 117px !important;
  background: var(--pm-glass-dark) !important;
  backdrop-filter: var(--pm-blur) !important;
  -webkit-backdrop-filter: var(--pm-blur) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--pm-shadow) !important;
  height: auto !important;
  width: auto !important;
  padding: 3px 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 1px !important;
  z-index: 500 !important;
  margin: 0 !important;
  cursor: default !important;
}
/* When gallery is hidden, float nav bar at bottom of full pano */
#playerStage.gallery-hidden .gallery-navigation {
  bottom: 8px !important;
}
ul.gallery-navigation li {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
ul.gallery-navigation li:nth-child(1),
ul.gallery-navigation li:nth-child(3),
ul.gallery-navigation li:nth-child(5) {
  padding: 0 !important;
}
/* Prev / Next arrow buttons */
ul.gallery-navigation li.gallery-prev,
ul.gallery-navigation li.gallery-next {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--pm-text);
  transition: background var(--pm-ease), color var(--pm-ease);
  justify-content: center;
}
ul.gallery-navigation li.gallery-prev:hover,
ul.gallery-navigation li.gallery-next:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--pm-accent);
}
ul.gallery-navigation li.gallery-prev img,
ul.gallery-navigation li.gallery-next img { display: none !important; }
ul.gallery-navigation li svg { pointer-events: none; }
/* Divider */
.gallery-navigation .button-divider {
  background: var(--pm-border) !important;
  width: 1px !important;
  height: 14px !important;
  margin: 0 4px !important;
  display: inline-block !important;
}
/* Audio player — hide when no source, shrink when present */
#my-audioli {
  display: flex !important;
  align-items: center !important;
  padding: 0 4px !important;
  height: 28px !important;
}
#my-audio {
  height: 22px !important;
  width: 130px !important;
  opacity: 0.75;
  border-radius: 4px;
}
/* Completely hide the audio li when src is empty or missing */
#my-audio:not([src]),
#my-audio[src=""] { display: none !important; }
#my-audio:not([src]) + li,
#my-audioli:has(#my-audio:not([src])),
#my-audioli:has(#my-audio[src=""]) { width: 0 !important; padding: 0 !important; overflow: hidden !important; }

/* Imagery toggle */
.gallery-navigation li.imagery {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  color: var(--pm-text) !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 0 8px !important;
  height: 28px !important;
  width: auto !important;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--pm-ease) !important;
}
.gallery-navigation li.imagery:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
.gallery-navigation li.imagery img { display: none !important; }
.gallery-navigation li.imagery svg { pointer-events: none; flex-shrink: 0; }

/* ── Gallery scroll strip (replaces owlCarousel) ──── */
#player-gallery { overflow: visible !important; }
#player-gallery ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-snap-type: x proximity !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 5px !important;
  padding: 5px 8px !important;
  width: auto !important;
  height: auto !important;
  scrollbar-width: none !important;
  align-items: center !important;
}
#player-gallery ul::-webkit-scrollbar { display: none !important; }

#player-gallery .gallery-thumb-wrap {
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
  display: block !important;
  vertical-align: unset !important;
  padding: 0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  scroll-snap-align: start;
  transition: transform var(--pm-ease), box-shadow var(--pm-ease) !important;
}
#player-gallery .gallery-thumb-wrap:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.60) !important;
}
#player-gallery .gallery-thumb {
  height: 104px !important;
  width: auto !important;
  display: block !important;
  border-radius: 6px !important;
}
#player-gallery .gallery-thumb-wrap .caption {
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%) !important;
  color: var(--pm-text) !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.01em !important;
  padding: 10px 7px 4px 7px !important;
  border-radius: 0 0 6px 6px !important;
}

/* ── Gallery — tighten height to thumbnail size ───── */
#player-gallery-wrapper {
  height: 114px !important;
}
#player-gallery { min-height: 114px !important; }

/* Panel height set via JS setProperty('important') in tab_search_name-fullwidth_2.php on DOMReady */

/* Nav bar positioned relative to #playerStage — set in main .gallery-navigation rule above */
@media screen and (max-width: 640px) {
  #navegador .centro { bottom: 140px !important; }
}

/* ── Cemetery name badge ──────────────────────────── */
#cemetery-name-badge        { font-size: 0.84rem !important; }
#cemetery-name-badge.above-gallery { bottom: 160px !important; }

/* ── Google Maps mini-map panel ───────────────────── */
.fullwidthmap #main .site-content article .entry-content
  #tabs-1 .draw-map .map_result #playerStage #playerMap {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.65) !important;
}
/* #playerMap-mini-overlay inherits width/height from player.css (20%/35%) matching #playerMap exactly */
/* ── Section pills (indoor + outdoor groups) ────────── */
#indoor-pills-strip {
  position: absolute;
  z-index: 12; /* above mini-overlay (11) */
  padding: 5px 0 0;
  display: none; /* JS sets to flex once built; never hidden after that */
  flex-direction: column;
  gap: 5px;
  box-sizing: border-box;
  pointer-events: auto;
}
/* One labeled group per category */
.pill-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}
.pill-group-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 0 2px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
/* Single horizontally-scrollable row — never grows taller than one pill */
.pill-group-row {
  display: flex;
  flex-direction: row;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
}
.pill-group-row::-webkit-scrollbar { display: none; }
/* Individual pill */
.section-pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 4px 11px;  /* slightly taller for touch targets */
  min-height: 28px;   /* 44px recommended; this is constrained by map width */
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(30,30,30,0.72);
  color: rgba(255,255,255,0.90);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
  touch-action: manipulation; /* prevents 300ms tap delay on mobile */
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}
.section-pill:hover,
.section-pill:active,
.section-pill.active {
  background: rgba(55,130,240,0.80);
  border-color: rgba(100,170,255,0.90);
  color: #fff;
}

/* Dim attribution clutter; hide fullscreen button */
#playerMap .gm-fullscreen-control { display: none !important; }
#playerMap .gm-style-cc { opacity: 0.45 !important; }
#playerMap .gm-style-cc a { color: rgba(255,255,255,0.5) !important; }

/* ── Google Maps zoom buttons — match toolbar style ─ */
#playerMap button.gm-control-active[aria-label="Zoom in"],
#playerMap button.gm-control-active[aria-label="Zoom out"] {
  background: var(--pm-glass-dark) !important;
  backdrop-filter: var(--pm-blur) !important;
  -webkit-backdrop-filter: var(--pm-blur) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--pm-shadow) !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background var(--pm-ease) !important;
}
#playerMap button.gm-control-active[aria-label="Zoom in"]:hover,
#playerMap button.gm-control-active[aria-label="Zoom out"]:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}
/* Invert the Google Maps +/- icons so they read white on dark */
#playerMap button.gm-control-active[aria-label="Zoom in"] img,
#playerMap button.gm-control-active[aria-label="Zoom out"] img {
  filter: invert(1) brightness(0.85) !important;
  width: 14px !important;
  height: 14px !important;
}

/* ── Responsive overrides ─────────────────────────── */
@media (max-width: 900px) {
  #navegador li a { width: 32px !important; height: 32px !important; }
}
@media (max-width: 540px) {
  #navegador li a { width: 28px !important; height: 28px !important; }
}