:root {
  --bg: #0f172a;
  --panel: rgba(15, 23, 42, 0.92);
  --panel-border: rgba(148, 163, 184, 0.18);
  --surface: rgba(15, 23, 42, 0.78);
  --text: #e2e8f0;
  --muted: #94a3b8;
  --green: #22c55e;
  --yellow: #facc15;
  --red: #ef4444;
  --shadow: 0 20px 45px rgba(15, 23, 42, 0.4);
  /* Referencia (1536x864) alapú fix méretek; a tényleges alkalmazkodást a --ui-scale transzformáció végzi, nem ezek a változók */
  --right-ui-width: 430px;
  --ui-scale: 1;
  --article-content-width: 800px;
  --article-left-content-width: 240px;
  --article-left-image-viewport-height: clamp(20rem, calc(100vh - 18rem), 36rem);
  --article-sidebar-gap: 24px;
  --ui-readable-font-size: 0.95rem;
  --frame-color-rgb: 148, 163, 184;
  --frame-border-alpha: 0.28;
  --frame-shadow-alpha: 0.22;
  --frame-inset-alpha: 0.42;
  --frame-inset: 8px;
  --frame-border-width: 1px;
  --frame-border-style: solid;
  --frame-radius: 14px;
  --control-frame-gap: 10px;
  --control-frame-inset: var(--frame-inset);
  --menu-frame-inset: var(--frame-inset);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  font-family: "Segoe UI", sans-serif;
  background: linear-gradient(135deg, #020817, #0f172a 42%, #111827);
  color: var(--text);
}

body {
  overflow: hidden;
}

.application-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.application-shell::after {
  position: absolute;
  inset: var(--frame-inset);
  z-index: 2000;
  border: var(--frame-border-width) var(--frame-border-style) rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  border-radius: var(--frame-radius);
  box-shadow:
    inset 0 0 0 1px rgba(2, 8, 23, var(--frame-inset-alpha)),
    0 8px 24px rgba(2, 8, 23, var(--frame-shadow-alpha));
  content: "";
  pointer-events: none;
}

#app {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100%;
}

@media (max-width: 600px) {
  :root {
    --control-frame-inset: 5px;
    --menu-frame-inset: 5px;
  }

  .menu-toggle,
  .main-menu-panel {
    left: calc(5px / var(--ui-scale));
  }

  .application-shell::after {
    --frame-inset: 5px;
    --frame-radius: 10px;
  }
}

.frame-settings {
  position: absolute;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: max(1rem, env(safe-area-inset-left));
  width: 276px;
  color: var(--text);
  font-size: 0.9rem;
}

.frame-settings-toggle,
.frame-settings-panel {
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.94);
  box-shadow: 0 8px 22px rgba(2, 8, 23, 0.28);
  backdrop-filter: blur(12px);
}

.frame-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.frame-settings-icon {
  color: #94a3b8;
  font-size: 0.95rem;
}

.frame-settings-panel {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  width: 276px;
  max-height: calc(100vh - 3.5rem);
  padding: 0.8rem;
  border-radius: 10px;
  overflow-y: auto;
}

.frame-settings-panel[hidden] {
  display: none;
}

.frame-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
}

.frame-settings-header h2 {
  margin: 0;
  font-size: 0.95rem;
}

.frame-settings-close {
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.frame-setting-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.frame-setting-field select {
  width: 100%;
  padding: 0.38rem 0.45rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.9);
  color: var(--text);
  font: inherit;
}

.frame-color-control,
.frame-setting-field > span:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.frame-color-control input {
  width: 2.3rem;
  height: 1.45rem;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}

.frame-color-control output,
.frame-setting-field output {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.frame-setting-field input[type="range"] {
  width: 100%;
  accent-color: #94a3b8;
}

.frame-settings-reset {
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.1);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.frame-preview {
  height: 18px;
  margin-top: 0.7rem;
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 6px;
  background: rgba(2, 8, 23, 0.35);
}

.frame-preview span {
  display: block;
  width: 100%;
  height: 100%;
  border: var(--frame-border-width) var(--frame-border-style) rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  border-radius: var(--frame-radius);
  box-shadow: 0 2px 6px rgba(2, 8, 23, var(--frame-shadow-alpha));
}

body.dark-mode .frame-settings-toggle,
body.dark-mode .frame-settings-panel {
  background: rgba(10, 13, 20, 0.94);
}

body.dark-mode .frame-setting-field select {
  background: rgba(22, 27, 38, 0.9);
}

body.dark-mode {
  background: linear-gradient(135deg, #04060a, #0a0e16 45%, #0d1219);
}

.leaflet-container {
  background: #dfeaf4;
}

/* Szemkímélőbb, kevésbé harsány raszter tile megjelenés melegebb, vörös-narancsos tónussal; a saját UI/pontok rétegeit nem érinti */
.leaflet-tile-pane {
  filter: brightness(0.95) contrast(1.15) saturate(1.25) sepia(18%) hue-rotate(-8deg);
}

.leaflet-control-zoom a,
.leaflet-control-attribution {
  border: 0 !important;
}

.leaflet-control-attribution {
  padding: 0 2px;
  background: transparent !important;
  box-shadow: none;
  color: rgba(15, 23, 42, 0.7);
  font-size: 0.1rem;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.78);
}

.leaflet-control-attribution a {
  color: inherit;
}

.address-search {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 450;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: var(--right-ui-width);
  padding: 0.45rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.88);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(10px);
}

.address-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.address-search-input {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.72);
  color: var(--text);
  font: inherit;
}

.address-search-input::placeholder {
  color: var(--muted);
}

.address-search-button {
  flex: 0 0 auto;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 7px;
  background: #2563eb;
  color: white;
  font: inherit;
  cursor: pointer;
}

.address-search-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.address-search-status {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  color: var(--text);
  font-size: 0.8rem;
}

.address-search-warning {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  width: min(100%, 22rem);
  padding: 0.5rem 0.65rem;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  background: #fef3c7;
  color: #78350f;
  font-size: 0.8rem;
  line-height: 1.35;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
}

.address-search-warning[hidden] {
  display: none;
}

.address-search-warning-clear {
  padding: 0.3rem 0.6rem;
  border: 1px solid #b45309;
  border-radius: 6px;
  background: #fff;
  color: #78350f;
  font: inherit;
  cursor: pointer;
}

.address-search-results {
  position: absolute;
  top: calc(100% + 1.45rem);
  right: 0;
  z-index: 1;
  width: min(100%, 28rem);
  max-height: min(55vh, 24rem);
  margin: 0;
  padding: 0.35rem;
  overflow-y: auto;
  border: 1px solid rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
  list-style: none;
}

.address-search-results[hidden] {
  display: none;
}

.address-search-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.address-search-result:hover,
.address-search-result:focus-visible {
  background: rgba(var(--frame-color-rgb), 0.2);
  outline: none;
}

.address-search-result-name {
  font-weight: 700;
}

.address-search-result-details {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.point-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px !important;
  height: 42px !important;
  border: 2px solid rgba(226, 232, 240, 0.9);
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.92);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
  color: #f8fafc;
  font-size: 0.9rem;
  font-weight: 700;
}

.point-cluster span {
  line-height: 1;
}

/* Térképi jelölő (pont és klaszter): SVG alak + középre igazított szám; az iconAnchor a háromszög csúcsán van. */
.map-pin {
  background: transparent;
  border: 0;
  cursor: pointer;
  filter: drop-shadow(0 3px 4px rgba(15, 23, 42, 0.4));
}

.map-pin svg {
  display: block;
  overflow: visible;
}

.map-pin-label {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #f8fafc;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

/* Jelölők (klaszter és egyedi pont): grafit–bordó test, réz-arany kontúr, belső gyűrű, rétegzett árnyék, visszafogott vöröses-arany fény. */
.map-pin {
  --pin-stop-a: #3a2c2c;
  --pin-stop-b: #17110f;
  --pin-rim: rgb(var(--frame-color-rgb));
  --pin-ring: rgba(var(--frame-color-rgb), 0.4);
}

.map-pin.map-pin-cluster,
.map-pin.map-pin-point {
  filter: drop-shadow(0 1px 1px rgba(8, 12, 24, 0.5))
    drop-shadow(0 4px 6px rgba(8, 12, 24, 0.38))
    drop-shadow(0 0 6px rgba(var(--frame-color-rgb), 0.55));
}

.map-pin .cluster-stop-a { stop-color: var(--pin-stop-a); }
.map-pin .cluster-stop-b { stop-color: var(--pin-stop-b); }
.map-pin .cluster-body { stroke: var(--pin-rim); }
.map-pin .cluster-ring { stroke: var(--pin-ring); }

/* A bejelentkezett felhasználó saját pontjai arany, a státuszkorong színe változatlan. */
.map-pin .cluster-stop-own-a { stop-color: #ffd54a; }
.map-pin .cluster-stop-own-b { stop-color: #c98a0b; }
.map-pin.map-pin-own .cluster-ring { stroke: rgba(255, 250, 225, 0.65); }
.map-pin.map-pin-own .map-pin-label { color: #3a2500; text-shadow: 0 1px 1px rgba(255, 244, 200, 0.6); }
.map-pin .cluster-stop-collab-a { stop-color: #e5c6ff; }
.map-pin .cluster-stop-collab-b { stop-color: #7e22ce; }
.map-pin.map-pin-collab .cluster-ring { stroke: rgba(243, 232, 255, 0.75); }
.map-pin.map-pin-collab .map-pin-label { color: #fff; text-shadow: 0 1px 2px rgba(46, 16, 70, 0.8); }

.point-collaborator-entry-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.point-collaborator-entry-row input {
  min-width: 0;
  flex: 1;
}

.point-collaborator-list {
  display: grid;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.point-collaborator-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--tpl-border, rgba(148, 163, 184, 0.35));
  border-radius: 0.5rem;
}

.map-pin-cluster .map-pin-label {
  color: #fff4e1;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(20, 10, 5, 0.6);
}

body.dark-mode .map-pin {
  --pin-rim: rgba(var(--frame-color-rgb), 0.85);
  --pin-ring: rgba(var(--frame-color-rgb), 0.3);
}

body.dark-mode .map-pin.map-pin-cluster,
body.dark-mode .map-pin.map-pin-point {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6))
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 4px rgba(var(--frame-color-rgb), 0.38));
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: rgba(15, 23, 42, 0.96);
  color: var(--text);
  box-shadow: var(--shadow);
}

.leaflet-popup-content {
  margin: 0;
  min-width: 240px;
}

.location-popup {
  padding: 0;
}

.location-popup .popup-shell {
  padding: 0.85rem 0.9rem 0.7rem;
}

.location-popup h3 {
  margin: 0.2rem 0 0.6rem;
  font-size: 1.05rem;
}

.location-popup p {
  margin: 0.4rem 0;
  color: var(--text);
  line-height: 1.5;
}

.location-popup .popup-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.location-popup .status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0f172a;
}

.location-popup .status-badge.available {
  background: rgba(34, 197, 94, 0.9);
}

.location-popup .status-badge.closing-soon {
  background: rgba(250, 204, 21, 0.9);
}

.location-popup .status-badge.closed {
  background: rgba(239, 68, 68, 0.9);
}

.location-popup .popup-image {
  width: 100%;
  max-height: 140px;
  border-radius: 10px;
  object-fit: cover;
  margin-top: 0.5rem;
}

/* Globális tartalék kép: eredeti képarány, nincs levágás. */
.location-popup .popup-image.is-default-point-image,
.media-frame img.is-default-point-image {
  height: auto;
  object-fit: contain;
}

.media-frame img.is-default-point-image {
  max-height: 260px;
}

.default-image-manager-preview {
  display: block;
  max-width: 100%;
  max-height: 220px;
  margin: 0.5rem 0;
  object-fit: contain;
  border-radius: 10px;
}

.info-panel {
  position: fixed;
  top: calc((var(--control-frame-inset) + var(--control-frame-gap) + 56px) / var(--ui-scale));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 500;
  display: flex;
  flex-direction: column;
  width: var(--right-ui-width);
  height: max-content;
  max-height: max(
    0px,
    calc(
      100dvh / var(--ui-scale)
      - (var(--control-frame-inset) + var(--control-frame-gap) + 56px) / var(--ui-scale)
      - var(--ui-bottom-controls-reserve)
      - max(1rem, env(safe-area-inset-bottom))
      - 1rem
    )
  );
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  overflow: hidden;
  min-width: 0;
  transform: translateX(0);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.info-panel.hidden {
  opacity: 0;
  transform: translateX(16px);
  pointer-events: none;
}

.supplementary-panel {
  --supplementary-panel-size-ratio: 0.66;
  position: fixed;
  top: calc(max(1rem, env(safe-area-inset-top)) + 4.6rem);
  right: calc(1rem + var(--right-ui-width) + 0.75rem);
  z-index: 499;
  display: flex;
  flex-direction: column;
  width: min(320px, max(220px, calc((100vw / var(--ui-scale)) - var(--right-ui-width) - 3rem)));
  max-height: var(--supplementary-panel-max-height, calc(100dvh - max(1rem, env(safe-area-inset-top)) - 5.6rem));
  padding: 1rem;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  overflow: hidden;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transform-origin: top right;
  transform: translateX(16px) scale(var(--supplementary-panel-size-ratio));
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.supplementary-panel.has-content.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(var(--supplementary-panel-size-ratio));
}

.supplementary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.supplementary-header h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.44rem, calc(var(--ui-readable-font-size) / var(--ui-scale) / var(--supplementary-panel-size-ratio)), 1.8rem);
}

.supplementary-close {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
}

.supplementary-panel-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 0.8rem;
  color: var(--text);
  font-size: clamp(1.44rem, calc(var(--ui-readable-font-size) / var(--ui-scale) / var(--supplementary-panel-size-ratio)), 1.8rem);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.close-panel {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
}

#panel-content {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.panel-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  justify-content: flex-start;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1rem 0.75rem;
  padding-right: 2.9rem;
  flex-shrink: 0;
}

