/* ============================================================
   ACCOUNT.CSS — strony konta (logowanie / rejestracja / reset
   hasła) wg makiety. Słownik komponentów (.kform / .kf / .kf-check
   z kontaktu, .reg-* z rejestracji) zmapowany 1:1 z
   makieta-nowe-figurydeco/rejestracja.html + styles.css; wartości
   przepisane na tokeny (tokens.css). Nagłówek strony reużywa
   .cat-lead/.breadcrumb/.eyebrow (category.css), przyciski .btn
   (base.css). Sekcja .errpage = error/not_found (404 i pusty
   koszyk — OC renderuje wtedy ten sam szablon).
   Ładowane globalnie z common/header.twig (jak pozostałe moduły).
   ============================================================ */

/* --- lead nad formularzem (wariant .cat-lead) --- */
.reg-lead { padding-bottom: 8px; }
.reg-lead .cat-lead__intro a,
.reg-lead__login {
    color: var(--accent-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

/* --- układ: formularz + lepki aside --- */
.reg { padding: 50px 0 80px; }
.reg__grid {
    display: grid;
    grid-template-columns: 1.25fr 0.85fr;
    gap: 48px;
    align-items: start;
}
.reg__aside {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================================================
   FORMULARZ (.kform — karta, .kf — pojedyncze pole)
   ============================================================ */
.kform {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 40px;
}
.kform__sub { font-size: 14px; color: var(--ink-2); margin: 0 0 24px; }
.kform__sub span { color: #d04848; }

.kform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kform__row--3 { grid-template-columns: 2fr 1fr; }

.kform__section + .kform__section {
    margin-top: 22px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.kform__legend {
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 16px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.kform__legend-opt {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.kform__hint {
    font-size: 12px;
    color: var(--ink-3);
    margin: -6px 0 0;
    line-height: 1.5;
}

.kf {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.kf > span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
}
.kf input,
.kf textarea,
.kf select {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--sans);
    background: var(--bg-card);
    color: var(--ink);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.kf input:focus, .kf textarea:focus, .kf select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(147, 173, 63, .12);
}
.kf textarea { resize: vertical; min-height: 120px; }

/* link pomocniczy przy polu (np. „Nie pamiętasz hasła?") */
.kf__aside {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
}
.kf__aside a {
    color: var(--accent-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* błąd walidacji pod polem (markup OC: .text-danger) */
.kform .text-danger {
    color: #a23333;
    font-size: 12px;
    line-height: 1.4;
}

.kf-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
    cursor: pointer;
    margin: 14px 0;
}
.kf-check input[type="checkbox"],
.kf-check input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent);
    flex-shrink: 0;
}
.kf-check a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.kf-check .req { color: #d04848; font-weight: 600; }
.kf-check b, .kf-check strong { color: var(--accent-dark); }

.reg-form__submit { width: 100%; justify-content: center; margin-top: 8px; }
.reg-form__alt {
    text-align: center;
    font-size: 13px;
    color: var(--ink-2);
    margin-top: 16px;
}
.reg-form__alt a {
    color: var(--accent-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================
   ASIDE — karty korzyści / pomocy
   ============================================================ */
.reg-card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
}
.reg-card--accent { background: var(--accent-soft); border-color: transparent; }
.reg-card__title {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.15;
}

.reg-benefits {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.reg-benefits li {
    position: relative;
    padding-left: 30px;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.5;
}
.reg-benefits li strong { color: var(--accent-dark); }
.reg-benefits li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.reg-card .btn { margin-top: 18px; width: 100%; justify-content: center; }

/* etykieta/CTA z kart kontaktu (.kinfo) używane w .reg-help */
.kinfo__label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
    display: block;
}
.kinfo__cta {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.reg-help .kinfo__label { margin-bottom: 6px; }
.reg-help .reg-card__title { font-size: 22px; display: block; margin-bottom: 8px; }
.reg-help p { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin: 0 0 12px; }

.reg-secure {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.5;
    padding: 0 4px;
}
.reg-secure svg { color: var(--accent-dark); flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   ALERTY (sukces logowania/resetu, błędy) — bez Bootstrap CSS
   ============================================================ */
.account-page .alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    margin: 0 0 22px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink-2);
    background: var(--bg-soft);
}
.account-page .alert-success { background: #eef6e3; border-color: #cfe3ad; color: #3f5d1c; }
.account-page .alert-danger  { background: #fbeaea; border-color: #f0c2c2; color: #a23333; }
.account-page .alert .fa { display: none; }

/* ============================================================
   ERROR / NOT FOUND (404 + pusty koszyk)
   ============================================================ */
.errpage { padding: 56px 0 90px; text-align: center; }
.errpage__text { font-size: 15px; color: var(--ink-2); margin: 0 0 28px; }

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */
@media (max-width: 980px) {
    .reg__grid { grid-template-columns: 1fr; gap: 30px; }
    .reg__aside { position: static; }
}
@media (max-width: 720px) {
    .kform { padding: 24px 18px; }
    .reg-card { padding: 22px; }
    .kform__row, .kform__row--3 { grid-template-columns: 1fr; }
}