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

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

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

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

/* Custom CSS for Nexus Theme
 *
 * This file allows you to customize the theme colors and styles for the entire Nexus template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-800: #3730a3;
    --primary-900: #312e81;
    --primary-950: #1e1b4b;

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --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: #10b981;
    --success-lifted: #059669;
    --success-accented: #047857;

    /* 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 */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* 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(--neutral-900);

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

    /* Additional custom properties */
    /* 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%;
}

/* Intiumx brand: Inter font and site-matching buttons/links */
body,
.btn,
input,
select,
textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-lifted);
}

.btn-primary,
.btn-primary:focus {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--primary-lifted);
    border-color: var(--primary-lifted);
}

/* Store plan comparison (supreme_comparison order form) in Intiumx colors */
html body div#order-supreme_comparison .price-table .product-icon img {
    filter: hue-rotate(-48deg) saturate(1.3);
}

html body div#order-supreme_comparison .product-title {
    background: linear-gradient(to bottom, var(--primary-600) 0%, var(--primary-700) 100%);
    filter: none;
    border-bottom: 1px solid var(--primary-800);
}

html body div#order-supreme_comparison .product-title h3 {
    color: var(--white);
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

html body div#order-supreme_comparison .text-position p {
    color: var(--primary-200);
    text-shadow: none;
}

html body div#order-supreme_comparison .featured-product-background {
    background: linear-gradient(to bottom, var(--success) 0%, var(--success-lifted) 100%);
    border-bottom: 1px solid var(--success-accented);
}

html body div#order-supreme_comparison .featured-product {
    color: var(--white);
}

html body div#order-supreme_comparison .price-area {
    background-color: var(--primary-50);
}

html body div#order-supreme_comparison .order-now {
    background: var(--primary);
    border-radius: var(--rounding-md);
}

html body div#order-supreme_comparison .order-now:hover {
    background: var(--primary-lifted);
}

html body div#order-supreme_comparison .price-area a {
    color: var(--white);
    text-shadow: none;
}

html body div#order-supreme_comparison .product-body ul li a {
    color: var(--primary);
}

/* Footer matching intiumx.ws */
html body #footer.ix-footer {
    background-color: #111827;
    color: var(--white);
    padding: 64px 0 32px;
    margin-top: 0;
}

html body #footer.ix-footer .ix-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 0.7fr 1.4fr;
    gap: 40px 32px;
}

html body #footer.ix-footer .ix-footer-heading.ix-footer-sub {
    margin-top: 28px;
}

html body #footer.ix-footer .ix-footer-logo img {
    height: 64px;
    width: auto;
    max-width: 180px;
    margin-bottom: 24px;
}

html body #footer.ix-footer .ix-footer-text {
    color: var(--neutral-400);
    margin-bottom: 24px;
}

html body #footer.ix-footer .ix-footer-social {
    display: flex;
    gap: 16px;
}

html body #footer.ix-footer .ix-footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: var(--neutral-800);
    color: var(--white);
    transition: all 0.2s;
}

html body #footer.ix-footer .ix-footer-social a:hover {
    background-color: var(--white);
    color: var(--primary);
}

html body #footer.ix-footer .ix-footer-heading {
    color: var(--white);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 24px;
}

html body #footer.ix-footer .ix-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

html body #footer.ix-footer .ix-footer-links li {
    margin-bottom: 16px;
}

html body #footer.ix-footer a {
    color: var(--neutral-400);
    text-decoration: none;
    transition: color 0.2s;
}

html body #footer.ix-footer a:hover {
    color: var(--white);
}

html body #footer.ix-footer .ix-footer-pay {
    display: flex;
    gap: 16px;
    font-size: 1.5rem;
    margin: 8px 0 24px;
    color: var(--white);
}

html body #footer.ix-footer a.ix-footer-mail {
    color: var(--primary-400);
    word-break: break-all;
}

