/* =====================================================================
   Cross Industries, LLC — WHMCS Portal Theme  (template: "ci-whmcs")
   Stylesheet for whmcs.x-ind.com, matched to https://www.x-ind.com

   This is the missing /css/style.css that the ci-whmcs template links to
   (it currently returns 404, which is why the portal renders unstyled).
   It styles the custom chrome (#topbar, #site-header, #main-nav,
   #site-footer) AND the standard WHMCS Bootstrap content inside #wrapper.

   Brand: deep navy (#0A0F24 / #0D1533) + bright blue accent (#00A8FF),
   Space Grotesk headings, Inter body — identical to the main website.
   ===================================================================== */

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

/* ---------------------------------------------------------------------
   Brand tokens — edit here to retune the whole portal
   --------------------------------------------------------------------- */
:root {
    --ci-navy-900: #060B18;
    --ci-navy-800: #0A0F24;
    --ci-navy-700: #0D1533;
    --ci-navy-600: #142046;
    --ci-slate-800: #1E293B;
    --ci-slate-500: #64748B;
    --ci-slate-400: #94A3B8;
    --ci-slate-300: #CBD5E1;
    --ci-accent:    #00A8FF;
    --ci-accent-lt: #33BBFF;
    --ci-accent-600:#0089d6;
    --ci-accent-soft: rgba(0, 168, 255, 0.12);
    --ci-success:   #218500;
    --ci-border:    #E2E8F0;
    --ci-page-bg:   #F4F7FB;
    --ci-card-bg:   #FFFFFF;
    --ci-radius:    12px;
    --ci-radius-sm: 8px;
    --ci-shadow:    0 6px 24px rgba(15, 23, 42, 0.08);
    --ci-maxw:      1180px;
    --ci-font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ci-font-head: 'Space Grotesk', 'Inter', sans-serif;
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body.ci-whmcs {
    margin: 0;
    font-family: var(--ci-font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ci-slate-800);
    background: var(--ci-page-bg);
    -webkit-font-smoothing: antialiased;
}

.ci-whmcs h1, .ci-whmcs h2, .ci-whmcs h3, .ci-whmcs h4, .ci-whmcs h5 {
    font-family: var(--ci-font-head);
    font-weight: 600;
    color: var(--ci-slate-800);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.ci-whmcs a { color: var(--ci-accent); text-decoration: none; transition: color .15s ease; }
.ci-whmcs a:hover { color: var(--ci-accent-600); }
.ci-whmcs img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------------
   1. Top bar (contact + utility links)
   --------------------------------------------------------------------- */
#topbar {
    background: var(--ci-navy-900);
    color: var(--ci-slate-400);
    font-size: 13px;
}
.topbar-inner {
    max-width: var(--ci-maxw);
    margin: 0 auto;
    padding: 7px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.topbar-contact a, .topbar-links a { color: var(--ci-slate-300); }
.topbar-contact a:hover, .topbar-links a:hover { color: #fff; }
.topbar-contact a { margin-right: 18px; }
.topbar-contact .bi, .topbar-links .bi { color: var(--ci-accent); margin-right: 6px; }
.topbar-links .sep { color: var(--ci-navy-600); margin: 0 10px; }

/* ---------------------------------------------------------------------
   2. Header + logo
   --------------------------------------------------------------------- */
#site-header {
    background: linear-gradient(180deg, var(--ci-navy-800) 0%, var(--ci-navy-700) 100%);
    border-bottom: 1px solid var(--ci-navy-600);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-inner {
    max-width: var(--ci-maxw);
    margin: 0 auto;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.site-logo {
    display: inline-flex;
    align-items: center;
    font-family: var(--ci-font-head);
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    letter-spacing: -0.02em;
}
.site-logo:hover { color: #fff; }
.site-logo img { max-height: 46px; }

/* ---------------------------------------------------------------------
   3. Primary navigation + dropdowns
   --------------------------------------------------------------------- */
#main-nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
#main-nav li { position: relative; }
#main-nav > ul > li > a {
    display: block;
    padding: 9px 14px;
    color: var(--ci-slate-300);
    font-weight: 500;
    font-size: 14px;
    border-radius: var(--ci-radius-sm);
}
#main-nav > ul > li > a:hover,
#main-nav > ul > li:hover > a {
    color: #fff;
    background: var(--ci-navy-600);
}
#main-nav > ul > li.active > a,
#main-nav > ul > li[aria-current] > a {
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--ci-accent);
}

/* Submenus (plain nested <ul>) */
#main-nav li > ul {
    list-style: none;
    margin: 0;
    padding: 6px;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: #fff;
    border: 1px solid var(--ci-border);
    border-radius: var(--ci-radius-sm);
    box-shadow: var(--ci-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 1100;
}
#main-nav li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }
#main-nav li > ul li a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--ci-slate-800);
    font-size: 14px;
    font-weight: 500;
}
#main-nav li > ul li a:hover { background: var(--ci-accent-soft); color: var(--ci-accent-600); }

