/*
 * Páginas Conecta — telas do prestador (divulgar, meus serviços, painel, meu plano).
 * Só classes específicas destas telas; componentes reutilizáveis (.pc-card, .pc-botao,
 * .pc-modal, .pc-campo, .pc-vazio...) vêm de pc-components.css (Lane 1) — não duplicar.
 */

/* ------------------------------------------------------------------ */
/* [pc_divulgar]                                                       */
/* ------------------------------------------------------------------ */

.pc-divulgar {
    padding-top: 20px;
    padding-bottom: 40px;
}

.pc-divulgar__hero {
    background: var(--pc-cinza-900);
    color: var(--pc-branco);
    border-radius: var(--pc-radius-card);
    padding: 28px 20px;
    margin-bottom: 20px;
}

.pc-divulgar__hero-titulo {
    font-family: var(--pc-fonte-titulo);
    font-size: var(--pc-tamanho-h2);
    font-weight: 600;
    margin: 0 0 8px;
}

.pc-divulgar__hero-texto {
    font-family: var(--pc-fonte-corpo);
    color: var(--pc-cinza-300);
    margin: 0;
    font-size: 14px;
}

.pc-divulgar__passos {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.pc-divulgar__passo {
    position: relative;
    padding: 24px 20px;
    overflow: hidden;
}

.pc-divulgar__passo-titulo {
    font-family: var(--pc-fonte-titulo);
    font-size: 17px;
    margin: 0 0 6px;
}

.pc-divulgar__passo-texto {
    font-size: 13px;
    color: var(--pc-cinza-700);
    margin: 0 0 12px;
}

.pc-divulgar__passo-numero {
    font-family: var(--pc-fonte-titulo);
    font-size: 36px;
    font-weight: 700;
    color: var(--pc-cinza-100);
}

.pc-divulgar__cta {
    background: var(--pc-cinza-900);
    color: var(--pc-branco);
    padding: 24px 20px;
    margin-bottom: 20px;
    text-align: center;
}

.pc-divulgar__cta-titulo {
    font-family: var(--pc-fonte-titulo);
    font-size: var(--pc-tamanho-h3);
    margin: 0 0 8px;
}

.pc-divulgar__cta-texto {
    font-size: 13px;
    color: var(--pc-cinza-300);
    margin: 0 0 16px;
}

.pc-divulgar__cta .pc-botao {
    display: inline-block;
    padding: 14px 32px;
}

.pc-divulgar__seguranca {
    padding: 20px;
    text-align: center;
}

.pc-divulgar__seguranca-titulo {
    font-family: var(--pc-fonte-titulo);
    font-size: 17px;
    margin: 0 0 8px;
}

.pc-divulgar__seguranca-texto {
    font-size: 13px;
    color: var(--pc-cinza-700);
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* Banners de aviso/info                                               */
/* ------------------------------------------------------------------ */

.pc-banner {
    border-radius: var(--pc-radius-card);
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.pc-banner p {
    margin: 0;
    font-size: 13px;
}

.pc-banner--aviso {
    background: var(--pc-amarelo-claro);
    color: var(--pc-cinza-900);
}

.pc-banner--info {
    background: var(--pc-cinza-100);
    color: var(--pc-cinza-700);
}

.pc-banner__link {
    font-weight: 700;
    color: var(--pc-cinza-900);
    text-decoration: underline;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Status pill (genérico — serviços e assinatura)                      */
/* ------------------------------------------------------------------ */

.pc-status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--pc-radius-pill);
    font-size: 12px;
    font-weight: 700;
    color: var(--pc-branco);
}

.pc-status-pill--publicado,
.pc-status-pill--ativa {
    background: var(--pc-verde);
}

.pc-status-pill--pausado,
.pc-status-pill--cancelada,
.pc-status-pill--expirada {
    background: var(--pc-cinza-500);
}

/* 'aguardando' = cobrança em aberto ainda no prazo: o prestador segue visível nas
   buscas, então a pill é âmbar (não o vermelho de atraso). */
.pc-status-pill--pendente,
.pc-status-pill--aguardando,
.pc-status-pill--trial {
    background: var(--pc-amarelo);
    color: var(--pc-cinza-900);
}

.pc-status-pill--inadimplente,
.pc-status-pill--atrasada,
.pc-status-pill--rascunho {
    background: var(--pc-vermelho);
}

/* ------------------------------------------------------------------ */
/* [pc_meus_servicos]                                                  */
/* ------------------------------------------------------------------ */

.pc-meus-servicos {
    padding-top: 20px;
    padding-bottom: 40px;
}

.pc-meus-servicos__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.pc-meus-servicos__topo h2 {
    margin: 0;
}

.pc-meus-servicos__lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pc-item-servico {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pc-item-servico__corpo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pc-item-servico__titulo {
    font-family: var(--pc-fonte-titulo);
    font-size: 16px;
    margin: 0;
}

.pc-item-servico__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pc-item-servico__acoes .pc-botao {
    padding: 8px 16px;
    font-size: 13px;
}

.pc-modal__conteudo--form-servico {
    max-height: 85vh;
    overflow-y: auto;
}

.pc-form-servico__fotos,
.pc-form-servico__disponibilidade {
    margin: 16px 0;
    padding-top: 16px;
    border-top: 1px solid var(--pc-cinza-100);
}

.pc-form-servico__fotos h4,
.pc-form-servico__disponibilidade h4 {
    font-family: var(--pc-fonte-titulo);
    font-size: 15px;
    margin: 0 0 10px;
}

.pc-form-servico__fotos-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.pc-form-servico__foto-item {
    position: relative;
    width: 88px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--pc-cinza-100);
    border: 2px solid transparent;
}

.pc-form-servico__foto-item--capa {
    border-color: var(--pc-amarelo);
}

.pc-form-servico__foto-item img {
    display: block;
    width: 100%;
    height: 66px;
    object-fit: cover;
}

.pc-form-servico__foto-item--pendente {
    border-color: var(--pc-cinza-500);
}

.pc-form-servico__foto-item--pendente img {
    opacity: 0.55;
}

.pc-form-servico__foto-item--rejeitada {
    border-color: var(--pc-vermelho);
}

.pc-form-servico__foto-item--rejeitada img {
    opacity: 0.45;
    filter: grayscale(1);
}

.pc-form-servico__foto-selo {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 2px 8px;
    border-radius: var(--pc-radius-pill);
    background: var(--pc-amarelo);
    color: var(--pc-cinza-900);
    font-size: 10px;
    font-weight: 700;
}

/* Foto aprovada sem capa não tem rótulo: sem isto sobrava a pílula amarela vazia. */
.pc-form-servico__foto-selo:empty {
    display: none;
}

.pc-form-servico__foto-selo--pendente {
    background: var(--pc-cinza-700);
    color: #fff;
}

.pc-form-servico__foto-selo--rejeitada {
    background: var(--pc-vermelho);
    color: #fff;
}

.pc-form-servico__foto-motivo {
    margin: 4px 0 0;
    padding: 0 4px 4px;
    font-size: 10px;
    line-height: 1.3;
    color: var(--pc-vermelho);
}

.pc-form-servico__foto-acoes {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
}

.pc-form-servico__foto-btn {
    border: none;
    background: none;
    padding: 3px 2px;
    font-family: var(--pc-fonte-corpo);
    font-size: 10px;
    font-weight: 600;
    color: var(--pc-cinza-700);
    cursor: pointer;
    text-align: center;
}

.pc-form-servico__foto-btn--remover {
    color: var(--pc-vermelho);
}

.pc-form-servico__upload {
    display: inline-block;
    padding: 10px 20px;
    font-size: 13px;
}

.pc-form-servico__ajuda {
    font-size: 12px;
    color: var(--pc-cinza-500);
    margin: 8px 0 0;
}

.pc-form-servico__salvar {
    width: 100%;
    padding: 14px;
    margin-top: 16px;
}

.pc-grade-disponibilidade {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pc-grade-disponibilidade__linha {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pc-grade-disponibilidade__dia {
    font-weight: 700;
    font-size: 13px;
    color: var(--pc-cinza-900);
}

.pc-grade-disponibilidade__periodos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pc-grade-disponibilidade__periodo {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--pc-cinza-700);
}

/* ------------------------------------------------------------------ */
/* [pc_meu_plano]                                                      */
/* ------------------------------------------------------------------ */

.pc-meu-plano {
    padding-top: 20px;
    padding-bottom: 40px;
}

.pc-planos-grade {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pc-plano-card {
    padding: 20px;
}

.pc-plano-card__nome {
    margin: 0 0 8px;
}

.pc-plano-card__preco {
    font-family: var(--pc-fonte-titulo);
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 14px;
}

.pc-plano-card__trial {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: var(--pc-radius-pill);
    background: var(--pc-amarelo-claro);
    color: var(--pc-cinza-900);
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}

.pc-plano-card__beneficios {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--pc-cinza-700);
}

/* Aviso de cobrança (trial não debita agora / sem trial debita na hora). */
.pc-plano-card__cobranca {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pc-cinza-700);
}

.pc-plano-card__beneficios li::before {
    content: '\2713';
    color: var(--pc-verde);
    font-weight: 700;
    margin-right: 8px;
}

.pc-plano-card .pc-botao {
    display: block;
    text-align: center;
    width: 100%;
    padding: 14px;
}

/* Card de resumo: status, plano, preço e o próximo evento da cobrança. */
.pc-plano-resumo {
    padding: 20px;
}

.pc-plano-resumo__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.pc-plano-resumo__nome {
    font-family: var(--pc-fonte-titulo);
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
}

.pc-plano-resumo__preco {
    font-family: var(--pc-fonte-titulo);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--pc-grafite);
    margin: 6px 0 0;
}

.pc-plano-resumo__moeda {
    font-size: 18px;
    font-weight: 700;
    margin-right: 3px;
}

.pc-plano-resumo__ciclo {
    font-family: var(--pc-fonte-corpo);
    font-size: 14px;
    font-weight: 500;
    color: var(--pc-cinza-500);
    margin-left: 2px;
}

.pc-plano-resumo__periodo {
    font-size: 13px;
    line-height: 1.5;
    color: var(--pc-cinza-700);
    margin: 10px 0 0;
}

.pc-plano-resumo .pc-banner {
    text-align: left;
    margin-top: 16px;
}

.pc-plano-resumo__acao {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px;
    margin-top: 18px;
}

/* Título de seção fora do card, no mesmo tom das seções do perfil. */
.pc-plano-secao-titulo {
    font-family: var(--pc-fonte-titulo);
    font-size: 16px;
    margin: 24px 0 10px;
}

/* Lista label/valor da assinatura. */
.pc-plano-detalhes {
    margin: 0;
    background: var(--pc-branco);
    border-radius: var(--pc-radius-card);
    box-shadow: var(--pc-sombra-card);
    padding: 4px 18px;
}

.pc-plano-detalhes__linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--pc-cinza-100);
}

