/* ══════════════════════════════════════════════════════════════════════
   NILARA — Área do Cliente WHMCS (tema "Six", Bootstrap 3)
   Reskin via CSS por cima do tema ATIVO (não é um template selecionável —
   não tem theme.yaml/header.tpl/footer.tpl aqui de propósito, então
   nunca mais aparece como opção em Configuration → General Settings →
   Template. Só um arquivo CSS injetado via hook).

   Seletores conferidos direto no HTML ao vivo de sac.nilara.com.br
   (#header, #main-menu, #home-banner, .home-shortcuts, .logincontainer,
   .announcement-single) — não são só suposições genéricas de Bootstrap.

   Mesmos tokens de cor/tipografia/raio usados em cotacao_0800.php.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --bg: #f5f5f7; --w: #ffffff; --ink: #14181d; --ink2: #333941; --slate: #667082; --muted: #a2a9b4;
    --line: #d7dbe1; --line-s: #edf0f3;
    --navy: #0f2744; --navy2: #17335a; --navy-xs: #eef2f7; --navy-s: #dbe4ee;
    --cyan: #00B4D8; --cyan-h: #0096b3; --cyan-xs: #e6f8fb; --cyan-s: #cceef5;
    --amber: #b45309; --amber-bg: #fdf3e5; --amber-line: #f0d9b5;
    --wa: #25D366; --wa-h: #20bd5b;
    --green: #0EA55A; --green-h: #0c8a4a; --green-xs: #e9f9f0; --green-s: #c8f0da;
    --red: #d92d20; --red-xs: #fee2e2;
    --sh1: 0 1px 4px rgba(15,39,68,.07); --sh2: 0 8px 24px rgba(15,39,68,.10);
    --sh3: 0 20px 48px rgba(15,39,68,.13); --sh4: 0 24px 80px rgba(15,39,68,.16);
    --rad: 20px;
    --rad-s: 12px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
html, body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
    background: var(--bg) !important;
    color: var(--ink);
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--cyan-h); }
a:hover, a:focus { color: var(--navy); text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; color: var(--navy); font-weight: 800; letter-spacing: -.02em; }
#main-body { padding: 34px 0 60px; }

/* ── #header — barra utilitária (logo + entrar/carrinho) ─────────────── */
#header {
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line-s);
    padding: 14px 0;
    position: sticky; top: 0; z-index: 1000;
}
#header .logo img { height: 30px; }
#header .top-nav { display: flex; align-items: center; gap: 14px; margin: 0; list-style: none; }
#header .top-nav li a {
    font-size: 13.5px; font-weight: 700; color: var(--ink2);
}
#header .top-nav li a:hover { color: var(--cyan-h); }
#header .top-nav li.primary-action a.btn {
    background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important;
    padding: 9px 20px !important; font-size: 13.5px !important;
}
#header .top-nav li.primary-action a.btn:hover { background: var(--navy2) !important; }

