/*
 * Webhost Solutions — complete replacement custom.css, 2026-09-07.
 * Pair with the supplied homepage.tpl. Replace, do not append to old CSS.
 * Only the homepage sets html.whs-homepage; other WHMCS pages keep their theme.
 */

/* Remove the actual wrapper spacing between the navigation and the hero.
 * Keep the collapsible menu in normal flow so opening it moves the hero down.
 */
html.whs-homepage,
html.whs-homepage body {
    background: #071122;
}

html.whs-homepage #main-menu,
html.whs-homepage #main-menu #nav.navbar {
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    min-height: 0;
    background: #071122;
    box-shadow: none;
}

/* Keep the navigation and its tap targets above the decorative hero. */
html.whs-homepage #main-menu {
    position: relative;
    z-index: 20;
    overflow: visible;
}

/* Hide only the stock homepage banner/shortcuts if an older header has them. */
html.whs-homepage #home-banner,
html.whs-homepage .home-shortcuts {
    display: none !important;
}

html.whs-homepage #main-body {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: #071122;
}

html.whs-homepage #main-body > .container,
html.whs-homepage #main-body > .container-fluid {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

html.whs-homepage #main-body > .container > .row,
html.whs-homepage #main-body > .container-fluid > .row,
html.whs-homepage #main-body .main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Retain the existing dark header and its functional Bootstrap controls. */
html.whs-homepage #header {
    background: #071122;
    border-bottom: 1px solid rgba(128, 141, 214, .12);
}

html.whs-homepage #header .top-nav > li > a,
html.whs-homepage #main-menu .navbar-nav > li > a {
    color: #e7ebf8;
}

html.whs-homepage #header .top-nav > li.primary-action > a {
    background: linear-gradient(135deg, #6d72ff, #9b63ff);
    border-color: transparent;
    color: #fff;
}

html.whs-homepage #main-menu .navbar-toggle {
    background: transparent;
    border-color: transparent;
}

html.whs-homepage #main-menu .navbar-toggle .icon-bar {
    background: #eef2ff;
}

html.whs-homepage #main-menu .navbar-nav > .open > a,
html.whs-homepage #main-menu .navbar-nav > li > a:hover,
html.whs-homepage #main-menu .navbar-nav > li > a:focus {
    color: #fff;
    background: #17223d;
}

/* Homepage components have one set of rules, with width-based breakpoints. */
.whs-home,
.whs-home *,
.whs-home *::before,
.whs-home *::after {
    box-sizing: border-box;
}

.whs-home {
    --whs-edge: 36px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 0 60px;
    color: #eef2ff;
    background: #071122;
}

.whs-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "content art" "features features";
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: radial-gradient(circle at 76% 47%, rgba(74, 83, 255, .26), transparent 36%),
        radial-gradient(circle at 94% 20%, rgba(132, 62, 255, .24), transparent 28%),
        linear-gradient(115deg, #071122 0%, #09152b 50%, #11133e 100%);
}

.whs-hero-content {
    grid-area: content;
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 36px 0 32px var(--whs-edge);
}

.whs-eyebrow {
    display: inline-block;
    margin-bottom: 11px;
    color: #9ba7ff;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: .18em;
}

.whs-hero h1 {
    margin: 0 0 18px;
    color: #eef2ff;
    font-size: clamp(36px, 3.7vw, 50px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -1.4px;
}

.whs-hero h1 span {
    color: #a995ff;
    background: linear-gradient(90deg, #7d9bff, #c36cff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.whs-hero p {
    max-width: 520px;
    margin: 0 0 25px;
    color: #a5b1ca;
    font-size: 16px;
    line-height: 1.55;
}

.whs-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}

.whs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    min-height: 44px;
    padding: 13px 19px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #fff !important;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    transition: transform .2s ease, filter .2s ease;
}

.whs-btn-primary {
    background: linear-gradient(135deg, #6d72ff, #9b63ff);
    box-shadow: 0 10px 25px rgba(111, 96, 255, .28);
}

.whs-btn-secondary {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .18);
}

.whs-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

/* Decorative artwork occupies its own grid cell, never the button/card cells. */
.whs-hero-art {
    grid-area: art;
    position: relative;
    z-index: 1;
    justify-self: center;
    width: 100%;
    min-width: 0;
    max-width: 520px;
    height: 340px;
    margin: 0;
    pointer-events: none;
}

