/* =========================================================================
   ComercialHost - 01_ComercialHost_final.css
   Arquivo NOVO e ADITIVO. Carregado por último (depois de custom.css e de
   comercialhost-theme.css), então só ACRESCENTA/refina regras — não edita
   nem remove nada do que já existe. Escopo travado em #order-standard_cart
   .ch-product-card para não vazar para outras páginas (checkout, domínios,
   área do cliente etc).

   O que este arquivo faz:
   1) "R$" menor, em uma linha acima do valor do plano (tamanhos calcados
      no componente .pc-price do site institucional: hospedagem.php).
   2) Marcador (check) das features perfeitamente alinhado com o texto,
      usando flexbox em vez de posicionamento absoluto com offset fixo
      (evita desalinhar de novo se a fonte ou o line-height mudar depois).
   3) Fonte da descrição dos planos no mesmo tamanho/peso "delicado" do
      componente .pc-feats do site institucional (13px, cor suave),
      em vez do texto grande herdado do WHMCS padrão.
   4) Setas dos 3 menus (Login, Selecione um Idioma, Conta) travadas com
      exatamente o mesmo tamanho/cor/margem — antes cada uma tinha um
      valor ligeiramente diferente espalhado pelo custom.css (V14/V20/V21).

   IMPORTANTE: os itens 1, 2 e 3 só aparecem corretamente se o
   includes/head.tpl corrigido (enviado no pacote anterior) já estiver
   publicado — a tag quebrada que havia lá impedia o comercialhost-theme.css
   de carregar, e é nele que vivem as classes ch-product-card/description.
   ========================================================================= */

/* 1) Preço: moeda pequena, acima do valor -------------------------------- */
#order-standard_cart .products .ch-product-card .ch-product-price {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    line-height: 1.1 !important;
}

/* Os spans abaixo são criados pelo 01_ComercialHost_final.js, que separa
   o prefixo de moeda (ex: "R$") do valor numérico dentro do mesmo texto
   que o WHMCS já gera. Nenhum arquivo .tpl precisa mudar para isso. */
#order-standard_cart .products .ch-product-card .ch-product-price .ch-price-currency {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    opacity: .85 !important;
    margin: 0 0 2px !important;
}

#order-standard_cart .products .ch-product-card .ch-product-price .ch-price-amount {
    display: block !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* 2) Bullets alinhados com o texto (flex, não depende de offset manual) -- */
#order-standard_cart .products .ch-product-card .ch-product-description ul li,
#order-standard_cart .products .ch-product-card .ch-product-description .ch-product-features li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    padding-left: 0 !important;
}

#order-standard_cart .products .ch-product-card .ch-product-description ul li::before,
#order-standard_cart .products .ch-product-card .ch-product-description .ch-product-features li::before {
    position: static !important;
    flex: 0 0 14px !important;
    margin-top: 2px !important;
}

/* 3) Tipografia da descrição — mesma "receita" do site institucional
      (.pc-feats / .feat-lbl em hospedagem.php: 13px, cor #94a3b8,
      valores em <strong> na cor clara). Sobrepõe o tamanho maior que
      vinha por padrão do WHMCS. --------------------------------------- */
#order-standard_cart .products .ch-product-card .ch-product-description,
#order-standard_cart .products .ch-product-card .ch-product-description p,
#order-standard_cart .products .ch-product-card .ch-product-description li,
#order-standard_cart .products .ch-product-card .ch-product-description span:not(.feature-value) {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #94a3b8 !important;
}

#order-standard_cart .products .ch-product-card .ch-product-description strong,
#order-standard_cart .products .ch-product-card .ch-product-description b,
#order-standard_cart .products .ch-product-card .ch-product-description .feature-value {
    color: #e2e8f0 !important;
    font-weight: 700 !important;
}

/* 4) Setas dos 3 menus (Login / Idioma / Conta) — mesmo tamanho, cor e
      margem nos três, sempre, independente de hover ou estado ---------- */
#top-nav #loginOrRegister::after,
#top-nav #languageChooser .caret,
#main-menu .navbar-main .dropdown-toggle .caret,
#main-menu .navbar-main a.dropdown-toggle > b.caret {
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    border-style: solid !important;
    border-width: 0 2px 2px 0 !important;
    border-color: #ffffff !important;
    background: transparent !important;
    transform: rotate(45deg) translateY(-2px) !important;
    margin-left: 6px !important;
    margin-top: 0 !important;
    vertical-align: middle !important;
    content: "" !important;
}