/*
 * Telelig — WHMCS Custom CSS v4
 * Template: lagom2 | Arquivo: custom.css
 * Correções de contraste: navbar gradiente + texto branco, footer branco, forms/modals escuro.
 * SEM override de brand colors. SEM filtro na logo.
 * Deploy: /home/telelig.net/public_html/templates/lagom2/core/styles/default/assets/css/custom.css
 */

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

:root {
    --font-family-base:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Link azul legível em fundo claro */
    --link-color:       #1d4ed8;
    --link-hover-color: #1e40af;

    /* Navbar vars — garante que header não sobreponha outro bg */
    --app-nav-top-bg:          transparent;
    --app-nav-navbar-bg:       transparent;
    --app-nav-top-border-bottom: none;
}

/* ==============================================
   BODY — fundo claro, texto escuro
   ============================================== */
body.lagom,
body.lagom-not-portal {
    background-color: #f8fafc;
    font-family: var(--font-family-base);
    color: #334155;
}

a {
    color: #1d4ed8;
}
a:hover,
a:focus {
    color: #1e40af;
    text-decoration: underline;
}

/* ==============================================
   NAVBAR — fundo escuro (gradiente) + texto BRANCO
   ============================================== */
.app-nav,
.app-nav.sticky-navigation,
.sticky-navigation .app-nav,
.app-nav.affix {
    background: linear-gradient(90deg, #0f172a 0%, #2b607a 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25) !important;
}

.app-nav-header {
    background: transparent !important;
}

/* Texto dos links → branco */
.app-nav a,
.app-nav .nav-link,
.app-nav .app-nav-link,
.app-nav .dropdown-toggle,
.app-nav .nav-item > a,
.app-nav .app-nav-menu a,
.app-nav .app-nav-header a {
    color: rgba(255, 255, 255, 0.90) !important;
}

.app-nav a:hover,
.app-nav .nav-link:hover,
.app-nav .app-nav-link:hover,
.app-nav .dropdown-toggle:hover,
.app-nav .nav-item > a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

/* Ícones do menu */
.app-nav i,
.app-nav .app-nav-icon,
.app-nav .nav-icon,
.app-nav .ls {
    color: rgba(255, 255, 255, 0.80) !important;
}

/* Hamburguer mobile */
.app-nav .app-nav-toggle .icon-bar,
.app-nav .navbar-toggle .icon-bar {
    background-color: rgba(255, 255, 255, 0.90) !important;
}

/* Badge do carrinho */
.app-nav .nav-badge,
.app-nav .badge,
.app-nav .badge-primary-faded,
.app-nav .badge-primary {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
    border: none !important;
}

/* ==============================================
   DROPDOWN DA NAVBAR — fundo escuro, texto branco
   ============================================== */
.app-nav .dropdown-menu,
.app-nav .ui-nav-dropdown {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40) !important;
    border-radius: 10px !important;
}

.app-nav .dropdown-menu .dropdown-item,
.app-nav .dropdown-menu a,
.app-nav .dropdown-menu li a {
    color: rgba(255, 255, 255, 0.85) !important;
    background: transparent !important;
}

.app-nav .dropdown-menu .dropdown-item:hover,
.app-nav .dropdown-menu a:hover,
.app-nav .dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.app-nav .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* ==============================================
   FORMULÁRIOS — texto escuro em fundo branco
   ============================================== */
.form-control {
    color: #334155;
    background-color: #ffffff;
    border-color: #cbd5e1;
}

.form-control:focus {
    border-color: #1d4ed8 !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12) !important;
    color: #0f172a;
}

.form-control::placeholder {
    color: #94a3b8;
}

label,
.control-label {
    color: #374151;
    font-weight: 500;
}

/* ==============================================
   ALERTS
   ============================================== */
.alert-info {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e40af !important;
}

