/* ==========================================================================
   NAPOLEON UX — Fase 1 v3 (Abril 2026)
   Estetica: Vercel / Linear — premium, branded, moderno
   Brandbook: #000000 | #25A559 | #13E881 | #B9E09F | #FFFFFF
   Principio: fundo cinza cria profundidade; verde Napoleon aparece
   nos pontos de acao e identidade; tipografia cria hierarquia.
   ========================================================================== */

/* --- TIPOGRAFIA --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Poppins nos headings — tracking apertado, peso definido */
h1, h2, h3, h4, h5, h6,
.panel-title,
.main-header-title h1,
.message-title {
    font-family: 'Poppins', var(--font-family-base) !important;
    letter-spacing: -0.02em;
}

h1, .main-header-title h1 { font-weight: 700 !important; }
h2, h3 { font-weight: 600 !important; }
h4, h5, h6, .panel-title { font-weight: 600 !important; }

/* --- FUNDO DA PAGINA --- */
/* Cinza sutil — faz os cards brancos flutuarem (segredo Vercel) */
.app-main {
    background: #fafafa !important;
}

/* --- STAT TILES (Dashboard) --- */

.tile {
    background: #fff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    overflow: hidden;
}

.tile:hover {
    border-color: #ccc !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    transform: none !important;
}

/* Numero — grande, bold, Poppins, preto puro */
.tile-stat {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-weight: 700 !important;
    font-size: 30px !important;
    color: #000 !important;
    letter-spacing: -0.03em;
}

/* Label — uppercase, pequeno, cinza medio */
.tile-title {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* Icone — verde Napoleon como marca de identidade no tile */
.tile .tile-icon-absolute i {
    color: #25A559 !important;
    font-size: 18px !important;
    opacity: 0.7;
}

.tile:hover .tile-icon-absolute i {
    opacity: 1;
}

/* Tile faturas nao pagas — icone vermelho */
.tile:has(.text-danger) .tile-icon-absolute i,
.tile:has(.text-danger) .icon-alert {
    color: var(--brand-danger) !important;
    opacity: 1;
}

/* --- CARDS / PANELS (somente area principal, NAO sidebar) --- */

.client-home-panels .panel,
.main-body-content > .table-container,
.main-body-content > .panel {
    background: #fff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    overflow: hidden;
    transition: box-shadow 0.2s ease !important;
}

.client-home-panels .panel:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    transform: none !important;
}

.client-home-panels .panel-heading {
    border-bottom: 1px solid #f0f0f0 !important;
    background: transparent !important;
}

/* Barra verde Napoleon — apenas nos panels do conteudo principal */
.client-home-panels .panel-heading .panel-title {
    position: relative;
    padding-left: 12px !important;
}

.client-home-panels .panel-heading .panel-title::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 16px !important;
    background: #25A559 !important;
    border-radius: 2px !important;
}

/* Barra verde tambem no page header (paginas internas) */
.main-header-title h1 {
    position: relative;
    padding-left: 14px !important;
}

.main-header-title h1::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 22px !important;
    background: #25A559 !important;
    border-radius: 2px !important;
}

/* Sidebar — manter estilos nativos, nao interferir */
.panel-sidebar {
    border-radius: var(--border-radius-base) !important;
}

.panel-sidebar .panel-title::before {
    display: none !important;
}

/* --- STATUS INDICATORS --- */

