/* OSPrimeApp 5.7 - WhatsApp / aplicativo portatil do computador

   O bloco .wa-old-hidden-actions carrega o onboarding do Desktop Portable:
   titulo, passos numerados, "Baixar aplicativo Windows" e "Abrir pelo
   aplicativo". Ele estava anulado por um display:none!important no
   legacy.css, entao nunca aparecia. A regra foi retirada de la e o layout
   passa a morar aqui, junto das demais areas ja migradas. */
body.premium-ui .wa-old-hidden-actions {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0 18px 14px 18px;
  padding: 14px 16px;
  border: 1px solid rgba(41, 70, 108, .55);
  border-radius: 14px;
  background: rgba(9, 18, 32, .55);
}
/* No HTML os botoes vem antes do texto. Em vez de remexer na marcacao
   que o app.js referencia por id, a leitura correta - titulo, passos e
   so entao as acoes - e resolvida pela ordem do flex. */
body.premium-ui .wa-old-hidden-actions #waSetupTitle { order: 1; }
body.premium-ui .wa-old-hidden-actions #waSetupSteps { order: 2; }
body.premium-ui .wa-old-hidden-actions #waDesktopDownload { order: 3; }
body.premium-ui .wa-old-hidden-actions #waInstallerFacts { order: 4; }
body.premium-ui .wa-old-hidden-actions #waPortableShortcut { order: 5; }
body.premium-ui .wa-old-hidden-actions #waInstanceGenerate { order: 6; }

body.premium-ui .wa-old-hidden-actions #waSetupTitle {
  font-weight: 800;
  font-size: 14px;
  color: #e8f0ff;
}
body.premium-ui .wa-old-hidden-actions #waSetupSteps {
  margin: 0;
  padding-left: 20px;
  color: #a9bddb;
  font-size: 12.5px;
  line-height: 1.65;
}
body.premium-ui .wa-old-hidden-actions #waSetupSteps li { margin: 0 0 2px; }
/* Ficha do instalador: aviso do SmartScreen + versao, tamanho e SHA-256.
   Sem assinatura digital, e o que permite a loja conferir o arquivo. */
body.premium-ui .wa-old-hidden-actions #waInstallerFacts {
  align-self: stretch;
  margin: 2px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(233, 179, 68, .34);
  border-left: 3px solid #e7b744;
  border-radius: 10px;
  background: rgba(233, 179, 68, .07);
}
body.premium-ui #waInstallerFacts .wa-installer-warn {
  margin: 0 0 10px;
  color: #e8d7ae;
  font-size: 12.5px;
  line-height: 1.55;
}
body.premium-ui #waInstallerFacts dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0 0 8px;
  font-size: 12px;
}
body.premium-ui #waInstallerFacts dt { color: #93a7c4; }
body.premium-ui #waInstallerFacts dd { margin: 0; color: #dbe7f8; min-width: 0; }
body.premium-ui #waInstallerFacts dd code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
}
/* O hash ocupa a linha inteira e quebra; o botao desce alinhado com ele,
   em vez de ficar solto no meio da ultima linha do texto. */
body.premium-ui #waInstallerFacts dd .btn {
  display: block;
  margin-top: 6px;
  height: 24px;
  min-height: 24px;
  padding: 0 10px;
  font-size: 11px;
}
body.premium-ui #waInstallerFacts > small {
  display: block;
  color: #93a7c4;
  font-size: 11.5px;
  line-height: 1.5;
}
body.premium-ui #waInstallerFacts > small code { font-size: 11px; overflow-wrap: anywhere; }

/* Alternativa sem executavel: texto discreto, para nao concorrer com os botoes. */
body.premium-ui .wa-old-hidden-actions #waPortableShortcut {
  margin: -2px 0 2px;
  color: #8fa6c6;
  font-size: 11.5px;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
body.premium-ui .wa-old-hidden-actions #waPortableShortcut:hover {
  color: #cfe0f7;
}
body.premium-ui .wa-old-hidden-actions .btn {
  height: 37px;
  min-height: 37px;
  padding: 0 16px;
}
/* O JS troca o texto e a visibilidade destes conforme o app esteja aberto
   no navegador ou dentro do proprio portable; .hidden continua mandando. */
body.premium-ui .wa-old-hidden-actions .hidden { display: none !important; }

body.premium-ui .wa-easy-guide {
  display: grid;
  gap: 18px;
}
body.premium-ui .wa-easy-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
body.premium-ui .wa-easy-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 178px;
  padding: 16px;
  border: 1px solid rgba(71, 85, 105, .72);
  border-radius: 12px;
  background: #111827;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}
