/* *****************************************************

    VPSPioneer — brand palette for the Nexus theme

    This file replaces Nexus's own custom.css (child themes
    take precedence), so it must declare the full variable
    set the theme expects. Only the values are ours:

      · primary  → VPSPioneer indigo  #4F4FF0
      · neutrals → navy-tinted to match vpspioneer.com
      · type     → Poppins, the site's typeface

    Semantic colours (success / info / warning / error) are
    left as WHMCS shipped them so status meaning and contrast
    stay intact.

***************************************************** */

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

:root {
    --white: #fff;

    /* Neutral shades — tinted toward the brand navy (#0E2954)
       instead of pure grey, so borders, text and backgrounds
       sit in the same family as the main site. */
    --neutral-50: #f6f9fd;
    --neutral-100: #eff3fa;
    --neutral-200: #e3e9ed;
    --neutral-300: #cdd7e5;
    --neutral-400: #9aa7c7;
    --neutral-500: #6d80a6;
    --neutral-600: #4a628c;
    --neutral-700: #2d5087;
    --neutral-800: #1a3a68;
    --neutral-900: #0E2954;
    --neutral-950: #081b3a;

    /* Brand palette — indigo ramp anchored on #4F4FF0 */
    --primary-50: #f1f1fe;
    --primary-100: #e6e6fd;
    --primary-200: #d0d0fc;
    --primary-300: #b1b1f9;
    --primary-400: #8c8cf5;
    --primary-500: #6b6bf3;
    --primary-600: #4F4FF0;
    --primary-700: #3e3edb;
    --primary-800: #3333b0;
    --primary-900: #2d2d8b;
    --primary-950: #1c1c56;

    /* Primary colors */
    --primary: var(--primary-600);
    --primary-lifted: var(--primary-700);
    --primary-accented: var(--primary-800);

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

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors — Nexus uses these for the top bar and button borders,
       so they carry the brand rather than the navy neutrals. */
    --grayscale: var(--primary-600);
    --grayscale-lifted: var(--primary-700);
    --grayscale-accented: var(--primary-600);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

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

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--primary-600);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

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

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* :: TYPOGRAPHY ::
   Nexus ships Open Sans; the site runs on Poppins. */
body,
button,
input,
select,
textarea,
.btn,
.form-control,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -0.01em;
}

/* :: LOGO ::
   The source logo is wide; cap its height so the header keeps
   Nexus's original proportions. */
.navbar-brand .logo-img {
    max-height: 38px;
    width: auto;
}

/* :: PRIMARY BUTTONS ::
   Nexus paints .btn-primary from --bg-inverted / --grayscale rather than
   --primary, so the brand colour has to be applied to the button directly. */
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--primary-lifted);
    border-color: var(--primary-lifted);
}
.btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(79, 79, 240, 0.25);
}

/* :: LOGO ::
   WHMCS only renders <img class="logo-img"> once a logo is configured in the
   admin; until then the header falls back to the company name as text. So the
   logo is also painted as the brand link's background. The :not(:has()) guard
   switches this off by itself the moment a real logo is configured. */
.navbar-brand:not(:has(.logo-img)) {
    display: inline-block;
    width: 210px;
    height: 40px;
    background: url("../img/logo.png") left center / contain no-repeat;
    font-size: 0;
    line-height: 0;
    color: transparent;
}
.navbar-brand .logo-img {
    max-height: 38px;
    width: auto;
}
@media (max-width: 575px) {
    .navbar-brand:not(:has(.logo-img)) {
        width: 165px;
        height: 32px;
    }
}

/* :: FOOTER ::
   Nexus paints the footer from --bg-inverted, which now carries the brand, so
   it would run as a full-width band of indigo. The main site's footer is black;
   matching it keeps the two properties reading as one company, and keeps the
   indigo meaning "this is clickable" rather than "this is a surface".

   The copyright line inherits --text-lifted, a mid navy that all but disappears
   on a dark ground, so it gets its own value. */
footer.footer {
    background-color: #000;
}
footer.footer .copyright {
    color: rgba(255, 255, 255, 0.55);
}
footer.footer .btn {
    border-color: rgba(255, 255, 255, 0.25);
}