/* ── Slider ─────────────────────────────────────────────────────────────── */
.dsw-slider {
  position: relative;
  height: 280px;
  overflow: hidden;
  border-radius: 12px;
}

.dsw-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.dsw-slide.active {
  opacity: 1;
}

.dsw-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
/* Configurable overlay layer above the image — Elementor's control sets
   only the background-color via the `Bild-Overlay` style section. */
.dsw-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.30);
  pointer-events: none;
}
.dsw-bg--empty {
  background: linear-gradient(135deg, #d8e4ee 0%, #b8c8d8 100%);
}

/* Text band — fully styled via Elementor's Style tab (color, typography,
   background, padding, margin, radius). The defaults below mirror the
   defaults registered in the widget so a fresh slide already looks
   reasonable before any tweaking. */
.dsw-text {
  position: relative;
  display: inline-block;
  max-width: 100%;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.40);
  padding: 10px 16px;
  margin: 20px 0 0 0;
  border-radius: 4px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  box-sizing: border-box;
}

/* ── Below-slider note ──────────────────────────────────────────────────── */
.dsw-below-slider {
  font-size: 0.78rem;
  color: #777;
  margin: 6px 0 0;
  text-align: center;
}

/* ── Section spacing + label ────────────────────────────────────────────── */
.dsw-section {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dsw-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Amount row ─────────────────────────────────────────────────────────── */
.dsw-amount-row {
  display: flex;
  align-items: stretch;
  border: 1px solid #ccc;
  border-radius: 8px;
  position: relative;
  /* overflow: visible so the slide-boundary markers above the slider
     track aren't clipped, and so the tooltip's left-pointing arrow can
     sit on the inside edge without being clipped. The currency box
     already has its own border-right; rounded corners on the row
     itself still work. */
}

.dsw-currency-box {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: #f7f7f7;
  border-right: 1px solid #ccc;
  flex-shrink: 0;
}

.dsw-currency-symbol {
  font-size: 1.1rem;
  color: #555;
}

.dsw-currency-box input[type="number"] {
  width: 72px;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  outline: none;
  -moz-appearance: textfield;
}

.dsw-currency-box input[type="number"]::-webkit-outer-spin-button,
.dsw-currency-box input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* Stack: markers + range slider, vertically. Replaces the old
   "range as direct flex child of .dsw-amount-row" structure. */
.dsw-range-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 16px;
  position: relative;
}

.dsw-range-markers {
  position: relative;
  height: 10px;
  margin-bottom: 4px;
}
.dsw-range-marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--e-global-color-secondary, #54595f);
  opacity: 0.7;
  cursor: default;
}

.dsw-range-stack input[type="range"] {
  width: 100%;
  margin: 0;

  /* Custom track + thumb shared across browsers. JS updates --dsw-fill
     (0–100%) on input so the green portion fills up to the thumb. */
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(
    to right,
    var(--e-global-color-accent, #0a7a3e) 0%,
    var(--e-global-color-accent, #0a7a3e) var(--dsw-fill, 0%),
    #e0e0e0 var(--dsw-fill, 0%),
    #e0e0e0 100%
  );
  border-radius: 3px;
  outline: none;
}
.dsw-amount-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--e-global-color-accent, #0a7a3e);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #0a2a3a;
  cursor: pointer;
}
.dsw-amount-row input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--e-global-color-accent, #0a7a3e);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #0a2a3a;
  cursor: pointer;
}
.dsw-amount-row input[type="range"]::-moz-range-track {
  background: transparent;
}

/* ── Configurable thumb icon overlay ────────────────────────────────────
   When the editor configures a thumb icon, the native pseudo-element
   thumb is kept invisible (transparent, no border/shadow) but at full
   size for hit-testing, and a real DOM element rides along on top of
   it. The icon lives inside a thin `.dsw-range-line` wrapper that
   matches the range input's box height, so `top: 50%` lines up
   precisely with the thumb's vertical centre — clicks on the icon
   pass through (pointer-events: none) to the underlying thumb's hit
   area for dragging. */
.dsw-range-line {
  position: relative;
  width: 100%;
}

.dsw-thumb-icon {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dsw-thumb-icon img {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 2;
}

/* The pulse halo: a circle behind the icon that fades from a soft
   tint, expands ~2.5×, and dissolves on tier crossings. Sized via
   width/height: 100% of the icon, then scaled by the keyframe so it
   reaches well beyond the icon's silhouette. */
.dsw-thumb-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--e-global-color-accent, #0a7a3e);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.dsw-amount-row--icon-thumb input[type="range"]::-webkit-slider-thumb {
  background: transparent;
  border: none;
  box-shadow: none;
}
.dsw-amount-row--icon-thumb input[type="range"]::-moz-range-thumb {
  background: transparent;
  border: none;
  box-shadow: none;
}