.whs-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
}

.whs-glow-main {
    width: 62%;
    height: 70%;
    left: 12%;
    top: 15%;
    background: rgba(50, 91, 255, .22);
}

.whs-glow-purple {
    width: 45%;
    height: 55%;
    right: 0;
    top: 4%;
    background: rgba(151, 52, 255, .19);
}

.whs-grid-plane {
    position: absolute;
    width: 82%;
    height: 57%;
    left: 7%;
    top: 36%;
    transform: perspective(450px) rotateX(58deg) rotateZ(-1deg);
    border: 1px solid rgba(90, 116, 255, .25);
    background-image: linear-gradient(rgba(85, 114, 255, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(85, 114, 255, .13) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: .7;
}

.whs-orbit {
    position: absolute;
    border: 1px solid rgba(103, 112, 255, .32);
    border-radius: 50%;
    transform: rotate(-20deg);
}

.whs-orbit-one { width: 82%; height: 44%; left: 7%; top: 31%; }
.whs-orbit-two { width: 68%; height: 35%; left: 14%; top: 36%; }

.whs-server {
    position: absolute;
    top: 17%;
    left: 50%;
    width: 145px;
    height: 205px;
    transform: translateX(-50%) perspective(500px) rotateY(-17deg) skewY(-2deg);
    border: 1px solid rgba(91, 135, 255, .5);
    border-radius: 8px;
    background: linear-gradient(90deg, #101d35, #0b1528 72%, #172752);
    box-shadow: -18px 30px 50px rgba(0, 0, 0, .4), 0 0 30px rgba(67, 82, 255, .25);
}

/* Relative positions keep every light and slot inside a smaller mobile server. */
.whs-server::before,
.whs-server::after {
    content: "";
    position: absolute;
    left: 7%;
    right: 7%;
    height: 1px;
    background: rgba(113, 142, 255, .2);
}

.whs-server::before { top: 25%; }
.whs-server::after { top: 50%; }

.whs-server-top {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 6%;
    height: 15%;
    border: 1px solid rgba(96, 129, 255, .35);
    border-radius: 4px;
    background: linear-gradient(135deg, #16264b, #101a35);
}

.whs-server-top::after {
    content: "";
    position: absolute;
    right: 8%;
    top: 34%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #55d8ff;
    box-shadow: 0 0 12px #55d8ff;
}

.whs-server-light {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 20%;
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg, #a958ff, #537fff);
    box-shadow: 0 0 13px rgba(130, 88, 255, .8);
}

.whs-server-slot {
    position: absolute;
    left: 9%;
    width: 49%;
    height: 3.5%;
    border-radius: 3px;
    background: linear-gradient(90deg, #3c79ff, #c24cff);
    box-shadow: 0 0 11px rgba(106, 81, 255, .35);
}

.whs-server .slot-one { top: 32%; }
.whs-server .slot-two { top: 57%; }
.whs-server .slot-three { top: 70%; }
.whs-server .slot-four { top: 83%; }

.whs-server-side {
    position: absolute;
    right: -15%;
    top: 13%;
    width: 15%;
    height: 78%;
    transform: skewY(26deg);
    border-right: 1px solid rgba(96, 129, 255, .35);
    border-top: 1px solid rgba(96, 129, 255, .25);
    background: linear-gradient(90deg, #172a52, #0d1932);
}

/* The three cards touch at every width. The single parent owns the outer border;
 * children have square corners and one divider, so there are no corner gaps.
 */
.whs-feature-row {
    grid-area: features;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(103, 131, 218, .3);
    border-radius: 0;
    background: rgba(9, 20, 41, .94);
}

.whs-feature {
    position: static;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 16px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.whs-feature + .whs-feature {
    border-left: 1px solid rgba(103, 131, 218, .3);
}

.whs-feature > div:last-child { min-width: 0; }

.whs-feature strong {
    display: block;
    margin-bottom: 4px;
    color: #eef2ff;
    font-size: 13px;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}

.whs-feature span {
    display: block;
    color: #a5b1ca;
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.whs-feature-icon {
    display: grid;
    place-items: center;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    color: #68d9ff;
    font-size: 14px;
}

.whs-feature-fast .whs-feature-icon { color: #c26bff; }
.whs-feature-support .whs-feature-icon { color: #48baff; }

/* Existing quick actions, account message, search and news. */
.whs-section-heading { padding: 36px 4px 22px; }

.whs-section-heading h2,
.whs-account-strip h2,
.whs-info-card h2 {
    margin: 0;
    color: #f6f7ff;
    font-weight: 800;
    letter-spacing: -.5px;
}

.whs-section-heading h2 { font-size: 29px; line-height: 1.2; }
.whs-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.whs-action-card,
.whs-info-card {
    min-width: 0;
    background: #11162c;
    border: 1px solid rgba(146, 156, 201, .16);
    border-radius: 20px;
}

.whs-action-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 17px;
    min-height: 180px;
    padding: 25px 25px 40px;
    color: #fff !important;
    text-decoration: none !important;
    transition: transform .2s ease, border-color .2s ease;
}

.whs-action-card:hover {
    transform: translateY(-4px);
    border-color: rgba(132, 119, 255, .5);
    box-shadow: 0 18px 40px rgba(5, 8, 25, .25);
}

.whs-card-icon {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(103, 115, 255, .2), rgba(172, 103, 255, .18));
    color: #99a4ff;
    font-size: 18px;
}

.whs-action-card h3 { margin: 0 0 7px; color: #eef2ff; font-size: 17px; line-height: 1.3; }
.whs-action-card p { max-width: 280px; margin: 0; color: #a5aec8; font-size: 13px; line-height: 1.55; }
.whs-card-arrow { position: absolute; right: 22px; bottom: 18px; color: #98a1ff; }

.whs-account-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    padding: 23px 25px;
    border: 1px solid rgba(140, 128, 255, .18);
    border-radius: 20px;
    background: linear-gradient(135deg, #151a37, #211740);
}

.whs-account-strip > div { min-width: 0; overflow-wrap: anywhere; }
.whs-account-strip h2 { font-size: 22px; line-height: 1.3; }
.whs-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.whs-info-card { padding: 25px; }
.whs-info-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.whs-info-card-head > div { min-width: 0; }
.whs-info-card h2 { font-size: 21px; line-height: 1.3; }
.whs-info-card-head > i { color: #a0a9ff; font-size: 19px; }

.whs-search {
    display: flex;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(150, 160, 205, .25);
    border-radius: 11px;
    background: #0b1022;
}

.whs-search input {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 14px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 16px;
}

.whs-search input::placeholder { color: #a2adc7; opacity: 1; }
.whs-search button { flex: 0 0 48px; width: 48px; min-height: 48px; border: 0; background: transparent; color: #a6afff; }
.whs-search:focus-within { outline: 2px solid #a6afff; outline-offset: 2px; }
.whs-search input:focus { outline: 0; }
.whs-text-link { display: inline-block; margin-top: 18px; color: #a6afff !important; font-size: 13px; font-weight: 700; text-decoration: none !important; }
.whs-text-link i { margin-left: 5px; }
.whs-news-item { display: flex; justify-content: space-between; gap: 15px; padding: 12px 0; border-bottom: 1px solid rgba(150, 160, 205, .15); color: #e9ecff !important; text-decoration: none !important; }
.whs-news-item strong { min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.whs-news-item span { flex-shrink: 0; color: #a5aec8; font-size: 11px; white-space: nowrap; }
.whs-muted { color: #a5aec8; font-size: 13px; }
.whs-home a:focus-visible,
.whs-home button:focus-visible { outline: 2px solid #b4bdff; outline-offset: 4px; }

/* Stack at tablet width before either the title or the illustration can clash. */
@media (max-width: 991px) {
    /* Let the navigation wrappers grow when the mobile panel opens.
     * An out-of-flow panel can otherwise draw its links over the hero.
     */
    html.whs-homepage #main-menu,
    html.whs-homepage #main-menu #nav.navbar,
    html.whs-homepage #main-menu #nav > .container {
        position: relative !important;
        display: block;
        float: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    html.whs-homepage #main-menu #nav > .container {
        display: flow-root;
    }
    /* Use the native block button layout with an 8px cushion below the icon.
     * The 44px tap target stays wholly inside the navigation row.
     */
    html.whs-homepage #main-menu #nav .navbar-header {
        min-height: 0;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    html.whs-homepage #main-menu #nav .navbar-toggle {
        display: block;
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        min-width: 44px;
        height: auto;
        min-height: 44px;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 22px 10px 8px !important;
        border: 0;
        cursor: pointer;
        touch-action: manipulation;
    }
    html.whs-homepage #main-menu #nav .navbar-toggle .icon-bar {
        pointer-events: none;
    }
    /* The panel itself owns an opaque background, including during animation.
     * Reset overlay positioning while Bootstrap continues to control height.
     */
    html.whs-homepage #main-menu #primary-nav {
        position: static !important;
        inset: auto !important;
        float: none !important;
        clear: both;
        width: auto !important;
        max-width: none;
        transform: none !important;
        background: #0b1427 !important;
        background-image: none !important;
        opacity: 1 !important;
        color: #eef2ff;
        border: 0;
        border-top: 1px solid #26334e;
        box-shadow: none;
    }
    html.whs-homepage #main-menu #primary-nav > .navbar-nav {
        position: static !important;
        display: block;
        float: none !important;
        width: auto;
        margin: 0 -15px;
        padding: 8px 0;
        background: #0b1427;
    }
    html.whs-homepage #main-menu #primary-nav > .navbar-nav + .navbar-nav {
        border-top: 1px solid #26334e;
    }
    html.whs-homepage #main-menu #primary-nav .navbar-nav > li {
        position: relative;
        float: none !important;
        display: block;
    }
    html.whs-homepage #main-menu #primary-nav .navbar-nav > li > a {
        display: block;
        min-height: 44px;
        padding: 12px 20px;
        color: #eef2ff !important;
        background: #0b1427;
        white-space: normal;
    }
    html.whs-homepage #main-menu #primary-nav .navbar-nav > li > a:hover,
    html.whs-homepage #main-menu #primary-nav .navbar-nav > li > a:focus,
    html.whs-homepage #main-menu #primary-nav .navbar-nav > .open > a {
        color: #fff !important;
        background: #17223d;
    }
    /* Store and Account submenus need their own solid surface as well.
     * Leave display to Bootstrap so unopened submenus remain collapsed.
     */
    html.whs-homepage #main-menu #primary-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        width: auto;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: #101c34 !important;
        box-shadow: none;
    }
    html.whs-homepage #main-menu #primary-nav .dropdown-menu > li > a {
        padding: 10px 28px;
        color: #eef2ff !important;
        white-space: normal;
    }
    html.whs-homepage #main-menu #primary-nav .dropdown-menu > li > a:hover,
    html.whs-homepage #main-menu #primary-nav .dropdown-menu > li > a:focus {
        color: #fff !important;
        background: #1b2d4b;
    }
    html.whs-homepage #main-menu #primary-nav .dropdown-header {
        color: #a5b1ca;
    }
    html.whs-homepage #main-menu #primary-nav .dropdown-menu .divider {
        background: #26334e;
    }
    /* Match Bootstrap 3's real collapse states at WHMCS's 991px breakpoint.
     * Both settled and transitioning panels occupy their own space.
     */
    html.whs-homepage #main-menu #primary-nav.collapse:not(.in) {
        display: none !important;
    }
    html.whs-homepage #main-menu #primary-nav.collapse.in {
        display: block !important;
        height: auto !important;
        max-height: none;
        visibility: visible;
        clear: both;
    }
    html.whs-homepage #main-menu #primary-nav.collapsing {
        display: block !important;
        clear: both;
    }
    .whs-home { --whs-edge: 26px; }
    .whs-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "content" "art" "features"; }
    .whs-hero-content { padding: 28px var(--whs-edge) 0; }
    .whs-hero-art { height: 260px; max-width: 450px; }
    .whs-server { width: 130px; height: 184px; top: 10%; }
    .whs-hero p { max-width: 100%; }
    .whs-feature { padding: 13px 12px; }
    .whs-action-card { padding: 20px 20px 38px; }
    .whs-info-card { padding: 20px; }
}

@media (max-width: 767px) {
    .whs-home { --whs-edge: 18px; padding-bottom: 40px; }
    .whs-hero-content { padding-top: 24px; }
    .whs-hero h1 { margin-bottom: 16px; font-size: clamp(28px, 8.5vw, 36px); letter-spacing: -1.1px; }
    .whs-hero p { margin-bottom: 22px; font-size: 15px; }
    .whs-hero-buttons { gap: 10px; }
    .whs-hero .whs-btn { gap: 7px; padding: 12px 13px; font-size: 13px; }
    .whs-hero-art { height: 230px; max-width: 390px; }
    .whs-server { top: 13%; width: 118px; height: 167px; }
    .whs-feature { gap: 6px; padding: 12px 8px; }
    .whs-feature strong { font-size: 11px; }
    .whs-feature span { font-size: 10px; }
    .whs-feature-icon { flex-basis: 18px; width: 18px; height: 20px; font-size: 12px; }
    .whs-section-heading { padding: 28px 4px 18px; }
    .whs-section-heading h2 { font-size: 24px; }
    .whs-action-grid,
    .whs-info-grid { grid-template-columns: minmax(0, 1fr); }
    .whs-action-card { min-height: 145px; }
    .whs-account-strip { align-items: flex-start; flex-direction: column; padding: 20px; }
    .whs-account-strip .whs-btn { width: 100%; }
    .whs-news-item { align-items: flex-start; flex-direction: column; gap: 4px; }
}

@media (max-width: 379px) {
    .whs-home { --whs-edge: 14px; }
    .whs-eyebrow { font-size: 10px; letter-spacing: .13em; }
    .whs-hero-buttons { gap: 8px; }
    .whs-hero .whs-btn { flex: 1 1 110px; padding: 12px 8px; }
    .whs-feature { flex-direction: column; gap: 5px; }
    .whs-feature-icon { flex-basis: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .whs-btn,
    .whs-action-card { transition: none; }
    .whs-btn:hover,
    .whs-action-card:hover { transform: none; }
}


/* ============================================================
   WEBHOST Client Dashboard
   Scoped to clientareahome.tpl so the public homepage is unchanged.
   ============================================================ */

.whs-client-dashboard,
.whs-client-dashboard *,
.whs-client-dashboard *::before,
.whs-client-dashboard *::after {
    box-sizing: border-box;
}

body:has(.whs-client-dashboard),
body:has(.whs-client-dashboard) #main-body,
body:has(.whs-client-dashboard) #main-body > .container,
body:has(.whs-client-dashboard) #main-body .main-content {
    background: #071122 !important;
}

body:has(.whs-client-dashboard) #main-body {
    padding-top: 28px;
    padding-bottom: 55px;
}

body:has(.whs-client-dashboard) #main-body .main-content {
    margin-bottom: 0;
}

.whs-client-dashboard {
    --whs-client-border: rgba(142, 154, 212, .17);
    --whs-client-muted: #9da9c1;
    --whs-client-surface: #10172b;
    --whs-client-surface-2: #141d35;
    width: 100%;
    color: #edf1ff;
}

.whs-client-dashboard a {
    text-decoration: none !important;
}

.whs-client-welcome {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
    padding: 30px 32px;
    border: 1px solid var(--whs-client-border);
    border-radius: 22px;
    background:
        radial-gradient(circle at 88% 10%, rgba(131, 86, 255, .25), transparent 34%),
        radial-gradient(circle at 70% 90%, rgba(68, 105, 255, .18), transparent 38%),
        linear-gradient(135deg, #111a34, #151737 60%, #211644);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
}

.whs-client-welcome::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -55px;
    top: -80px;
    border: 1px solid rgba(172, 130, 255, .18);
    border-radius: 50%;
}

.whs-client-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #9ca9ff;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: .16em;
}

