/* Container / Form */
.mbp-form {
  max-width:760px;
  margin:1.5rem auto;
  padding:1.25rem 1.5rem;
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(2,6,23,.12);
  background:linear-gradient(180deg,#0b1220 0,#0b1220 30%,#0d1426 100%);
  color:#ffffff !important; /* Fix: Immer weiß, auch im Darkmode */
}
.mbp-row {
  margin-bottom:1rem;
}
.mbp-row label {
  display:block;
  font-weight:800;
  margin-bottom:.4rem;
  letter-spacing:.2px;
  color:#ffffff !important;
}
.mbp-row input,
.mbp-row select {
  width:100%;
  padding:.85rem 1rem;
  border:1px solid #334155;
  border-radius: 10px !important; 
  background:#0f172a;
  color:#ffffff !important;
  line-height:1.35;
  min-height:48px;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-clip:padding-box;
}
.mbp-row select option {
  padding:.65rem 1rem;
  line-height:1.5;
  color:#ffffff !important;
}
.mbp-row select:focus,
.mbp-row input:focus {
  outline:0;
  border-color:#10b981;
  border-radius: 5px;
  box-shadow:0 0 0 3px rgba(16,185,129,.15)
}
.mbp-submit {
  padding:.9rem 1.3rem;
  border:none;
  border-radius:12px;
  background:#16a34a;
  color:#fff;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.2px
}
.mbp-submit:hover {
  background:#149245
}
.mbp-msg {
  margin-top:.75rem;
  color:#ffffff !important;
}
.mbp-msg.success{color:#22c55e !important;}
.mbp-msg.error{color:#f87171 !important;}

/* DSGVO – Checkbox + klickbarer Link */
.dsgvo {
  font-size:1.02rem;
  line-height:1.55;
  color:#ffffff !important;
}
.dsgvo label {
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  flex-wrap:wrap;
  color:#ffffff !important;
}
.dsgvo input[type=checkbox]{
  width: 40px !important;
  height:40px !important;
  margin-top:.2rem;
  border-radius:6px !important;
  border:2px solid #94a3b8;
  background:#0f172a;
  cursor:pointer;
  display:inline-block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  position:relative;
  outline:none;
}
.dsgvo input[type=checkbox]:focus {
  box-shadow:0 0 0 3px rgba(16,185,129,.2);
  border-color:#10b981;
}
.dsgvo input[type=checkbox]:checked {
  border-color:#10b981;
  background:#052e27;
}
.dsgvo input[type=checkbox]:checked::after{
  content:"⚽";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:25px;
  line-height:1;
  color:#22c55e;
}
.dsgvo .mbp-policy-link{
  color:#b91c1c;
  text-decoration:underline;
  font-weight:800;
}
.mbp-gdpr-details{margin-top:.6rem}
.mbp-gdpr-details summary{cursor:pointer;font-weight:800;margin-bottom:.25rem}
.mbp-gdpr-box{padding:.9rem;border:1px solid #334155;border-radius:10px;background:#0f172a;max-height:260px;overflow:auto}

/* Signatur-Pads */
.mbp-sign-wrap{margin-top:.5rem; position:relative; z-index:1000;}
#mbp-signature{
  display:block;
  width:100%;
  height:240px;
  background:#ffffff; /* Weißer Hintergrund */
  border:2px dashed #b91c1c; /* Vereinsrot Rahmen */
  border-radius:12px;
}
#mbp-signature,
#qr-signature,
.mbp-sign-wrap {
  touch-action: none; /* verhindert Panning/Zoom auf dem Canvas */
}

#qr-signature{
  display:block;
  width:100%;
  height:200px;
  background:#ffffff; /* Weißer Hintergrund */
  border:2px dashed #b91c1c; /* Vereinsrot Rahmen */
  border-radius:12px;
}
.mbp-sign-toolbar{
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  margin-top:.5rem
}
.mbp-sign-toolbar button{
  padding:.5rem .9rem;
  border:1px solid #334155;
  background:#0f172a;
  color:#ffffff !important;
  border-radius:10px;
  cursor:pointer;
}
.mbp-sign-toolbar button:hover{border-color:#10b981;}

/* ===== Flatpickr ===== */
.flatpickr-calendar{
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(2,6,23,.35);
  z-index:999999 !important;
}
.flatpickr-months{background:linear-gradient(135deg,#065f46,#16a34a); color:#ecfdf5; padding:.3rem 0}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{color:#ecfdf5;font-weight:900}
.flatpickr-weekdays{background:#065f46;color:#d1fae5}
.flatpickr-days{padding:8px}
.flatpickr-days .dayContainer{row-gap:6px}

/* Day-Cells */
.flatpickr-calendar .flatpickr-day{
  position:relative; box-sizing:border-box; border-radius:10px !important;
  height:2.4rem; line-height:2.4rem; margin:2px;
  font-weight:800; font-size:.98rem; color:#f8fafc; background:transparent; border:1px solid transparent;
  box-shadow:none !important; transform:none !important;
}
.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{ color:#94a3b8; opacity:.6 }
.flatpickr-day.selected{ background:#10b981 !important; color:#0b1220 !important; border-color:#10b981 !important; }
.flatpickr-day.today:not(.selected){ border-color:#22c55e !important; }

/* Slot-Status (Punkte/Farben) */
.flatpickr-day.mbp-free{ background:rgba(34,197,94,.14) !important; border-color:rgba(34,197,94,.75) !important; color:#e8fdf3 !important; }
.flatpickr-day.mbp-part{ background:rgba(245,158,11,.12) !important; border-color:rgba(245,158,11,.8) !important; color:#fff7e6 !important; }
.flatpickr-day.mbp-full{ background:rgba(239,68,68,.10) !important; border-color:rgba(239,68,68,.75) !important; color:#fca5a5 !important; }
.flatpickr-day.mbp-blackout{ background:#334155; color:#9ca3af; text-decoration:line-through; border-color:#475569; }
.flatpickr-day.mbp-free::after,.flatpickr-day.mbp-part::after,.flatpickr-day.mbp-full::after{
  content:""; position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:6px; height:6px; border-radius:50%;
}
.flatpickr-day.mbp-free::after{ background:#22c55e; }
.flatpickr-day.mbp-part::after{ background:#f59e0b; }
.flatpickr-day.mbp-full::after{ background:#ef4444; }

/* === Fix: Dropdowns werden nicht abgeschnitten === */
.mbp-row select,
.mbp-row input[type="text"],
.mbp-row input[type="email"],
.mbp-row input[type="tel"]{
  position: relative;
  z-index: 10000;
  overflow: visible;
}
/* --- Signatur: Touch & Events erzwingen --- */
#mbp-signature, #qr-signature { touch-action: none; pointer-events: auto; }
.flatpickr-calendar { z-index: 999999 !important; } /* falls noch nicht gesetzt */

/* Signature canvases */
#mbp-signature,#qr-signature,#mbp_signature{ touch-action:none; }
.mbp-sign-wrap{ position:relative; padding-top:36px; }
.mbp-sign-actions{ position:absolute; top:0; right:0; }
.mbp-clear-sign{ font-size:.85rem; line-height:1; padding:.35rem .6rem; border-radius:9999px; border:1px solid rgba(255,255,255,.2); background:#1f2937; color:#fff; cursor:pointer; }
.mbp-clear-sign:hover{ background:#374151; }

/* Hide inline success, use Swal instead */
.mbp-msg.mbp-ok{ display:none !important; }
.mbp-msg.mbp-error{ display:block !important; }

#mbp-signature,#qr-signature{ touch-action:none; }


/* MBP QR layout polish: tighten spacing at form end */
.mbp-form .mbp-row.dsgvo{ margin-top: .75rem; }
.mbp-form .g-recaptcha{ transform: scale(1); transform-origin: left top; }
.mbp-form .mbp-submit{ margin-top: .75rem; }

.swal2-container{ z-index: 100000 !important; }
.swal2-popup{ z-index: 100001 !important; }

/* ============================================================
   OVERRIDES FÜR DEN KALENDER & LESBARKEIT DER INPUTS
   ============================================================ */
:root{
  --mbp-cyan:#22d3ee;  /* CYAN für Kalender-Schrift */
  --mbp-dark:#0f172a;  /* modernes dunkles Grau/Blau */
}

/* 1) Kalender dunkel + Schrift in CYAN */
.flatpickr-calendar,
.flatpickr-months,
.flatpickr-weekdays,
.flatpickr-innerContainer,
.flatpickr-days,
.flatpickr-time{
  background:var(--mbp-dark) !important;
}
.flatpickr-months,
.flatpickr-weekdays{
  color:var(--mbp-cyan) !important; /* Header & Wochentage */
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{
  color:var(--mbp-cyan) !important; /* Monat/Jahr */
}
span.flatpickr-weekday{
  color:var(--mbp-cyan) !important;
  opacity:1 !important;
}
/* Normale Tage (nicht selected/today/disabled) */
.flatpickr-day:not(.selected):not(.inRange):not(.today):not(.disabled){
  color:var(--mbp-cyan) !important;
}
/* Heute-Ring sichtbar */
.flatpickr-day.today:not(.selected){
  border-color:rgba(34,211,238,.75) !important; /* cyan */
}
/* Pfeile */
.flatpickr-prev-month svg,
.flatpickr-next-month svg{
  fill:var(--mbp-cyan) !important;
}

/* 2) Bessere Lesbarkeit der Input-Felder bei Fokus/Autofill */
.mbp-row input,
.mbp-row select,
.mbp-row textarea{
  background:#0f172a;
  color:#e6fbff !important; /* helles Cyan-Weiß */
  caret-color:#22d3ee;
  border-radius: 10px;
}
.mbp-row input:focus,
.mbp-row select:focus,
.mbp-row textarea:focus,
.mbp-row input:active,
.mbp-row select:active,
.mbp-row textarea:active{
  background:#0b1220 !important;   /* bleibt dunkel, NICHT weiß */
  color:#e6fbff !important;
  border-color:#22d3ee !important;
  box-shadow:0 0 0 3px rgba(34,211,238,.18) !important;
}
/* Placeholder auf dunkel lesbar */
.mbp-row input::placeholder,
.mbp-row textarea::placeholder{
  color:rgba(190,242,255,.6); /* cyan-200/300 */
}
/* Chrome/Safari Autofill: kein weißer Hintergrund & Text lesbar */
.mbp-row input:-webkit-autofill,
.mbp-row input:-webkit-autofill:hover,
.mbp-row input:-webkit-autofill:focus{
  -webkit-text-fill-color:#e6fbff !important;
  -webkit-box-shadow:0 0 0px 1000px #0b1220 inset !important;
  box-shadow:0 0 0px 1000px #0b1220 inset !important;
  caret-color:#22d3ee;
  transition: background-color 5000s ease-in-out 0s;
}
/* === MBP: Flatpickr glassy + Rechts-nicht-abschneiden (responsive) === */

/* Frosted-Glas-Look */
.flatpickr-calendar{
  background: rgba(15,23,42,.90) !important;            /* transparentes Dunkel */
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(255,255,255,.08) !important;   /* sehr dezenter Glasrand */
  box-shadow: 0 14px 44px rgba(2,6,23,.45) !important;  /* softer Shadow */
  border-radius: 16px !important;
  /* Breite so, dass nichts rechts clippt */
  width: min(368px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box !important;
}

/* Innenteile transparent lassen, damit der Blur wirkt */
.flatpickr-months,
.flatpickr-weekdays,
.flatpickr-innerContainer,
.flatpickr-days,
.flatpickr-time{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
}

/* Innen rechts etwas mehr Luft, damit Shadow & Punkte nicht am Rand „kleben“ */
.flatpickr-days{
  padding: 10px 20px 12px 14px !important; /* R + */
}

/* WICHTIG: frühere fixe Breiten wieder auf „auto“, damit es viewport-fit ist */
.flatpickr-days,
.flatpickr-days .dayContainer{
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Für schmalere Screens (Sicherheit): noch kompakter, um Clipping zu verhindern */
@media (max-width: 420px){
  .flatpickr-calendar{
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
  }
}

/* MBP – Immer lesbare Formularfelder (unabhängig von Dark-Mode/Invert-Plugins) */
.mbp-form,
form[class*="mbp"] {
  color-scheme: light; /* System-UI auf "hell" hinweisen (Kalender, Select, etc.) */
}

/* Textfelder, Textareas, Selects (inkl. Fokus & Placeholder) */
.mbp-form input,
.mbp-form textarea,
.mbp-form select,
form[class*="mbp"] input,
form[class*="mbp"] textarea,
form[class*="mbp"] select {
  background-color: #ffffff !important;   /* weiß */
  color: #0f172a !important;              /* sehr dunkles Grau (Slate-900) */
  border-color: #cbd5e1 !important;       /* dezente Kante (Slate-300) */
  caret-color: #0f172a !important;        /* Cursor gut sichtbar */
}

/* Placeholder immer ausreichend kontrastreich */
.mbp-form ::placeholder,
form[class*="mbp"] ::placeholder {
  color: #6b7280 !important;              /* Slate-500 */
  opacity: 1 !important;
}

/* Optionsliste in Select-Menüs */
.mbp-form select option,
form[class*="mbp"] select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* WebKit-Autofill (sonst gelb/grünlich + invertiert und schwer lesbar) */
.mbp-form input:-webkit-autofill,
.mbp-form textarea:-webkit-autofill,
.mbp-form select:-webkit-autofill,
form[class*="mbp"] input:-webkit-autofill,
form[class*="mbp"] textarea:-webkit-autofill,
form[class*="mbp"] select:-webkit-autofill {
  -webkit-text-fill-color: #0f172a !important;
  box-shadow: 0 0 0px 1000px #ffffff inset !important; /* hinterlegt auf weiß */
  transition: background-color 9999s ease-in-out 0s !important; /* Autofill-Farbwechsel unterbinden */
}

/* (Optional) Falls ein Dark-Mode-Plugin die gesamte Seite invertiert:
   Die nächste Zeile einkommentieren, um NUR das MBP-Formular neutral zu halten. */
/*
.mbp-form, form[class*="mbp"] { filter: none !important; }
*/

/* Sichtbare Tage aus Vor-/Nachmonat exakt so neutral halten wie aktuelle */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Falls noch irgendwo alte Füllungen definiert sind: */
.flatpickr-day.mbp-blackout {
  background: transparent !important;
  background-color: transparent !important;
}

/* TODAY ohne Fläche (nur Ring/Outline bleibt) */
.flatpickr-day.today,
.flatpickr-day.today:not(.selected) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Legend im Flatpickr-Popup (Unterkategorien) */
.flatpickr-calendar #mbp-legend{
  display:flex; gap:12px; row-gap:6px; flex-wrap:wrap;
  justify-content:center;
  padding:6px 10px 10px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:12px; line-height:1.25;
  color:#cbd5e1;
}
#mbp-legend .item{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
#mbp-legend .sq{ width:10px; height:10px; border-radius:2px; background:var(--c,#94a3b8); display:inline-block; }

/* TODAY – alle Hintergründe/Pseudo-Overlays neutralisieren (verhindert rote Quadrate) */
.flatpickr-day.today,
.flatpickr-day.today:not(.selected),
.flatpickr-day.today.mbp-day-blocked,
.flatpickr-day.today.mbp-blackout{
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important; mask-image: none !important;
}
/* Nur das Flatpickr-Overlay killen, Dots (::after) bleiben erhalten */
.flatpickr-day.today::before{ content: none !important; }

/* Falls ihr lieber konditionieren wollt (Dots NIE entfernen, wenn mbp-Status vorhanden) */
/*
.flatpickr-day.today:not(.mbp-free):not(.mbp-part):not(.mbp-full):not(.mbp-blackout)::after{ content:none !important; }
*/
.flatpickr-day.mbp-full,
.flatpickr-day.mbp-blackout{
  pointer-events: none; /* Sicherheit, falls Flatpickr-Klicklistener durchkommen */
}