/* People's Map of Bahrain - Minimal Styles */

/* Import Comfortaa font */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');

/* Import Amiri font for Arabic */
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap');

/* Import Crimson Text for English titles */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&display=swap');

/* Import Scheherazade New for Arabic body text */
@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@400;700&display=swap');

/* Design System Variables */
:root {
  /* Dynamic layout variables (set by JavaScript) */
  --mobile-stack-height: 0px;

  /* Typography - English */
  --font-title-en: 'Crimson Text', Georgia, serif;
  --font-body-en: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Typography - Arabic */
  --font-title-ar: 'Amiri', serif;
  --font-body-ar: 'Scheherazade New', serif;

  /* Colors */
  --color-primary: #4ECDC4;
  --color-primary-hover: #6EDDD6;
  --color-error: #ff3860;
  --color-warning: #ffe08a;
  --color-text: white;
  --color-text-muted: rgba(255, 255, 255, 0.7);
  --color-text-subtle: rgba(255, 255, 255, 0.5);

  /* Backgrounds */
  --bg-overlay-strong: rgba(0, 0, 0, 0.95);
  --bg-overlay-medium: rgba(0, 0, 0, 0.6);
  --bg-overlay-light: rgba(0, 0, 0, 0.4);
  --bg-overlay-subtle: rgba(0, 0, 0, 0.2);
  --bg-glass: rgba(255, 255, 255, 0.15);
  --bg-glass-hover: rgba(255, 255, 255, 0.25);
  --bg-glass-subtle: rgba(255, 255, 255, 0.05);

  /* Z-index scale */
  --z-map: 0;
  --z-controls: 500;
  --z-story-header: 998;
  --z-panels: 999;
  --z-navbar: 1000;
  --z-submission: 1001;
  --z-menu: 1100;
  --z-loading: 9999;

  /* Transitions */
  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* Full-page map layout */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Use fixed positioning approach - more reliable than vh/dvh on mobile */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

#app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

#map-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-map);
}

/* Global button style override */
.button {
  border-radius: 0;
}

/* Navbar - minimal overlay with icons */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-navbar);
  background: transparent !important;
  border: none;
  box-shadow: none;
  min-height: 3.5rem;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* Backdrop filter for navbar when on satellite or historical maps */
body.light-basemap .navbar {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 1rem;
}

.navbar-item.navbar-logo strong {
  font-family: 'Comfortaa', cursive;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--color-text);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Submit icon button */
.icon-button {
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  padding: 0;
  color: var(--color-text);
}

.icon-button:hover {
  background: var(--bg-glass-hover);
  transform: scale(1.05);
}

.icon-button:active {
  transform: scale(0.95);
}

.icon-button svg {
  stroke: white;
}

/* Language toggle */
.language-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  color: var(--color-text);
  transition: all var(--transition-normal);
  user-select: none;
}

.language-toggle:hover {
  background: var(--bg-glass-hover);
}

.language-toggle .lang-option {
  color: var(--color-text);
  opacity: 0.6;
  font-weight: 500;
}

.language-toggle .lang-option.active {
  opacity: 1;
  font-weight: 700;
}

.language-toggle .lang-separator {
  opacity: 0.4;
  color: var(--color-text);
  margin: 0 0.25rem;
}

/* Hamburger menu */
.navbar-burger {
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  transition: all var(--transition-normal);
  user-select: none;
}

.navbar-burger:hover {
  background: var(--bg-glass-hover);
}

.navbar-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: all var(--transition-normal);
}

.navbar-burger.is-active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.navbar-burger.is-active span:nth-child(2) {
  opacity: 0;
}

.navbar-burger.is-active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Menu Panel (Tabbed side panel) */
.menu-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-menu);
  display: flex;
}

.menu-panel-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-overlay-medium);
  backdrop-filter: blur(2px);
}

.menu-panel-content {
  position: absolute;
  /* Mobile: centered */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw - 40px);
  max-width: 450px;
  height: auto;
  max-height: calc(100dvh - 80px);
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Desktop: position near burger button (top-right for LTR) */
@media (min-width: 769px) {
  .menu-panel-content {
    top: 80px;
    right: 20px;
    left: auto;
    transform: none;
  }
}

.menu-close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background var(--transition-normal);
  z-index: 10;
}

.menu-close-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Menu Tabs - Manila Folder Style */
.menu-tabs {
  display: flex;
  gap: 4px;
  padding: 0 1rem;
  padding-top: 1rem;
  border-bottom: none;
  background: transparent;
}

