/*
 * Визард /join — page-scoped стили (namespace .jn-)
 * Правила: каждый селектор под .jn-, без root-оверрайдов Bootstrap, без !important.
 * lk.css НЕ подключается на этой странице (layout lkBare) — токены объявлены локально.
 * Подключается через {{#section 'style'}} только из views/account/join.handlebars.
 * Цвета/отступы сверены построчно с docs/join-redesign-mockup.dc.html (артборды 1a-1d).
 */
:root {
    --jn-green-dark: #035A4B;
    --jn-green-soft: #E6F3ED;
    --jn-option-selected-bg: #F2FAF6;
    --jn-amber: #E8BB88;
    --jn-amber-fg: #3A2408;
    --jn-amber-warm-bg: #F8EFE0;
    --jn-amber-warm-border: #E5D6BE;
    --jn-amber-warm-icon: #8A5A22;
    --jn-amber-warm-title: #5A3A12;
    --jn-amber-warm-text: #6B4A22;
    --jn-danger-border: #EAD4DC;
    --jn-danger-bg: #FDF7F9;
    --jn-danger: #692340;
    --jn-dashed-green: #B8D6CB;
    --jn-border: #E7EAF3;
    --jn-text: #1A1A1A;
    --jn-muted: #51596C;
    --jn-muted-2: #7A7A7A;
    --jn-icon-muted: #A9AFB8;
    --jn-primary: #008060;
}

.jn-body { background: #fff; }

/* ---------- Каркас ---------- */
.jn-screen { display: flex; min-height: 100vh; background: #fff; }

/* ---------- Логотип в десктоп-сайдбаре (на мобильном — стандартная шапка сайта) ---------- */
.jn-brand { display: inline-flex; align-items: center; gap: 10px; }
.jn-brand-logo { height: 32px; width: auto; display: block; }

.jn-side { width: 400px; flex: none; background: var(--jn-green-dark); padding: 36px 32px; flex-direction: column; gap: 32px; }

.jn-stepper { display: flex; flex-direction: column; gap: 2px; }
.jn-step { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; transition: background-color .15s ease; }
.jn-step.is-active { background: rgba(255,255,255,0.10); }
.jn-step-icon { width: 30px; height: 30px; flex: none; border-radius: 8px; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.62); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.jn-step.is-done .jn-step-icon { background: rgba(255,255,255,0.22); color: #fff; }
.jn-step.is-active .jn-step-icon { background: var(--jn-amber); color: var(--jn-amber-fg); }
.jn-step-check { display: none; }
.jn-step.is-done .jn-step-number { display: none; }
.jn-step.is-done .jn-step-check { display: inline-flex; }
.jn-step-title { font-size: 15px; font-weight: 400; line-height: 1.35; color: rgba(255,255,255,0.62); }
.jn-step.is-done .jn-step-title { color: rgba(255,255,255,0.78); }
.jn-step.is-active .jn-step-title { color: #fff; font-weight: 700; }

.jn-side-compare { font-size: 13px; line-height: 1.5; color: var(--jn-amber); max-width: 300px; margin: 0; }
.jn-side-compare a { color: var(--jn-amber); text-decoration: none; }
.jn-side-compare a:hover { text-decoration: underline; }

.jn-side-authors { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.16); }
.jn-side-authors-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); margin: 0; }
.jn-side-author { display: flex; align-items: center; gap: 12px; }
.jn-side-author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.2); flex: none; }
.jn-side-author-name { font-size: 14px; font-weight: 700; color: #fff; }
.jn-side-author-meta { font-size: 12px; color: rgba(255,255,255,0.62); }
.jn-side-authors-link { font-size: 13px; color: var(--jn-amber); text-decoration: none; }
.jn-side-authors-link:hover { text-decoration: underline; }

.jn-side-illustration { flex: 1; display: flex; align-items: flex-end; }
.jn-side-illustration-box { width: 100%; display: flex; align-items: center; justify-content: center; }
.jn-side-illustration-box img { width: 150px; display: block; max-width: 100%; }

/* ---------- Контент ---------- */
.jn-main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 48px 56px 0; min-width: 0; }
.jn-col { width: 100%; max-width: 700px; display: flex; flex-direction: column; flex: 1; }
.jn-form { display: flex; flex-direction: column; flex: 1; padding-bottom: 32px; }

