/* Kanraul Kauswagan Konek — marketplace styles (builds on style.css tokens) */
:root { --kk: #0f9d58; --kk-d: #0b7a44; --kk-soft: #e7f7ee; --kk-ink: #0a3d24; }

.kk-hero { background: linear-gradient(135deg, #0f9d58, #0b7a44); color: #fff; padding: 3.25rem 1.25rem 3rem; }
.kk-hero-in { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 2.5rem; }
.kk-hero-copy { flex: 1 1 460px; }
.kk-hero-art { flex: 1 1 380px; display: flex; justify-content: center; }
.kk-hero-art img { width: 100%; max-width: 480px; height: auto; }
.kk-pill { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .35rem .85rem; border-radius: 999px; margin-bottom: 1.1rem; }
.kk-hero h1 { font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .4rem; line-height: 1.05; }
.kk-hero .tag { font-size: clamp(1rem, 2.3vw, 1.3rem); color: #e4f7ec; margin: 0 0 1.6rem; }
.kk-cta-row { display: flex; gap: .8rem; flex-wrap: wrap; }
@media (max-width: 820px) {
    .kk-hero-in { flex-direction: column; text-align: center; gap: 1.5rem; }
    .kk-hero-copy { flex-basis: auto; }
    .kk-cta-row { justify-content: center; }
    .kk-hero-art { order: -1; }
    .kk-hero-art img { max-width: 300px; }
}
.kk-btn { display: inline-block; background: #fff; color: var(--kk-d); font-weight: 800; padding: .8rem 1.5rem; border-radius: 8px; text-decoration: none; border: 0; cursor: pointer; font-size: 1rem; }
.kk-btn:hover { background: #f0fff6; }
.kk-btn--outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.7); }
.kk-btn--outline:hover { background: rgba(255,255,255,.12); }
.kk-btn--solid { background: var(--kk); color: #fff; }
.kk-btn--solid:hover { background: var(--kk-d); }

.kk-wrap { max-width: var(--wrap, 1180px); margin: 0 auto; padding: 2.5rem 1.25rem; }
.kk-sec { padding: 1rem 0 2.5rem; }
.kk-sec h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--ink, #161a22); margin: 0 0 .5rem; letter-spacing: -.01em; }
.kk-sec .lead { color: var(--muted, #5c6673); max-width: 66ch; line-height: 1.7; margin: 0 0 1.5rem; }

.kk-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.kk-step { background: #fff; border: 1px solid var(--line, #e3e8ef); border-radius: 12px; padding: 1.4rem; }
.kk-step .n { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; background: var(--kk-soft); color: var(--kk-d); font-weight: 800; border-radius: 999px; margin-bottom: .7rem; }
.kk-step h3 { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--ink, #161a22); }
.kk-step p { margin: 0; color: var(--muted, #5c6673); line-height: 1.6; font-size: .95rem; }

.kk-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.kk-cat { background: #fff; border: 1px solid var(--line, #e3e8ef); border-radius: 12px; padding: 1.4rem; border-top: 3px solid var(--kk); }
.kk-cat h3 { margin: 0 0 .6rem; color: var(--kk-ink); }
.kk-cat ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft, #2a3340); line-height: 1.7; }

.kk-note { background: var(--kk-soft); border: 1px solid #bfe6cf; border-radius: 12px; padding: 1.25rem 1.4rem; color: var(--kk-ink); }
.kk-note strong { color: var(--kk-d); }

/* forms */
.kk-form { max-width: 620px; background: #fff; border: 1px solid var(--line, #e3e8ef); border-radius: 12px; padding: 1.75rem; box-shadow: var(--shadow-sm, 0 4px 14px rgba(16,24,40,.06)); }
.kk-field { margin-bottom: 1.1rem; }
.kk-field label { display: block; font-weight: 700; color: var(--ink, #161a22); margin-bottom: .35rem; font-size: .95rem; }
.kk-field .hint { color: var(--muted, #5c6673); font-size: .85rem; font-weight: 400; }
.kk-field input, .kk-field select, .kk-field textarea { width: 100%; padding: .65rem .75rem; border: 1px solid var(--line, #e3e8ef); border-radius: 8px; font-size: 1rem; font-family: inherit; }
.kk-field input:focus, .kk-field select:focus, .kk-field textarea:focus { outline: none; border-color: var(--kk); box-shadow: 0 0 0 3px rgba(15,157,88,.15); }
.kk-checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.kk-check { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line, #e3e8ef); border-radius: 999px; padding: .35rem .8rem; cursor: pointer; font-size: .9rem; user-select: none; }
.kk-check input { width: auto; margin: 0; }
.kk-check:has(input:checked) { background: var(--kk-soft); border-color: var(--kk); color: var(--kk-d); font-weight: 600; }
.kk-check--inline { font-size: .95rem; }
.kk-fieldset { border: 1px solid var(--line, #e3e8ef); border-radius: 10px; padding: 1.1rem 1.25rem 1.25rem; margin: 0 0 1.1rem; }
.kk-fieldset legend { font-weight: 800; color: var(--kk-d); padding: 0 .4rem; font-size: .98rem; }
.kk-fieldset .kk-note { padding: .8rem 1rem; font-size: .9rem; margin-bottom: 1rem; }
.kk-fieldset .kk-field:last-child { margin-bottom: 0; }
.kk-hp { position: absolute; left: -9999px; }
.kk-msg { padding: .85rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.kk-msg.err { background: #fdecec; border: 1px solid #f5b5b5; color: #b42318; }
.kk-msg.ok { background: var(--kk-soft); border: 1px solid #bfe6cf; color: var(--kk-d); }

/* directory + cards */
.kk-filters { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.kk-filters select { padding: .55rem .7rem; border: 1px solid var(--line, #e3e8ef); border-radius: 8px; font-size: .95rem; }
.kk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.kk-card { background: #fff; border: 1px solid var(--line, #e3e8ef); border-radius: 12px; padding: 1.3rem; }
.kk-card h3 { margin: 0 0 .2rem; color: var(--ink, #161a22); font-size: 1.1rem; }
.kk-card .meta { color: var(--muted, #5c6673); font-size: .9rem; margin-bottom: .6rem; }
.kk-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0; }
.kk-tag { background: var(--soft, #f4f6fa); border-radius: 6px; padding: .2rem .55rem; font-size: .8rem; color: var(--ink-soft, #2a3340); }
.kk-badge { display: inline-flex; align-items: center; gap: .3rem; background: var(--kk-soft); color: var(--kk-d); font-weight: 700; font-size: .78rem; padding: .2rem .55rem; border-radius: 6px; }
.kk-badge--verified { background: var(--kk); color: #fff; box-shadow: 0 1px 3px rgba(15,157,88,.3); }
.kk-card--verified { border-color: var(--kk); box-shadow: 0 0 0 1px var(--kk), 0 4px 14px rgba(15,157,88,.1); }
.kk-stars { color: #f5a623; font-weight: 700; }
.kk-empty { color: var(--muted, #5c6673); padding: 2rem 0; text-align: center; }

/* reviews modal */
.rv-modal { position: fixed; inset: 0; background: rgba(16,24,40,.55); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 1rem; z-index: 1000; overflow-y: auto; }
.rv-box { background: #fff; border-radius: 16px; max-width: 520px; width: 100%; padding: 1.5rem 1.6rem; position: relative; box-shadow: 0 20px 60px rgba(16,24,40,.35); }
.rv-close { position: absolute; top: .5rem; right: .8rem; background: none; border: 0; font-size: 1.9rem; line-height: 1; color: var(--muted, #5c6673); cursor: pointer; }
.rv-box h3 { margin: 0 1.5rem .4rem 0; color: var(--ink, #161a22); font-size: 1.2rem; }
.rv-summary { color: var(--kk-d); font-weight: 600; margin-bottom: .8rem; }
.rv-list { display: flex; flex-direction: column; gap: .6rem; max-height: 40vh; overflow-y: auto; }
.rv-item { border: 1px solid var(--line, #e3e8ef); border-radius: 10px; padding: .6rem .8rem; }
.rv-item-top { display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
.rv-item-stars { color: #f5a623; letter-spacing: 1px; }
.rv-item p { margin: .3rem 0 0; color: var(--ink-soft, #2a3340); font-size: .92rem; line-height: 1.5; }
.rv-formwrap { margin-top: 1rem; border-top: 1px solid var(--line, #e3e8ef); padding-top: 1rem; }
.rv-formwrap h4 { margin: 0 0 .6rem; color: var(--ink, #161a22); }
.rv-formwrap input, .rv-formwrap textarea { width: 100%; padding: .6rem .7rem; border: 1px solid var(--line, #e3e8ef); border-radius: 8px; font-size: 1rem; font-family: inherit; margin-bottom: .6rem; box-sizing: border-box; }
.rv-pick { display: flex; gap: .15rem; margin-bottom: .6rem; }
.rv-pick button { background: none; border: 0; font-size: 1.9rem; line-height: 1; color: #d0d6df; cursor: pointer; padding: 0 .1rem; transition: color .1s ease; }
.rv-pick button.on { color: #f5a623; }