/*
    Hosttin - make the WHMCS header match the static homepage header.

    The homepage (index.html) is the old WordPress front page; every other
    page is WHMCS on the Hostiko theme. Values below are taken from the
    homepage's rendered header so the two read as one site. Loaded from
    header.tpl AFTER the theme CSS so it wins without editing theme files.

    The theme's mountain banner under the header is kept on purpose.
*/

:root {
    --hosttin-pill: #f4e474;      /* homepage Client Area pill */
    --hosttin-cart: #f47474;      /* homepage cart button */
    --hosttin-header-bg: #19202d; /* homepage header */
}

/* --- Guest topbar: homepage has none, so hide the search/chat/account bar
   above the nav. Search still exists on the knowledgebase page itself. */
.top-bar-section {
    display: none !important;
}

/* --- Header bar sits on the same navy as the homepage ------------------ */
#header.header {
    background-color: var(--hosttin-header-bg) !important;
}

/* --- Logo: same PNG as the homepage, same rendered height ------------- */
#header .navbar-brand .hosttin-logo {
    height: 50px;
    width: auto;
}

/* --- Nav links: homepage is white, 14px, weight 600, sentence case ----- */
#header .navbar-collapse .navbar-nav > li > a {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    padding: 10px 18px !important;
    line-height: 1.4;
}

#header .navbar-collapse .navbar-nav > li > a:hover {
    color: var(--hosttin-pill) !important;
}

/* --- Client Area pill (guest) / My Account (logged in) ----------------
   Theme hard-codes the pill to #Primary_Navbar-Contact_Us which no longer
   exists; re-target it and use the homepage's compact size. */
#header #mainNavbar .navbar-nav #Primary_Navbar-clientarea > a,
#header #mainNavbar .navbar-nav #Primary_Navbar-account > a {
    background-color: var(--hosttin-pill) !important;
    border: 1px solid var(--hosttin-pill);
    color: #000000 !important;
    border-radius: 20px;
    padding: 2px 12px !important;
    line-height: 1.6;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-left: 14px;
}

#header #mainNavbar .navbar-nav #Primary_Navbar-clientarea > a:hover,
#header #mainNavbar .navbar-nav #Primary_Navbar-account > a:hover {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* --- Cart button: pink circle like the homepage ------------------------ */
#header #mainNavbar .navbar-nav .hosttin-cart {
    margin-left: 10px;
}

#header #mainNavbar .navbar-nav .hosttin-cart > a {
    background-color: var(--hosttin-cart) !important;
    color: #ffffff !important;
    border-radius: 100px;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
}

#header #mainNavbar .navbar-nav .hosttin-cart > a:hover {
    background-color: #e05f5f !important;
    color: #ffffff !important;
}

#header #mainNavbar .navbar-nav .hosttin-cart .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ffffff;
    color: #000000;
    border-radius: 100px;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
}

/* --- Dropdown panels --------------------------------------------------- */
#header #mainNavbar .navbar-nav .dropdown-menu {
    background-color: #ffffff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .18);
    padding: 8px 0;
    min-width: 220px;
}

#header #mainNavbar .navbar-nav .dropdown-menu a {
    color: #24304a !important;
    text-transform: none !important;
    padding: 9px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

#header #mainNavbar .navbar-nav .dropdown-menu a:hover {
    background-color: #f3f5f9 !important;
    color: #101010 !important;
}

@media (max-width: 1199px) {
    #header #mainNavbar .navbar-nav #Primary_Navbar-clientarea > a,
    #header #mainNavbar .navbar-nav #Primary_Navbar-account > a {
        display: inline-block;
        margin-left: 0;
        margin-top: 8px;
    }

    #header #mainNavbar .navbar-nav .hosttin-cart {
        margin: 8px 0 0;
    }
}