.btn-preview-tablet{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:8px 12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#ffffff;
  font-weight:700;
  cursor:pointer;
}
.btn-preview-tablet:hover{ background:#f9fafb; }

.tabletPreviewModal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;          /* centar po visini */
  justify-content:center;      /* centar po širini */
  padding:24px;
}

.tabletPreviewModal.is-open{
  display:flex;                /* umjesto block */
}

.tabletPreviewBackdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,0.60);
}

.tabletPreviewDialog{
width:min(800px, 90vw);
max-width:800px;
  height:auto;
}

.tabletPreviewClose{
  position:absolute;
  top:10px; 
  right:10px;
  z-index:10;
  width:40px; height:40px;
  border:0;
  border-radius:10px;
  background:#ffffff;
  font-size:28px;
  line-height:38px;
  cursor:pointer;
}

.tabletPreviewFrame{
  position:relative;
  width:100%;
  aspect-ratio: 900 / 603;   /* TOČAN OMJER PNG-a */
  height:auto;
  background:url('../images/tablet.png') center/contain no-repeat;
}

.tabletPreviewIframe{
  position:absolute;
  left: 4.944%;
  top: 7.545%;
  width: 90.111%;
  height: 84.7%;
  border:0;
  background:#fff;
    transform: scale(0.9);
  transform-origin: top left;
  width: calc(90.111% / 0.9);
  height: calc(84.909% / 0.9);
}