/* MB Zelle Gateway — branded pay/confirmation pages.
   Wired to the site's Astra global colors (with hex fallbacks) so it matches the
   theme automatically. Font is inherited from the theme (Dosis). */
:root {
  --d613pay-accent: var(--ast-global-color-0, #046bd2);
  --d613pay-accent-dark: var(--ast-global-color-1, #045cb4);
  --d613pay-ink: var(--ast-global-color-2, #1e293b);
  --d613pay-text: var(--ast-global-color-3, #334155);
  --d613pay-surface: var(--ast-global-color-5, #f0f5fa);
  --d613pay-line: var(--ast-global-color-7, #d1d5db);
  --d613pay-card: #ffffff;
  --d613pay-muted: #64748b;
  --d613pay-zelle: #6d1ed4;
  --d613pay-warn-bg: #fff7ed;
  --d613pay-warn-bd: #fdba74;
  --d613pay-warn-ink: #9a3412;
  --d613pay-ok-bg: #ecfdf5;
  --d613pay-ok-ink: #047857;
  --d613pay-radius: 18px;
  --d613pay-shadow: 0 10px 40px rgba(30, 41, 59, 0.08);
}

.d613pay-wrap {
  padding: 30px 16px 56px;
  display: flex;
  justify-content: center;
  color: var(--d613pay-text);
}
.d613pay-card {
  width: 100%;
  max-width: 540px;
  background: var(--d613pay-card);
  border: 1px solid var(--d613pay-line);
  border-radius: var(--d613pay-radius);
  box-shadow: var(--d613pay-shadow);
  padding: 32px 28px 36px;
  font-family: inherit;
  color: var(--d613pay-text);
  line-height: 1.55;
}
.d613pay-head { text-align: center; margin-bottom: 22px; }
.d613pay-logo { width: 52px; height: 52px; border-radius: 13px; display: inline-block; box-shadow: 0 4px 14px rgba(109, 30, 212, 0.25); }
.d613pay-card h1 { font-size: 1.5rem; line-height: 1.2; margin: 16px 0 6px; color: var(--d613pay-ink); font-weight: 600; }
.d613pay-sub { color: var(--d613pay-muted); margin: 0; font-size: 1rem; }

/* numbered step badges */
.d613pay-steps ol { list-style: none; counter-reset: mbz; margin: 0 0 22px; padding: 0; }
.d613pay-steps li {
  counter-increment: mbz; position: relative; padding: 3px 0 3px 40px; margin: 11px 0; color: var(--d613pay-text);
}
.d613pay-steps li::before {
  content: counter(mbz); position: absolute; left: 0; top: 0;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--d613pay-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 600;
}

/* QR */
.d613pay-qr { text-align: center; margin: 4px 0 8px; }
.d613pay-qr img {
  width: 208px; height: 208px; border-radius: 16px;
  border: 1px solid var(--d613pay-line); background: #fff; padding: 12px;
  box-shadow: var(--d613pay-shadow);
}
.d613pay-qr-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 208px; height: 208px; margin: 0 auto; border: 2px dashed var(--d613pay-line);
  border-radius: 16px; color: var(--d613pay-muted); padding: 16px; font-size: .92rem;
}
.d613pay-qr-cap { text-align: center; color: var(--d613pay-muted); font-size: .85rem; margin: 0 0 20px; }

/* copyable fields */
.d613pay-fields { display: grid; gap: 10px; margin: 4px 0 20px; }
.d613pay-field { display: flex; flex-direction: column; gap: 5px; }
.d613pay-label { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--d613pay-muted); font-weight: 600; }
.d613pay-value {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--d613pay-surface); border: 1px solid var(--d613pay-line); border-radius: 12px;
  padding: 13px 14px; font-weight: 500; color: var(--d613pay-ink); word-break: break-all;
}
.d613pay-amount { font-size: 1.4rem; color: var(--d613pay-accent); font-weight: 700; }
.d613pay-copy {
  flex: 0 0 auto; border: 1px solid var(--d613pay-accent); background: transparent; color: var(--d613pay-accent);
  border-radius: 9px; padding: 7px 13px; font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.d613pay-copy:hover { background: var(--d613pay-accent); color: #fff; }
.d613pay-copy.d613pay-copied { background: #059669; border-color: #059669; color: #fff; }

.d613pay-warn {
  background: var(--d613pay-warn-bg); border: 1px solid var(--d613pay-warn-bd); color: var(--d613pay-warn-ink);
  border-radius: 12px; padding: 13px 15px; font-size: .92rem; line-height: 1.5; margin-bottom: 22px;
}
.d613pay-alert { border-radius: 12px; padding: 12px 15px; margin-bottom: 18px; font-size: .92rem; }
.d613pay-alert-warn { background: var(--d613pay-warn-bg); border: 1px solid var(--d613pay-warn-bd); color: var(--d613pay-warn-ink); }

.d613pay-form { border-top: 1px solid var(--d613pay-line); padding-top: 20px; }
.d613pay-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; line-height: 1.5; font-size: .95rem; color: var(--d613pay-text); }
.d613pay-check input { margin-top: 3px; width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--d613pay-accent); cursor: pointer; }
.d613pay-submit {
  width: 100%; margin-top: 18px; border: 0; border-radius: 12px; padding: 16px 18px;
  background: var(--d613pay-accent); color: #fff; font-size: 1.05rem; font-weight: 700;
  cursor: pointer; transition: background .15s ease, opacity .15s ease, transform .05s ease;
}
.d613pay-submit:hover:not(:disabled) { background: var(--d613pay-accent-dark); }
.d613pay-submit:active:not(:disabled) { transform: scale(0.99); }
.d613pay-submit:disabled { opacity: .4; cursor: not-allowed; }

/* top "read carefully" emergency banner */
.d613pay-topwarn {
  background: #fef2f2; border: 2px solid #dc2626; border-radius: 12px;
  padding: 16px 18px; margin-bottom: 24px; text-align: center;
  color: #991b1b; font-size: 1.02rem; line-height: 1.55;
}
.d613pay-topwarn strong { color: #b91c1c; font-weight: 800; }
.d613pay-topwarn-head {
  display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: .01em;
  color: #b91c1c; margin-bottom: 9px;
}
@media (prefers-reduced-motion: no-preference) {
  .d613pay-topwarn { animation: d613pay-pulse 1.5s ease-in-out infinite; }
}
@keyframes d613pay-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); border-color: #dc2626; }
  50%      { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.18); border-color: #ef4444; }
}
.d613pay-submit-note {
  text-align: center; font-weight: 700; color: #b91c1c; font-size: .98rem;
  margin: 14px 0 0; line-height: 1.45;
}

/* confirmation */
.d613pay-card-success { text-align: center; }
.d613pay-check-icon {
  width: 66px; height: 66px; border-radius: 50%; margin: 16px auto 8px;
  background: var(--d613pay-ok-bg); color: var(--d613pay-ok-ink); font-size: 34px; line-height: 66px; font-weight: 700;
}
.d613pay-card-success h1 { margin-top: 6px; }
.d613pay-card-success p { line-height: 1.6; margin: 11px 0; color: var(--d613pay-text); }
.d613pay-text { background: var(--d613pay-surface); border: 1px solid var(--d613pay-line); border-radius: 12px; padding: 13px 15px; margin: 16px 0; }
.d613pay-text a { color: var(--d613pay-accent); text-decoration: none; }
.d613pay-muted { color: var(--d613pay-muted); font-size: .9rem; }
.d613pay-btn, .d613pay-btn:visited {
  display: inline-block; margin-top: 16px; text-decoration: none;
  background: var(--d613pay-accent); color: #fff; border-radius: 12px; padding: 14px 26px; font-weight: 700;
  transition: background .15s ease;
}
.d613pay-btn:hover { background: var(--d613pay-accent-dark); color: #fff; }

@media (max-width: 480px) {
  .d613pay-card { padding: 26px 18px 30px; border-radius: 15px; }
  .d613pay-card h1 { font-size: 1.32rem; }
  .d613pay-qr img, .d613pay-qr-placeholder { width: 196px; height: 196px; }
}