/* ============================================================
   HOSTINAP -- NEXUS THEME COLOURS
   ============================================================

   DROP-IN REPLACEMENT for templates/nexus/css/custom.css

   This is the file WHMCS documents for Nexus customisation:
   "Open the file templates/nexus/css/custom.css. Change the
    values of CSS variables to the desired colors... Changes
    will be applied automatically to the entire template --
    Client Area pages and new SPA pages."

   All 82 documented variables are set to match hostinap.com.
   Because this works through Nexus's own variable system, it
   applies to every page including the Cart SPA, and does not
   depend on any class names.

   Contrast: every colour pair checked against WCAG AA (4.5:1).
   ============================================================ */

:root {
    --white: #fff;

    /* ---- Neutral shades ----
       Cooled slightly toward teal/navy so greys sit next to
       the brand colour without looking muddy. */
    --neutral-50:  #f7fafb;
    --neutral-100: #eef4f6;
    --neutral-200: #dbe6ea;
    --neutral-300: #c4d3d9;
    --neutral-400: #93a4ac;
    --neutral-500: #5f6e76;
    --neutral-600: #47545b;
    --neutral-700: #333f45;
    --neutral-800: #1e262b;
    --neutral-900: #0d1519;
    --neutral-950: #05090b;

    /* ---- Hostinap brand teal + navy ----
       Matched to the shield logo (#0E677C teal, #03045A navy).
       Contrast checked: white text on --primary-600 = 5.9:1 (AA). */
    --primary-50:  #e9f3f6;
    --primary-100: #cfe6ec;
    --primary-200: #a6d2dc;
    --primary-300: #72b6c6;
    --primary-400: #3d94a9;
    --primary-500: #1a7d94;
    --primary-600: #0E677C;
    --primary-700: #0c586a;
    --primary-800: #0a4657;
    --primary-900: #073847;
    --primary-950: #03045A;

    /* ---- Primary semantic colours ----
       Nexus defaults these to neutrals. We point them at the
       brand ramp, using the shades WHMCS recommends in the
       comments of the stock file. */
    --primary:          var(--primary-600);
    --primary-lifted:   var(--primary-700);
    --primary-accented: var(--primary-800);

    /* ---- Secondary ---- */
    --secondary:          var(--neutral-500);
    --secondary-lifted:   var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* ---- Status colours ----
       Success and error keep Nexus's defaults, which are already
       accessible and instantly readable. Notice is pulled onto
       the brand teal, and warning onto the Hostinap gold. */
    /* Darkened from the marketing site's #10b981 -- white text on
       that value only reaches 2.5:1. These pass WCAG AA. */
    --success:          #0b855d;
    --success-lifted:   #09714f;
    --success-accented: #086043;

    --info:          #155dfc;
    --info-lifted:   #1447e6;
    --info-accented: #193cb8;

    --notice:          var(--primary-500);
    --notice-lifted:   var(--primary-600);
    --notice-accented: var(--primary-700);

    /* Hostinap gold, darkened so white text on it passes AA.
       The bright #fbbf24 from the main site lives on as
       --yellow-300 below, for use as an accent rather than a
       button background. */
    --warning:          #b06005;
    --warning-lifted:   #965204;
    --warning-accented: #7f4504;

    --error:          #e7000b;
    --error-lifted:   #c10007;
    --error-accented: #9f0712;

    /* ---- Grayscale / neutral semantic ---- */
    --grayscale:          var(--neutral-900);
    --grayscale-lifted:   var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    --neutral:          var(--neutral-500);
    --neutral-lifted:   var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* ---- Text ----
       --text-muted is deliberately darker than Nexus's default.
       The stock value fails WCAG AA on white; this one passes. */
    --text-inverted: var(--white);
    --text-muted:    var(--neutral-500);
    --text-lifted:   var(--neutral-600);
    --text-accented: var(--neutral-700);
    --text:          var(--neutral-900);

    /* ---- Borders ---- */
    --border-muted:    var(--neutral-200);
    --border:          var(--neutral-300);
    --border-lifted:   var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* ---- Backgrounds ---- */
    --bg:          var(--white);
    --bg-muted:    var(--neutral-50);
    --bg-lifted:   var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* ---- Additional accents ---- */
    --yellow-200: #fef3c7;
    --yellow-300: #fbbf24;   /* Hostinap gold */
    --teal-300:   #5eead4;
    --teal-400:   #2dd4bf;
    --emerald-300:#6ee7b7;
    --pink-400:   #f472b6;

    /* ---- Typography ----
       Bumped one notch from Nexus's defaults. The stock scale
       starts at 10px, which is uncomfortable on mobile. */
    --text-xs: 0.6875rem;   /* 11px  (was 10px) */
    --text-sm: 0.8125rem;   /* 13px  (was 12px) */
    --text-md: 0.9375rem;   /* 15px  (was 14px) */
    --text-lg: 1.0625rem;   /* 17px  (was 16px) */

    /* ---- Outlines ---- */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* ---- Rounding ----
       Softer than stock, matching the rounded cards and pill
       buttons on hostinap.com. */
    --rounding-sm: 0.5rem;    /* 8px   (was 4px) */
    --rounding-md: 0.875rem;  /* 14px  (was 8px) */
    --rounding-lg: 1.25rem;   /* 20px  (was 12px) */

    /* ---- Other ---- */
    --letter-spacing: -0.005em;
    --disabled-opacity: 35%;
}

