/* Estilo do widget Deluxe. As cores usam variáveis: ajuste para o visual do seu site. */
#deluxe {
  --dlx-fundo: #0d1b2a;
  --dlx-borda: #1f3a5a;
  --dlx-texto: #dbe7f3;
  --dlx-suave: #8aa4bf;
  --dlx-destaque: #36c5f0;
  --dlx-ok: #3ddc97;
  --dlx-erro: #ff6b6b;
  max-width: 420px;
  margin: 0 auto;
  color: var(--dlx-texto);
  font-family: inherit;
}
.dlx-caixa {
  background: var(--dlx-fundo);
  border: 1px solid var(--dlx-borda);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dlx-ok { border-color: var(--dlx-ok); }
.dlx-titulo { font-size: 1.25rem; font-weight: 700; margin: 0; }
.dlx-texto { margin: 0; color: var(--dlx-suave); line-height: 1.5; }
.dlx-pequeno { font-size: .85rem; }
.dlx-erro { margin: 0; color: var(--dlx-erro); }
.dlx-valores { display: flex; gap: 8px; }
.dlx-valores button {
  flex: 1; padding: 10px; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--dlx-texto);
  border: 1px solid var(--dlx-borda); font: inherit; font-weight: 600;
}
.dlx-valores button.ativo { border-color: var(--dlx-destaque); color: var(--dlx-destaque); }
.dlx-campo { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--dlx-suave); }
.dlx-campo small { font-size: .78rem; }
.dlx-campo input, .dlx-campo textarea {
  background: rgba(255,255,255,.04); color: var(--dlx-texto);
  border: 1px solid var(--dlx-borda); border-radius: 8px;
  padding: 10px; font: inherit; resize: none;
}
.dlx-campo textarea { font-family: ui-monospace, monospace; font-size: .75rem; word-break: break-all; }
.dlx-principal {
  display: block; text-align: center; text-decoration: none;
  background: var(--dlx-destaque); color: #04121f;
  border: 0; border-radius: 10px; padding: 12px; cursor: pointer;
  font: inherit; font-weight: 700;
}
.dlx-principal:disabled { opacity: .6; cursor: wait; }
.dlx-baixar { background: var(--dlx-ok); }
.dlx-link {
  background: none; border: 0; color: var(--dlx-suave); cursor: pointer;
  text-decoration: underline; font: inherit; font-size: .9rem;
}
.dlx-qr { width: 220px; height: 220px; align-self: center; background: #fff; border-radius: 8px; padding: 8px; }
.dlx-aguardando { margin: 0; display: flex; align-items: center; gap: 10px; }
.dlx-pulso {
  width: 10px; height: 10px; border-radius: 50%; background: var(--dlx-destaque);
  animation: dlx-pulso 1.2s ease-in-out infinite;
}
@keyframes dlx-pulso { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }

/* ---- telas de conta ---- */
.dlx-form { display: flex; flex-direction: column; gap: 14px; }
.dlx-abas { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--dlx-borda); border-radius: 10px; }
.dlx-abas button {
  flex: 1; padding: 8px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--dlx-suave); font: inherit; font-weight: 600;
}
.dlx-abas button.ativo { background: var(--dlx-destaque); color: #04121f; }
.dlx-codigo {
  font-family: ui-monospace, Consolas, monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: 2px;
  text-align: center; padding: 14px; border: 2px dashed var(--dlx-destaque); border-radius: 10px; user-select: all;
}
.dlx-linha { display: flex; gap: 8px; }
.dlx-secundario {
  flex: 1; padding: 10px; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 600;
  background: transparent; color: var(--dlx-texto); border: 1px solid var(--dlx-borda);
}
.dlx-check { display: flex; gap: 8px; align-items: center; font-size: .9rem; cursor: pointer; }
.dlx-conta { text-align: center; }
.dlx-conta .dlx-link { font-size: inherit; padding: 0; }