/* Dot — 7px, estatico, cores com personalidade */
.status::before {
    content: '' !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

.status-active::before { background: #25A559 !important; }
.status-suspended::before { background: #ef4444 !important; }
.status-pending::before,
.status-pending-transfer::before { background: #f59e0b !important; }
.status-terminated::before { background: #9ca3af !important; }
.status-cancelled::before { background: #d1d5db !important; }

/* Texto do status com cor correspondente — nao generico */
.status { font-size: 13px !important; font-weight: 500 !important; background: none !important; padding: 0 !important; border-radius: 0 !important; }
.status-active { color: #1a8a45 !important; }
.status-suspended { color: #dc2626 !important; }
.status-pending { color: #d97706 !important; }
.status-terminated { color: #6b7280 !important; }
.status-cancelled { color: #9ca3af !important; }

/* --- TABELA DE SERVICOS --- */

/* Container com cantos arredondados */
.table-container {
    border-radius: 12px !important;
    border: 1px solid #eaeaea !important;
    overflow: visible !important;
    background: #fff !important;
}

/* Manter cantos arredondados sem overflow hidden */
.table-container > .table-top {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.table-container > table {
    border-radius: 0 0 12px 12px;
}

.table-container > table thead tr:first-child th:first-child {
    border-top-left-radius: 0;
}

.table-container > table thead tr:first-child th:last-child {
    border-top-right-radius: 0;
}

.table-container > table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.table-container > table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* Header — uppercase refinado, fundo sutil */
.table-list thead th {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #888 !important;
    background: #fafafa !important;
    border-bottom: 1px solid #eaeaea !important;
}

/* Rows */
.table-list tbody tr {
    transition: background-color 0.15s ease !important;
}

.table-list tbody tr:hover {
    background: #f7f7f7 !important;
}

.table-list tbody tr td {
    border-bottom: 1px solid #f5f5f5 !important;
    vertical-align: middle !important;
}

/* Nome do produto — mais destaque */
.table-list tbody tr td:first-child b,
.table-list tbody tr td:first-child strong {
    color: #000 !important;
    font-weight: 600 !important;
}

/* Dominio — cinza discreto */
.table-list tbody tr td:first-child .text-small,
.table-list tbody tr td:first-child a.text-small {
    color: #888 !important;
    font-size: 12px !important;
}

/* --- BOTOES DE SERVICO (pagina Meus Produtos) --- */

.service-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    align-items: center;
}

.service-actions a {
    flex: 0 1 auto;
    text-align: center;
    text-decoration: none !important;
}

@media (max-width: 480px) {
    .service-actions {
        gap: 4px;
    }
    .service-actions a {
        flex: 1 1 calc(50% - 4px);
        font-size: 11px !important;
        padding: 6px 8px !important;
    }
}

/* --- NAVEGACAO LATERAL (left-nav-wide) --- */

/* Transicao mais suave: aumentar de 0.24s para 0.3s com ease-out para fluidez */
.lagom-layout-left-wide .app-nav-menu .menu > li > a:not(.btn) {
    transition: all 0.3s ease-out !important;
}

.lagom-layout-left-wide .app-nav-menu .menu > li > a:not(.btn) > i:first-child {
    transition: all 0.3s ease-out !important;
}

.lagom-layout-left-wide .app-nav-menu .menu > li > a:not(.btn) > .item-text {
    transition: all 0.3s ease-out !important;
}

/* Hover: fundo sutil para que a transicao seja VISIVEL ao trocar de item */
.lagom-layout-left-wide .app-nav-default .app-nav-menu .menu > li > a:not(.btn):hover {
    background: rgba(0,0,0,0.035) !important;
    border-radius: 8px !important;
}

/* Submenus: mesma fluidez */
.lagom-layout-left-wide .app-nav-menu .menu > li .dropdown-menu > li > a {
    transition: all 0.25s ease-out !important;
}

/* --- MICRO-INTERACOES (apenas o essencial) --- */

/* Focus visible */
.btn:focus-visible, a:focus-visible {
    outline: 2px solid #25A559 !important;
    outline-offset: 2px !important;
}

/* Links */
a { transition: color 0.15s ease !important; }

/* Alertas — entrada suave */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.alert-lagom { animation: slideDown 0.3s ease-out !important; }

/* ==========================================================================
   FASE 2.1 — Dashboard Layout
   ========================================================================== */

/* --- SAUDACAO --- */
.dashboard-greeting {
    margin-bottom: 20px;
    padding: 0 4px;
}

.dashboard-greeting h2 {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: -0.02em;
}

.dashboard-greeting p {
    font-size: 14px !important;
    color: #888 !important;
    margin: 0 !important;
}

/* --- ACOES RAPIDAS (barra horizontal) --- */
.napoleon-quick-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.napoleon-quick-actions .quick-action-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    text-decoration: none !important;
    color: #333 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.napoleon-quick-actions .quick-action-item:hover {
    border-color: #25A559 !important;
    box-shadow: 0 2px 8px rgba(37,165,89,0.08) !important;
    color: #000 !important;
}

.napoleon-quick-actions .quick-action-item i {
    font-size: 16px;
    color: #25A559;
}

.napoleon-quick-actions .quick-action-item span {
    font-size: 13px;
    font-weight: 500;
}

@media (max-width: 767px) {
    .napoleon-quick-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* Limitar lista de servicos no dashboard a 5 itens */
.panel-active-services .list-group.has-scroll {
    max-height: none !important;
}

.panel-active-services .list-group .list-group-item:nth-child(n+6) {
    display: none !important;
}

/* Link "Ver todos" no footer do panel de servicos */
.panel-active-services .panel-footer a {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #25A559 !important;
}

.panel-active-services .panel-footer a:hover {
    color: #1e8f4a !important;
}

/* --- DROPDOWNS (remover deslocamento lateral) --- */

/* Zerar a variavel que controla o translateX nos dropdowns */
:root {
    --app-nav-left-wide-dropdown-link-hover-padding-h: 0px !important;
    --app-nav-left-wide-dropdown-link-active-padding-h: 0px !important;
    --ui-nav-v-link-hover-padding-h: 0px !important;
    --ui-nav-v-link-active-padding-h: 0px !important;
}

/* Hover limpo nos dropdowns */
.dropdown-menu > li > a:hover,
.dropdown-menu > li:hover > a {
    background: #f7f7f7 !important;
    color: #000 !important;
}

/* ==========================================================================
   PAGINA DE CANCELAMENTO — Retencao + UX
   ========================================================================== */

/* --- Bloco de retencao --- */
.napoleon-retention-block {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 40px 32px 32px;
    text-align: center;
    margin-bottom: 0;
}

.retention-header .retention-emoji {
    font-size: 36px;
    margin-bottom: 12px;
    line-height: 1;
}

.retention-header h3 {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 22px;
    font-weight: 700;
    color: #000;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}

.retention-header p {
    color: #555;
    font-size: 14px;
    max-width: 540px;
    margin: 0 auto 28px;
    line-height: 1.7;
}

/* Botoes de retencao */
.retention-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 28px;
}

.retention-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-radius: 10px;
    text-decoration: none !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease !important;
    text-align: left;
    flex: 1;
    max-width: 280px;
}

.retention-btn:hover {
    transform: translateY(-1px);
}

.retention-btn i {
    font-size: 24px;
    flex-shrink: 0;
}

.retention-btn strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.retention-btn span {
    display: block;
    font-size: 12px;
    opacity: 0.75;
}

/* WhatsApp */
.retention-btn-primary {
    background: #25D366 !important;
    color: #fff !important;
    border: 1px solid #25D366;
}

.retention-btn-primary i {
    color: #fff !important;
}

.retention-btn-primary strong,
.retention-btn-primary span {
    color: #fff !important;
}

.retention-btn-primary:hover {
    box-shadow: 0 6px 20px rgba(37,211,102,0.30) !important;
    background: #22c55e !important;
}

/* Ticket */
.retention-btn-secondary {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #eaeaea;
}

.retention-btn-secondary i {
    color: #25A559;
}

.retention-btn-secondary:hover {
    border-color: #25A559 !important;
    box-shadow: 0 4px 12px rgba(37,165,89,0.10) !important;
}

/* Stats de prova social */
.retention-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.retention-stat {
    text-align: center;
}

.retention-stat strong {
    display: block;
    font-family: 'Poppins', var(--font-family-base);
    font-size: 20px;
    font-weight: 700;
    color: #25A559;
    letter-spacing: -0.02em;
}

.retention-stat span {
    font-size: 12px;
    color: #888;
}

.retention-stat-divider {
    width: 1px;
    height: 32px;
    background: #eaeaea;
}

/* --- Separador --- */
.napoleon-cancel-divider {
    text-align: center;
    margin: 32px 0 24px;
    position: relative;
}

.napoleon-cancel-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
}

.napoleon-cancel-divider span {
    position: relative;
    background: #fafafa;
    padding: 0 20px;
    font-size: 13px;
    color: #999;
    font-weight: 500;
}

/* --- Info do servico --- */
.napoleon-cancel-service-info {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    margin-bottom: 20px;
}

.cancel-service-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(37,165,89,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cancel-service-icon i {
    font-size: 18px;
    color: #25A559;
}

.napoleon-cancel-service-info strong {
    font-size: 14px;
    color: #000;
}

/* --- Formulario de cancelamento --- */
.napoleon-cancel-form {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 24px;
}

.napoleon-cancel-section {
    margin-bottom: 20px;
}

.napoleon-cancel-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #000 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.napoleon-cancel-form .form-control {
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease !important;
}

.napoleon-cancel-form .form-control:focus {
    border-color: #ccc !important;
    box-shadow: none !important;
}

/* --- Opcoes de tipo de cancelamento --- */
.napoleon-cancel-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cancel-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease !important;
    margin: 0 !important;
    background: #fff;
}

.cancel-option:hover {
    border-color: #d0d0d0;
}

.cancel-option input[type="radio"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: #25A559;
}

.cancel-option:has(input:checked) {
    border-color: #25A559;
    background: rgba(37,165,89,0.02);
}

.cancel-option-danger:has(input:checked) {
    border-color: #ef4444;
    background: rgba(239,68,68,0.02);
}

.cancel-option-content { flex: 1; }

.cancel-option-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.cancel-option-header strong {
    font-size: 14px;
    color: #000;
}

.cancel-option-content p {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

.cancel-option-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tag-recommended { background: rgba(37,165,89,0.1); color: #1a8a45; }
.tag-danger { background: rgba(239,68,68,0.1); color: #dc2626; }

/* --- Footer / acoes --- */
.napoleon-cancel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.btn-cancel-back {
    border: 1px solid #eaeaea !important;
    background: #fff !important;
    color: #333 !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
}

.btn-cancel-back:hover {
    border-color: #333 !important;
    color: #000 !important;
}

.btn-cancel-confirm {
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* --- Mobile --- */
@media (max-width: 767px) {
    .retention-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .retention-btn {
        max-width: 100%;
    }
    .napoleon-retention-block {
        padding: 28px 20px 24px;
    }
    .retention-stats {
        gap: 16px;
    }
    .retention-stat strong {
        font-size: 18px;
    }
    .napoleon-cancel-footer {
        flex-direction: column-reverse;
        gap: 10px;
    }
    .napoleon-cancel-footer .btn {
        width: 100%;
        text-align: center;
    }
    .napoleon-cancel-form {
        padding: 20px 16px;
    }
}

/* ==========================================================================
   PAGINA DE SUPORTE — Departamentos
   ========================================================================== */

/* --- Header --- */
.napoleon-support-header {
    text-align: center;
    padding: 32px 0 28px;
}

.napoleon-support-header-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(37,165,89,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.napoleon-support-header-icon i {
    font-size: 22px;
    color: #25A559;
}

.napoleon-support-header h2 {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 24px;
    font-weight: 700;
    color: #000;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.napoleon-support-header p {
    color: #888;
    font-size: 15px;
    margin: 0;
}

/* --- Canais de atendimento rapido --- */
.napoleon-support-channels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 460px;
    margin: 0 auto;
}

.support-channel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 10px;
    text-decoration: none !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease !important;
}

.support-channel:hover {
    transform: translateY(-1px);
}

.support-channel i {
    font-size: 22px;
    flex-shrink: 0;
}

.support-channel strong {
    display: block;
    font-size: 14px;
    margin-bottom: 1px;
}

.support-channel span {
    font-size: 12px;
    opacity: 0.7;
}

/* WhatsApp */
.support-channel-whatsapp {
    background: #25D366 !important;
    color: #fff !important;
}

.support-channel-whatsapp i,
.support-channel-whatsapp strong,
.support-channel-whatsapp span {
    color: #fff !important;
}

.support-channel-whatsapp:hover {
    box-shadow: 0 6px 20px rgba(37,211,102,0.30) !important;
}

/* Base de Conhecimento */
.support-channel-kb {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #eaeaea;
}

.support-channel-kb i {
    color: #25A559;
}

.support-channel-kb:hover {
    border-color: #25A559 !important;
    box-shadow: 0 4px 12px rgba(37,165,89,0.10) !important;
}

/* --- Separador --- */
.napoleon-support-divider {
    text-align: center;
    margin: 28px 0 24px;
    position: relative;
}

.napoleon-support-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
}

.napoleon-support-divider span {
    position: relative;
    background: #fafafa;
    padding: 0 20px;
    font-size: 13px;
    color: #999;
    font-weight: 500;
}

/* --- Grid de departamentos --- */
.napoleon-departments-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.napoleon-department-card {
    display: block;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    text-decoration: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    overflow: hidden;
}

.napoleon-department-card:hover {
    border-color: #25A559;
    box-shadow: 0 2px 12px rgba(37,165,89,0.08);
}

/* Remover TODAS as bordas accent/coloridas dos department cards */
.napoleon-department-card,
.napoleon-department-card[class*="panel-accent"],
.napoleon-department-card[class*="panel-support"],
.napoleon-department-card.panel,
.napoleon-department-card.panel-default {
    border: 1px solid #eaeaea !important;
    border-left: 1px solid #eaeaea !important;
    box-shadow: none !important;
    background: #fff !important;
}

.napoleon-department-card:hover,
.napoleon-department-card:hover[class*="panel-accent"],
.napoleon-department-card:hover.panel {
    border: 1px solid #25A559 !important;
    border-left: 1px solid #25A559 !important;
    box-shadow: 0 2px 12px rgba(37,165,89,0.08) !important;
}

.department-card-body {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
}

.department-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.2s ease !important;
}

.napoleon-department-card:hover .department-card-icon {
    background: rgba(37,165,89,0.08);
}

.department-card-icon i {
    font-size: 18px;
    color: #666;
    transition: color 0.2s ease !important;
}

.napoleon-department-card:hover .department-card-icon i {
    color: #25A559;
}

.department-card-info {
    flex: 1;
}

.department-card-info strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin-bottom: 2px;
}

.department-card-info p {
    font-size: 13px;
    color: #888;
    margin: 0;
    line-height: 1.4;
}

.department-card-arrow {
    color: #ccc;
    font-size: 12px;
    transition: color 0.2s ease, transform 0.2s ease !important;
    transform: rotate(-90deg);
}

.napoleon-department-card:hover .department-card-arrow {
    color: #25A559;
    transform: rotate(-90deg) translateY(2px);
}

.department-card-premium {
    padding: 8px 20px;
    border-top: 1px solid #f5f5f5;
    font-size: 12px;
}

/* Mobile */
@media (max-width: 767px) {
    .napoleon-support-channels {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .napoleon-support-header {
        padding: 24px 0 20px;
    }
    .napoleon-support-header h2 {
        font-size: 20px;
    }
}

/* ==========================================================================
   PAGINA DE FATURAS
   ========================================================================== */

/* --- Resumo de faturas --- */
.napoleon-invoices-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.napoleon-invoices-summary--compact {
    grid-template-columns: repeat(2, 1fr);
    max-width: 480px;
}

.invoice-summary-card {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.invoice-summary-label {
    font-size: 11px;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.invoice-summary-value {
    font-family: 'Poppins', var(--font-family-base);
    font-size: 20px;
    font-weight: 700;
    color: #000;
    letter-spacing: -0.02em;
}

/* --- Botao Pagar --- */
.napoleon-btn-pay {
    background: #25A559 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 6px 16px !important;
    transition: background-color 0.2s ease !important;
}

.napoleon-btn-pay:hover {
    background: #1e8f4a !important;
    color: #fff !important;
}

/* Botao Ver (faturas pagas) */
.napoleon-btn-view {
    border: 1px solid #eaeaea !important;
    background: #fff !important;
    color: #333 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 6px 16px !important;
}

.napoleon-btn-view:hover {
    border-color: #333 !important;
    color: #000 !important;
}

/* Mobile */
@media (max-width: 767px) {
    .napoleon-invoices-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    .invoice-summary-value {
        font-size: 18px;
    }
}

/* ==========================================================================
   PAGINA DE METODOS DE PAGAMENTO
   ========================================================================== */

.napoleon-paymethods {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.napoleon-paymethod-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    transition: border-color 0.2s ease !important;
}

.napoleon-paymethod-card:hover {
    border-color: #d0d0d0;
}

.napoleon-paymethod-card.is-default {
    border-color: #25A559;
    background: rgba(37,165,89,0.015);
}

.napoleon-paymethod-card.is-expired {
    opacity: 0.6;
}

.paymethod-card-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.paymethod-card-icon {
    width: 48px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.paymethod-card-icon img {
    max-width: 48px;
    max-height: 32px;
}

.paymethod-card-info strong {
    display: block;
    font-size: 14px;
    color: #000;
    font-weight: 600;
    margin-bottom: 2px;
}

.paymethod-desc {
    font-size: 13px;
    color: #888;
}

.paymethod-tags {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.paymethod-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tag-default {
    background: rgba(37,165,89,0.1);
    color: #1a8a45;
}

.tag-expired {
    background: rgba(239,68,68,0.1);
    color: #dc2626;
}

.paymethod-card-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.napoleon-btn-delete {
    border: 1px solid #eaeaea !important;
    background: #fff !important;
    color: #999 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
}

.napoleon-btn-delete:hover {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    background: rgba(239,68,68,0.03) !important;
}

/* Footer com botoes de adicionar */
.napoleon-paymethod-footer {
    display: flex;
    gap: 10px;
}

/* Estado vazio */
.napoleon-paymethod-empty {
    text-align: center;
    padding: 48px 20px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
}

.paymethod-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(37,165,89,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.paymethod-empty-icon i {
    font-size: 24px;
    color: #25A559;
}

.napoleon-paymethod-empty h4 {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin: 0 0 8px;
}

.napoleon-paymethod-empty p {
    color: #888;
    font-size: 14px;
    margin: 0 0 24px;
}

.paymethod-empty-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* Mobile */
@media (max-width: 767px) {
    .napoleon-paymethod-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .paymethod-card-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .napoleon-paymethod-footer {
        flex-direction: column;
    }
    .napoleon-paymethod-footer .btn {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   FORMULARIO ADICIONAR/EDITAR METODO DE PAGAMENTO
   ========================================================================== */

.napoleon-paymethod-form-page {
    max-width: 640px;
    margin: 0 auto;
}

.napoleon-paymethod-form-header {
    margin-bottom: 20px;
}

.napoleon-back-link {
    font-size: 13px;
    color: #888 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    transition: color 0.15s ease !important;
}

.napoleon-back-link:hover {
    color: #000 !important;
}

/* Header com icone de seguranca */
.napoleon-secure-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.napoleon-secure-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #000, #1a1a1a);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.napoleon-secure-icon i {
    font-size: 20px;
    color: #25A559;
}

.napoleon-paymethod-form-header h2 {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.napoleon-secure-subtitle {
    font-size: 13px;
    color: #25A559 !important;
    margin: 0 !important;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.napoleon-secure-subtitle i {
    font-size: 12px;
}

/* --- Barra de confianca --- */
.napoleon-trust-bar {
    display: flex;
    gap: 0;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}

.trust-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 12px;
    color: #666;
    font-weight: 500;
    border-right: 1px solid #f0f0f0;
}

.trust-item:last-child {
    border-right: none;
}

.trust-item i {
    font-size: 14px;
    color: #25A559;
}

/* --- Formulario --- */
.napoleon-paymethod-form-body .panel {
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.napoleon-paymethod-form-body .panel .panel-body {
    padding: 24px !important;
}

.napoleon-paymethod-form-body .form-control {
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.napoleon-paymethod-form-body .form-control:focus {
    border-color: #25A559 !important;
    box-shadow: 0 0 0 3px rgba(37,165,89,0.08) !important;
}

.napoleon-paymethod-form-body label.control-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 6px !important;
}

/* Botoes de acao */
.napoleon-paymethod-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.napoleon-paymethod-actions .napoleon-btn-pay {
    padding: 10px 24px !important;
    font-size: 14px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Footer de seguranca */
.napoleon-secure-footer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 16px;
    background: #f9faf9;
    border: 1px solid #e8ede8;
    border-radius: 10px;
    font-size: 12px;
    color: #666;
    line-height: 1.6;
}

.napoleon-secure-footer i {
    font-size: 14px;
    color: #25A559;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Mobile */
@media (max-width: 767px) {
    .napoleon-trust-bar {
        flex-direction: column;
    }
    .trust-item {
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
        justify-content: flex-start;
        padding: 10px 16px;
    }
    .trust-item:last-child {
        border-bottom: none;
    }
    .napoleon-paymethod-actions {
        flex-direction: column-reverse;
    }
    .napoleon-paymethod-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   SEGUNDA VIA DE FATURAS
   ========================================================================== */

/* Hero com formulario */
.napoleon-sv-hero {
    background: linear-gradient(145deg, #000 0%, #0a0a0a 60%, #0d1f15 100%);
    border-radius: 16px;
    padding: 48px 32px 40px;
    margin-bottom: 28px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.napoleon-sv-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #25A559, #13E881, transparent);
}

.napoleon-sv-hero-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #25A559;
    background: rgba(37,165,89,0.1);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.napoleon-sv-hero h1 {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 28px;
    font-weight: 700;
    color: #fff !important;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}

.napoleon-sv-hero p {
    color: rgba(255,255,255,0.6) !important;
    font-size: 15px;
    max-width: 480px;
    margin: 0 auto 28px;
    line-height: 1.6;
}

/* Input com icone */
.napoleon-sv-form {
    max-width: 460px;
    margin: 0 auto;
}

.napoleon-sv-input-group {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 4px;
    gap: 0;
    transition: border-color 0.2s ease !important;
}

.napoleon-sv-input-group:focus-within {
    border-color: #25A559;
}

.napoleon-sv-input-icon {
    padding: 0 12px;
    color: rgba(255,255,255,0.4);
    flex-shrink: 0;
}

.napoleon-sv-input-icon i {
    font-size: 16px;
}

.napoleon-sv-input-group .form-control {
    border: none !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 15px !important;
    padding: 10px 8px !important;
    flex: 1;
    box-shadow: none !important;
}

.napoleon-sv-input-group .form-control::placeholder {
    color: rgba(255,255,255,0.35) !important;
}

.napoleon-sv-input-group .btn {
    padding: 10px 24px !important;
    font-size: 14px !important;
    white-space: nowrap;
    border-radius: 8px !important;
    flex-shrink: 0;
}

.napoleon-sv-captcha {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}

/* Trust indicators no hero */
.napoleon-sv-hero-trust {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.napoleon-sv-hero-trust span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
}

.napoleon-sv-hero-trust i {
    font-size: 12px;
    color: #25A559;
}

/* Consultar novamente */
.napoleon-sv-consulted {
    margin-bottom: 20px;
}

/* Alertas */
.napoleon-sv-alert {
    border-radius: 10px !important;
    margin-bottom: 20px;
}

/* Estado vazio */
.napoleon-sv-empty {
    text-align: center;
    padding: 48px 20px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    margin-bottom: 24px;
}

.napoleon-sv-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(37,165,89,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.napoleon-sv-empty-icon i {
    font-size: 24px;
    color: #25A559;
}

.napoleon-sv-empty h3 {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin: 0 0 4px;
}

.napoleon-sv-empty p {
    color: #888;
    font-size: 14px;
    margin: 0;
}

/* --- Card list (substitui tabelas) --- */
.napoleon-sv-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.napoleon-sv-card {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 18px 20px;
    transition: border-color 0.2s ease !important;
}

.napoleon-sv-card:hover {
    border-color: #d0d0d0;
}

.napoleon-sv-card-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.napoleon-sv-card-number {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

.napoleon-sv-card-date {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.napoleon-sv-card-value {
    font-family: 'Poppins', var(--font-family-base);
    font-size: 18px;
    font-weight: 700;
    color: #000;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.napoleon-sv-card-copy {
    padding: 12px 0;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 12px;
}

.napoleon-sv-card-copy label {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px !important;
    display: block;
}

.napoleon-sv-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Secoes (PIX, Boletos, Faturas) */
.napoleon-sv-section {
    margin-bottom: 24px;
}

.napoleon-sv-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.napoleon-sv-section-header h3 {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.napoleon-sv-section-header h3 i {
    color: #25A559;
    font-size: 16px;
}

.napoleon-sv-count {
    background: #000;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
}

/* Grupo copiar */
.napoleon-sv-copy-group {
    display: flex;
    gap: 4px;
    max-width: 220px;
}

.napoleon-sv-copy-group .form-control {
    font-size: 11px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
}

/* Acoes por fatura */
.napoleon-sv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Footer seguranca */
.napoleon-sv-security-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f9f9f9;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    font-size: 12px;
    color: #888;
    margin-top: 24px;
}

.napoleon-sv-security-footer i {
    color: #25A559;
    font-size: 14px;
    flex-shrink: 0;
}

/* Manutencao */
.napoleon-segundavia-maintenance {
    text-align: center;
    padding: 60px 20px;
}

.napoleon-segundavia-maintenance .maintenance-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,170,0,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.napoleon-segundavia-maintenance .maintenance-icon i {
    font-size: 24px;
    color: #ffaa00;
}

.napoleon-segundavia-maintenance h3 {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin: 0 0 4px;
}

.napoleon-segundavia-maintenance p {
    color: #888;
    font-size: 14px;
    margin: 0;
}

/* Mobile */
@media (max-width: 767px) {
    .napoleon-sv-hero {
        padding: 32px 20px 28px;
    }
    .napoleon-sv-hero h1 {
        font-size: 22px;
    }
    .napoleon-sv-input-group {
        flex-direction: column;
        background: transparent;
        border: none;
        padding: 0;
        gap: 8px;
    }
    .napoleon-sv-input-icon {
        display: none;
    }
    .napoleon-sv-input-group .form-control {
        background: rgba(255,255,255,0.08) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: 8px !important;
        padding: 12px 16px !important;
    }
    .napoleon-sv-input-group .btn {
        width: 100%;
    }
    .napoleon-sv-hero-trust {
        flex-direction: column;
        gap: 8px;
    }
    .napoleon-sv-card-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .napoleon-sv-card-actions {
        flex-direction: column;
    }
    .napoleon-sv-card-actions .btn {
        width: 100%;
        text-align: center;
    }
    .napoleon-sv-copy-group {
        max-width: 100%;
    }
}

/* ==========================================================================
   PAGINA DE DETALHES DO PRODUTO/SERVICO
   Body class: .page-clientareaproductdetails
   ========================================================================== */

/* Esconder sidebar nesta pagina — full width */
.page-clientareaproductdetails .panel-sidebar { display: none !important; }
.page-clientareaproductdetails .main-content { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
.page-clientareaproductdetails .content-sidebar,
.page-clientareaproductdetails .col-sidebar { display: none !important; }

/* --- Header do produto (icone + nome + dominio) --- */
.product-details .product-icon {
    background: linear-gradient(145deg, #000 0%, #060606 40%, #0a1a10 100%) !important;
    border-radius: 14px !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(37,165,89,0.15) !important;
    animation: napoleon-card-glow 3s ease-in-out infinite alternate;
}

@keyframes napoleon-card-glow {
    0% {
        border-color: rgba(37,165,89,0.10);
        box-shadow:
            0 0 12px rgba(19,232,129,0.04),
            0 0 30px rgba(37,165,89,0.02),
            inset 0 0 20px rgba(19,232,129,0.01);
    }
    100% {
        border-color: rgba(19,232,129,0.30);
        box-shadow:
            0 0 18px rgba(19,232,129,0.10),
            0 0 40px rgba(37,165,89,0.05),
            inset 0 0 30px rgba(19,232,129,0.02);
    }
}

/* Linha verde topo */
.product-details .product-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #25A559, #13E881, transparent);
    z-index: 2;
}

/* Grid matrix — linhas verdes sutis com drift */
.product-details .product-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(37,165,89,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,165,89,0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    animation: napoleon-grid-drift 8s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes napoleon-grid-drift {
    0% { background-position: 0 0; }
    100% { background-position: 32px 64px; }
}

/* Conteudo acima do grid */
.product-icon .product-content {
    position: relative;
    z-index: 1;
}

/* Conteudo acima dos efeitos */
.product-icon .product-content {
    position: relative;
    z-index: 1;
}

.product-icon .product-content > * {
    position: relative;
    z-index: 1;
}

.product-details .product-name {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

/* Esconder nome do grupo (evita repeticao como "Hospedagem cPanel - Hospedagem cPanel Personal") */
.product-details .product-group-name,
.product-icon .product-group-name {
    display: none !important;
}

/* Status badge — pill moderna (label-success do cPanel module) */
.product-details .product-status .label,
.product-icon .product-status .label {
    background: rgba(37,165,89,0.18) !important;
    color: #25A559 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 5px 16px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(37,165,89,0.30) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: none !important;
}

/* Status badge — variantes */
.product-details .product-status .label-danger,
.product-icon .product-status .label-danger {
    background: rgba(239,68,68,0.12) !important;
    color: #ef4444 !important;
    border-color: rgba(239,68,68,0.25) !important;
}

.product-details .product-status .label-warning,
.product-icon .product-status .label-warning {
    background: rgba(245,158,11,0.12) !important;
    color: #d97706 !important;
    border-color: rgba(245,158,11,0.25) !important;
}

/* Status text "Status:" antes do badge */
.product-details .product-status {
    color: rgba(255,255,255,0.5) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    margin-top: 8px;
}

/* --- Painel de uso (disk/bandwidth) --- */
#cPanelUsagePanel {
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    height: 100%;
}

#cPanelUsagePanel > .panel-body {
    padding: 24px 20px 16px !important;
}

.cpanel-usage-stats .usage-stats {
    text-align: center;
}

.cpanel-usage-stats .usage-stats > span:first-child {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 10px;
}

.cpanel-usage-stats .usage-stats > span:last-child {
    font-size: 12px !important;
    color: #999 !important;
    font-weight: 500;
    display: block;
    margin-top: 6px;
}

/* Knob dial — numero interno */
.cpanel-usage-stats input.usage-dial {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-weight: 700 !important;
    color: #000 !important;
}

#cPanelUsagePanel > .panel-footer {
    background: #fafafa !important;
    border-top: 1px solid #f0f0f0 !important;
    padding: 10px 16px !important;
    font-size: 11px !important;
    color: #aaa !important;
}

/* --- Panel wrapper do modulo cPanel --- */
.panel-product-details {
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.panel-product-details > .panel-body {
    padding: 28px !important;
}

.panel-product-details .module-client-area {
    padding: 0 !important;
}

/* ===== MODULO CPANEL — SECTIONS ===== */

/* Spacing entre sections */
.module-client-area .section {
    margin-bottom: 32px !important;
}

.module-client-area .section:last-child {
    margin-bottom: 0 !important;
}

.module-client-area .section + .section {
    margin-top: 0 !important;
    padding-top: 32px !important;
    border-top: 1px solid #f0f0f0 !important;
}

.module-client-area .section-body > .panel {
    margin-bottom: 0 !important;
}

/* Product details (header+usage) nao e .section, mas precisa de espaco */
.module-client-area > .product-details {
    margin-bottom: 32px !important;
    padding-bottom: 32px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* --- Section headings — barra verde Napoleon --- */
.module-client-area .section-header {
    margin-bottom: 14px !important;
    padding: 0 !important;
}

.module-client-area .section-title {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #000 !important;
    letter-spacing: -0.01em;
    position: relative;
    padding-left: 14px !important;
    margin: 0 !important;
}

.module-client-area .section-title::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 18px !important;
    background: #25A559 !important;
    border-radius: 2px !important;
}

/* H3 do WordPress section (nao tem .section-header) */
.module-client-area .section > h3 {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #000 !important;
    position: relative;
    padding-left: 14px !important;
    margin: 0 0 14px !important;
}

.module-client-area .section > h3::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 18px !important;
    background: #25A559 !important;
    border-radius: 2px !important;
}

/* ===== QUICK SHORTCUTS (grid de atalhos cPanel) ===== */

#cPanelQuickShortcutsPanel {
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden;
}

#cPanelQuickShortcutsPanel > .panel-body {
    padding: 14px !important;
}

/* Rows de shortcuts — flexbox */
.cpanel-feature-row {
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 !important;
}

.cpanel-feature-row + .cpanel-feature-row {
    margin-top: 10px !important;
    padding-top: 0 !important;
    border: none !important;
}

/* Cada item do shortcut */
.cpanel-feature-row > [class*="col-"] {
    flex: 0 0 calc(25% - 8px) !important;
    max-width: calc(25% - 8px) !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
}

/* Link de cada shortcut — mini card */
.cpanel-feature-row .btn-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 10px !important;
    background: #fafafa !important;
    color: #444 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    line-height: 1.3 !important;
    min-height: 46px;
    width: 100% !important;
}

.cpanel-feature-row .btn-link:hover {
    border-color: #25A559 !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(37,165,89,0.08) !important;
    color: #000 !important;
    transform: translateY(-1px);
}

/* Icone do shortcut */
.cpanel-feature-row .btn-link i,
.cpanel-feature-row .btn-link .lm {
    font-size: 17px !important;
    color: #999 !important;
    transition: color 0.2s ease !important;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}

.cpanel-feature-row .btn-link:hover i,
.cpanel-feature-row .btn-link:hover .lm {
    color: #25A559 !important;
}

/* ===== FORMULARIO CRIAR EMAIL ===== */

#cPanelQuickEmailPanel {
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

#cPanelQuickEmailPanel > .panel-body {
    padding: 20px !important;
}

#cPanelQuickEmailPanel label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 6px !important;
}

#cPanelQuickEmailPanel .form-control {
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    height: 42px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#cPanelQuickEmailPanel .form-control:focus {
    border-color: #25A559 !important;
    box-shadow: 0 0 0 3px rgba(37,165,89,0.08) !important;
}

#cPanelQuickEmailPanel .input-group-addon {
    background: #f7f7f7 !important;
    border: 1px solid #eaeaea !important;
    border-left: none !important;
    color: #555 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 8px 14px !important;
}

#cPanelQuickEmailPanel .input-group .form-control:first-child {
    border-radius: 8px 0 0 8px !important;
}

#cPanelQuickEmailPanel .btn-primary {
    background: #25A559 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 24px !important;
    height: 42px !important;
    transition: background-color 0.2s ease !important;
}

#cPanelQuickEmailPanel .btn-primary:hover {
    background: #1e8f4a !important;
}

/* ===== PRODUTOS ADICIONAIS ===== */

#cPanelExtrasPurchasePanel {
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

#cPanelExtrasPurchasePanel > .panel-body {
    padding: 20px !important;
}

#cPanelExtrasPurchasePanel .form-control {
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    height: 44px !important;
    transition: border-color 0.2s ease !important;
}

#cPanelExtrasPurchasePanel .form-control:focus {
    border-color: #25A559 !important;
    box-shadow: 0 0 0 3px rgba(37,165,89,0.08) !important;
}

#cPanelExtrasPurchasePanel .btn-primary {
    background: #25A559 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    height: 42px !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 28px !important;
    float: right !important;
    transition: background-color 0.2s ease !important;
}

#cPanelExtrasPurchasePanel .btn-primary:hover {
    background: #1e8f4a !important;
}

/* ===== TABS (Faturamento / Dominio / etc) ===== */

/* Container do panel de tabs */
.module-cpanel .section-body > .panel-default {
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden;
}

/* Barra de tabs */
.module-cpanel .panel-tabs.nav-tabs {
    background: #fff !important;
    border-bottom: 1px solid #eaeaea !important;
    padding: 0 8px !important;
    margin: 0 !important;
}

.module-cpanel .panel-tabs.nav-tabs > li > a {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #888 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 14px 16px !important;
    transition: color 0.2s ease, border-color 0.2s ease !important;
    background: transparent !important;
}

.module-cpanel .panel-tabs.nav-tabs > li > a:hover {
    color: #333 !important;
    background: transparent !important;
}

.module-cpanel .panel-tabs.nav-tabs > li > a.active,
.module-cpanel .panel-tabs.nav-tabs > li.active > a {
    color: #000 !important;
    border-bottom-color: #25A559 !important;
    font-weight: 600 !important;
    background: transparent !important;
}

.module-cpanel .panel-tabs.nav-tabs > li > a i {
    color: #25A559 !important;
    margin-right: 4px;
}

/* --- Billing overview — grid compacto --- */
#billingInfo.billingOverview {
    padding: 20px 24px !important;
}

#billingInfo > .row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

#billingInfo > .row > [class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    border-right: 1px solid #f0f0f0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* Remover borda direita na ultima coluna de cada linha */
#billingInfo > .row > [class*="col-"]:nth-child(3n) {
    border-right: none !important;
}

/* Remover borda inferior da ultima linha */
#billingInfo > .row > [class*="col-"]:nth-last-child(-n+3) {
    border-bottom: none !important;
}

/* Label */
#billingInfo .text-faded.text-small {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin: 0 0 4px !important;
    line-height: 1.3;
}

/* Valor */
#billingInfo > .row > [class*="col-"] > div:last-child {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #000 !important;
    line-height: 1.4;
}

/* --- Tab Dominio --- */
.cpanel-actions-container {
    padding: 32px 20px !important;
    text-align: center;
}

.cpanel-actions-container > p {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #000 !important;
    margin-bottom: 20px !important;
    padding: 12px 20px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    display: inline-block;
}

.cpanel-actions-btn {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.cpanel-actions-btn .btn-primary {
    background: #25A559 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 24px !important;
    transition: background-color 0.2s ease !important;
}

.cpanel-actions-btn .btn-primary:hover {
    background: #1e8f4a !important;
}

/* --- WordPress panel --- */
#cPanelWordPress {
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

#cPanelWordPress .form-control {
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
}

#cPanelWordPress .btn-primary {
    background: #25A559 !important;
    border: none !important;
    border-radius: 8px !important;
}

#cPanelWordPress .btn-outline {
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    transition: border-color 0.2s ease !important;
}

#cPanelWordPress .btn-outline:hover {
    border-color: #25A559 !important;
    color: #25A559 !important;
}

/* ===== SIDEBAR (acoes do servico) ===== */

/* Sidebar panels */
.page-clientareaproductdetails .panel-sidebar {
    background: #fff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden;
    margin-bottom: 16px !important;
}

/* Heading da sidebar */
.page-clientareaproductdetails .panel-sidebar > .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid #f5f5f5 !important;
    padding: 14px 16px !important;
}

