/*
 * Telelig — WHMCS Custom CSS v3
 * Template: lagom2 | Arquivo: custom.css
 * SOMENTE correções de contraste de texto — sem alterar brand colors nem 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 (evita herdar brand-primary escuro) */
    --link-color:       #1d4ed8;
    --link-hover-color: #1e40af;
}

/* ==============================================
   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 — texto BRANCO (header já é escuro)
   ============================================== */
.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;
}

/* ==============================================
   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 24px rgba(0, 0, 0, 0.35) !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 — texto escuro em fundo colorido
   ============================================== */
.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;
}