/* CTA button in nav ("Get Support") */
.btn-cta {
    display: inline-block;
    background: var(--ci-accent);
    color: #fff !important;
    font-weight: 600;
    padding: 9px 18px !important;
    border-radius: var(--ci-radius-sm);
    box-shadow: 0 6px 18px rgba(0, 168, 255, 0.30);
}
.btn-cta:hover { background: var(--ci-accent-600); color: #fff !important; }

/* Mobile hamburger toggle */
#nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 40px;
    height: 38px;
    padding: 9px;
    background: transparent;
    border: 1px solid var(--ci-navy-600);
    border-radius: var(--ci-radius-sm);
    cursor: pointer;
}
#nav-toggle span { display: block; height: 2px; background: var(--ci-slate-300); border-radius: 2px; transition: .2s; }

@media (max-width: 860px) {
    #nav-toggle { display: flex; }
    #main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--ci-navy-800);
        border-bottom: 1px solid var(--ci-navy-600);
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
    }
    /* The template's JS adds .open / .active when the toggle is tapped. */
    #main-nav.open, #main-nav.active, body.nav-open #main-nav { max-height: 80vh; overflow: auto; }
    #main-nav > ul { flex-direction: column; align-items: stretch; padding: 8px; gap: 2px; }
    #main-nav li > ul {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: none; background: var(--ci-navy-700);
        margin: 4px 0 4px 12px;
    }
    #main-nav li > ul li a { color: var(--ci-slate-300); }
    #main-nav li > ul li a:hover { background: var(--ci-navy-600); color: #fff; }
    .btn-cta { text-align: center; margin-top: 6px; }
}

/* ---------------------------------------------------------------------
   4. Content wrapper + WHMCS Bootstrap components
   --------------------------------------------------------------------- */
#wrapper {
    max-width: var(--ci-maxw);
    margin: 0 auto;
    padding: 28px 22px 48px;
    min-height: 50vh;
}

/* Page headers */
.ci-whmcs .page-header,
#wrapper .page-header {
    border-bottom: 1px solid var(--ci-border);
    padding-bottom: 12px;
    margin: 8px 0 24px;
}

