/* 1) Shortcode aus Bootstrap/Grid lösen */
.container .row > .col-md-12:has(.mpiano-fullwidth) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Full-bleed aus .container max-width rausbrechen */
.mpiano-fullwidth {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* 3) Kein horizontaler Scroll */
body { overflow-x: hidden; }

/* Tailwind vs Theme/Bootstrap Kollisionen */
.mpiano-fullwidth #root .grid { display: grid !important; }
.mpiano-fullwidth #root .flex { display: flex !important; }

@media (min-width: 768px) {
  .mpiano-fullwidth #root .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (min-width: 1024px) {
  .mpiano-fullwidth #root .lg\:flex-row { flex-direction: row !important; }
  .mpiano-fullwidth #root .lg\:items-center { align-items: center !important; }
}

.mpiano-fullwidth #root .flex-wrap { flex-wrap: wrap !important; }

/* Input Styling + Icon */
.mpiano-fullwidth #root .form-group { position: relative !important; }

.mpiano-fullwidth #root .form-group > input.form-control {
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;

  height: 48px !important;
  line-height: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 48px !important; /* Platz für Lupe */
}

.mpiano-fullwidth #root input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* Lupe: finaler Fix (falls nötig px-Wert anpassen) */
.mpiano-fullwidth #root .form-group > svg.lucide-search{
  position: absolute !important;
  left: 16px !important;
  top: calc(50% - 6.5px) !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  display: block !important;
}
/* ===== Modal/Overlay darf NICHT unter Navbar/Adminbar liegen ===== */

/* 1) Overlay + Modal über ALLES legen (Navbar hat oft riesige z-index Werte) */
.mpiano-fullwidth #root .fixed.inset-0.bg-black\/50 {
  z-index: 99998 !important;
}
.mpiano-fullwidth #root .fixed.inset-0.z-50.flex {
  z-index: 99999 !important;
}

/* 2) Modal NICHT exakt zentrieren, sondern leicht nach unten (Navbar-Freiraum) */
:root { --mpiano-modal-offset: 65px; } /* <- wenn nötig anpassen */
.mpiano-fullwidth #root .fixed.inset-0.z-50.flex {
  align-items: flex-start !important; /* statt vertical center */
  padding-top: calc(var(--mpiano-modal-offset) + var(--wp-admin--admin-bar--height, 0px)) !important;
}

/* 3) Optional: Modal etwas kleiner machen (breite + höhe) */
.mpiano-fullwidth #root .fixed.inset-0.z-50.flex > .bg-white.rounded-3xl {
  max-width: 1000px !important;                 /* kleiner als max-w-4xl */
  max-height: calc(100vh - 160px) !important;   /* weniger hoch */
}