.media-frame {
  flex-shrink: 0;
}

.panel-middle {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: none;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0 1rem;
}

.panel-middle .meta-grid {
  flex: 0 0 auto;
  margin-top: 1rem;
}

.description-scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 1rem;
}

.eyebrow {
  margin: 0 0 0.35rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
}

.panel-header h2 {
  margin: 0;
  font-size: clamp(1.2rem, 1.45rem, 1.6rem);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #0f172a;
}

.status-badge.available {
  background: rgba(34, 197, 94, 0.9);
}

.status-badge.closing-soon {
  background: rgba(250, 204, 21, 0.9);
}

.status-badge.closed {
  background: rgba(239, 68, 68, 0.9);
}

.immediate-availability-notice {
  margin: 0.75rem 0;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid #22c55e;
  border-radius: 0.35rem;
  background: rgba(34, 197, 94, 0.12);
  color: var(--text);
  font-weight: 600;
}

.media-frame {
  position: relative;
  margin-top: 1rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(30, 41, 59, 0.6);
  flex-shrink: 0;
}

.media-frame img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  background: rgba(148, 163, 184, 0.1);
}

.meta-grid {
  margin-top: 1rem;
  display: grid;
  gap: 0.4rem;
  flex-shrink: 0;
}

.address-meta-item {
  flex-direction: column;
  align-items: flex-start;
}

.panel-address {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.media-frame .cropper-image {
  transform-origin: center;
}

.meta-item {
  display: flex;
  justify-content: space-between;
  min-width: 0;
  gap: 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.meta-item span {
  color: var(--muted);
  flex-shrink: 0;
}

.meta-item strong {
  min-width: 0;
  color: var(--text);
  text-align: right;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.address-link {
  color: #3b82f6;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.22s ease;
}

.address-link:hover {
  color: #60a5fa;
  text-decoration: underline;
}

.description {
  margin: 1rem 0 0;
  max-width: 100%;
  color: var(--text);
  font-size: clamp(var(--ui-readable-font-size), 1rem, 1.1rem);
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.opening-hours-value {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  font-size: clamp(0.9rem, 0.95rem, 1rem);
  line-height: 1.35;
  text-align: right;
  overflow: hidden;
}

.opening-hours-meta {
  display: block;
}

.opening-hours-meta > span {
  display: block;
  margin-bottom: 0.25rem;
}

.adaptive-panel-section {
  display: block;
}

.panel-optional-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.adaptive-panel-section.is-collapsible .panel-optional-toggle {
  display: flex;
}

.adaptive-panel-section.is-collapsible:not(.is-collapsed) .panel-optional-content > span {
  display: none;
}

.panel-optional-toggle::after {
  content: "▾";
  margin-left: 0.5rem;
  transition: transform 0.18s ease;
}

.adaptive-panel-section.is-collapsible:not(.is-collapsed) .panel-optional-toggle::after {
  transform: rotate(180deg);
}

.panel-optional-content {
  min-width: 0;
}

.adaptive-panel-section.is-collapsed .panel-optional-content {
  display: none;
}

.opening-hours-panel-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.8rem;
  min-width: 0;
  text-align: left;
}

.opening-hours-panel-list > div {
  display: grid;
  align-content: start;
  gap: 0.1rem;
  min-width: 0;
}

.opening-hours-day {
  display: grid;
  grid-template-columns: minmax(5.4rem, max-content) minmax(0, 1fr);
  min-width: 0;
  gap: 0.35rem;
  overflow-wrap: anywhere;
}

.opening-hours-day span {
  min-width: 0;
  color: var(--muted);
  white-space: nowrap;
}

.opening-hours-day strong {
  min-width: 0;
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
}

.opening-hours-legacy {
  white-space: pre-line;
}

.opening-hours-exceptions-meta {
  display: block;
}

.opening-hours-exceptions-meta > .opening-hours-exceptions {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.opening-hours-exceptions > summary.panel-optional-toggle {
  display: flex;
  list-style: none;
}

.opening-hours-exceptions > summary::-webkit-details-marker {
  display: none;
}

.opening-hours-exceptions > .opening-hours-day {
  margin-top: 0.25rem;
}

.description-scroll::-webkit-scrollbar {
  width: 8px;
}

.description-scroll::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.08);
  border-radius: 999px;
}

.description-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 999px;
}

.panel-actions {
  box-sizing: border-box;
  width: 100%;
  padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  flex: 0 0 auto;
}

.panel-actions > button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

#edit-point-btn,
#delete-point-btn {
  grid-row: 1;
}

#edit-point-btn {
  grid-column: 1;
}

#delete-point-btn {
  grid-column: 2;
}

.btn-supplementary {
  flex: 1;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  font-size: clamp(0.9rem, 0.95rem, 1rem);
  font-weight: 600;
  cursor: pointer;
}

.btn-supplementary:hover {
  background: rgba(148, 163, 184, 0.2);
}

.btn-edit {
  flex: 1;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  background: rgba(59, 130, 246, 0.18);
  color: #bfdbfe;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 8px;
  font-size: clamp(0.9rem, 0.95rem, 1rem);
  font-weight: 600;
  cursor: pointer;
}

.btn-edit:hover {
  background: rgba(59, 130, 246, 0.28);
}

.btn-delete {
  flex: 1;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: 0;
  border-radius: 8px;
  font-size: clamp(0.9rem, 0.95rem, 1rem);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.2);
}

.btn-delete:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-delete:active {
  transform: translateY(0);
}

/* Admin Button and Modal Styles */

.admin-button {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  left: calc(max(1rem, env(safe-area-inset-left)) + 30px + 10px);
  z-index: 450;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  border: 0;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  transition: all 0.22s ease;
}

.menu-toggle {
  position: fixed;
  top: calc(50% / var(--ui-scale));
  left: calc(var(--menu-frame-inset) / var(--ui-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 10rem;
  padding: 0;
  border: 1px solid rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  border-left: 0;
  border-radius: 0 50% 50% 0 / 0 18% 18% 0;
  background: rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.05;
  cursor: pointer;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  transform: translateY(-50%);
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.22s ease;
}

.menu-toggle:hover {
  background: rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  transform: translateY(calc(-50% - 1px));
}

.menu-toggle .menu-toggle-icon {
  display: none;
}

.menu-toggle .menu-toggle-label {
  display: block;
  width: 1.25rem;
  color: var(--text);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.main-menu-panel {
  position: fixed;
  top: calc(50% / var(--ui-scale));
  left: calc((var(--menu-frame-inset) + var(--frame-border-width)) / var(--ui-scale));
  z-index: 460;
  display: flex;
  flex-direction: column;
  width: min(320px, calc(100vw - 1rem));
  height: 680px;
  padding: 1rem;
  border: 1px solid rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  border-left: 0;
  border-radius: 0 18px 18px 0;
  background: rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  color: var(--text);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translate(-100%, calc(-50% + 24px / var(--ui-scale)));
  transform-origin: left center;
  transition: opacity 0.22s ease, transform 0.22s ease;
  isolation: isolate;
}

.main-menu-panel > * {
  position: relative;
  z-index: 1;
}

.main-menu-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.main-menu-panel .menu-header-flag {
  flex: 0 0 auto;
  width: 24px;
  height: 16px;
  transform: none;
  pointer-events: none;
  user-select: none;
}

.main-menu-panel .menu-header-flag[hidden] {
  display: none;
}

.main-menu-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, calc(-50% + 24px / var(--ui-scale)));
}

.selected-menu-panel {
  width: min(880px, calc(100vw - 1rem));
  height: min(680px, calc(100vh - 2rem));
  max-height: min(680px, calc(100vh - 2rem));
}

.selected-menu-panel .main-menu-header {
  padding-right: 0;
}

.selected-menu-panel-content {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.article-editor,
.article-viewer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  color: #172033;
}

.article-editor-toolbar {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  padding: 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(255, 255, 255, 0.78);
}

.article-editor-toolbar button,
.article-editor-toolbar select,
.article-editor-toolbar input,
.article-editor-file-button {
  min-height: 2rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid rgba(71, 85, 105, 0.28);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.88);
  color: #172033;
  font: inherit;
  font-size: 0.75rem;
}

.article-editor-toolbar button,
.article-editor-file-button {
  cursor: pointer;
}

.article-editor-toolbar input[type="url"] {
  min-width: 10rem;
  flex: 1 1 12rem;
}

.article-editor-content,
.article-viewer {
  flex: 1 1 auto;
  width: min(100%, var(--article-content-width));
  max-width: var(--article-content-width);
  min-height: 0;
  overflow: auto;
  padding: 1rem;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.9);
  line-height: 1.55;
}

.article-editor-workspace {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--article-content-width)) minmax(0, 1fr);
  gap: var(--article-sidebar-gap);
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.article-editor-workspace > .article-sidebar-left,
.article-editor-workspace > .article-sidebar-right {
  display: block;
  min-width: 0;
  min-height: 0;
}

.article-editor-workspace > .article-sidebar-left.article-editor-sidebar,
.article-editor-workspace > .article-sidebar-right.article-editor-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.75rem;
  overflow: auto;
  border-right: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.42);
}

.article-sidebar-controls,
.article-sidebar-fields,
.article-sidebar-preview {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.article-sidebar-controls[hidden] {
  display: none;
}

.article-sidebar-controls label {
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
}

.article-sidebar-controls input,
.article-sidebar-controls select,
.article-sidebar-add,
.article-sidebar-remove {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 2.2rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(71, 85, 105, 0.28);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: #172033;
  font: inherit;
  font-size: 0.8rem;
}

.article-sidebar-add,
.article-sidebar-remove {
  cursor: pointer;
}

.article-sidebar-image-frame {
  position: relative;
  display: block;
  width: min(100%, var(--article-left-content-width));
  max-width: var(--article-left-content-width);
  aspect-ratio: 1 / 1;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  background: #e2e8f0;
}

.article-sidebar-image-frame.is-editable {
  height: var(--article-left-image-viewport-height);
  aspect-ratio: auto;
  cursor: grab;
  touch-action: none;
}

.article-sidebar-image-frame.is-editable:active {
  min-height: 0;
}

.article-sidebar-image-frame .article-sidebar-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  width: auto;
  height: auto;
  object-position: 50% 50%;
  transform-origin: center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.article-sidebar-caption-layer {
  position: absolute;
  z-index: 1;
  transform-origin: top left;
  pointer-events: none;
}

.article-sidebar-caption {
  position: absolute;
  display: block;
  width: max-content;
  max-width: 84%;
  max-height: 84%;
  overflow: hidden;
  line-height: 1.15;
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.article-sidebar-image-frame.is-editable .article-sidebar-caption {
  cursor: grab;
  pointer-events: auto;
}

.article-sidebar-image-frame.is-editable .article-sidebar-caption:active {
  cursor: grabbing;
}

.article-sidebar-caption-controls {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(71, 85, 105, 0.2);
}

.article-sidebar-caption-controls label {
  color: #475569;
  font-size: 0.75rem;
  font-weight: 600;
}

.article-sidebar-caption-controls textarea,
.article-sidebar-caption-controls select,
.article-sidebar-caption-controls button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 2rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid rgba(71, 85, 105, 0.28);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  color: #172033;
  font: inherit;
  font-size: 0.75rem;
}

.article-sidebar-caption-controls textarea {
  min-height: 3.25rem;
  resize: vertical;
}

.article-sidebar-caption-controls button {
  cursor: pointer;
}

.article-sidebar-caption-controls button[aria-pressed="true"] {
  background: #e2e8f0;
  border-color: #64748b;
}

.article-sidebar-caption-color,
.article-sidebar-caption-style,
.article-sidebar-caption-opacity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  min-width: 0;
}

.article-sidebar-caption-color input[type="color"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 2rem;
  padding: 0.2rem;
}