.alert-success {
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

.alert-warning {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.alert-danger {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

/* ==============================================
   FOOTER — texto BRANCO (footer já é escuro)
   ============================================== */
.main-footer {
    color: rgba(255, 255, 255, 0.65) !important;
}

.main-footer .footer-title,
.main-footer h3.footer-title {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 600;
}

.main-footer .footer-company-desc {
    color: rgba(255, 255, 255, 0.55) !important;
}

.main-footer a,
.main-footer .nav-link,
.main-footer .footer-nav a {
    color: rgba(255, 255, 255, 0.65) !important;
    text-decoration: none !important;
}

.main-footer a:hover,
.main-footer .nav-link:hover,
.main-footer .footer-nav a:hover {
    color: #93c5fd !important;
    text-decoration: none !important;
}

.main-footer .footer-company-socials a {
    color: rgba(255, 255, 255, 0.65) !important;
}

.main-footer .footer-company-socials a:hover {
    color: #93c5fd !important;
}

.main-footer .footer-copyright {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 13px;
}

.main-footer .footer-bottom .footer-nav a,
.main-footer .footer-bottom a {
    color: rgba(255, 255, 255, 0.55) !important;
}

.main-footer .footer-bottom .footer-nav a:hover,
.main-footer .footer-bottom a:hover {
    color: #93c5fd !important;
}

.main-footer .footer-icon svg path {
    fill: rgba(255, 255, 255, 0.40) !important;
}

.main-footer i,
.main-footer .ls {
    color: rgba(255, 255, 255, 0.60) !important;
}

/* ==============================================
   MODAL — fundo branco, texto escuro
   ============================================== */
.modal-content {
    background-color: #ffffff;
    color: #334155;
    border-radius: 12px !important;
}

.modal-header {
    border-bottom: 1px solid #e2e8f0;
}

.modal-footer {
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 12px 12px !important;
}

.modal-title {
    color: #0f172a;
    font-weight: 700;
}

/* ==============================================
   PRODUTOS / PLANOS — estilo Hellena (lagom2)
   ============================================== */

/* CSS custom property por card — cor padrão */
.package { --plan-cor: #3b82f6; }

/* ── Cores por categoria ── */
/* Servidores Dedicados */
#product13 { --plan-cor: #6b7280; }  /* Starter 1GB   */
#product14 { --plan-cor: #3b82f6; }  /* Basic 2GB     */
#product15 { --plan-cor: #06b6d4; }  /* Essential 4GB */
#product16 { --plan-cor: #3b82f6; }  /* Standard 6GB  */
#product17 { --plan-cor: #6366f1; }  /* Business 8GB  */
#product18 { --plan-cor: #8b5cf6; }  /* Advanced 12GB */
#product19 { --plan-cor: #8b5cf6; }  /* Professional  */
#product20 { --plan-cor: #8b5cf6; }  /* Enterprise    */
#product21 { --plan-cor: #ec4899; }  /* Ultra 32GB    */
#product22 { --plan-cor: #ef4444; }  /* Max 32GB NVMe */

/* Hospedagem Alemanha */
#product7  { --plan-cor: #6b7280; }
#product8  { --plan-cor: #f59e0b; }
#product9  { --plan-cor: #8b5cf6; }

/* Internet Residencial */
#product10 { --plan-cor: #06b6d4; }
#product11 { --plan-cor: #3b82f6; }
#product12 { --plan-cor: #8b5cf6; }

/* Email Profissional */
#product23 { --plan-cor: #6b7280; }
#product24 { --plan-cor: #10b981; }
#product25 { --plan-cor: #8b5cf6; }

/* Workspace Colaborativo */
#product26 { --plan-cor: #6b7280; }  /* Starter   */
#product27 { --plan-cor: #3b82f6; }  /* Business  */
#product28 { --plan-cor: #8b5cf6; }  /* Enterprise*/

/* Hellena IA */
#product29 { --plan-cor: #6b7280; }
#product30 { --plan-cor: #6366f1; }
#product31 { --plan-cor: #8b5cf6; }

/* ── Card base ── */
.package {
    background: #131c2e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 3px solid var(--plan-cor) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
}

.package:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}

/* ── Ícone no topo (::before no package-header) ── */
.package-header::before {
    content: '📦';
    font-size: 38px;
    display: block;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1;
}

/* Servidores Dedicados */
#product13 .package-header::before { content: '🖥️'; }
#product14 .package-header::before { content: '⚡'; }
#product15 .package-header::before { content: '🔧'; }
#product16 .package-header::before { content: '🖥️'; }
#product17 .package-header::before { content: '🏢'; }
#product18 .package-header::before { content: '🚀'; }
#product19 .package-header::before { content: '💼'; }
#product20 .package-header::before { content: '💎'; }
#product21 .package-header::before { content: '⚡'; }
#product22 .package-header::before { content: '🔥'; }

/* Hospedagem Alemanha */
#product7  .package-header::before { content: '🌱'; }
#product8  .package-header::before { content: '🚀'; }
#product9  .package-header::before { content: '💎'; }

/* Internet Residencial */
#product10 .package-header::before { content: '📡'; }
#product11 .package-header::before { content: '📡'; }
#product12 .package-header::before { content: '⚡'; }

/* Email Profissional */
#product23 .package-header::before { content: '📧'; }
#product24 .package-header::before { content: '📩'; }
#product25 .package-header::before { content: '💌'; }

/* Workspace Colaborativo */
#product26 .package-header::before { content: '🌱'; }
#product27 .package-header::before { content: '💼'; }
#product28 .package-header::before { content: '💎'; }

/* Hellena IA */
#product29 .package-header::before { content: '🤖'; }
#product30 .package-header::before { content: '🚀'; }
#product31 .package-header::before { content: '💎'; }

/* ── Layout interno ── */
.package-side-left {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 24px 0 !important;
}

.package-header {
    text-align: center !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    border: none !important;
}

.package-title {
    color: var(--plan-cor) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}

/* Preço com separadores */
.package-side-left .package-price {
    padding: 16px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    margin-bottom: 16px !important;
    text-align: center !important;
}

.package-side-left .price-amount {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #f1f5f9 !important;
    letter-spacing: -0.02em !important;
    display: block !important;
    line-height: 1.1 !important;
}

.package-side-left .price-cycle {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    margin-top: 4px !important;
    display: block !important;
}

/* Conteúdo / features */
.package-body {
    flex: 1 !important;
    padding-bottom: 8px !important;
}

.package-content {
    font-size: 13px !important;
    color: #94a3b8 !important;
    line-height: 1.9 !important;
}

/* Footer — esconde preço duplicado, mantém botão */
.package-footer {
    padding: 16px 24px 24px !important;
    background: transparent !important;
    border-top: none !important;
}

.package-footer .package-price {
    display: none !important;
}

/* Botão */
.btn-order-now {
    width: 100% !important;
    padding: 13px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    background: var(--plan-cor) !important;
    border-color: var(--plan-cor) !important;
    color: #ffffff !important;
    text-align: center !important;
    display: block !important;
    transition: opacity 0.15s ease !important;
}

.btn-order-now:hover,
.btn-order-now:focus {
    opacity: 0.85 !important;
    color: #ffffff !important;
    transform: none !important;
    text-decoration: none !important;
}