.menu-tab {
  flex: 1;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  margin-bottom: -1px;
  z-index: 1;
}

.menu-tab:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
}

.menu-tab.active {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.95);
  border-color: rgba(255, 255, 255, 0.3);
  z-index: 2;
}

/* Active tab covers the content border below it */
.menu-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0, 0, 0, 0.95);
}

/* Menu Content with top border that tabs overlap */
.menu-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 0;
  color: var(--color-text);
}

.menu-content h2.title {
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

/* Featured Stories List */
.featured-stories-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.featured-story-item {
  padding: 1rem;
  background: var(--bg-glass-subtle);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-normal);
  border-left: 3px solid transparent;
}

.featured-story-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-left-color: var(--color-primary);
  transform: translateX(4px);
}

.featured-story-item .story-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.featured-story-item .story-meta {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* About Content */
.about-content .content {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.about-content .content h5 {
  color: var(--color-text);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.about-content .content ul {
  list-style: none;
  padding-left: 0;
}

.about-content .content li {
  margin-bottom: 0.5rem;
}

.about-content .content a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-normal);
}

.about-content .content a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.navbar-menu .navbar-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* RTL support */
html[dir="rtl"] .navbar-menu {
  right: auto;
  left: 1rem;
  direction: rtl;
}

html[dir="rtl"] .navbar-menu .navbar-item {
  text-align: right;
}

/* Featured stories panel */
.featured-panel {
  position: fixed;
  top: 70px;
  right: 20px;
  width: 320px;
  max-height: calc(100vh - 90px); /* fallback for older browsers */
  max-height: calc(100dvh - 90px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background: transparent;
  backdrop-filter: blur(3px);
  border-radius: 8px;
  box-shadow: none;
  z-index: var(--z-panels);
  padding: 0.25rem;
}

.featured-panel .panel-header {
  margin-bottom: 1rem;
}

.featured-panel .panel-header .title {
  font-family: 'Comfortaa', cursive;
  font-weight: 600;
  color: var(--color-text);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.featured-panel .stories-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.featured-panel .card {
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: all var(--transition-normal);
  border: none;
  border-radius: 6px;
  background: var(--bg-glass);
  backdrop-filter: blur(2px);
  color: var(--color-text);
}

.featured-panel .card:hover {
  background: var(--bg-glass-hover);
  transform: translateY(-2px);
}

.featured-panel .card .title {
  color: var(--color-text);
  margin-bottom: 0.25rem;
  line-height: 1.2;
}


.featured-panel .card .subtitle {
    margin-top: 0;
}

.featured-panel .year {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

.featured-panel .loading-text {
  color: var(--color-text);
}

/* RTL support */
html[dir="rtl"] {
  font-size: 1.1rem;
}

/* Logo font classes - always use these fonts regardless of RTL/LTR */
.logo-mapbh {
  font-family: 'Comfortaa', cursive;
  font-weight: 600;
}

.logo-peoples {
  font-family: 'Comfortaa', cursive;
  font-weight: 600;
}

.logo-arabic {
  font-family: 'Amiri', serif;
  font-weight: 400;
}

html[dir="rtl"] .featured-panel {
  right: auto;
  left: 20px;
}

html[dir="rtl"] .close-story {
  left: auto;
  right: 20px;
}

html[dir="rtl"] .navbar-brand {
  margin-left: auto;
  margin-right: 0;
}

html[dir="rtl"] .navbar-end {
  margin-left: 0;
  margin-right: auto;
}

/* Mobile bottom stack - contains step-nav and pin-detail */
/* On desktop: transparent wrapper, children stay fixed */
.mobile-bottom-stack {
  display: contents;
}

/* Story navigation */
.step-nav {
  position: fixed;
  bottom: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-overlay-light);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: var(--z-panels);
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-text);
}

.step-nav .step-counter {
  font-weight: 600;
  min-width: 100px;
  text-align: center;
}

.step-nav .button {
  background: var(--bg-glass);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-text);
}

.step-nav .button:hover:not(:disabled) {
  background: var(--bg-glass-hover);
  border-color: rgba(255, 255, 255, 0.3);
}

.step-nav .button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Pin detail */
.pin-detail {
  position: fixed;
  bottom: 80px;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 20px;
  right: 20px;
  max-width: 400px;
  max-height: 50vh; /* fallback for older browsers */
  max-height: 50dvh;
  background: var(--bg-overlay-light);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: var(--z-navbar);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Images FIRST */
.pin-detail .pin-images {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  flex-shrink: 0;
  justify-content: center;
}

.pin-detail .pin-images img {
  max-width: 180px;
  max-height: 150px;
  width: auto;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.pin-detail .pin-images img:hover {
  transform: scale(1.05);
}

/* Centered title */
.pin-detail .pin-title {
  color: var(--color-text);
  text-align: center;
  margin-bottom: 0.5rem;
  font-family: var(--font-title-en);
  font-weight: 600;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Scrollable description */
.pin-detail .pin-description-wrapper {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.pin-detail .pin-description {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  line-height: 1.6;
  font-family: var(--font-body-en);
  margin: 0;
  text-align: center;
}

/* Pin detail expand toggle (mobile only - hidden by default) */
.pin-detail .pin-detail-toggle {
  display: none;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 30, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  color: var(--color-text-muted);
  padding: 0.3rem 1rem;
  cursor: pointer;
  font-size: 0.8rem;
  z-index: 10;
  transition: background 0.2s ease;
}

.pin-detail .pin-detail-toggle:hover {
  background: rgba(50, 50, 50, 0.95);
}

/* Image Lightbox */
.image-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  z-index: 10;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.lightbox-close:hover {
  transform: scale(1.1);
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  font-size: 3rem;
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 10;
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-content {
  max-width: 90vw;
  max-height: 90vh; /* fallback for older browsers */
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 85vh; /* fallback for older browsers */
  max-height: 85dvh;
  object-fit: contain;
}

.lightbox-counter {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 1rem;
  font-size: 0.9rem;
}

/* RTL adjustments for lightbox */
html[dir="rtl"] .lightbox-close {
  left: 20px;
  right: auto;
}

html[dir="rtl"] .lightbox-prev {
  right: 20px;
  left: auto;
}

html[dir="rtl"] .lightbox-next {
  left: 20px;
  right: auto;
}

/* Close story button */
.close-story {
  position: fixed;
  top: 70px;
  left: 20px;
  z-index: var(--z-panels);
}

/* Story close button (in navbar-actions) */
.story-close-btn {
  color: var(--color-error);
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-error);
  border-radius: 50%;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, background 0.2s ease;
  padding-bottom: 2px;
  background: transparent;
}

.story-close-btn:hover {
  transform: scale(1.1);
  background: rgba(255, 56, 96, 0.1);
}

html[dir="rtl"] .story-header {
  left: 80px;
  right: 20px;
}

/* RTL Arabic fonts for story header */
html[dir="rtl"] .story-header-title {
  font-family: var(--font-title-ar);
}

html[dir="rtl"] .story-header .story-description,
html[dir="rtl"] .story-header .story-meta,
html[dir="rtl"] .story-header .story-attribution {
  font-family: var(--font-body-ar);
}

/* RTL Arabic fonts for pin detail */
html[dir="rtl"] .pin-detail .pin-title {
  font-family: var(--font-title-ar);
}

html[dir="rtl"] .pin-detail .pin-description {
  font-family: var(--font-body-ar);
}

/* Story header panel */
.story-header {
  position: fixed;
  top: 70px;
  left: 20px;
  right: 80px;
  max-width: 400px;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(5px);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: var(--z-story-header);
  color: var(--color-text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.story-header-content {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}

.story-header-title {
  color: var(--color-text);
  margin-bottom: 0.5rem;
  font-family: var(--font-title-en);
  font-weight: 600;
}

.story-header-top .title {
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.story-header .story-description {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
  font-family: var(--font-body-en);
}

.story-header .story-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-family: var(--font-body-en);
}

.story-header .story-attribution {
  color: var(--color-text-subtle);
  font-size: 0.8rem;
  font-style: italic;
  margin-top: 0.5rem;
  font-family: var(--font-body-en);
}

/* Mobile collapse toggle - hidden on desktop */
.story-header-mobile-toggle {
  display: none;
}

.story-header-toggle {
  background: rgba(30, 30, 30, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: var(--color-text-muted);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.7rem;
  transition: color var(--transition-normal), background var(--transition-normal);
}

.story-header-toggle:hover {
  color: var(--color-text);
  background: rgba(50, 50, 50, 0.8);
}

.story-header-toggle .toggle-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.story-header-toggle .toggle-title {
  font-weight: 500;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-header-toggle .toggle-arrow {
  flex-shrink: 0;
}

/* Remove body padding for navbar */
body.has-navbar-fixed-top {
  padding-top: 0 !important;
}

/* Disable all transitions on Leaflet markers during map animations */
.leaflet-marker-icon,
.leaflet-marker-shadow {
  transition: none !important;
}

/* Custom SVG markers */
.custom-svg-marker {
  cursor: pointer;
}

.custom-svg-marker svg {
  display: block;
}

/* Scale markers based on zoom level */
.custom-image-marker {
  transform: scale(var(--marker-scale, 1));
  transform-origin: center bottom;
  cursor: pointer;
}

/* Loading overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #262626;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--z-loading);
}

.loader {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  gap: 0.05em;
}

.loader .letter {
  display: inline-block;
  animation: wave 1.2s ease-in-out infinite;
}

.loader .letter:nth-child(1) { animation-delay: 0s; }
.loader .letter:nth-child(2) { animation-delay: 0.1s; }
.loader .letter:nth-child(3) { animation-delay: 0.2s; }
.loader .letter:nth-child(4) { animation-delay: 0.3s; }
.loader .letter:nth-child(5) { animation-delay: 0.4s; }
.loader .letter:nth-child(6) { animation-delay: 0.5s; }
.loader .letter:nth-child(7) { animation-delay: 0.6s; }
.loader .letter:nth-child(8) { animation-delay: 0.7s; }
.loader .letter:nth-child(9) { animation-delay: 0.8s; }
.loader .letter:nth-child(10) { animation-delay: 0.9s; }

@keyframes wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .featured-panel {
    width: calc(100% - 40px);
    max-width: 320px;
  }

  /* Mobile bottom stack - fixed container for step-nav + pin-detail */
  .mobile-bottom-stack {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-panels);
    max-height: 60vh;
    max-height: 60dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Step nav inside stack - not fixed, just styled */
  .mobile-bottom-stack .step-nav {
    position: static;
    transform: none;
    left: auto;
    bottom: auto;
    border-radius: 16px 16px 0 0;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Pin detail inside stack - not fixed, fills remaining space */
  .mobile-bottom-stack .pin-detail {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    max-width: 100%;
    max-height: none;
    flex: 1;
    min-height: 0;
    border-radius: 0;
    padding: 1rem;
    overflow-y: auto;
  }

  /* When step-nav is NOT present, pin-detail gets rounded top corners */
  .mobile-bottom-stack .pin-detail:first-child {
    border-radius: 16px 16px 0 0;
  }

  .pin-detail .pin-images {
    justify-content: center;
  }

  .pin-detail .pin-images img {
    max-width: calc(50% - 0.25rem);
    max-height: 120px;
    cursor: pointer;
  }

  /* Pin detail toggle visible on mobile */
  .pin-detail .pin-detail-toggle {
    display: block;
  }

  /* Expanded state - fill full viewport */
  .mobile-bottom-stack.has-expanded-pin-detail {
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
  }

  .mobile-bottom-stack.has-expanded-pin-detail .pin-detail {
    flex: 1;
    max-height: none;
  }

  .mobile-bottom-stack.has-expanded-pin-detail .pin-detail .pin-detail-toggle {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Story header - full width, collapsible */
  .story-header {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    max-width: 100%;
    border-radius: 0;
    padding: 0.75rem 1rem;
    padding-bottom: 1rem; /* Extra space for toggle straddling border */
  }

  .story-header-mobile-toggle {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(50%);
    z-index: 1;
  }

  .story-header.collapsed {
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    padding: 0.5rem 1rem;
  }

  .story-header.collapsed .story-header-content {
    display: none;
  }

  .story-header.collapsed .story-header-mobile-toggle {
    position: static;
    transform: none;
  }

  .story-header:not(.collapsed) .story-header-content {
    display: block;
  }

  /* RTL mobile adjustments */
  html[dir="rtl"] .story-header {
    left: 0;
    right: 0;
  }

  /* Mobile navbar layout */
  .navbar,
  .navbar-brand {
    width: 100% !important;
    display: flex !important;
  }

  .navbar-brand {
    position: relative;
    flex-wrap: nowrap;
    padding: 0.5rem 0.5rem;
  }

  /* RTL mobile: force LTR layout on navbar-brand to keep actions on left */
  html[dir="rtl"] .navbar-brand {
    direction: ltr;
  }

  /* Center logo absolutely */
  .navbar-item.navbar-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    pointer-events: auto;
  }

  /* RTL: restore text direction for logo */
  html[dir="rtl"] .navbar-item.navbar-logo {
    direction: rtl;
  }

  .navbar-item.navbar-logo strong {
    font-size: 1.25rem;
  }

  /* Navbar actions: burger + language on left */
  .navbar-actions {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
  }

  .navbar-actions .navbar-burger {
    order: 1;
  }

  .navbar-actions .language-toggle {
    order: 2;
    padding: 0;
  }

  /* Submit button: absolute position in top-right corner */
  .navbar-actions .icon-button.submit-icon {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
  }

  /* RTL mobile: force LTR direction to keep burger/language on physical left */
  html[dir="rtl"] .navbar-actions {
    direction: ltr;
  }
}

/* ============================================================================
   Submission Panel Styles
   ============================================================================ */

/* Panel backdrop */
.submission-panel-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-overlay-light);
  z-index: var(--z-navbar);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.submission-panel-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.submission-panel-backdrop.placement-mode {
  opacity: 0;
  pointer-events: none;
}

/* Hide panel in placement mode - show only instruction overlay */
.submission-panel.placement-mode {
  display: none;
}

/* Main panel - Floating centered/positioned style */
.submission-panel {
  position: fixed;
  /* Mobile: centered */
  top: 50%;
  left: 50%;
  width: calc(100vw - 40px);
  max-width: 600px;
  height: auto;
  max-height: calc(100dvh - 80px - env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  z-index: var(--z-submission);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Fade/scale animation instead of slide */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.submission-panel.open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

/* Desktop: position near submit button (top-right) */
@media (min-width: 769px) {
  .submission-panel {
    top: 80px;
    left: auto;
    right: 20px;
    transform: scale(0.95);
    transform-origin: top right;
  }
  .submission-panel.open {
    transform: scale(1);
  }
}

/* Panel sections */
.submission-panel-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.submission-panel-header .header-left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.submission-panel-header .title {
  margin: 0;
  color: var(--color-text);
}

/* Autosave indicator */
.autosave-indicator {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.autosave-indicator .saving {
  color: var(--color-primary);
}

.autosave-indicator .saved {
  color: #28a745;
}

.autosave-indicator .error {
  color: var(--color-error);
}

.autosave-indicator i {
  margin-right: 0.25rem;
}

.autosave-indicator .retry-btn {
  margin-left: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  background: none;
  border: 1px solid var(--color-error);
  color: var(--color-error);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.autosave-indicator .retry-btn:hover {
  background: #dc3545;
  color: var(--color-text);
}

.submission-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  color: var(--color-text);
}

.submission-panel-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.submission-panel-footer .footer-right {
  display: flex;
  gap: 0.5rem;
}

/* Wizard steps */
.wizard-step {
  min-height: 200px;
  color: var(--color-text);
}

/* RTL support */
/* Desktop: flip submission panel position for RTL (goes to left side) */
@media (min-width: 769px) {
  html[dir="rtl"] .submission-panel {
    right: auto;
    left: 20px;
    transform-origin: top left;
  }
  html[dir="rtl"] .menu-panel-content {
    right: auto;
    left: 20px;
  }
}

/* Marker form styling */
.marker-form .field {
  margin-bottom: 1rem;
}

.marker-form .label {
  color: white;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.marker-form .input,
.marker-form .textarea,
.marker-form .select select {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.marker-form .input::placeholder,
.marker-form .textarea::placeholder {
  color: var(--color-text-subtle);
}

.marker-form .input:focus,
.marker-form .textarea:focus,
.marker-form .select select:focus {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.marker-form .location-display {
  background: var(--bg-glass-subtle);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.75rem;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.8);
  font-family: monospace;
  font-size: 0.85rem;
  word-break: break-all;
}

/* Make location field wrap on mobile */
.marker-form .level.is-mobile {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.marker-form .level.is-mobile .level-left,
.marker-form .level.is-mobile .level-right {
  flex-basis: auto;
}

@media (max-width: 480px) {
  .marker-form .level.is-mobile {
    flex-direction: column;
    align-items: stretch;
  }

  .marker-form .level.is-mobile .level-left {
    width: 100%;
  }

  .marker-form .level.is-mobile .level-right {
    width: 100%;
    justify-content: flex-start;
  }

  .marker-form .level.is-mobile .level-right .button {
    width: 100%;
    justify-content: center;
  }
}

.marker-form .select {
  width: 100%;
}

.marker-form .select select {
  width: 100%;
}

.marker-form .select:not(.is-multiple):not(.is-loading)::after {
  border-color: var(--color-text);
}

/* Map placement mode */
.marker-placement-active {
  cursor: crosshair !important;
}

.map-placement-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-controls);
  pointer-events: none;
}

.placement-instruction {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  color: var(--color-text);
  padding: 1rem 2rem;
  border-radius: 8px;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Submission panel - override Bulma titles and labels */
.submission-panel .title,
.submission-panel .label {
  color: white !important;
}

/* Auth form styling */
.auth-form .label {
  color: white !important;
  font-weight: 500;
}

.auth-form .input {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.auth-form .input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.auth-form .input:focus {
  border-color: var(--color-primary) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none !important;
}

/* Story metadata form */
.story-metadata-form .field {
  margin-bottom: 1rem;
}

.story-metadata-form .label {
  color: white;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.story-metadata-form .subtitle {
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
  color: var(--color-text);
}

.story-metadata-form .input,
.story-metadata-form .textarea,
.story-metadata-form .select select {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.story-metadata-form .input::placeholder,
.story-metadata-form .textarea::placeholder {
  color: var(--color-text-subtle);
}

.story-metadata-form .input:focus,
.story-metadata-form .textarea:focus,
.story-metadata-form .select select:focus {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.story-metadata-form .select {
  width: 100%;
}

.story-metadata-form .select select {
  width: 100%;
}

.story-metadata-form .select:not(.is-multiple):not(.is-loading)::after {
  border-color: var(--color-text);
}

.story-metadata-form .radio {
  color: var(--color-text);
  display: block;
  margin-bottom: 0.5rem;
}

.story-metadata-form .radio input[type="radio"] {
  margin-right: 0.5rem;
}

/* Image upload */
.image-upload-container {
  margin-top: 0.5rem;
}

.uploaded-images {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.uploaded-image {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.uploaded-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uploaded-image .delete {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(255, 56, 96, 0.9);
  border: none;
}

.upload-button label {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  color: var(--color-text);
}

.upload-button label:hover {
  background: var(--bg-glass);
  border-color: var(--color-text-subtle);
}

/* Review step */
.review-step .subtitle {
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}

.review-step .review-section {
  margin-bottom: 1.5rem;
}

.review-step .box {
  background: var(--bg-glass-subtle);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-text);
  padding: 1rem;
}

.review-step .box .label {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.review-step .box .content {
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.review-step .marker-summary {
  margin-bottom: 0.75rem;
}

.review-step .notification.is-warning {
  background: rgba(255, 221, 87, 0.2);
  border: 1px solid rgba(255, 221, 87, 0.4);
  color: #ffe08a;
}

.review-step .notification.is-warning ul {
  margin-left: 1.5rem;
  margin-top: 0.5rem;
}

/* Story type selector */
.story-type-selector {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.story-type-selector .title {
  color: var(--color-text);
  margin-bottom: 2rem;
  text-align: center;
}

.type-cards {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  max-width: 600px;
}

.type-card {
  flex: 1;
  padding: 2rem 1.5rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: var(--bg-glass-subtle);
  backdrop-filter: blur(3px);
  cursor: pointer;
  transition: all var(--transition-slow);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.type-card:hover {
  border-color: rgba(78, 205, 196, 0.6);
  background: rgba(78, 205, 196, 0.1);
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.type-card .card-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.type-card .title {
  color: var(--color-text);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.type-card .subtitle,
.type-card .title:not(.is-spaced) + .subtitle {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-top: 0;
}

/* Place marker step */
.place-marker {
  padding: 2rem;
  text-align: center;
}

.place-marker .title,
.place-marker .subtitle {
  color: var(--color-text);
}

/* Icon Picker */
.icon-picker {
  margin-bottom: 1rem;
}

.icon-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.icon-option {
  width: 56px;
  height: 56px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: var(--bg-glass-subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
  padding: 8px;
}

.icon-option:hover {
  border-color: rgba(78, 205, 196, 0.5);
  background: rgba(78, 205, 196, 0.1);
}

.icon-option.selected {
  border-color: var(--color-primary);
  background: rgba(78, 205, 196, 0.2);
  box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.3);
}

.icon-option img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.icon-option.custom-upload {
  border-style: dashed;
}

.icon-option.custom-upload .custom-upload-label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-option.custom-upload .custom-upload-label img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.icon-option .upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.icon-option .upload-placeholder svg {
  width: 20px;
  height: 20px;
  margin-bottom: 2px;
}

.icon-option .upload-text {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .submission-panel-header,
  .submission-panel-body,
  .submission-panel-footer {
    padding: 1rem;
  }

  .placement-instruction {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
  }

  /* Position placement overlay as a header on mobile */
  .map-placement-overlay {
    top: 70px;
    left: 0;
    right: 0;
    bottom: auto;
    transform: none;
  }

  .map-placement-overlay .placement-instruction {
    border-radius: 0;
    width: 100%;
  }

  .story-type-selector {
    min-height: auto;
    padding: 1rem;
  }

  .type-cards {
    flex-direction: column;
  }

  .type-card {
    padding: 1.5rem 1rem;
  }
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
}

.leaflet-popup-content {
  margin: 12px 16px;
}

/* Locate button */
.locate-button {
  position: fixed;
  bottom: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-controls);
  transition: all var(--transition-normal);
  color: #fff;
  font-size: 1.1rem;
}

.locate-button:hover {
  background: #222;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.locate-button:active {
  transform: scale(0.95);
}

.locate-button.locating {
  background: var(--color-primary);
  color: var(--color-text);
}

/* Layer toggle button (above locate button) */
.layer-toggle-button {
  position: fixed;
  bottom: 74px;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  left: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-controls);
  transition: all var(--transition-normal);
  color: #fff;
  font-size: 1.1rem;
}

.layer-toggle-button:hover {
  background: #222;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.layer-toggle-button:active {
  transform: scale(0.95);
}

/* User location marker */
.user-location-icon {
  background: transparent !important;
  border: none !important;
}

.user-location-marker {
  width: 16px;
  height: 16px;
  background: rgb(241, 70, 104);
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Locate button stays in bottom-left for both LTR and RTL */

/* Mobile - move buttons above pin details when showing */
@media (max-width: 768px) {
  body:has(.mobile-bottom-stack) .locate-button {
    bottom: calc(var(--mobile-stack-height, 0px) + 20px + env(safe-area-inset-bottom, 0px));
  }

  body:has(.mobile-bottom-stack) .layer-toggle-button {
    bottom: calc(var(--mobile-stack-height, 0px) + 74px + env(safe-area-inset-bottom, 0px));
  }
}

/* Tablet - pin detail positioning */
@media (min-width: 769px) and (max-width: 1199px) {
  .pin-detail {
    left: auto;
    right: 20px; /* Fixed to right side like widescreen */
  }

  html[dir="rtl"] .pin-detail {
    left: 80px; /* Fixed to left with offset to clear buttons */
    right: auto;
  }
}

/* Widescreen - pin detail moves to right side, full height */
@media (min-width: 1200px) {
  .pin-detail {
    left: auto;
    right: 20px;
    bottom: 20px;
    max-width: 600px;
    max-height: calc(100vh - 100px); /* fallback for older browsers */
    max-height: calc(100dvh - 100px);
    padding: 1.5rem;
  }

  .pin-detail .pin-images {
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .pin-detail .pin-images img {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .pin-detail .pin-images img:hover {
    transform: scale(1.02);
  }

  /* Hide mobile toggle on widescreen */
  .pin-detail .pin-detail-toggle {
    display: none;
  }
}

/* RTL widescreen - pin detail moves to left side, clearing buttons */
@media (min-width: 1200px) {
  html[dir="rtl"] .pin-detail {
    left: 80px; /* Clear the locate and layer toggle buttons */
    right: auto;
  }
}

/* Admin page - dark theme */
.admin-page {
  height: 100%;
  min-height: 100vh; /* fallback for older browsers */
  min-height: 100dvh;
  overflow-y: auto;
  background: #1a1a2e;
  color: #f0f0f0;
}

.admin-page .section {
  padding-top: 2rem;
}

/* Admin navbar */
.admin-navbar {
  background: #16213e;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #2a2a4e;
}

.admin-navbar .admin-title {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.admin-navbar .admin-back-btn {
  background: transparent;
  border: 1px solid #4a4a6e;
  color: #ccc;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.admin-navbar .admin-back-btn:hover {
  background: #2a2a4e;
  color: #fff;
  border-color: #6a6a8e;
}

/* Admin tabs - dark theme */
.admin-page .tabs {
  background: transparent;
  border-bottom: 1px solid #2a2a4e;
}

.admin-page .tabs ul {
  border-bottom: none;
}

.admin-page .tabs li a {
  color: #888;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 1.25rem;
}

.admin-page .tabs li a:hover {
  color: #fff;
  background: transparent;
  border-bottom-color: #4a4a6e;
}

.admin-page .tabs li.is-active a {
  color: #fff;
  background: transparent;
  border-bottom: 2px solid #667eea;
}

/* Admin titles and text */
.admin-page .title {
  color: #fff;
}

.admin-page .title.is-4,
.admin-page .title.is-5 {
  color: #e0e0e0;
}

.admin-page .has-text-grey {
  color: #888 !important;
}

/* Admin tables - dark theme */
.admin-page .table {
  background: #16213e;
  color: #e0e0e0;
}

.admin-page .table th {
  background: #0f1629;
  color: #b0b0b0;
  border-color: #2a2a4e;
  font-weight: 500;
}

.admin-page .table td {
  border-color: #2a2a4e;
  color: #d0d0d0;
}

.admin-page .table.is-striped tbody tr:nth-child(even) {
  background: #1e1e3a;
}

.admin-page .table.is-hoverable tbody tr:hover {
  background: #2a2a4e;
}

/* Admin tags */
.admin-page .tag {
  background: #2a2a4e;
  color: #d0d0d0;
}

.admin-page .tag.is-success {
  background: #1e6f50;
  color: #a8e6cf;
}

.admin-page .tag.is-warning {
  background: #8b6914;
  color: #ffd93d;
}

.admin-page .tag.is-info {
  background: #1e4a6f;
  color: #a8d4e6;
}

.admin-page .tag.is-light {
  background: #3a3a5e;
  color: #999;
}

/* Admin buttons */
.admin-page .button {
  background: #2a2a4e;
  border-color: #4a4a6e;
  color: #d0d0d0;
}

.admin-page .button:hover {
  background: #3a3a5e;
  border-color: #6a6a8e;
  color: #fff;
}

.admin-page .button.is-primary {
  background: #667eea;
  border-color: #667eea;
  color: #fff;
}

.admin-page .button.is-primary:hover {
  background: #5a6fd6;
}

.admin-page .button.is-success {
  background: #1e6f50;
  border-color: #1e6f50;
  color: #fff;
}

.admin-page .button.is-warning {
  background: #8b6914;
  border-color: #8b6914;
  color: #fff;
}

.admin-page .button.is-danger {
  background: #6f1e1e;
  border-color: #6f1e1e;
  color: #fff;
}

.admin-page .button.is-danger.is-light {
  background: #3a1e1e;
  border-color: #5a2e2e;
  color: #e88;
}

.admin-page .button.is-warning.is-light {
  background: #3a2e1e;
  border-color: #5a4e2e;
  color: #eb8;
}

.admin-page .button.is-light {
  background: #2a2a4e;
  border-color: #4a4a6e;
  color: #ccc;
}

/* Admin notifications */
.admin-page .notification.is-danger {
  background: #4a1e1e;
  color: #faa;
}

/* Admin password prompt */
.admin-page .password-prompt {
  background: #16213e;
  border-radius: 8px;
  padding: 2rem;
  max-width: 400px;
  margin: 4rem auto;
  border: 1px solid #2a2a4e;
}

.admin-page .password-prompt .label {
  color: #b0b0b0;
}

.admin-page .password-prompt .input {
  background: #1a1a2e;
  border-color: #3a3a5e;
  color: #fff;
}

.admin-page .password-prompt .input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* Admin modals - dark theme */
.admin-page .modal-card {
  background: #1a1a2e;
}

.admin-page .modal-card-head {
  background: #16213e;
  border-bottom: 1px solid #2a2a4e;
}

.admin-page .modal-card-title {
  color: #fff;
}

.admin-page .modal-card-body {
  background: #1a1a2e;
  color: #d0d0d0;
}

.admin-page .modal-card-body .label {
  color: #b0b0b0;
}

.admin-page .modal-card-body .input,
.admin-page .modal-card-body .textarea,
.admin-page .modal-card-body .select select {
  background: #16213e;
  border-color: #3a3a5e;
  color: #fff;
}

.admin-page .modal-card-body .input:focus,
.admin-page .modal-card-body .textarea:focus,
.admin-page .modal-card-body .select select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.admin-page .modal-card-body .help {
  color: #888;
}

.admin-page .modal-card-foot {
  background: #16213e;
  border-top: 1px solid #2a2a4e;
}

/* Admin content blocks */
.admin-page .content p strong {
  color: #b0b0b0;
}