/* Buttons */
.ci-whmcs .btn {
    border-radius: var(--ci-radius-sm);
    font-weight: 600;
    font-family: var(--ci-font-body);
    padding: 9px 18px;
    transition: all .15s ease;
}
.ci-whmcs .btn-primary,
.ci-whmcs .btn-info,
.ci-whmcs .btn-success.btn-checkout {
    background: var(--ci-accent);
    border-color: var(--ci-accent);
    color: #fff;
}
.ci-whmcs .btn-primary:hover,
.ci-whmcs .btn-info:hover {
    background: var(--ci-accent-600);
    border-color: var(--ci-accent-600);
    box-shadow: 0 6px 18px rgba(0, 168, 255, 0.30);
    color: #fff;
}
.ci-whmcs .btn-default {
    background: #fff;
    border: 1px solid var(--ci-border);
    color: var(--ci-slate-800);
}
.ci-whmcs .btn-default:hover { border-color: var(--ci-accent); color: var(--ci-accent-600); }
.ci-whmcs .btn-success { background: var(--ci-success); border-color: var(--ci-success); color: #fff; }

/* Panels / cards */
.ci-whmcs .panel,
.ci-whmcs .card,
.ci-whmcs .well {
    background: var(--ci-card-bg);
    border: 1px solid var(--ci-border);
    border-radius: var(--ci-radius);
    box-shadow: var(--ci-shadow);
}
.ci-whmcs .panel-heading,
.ci-whmcs .card-header {
    background: #fff;
    border-bottom: 1px solid var(--ci-border);
    border-radius: var(--ci-radius) var(--ci-radius) 0 0;
    font-family: var(--ci-font-head);
    font-weight: 600;
    color: var(--ci-slate-800);
}
.ci-whmcs .panel-title { font-family: var(--ci-font-head); font-weight: 600; }
.ci-whmcs .panel-primary > .panel-heading {
    background: var(--ci-navy-700);
    color: #fff;
    border-color: var(--ci-navy-700);
}

/* Tables */
.ci-whmcs .table { background: #fff; border-radius: var(--ci-radius); overflow: hidden; }
.ci-whmcs .table > thead > tr > th {
    background: var(--ci-navy-700);
    color: var(--ci-slate-300);
    border: none;
    font-family: var(--ci-font-head);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .03em;
}
.ci-whmcs .table > tbody > tr:hover { background: var(--ci-accent-soft); }
.ci-whmcs .table-striped > tbody > tr:nth-of-type(odd) { background: #F8FAFC; }

/* Forms */
.ci-whmcs .form-control {
    border: 1px solid var(--ci-border);
    border-radius: var(--ci-radius-sm);
    box-shadow: none;
    color: var(--ci-slate-800);
    height: auto;
    padding: 10px 12px;
}
.ci-whmcs .form-control:focus {
    border-color: var(--ci-accent);
    box-shadow: 0 0 0 3px var(--ci-accent-soft);
}
.ci-whmcs .input-group-addon { background: #F1F5F9; border-color: var(--ci-border); }

/* Alerts */
.ci-whmcs .alert { border: none; border-left: 4px solid transparent; border-radius: var(--ci-radius-sm); }
.ci-whmcs .alert-info    { background: var(--ci-accent-soft); border-left-color: var(--ci-accent); color: #075985; }
.ci-whmcs .alert-success { background: #E7F6E0; border-left-color: var(--ci-success); color: #1B5E00; }
.ci-whmcs .alert-warning { background: #FEF3C7; border-left-color: #D97706; color: #92400E; }
.ci-whmcs .alert-danger  { background: #FEE2E2; border-left-color: #DC2626; color: #991B1B; }

/* Badges / labels */
.ci-whmcs .badge { border-radius: 20px; font-weight: 600; }
.ci-whmcs .label-success, .ci-whmcs .badge-success { background: var(--ci-success); }
.ci-whmcs .label-info, .ci-whmcs .badge-info { background: var(--ci-accent); }

/* Sidebar / list groups (client area) */
.ci-whmcs .list-group-item { border-color: var(--ci-border); }
.ci-whmcs .list-group-item.active { background: var(--ci-accent); border-color: var(--ci-accent); color: #fff; }

/* Tabs, pagination, progress */
.ci-whmcs .nav-tabs > li.active > a { color: var(--ci-accent-600); font-weight: 600; }
.ci-whmcs .pagination > .active > a,
.ci-whmcs .pagination > .active > span { background: var(--ci-accent); border-color: var(--ci-accent); }
.ci-whmcs .progress-bar { background: var(--ci-accent); }

/* Domain checker / order summary accents */
.ci-whmcs .domain-checker,
.ci-whmcs .order-summary { border-radius: var(--ci-radius); }
.ci-whmcs .text-primary { color: var(--ci-accent) !important; }

/* Optional hero block if the homepage template provides one */
.ci-whmcs .home-hero, .ci-whmcs .hero, .ci-whmcs .jumbotron {
    background: radial-gradient(1100px 360px at 75% -15%, var(--ci-navy-600), var(--ci-navy-800) 58%, var(--ci-navy-900));
    color: #fff;
    border-radius: 0;
    padding: 48px 22px;
}
.ci-whmcs .home-hero h1, .ci-whmcs .hero h1, .ci-whmcs .jumbotron h1 { color: #fff; }
.ci-whmcs .home-hero p, .ci-whmcs .hero p { color: var(--ci-slate-300); }

/* ---------------------------------------------------------------------
   5. Footer
   --------------------------------------------------------------------- */
#site-footer {
    background: var(--ci-navy-900);
    color: var(--ci-slate-400);
    border-top: 3px solid var(--ci-accent);
    margin-top: 40px;
}
.footer-main {
    max-width: var(--ci-maxw);
    margin: 0 auto;
    padding: 40px 22px 28px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 30px;
}
.footer-brand .footer-logo a { color: #fff; font-family: var(--ci-font-head); font-weight: 700; font-size: 19px; }
.footer-brand p { color: var(--ci-slate-400); margin: 12px 0; }
.footer-brand .contact-line { display: block; margin-bottom: 6px; }
.footer-brand .contact-line a { color: var(--ci-slate-300); }
.footer-brand .contact-line a:hover { color: #fff; }
.footer-col h4 {
    color: #fff;
    font-family: var(--ci-font-head);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: var(--ci-slate-400); font-size: 14px; }
.footer-col a:hover { color: var(--ci-accent-lt); }

.footer-bottom {
    border-top: 1px solid var(--ci-navy-600);
    padding: 16px 22px;
    max-width: var(--ci-maxw);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--ci-slate-500);
    font-size: 13px;
}
.footer-bottom a { color: var(--ci-slate-300); }
.footer-badge {
    background: var(--ci-accent-soft);
    color: var(--ci-accent-lt);
    border: 1px solid rgba(0, 168, 255, 0.25);
    border-radius: 20px;
    padding: 4px 12px;
    font-weight: 600;
    font-size: 12px;
}

@media (max-width: 860px) {
    .footer-main { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 520px) {
    .footer-main { grid-template-columns: 1fr; }
    .topbar-inner { justify-content: center; text-align: center; }
}

::selection { background: var(--ci-accent); color: #fff; }