.whs-client-welcome h1,
.whs-client-section-head h2,
.whs-client-kb h2 {
    margin: 0;
    color: #f6f7ff;
    font-weight: 800;
    letter-spacing: -.5px;
}

.whs-client-welcome h1 {
    margin-bottom: 8px;
    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.1;
}

.whs-client-welcome p,
.whs-client-kb p {
    margin: 0;
    color: var(--whs-client-muted);
    font-size: 14px;
    line-height: 1.6;
}

.whs-client-profile-btn,
.whs-client-panel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 11px;
    color: #fff !important;
    background: rgba(255, 255, 255, .07);
    font-weight: 700;
}

.whs-client-profile-btn {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 11px 16px;
    font-size: 13px;
}

.whs-client-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}

.whs-client-stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    min-height: 94px;
    padding: 18px;
    border: 1px solid var(--whs-client-border);
    border-radius: 17px;
    color: #eef2ff !important;
    background: linear-gradient(145deg, #11192e, #0e1528);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.whs-client-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(138, 123, 255, .45);
    background: linear-gradient(145deg, #141e37, #111931);
}

.whs-client-stat-icon,
.whs-client-action-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    color: #a7b0ff;
    background: linear-gradient(135deg, rgba(101, 115, 255, .22), rgba(165, 95, 255, .17));
}

