/* Shared demo features. Each page sets these colours on :root:
   --kit-accent, --kit-accent-ink, --kit-ink, --kit-surface, --kit-line, --kit-bar-bg, --kit-bar-ink */

/* Badges (Google rating, open now) */
.kit-badges{ display:flex; flex-wrap:wrap; gap:8px 10px; }
.kit-badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); color:inherit; font-weight:600; font-size:.9rem; line-height:1.2; text-decoration:none; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
a.kit-badge:hover{ background:rgba(255,255,255,.22); }
.kit-badge .stars{ color:#FBBC05; letter-spacing:1px; }
.kit-badge .dot{ width:9px; height:9px; border-radius:50%; background:#3DDC84; box-shadow:0 0 0 3px rgba(61,220,132,.28); flex-shrink:0; }
.kit-badge.closed .dot{ background:#F5A623; box-shadow:0 0 0 3px rgba(245,166,35,.28); }
.kit-badge.light{ background:var(--kit-surface); border-color:var(--kit-line); color:var(--kit-ink); -webkit-backdrop-filter:none; backdrop-filter:none; }

/* Sample photo tag */
.kit-sample{ position:absolute; top:10px; left:10px; z-index:2; background:rgba(0,0,0,.62); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.02em; padding:4px 8px; border-radius:5px; }

/* Lightbox */
.kit-lb{ position:fixed; inset:0; z-index:100; background:rgba(8,10,12,.94); display:flex; align-items:center; justify-content:center; padding:16px; }
.kit-lb[hidden]{ display:none; }
.kit-lb img{ max-width:min(1200px, 100%); max-height:80vh; object-fit:contain; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.kit-lb button{ position:absolute; width:48px; height:48px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:28px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.kit-lb button:hover{ background:rgba(255,255,255,.26); }
.kit-lb .lb-close{ top:14px; right:14px; }
.kit-lb .lb-prev{ left:10px; top:50%; transform:translateY(-50%); }
.kit-lb .lb-next{ right:10px; top:50%; transform:translateY(-50%); }
.kit-lb .lb-cap{ position:absolute; left:0; right:0; bottom:16px; margin:0; text-align:center; color:#ddd; font-size:.92rem; padding:0 70px; }
a[data-lightbox]{ cursor:zoom-in; }

/* Choice chips */
.kit-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.kit-chips button{ border:1.5px solid var(--kit-line); background:var(--kit-surface); color:var(--kit-ink); border-radius:999px; padding:9px 15px; font:inherit; font-size:.92rem; font-weight:600; cursor:pointer; }
.kit-chips button[aria-pressed="true"]{ background:var(--kit-accent); border-color:var(--kit-accent); color:var(--kit-accent-ink); }

/* Photo upload */
.kit-upload{ display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; padding:14px; border:1.5px dashed var(--kit-line); border-radius:10px; }
.kit-upload input[type=file]{ width:100%; min-width:0; font:inherit; font-size:.9rem; color:var(--kit-ink); }
.kit-upload input[type=file]::file-selector-button{ font:inherit; font-weight:700; border:0; border-radius:8px; padding:9px 14px; margin-right:12px; background:var(--kit-accent); color:var(--kit-accent-ink); cursor:pointer; }
.kit-thumbs{ display:flex; gap:8px; flex-wrap:wrap; }
.kit-thumbs:empty{ display:none; }
.kit-thumbs img{ width:60px; height:60px; object-fit:cover; border-radius:6px; }

/* Form sent message */
.kit-done{ padding:16px 18px; border-radius:10px; background:var(--kit-surface); border:1.5px solid var(--kit-accent); color:var(--kit-ink); }
.kit-done strong{ display:block; font-size:1.05rem; margin-bottom:4px; }

/* Mobile call bar */
.kit-callbar{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:8px; padding:10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); background:var(--kit-bar-bg, #111); box-shadow:0 -8px 24px rgba(0,0,0,.22); transition:transform .25s; }
.kit-callbar a{ display:flex; align-items:center; justify-content:center; gap:7px; min-height:50px; border-radius:10px; font-weight:700; font-size:.92rem; text-decoration:none; color:var(--kit-bar-ink, #fff); background:rgba(255,255,255,.1); }
.kit-callbar a.primary{ background:var(--kit-accent); color:var(--kit-accent-ink); }
.kit-callbar svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.js .kit-callbar{ transform:translateY(115%); }
.js .kit-callbar.show{ transform:none; }
@media (min-width:900px){ .kit-callbar{ display:none; } }
@media (prefers-reduced-motion: reduce){ .kit-callbar{ transition:none; } }

/* Toast */
.kit-toast{ position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:120; background:#111; color:#fff; padding:10px 16px; border-radius:10px; font-weight:600; font-size:.92rem; box-shadow:0 10px 30px rgba(0,0,0,.3); max-width:calc(100% - 32px); }