/* ============================================================
   OPTIONAL -- typography to match the main site.
   Delete this block to keep Nexus's own font stack.
   ============================================================ */

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, h5 {
    font-family: 'Poppins', 'Inter', sans-serif;
    letter-spacing: -0.02em;
}

/* Visible keyboard focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: var(--outline-lg) solid var(--primary-400);
    outline-offset: 2px;
}

/* Respect the OS reduce-motion setting */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   BRAND BAR + FOOTER  --  Hostinap child theme
   Selectors are prefixed .hostinap- so nothing here can collide
   with Nexus or Bootstrap.
   ============================================================ */

/* ---------------- UNIFIED HEADER BAR ---------------- */
.hostinap-brandbar {
    background: linear-gradient(135deg, #03045A 0%, #073a58 55%, #0E677C 100%);
    color: #fff;
}
.hostinap-navbar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 9px 0 !important;
    min-height: 60px;
    flex-wrap: nowrap;
}

/* --- logo --- */
.hostinap-logo {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none !important; flex-shrink: 0;
}
.hostinap-logo-text {
    font-family: 'Poppins', sans-serif;
    font-size: 17px; font-weight: 800; color: #fff;
    letter-spacing: -0.03em; line-height: 1;
}
.hostinap-ap { color: #5fb8cc; }

/* --- collapse holds nav + account --- */
.hostinap-navbar .navbar-collapse {
    display: none;
}
@media (min-width: 1200px) {
  .hostinap-navbar .navbar-collapse {
    display: flex; align-items: center;
    flex: 1 1 auto; min-width: 0;
  }
}
.hostinap-navbar .navbar-collapse.show {
    display: flex;
}

/* --- your site links --- */
.hostinap-brandnav { display: flex; gap: 2px; align-items: center; }
.hostinap-brandnav a {
    color: rgba(255,255,255,0.82) !important;
    font-size: 13.5px; font-weight: 600;
    text-decoration: none !important;
    padding: 7px 12px; border-radius: 8px;
    transition: background .18s, color .18s;
    white-space: nowrap;
}
.hostinap-brandnav a:hover { color: #fff !important; background: rgba(255,255,255,0.13); }
.hostinap-brandnav a.hostinap-offer { color: #fbbf24 !important; }

/* --- Account / Login / Register (WHMCS secondary navbar) --- */
.hostinap-whmcs-nav {
    display: flex; align-items: center;
    margin: 0; padding: 0; flex-direction: row; list-style: none;
}
.hostinap-account { margin-left: auto !important; }
.hostinap-whmcs-nav .nav-item { list-style: none; }
/* Broad selectors: WHMCS's navbar.tpl markup varies, so target every
   link inside the account list rather than relying on a .nav-link class. */
.hostinap-account a,
.hostinap-account > li > a,
.hostinap-account .nav-link,
.hostinap-account .dropdown-toggle,
.hostinap-whmcs-nav a,
.hostinap-whmcs-nav .nav-link {
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.14) !important;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background .18s ease;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
}
.hostinap-account a:hover,
.hostinap-account .nav-link:hover,
.hostinap-account .show > a,
.hostinap-whmcs-nav a:hover,
.hostinap-whmcs-nav .show > .nav-link {
    color: #ffffff !important;
    background: rgba(255,255,255,0.26) !important;
}
/* caret / chevron icons inherit white too */
.hostinap-account a i,
.hostinap-account a svg,
.hostinap-account .caret,
.hostinap-whmcs-nav a i {
    color: #ffffff !important;
    opacity: 0.85;
}
/* dropdown items must NOT inherit the white pill styling */
.hostinap-account .dropdown-menu a,
.hostinap-whmcs-nav .dropdown-menu a {
    background: transparent !important;
    border-radius: 7px !important;
    padding: 9px 13px !important;
    font-weight: 500 !important;
    display: block !important;
}

/* dropdown opened from the dark bar */
.hostinap-whmcs-nav .dropdown-menu {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(12,7,48,0.3);
    padding: 8px; margin-top: 10px; min-width: 210px;
}
.hostinap-whmcs-nav .dropdown-item,
.hostinap-account .dropdown-item {
    color: #3a3756 !important;
    background: transparent !important;
    border-radius: 7px !important;
    padding: 9px 13px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    display: block !important;
}
.hostinap-whmcs-nav .dropdown-item:hover { background: #eef4f6; color: #0E677C !important; }
.hostinap-whmcs-nav .dropdown-divider { border-color: rgba(0,0,0,0.07); }

/* --- right-hand actions --- */
.hostinap-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hostinap-navbar > .hostinap-actions.d-flex { margin-left: auto; }

.hostinap-wa {
    display: inline-flex; align-items: center; gap: 6px;
    background: #25d366; color: #fff !important;
    text-decoration: none !important;
    font-size: 12.5px; font-weight: 700;
    padding: 7px 14px; border-radius: 999px;
    transition: transform .18s; white-space: nowrap;
}
.hostinap-wa:hover { transform: translateY(-1px); }

.hostinap-cart {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.12);
    color: #fff !important; text-decoration: none !important;
    transition: background .18s;
}
.hostinap-cart:hover { background: rgba(255,255,255,0.24); }
.hostinap-cart-count {
    position: absolute; top: -5px; right: -5px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: #fbbf24; color: #03045A;
    font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
.hostinap-toggle {
    background: rgba(255,255,255,0.12); border: none; color: #fff;
    width: 36px; height: 36px; border-radius: 10px; padding: 0; cursor: pointer;
    transition: background .18s;
}
.hostinap-toggle:hover { background: rgba(255,255,255,0.24); }

/* --- below xl: stacked panel --- */
@media (max-width: 1199.98px) {
    .hostinap-navbar { flex-wrap: wrap; }
    .hostinap-navbar .navbar-collapse {
        flex-direction: column; align-items: stretch;
        width: 100%; padding: 6px 0 12px;
    }
    .hostinap-brandnav { flex-direction: column; align-items: stretch; width: 100%; }
    .hostinap-brandnav a {
        padding: 12px 8px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        border-radius: 0;
    }
    .hostinap-whmcs-nav {
        flex-direction: column; align-items: stretch;
        width: 100%; margin: 10px 0 0 0 !important;
    }
    .hostinap-whmcs-nav .nav-link {
        background: rgba(255,255,255,0.1);
        border-radius: 8px; margin-bottom: 6px;
        text-align: center;
    }
}


/* ---------------- FOOTER ---------------- */
/* Nexus's footer is a plain block; these rules build the column grid. */

#footer .hostinap-footer-cols,
.hostinap-footer-cols {
    display: grid !important;
    grid-template-columns: 2.2fr 1fr 1fr 1.4fr;
    gap: 40px;
    padding: 44px 0 34px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
    margin-bottom: 26px;
    text-align: left;
}

.hostinap-footer-brand .hostinap-logo-text { font-size: 19px; }
.hostinap-footer-brand p {
    font-size: 13.5px;
    line-height: 1.8;
    color: rgba(255,255,255,0.5);
    margin: 15px 0 0;
    max-width: 330px;
}

#footer .hostinap-footer-col h4,
.hostinap-footer-col h4 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.11em !important;
    line-height: 1.4 !important;
}

#footer .hostinap-footer-col a,
.hostinap-footer-col a {
    display: block !important;
    font-size: 13.5px !important;
    color: rgba(255,255,255,0.58) !important;
    margin-bottom: 11px !important;
    text-decoration: none !important;
    transition: color .18s ease, transform .18s ease;
    line-height: 1.5;
}
#footer .hostinap-footer-col a:hover,
.hostinap-footer-col a:hover {
    color: #fbbf24 !important;
    transform: translateX(3px);
}

@media (max-width: 991.98px) {
    .hostinap-footer-cols { grid-template-columns: 1fr 1fr !important; gap: 30px; }
    .hostinap-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .hostinap-footer-cols { grid-template-columns: 1fr !important; gap: 26px; padding: 30px 0 24px; }
    .hostinap-footer-brand p { max-width: none; }
}