.article-sidebar-caption-opacity {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.article-sidebar-caption-opacity input {
  width: 100%;
  min-width: 0;
}

.article-sidebar-caption-rotation {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.article-sidebar-caption-rotation input {
  width: 100%;
  min-width: 0;
}

.article-sidebar-caption-opacity output {
  min-width: 2.6rem;
  color: #475569;
  font-size: 0.72rem;
  text-align: right;
}

.article-sidebar-caption-rotation output {
  color: #475569;
  font-size: 0.72rem;
  text-align: right;
}

.article-sidebar-image-frame:not(.is-editable) {
  display: flex;
  flex: 0 0 auto;
  width: min(100%, var(--article-left-content-width));
  max-width: var(--article-left-content-width);
  height: var(--article-left-image-viewport-height);
  aspect-ratio: auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

.article-sidebar-zoom-label {
  margin-top: 0.15rem;
}

.article-sidebar-zoom-value {
  align-self: flex-end;
  color: #475569;
  font-size: 0.72rem;
}

.article-sidebar-preview-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 8rem;
  border: 1px solid rgba(71, 85, 105, 0.22);
  background: #fff;
}

.article-sidebar-hint {
  color: #64748b;
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.article-sidebar-preview a {
  color: #1d4ed8;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.article-viewer {
  display: block;
  overflow-x: auto;
  overflow-y: auto;
  overflow-wrap: anywhere;
}

.interactive-text-editor-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  cursor: default;
}

.interactive-text-export-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  padding: 0.75rem;
  border-bottom: 1px solid rgba(100, 116, 139, 0.24);
  background: rgba(248, 250, 252, 0.72);
  font-family: system-ui, sans-serif;
}

.interactive-text-export-controls label {
  flex: 0 0 100%;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
}

.interactive-text-export-controls select,
.interactive-text-export-controls input,
.interactive-text-export-button {
  box-sizing: border-box;
  min-height: 2.2rem;
  max-width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(71, 85, 105, 0.28);
  border-radius: 5px;
  background: #fff;
  color: #172033;
  font: inherit;
  font-size: 0.78rem;
}

.interactive-text-export-controls select,
.interactive-text-export-controls input {
  flex: 0 1 10rem;
  min-width: 0;
}

.interactive-text-export-controls .interactive-text-password-toggle {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.interactive-text-export-controls .interactive-text-password-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  min-height: 1rem;
  margin: 0;
  accent-color: #237a72;
}

.interactive-text-password-fields {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 0.55rem;
  min-width: 0;
}

.interactive-text-password-fields[hidden] {
  display: none;
}

.interactive-text-password-fields input[type="password"] {
  flex: 1 1 12rem;
}

.interactive-text-export-button {
  flex: 0 1 auto;
  background: rgba(35, 122, 114, 0.1);
  border-color: rgba(35, 122, 114, 0.4);
  cursor: pointer;
}

.interactive-text-open-button {
  background: rgba(185, 154, 88, 0.12);
  border-color: rgba(185, 154, 88, 0.52);
  color: #6b5320;
}

.interactive-text-export-status {
  flex: 1 1 100%;
  color: #52636a;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.interactive-text-editor-blocks {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.interactive-text-editor-block {
  min-width: 0;
  padding: 0 0 1rem;
  border-bottom: 1px solid rgba(100, 116, 139, 0.24);
}

.interactive-text-editor-block h3 {
  margin: 0 0 0.5rem;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
}

.interactive-text-fixed-editor {
  min-height: 5rem;
  outline: none;
}

.interactive-text-fixed-editor:focus {
  box-shadow: inset 0 -1px rgba(59, 130, 246, 0.65);
}

.interactive-text-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(calc(10.5rem / var(--ui-scale)), calc(25% - 0.5625rem))), 1fr));
  align-items: start;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

.interactive-text-editor-choice > label {
  display: block;
  margin: 0.4rem 0 0.25rem;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 600;
}

.interactive-text-editor-choice textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.7rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(71, 85, 105, 0.25);
  border-radius: 5px;
  background: #fff;
  color: #172033;
  font: inherit;
  font-size: 0.85rem;
  resize: vertical;
}

.interactive-text-editor-choice .interactive-text-explanation-input {
  min-height: 4.2rem;
}

.interactive-text-choice {
  min-width: 0;
  margin: 0;
  padding: 0.65rem;
  border: 1px solid rgba(100, 116, 139, 0.24);
  border-radius: 5px;
  background: rgba(248, 250, 252, 0.78);
}

.interactive-text-choice-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.65rem;
  min-width: 0;
}

.interactive-text-choice-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.2rem 0 0;
  accent-color: #237a72;
}

.interactive-text-choice-label {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.interactive-text-disclosure {
  flex: 0 0 auto;
  min-width: 2rem;
  min-height: 2rem;
  border: 0;
  background: transparent;
  color: #237a72;
  cursor: pointer;
  font: inherit;
}

.interactive-text-explanation {
  margin: 0.55rem 0 0;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(35, 122, 114, 0.4);
  color: #475569;
  white-space: pre-wrap;
}

.interactive-text-grid-explanation {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-top: 1px solid rgba(35, 122, 114, 0.28);
  border-bottom: 1px solid rgba(35, 122, 114, 0.28);
  border-left: 0;
  background: rgba(35, 122, 114, 0.055);
}

.interactive-text-viewer .interactive-text-choice.is-explanation-active {
  border-color: rgba(35, 122, 114, 0.72);
  background: rgba(35, 122, 114, 0.09);
  box-shadow: inset 0 0 0 1px rgba(35, 122, 114, 0.12);
}

.interactive-text-viewer .interactive-text-grid-explanation {
  position: relative;
  border-left: 3px solid rgba(35, 122, 114, 0.58);
}

.interactive-text-viewer .interactive-text-grid-explanation::before {
  position: absolute;
  top: -8px;
  left: var(--interactive-explanation-pointer-x, 50%);
  width: 0;
  height: 0;
  border-right: 7px solid transparent;
  border-bottom: 8px solid rgba(35, 122, 114, 0.58);
  border-left: 7px solid transparent;
  content: '';
  transform: translateX(-50%);
}

.interactive-text-editor-choice .interactive-text-choice-preview {
  margin-top: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px dashed rgba(100, 116, 139, 0.3);
}

.interactive-text-editor-choice .interactive-text-explanation {
  white-space: pre-wrap;
}

.interactive-text-block-actions,
.interactive-text-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.6rem;
}

.interactive-text-block-actions button,
.interactive-text-add-block,
.interactive-text-editor-choice > button {
  min-height: 2rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(71, 85, 105, 0.25);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.85);
  color: #172033;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
}

.interactive-text-block-actions button:disabled {
  opacity: 0.45;
  cursor: default;
}

.interactive-text-block-actions .interactive-text-block-delete {
  margin-left: auto;
  color: #9f2d25;
}

.article-display-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--article-sidebar-gap);
  width: 100%;
  height: 100%;
  min-height: 0;
  container-name: article-display;
  container-type: inline-size;
}

.article-sidebar-left,
.article-sidebar-right {
  display: none;
  flex: 0 0 240px;
  min-width: 0;
  min-height: 250px;
}

.article-display-layout .article-viewer {
  flex: 0 1 var(--article-content-width);
  margin-right: 0;
  margin-left: 0;
}

.article-display-layout > .article-sidebar-left {
  flex-basis: var(--article-left-content-width);
}

.article-display-layout .article-sidebar-left:not(:empty),
.article-display-layout .article-sidebar-right:not(:empty) {
  display: block;
}

.article-display-layout > .article-sidebar-left:not(:empty) {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}

.article-display-layout.has-priority-layout.hide-menu-right-extra > .article-sidebar-right,
.article-display-layout.has-priority-layout.hide-menu-left-extra > .article-sidebar-left {
  display: none !important;
}

.article-display-layout > .article-sidebar-right:has(> .article-sidebar-image-frame) {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}

@container article-display (max-width: 1063px) {
  .article-display-layout:not(.has-priority-layout) .article-sidebar-left,
  .article-display-layout:not(.has-priority-layout) .article-sidebar-right {
    display: none !important;
  }
}

@container article-display (max-width: 1327px) {
  .article-display-layout:not(.has-priority-layout):has(.article-sidebar-left:not(:empty)):has(.article-sidebar-right:not(:empty)) .article-sidebar-left,
  .article-display-layout:not(.has-priority-layout):has(.article-sidebar-left:not(:empty)):has(.article-sidebar-right:not(:empty)) .article-sidebar-right {
    display: none !important;
  }
}

.article-sidebar-right {
  /* A későbbi sidebar tartalom rugalmasan kitöltheti a fenntartott sávot. */
  flex-basis: 240px;
}

.article-viewer img,
.article-viewer video,
.article-viewer iframe,
.article-viewer embed,
.article-viewer object,
.article-viewer table {
  max-width: 100%;
}

.article-viewer img,
.web-article-viewer img {
  height: auto;
}

.article-editor-content {
  position: relative;
  outline: none;
}

.article-editor-content:focus {
  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.article-editor-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.78);
}

.article-editor-save-status {
  margin-right: auto;
  color: #166534;
  font-size: 0.78rem;
}

.article-editor-content [data-article-media],
.article-viewer [data-article-media] {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.article-editor-content,
.article-viewer {
  position: relative;
}

.article-editor-content [data-article-wrap="top-bottom"],
.article-viewer [data-article-wrap="top-bottom"] {
  clear: both;
  display: block;
  float: none;
  margin: 0.75rem auto;
}

.article-editor-content [data-article-wrap="behind"],
.article-viewer [data-article-wrap="behind"] {
  position: absolute;
  z-index: 0;
}

.article-editor-content [data-article-wrap="front"],
.article-viewer [data-article-wrap="front"] {
  position: absolute;
  z-index: 4;
}

.article-editor-content [data-article-wrap="behind"] ~ :not(.article-media-selection),
.article-viewer [data-article-wrap="behind"] ~ *,
.article-editor-content [data-article-wrap="front"] ~ :not(.article-media-selection),
.article-viewer [data-article-wrap="front"] ~ * {
  position: relative;
  z-index: 1;
}

.article-editor-content [data-article-wrap="square"],
.article-viewer [data-article-wrap="square"],
.article-editor-content [data-article-wrap="tight"],
.article-viewer [data-article-wrap="tight"],
.article-editor-content [data-article-wrap="through"],
.article-viewer [data-article-wrap="through"] {
  margin-top: 0;
  margin-bottom: 0.75rem;
  max-width: calc(100% - 1rem);
}

.article-media-image {
  display: block;
  max-width: 100%;
  height: auto;
  cursor: pointer;
}

.article-editor-content::after,
.article-viewer::after {
  display: block;
  clear: both;
  content: "";
}

.article-media-video {
  display: block;
  width: 70%;
  max-width: 100%;
  margin: 0.75rem auto;
  background: #000;
}

.article-media-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.article-editor-content .article-media-video iframe {
  pointer-events: none;
}

.article-viewer p:first-child,
.article-editor-content p:first-child {
  margin-top: 0;
}

/* Webes cikk: tiszta olvasónézet, csak a web-article-* osztályokra hat. */
.web-article-editor-content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  cursor: default;
}

.web-article-url-label {
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
}

.web-article-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.web-article-url-input,
.web-article-load-button {
  min-height: 2.2rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(71, 85, 105, 0.3);
  border-radius: 5px;
  background: #fff;
  color: #172033;
  font: inherit;
  font-size: 0.85rem;
}

.web-article-url-input {
  flex: 1 1 18rem;
  min-width: 0;
}

.web-article-load-button {
  flex: 0 0 auto;
  cursor: pointer;
}

.web-article-status {
  margin: 0;
  color: #475569;
  font-size: 0.8rem;
}

.web-article-preview {
  min-height: 6rem;
  padding: 1rem;
  border: 1px dashed rgba(100, 116, 139, 0.4);
}

.web-article-preview[data-empty]::before {
  color: #64748b;
  font-style: italic;
  content: attr(data-empty);
}

.web-article-viewer .web-article-header,
.web-article-preview .web-article-header {
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(100, 116, 139, 0.3);
}

.web-article-category {
  margin: 0 0 0.3rem;
  color: #9a3412;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.web-article-title {
  margin: 0 0 0.4rem;
  font-size: 1.7rem;
  line-height: 1.25;
}

.web-article-date {
  margin: 0;
  color: #64748b;
  font-size: 0.82rem;
}

.web-article-figure {
  margin: 1rem 0;
}

.web-article-figure img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Szavazás: a poll-* osztályok külön, önálló szerkesztői és látogatói nézetet adnak. */
.poll-editor-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  cursor: default;
}

.poll-admin-editor {
  display: grid;
  gap: 0.8rem;
  width: 100%;
  min-width: 0;
}

.poll-admin-field {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.poll-admin-field > label,
.poll-admin-editor > h3,
.poll-admin-management > h3 {
  margin: 0;
  color: #344b58;
  font-size: 0.82rem;
  font-weight: 700;
}

.poll-admin-field input,
.poll-admin-field textarea,
.poll-admin-field select,
.poll-admin-option-row input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 2.35rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #cbd8dd;
  border-radius: 6px;
  background: #fff;
  color: #172c36;
  font: inherit;
  font-size: 0.9rem;
}

