/* tec-plz-radius-filter.css — CLEAN */

/* ---------- Basis Inline-Controls (Desktop-Basis) ---------- */
#mk-plz-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px;
  flex: 0 0 auto;
}

#mk-plz-inline input,
#mk-plz-inline select {
  height: 30.8px;
  padding: 4px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  box-sizing: border-box;
  color: #222;
}

#mk_plz_inline { width: 90px; }
#mk_radius_inline,
#mk_view_inline,
#mk_view_inline_only { width: 140px; }

/* ---------- Toast ---------- */
#mk-toast-host{
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  z-index: 999999; pointer-events: none; display: none;
}
.mk-toast{
  pointer-events: auto; background: #2e7d32; color:#fff;
  padding: 10px 14px; border-radius: 999px; font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .16s, transform .16s;
}

/* ---------- Events außerhalb des Radius ausblenden ---------- */
.mk-out-radius,
.mk-out-of-radius { display: none !important; }

/* ---------- Theme-View-Selector sicher verstecken ---------- */
.tribe-events .tribe-events-c-view-selector,
.tribe-events .tribe-events-c-view-selector__button,
.tribe-events .tribe-events-c-view-selector__content,
.tribe-events .tribe-events-c-view-selector__list {
  display: none !important;
}

/* ---------- Hard Reset gegen exotische Theme/Plugin-Stile ---------- */
#mk-plz-inline, #mk-plz-inline * {
  -webkit-text-security: none !important;
  text-security: none !important;
  -webkit-mask-image: none !important; mask-image: none !important;
  background-image: none !important; filter: none !important;
  mix-blend-mode: normal !important; text-shadow: none !important; text-indent: 0 !important;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  font-style: normal !important; font-weight: 400 !important; letter-spacing: normal !important;
  color: #222 !important;
}
#mk_radius_inline, #mk_view_inline, #mk_view_inline_only {
  appearance: auto !important; -webkit-appearance: menulist !important; -moz-appearance: menulist !important;
  background: #fff !important; border: 1px solid #cbd5e1 !important;
}
#mk_radius_inline option, #mk_view_inline option, #mk_view_inline_only option {
  color: #222 !important; background: #fff !important;
}

/* =========================
   RESPONSIVE LOGIK
   ========================= */

/* Desktop: alles in einer Linie */
@media (min-width: 921px) {
  #mk-plz-inline {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

/* Mobile: PLZ & Radius ausblenden, nur Kalenderansicht kompakt */
@media (max-width: 920px), (any-pointer: coarse) {
  #mk_plz_inline,
  #mk_radius_inline { display: none !important; }

  #mk-plz-inline {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  #mk_view_inline,
  #mk_view_inline_only {
    width: 140px !important;
    height: 30.8px !important;
    line-height: 30.8px;
    padding: 4px 6px;
    font-size: 13px;
    margin: 0 !important;
  }
}

/* =========================
   MONATSANSICHT-SPEZIFISCH
   ========================= */

/* PLZ & Radius in Monatsansicht IMMER ausblenden (doppelt abgesichert) */
.tribe-events-view--month #mk_plz_inline,
.tribe-events-view--month #mk_radius_inline,
.tribe-events-calendar-month #mk_plz_inline,
.tribe-events-calendar-month #mk_radius_inline,
body.mk-month #mk_plz_inline,
body.mk-month #mk_radius_inline,
body.mk-month #mk-plz-inline #mk_plz_inline,
body.mk-month #mk-plz-inline #mk_radius_inline {
  display: none !important;
}

/* Desktop: Dropdown rechts neben Datepicker, gleiche Höhe/Breite */
@media (min-width: 921px) {
  body.mk-month .tribe-events-c-top-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;      /* kein Zeilenumbruch */
    gap: 8px;
  }
  body.mk-month .tribe-events-c-top-bar__datepicker { order: 1; }
  body.mk-month #mk-plz-inline {
    order: 2;
    margin-left: auto;      /* schiebt nach rechts */
    display: flex !important;
    align-items: center;
    gap: 8px;
  }
  body.mk-month #mk_view_inline,
  body.mk-month #mk_view_inline_only {
    width: 140px !important;
    height: 30.8px !important;
    line-height: 30.8px;
    padding: 4px 6px;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0;
    vertical-align: middle;
  }
}

/* Mobile Monatsansicht: kompakt, nicht vollbreit */
@media (max-width: 920px), (any-pointer: coarse) {
  body.mk-month #mk-plz-inline {
    display: flex !important;   /* übersteuert evtl. alte Grid-Regeln */
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    width: 100%;
  }
  body.mk-month #mk-plz-inline #mk_view_inline,
  body.mk-month #mk-plz-inline #mk_view_inline_only {
    width: 140px !important;
    height: 30.8px !important;
    line-height: 30.8px;
    padding: 4px 6px;
    font-size: 13px;
    margin: 0 !important;
  }
}


/* === MOBILE FIX (Monatsansicht): Dropdown rechts vom Datepicker, bündig & sicher === */
@media (max-width: 920px), (any-pointer: coarse) {
  /* Top-Bar in einer Reihe halten */
  body.mk-month .tribe-events-c-top-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding-right: 8px; /* verhindert, dass Dropdown am Rand klebt */
  }

  /* Reihenfolge: [Datepicker] [Dropdown] */
  body.mk-month .tribe-events-c-top-bar__datepicker {
    order: 1;
    margin: 0 !important;
  }

  body.mk-month #mk-plz-inline {
    order: 2;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;  /* steht direkt rechts vom Datepicker */
    gap: 6px;
    flex: 0 0 auto;
  }

  /* Dropdown-Styling kompakt wie Desktop, aber mobil sicher */
  body.mk-month #mk-plz-inline #mk_view_inline,
  body.mk-month #mk-plz-inline #mk_view_inline_only {
    width: 140px !important;
    height: 42px !important;      /* gleiche Höhe wie Datepicker */
    line-height: 42px !important;
    padding: 0 10px !important;
    font-size: 14px;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* Sicherheitsabstand rechts – verhindert "Über den Rand" */
  body.mk-month #mk-plz-inline {
    padding-right: 8px;
  }
}


/* === Kompaktlisten-Ansicht (/veranstaltungsuebersicht/): Controls rechts von Überschrift === */

.mk-standalone-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

/* Gleiche Eingabegrößen und Stil wie im TEC-Header */
.mk-standalone-controls input,
.mk-standalone-controls select {
  height: 30.8px;
  padding: 4px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  color: #222;
  box-sizing: border-box;
}

.mk-standalone-controls #mk_plz_inline  { width: 90px; }
.mk-standalone-controls #mk_radius_inline,
.mk-standalone-controls #mk_view_inline { width: 140px; }

/* Überschrift + Controls nebeneinander */
.tribe-events-widget-events-list__header-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* Mobile: Controls unter der Überschrift in einer eigenen Zeile */
@media (max-width: 920px), (any-pointer: coarse) {
  .tribe-events-widget-events-list__header-title {
    flex-direction: column;
    align-items: flex-start;
  }
  .mk-standalone-controls {
    width: 100%;
    justify-content: flex-start;
    margin-top: 6px;
  }
  .mk-standalone-controls select,
  .mk-standalone-controls input {
    width: 100%;
    max-width: none;
  }
}