.whs-client-stat-icon {
    width: 42px;
    height: 42px;
    font-size: 17px;
}

.whs-client-stat-content {
    display: block;
    min-width: 0;
}

.whs-client-stat-content strong {
    display: block;
    margin-bottom: 3px;
    color: #fff;
    font-size: 25px;
    line-height: 1;
}

.whs-client-stat-content small {
    display: block;
    color: var(--whs-client-muted);
    font-size: 11px;
    line-height: 1.35;
}

.whs-client-stat-arrow {
    margin-left: auto;
    color: #697696;
    font-size: 10px;
}

.whs-client-section {
    margin-top: 30px;
}

.whs-client-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.whs-client-section-head h2,
.whs-client-kb h2 {
    font-size: 25px;
    line-height: 1.2;
}

.whs-client-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.whs-client-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
    min-height: 94px;
    padding: 18px 20px;
    border: 1px solid var(--whs-client-border);
    border-radius: 17px;
    color: #eef2ff !important;
    background: var(--whs-client-surface);
    transition: transform .18s ease, border-color .18s ease;
}

.whs-client-action:hover {
    transform: translateY(-2px);
    border-color: rgba(138, 123, 255, .45);
}

.whs-client-action-icon {
    width: 44px;
    height: 44px;
    font-size: 17px;
}