.jn-heading { display: flex; flex-direction: column; gap: 10px; }
.jn-photo-type-body { display: flex; flex-direction: column; gap: 20px; }
.jn-seller-body { display: flex; flex-direction: column; gap: 20px; }
.jn-heading-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jn-primary); }
.jn-heading h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; color: var(--jn-text); margin: 0; }
.jn-heading p { font-size: 15px; line-height: 1.6; color: var(--jn-muted); margin: 0; }
.jn-heading p a { font-weight: 700; }
.jn-heading-center { align-items: center; text-align: center; }
.jn-heading-center h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; color: var(--jn-text); margin: 0; }
.jn-heading-center p { max-width: 520px; }

.jn-step-content { display: flex; flex-direction: column; gap: 26px; }
.jn-step-content[hidden] { display: none; }
.jn-step-final { align-items: center; text-align: center; padding: 24px 0; }

/* ---------- Карточки-опции (radio) ---------- */
.jn-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jn-option-card { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 18px; border: 2px solid var(--jn-border); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.jn-option-card:hover { border-color: var(--jn-primary); }
.btn-check:focus + .jn-option-card { box-shadow: 0 0 0 3px rgba(0,128,96,0.12); }
.btn-check:checked + .jn-option-card { border-color: var(--jn-primary); background: var(--jn-option-selected-bg); }
.jn-option-card > .bi { font-size: 22px; line-height: 1.1; color: var(--jn-muted); flex: none; }
.btn-check:checked + .jn-option-card > .bi { color: var(--jn-primary); }
.jn-option-body { display: flex; flex-direction: column; gap: 4px; }
.jn-option-title { font-size: 16px; font-weight: 700; color: var(--jn-text); }
.jn-option-desc { font-size: 13px; line-height: 1.5; color: var(--jn-muted); }
.jn-option-check { display: none; margin-left: auto; font-size: 18px; color: var(--jn-primary); flex: none; }
.btn-check:checked + .jn-option-card .jn-option-check { display: inline-flex; }

/* ---------- Согласие ---------- */
.jn-consent { display: flex; gap: 12px; padding: 16px 18px; background: #F9FAFC; border: 1px solid var(--jn-border); border-radius: 10px; }
.jn-consent .form-check { display: flex; gap: 12px; margin: 0; }
.jn-consent .form-check-input { width: 20px; height: 20px; margin-top: 1px; flex: none; border: 1.5px solid var(--jn-icon-muted); border-radius: 4px; }
.jn-consent .form-check-label { font-size: 13px; line-height: 1.55; color: var(--jn-muted); }

/* ---------- Поля ---------- */
.jn-field { display: flex; flex-direction: column; gap: 6px; }
.jn-field-label { font-size: 13px; color: var(--jn-muted); }
.jn-required::after { content: "*"; color: var(--jn-danger); margin-left: 3px; }

/* ---------- Инфо-алерт (селлер) ---------- */
.jn-alert-soft { display: flex; gap: 12px; padding: 16px 18px; background: var(--jn-amber-warm-bg); border: 1px solid var(--jn-amber-warm-border); border-radius: 10px; }
.jn-alert-soft-icon { flex: none; font-size: 16px; color: var(--jn-amber-warm-icon); margin-top: 2px; }
.jn-alert-soft h4 { font-size: 14px; font-weight: 700; color: var(--jn-amber-warm-title); margin: 0 0 4px; }
.jn-alert-soft span { font-size: 13px; line-height: 1.55; color: var(--jn-amber-warm-text); }

/* ---------- Репитер «Публикация» ---------- */
.jn-repeater { display: flex; flex-direction: column; gap: 14px; }
.jn-pub-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--jn-border); border-radius: 12px; background: #fff; }
.jn-pub-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jn-pub-card-title { font-size: 15px; font-weight: 700; color: var(--jn-text); margin: 0; }
.jn-pub-remove { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--jn-danger-border); border-radius: 8px; background: #fff; color: var(--jn-danger); font-size: 13px; font-weight: 600; cursor: pointer; }
.jn-pub-card-body { display: flex; flex-direction: column; gap: 14px; }

.jn-inf-list { display: flex; flex-direction: column; gap: 8px; padding-left: 16px; border-left: 2px solid var(--jn-green-soft); }
.jn-inf-item { display: flex; flex-direction: column; gap: 6px; }
.jn-inf-row { display: flex; align-items: center; gap: 8px; }
.jn-inf-row .form-control { flex: 1; }
.jn-inf-remove { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--jn-danger-border); border-radius: 8px; background: #fff; color: var(--jn-danger); font-size: 15px; }
.jn-inf-remove:hover { background: var(--jn-danger-bg); }

.jn-repeater-error { display: flex; align-items: center; gap: 6px; margin-top: -6px; font-size: 13px; color: var(--jn-danger); }
.jn-repeater-error[hidden] { display: none; }

.jn-pub-add { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px dashed var(--jn-dashed-green); border-radius: 8px; background: #fff; font-size: 14px; font-weight: 700; color: var(--jn-primary); cursor: pointer; }
.jn-pub-add:hover { background: var(--jn-green-soft); }

.jn-inf-add { display: inline-flex; align-self: flex-start; align-items: center; height: 34px; padding: 0 12px; border: none; border-radius: 8px; background: var(--jn-green-soft); color: var(--jn-primary); font-size: 13px; font-weight: 700; cursor: pointer; }

/* ---------- Финальный экран ---------- */
.jn-final-illustration img { width: 230px; max-width: 100%; display: block; margin: 0 auto; }

/* ---------- Алерт (валидация / F-1) ---------- */
.jn-alert { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; margin-bottom: 4px; background: var(--jn-danger-bg); border: 1px solid var(--jn-danger-border); border-radius: 8px; }
.jn-alert[hidden] { display: none; }
.jn-alert i { color: var(--jn-danger); font-size: 15px; margin-top: 2px; }
.jn-alert-text { font-size: 14px; line-height: 1.5; color: var(--jn-danger); }

/* ---------- Действия ---------- */
.jn-actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: auto; padding-top: 24px; margin-left: -56px; margin-right: -56px; padding-left: 56px; padding-right: 56px; border-top: 1px solid var(--jn-border); }
.jn-back, .jn-next, .jn-submit { height: 44px; border-radius: 8px; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border: none; }
.jn-back { padding: 0 20px; border: 1px solid var(--jn-border); background: #fff; color: var(--jn-muted); font-weight: 600; }
.jn-back:hover { border-color: var(--jn-icon-muted); }
.jn-back[hidden] { display: none; }
.jn-gate-group { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.jn-gate-hint { font-size: 13px; color: var(--jn-icon-muted); }
.jn-gate-hint[hidden] { display: none; }
.jn-next, .jn-submit { padding: 0 26px; background: var(--jn-primary); color: #fff; font-weight: 700; }
.jn-next:hover, .jn-submit:hover { background: #006A50; }
.jn-next[hidden], .jn-submit[hidden] { display: none; }
.jn-next:disabled, .jn-next.disabled { background: #D8E4DF; color: #8EA39B; cursor: not-allowed; }
.jn-submit-progress[hidden] { display: none; }
.jn-submit:disabled { opacity: 0.85; cursor: default; }

/* ---------- Футер ---------- */
.jn-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; font-size: 13px; color: var(--jn-muted-2); padding: 16px 0 20px; }
.jn-footer a { color: var(--jn-muted); }
.jn-footer span { color: #C2C2C2; }

/* ---------- Mobile (< lg) ---------- */
@media (max-width: 991.98px) {
    .jn-screen { flex-direction: column; }
    .jn-main { padding: 20px 16px 0; }
    .jn-heading h2 { font-size: 22px; }
    .jn-heading-center h1 { font-size: 24px; }
    .jn-option-grid { grid-template-columns: 1fr; gap: 10px; }
    .jn-option-card { padding: 16px; min-height: 48px; box-sizing: border-box; }
    .jn-option-card > .bi { font-size: 20px; }
    .jn-option-check { font-size: 17px; }
    .jn-actions { position: sticky; bottom: 0; background: #fff; margin-left: -16px; margin-right: -16px; padding: 14px 16px; gap: 10px; }
    .jn-back { flex: none; height: 48px; }
    .jn-next, .jn-submit { flex: 1; justify-content: center; height: 48px; font-size: 16px; }
    .jn-gate-group { flex: 1; justify-content: flex-end; }
    .jn-gate-hint { display: none; }
    .jn-footer { flex-direction: column; gap: 4px; padding: 14px 0 18px; }
}

@media (min-width: 992px) {
    .jn-screen { min-height: 100vh; }
}