/*
 * Customer Portal — apresentação própria do MN License Server.
 *
 * Escopo deliberadamente mínimo: apenas o necessário para que a área do
 * cliente seja legível e utilizável sem depender do CSS do WooCommerce ou
 * de qualquer outro plugin. Todas as regras são escopadas por .mnls-portal.
 *
 * NÃO é reset global, NÃO é design system e NÃO é framework visual: o
 * Portal herda tipografia e cores do tema do site, definindo apenas
 * estrutura, espaçamento e os estados de aviso que precisa distinguir.
 */

.mnls-portal {
    margin: 0 0 1.5em;
}

.mnls-portal h2,
.mnls-portal h3 {
    margin: 1.2em 0 0.6em;
}

.mnls-portal h2:first-child,
.mnls-portal h3:first-child {
    margin-top: 0;
}

/* Tabelas: listagem de Licenses e blocos de dados do detalhe. */

.mnls-portal-table {
    width: 100%;
    margin: 0 0 1.5em;
    border-collapse: collapse;
}

.mnls-portal-table th,
.mnls-portal-table td {
    padding: 0.6em 0.8em;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}

.mnls-portal-table thead th {
    font-weight: 600;
    white-space: nowrap;
}

.mnls-portal-table code {
    word-break: break-all;
}

/* Avisos: feedback de operação e explicação de estado da License. */

.mnls-portal-notice {
    padding: 0.8em 1em;
    margin: 0 0 1.2em;
    border-left: 4px solid rgba(127, 127, 127, 0.6);
    background: rgba(127, 127, 127, 0.08);
}

.mnls-portal-notice--ok {
    border-left-color: #2b8a3e;
}

.mnls-portal-notice--error {
    border-left-color: #c92a2a;
}

.mnls-portal-notice--info {
    border-left-color: #1c7ed6;
}

/* Ações: ligações apresentadas como botão. */

.mnls-portal-button {
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid currentColor;
    border-radius: 3px;
    text-decoration: none;
    line-height: 1.2;
}

/* Formulário de solicitação de Trial. */

.mnls-portal-form {
    margin: 0 0 1.5em;
}

.mnls-portal-field {
    margin: 0 0 0.8em;
}

.mnls-portal-field label {
    display: block;
    margin-bottom: 0.3em;
}

.mnls-portal-field input[type="text"],
.mnls-portal-field input[type="email"],
.mnls-portal-field input[type="password"] {
    width: 100%;
    max-width: 24em;
    padding: 0.5em;
    box-sizing: border-box;
}

/* A caixa de "lembrar-me" acompanha o rótulo, não a largura do campo. */

.mnls-portal-field input[type="checkbox"] {
    width: auto;
    margin-right: 0.4em;
}

/* Navegação entre login, cadastro e recuperação de senha. */

.mnls-portal-links {
    margin: 0 0 1.2em;
}

/* Vitrine de Planos: a coluna de ação acompanha o botão, sem esticar. */

.mnls-portal-table td:last-child {
    white-space: nowrap;
    width: 1%;
}

/*
 * Cabeçalho em LINHA ÚNICA (revisão de apresentação da LS-12): navegação,
 * seletor de idioma e carrinho compostos no mesmo contêiner flex —
 * Portal | Licenças | Pedidos | Suporte | Sair | idioma | Alterar | Carrinho.
 * Em largura insuficiente o flex-wrap quebra naturalmente, sem sacrificar
 * usabilidade.
 */

.mnls-portal-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em 1.2em;
    margin: 0 0 1.5em;
    padding: 0 0 0.8em;
    border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}

/* Seletor de idioma: compacto, nunca ocupando a largura disponível. */

.mnls-portal-language {
    display: flex;
    gap: 0.5em;
    align-items: center;
    margin: 0 0 0 auto;
}

.mnls-portal-language select {
    padding: 0.35em;
}

/* Acesso ao carrinho (LICENSE-SERVER-08): compacto, na mesma linha. */

.mnls-portal-cart {
    display: flex;
    align-items: center;
    margin: 0;
    white-space: nowrap;
}

/* Navegação do hub comercial (LICENSE-SERVER-09). */

.mnls-portal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: center;
    margin: 0;
}

@media (max-width: 700px) {

    /* O grupo idioma+carrinho desce para a linha seguinte, alinhado à esquerda. */

    .mnls-portal-language {
        margin-left: 0;
    }
}

/* Paginação da listagem de Orders. */

