/* فرم ثبت آگهی سه‌مرحله‌ای */
.kw { max-width: 520px; margin: 24px auto 40px; padding: 0 4px; color: var(--text, #2c2c30); font-size: 14px; }
.kw *, .kw *::before, .kw *::after { box-sizing: border-box; }
.kw-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.kw-head h1 { margin: 0; font-size: 22px; font-weight: 800; }
.kw-reset { height: 36px; padding: 0 14px; border: 1px solid var(--line, #e4e4e7); border-radius: 8px; background: var(--card, #fff); color: inherit; font: inherit; cursor: pointer; }
.kw-reset:hover { border-color: var(--red, #a62626); color: var(--red, #a62626); }
.kw-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.kw-progress i { height: 3px; border-radius: 3px; background: var(--line, #e4e4e7); }
.kw-progress i.is-on { background: var(--red, #a62626); }
.kw-step-label { margin: 0 0 14px; font-size: 13px; color: var(--muted, #555); }
.kw-error { margin-bottom: 14px; padding: 10px 14px; border-radius: 8px; background: var(--red-soft, #fbeeee); color: var(--red, #a62626); }
.kw-error[hidden], .kw [hidden] { display: none !important; }

.kw-label { display: block; margin: 16px 0 6px; font-weight: 600; }
.kw-label b { color: var(--red, #a62626); }
.kw-input { width: 100%; min-height: 44px; padding: 8px 12px; font: inherit; color: inherit; background: var(--card, #fff); border: 1px solid var(--line, #e4e4e7); border-radius: 8px; }
.kw-input:focus { outline: none; border-color: var(--red, #a62626); box-shadow: 0 0 0 3px var(--red-soft, #fdf1f1); }
.kw-textarea { min-height: 140px; resize: vertical; }
.kw-hint { margin: 6px 0 0; font-size: 12px; color: var(--muted, #555); }
.kw-title { margin: 26px 0 4px; font-size: 17px; font-weight: 800; }
.kw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kw-ai { margin: 6px 0; padding: 8px 12px; border-radius: 8px; background: var(--red-soft, #fbeeee); color: var(--red, #a62626); font-size: 13px; }
.kw-crumb { margin: 4px 0 0; font-size: 13px; color: var(--muted, #555); }

.kw-uploader { display: flex; flex-wrap: wrap; gap: 10px; }
.kw-add { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; border: 1.5px dashed #c8c8cd; border-radius: 8px; color: #333; cursor: pointer; background: var(--card, #fff); }
.kw-add:hover { border-color: var(--red, #a62626); }
.kw-previews { display: contents; }
.kw-thumb { position: relative; width: 112px; height: 112px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line, #e4e4e7); }
.kw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kw-thumb button { position: absolute; top: 4px; inset-inline-start: 4px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(30,30,34,.8); color: #fff; cursor: pointer; line-height: 24px; }
.kw-thumb span { position: absolute; bottom: 0; inset-inline: 0; background: var(--red, #a62626); color: var(--on-red, #fff); font-size: 11px; text-align: center; }

.kw-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.kw-checks label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.kw-checks input, .kw-agree input { accent-color: var(--red, #a62626); width: 18px; height: 18px; }
.kw-agree { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; cursor: pointer; }

.kw-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 28px; border: 1px solid var(--red, #a62626); border-radius: 8px; background: var(--red, #a62626); color: var(--on-red, #fff); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.kw-btn:hover { background: var(--red-dark, #8a1e1e); border-color: var(--red-dark, #8a1e1e); color: var(--on-red, #fff); }
.kw-btn:disabled { opacity: .55; cursor: wait; }
.kw-btn--block { width: 100%; margin-top: 22px; }
.kw-btn--ghost { background: var(--card, #fff); color: inherit; border-color: var(--line, #e4e4e7); }
.kw-btn--ghost:hover { background: var(--red-soft, #fbeeee); color: var(--red, #a62626); border-color: var(--red, #a62626); }
.kw-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.kw-actions .kw-btn { flex: 1; }

.kw-user { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line, #e4e4e7); border-radius: 8px; }
.kw-user img { border-radius: 50%; }
.kw-user strong { display: block; }
.kw-user span { font-size: 12px; color: var(--muted, #555); }
.kw-summary { margin: 8px 0 0; border-top: 1px solid var(--line, #e4e4e7); }
.kw-summary div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line, #e4e4e7); }
.kw-summary dt { color: var(--muted, #555); }
.kw-summary dd { margin: 0; font-weight: 600; text-align: end; }

.kw-done { text-align: center; padding-top: 30px; }
.kw-done h1 { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.kw-done__icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--red-soft, #fbeeee); color: var(--red, #a62626); font-size: 30px; line-height: 64px; }
.kw-done .kw-btn { margin: 6px 4px; }
@media (max-width: 480px) { .kw-grid { grid-template-columns: 1fr; } }

.kw-login h1 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.kw-lead { margin: 0 0 12px; }
.kw-center { text-align: center; }
.kw-center a { color: var(--red, #a62626); }
.kw-login .kw-agree { margin-top: 14px; }