/* Wrapper (JS styrer visning ift. breakpoint + desktop toggle) */
.sqm-wrap{
  position:fixed;
  bottom:var(--sqm-bottom,24px);
  z-index:var(--sqm-z,99999);
  display:none;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.sqm-wrap.sqm-show{ display:block; }

/* Position */
.sqm-left{ left:var(--sqm-side,18px); }
.sqm-right{ right:var(--sqm-side,18px); }

/* Toggle-knap */
.sqm-toggle{
  width:var(--sqm-toggle-size,56px);
  height:var(--sqm-toggle-size,56px);
  border-radius:999px;
  border:0;
  background:var(--sqm-btn-bg,#20b24b);
  color:var(--sqm-btn-fg,#fff);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  cursor:pointer;
  display:grid;place-items:center;
  position:relative;
  -webkit-tap-highlight-color:transparent;
}
.sqm-dots{
  width:6px;height:6px;border-radius:999px;
  background:var(--sqm-btn-fg,#fff);
  box-shadow:0 -10px 0 var(--sqm-btn-fg,#fff), 0 10px 0 var(--sqm-btn-fg,#fff);
}
.sqm-close{
  position:absolute;inset:0;
  display:grid;place-items:center;
  opacity:0;transform:scale(.9);
  transition:opacity .15s ease, transform .15s ease;
}
.sqm-wrap.is-open .sqm-dots{ opacity:0; }
.sqm-wrap.is-open .sqm-close{ opacity:1; transform:scale(1); }

/* Items container */
.sqm-items{
  position:absolute;
  bottom:calc(var(--sqm-toggle-size,56px) + 10px);
  display:flex;
  flex-direction:column;
  gap:12px;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.sqm-left .sqm-items{ left:0; align-items:flex-start; }
.sqm-right .sqm-items{ right:0; align-items:flex-end; }
.sqm-wrap.is-open .sqm-items{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* Item */
.sqm-item{
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  text-decoration:none;
}
.sqm-bubble{
  width:38px;height:38px;border-radius:999px;
  background:var(--sqm-item-bg,#dff3e6);
  display:grid;place-items:center;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.sqm-icon{ display:inline-flex; color:var(--sqm-icon-fg,#2a8a49); }
.sqm-label{
  font-size:13px;
  padding:6px 10px;
  border-radius:6px;
  background:var(--sqm-label-bg,#4a4a4a);
  color:var(--sqm-label-fg,#fff);
  white-space:nowrap;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}

/* QR panel */
.sqm-qr{
  position:absolute;
  bottom:calc(var(--sqm-toggle-size,56px) + 10px);
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .15s ease, transform .15s ease;
}
.sqm-left .sqm-qr{ left:0; }
.sqm-right .sqm-qr{ right:0; }
.sqm-wrap.show-qr .sqm-qr{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.sqm-qr-inner{
  margin-top:10px;
  background:#fff;
  border-radius:12px;
  padding:10px;
  width:240px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.sqm-qr-media{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}
.sqm-qr-video{
  width:var(--sqm-qr-size, 100%);
  aspect-ratio:1 / 1;
  border-radius:8px;
  display:block;
  background:#fff;
  object-fit:cover;
}
.sqm-qr-text{
  margin-top:8px;
  font-size:13px;
  color:#222;
}