#rs-qr-floating{
  --pos: bottom-left;
  --ox: 50px;
  --oy: 50px;
  --btnSize: 64px;
  --panelW: 280px;
  --radius: 22px;

  --panelBg: #fff;
  --panelShadow: 0 18px 60px rgba(0,0,0,.25);

  --gradFrom:#FDBA19;
  --gradTo:#FF6A00;
  --iconColor:#fff;

  --btnBg:#4B5563;
  --btnText:#fff;

  position: fixed;
  z-index: 999999;
  bottom: var(--oy);
  left: var(--ox);
  right: auto;
  display: block;
  pointer-events: none; /* omogućava klik samo na decu */
}

#rs-qr-floating.rs-right{
  left: auto;
  right: var(--ox);
}

#rs-qr-floating *{ box-sizing: border-box; }

#rs-qr-floating .rs-qr-btn{
  width: var(--btnSize);
  height: var(--btnSize);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, var(--gradFrom), var(--gradTo));
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  display: grid;
  place-items: center;
  pointer-events: auto;
  position: relative;
}

#rs-qr-floating .rs-qr-btn-icon svg{
  width: calc(var(--btnSize) * .52);
  height: calc(var(--btnSize) * .52);
  display: block;
  fill: var(--iconColor);
}

#rs-qr-floating .rs-qr-panel{
  position: absolute;
  bottom: calc(var(--btnSize) + 14px);
  left: 0;
  width: var(--panelW);
  background: var(--panelBg);
  border-radius: var(--radius);
  box-shadow: var(--panelShadow);
  padding: 16px 16px 14px;
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}

#rs-qr-floating.rs-right .rs-qr-panel{
  left: auto;
  right: 0;
}

#rs-qr-floating .rs-qr-close{
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  cursor: pointer;
  pointer-events: auto;
  font-size: 18px;
  line-height: 30px;
}

#rs-qr-floating .rs-qr-code-wrap{
  width: 100%;
  display: grid;
  place-items: center;
  padding: 12px 0 10px;
}

#rs-qr-floating .rs-qr-code{
  width: 210px;
  height: 210px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 14px;
  padding: 8px;
}

#rs-qr-floating .rs-qr-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

#rs-qr-floating .rs-qr-action{
  border: none;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--btnBg);
  color: var(--btnText);
  font-weight: 700;
  letter-spacing: .4px;
}

#rs-qr-floating .rs-qr-action:active{ transform: translateY(1px); }

#rs-qr-floating .rs-qr-subactions{
  margin-top: 10px;
}

#rs-qr-floating .rs-qr-subaction{
  width: 100%;
  border: none;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.08);
  font-weight: 600;
}

#rs-qr-floating .rs-qr-toast{
  position: absolute;
  bottom: calc(var(--btnSize) + 10px);
  left: 0;
  width: var(--panelW);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  padding: 0;
}
#rs-qr-floating .rs-qr-toast .rs-qr-toast-inner{
  background: rgba(0,0,0,.78);
  color: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
}

/* OPEN state (hover desktop + JS toggle mobile) */
#rs-qr-floating.rs-open .rs-qr-panel{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Desktop hover */
@media (hover:hover) and (pointer:fine){
  #rs-qr-floating:hover .rs-qr-panel{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* Mobile: panel otvara klik na dugme */
@media (max-width: 640px){
  #rs-qr-floating .rs-qr-code{ width: 200px; height: 200px; }
}



/* GLOW */
/* Dugme mora imati position relative */
#rs-qr-floating .rs-qr-btn{
  position: relative;
  z-index: 1;
}

/* ANIMIRANI BORDER */
#rs-qr-floating .rs-qr-btn::before{
  content:"";
  position:absolute;
  inset: -3px;                /* debljina border-a */
  border-radius: 999px;
  padding: 3px;               /* širina border-a */

  background: conic-gradient(
    from 0deg,
    var(--gradFrom),
    var(--gradTo),
    var(--gradFrom)
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  animation: rsBorderSpin 2.5s linear infinite;

  pointer-events: none;
  z-index: -1;
}

/* animacija rotacije */
@keyframes rsBorderSpin{
  to { transform: rotate(360deg); }
}

/* aktivan samo na hover ili kad je panel otvoren */
#rs-qr-floating .rs-qr-btn::before{
  opacity: 0;
  transition: opacity .3s ease;
}

@media (hover:hover) and (pointer:fine){
  #rs-qr-floating .rs-qr-btn:hover::before{
    opacity: 1;
  }
}

#rs-qr-floating.rs-open .rs-qr-btn::before{
  opacity: 1;
}