/* ── #main-menu — navegação principal ─────────────────────────────────── */
#main-menu, .navbar-main.navbar-default {
    background: var(--w) !important;
    border: none !important;
    box-shadow: 0 1px 0 var(--line-s);
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}
.navbar-main .navbar-nav > li > a {
    color: var(--ink2) !important; font-weight: 600; font-size: 14px;
    padding-top: 16px; padding-bottom: 16px;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus { color: var(--cyan-h) !important; background: transparent !important; }
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover {
    color: var(--navy) !important; background: transparent !important;
    box-shadow: inset 0 -2.5px 0 var(--cyan);
}
.navbar-toggle { border-color: var(--line) !important; }
.navbar-toggle .icon-bar { background: var(--navy) !important; }

/* Qualquer dropdown do site (Notificações, Conta/"Olá, {empresa}", Loja...)
   — não só o do .navbar-main — herda cor escura em vez do azul-ciano
   padrão de link (`a { color: cyan-h }` lá em cima). Sem isso, dropdowns
   fora do escopo ".navbar-main" ficavam com texto azul cru. */
.dropdown-menu {
    border: 1px solid var(--line-s) !important; border-radius: var(--rad-s) !important;
    box-shadow: var(--sh3) !important; padding: 6px !important; margin-top: 0; background: var(--w) !important;
}
.dropdown-menu > li > a {
    border-radius: 8px; font-size: 13.5px; padding: 9px 12px; color: var(--ink2) !important;
}
.dropdown-menu > li > a:hover { background: var(--cyan-xs) !important; color: var(--navy) !important; }

/* Bloco escuro "Olá, {empresa}!" que aparece quando logado — só o RÓTULO
   do botão (não o menu que abre, que já fica branco com texto escuro pela
   regra acima). Importante usar "> a" (filho direto do <li>) e não "a"
   solto: um seletor sem essa restrição pega também os itens DE DENTRO do
   dropdown (que tem fundo branco) e pinta o texto deles de branco — foi
   exatamente isso que deixou o menu ilegível no print anterior. */
.navbar-nav > li.pull-right > a,
.navbar-right > li.dropdown > a,
.navbar .dropdown.pull-right > a,
li[class*="account"] > a,
li[class*="client"] > a,
li[class*="user"] > a {
    color: #fff !important;
}

/* Print mostrou uma caixa branca grande e vazia sobreposta ao conteúdo,
   saindo bem onde fica esse bloco "Olá, {empresa}" — não consigo confirmar
   sem inspecionar (não tenho login), mas o padrão mais provável é um
   dropdown do WHMCS sem nenhum item dentro (ex.: lista de contas
   vinculadas vazia) ficando visível/expandido em vez de escondido.
   Isso força qualquer dropdown-menu sem <li> a ficar sempre oculto —
   nunca deveria aparecer como caixa vazia de qualquer forma. */
.dropdown-menu:empty,
.dropdown-menu:not(:has(> li)) {
    display: none !important;
}

/* ── #home-banner — hero da home ──────────────────────────────────────── */
#home-banner {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%) !important;
    padding: 60px 24px 64px !important;
    position: relative; overflow: hidden;
}
#home-banner::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 60% 80% at 50% 40%, black 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 40%, black 0%, transparent 100%);
}
/* Nuvens decorativas — mesmo recurso visual do cotacao_0800.php (reforça a
   ideia de "nuvem"/cloud por trás do produto), feitas em SVG puro via
   background-image (sem depender de markup extra no header/footer). */
#home-banner::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: .5;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20116'%3E%3Cellipse%20cx%3D'58'%20cy%3D'70'%20rx%3D'46'%20ry%3D'34'%20fill%3D'white'%2F%3E%3Cellipse%20cx%3D'101'%20cy%3D'50'%20rx%3D'57'%20ry%3D'45'%20fill%3D'white'%2F%3E%3Cellipse%20cx%3D'147'%20cy%3D'70'%20rx%3D'42'%20ry%3D'32'%20fill%3D'white'%2F%3E%3Crect%20x%3D'36'%20y%3D'68'%20width%3D'134'%20height%3D'40'%20rx%3D'20'%20fill%3D'white'%2F%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20116'%3E%3Cellipse%20cx%3D'58'%20cy%3D'70'%20rx%3D'46'%20ry%3D'34'%20fill%3D'white'%2F%3E%3Cellipse%20cx%3D'101'%20cy%3D'50'%20rx%3D'57'%20ry%3D'45'%20fill%3D'white'%2F%3E%3Cellipse%20cx%3D'147'%20cy%3D'70'%20rx%3D'42'%20ry%3D'32'%20fill%3D'white'%2F%3E%3Crect%20x%3D'36'%20y%3D'68'%20width%3D'134'%20height%3D'40'%20rx%3D'20'%20fill%3D'white'%2F%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20116'%3E%3Cellipse%20cx%3D'58'%20cy%3D'70'%20rx%3D'46'%20ry%3D'34'%20fill%3D'white'%2F%3E%3Cellipse%20cx%3D'101'%20cy%3D'50'%20rx%3D'57'%20ry%3D'45'%20fill%3D'white'%2F%3E%3Cellipse%20cx%3D'147'%20cy%3D'70'%20rx%3D'42'%20ry%3D'32'%20fill%3D'white'%2F%3E%3Crect%20x%3D'36'%20y%3D'68'%20width%3D'134'%20height%3D'40'%20rx%3D'20'%20fill%3D'white'%2F%3E%3C%2Fsvg%3E");
    background-position: -4% 8%, 96% -12%, 50% 118%;
    background-size: 210px auto, 180px auto, 150px auto;
    animation: nilaraCloudDrift 70s ease-in-out infinite alternate;
}
@keyframes nilaraCloudDrift { from { transform: translateX(0); } to { transform: translateX(22px); } }
@media (prefers-reduced-motion: reduce) { #home-banner::after { animation: none; } }
#home-banner h2 {
    color: #fff !important; font-size: clamp(22px, 3.6vw, 32px); font-weight: 800;
    letter-spacing: -.03em; position: relative; z-index: 1; margin: 0;
}