.page-clientareaproductdetails .panel-sidebar .panel-title {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #999 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.page-clientareaproductdetails .panel-sidebar .panel-title::before {
    display: none !important;
}

/* Items da sidebar */
.page-clientareaproductdetails .panel-sidebar .list-group {
    padding: 6px !important;
}

.page-clientareaproductdetails .panel-sidebar .list-group-item {
    border: none !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #555 !important;
    transition: all 0.15s ease !important;
    border-radius: 8px !important;
    margin: 1px 0 !important;
    background: transparent !important;
}

.page-clientareaproductdetails .panel-sidebar .list-group-item:hover {
    background: #f7f7f7 !important;
    color: #000 !important;
}

.page-clientareaproductdetails .panel-sidebar .list-group-item.active {
    background: rgba(37,165,89,0.06) !important;
    color: #000 !important;
    font-weight: 600 !important;
}

.page-clientareaproductdetails .panel-sidebar .list-group-item i {
    color: #aaa !important;
    margin-right: 8px;
    width: 18px;
    text-align: center;
    font-size: 14px !important;
    transition: color 0.15s ease !important;
}

.page-clientareaproductdetails .panel-sidebar .list-group-item:hover i {
    color: #25A559 !important;
}

.page-clientareaproductdetails .panel-sidebar .list-group-item.active i {
    color: #25A559 !important;
}