.whs-client-action > span:nth-child(2) {
    min-width: 0;
}

.whs-client-action strong,
.whs-client-action small {
    display: block;
}

.whs-client-action strong {
    margin-bottom: 4px;
    color: #f7f8ff;
    font-size: 14px;
}

.whs-client-action small {
    color: var(--whs-client-muted);
    font-size: 11px;
    line-height: 1.45;
}

.whs-client-action > .fa-arrow-right {
    color: #7f8bad;
    font-size: 11px;
}

.whs-client-kb {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr);
    align-items: center;
    gap: 28px;
    margin-top: 30px;
    padding: 24px 26px;
    border: 1px solid var(--whs-client-border);
    border-radius: 20px;
    background: linear-gradient(135deg, #11182d, #151530);
}

.whs-client-kb h2 {
    margin-bottom: 7px;
}

.whs-client-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    min-height: 50px;
    overflow: hidden;
    border: 1px solid rgba(158, 169, 220, .2);
    border-radius: 12px;
    background: #0a1020;
}

.whs-client-search > i {
    margin-left: 16px;
    color: #818dad;
}

.whs-client-search input {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 13px;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: 14px;
}

.whs-client-search input::placeholder {
    color: #77849e;
}

.whs-client-search button {
    height: 38px;
    margin-right: 6px;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(135deg, #6873ff, #9a63ff);
    font-size: 12px;
    font-weight: 800;
}

.whs-client-addon {
    margin-top: 20px;
}

.whs-client-account-section {
    margin-top: 34px;
}

.whs-client-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.whs-client-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--whs-client-border);
    border-radius: 18px;
    background: var(--whs-client-surface);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