.poll-admin-field textarea {
  min-height: 5rem;
  resize: vertical;
}

.poll-admin-options {
  display: grid;
  gap: 0.45rem;
}

.poll-admin-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  min-width: 0;
}

.poll-admin-checkbox {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #344b58;
  font-size: 0.84rem;
  cursor: pointer;
}

.poll-admin-checkbox input {
  width: 1rem;
  height: 1rem;
  accent-color: #137d79;
}

.poll-secondary-button,
.poll-danger-button,
.poll-vote-button {
  min-height: 2.35rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid #b7c8ce;
  border-radius: 6px;
  background: #f4f8f9;
  color: #203944;
  font: 650 0.84rem/1.2 system-ui, sans-serif;
  cursor: pointer;
}

.poll-option-remove,
.poll-danger-button {
  border-color: #c98983;
  background: #fff7f5;
  color: #87352e;
}

.poll-option-remove:disabled {
  opacity: 0.48;
  cursor: default;
}

.poll-admin-management {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid #d5e0e3;
}

.poll-admin-status,
.poll-status-message {
  margin: 0.35rem 0;
  color: #516a74;
  font: 500 0.86rem/1.45 system-ui, sans-serif;
}

.poll-admin-results {
  width: 100%;
}

.poll-viewer {
  --poll-accent: #137d79;
  padding: clamp(1.2rem, 4vw, 2.4rem);
  background: linear-gradient(145deg, #f8fbfb, #eaf2f2 68%, #f6f8f5);
  color: #17313a;
}

.poll-title {
  margin: 0 0 0.55rem;
  color: #17313a;
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.poll-description {
  margin: 0 0 1.25rem;
  color: #516a74;
  line-height: 1.55;
}

.poll-options {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0 1.2rem;
}

.poll-option-card {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid #cbd8dc;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.84);
  color: #19343d;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.poll-option-card:hover,
.poll-option-card.is-selected {
  border-color: var(--poll-accent);
  background: #f4fbfa;
  box-shadow: inset 0 0 0 1px rgba(19, 125, 121, 0.12);
}

.poll-option-card input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.1rem 0 0;
  accent-color: var(--poll-accent);
}

.poll-option-card span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.poll-vote-button {
  min-height: 2.75rem;
  padding: 0.75rem 1.3rem;
  border-color: var(--poll-accent);
  background: var(--poll-accent);
  color: #fff;
  letter-spacing: 0.04em;
}

.poll-vote-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.poll-results {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

.poll-total-votes {
  margin: 0;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid #c9d7da;
  color: #17313a;
  font: 700 0.92rem system-ui, sans-serif;
}

.poll-result-row {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.poll-result-label {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  color: #28454f;
  font: 500 0.82rem/1.4 system-ui, sans-serif;
}

.poll-result-label span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.poll-result-label span:last-child {
  flex: 0 0 auto;
  color: #526b73;
  font-variant-numeric: tabular-nums;
}

.poll-result-track {
  height: 0.65rem;
  overflow: hidden;
  border-radius: 999px;
  background: #dce7e8;
}

.poll-result-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #137d79, #52aaa0);
  transition: width 260ms ease;
}

.contact-info-editor-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: default;
}

.contact-info-editor {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}

.contact-info-editor-field {
  display: grid;
  gap: 0.3rem;
  color: #344b58;
  font-size: 0.8rem;
  font-weight: 650;
}

.contact-info-editor-field input,
.contact-info-editor-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 2.3rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid #cbd8dd;
  border-radius: 5px;
  background: #fff;
  color: #172c36;
  font: inherit;
  font-size: 0.88rem;
}

.contact-info-editor-field textarea {
  resize: vertical;
}

.contact-info-secondary-button {
  justify-self: start;
  min-height: 2.25rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid #9bb3bb;
  border-radius: 5px;
  background: #f4f8f9;
  color: #25434d;
  cursor: pointer;
  font: 600 0.8rem system-ui, sans-serif;
}

.contact-info-hours-editor {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid #d3dfe2;
  border-radius: 6px;
}

.contact-info-hours-editor h3 {
  margin: 0 0 0.2rem;
  color: #344b58;
  font-size: 0.85rem;
}

.contact-info-hours-edit-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 1fr) repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0.45rem;
}

.contact-info-day-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  color: #344b58;
  font-size: 0.75rem;
}

.contact-info-day-toggle input {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  accent-color: #137d79;
}

.contact-info-hours-edit-row input[type="time"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 2rem;
  padding: 0.25rem;
  border: 1px solid #cbd8dd;
  border-radius: 4px;
  color: #203944;
}

.contact-info-editor-map,
.contact-info-map {
  width: 100%;
  min-height: 2.5rem;
  border: 1px solid #c7d6d9;
  border-radius: 7px;
  overflow: hidden;
}

.contact-info-editor-map {
  height: 210px;
  color: #647b82;
  font-size: 0.8rem;
}

.contact-info-viewer {
  --contact-accent: #176b69;
  padding: clamp(1rem, 3vw, 2rem);
  background: linear-gradient(150deg, #f7faf9, #edf4f2 68%, #f9f8f3);
  color: #19363c;
}

.contact-info-header {
  margin: 0 0 1.2rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid #ccd9d8;
}

.contact-info-header h1 {
  margin: 0 0 0.55rem;
  color: #153c3d;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.contact-info-intro {
  margin: 0;
  color: #526a6b;
  line-height: 1.6;
}

.contact-info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  align-items: stretch;
  gap: 0.8rem;
  margin: 1.1rem 0 1.5rem;
}

.contact-info-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid #d4dfdd;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 4px 14px rgba(26, 60, 59, 0.07);
}

.contact-info-card h2,
.contact-socials h2,
.contact-map-section h2,
.contact-message-form h2 {
  margin: 0 0 0.55rem;
  color: #1c5553;
  font-size: 1rem;
}

.contact-info-value {
  margin: 0;
  color: #263e42;
  font-size: 0.95rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.contact-info-value[href] {
  color: #146e75;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.contact-hours-card {
  grid-row: span 2;
}

.contact-hours-list {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.82rem;
}

.contact-hours-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #edf1f0;
}

.contact-hours-row dt {
  color: #526a6b;
}

.contact-hours-row dd {
  margin: 0;
  color: #263e42;
  font-variant-numeric: tabular-nums;
}

.contact-socials,
.contact-map-section,
.contact-message-form {
  margin-top: 1.5rem;
}

.contact-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.contact-social-links a,
.contact-route-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.3rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid #c3d5d4;
  border-radius: 5px;
  background: #fff;
  color: #176b69;
  font: 600 0.82rem system-ui, sans-serif;
  text-decoration: none;
}

.contact-info-map {
  height: 300px;
  background: #e8efeb;
}

.contact-route-link {
  margin-top: 0.65rem;
  border-color: var(--contact-accent);
  background: var(--contact-accent);
  color: #fff;
}

.contact-message-form {
  display: grid;
  gap: 0.7rem;
  padding: 1.1rem;
  border: 1px solid #cedbd8;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.78);
}

.contact-message-form label {
  display: grid;
  gap: 0.3rem;
  color: #385456;
  font-size: 0.82rem;
  font-weight: 650;
}

.contact-message-form input,
.contact-message-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid #cbd8d6;
  border-radius: 5px;
  background: #fff;
  color: #1d3337;
  font: 400 0.9rem/1.45 system-ui, sans-serif;
}

.contact-message-form textarea {
  resize: vertical;
}

.contact-send-button {
  justify-self: start;
  min-height: 2.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--contact-accent);
  border-radius: 5px;
  background: var(--contact-accent);
  color: #fff;
  font: 650 0.85rem system-ui, sans-serif;
  cursor: pointer;
}

.contact-form-status {
  margin: 0;
  color: #526a6b;
  font-size: 0.82rem;
}

.article-empty {
  color: #64748b;
  font-style: italic;
}

/* Főoldal: ólomüveg-mozaik felület, csak a home-* osztályokra hat. */
.article-viewer.home-viewer,
.article-editor-content.home-editor-content {
  --home-lead: #120706;
  border: 3px solid var(--home-lead);
  border-radius: 6px;
  color: #fff3d4;
  caret-color: #ffd36b;
  text-shadow: 0 1px 2px rgba(18, 7, 6, 0.85);
  background:
    url("../images/fooldal-hatter.jpg") center / cover no-repeat,
    radial-gradient(ellipse 34% 26% at 12% 14%, #d62b1f 0 98%, transparent 100%),
    radial-gradient(ellipse 30% 22% at 86% 10%, #f28a1c 0 98%, transparent 100%),
    radial-gradient(ellipse 28% 24% at 58% 38%, #f6c33a 0 98%, transparent 100%),
    radial-gradient(ellipse 26% 22% at 8% 62%, #8f1119 0 98%, transparent 100%),
    radial-gradient(ellipse 30% 24% at 90% 70%, #4b3fa6 0 98%, transparent 100%),
    radial-gradient(ellipse 30% 26% at 40% 90%, #e9462a 0 98%, transparent 100%),
    linear-gradient(135deg, #b3171e 0%, #e8731a 38%, #f2b52f 62%, #7d0f18 100%);
  box-shadow: inset 0 0 0 2px rgba(242, 181, 47, 0.55);
}

.article-viewer.home-viewer h1,
.article-viewer.home-viewer h2,
.article-viewer.home-viewer h3,
.article-editor-content.home-editor-content h1,
.article-editor-content.home-editor-content h2,
.article-editor-content.home-editor-content h3 {
  margin: 0.2em 0 0.5em;
  padding-bottom: 0.3em;
  border-bottom: 3px solid var(--home-lead);
  color: #ffd36b;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
}

.article-viewer.home-viewer blockquote,
.article-editor-content.home-editor-content blockquote {
  margin: 1rem 0;
  padding: 0.6rem 1rem;
  border-left: 5px solid var(--home-lead);
  background: rgba(18, 7, 6, 0.4);
  color: #ffe9b0;
}

.article-viewer.home-viewer a,
.article-editor-content.home-editor-content a {
  color: #b9b0ff;
}

.article-viewer.home-viewer img[data-article-media="image"],
.article-editor-content.home-editor-content img[data-article-media="image"] {
  border: 3px solid var(--home-lead);
  border-radius: 4px;
}

.article-media-selection {
  position: absolute;
  z-index: 5;
  display: none;
  border: 1px solid #2563eb;
  pointer-events: none;
}

.article-media-selection.is-visible {
  display: block;
}

.article-media-delete {
  position: absolute;
  top: 0;
  right: 0;
  min-height: 1.6rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid #991b1b;
  border-radius: 4px;
  background: #b91c1c;
  color: #fff;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  pointer-events: auto;
}

.article-media-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid #1d4ed8;
  border-radius: 2px;
  background: #fff;
  pointer-events: auto;
  cursor: nwse-resize;
}

.article-media-handle.handle-n,
.article-media-handle.handle-s {
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.article-media-handle.handle-e,
.article-media-handle.handle-w {
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.article-media-handle.handle-nw { top: -5px; left: -5px; cursor: nwse-resize; }
.article-media-handle.handle-n { top: -5px; }
.article-media-handle.handle-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.article-media-handle.handle-e { right: -5px; }
.article-media-handle.handle-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.article-media-handle.handle-s { bottom: -5px; }
.article-media-handle.handle-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.article-media-handle.handle-w { left: -5px; }

.ui-anchor-top-left:has(.main-menu-panel.is-open) .menu-toggle {
  display: none;
}

.main-menu-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-right: 0;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.main-menu-header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.menu-close {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.menu-items-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
  padding: 0.8rem 0;
  margin-right: 0;
  padding-right: 0.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(var(--frame-color-rgb), var(--frame-border-alpha)) transparent;
  scrollbar-width: thin;
}

.menu-items-list::-webkit-scrollbar {
  width: 7px;
}

.menu-items-list::-webkit-scrollbar-track {
  background: transparent;
}

.menu-items-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  background-clip: padding-box;
}

.menu-empty-state {
  padding: 0.8rem 0.2rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.menu-item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin-right: 0.5rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.58);
}

.menu-item.is-active {
  border-color: rgba(96, 165, 250, 0.52);
  background: rgba(59, 130, 246, 0.18);
}

.menu-item-select {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.menu-item-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.25rem;
}

.menu-item-action {
  padding: 0.25rem 0.35rem;
  border: 0;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.1);
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.menu-item-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.menu-item-action:hover,
.menu-close:hover,
.menu-button.secondary:hover {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text);
}

.menu-item-action.delete:hover {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}

.menu-add-button,
.menu-button {
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 7px;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.menu-add-button {
  flex: 0 0 auto;
  margin-right: 0.5rem;
}

.menu-add-button,
.menu-button.primary {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(37, 99, 235, 0.78);
}

.menu-add-button:hover,
.menu-button.primary:hover {
  background: rgba(37, 99, 235, 0.95);
}

.menu-button.secondary {
  background: rgba(148, 163, 184, 0.1);
}

.menu-item-form {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.menu-item-form[hidden] {
  display: none;
}

.menu-item-form label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.menu-item-form input {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 7px;
  background: rgba(30, 41, 59, 0.84);
  color: var(--text);
  font: inherit;
}

.menu-form-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: calc(100% - 0.5rem);
  margin-right: 0.5rem;
  gap: 0.45rem;
}

body.dark-mode .menu-item {
  background: rgba(22, 27, 38, 0.66);
}

body.dark-mode .menu-item-form input {
  background: rgba(22, 27, 38, 0.84);
}

.admin-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.admin-button:active {
  transform: translateY(0);
}

.admin-button.placing {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

/* Modal Styles */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.22s ease;
}

.modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  z-index: 1001;
  width: 500px;
  max-height: min(690px, calc((100vh - 24px) / var(--ui-scale, 1)));
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow);
  overflow-y: auto;
  transform-origin: center center;
  transform: scale(var(--ui-scale));
}

.modal-content h2 {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  color: var(--text);
}

#create-point-form.awaiting-placement > .form-group,
#create-point-form.awaiting-placement > .image-upload-section,
#create-point-form.awaiting-placement > .section-labels-fieldset,
#create-point-form.awaiting-placement > .opening-hours-section,
#create-point-form.awaiting-placement > .point-type-section,
#create-point-form.awaiting-placement > .calendar-section {
  display: none;
}

#create-point-form.awaiting-placement > .form-actions {
  margin-top: 1rem;
}

#create-point-form.awaiting-placement > .form-actions .btn-primary {
  display: none;
}

.point-placement-choice h3 {
  margin: 0 0 0.75rem;
  color: var(--text);
  font-size: 1rem;
}

.point-placement-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.point-placement-options button {
  flex: 1 1 140px;
}

.point-address-placement {
  margin-top: 1rem;
}

.point-address-placement.hidden {
  display: none;
}

.point-address-placement > label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.point-address-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.point-address-search-row input {
  min-width: 0;
  flex: 1;
}

.point-address-search-row button {
  flex: 0 0 auto;
  padding: 0.75rem 1rem;
}

.point-address-search-status {
  display: block;
  min-height: 1.2em;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.75rem 1rem;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  transition: all 0.22s ease;
}

.image-upload-section {
  margin-bottom: 1.2rem;
}

.image-upload-section h3 {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.image-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 1rem;
  border: 1px dashed rgba(96, 165, 250, 0.6);
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.55);
  color: var(--text);
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.image-dropzone:hover,
.image-dropzone:focus-visible,
.image-dropzone.is-dragging {
  border-color: #60a5fa;
  background: rgba(59, 130, 246, 0.2);
  outline: none;
}

.image-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.image-dropzone-title {
  font-weight: 600;
}

.image-dropzone-help {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.image-upload-error {
  min-height: 1.2em;
  margin: 0.45rem 0 0;
  color: #fca5a5;
  font-size: 0.8rem;
}

.image-preview {
  margin-top: 0.65rem;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.6);
}

.image-preview-frame {
  height: 190px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.1);
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.image-preview-frame:active {
  cursor: grabbing;
}

.image-preview-frame .cropper-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
}