/* ===== PANELS GERAIS DENTRO DA PAGINA ===== */

/* Info do produto (quando nao tem cPanel — fallback) */
.product-info {
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

.product-info .list-info li {
    padding: 10px 0 !important;
    border-bottom: 1px solid #f5f5f5;
}

.product-info .list-info li:last-child {
    border-bottom: none;
}

.product-info .list-info-title {
    font-size: 12px !important;
    color: #888 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500 !important;
}

.product-info .list-info-text {
    font-weight: 600 !important;
    color: #000 !important;
}

/* Panel-nav (usado pelo template base para as tabs) */
.page-clientareaproductdetails .panel-nav {
    background: #fff !important;
    border-bottom: 1px solid #eaeaea !important;
}

.page-clientareaproductdetails .panel-nav .nav-tabs > li > a {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #888 !important;
    transition: color 0.2s ease !important;
    border: none !important;
    padding: 14px 18px !important;
}

.page-clientareaproductdetails .panel-nav .nav-tabs > li > a:hover {
    color: #000 !important;
    background: transparent !important;
}

.page-clientareaproductdetails .panel-nav .nav-tabs > li > a.active,
.page-clientareaproductdetails .panel-nav .nav-tabs > li.active > a {
    color: #000 !important;
    border-bottom: 2px solid #25A559 !important;
    font-weight: 600 !important;
}

.page-clientareaproductdetails .panel-nav .nav-tabs > li > a i {
    color: #25A559 !important;
    margin-right: 4px;
}

/* Panel container principal */
.page-clientareaproductdetails .section .panel-default {
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden;
}

/* Billing overview (template base — com gray-base) */
.billingOverview .row > div > .row {
    padding: 16px !important;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    margin: 0 0 8px !important;
    transition: border-color 0.2s ease !important;
}

.billingOverview .row > div > .row:hover {
    border-color: #e0e0e0;
}

.billingOverview .gray-base {
    font-size: 11px !important;
    color: #888 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    display: block;
    margin-bottom: 4px;
}

.billingOverview .row > div > .row > .col-12:last-child {
    font-family: 'Poppins', var(--font-family-base) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #000 !important;
}

/* Lists info — domain, config options, etc */
.list-info-bordered li {
    padding: 12px 20px !important;
}

.list-info-bordered .list-info-title {
    font-size: 13px !important;
    color: #888 !important;
    font-weight: 500 !important;
}

.list-info-bordered .list-info-text {
    font-weight: 500 !important;
    color: #000 !important;
}

/* Addons cards */
.page-clientareaproductdetails #Addons .panel-accent-blue {
    border: 1px solid #eaeaea !important;
    border-left: 3px solid #25A559 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* Formulario alterar senha */
.page-clientareaproductdetails #Changepw .panel-form {
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.page-clientareaproductdetails #Changepw .form-control {
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
}