.pc-plano-detalhes__linha:last-child {
    border-bottom: 0;
}

.pc-plano-detalhes dt {
    font-size: 13px;
    color: var(--pc-cinza-500);
    flex: 0 0 auto;
}

.pc-plano-detalhes dd {
    font-size: 13px;
    font-weight: 600;
    color: var(--pc-grafite);
    margin: 0;
    text-align: right;
}

.pc-plano-beneficios {
    background: var(--pc-branco);
    border-radius: var(--pc-radius-card);
    box-shadow: var(--pc-sombra-card);
    padding: 18px;
    margin: 0;
}

.pc-plano-rodape {
    margin-top: 24px;
    text-align: center;
}

.pc-plano-rodape__cancelar {
    appearance: none;
    background: none;
    border: 0;
    padding: 8px;
    font-family: var(--pc-fonte-corpo);
    font-size: 13px;
    font-weight: 600;
    color: var(--pc-vermelho);
    text-decoration: underline;
    cursor: pointer;
}


/* ------------------------------------------------------------------
   Checkout dentro de [pc_meu_plano].

   Quem estiliza o formulario e o VIME WOOCOMMERCE (checkout-widget.css,
   layout por etapas — mesmo do leezi.com.br). Aqui fica SO o que e do app:
   wrapper, aviso de cobranca, link de voltar, a cor da marca no botao e o
   que precisa sumir por nao existir neste produto.
   NAO reestilizar campo por campo — isso e trabalho do widget.
   ------------------------------------------------------------------ */

