/* KiddyMatch AI scripted demo — school cards, compare table and inline enquiry.
   Same components as Prototype.html (the interactive KiddyMatch demo), on the redesign's tokens. */
.kk-cards{display:flex;flex-direction:column;gap:10px}
.kk-school{background:#fff;border:1px solid #E7E5E4;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(28,25,23,.05),0 6px 16px -10px rgba(28,25,23,.12);transition:transform .15s var(--ease,ease),box-shadow .15s var(--ease,ease)}
.kk-school:hover{transform:translateY(-2px);box-shadow:0 12px 28px -14px rgba(28,25,23,.22)}
.kk-cover{position:relative;background:#F1EFEB}
.kk-cover img{display:block;width:100%;height:110px;object-fit:cover}
.kk-school.kk-ctx .kk-cover img{height:150px}
.kk-rank{position:absolute;top:8px;left:8px;background:#CC470B;color:#fff;font:800 11px/1 var(--font-h);border-radius:999px;padding:5px 10px;box-shadow:0 4px 10px -4px rgba(28,25,23,.35)}
.kk-sponsored{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.96);color:#1C1917;border:1px solid #E7E5E4;font:700 10px/1 var(--font-h);letter-spacing:.04em;border-radius:999px;padding:5px 9px}
.kk-sponsored::before{content:"";width:5px;height:5px;border-radius:50%;background:#A8A29E}
.kk-sbody{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.kk-sname{margin:0;font:700 14px/1.3 var(--font-h);color:#1C1917;letter-spacing:-.01em}
.kk-smeta{margin:2px 0 0;font-size:11.5px;color:#57534E}
.kk-fee{margin:2px 0 0;font:700 13px/1.4 var(--font-h);font-variant-numeric:tabular-nums;color:#1C1917}
.kk-badges{display:flex;flex-wrap:wrap;gap:5px}
.kk-badge{display:inline-flex;align-items:center;gap:4px;background:#FFE8D3;color:#C2410C;border-radius:999px;padding:2px 9px;font:700 11px/1.6 var(--font-b);white-space:nowrap}
.kk-badge.teal{background:#E6F7F9;color:#0E7490}
.kk-why{background:#FFF4EA;border-radius:8px;padding:8px 10px;font-size:12.5px;line-height:1.5;color:#1C1917}
.kk-why b{display:block;margin-bottom:2px;color:#C2410C;font:800 10.5px/1.4 var(--font-h);text-transform:uppercase;letter-spacing:.06em}
.kk-sact{display:flex;flex-wrap:wrap;gap:8px}
.kk-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;padding:7px 14px;font:700 12.5px/1.2 var(--font-h);cursor:pointer;text-decoration:none;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s}
.kk-btn:active{transform:scale(.98)}
.kk-btn.primary{background:#CC470B;color:#fff}
.kk-btn.primary:hover{background:#C2410C}
.kk-btn.primary:disabled{opacity:.5;cursor:not-allowed}
.kk-btn.line{background:#fff;color:#1C1917;border-color:#E7E5E4}
.kk-btn.line:hover{border-color:#EA580C;color:#C2410C;background:#FFF4EA}
.kk-mono{font-variant-numeric:tabular-nums;font-weight:700;color:#1C1917;background:#F1EFEB;border-radius:5px;padding:0 5px;white-space:nowrap}
.kk-bubble-user .kk-mono{background:rgba(255,255,255,.2);color:#fff}

/* side-by-side compare */
.kk-cmp{background:#fff;border:1px solid #E7E5E4;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(28,25,23,.05)}
.kk-cmp table{width:100%;border-collapse:collapse;font-size:12px;line-height:1.45}
.kk-cmp th{background:#E6F7F9;color:#0E7490;font:800 10.5px/1.4 var(--font-h);text-transform:uppercase;letter-spacing:.05em;padding:7px 8px;text-align:left}
.kk-cmp td{padding:7px 8px;border-top:1px solid #E7E5E4;vertical-align:top}
.kk-cmp td:first-child{color:#57534E;font-weight:700;white-space:nowrap}
.kk-cmp tr:nth-child(even) td{background:#FCFBFA}

/* inline enquiry (the demo's Send Enquiry dialog, kept inside the conversation) */
.kk-enq{background:#fff;border:1px solid #E7E5E4;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:9px;box-shadow:0 1px 2px rgba(28,25,23,.05)}
.kk-enq-h{font:800 14px/1.3 var(--font-h);color:#1C1917}
.kk-enq-sub{margin:-4px 0 0;font-size:12px;color:#57534E}
.kk-enq label{display:flex;flex-direction:column;gap:3px;font:700 12px/1.4 var(--font-b);color:#1C1917}
.kk-enq label .kk-from{color:#0E7490;font-weight:600}
.kk-enq .kk-input.prefill{background:#FFF4EA}
.kk-enq .kk-consent{flex-direction:row;align-items:flex-start;gap:8px;font-weight:400;color:#57534E;cursor:pointer}
.kk-enq .kk-consent input{margin-top:2px;accent-color:#EA580C}
.kk-enq .kk-btn{width:100%;padding:10px 14px;font-size:13.5px}
.kk-enq-note{margin:0;font-size:11px;color:#78716C;text-align:center}
.kk-enq[aria-disabled="true"]{opacity:.6;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .kk-school,.kk-school:hover{transition:none;transform:none}
}
