/* Kinetic UI: toasts + popups. Uses the site's or the admin's theme colors when available. */
.kd-toasts,.kd-modal-wrap{
  --ui-surface:var(--surface,var(--panel-2,#1a1a21));--ui-text:var(--text,#e7e7ec);--ui-heading:var(--heading,#fff);
  --ui-muted:var(--muted,#9a9aa8);--ui-line:var(--line-2,var(--border,#383844));--ui-accent:var(--primary,var(--accent,#d3110f));
  --ui-on-accent:var(--on-primary,#fff);--ui-font:var(--font-body,inherit);--ui-font-h:var(--font-heading,inherit);
}

/* ---------- Toasts ---------- */
.kd-toasts{position:fixed;z-index:2147483000;display:flex;flex-direction:column;gap:10px;pointer-events:none;
  width:min(var(--kt-w,380px),calc(100vw - 2 * var(--kt-off,20px)));
  --kt-success:#22c55e;--kt-error:#ef4444;--kt-info:#3b82f6;--kt-warning:#f59e0b;--kt-bg:#17171c;--kt-text:#f1f1f4}
.kd-toasts.pos-top-left{top:var(--kt-off);left:var(--kt-off)}
.kd-toasts.pos-top-center{top:var(--kt-off);left:50%;transform:translateX(-50%)}
.kd-toasts.pos-top-right{top:var(--kt-off);right:var(--kt-off)}
.kd-toasts.pos-bottom-left{bottom:var(--kt-off);left:var(--kt-off)}
.kd-toasts.pos-bottom-center{bottom:var(--kt-off);left:50%;transform:translateX(-50%)}
.kd-toasts.pos-bottom-right{bottom:var(--kt-off);right:var(--kt-off)}
/* Newest toast sits closest to the edge it's anchored to */
.kd-toasts[class*="pos-top"]{flex-direction:column-reverse}
.kd-toasts[class*="pos-top"].oldest-first{flex-direction:column}
.kd-toasts[class*="pos-bottom"].oldest-first{flex-direction:column-reverse}
.kd-toasts[class*="-right"]{align-items:flex-end}.kd-toasts[class*="-left"]{align-items:flex-start}.kd-toasts[class*="-center"]{align-items:center}

.kd-toast{--c:var(--kt-success);position:relative;display:flex;align-items:flex-start;gap:.7em;max-width:100%;overflow:hidden;pointer-events:auto;
  font-family:var(--ui-font);line-height:1.4;border-radius:var(--kt-r,8px);box-shadow:0 14px 34px -10px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.25);
  transition:opacity .25s ease,transform .25s ease}
.kd-toast.t-error{--c:var(--kt-error)}.kd-toast.t-info{--c:var(--kt-info)}.kd-toast.t-warning{--c:var(--kt-warning)}
.kd-toast.sz-sm{font-size:12.5px;padding:8px 11px}
.kd-toast.sz-md{font-size:14px;padding:12px 14px}
.kd-toast.sz-lg{font-size:16px;padding:16px 18px}
.kd-t-ico{flex:none;display:flex;color:var(--c);font-size:1.25em;margin-top:-.05em}
.kd-t-msg{flex:1;min-width:0;overflow-wrap:anywhere}
.kd-t-x{flex:none;display:flex;background:none;border:0;padding:2px;margin:-1px -3px 0 4px;color:inherit;opacity:.55;cursor:pointer;font-size:1.05em;border-radius:4px}
.kd-t-x:hover{opacity:1}
.kd-t-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--c);opacity:.75;transform-origin:left;animation:kdBar linear forwards}
.kd-t-bar.hidden{opacity:0}
.kd-toast:not(.no-pause):hover .kd-t-bar{animation-play-state:paused}
@keyframes kdBar{to{transform:scaleX(0)}}

/* Styles */
.kd-toast.st-dark{background:#17171c;color:#f1f1f4;border:1px solid #2c2c35;border-left:4px solid var(--c)}
.kd-toast.st-light{background:#fff;color:#18181b;border:1px solid #e4e4e7;border-left:4px solid var(--c)}
.kd-toasts.custom .kd-toast.st-dark,.kd-toasts.custom .kd-toast.st-light{background:var(--kt-bg);color:var(--kt-text)}
.kd-toast.st-outline{background:var(--ui-surface);color:var(--ui-text);border:1.5px solid var(--c)}
.kd-toast.st-solid{background:var(--c);color:#fff;border:0}
.kd-toast.st-solid .kd-t-ico{color:#fff}.kd-toast.st-solid .kd-t-bar{background:rgba(255,255,255,.7)}
.kd-toast.st-glass{background:rgba(22,22,28,.62);color:#fff;border:1px solid rgba(255,255,255,.14);border-left:4px solid var(--c);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}

/* Animations */
.kd-toast.an-slide{animation:kdSlideR .32s cubic-bezier(.2,.9,.3,1.2) both}
.kd-toasts[class*="-left"] .kd-toast.an-slide{animation-name:kdSlideL}
.kd-toasts.pos-top-center .kd-toast.an-slide{animation-name:kdSlideD}
.kd-toasts.pos-bottom-center .kd-toast.an-slide{animation-name:kdSlideU}
.kd-toast.an-fade{animation:kdFade .3s ease both}
.kd-toast.an-pop{animation:kdPop .3s cubic-bezier(.2,.9,.3,1.3) both}
.kd-toast.out{opacity:0;transform:scale(.96)}
.kd-toast.an-slide.out{transform:translateX(30px)}
.kd-toasts[class*="-left"] .kd-toast.an-slide.out{transform:translateX(-30px)}
.kd-toasts[class*="-center"] .kd-toast.an-slide.out{transform:translateY(10px)}
.kd-toast.an-none,.kd-toast.an-none.out{animation:none;transition:none}
@keyframes kdSlideR{from{opacity:0;transform:translateX(40px)}}
@keyframes kdSlideL{from{opacity:0;transform:translateX(-40px)}}
@keyframes kdSlideD{from{opacity:0;transform:translateY(-24px)}}
@keyframes kdSlideU{from{opacity:0;transform:translateY(24px)}}
@keyframes kdFade{from{opacity:0}}
@keyframes kdPop{from{opacity:0;transform:scale(.85)}}

/* ---------- Popups ---------- */
html.kd-modal-open{overflow:hidden}
.kd-modal-wrap{position:fixed;inset:0;z-index:2147483100;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,var(--km-dim,.6));opacity:0;transition:opacity .2s ease}
.kd-modal-wrap.blur{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.kd-modal-wrap.in{opacity:1}
.kd-modal{width:100%;background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-line);border-radius:var(--km-r,10px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);font-family:var(--ui-font);transition:transform .22s cubic-bezier(.2,.9,.3,1.2),opacity .2s}
.kd-modal.sz-sm{max-width:360px}.kd-modal.sz-md{max-width:460px}.kd-modal.sz-lg{max-width:600px}
.kd-modal-wrap.an-pop .kd-modal{transform:scale(.92)}
.kd-modal-wrap.an-slide .kd-modal{transform:translateY(30px)}
.kd-modal-wrap.in .kd-modal{transform:none}
.kd-modal-wrap.an-none,.kd-modal-wrap.an-none .kd-modal{transition:none}
.kd-m-body{display:flex;gap:14px;padding:22px 22px 6px}
.kd-m-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:20px;color:var(--ui-accent);background:color-mix(in srgb,var(--ui-accent) 14%,transparent)}
.kd-m-ico.danger{color:#ef4444;background:rgba(239,68,68,.13)}
.kd-m-text{flex:1;min-width:0}
.kd-m-text h3{margin:0 0 6px;font-family:var(--ui-font-h);font-size:17px;font-weight:700;color:var(--ui-heading);line-height:1.3;letter-spacing:0;text-transform:none}
.kd-m-msg{margin:0;color:var(--ui-muted);font-size:14.5px;line-height:1.5;overflow-wrap:anywhere}
.kd-m-input{display:block;width:100%;margin-top:12px;padding:10px 12px;font:inherit;font-size:14.5px;color:var(--ui-text);background:rgba(0,0,0,.25);border:1px solid var(--ui-line);border-radius:calc(var(--km-r,10px) * .6);outline:none}
.kd-m-input:focus{border-color:var(--ui-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 25%,transparent)}
.kd-m-btns{display:flex;justify-content:flex-end;gap:10px;padding:18px 22px 20px}
.kd-m-btn{appearance:none;font:inherit;font-size:14px;font-weight:600;padding:9px 18px;border-radius:calc(var(--km-r,10px) * .6);cursor:pointer;border:1px solid var(--ui-line);background:transparent;color:var(--ui-text);transition:background .15s,border-color .15s,filter .15s}
.kd-m-btn:hover{background:rgba(127,127,127,.12)}
.kd-m-btn:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.kd-m-ok{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-on-accent)}
.kd-m-ok:hover{background:var(--ui-accent);filter:brightness(1.12)}
.kd-m-ok.danger{background:#dc2626;border-color:#dc2626;color:#fff}
@media (max-width:520px){.kd-m-btns{flex-direction:column-reverse}.kd-m-btn{width:100%}}
@media (prefers-reduced-motion:reduce){.kd-toast,.kd-modal,.kd-modal-wrap{animation:none!important;transition:none!important}}

/* ---------- Live demo bar ---------- */
.kd-demobar{position:relative;z-index:70;display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:8px 16px;background:linear-gradient(90deg,#1d4ed8,#7c3aed);color:#fff;font:500 13px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.kd-db-tag{flex:none;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.18);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.kd-db-txt{flex:1 1 320px;opacity:.92}
.kd-db-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kd-db-acts form{margin:0}
.kd-db-acts a,.kd-db-acts button{display:inline-flex;align-items:center;padding:5px 11px;border-radius:6px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.kd-db-acts a:hover,.kd-db-acts button:hover{background:rgba(255,255,255,.14)}
.kd-db-acts .kd-db-cta{background:#fff;color:#1e1b4b;border-color:#fff}
.kd-db-acts .kd-db-cta:hover{background:#eef2ff}
.kd-db-short{display:none}
@media (max-width:760px){
  .kd-demobar{gap:8px;padding:7px 10px;font-size:12px}
  .kd-db-long{display:none}.kd-db-short{display:inline}
  .kd-db-txt{flex:1 1 auto;min-width:0}
  .kd-db-acts{width:100%;flex-wrap:nowrap}
  .kd-db-acts a,.kd-db-acts button{padding:4px 9px;font-size:12px}
  .kd-db-acts .kd-db-cta{margin-left:auto}
}