.pc-checkout {
    margin-top: 8px;
    /* O bottom nav e fixo: o formulario nao pode terminar embaixo dele. */
    padding-bottom: 96px;
}

.pc-checkout__voltar {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pc-cinza-700);
    text-decoration: none;
}

.pc-checkout__voltar:hover {
    color: var(--pc-grafite);
}

.pc-checkout__aviso {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: var(--pc-radius-card, 12px);
    background: var(--pc-cinza-100);
    font-size: 13px;
    line-height: 1.5;
    color: var(--pc-cinza-700);
}

/* Nao existem neste produto: entrega, observacoes, cupom, quantidade (assinatura
   e item unico) e o aviso de "atualizar totais", que e de loja com frete. */
.pc-checkout .woocommerce-additional-fields,
.pc-checkout .woocommerce-shipping-fields,
/* Assinatura nao tem entrega: o widget e de loja e injeta o bloco de frete
   ("Insira seu endereco para ver as opcoes de frete") mesmo com o produto
   virtual e needs_shipping=false. */
.pc-checkout .vime-no-shipping-methods,
.pc-checkout .vime-shipping-methods,
.pc-checkout .vime-checkout-shipping,
.pc-checkout .woocommerce-shipping-totals,
.pc-checkout .shipping,
.pc-checkout .vime-checkout-coupon,
.pc-checkout .quantity,
.pc-checkout .product-quantity,
.pc-checkout .product-quantity-controls,
/* Um item so, ja identificado pelo nome: a miniatura seria o placeholder cinza
   do WooCommerce (woocommerce-placeholder.webp), que nao diz nada. */