.image-reset-button {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(148, 163, 184, 0.1);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.image-reset-button:hover {
  background: rgba(59, 130, 246, 0.2);
}

.image-preview.hidden {
  display: none;
}

.image-preview img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.image-preview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
}

.image-preview-name {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.youtube-video-section {
  margin-bottom: 1.2rem;
}

.youtube-video-section h3 {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.youtube-video-field {
  margin-bottom: 0;
}

.youtube-video-error {
  min-height: 1.2em;
  margin: 0.45rem 0 0;
  color: #fca5a5;
  font-size: 0.8rem;
}

.youtube-video-preview {
  margin-top: 0.65rem;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.6);
}

.youtube-video-preview.hidden {
  display: none;
}

.youtube-video-preview iframe,
.media-frame .youtube-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  background: #000;
}

.media-frame .is-media-hidden {
  display: none;
}

.youtube-image-replay-indicator {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  z-index: 1;
  padding: 0.3rem 0.45rem;
  border-radius: 5px;
  background: rgba(15, 23, 42, 0.78);
  color: var(--text);
  font-size: 0.72rem;
  pointer-events: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.6);
  background: rgba(30, 41, 59, 0.95);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group textarea {
  min-height: 8rem;
  max-width: 100%;
  resize: vertical;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.form-group input:read-only {
  background: rgba(15, 23, 42, 0.6);
  color: var(--muted);
  cursor: not-allowed;
}

.opening-hours-section,
.section-labels-fieldset {
  margin: 0 0 1.2rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
}

.opening-hours-section:disabled,
.calendar-section:disabled {
  opacity: 0.48;
}

.opening-hours-section:disabled *,
.calendar-section:disabled * {
  cursor: not-allowed;
}

.opening-hours-section legend,
.section-labels-fieldset legend {
  padding: 0 0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.section-labels-fieldset .form-group:last-child {
  margin-bottom: 0;
}

.opening-hours-list {
  display: grid;
  gap: 0.55rem;
}

.opening-hours-row {
  display: grid;
  grid-template-columns: minmax(4.8rem, 1fr) auto minmax(5.2rem, 1fr) minmax(5.2rem, 1fr);
  align-items: center;
  gap: 0.4rem;
}

.opening-hours-row > label:first-child {
  color: var(--text);
  font-size: 0.85rem;
}

.closed-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.time-picker {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.time-picker select {
  width: 100%;
  min-width: 0;
  padding: 0.45rem 0.25rem;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}

.time-picker select:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.time-picker span {
  color: var(--text);
  font-weight: 600;
}

.time-picker select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.opening-hours-row .time-picker {
  min-width: 0;
}

.temporary-points-content {
  max-width: 640px;
}

.temporary-points-heading {
  margin: 1rem 0 0.4rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.temporary-points-empty {
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.temporary-point-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: var(--text);
}

.temporary-point-info {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  font-size: 0.85rem;
}

.temporary-point-info span {
  color: var(--muted);
  font-size: 0.78rem;
}

.temporary-point-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.temporary-point-actions button {
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
}

.temporary-point-actions .btn-delete {
  flex: 0 0 auto;
  min-height: 0;
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
}

.point-manager-content {
  max-width: 880px;
  width: min(880px, 96vw);
}

.country-menu-manager-launch {
  margin: 0 0 1rem;
}

.country-menu-manager-content {
  width: min(620px, 96vw);
}

.country-menu-manager-content > label {
  display: block;
  margin: 0.6rem 0 0.35rem;
}

.country-menu-manager-status {
  min-height: 1.3em;
  margin: 0.4rem 0 0.8rem;
  color: var(--muted);
}

.country-menu-manager-list {
  max-height: min(58vh, 520px);
  margin-top: 0.75rem;
  overflow-y: auto;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
}

.country-menu-manager-row {
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.country-menu-manager-row:last-child {
  border-bottom: 0;
}

.country-menu-manager-identity,
.country-menu-manager-control {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.country-menu-manager-identity {
  min-width: 0;
  max-width: 100%;
}

.country-menu-manager-identity > span {
  overflow-wrap: anywhere;
}

.country-menu-manager-control {
  min-width: 145px;
  justify-content: flex-end;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}

.country-menu-manager-control input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #22c55e;
}

.point-manager-scroll {
  max-height: min(60vh, 520px);
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
}

.point-manager-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text);
  font-size: 0.85rem;
}

.point-manager-table th {
  position: sticky;
  top: 0;
  padding: 0.5rem 0.6rem;
  background: rgba(15, 23, 42, 0.98);
  color: var(--muted);
  font-size: 0.75rem;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.point-manager-table td {
  padding: 0.45rem 0.6rem;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  vertical-align: middle;
}

.point-manager-code {
  font-family: Consolas, 'Courier New', monospace;
  white-space: nowrap;
}

.point-manager-address {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.point-manager-address.is-empty {
  color: var(--muted);
  font-style: italic;
}

.point-manager-responsible {
  display: grid;
  gap: 0.3rem;
}

.point-manager-responsible input {
  width: 100%;
  min-width: 8rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.82rem;
}

.point-manager-country-field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.point-responsible-country-picker .point-manager-country-field input {
  flex: 1;
  min-width: 0;
}

.point-manager-flag {
  flex: 0 0 auto;
  width: 28px;
  height: 21px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35);
}

.point-manager-flag.is-empty {
  visibility: hidden;
}

.point-manager-country-field input.is-legacy {
  border-color: #f59e0b;
}

.point-manager-country-hint {
  display: block;
  margin-top: 0.2rem;
  color: #f59e0b;
  font-size: 0.72rem;
}

.point-manager-country-hint[hidden] {
  display: none;
}

.point-manager-country-list {
  position: fixed;
  z-index: 10000;
  margin: 0;
  padding: 0.25rem;
  overflow-y: auto;
  list-style: none;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.99);
  color: #e2e8f0;
  font-size: 0.85rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.point-manager-country-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
}

.point-manager-country-list li.is-active {
  background: rgba(59, 130, 246, 0.35);
}

.point-manager-country-list li.is-empty {
  color: #94a3b8;
  cursor: default;
}

.point-manager-actions {
  white-space: nowrap;
}

.point-manager-actions button {
  min-height: 0;
  margin: 0.1rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
}

.point-manager-empty {
  color: var(--muted);
  text-align: center;
}

.temporary-fields.hidden,
.calendar-editor.hidden,
.calendar-periods.hidden,
.calendar-add-period.hidden {
  display: none;
}

.point-type-section,
.calendar-section {
  margin: 0 0 1.2rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
}

.point-type-section legend,
.calendar-section legend {
  padding: 0 0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.point-type-options,
.calendar-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  color: var(--text);
  font-size: 0.9rem;
}

.temporary-fields {
  margin-top: 0.8rem;
}

.service-language-section {
  margin: 0 0 1rem;
  padding: 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
}

.service-language-section h3 {
  margin: 0 0 0.4rem;
  color: var(--text);
  font-size: 0.95rem;
}

.service-language-section > label {
  display: block;
  margin: 0.5rem 0 0.25rem;
  color: var(--text);
  font-size: 0.85rem;
}

.service-language-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0;
}

.service-language-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.16);
  color: var(--text);
  font-size: 0.82rem;
}

.service-language-chip button {
  min-height: 0;
  padding: 0 0.15rem;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.service-language-options {
  max-height: 11rem;
  margin: 0.35rem 0 0;
  padding: 0.25rem;
  overflow-y: auto;
  list-style: none;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.65);
}

.service-language-options li {
  margin: 0;
  padding: 0;
}