/* ── .home-shortcuts — atalhos "como podemos ajudar" ──────────────────── */
/* Sem overlap com o hero (o hero e esta seção dividem a mesma "row" com o
   label "Como podemos ajudar hoje?" — sobrepor com margin-top negativo
   colide os dois blocos). Fica como uma faixa clara logo abaixo do hero. */
.home-shortcuts {
    background: var(--bg) !important; padding: 40px 0 8px !important;
}
.home-shortcuts .container { max-width: 980px; }
.home-shortcuts p.lead { color: var(--slate) !important; font-weight: 700; font-size: 15px; margin-bottom: 18px; }
.home-shortcuts ul {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px;
    align-items: stretch; list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.home-shortcuts ul li {
    float: none !important; width: auto !important; white-space: normal !important; list-style: none !important;
    margin: 0 !important; padding: 0 !important;
}
.home-shortcuts ul li a {
    display: flex !important; flex-direction: column; gap: 10px; background: var(--w) !important;
    border: 1px solid var(--line-s); border-radius: var(--rad); padding: 22px 20px;
    box-shadow: var(--sh1); transition: transform .18s, box-shadow .18s, border-color .18s;
    height: 100%; position: relative !important; float: none !important;
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
}
.home-shortcuts ul li a:hover { transform: translateY(-3px); box-shadow: var(--sh2); border-color: var(--cyan-s); }
.home-shortcuts ul li a i {
    width: 40px; height: 40px; border-radius: 999px; background: var(--navy-xs); color: var(--navy);
    display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.home-shortcuts ul li a p {
    color: var(--ink2) !important; font-weight: 700; font-size: 14px; margin: 0; line-height: 1.4;
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
}
.home-shortcuts ul li a p span { color: var(--cyan-h); margin-left: 4px; }

/* ── Notícias / anúncios ───────────────────────────────────────────────── */
#main-body > .container > .row > .main-content > h2 { margin: 10px 0 20px; font-size: 22px; }
.announcement-single {
    background: var(--w); border: 1px solid var(--line-s); border-radius: var(--rad);
    box-shadow: var(--sh1); padding: 22px 26px; margin-bottom: 18px;
}
.announcement-single h3 { font-size: 16.5px; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.announcement-single h3 a { color: var(--navy); }
.announcement-single blockquote {
    border-left: none; margin: 0; padding: 0; font-size: 13.5px; color: var(--slate); line-height: 1.6;
}

/* ── Login ─────────────────────────────────────────────────────────────── */
.logincontainer {
    max-width: 440px; margin: 20px auto; background: var(--w); border: 1px solid var(--line-s);
    border-radius: var(--rad); box-shadow: var(--sh3); padding: 38px 34px;
}
.logincontainer .header-lined { border-bottom: 1px solid var(--line-s); padding-bottom: 16px; margin-bottom: 22px; }
.logincontainer .header-lined h1 { font-size: 24px; margin: 0; }
.logincontainer .header-lined h1 small { color: var(--slate); font-size: 13px; font-weight: 500; display: block; margin-top: 4px; }
.logincontainer .form-group label { font-size: 13px; font-weight: 700; color: var(--ink2); }
.logincontainer [align="center"] { display: flex; gap: 10px; justify-content: flex-start; align-items: center; }
.logincontainer .btn-primary { flex-shrink: 0; }

/* ── Botões (Bootstrap 3) ──────────────────────────────────────────────── */
.btn {
    border-radius: 999px !important; font-weight: 700 !important; font-family: 'Outfit', sans-serif;
    padding: 10px 22px !important; transition: all .18s; border-width: 1.5px !important;
}
.btn-primary {
    background: var(--green) !important; border-color: var(--green) !important; color: #fff !important;
    box-shadow: 0 6px 18px rgba(14,165,90,.3);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--green-h) !important; border-color: var(--green-h) !important; transform: translateY(-1px);
}
.btn-default {
    background: var(--w) !important; border-color: var(--line) !important; color: var(--ink) !important; box-shadow: none;
}
.btn-default:hover { border-color: var(--navy) !important; background: var(--bg) !important; }
.btn-info { background: var(--cyan) !important; border-color: var(--cyan) !important; color: #fff !important; }
.btn-info:hover { background: var(--cyan-h) !important; border-color: var(--cyan-h) !important; }
.btn-danger { background: var(--red) !important; border-color: var(--red) !important; }
.btn-success { background: var(--green) !important; border-color: var(--green) !important; }
.btn-link { color: var(--cyan-h) !important; font-weight: 700; }

/* ── Formulários ───────────────────────────────────────────────────────── */
.form-control {
    border: 1.5px solid var(--line) !important; border-radius: var(--rad-s) !important;
    font-family: 'Outfit', sans-serif; height: auto !important;
    background: var(--bg) !important; color: var(--ink) !important; box-shadow: none !important;
    padding-top: 11px !important; padding-right: 14px !important; padding-bottom: 11px !important;
}
/* padding-left É EXCLUÍDO do campo de telefone (ver bloco intl-tel-input
   abaixo) — por isso fica de fora do padding-top/right/bottom acima, que
   valem pra todo .form-control normalmente. */
.form-control:not(.intl-tel-input input) { padding-left: 14px !important; }
.form-control:focus {
    border-color: var(--cyan) !important; box-shadow: 0 0 0 4px var(--cyan-xs) !important; background: var(--w) !important;
}

/* Campo de telefone (widget de bandeira + código de país). Duas tentativas
   anteriores usaram os nomes de classe da versão NOVA da biblioteca
   "intl-tel-input" (".iti", ".iti__flag-container") — o WHMCS na verdade
   usa uma versão ANTIGA dela, com nomes bem diferentes (confirmado
   inspecionando o formulário de pedido, que tem o mesmo campo sem exigir
   login): o wrapper é ".intl-tel-input" (não ".iti"), a bandeira fica em
   ".flag-container" (não ".iti__flag-container"), e — diferença crucial —
   essa versão NÃO define o padding-left dinamicamente via style inline;
   é um valor fixo de 84px na própria folha de estilo da biblioteca (medi
   isso ao vivo, com o meu CSS temporariamente desligado). Por isso aqui
   uso 84px fixo mesmo (com !important), em vez de tentar ceder pro inline
   como antes — essa versão simplesmente não usa inline. */
.intl-tel-input input.form-control {
    padding-left: 84px !important;
}
.flag-container { border-radius: var(--rad-s) 0 0 var(--rad-s); }

label { font-weight: 700; font-size: 13px; color: var(--ink2); }
.checkbox label, .radio label { font-weight: 500; font-size: 13.5px; color: var(--slate); }

/* ── Painéis (faturas, tickets, produtos, área logada) ────────────────── */
.panel {
    background: var(--w) !important; border: 1px solid var(--line-s) !important;
    border-radius: var(--rad) !important; box-shadow: var(--sh1) !important;
}
.panel-heading {
    background: var(--w) !important; border-bottom: 1px solid var(--line-s) !important;
    border-radius: var(--rad) var(--rad) 0 0 !important; font-weight: 800; color: var(--navy);
    padding: 16px 20px !important;
}
.panel-body { padding: 20px !important; }
.panel-footer { background: var(--bg) !important; border-top: 1px solid var(--line-s) !important; }
.panel-primary > .panel-heading { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }

/* ── Tabelas ───────────────────────────────────────────────────────────── */
.table > thead > tr > th {
    background: var(--navy-xs); color: var(--navy); font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; border: none !important;
}
.table > tbody > tr > td, .table > tbody > tr > th { border-color: var(--line-s) !important; vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--bg); }
.table-hover > tbody > tr:hover { background: var(--cyan-xs); }

/* ── Labels / badges de status ────────────────────────────────────────── */
.label {
    border-radius: 999px !important; font-weight: 800 !important; padding: 5px 12px !important;
    letter-spacing: .2px; font-size: 11px;
}
.label-default { background: var(--navy-xs) !important; color: var(--navy) !important; }
.label-success { background: var(--green-xs) !important; color: var(--green-h) !important; }
.label-danger { background: var(--red-xs) !important; color: var(--red) !important; }
.label-warning { background: var(--amber-bg) !important; color: var(--amber) !important; }
.label-info { background: var(--cyan-xs) !important; color: var(--cyan-h) !important; }

/* .badge (contador Bootstrap 3 — ex.: número de artigos por categoria na
   sidebar da Base de Conhecimento) é um componente diferente de .label. */
.badge {
    background: var(--navy-xs) !important; color: var(--navy) !important; border-radius: 999px !important;
    font-weight: 800 !important; font-size: 11px !important; padding: 3px 8px !important;
}
.list-group-item.active .badge, a.active .badge { background: rgba(255,255,255,.2) !important; color: #fff !important; }

/* ── Alertas ───────────────────────────────────────────────────────────── */
.alert { border-radius: 14px !important; border-width: 1px !important; font-weight: 600; }
.alert-warning { background: var(--amber-bg) !important; border-color: var(--amber-line) !important; color: var(--amber) !important; }
.alert-info { background: var(--cyan-xs) !important; border-color: var(--cyan-s) !important; color: var(--cyan-h) !important; }
.alert-success { background: var(--green-xs) !important; border-color: var(--green-s) !important; color: var(--green-h) !important; }
.alert-danger { background: var(--red-xs) !important; border-color: #fecaca !important; color: var(--red) !important; }

/* ── Paginação ─────────────────────────────────────────────────────────── */
.pagination > li > a, .pagination > li > span {
    border-radius: 999px !important; margin: 0 3px; border-color: var(--line) !important; color: var(--ink2) !important;
}
.pagination > .active > a, .pagination > .active > span {
    background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important;
}

/* ── Sidebar (área logada + Base de Conhecimento) ─────────────────────── */
/* Seletor ".sidebar .panel-sidebar" — mais específico que ".panel" sozinho,
   pra vencer o CSS próprio do Six em vez de só empatar com ele. */
.sidebar .panel, .sidebar .panel-sidebar, #sidebar .panel {
    border: 1px solid var(--line-s) !important; border-radius: var(--rad) !important;
    box-shadow: var(--sh1) !important; margin-bottom: 18px !important; overflow: hidden;
}
.sidebar .panel-heading, #sidebar .panel-heading {
    background: var(--w) !important; border-bottom: 1px solid var(--line-s) !important; padding: 14px 18px !important;
}
.sidebar .panel-title, #sidebar .panel-title {
    font-size: 14px !important; font-weight: 800; color: var(--navy); display: flex; align-items: center; gap: 8px;
}
.sidebar .panel-title .fa-chevron-up, .sidebar .panel-title i.pull-right { color: var(--muted); font-size: 12px; }
.sidebar .list-group-item, #sidebar .list-group-item {
    border: none !important; border-bottom: 1px solid var(--line-s) !important;
    font-size: 13.5px; font-weight: 600; color: var(--ink2) !important;
    display: flex !important; align-items: center; justify-content: space-between; gap: 8px;
}
.sidebar .list-group-item:last-child, #sidebar .list-group-item:last-child { border-bottom: none !important; }
.sidebar .list-group-item:hover, #sidebar .list-group-item:hover { background: var(--cyan-xs) !important; color: var(--navy) !important; }
.sidebar .list-group-item.active, #sidebar .list-group-item.active {
    background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important;
}