html body #footer.ix-footer a.ix-footer-mail:hover {
    text-decoration: underline;
    color: var(--primary-300);
}

html body #footer.ix-footer .ix-footer-bottom {
    border-top: 1px solid var(--neutral-800);
    margin-top: 48px;
    padding-top: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--neutral-400);
    font-size: 0.875rem;
}

html body #footer.ix-footer .ix-footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

@media (max-width: 991px) {
    html body #footer.ix-footer .ix-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px 32px;
    }

    html body #footer.ix-footer .ix-footer-brand,
    html body #footer.ix-footer .ix-footer-support {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575px) {
    html body #footer.ix-footer .ix-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body #footer.ix-footer .ix-footer-bottom {
        flex-direction: column;
    }
}

/* ---- Mobile fixes (phones) ---------------------------------------------- */
@media (max-width: 767.98px) {
  /* Keep everything inside the screen: no sideways scrolling. */
  html, body { overflow-x: hidden; }
  #main-body .primary-content, #main-body > .container { padding-left: 14px; padding-right: 14px; }
  #order-standard_cart .products > .row,
  #order-standard_cart .row.row-eq-height { margin-left: 0 !important; margin-right: 0 !important; }
  #order-standard_cart .products .product { margin-left: 0 !important; margin-right: 0 !important; }
  #order-standard_cart .products .row-eq-height > [class*=col-] { padding-left: 0 !important; padding-right: 0 !important; }

  /* WHMCS's phone version of the cart sidebar shows three "Choose Another Category" boxes
     before the plans (and mislabels two of them). Categories are in the menu and the
     currency has its own dropdown, so hide them on phones. */
  #order-standard_cart .sidebar-collapsed { display: none !important; }

  /* Cart pages: full-width body, no empty gap where the desktop sidebar was. */
  #order-standard_cart .cart-body { width: 100%; max-width: 100%; flex: 0 0 100%; padding-left: 4px; padding-right: 4px; }
  #order-standard_cart { padding-left: 12px !important; padding-right: 12px !important; }
  #order-standard_cart .header-lined, #order-standard_cart .domain-selection-options { margin-left: 0 !important; margin-right: 0 !important; }
  #order-standard_cart .header-lined h1 { font-size: 28px; }
  /* Short pages (cart steps) shouldn't leave a screen of empty space above the footer. */
  section#main-body { min-height: 0 !important; }

  /* Header: the second (menu) bar is empty until the menu is opened, which left a
     70px white gap under the logo. */
  #header .main-navbar-wrapper { padding-top: 0; padding-bottom: 0; min-height: 0; }
  #header .main-navbar-wrapper > .container { min-height: 0; padding-top: 0; padding-bottom: 0; }
  #header .navbar-brand img, #header .logo-img { max-height: 40px; }
  .master-breadcrumb { margin-bottom: 0; }

  /* Tables (services, invoices, tickets) scroll inside their box instead of breaking the page. */
  .table-container, .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Bigger tap targets for buttons. */
  .btn { min-height: 40px; }
}
@media (max-width: 767.98px) {
  /* Domain step: keep the extension list readable (".com", not ".con"). */
  #order-standard_cart .domain-selection-options select, #order-standard_cart select.custom-select { min-width: 92px; }
}

/* ---- Header, mobile menu, reCAPTCHA badge ------------------------------- */
/* Hide WHMCS sections we don't use (no announcements or knowledgebase; live status
   lives on intiumx.ws/status/intiumx, linked in the footer). */
#Primary_Navbar-Announcements, #Primary_Navbar-Knowledgebase, #Primary_Navbar-Network_Status { display: none !important; }
/* reCAPTCHA stays active; its floating badge covered page content. Google allows hiding
   it when the reCAPTCHA notice is shown instead (it is, in the footer). */
.grecaptcha-badge { visibility: hidden !important; }

