/* ==========================================================
   Mel Gabardo – estilos das partes criadas pelo plugin.
   Cores, fontes e layout geral ficam no Divi
   (Divi > Opções do Tema e Divi > Construtor de Temas).
   ========================================================== */
:root {
  --mg-papel: #F5F2EE;
  --mg-tinta: #2E2A27;
  --mg-pedra: #7A7068;
  --mg-nevoa: #E7E1DA;
  --mg-linha: #D6CEC5;
  --mg-pix: #2F6B4F;
  --mg-serif: 'Marcellus', Georgia, serif;
  --mg-sans: 'Karla', 'Segoe UI', Arial, sans-serif;
}

/* Faixa de avisos */
.mg-avisos { background: var(--mg-tinta); color: #EFE9E3; font: 13px/1.4 var(--mg-sans); overflow: hidden; position: relative; z-index: 100000; }
.mg-avisos-trilho { display: flex; justify-content: center; gap: 48px; padding: 8px 24px; white-space: nowrap; }
@media (max-width: 900px) {
  .mg-avisos-trilho { justify-content: flex-start; animation: mg-rolar 24s linear infinite; }
  @keyframes mg-rolar { to { transform: translateX(-60%); } }
}
@media (prefers-reduced-motion: reduce) { .mg-avisos-trilho { animation: none; } }

/* Parcelas e PIX abaixo do preço */
.mg-condicoes { display: block; font-family: var(--mg-sans); line-height: 1.45; margin-top: 2px; }
.mg-parcelas, .mg-pix { display: block; font-size: 13px; font-weight: 400; }
.mg-parcelas { color: var(--mg-pedra); }
.mg-pix { color: var(--mg-pix); font-weight: 500; }
.mg-condicoes .woocommerce-Price-amount { font-weight: inherit; }
.woocommerce .summary .mg-condicoes .mg-parcelas,
.woocommerce .summary .mg-condicoes .mg-pix { font-size: 15px; }

/* Benefícios */
.mg-beneficios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; font-family: var(--mg-sans); }
.mg-beneficios div { display: flex; flex-direction: column; font-size: 13px; color: var(--mg-pedra); }
.mg-beneficios strong { font-family: var(--mg-serif); font-weight: 400; font-size: 18px; color: var(--mg-tinta); }
@media (max-width: 860px) { .mg-beneficios { grid-template-columns: repeat(2, 1fr); } }

/* Login e cadastro: caixa centralizada */
.mg-acesso { max-width: 440px; margin: 40px auto; font-family: var(--mg-sans); }
.mg-acesso.mg-acesso-cadastro { max-width: 560px; }
.mg-acesso-box { background: #fff; border: 1px solid var(--mg-linha); padding: 40px 40px 32px; }
.mg-acesso-titulo { font-family: var(--mg-serif); font-weight: 400; font-size: 32px; text-align: center; margin: 0 0 6px; padding: 0; }
.mg-acesso-sub { text-align: center; color: var(--mg-pedra); font-size: 14px; margin: 0 0 24px; }
.mg-acesso form.login, .mg-acesso form.register { border: 0 !important; padding: 0 !important; margin: 0 !important; }
.mg-acesso .form-row { padding: 0 !important; margin: 0 0 14px !important; float: none !important; width: 100% !important; }
.mg-acesso label { display: block; font-size: 14px; margin-bottom: 5px; color: var(--mg-tinta); }
.mg-acesso input.input-text { width: 100%; border: 1px solid var(--mg-linha) !important; background: #fff !important; padding: 11px 12px !important; border-radius: 0 !important; font-size: 15px; box-sizing: border-box; }
.mg-acesso input.input-text:focus { border-color: var(--mg-tinta) !important; outline: 1px solid var(--mg-tinta); }
.mg-duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.mg-linha-opcoes { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin: 2px 0 18px; gap: 12px; flex-wrap: wrap; }
.mg-linha-opcoes label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.mg-linha-opcoes a, .mg-acesso .mg-aceite a { color: var(--mg-tinta); text-decoration: underline; }
.mg-aceite label { display: flex !important; gap: 8px; align-items: flex-start; font-size: 14px; }
.mg-aceite input { margin-top: 3px; flex-shrink: 0; }
.mg-dica { font-size: 13px; color: var(--mg-pedra); margin: -4px 0 14px; }
.mg-acesso .button.mg-botao-largo { width: 100%; display: block; text-align: center; background: var(--mg-tinta) !important; color: #fff !important;
  border: 1px solid var(--mg-tinta) !important; border-radius: 0 !important; padding: 13px 20px !important; font-size: 15px !important; margin: 4px 0 0 !important; }
.mg-acesso .button.mg-botao-largo:hover { background: #4A433E !important; }
.mg-acesso .button.mg-botao-largo:after { display: none !important; } /* remove a seta animada dos botões do Divi */
.mg-acesso-troca { text-align: center; font-size: 14px; color: var(--mg-pedra); margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--mg-linha); }
.mg-acesso-troca a { color: var(--mg-tinta); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .mg-acesso { margin: 20px auto; }
  .mg-acesso-box { padding: 28px 20px 24px; }
  .mg-duas-colunas { grid-template-columns: 1fr; }
}

/* PIX: QR Code e copia e cola */
.mg-pagar-pix { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; background: #fff; border: 1px solid var(--mg-linha); padding: 28px; margin: 0 0 28px; font-family: var(--mg-sans); }
.mg-pagar-pix h2 { font-family: var(--mg-serif); font-weight: 400; font-size: 24px; margin: 0 0 6px; padding: 0; }
.mg-pagar-pix p { margin: 0 0 14px; }
.mg-qr { width: 170px; aspect-ratio: 1; display: grid; place-items: center; font-size: 12px; background: repeating-conic-gradient(var(--mg-tinta) 0 25%, #fff 0 50%) 0 0 / 17px 17px; border: 10px solid #fff; outline: 1px solid var(--mg-linha); }
.mg-qr span { background: #fff; padding: 3px 6px; }
.mg-copia { display: flex; }
.mg-copia input { flex: 1; min-width: 0; border: 1px solid var(--mg-linha); padding: 11px; font-size: 13px; background: var(--mg-papel); }
.mg-copia .button { border-radius: 0 !important; }
@media (max-width: 700px) { .mg-pagar-pix { grid-template-columns: 1fr; } }

/* Status "Enviado" na lista de pedidos do cliente */
.woocommerce-orders-table__row--status-enviado .woocommerce-orders-table__cell-order-status { color: var(--mg-pix); }

/* Selo de esboço */
.mg-selo-esboco { position: fixed; right: 16px; bottom: 16px; z-index: 99999; background: #FFF6C9; color: #5B4A00; border: 1px dashed #B9A24A; padding: 6px 12px; font: 12px var(--mg-sans); border-radius: 4px; pointer-events: none; }