:root{
  --dwzas-bg: #ffffff; --dwzas-fg: #111827; --dwzas-muted: #6b7280; --dwzas-border: #e5e7eb;
  --dwzas-ring: #2563eb; --dwzas-danger: #b91c1c; --dwzas-radius: 14px; --dwzas-shadow: 0 10px 25px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root{ --dwzas-bg:#0b0f15; --dwzas-fg:#e5e7eb; --dwzas-muted:#9aa3af; --dwzas-border:#1f2937; --dwzas-ring:#3b82f6; --dwzas-danger:#ef4444; --dwzas-shadow: 0 10px 30px rgba(0,0,0,.5); }
}
.dwzas-card{ max-width:760px; margin:0 auto; background:var(--dwzas-bg); color:var(--dwzas-fg); border:1px solid var(--dwzas-border);
  border-radius:18px; box-shadow:var(--dwzas-shadow); padding:clamp(12px,3vw,24px); }
.dwzas-form{ position:relative; }
.dwzas-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width: 720px){ .dwzas-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 18px; align-items:start; } .dwzas-field-name{ grid-column:span 2; } }
.dwzas-label{ display:block; font-size:.9rem; font-weight:600; margin:2px 0 6px; color:var(--dwzas-muted); }
.dwzas-input{ width:100%; padding:12px 14px; border:1px solid var(--dwzas-border); border-radius:var(--dwzas-radius); background:var(--dwzas-bg); color:var(--dwzas-fg);
  line-height:1.3; box-shadow:0 1px 0 rgba(0,0,0,.02) inset; transition:border-color .15s, box-shadow .15s; }
.dwzas-input:focus{ outline:none; border-color:var(--dwzas-ring); box-shadow:0 0 0 3px color-mix(in srgb, var(--dwzas-ring) 20%, transparent); }
.dwzas-note{ margin-top:6px; font-size:.85rem; color:var(--dwzas-muted); }
.dwzas-hint{ font-size:.8rem; color:var(--dwzas-danger); margin-top:6px; }
.dwzas-field-name{ position:relative; }
.dwzas-suggestions{ display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:9999; border:1px solid var(--dwzas-border); border-radius:var(--dwzas-radius);
  background:var(--dwzas-bg); box-shadow:var(--dwzas-shadow); max-height:min(50vh,320px); overflow:auto; -webkit-overflow-scrolling:touch; }
.dwzas-suggestions.dwzas-up{ top:auto; bottom:calc(100% + 6px); }
.dwzas-suggestion{ padding:12px 14px; cursor:pointer; line-height:1.35; border-bottom:1px solid var(--dwzas-border); min-height:44px; display:flex; align-items:center; }
.dwzas-suggestion:last-child{ border-bottom:0; }
.dwzas-suggestion:hover, .dwzas-suggestion.is-active{ background: color-mix(in srgb, var(--dwzas-ring) 12%, transparent); }
@media (hover:none){ .dwzas-suggestion:hover{ background:inherit; } .dwzas-suggestion.is-active{ background: color-mix(in srgb, var(--dwzas-ring) 12%, transparent); } }

/* Action item when no results */
.dwzas-suggestion.dwzas-action{
  font-weight: 600;
}
.dwzas-suggestion.dwzas-action::before{
  content: '↩︎ ';
  opacity: .6;
  margin-right: 6px;
}

.dwzas-toprow{ display:flex; align-items:center; justify-content:flex-start; margin-bottom:10px; }
.dwzas-check{ display:inline-flex; align-items:center; gap:8px; font-size:.95rem; color:var(--dwzas-fg); }
.dwzas-check input{ transform: translateY(1px); }

/* Honeypot Autofill Decoys */
.dwzas-decoy{ position:absolute; left:-9999rem; top:auto; width:1px; height:1px; overflow:hidden; pointer-events:none; opacity:0; }
.dwzas-decoy input{ width:1px; height:1px; border:0; padding:0; margin:0; }
/* --- Fix: Header dürfen NICHT mitten im Wort umbrechen --- */
body[class*="_page_dwzas_payments"] table.widefat th {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* --- Zellen dürfen umbrechen, aber nicht Buchstabe-für-Buchstabe --- */
body[class*="_page_dwzas_payments"] table.widefat td {
  white-space: normal !important;
  word-break: normal !important;     /* kein aggressives break-word */
  overflow-wrap: anywhere !important;/* lange E-Mails/URLs dürfen umbrechen */
  hyphens: auto;
}

/* --- Wrapper: wirklich nur der Wrapper scrollt horizontal --- */
.dwzas-scrollwrap {
  display: block;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* smooth auf iOS */
}

/* --- Tabelle: darf breiter als der Wrapper werden => horizontaler Scroll --- */
.dwzas-scrollwrap .widefat {
  width: max-content; /* nimmt die benötigte Breite der Spalten an */
  min-width: 100%;    /* mindestens so breit wie der Wrapper */
  table-layout: auto; /* natürliche Spaltenbreiten, keine erzwungene Quetschung */
}

/* Optional: etwas Luft in TH für Lesbarkeit */
body[class*="_page_dwzas_payments"] table.widefat th {
  padding-right: 10px;
}