/* BTC Checkout Widget - eigenstaendig, keine Abhaengigkeit vom Theme.
   Alle Farben liegen als Variablen im Wurzelelement des Widgets, damit ein
   WordPress-Theme nichts ueberschreibt und Dark Mode ueberall funktioniert. */

.btcpay-widget{
  --ok:#0f9d58; --warn:#d97706; --err:#dc2626; --work:#2563eb; --wait:#94a3b8;
  --line:#e6e8ec; --line2:#d3d7de;
  --flaeche:#fff; --flaeche2:#f4f5f7;
  --fg:#0f172a; --fg2:#475569; --fg3:#94a3b8;
  --rund:14px;

  box-sizing:border-box;
  max-width:820px; margin:1.75rem auto; padding:1.5rem;
  border:1px solid var(--line); border-radius:var(--rund);
  background:var(--flaeche); color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.6;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12);
}
.btcpay-widget *,.btcpay-widget *::before,.btcpay-widget *::after{box-sizing:border-box}
.btcpay-widget :focus-visible{outline:2px solid var(--work);outline-offset:2px;border-radius:6px}

@media (prefers-color-scheme:dark){
  .btcpay-widget{
    --line:#252d3d; --line2:#334155;
    --flaeche:#121826; --flaeche2:#1a2233;
    --fg:#f1f5f9; --fg2:#a3aec1; --fg3:#6b7789;
    --work:#60a5fa; --ok:#34d399; --warn:#fbbf24; --err:#f87171; --wait:#64748b;
    box-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

/* ---------- Kopf ---------- */
.btcpay-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.15rem}
.btcpay-title{margin:0;font-size:1.12rem;font-weight:650;letter-spacing:-.015em}
.btcpay-badge{font-size:.75rem;font-weight:600;padding:.3rem .7rem;border-radius:999px;
              white-space:nowrap;color:#fff;background:var(--wait)}
.btcpay-badge.ok{background:var(--ok)} .btcpay-badge.work{background:var(--work)}
.btcpay-badge.warn{background:var(--warn)} .btcpay-badge.err{background:var(--err)}

/* ---------- Fortschritt ---------- */
.btcpay-progress{height:5px;background:var(--flaeche2);border-radius:999px;overflow:hidden;margin-bottom:1.15rem}
.btcpay-bar{height:100%;width:5%;background:var(--wait);border-radius:999px;
            transition:width .55s cubic-bezier(.4,0,.2,1),background-color .3s ease}
.btcpay-bar.ok{background:var(--ok)} .btcpay-bar.work{background:var(--work)}
.btcpay-bar.warn{background:var(--warn)} .btcpay-bar.err{background:var(--err)}

.btcpay-steps{display:flex;list-style:none;margin:0 0 .9rem;padding:0;gap:.25rem}
.btcpay-step{flex:1;text-align:center;font-size:.72rem;color:var(--fg3);position:relative;padding-top:1.5rem}
.btcpay-dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:11px;height:11px;
            border-radius:50%;background:var(--flaeche2);box-shadow:0 0 0 1.5px var(--line2);
            transition:background-color .3s ease,box-shadow .3s ease}
.btcpay-step.done .btcpay-dot{background:var(--ok);box-shadow:0 0 0 1.5px var(--ok)}
.btcpay-step.active .btcpay-dot{background:var(--work);box-shadow:0 0 0 1.5px var(--work);
                                animation:btcpay-puls 1.8s ease-in-out infinite}
.btcpay-step.done,.btcpay-step.active{color:var(--fg);font-weight:600}
.btcpay-step:not(:last-child)::after{content:"";position:absolute;top:5px;
     left:calc(50% + 10px);right:calc(-50% + 10px);height:1.5px;background:var(--line2)}
.btcpay-step.done:not(:last-child)::after{background:var(--ok)}
@keyframes btcpay-puls{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .btcpay-step.active .btcpay-dot{animation:none}
  .btcpay-bar{transition:none}
}

.btcpay-hint{margin:.6rem 0 1.15rem;color:var(--fg2);font-size:.9rem}

/* ---------- Zahlungsdaten ---------- */
.btcpay-grid{display:flex;gap:1.5rem;flex-wrap:wrap;padding:1.15rem;
             border:1px solid var(--line);border-radius:12px;background:var(--flaeche2)}
.btcpay-qr{text-align:center;flex:0 0 172px}
.btcpay-qr img{width:172px;height:172px;display:block;border-radius:10px;
               background:#fff;padding:8px;border:1px solid var(--line)}
.btcpay-openwallet{display:inline-block;margin-top:.6rem;font-size:.82rem;
                   text-decoration:none;color:var(--work);font-weight:600}
.btcpay-openwallet:hover{text-decoration:underline}
.btcpay-details{flex:1 1 260px;min-width:0}
.btcpay-field{margin-bottom:1rem}
.btcpay-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
              color:var(--fg3);font-weight:600;margin-bottom:.3rem}
.btcpay-value-row{display:flex;align-items:stretch;gap:.5rem}
.btcpay-value{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
              font-size:.82rem;line-height:1.45;word-break:break-all;background:var(--flaeche);
              border:1px solid var(--line);border-radius:8px;padding:.5rem .6rem}
.btcpay-copy{flex:0 0 auto;font-size:.76rem;font-weight:600;padding:.4rem .7rem;
             border:1px solid var(--line2);border-radius:8px;background:var(--flaeche);
             color:var(--fg2);cursor:pointer;transition:background-color .15s ease}
.btcpay-copy:hover{background:var(--flaeche2)}
.btcpay-sub{font-size:.78rem;color:var(--fg3)}
.btcpay-testnet{font-size:.78rem;color:var(--warn);font-weight:600;margin:.5rem 0}
.btcpay-countdown{font-size:.82rem;color:var(--fg3);margin:.5rem 0 0;font-variant-numeric:tabular-nums}
.btcpay-countdown.erkannt{color:var(--ok);font-weight:600}
.btcpay-expired{color:var(--err);font-weight:600}

/* ---------- Hinweise ---------- */
.btcpay-notes{margin-top:1.15rem}
.btcpay-note{margin:0 0 .55rem;padding:.7rem .85rem;border-radius:10px;font-size:.85rem;
             line-height:1.55;background:var(--flaeche2);color:var(--fg2);
             border-left:3px solid var(--line2)}
.btcpay-note.ok{border-left-color:var(--ok);color:var(--fg)}
.btcpay-note.warn{border-left-color:var(--warn);color:var(--fg)}
.btcpay-note.info{border-left-color:var(--wait)}

/* ---------- Formular ---------- */
.btcpay-form{margin-top:1.25rem;padding:1.15rem;border:1px dashed var(--line2);border-radius:12px}
.btcpay-form-intro{margin:0 0 .9rem;font-size:.86rem;color:var(--fg2)}
.btcpay-inputwrap{display:block;margin-bottom:.85rem}
.btcpay-inputwrap span{display:block;font-size:.78rem;font-weight:600;margin-bottom:.3rem;color:var(--fg2)}
.btcpay-inputwrap input{width:100%;padding:.6rem .7rem;border:1px solid var(--line2);
                        border-radius:8px;font-size:.88rem;background:var(--flaeche);color:var(--fg);
                        font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.btcpay-inputwrap input::placeholder{color:var(--fg3)}
.btcpay-inputwrap input:focus{outline:2px solid var(--work);outline-offset:1px;border-color:var(--work)}
.btcpay-submit{padding:.65rem 1.35rem;border:0;border-radius:9px;background:var(--work);
               color:#fff;font-weight:650;font-size:.9rem;cursor:pointer;
               transition:filter .15s ease,transform .12s ease}
.btcpay-submit:hover:not(:disabled){filter:brightness(1.08)}
.btcpay-submit:active:not(:disabled){transform:translateY(1px)}
.btcpay-submit:disabled{opacity:.55;cursor:default}
.btcpay-formerr{color:var(--err);font-size:.83rem;margin:.4rem 0;font-weight:500}
.btcpay-claimed{margin-top:1.25rem;padding:1rem 1.15rem;border-radius:12px;
                background:var(--flaeche2);font-size:.86rem;color:var(--fg2)}
.btcpay-claimed strong{display:block;margin-bottom:.4rem;color:var(--fg)}
.btcpay-match{margin-top:.4rem;font-weight:600}
.btcpay-match.ok{color:var(--ok)} .btcpay-match.warn{color:var(--warn)}

/* ---------- Transaktionen ---------- */
.btcpay-txhead{margin:1.4rem 0 .6rem;font-size:.7rem;text-transform:uppercase;
               letter-spacing:.06em;color:var(--fg3);font-weight:600}
.btcpay-txlist{list-style:none;margin:0;padding:0}
.btcpay-tx{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;padding:.6rem .8rem;
           border:1px solid var(--line);border-radius:10px;margin-bottom:.45rem;font-size:.83rem}
.btcpay-tx.reorged{opacity:.5;text-decoration:line-through}
.btcpay-txid{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
             color:var(--work);text-decoration:none;font-weight:500}
.btcpay-txid:hover{text-decoration:underline}
.btcpay-txval{font-weight:650;margin-left:auto;font-variant-numeric:tabular-nums;
              font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.btcpay-txconf{color:var(--fg3)}
.btcpay-rbf{font-size:.66rem;font-weight:700;letter-spacing:.04em;background:var(--warn);
            color:#fff;padding:.14rem .4rem;border-radius:5px}
.btcpay-sum{font-size:.85rem;color:var(--fg2);margin:.6rem 0 0}
.btcpay-loading{color:var(--fg3);text-align:center;padding:2.5rem 0;font-size:.9rem}

@media (max-width:600px){
  .btcpay-widget{padding:1.15rem;border-radius:12px;margin:1.25rem auto}
  .btcpay-grid{flex-direction:column;align-items:center;padding:1rem}
  .btcpay-qr{flex:0 0 auto}
  .btcpay-details{width:100%}
  .btcpay-step-label{display:none}
  .btcpay-step.active .btcpay-step-label{display:block}
  .btcpay-txval{margin-left:0}
}