/* ==========================================================================
   P2Phantom — Speed Dial "DOŁĄCZ" (lista p2pH + Telegram)
   --------------------------------------------------------------------------
   Style dla speed-dial.js. Zastępuje wizualnie dwa stare pływające przyciski
   (.wl-float z waitlist.css, .tg-float z telegram-float.css) — te reguły na
   dole pliku ukrywają je, nie dotykając ich znaczników ani logiki.

   Zmienne celowo namespaced ("--sd-*"), tak jak w waitlist.css, żeby widget
   wyglądał identycznie niezależnie od zmiennych hosta na danej stronie.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --sd-green:#00FF87; --sd-green-line:#00e982; --sd-green-faint:rgba(0,255,135,0.10);
  --sd-blue:#27A7E7; --sd-blue-faint:rgba(39,167,231,0.12);
  --sd-text:#F1F6F3; --sd-dim:#8FA49A; --sd-border-hi:#22302B;
}

.sd-fab{
  position:fixed; right:24px; bottom:28px; z-index:150;
  font-family:'JetBrains Mono',monospace;
}
.sd-fab.sd-veiled{visibility:hidden; pointer-events:none;}

/* ── Główny button ─────────────────────────────────── */
.sd-main{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:14px 20px 14px 16px; border-radius:20px;
  background:linear-gradient(135deg,#10201A,#07100D);
  border:1.4px solid rgba(0,239,135,0.75);
  box-shadow:0 12px 28px rgba(0,0,0,0.48), 0 0 0 1px rgba(0,239,135,0.05);
  cursor:pointer; text-align:left;
  transition:transform .2s ease, box-shadow .2s ease;
}
.sd-main:hover{transform:translateY(-2px)}
.sd-main:focus-visible{outline:2px solid var(--sd-green); outline-offset:3px}

.sd-main-icon{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--sd-green-faint); border:1px solid rgba(0,239,135,0.34);
}
.sd-plus{
  position:relative; width:14px; height:14px;
  transition:transform .3s ease;
}
.sd-plus::before, .sd-plus::after{
  content:''; position:absolute; background:var(--sd-green); border-radius:2px;
}
.sd-plus::before{left:0; top:50%; width:100%; height:2px; transform:translateY(-50%)}
.sd-plus::after{top:0; left:50%; width:2px; height:100%; transform:translateX(-50%)}
.sd-fab.sd-open .sd-plus{transform:rotate(45deg)}

.sd-main-text{display:flex; flex-direction:column; gap:3px; min-width:0}
.sd-main-title{color:var(--sd-text); font-size:14.5px; font-weight:700; letter-spacing:0.8px; white-space:nowrap}
.sd-main-sub{
  display:flex; align-items:center; gap:5px; color:var(--sd-dim);
  font-size:9.5px; letter-spacing:0.3px; white-space:nowrap;
}
.sd-sep{color:var(--sd-border-hi)}
.sd-dot{width:6px; height:6px; border-radius:50%; flex-shrink:0}
.sd-dot-green{background:var(--sd-green); box-shadow:0 0 6px rgba(0,255,135,0.6)}
.sd-dot-blue{background:var(--sd-blue); box-shadow:0 0 6px rgba(39,167,231,0.6)}

/* ── Rozwijane menu (2 akcje) ──────────────────────── */
.sd-menu{
  position:absolute; right:0; bottom:calc(100% + 12px);
  display:flex; flex-direction:column; gap:10px; width:max-content; max-width:min(320px, calc(100vw - 32px));
}

.sd-action{
  display:flex; align-items:center; gap:12px;
  min-height:56px; padding:10px 18px 10px 14px; border-radius:16px;
  background:linear-gradient(135deg,#101614,#070A0C);
  border:1px solid var(--sd-border-hi);
  border-left:3px solid transparent;
  cursor:pointer; text-align:left; font-family:inherit;
  box-shadow:0 10px 24px rgba(0,0,0,0.4);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, border-color .15s ease, background .15s ease;
}
.sd-fab.sd-open .sd-action{opacity:1; transform:translateY(0); pointer-events:auto}

.sd-action-wallet{border-left-color:var(--sd-green-line)}
.sd-action-wallet:hover, .sd-action-wallet:focus-visible{border-color:rgba(0,239,135,0.55); background:linear-gradient(135deg,#101f18,#070A0C)}
.sd-action-telegram{border-left-color:var(--sd-blue)}
.sd-action-telegram:hover, .sd-action-telegram:focus-visible{border-color:rgba(39,167,231,0.5); background:linear-gradient(135deg,#0d1a22,#070A0C)}
.sd-action:focus-visible{outline:2px solid currentColor; outline-offset:2px}

.sd-action-icon{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.sd-action-icon svg{width:20px; height:20px}
.sd-action-wallet .sd-action-icon{background:var(--sd-green-faint); color:var(--sd-green); border:1px solid rgba(0,239,135,0.3)}
.sd-action-telegram .sd-action-icon{background:var(--sd-blue-faint); color:var(--sd-blue); border:1px solid rgba(39,167,231,0.3)}

.sd-action-text{display:flex; flex-direction:column; gap:3px; min-width:0}
.sd-action-title{color:var(--sd-text); font-size:12px; font-weight:700; letter-spacing:0.5px; white-space:nowrap}
.sd-action-sub{font-size:10.5px; color:var(--sd-dim); white-space:nowrap}
.sd-action-telegram .sd-action-sub{color:var(--sd-blue)}

/* ── Mobile ─────────────────────────────────────────── */
@media(max-width:680px){
  .sd-fab{right:16px; bottom:calc(16px + env(safe-area-inset-bottom))}
  .sd-main{padding:12px 16px 12px 12px; border-radius:18px}
  .sd-main-title{font-size:13px}
  .sd-action{min-height:48px; padding:8px 16px 8px 12px}
}

/* ── prefers-reduced-motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .sd-main, .sd-plus, .sd-action{transition:none}
}

/* ── Zastąpienie dwóch starych osobnych pływających przycisków ──
   Znaczniki i logika (#wlFloatBtn z waitlist.js, #tgFloatBtn z
   telegram-float.js) zostają nietknięte — tylko ukrywamy je wizualnie
   i wyjmujemy z tabulacji, żeby nie było duplikatów na ekranie. */
#wlFloatBtn, #tgFloatBtn{
  display:none !important;
}