.page-clientareaproductdetails #Changepw .form-control:focus {
    border-color: #25A559 !important;
    box-shadow: 0 0 0 3px rgba(37,165,89,0.08) !important;
}

/* Alertas */
.page-clientareaproductdetails .alert-lagom {
    border-radius: 10px !important;
}

/* Botoes primarios gerais da pagina */
.page-clientareaproductdetails .btn-primary {
    background: #25A559 !important;
    border-color: #25A559 !important;
    transition: background-color 0.2s ease !important;
}

.page-clientareaproductdetails .btn-primary:hover {
    background: #1e8f4a !important;
    border-color: #1e8f4a !important;
}

/* ===== RESPONSIVO ===== */

@media (max-width: 991px) {
    .cpanel-feature-row > [class*="col-"] {
        flex: 0 0 calc(33.33% - 6px) !important;
        max-width: calc(33.33% - 6px) !important;
    }
}

@media (max-width: 767px) {
    .cpanel-feature-row > [class*="col-"] {
        flex: 0 0 calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
    }

    .cpanel-feature-row .btn-link {
        font-size: 12px !important;
        padding: 10px 12px !important;
        min-height: 40px;
    }

    #cPanelQuickEmailPanel > .panel-body,
    #cPanelExtrasPurchasePanel > .panel-body {
        padding: 16px !important;
    }

    .panel-product-details > .panel-body {
        padding: 16px !important;
    }

    .module-client-area .section-title {
        font-size: 15px !important;
    }

    #billingInfo > .row {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #billingInfo > .row > [class*="col-"]:nth-child(3n) {
        border-right: 1px solid #f0f0f0 !important;
    }

    #billingInfo > .row > [class*="col-"]:nth-child(2n) {
        border-right: none !important;
    }

    #billingInfo.billingOverview {
        padding: 16px !important;
    }

    .module-client-area .section + .section {
        padding-top: 24px !important;
    }

    .module-client-area > .product-details {
        margin-bottom: 24px !important;
        padding-bottom: 24px !important;
    }

    .cpanel-actions-container {
        padding: 20px 16px !important;
    }
}

@media (max-width: 480px) {
    .cpanel-feature-row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .cpanel-actions-btn {
        flex-direction: column;
    }

    .cpanel-actions-btn .btn {
        width: 100%;
    }
}

/* --- FIM NAPOLEON UX Fase 1 v3 --- */


/* === Menu Comissões — estilo matrix/dark === */
li.menu-comissoes {
  padding: 4px 12px !important;
  margin: 2px 0 !important;
  background: transparent !important;
}