@media (max-width: 1199.98px) {
  /* Logo on the left, cart + menu button on the right, all on one line. */
  #header .navbar-light > .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; padding-left: 16px; padding-right: 16px; }
  #header .navbar-brand { margin-right: auto; padding: 0; }
  #header .navbar-brand img { max-height: 38px; width: auto; }
  #header .toolbar { flex-direction: row; align-items: center; margin-left: 12px; }

  /* Opened menu: padded panel, one clean row per link. */
  #header #mainNavbar.collapse.show, #header #mainNavbar.collapsing { background: #fff; border-top: 1px solid #e5e7eb; padding: 12px 16px 16px; box-shadow: 0 8px 16px rgba(17, 24, 39, .06); }
  #header #mainNavbar .search { margin-bottom: 10px !important; }
  #header #mainNavbar .navbar-nav { width: 100%; margin: 0; }
  #header #mainNavbar .navbar-nav > li > a.nav-link,
  #header #mainNavbar .navbar-nav > li > a { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid #f1f2f4; font-weight: 500; color: #1f2937; }
  #header #mainNavbar .navbar-nav > li:last-child > a { border-bottom: 0; }
  #header #mainNavbar .dropdown-menu { border: 0; box-shadow: none; padding: 0 0 8px 12px; margin: 0; }
  #header #mainNavbar .dropdown-menu .dropdown-item { padding: 9px 4px; color: #4b5563; }
  #header .main-navbar-wrapper > .container { padding-left: 0; padding-right: 0; }
}
@media (max-width: 1199.98px) {
  #header #mainNavbar .navbar-nav { gap: 0 !important; row-gap: 0 !important; }
  #header #mainNavbar .navbar-nav > li { margin: 0 !important; padding: 0 !important; }
  /* The knowledgebase search has nothing to search (no knowledgebase). */
  #header #mainNavbar form.d-xl-none { display: none !important; }
}
/* Same on desktop: hide the knowledgebase search next to the cart. */
#header .navbar-light form.form-inline { display: none !important; }
#footer .ix-footer-recaptcha { font-size: 12px; opacity: .7; }
#footer .ix-footer-recaptcha a { text-decoration: underline; }

