/* Kundservice — [sbr_kundservice]. The registry's own language: Registerblå accent
   (--ks-accent from Utseende), generous white, one column of ~62ch, labels above
   fields, errors inline AND summarised. Doubled selector outranks theme CSS. */
.sbr2-ks.sbr2-ks { --ks-accent:#1A73E8; --ks-deep:#0F4FA8; --ks-ink:#14202B; --ks-muted:#5D707D; --ks-line:#DCE3EA; --ks-wash:#EAF2FD; --ks-paper:#FBFCFD;
  --ks-good:#1B8F63; --ks-good-bg:#E4F3EC; --ks-bad:#B3261E; --ks-bad-bg:#FBE9E7; --ks-warn:#B0730A; --ks-warn-bg:#FBEFD8;
  display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:36px; align-items:start; color:var(--ks-ink); font-size:17px; line-height:1.55; margin:0 0 32px; }
.sbr2-ks-wrap { container-type:inline-size; }
/* Dropped into a half-width theme column? Stack, and keep only the status pill of the rail. */
@container (max-width:820px) {
  .sbr2-ks.sbr2-ks { grid-template-columns:1fr; gap:18px; }
  .sbr2-ks .ks-rail { position:static; order:-1; padding:10px 12px; }
  .sbr2-ks .ks-rail .ks-rail-k, .sbr2-ks .ks-rail .ks-rail-v { display:none; }
  .sbr2-ks .ks-two, .sbr2-ks .ks-guest, .sbr2-ks .ks-skel-2 { grid-template-columns:1fr; }
}
.sbr2-ks.sbr2-ks * { box-sizing:border-box; }
/* Themes (Flatsome) uppercase and space out every <button>; the form speaks in sentences. */
.sbr2-ks.sbr2-ks button, .sbr2-ks.sbr2-ks a.ks-btn { text-transform:none !important; letter-spacing:0 !important; margin:0; box-shadow:none; }
.sbr2-ks.sbr2-ks h2, .sbr2-ks.sbr2-ks h3 { text-transform:none !important; letter-spacing:0 !important; font-family:inherit; color:var(--ks-ink); }
.sbr2-ks .ks-main { min-width:0; max-width:720px; }
.sbr2-ks .ks-title { font-size:32px; line-height:1.15; margin:0 0 8px; text-wrap:balance; }
.sbr2-ks .ks-intro { color:var(--ks-muted); margin:0 0 18px; max-width:62ch; }
.sbr2-ks .ks-steps { list-style:none; display:flex; gap:22px; padding:0; margin:0 0 22px; font-size:13.5px; color:var(--ks-muted); }
.sbr2-ks .ks-steps li { display:flex; align-items:center; gap:8px; }
.sbr2-ks .ks-steps .n { width:22px; height:22px; border-radius:50%; border:1.5px solid var(--ks-line); display:grid; place-items:center; font-size:11.5px; font-weight:700; }
.sbr2-ks .ks-steps li.on { color:var(--ks-ink); font-weight:700; }
.sbr2-ks .ks-steps li.on .n { background:var(--ks-accent); border-color:var(--ks-accent); color:#fff; }
.sbr2-ks .ks-steps li.done .n { background:var(--ks-good-bg); border-color:var(--ks-good); color:var(--ks-good); }
.sbr2-ks .ks-h { font-size:23px; line-height:1.25; margin:0 0 6px; text-wrap:balance; }
.sbr2-ks .ks-sub { color:var(--ks-muted); margin:0 0 18px; max-width:62ch; }
.sbr2-ks .ks-muted { color:var(--ks-muted); }
.sbr2-ks .ks-fade { animation:ksFade .18s ease; }
@keyframes ksFade { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .sbr2-ks .ks-fade { animation:none; } }

/* skeleton (painted server-side, no CLS) */
.sbr2-ks .ks-skel { display:flex; flex-direction:column; gap:14px; }
.sbr2-ks .ks-skel-h { height:26px; width:40%; border-radius:8px; background:var(--ks-wash); }
.sbr2-ks .ks-skel-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sbr2-ks .ks-skel-card { height:220px; border-radius:14px; border:1px solid var(--ks-line); background:linear-gradient(90deg,var(--ks-paper),#fff,var(--ks-paper)); }

/* cards (VEM) */
.sbr2-ks .ks-two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sbr2-ks .ks-card { border:1px solid var(--ks-line); border-radius:14px; padding:18px 20px; background:var(--ks-paper); }
.sbr2-ks .ks-card.on { border-color:var(--ks-accent); box-shadow:0 0 0 3px var(--ks-wash); background:#fff; }
.sbr2-ks .ks-card-t { font-size:17px; font-weight:700; margin-bottom:4px; }
.sbr2-ks .ks-card-s { font-size:14.5px; color:var(--ks-muted); line-height:1.45; margin-bottom:14px; }

/* fields */
.sbr2-ks .ks-field { margin:0 0 12px; }
.sbr2-ks .ks-label { display:block; font-size:14px; font-weight:700; margin-bottom:5px; }
.sbr2-ks .ks-help { font-size:13px; color:var(--ks-muted); margin-top:4px; }
.sbr2-ks .ks-in { width:100%; border:1px solid var(--ks-line); border-radius:10px; padding:11px 13px; font:inherit; font-size:16px; color:var(--ks-ink); background:#fff; min-height:46px; margin:0; }
.sbr2-ks .ks-in:focus { outline:none; border-color:var(--ks-accent); box-shadow:0 0 0 3px var(--ks-wash); }
.sbr2-ks .ks-ta { resize:vertical; min-height:150px; line-height:1.5; }
.sbr2-ks .ks-code { font:600 24px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.3em; text-align:center; }
.sbr2-ks .ks-count { font-size:12.5px; color:var(--ks-muted); text-align:right; min-height:16px; }
.sbr2-ks .ks-regres { min-height:22px; font-size:14px; margin:-4px 0 10px; display:flex; align-items:center; gap:8px; }
.sbr2-ks .ks-hit { color:var(--ks-good); font-weight:600; }
.sbr2-ks .ks-miss { color:var(--ks-muted); }
.sbr2-ks .ks-spin { width:14px; height:14px; border:2px solid var(--ks-line); border-top-color:var(--ks-accent); border-radius:50%; animation:ksSpin .8s linear infinite; }
@keyframes ksSpin { to { transform:rotate(360deg); } }
.sbr2-ks .ks-note { font-size:14px; color:var(--ks-muted); background:var(--ks-paper); border-radius:9px; padding:9px 12px; margin:0 0 12px; }
.sbr2-ks .ks-note.ok { background:var(--ks-good-bg); color:var(--ks-good); }
.sbr2-ks .ks-err { color:var(--ks-bad); font-size:14px; margin:6px 0 10px; font-weight:600; }
.sbr2-ks .ks-err.top { background:var(--ks-bad-bg); border:1px solid var(--ks-bad); border-radius:10px; padding:11px 14px; margin:0 0 16px; outline:none; }
.sbr2-ks .ks-err.top:focus { box-shadow:0 0 0 3px var(--ks-bad-bg); }
.sbr2-ks .ks-row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.sbr2-ks .ks-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* buttons */
.sbr2-ks .ks-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--ks-line); background:#fff; color:var(--ks-ink); border-radius:10px; padding:10px 18px; font:inherit; font-size:15px; font-weight:700; cursor:pointer; text-decoration:none; line-height:1.2; }
.sbr2-ks .ks-btn:hover { border-color:var(--ks-accent); color:var(--ks-deep); }
.sbr2-ks .ks-btn.p { background:var(--ks-accent); border-color:var(--ks-accent); color:#fff; }
.sbr2-ks .ks-btn.p:hover { background:var(--ks-deep); border-color:var(--ks-deep); color:#fff; }
.sbr2-ks .ks-btn.lg { padding:13px 24px; font-size:16px; }
.sbr2-ks .ks-btn.sm { padding:7px 12px; font-size:13.5px; white-space:nowrap; }
.sbr2-ks .ks-btn:disabled { opacity:.55; cursor:not-allowed; }
.sbr2-ks .ks-btn:focus-visible, .sbr2-ks .ks-tile:focus-visible, .sbr2-ks .ks-boat:focus-visible, .sbr2-ks .ks-link:focus-visible { outline:3px solid var(--ks-wash); outline-offset:1px; border-color:var(--ks-accent); }
.sbr2-ks .ks-link { border:0; background:transparent; padding:0; color:var(--ks-deep); font:inherit; font-size:14px; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.sbr2-ks .ks-link.muted { color:var(--ks-muted); text-decoration:none; }
.sbr2-ks .ks-link.muted:hover { text-decoration:underline; }

/* VAD */
.sbr2-ks .ks-guest { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:6px; }
.sbr2-ks .ks-guest .ks-field { margin:0; }
.sbr2-ks .ks-claim { font-size:14px; margin:0 0 16px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sbr2-ks .ks-chip { display:inline-flex; border:1px solid var(--ks-line); background:#fff; border-radius:7px; padding:2px 9px; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.sbr2-ks .ks-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin:0 0 16px; }
.sbr2-ks .ks-tile { border:1px solid var(--ks-line); border-radius:12px; padding:12px 14px; background:var(--ks-paper); font:inherit; font-size:14.5px; font-weight:600; color:var(--ks-ink); text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:5px; min-height:74px; }
.sbr2-ks .ks-tile:hover { border-color:var(--ks-accent); background:#fff; }
.sbr2-ks .ks-tile.on { border-color:var(--ks-accent); background:var(--ks-wash); color:var(--ks-deep); box-shadow:inset 0 0 0 1px var(--ks-accent); }
.sbr2-ks .ks-tile-i { font-size:20px; line-height:1; }
.sbr2-ks .ks-offer { display:flex; align-items:center; gap:12px; background:var(--ks-wash); border-radius:11px; padding:11px 14px; font-size:14.5px; line-height:1.45; margin:0 0 16px; }
.sbr2-ks .ks-offer.alert { background:var(--ks-bad-bg); }
.sbr2-ks .ks-offer .ks-btn { margin-left:auto; }
.sbr2-ks .ks-offer-i { font-size:18px; line-height:1; }
.sbr2-ks .ks-boats { display:flex; gap:8px; flex-wrap:wrap; }
.sbr2-ks .ks-boat { border:1px solid var(--ks-line); border-radius:10px; padding:8px 12px; background:#fff; font:inherit; color:var(--ks-ink); text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:2px; }
.sbr2-ks .ks-boat b { font-size:14.5px; font-variant-numeric:tabular-nums; }
.sbr2-ks .ks-boat span { font-size:12.5px; color:var(--ks-muted); }
.sbr2-ks .ks-boat.on { border-color:var(--ks-accent); background:var(--ks-wash); box-shadow:inset 0 0 0 1px var(--ks-accent); }
.sbr2-ks .ks-boat.on b { color:var(--ks-deep); }
.sbr2-ks .ks-foot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px; font-size:14px; }
.sbr2-ks .ks-foot .ks-btn { margin-left:auto; }
.sbr2-ks .ks-back { margin-top:18px; }
.sbr2-ks .cf-turnstile { margin:0 0 12px; }

/* KLART */
.sbr2-ks .ks-done { border:1px solid var(--ks-good); background:var(--ks-good-bg); border-radius:14px; padding:22px 24px; outline:none; }
.sbr2-ks .ks-done .ks-h { color:var(--ks-good); }
.sbr2-ks .ks-done p { margin:8px 0 0; }
.sbr2-ks .ks-done-ref { font-size:15px; margin:6px 0 4px; }
.sbr2-ks .ks-ref { font:700 20px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.04em; }

/* rail */
.sbr2-ks .ks-rail { border:1px solid var(--ks-line); border-radius:14px; padding:16px 18px; font-size:14.5px; background:var(--ks-paper); position:sticky; top:24px; }
.sbr2-ks .ks-pill { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:5px 12px; font-size:13px; font-weight:700; }
.sbr2-ks .ks-pill.open { background:var(--ks-good-bg); color:var(--ks-good); }
.sbr2-ks .ks-pill.closed { background:var(--ks-warn-bg); color:var(--ks-warn); }
.sbr2-ks .ks-pill .dot { width:8px; height:8px; border-radius:50%; background:currentColor; }
.sbr2-ks .ks-rail-k { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ks-muted); font-weight:700; margin:14px 0 3px; }
.sbr2-ks .ks-rail-v { line-height:1.45; }
.sbr2-ks .ks-rail-v a { color:var(--ks-deep); }
.sbr2-ks .ks-noscript { background:var(--ks-warn-bg); padding:12px 14px; border-radius:10px; }
.sbr2-ks-off { border:1px solid var(--ks-line,#DCE3EA); border-radius:12px; padding:16px; }

@media (max-width:860px) {
  .sbr2-ks.sbr2-ks { grid-template-columns:1fr; gap:18px; }
  .sbr2-ks .ks-rail { position:static; order:-1; padding:10px 12px; }
  .sbr2-ks .ks-rail .ks-rail-k, .sbr2-ks .ks-rail .ks-rail-v { display:none; }
  .sbr2-ks .ks-two, .sbr2-ks .ks-guest, .sbr2-ks .ks-skel-2 { grid-template-columns:1fr; }
  .sbr2-ks .ks-title { font-size:26px; }
  .sbr2-ks .ks-steps { gap:12px; font-size:12.5px; }
  .sbr2-ks .ks-foot { position:sticky; bottom:0; background:#fff; padding:10px 0; border-top:1px solid var(--ks-line); }
  .sbr2-ks .ks-foot .ks-btn { width:100%; margin-left:0; }
  .sbr2-ks .ks-offer { flex-wrap:wrap; }
  .sbr2-ks .ks-offer .ks-btn { margin-left:0; }
}

/* attachments */
.sbr2-ks .ks-comp-labelrow { display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
.sbr2-ks .ks-comp-labelrow .ks-label { margin:0; }
.sbr2-ks .ks-filelist { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.sbr2-ks .ks-file { display:flex; align-items:center; gap:8px; border:1px solid var(--ks-line); border-radius:9px; padding:7px 10px; font-size:14px; background:#fff; }
.sbr2-ks .ks-file.err { border-color:var(--ks-bad); background:var(--ks-bad-bg); }
.sbr2-ks .ks-file-n { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sbr2-ks .ks-file-s { font-size:12.5px; color:var(--ks-muted); white-space:nowrap; }
.sbr2-ks .ks-file.err .ks-file-s { color:var(--ks-bad); font-weight:600; }
.sbr2-ks .ks-file-x { border:0; background:transparent; font-size:18px; line-height:1; color:var(--ks-muted); cursor:pointer; padding:0 4px; }
.sbr2-ks .ks-fileinput { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.sbr2-ks .ks-fileinput:focus-visible + .ks-filebtn, .sbr2-ks .ks-filebtn:focus-within { outline:3px solid var(--ks-wash); }
.sbr2-ks .ks-filebtn { cursor:pointer; }

/* följ ditt ärende */
.sbr2-ks .ks-track-form { display:flex; flex-direction:column; gap:8px; }
.sbr2-ks .ks-track-form .ks-in { min-height:40px; font-size:14px; padding:8px 10px; }
.sbr2-ks .ks-case-hd { margin-bottom:14px; }
.sbr2-ks .ks-case-sub { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:4px; }
.sbr2-ks .ks-thread { display:flex; flex-direction:column; gap:10px; }
.sbr2-ks .ks-msg { border:1px solid var(--ks-line); border-radius:12px; padding:12px 14px; background:var(--ks-paper); max-width:88%; align-self:flex-start; border-left:3px solid var(--ks-line); }
.sbr2-ks .ks-msg.mine { align-self:flex-end; background:var(--ks-wash); border-left:3px solid var(--ks-accent); }
.sbr2-ks .ks-msg-hd { display:flex; gap:10px; align-items:baseline; font-size:13px; margin-bottom:6px; }
.sbr2-ks .ks-msg-b { white-space:pre-wrap; font-size:15.5px; line-height:1.5; overflow-wrap:anywhere; }
.sbr2-ks .ks-msg-att { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.sbr2-ks .ks-att { display:inline-flex; align-items:center; border:1px solid var(--ks-line); background:#fff; border-radius:8px; padding:5px 9px; font-size:13px; color:var(--ks-ink); text-decoration:none; }
.sbr2-ks .ks-att.img { padding:0; overflow:hidden; width:110px; height:82px; }
.sbr2-ks .ks-att.img img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:860px) { .sbr2-ks .ks-rail .ks-track { display:block; } }