li.menu-comissoes > a {
  position: relative !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #000 0%, #060606 40%, #0a1a10 100%) !important;
  border: 1px solid rgba(37,165,89,0.12) !important;
  overflow: hidden !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
  box-shadow: none !important;
  animation: napoleon-btn-glow 3s ease-in-out infinite alternate !important;
}

@keyframes napoleon-btn-glow {
  0% { border-color: rgba(37,165,89,0.10); box-shadow: none; }
  100% { border-color: rgba(19,232,129,0.25); box-shadow: 0 0 12px rgba(19,232,129,0.06); }
}

/* Grid matrix dentro do botao */
li.menu-comissoes > a::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(37,165,89,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,165,89,0.04) 1px, transparent 1px) !important;
  background-size: 14px 14px !important;
  animation: napoleon-grid-drift 8s linear infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Barra verde lateral */
li.menu-comissoes > a::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 20% !important;
  height: 60% !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: #25A559 !important;
  box-shadow: none !important;
  transition: top 0.3s ease, height 0.3s ease, background 0.3s ease !important;
  z-index: 1 !important;
}

/* Hover — barra expande e fica neon */
li.menu-comissoes > a:hover::after,
.lagom-layout-left-wide .app-nav-menu .menu > li.menu-comissoes > a:not(.btn):hover::after {
  top: 0 !important;
  height: 100% !important;
  background: #13E881 !important;
  box-shadow: 0 0 6px rgba(19,232,129,0.30) !important;
}

li.menu-comissoes > a > * {
  position: relative !important;
  z-index: 2 !important;
}

li.menu-comissoes > a,
li.menu-comissoes > a .item-text {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500 !important;
}

li.menu-comissoes > a svg {
  filter: brightness(0) invert(1) !important;
}

/* Hover — mesma especificidade do Lagom2 theme.css */
.lagom-layout-left-wide .app-nav-default .app-nav-menu .menu > li.menu-comissoes > a:not(.btn):hover,
.lagom-layout-left-wide .app-nav-menu .menu > li.menu-comissoes > a:not(.btn):hover,
.lagom-layout-left .app-nav-default .app-nav-menu .menu > li.menu-comissoes > a:not(.btn):hover,
li.menu-comissoes > a:hover {
  background: linear-gradient(145deg, #050505 0%, #080808 40%, #0d2015 100%) !important;
  border-color: rgba(19,232,129,0.40) !important;
  box-shadow: 0 0 15px rgba(19,232,129,0.10), 0 0 30px rgba(19,232,129,0.04) !important;
  animation: none !important;
  color: #fff !important;
  transform: none !important;
  padding-left: var(--app-nav-left-wide-link-padding-h) !important;
  border-radius: 10px !important;
}

.lagom-layout-left-wide .app-nav-default .app-nav-menu .menu > li.menu-comissoes > a:not(.btn):hover > i:first-child,
.lagom-layout-left-wide .app-nav-default .app-nav-menu .menu > li.menu-comissoes > a:not(.btn):hover > svg:first-child,
li.menu-comissoes > a:hover svg {
  filter: brightness(0) invert(1) !important;
  color: #fff !important;
}

.lagom-layout-left-wide .app-nav-menu .menu > li.menu-comissoes > a:not(.btn):hover .item-text,
li.menu-comissoes > a:hover .item-text {
  color: #fff !important;
}

/* Remover no painel do cliente o logo da Napoleon na replica do suporte nos tickets */
.staff-reply {
    display:none!important;
}
/* Container geral para organizar em coluna */
.search-box-primary .flex-column-sm {
  flex-direction: column !important;
  align-items: center !important;
  gap: 18px !important;
  width: 100% !important;
}

/* Título grande e chamativo */
.search-box-primary .input-group-addon {
  background-color: #000000 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-align: center !important;
  width: 100% !important;
  border-radius: 6px !important;
  padding: 12px !important;
  border: none !important;
}

/* Campo do link + botão de copiar */
.search-box-primary .form-control.m-0 {
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 10px 12px !important;
  border-radius: 6px 6px 6px 6px !important;
  border: none !important;
  flex-grow: 1 !important;
}

/* Ícone ao lado do link */
.search-box-primary .input-group-addon:last-child {
  background: #e5e5e5 !important;
  padding: 10px 16px !important;
  border-radius: 0 6px 6px 0 !important;
  display: none !important;
  /*display: flex !important; */
  align-items: center !important;
  justify-content: center !important;
}

/* Espaço abaixo para checkbox e texto */
.search-box-primary center {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  gap: 10px !important;
  margin-top: 10px !important;
  color: white !important;
}

/* Estilo do checkbox */
.icheckbox_square-blue {
  transform: scale(1.1) !important;
  margin: 0 !important;
}

/* Texto ao lado do checkbox */
.icheckbox_square-blue ~ span {
  font-size: 14px !important;
  color: white !important;
  opacity: 1 !important;
  visibility: visible !important;
  white-space: normal !important;
}







#MP-Checkout-dialog {
    z-index:2000!important;
}
.category-flag {
    width: 18px;
    height: 12px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Estilização da sidebar de categorias */
.sidebar-category-container {
    max-width: 280px;
    margin-left: 10px;
    padding: 10px;
}

/* Painel de cada categoria */
.category-panel {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    background: #fff;
    overflow: hidden;
}

/* Título da categoria */
.category-title {
    background: #f8f9fa!important;
    padding: 12px;
    font-weight: bold;
    border-radius: 8px 8px 0 0;
}

.category-toggle {
    text-decoration: none!important;
    color: #333!important;
    display: block;
}

/* Lista de itens dentro de cada categoria */
.list-group {
    padding: 10px 0;
}

.category-item {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    border-left: 5px solid #f8f9fa!important;
    transition: background 0.3s ease;
}

.category-item i {
    margin-right: 8px!important;
}

.category-item:hover {
    background: #f1f1f1!important;
}

.category-item.active {
    background: #f5f5f5!important;
    color: #fff;
    font-weight: bold;
}

/* Ajuste para mobile */
@media (max-width: 768px) {
    .sidebar-category-container {
        max-width: 100%;
        margin: 0 auto;
    }
}


/* (service-actions movido para bloco Napoleon UX Fase 1) */

#countdown{
    color:#fff;
    font-weight: bold;
    font-size: 20px !important;
}
/* Countdown Timer */
.countdown-timer { 
    font-size: 18px !important;
    color: #28a745 !important; /* Verde claro */
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 10px !important;
    padding:20px;
    background:#000;
}
.countdown-timer i {
    color: #ffc107 !important; /* Amarelo para destaque */
    font-size: 18px !important;
    
}
/* Para telas menores, ajusta a flexibilidade */
@media screen and (max-width: 768px) {
    body.lagom.lagom-layout-left-wide.page-affiliates.page-user-logged div.input-group-lg p.text-center a{
    border-radius: 0px 0px 5px 5px !important;
    width: 100%;
}
    body.lagom.lagom-layout-left-wide.page-affiliates.page-user-logged div.input-group-lg .input-group-addon{
    border-radius: 5px 5px 0px 0px !important;
    width: 100%;
}
    .promo-bf {
        flex-wrap: wrap!important; /* Permite quebrar linha em telas menores */
    }
    .countdown-timer {
        display:none!important;
    }
    .service-actions a {
        flex: 1 1 calc(50% - 10px); /* Ocupa 50% do espaço em telas menores */
    }
    .conjunto {
        display: none !important;
    }
    .promo-slider {
        display: none!important; /* Remover banner do dashboard quando for mobile */
    }
    #frmProductDomain .panel-domain-search-primary {
        flex-direction: column; /* Empilha os elementos */
        align-items: stretch; /* Alinha elementos à largura total */
    }

    #frmProductDomain .panel-domain-search-primary input[type="text"],
    #frmProductDomain .panel-domain-search-primary select,
    #frmProductDomain .panel-domain-search-primary .btn {
        width: 100%; /* Ocupa toda a largura */
        margin-bottom: 10px; /* Espaço entre os itens */
    }
    form.loginForm {
        padding: 15px;
    }

    form.loginForm .login-title {
        font-size: 20px;
    }

    form.loginForm .login-desc {
        font-size: 14px;
    }

    form.loginForm button[type="submit"] {
        font-size: 14px;
        padding: 10px 16px;
    }
    .app-nav-header .logo img[src$=jpg],
    .app-nav-header .logo img[src$=png] {
    height: auto!important;
}
}


/* Ciclos de Desconto */
.cycle-box {
    background: #f8f9fa !important;
    padding: 15px 5px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
    text-align: center !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
    font-family: Arial, sans-serif !important;
    position: relative !important;
    border: 2px solid #28a745 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 1 1 150px !important;
    margin: 0;
}
/* Hover nos ciclos */
.cycle-box:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Texto dentro dos ciclos */
.cycle-label {
    font-weight: bold !important;
    font-size: 16px !important;
    color: #333 !important;
}

.cycle-discount {
    font-size: 22px !important;
    font-weight: bold !important;
    color: #28a745 !important;
}

/* Destaque refinado para o Trienal */
.cycle-trienal {
    background: linear-gradient(135deg, #32CD32, #228B22) !important;
    color: white !important;
    border: 2px solid #32CD32 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 12px rgba(50, 205, 50, 0.5) !important;
}

#clientAlert12, #clientAlert13 > *:not(#c) {
    position: relative;
    z-index: 1 !important;
}


/* Black Friday 2024 - Estilo Moderno */
#clientAlert12, #clientAlert13 {
    background: #000!important;
    border-radius:10px!important;
    overflow: hidden!important;
    position: relative!important;
    max-width: 100%!important; /* Garante que o contêiner não ultrapasse a largura da tela */
    margin-bottom: 30px!important; /* Centraliza o conteúdo */
    padding: 15px!important; /* Adiciona espaçamento interno */
    box-sizing: border-box!important; /* Inclui o padding no cálculo da largura */
}
.promo-bf {
    position: relative!important;
    max-width:100%!important;
    
}