.service-language-options li button {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.service-language-options li button:hover,
.service-language-options li button:focus-visible {
  background: rgba(59, 130, 246, 0.35);
}

.service-language-options li.is-empty {
  padding: 0.35rem 0.5rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.service-languages-meta {
  grid-column: 1 / -1;
}

.service-languages-value {
  color: var(--text);
  line-height: 1.5;
}

.temporary-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(8rem, 1fr) minmax(7rem, auto);
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-size: 0.85rem;
}

.temporary-row input[type="date"] {
  padding: 0.45rem 0.4rem;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  color-scheme: dark;
}

.calendar-help {
  margin: 0 0 0.7rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.calendar-error {
  min-height: 0;
  margin: 0.4rem 0 0;
  color: #f87171;
  font-size: 0.82rem;
}

.calendar-error:empty {
  display: none;
}

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  color: var(--text);
  text-transform: capitalize;
}

.calendar-nav .btn-secondary {
  padding: 0.2rem 0.8rem;
  line-height: 1.2;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.calendar-weekday {
  padding: 0.2rem 0;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

.calendar-day {
  aspect-ratio: 1.25;
  padding: 0;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.calendar-day:hover {
  border-color: rgba(212, 165, 116, 0.7);
}

.calendar-day.is-today {
  text-decoration: underline;
}

.calendar-day.is-configured {
  background: rgba(34, 197, 94, 0.22);
  border-color: rgba(34, 197, 94, 0.6);
}

.calendar-day.is-configured.is-closed {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.6);
}

.calendar-day.is-selected {
  outline: 2px solid #d4a574;
  outline-offset: -2px;
  font-weight: 700;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.calendar-legend i {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.25rem;
  border-radius: 3px;
  vertical-align: -1px;
}

.legend-selected { outline: 2px solid #d4a574; outline-offset: -2px; }
.legend-configured { background: rgba(34, 197, 94, 0.5); }
.legend-closed { background: rgba(239, 68, 68, 0.5); }

.calendar-editor {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.calendar-selection-summary {
  margin: 0 0 0.6rem;
  color: var(--text);
  font-size: 0.85rem;
}

.calendar-periods {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.calendar-period-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 0.4rem;
}

.calendar-period-dash {
  color: var(--muted);
}

.calendar-period-remove {
  width: 1.9rem;
  height: 1.9rem;
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
}

.calendar-add-period {
  margin-top: 0.5rem;
}

.calendar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.calendar-exception-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.7rem;
  max-height: 7rem;
  overflow-y: auto;
}

.calendar-chip {
  padding: 0.2rem 0.55rem;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.5);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.calendar-chip.is-closed {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
}

.map-pin-countdown {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 2px;
  padding: 1px 6px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid #d4a574;
  border-radius: 999px;
  color: #f5e6d3;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

.map-pin-origin {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px 1px 3px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid #d4a574;
  border-radius: 999px;
  color: #f5e6d3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

.map-pin-origin.has-countdown {
  margin-bottom: 22px;
}

.map-pin-origin-flag {
  width: 16px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.45);
}

.map-pin-cluster-countdown {
  z-index: 2;
  font-size: 9px;
}

.temporary-banner {
  margin: 0.6rem 0;
  padding: 0.6rem 0.8rem;
  background: rgba(212, 165, 116, 0.12);
  border: 1px solid rgba(212, 165, 116, 0.55);
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: left;
}

.temporary-banner.is-upcoming {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.6);
}

.closing-warning-field {
  margin-top: 0.8rem;
}

.closing-warning-field input,
.extend-temporary-content input {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.45rem 0.6rem;
  color: var(--text);
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
}

.extend-temporary-content {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(90vh, 42rem);
  overflow-y: auto;
}

.extend-temporary-content fieldset {
  margin: 0.8rem 0;
  padding: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
}

.extend-temporary-content fieldset > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.extend-temporary-content fieldset label {
  display: block;
  margin: 0.55rem 0 0.25rem;
}

.extend-temporary-content fieldset > div input {
  flex: 1 1 8rem;
  min-width: 8rem;
}

.opening-hours-exceptions {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

@media (max-width: 520px) {
  .temporary-row {
    grid-template-columns: 1fr 1fr;
  }

  .temporary-row > span {
    grid-column: 1 / -1;
  }
}


.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
}

.btn-primary,
.btn-secondary {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text);
}

.btn-secondary:hover {
  background: rgba(148, 163, 184, 0.18);
}

.admin-hint {
  position: fixed;
  bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 0.5rem));
  left: max(1.5rem, calc(env(safe-area-inset-left) + 0.5rem));
  z-index: 450;
  padding: 1rem 1.5rem;
  background: rgba(59, 130, 246, 0.95);
  color: white;
  border-radius: 8px;
  font-size: 0.9rem;
  box-shadow: var(--shadow);
  animation: slideInUp 0.3s ease;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Világos / Sötét témaváltó ===== */

.theme-toggle {
  position: fixed;
  top: calc(max(1rem, env(safe-area-inset-top)) + 2.6rem + 0.6rem);
  left: calc(max(1rem, env(safe-area-inset-left)) + 30px + 10px);
  z-index: 450;
  padding: 0.5rem 1rem;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.theme-toggle:hover {
  background: rgba(148, 163, 184, 0.2);
}

body,
.info-panel,
.supplementary-panel,
.address-search,
.address-search-input,
.modal-content,
.form-group input,
.form-group select,
.form-group textarea,
.time-picker select,
.meta-item,
.media-frame,
.image-preview,
.youtube-video-preview,
.image-dropzone,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.leaflet-control-zoom a {
  transition: background 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* A saját pontok, klaszterek és térkép csempék színe egyik témában sem változik. */
body.dark-mode {
  --bg: #0a0e16;
  --panel-border: rgba(148, 163, 184, 0.14);
  --text: #dbe2ea;
  --muted: #8b95a5;
  --shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
  background: var(--outer-transition-layer), linear-gradient(135deg, #04060a, #0a0e16 45%, #0d1219);
}

body.dark-mode .address-search {
  background: rgba(10, 13, 20, 0.9);
}

body.dark-mode .address-search-input {
  background: rgba(10, 13, 20, 0.75);
}

body.dark-mode .info-panel {
  background: rgba(10, 13, 20, 0.94);
}

body.dark-mode .supplementary-panel {
  background: rgba(10, 13, 20, 0.82);
}

body.dark-mode .meta-item {
  background: rgba(10, 13, 20, 0.85);
}

body.dark-mode .modal-content,
body.dark-mode .leaflet-popup-content-wrapper,
body.dark-mode .leaflet-popup-tip {
  background: rgba(13, 17, 26, 0.97);
}

body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea,
body.dark-mode .time-picker select {
  background: rgba(22, 27, 38, 0.85);
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group select:focus,
body.dark-mode .form-group textarea:focus {
  background: rgba(22, 27, 38, 0.97);
}

body.dark-mode .form-group input:read-only {
  background: rgba(10, 13, 20, 0.65);
}

body.dark-mode .media-frame,
body.dark-mode .image-preview,
body.dark-mode .youtube-video-preview {
  background: rgba(22, 27, 38, 0.65);
}

body.dark-mode .image-dropzone {
  background: rgba(22, 27, 38, 0.6);
}

body.dark-mode .supplementary-close,
body.dark-mode .close-panel,
body.dark-mode .btn-supplementary,
body.dark-mode .btn-secondary,
body.dark-mode .image-reset-button {
  background: rgba(148, 163, 184, 0.1);
}

body.dark-mode .btn-supplementary:hover,
body.dark-mode .btn-secondary:hover {
  background: rgba(148, 163, 184, 0.16);
}

body.dark-mode .leaflet-control-zoom a {
  background-color: #161b24;
  color: #dbe2ea;
}

body.dark-mode .leaflet-control-zoom a:hover {
  background-color: #212836;
}

body.dark-mode .leaflet-container {
  background: #0d1219;
}

/* Csak a térképi raszter csempéket alakítja tompított, meleg tónusú éjszakai megjelenésűvé; a marker-pane/overlay-pane (pontok, klaszterek) érintetlen marad */
body.dark-mode .leaflet-tile-pane {
  filter: invert(83%) hue-rotate(175deg) brightness(0.92) contrast(0.9) saturate(0.7) sepia(22%);
}

/* ===== Viewport-alapú UI-skálázás (a térkép és a Leaflet logika érintetlen) ===== */

/* Saját UI-csoportok: a teljes viewportot lefedő, láthatatlan "keret", amiben a fixen pozicionált gyerekelemek
   a keret sarkából (top-left / top-right) egységként, arányosan skálázódnak a --ui-scale alapján. */
.ui-scale-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 450;
}

.ui-scale-layer > * {
  pointer-events: auto;
}

.ui-scale-layer .main-menu-panel {
  pointer-events: none;
}

.ui-scale-layer .main-menu-panel.is-open {
  pointer-events: auto;
}

.ui-anchor-top-left:has(.selected-menu-panel.is-open) {
  z-index: 650;
}

.ui-anchor-top-left {
  transform-origin: top left;
  transform: scale(var(--ui-scale));
}

.ui-anchor-top-right {
  transform-origin: top right;
  transform: scale(var(--ui-scale));
}

.ui-anchor-bottom-left {
  transform-origin: bottom left;
  transform: scale(var(--ui-scale));
}

.ui-anchor-bottom-right {
  transform-origin: bottom right;
  transform: scale(var(--ui-scale));
}

/* A Leaflet zoomvezérlő ugyanazzal a --ui-scale-lel, ugyanabból a sarokból skálázódik, mint a bal felső saját UI-csoport */
.leaflet-top.leaflet-left {
  transform-origin: top left;
  transform: scale(var(--ui-scale));
}

.leaflet-top.leaflet-left {
  top: var(--control-frame-inset);
  left: var(--control-frame-inset);
}

.leaflet-top.leaflet-left .leaflet-control {
  margin: 0;
}

.leaflet-control-zoom {
  overflow: hidden;
  border: 0 !important;
  border-bottom: var(--frame-border-width) var(--frame-border-style) rgba(var(--frame-color-rgb), var(--frame-border-alpha)) !important;
  border-radius: var(--frame-radius) 0 var(--frame-radius) 0;
  background: rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.leaflet-control-zoom.leaflet-bar a,
body.dark-mode .leaflet-control-zoom.leaflet-bar a {
  width: calc(44px / var(--ui-scale));
  height: calc(44px / var(--ui-scale));
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  color: var(--text);
  font-size: calc(24px / var(--ui-scale));
  line-height: calc(42px / var(--ui-scale));
}

.leaflet-control-zoom a + a {
  border-top: var(--frame-border-width) var(--frame-border-style) rgba(var(--frame-color-rgb), var(--frame-border-alpha)) !important;
}

.leaflet-control-zoom.leaflet-bar a:hover,
body.dark-mode .leaflet-control-zoom.leaflet-bar a:hover {
  background: rgba(var(--frame-color-rgb), calc(var(--frame-border-alpha) + 0.12));
  color: var(--text);
}

.leaflet-control-zoom a:focus-visible,
.theme-toggle:focus-visible,
.address-search-input:focus-visible,
.address-search-button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.theme-toggle {
  top: calc(var(--control-frame-inset) / var(--ui-scale));
  left: calc((var(--control-frame-inset) + 44px) / var(--ui-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(45px / var(--ui-scale));
  min-height: 0;
  padding: 0 1rem;
  border: 0;
  border-right: var(--frame-border-width) var(--frame-border-style) rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  border-bottom: var(--frame-border-width) var(--frame-border-style) rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  border-radius: 0 0 var(--frame-radius) 0;
  background: rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  color: var(--text);
  font-size: calc(0.85rem / var(--ui-scale));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  white-space: nowrap;
}

.ui-anchor-top-left > .admin-button {
  top: calc((var(--control-frame-inset) + 90px + var(--control-frame-gap)) / var(--ui-scale));
  left: calc(var(--control-frame-inset) / var(--ui-scale));
  min-height: calc(44px / var(--ui-scale));
  padding: 0.5rem 1rem;
}

.theme-toggle:hover {
  background: rgba(var(--frame-color-rgb), calc(var(--frame-border-alpha) + 0.12));
}

.address-search {
  top: calc((var(--control-frame-inset) + var(--control-frame-gap)) / var(--ui-scale));
  right: calc((var(--control-frame-inset) + var(--control-frame-gap)) / var(--ui-scale));
  width: min(
    var(--right-ui-width),
    calc(100vw / var(--ui-scale) - var(--control-frame-inset) - var(--control-frame-gap) - var(--control-frame-inset) - var(--control-frame-gap))
  );
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.address-search-input {
  min-height: calc(44px / var(--ui-scale));
  padding: 0.55rem 0.65rem;
  border-color: rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  border-radius: 7px 0 0 7px;
  background: var(--panel);
  color: var(--text);
}

.address-search-input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.address-search-button {
  min-height: calc(44px / var(--ui-scale));
  padding: 0.55rem 0.85rem;
  border-radius: 0 7px 7px 0;
}

body.dark-mode .address-search {
  background: transparent;
}

body.dark-mode .address-search-input {
  background: var(--panel);
  color: var(--text);
}

@media (max-width: 600px) {
  .country-menu-manager-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .country-menu-manager-control {
    justify-content: flex-start;
    min-width: 0;
  }

  .address-search {
    width: calc(
      100vw / var(--ui-scale)
      - (var(--control-frame-inset) + 44px + var(--control-frame-gap)) / var(--ui-scale)
      - 162px
      - (var(--control-frame-inset) + var(--control-frame-gap)) / var(--ui-scale)
    );
  }
}

@media (max-width: 360px) {
  .address-search {
    flex-wrap: wrap;
  }

  .address-search-input,
  .address-search-button {
    flex-basis: 100%;
  }
}

/* ===== Függőleges (magasság szerinti) alkalmazkodás =====
   A bal oldali UI-csoport helyi egységekben számol (--ui-scale-lel skálázva), ezért a rendelkezésre álló
   magasságot --ui-vh-ban fejezzük ki; a vezérlők alatti és feletti sávot a clamp() hagyja szabadon. */
:root {
  --ui-vh: calc(100vh / var(--ui-scale));
  --ui-top-controls-reserve: calc(160px / var(--ui-scale));
  --ui-bottom-controls-reserve: calc(64px / var(--ui-scale));
}

.menu-toggle {
  --menu-tab-height: clamp(5rem, calc(var(--ui-vh) - var(--ui-top-controls-reserve) - var(--ui-bottom-controls-reserve)), 10rem);
  height: var(--menu-tab-height);
  top: clamp(
    calc(var(--ui-top-controls-reserve) + var(--menu-tab-height) / 2),
    calc(50vh / var(--ui-scale)),
    calc(var(--ui-vh) - var(--ui-bottom-controls-reserve) - var(--menu-tab-height) / 2)
  );
}

.main-menu-panel {
  --menu-panel-height: clamp(10rem, calc(var(--ui-vh) - var(--ui-top-controls-reserve) - 14px / var(--ui-scale)), 680px);
  height: var(--menu-panel-height);
  max-height: var(--menu-panel-height);
  top: clamp(
    calc(14px / var(--ui-scale) + var(--menu-panel-height) / 2),
    calc(50vh / var(--ui-scale)),
    calc(var(--ui-vh) - 14px / var(--ui-scale) - var(--menu-panel-height) / 2)
  );
  transform: translate(-100%, -50%);
}

.main-menu-panel.is-open {
  transform: translate(0, -50%);
}

.selected-menu-panel {
  height: var(--menu-panel-height);
  max-height: var(--menu-panel-height);
}

.menu-item-form {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 55%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.frame-settings-panel {
  max-height: max(8rem, calc(var(--ui-vh) - var(--ui-top-controls-reserve) - 5rem));
}

/* ===== Éjszakai nézet a sablonokra (body.dark-mode alatt; a nappali megjelenés érintetlen) =====
   A meglévő témaváltó osztályát használja; csak háttér-, szöveg- és szegélyszíneket ír felül. A képek, videók
   és iframe-ek színei nem változnak, nincs rájuk sötétítő réteg. */
body.dark-mode {
  --tpl-bg: #0f1115;
  --tpl-surface: #1a1e26;
  --tpl-surface-alt: #222733;
  --tpl-input: #12151b;
  --tpl-border: rgba(148, 163, 184, 0.32);
  --tpl-text: #f8fafc;
  --tpl-muted: #c3ccd8;
  --tpl-link: #8ec5ff;
  --tpl-accent: #5fd0c4;
}

body.dark-mode .article-editor,
body.dark-mode .article-viewer,
body.dark-mode .selected-menu-panel-content {
  color: var(--tpl-text);
  color-scheme: dark;
}

body.dark-mode .article-editor-content,
body.dark-mode .article-viewer {
  background: var(--tpl-bg);
  color: var(--tpl-text);
}

body.dark-mode .article-viewer a,
body.dark-mode .article-editor-content a,
body.dark-mode .article-sidebar-preview a {
  color: var(--tpl-link);
}

body.dark-mode .article-editor-toolbar,
body.dark-mode .article-editor-actions {
  border-color: var(--tpl-border);
  background: var(--tpl-surface);
}

body.dark-mode .article-editor-toolbar button,
body.dark-mode .article-editor-toolbar select,
body.dark-mode .article-editor-toolbar input,
body.dark-mode .article-editor-file-button,
body.dark-mode .article-sidebar-remove,
body.dark-mode .article-sidebar-caption-controls button,
body.dark-mode .interactive-text-export-button,
body.dark-mode .interactive-text-editor-choice > button,
body.dark-mode .web-article-load-button,
body.dark-mode .contact-info-secondary-button {
  border-color: var(--tpl-border);
  background: var(--tpl-surface-alt);
  color: var(--tpl-text);
}

body.dark-mode .article-editor-save-status {
  color: #86efac;
}

body.dark-mode .article-empty,
body.dark-mode .web-article-preview[data-empty]::before,
body.dark-mode .web-article-date,
body.dark-mode .article-sidebar-hint {
  color: var(--tpl-muted);
}

/* Oldalsó kiegészítő tartalmak */
body.dark-mode .article-editor-workspace > .article-sidebar-right.article-editor-sidebar {
  border-color: var(--tpl-border);
  background: var(--tpl-surface);
}

body.dark-mode .article-sidebar-controls label,
body.dark-mode .article-sidebar-caption-controls label,
body.dark-mode .article-sidebar-caption-opacity output,
body.dark-mode .article-sidebar-caption-rotation output,
body.dark-mode .article-sidebar-zoom-value {
  color: var(--tpl-muted);
}

body.dark-mode .article-sidebar-caption-controls {
  border-color: var(--tpl-border);
}

body.dark-mode .article-sidebar-image-frame.is-editable {
  background: var(--tpl-surface-alt);
}

body.dark-mode .article-sidebar-caption-controls button[aria-pressed="true"] {
  background: #3b4558;
  border-color: #94a3b8;
}

body.dark-mode .article-sidebar-preview-frame {
  border-color: var(--tpl-border);
}

/* Interaktív szöveg */
body.dark-mode .interactive-text-export-controls {
  border-color: var(--tpl-border);
  background: var(--tpl-surface);
}

body.dark-mode .interactive-text-export-controls label,
body.dark-mode .interactive-text-editor-block h3,
body.dark-mode .interactive-text-editor-choice > label,
body.dark-mode .interactive-text-explanation,
body.dark-mode .interactive-text-export-status {
  color: var(--tpl-muted);
}

body.dark-mode .interactive-text-editor-block {
  border-color: var(--tpl-border);
}

body.dark-mode .interactive-text-editor-choice textarea {
  border-color: var(--tpl-border);
  background: var(--tpl-input);
  color: var(--tpl-text);
}

body.dark-mode .interactive-text-choice {
  border-color: var(--tpl-border);
  background: var(--tpl-surface);
  color: var(--tpl-text);
}

body.dark-mode .interactive-text-viewer .interactive-text-choice.is-explanation-active {
  border-color: rgba(95, 208, 196, 0.75);
  background: rgba(95, 208, 196, 0.14);
}

body.dark-mode .interactive-text-grid-explanation {
  background: rgba(95, 208, 196, 0.1);
  color: var(--tpl-muted);
}

body.dark-mode .interactive-text-disclosure,
body.dark-mode .interactive-text-open-button {
  color: var(--tpl-accent);
}

body.dark-mode .interactive-text-block-actions .interactive-text-block-delete {
  color: #fca5a5;
}

/* Webes cikk */
body.dark-mode .web-article-url-label,
body.dark-mode .web-article-status {
  color: var(--tpl-muted);
}

body.dark-mode .web-article-url-input {
  border-color: var(--tpl-border);
  background: var(--tpl-input);
  color: var(--tpl-text);
}

body.dark-mode .web-article-preview {
  border-color: var(--tpl-border);
  background: var(--tpl-bg);
  color: var(--tpl-text);
}

body.dark-mode .web-article-viewer .web-article-header,
body.dark-mode .web-article-preview .web-article-header {
  border-color: var(--tpl-border);
}

body.dark-mode .web-article-category {
  color: #fdba74;
}

/* Szavazás */
body.dark-mode .poll-viewer {
  background: var(--tpl-bg);
  color: var(--tpl-text);
}

body.dark-mode .poll-title,
body.dark-mode .poll-total-votes,
body.dark-mode .poll-result-label,
body.dark-mode .poll-option-card {
  color: var(--tpl-text);
}

body.dark-mode .poll-description,
body.dark-mode .poll-status-message,
body.dark-mode .poll-result-label span:last-child,
body.dark-mode .poll-admin-field > label,
body.dark-mode .poll-admin-editor > h3,
body.dark-mode .poll-admin-management > h3,
body.dark-mode .poll-admin-checkbox {
  color: var(--tpl-muted);
}

body.dark-mode .poll-option-card {
  border-color: var(--tpl-border);
  background: var(--tpl-surface);
}

body.dark-mode .poll-option-card.is-selected {
  border-color: var(--poll-accent);
  background: rgba(82, 170, 160, 0.18);
  box-shadow: inset 0 0 0 1px rgba(82, 170, 160, 0.3);
}

body.dark-mode .poll-total-votes,
body.dark-mode .poll-admin-management {
  border-color: var(--tpl-border);
}

body.dark-mode .poll-result-track {
  background: #343b4a;
}

body.dark-mode .poll-admin-editor input,
body.dark-mode .poll-admin-editor textarea,
body.dark-mode .poll-admin-option-row input {
  border-color: var(--tpl-border);
  background: var(--tpl-input);
  color: var(--tpl-text);
}

body.dark-mode .poll-admin-management .poll-vote-button:not(.poll-danger-button) {
  border-color: var(--tpl-border);
  background: var(--tpl-surface-alt);
  color: var(--tpl-text);
}

body.dark-mode .poll-danger-button {
  border-color: #b85c55;
  background: #3a1d1b;
  color: #fecaca;
}

/* Információ és elérhetőség */
body.dark-mode .contact-info-viewer {
  background: var(--tpl-bg);
  color: var(--tpl-text);
}

body.dark-mode .contact-info-header {
  border-color: var(--tpl-border);
}

body.dark-mode .contact-info-header h1,
body.dark-mode .contact-message-form h2,
body.dark-mode .contact-info-value,
body.dark-mode .contact-hours-row dd {
  color: var(--tpl-text);
}

body.dark-mode .contact-info-intro,
body.dark-mode .contact-hours-row dt,
body.dark-mode .contact-form-status,
body.dark-mode .contact-message-form label,
body.dark-mode .contact-info-editor-field,
body.dark-mode .contact-info-hours-editor h3,
body.dark-mode .contact-info-day-toggle,
body.dark-mode .contact-info-editor-map {
  color: var(--tpl-muted);
}

body.dark-mode .contact-info-value[href] {
  color: var(--tpl-link);
}

body.dark-mode .contact-info-card,
body.dark-mode .contact-message-form {
  border-color: var(--tpl-border);
  background: var(--tpl-surface);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

body.dark-mode .contact-hours-row {
  border-color: rgba(148, 163, 184, 0.2);
}

body.dark-mode .contact-info-map,
body.dark-mode .contact-info-editor-map {
  border-color: var(--tpl-border);
  background: var(--tpl-surface-alt);
}

body.dark-mode .contact-info-editor-field input,
body.dark-mode .contact-info-editor-field textarea,
body.dark-mode .contact-message-form input,
body.dark-mode .contact-message-form textarea,
body.dark-mode .contact-info-hours-edit-row input[type="time"] {
  border-color: var(--tpl-border);
  background: var(--tpl-input);
  color: var(--tpl-text);
}

body.dark-mode .contact-info-hours-editor {
  border-color: var(--tpl-border);
}

/* Főoldal: éjszaka sötét hátterű változat (a nappali színes mozaik változatlan) */
body.dark-mode .article-viewer.home-viewer,
body.dark-mode .article-editor-content.home-editor-content {
  background: #08090c;
  color: #f8fafc;
  box-shadow: inset 0 0 0 2px rgba(242, 181, 47, 0.4);
}

body.dark-mode .article-viewer.home-viewer a,
body.dark-mode .article-editor-content.home-editor-content a {
  color: #b9b0ff;
}

/* ===== Nyelvválasztó (jobb alsó sarok) ===== */
.bottom-right-switchers {
  position: absolute;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: calc(100vw - 2rem);
}

.country-switcher,
.language-switcher {
  position: relative;
  right: auto;
  bottom: auto;
  color: var(--text);
  font-size: 0.9rem;
}

.country-switcher {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}

.country-switcher[hidden] {
  display: none;
}

.country-switcher label {
  color: var(--muted);
  font-size: 0.72rem;
}

.language-toggle,
.language-panel,
.country-select {
  border: var(--frame-border-width) var(--frame-border-style) rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  background: rgba(15, 23, 42, 0.94);
  box-shadow: 0 8px 22px rgba(2, 8, 23, 0.28);
  backdrop-filter: blur(12px);
}

.country-select {
  max-width: min(14rem, 48vw);
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.country-select:disabled {
  cursor: progress;
  opacity: 0.7;
}

.country-notice {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.5rem);
  width: min(22rem, calc((100vw - 2rem) / var(--ui-scale)));
  margin: 0;
  padding: 0.6rem 0.7rem;
  border: var(--frame-border-width) var(--frame-border-style) rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.96);
  color: #fbbf24;
  box-shadow: 0 8px 22px rgba(2, 8, 23, 0.28);
  font-size: 0.78rem;
  line-height: 1.35;
}

.country-notice[hidden] {
  display: none;
}

.language-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.language-toggle[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.language-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(300px, calc((100vw - 2rem) / var(--ui-scale)));
  max-height: max(10rem, min(24rem, calc(var(--ui-vh) / var(--ui-scale) - 6rem)));
  padding: 0.7rem;
  border-radius: 10px;
}

.language-panel[hidden] {
  display: none;
}

.language-search {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.55);
  color: var(--text);
  font: inherit;
}

.language-notice {
  margin: 0;
  color: #fbbf24;
  font-size: 0.8rem;
  line-height: 1.35;
}

.language-retry {
  align-self: flex-start;
  padding: 0.4rem 0.65rem;
  border: 1px solid rgba(var(--frame-color-rgb), var(--frame-border-alpha));
  border-radius: 7px;
  background: rgba(var(--frame-color-rgb), 0.18);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.language-retry[hidden] {
  display: none;
}

.language-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.language-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.language-option:hover,
.language-option:focus-visible {
  background: rgba(var(--frame-color-rgb), 0.2);
  outline: none;
}

.language-option.is-active {
  background: rgba(var(--frame-color-rgb), 0.28);
  font-weight: 700;
}

.language-option-hint {
  color: #94a3b8;
  font-size: 0.75rem;
}

/* Rejtett belépés / fiók */
.auth-content { width: 460px; max-width: calc(100vw - 24px); }
.auth-lead { margin: 0 0 1rem; }
.auth-error { display: block; min-height: 1em; margin: 0.15rem 0 0; color: #f87171; font-size: 0.85rem; }
.auth-banner { padding: 0.6rem 0.8rem; border: 1px solid rgba(248, 113, 113, 0.5); border-radius: 8px; margin-bottom: 1rem; }
.auth-hint { display: block; margin: 0 0 1rem; color: var(--muted); font-size: 0.82rem; }
.auth-phone-row { display: flex; align-items: stretch; gap: 0.4rem; }
.auth-phone-row input { flex: 1; min-width: 0; }
.auth-phone-prefix { display: inline-flex; align-items: center; padding: 0 0.6rem; border: 1px solid rgba(148, 163, 184, 0.4); border-radius: 6px; font-weight: 600; white-space: nowrap; }
.auth-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0.8rem; font-size: 0.85rem; cursor: pointer; }
.auth-link { background: none; border: 0; padding: 0; color: #93c5fd; text-decoration: underline; cursor: pointer; font: inherit; }
.auth-code-box { display: flex; align-items: center; gap: 0.8rem; margin: 0.4rem 0 0.8rem; }
.auth-code { padding: 0.4rem 0.9rem; font: 700 1.5rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: 0.15em; border: 1px dashed #d4a574; border-radius: 8px; user-select: all; }
.auth-profile { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; margin: 0 0 1rem; }
.auth-profile dt { color: var(--muted); font-size: 0.85rem; }
.auth-profile dd { margin: 0; overflow-wrap: anywhere; }
.auth-flag { width: 22px; height: 16px; vertical-align: -3px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.45); }
.auth-chip { position: relative; left: auto; bottom: auto; z-index: 900; display: flex; flex: 0 1 auto; align-items: center; gap: 0.2rem; max-width: 100%; padding: 0.25rem 0.35rem; background: rgba(15, 23, 42, 0.92); border: 1px solid #d4a574; border-radius: 999px; font-size: 0.8rem; }
.auth-chip button { padding: 0.3rem 0.6rem; background: none; border: 0; border-radius: 999px; color: #f5e6d3; cursor: pointer; font: inherit; }
.auth-chip button:hover { background: rgba(212, 165, 116, 0.2); }
.session-timeout-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(5px);
}
.session-timeout-overlay.hidden { display: none; }
.session-timeout-dialog {
  width: min(100%, 30rem);
  padding: 1.5rem;
  color: var(--text, #f8fafc);
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid var(--panel-border, rgba(212, 165, 116, 0.65));
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.session-timeout-dialog h2 { margin: 0 0 0.75rem; }
.session-timeout-message { margin: 0 0 1rem; line-height: 1.55; }
.session-timeout-countdown { display: block; margin: 0 0 1rem; color: #fbbf24; font: 700 2rem/1.2 ui-monospace, Consolas, monospace; }
.session-timeout-status { min-height: 1.4em; color: #fca5a5; }
.session-timeout-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.65rem; margin-top: 1rem; }
@media (max-width: 600px), (max-width: 900px) and (max-height: 500px) {
  .bottom-right-switchers {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    max-width: calc(
      (100vw - max(var(--control-frame-inset), env(safe-area-inset-left))
        - max(var(--control-frame-inset), env(safe-area-inset-right))) / var(--ui-scale)
    );
    gap: 0.35rem;
  }
  .language-panel {
    width: min(
      300px,
      calc(
        (100vw - max(var(--control-frame-inset), env(safe-area-inset-left))
          - max(var(--control-frame-inset), env(safe-area-inset-right))) / var(--ui-scale)
      )
    );
    max-height: max(
      0px,
      calc(
        (100dvh - max(var(--control-frame-inset), env(safe-area-inset-top))
          - max(var(--control-frame-inset), env(safe-area-inset-bottom)) - 4rem) / var(--ui-scale)
      )
    );
  }
  .info-panel {
    top: calc(
      (max(var(--control-frame-inset), env(safe-area-inset-top))
        + var(--control-frame-gap) + 56px) / var(--ui-scale)
    );
    right: calc(max(var(--control-frame-inset), env(safe-area-inset-right)) / var(--ui-scale));
    width: min(
      var(--right-ui-width),
      calc(
        (100vw - max(var(--control-frame-inset), env(safe-area-inset-left))
          - max(var(--control-frame-inset), env(safe-area-inset-right))) / var(--ui-scale)
      )
    );
  }
}

@media (max-width: 600px) {
  .info-panel {
    top: calc(
      max(
        160px,
        calc(max(var(--control-frame-inset), env(safe-area-inset-top)) + var(--control-frame-gap) + 56px)
      ) / var(--ui-scale)
    );
  }
  .auth-chip { gap: 0.05rem; padding: 0.2rem; font-size: 0.72rem; }
  .auth-chip button { padding: 0.3rem 0.4rem; }
  .session-timeout-dialog { padding: 1rem; }
  .session-timeout-actions { flex-direction: column-reverse; }
  .session-timeout-actions button { width: 100%; }
}
.point-manager-owner { background: rgba(212, 165, 116, 0.12); }
.point-manager-owner th, .point-manager-owner td { padding: 0.6rem 0.8rem; text-align: left; }
.point-manager-owner-id { margin-left: 0.6rem; padding: 0.1rem 0.5rem; border: 1px dashed #d4a574; border-radius: 6px; font: 600 0.85rem ui-monospace, Consolas, monospace; }
.point-manager-owner-country { margin-left: 0.6rem; font-weight: 400; }
.point-manager-owner-phone { margin-left: 0.6rem; font-weight: 600; user-select: text; }
.point-manager-role-badge { margin-left: 0.6rem; padding: 0.1rem 0.5rem; border-radius: 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; }
.point-manager-role-scriptor { background: rgba(100, 116, 139, 0.25); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.5); }
.point-manager-owner-country .point-manager-flag { display: inline-block; vertical-align: -4px; margin-right: 0.3rem; }
.point-manager-readonly-owner { color: var(--muted); font-size: 0.85rem; }
.point-manager-search { margin: 0 0 0.8rem; }
.point-manager-search label { display: block; margin-bottom: 0.35rem; font-weight: 600; }
.point-manager-search-controls { display: flex; gap: 0.5rem; }
.point-manager-search-controls input { flex: 1; min-width: 0; }
.point-manager-add-point { margin-left: 0.75rem; white-space: nowrap; }
.point-manager-assign-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.55rem; }
.point-manager-assign-form input { width: 10rem; }
.point-manager-assign-error { display: block; margin-top: 0.35rem; color: var(--danger, #ef4444); font-weight: 500; }
.point-manager-person-field { display: flex; flex-direction: column; gap: 0.25rem; }
.point-manager-person-status { display: block; color: var(--muted); }
.point-manager-person-match { color: var(--text); }
.point-manager-person-match .point-manager-flag { display: inline-block; vertical-align: -4px; margin-right: 0.25rem; }
.point-manager-person-error { color: var(--danger, #ef4444); }
.point-manager-empty { text-align: center; }
.point-manager-recycled { background: #fee2e2; color: #7f1d1d; }
.point-manager-recycled > td { border-top: 2px solid #ef4444; border-bottom: 2px solid #ef4444; }
.point-manager-recycled .point-manager-code { color: #b91c1c; font-weight: 700; }
.point-manager-extra-actions { display: flex; justify-content: flex-end; margin: 0.6rem 0; }
.point-manager-extra { margin: 0.8rem 0; padding: 0.8rem; border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 10px; }
.point-manager-extra h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.point-manager-extra-status { margin: 0.35rem 0 0.65rem; color: var(--muted); font-size: 0.85rem; }
.point-manager-region-users, .point-manager-shares, .region-manager-list { display: grid; gap: 0.45rem; }
.point-manager-region-user { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.55rem; border-top: 1px solid rgba(148, 163, 184, 0.18); }
.point-manager-region-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.point-manager-region-identity small { color: var(--muted); }
.point-manager-user-phone { font-weight: 600; }
.point-manager-region-missing { color: var(--danger, #ef4444); font-size: 0.8rem; font-weight: 700; }
.point-manager-region-user select { min-width: 12rem; }
.point-manager-share-row { display: grid; gap: 0.2rem; padding: 0.55rem; border-top: 1px solid rgba(148, 163, 184, 0.18); font-size: 0.85rem; }
.region-manager-content { max-width: 720px; width: min(720px, 96vw); }
.region-manager-content > label, .region-manager-form label { display: block; margin: 0.5rem 0 0.25rem; font-weight: 600; }
.region-manager-content > select { width: 100%; }
.region-manager-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.5rem; margin-top: 0.8rem; }
.region-manager-form label { grid-column: 1 / -1; margin-bottom: 0; }
.region-manager-form input { min-width: 0; }
.region-manager-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.45rem; padding: 0.65rem 0; border-top: 1px solid rgba(148, 163, 184, 0.18); }
.region-manager-row p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.85rem; }
@media (max-width: 600px) {
  .point-manager-region-user { align-items: stretch; flex-direction: column; }
  .point-manager-region-user select { width: 100%; }
  .region-manager-form { grid-template-columns: 1fr; }
  .region-manager-row { grid-template-columns: 1fr 1fr; }
  .region-manager-row input { grid-column: 1 / -1; }
}

/* Alapállapot: amíg az auth.js a szerver által hitelesített tiltólistát meg nem kapta (<html data-auth-ready>),
   minden jogosultsághoz kötött elem rejtett. Hiba vagy időtúllépés esetén az attribútum nem kerül be, így zárva marad. */
html:not([data-auth-ready]) #place-point-on-map,
html:not([data-auth-ready]) #place-point-by-address,
html:not([data-auth-ready]) #point-address-placement,
html:not([data-auth-ready]) #open-temporary-points,
html:not([data-auth-ready]) #open-point-manager,
html:not([data-auth-ready]) #point-placement-choice,
html:not([data-auth-ready]) [data-feature],
html:not([data-auth-ready]) #menu-item-add,
html:not([data-auth-ready]) #menu-item-form,
html:not([data-auth-ready]) #menu-item-edit,
html:not([data-auth-ready]) .menu-item-actions,
html:not([data-auth-ready]) #edit-point-btn,
html:not([data-auth-ready]) #delete-point-btn,
html:not([data-auth-ready]) #point-manager-list .btn-delete,
html:not([data-auth-ready]) #temporary-points-list .btn-delete,
html:not([data-auth-ready]) #admin-new-point,
html:not([data-auth-ready]) .country-menu-manager-launch,
html:not([data-auth-ready]) #open-country-menu-manager,
html:not([data-auth-ready]) #frame-settings,
html:not([data-auth-ready]) #country-switcher,
html:not([data-auth-user]) #country-switcher {
  display: none !important;
}

html:not([data-auth-user]) :is(#temporary-points-modal, #point-manager-modal, #region-manager-modal, #country-menu-manager-modal, #extend-temporary-modal, #create-point-modal).hidden {
  visibility: hidden;
}

/* Belépési mód szerinti elrejtés: az auth.js a szerver által hitelesített tiltólistát az <html data-restricted> attribútumba írja.
   Az elemek kódja megmarad, csak a megjelenítésük szűnik meg (display:none, így nem marad üres hely). */
html[data-restricted~="points.place_on_map"] #place-point-on-map,
html[data-restricted~="points.place_by_address"] #place-point-by-address,
html[data-restricted~="points.place_by_address"] #point-address-placement,
html[data-restricted~="points.temporary_manage"][data-restricted~="points.temporary_view"] #open-temporary-points,
html[data-restricted~="points.manager_panel"][data-restricted~="points.manager_panel.view"] #open-point-manager,
html[data-restricted~="points.form.coordinates"] [data-feature="points.form.coordinates"],
html[data-restricted~="points.form.supplementary_labels"] [data-feature="points.form.supplementary_labels"],
html[data-restricted~="points.form.section_labels"] [data-feature="points.form.section_labels"],
html[data-restricted~="menus.manage"][data-restricted~="menus.manage_articles"] #menu-item-add,
html[data-restricted~="menus.manage"][data-restricted~="menus.manage_articles"] #menu-item-form,
html[data-restricted~="menus.manage"][data-restricted~="menus.manage_articles"] #menu-item-edit,
html[data-restricted~="menus.manage"][data-restricted~="menus.manage_articles"] .menu-item-actions,
html[data-restricted~="points.edit"][data-restricted~="points.edit_own"] #edit-point-btn,
html[data-restricted~="points.delete"][data-restricted~="points.delete_own"] #delete-point-btn,
html[data-restricted~="points.delete"][data-restricted~="points.delete_own"] #point-manager-list .btn-delete,
html[data-restricted~="points.delete"][data-restricted~="points.delete_own"] #temporary-points-list .btn-delete,
html[data-restricted~="points.create"][data-restricted~="points.create_own"] #admin-new-point,
html[data-restricted~="countries.manage"] .country-menu-manager-launch,
html[data-restricted~="frame.settings.view"] #frame-settings,
html[data-restricted~="points.place_on_map"][data-restricted~="points.place_by_address"][data-restricted~="points.temporary_manage"][data-restricted~="points.manager_panel"][data-restricted~="points.temporary_view"][data-restricted~="points.manager_panel.view"] #point-placement-choice {
  display: none !important;
}