@keyframes dsw-thumb-pulse {
  from { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0;    transform: translate(-50%, -50%) scale(2.6); }
}

.dsw-thumb-icon--pop::before {
  animation: dsw-thumb-pulse 520ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .dsw-thumb-icon--pop::before {
    animation: none;
  }
}

/* ── Overflow tooltip (shown once amount reaches the last slide's max) ── */
/* Floats above the amount row, anchored to its right edge so the
   downward arrow lands roughly above the slider thumb (which sits at
   the far right when the donor is in the overflow zone). Stacks below
   the row on narrow viewports. */
.dsw-slide-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: 38%;
  max-width: 320px;
  padding: 8px 14px;
  background: #fff8d6;
  border: 1px solid #f0d678;
  border-radius: 6px;
  color: #6b5500;
  font-size: 0.82rem;
  line-height: 1.35;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 5;
  white-space: pre-wrap;
}

.dsw-slide-tooltip[hidden] {
  display: none;
}

/* Downward arrow at the bottom-right, pointing at the slider thumb.
   The horizontal offset (~20px from the right edge) approximates the
   thumb's resting position at slider max — the range-stack has 16px
   right margin and the thumb is 18px wide, so its centre lands roughly
   16-18px from the amount-row's right edge. */
.dsw-slide-tooltip::before {
  content: '';
  position: absolute;
  bottom: -7px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #f0d678;
}

.dsw-slide-tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 21px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff8d6;
}

/* On narrow viewports the floating panel would crowd the section —
   wrap the amount-row so the tooltip drops onto its own line below
   the slider, full width, no arrow. flex-wrap on the parent +
   flex-basis 100% on the tooltip is what actually moves it
   underneath; without those it stays a third flex sibling fighting
   the slider for horizontal space (and overlapping it on small
   screens). */
@media (max-width: 600px) {
  .dsw-amount-row {
    flex-wrap: wrap;
  }
  .dsw-slide-tooltip {
    position: static;
    flex: 1 1 100%;
    width: auto;
    max-width: 100%;
    bottom: auto;
    right: auto;
    margin: 8px 4px 4px;
  }
  .dsw-slide-tooltip::before,
  .dsw-slide-tooltip::after {
    display: none;
  }
}

/* Boundary marker entering an open-top slide ("ab X €"). Tinted with
   the primary color to read as a tier threshold rather than just
   another inter-slide divider. */
