/* ===== Fonte ABCDiatypeExpanded-Light ===== */
@font-face{
  font-family:"ABCDiatypeExpanded";
  src:url("/media/font/ABCDiatypeExpanded-Light-Trial.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}


:root{
  --bg:#f7dcc2; /* tom pêssego do fundo */
  --fg:#111;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg) url("https://y1nrmnwgpdmg1oxw.public.blob.vercel-storage.com/Folders/GIF/load.gif") center/cover no-repeat fixed;
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Container do pop-up */
.qty-overlay{position:fixed;inset:0;display:grid;place-items:center}
.qty-wrap{width:min(1200px,94vw);display:grid;grid-template-columns:1fr;gap:24px}
.qty-left{max-width:560px}

/* Título e subtítulo com a nova fonte */
.qty-title{
  font-family:"ABCDiatypeExpanded", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:300;                 /* a fonte é Light */
  font-synthesis-weight:none;      /* evita engrossar artificialmente */
  font-size:40px;
  line-height:1.04;
  margin:0 0 10px;
  color:#111;
}
.qty-sub{
  font-size:14px;
  color:#333;
  margin:0 0 28px;
}

/* Grid dos botões */
.qty-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,220px));
  gap:18px;
}

/* Botões */
.qty-btn{
  display:grid;
  gap:4px;
  align-content:center;
  justify-items:center;
  min-height:110px;
  padding:10px 12px;
  background:#000;
  color:#fff;
  border:0;
  border-radius:6px;
  cursor:pointer;
  font-family:"ABCDiatypeExpanded", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:300;
  font-synthesis-weight:none;
  text-align:center;
}
.qty-btn .n{
  font-weight:800;
  font-family:Inter, system-ui, sans-serif;
  font-size:18px;
  line-height:1;
}
.qty-btn .lbl{
  font-size:14px;
}
.qty-btn .pr{
  font-weight:700;
  font-size:14px;
  line-height:1.1;
}
.qty-btn .pix{
  font-size:11px;
  line-height:1.2;
  color:rgba(255,255,255,.72);
}

.qty-btn.cancel{
  background:#fff;
  color:#111;
  border:1px solid #111;
}
.qty-btn.cancel .lbl{ text-decoration:underline }

/* Responsivo */
@media (max-width:960px){
  .qty-wrap{width:min(680px,94vw)}
  .qty-title{font-size:32px}
  .qty-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mooody Loader (leve + responsivo)
   - overlay com blur do conteúdo ao fundo
   - logo transparente (use .webp/.png/.svg)
*/

:root{
  --ml-blur: 14px;
  --ml-dim: 0.14;           /* opacidade do véu */
  --ml-card: rgba(255,255,255,0.10);
  --ml-card-border: rgba(255,255,255,0.16);
  --ml-shadow: 0 18px 60px rgba(0,0,0,0.25);
}

/* Overlay */
#mooodyLoader{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;

  /* Blur real (quando suportado) */
  background: rgba(0,0,0,var(--ml-dim));
  -webkit-backdrop-filter: blur(var(--ml-blur)) saturate(1.1);
  backdrop-filter: blur(var(--ml-blur)) saturate(1.1);

  transition: opacity 220ms ease, visibility 0ms linear 220ms;
  opacity: 1;
  visibility: visible;
}

/* Fallback quando backdrop-filter não existir */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #mooodyLoader{
    background: rgba(0,0,0,0.22);
  }
}

/* Card central */
#mooodyLoader .ml-card{
  width: min(92vw, 520px);
  padding: clamp(16px, 2.6vw, 28px);
  border-radius: 18px;
  background: var(--ml-card);
  border: 1px solid var(--ml-card-border);
  box-shadow: var(--ml-shadow);
  display: grid;
  gap: 14px;
  justify-items: center;
}

/* Logo responsivo */
#mooodyLoader .ml-logo{
  width: clamp(160px, 32vw, 420px);
  height: auto;
  display: block;
  transform-origin: 50% 50%;
  animation: mlPop 900ms ease-in-out infinite;
}

/* Spinner simples (CSS) */
#mooodyLoader .ml-spin{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.85);
  animation: mlSpin 850ms linear infinite;
}

@keyframes mlSpin{ to{ transform: rotate(360deg); } }
@keyframes mlPop{
  0%,100%{ transform: scale(1); opacity: 0.95; }
  50%{ transform: scale(1.02); opacity: 1; }
}

/* Mobile: blur menor e card mais compacto */
@media (max-width: 520px){
  :root{ --ml-blur: 10px; --ml-dim: 0.18; }
  #mooodyLoader .ml-card{ border-radius: 16px; }
  #mooodyLoader .ml-spin{ width: 30px; height: 30px; }
}

/* Acessibilidade: reduzir animação */
@media (prefers-reduced-motion: reduce){
  #mooodyLoader .ml-logo,
  #mooodyLoader .ml-spin{
    animation: none !important;
  }
}

/* Estado escondido */
#mooodyLoader.is-hidden{
  opacity: 0;
  visibility: hidden;
}

.qty-installments-info{
  grid-column:1 / -1;
  text-align:center;
  font-size:12px;
  line-height:1.4;
  color:#111;
  margin-top:2px;
}