#c {
    position: absolute!important; /* Define o canvas como absoluto */
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100%!important;
    z-index: -1!important; /* Coloca o canvas no fundo */
    color:#00ff00!important;
}

/* Ajustando o painel de alternância */
.panel-switch-show-renewable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    font-size: 14px;
    font-weight: normal;
    color: #333333;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
}

/* Botão de alternância */
.switch {
    position: relative;
    margin:13px!important;
    display: inline-block;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch_container {
    position: absolute;
    inset: 0;
    background-color: #e5e5e5;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Estilo do título */
.domain-renewal-title-right {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
}

/* Informações do serviço */
.domain-renewal-periods,
.domain-renewal-status {
    font-size: 14px;
    color: #666666;
    margin-top: 13px;
    margin-bottom: 13px;
}

.domain-renewal-next-due span {
    font-size: 14px;
    font-weight: bold;
    color: #d32f2f; /* Vermelho */
}

/* Botão de adicionar */
.domain-renewal-actions .btn {
    display: inline-block;
    width: auto;
    min-width: 120px;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background-color: #000000;
    color: #ffffff !important;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.domain-renewal-actions .btn:hover {
    background-color: #333333;
    transform: scale(1.02);
}


/* Botão Base de Conhecimento */
.btn-ticket-base {
    width: auto;
    min-width: 200px;
    padding: 12px 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espaço entre o ícone e o texto */
    border-radius: 8px;
    background: #333333; /* Preto do brand book */
    color: white !important;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-ticket-base:hover {
    background: #000; /* Cinza escuro no hover */
    transform: scale(1.05);
}

.support-title {
    color: #17191C !important; /* Mantém o preto */
    font-weight: bold!important; /* Destaca o título */
    border-bottom: 3px solid #25a559!important; /* Linha verde abaixo */
    padding-bottom: 5px!important; /* Espaçamento da linha */
}
.panel-department-box {
    border-bottom: 3px solid #25a559; /* Linha mais marcante abaixo do título */
    padding-bottom: 5px;
}


.list-group-item-body {
    margin-bottom: 20px; /* Ajuste o espaçamento entre os itens */
}
/* Personalização específica para o botão "Abrir Ticket" */
.panel-department-box .panel-footer .btn-primary-faded {
    background-color: #000 !important; /* Cor preta para o botão */
    color: #fff !important; /* Texto branco */
    font-weight: bold;
    border-radius: 8px;
    padding: 10px 15px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Hover para o botão */
.panel-department-box .panel-footer .btn-primary-faded:hover {
    background-color: #333 !important; /* Um tom mais claro de preto */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Ícones no botão */
.panel-department-box .panel-footer .btn-primary-faded::before {
    content: "✉️ "; /* Ícone de envelope */
    margin-right: 5px;
}

/* Botão WhatsApp na confirmação do pedido */
.btn-whatsapp-custom {
    width: auto;
    min-width: 200px;
    padding: 12px 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espaço entre o ícone e o texto */
    border-radius: 8px;
    background: #25d366; /* Verde WhatsApp */
    color: white !important;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-whatsapp-custom:hover {
    background: #1eb954; /* Leve escurecimento no hover */
    transform: scale(1.05);
}

/* Botão Ticket */
.btn-ticket-custom {
    width: auto;
    min-width: 200px;
    padding: 12px 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espaço entre o ícone e o texto */
    border-radius: 8px;
    background: #000000; /* Preto do brand book */
    color: white !important;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-ticket-custom:hover {
    background: #333333; /* Cinza escuro no hover */
    transform: scale(1.05);
}

/* Espaçamento entre os botões */
.support-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

.highlight-text {
    font-weight: bold; /* Mantém o peso do texto */
    color: #000; /* Cor inicial */
    animation: pulse 2s infinite;
    font-size:18px;
}

@keyframes pulse {
    0%, 100% {
        color: #000; /* Cor inicial e final */
        transform: scale(1);
    }
    50% {
        color: #fff; /* Cor intermediária */
        transform: scale(0.7); /* Aumenta ligeiramente */
    }
}


/* Estilização do botão atual */
.btn-add-to-cart {
    background: linear-gradient(90deg, #25a559, #1e944e, #197d44) !important; /* Gradiente animado */
    background-size: 200% 200% !important;
    color: #fff !important; /* Cor do texto */
    border: none !important;
    border-radius: 8px !important; /* Bordas arredondadas */
    padding: 12px 24px !important; /* Espaçamento interno */
    font-size: 16px; /* Tamanho da fonte */
    font-weight: bold;
    cursor: pointer !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-position 0.5s ease !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2) !important; /* Sombra */
}

.btn-remove-domain {
    background-color:#fff!important;
    color:#25a559!important;
    border: none !important;
}

.btn-primary-faded .btn-add-to-cart {
    font-size:14px;
}

/* Efeito de hover (passar o mouse) */
.btn-add-to-cart:hover {
    transform: scale(1.05) !important; /* Aumenta levemente o tamanho */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3) !important; /* Sombra mais intensa */
    background-position: 100% 0 !important; /* Movimento do gradiente */
}

/* Estado ativo (quando clicado) */
.btn-add-to-cart:active {
    transform: scale(0.95) !important; /* Diminui levemente o tamanho */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2) !important; /* Sombra reduzida */
}

/* Ajuste para espaçamento de texto no botão */
.message-actions .btn-group .btn-add-to-cart {
    line-height: 1.5 !important; /* Espaçamento das linhas no texto do botão */
}


#frmProductDomain .box-text-title {
    padding-top:20px;
    font-size: 18px;
    
}
#frmProductDomain .panel-domain-search-primary {
    display: flex;
    flex-wrap: wrap; /* Permite ajuste responsivo */
    justify-content: space-between;
    align-items: center;
    gap: 10px; /* Espaço entre os itens */
    padding: 15px; /* Padding interno */
}

#frmProductDomain .panel-domain-search-primary input[type="text"] {
    flex: 2; /* Ocupa mais espaço no layout */
    padding: 12px;
    font-size: 16px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    min-width: 0; /* Evita largura mínima forçada */
}

#frmProductDomain .panel-domain-search-primary input[type="text"]:focus {
    border-color: #25a559;
    box-shadow: 0 0 6px rgba(37, 165, 89, 0.5);
    outline: none;
}

#frmProductDomain .panel-domain-search-primary select {
    flex: 1; /* Ajusta a largura do dropdown */
    padding: 12px;
    font-size: 16px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    min-width: 120px; /* Define uma largura mínima */
}

#frmProductDomain .panel-domain-search-primary select:focus {
    border-color: #25a559;
    box-shadow: 0 0 6px rgba(37, 165, 89, 0.5);
    outline: none;
}



#frmProductDomain .panel-domain-search-primary .btn {
    flex: 1; /* Ajusta largura proporcional ao layout */
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    background: linear-gradient(90deg, #25a559, #1e944e, #197d44);
    background-size: 200% 200%;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    text-align: center;
    white-space: nowrap;
    min-width: 180px; /* Largura mínima do botão */
}

#frmProductDomain .panel-domain-search-primary .btn:hover {
    background-position: 100% 0; /* Muda o gradiente ao passar o mouse */
    transform: scale(1.05); /* Efeito de "crescimento" */
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(37, 165, 89, 0.5);
}

#frmProductDomain .panel-domain-search-primary .btn:active {
    transform: scale(0.98); /* Leve redução ao clicar */
    background-position: 50% 100%; /* Ajusta a posição do gradiente */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

#frmProductDomain .panel-domain-search-primary .btn .loader-button {
    display: none; /* Esconde o loader por padrão */
    margin-left: 10px;
}

#frmProductDomain .panel-domain-search-primary .btn.loading .loader-button {
    display: inline-block;
    animation: spin 1s linear infinite;
}

#frmProductDomain .panel-domain-search-primary .btn.loading .btn-text {
    visibility: hidden; /* Oculta o texto ao carregar */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}



/* Estilo específico para o formulário de redefinição de senha */
form.loginForm {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 8px;
    max-width: 400px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: auto;
}

/* Título da página */
form.loginForm .login-title {
    font-size: 24px;
    font-weight: bold;
    color: #25a559; /* Verde principal da Napoleon */
    margin-bottom: 10px;
    text-align: center;
}

/* Descrição do formulário */
form.loginForm .login-desc {
    color: #555555; /* Cinza suave */
    font-size: 16px;
    text-align: center;
    margin-bottom: 20px;
}

/* Label do campo */
form.loginForm label {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
    color: #333333;
    text-align: left; /* Mantém alinhado à esquerda */
    font-weight: bold;
}

