/* Strong pane positioning */
.stsl-pane{ position:relative !important; }
.stsl-qr.stsl-in-card{ position:absolute; top:12px; right:12px; width:128px; height:128px; z-index:2; }
.stsl-qr.stsl-in-card img, .stsl-qr.stsl-in-card canvas{ width:100%!important; height:100%!important; }
@media (max-width:640px){ .stsl-qr.stsl-in-card{ width:96px; height:96px; top:10px; right:10px; } }

/* Modal */
#stsl-cert-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999; }
#stsl-cert-modal.open{ display:flex; }
#stsl-cert-modal .stsl-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.85); }
#stsl-cert-modal .stsl-modal-content{ position:relative; max-width:95vw; max-height:95vh; display:flex; align-items:center; justify-content:center; }
#stsl-modal-img{ max-width:95vw; max-height:95vh; cursor:grab; touch-action:none; transition:transform .12s ease; }
#stsl-cert-modal .stsl-modal-controls{ position:absolute; right:16px; bottom:16px; display:flex; gap:10px; }
#stsl-cert-modal .stsl-modal-controls button{ width:44px; height:44px; border:0; border-radius:12px; background:rgba(0,0,0,.75); color:#fff; display:flex; align-items:center; justify-content:center; }


/* Mobile: make the certificate image align LEFT (keep QR as-is) */
@media (max-width:640px){
  .stsl-card-body{ grid-template-columns: 1fr; }
  .stsl-photo{ justify-self: start; margin-left: 0; }
}
/* Better affordance */
.stsl-photo{ cursor: zoom-in; }


/* Fullscreen controls layout (only when modal is open) */
#stsl-cert-modal.open .stsl-modal-controls{
  position: static;
  width: 0; height: 0; overflow: visible;
}
#stsl-cert-modal.open .stsl-modal-content{ position: relative; }
#stsl-cert-modal.open .stsl-modal-controls .stsl-m-close{
  position: absolute; top: 16px; right: 16px;
}
#stsl-cert-modal.open .stsl-modal-controls .stsl-m-zoom-out{
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
}
#stsl-cert-modal.open .stsl-modal-controls .stsl-m-zoom-in{
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
}


/* === Fullscreen modal control placement with strong specificity === */
#stsl-cert-modal.open .stsl-modal-content{ position:fixed !important; inset:0; display:flex; align-items:center; justify-content:center; }
#stsl-cert-modal.open .stsl-modal-controls{ position:static !important; right:auto !important; bottom:auto !important; width:0; height:0; overflow:visible; }
#stsl-cert-modal.open .stsl-modal-controls .stsl-m-close{ position:fixed !important; top:16px; right:16px; }
#stsl-cert-modal.open .stsl-modal-controls .stsl-m-zoom-out{ position:fixed !important; left:16px; top:50%; transform:translateY(-50%); }
#stsl-cert-modal.open .stsl-modal-controls .stsl-m-zoom-in{ position:fixed !important; right:16px; top:50%; transform:translateY(-50%); }


/* Ensure image renders crisply, no interpolation blur */
#stsl-modal-img{ image-rendering:auto; }


/* Force positions of controls (fullscreen only) */
#stsl-cert-modal.open .stsl-modal-controls{all:unset; position:static !important;}
#stsl-cert-modal.open .stsl-modal-controls .stsl-m-close{ position:fixed !important; top:16px !important; right:16px !important; z-index:10001 !important; }
#stsl-cert-modal.open .stsl-modal-controls .stsl-m-zoom-out{ position:fixed !important; left:16px !important; top:50% !important; transform:translateY(-50%) !important; z-index:10001 !important; }
#stsl-cert-modal.open .stsl-modal-controls .stsl-m-zoom-in{ position:fixed !important; right:16px !important; top:50% !important; transform:translateY(-50%) !important; z-index:10001 !important; }