/* Make the service panel the visual focus and present its children as cards. */
.whs-client-panel[menuItemName="Active Products/Services"] {
    grid-column: 1 / -1;
    background:
        radial-gradient(circle at 90% 0%, rgba(122, 91, 255, .12), transparent 28%),
        var(--whs-client-surface);
}

.whs-client-panel[menuItemName="Active Products/Services"] .whs-client-panel-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 18px 18px;
}

.whs-client-panel[menuItemName="Active Products/Services"] .whs-client-panel-item {
    min-height: 92px;
    border: 1px solid rgba(145, 157, 210, .16);
    border-radius: 14px;
    background: linear-gradient(145deg, #151d35, #10172b);
}

.whs-client-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 62px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(145, 157, 210, .12);
}

.whs-client-panel-heading h3 {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
    margin: 0;
    color: #f4f6ff;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 800;
}

.whs-client-panel-heading h3 > i {
    color: #9da8ff;
}

.whs-client-panel-button {
    flex: 0 0 auto;
    padding: 7px 10px;
    font-size: 10px;
}

.whs-client-panel-body {
    padding: 17px 18px;
    color: var(--whs-client-muted);
}

.whs-client-panel-body,
.whs-client-panel-body p,
.whs-client-panel-body address {
    color: var(--whs-client-muted);
    font-size: 12px;
    line-height: 1.55;
}

