/* ── Kynda Kids — Feedback form ─────────────────────────────────────────── */
.kkf-wrap { max-width:620px; margin:0 auto; padding:0 16px 48px; }

.kkf-form {
    background:#fff;
    border-radius:18px;
    box-shadow:0 2px 24px rgba(0,0,0,.09);
    padding:36px 32px;
}
@media(max-width:520px){
    .kkf-form { padding:24px 18px; border-radius:14px; }
}

/* Progress */
.kkf-progress {
    height:5px; background:#f0f0f0; border-radius:3px; overflow:hidden; margin-bottom:8px;
}
.kkf-progress-bar {
    height:100%;
    background:linear-gradient(90deg,#29ABE2,#F5BD26);
    border-radius:3px;
    transition:width .35s ease;
}
.kkf-step-label { font-size:.78rem; color:#aaa; text-align:right; margin-bottom:28px; }

/* Steps */
.kkf-step { display:none; }
.kkf-step.is-active { display:block; animation:kkfIn .22s ease; }
@keyframes kkfIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.kkf-step-title { font-size:1.45rem; font-weight:800; color:#0A0A0A; margin:0 0 4px; }
.kkf-step-sub   { color:#999; font-size:.88rem; margin:0 0 28px; }

/* Fields */
.kkf-field { margin-bottom:26px; }
.kkf-label {
    display:block; font-weight:700; font-size:.88rem; color:#222; margin-bottom:10px; line-height:1.4;
}
.kkf-optional { font-weight:400; color:#bbb; font-size:.85em; }

.kkf-input, .kkf-textarea, .kkf-select {
    width:100%; box-sizing:border-box;
    border:1.5px solid #e2e2e2; border-radius:10px;
    padding:11px 14px; font-size:.95rem; font-family:inherit; color:#222;
    background:#fafafa; transition:border-color .15s, background .15s;
}
.kkf-input:focus, .kkf-textarea:focus, .kkf-select:focus {
    border-color:#29ABE2; background:#fff; outline:none;
}
.kkf-textarea { resize:vertical; min-height:80px; }
.kkf-select   { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }

/* ── Star rating ─────────────────────────────────────────────────────────── */
.kkf-stars {
    display:flex;
    flex-direction:row-reverse;
    justify-content:flex-end;
    gap:4px;
    margin-bottom:4px;
}
.kkf-stars input { display:none; }
.kkf-stars label {
    font-size:2.6rem;
    color:#ddd;
    cursor:pointer;
    line-height:1;
    transition:color .08s, transform .08s;
    user-select:none;
}
/* Selected state */
.kkf-stars input:checked + label,
.kkf-stars input:checked ~ label  { color:#F5BD26; }
/* Hover: reset then re-color up to cursor */
.kkf-stars:hover label            { color:#ddd; }
.kkf-stars label:hover,
.kkf-stars label:hover ~ label    { color:#F5BD26; transform:scale(1.12); }

.kkf-star-captions {
    display:flex; justify-content:space-between;
    font-size:.74rem; color:#bbb; margin-top:2px; padding:0 2px;
}

/* ── Aspect rating grid ──────────────────────────────────────────────────── */
.kkf-rate-grid { display:flex; flex-direction:column; gap:10px; }
.kkf-rate-row {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 14px; background:#f7f7f7; border-radius:10px;
}
.kkf-rate-name { font-size:.86rem; color:#444; flex:1; min-width:100px; }
.kkf-rate-stars { display:flex; flex-direction:row-reverse; gap:1px; }
.kkf-rate-stars input { display:none; }
.kkf-rate-stars label {
    font-size:1.5rem; color:#ddd; cursor:pointer; line-height:1;
    user-select:none; transition:color .08s;
}
.kkf-rate-stars input:checked + label,
.kkf-rate-stars input:checked ~ label { color:#F5BD26; }
.kkf-rate-stars:hover label           { color:#ddd; }
.kkf-rate-stars label:hover,
.kkf-rate-stars label:hover ~ label   { color:#F5BD26; }

/* ── Pill buttons ────────────────────────────────────────────────────────── */
.kkf-pills { display:flex; flex-wrap:wrap; gap:10px; }
.kkf-pill-input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.kkf-pill {
    display:inline-block; padding:10px 18px; border-radius:50px;
    border:2px solid #e2e2e2; font-size:.86rem; font-weight:600; color:#555;
    cursor:pointer; transition:all .15s; background:#fff; user-select:none;
}
.kkf-pill:hover                    { border-color:#0A0A0A; color:#0A0A0A; }
.kkf-pill-input:checked + .kkf-pill { border-color:#0A0A0A; background:#0A0A0A; color:#F5BD26; }

/* ── Contact row ─────────────────────────────────────────────────────────── */
.kkf-contact-row { display:flex; gap:12px; flex-wrap:wrap; }
.kkf-contact-row .kkf-input { flex:1; min-width:140px; }

/* ── Nav buttons ─────────────────────────────────────────────────────────── */
.kkf-nav { display:flex; justify-content:space-between; align-items:center; margin-top:28px; gap:12px; }

.kkf-btn {
    padding:12px 28px; border-radius:50px; border:none;
    font-size:.95rem; font-weight:700; cursor:pointer;
    font-family:inherit; transition:all .15s; line-height:1;
}
.kkf-btn-next,
.kkf-btn-submit { background:#0A0A0A; color:#F5BD26; margin-left:auto; }
.kkf-btn-next:hover,
.kkf-btn-submit:hover { background:#F5BD26; color:#0A0A0A; transform:translateY(-1px); }
.kkf-btn-back { background:transparent; color:#aaa; padding-left:4px; }
.kkf-btn-back:hover { color:#0A0A0A; }

/* ── Thank you ───────────────────────────────────────────────────────────── */
.kkf-thanks {
    text-align:center; padding:52px 24px; max-width:480px; margin:0 auto;
}
.kkf-thanks-icon { font-size:4rem; margin-bottom:16px; line-height:1; }
.kkf-thanks h2   { font-size:1.9rem; font-weight:800; margin:0 0 12px; color:#0A0A0A; }
.kkf-thanks p    { color:#666; line-height:1.65; font-size:.95rem; }
.kkf-thanks-note { font-size:.82rem; color:#bbb; margin-top:20px; }