.pc-checkout .woocommerce-placeholder,
.pc-checkout .vime-order-review-thumb,
.pc-checkout .product-thumbnail,
.pc-checkout noscript,
.pc-checkout #billing_country_field {
    display: none;
}

/* A cor da marca no botao final e nos botoes de etapa (o widget usa verde). */
.pc-checkout #place_order,
.pc-checkout button#place_order,
.pc-checkout .vime-checkout-button,
.pc-checkout .vime-checkout-next-step {
    background: var(--pc-amarelo) !important;
    color: var(--pc-grafite) !important;
    border-color: var(--pc-amarelo) !important;
}

/* "Voltar": o widget deixa opacity 0.35 (parece desabilitado) mesmo quando ha
   etapa anterior. Medido em runtime: opacity=0.35, disabled=false. */
.pc-checkout .vime-checkout-button-secondary,
.pc-checkout .vime-checkout-prev-step {
    background: var(--pc-cinza-100) !important;
    color: var(--pc-cinza-700) !important;
    border-color: var(--pc-cinza-100) !important;
    opacity: 1 !important;
}

.pc-checkout #place_order:active,
.pc-checkout .vime-checkout-next-step:active {
    transform: scale(0.97);
}

/* O Select2 esconde o <select> original jogando-o para fora da tela; com largura
   de 100% ele estoura o viewport e cria scroll horizontal no celular. Medido com
   Playwright: era o UNICO elemento acima de 390px. */
.pc-checkout select.select2-hidden-accessible {
    width: 1px !important;
    max-width: 1px !important;
}

/* O widget e desenhado para desktop: no app nao pode estourar a largura. */
.pc-checkout,
.pc-checkout .vime-checkout-container,
.pc-checkout .vime-checkout-columns,
.pc-checkout .vime-checkout-section {
    max-width: 100%;
    box-sizing: border-box;
}

.pc-checkout input,
.pc-checkout select,
.pc-checkout textarea {
    max-width: 100%;
    box-sizing: border-box;
}

.pc-checkout .woocommerce-privacy-policy-text {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pc-cinza-500);
}

.pc-checkout .woocommerce-privacy-policy-text a {
    color: var(--pc-cinza-700);
}

