/* =========================================================================
   HostTSP brand skin for the WHMCS client area (maxhostaltv84-tw theme).
   Loaded last from header.tpl, so these rules override the MaxHost dark theme
   (including inline styles, via !important). Colours match the HostTSP site.
   To revert the look: remove the <link> to this file in header.tpl.
   ========================================================================= */

:root {
    --tsp:        #059669; /* emerald-600  — primary        */
    --tsp-d:      #047857; /* emerald-700  — hover          */
    --tsp-l:      #10b981; /* emerald-500                   */
    --tsp-accent: #4ade80; /* green-400    — footer accents */
    --tsp-ink:    #0f172a; /* slate-900    — text on light  */
    --tsp-dark:   #020617; /* slate-950    — footer bg      */
}

/* ---- Top utility bar: deep emerald instead of black ------------------- */
.maxhosttwenty .header-top.black-bg { background: #053d2e !important; }
.maxhosttwenty .header-top,
.maxhosttwenty .header-top a        { color: #d1fae5 !important; }
.maxhosttwenty .header-top a:hover  { color: #ffffff !important; }
.maxhosttwenty .header-top .social-icons a { color: #d1fae5 !important; }

/* ---- Main header: clean white, dark text ----------------------------- */
.maxhosttwenty header.headr-style-1,
.maxhosttwenty header.header        { background: #ffffff !important; box-shadow: 0 2px 22px -10px rgba(15,23,42,.25); }
.maxhosttwenty header .menu-link    { color: var(--tsp-ink) !important; font-weight: 600; }
.maxhosttwenty header .menu-link:hover,
.maxhosttwenty header .current-menu-item > .menu-link { color: var(--tsp) !important; }
.maxhosttwenty .custom-logo         { height: 38px !important; width: auto !important; vertical-align: middle; }
.maxhosttwenty .navbar-toggle .icon-bar { background: var(--tsp-ink) !important; }

/* ---- "Client Area" banner: light emerald wash instead of dark photo -- */
.maxhosttwenty .page-header.three {
    background: linear-gradient(120deg, #ecfdf5 0%, #d1fae5 100%) !important;
    padding: 34px 0 !important;
}
.maxhosttwenty .page-header .font-white,
.maxhosttwenty .page-header h2       { color: var(--tsp-ink) !important; }
/* Breadcrumb (the "Shopping Cart" bar) — strip the dark theme background */
.maxhosttwenty .page-header .breadcrumb {
    background: transparent !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}
.maxhosttwenty .page-header .breadcrumb,
.maxhosttwenty .page-header .breadcrumb-item,
.maxhosttwenty .page-header .breadcrumb-item.active { color: #334155 !important; }
.maxhosttwenty .page-header .breadcrumb a { color: var(--tsp-d) !important; }
.maxhosttwenty .page-header .breadcrumb-item + .breadcrumb-item::before { color: #94a3b8 !important; }

/* ---- WHMCS functional navbar (#main-menu): white bar, DARK links ------ */
#main-menu .navbar-main            { background: #ffffff !important; border-bottom: 1px solid #e5e7eb; }
/* These links render as plain <a> (no .nav-link class), so target them by
   their list structure — this is why the earlier .nav-link rule missed them. */
#main-menu .navbar-nav > li > a,
#main-menu .navbar-nav a,
#main-menu .nav-link               { color: var(--tsp-ink) !important; font-weight: 600; }
#main-menu .navbar-nav > li > a:hover,
#main-menu .navbar-nav a:hover,
#main-menu .nav-link:hover,
#main-menu .navbar-nav .open > a,
#main-menu .nav-item.active > .nav-link { color: var(--tsp) !important; }
/* Dropdown menus (Store / Account): dark text on white */
#main-menu .dropdown-menu          { background: #ffffff !important; border: 1px solid #e5e7eb; }
#main-menu .dropdown-menu .dropdown-item,
#main-menu .dropdown-menu a        { color: var(--tsp-ink) !important; }
#main-menu .dropdown-menu .dropdown-item:hover,
#main-menu .dropdown-menu a:hover  { color: var(--tsp) !important; background: #f0fdf4 !important; }
/* Cart icon: dark so it's visible on the white bar (badge stays emerald) */
#main-menu .cart-btn,
#main-menu .cart-btn i             { color: var(--tsp-ink) !important; }
#main-menu .cart-btn:hover,
#main-menu .cart-btn:hover i       { color: var(--tsp) !important; }
#whmcsheader .btn-active-client,
#main-menu .badge-info             { background: var(--tsp) !important; border-color: var(--tsp) !important; color:#fff !important; }

/* ---- Buttons across the client area ---------------------------------- */
.btn-primary, .btn-info {
    background-color: var(--tsp) !important;
    border-color:     var(--tsp) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-info:hover,    .btn-info:focus {
    background-color: var(--tsp-d) !important;
    border-color:     var(--tsp-d) !important;
}
.btn-success        { background-color: var(--tsp) !important; border-color: var(--tsp) !important; }
.orange-button, .btn.orange-button { background-color: var(--tsp) !important; border-color: var(--tsp) !important; color:#fff !important; }

/* ---- Footer: dark slate to match the site footer --------------------- */
.footer-bg           { background: var(--tsp-dark) !important; }
.copyrights          { background: #010205 !important; color: #94a3b8 !important; }
.footer-bg h4,
.footer-bg .font-white { color: #ffffff !important; }
.footer-bg .title-line.color { background: var(--tsp-accent) !important; height: 3px; width: 46px; }
.footer-bg a, .footer-bg li, .footer-bg p, .footer-bg .address-info li { color: #94a3b8 !important; }
.footer-bg a:hover   { color: var(--tsp-accent) !important; }
.footer-bg .fa, .footer-bg i { color: var(--tsp-accent) !important; }
.copyrights a:hover  { color: var(--tsp-accent) !important; }
.footer-bg .newsfield { border-radius: 9999px 0 0 9999px; }

/* Scroll-to-top button in brand green */
.scrollup            { background-color: var(--tsp) !important; }