/* Campo de entrada de e-mail */
form.loginForm input[type="email"] {
    background-color: #f9f9f9;
    border: 1px solid #cccccc;
    border-radius: 6px;
    font-size: 16px;
    width: 100%;
    color: #333333;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

form.loginForm input[type="email"]:focus {
    border-color: #25a559;
    box-shadow: 0 0 6px rgba(37, 165, 89, 0.5);
    outline: none;
}

/* Botão de envio */
form.loginForm button[type="submit"] {
    background-color: #25a559;
    color: #ffffff;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    width: 100%; /* Botão ocupa o mesmo tamanho do campo */
}

form.loginForm button[type="submit"]:hover {
    background-color: #1e944e;
    transform: scale(1.03);
}

form.loginForm button[type="submit"]:active {
    background-color: #197d44;
    transform: scale(0.97);
}

/* Texto abaixo do formulário */
form.loginForm .login-footer {
    text-align: center;
    font-size: 14px;
    color: #555555;
    margin-top: 15px;
}


/* Ajustar tamanho do valor do domínio na tela antes do checkout */
.domain-price {
    font-size: 26px;
}
/* Ajustar tamanho do valor no checkout */
.price-amount {
    font-size: 24px;
}

/* --- CARD DE PERFIL DO CLIENTE (sidebar) --- */

/* Card: gradiente escuro sutil com toque de verde Napoleon */
.panel-client-details {
    background: linear-gradient(145deg, #111 0%, #0a0a0a 60%, #0d1f15 100%) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Body: font-size 0 esconde texto solto (endereco), compacto */
.panel-client-details .panel-body {
    font-size: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
    padding: 20px 20px 16px !important;
}

.panel-client-details .panel-body br,
.panel-client-details .panel-body p {
    display: none !important;
}

/* Avatar — menor, com borda verde sutil */
.panel-client-details .client-avatar {
    font-size: 0 !important;
    line-height: 0 !important;
    margin-bottom: 10px !important;
}

.panel-client-details .client-avatar img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(37,165,89,0.3) !important;
    box-shadow: 0 0 0 4px rgba(37,165,89,0.06) !important;
}

/* Nome */
.panel-client-details strong {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    font-family: 'Poppins', var(--font-family-base) !important;
    color: #fff !important;
    margin-bottom: 14px !important;
    letter-spacing: -0.01em;
}

/* Botoes — compactos, lado a lado */
.panel-client-details .btn {
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    padding: 6px 16px !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

.panel-client-details .btn-success {
    background: #25A559 !important;
    border: none !important;
    color: #fff !important;
}

.panel-client-details .btn-success:hover {
    background: #1e8f4a !important;
}

.panel-client-details .btn-outline {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.7) !important;
}

.panel-client-details .btn-outline:hover {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.25) !important;
    color: #fff !important;
}

/* Linha sutil verde no topo do card como assinatura */
.panel-client-details::before {
    content: '' !important;
    display: block !important;
    height: 2px !important;
    background: linear-gradient(90deg, #25A559, #13E881, transparent) !important;
}

/* Estilo do título com espaçamento entre o texto normal e o texto em negrito */
#registerDomainPanel .panel-title {
    font-size: 22px; /* Aumenta ligeiramente o tamanho do título, se desejar */
    font-weight: 400;
    color: #000;
}

#registerDomainPanel .panel-title b {
    font-weight: 700; /* Mantém o negrito mais visível */
    margin-left: 7px; /* Adiciona um espaço entre "seu" e "Novo Domínio" */
}

/* Estilo para o placeholder do campo de entrada */
#registerDomainPanel .form-control::placeholder {
    font-size: 13px; /* Ajuste o tamanho da fonte conforme necessário */
    color: #666666; /* Mantenha uma cor cinza suave para o placeholder */
}


/* Estilo principal do painel de afiliação */
#affiliatesPanel {
    background-color: #fff !important; /* Fundo branco para um visual limpo */
    border: 1px solid #dcdcdc !important; /* Borda cinza claro para dar leveza */
    border-left: 4px solid #25a559 !important; /* Borda verde para indicar destaque */
    border-radius: 6px !important;
    padding: 20px !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05) !important; /* Sombra leve */
    font-family: 'Poppins', Arial, sans-serif !important;
}

/* Cabeçalho do painel */
#affiliatesPanel .panel-heading {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #25a559 !important; /* Verde escuro para contraste */
    padding-bottom: 10px !important;
    border-radius: 6px !important;
    border-bottom: 1px solid #e0e0e0 !important; /* Linha fina para separação */
}

/* Estilo do texto principal do painel */
#affiliatesPanel .panel-body {
    color: #000; /* Cinza escuro para leitura */
}

/* Tentando deixar os botões do e-mail enviado menores */
.rounded-button {
    height:20px!important;
    width:20px!important;
}



/* Efeito de movimento interno no botão de registrar agora */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Efeitos ao passar o mouse */
input[type="submit"][value="Transferir Domínio"]:hover {
    filter: brightness(1.1); /* Ilumina o gradiente no hover */
    transform: scale(1.03) !important;
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15);
}

/* Efeitos ao clicar */
input[type="submit"][value="Transferir Domínio"]:active {
    transform: scale(0.97) !important;
}

/* Estilização específica para botão de registrar agora */
input[type="submit"][value="Registrar Agora"] {
    background-color: #25a559 !important; /* Verde secundário da Napoleon */
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
    font-family: 'Poppins', sans-serif !important;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    font-weight: bold !important;
    animation: gradientMove 3s infinite linear!important;
    background-image: linear-gradient(45deg, #25a559, #20d789, #25a559)!important;
    background-size: 300% 300%!important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Efeito de movimento interno no botão de registrar agora */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Efeitos ao passar o mouse */
input[type="submit"][value="Registrar Agora"]:hover {
    filter: brightness(1.1); /* Ilumina o gradiente no hover */
    transform: scale(1.03) !important;
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15);
}

/* Efeitos ao clicar */
input[type="submit"][value="Registrar Agora"]:active {
    transform: scale(0.97) !important;
}
.ssl-info {display:none!important;}
body.lagom.lagom-layout-left-wide.page-affiliates.page-user-logged div.input-group-lg p.text-center {
margin-top: 0px !important;
}
body.lagom.lagom-layout-left-wide.page-affiliates.page-user-logged div.input-group-lg p.text-center a{
border-radius: 0px 5px 5px 0px !important;
}

.panel-summary .payment-form .btn {
margin-bottom:15px!important;
}
.payment-form.payment-btn-container button {
margin-top:7px!important;
}
.payment-form .btn, .payment-form input[type=button], .payment-form input [type=submit] {
width:100%!important;
}
.main-header{
padding-top:20px!important;
}
.input-group{
background:none!important;
margin-bottom:-20px;
}
@media (max-width: 1080px){
.app-nav-header .logo img {
width:100px!important;
height:18px!important;
}
.btn-group-sm>.btn, .btn-sm {
margin-bottom: 5px!important;
}
.main-footer .footer-bottom .footer-nav-h {
flex-direction: unset!important;
margin-bottom: 20px;
}
}
.botao-dev{
border-radius:5px!important;
}
.ls-info-circle {
display:none!important;
}
#inputPhone{
color:#25a559!important;
}
#cPanelQuickEmailPanel{
padding-bottom:30px;
}
.promo-slider-more {
display:none;
}
.ls-basket {
color:#000!important;
}

.site-protegido {
margin-bottom: 20px!important;
}
.ti-top-rated-title {
margin-right: 30px!important;
}
.giphy-embed {
border-radius:10px;
}
.package-body {
margin-top: 0px!important;
}
.package-actions, .package-footer {
padding-top: 0px!important;
}
.label-save {
background-color: #232323!important;
}
.checked .label-save {
background-color: #70CFF5!important;
border-radius:5px!important;
padding: 4px 8px!important;
font-size:12px;
box-shadow:
0 0 1px 1px #55C9F6, /* inner white */
0 0 5px 7px #CFEFFC; /* outer cyan */
}
.page-login .main-body-content {
    background: radial-gradient(circle, #0a3d29 0%, #0b2a1f 40%, #000000 100%); /* Dregradê na tela de LOGIN */
}

.login .login-language {
    color:#fff; /* Idioma na tela de LOGIN */
}
.login .dropdown-toggle{
    color:#fff!important;/* Idioma na tela de LOGIN */
}
#lagom-one-step-order .lm, .lagom .lm, .mg-wrapper .lm {
    padding:5px!important;
    font-size:13px!important; /* Correção de icone de relógio no status de rede */
}
#lagom-one-step-order .ls, .lagom .ls, .mg-wrapper .ls {
    padding:5px!important;
    font-size:13px!important; /* Correção de icone de data no status de rede */
}
#lagom-one-step-order .ls, .lagom .ls, .mg-wrapper .ls {
    padding:5px!important;
    font-size:13px!important; /* Correção de icone da bandeira no status de rede */
}
/* Estilo do botão principal */
.uptime-button {
    display: inline-block;
    background-color: #1a4e41; /* Fundo verde escuro */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}
.uptime-button a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
}

.uptime-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
/* Indicador de status com efeito de piscar */
.status-indicator {
    width: 10px;
    height: 10px;
    background-color: #13e881; /* Verde claro */
    border-radius: 50%;
    margin-right: 12px;
    animation: blink 1s infinite;
    box-shadow: 0 0 6px rgba(19, 232, 129, 0.5); /* Brilho suave */
}
/* Animação de piscar */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
}
/* Texto do botão */
.button-text {
    display: inline-block;
    color: #ffffff;
}
/* Estilos para Mobile */
@media (max-width: 600px) {
    .uptime-button a {
        padding: 10px 16px;
        font-size: 14px;
    }

    .status-indicator {
        width: 8px;
        height: 8px;
        margin-right: 8px;
    }
}

#sitejetPromoPanel {display:none;}/* Remover o Sitejet do painel do cliente */
/* Botoes secundarios de servico — outline com borda Vercel */
.btn-login-whm,
.btn-login-cpanel,
.btn-gerenciar-servidor {
    font-family: var(--font-family-base) !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    border: 1px solid #eaeaea !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    text-transform: none !important;
    background-color: #fff !important;
    color: #333 !important;
    line-height: 1.5 !important;
}

/* Botao Upgrade — verde Napoleon como statement da marca */
.btn-efetuar-upgrade {
    background: #25A559 !important;
    color: #fff !important;
    font-family: var(--font-family-base) !important;
    padding: 7px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #25A559 !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    box-shadow: 0 1px 2px rgba(37,165,89,0.15) !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
    line-height: 1.5 !important;
}



/* Hover — botoes secundarios ganham borda mais forte */
.btn-login-whm:hover,
.btn-login-cpanel:hover,
.btn-gerenciar-servidor:hover {
    border-color: #333 !important;
    color: #000 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    background-color: #fff !important;
    transform: none !important;
}

/* Hover — upgrade escurece (feedback claro) */
.btn-efetuar-upgrade:hover {
    background: #1e8f4a !important;
    border-color: #1e8f4a !important;
    box-shadow: 0 4px 12px rgba(37,165,89,0.25) !important;
    transform: none !important;
    filter: none !important;
}