/* =====================================================================
   TIRZEC — Polimento premium (vanilla, plug-and-play)
   Nível "Stripe/Apple": skeletons, estados de botão, validação,
   hover de produto, escala 8px, sombras sutis. Sem dependências.
   Targeta classes genéricas reutilizáveis + classes já existentes
   da loja. Puramente aditivo — não quebra layout nem JS.
   ===================================================================== */

/* ---- Tokens de polimento (não sobrescreve os do site) ---- */
:root {
  --pl-ease: cubic-bezier(.4, 0, .2, 1);
  --pl-spring: cubic-bezier(.34, 1.56, .64, 1);
  --pl-skel-base: #e8edf3;
  --pl-skel-hi: #f6f9fc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --pl-skel-base:#1e293b; --pl-skel-hi:#334155; }
}

/* ---- 1. SKELETON LOADING (shimmer 45°, sem layout shift) ---- */
.skeleton,
.skeleton-text,
.skeleton-title,
.skeleton-img,
.skeleton-btn {
  position: relative;
  overflow: hidden;
  background: var(--pl-skel-base);
  border-radius: 10px;
}
.skeleton::after,
.skeleton-text::after,
.skeleton-title::after,
.skeleton-img::after,
.skeleton-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(115deg, transparent 0%, var(--pl-skel-hi) 50%, transparent 100%);
  animation: pl-shimmer 1.4s var(--pl-ease) infinite;
}
.skeleton-text { height: 12px; margin: 8px 0; border-radius: 6px; }
.skeleton-title { height: 20px; width: 60%; margin: 8px 0 16px; border-radius: 8px; }
.skeleton-img { width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; }
.skeleton-btn { height: 48px; border-radius: 12px; }
.skeleton-text.w-80 { width: 80%; } .skeleton-text.w-60 { width: 60%; } .skeleton-text.w-40 { width: 40%; }
@keyframes pl-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .skeleton::after, .skeleton-text::after, .skeleton-title::after, .skeleton-img::after, .skeleton-btn::after { animation: none; }
}

/* ---- 2. BOTÃO: estados normal/hover/active/loading/success ---- */
.pl-btn, .btn-submit-action, .btn-cta-main, .btn-copiar-pix {
  transition: transform .12s var(--pl-ease), box-shadow .2s var(--pl-ease), background-color .2s var(--pl-ease), filter .2s var(--pl-ease);
}
.pl-btn:active, .btn-submit-action:active, .btn-cta-main:active { transform: translateY(1px) scale(.995); }

/* loading: spinner integrado, texto some, largura estável */
.pl-btn.is-loading, .btn-submit-action.is-loading {
  color: transparent !important; pointer-events: none; position: relative;
}
.pl-btn.is-loading::after, .btn-submit-action.is-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: pl-spin .6s linear infinite;
}
@keyframes pl-spin { 100% { transform: rotate(360deg); } }

/* success: vira verde com checkmark */
.pl-btn.is-success, .btn-submit-action.is-success {
  color: transparent !important; background: #059669 !important; pointer-events: none;
}
.pl-btn.is-success::after, .btn-submit-action.is-success::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 22px; height: 12px; margin: -9px 0 0 -11px;
  border-left: 3px solid #fff; border-bottom: 3px solid #fff;
  transform: rotate(-45deg) scale(0); transform-origin: center;
  animation: pl-check .35s var(--pl-spring) forwards;
}
@keyframes pl-check { to { transform: rotate(-45deg) scale(1); } }

/* ---- 3. INPUTS: foco suave + shake no erro ---- */
.pl-input, .pl-field input, .pl-field select, .pl-field textarea {
  transition: border-color .18s var(--pl-ease), box-shadow .18s var(--pl-ease), background-color .18s var(--pl-ease);
}
.pl-field input.is-invalid, .pl-input.is-invalid {
  border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
  animation: pl-shake .4s var(--pl-ease);
}
.pl-field input.is-valid, .pl-input.is-valid {
  border-color: #059669 !important; box-shadow: 0 0 0 3px rgba(5,150,105,.12) !important;
}
@keyframes pl-shake {
  10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); }
  30%,50%,70% { transform: translateX(-4px); } 40%,60% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .pl-field input.is-invalid, .pl-input.is-invalid { animation: none; } }

/* ---- 4. HOVER de produto (zoom sutil + revelar CTA sem deslocar) ---- */
.pl-product, .plan-card {
  transition: transform .25s var(--pl-ease), box-shadow .25s var(--pl-ease);
  will-change: transform;
}
.pl-product:hover, .plan-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,23,42,.14); }
.pl-product .pl-product-img { overflow: hidden; border-radius: 14px; }
.pl-product .pl-product-img img { transition: transform .35s var(--pl-ease); display: block; width: 100%; }
.pl-product:hover .pl-product-img img { transform: scale(1.05); }
.pl-reveal { opacity: 0; transform: translateY(6px); transition: opacity .25s var(--pl-ease), transform .25s var(--pl-ease); }
.pl-product:hover .pl-reveal, .pl-product:focus-within .pl-reveal { opacity: 1; transform: translateY(0); }

/* ---- 5. Micro-interação: badge do carrinho quicando ---- */
.pl-bump { animation: pl-bump .4s var(--pl-spring); }
@keyframes pl-bump { 0%{transform:scale(1);} 40%{transform:scale(1.25);} 100%{transform:scale(1);} }

/* ---- 6. Entrada suave de blocos (opt-in) ---- */
.pl-fade-in { animation: pl-fade .4s var(--pl-ease) both; }
@keyframes pl-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- 7. SKELETON no checkout PIX (QR + copia-e-cola) ----
   Overlays absolutos por cima do conteúdo real; só aparecem enquanto a tela
   PIX carrega o QR (#pixScreen.pl-loading). Não deslocam nada (position:absolute)
   e herdam o shimmer + reduced-motion de .skeleton. */
#pixScreen .pl-skel-overlay { position: absolute; z-index: 3; display: none; pointer-events: none; }
#pixScreen.pl-loading .pl-skel-overlay { display: block; }
.pix-qr-container .pl-skel-qr { inset: 16px; border-radius: 8px; }
.pix-input-group .pl-skel-code { inset: 0; border-radius: 10px; }

/* toast sutil */
.pl-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: #0f172a; color: #fff; padding: 12px 20px; border-radius: 12px; font-weight: 600;
  box-shadow: 0 12px 32px rgba(15,23,42,.28); opacity: 0; pointer-events: none;
  transition: opacity .25s var(--pl-ease), transform .25s var(--pl-spring); z-index: 9999;
}
.pl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }