/**
 * BR RADIOS - Custom Theme Override para WHMCS Lagom
 * Replica o visual do painel React do BR Radios
 */

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

/* ============================
   OCULTACAO IMEDIATA DO LAGOM
   Carrega antes do JS, sem flash
   ============================ */
.main-header, .lagom-header, .header-slim, .header-bg, .top-menu,
.portal-nav, .navbar, .navbar-wrapper, .main-nav,
.portal-sidebar, .lagom-sidebar, .RSThemes-sidebar,
.panel-sidebar, .sticky-sidebar,
.page-footer, .site-footer, .lagom-footer,
.footer-copy, .copyright,
.breadcrumb, .breadcrumb-wrapper,
.account-menu, .header-actions,
.sidebar:not(.order-summary):not(.cart-sidebar),
.header-area, .header-wrapper, .site-header,
[class*="RSThemes"] header, body > .header,
.lagom .header, .site > .header,
.portal-body > header, .page-header-area,
section#header, .app-nav, .main-footer,
.top-nav, a.logo.logo-text, .footer-content,
#scroll-to-top, .scroll-top {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Esconder tabelas nativas imediatamente (domínios/serviços) */
.table-container, .table-top, .dataTables_wrapper,
.bottom-action-sticky, #tableLoading,
.view-filter-btns {
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: none !important;
}

/* Esconder logo grande na viewinvoice APENAS quando logado */
.br-client-area .br-logo { display: none !important; }

/* Modo iframe (dentro do split de suporte) */
.br-in-frame .main-header, .br-in-frame .lagom-header,
.br-in-frame .portal-nav, .br-in-frame .navbar,
.br-in-frame .breadcrumb, .br-in-frame .page-footer,
.br-in-frame .site-footer, .br-in-frame #header, .br-in-frame #footer,
.br-in-frame .sidebar, .br-in-frame .portal-sidebar,
.br-in-frame .lagom-sidebar, .br-in-frame .RSThemes-sidebar,
.br-in-frame .navbar-wrapper, .br-in-frame .account-menu,
.br-in-frame .header-actions, .br-in-frame .header-slim,
.br-in-frame .header-bg, .br-in-frame .top-menu,
.br-in-frame .footer-copy, .br-in-frame .copyright,
.br-in-frame .lagom-footer, .br-in-frame .breadcrumb-wrapper,
.br-in-frame body > header, .br-in-frame body > footer,
.br-in-frame .br-ca-topbar, .br-in-frame .br-ca-nav,
.br-in-frame .br-vt-header, .br-in-frame .br-page-header,
.br-in-frame .panel-sidebar, .br-in-frame .sticky-sidebar {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}
.br-in-frame .portal-body > .container,
.br-in-frame .site > .container {
    max-width: 100% !important;
    padding: 12px !important;
}
.br-in-frame .col-md-9, .br-in-frame .col-lg-9,
.br-in-frame .col-md-9.pull-md-right {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}
.br-in-frame .col-md-3, .br-in-frame .col-lg-3 {
    display: none !important;
}
.br-in-frame body {
    background: #fff !important;
}
.br-in-frame .row {
    margin: 0 !important;
}

/* ============================
   VARIAVEIS
   ============================ */
:root {
    --br-green: #00A651;
    --br-green-dark: #059142;
    --br-green-light: #dcfce7;
    --br-green-bg: #f0fdf4;
    --br-dark: #1a1a1a;
    --br-gray-700: #374151;
    --br-gray-500: #6b7280;
    --br-gray-300: #d1d5db;
    --br-gray-100: #f3f4f6;
    --br-white: #ffffff;
    --br-blue-light: #dbeafe;
    --br-blue-border: #93c5fd;
    --br-radius: 12px;
    --br-radius-lg: 16px;
    --br-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
    --br-shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03);
}

/* ============================
   BODY / GLOBAL
   ============================ */
body, .site, .portal-body, .lagom {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background: #f5f6f8 !important;
    color: var(--br-gray-700) !important;
}

/* ============================
   ESCONDER HEADER PADRAO LAGOM
   ============================ */
.main-header,
.lagom .main-header,
header.main-header,
#header,
.lagom-header,
.header-slim {
    background: var(--br-white) !important;
    border-bottom: 1px solid var(--br-gray-100) !important;
    box-shadow: var(--br-shadow) !important;
    padding: 8px 0 !important;
}

/* Logo */
.logo img, .main-header .logo img, a.logo img, .lagom .logo img {
    max-height: 44px !important;
}

.logo a, .header-logo a {
    color: var(--br-dark) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

/* Header links */
.header-actions a, .main-header a, .header-slim a {
    color: var(--br-gray-500) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.header-actions a:hover, .main-header a:hover { color: var(--br-green) !important; }

/* ============================
   NAVEGACAO
   ============================ */
.navbar, .main-nav, nav.navbar, .navbar-default, .portal-nav {
    background: var(--br-white) !important;
    border: none !important;
    border-bottom: 1px solid var(--br-gray-100) !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.navbar-nav > li > a, .main-nav a, .portal-nav a, .nav > li > a {
    color: var(--br-gray-700) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 14px 18px !important;
    transition: all 0.2s ease !important;
    border-radius: 8px !important;
}

.navbar-nav > li > a:hover, .navbar-nav > .active > a,
.main-nav a:hover, .nav > li > a:hover {
    color: var(--br-green) !important;
    background: var(--br-green-bg) !important;
}

.dropdown-menu {
    border: 1px solid var(--br-gray-100) !important;
    border-radius: var(--br-radius) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
    padding: 8px !important;
}
.dropdown-menu > li > a {
    border-radius: 8px !important;
    padding: 10px 16px !important;
    color: var(--br-gray-700) !important;
}
.dropdown-menu > li > a:hover {
    background: var(--br-green-bg) !important;
    color: var(--br-green) !important;
}

/* ============================
   HEADINGS - SEM BLOCO VERDE
   Estilo limpo igual ao React app
   ============================ */
.header-lined,
.sub-heading,
.order-form h2,
h2.heading,
.domainchecker-top,
.domain-pricing-header,
.main-content h2,
.domain-header,
.panel-heading h2,
.product-group h2,
.product-heading {
    background: transparent !important;
    color: var(--br-dark) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    text-align: center !important;
}

/* Subtitulos */
.header-lined + p, .sub-heading + p, h2 + p {
    color: var(--br-gray-500) !important;
    font-size: 14px !important;
    text-align: center !important;
    margin-bottom: 24px !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif !important;
    color: var(--br-dark) !important;
    font-weight: 700 !important;
}

/* ============================
   BOTOES
   ============================ */
.btn-primary, .btn-success, .btn-order,
input[type="submit"], button[type="submit"] {
    background: var(--br-green) !important;
    border: none !important;
    border-color: var(--br-green) !important;
    color: var(--br-white) !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    padding: 14px 28px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}
.btn-primary:hover, .btn-success:hover, .btn-order:hover,
input[type="submit"]:hover, button[type="submit"]:hover {
    background: var(--br-green-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 166, 81, 0.3) !important;
}

.btn-default, .btn-secondary {
    background: var(--br-white) !important;
    border: 2px solid var(--br-gray-300) !important;
    color: var(--br-gray-700) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    padding: 12px 24px !important;
    transition: all 0.2s ease !important;
}
.btn-default:hover, .btn-secondary:hover {
    border-color: var(--br-green) !important;
    color: var(--br-green) !important;
    background: var(--br-green-bg) !important;
}

.btn-info {
    background: var(--br-green) !important;
    border-color: var(--br-green) !important;
}

/* ============================
   CARDS / PAINEIS
   ============================ */
.panel, .card, .well, .panel-default,
.panel-primary, .panel-success, .panel-info {
    background: var(--br-white) !important;
    border: 1px solid #e5e7eb !important;
    border-radius: var(--br-radius-lg) !important;
    box-shadow: var(--br-shadow) !important;
    overflow: hidden !important;
}

.panel-heading, .card-header {
    background: var(--br-white) !important;
    border-bottom: 1px solid var(--br-gray-100) !important;
    color: var(--br-dark) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    padding: 20px 24px !important;
}

.panel-body, .card-body { padding: 24px !important; }

.panel-title {
    color: var(--br-dark) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

/* ============================
   CARDS DE CICLO DE PAGAMENTO
   Estilo igual ao React: borda azul no selecionado
   ============================ */
.pricing-table, .product-card, .product,
.panel-pricing, [class*="cycle"], [class*="billing"] {
    border: 2px solid #e5e7eb !important;
    border-radius: var(--br-radius-lg) !important;
    background: var(--br-white) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-align: center !important;
}

.pricing-table:hover, .product-card:hover, .product:hover {
    border-color: var(--br-blue-border) !important;
    box-shadow: var(--br-shadow-md) !important;
}

.pricing-table.active, .pricing-table.selected,
.product-card.active, .product.active,
[class*="cycle"].active, [class*="billing"].active {
    border-color: var(--br-blue-border) !important;
    background: #f0f7ff !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Precos nos cards */
.pricing-table .price, .product .price,
[class*="price"], .amount {
    color: var(--br-dark) !important;
    font-weight: 800 !important;
    font-size: 26px !important;
}

/* Discount badges - igual React (10% OFF, 25% OFF) */
.promo-label, .discount-label, [class*="discount"],
[class*="promo"], .label-promo {
    background: var(--br-green) !important;
    color: var(--br-white) !important;
    border-radius: 20px !important;
    padding: 3px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: inline-block !important;
}

/* ============================
   OPCOES DE DOMINIO
   ============================ */
.domain-option, .domain-option-item, .domainoption {
    border: 2px solid #e5e7eb !important;
    border-radius: var(--br-radius-lg) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    background: var(--br-white) !important;
    text-align: center !important;
    padding: 28px 20px !important;
}

.domain-option:hover, .domain-option-item:hover, .domainoption:hover {
    border-color: var(--br-green) !important;
    background: var(--br-green-bg) !important;
    box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.1) !important;
}

.domain-option.active, .domain-option-item.active, .domainoption.active {
    border-color: var(--br-green) !important;
    background: var(--br-green-bg) !important;
}

/* Icones de dominio */
.domain-option i, .domain-option svg, .domain-option .fa,
.domainoption i, .domainoption .fa {
    color: #3b82f6 !important;
    font-size: 48px !important;
    margin-bottom: 16px !important;
}

/* ============================
   BARRA PESQUISA DOMINIO
   ============================ */
.domainchecker, .domain-checker-bg, .domain-search-container {
    background: var(--br-green) !important;
    border-radius: var(--br-radius-lg) !important;
    padding: 28px !important;
    border: none !important;
    background-image: none !important;
}

.domainchecker input[type="text"], .domain-search input[type="text"] {
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
    font-family: 'Inter', sans-serif !important;
    background: var(--br-white) !important;
}
.domainchecker input[type="text"]:focus, .domain-search input[type="text"]:focus {
    border-color: var(--br-green) !important;
    box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.15) !important;
}

/* ============================
   SIDEBAR "RESUMO DO PEDIDO"
   ============================ */
.order-summary, .cart-sidebar, .order-summary-panel,
.sidebar .panel, .portal-sidebar .panel {
    border-radius: var(--br-radius-lg) !important;
    border: 1px solid #e5e7eb !important;
    background: var(--br-white) !important;
    box-shadow: var(--br-shadow) !important;
}

.order-summary .panel-heading, .cart-sidebar .panel-heading {
    font-size: 18px !important;
    font-weight: 800 !important;
    padding: 20px 24px !important;
    background: var(--br-white) !important;
    border-bottom: 1px solid var(--br-gray-100) !important;
}

/* Total no resumo */
.order-summary .total, .cart-total, .order-total,
.order-summary .total-due {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--br-dark) !important;
}

.sidebar .list-group-item, .sidebar .nav > li > a {
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    color: var(--br-gray-700) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}
.sidebar .list-group-item:hover, .sidebar .nav > li > a:hover,
.sidebar .list-group-item.active, .sidebar .nav > .active > a {
    background: var(--br-green-bg) !important;
    color: var(--br-green) !important;
}

/* ============================
   METODO DE PAGAMENTO
   Radio buttons estilizados
   ============================ */
.gateway-option, .payment-method, [class*="gateway"] label,
[class*="payment-method"] {
    border: 2px solid #e5e7eb !important;
    border-radius: var(--br-radius) !important;
    padding: 16px 20px !important;
    margin-bottom: 10px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: block !important;
    background: var(--br-white) !important;
}

.gateway-option:hover, .payment-method:hover,
[class*="gateway"] label:hover {
    border-color: var(--br-green) !important;
}

.gateway-option.active, .gateway-option.selected,
.payment-method.active, .payment-method.selected {
    border-color: var(--br-green) !important;
    background: var(--br-green-bg) !important;
    box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.1) !important;
}

/* Radio/Checkbox customizado */
input[type="radio"], input[type="checkbox"] {
    accent-color: var(--br-green) !important;
}

/* ============================
   FORMULARIOS
   ============================ */
.form-control, input[type="text"], input[type="email"],
input[type="password"], input[type="tel"], input[type="number"],
select, textarea {
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    color: var(--br-dark) !important;
    transition: border-color 0.2s ease !important;
    background: var(--br-white) !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--br-green) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.15) !important;
}

label {
    font-weight: 600 !important;
    color: var(--br-gray-700) !important;
    font-size: 14px !important;
}

/* ============================
   CHECKOUT STEPS
   ============================ */
.checkout-step, .order-form-step {
    background: var(--br-white) !important;
    border-radius: var(--br-radius-lg) !important;
    padding: 28px !important;
    margin-bottom: 16px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: var(--br-shadow) !important;
}

/* ============================
   TABELAS
   ============================ */
.table thead th, table thead th {
    background: var(--br-gray-100) !important;
    color: var(--br-gray-500) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #e5e7eb !important;
}
.table tbody td, table tbody td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--br-gray-100) !important;
    color: var(--br-gray-700) !important;
    font-size: 14px !important;
}
.table tbody tr:hover, table tbody tr:hover {
    background: var(--br-green-bg) !important;
}

/* ============================
   BADGES / STATUS
   ============================ */
.label-success, .badge-success {
    background: var(--br-green-light) !important;
    color: var(--br-green-dark) !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}
.label-danger, .badge-danger {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-weight: 600 !important;
}
.label-warning, .badge-warning {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-weight: 600 !important;
}
.label-info, .badge-info {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-weight: 600 !important;
}

/* ============================
   ALERTAS
   ============================ */
.alert { border-radius: var(--br-radius) !important; padding: 16px 20px !important; font-size: 14px !important; font-weight: 500 !important; }
.alert-success { background: var(--br-green-bg) !important; border-color: #bbf7d0 !important; color: #166534 !important; }
.alert-info { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1e40af !important; }
.alert-danger { background: #fef2f2 !important; border-color: #fecaca !important; color: #991b1b !important; }
.alert-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; }

/* ============================
   FOOTER - ESCONDER
   ============================ */
.page-footer, .site-footer, .lagom-footer, footer,
.footer-copy, .copyright, .footer-copyright,
body > footer, .site > footer {
    display: none !important;
}

/* ============================
   LINKS
   ============================ */
a { color: var(--br-green) !important; transition: color 0.2s ease !important; }
a:hover { color: var(--br-green-dark) !important; text-decoration: none !important; }

/* ============================
   BREADCRUMB
   ============================ */
.breadcrumb { background: transparent !important; padding: 12px 0 !important; font-size: 13px !important; border: none !important; }

/* ============================
   MODAL
   ============================ */
.modal-content { border-radius: var(--br-radius-lg) !important; border: none !important; box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important; }
.modal-header { border-bottom: 1px solid var(--br-gray-100) !important; padding: 20px 24px !important; }
.modal-body { padding: 24px !important; }
.modal-footer { border-top: 1px solid var(--br-gray-100) !important; padding: 16px 24px !important; }

/* ============================
   PAGINATION
   ============================ */
.pagination > li > a {
    border-radius: 8px !important;
    margin: 0 2px !important;
    border: 1px solid #e5e7eb !important;
    color: var(--br-gray-700) !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
}
.pagination > .active > a {
    background: var(--br-green) !important;
    border-color: var(--br-green) !important;
    color: var(--br-white) !important;
}
.pagination > li > a:hover {
    background: var(--br-green-bg) !important;
    color: var(--br-green) !important;
}

/* ============================
   CONTAINER
   ============================ */
.container, .site > .container, .portal-body > .container {
    max-width: 1100px !important;
}

/* ============================
   RESPONSIVO
   ============================ */
@media (max-width: 768px) {
    .container { padding: 0 12px !important; }
    .panel-body, .card-body { padding: 16px !important; }
    .checkout-step, .order-form-step { padding: 16px !important; }
}

/* ============================
   TRANSITIONS
   ============================ */
.panel, .card, .btn, .form-control, input, select, .alert {
    transition: all 0.2s ease !important;
}

/* ============================
   SCROLLBAR
   ============================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--br-gray-100); }
::-webkit-scrollbar-thumb { background: var(--br-gray-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--br-green); }


/* ============================================
   AREA DO CLIENTE - LAYOUT GLOBAL
   Aplicado via body.br-client-area (JS)
   ============================================ */

/* --- ESCONDER HEADER/NAV/SIDEBAR/FOOTER NATIVOS DO LAGOM --- */
.br-client-area .main-header,
.br-client-area .lagom-header,
.br-client-area .header-slim,
.br-client-area .header-bg,
.br-client-area .top-menu,
.br-client-area .portal-nav,
.br-client-area .navbar,
.br-client-area .navbar-wrapper,
.br-client-area .main-nav,
.br-client-area .account-menu,
.br-client-area .header-actions,
.br-client-area #header,
.br-client-area body > header,
.br-client-area body > nav,
.br-client-area .breadcrumb,
.br-client-area .breadcrumb-wrapper,
.br-client-area .page-footer,
.br-client-area .site-footer,
.br-client-area .lagom-footer,
.br-client-area .copyright,
.br-client-area .footer-copy,
.br-client-area #footer,
.br-client-area body > footer,
.br-client-area [class*="footer"]:not(.br-ca-footer) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- ESCONDER SIDEBAR --- */
.br-client-area .sidebar,
.br-client-area .portal-sidebar,
.br-client-area .lagom-sidebar,
.br-client-area .RSThemes-sidebar,
.br-client-area .panel-sidebar,
.br-client-area .sticky-sidebar,
.br-client-area .col-md-3,
.br-client-area .col-md-3.pull-md-left,
.br-client-area .col-lg-3,
.br-client-area .col-lg-2 {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    flex: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* --- CONTEUDO FULL WIDTH --- */
.br-client-area .portal-body > .container,
.br-client-area .site > .container,
.br-client-area .portal-body > .container > .row,
.br-client-area .portal-body > .container > .row > [class*="col-"],
.br-client-area .site > .container > .row,
.br-client-area .site > .container > .row > [class*="col-"],
.br-client-area .main-content,
.br-client-area .col-md-9,
.br-client-area .col-md-9.pull-md-right,
.br-client-area .col-lg-9,
.br-client-area .col-lg-10,
.br-client-area .content-area,
.br-client-area .portal-body .container .row > div:not(.sidebar):not(.col-md-3):not(.col-lg-3) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    flex: none !important;
}

.br-client-area .row {
    margin: 0 !important;
    display: block !important;
}

.br-client-area .portal-body > .container,
.br-client-area .site > .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 24px 20px 48px !important;
}

/* ============================================
   TOPBAR BRANCA (HEADER)
   ============================================ */
.br-ca-topbar {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 999;
}
.br-ca-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}
.br-ca-logos img[alt="eHost"],
.br-ca-logos .br-ca-logos-sep {
    display: none !important;
}
.br-ca-logos {
    display: flex;
    align-items: center;
    gap: 12px;
}
.br-ca-logos img {
    height: 36px;
}
.br-ca-logos-sep {
    color: #d1d5db;
    font-size: 20px;
    font-weight: 300;
}
.br-ca-topright {
    display: flex;
    align-items: center;
    gap: 10px;
}
.br-ca-btn-help,
.br-ca-btn-help span,
.br-ca-btn-help * {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: #eab308 !important;
    color: #78350f !important;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.br-ca-btn-help:hover,
.br-ca-btn-help:hover * {
    background: #d97706 !important;
    color: #78350f !important;
}
.br-ca-btn-help svg {
    stroke: #78350f !important;
    width: 13px;
    height: 13px;
}
.br-ca-btn-news,
.br-ca-btn-news span,
.br-ca-btn-news * {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: #ef4444 !important;
    color: #fff !important;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.br-ca-btn-news:hover,
.br-ca-btn-news:hover * {
    background: #dc2626 !important;
    color: #fff !important;
}
.br-ca-btn-news svg {
    stroke: #fff !important;
    width: 13px;
    height: 13px;
}
.br-ca-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 14px;
    border-left: 1px solid #e5e7eb;
    margin-left: 6px;
}
.br-ca-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0fdf4;
    border: 2px solid #d1fae5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.br-ca-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.br-ca-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #374151 !important;
}
.br-ca-user-email {
    font-size: 11px;
    color: #9ca3af !important;
}
.br-ca-btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: none;
    border: none;
    color: #6b7280 !important;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    text-decoration: none !important;
}
.br-ca-btn-logout:hover {
    color: #ef4444 !important;
    background: #fef2f2;
}

/* ============================================
   NAVBAR VERDE
   ============================================ */
.br-ca-nav {
    background: #00A651;
    position: sticky;
    top: 60px;
    z-index: 998;
    box-shadow: 0 2px 8px rgba(0,166,81,0.2);
}
.br-ca-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 48px;
    overflow-x: auto;
}
.br-ca-nav a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    color: rgba(255,255,255,0.7) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 8px;
    transition: all 0.2s;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.br-ca-nav a:hover {
    background: rgba(255,255,255,0.15);
    color: #fff !important;
}
.br-ca-nav a.active {
    color: #fff !important;
    position: relative;
}
.br-ca-nav a.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}
.br-ca-nav svg {
    width: 16px;
    height: 16px;
}
.br-ca-nav .badge {
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 10px;
    margin-left: 2px;
}

/* ============================================
   PAGE HEADER (titulo + subtitulo)
   ============================================ */
.br-page-header {
    padding: 24px 0 20px;
    text-align: left;
}
.br-page-header h1 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin: 0 0 6px !important;
    line-height: 1.3 !important;
    text-align: left !important;
}
.br-page-header p {
    font-size: 14px !important;
    color: #9ca3af !important;
    margin: 0 !important;
    text-align: left !important;
}

/* ============================================
   PAGINA: MINHAS ASSINATURAS (CARDS VERTICAIS)
   Replica exata do layout React BR Radios
   ============================================ */
.br-products-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 12px;
}

/* --- CARD PRINCIPAL --- */
.br-product-card {
    display: block;
    background: #fff;
    border: 2px solid #a7f3d0;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none !important;
    transition: all 0.25s ease;
}
.br-product-card:hover {
    border-color: #00A651;
    box-shadow: 0 8px 24px rgba(0,166,81,0.15);
    transform: translateY(-2px);
}

/* --- HEADER DO CARD (fundo verde claro) --- */
.br-pc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: #f0fdf4;
    border-bottom: 1px solid #dcfce7;
}
.br-pc-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.br-pc-bolt {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.br-pc-plan-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a !important;
    letter-spacing: 0.2px;
}

/* --- BADGE STATUS --- */
.br-pc-badge {
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.br-status-active {
    background: #dcfce7 !important;
    color: #059142 !important;
}
.br-status-suspended {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}
.br-status-pending {
    background: #fffbeb !important;
    color: #d97706 !important;
}
.br-status-cancelled {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
}
.br-status-other {
    background: #eff6ff !important;
    color: #2563eb !important;
}

/* --- SECAO DOMINIO --- */
.br-pc-domain {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid #f3f4f6;
}
.br-pc-domain-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f0fdf4;
    border: 1.5px solid #d1fae5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.br-pc-domain-icon svg {
    width: 22px;
    height: 22px;
}
.br-pc-domain-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.br-pc-domain-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
.br-pc-domain-name svg {
    color: #9ca3af;
    stroke: #9ca3af;
    flex-shrink: 0;
}
.br-pc-domain-label {
    font-size: 12px;
    color: #9ca3af !important;
    font-weight: 400;
}

/* --- LINHAS DE DADOS (tabela-like) --- */
.br-pc-rows {
    padding: 0 24px;
}
.br-pc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f3f4f6;
}
.br-pc-row-last {
    border-bottom: none;
}
.br-pc-label {
    font-size: 14px;
    font-weight: 400;
    color: #374151 !important;
}
.br-pc-value {
    font-size: 14px;
    font-weight: 500;
    color: #374151 !important;
    text-align: right;
}
.br-pc-value-bold {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a !important;
}
.br-pc-value-orange {
    color: #ea580c !important;
    font-weight: 700;
}

/* ============================================
   PAGINA: MEU PERFIL
   Layout 2 colunas: sidebar + info
   ============================================ */
.br-profile {
    display: flex;
    gap: 24px;
    margin-top: 12px;
}

/* --- SIDEBAR ESQUERDA --- */
.br-profile-sidebar {
    width: 320px;
    flex-shrink: 0;
}
.br-profile-avatar-area {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    text-align: center;
    padding-bottom: 24px;
    margin-bottom: 16px;
}
.br-profile-avatar-bg {
    height: 100px;
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 50%, #ecfdf5 100%);
    position: relative;
}
.br-profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #f0fdf4;
    border: 4px solid #fff;
    margin: -50px auto 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0,166,81,0.1);
}
.br-profile-avatar svg {
    width: 50px;
    height: 50px;
}
.br-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.br-profile-avatar-edit {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #00A651;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s;
}
.br-profile-avatar-edit:hover {
    background: #059142;
}
.br-profile-name {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a !important;
    margin-bottom: 2px;
}
.br-profile-subtitle {
    font-size: 13px;
    color: #9ca3af !important;
    font-weight: 400;
}

/* --- CONTACT CARDS --- */
.br-profile-contacts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.br-profile-contact {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
}
.br-profile-cicon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.br-cicon-email {
    background: #dbeafe;
    color: #3b82f6;
}
.br-cicon-phone {
    background: #dcfce7;
    color: #16a34a;
}
.br-cicon-doc {
    background: #f3e8ff;
    color: #9333ea;
}
.br-profile-clabel {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af !important;
}
.br-profile-cvalue {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a !important;
}

/* --- AREA PRINCIPAL DIREITA --- */
.br-profile-main {
    flex: 1;
    min-width: 0;
}
.br-profile-section {
    margin-bottom: 28px;
}
.br-profile-sheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
}
.br-profile-stitle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #374151 !important;
}

/* --- GRID DE CAMPOS --- */
.br-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.br-profile-grid.br-grid-full {
    grid-template-columns: 1fr;
}
.br-profile-grid.br-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.br-pf {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.br-pf-wide {
    grid-column: 1 / -1;
}
.br-pf-label {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.br-pf-value {
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a !important;
}

/* --- FORMA DE PAGAMENTO EDITAVEL --- */
.br-pf-payment {
    margin-top: 4px;
}
.br-payment-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
.br-payment-select {
    flex: 1;
    padding: 10px 14px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    color: #1a1a1a !important;
    background: #fff !important;
    cursor: pointer;
    transition: border-color 0.2s !important;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 36px !important;
}
.br-payment-select:focus {
    border-color: #00A651 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0,166,81,0.15) !important;
}
.br-payment-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #00A651 !important;
    color: #fff !important;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.br-payment-save:hover {
    background: #059142 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,166,81,0.3);
}

/* --- EMPTY STATE --- */
.br-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 2px dashed #e5e7eb;
    border-radius: 16px;
    margin-top: 12px;
}
.br-empty-state h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    margin: 16px 0 8px !important;
}
.br-empty-state p {
    font-size: 14px !important;
    color: #9ca3af !important;
    margin: 0 0 20px !important;
}
.br-btn-primary {
    display: inline-block;
    padding: 12px 28px;
    background: #00A651 !important;
    color: #fff !important;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.2s;
}
.br-btn-primary,
.br-btn-primary:link,
.br-btn-primary:visited,
.br-btn-primary:hover,
.br-btn-primary:active {
    color: #fff !important;
}
.br-btn-primary:hover {
    background: #059142 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,166,81,0.3);
}

/* ============================================
   PAGINA: MEUS DOMINIOS
   ============================================ */
.br-dom-wrapper {
    padding: 24px 0;
}
.br-dom-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}
.br-dom-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin: 0 0 4px !important;
    text-align: left !important;
}
.br-dom-subtitle {
    font-size: 14px !important;
    color: #9ca3af !important;
    margin: 0 !important;
    text-align: left !important;
}
.br-dom-register-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #fff !important;
    color: #00A651 !important;
    border: 2px solid #00A651;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s;
    white-space: nowrap;
}
.br-dom-register-btn:hover {
    background: #00A651 !important;
    color: #fff !important;
}
.br-dom-register-btn:hover svg {
    stroke: #fff;
}

/* Stats coloridos */
.br-dom-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
.br-dom-stat {
    border-radius: 14px;
    padding: 20px 24px;
    color: #fff !important;
}
.br-dom-stat-blue { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; }
.br-dom-stat-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; }
.br-dom-stat-teal { background: linear-gradient(135deg, #14b8a6, #0d9488) !important; }
.br-dom-stat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
    margin-bottom: 6px;
    color: #fff !important;
}
.br-dom-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: #fff !important;
}

/* Domain Cards */
.br-dom-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.br-dom-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
}
.br-dom-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #f3f4f6;
}
.br-dom-plan-tag {
    padding: 4px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280 !important;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.br-dom-card-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.br-dom-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f0fdf4;
    border: 1px solid #d1fae5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.br-dom-card-icon svg {
    width: 22px;
    height: 22px;
}
.br-dom-card-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a !important;
    font-family: monospace, 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.br-dom-card-type {
    font-size: 12px;
    color: #9ca3af !important;
    margin-top: 2px;
}
.br-dom-card-meta {
    display: flex;
    gap: 40px;
    padding: 14px 24px;
}
.br-meta-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ============================================
   PAGINA: MINHAS FATURAS
   ============================================ */
.br-inv-wrapper {
    padding: 24px 0;
}
.br-inv-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.br-inv-stat-red { background: linear-gradient(135deg, #ef4444, #dc2626) !important; }
.br-inv-stat-orange { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }
.br-inv-stat-green { background: linear-gradient(135deg, #22c55e, #16a34a) !important; }
.br-inv-stat-dark { background: linear-gradient(135deg, #334155, #1e293b) !important; }

/* Tabela de faturas */
.br-inv-table {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
}
.br-inv-thead {
    display: grid;
    grid-template-columns: 100px 90px 1fr 110px 110px 100px 80px;
    padding: 14px 24px;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
    gap: 8px;
}
.br-inv-th {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.br-inv-row {
    display: grid;
    grid-template-columns: 100px 90px 1fr 110px 110px 100px 80px;
    padding: 16px 24px;
    border-bottom: 1px solid #f3f4f6;
    align-items: center;
    gap: 8px;
    transition: background 0.15s;
}
.br-inv-row:last-child {
    border-bottom: none;
}
.br-inv-row:hover {
    background: #f9fafb;
}
.br-inv-td {
    font-size: 14px;
    color: #374151 !important;
}
.br-inv-th-num { display: flex; align-items: center; gap: 8px; }
.br-inv-th-num a { font-weight: 600; color: #1a1a1a !important; text-decoration: none !important; }
.br-inv-th-num a:hover { color: #00A651 !important; }
.br-inv-th-total strong { font-weight: 800; color: #1a1a1a !important; }

/* Dot indicador */
.br-inv-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.br-inv-dot-paid { background: #22c55e; }
.br-inv-dot-unpaid { background: #f59e0b; }
.br-inv-dot-overdue { background: #ef4444; }
.br-inv-dot-cancelled { background: #9ca3af; }
.br-inv-dot-other { background: #3b82f6; }

/* Badges de status */
.br-inv-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}
.br-inv-badge-paid { background: #dcfce7 !important; color: #059142 !important; }
.br-inv-badge-unpaid { background: #fffbeb !important; color: #d97706 !important; }
.br-inv-badge-overdue { background: #fef2f2 !important; color: #dc2626 !important; }
.br-inv-badge-cancelled { background: #f3f4f6 !important; color: #6b7280 !important; }
.br-inv-badge-other { background: #eff6ff !important; color: #2563eb !important; }

/* Botões de ação */
.br-inv-pay-btn {
    display: inline-block;
    padding: 5px 14px;
    background: #00A651 !important;
    color: #fff !important;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.2s;
}
.br-inv-pay-btn,
.br-inv-pay-btn:link,
.br-inv-pay-btn:visited,
.br-inv-pay-btn:hover,
.br-inv-pay-btn:active {
    color: #fff !important;
}
.br-inv-pay-btn:hover { background: #059142 !important; }
.br-inv-paid-label {
    display: inline-block;
    padding: 5px 14px;
    background: #dcfce7 !important;
    color: #059142 !important;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}
.br-inv-view-btn {
    display: inline-block;
    padding: 5px 14px;
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.2s;
}
.br-inv-view-btn:hover { background: #e5e7eb !important; }

/* ============================================
   PAGINA: SUPORTE
   ============================================ */
.br-sup-wrapper {
    padding: 24px 0;
}
.br-sup-stat-orange { background: linear-gradient(135deg, #f97316, #ea580c) !important; }

/* Split layout */
.br-sup-split {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
    min-height: 500px;
}
.br-sup-sidebar {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow-y: auto;
    max-height: 600px;
}
.br-sup-item {
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.15s;
}
.br-sup-item:last-child { border-bottom: none; }
.br-sup-item:hover { background: #f9fafb; }
.br-sup-item.active {
    background: #f0fdf4;
    border-left: 3px solid #00A651;
}
.br-sup-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.br-sup-item-tid {
    font-size: 12px;
    font-weight: 700;
    color: #00A651 !important;
}
.br-sup-item-subject {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.br-sup-item-meta {
    font-size: 11px;
    color: #9ca3af !important;
}
.br-sup-detail {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    min-height: 500px;
}
.br-sup-detail iframe {
    width: 100%;
    height: 600px;
    border: none;
}
.br-sup-empty-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    gap: 12px;
    color: #9ca3af !important;
    font-size: 13px;
}
.br-sup-empty-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    gap: 12px;
    text-align: center;
}
.br-sup-empty-detail h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
}
.br-sup-empty-detail p {
    font-size: 14px !important;
    color: #9ca3af !important;
    margin: 0 !important;
}

.br-sup-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.br-sup-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 20px;
    text-decoration: none !important;
    transition: all 0.2s;
}
.br-sup-card:hover {
    border-color: #00A651;
    box-shadow: 0 4px 16px rgba(0,166,81,0.1);
}
.br-sup-card-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.br-sup-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f0fdf4;
    border: 1px solid #d1fae5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.br-sup-card-icon svg { width: 20px; height: 20px; }
.br-sup-card-tid {
    font-size: 13px;
    font-weight: 700;
    color: #00A651 !important;
}
.br-sup-card-subject {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}
.br-sup-card-dept {
    font-size: 12px;
    color: #9ca3af !important;
    margin-top: 2px;
}
.br-sup-card-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.br-sup-card-date {
    font-size: 13px;
    color: #6b7280 !important;
    white-space: nowrap;
}
.br-sup-badge {
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.br-sup-badge-open { background: #fff7ed !important; color: #ea580c !important; }
.br-sup-badge-answered { background: #eff6ff !important; color: #2563eb !important; }
.br-sup-badge-customer { background: #fefce8 !important; color: #ca8a04 !important; }
.br-sup-badge-closed { background: #f0fdf4 !important; color: #16a34a !important; }
.br-sup-badge-hold { background: #f3f4f6 !important; color: #6b7280 !important; }
.br-sup-badge-other { background: #f3f4f6 !important; color: #6b7280 !important; }

/* ============================================
   PAGINA: SUBMIT TICKET / FORMULARIOS
   ============================================ */
.br-client-area .panel,
.br-client-area .panel-default,
.br-client-area .panel-body,
.br-client-area fieldset,
.br-client-area .fieldset {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
}
.br-client-area .panel-heading,
.br-client-area .panel-default > .panel-heading {
    background: none !important;
    border: none !important;
    padding: 0 0 16px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}
.br-client-area .panel-title,
.br-client-area .panel-heading h3,
.br-client-area .panel-heading h4,
.br-client-area legend,
.br-client-area h3.panel-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
.br-client-area .form-group {
    margin-bottom: 16px !important;
}
.br-client-area label:not(.br-pf-label):not(.br-pc-label):not(.br-meta-label) {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 6px !important;
}
.br-client-area .form-control,
.br-client-area input[type="text"],
.br-client-area input[type="email"],
.br-client-area input[type="password"],
.br-client-area input[type="number"],
.br-client-area input[type="tel"],
.br-client-area select,
.br-client-area textarea {
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    color: #1a1a1a !important;
    background: #fff !important;
    transition: border-color 0.2s !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
}
.br-client-area .form-control:focus,
.br-client-area input:focus,
.br-client-area select:focus,
.br-client-area textarea:focus {
    border-color: #00A651 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0,166,81,0.12) !important;
}
.br-client-area textarea {
    min-height: 120px !important;
    resize: vertical !important;
}
.br-client-area .btn-primary,
.br-client-area input[type="submit"],
.br-client-area button[type="submit"] {
    background: #00A651 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
.br-client-area .btn-primary:hover,
.br-client-area input[type="submit"]:hover,
.br-client-area button[type="submit"]:hover {
    background: #059142 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,166,81,0.3) !important;
}
.br-client-area .btn-default,
.br-client-area .btn-secondary {
    background: #fff !important;
    color: #374151 !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
.br-client-area .btn-default:hover,
.br-client-area .btn-secondary:hover {
    border-color: #00A651 !important;
    color: #00A651 !important;
    background: #f0fdf4 !important;
}
.br-client-area .help-block,
.br-client-area .field-help,
.br-client-area small.text-muted {
    font-size: 12px !important;
    color: #9ca3af !important;
    margin-top: 4px !important;
}

/* File upload */
.br-client-area input[type="file"] {
    border: 2px dashed #e5e7eb !important;
    border-radius: 10px !important;
    padding: 12px !important;
    background: #f9fafb !important;
    width: 100% !important;
    cursor: pointer !important;
}
.br-client-area input[type="file"]:hover {
    border-color: #00A651 !important;
    background: #f0fdf4 !important;
}

/* Ticket KB suggestions */
.br-client-area .kbsuggestions,
.br-client-area .ticket-reply-editor {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
}

/* Esconder cards de navegação na home do clientarea */
.br-client-area .br-ca-services,
.br-ca-services {
    display: none !important;
}
.br-client-area .markItUpHeader,
.br-client-area .markItUp .markItUpHeader,
.br-client-area .btn-preview,
.br-client-area button.preview,
.br-client-area a.preview,
.br-client-area [class*="markItUp"] ul,
.br-client-area .editor-toolbar,
.br-client-area .wysiwyg-toolbar,
.br-client-area .mce-toolbar,
.markItUpHeader,
.markItUp .markItUpHeader {
    display: none !important;
}
.br-client-area .field-container[class*="relatedservice"],
.br-client-area .form-group:has(select[name="relatedservice"]),
.br-client-area .form-group:has(input[name*="customfield"]),
.br-client-area .form-group:has(select[name*="customfield"]) {
    display: none !important;
}

/* ============================================
   PAGINA: VER TICKET (viewticket.php)
   ============================================ */
.br-vt-header {
    padding: 20px 0 16px;
}
.br-vt-back a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280 !important;
    text-decoration: none !important;
    margin-bottom: 12px;
}
.br-vt-back a:hover { color: #00A651 !important; }
.br-vt-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.br-vt-tid {
    font-size: 13px;
    font-weight: 700;
    color: #00A651 !important;
    display: block;
    margin-bottom: 4px;
}
.br-vt-subject {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Mensagens do ticket */
.br-client-area .ticket-reply,
.br-client-area .reply-container,
.br-client-area .ticket-message {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
.br-client-area .ticket-reply .reply-header,
.br-client-area .reply-container .reply-header,
.br-client-area .ticket-message-header {
    background: #f8f9fa !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.br-client-area .ticket-reply .reply-body,
.br-client-area .reply-container .reply-body,
.br-client-area .ticket-message-body {
    padding: 16px 20px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #374151 !important;
}
.br-client-area .ticket-reply .attachments,
.br-client-area .reply-container .attachments {
    background: #f9fafb !important;
    padding: 12px 20px !important;
    border-top: 1px solid #f3f4f6 !important;
    font-size: 13px !important;
}

/* Accordion de resposta */
.br-client-area .ticket-reply-form,
.br-client-area .panel-collapse,
.br-client-area .collapse-reply {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
}

/* Esconder IP address e metadados das mensagens */
.br-client-area .ticket-reply .reply-body p:last-child,
.br-client-area .reply-container .reply-body p:last-child {
    color: #d1d5db !important;
    font-size: 11px !important;
}

/* Esconder campos Nome e Email no viewticket */
.br-client-area .form-group:has(input[name="replyname"]),
.br-client-area .form-group:has(input[name="replyemail"]) {
    display: none !important;
}
/* Esconder info do header da mensagem (IP, data posted, etc) */
.br-client-area .ticket-reply .posted-info,
.br-client-area .reply-container .posted-info,
.br-client-area .ticket-message .posted-info,
.br-client-area .posted-by .email,
.br-client-area .reply-header .pull-right,
.br-client-area .reply-header .text-muted,
.br-client-area .ticket-info-col {
    display: none !important;
}

/* Renomear "Resposta" para "Responder" via font-size trick */
.br-client-area .panel-heading a[data-toggle="collapse"],
.br-client-area .panel-heading a[href="#replyContainer"],
.br-client-area .ticket-reply-container .panel-heading a {
    font-size: 0 !important;
}
.br-client-area .panel-heading a[data-toggle="collapse"]::after,
.br-client-area .panel-heading a[href="#replyContainer"]::after,
.br-client-area .ticket-reply-container .panel-heading a::after {
    content: "Responder" !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* ============================================
   RESPONSIVO - AREA DO CLIENTE
   ============================================ */
@media (max-width: 768px) {
    .br-ca-topbar-inner {
        padding: 0 12px;
    }
    .br-ca-logos img {
        height: 28px;
    }
    .br-ca-user {
        display: none;
    }
    .br-ca-btn-help span,
    .br-ca-btn-news span {
        display: none;
    }
    .br-ca-nav-inner {
        justify-content: flex-start;
        padding: 0 8px;
        gap: 2px;
    }
    .br-ca-nav a {
        padding: 8px 12px;
        font-size: 11px;
    }
    .br-page-header h1 {
        font-size: 22px !important;
    }
    .br-pc-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 16px;
    }
    .br-pc-domain {
        padding: 14px 16px;
    }
    .br-pc-rows {
        padding: 0 16px;
    }
    .br-pc-row {
        padding: 12px 0;
    }
    .br-client-area .portal-body > .container,
    .br-client-area .site > .container {
        padding: 16px 12px 40px !important;
    }
    .br-inv-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .br-sup-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .br-sup-card-subject {
        max-width: 250px;
    }
    .br-sup-card-right {
        width: 100%;
        justify-content: space-between;
    }
    .br-sup-split {
        grid-template-columns: 1fr;
    }
    .br-sup-sidebar {
        max-height: 300px;
    }
    .br-inv-thead { display: none; }
    .br-inv-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 14px 16px;
    }
    .br-inv-th-num { width: 100%; }
    .br-inv-th-desc { display: none; }
    .br-dom-stats {
        grid-template-columns: 1fr;
    }
    .br-dom-header {
        flex-direction: column;
        gap: 12px;
    }
    .br-dom-card-meta {
        flex-direction: column;
        gap: 12px;
        padding: 14px 16px;
    }
    .br-dom-card-top {
        padding: 14px 16px;
    }
    .br-profile {
        flex-direction: column;
    }
    .br-profile-sidebar {
        width: 100%;
    }
    .br-profile-grid {
        grid-template-columns: 1fr !important;
    }
    .br-profile-grid.br-grid-3 {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* =========================================================
   PAGINA: BLOG - Listagem e Post
   ========================================================= */
.br-blog-page {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.br-blog-loading,
.br-blog-empty {
    text-align: center;
    padding: 40px;
    color: #9ca3af;
    font-family: 'Inter', sans-serif;
}
.br-blog-list-item {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #e5e7eb;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}
.br-blog-list-item:hover {
    text-decoration: none;
    color: inherit;
}
.br-blog-list-item:hover .br-blog-list-title {
    color: #00A651;
}
.br-blog-list-img {
    width: 200px;
    height: 140px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
}
.br-blog-list-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.br-blog-list-item:hover .br-blog-list-img img {
    transform: scale(1.05);
}
.br-blog-list-noimg {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
}
.br-blog-list-body {
    flex: 1;
    min-width: 0;
}
.br-blog-list-cat {
    font-size: 12px;
    font-weight: 700;
    color: #00A651;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Inter', sans-serif;
}
.br-blog-list-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 6px 0;
    line-height: 1.3;
    font-family: 'Inter', sans-serif;
    transition: color 0.2s;
}
.br-blog-list-excerpt {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
}
.br-blog-list-date {
    font-size: 12px;
    color: #9ca3af;
    font-family: 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* Post individual */
.br-blog-post-page {
    max-width: 800px;
}
.br-blog-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #00A651;
    text-decoration: none;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
}
.br-blog-back:hover {
    text-decoration: underline;
    color: #059142;
}
.br-blog-article-img {
    width: 100%;
    max-height: 400px;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
}
.br-blog-article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.br-blog-article-cat {
    font-size: 12px;
    font-weight: 700;
    color: #00A651;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Inter', sans-serif;
}
.br-blog-article-title {
    font-size: 28px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 8px 0 12px;
    line-height: 1.2;
    font-family: 'Inter', sans-serif;
}
.br-blog-article-date {
    font-size: 13px;
    color: #9ca3af;
    font-family: 'Inter', sans-serif;
    display: block;
    margin-bottom: 24px;
}
.br-blog-article-content {
    font-size: 16px;
    line-height: 1.7;
    color: #374151;
    font-family: 'Inter', sans-serif;
}
.br-blog-article-content p {
    margin-bottom: 16px;
}
.br-blog-article-content img {
    max-width: 100%;
    border-radius: 10px;
    margin: 16px 0;
}
@media (max-width: 640px) {
    .br-blog-list-item {
        flex-direction: column;
        gap: 12px;
    }
    .br-blog-list-img {
        width: 100%;
        height: 180px;
    }
    .br-blog-article-title {
        font-size: 22px;
    }
}



/* =========================================================

/* =========================================================
   DASHBOARD HOME - Secao Blog/Novidades
   ========================================================= */
.br-blog-section {
    margin-top: 32px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
}
.br-blog-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    font-family: 'Inter', sans-serif;
}
.br-blog-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 16px 0 20px;
}
.br-blog-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
}
.br-blog-scroll::-webkit-scrollbar {
    height: 4px;
}
.br-blog-scroll::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}
.br-blog-card {
    min-width: 240px;
    max-width: 240px;
    flex-shrink: 0;
    scroll-snap-align: start;
    cursor: pointer;
    transition: transform 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.br-blog-card:hover {
    transform: translateY(-3px);
    text-decoration: none;
    color: inherit;
}
.br-blog-card-img {
    width: 240px;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
    margin-bottom: 10px;
}
.br-blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.br-blog-card:hover .br-blog-card-img img {
    transform: scale(1.08);
}
.br-blog-card-noimg {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
}
.br-blog-card-body {
    padding: 0 2px;
}
.br-blog-card-date {
    font-size: 11px;
    color: #9ca3af;
    font-family: 'Inter', sans-serif;
}
.br-blog-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
    margin-top: 4px;
}


   DASHBOARD HOME - Secao de Videos/Tutoriais
   ========================================================= */
.br-videos-section {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #e5e7eb;
}
.br-vid-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
}
.br-vid-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.br-vid-filter {
    padding: 8px 18px;
    border-radius: 20px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}
.br-vid-filter:hover {
    border-color: #00A651;
    color: #00A651;
}
.br-vid-filter.active {
    background: #00A651;
    border-color: #00A651;
    color: #fff;
}
.br-vid-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-rows: auto auto;
    gap: 0;
}
.br-vid-main {
    grid-column: 1;
    grid-row: 1;
    background: #000;
    border-radius: 14px 0 0 0;
    overflow: hidden;
    aspect-ratio: 16/9;
}
.br-vid-main iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.br-vid-main-info {
    grid-column: 1;
    grid-row: 2;
    padding: 14px 0;
}
.br-vid-main-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
    font-family: 'Inter', sans-serif;
}
.br-vid-main-cat {
    display: inline-block;
    padding: 3px 12px;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    font-family: 'Inter', sans-serif;
}
.br-vid-sidebar {
    grid-column: 2;
    grid-row: 1 / 3;
    background: #f8f9fa;
    border-radius: 0 14px 14px 0;
    padding: 16px;
    overflow-y: auto;
    max-height: 500px;
}
.br-vid-sidebar-count {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 12px;
    font-family: 'Inter', sans-serif;
}
.br-vid-list-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 4px;
}
.br-vid-list-item:hover {
    background: #e8f5e9;
}
.br-vid-list-item.active {
    background: #e8f5e9;
}
.br-vid-list-thumb {
    width: 100px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background: #e5e7eb;
}
.br-vid-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.br-vid-list-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.br-vid-list-info {
    flex: 1;
    min-width: 0;
}
.br-vid-list-title {
    font-size: 13px;
    font-weight: 600;
    color: #00A651;
    margin-bottom: 4px;
    font-family: 'Inter', sans-serif;
    line-height: 1.3;
}
.br-vid-list-cat {
    font-size: 11px;
    color: #9ca3af;
    font-family: 'Inter', sans-serif;
}
@media (max-width: 768px) {
    .br-vid-layout {
        grid-template-columns: 1fr;
    }
    .br-vid-sidebar {
        grid-column: 1;
        grid-row: 3;
        border-radius: 0 0 14px 14px;
        max-height: 300px;
    }
    .br-vid-main {
        border-radius: 14px 14px 0 0;
    }
}


/* =========================================================
   PAGINA: LOGIN
   ========================================================= */
.br-login-page .br-ca-topbar,
.br-login-page .br-ca-nav {
    display: none !important;
}
.br-login-page,
.br-login-page body,
.br-login-page .main-content,
.br-login-page .portal-body,
.br-login-page .site,
.br-login-page .lagom,
.br-login-page .container,
.br-login-page .wrapper,
.br-login-page .row,
.br-login-page .col-md-9,
.br-login-page .col-md-12 {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f8f9fa 100%) !important;
    min-height: 100vh !important;
    border: none !important;
    box-shadow: none !important;
}
.br-login-page .main-sidebar,
.br-login-page .sidebar,
.br-login-page .col-md-3,
.br-login-page .clearfix,
.br-login-page .panel,
.br-login-page .card:not(.br-login-card) {
    display: none !important;
}
.br-login-page .main-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.br-login-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f8f9fa 100%);
    padding: 20px;
    z-index: 9999;
}
.br-login-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.08);
    padding: 48px 40px;
    width: 420px;
    max-width: 100%;
    text-align: center;
}
.br-login-logo {
    margin-bottom: 28px;
}
.br-login-logo img {
    height: 48px;
    width: auto;
}
.br-login-title {
    font-size: 26px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}
.br-login-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 32px;
    font-family: 'Inter', sans-serif;
}
.br-login-group {
    text-align: left;
    margin-bottom: 18px;
}
.br-login-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    font-family: 'Inter', sans-serif;
}
.br-login-input {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-family: 'Inter', sans-serif !important;
    background: #fff !important;
    color: #1a1a1a !important;
    transition: border-color 0.2s !important;
    box-sizing: border-box !important;
}
.br-login-input:focus {
    border-color: #00A651 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0,166,81,0.1) !important;
}
.br-login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}
.br-login-remember input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #00A651;
}
.br-login-remember label {
    font-size: 13px;
    color: #6b7280;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
}
.br-login-btn {
    width: 100%;
    padding: 14px;
    background: #00A651;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    margin-bottom: 16px;
}
.br-login-btn:hover {
    background: #059142;
    transform: translateY(-1px);
}
.br-login-btn:active {
    transform: translateY(0);
}
.br-login-forgot {
    display: block;
    text-align: center;
    font-size: 13px;
    color: #00A651;
    text-decoration: none;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}
.br-login-forgot:hover {
    text-decoration: underline;
    color: #059142;
}
@media (max-width: 480px) {
    .br-login-card {
        padding: 32px 24px;
    }
}


/* =========================================================
   DASHBOARD HOME - Card de Faturas Pendentes
   ========================================================= */
.br-ca-alert.danger {
    background: #fef2f2 !important;
    border: 2px solid #fecaca !important;
    border-radius: 14px !important;
    padding: 20px 24px !important;
    margin: 0 0 20px 0 !important;
    box-shadow: none !important;
}
.br-fat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 14px;
    font-family: 'Inter', sans-serif;
}
.br-fat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fee2e2;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 8px;
}
.br-fat-row:last-child {
    margin-bottom: 0;
}
.br-fat-id {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    font-family: 'Inter', sans-serif;
}
.br-fat-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
}
.br-fat-overdue {
    background: #fecaca;
    color: #dc2626;
}
.br-fat-pending {
    background: #fef3c7;
    color: #d97706;
}
.br-fat-total {
    margin-left: auto;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    font-family: 'Inter', sans-serif;
}
.br-fat-pay {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 20px !important;
    background: #f59e0b !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    flex-shrink: 0 !important;
}
.br-fat-pay:hover,
.br-fat-pay:focus,
.br-fat-pay:visited {
    background: #d97706 !important;
    color: #fff !important;
    text-decoration: none !important;
}


/* =========================================================
   DASHBOARD HOME - Cards de Servicos Ativados
   ========================================================= */
.br-services-home-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 24px;
}
.br-svc-home-card {
    width: 180px;
    height: 220px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s, transform 0.25s;
}
.br-svc-home-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: #00A651;
    border-radius: 0 0 16px 16px;
}
.br-svc-home-card:hover {
    box-shadow: 0 8px 28px rgba(0,166,81,0.18);
    transform: translateY(-4px);
}
.br-svc-home-card.br-svc-clickable {
    cursor: pointer;
}
.br-svc-home-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: transform 0.3s ease;
}
.br-svc-home-card:hover .br-svc-home-icon {
    transform: scale(1.2);
    animation: br-icon-wobble 0.6s ease;
}
@keyframes br-icon-wobble {
    0% { transform: scale(1); }
    30% { transform: scale(1.25) rotate(-5deg); }
    50% { transform: scale(1.2) rotate(3deg); }
    70% { transform: scale(1.22) rotate(-2deg); }
    100% { transform: scale(1.2) rotate(0deg); }
}
.br-svc-home-icon svg {
    width: 56px;
    height: 56px;
}
.br-svc-home-name {
    font-size: 14px;
    font-weight: 800;
    color: #00A651;
    text-align: center;
    line-height: 1.3;
    padding: 0 10px;
}
.br-svc-home-status {
    display: none;
}
.br-svc-active-dot { display: none; }
@media (max-width: 640px) {
    .br-services-home-grid {
        gap: 12px;
    }
    .br-svc-home-card {
        width: 160px;
        height: 200px;
    }
}