.mnls-portal-pagination {
    display: flex;
    gap: 1em;
    align-items: center;
    margin: 0 0 1.2em;
}

/*
 * O retorno ao Portal (.mnls-portal-return) é emitido em páginas do
 * WooCommerce — produto e Order received —, onde este arquivo NÃO é
 * enfileirado: o estilo do Portal só carrega onde o shortcode existe.
 * Deliberadamente não recebe regra aqui, e herda o estilo do tema; carregar
 * o CSS do Portal naquelas páginas seria alterar a apresentação do
 * WooCommerce globalmente, o que está fora do escopo.
 */

/* Listas de Providers, Sources e destinos comerciais. */

.mnls-portal ul {
    margin: 0 0 1.2em 1.2em;
}

/*
 * Landing Page comercial (LICENSE-SERVER-12): mesma filosofia do restante do
 * arquivo — estrutura e espaçamento, herdando tipografia e cores do tema.
 */

/*
 * A vista de apresentação do produto (LICENSE-SERVER-16) compartilha o
 * espaçamento editorial da Landing: são duas páginas comerciais longas,
 * feitas das MESMAS peças. Nenhum sistema visual novo é introduzido — apenas
 * o seletor passa a cobrir as duas raízes.
 */

.mnls-portal-landing section,
.mnls-portal-overview section {
    margin: 0 0 2.5em;
}

.mnls-portal-hero {
    text-align: center;
    padding: 1.5em 0 0.5em;
}

.mnls-portal-hero h1 {
    margin: 0 0 0.5em;
}

.mnls-portal-hero p {
    max-width: 42em;
    margin: 0 auto 1em;
}

.mnls-portal-hero-note {
    font-size: 0.9em;
    opacity: 0.85;
}

/*
 * Arte do Hero público: fecha o bloco de apresentação, DEPOIS do título,
 * da frase e dos CTAs — que continuam sendo HTML traduzível e ficam
 * imediatamente visíveis, inclusive em telas estreitas.
 *
 * A altura vem do `aspect-ratio` da PRÓPRIA arte (2048x768): a imagem
 * acompanha a largura disponível, sem distorcer e sem recortar nada em
 * nenhuma largura. É a mesma técnica da faixa do produto e da ilustração
 * dos cards de Plano — nenhuma regra nova de layout.
 */

.mnls-portal-hero::after {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 2048 / 768;
    margin: 1.5em 0 0;
    border-radius: 6px;
    /* Enquanto a arte carrega, o bloco já tem o azul da própria composição. */
    background-color: #0f2f66;
    background-image: url("../images/landing-hero.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mnls-portal-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em;
    justify-content: center;
    margin: 1em 0;
}

.mnls-portal-button--primary {
    font-weight: 600;
    border-width: 2px;
}

.mnls-portal-final-cta {
    text-align: center;
}

/* Cartões: problema→solução e os caminhos Free/Trial. */

.mnls-portal-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
    gap: 1em;
    margin: 0 0 1.2em;
}

.mnls-portal-card {
    padding: 1em 1.2em;
    border: 1px solid rgba(127, 127, 127, 0.35);
    border-radius: 4px;
}

.mnls-portal-card h3 {
    margin: 0 0 0.4em;
}

/* Passos do "How it works". */

.mnls-portal-steps {
    margin: 0 0 1.2em 1.2em;
    padding: 0;
}

.mnls-portal-steps li {
    margin: 0 0 0.8em;
}

.mnls-portal-steps strong {
    display: block;
}

/* Listas de recursos, diferenciais e casos de uso. */

.mnls-portal-features li,
.mnls-portal-usecases li {
    margin: 0 0 0.4em;
}

/* Grade de Planos por família (partial plans-grid). */

.mnls-portal-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
    gap: 1em;
    align-items: start;
    margin: 0 0 1.5em;
}

.mnls-portal-plan {
    position: relative;
    padding: 1.2em;
    border: 1px solid rgba(127, 127, 127, 0.35);
    border-radius: 4px;
}

.mnls-portal-plan--recommended {
    border-color: currentColor;
    border-width: 2px;
}

.mnls-portal-plan-badge {
    display: inline-block;
    padding: 0.15em 0.6em;
    margin: 0 0 0.6em;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mnls-portal-plan-name {
    margin: 0 0 0.6em;
}

/* Para quem o plano serve: uma linha discreta acima dos limites. */

.mnls-portal-plan-summary {
    margin: 0 0 0.8em;
    font-size: 0.95em;
    opacity: 0.85;
}

.mnls-portal .mnls-portal-plan-limits {
    margin: 0 0 1em 1.2em;
}

.mnls-portal-plan-offer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
    padding: 0.6em 0;
    border-top: 1px solid rgba(127, 127, 127, 0.25);
}

.mnls-portal-plan-duration {
    min-width: 6em;
}

/*
 * Composição da oferta (ALL E6): duração | preço → Comprar | selo.
 * O preço deixa de empurrar as ações para a direita — o botão fica
 * imediatamente associado ao preço, e o selo vem DEPOIS do botão,
 * podendo quebrar sozinho para a linha seguinte no flex-wrap do
 * contêiner .mnls-portal-plan-offer.
 */
.mnls-portal-plan-price {
    font-weight: 600;
}

.mnls-portal-plan-buy {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    white-space: nowrap;
}

/* Regra específica do produto, dentro do bloco do produto (ALL E7). */
.mnls-portal-product-rule {
    margin: 0 0 1em;
}

.mnls-portal-plan-savings {
    padding: 0.1em 0.5em;
    border: 1px solid #2b8a3e;
    border-radius: 999px;
    color: #2b8a3e;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
}

/*
 * Vitrine por produto (revisão de apresentação da LICENSE-SERVER-12):
 * produto recolhido — nome, imagem, frase e CTA — expandindo, via
 * details/summary nativo, para a grade de famílias de Planos.
 */

.mnls-portal-product {
    margin: 0 0 1.2em;
    border: 1px solid rgba(127, 127, 127, 0.35);
    border-radius: 6px;
}

.mnls-portal-product-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: center;
    padding: 1.2em;
    cursor: pointer;
    list-style: none;
}

.mnls-portal-product-summary::-webkit-details-marker {
    display: none;
}

.mnls-portal-product-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: center;
    flex: 1 1 20em;
    min-width: 0;
}

.mnls-portal-product-image {
    max-width: 14em;
    max-height: 9em;
    height: auto;
    border-radius: 4px;
}

.mnls-portal-product-intro {
    display: block;
    flex: 1 1 14em;
    min-width: 0;
}

.mnls-portal-product-name {
    display: block;
    font-size: 1.3em;
    font-weight: 700;
    margin: 0 0 0.25em;
}

.mnls-portal-product-tagline {
    display: block;
    opacity: 0.85;
}

.mnls-portal-product-cta {
    white-space: nowrap;
}

.mnls-portal-product[open] .mnls-portal-product-summary {
    border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}

.mnls-portal-product-plans {
    padding: 1.2em 1.2em 0.2em;
}

/*
 * Apresentação do MN Content Wall: DUAS faixas contínuas, sem nenhuma
 * área branca entre elas nem depois delas.
 *
 * 1. a arte de apresentação, no topo, inteira e na sua proporção;
 * 2. o banner, servindo de FUNDO ao nome, à frase comercial e ao CTA.
 *
 * O nome, a frase e o CTA continuam sendo HTML traduzível e selecionável
 * — nada é embutido na imagem. Sobre o banner eles ganham um véu escuro
 * à esquerda, exatamente onde a arte reserva espaço negativo, de modo
 * que o contraste independe do recorte que a largura produzir.
 *
 * O summary vira uma grade de duas linhas SÓ NESTE produto: as duas
 * faixas ocupam a largura inteira, e o texto e o CTA são colocados na
 * MESMA célula da segunda linha, por cima do banner. É por isso que a
 * ordem visual não depende do markup — nenhum template é tocado, e os
 * demais produtos continuam com o layout em flex do bloco genérico.
 *
 * O summary inteiro permanece a área clicável do `<details>`: clicar em
 * qualquer uma das faixas abre os Planos, exatamente como o botão.
 */

.mnls-portal-product--mn-content-wall {
    /* As faixas encostam nas bordas: o arredondamento do card recorta. */
    overflow: hidden;
}

.mnls-portal-product--mn-content-wall > .mnls-portal-product-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0;
    padding: 0;
}

/* Linha 1 — arte de apresentação, largura inteira. */

.mnls-portal-product--mn-content-wall > .mnls-portal-product-summary::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 1;
    /* Proporção da própria arte (2172x724): aparece inteira, sem distorcer. */
    aspect-ratio: 2172 / 724;
    /* Enquanto a arte carrega, o bloco já tem a cor do céu da própria composição. */
    background-color: #bfe0f5;
    background-image: url("../images/product-hero.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*
 * Linha 2 — banner de fundo do bloco de identificação do produto.
 *
 * A arte foi recortada nas suas margens brancas antes de entrar aqui, e
 * a faixa é enquadrada por `cover`: a composição central — o fluxo de
 * conteúdo e os dispositivos — permanece em quadro em qualquer largura.
 * A altura vem do próprio texto, com um mínimo para que a arte tenha
 * presença mesmo quando a frase for curta.
 */

.mnls-portal-product--mn-content-wall > .mnls-portal-product-summary::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 9em;
    background-color: #0f2f66;
    background-image:
        linear-gradient(90deg, rgba(9, 26, 58, 0.94) 0%, rgba(9, 26, 58, 0.90) 42%, rgba(9, 26, 58, 0.55) 72%, rgba(9, 26, 58, 0.18) 100%),
        url("../images/product-banner.png");
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
}

/*
 * Texto e CTA ocupam a MESMA linha do banner, por cima dele. O respiro
 * que o summary perdeu volta aqui, em cada um deles.
 */

.mnls-portal-product--mn-content-wall > .mnls-portal-product-summary .mnls-portal-product-header {
    grid-column: 1;
    grid-row: 2;
    z-index: 1;
    padding: 1.2em;
    /*
     * O texto não avança até a metade clara da arte: a medida mantém a
     * frase dentro da zona escura do véu em qualquer largura, o que é
     * também a medida de leitura confortável de uma linha.
     */
    max-width: 34em;
}

.mnls-portal-product--mn-content-wall > .mnls-portal-product-summary .mnls-portal-product-cta {
    grid-column: 2;
    grid-row: 2;
    z-index: 1;
    margin: 0 1.2em;
}

/*
 * Sobre a arte, o texto declara o seu próprio contraste: o Portal herda
 * as cores do tema, que podem ser claras.
 */

.mnls-portal-product--mn-content-wall > .mnls-portal-product-summary .mnls-portal-product-name,
.mnls-portal-product--mn-content-wall > .mnls-portal-product-summary .mnls-portal-product-tagline {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.mnls-portal-product--mn-content-wall > .mnls-portal-product-summary .mnls-portal-product-tagline {
    opacity: 0.92;
}

@media (max-width: 40em) {
    /*
     * Em tela estreita o CTA deixa de disputar a largura com a frase:
     * passa para uma terceira linha, e o banner acompanha as duas linhas
     * do conteúdo, continuando a ser uma faixa única.
     */

    .mnls-portal-product--mn-content-wall > .mnls-portal-product-summary {
        grid-template-columns: 1fr;
    }

    .mnls-portal-product--mn-content-wall > .mnls-portal-product-summary::after {
        grid-row: 2 / 4;
        /*
         * Sem largura para reservar uma zona escura à esquerda, o véu
         * passa a ser uniforme: a arte continua visível e o texto
         * continua legível em toda a linha.
         */
        background-image:
            linear-gradient(180deg, rgba(9, 26, 58, 0.90) 0%, rgba(9, 26, 58, 0.86) 100%),
            url("../images/product-banner.png");
    }

    .mnls-portal-product--mn-content-wall > .mnls-portal-product-summary .mnls-portal-product-header {
        padding-bottom: 0;
    }

    .mnls-portal-product--mn-content-wall > .mnls-portal-product-summary .mnls-portal-product-cta {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        margin: 0.8em 1.2em 1.2em;
    }
}

.mnls-portal-product--mn-content-wall > .mnls-portal-product-summary .mnls-portal-product-cta {
    background-color: #d81b74;
    border-color: #d81b74;
    color: #ffffff;
}

/*
 * Ilustração de cada família de Planos: área visual no topo do card,
 * escolhida pelo modificador da própria família. É decorativa — o nome,
 * os limites, os períodos, os preços e a compra continuam em HTML, e é
 * o HTML que os publica; o que a arte mostra é apenas representação
 * conceitual do plano, e nunca fonte de regra comercial.
 *
 * A proporção é fixada por `aspect-ratio` e a arte é enquadrada por
 * `cover`: os três cards ficam com a mesma altura de ilustração, sem
 * distorcer nenhuma delas e sem transbordar em telas estreitas.
 */

/*
 * A ilustração é ancorada ao NOME do plano, e não ao card: assim ela
 * nasce depois do selo "Recomendado" e imediatamente acima do nome, que
 * é a ordem visual pretendida — sem reordenar nada nem tocar no markup.
 */

.mnls-portal-plan--starter .mnls-portal-plan-name::before,
.mnls-portal-plan--pro .mnls-portal-plan-name::before,
.mnls-portal-plan--business .mnls-portal-plan-name::before {
    content: "";
    display: block;
    width: 100%;
    /*
     * A proporção acompanha a da própria arte (1774x887), de modo que a
     * ilustração aparece inteira: os quatro Providers à esquerda — os
     * MESMOS nos três planos, mudando apenas quais estão em destaque — e
     * o mockup com o volume de conteúdo daquele plano. Enquadrar em
     * outra proporção cortaria justamente o que diferencia os planos.
     *
     * As três artes pertencem à mesma família visual do Hero público e
     * da faixa do produto, de modo que a página inteira se lê como uma
     * sequência única. O canto superior esquerdo é fundo em todas elas,
     * porque é ali que o selo "Recomendado" se sobrepõe. Nenhuma traz
     * texto comercial embutido: nome, limites, períodos, preços e compra
     * são exclusivamente HTML traduzível.
     */
    aspect-ratio: 1774 / 887;
    margin: 0 0 0.8em;
    border-radius: 4px;
    background-color: #fdf5f9;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mnls-portal-plan--starter .mnls-portal-plan-name::before {
    background-image: url("../images/starter.png");
}

.mnls-portal-plan--pro .mnls-portal-plan-name::before {
    background-image: url("../images/pro.png");
}

.mnls-portal-plan--business .mnls-portal-plan-name::before {
    background-image: url("../images/business.png");
}

/*
 * Com a ilustração no topo, o selo em fluxo empurraria só o card
 * recomendado para baixo e os três deixariam de se alinhar. Ele passa a
 * ser uma faixa sobre a própria ilustração — o destaque continua, com
 * cor própria para não depender do tema, e as três colunas voltam a
 * começar na mesma linha.
 */

.mnls-portal-plan--recommended .mnls-portal-plan-badge {
    position: absolute;
    top: 1.2em;
    left: 1.2em;
    z-index: 1;
    margin: 0;
    background-color: #d81b74;
    border-color: #d81b74;
    color: #ffffff;
}

/*
 * Apresentação do produto (LICENSE-SERVER-16).
 *
 * Quase tudo já vem pronto das peças existentes: o Hero traz a arte pública,
 * `mnls-portal-cards`/`-features`/`-steps` compõem as seções, e a comparação
 * reaproveita integralmente os cards de Plano — inclusive as ilustrações das
 * famílias e o selo de recomendado — mais a tabela responsiva do Portal. Só
 * o que não existia é acrescentado aqui.
 */

/* "Conhecer o produto": ação secundária, separada do bloco de compra. */

.mnls-portal-plan-learn {
    margin: 0.8em 0 0;
    padding: 0.8em 0 0;
    border-top: 1px solid rgba(127, 127, 127, 0.25);
}

/*
 * A comparação é de CAPACIDADE: a coluna da esquerda nomeia a capacidade e as
 * demais respondem por família, centradas para que a leitura seja por linha.
 */

.mnls-portal-capabilities th[scope="row"] {
    text-align: left;
    font-weight: 600;
}

.mnls-portal-capabilities thead th:not(:first-child),
.mnls-portal-capabilities td {
    text-align: center;
}

/*
 * Faixa do produto fechando a seção de demonstração, pela MESMA técnica do
 * Hero e dos cards de Plano — `aspect-ratio` da própria arte, sem recorte e
 * sem imagem nova. Decorativa: o link da demonstração continua sendo HTML.
 */

.mnls-portal-overview-demo::after {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 2048 / 768;
    margin: 1.5em 0 0;
    border-radius: 6px;
    background-color: #0f2f66;
    background-image: url("../images/product-banner.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* FAQ: acordeão nativo (details/summary), sem JavaScript. */

.mnls-portal-faq {
    margin: 0 0 0.6em;
    padding: 0.6em 0.8em;
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 4px;
}

.mnls-portal-faq summary {
    cursor: pointer;
    font-weight: 600;
}

.mnls-portal-faq p {
    margin: 0.6em 0 0;
}

/* Formulário de Support: o campo de mensagem acompanha os demais campos. */

.mnls-portal-field textarea {
    width: 100%;
    max-width: 36em;
    padding: 0.5em;
    box-sizing: border-box;
}

/* Telas estreitas: a tabela rola dentro de si, sem quebrar a página. */

@media (max-width: 600px) {

    .mnls-portal-table {
        display: block;
        overflow-x: auto;
    }

    .mnls-portal-hero {
        padding-top: 0.5em;
    }

    .mnls-portal-cta-row {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}