/* ==========================================================================
   EL-SKLEP — elkonto: logowanie dwuetapowe.

   To JEDYNY arkusz tego modułu i celowo jest malutki. Wygląd kart, pól i przycisków
   na stronie kodu bierzemy z klas .el-potw__*, które motyw elsklep opisuje w swoim
   custom.css (sekcja 107) — moduł nie ma prawa dopisywać niczego do arkusza motywu,
   więc siedzą tu wyłącznie rzeczy, których motyw znać nie może: opis pod nowym kaflem,
   plakietka stanu i czerwony przycisk wyłączania.

   Wszystkie kolory biorą się ze zmiennych motywu (--g, --s-600, --r…), żeby kafel
   i karta wyglądały tak samo w trybie jasnym i ciemnym, bez powtarzania palety.
   ========================================================================== */

/* opis pod nazwą kafla — motyw robi to samo dla swoich kafli po id odnośnika */
#my-account #el2fa-link span.link-item::after { content: "Kod jednorazowy z poczty przy każdym logowaniu"; }

/* plakietka „włączone / wyłączone" w kaflu; ::after motywu idzie pod nią, więc
   plakietkę wypychamy na koniec kafla porządkiem wypisywania, nie pozycjonowaniem */
.el-2fa__plakietka {
    display: inline-flex; align-items: center; margin-top: -.35rem; padding: .12rem .55rem;
    border-radius: 999px; font-size: .72rem; font-style: normal; font-weight: 700;
    letter-spacing: .02em; text-transform: uppercase;
}
.el-2fa__plakietka--wl { background: var(--g-50, #E7F7EF); color: var(--g-deep, #0E7A4F); }
.el-2fa__plakietka--wyl { background: var(--s-100, #EEF2F5); color: var(--s-600, #5F6771); }
html[data-el-theme="dark"] .el-2fa__plakietka--wl { background: rgba(34,201,137,.14); color: var(--g-neon, #22C989); }
html[data-el-theme="dark"] .el-2fa__plakietka--wyl { background: rgba(255,255,255,.08); color: var(--s-500, #8A929B); }

/* pasek stanu na karcie ustawień */
.el-2fa__stan {
    display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; padding: .7rem .9rem;
    border-radius: var(--r-sm, 10px); font-size: .95rem; font-weight: 600; text-align: left;
}
.el-2fa__stan i { font-size: 20px; }
.el-2fa__stan--wl { background: var(--g-50, #E7F7EF); color: var(--g-deep, #0E7A4F); }
.el-2fa__stan--wyl { background: var(--s-100, #EEF2F5); color: var(--s-600, #5F6771); }
html[data-el-theme="dark"] .el-2fa__stan--wl { background: rgba(34,201,137,.14); color: var(--g-neon, #22C989); }
html[data-el-theme="dark"] .el-2fa__stan--wyl { background: rgba(255,255,255,.08); color: var(--s-500, #8A929B); }

/* wyłączenie zabezpieczenia to nie jest ruch „na zielono" — przycisk ma o tym mówić */
.el-2fa__btn--wylacz {
    border: 1px solid var(--s-300, #C8D1D9); background: var(--w, #FFFFFF); color: #C1303E;
}
.el-2fa__btn--wylacz:hover, .el-2fa__btn--wylacz:focus-visible { border-color: #C1303E; background: #FDECEA; color: #932018; }
html[data-el-theme="dark"] .el-2fa__btn--wylacz { background: var(--s-50, #161C22); border-color: rgba(255,255,255,.16); color: #FF8A80; }
html[data-el-theme="dark"] .el-2fa__btn--wylacz:hover { background: rgba(214,52,46,.16); color: #FFB4AB; }