/* Fenyves Tenisz Park — editor.css
   A vizuális szerkesztő UI stílusai. Csak akkor látszik, ha az editor.js aktiválja
   (body.fenyves-editing class). Az alap site stíluson nem változtat. */

:root {
  --fed-forest: #1E4030;
  --fed-green: #3A6E50;
  --fed-lime: #6BBF5A;
  --fed-mist: #EBF3E8;
  --fed-white: #FAFCF8;
  --fed-clay: #D4865A;
  --fed-text: #2C4A38;
  --fed-warn: #B86040;
}

/* ───── Belépés-gomb (lebegő, jobb-alul) ───── */
.fed-launch {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10000;
  padding: 12px 22px;
  border-radius: 50px;
  background: var(--fed-forest);
  color: white;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(30, 64, 48, 0.3);
  transition: all 0.2s;
}
.fed-launch:hover {
  background: var(--fed-green);
  transform: translateY(-2px);
}

/* ───── Toolbar (felül) ───── */
.fed-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: var(--fed-forest);
  color: white;
  padding: 10px 20px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.fed-toolbar .fed-tb-title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 0.95rem;
  margin-right: 10px;
}
.fed-toolbar .fed-tb-status {
  flex: 1;
  opacity: 0.85;
  font-size: 0.78rem;
}
.fed-toolbar .fed-tb-status.dirty {
  color: #FFD580;
}
.fed-toolbar button {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 7px 16px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.fed-toolbar button:hover { background: rgba(255, 255, 255, 0.22); }
.fed-toolbar button.fed-tb-save {
  background: var(--fed-lime);
  border-color: var(--fed-lime);
  color: var(--fed-forest);
}
.fed-toolbar button.fed-tb-save:hover { background: #7DD06A; }
.fed-toolbar button.fed-tb-save:disabled {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
}

body.fenyves-editing { padding-top: 52px; }
body.fenyves-editing nav.site-nav { top: 52px !important; }

/* ───── Szerkeszthető elem keret ───── */
body.fenyves-editing [data-editable] {
  outline: 2px dashed rgba(107, 191, 90, 0.7);
  outline-offset: 2px;
  cursor: pointer;
  transition: outline-color 0.15s;
  position: relative;
}
body.fenyves-editing [data-editable]:hover {
  outline-color: var(--fed-lime);
  outline-style: solid;
}
body.fenyves-editing [data-editable].fed-selected {
  outline: 3px solid var(--fed-clay);
  outline-offset: 3px;
}
body.fenyves-editing [data-editable]::after {
  content: attr(data-editable);
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(30, 64, 48, 0.85);
  color: white;
  font-size: 0.62rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.15s;
}
body.fenyves-editing [data-editable]:hover::after,
body.fenyves-editing [data-editable].fed-selected::after { opacity: 1; }

/* ───── Modal (PIN, megerősítés) ───── */
.fed-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(22, 40, 32, 0.6);
  backdrop-filter: blur(6px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fed-modal {
  background: white;
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.fed-modal h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--fed-forest);
  margin-bottom: 6px;
}
.fed-modal p { font-size: 0.85rem; color: var(--fed-text); opacity: 0.75; margin-bottom: 18px; }
.fed-modal input[type=password],
.fed-modal input[type=text] {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--fed-mist);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  letter-spacing: 1px;
}
.fed-modal input:focus { border-color: var(--fed-lime); }
.fed-modal .fed-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.fed-modal button {
  flex: 1;
  padding: 11px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.fed-modal button.primary {
  background: var(--fed-forest);
  color: white;
}
.fed-modal button.primary:hover { background: var(--fed-green); }
.fed-modal button.secondary {
  background: var(--fed-mist);
  color: var(--fed-forest);
}
.fed-modal .fed-error {
  background: rgba(184, 96, 64, 0.1);
  border: 1px solid rgba(184, 96, 64, 0.3);
  color: var(--fed-warn);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  margin-top: 12px;
}

/* ───── Side panel (kiválasztott elem szerkesztője) ───── */
.fed-panel {
  position: fixed;
  top: 52px;
  right: 0;
  bottom: 0;
  width: 340px;
  background: white;
  z-index: 9985;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  font-family: 'Plus Jakarta Sans', sans-serif;
  padding: 22px 22px 22px 22px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s;
}
.fed-panel.open { transform: translateX(0); }

.fed-panel h4 {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fed-forest);
  margin-bottom: 4px;
}
.fed-panel .fed-key { font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fed-lime); font-weight: 600; margin-bottom: 14px; }

.fed-section { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--fed-mist); }
.fed-section:last-child { border-bottom: none; }
.fed-section label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fed-green);
  font-weight: 600;
  margin-bottom: 8px;
}