/* Barra de progresso na cor da marca — o widget usa verde (#16a34a).
   Classes medidas em runtime: .progress-step.completed > .vime-step-circle e
   .progress-line.active (nao sao as do nome do widget). */
.pc-checkout .progress-step.completed .vime-step-circle {
    background: var(--pc-amarelo) !important;
    border-color: var(--pc-amarelo) !important;
    color: var(--pc-grafite) !important;
}

.pc-checkout .progress-line.active {
    border-color: var(--pc-amarelo) !important;
}

.pc-checkout .progress-step.active .vime-step-circle {
    border-color: var(--pc-amarelo) !important;
    color: var(--pc-grafite) !important;
}

/* Os numeros da barra navegam entre as etapas (pc-checkout.js aciona o proprio
   botao do widget, entao a validacao dele continua valendo). */
.pc-checkout .progress-step {
    cursor: pointer;
}

.pc-checkout .progress-step .vime-step-circle {
    transition: transform 0.15s ease;
}

.pc-checkout .progress-step:hover .vime-step-circle {
    transform: scale(1.1);
}

/* ------------------------------------------------------------------
   Assinatura confirmada — volta do pagamento.
   O circulo se desenha e o "certo" risca em seguida (stroke-dashoffset),
   com um pulso no selo. Respeita prefers-reduced-motion.
   ------------------------------------------------------------------ */

.pc-assinou {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 0 96px;
}

.pc-assinou__selo {
    width: 112px;
    height: 112px;
    margin-bottom: 24px;
    animation: pc-assinou-pulso 600ms 700ms ease-out both;
}

.pc-assinou__selo svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* 44 de raio -> circunferencia ~276.5 */
.pc-assinou__circulo {
    stroke-dasharray: 277;
    stroke-dashoffset: 277;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    animation: pc-assinou-traco 620ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.pc-assinou__risco {
    stroke-dasharray: 62;
    stroke-dashoffset: 62;
    animation: pc-assinou-traco 380ms 520ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes pc-assinou-traco {
    to { stroke-dashoffset: 0; }
}

@keyframes pc-assinou-pulso {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.pc-assinou__titulo {
    margin: 0 0 4px;
    font-family: var(--pc-fonte-titulo);
    font-size: 22px;
    font-weight: 600;
    color: var(--pc-grafite);
    animation: pc-assinou-sobe 420ms 780ms ease-out both;
}

.pc-assinou__plano {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pc-amarelo);
    animation: pc-assinou-sobe 420ms 860ms ease-out both;
}

.pc-assinou__texto {
    margin: 0 0 8px;
    max-width: 34ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pc-cinza-700);
    animation: pc-assinou-sobe 420ms 940ms ease-out both;
}

.pc-assinou__texto--destaque {
    font-weight: 600;
    color: var(--pc-grafite);
}

.pc-assinou__acoes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 24px;
    animation: pc-assinou-sobe 420ms 1040ms ease-out both;
}

.pc-assinou__acoes .pc-botao {
    width: 100%;
}

@keyframes pc-assinou-sobe {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Quem pediu menos movimento ve o resultado final, sem animacao. */
@media (prefers-reduced-motion: reduce) {
    .pc-assinou__selo,
    .pc-assinou__circulo,
    .pc-assinou__risco,
    .pc-assinou__titulo,
    .pc-assinou__plano,
    .pc-assinou__texto,
    .pc-assinou__acoes {
        animation: none;
        stroke-dashoffset: 0;
        opacity: 1;
        transform: none;
    }
}

/* Overlay de processamento do checkout. O Woo bloqueia o form com blockUI e passa
   message:null — quem desenha o indicador e o CSS, que sai junto com o
   woocommerce_enqueue_styles zerado. Sem isto o clique em "Assinar agora" so
   acinzenta a tela, sem dizer que esta processando. */
.pc-checkout .blockUI.blockOverlay {
    position: relative;
}

.pc-checkout .blockUI.blockOverlay::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid var(--pc-amarelo);
    border-top-color: transparent;
    border-radius: 50%;
    animation: pc-girando 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .pc-checkout .blockUI.blockOverlay::before {
        animation: none;
    }
}