body.premium-ui .wa-easy-card.recommended {
  border-color: rgba(34, 197, 94, .5);
  background: linear-gradient(180deg, rgba(22, 101, 52, .2), #111827 58%);
}
body.premium-ui .wa-easy-badge {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .12);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 800;
}
body.premium-ui .wa-easy-card.recommended .wa-easy-badge {
  background: rgba(34, 197, 94, .16);
  color: #bbf7d0;
}
body.premium-ui .wa-easy-card b {
  font-size: 15px;
  line-height: 1.25;
}
body.premium-ui .wa-easy-card p,
body.premium-ui .wa-easy-card small {
  margin: 0;
  color: #a8bad4;
  font-size: 12.5px;
  line-height: 1.5;
}
body.premium-ui .wa-easy-card small {
  color: #d7e3f5;
  font-weight: 700;
}
body.premium-ui .wa-server-panel {
  display: grid;
  gap: 16px;
}
body.premium-ui .wa-server-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  align-items: start;
}
body.premium-ui .wa-server-qr {
  width: 100%;
  min-height: 240px;
  margin: 0;
}
body.premium-ui .whatsapp-instance-panel.wa-old-print-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 292px !important;
  gap: 18px 22px !important;
  padding: 20px !important;
  border: 1px solid rgba(51, 65, 85, .9) !important;
  border-radius: 14px !important;
  background: #0f172a !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18) !important;
}
body.premium-ui .wa-old-mode-title {
  grid-column: 1;
  margin: 0 !important;
  color: #e8f0ff !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}
body.premium-ui .wa-old-mode-grid {
  grid-column: 1;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}
body.premium-ui .wa-old-mode-card {
  min-height: 174px !important;
  padding: 15px !important;
  border: 1px solid rgba(51, 65, 85, .95) !important;
  border-radius: 12px !important;
  background: #111827 !important;
}
body.premium-ui .wa-old-mode-card.active {
  padding: 14px !important;
  border: 2px solid rgba(34, 197, 94, .8) !important;
  background: linear-gradient(180deg, rgba(22, 101, 52, .18), #111827 62%) !important;
}
body.premium-ui .wa-old-mode-card b {
  font-size: 13px !important;
}
body.premium-ui .wa-old-mode-card small {
  color: #9fb2ce !important;
  font-size: 12px !important;
}
body.premium-ui .wa-old-mode-card li {
  display: grid !important;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  color: #bbf7d0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
body.premium-ui .wa-old-mode-card li.bad {
  color: #fecaca !important;
}
body.premium-ui .wa-old-mode-card .li-ico {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
}
body.premium-ui .wa-old-mode-card .li-ico svg {
  width: 14px;
  height: 14px;
}
body.premium-ui .wa-old-qr-box {
  grid-column: 2;
  grid-row: 1 / span 4;
  width: 100% !important;
  height: 292px !important;
  min-height: 292px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12) !important;
}
body.premium-ui .wa-old-qr-box canvas,
body.premium-ui .wa-old-qr-box img,
body.premium-ui .wa-old-qr-box svg,
body.premium-ui .wa-old-qr-box table {
  max-width: 260px !important;
  max-height: 260px !important;
  width: 260px !important;
  height: 260px !important;
}
body.premium-ui .wa-old-meta,
body.premium-ui .wa-old-free-note,
body.premium-ui .wa-old-actions,
body.premium-ui .wa-old-help {
  grid-column: 1;
  margin-left: 0 !important;
}
body.premium-ui .wa-old-meta {
  margin-top: -4px !important;
}
body.premium-ui .wa-old-free-note {
  max-width: 760px;
  margin-top: 0 !important;
  padding: 11px 13px;
  border: 1px solid rgba(56, 189, 248, .26);
  border-radius: 10px;
  background: rgba(8, 47, 73, .24);
  color: #bae6fd !important;
  font-size: 12px !important;
}
body.premium-ui .wa-old-actions {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body.premium-ui .wa-old-actions .btn {
  border-radius: 8px !important;
}
body.premium-ui .wa-old-help.bigger {
  margin-bottom: 0 !important;
}
body.premium-ui .wa-old-hidden-actions {
  grid-column: 1 / -1;
  margin: 0;
  border-radius: 12px;
}
body.premium-ui .wa-instance-credentials {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid rgba(56, 189, 248, .22);
  border-radius: 12px;
  background: rgba(8, 47, 73, .18);
}
body.premium-ui .wa-instance-credentials.hidden {
  display: none !important;
}
body.premium-ui .wa-instance-credentials > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}
body.premium-ui .wa-instance-credentials span {
  color: #9fb2ce;
  font-size: 11px;
  font-weight: 800;
}
body.premium-ui .wa-instance-credentials code,
body.premium-ui #waInstallerFacts dd code {
  display: block;
  max-width: 100%;
  padding: 7px 8px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(2, 6, 23, .38);
  color: #e2e8f0;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  user-select: all;
}

@media (max-width: 1180px) {
  body.premium-ui .wa-easy-options,
  body.premium-ui .wa-server-layout,
  body.premium-ui .whatsapp-instance-panel.wa-old-print-panel,
  body.premium-ui .wa-old-mode-grid,
  body.premium-ui .wa-instance-credentials {
    grid-template-columns: 1fr !important;
  }
  body.premium-ui .wa-easy-card {
    min-height: 0;
  }
  body.premium-ui .wa-old-qr-box {
    grid-column: 1;
    grid-row: auto;
    height: 246px !important;
    min-height: 246px !important;
  }
  body.premium-ui .wa-old-qr-box canvas,
  body.premium-ui .wa-old-qr-box img,
  body.premium-ui .wa-old-qr-box svg,
  body.premium-ui .wa-old-qr-box table {
    max-width: 220px !important;
    max-height: 220px !important;
    width: 220px !important;
    height: 220px !important;
  }
  body.premium-ui .wa-old-hidden-actions {
    margin: 0;
    align-items: stretch;
  }
}

@media (max-width: 720px) {
  body.premium-ui .wa-old-hidden-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Container do QR Code WhatsApp VPS */
body.premium-ui .wa-instance-qr,
body.premium-ui #waInstanceQr {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 292px) !important;
  min-height: 270px !important;
  margin: 0 auto !important;
  padding: 12px !important;
  border: 1px dashed rgba(45, 91, 129, .75) !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  color: #1e293b !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

body.premium-ui .wa-instance-qr svg,
body.premium-ui #waInstanceQr svg {
  display: block !important;
  width: 240px !important;
  height: 240px !important;
  max-width: 100% !important;
  max-height: 240px !important;
  margin: auto !important;
}

body.premium-ui .wa-instance-qr span,
body.premium-ui #waInstanceQr span {
  display: block !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}