.fed-file-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--fed-mist);
  border: 2px dashed var(--fed-green);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  color: var(--fed-forest);
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.15s;
}
.fed-file-btn:hover { background: white; border-color: var(--fed-lime); }
.fed-file-btn input[type=file] { display: none; }

.fed-preview {
  width: 100%;
  height: 140px;
  background: var(--fed-mist);
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  margin-top: 10px;
  border: 1px solid rgba(58, 110, 80, 0.15);
}

.fed-drag-hint {
  font-size: 0.72rem;
  color: var(--fed-text);
  opacity: 0.6;
  font-style: italic;
  margin-top: 6px;
}

.fed-zoom-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fed-zoom-row input[type=range] {
  flex: 1;
  accent-color: var(--fed-forest);
}
.fed-zoom-val {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fed-forest);
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: right;
}

.fed-pos-readout {
  font-family: 'Plus Jakarta Sans', monospace;
  font-size: 0.75rem;
  color: var(--fed-green);
  background: var(--fed-mist);
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 6px;
}

.fed-reset-btn {
  background: transparent;
  border: 1px solid var(--fed-clay);
  color: var(--fed-clay);
  padding: 8px 14px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  width: 100%;
}
.fed-reset-btn:hover { background: var(--fed-clay); color: white; }

/* a kép-konténer drag közben */
body.fenyves-editing [data-editable].fed-dragging,
body.fenyves-editing [data-editable].fed-dragging * { user-select: none !important; }
body.fenyves-editing [data-editable].fed-selected { cursor: move; }

/* Kis "saving…" toast */
.fed-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--fed-forest);
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 10005;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.fed-toast.show { opacity: 1; }
.fed-toast.error { background: var(--fed-warn); }
.fed-toast.success { background: var(--fed-lime); color: var(--fed-forest); }

/* ───── Szöveg-szerkesztő modal ───── */
.fed-text-modal { max-width: 540px; }
.fed-text-modal-key {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.72rem;
  color: var(--fed-text);
  opacity: 0.55;
  background: var(--fed-mist);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 6px;
}
.fed-text-modal-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--fed-forest);
  margin-bottom: 12px;
}
.fed-text-modal-area {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--fed-mist);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  min-height: 80px;
  outline: none;
  transition: border-color 0.15s;
}
.fed-text-modal-area:focus { border-color: var(--fed-lime); }
.fed-text-modal-counter {
  text-align: right;
  font-size: 0.72rem;
  color: var(--fed-text);
  opacity: 0.55;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .fed-panel { width: 100%; }
  .fed-launch { right: 12px; bottom: 12px; padding: 10px 16px; font-size: 0.78rem; }
  .fed-text-modal { max-width: 100%; }
}

/* ───── Esemény-CRUD: + Új esemény gomb + törlés ikon a kártyákon ───── */
body.fenyves-editing .fed-add-event {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px auto 14px;
  padding: 10px 18px;
  background: var(--fed-lime);
  color: var(--fed-forest);
  border: none;
  border-radius: 50px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(107, 191, 90, 0.35);
  transition: all 0.15s;
  position: relative;
  z-index: 6;
}
body.fenyves-editing .fed-add-event:hover {
  background: #7DD06A;
  transform: translateY(-1px);
}

/* A "+ Új esemény" gomb középre, hogy a sec-tag/h2 alá szépen kerüljön */
body.fenyves-editing section.events,
body.fenyves-editing section.events-section .events-inner {
  text-align: center;
}
body.fenyves-editing section.events .events-grid,
body.fenyves-editing section.events-section .events-grid {
  text-align: left;
}

body.fenyves-editing [data-event-id] {
  position: relative;
}
body.fenyves-editing .fed-event-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fed-warn);
  color: white;
  border: 2px solid white;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  z-index: 7;
  box-shadow: 0 4px 12px rgba(184, 96, 64, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: all 0.15s;
}
body.fenyves-editing .fed-event-delete:hover {
  background: #9E4F38;
  transform: scale(1.08);
}

/* Új-esemény modal mezők */
.fed-form-row { margin-bottom: 12px; }
.fed-form-row label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  color: var(--fed-green);
  font-weight: 600;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.fed-form-row input[type=text],
.fed-form-row input[type=file],
.fed-form-row textarea,
.fed-form-row select {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--fed-mist);
  border-radius: 8px;
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  background: white;
  color: var(--fed-text);
}
.fed-form-row textarea {
  resize: vertical;
  line-height: 1.5;
}
.fed-form-row input:focus,
.fed-form-row textarea:focus,
.fed-form-row select:focus {
  border-color: var(--fed-lime);
}