/* Pearl Institute Meme Generator styles */
:root{
  --ink:#0e1320;
  --muted:#6b7280;
  --radius:20px;
  --accent:#0d6efd;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:#f4f6fb;
  color:#0e1320;
  overflow-x:hidden; /* prevent horizontal scroll */
}

/* cards */
.card{border-radius:var(--radius)}
.card-body{padding:1.25rem 1.25rem}

/* stage */
.stage-wrapper{width:100%;}
.aspect-frame{width:100%; background:#111; border-radius:16px; overflow:hidden; position:relative}
.aspect-frame::before{content:""; display:block; padding-top:100%;} /* default 1:1 */
.ratio-16x9::before{padding-top:56.25%}
.ratio-9x16::before{padding-top:177.78%}

.preview-stage{
  position:absolute; inset:0; background:#000; display:flex; align-items:center; justify-content:center;
}
#baseImage{max-width:100%; max-height:100%;}

.text-box{
  position:absolute; user-select:none; touch-action:none; cursor:move;
  padding:2px 6px;
  border:1px dashed rgba(255,255,255,.2);
  border-radius:8px;
}
.text-box.ui-draggable-dragging{border-color:rgba(255,255,255,.6)}

.meme-text{
  font-family:Anton, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  text-transform:uppercase;
  color:#fff; -webkit-text-stroke: 6px #000;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  font-size:48px; letter-spacing:.5px; line-height:1.1;
}
.watermark{
  font-size:18px; color:#fff; opacity:.6;
}

/* utilities */
.ui-resizable-handle{background:rgba(255,255,255,.6); width:10px; height:10px; border-radius:2px}
.ui-resizable-ne, .ui-resizable-se, .ui-resizable-sw, .ui-resizable-nw{position:absolute}
.ui-resizable-se{right:-5px; bottom:-5px}

@media (max-width: 991.98px){
  .card-body{padding:1rem}
}