/* ── Base de Conhecimento ──────────────────────────────────────────────── */
.kb-search .form-control {
    border-radius: var(--rad-s) 0 0 var(--rad-s) !important; border-right: none !important;
}
.kb-search .btn-primary { border-radius: 0 var(--rad-s) var(--rad-s) 0 !important; }
.kbcategories { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0 8px !important; }
.kbcategories > div { float: none !important; width: calc(33.333% - 11px) !important; }
@media (max-width: 767px) { .kbcategories > div { width: 100% !important; } }
.kbcategories > div {
    background: var(--w); border: 1px solid var(--line-s); border-radius: var(--rad);
    box-shadow: var(--sh1); padding: 18px 20px;
}
.kbcategories > div a { color: var(--navy); font-weight: 800; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.kbcategories > div a i { color: var(--cyan-h); }
.kbcategories > div p { color: var(--slate); font-size: 12.5px; margin: 8px 0 0; line-height: 1.5; }
.kbarticles { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 20px; }
.kbarticles a {
    background: var(--w); border: 1px solid var(--line-s); border-radius: var(--rad-s);
    padding: 13px 16px; font-weight: 700; color: var(--navy); font-size: 14px; display: block;
    transition: border-color .15s, background .15s;
}
.kbarticles a:hover { border-color: var(--cyan-s); background: var(--cyan-xs); }
.kbarticles a .glyphicon { color: var(--cyan-h); margin-right: 6px; }
.kbarticles p { color: var(--slate); font-size: 12.5px; margin: 4px 0 2px 2px; line-height: 1.5; }

/* ── Loja — cards de produto/plano (ex.: /store/pabx-virtual) ─────────── */
/* Marcação real: <div class="product"><header>Nome</header>
   <div class="product-desc"><p>linha<br>linha<br>...</p></div>
   <footer><div class="product-pricing">...</div><a class="btn-order-now">...</a></footer></div>
   A descrição é um único <p> com <br> (não é <ul><li>), então não dá pra
   colocar ícone de check por linha só com CSS — line-height maior já
   ajuda a não ficar uma parede de texto. */
/* #order-standard_cart na frente — o CSS próprio do formulário de pedido
   (/templates/orderforms/standard_cart/css/all.min.css) usa seletores
   escopados por esse id e ganhava do ".product" sozinho por especificidade,
   deixando o cabeçalho cinza em vez de branco. */
#order-standard_cart .product,
.product {
    background: var(--w) !important; border: 1px solid var(--line-s); border-radius: var(--rad);
    box-shadow: var(--sh1); overflow: hidden; margin-bottom: 20px;
    display: flex !important; flex-direction: column; height: 100%;
}
#order-standard_cart .product header,
.product header {
    background: var(--w) !important; border-bottom: 1px solid var(--line-s); padding: 16px 22px;
}
.product header span { font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.product .product-desc { padding: 18px 22px; flex: 1 1 auto; }
.product .product-desc p { color: var(--ink2); font-size: 13.5px; line-height: 2.1; margin: 0; }
.product .product-desc ul { margin: 10px 0 0; padding-left: 20px; }
.product .product-desc ul li { color: var(--ink2); font-size: 13.5px; line-height: 1.8; }
#order-standard_cart .product footer,
.product footer {
    padding: 18px 22px 22px; border-top: 1px solid var(--line-s); background: var(--bg) !important;
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto;
}
.product .product-pricing { line-height: 1.4; flex: 1 1 auto; min-width: 0; }
.product .product-pricing .price { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.product .product-pricing small { color: var(--slate); font-size: 11.5px; }
/* flex-shrink:0 é o que importa aqui — sem isso o botão espremia e o texto
   ("Faça seu pedido agora") vazava e ficava cortado pelo overflow:hidden
   do .product (foi o que causou o corte visível no print). */
.product .btn-order-now {
    flex-shrink: 0; white-space: nowrap; width: auto !important;
    padding: 9px 16px !important; font-size: 13px !important;
}
.row-eq-height { display: flex; flex-wrap: wrap; }
.row-eq-height > [class*="col-"] { display: flex; }

/* ── #footer ───────────────────────────────────────────────────────────── */
#footer {
    background: transparent !important; color: var(--muted) !important; font-size: 12px; padding: 20px 0 40px;
}
#footer a { color: var(--slate) !important; }
#footer .back-to-top {
    width: 40px; height: 40px; border-radius: 999px; background: var(--navy); color: #fff !important;
    display: flex; align-items: center; justify-content: center; box-shadow: var(--sh2);
}
#footer .back-to-top:hover { background: var(--navy2); }

/* ── Bloco de suporte injetado via hook ───────────────────────────────── */
.nilara-support-card {
    background: var(--navy); color: #fff; padding: 32px 26px; margin: 32px auto; max-width: 900px;
    text-align: center; border-radius: var(--rad);
}
.nilara-support-card h3 { color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 4px; letter-spacing: -.01em; }
.nilara-support-card p { color: #a9bdd4; font-size: 13.5px; margin-bottom: 20px; }
.nilara-support-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.nilara-support-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px;
    font-size: 13.5px; font-weight: 700; text-decoration: none; border: 1.5px solid rgba(255,255,255,.25); color: #fff;
    transition: all .18s;
}
.nilara-support-btn:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.nilara-support-btn.wa { background: var(--wa); border-color: var(--wa); }
.nilara-support-btn.wa:hover { background: var(--wa-h); }

/* ── Scrollbar discreto ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    #home-banner { padding: 40px 20px 48px; }
    .home-shortcuts { padding: 28px 0 4px !important; }
    .logincontainer { margin: 0; border-radius: 0; box-shadow: none; border: none; padding: 26px 18px; }
}