/* ---------- Homepage (hero + sections) ---------- */
.ix-hero { background: radial-gradient(1200px 500px at 85% -10%, rgba(79,70,229,.55), transparent 60%), #0e1020; color: #fff; padding: 72px 0 56px; }
.ix-hero .ix-eyebrow { display: inline-block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #a5b4fc; margin-bottom: 14px; }
.ix-hero h1 { color: #fff; font-weight: 800; font-size: 46px; line-height: 1.1; margin: 0 0 16px; }
.ix-hero .ix-lead { color: #c7cbe6; font-size: 18px; max-width: 620px; margin-bottom: 26px; }
.ix-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.ix-btn-primary { background: #4f46e5 !important; border-color: #4f46e5 !important; color: #fff !important; font-weight: 700; padding: 11px 24px; border-radius: 10px; }
.ix-btn-primary:hover { background: #4338ca !important; }
.ix-btn-ghost { border: 1px solid rgba(255,255,255,.35) !important; color: #fff !important; font-weight: 600; padding: 11px 24px; border-radius: 10px; }
.ix-btn-ghost:hover { background: rgba(255,255,255,.08); }
.ix-btn-outline { border: 1.5px solid #4f46e5 !important; color: #4f46e5 !important; font-weight: 700; border-radius: 10px; padding: 10px; }
.ix-btn-outline:hover { background: #4f46e5 !important; color: #fff !important; }
.ix-search { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 20px; max-width: 760px; }
.ix-search-label { display: block; font-weight: 700; margin-bottom: 10px; color: #fff; }
.ix-search .form-control { height: 50px; border-radius: 10px 0 0 10px; border: 0; font-size: 16px; }
.ix-search .btn { height: 50px; font-weight: 700; padding: 0 22px; }
.ix-search .btn-success { background: #0e1020 !important; border-color: #0e1020 !important; border-radius: 0 10px 10px 0; }
.ix-search-link { display: inline-block; margin-top: 10px; font-size: 13px; color: #a5b4fc; }
.ix-trust { list-style: none; padding: 0; margin: 30px 0 0; display: flex; gap: 28px; flex-wrap: wrap; color: #c7cbe6; font-size: 15px; }
.ix-trust strong { color: #fff; }
.ix-section { padding: 30px 0 10px; }
.ix-h2 { text-align: center; font-weight: 800; font-size: 30px; margin-bottom: 6px; }
.ix-sub { text-align: center; color: #5a5f7a; margin-bottom: 26px; }
.ix-plan { position: relative; background: #fff; border: 1px solid #e4e4f2; border-radius: 18px; padding: 30px 26px; height: 100%; display: flex; flex-direction: column; }
.ix-plan-featured { border: 2px solid #4f46e5; box-shadow: 0 16px 40px rgba(79,70,229,.15); }
.ix-tag { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #4f46e5; font-weight: 700; }
.ix-plan h3 { font-weight: 800; font-size: 24px; margin: 6px 0; }
.ix-price { font-size: 40px; font-weight: 800; color: #0e1020; margin-bottom: 14px; }
.ix-price small { font-size: 16px; color: #5a5f7a; font-weight: 600; }
.ix-plan ul { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.ix-plan li { padding: 7px 0 7px 26px; position: relative; border-bottom: 1px solid #f1f1f8; color: #3b4060; }
.ix-plan li:before { content: "\2713"; position: absolute; left: 0; color: #4f46e5; font-weight: 800; }
.ix-feature { background: #fff; border: 1px solid #e4e4f2; border-radius: 16px; padding: 24px; height: 100%; }
.ix-feature i, .ix-service i { font-size: 26px; color: #4f46e5; width: 52px; height: 52px; border-radius: 14px; background: #eef0ff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.ix-feature h4, .ix-service h4 { font-size: 18px; font-weight: 700; margin-bottom: 6px; color: #0e1020; }
.ix-feature p, .ix-service p { color: #5a5f7a; margin: 0; font-size: 15px; }
.ix-service { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid #e4e4f2; border-radius: 16px; padding: 22px; height: 100%; text-decoration: none !important; transition: border-color .15s, box-shadow .15s; }
.ix-service:hover { border-color: #4f46e5; box-shadow: 0 10px 26px rgba(79,70,229,.12); }
.ix-service i { flex: none; margin: 0; }
.ix-quick .action-icon-btns { margin-top: 20px; }
@media (max-width: 767.98px) {
  .ix-hero { padding: 44px 0 36px; }
  .ix-hero h1 { font-size: 32px; }
  .ix-hero .ix-lead { font-size: 16px; }
  .ix-search .input-group { flex-wrap: nowrap; }
  .ix-search .btn { padding: 0 14px; }
  .ix-trust { gap: 14px 22px; font-size: 14px; }
  .ix-h2 { font-size: 24px; }
}

body:has(.ix-hero) .master-breadcrumb { display: none !important; }

/* Footer: the inline TikTok SVG matches the Font Awesome icons next to it */
html body #footer.ix-footer .ix-footer-social a svg { width: 1.15em !important; height: 1.15em !important; vertical-align: middle !important; }

/* Footer social icons: perfect circles (theme rules were squaring them) */
html body #footer.ix-footer .ix-footer-social a { width: 40px !important; height: 40px !important; min-width: 40px !important; padding: 0 !important; border-radius: 50% !important; flex: 0 0 40px !important; }

/* Six social icons fit the first footer column: smaller circles, tighter gap, wrap if still too narrow */
html body #footer.ix-footer .ix-footer-social { gap: 8px !important; flex-wrap: wrap !important; }
html body #footer.ix-footer .ix-footer-social a { width: 36px !important; height: 36px !important; min-width: 36px !important; flex: 0 0 36px !important; }