/* WEB-2: catalog, template page, AI wizard, orders, payment result. */

/* ---------- Shared bits ---------- */
.kl-catalog { padding-block: var(--kl-space-6) var(--kl-space-8); }
.kl-page-head { margin-bottom: var(--kl-space-4); }
.kl-page-head h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); margin-bottom: .3rem; }
.kl-page-head p { color: var(--kl-muted); max-width: 46rem; }
.kl-crumbs { margin-bottom: var(--kl-space-3); font-size: .9rem; }
.kl-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; padding: 0; margin: 0; }
.kl-crumbs li + li::before { content: "‹"; margin-inline-end: .5rem; color: var(--kl-muted); }
.kl-crumbs a { color: var(--kl-caramel-text); text-decoration: none; }
.kl-crumbs a:hover { text-decoration: underline; }
.kl-crumbs [aria-current] { color: var(--kl-muted); }
.kl-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; padding: .1rem .6rem; border-radius: var(--kl-radius-pill); }
.kl-chip.amber { background: #fdf0d8; color: #7a4a0a; }
.kl-chip.teal { background: #e0f0ee; color: var(--kl-teal-text); }
.kl-chip.green { background: #e1f4ea; color: #14633c; }
.kl-chip.red { background: #fdecea; color: #8a1a13; }
.kl-chip.gray { background: #eceae4; color: #4a4f60; }
.kl-chip.navy { background: #e4e7f3; color: var(--kl-navy); }

/* Search */
.kl-search { position: relative; max-width: 40rem; display: flex; align-items: center; margin-top: var(--kl-space-4); }
.kl-search > i.bi-search { position: absolute; inset-inline-start: 1rem; color: var(--kl-muted); pointer-events: none; }
.kl-search .form-control { padding-inline-start: 2.8rem; padding-inline-end: 2.8rem; border-radius: var(--kl-radius-pill); height: 3.1rem; }
.kl-search .kl-icon-btn { position: absolute; inset-inline-end: .35rem; }

/* Category tree cards */
.kl-cat-tree { padding: 0; gap: 0; overflow: hidden; }
.kl-cat-main { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem; color: inherit; text-decoration: none; flex: 1; }
.kl-sub-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0 1.1rem 1rem; }
.kl-sub-chips a, a.chip-link { display: inline-block; font-size: .82rem; padding: .2rem .7rem; border-radius: var(--kl-radius-pill); background: var(--kl-cream); color: var(--kl-navy); text-decoration: none; border: 1px solid var(--kl-line); }
.kl-sub-chips a:hover, a.chip-link:hover { background: var(--kl-navy); color: var(--kl-cream); }
.kl-sub-chips a.more { background: transparent; color: var(--kl-muted); }

/* Template cards */
.kl-tpl-card { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.1rem; background: #fff; border-radius: var(--kl-radius-lg); box-shadow: var(--kl-shadow-sm); color: var(--kl-ink); text-decoration: none; border: 1px solid transparent; transition: transform .25s var(--kl-ease), box-shadow .25s var(--kl-ease), border-color .25s; }
.kl-tpl-card:hover { transform: translateY(-5px); box-shadow: var(--kl-shadow-lg); border-color: var(--kl-amber); color: var(--kl-ink); }
.kl-tpl-top { display: flex; gap: .4rem; min-height: 1.5rem; }
.kl-tpl-card h3 { font-size: 1.02rem; margin: 0; }
.kl-tpl-card p { color: var(--kl-muted); font-size: .9rem; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kl-tpl-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .3rem; }
.kl-tpl-price { font-weight: 800; color: var(--kl-navy); }
.kl-tpl-go { color: var(--kl-caramel-text); font-weight: 700; font-size: .88rem; }
.kl-tpl-card:hover .kl-tpl-go i { transform: translateX(-4px); }
.kl-tpl-go i { display: inline-block; transition: transform .2s; }

.kl-ai-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--kl-navy); color: var(--kl-cream); border-radius: var(--kl-radius-lg); padding: 1.4rem 1.6rem; }
.kl-ai-banner h2, .kl-ai-banner p { color: var(--kl-cream); }

/* ---------- Template page ---------- */
.kl-tpl-layout { display: grid; gap: var(--kl-space-5); grid-template-columns: 1fr; }
@media (min-width: 992px) { .kl-tpl-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.kl-panel { background: #fff; border-radius: var(--kl-radius-lg); box-shadow: var(--kl-shadow-sm); padding: var(--kl-space-5); }
.kl-panel h2 { font-size: 1.1rem; }
.kl-field { margin-bottom: var(--kl-space-4); }
.kl-field .req { color: var(--kl-danger); }
.kl-money { position: relative; }
.kl-money .form-control { padding-inline-end: 4.2rem; text-align: start; }
.kl-money .unit { position: absolute; inset-block: 0; inset-inline-end: .9rem; display: flex; align-items: center; color: var(--kl-muted); font-size: .88rem; pointer-events: none; }
.kl-preview { position: sticky; top: calc(var(--kl-header-h) + 1rem); }
.kl-preview-paper { background: #fffdf8; border: 1px solid var(--kl-line); border-radius: var(--kl-radius); padding: 1.2rem 1.3rem; min-height: 14rem; max-height: 60vh; overflow: auto; white-space: pre-wrap; line-height: 2; font-size: .98rem; box-shadow: inset 0 0 0 .3rem #fff; }
.kl-preview-paper .blank { color: var(--kl-caramel-text); background: #fdf0d8; border-radius: .25rem; padding: 0 .2rem; }
.kl-preview-paper .filled { background: #e8f3f2; border-radius: .25rem; padding: 0 .15rem; }
.kl-submit-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: var(--kl-space-4); padding-top: var(--kl-space-4); border-top: 1px solid var(--kl-line); }
.kl-submit-bar .price { font-size: 1.25rem; font-weight: 800; color: var(--kl-navy); }

/* Checkout */
.kl-pay-options { display: grid; gap: .7rem; margin: var(--kl-space-4) 0; }
.kl-pay-option { display: flex; gap: .8rem; align-items: flex-start; border: 2px solid var(--kl-line); border-radius: var(--kl-radius); padding: .85rem 1rem; background: #fff; cursor: pointer; transition: border-color .15s, background-color .15s; }
.kl-pay-option:hover { border-color: var(--kl-amber); }
.kl-pay-option.selected { border-color: var(--kl-navy); background: #f4f5fb; }
.kl-pay-option.disabled { opacity: .55; cursor: not-allowed; }
.kl-pay-option input { margin-top: .45rem; accent-color: var(--kl-navy); }
.kl-pay-option strong { display: block; }
.kl-pay-option small { color: var(--kl-muted); }
.kl-summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.kl-summary-row.total { border-top: 1px dashed var(--kl-line); margin-top: .3rem; padding-top: .6rem; font-weight: 800; }

/* ---------- AI wizard ---------- */
.kl-steps { list-style: none; display: flex; gap: .4rem; padding: 0; margin: 0 0 var(--kl-space-5); counter-reset: s; }
.kl-steps li { flex: 1; text-align: center; font-size: .82rem; color: var(--kl-muted); position: relative; padding-top: 2.4rem; font-weight: 700; }
.kl-steps li::before { counter-increment: s; content: counter(s, persian); position: absolute; top: 0; inset-inline: 0; margin: auto; width: 2rem; height: 2rem; border-radius: 50%; background: var(--kl-line); color: var(--kl-navy); display: grid; place-items: center; transition: background-color .2s, color .2s; }
.kl-steps li.current { color: var(--kl-navy); }
.kl-steps li.current::before { background: var(--kl-navy); color: var(--kl-cream); box-shadow: 0 0 0 .25rem rgba(232, 172, 85, .5); }
.kl-steps li.done::before { background: var(--kl-teal); color: #fff; content: "✓"; }
.kl-wizard-nav { display: flex; justify-content: space-between; gap: .6rem; margin-top: var(--kl-space-5); flex-wrap: wrap; }
.kl-tips { background: #eaf4f3; border-radius: var(--kl-radius); padding: .8rem 1rem; font-size: .92rem; color: #1d4f4b; margin-top: .8rem; }
.kl-tips ul { margin: .3rem 0 0; padding-inline-start: 1.2rem; }
.kl-cat-pick { display: grid; gap: .5rem; max-height: 22rem; overflow: auto; }
.kl-cat-pick button { text-align: start; border: 2px solid var(--kl-line); background: #fff; border-radius: var(--kl-radius); padding: .6rem .9rem; display: flex; gap: .6rem; align-items: center; }
.kl-cat-pick button:hover { border-color: var(--kl-amber); }
.kl-cat-pick button.selected { border-color: var(--kl-navy); background: #f4f5fb; }
.kl-dropzone { position: relative; border: 2.5px dashed #cfc3ad; border-radius: var(--kl-radius-lg); background: #fffdf8; padding: 2rem 1rem; text-align: center; transition: border-color .15s, background-color .15s; }
.kl-dropzone.over, .kl-dropzone:focus-within { border-color: var(--kl-navy); background: #f4f5fb; }
.kl-dropzone i.big { font-size: 2.2rem; color: var(--kl-caramel-text); }
.kl-dropzone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.kl-dropzone.full { opacity: .55; }
.kl-dropzone.full input[type=file] { cursor: not-allowed; }
.kl-files { list-style: none; padding: 0; margin: var(--kl-space-3) 0 0; display: grid; gap: .5rem; }
.kl-file { display: flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid var(--kl-line); border-radius: var(--kl-radius); padding: .55rem .8rem; }
.kl-file .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; unicode-bidi: plaintext; }
.kl-file .bar { height: .3rem; background: var(--kl-line); border-radius: 1rem; overflow: hidden; margin-top: .25rem; }
.kl-file .bar > span { display: block; height: 100%; background: var(--kl-teal); transition: width .2s; }
.kl-file .bar.busy > span { width: 40%; animation: kl-indet 1s ease-in-out infinite alternate; }
@keyframes kl-indet { from { margin-inline-start: 0; } to { margin-inline-start: 60%; } }
.kl-file.bad { border-color: #f2b8b5; background: #fdf6f5; }

/* ---------- Orders ---------- */
.kl-order-row { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: center; background: #fff; border-radius: var(--kl-radius); padding: .9rem 1.1rem; box-shadow: var(--kl-shadow-sm); text-decoration: none; color: var(--kl-ink); border: 1px solid transparent; transition: border-color .2s, transform .2s; }
.kl-order-row:hover { border-color: var(--kl-amber); transform: translateY(-2px); color: var(--kl-ink); }
.kl-order-row .meta { color: var(--kl-muted); font-size: .85rem; grid-column: 1 / -1; display: flex; gap: .8rem; flex-wrap: wrap; }
.kl-result-paper { background: #fffdf8; border: 1px solid var(--kl-line); border-radius: var(--kl-radius); padding: 1.4rem 1.5rem; white-space: pre-wrap; line-height: 2.1; font-size: 1rem; }
.kl-result-paper.masked { position: relative; }
.kl-timeline { display: flex; align-items: center; gap: .6rem; background: #f4f5fb; border-radius: var(--kl-radius); padding: .9rem 1.1rem; }
.kl-pager { display: flex; gap: .5rem; justify-content: center; align-items: center; margin-top: var(--kl-space-5); }

/* ---------- Payment result ---------- */
.kl-pay-result { max-width: 34rem; margin: 0 auto; text-align: center; background: #fff; border-radius: var(--kl-radius-lg); box-shadow: var(--kl-shadow-lg); padding: var(--kl-space-6) var(--kl-space-5); border-top: .35rem solid var(--kl-line); }
.kl-pay-result.paid { border-top-color: var(--kl-success); }
.kl-pay-result.failed { border-top-color: var(--kl-danger); }
.kl-pay-result.pending { border-top-color: var(--kl-amber); }
.kl-pay-result .icon { font-size: 3.4rem; line-height: 1; }
.kl-pay-result.paid .icon { color: var(--kl-success); }
.kl-pay-result.failed .icon { color: var(--kl-danger); }
.kl-pay-result.pending .icon { color: var(--kl-amber-600); }
.kl-pay-result .actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: var(--kl-space-4); }

@media (prefers-reduced-motion: reduce) {
  .kl-tpl-card, .kl-order-row, .kl-file .bar > span { transition: none; }
  .kl-file .bar.busy > span { animation: none; width: 100%; }
}

/* AI wizard review */
.kl-review { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; margin: 0 0 var(--kl-space-4); }
.kl-review dt { color: var(--kl-muted); font-weight: 600; }
.kl-review dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kl-review-desc { white-space: pre-wrap; max-height: 12rem; overflow: auto; background: #fffdf8; border: 1px solid var(--kl-line); border-radius: var(--kl-radius-sm); padding: .6rem .8rem; }
@media (max-width: 480px) { .kl-review { grid-template-columns: 1fr; gap: .1rem; } .kl-review dd { margin-bottom: .6rem; } }
.min-w-0 { min-width: 0; }

/* Orders history */
.kl-filters { display: grid; gap: .7rem; }
.kl-chip-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.kl-filter-chip { border: 1.5px solid var(--kl-line); background: #fff; color: var(--kl-navy); border-radius: var(--kl-radius-pill); padding: .25rem .9rem; font-size: .88rem; font-weight: 600; transition: background-color .15s, border-color .15s; }
.kl-filter-chip:hover { border-color: var(--kl-amber); }
.kl-filter-chip.active { background: var(--kl-navy); color: var(--kl-cream); border-color: var(--kl-navy); }
.kl-filter-line { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.kl-filter-line .kl-search { margin-top: 0; min-width: 14rem; max-width: none; }
.kl-outputs-switch { white-space: nowrap; }
.kl-order-card { background: #fff; border-radius: var(--kl-radius); box-shadow: var(--kl-shadow-sm); overflow: hidden; }
.kl-order-card .kl-order-row { box-shadow: none; border-radius: 0; }
.kl-order-actions { display: flex; gap: .4rem; flex-wrap: wrap; padding: 0 1.1rem .8rem; }
.kl-order-actions .btn { padding: .2rem .8rem; }