.whs-client-panel-list {
    padding: 6px 0;
}

.whs-client-panel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    min-width: 0;
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid rgba(145, 157, 210, .1);
    color: #e9edff !important;
    background: transparent;
    transition: background .16s ease, transform .16s ease;
}

a.whs-client-panel-item:hover {
    background: rgba(130, 115, 255, .08);
}

.whs-client-panel-item:last-child {
    border-bottom: 0;
}

.whs-client-panel-item-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
}

.whs-client-panel-item-main > i {
    flex: 0 0 auto;
    color: #8e9aff;
}

.whs-client-panel-item-main > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.whs-client-panel-item-end {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    color: #7e89a6;
    font-size: 9px;
}

.whs-client-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 4px 8px;
    border: 1px solid rgba(92, 218, 154, .22);
    border-radius: 999px;
    color: #75e6aa;
    background: rgba(53, 174, 109, .1);
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
}

.whs-client-panel-footer {
    padding: 12px 18px;
    border-top: 1px solid rgba(145, 157, 210, .1);
    color: var(--whs-client-muted);
    background: rgba(6, 11, 24, .16);
    font-size: 11px;
}

.whs-client-panel-footer:empty {
    display: none;
}

.whs-client-panel-footer a,
.whs-client-panel-body a {
    color: #a7b0ff !important;
}

/* Tame legacy markup that WHMCS may inject inside panel body/footer HTML. */
.whs-client-dashboard .btn-default,
.whs-client-dashboard .btn-success,
.whs-client-dashboard .btn-primary {
    border-color: rgba(255, 255, 255, .12);
    border-radius: 9px;
    color: #fff;
}

.whs-client-dashboard .list-group,
.whs-client-dashboard .panel,
.whs-client-dashboard .panel-heading,
.whs-client-dashboard .panel-footer {
    box-shadow: none;
}

@media (max-width: 991px) {
    .whs-client-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .whs-client-kb {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    body:has(.whs-client-dashboard) #main-body {
        padding-top: 18px;
        padding-bottom: 35px;
    }

    .whs-client-welcome {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px 20px;
        border-radius: 18px;
    }

    .whs-client-profile-btn {
        width: 100%;
    }

    .whs-client-stats {
        gap: 10px;
    }

    .whs-client-stat-card {
        min-height: 86px;
        padding: 14px;
    }

    .whs-client-stat-icon {
        width: 36px;
        height: 36px;
    }

    .whs-client-stat-content strong {
        font-size: 21px;
    }

    .whs-client-actions,
    .whs-client-panel-grid,
    .whs-client-panel[menuItemName="Active Products/Services"] .whs-client-panel-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .whs-client-action {
        min-height: 86px;
        padding: 15px;
    }

    .whs-client-kb {
        gap: 18px;
        padding: 20px;
    }

    .whs-client-search {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .whs-client-search button {
        grid-column: 1 / -1;
        width: calc(100% - 12px);
        height: 40px;
        margin: 0 6px 6px;
    }

    .whs-client-panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .whs-client-panel-button {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .whs-client-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .whs-client-stat-card {
        min-height: 76px;
    }

    .whs-client-section-head h2,
    .whs-client-kb h2 {
        font-size: 22px;
    }
}



/* Homepage buttons v1.3: three equal buttons in their existing hero row. */
.whs-hero .whs-hero-buttons--reviews {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
    gap:10px;
}

.whs-hero .whs-hero-buttons--reviews > .whs-btn {
    width:100%;
    min-width:0;
    max-width:none;
    min-height:52px;
    padding:12px 10px;
    gap:8px;
    font-size:14px;
    line-height:1.25;
    white-space:normal;
}

.whs-hero-buttons--reviews .whs-hero-button-label {
    min-width:0;
}

.whs-hero-buttons--reviews .whs-btn > i {
    flex-shrink:0;
}

@media (max-width:767px) {
    .whs-hero .whs-hero-buttons--reviews {
        gap:8px;
    }

    .whs-hero .whs-hero-buttons--reviews > .whs-btn {
        min-height:56px;
        padding:10px 6px;
        gap:5px;
        font-size:13px;
    }
}