/* Wygenerowane przez tools/wytnij-css.py z prototypu — nie edytuj recznie. */

/* Konto klienta — dwie kolumny: logowanie i rejestracja. Pola trzymają regułę
   formularzy serwisu (widoczna etykieta wersalikami, podkreślenie zamiast
   ramki), więc strona nie wygląda jak wklejony panel WooCommerce.
   Formularze NIE mają klasy .in-form: skrypt w index.html podpina się pod
   `form.in-form` i pokazywałby modal „Wiadomość wysłana!", co przy logowaniu
   nie ma sensu. */
/* Karty wchodzą NA hero — bez tego strona zaczynała się od ekranu samego
   fioletu, a logowanie leżało pod foldem. Hero traci `min-height: 100svh`
   (przy solo-wariancie i trzech linijkach tekstu to był pusty ekran), a sekcja
   wjeżdża w nie ujemnym marginesem. z-index, bo pasmo bieli hero rysuje ::after. */
body:has(#konto) .in-hero-purple { min-height: auto; padding-top: clamp(136px, 15vh, 178px); }
/* `> .in-wrap` ma wlasne min-height liczone z 100svh i `align-items: end` —
   samo `min-height: auto` na sekcji nie wystarczylo, tresc dalej ladowala
   przy dolnej krawedzi ekranu, a nad nia stal pusty fiolet */
body:has(#konto) .in-hero-purple > .in-wrap { min-height: 0; }
body:has(#konto) .in-hero-purple .in-eyebrow { margin-bottom: 30px; }
#konto.in-sec { position: relative; z-index: 2; padding-top: 0;
                margin-top: clamp(-190px, -15vh, -110px); }

.in-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.in-acc-col { background: var(--in-surface, #fff); border: 1px solid var(--color-border, #C6C4D8);
              border-radius: var(--radius-lg, 12px); padding: 34px 36px; }
html body .in-acc-col h2 { line-height: 1.2; margin: 0 0 10px; }
.in-acc-lead { font-size: 15px; line-height: 1.6; color: var(--color-text-muted, #413B4D); margin: 0 0 26px; }

.in-acc-f { margin-bottom: 22px; }
/* `:not(.in-acc-chk)` — zgoda RODO to zdanie, nie etykieta pola; bez tego
   łapała wersaliki i rozstrzelenie i była nieczytelna */
.in-acc-f > label:not(.in-acc-chk) { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em;
                    text-transform: uppercase; color: var(--color-text-muted, #413B4D); margin-bottom: 8px; }
.in-acc-f > label span { color: var(--brand-primary, #643B81); }
.in-acc-f input[type="text"], .in-acc-f input[type="email"], .in-acc-f input[type="password"] {
    width: 100%; font-family: inherit; font-size: 16px; padding: 10px 2px;
    border: 0; border-bottom: 1px solid rgba(11,18,32,.28); border-radius: 0;
    background: transparent; color: var(--color-text, #0B1220);
    transition: border-color .25s ease; }
.in-acc-f input:focus { outline: none; border-bottom-color: var(--brand-primary, #643B81);
                        border-bottom-width: 2px; padding-bottom: 9px; }
/* oko podglądu hasła siedzi NA kresce pola, nie obok — inaczej pole gubi rytm
   pozostałych i kreska urywa się przed prawą krawędzią */
.in-acc-pass { position: relative; display: block; }
.in-acc-pass input { padding-right: 40px; }
.in-acc-eye { position: absolute; right: 0; bottom: 4px; width: 32px; height: 32px;
              display: grid; place-items: center; border: 0; background: none; cursor: pointer;
              border-radius: 999px; color: var(--color-text-muted, #413B4D); }
.in-acc-eye:hover { color: var(--brand-primary, #643B81); }
.in-acc-eye svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6;
                  stroke-linecap: round; stroke-linejoin: round; }
.in-acc-eye[aria-pressed="true"] svg { opacity: .5; }

.in-acc-note { font-size: 14px; line-height: 1.6; color: var(--color-text-muted, #413B4D); margin: -12px 0 22px; }
.in-acc-rodo { margin-bottom: 24px; }
.in-acc-chk { display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
              font-size: 13px; line-height: 1.5; font-weight: 400; letter-spacing: 0;
              text-transform: none; color: var(--color-text-muted, #413B4D); }
.in-acc-chk input { width: auto; flex: 0 0 auto; margin-top: 2px; accent-color: var(--brand-primary, #643B81); }

.in-acc-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.in-acc-btn { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; border: 0;
              min-height: 48px; padding: 6px 6px 6px 22px; border-radius: 999px;
              font-family: inherit; font-size: 14px; font-weight: 600;
              background: var(--brand-primary, #643B81); color: var(--brand-on-primary, #fff); }
.in-acc-arrow { flex: none; width: 36px; height: 36px; display: grid; place-items: center;
                border-radius: 50%; background: #fff; color: var(--brand-primary, #643B81);
                transition: transform .3s ease; }
.in-acc-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9;
                    stroke-linecap: round; stroke-linejoin: round; display: block; }
.in-acc-btn:is(:hover, :focus-visible) .in-acc-arrow { transform: translateX(3px); }

.in-acc-msg { margin: 18px 0 0; font-size: 14px; line-height: 1.6;
              color: var(--brand-primary, #643B81); }
.in-acc-link { margin: 18px 0 0; font-size: 14px; }
.in-acc-link a { color: var(--brand-primary, #643B81); }

@media (max-width: 900px) {
  .in-acc { grid-template-columns: 1fr; gap: 20px; }
  .in-acc-col { padding: 26px 22px; }
}