/* StudioBoard — Chrome unificado v1
   Faz Ativar/Cancelar reutilizarem exatamente o mesmo header/ribbon/footer da Minha Conta.
   Não altera formulários, JS, pagamento, tokens ou rotas. */

body.account-page.activation-page,
body.account-page.cancellation-page {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

body.account-page.activation-page > .activation-main,
body.account-page.cancellation-page > .cancellation-main {
  flex: 1 0 auto !important;
}

/* HEADER / RIBBON — mesma geometria da Minha Conta */
body.account-page.activation-page .flow-header,
body.account-page.cancellation-page .flow-header {
  height: 68px !important;
  min-height: 68px !important;
  background: rgba(248,250,253,.92) !important;
  border-bottom: 1px solid rgba(67,88,116,.16) !important;
  box-shadow: none !important;
  backdrop-filter: blur(22px) saturate(125%) !important;
}

body.account-page.activation-page .flow-header .flow-shell,
body.account-page.cancellation-page .flow-header .flow-shell {
  width: min(calc(100% - 54px), 1320px) !important;
  height: 68px !important;
  min-height: 68px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

body.account-page.activation-page .flow-header .flow-brand,
body.account-page.cancellation-page .flow-header .flow-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  color: #142033 !important;
  text-decoration: none !important;
}

body.account-page.activation-page .flow-header .flow-brand-copy,
body.account-page.cancellation-page .flow-header .flow-brand-copy {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.15 !important;
}

body.account-page.activation-page .flow-header .flow-brand-copy strong,
body.account-page.cancellation-page .flow-header .flow-brand-copy strong {
  display: inline-flex !important;
  align-items: baseline !important;
  font-size: 15px !important;
  letter-spacing: -.025em !important;
}

body.account-page.activation-page .flow-header .flow-brand-copy .brand-studio,
body.account-page.cancellation-page .flow-header .flow-brand-copy .brand-studio {
  color: #142033 !important;
}

body.account-page.activation-page .flow-header .flow-brand-copy .brand-board,
body.account-page.cancellation-page .flow-header .flow-brand-copy .brand-board {
  color: transparent !important;
  background: linear-gradient(110deg,#35c2ff 0%,#3d78ff 48%,#8a4dff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

body.account-page.activation-page .flow-header .flow-brand-copy small,
body.account-page.cancellation-page .flow-header .flow-brand-copy small {
  margin-top: 2px !important;
  color: #63748a !important;
  font-size: 8px !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  letter-spacing: .19em !important;
}

body.account-page.activation-page .flow-header .flow-nav,
body.account-page.cancellation-page .flow-header .flow-nav {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  margin-left: auto !important;
}

body.account-page.activation-page .flow-header .flow-nav > a,
body.account-page.cancellation-page .flow-header .flow-nav > a {
  position: relative !important;
  color: #68758a !important;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

body.account-page.activation-page .flow-header .flow-nav > a::after,
body.account-page.cancellation-page .flow-header .flow-nav > a::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 100% !important;
  bottom: -24px !important;
  height: 2px !important;
  background: linear-gradient(90deg,#35c2ff,#3d78ff 48%,#8a4dff) !important;
  transition: right .2s ease !important;
}

body.account-page.activation-page .flow-header .flow-nav > a:hover,
body.account-page.activation-page .flow-header .flow-nav > a:focus-visible,
body.account-page.activation-page .flow-header .flow-nav > a.is-active,
body.account-page.cancellation-page .flow-header .flow-nav > a:hover,
body.account-page.cancellation-page .flow-header .flow-nav > a:focus-visible,
body.account-page.cancellation-page .flow-header .flow-nav > a.is-active {
  color: #111b2d !important;
}

body.account-page.activation-page .flow-header .flow-nav > a:hover::after,
body.account-page.activation-page .flow-header .flow-nav > a:focus-visible::after,
body.account-page.activation-page .flow-header .flow-nav > a.is-active::after,
body.account-page.cancellation-page .flow-header .flow-nav > a:hover::after,
body.account-page.cancellation-page .flow-header .flow-nav > a:focus-visible::after,
body.account-page.cancellation-page .flow-header .flow-nav > a.is-active::after {
  right: 0 !important;
}

/* FOOTER — mesma estrutura, medidas e alinhamentos da Minha Conta */
body.account-page.activation-page > .account-site-footer,
body.account-page.cancellation-page > .account-site-footer {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}

body.account-page.activation-page .account-site-footer,
body.account-page.cancellation-page .account-site-footer {
  position: relative !important;
  width: 100% !important;
  background: #eef4fa !important;
  color: #61768d !important;
  padding: 0 0 26px !important;
  border: 0 !important;
}

body.account-page.activation-page .account-site-footer::before,
body.account-page.cancellation-page .account-site-footer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 1px !important;
  background: linear-gradient(90deg,#00c7ff 0%,#1687ff 48%,#4057ff 100%) !important;
  opacity: .48 !important;
}

body.account-page.activation-page .account-site-footer .account-footer-bottom,
body.account-page.cancellation-page .account-site-footer .account-footer-bottom {
  width: min(calc(100% - 54px), 1320px) !important;
  margin-inline: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding-top: 24px !important;
  border-top: 1px solid #cedae7 !important;
}

body.account-page.activation-page .account-site-footer .account-footer-legal,
body.account-page.cancellation-page .account-site-footer .account-footer-legal {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 22px !important;
}

body.account-page.activation-page .account-site-footer .account-footer-legal a,
body.account-page.activation-page .account-site-footer .account-footer-bottom p,
body.account-page.cancellation-page .account-site-footer .account-footer-legal a,
body.account-page.cancellation-page .account-site-footer .account-footer-bottom p {
  margin: 0 !important;
  color: #61768d !important;
  font-size: 10.5px !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
}

body.account-page.activation-page .account-site-footer .account-footer-legal a:hover,
body.account-page.activation-page .account-site-footer .account-footer-legal a:focus-visible,
body.account-page.cancellation-page .account-site-footer .account-footer-legal a:hover,
body.account-page.cancellation-page .account-site-footer .account-footer-legal a:focus-visible {
  color: #29445f !important;
}

@media (max-width: 1180px) and (min-width: 761px) {
  body.account-page.activation-page .flow-header .flow-nav,
  body.account-page.cancellation-page .flow-header .flow-nav { gap: 15px !important; }
  body.account-page.activation-page .flow-header .flow-nav > a,
  body.account-page.cancellation-page .flow-header .flow-nav > a { font-size: 10px !important; }
}

@media (max-width: 940px) {
  body.account-page.activation-page .flow-header .flow-shell,
  body.account-page.cancellation-page .flow-header .flow-shell,
  body.account-page.activation-page .account-site-footer .account-footer-bottom,
  body.account-page.cancellation-page .account-site-footer .account-footer-bottom {
    width: min(calc(100% - 34px), 1320px) !important;
  }
  body.account-page.activation-page .account-site-footer .account-footer-bottom,
  body.account-page.cancellation-page .account-site-footer .account-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
  body.account-page.activation-page .account-site-footer .account-footer-legal,
  body.account-page.cancellation-page .account-site-footer .account-footer-legal {
    gap: 9px 18px !important;
  }
}

@media (max-width: 720px) {
  body.account-page.activation-page .flow-header,
  body.account-page.cancellation-page .flow-header {
    height: 62px !important;
    min-height: 62px !important;
  }
  body.account-page.activation-page .flow-header .flow-shell,
  body.account-page.cancellation-page .flow-header .flow-shell {
    height: 62px !important;
    min-height: 62px !important;
  }
}

/* v6 — fechamento visual do painel lateral de Ativar/Cancelar.
   Replica o detalhe da Minha Conta: sem semicirculo e com o traco degradê abaixo do titulo. */
body.account-page.activation-page .activation-context::before,
body.account-page.activation-page .activation-context::after,
body.account-page.cancellation-page .cancellation-context::before,
body.account-page.cancellation-page .cancellation-context::after {
  content: none !important;
  display: none !important;
}

body.account-page.activation-page .activation-context h2::after,
body.account-page.cancellation-page .cancellation-context h2::after {
  content: "" !important;
  display: block !important;
  width: 68px !important;
  height: 3px !important;
  margin-top: 22px !important;
  background: var(--gh-brand-gradient, linear-gradient(90deg,#29bfff 0%,#4d72f2 54%,#8e55ff 100%)) !important;
  box-shadow: 0 0 18px rgba(42,118,255,.30) !important;
}