.dsw-range-marker--open-top {
  border-top-color: var(--e-global-color-primary, #1a5faf);
  opacity: 0.85;
}

/* ── Interval tabs ──────────────────────────────────────────────────────── */
.dsw-tabs {
  display: flex;
  gap: 8px;
}

.dsw-tab {
  flex: 1;
  padding: 12px 8px;
  font-size: 1rem;
  font-weight: 500;
  border: 2px solid #0a2a3a;
  border-radius: 8px;
  background: #fff;
  color: #0a2a3a;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}

.dsw-tab:hover {
  opacity: 0.92;
}

/* Pin the inactive look on press/focus so the browser's UA default
   (or the host theme) can't briefly flash a red/black background. */
.dsw-tab:active,
.dsw-tab:focus {
  outline: none;
  background: #fff;
  color: #0a2a3a;
}

.dsw-tab--active,
.dsw-tab--active:active,
.dsw-tab--active:focus {
  background: linear-gradient(
    90deg,
    var(--e-global-color-accent, #0a7a3e),
    var(--e-global-color-primary, #1a5faf)
  );
  color: #fff;
  font-weight: 600;
}

/* Sub-tabs only span the right half of the row — they sit directly
   under the "regelmäßig" button. Half-width minus the half-gap so
   the left edge aligns precisely with the regelmäßig button. */
.dsw-sub-tabs {
  width: calc(50% - 4px);
  margin-left: auto;
  margin-top: 8px;
}

.dsw-sub-tabs .dsw-tab {
  padding: 9px 8px;
  font-size: 0.92rem;
}

/* ── Name row (first + last name side by side) ──────────────────────────── */
.dsw-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dsw-name-row input[type="text"] {
  width: 100%;
  padding: 11px 14px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}

.dsw-name-row input[type="text"]:focus {
  border-color: #2e5266;
}

/* ── Email / message / publish-name inputs ──────────────────────────────── */
.dsw-section input[type="email"],
.dsw-section textarea,
.dsw-section select {
  width: 100%;
  padding: 11px 14px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
  background: #fff;
  color: #222;
}

.dsw-section input[type="email"]:focus,
.dsw-section textarea:focus,
.dsw-section select:focus {
  border-color: #2e5266;
}

/* ── Inline validation errors ───────────────────────────────────────────
   .dsw-field-error sits directly under the offending input;
   .dsw-form-error sits above the submit button for submit-time problems
   that aren't pinned to one field (amount, server response). Both use
   role="alert" + the hidden attribute so screen readers announce only
   when shown. */
.dsw-field-error,
.dsw-form-error {
  margin: 6px 2px 0;
  color: #b3261e;
  font-size: 0.85rem;
  line-height: 1.35;
}
.dsw-form-error {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fdecea;
  border: 1px solid #f5b5b1;
  border-radius: 6px;
  color: #7a1e1c;
}
.dsw-input--error,
.dsw-section input[type="email"].dsw-input--error,
.dsw-name-row input[type="text"].dsw-input--error {
  border-color: #b3261e;
}
.dsw-input--error:focus {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15);
}

/* ── Resend-instructions block ──────────────────────────────────────────
   Surfaced only after the duplicate-open-payment server error so the
   donor can re-trigger the IBAN/checkout-link email without re-typing
   the form. Sits flush below the inline form error. */
.dsw-resend-block {
  margin: 8px 2px 0;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
/* `display: flex` above wins over the browser's default
   [hidden] { display: none } on specificity — restore it so the JS's
   `hidden` toggle actually hides the block until needed. */
.dsw-resend-block[hidden] { display: none; }
.dsw-resend-prompt {
  margin: 0;
  font-size: 0.85rem;
  color: #444;
  flex: 1 1 auto;
  min-width: 200px;
}
.dsw-resend-btn {
  border: 1px solid #c8d6e5;
  background: #f6f8fb;
  color: #1a3a6b;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 600;
}
.dsw-resend-btn:hover:not(:disabled) { background: #ecf1f8; }
.dsw-resend-btn:disabled { opacity: 0.6; cursor: default; }
.dsw-resend-status {
  margin: 4px 2px 0;
  font-size: 0.85rem;
  flex-basis: 100%;
}
.dsw-resend-status--ok  { color: #1b5e20; }
.dsw-resend-status--err { color: #b3261e; }

.dsw-section textarea {
  resize: vertical;
  min-height: 72px;
}

/* ── Message + hint row (textarea left, focus-only notice right) ───────── */
/* The hint mirrors the slider's overflow notice styling so both
   in-form callouts share a visual language. It's hidden by default —
   only fades in when the textarea has focus, so first-time donors
   aren't distracted by an extra yellow box they don't need yet. */
.dsw-message-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}

.dsw-message-row textarea {
  margin: 0;
}

.dsw-message-hint {
  margin: 0;
  padding: 8px 14px;
  background: #fff8d6;
  border: 1px solid #f0d678;
  border-radius: 6px;
  color: #6b5500;
  font-size: 0.82rem;
  line-height: 1.35;
  display: flex;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s, visibility 0s 0.15s;
}

.dsw-message-row textarea:focus + .dsw-message-hint,
.dsw-message-row textarea:focus ~ .dsw-message-hint {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.15s, visibility 0s;
}

@media (max-width: 480px) {
  .dsw-message-row {
    grid-template-columns: 1fr;
  }
}

/* ── Submit button ──────────────────────────────────────────────────────── */
.dsw-btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 600;
  background: linear-gradient(
    90deg,
    var(--e-global-color-accent, #0a7a3e),
    var(--e-global-color-primary, #1a5faf)
  );
  color: #fff;
  border: 2px solid #0a2a3a;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
}

.dsw-btn:hover {
  opacity: 0.95;
}

/* Keep the gradient pinned on press/focus so neither the UA default
   nor a host-theme rule can paint the button red mid-click. */
.dsw-btn:active,
.dsw-btn:focus {
  outline: none;
  background: linear-gradient(
    90deg,
    var(--e-global-color-accent, #0a7a3e),
    var(--e-global-color-primary, #1a5faf)
  );
  color: #fff;
}

.dsw-btn:disabled {
  background: #aaa;
  border-color: #888;
  cursor: not-allowed;
  opacity: 1;
}

/* ── Bottom note ────────────────────────────────────────────────────────── */
.dsw-bottom-note {
  margin: 12px 0 0;
  font-size: 0.75rem;
  color: #888;
  text-align: center;
}

/* ── Cancel-pending overlay ─────────────────────────────────────────────
   Briefly shown when the donor uses the browser back button from the
   Mollie checkout page. The JS adds the class on <html>, fires
   /cancel-pending, then navigates to the success page (which renders
   the existing "Zahlung nicht abgeschlossen" screen). Dims the page
   and disables interaction so the donor can't keep typing into the
   stale form mid-redirect. */
.dsw-cancelling {
  pointer-events: none;
}
.dsw-cancelling body {
  opacity: 0.35;
  transition: opacity 0.15s linear;
}
.dsw-cancelling::after {
  content: 'Spende wird abgebrochen…';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #1d1d1f;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  font-size: 1rem;
  font-weight: 600;
  z-index: 99999;
  pointer-events: none;
  opacity: 1;
}