/* ========================================================================== 
   WizHosting Client Area — visual layer only
   WHMCS templates, names, data attributes and JavaScript selectors are intact.
   Compatible target: WHMCS 8.1.3 / PHP 7.4.33
   ========================================================================== */

/* Local Inter distribution — no CDN or third-party request at runtime. */
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/* 23. Dashboard metrics tiles (v1.4.7)
   Keep the counters visually prominent while bringing their surfaces into the
   same premium navy system used by the rest of the client area. */
.dashboard-tile {
    --tile-accent: #58b3ff;
    position: relative;
    min-height: 146px;
    margin-bottom: 18px;
    padding: 0 !important;
    overflow: hidden;
    color: #f4f7fc !important;
    background: linear-gradient(145deg, #17243a 0%, #101a2c 100%) !important;
    border: 1px solid #2a3a54 !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.dashboard-tile::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--tile-accent);
}
.clientareahome a:hover .dashboard-tile,
.dashboard-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .26) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .28);
}
.dashboard-tile.detail .content {
    position: relative;
    z-index: 1;
    padding: 25px 27px !important;
}
#main-content .dashboard-tile .content h1 {
    margin: 0 0 9px !important;
    padding: 0 !important;
    color: #f7f9ff !important;
    font-size: 42px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: -.035em;
}
.dashboard-tile .content p {
    margin: 0 !important;
    padding: 0 !important;
    color: #c2cedf !important;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.4;
}
.dashboard-tile.detail .icon {
    position: absolute !important;
    right: 22px !important;
    bottom: 19px !important;
    z-index: 0;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    width: 60px !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 18px;
}
.dashboard-tile.detail .icon i {
    color: var(--tile-accent) !important;
    font-size: 31px !important;
    line-height: 1;
    opacity: .92;
}
.dashboard-tile.tile-red { --tile-accent: #ff715f; }
.dashboard-tile.tile-turquoise { --tile-accent: #36d7ad; }
.dashboard-tile.tile-blue { --tile-accent: #58b3ff; }
.dashboard-tile.tile-purple { --tile-accent: #b487ff; }
.dashboard-tile.tile-red .icon { background: rgba(255, 113, 95, .13); }
.dashboard-tile.tile-turquoise .icon { background: rgba(54, 215, 173, .13); }
.dashboard-tile.tile-blue .icon { background: rgba(88, 179, 255, .13); }
.dashboard-tile.tile-purple .icon { background: rgba(180, 135, 255, .13); }
@media (max-width: 767px) {
    .dashboard-tile { min-height: 132px; }
    .dashboard-tile.detail .content { padding: 22px !important; }
    #main-content .dashboard-tile .content h1 { font-size: 38px !important; }
    .dashboard-tile.detail .icon { right: 18px !important; bottom: 16px !important; }
}

/* 24. Consistent client-home panel actions (v1.4.8) */
.client-home-panels .panel-heading .panel-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 36px;
    margin: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.client-home-panels .panel-heading .panel-title > .pull-right {
    float: none !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    padding-left: 14px;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.client-home-panels .panel-heading .panel-title > .pull-right .btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    min-width: 112px;
    height: 36px;
    padding: 0 13px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

/* 25. Page header grid alignment (v1.4.9)
   The legacy theme adds horizontal padding only to .h1, which makes the title
   miss the breadcrumb and content grid by 12px. */
.main-content-wrapper #main-content > .row > .col-md-12 > h1.h1 {
    float: none;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
}

/* 26. Product add-ons catalogue contrast (v1.4.10)
   WHMCS order forms can emit either product, panel or generic div wrappers.
   Keep all of those presentation wrappers in the dark client-area palette. */
section.cart .addon-products,
section.cart .addon-products > div,
section.cart .addon-products .product,
section.cart .addon-products .panel,
section.cart .addon-products .panel-body,
section.cart .addon-products .well {
    color: #c7d3e5 !important;
    background: linear-gradient(145deg, #17243a 0%, #101a2c 100%) !important;
    border-color: #2a3a54 !important;
}
section.cart .addon-products .product,
section.cart .addon-products .panel,
section.cart .addon-products .well {
    overflow: hidden;
    border: 1px solid #2a3a54 !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}
section.cart .addon-products h1,
section.cart .addon-products h2,
section.cart .addon-products h3,
section.cart .addon-products h4,
section.cart .addon-products strong,
section.cart .addon-products .title,
section.cart .addon-products .product-name {
    color: #f4f7fc !important;
}
section.cart .addon-products p,
section.cart .addon-products .description,
section.cart .addon-products small {
    color: #b9c8dc !important;
}
section.cart .addon-products span.price,
section.cart .addon-products .price {
    color: #8fd4ff !important;
    font-style: normal;
    font-weight: 700;
}
section.cart .addon-products .btn,
section.cart .addon-products input[type="submit"],
section.cart .addon-products button[type="submit"] {
    color: #fff !important;
    background: #ff6a17 !important;
    border-color: #ff6a17 !important;
}
section.cart .addon-products .btn:hover,
section.cart .addon-products .btn:focus,
section.cart .addon-products input[type="submit"]:hover,
section.cart .addon-products input[type="submit"]:focus,
section.cart .addon-products button[type="submit"]:hover,
section.cart .addon-products button[type="submit"]:focus {
    color: #fff !important;
    background: #ff7b2b !important;
    border-color: #ff7b2b !important;
}

/* 28. Unified editable-field surfaces (v1.4.12)
   Several legacy forms use plain HTML inputs without .form-control, so they
   bypass the dark field treatment used by ticket editors. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
select,
textarea {
    color: #e8eef8 !important;
    background-color: #0c1525 !important;
    border: 1px solid #2a3a54 !important;
    border-radius: 9px;
    box-shadow: none !important;
    -webkit-text-fill-color: #e8eef8;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
    color: #8191aa !important;
    opacity: 1;
    -webkit-text-fill-color: #8191aa;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus {
    color: #fff !important;
    background-color: #101c30 !important;
    border-color: #58b3ff !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(88, 179, 255, .14) !important;
    -webkit-text-fill-color: #fff;
}
input[readonly],
input[disabled],
select[readonly],
select[disabled],
textarea[readonly],
textarea[disabled] {
    color: #aebdd1 !important;
    background-color: #101a2c !important;
    border-color: #243550 !important;
    opacity: 1;
    -webkit-text-fill-color: #aebdd1;
}

/* 29. Branded page preloader (v1.4.13) */
.preloader-wrapper {
    background: radial-gradient(circle at 50% 50%, #17243a 0%, #0b1321 42%, #070c15 100%) !important;
}
.preloader-wrapper .preloader {
    width: 46px !important;
    height: 14px !important;
}
.preloader-wrapper .dot-pulse,
.preloader-wrapper .dot-pulse::before,
.preloader-wrapper .dot-pulse::after {
    background-color: #ff6a17 !important;
    color: #ff6a17 !important;
}
.preloader-wrapper .dot-pulse {
    box-shadow: 9999px 0 0 -5px #ff6a17 !important;
    animation-name: wiz-dot-pulse !important;
}
.preloader-wrapper .dot-pulse::before {
    box-shadow: 9984px 0 0 -5px #ff6a17 !important;
    animation-name: wiz-dot-pulse-before !important;
}
.preloader-wrapper .dot-pulse::after {
    box-shadow: 10014px 0 0 -5px #ff6a17 !important;
    animation-name: wiz-dot-pulse-after !important;
}
@keyframes wiz-dot-pulse-before {
    0%, 60%, 100% { box-shadow: 9984px 0 0 -5px #ff6a17; }
    30% { box-shadow: 9984px 0 0 2px #ff6a17; }
}
@keyframes wiz-dot-pulse {
    0%, 60%, 100% { box-shadow: 9999px 0 0 -5px #ff6a17; }
    30% { box-shadow: 9999px 0 0 2px #ff6a17; }
}
@keyframes wiz-dot-pulse-after {
    0%, 60%, 100% { box-shadow: 10014px 0 0 -5px #ff6a17; }
    30% { box-shadow: 10014px 0 0 2px #ff6a17; }
}
@media (max-width: 480px) {
    .client-home-panels .panel-heading .panel-title {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    .client-home-panels .panel-heading .panel-title > .pull-right {
        padding-left: 8px;
    }
    .client-home-panels .panel-heading .panel-title > .pull-right .btn {
        min-width: 0;
        padding: 0 10px;
    }
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-Italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-Medium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

/* 1. Variables and palette ------------------------------------------------ */
:root {
    --wiz-bg: #080d18;
    --wiz-surface: #111a2b;
    --wiz-surface-raised: #162238;
    --wiz-surface-soft: #1b2940;
    --wiz-border: rgba(162, 183, 218, .16);
    --wiz-border-strong: rgba(255, 111, 25, .38);
    --wiz-text: #eef4ff;
    --wiz-muted: #9eacc2;
    --wiz-faint: #697a94;
    --wiz-orange: #ff6a17;
    --wiz-orange-hover: #ff823a;
    --wiz-orange-dark: #d94c08;
    --wiz-blue: #4ca7ff;
    --wiz-violet: #9470ff;
    --wiz-green: #3bce9c;
    --wiz-danger: #ff6b6b;
    --wiz-radius: 14px;
    --wiz-shadow: 0 14px 32px rgba(0, 0, 0, .22);
    --wiz-transition: 180ms ease;
}

/* 2. General shell -------------------------------------------------------- */
html, body { background: var(--wiz-bg); }
body {
    color: var(--wiz-text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(900px 420px at 95% -10%, rgba(85, 86, 230, .18), transparent 62%),
        radial-gradient(700px 360px at 36% 0%, rgba(255, 106, 23, .09), transparent 62%),
        var(--wiz-bg);
}
body a { color: var(--wiz-blue); transition: color var(--wiz-transition), background var(--wiz-transition), border-color var(--wiz-transition), box-shadow var(--wiz-transition); }
body a:hover, body a:focus { color: #8ec7ff; text-decoration: none; }
#container { min-height: 100vh; background: transparent; }
.flex-wrap { min-height: calc(100vh - 72px); }
.main-content-wrapper { background: transparent; }
.main-content-wrapper #main-content { padding: 28px 32px 44px; }
.main-content-wrapper #main-content .h1, h1.h1 { color: var(--wiz-text); font-weight: 700; letter-spacing: -.03em; font-size: 30px; margin: 6px 0 24px; }
.breadcrumb { background: transparent; padding: 0; margin: 0 0 8px; font-size: 13px; }
.breadcrumb > li + li:before { color: var(--wiz-faint); }
.breadcrumb > .active { color: var(--wiz-muted); }
.text-muted, .help-block, .text-grey, .text-gray { color: var(--wiz-muted) !important; }
hr { border-color: var(--wiz-border); }

/* 3. Header --------------------------------------------------------------- */
#header {
    height: 72px;
    background: rgba(11, 19, 33, .92);
    border-bottom: 1px solid var(--wiz-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
#header .brand { width: 248px; background: #0b1321; border-right: 1px solid var(--wiz-border); }
#header .logo { display: flex; height: 72px; align-items: center; padding: 0 24px; }
#header .logo img { max-height: 42px; max-width: 192px; width: auto; }
#header .logotext { color: var(--wiz-text); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
#header .toggle-navigation.toggle-left { left: 248px; }
#header .btn-default, #header .toggle-navigation button { background: transparent; border: 0; color: var(--wiz-muted); height: 72px; }
#header .toggle-navigation button:hover, #header .toggle-navigation button:focus,
#header .btn-default:hover, #header .btn-default:focus, #header li.open .btn-default { color: var(--wiz-orange); background: rgba(255, 106, 23, .09); }
#header .user-nav ul li { border-left: 1px solid var(--wiz-border); }
#header .messages .badge, #header .badge { background: var(--wiz-orange); color: #fff; box-shadow: 0 0 0 3px #0b1321; }
#header .user-nav ul li.dropdown.messages .dropdown-menu,
#header .user-nav ul li.dropdown.settings .dropdown-menu { background: var(--wiz-surface-raised); border: 1px solid var(--wiz-border); border-radius: 12px; box-shadow: var(--wiz-shadow); }
#header li.dropdown ul.dropdown-menu.alert > li div.header, #header .dropdown-menu > li > a { color: var(--wiz-text); }
#header .user-nav ul li.dropdown.messages .dropdown-menu > li > .message-content { color: var(--wiz-muted); border-color: var(--wiz-border); }

/* 4. Sidebar -------------------------------------------------------------- */
.sidebar-left {
    width: 248px;
    background: #0b1321;
    border-right: 1px solid var(--wiz-border);
    box-shadow: none;
}
.sidebar-left + .main-content-wrapper {
    margin-left: 0;
    min-width: 0;
    width: auto;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.sidebar-left .nav { padding: 16px 12px; }
.sidebar-left .nav-pills > li { margin: 3px 0; }
.sidebar-left .nav-pills > li > a {
    padding: 12px 14px;
    color: var(--wiz-muted);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}
.sidebar-left .nav i { width: 22px; color: var(--wiz-faint); text-align: center; }
.sidebar-left .nav > li > a:hover, .sidebar-left .nav > li > a:focus { background: rgba(255, 255, 255, .045); color: var(--wiz-text); }
.sidebar-left .nav-pills > li.active > a, .sidebar-left .nav-pills > li.active > a:hover, .sidebar-left .nav-pills > li.active > a:focus,
.sidebar-left .nav .open > a, .sidebar-left .nav .open > a:hover, .sidebar-left .nav .open > a:focus {
    color: #fff; background: linear-gradient(90deg, rgba(255, 106, 23, .2), rgba(255, 106, 23, .07)); box-shadow: inset 3px 0 0 var(--wiz-orange);
}
.sidebar-left .active > a i, .sidebar-left .open > a i { color: var(--wiz-orange); }
.sidebar-left .nav .nav-sub { background: rgba(255, 255, 255, .025); border-radius: 0 0 10px 10px; margin: -2px 0 6px; padding: 5px 0; }
.sidebar-left .nav .nav-sub li > a { color: var(--wiz-faint); padding: 9px 16px 9px 46px; }
.sidebar-left .nav .nav-sub li > a:hover, .sidebar-left .nav .nav-sub li.active > a { color: var(--wiz-orange); background: transparent; }
.sidebar-mini .sidebar-left { width: 66px; }
.sidebar-mini .sidebar-left + .main-content-wrapper { margin-left: 0; }

/* 5. Cards, panels and dashboard ----------------------------------------- */
.panel, .well, .card, .twofa-module {
    background: linear-gradient(145deg, rgba(23, 35, 57, .98), rgba(14, 23, 39, .98));
    border: 1px solid var(--wiz-border);
    border-radius: var(--wiz-radius);
    box-shadow: var(--wiz-shadow);
    color: var(--wiz-text);
}
.panel { margin-bottom: 20px; overflow: hidden; }
.panel-default > .panel-heading, .panel-primary > .panel-heading, .panel-success > .panel-heading,
.panel-info > .panel-heading, .panel-warning > .panel-heading, .panel-danger > .panel-heading {
    background: transparent; border-bottom: 1px solid var(--wiz-border); color: var(--wiz-text); padding: 15px 18px;
}
.panel-heading .panel-title, .panel-heading h3 { color: var(--wiz-text); font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.panel-heading .panel-title > i { color: var(--wiz-orange); }
.panel-body { color: var(--wiz-muted); padding: 20px; }
.panel-footer { background: rgba(255, 255, 255, .025); border-top: 1px solid var(--wiz-border); color: var(--wiz-muted); padding: 14px 18px; }
.client-home-panels .panel { min-height: 0; }
.client-home-panels .panel:hover { transform: translateY(-2px); border-color: rgba(255, 106, 23, .4); }
.client-home-panels .panel-heading { padding: 16px 18px; }
.client-home-panels .list-group-item { background: transparent; border-color: var(--wiz-border); color: var(--wiz-muted); padding: 13px 18px; }
.client-home-panels a.list-group-item:hover, .client-home-panels a.list-group-item:focus { background: rgba(255, 106, 23, .07); color: var(--wiz-text); }
.client-home-panels .list-group-item.active { background: rgba(255, 106, 23, .14); border-color: var(--wiz-border-strong); color: var(--wiz-text); }
.panel-accent-primary { border-top: 2px solid var(--wiz-orange); }
.panel-accent-success { border-top: 2px solid var(--wiz-green); }
.panel-accent-info { border-top: 2px solid var(--wiz-blue); }
.panel-accent-warning { border-top: 2px solid #ffcc66; }
.panel-accent-danger { border-top: 2px solid var(--wiz-danger); }
.panel-accent-purple { border-top: 2px solid var(--wiz-violet); }
.panel-accent-blue { border-top: 2px solid var(--wiz-blue); }

/* 6. Forms and buttons ---------------------------------------------------- */
label, .control-label { color: #d7e2f3; font-weight: 600; }
.form-control, select.form-control, textarea.form-control, .input-group-addon {
    background: #0c1525; border: 1px solid var(--wiz-border); color: var(--wiz-text); border-radius: 9px; box-shadow: none;
}
.form-control { height: 42px; padding: 10px 13px; }
textarea.form-control { height: auto; }
.form-control::placeholder { color: #71819a; }
.form-control:focus { background: #0d1829; border-color: var(--wiz-orange); box-shadow: 0 0 0 3px rgba(255, 106, 23, .14); color: #fff; }
select.form-control option { background: #101a2c; color: var(--wiz-text); }
.input-group-addon { color: var(--wiz-muted); }
.has-error .form-control { border-color: var(--wiz-danger); }
.has-success .form-control { border-color: var(--wiz-green); }
.btn { border-radius: 9px; font-weight: 700; padding: 9px 15px; border-width: 1px; transition: transform var(--wiz-transition), background var(--wiz-transition), border-color var(--wiz-transition), box-shadow var(--wiz-transition); }
.btn:hover, .btn:focus { transform: translateY(-1px); }
.btn-primary, .btn-success, .btn-info, .btn-warning { color: #fff !important; background: var(--wiz-orange); border-color: var(--wiz-orange); box-shadow: 0 7px 16px rgba(255, 106, 23, .2); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-success:hover, .btn-success:focus, .btn-info:hover, .btn-info:focus, .btn-warning:hover, .btn-warning:focus { color: #fff !important; background: var(--wiz-orange-hover); border-color: var(--wiz-orange-hover); }
.btn-default { color: #dce6f6; background: rgba(255,255,255,.055); border-color: var(--wiz-border); }
.btn-default:hover, .btn-default:focus { color: #fff; background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.24); }
.btn-danger { color: #fff; background: #d9474b; border-color: #d9474b; }
.btn-link { color: var(--wiz-blue); }
.btn-3d { box-shadow: 0 4px 0 var(--wiz-orange-dark), 0 9px 18px rgba(255,106,23,.18); margin-bottom: 4px; }
.btn-3d:active { box-shadow: 0 1px 0 var(--wiz-orange-dark); transform: translateY(2px); }

/* 7. Tables, lists and status -------------------------------------------- */
.table, .table > tbody > tr > td, .table > thead > tr > th { color: var(--wiz-muted); border-color: var(--wiz-border); }
.table > thead > tr > th { color: #d7e2f3; background: rgba(255,255,255,.035); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .045em; border-bottom-width: 1px; }
.table > tbody > tr:hover { background: rgba(255,255,255,.03); }
.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,.025); }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { background: #0c1525; border: 1px solid var(--wiz-border); border-radius: 8px; color: var(--wiz-text); }
.list-group-item { background: var(--wiz-surface); border-color: var(--wiz-border); color: var(--wiz-muted); }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { background: rgba(255,106,23,.13); border-color: var(--wiz-border-strong); color: #fff; }
.badge { background: var(--wiz-violet); color: #fff; border-radius: 999px; font-weight: 700; }
.label, .status { border-radius: 999px; padding: 4px 8px; font-weight: 700; }
.label-success, .label-active, .label-paid { background: rgba(59,206,156,.16); color: #69e8ba; }
.label-warning, .label-pending { background: rgba(255,190,69,.16); color: #ffd37d; }
.label-danger, .label-overdue { background: rgba(255,107,107,.16); color: #ff9696; }
.label-info { background: rgba(76,167,255,.16); color: #8ec7ff; }

/* 8. Alerts, modals and overlays ----------------------------------------- */
.alert { border-radius: 10px; border-width: 1px; box-shadow: none; }
.alert-info { color: #b8dcff; background: rgba(76,167,255,.11); border-color: rgba(76,167,255,.24); }
.alert-success { color: #a0f0cf; background: rgba(59,206,156,.11); border-color: rgba(59,206,156,.25); }
.alert-warning { color: #ffe0a2; background: rgba(255,190,69,.11); border-color: rgba(255,190,69,.25); }
.alert-danger { color: #ffb2b2; background: rgba(255,107,107,.11); border-color: rgba(255,107,107,.25); }
.modal-content { color: var(--wiz-muted); background: var(--wiz-surface-raised); border: 1px solid var(--wiz-border); border-radius: var(--wiz-radius); box-shadow: 0 24px 64px rgba(0,0,0,.48); }
.modal-header, .modal-footer { border-color: var(--wiz-border); }
.modal-title { color: var(--wiz-text); }
.close { color: var(--wiz-muted); opacity: 1; text-shadow: none; }
.close:hover { color: #fff; }
.popover, .tooltip-inner { background: var(--wiz-surface-raised); border-color: var(--wiz-border); color: var(--wiz-text); }

/* 9. Specific WHMCS surfaces --------------------------------------------- */
.panel-login { max-width: 520px; margin: 8vh auto 0; border-top: 3px solid var(--wiz-orange); }
.login .main-content-wrapper #main-content, .logintwofa .main-content-wrapper #main-content,
.password-reset-container .main-content-wrapper #main-content { max-width: 720px; margin: 0 auto; }
.login .main-content-wrapper, .logintwofa .main-content-wrapper { min-height: calc(100vh - 72px); display: flex; align-items: center; }
.product-status, .domain-status, .ticket-reply, .ticket-reply-staff, .ticket-reply-client { border-radius: 10px; border-color: var(--wiz-border) !important; }
.ticket-reply-staff { background: rgba(76,167,255,.07) !important; }
.ticket-reply-client { background: rgba(255,106,23,.06) !important; }
.ticket-reply .date, .ticket-reply .user { color: var(--wiz-muted); }
.nav-tabs { border-bottom-color: var(--wiz-border); }
.nav-tabs > li > a { color: var(--wiz-muted); border: 0; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; }
.nav-tabs > li > a:hover { color: var(--wiz-text); background: rgba(255,255,255,.035); border-bottom-color: rgba(255,255,255,.12); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--wiz-orange); background: transparent; border: 0; border-bottom: 2px solid var(--wiz-orange); }
.nav-pills > li > a { border-radius: 8px; }
.invoice-summary, .invoice-summary .panel, #invoiceContent { color: var(--wiz-muted); }
.invoice-summary .total, .total-row { color: var(--wiz-text); }
.domain-pricing, .domain-pricing .panel, .order-summary, #orderSummary { background-color: transparent; }
.order-summary .panel, #orderSummary .panel { border-color: var(--wiz-border); }
.twofa-module { box-shadow: none; }
.twofa-module.active { border-color: var(--wiz-orange); }

/* 10. Sidebar layouts and footer ----------------------------------------- */
.whmcs-sidebar .panel { box-shadow: none; }
.whmcs-sidebar .panel-heading { padding: 13px 15px; }
.whmcs-sidebar .list-group-item { background: transparent; padding: 12px 15px; }
.whmcs-sidebar .list-group-item:hover { background: rgba(255,106,23,.08); color: var(--wiz-text); }
#footer { margin: 0; border-radius: 0; border-width: 1px 0 0; box-shadow: none; background: #0a111e; }
#footer .panel-body { padding: 18px 32px; color: var(--wiz-faint); }
#footer a { color: var(--wiz-muted); }

/* 11. Responsive ---------------------------------------------------------- */
@media (max-width: 991px) {
    #header .brand { width: 216px; }
    #header .toggle-navigation.toggle-left { left: 216px; }
    .sidebar-left + .main-content-wrapper { margin-left: 0; }
    .main-content-wrapper #main-content { padding: 24px 20px 36px; }
    .sidebar-left { width: 248px; }
}
@media (max-width: 767px) {
    #header, #header .logo, #header .btn-default, #header .toggle-navigation button { height: 62px; }
    #header .brand { width: 182px; }
    #header .logo { padding: 0 14px; }
    #header .logo img { max-height: 34px; max-width: 154px; }
    #header .toggle-navigation.toggle-left { left: 182px; }
    .main-content-wrapper #main-content { padding: 20px 14px 30px; }
    .main-content-wrapper #main-content .h1, h1.h1 { font-size: 25px; }
    .panel-body { padding: 16px; }
    .panel-heading { padding: 13px 15px !important; }
    .panel-footer { padding: 13px 15px; }
    .table-responsive { border-color: var(--wiz-border); border-radius: 10px; }
    #footer .panel-body { padding: 16px; }
}
@media (max-width: 420px) {
    #header .brand { width: 145px; }
    #header .logo img { max-width: 120px; }
    #header .toggle-navigation.toggle-left { left: 145px; }
    #header .user-nav ul li { border-left: 0; }
    .btn.res-100 { width: 100%; margin: 4px 0; }
}

/* 12. Compatibility: retain usability for third-party WHMCS modules ----- */
.dataTables_wrapper, .dataTables_info, .dataTables_paginate, .pagination > li > a, .pagination > li > span { color: var(--wiz-muted); }
.pagination > li > a, .pagination > li > span { background: var(--wiz-surface); border-color: var(--wiz-border); }
.pagination > li.active > a, .pagination > li.active > span { background: var(--wiz-orange); border-color: var(--wiz-orange); color: #fff; }
.dropdown-menu { background: var(--wiz-surface-raised); border-color: var(--wiz-border); box-shadow: var(--wiz-shadow); }
.dropdown-menu > li > a { color: var(--wiz-muted); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: rgba(255,106,23,.1); color: #fff; }

/* 13. Readability and spacious desktop refinement (v1.1) ---------------- */
/* Override the optional legacy max-width injected by the original theme. */
.main-content-wrapper #main-content {
    display: block;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 32px 40px 52px;
}

/* A calmer reading scale for a client portal: less condensed, more contrast. */
body {
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body, .panel-body, .list-group-item, .table, .form-control, .help-block,
.dataTables_wrapper, .dataTables_info, .dataTables_filter, .dataTables_length {
    color: #b9c6d9;
}
p, li, td, .form-control, .list-group-item { font-size: 15px; }
small, .small, .help-block, .breadcrumb, .table > thead > tr > th,
.panel-heading .panel-title, .panel-heading h3 { letter-spacing: .01em; }
.panel-heading .panel-title, .panel-heading h3 { font-size: 14px; }
.sidebar-left .nav-pills > li > a { font-size: 15px; padding: 13px 15px; }
.sidebar-left .nav .nav-sub li > a { font-size: 14px; padding-top: 10px; padding-bottom: 10px; }
.main-content-wrapper #main-content .h1, h1.h1 { font-size: 32px; margin-bottom: 28px; }
.breadcrumb { font-size: 14px; }

/* The original theme's more specific panel footer styles used a white surface.
   Reassert the dark system with matching specificity. */
.panel.panel-default > .panel-footer,
.panel.panel-primary > .panel-footer,
.panel.panel-success > .panel-footer,
.panel.panel-info > .panel-footer,
.panel.panel-warning > .panel-footer,
.panel.panel-danger > .panel-footer {
    background: rgba(255, 255, 255, .035);
    border-color: var(--wiz-border);
    color: var(--wiz-muted);
}
.panel.panel-solid-default > .panel-heading,
.panel.panel-solid-default > .panel-body,
.panel.panel-solid-default > .panel-footer {
    background: #0a111e;
    border-color: var(--wiz-border);
    color: var(--wiz-muted);
}

/* Give data-heavy client views more breathing room without changing columns. */
.table > tbody > tr > td { padding: 12px 10px; vertical-align: middle; }
.table > thead > tr > th { padding: 13px 10px; font-size: 12px; }
.whmcs-sidebar .list-group-item { font-size: 14px; padding: 13px 16px; }
.whmcs-sidebar .panel { margin-bottom: 22px; }
.client-home-panels .panel-body { min-height: 118px; }
.client-home-panels .panel-footer { min-height: 50px; display: flex; align-items: center; }

/* A login with linked accounts needs enough room for both columns. */
.panel-login { max-width: 760px; }
.panel-login .panel-body { padding: 26px 28px; }

@media (min-width: 1200px) {
    .main-content-wrapper #main-content { padding-left: 48px; padding-right: 48px; }
    .whmcs-sidebar { padding-left: 14px; }
    #internal-content { padding-right: 18px; }
}
@media (max-width: 991px) {
    .main-content-wrapper #main-content { padding: 26px 24px 40px; }
}
@media (max-width: 767px) {
    body { font-size: 14px; }
    p, li, td, .form-control, .list-group-item { font-size: 14px; }
    .main-content-wrapper #main-content { padding: 22px 16px 34px; }
    .main-content-wrapper #main-content .h1, h1.h1 { font-size: 27px; }
    .panel-login { max-width: 100%; }
    .panel-login .panel-body { padding: 20px 18px; }
}

/* 14. Contrast hardening -------------------------------------------------- */
/* These use intentional specificity to neutralise late legacy light styles. */
.panel.panel-default > .panel-footer,
.panel.panel-primary > .panel-footer,
.panel.panel-success > .panel-footer,
.panel.panel-info > .panel-footer,
.panel.panel-warning > .panel-footer,
.panel.panel-danger > .panel-footer {
    background-color: #152238 !important;
    border-top-color: var(--wiz-border) !important;
    color: #cbd7e8 !important;
}
.panel.panel-default > .panel-footer *,
.panel.panel-primary > .panel-footer *,
.panel.panel-success > .panel-footer *,
.panel.panel-info > .panel-footer *,
.panel.panel-warning > .panel-footer *,
.panel.panel-danger > .panel-footer * { color: inherit; }
.panel.panel-default > .panel-footer a,
.panel.panel-primary > .panel-footer a,
.panel.panel-success > .panel-footer a,
.panel.panel-info > .panel-footer a,
.panel.panel-warning > .panel-footer a,
.panel.panel-danger > .panel-footer a { color: #72bbff; }

#footer.panel.panel-solid-default,
#footer.panel.panel-solid-default > .panel-body {
    background: #0a111e !important;
    color: #9baac0 !important;
    border-color: var(--wiz-border) !important;
}
#footer .footer-text, #footer a { color: #9baac0 !important; }
#footer a:hover, #footer a:focus { color: #fff !important; }

/* Neutral actions, pagination and disabled states remain readable on dark. */
.btn-default, .btn-default:focus, .btn-default:hover, .btn-default:active,
.pagination > li > a, .pagination > li > span {
    background: #1b2940 !important;
    border-color: #344561 !important;
    color: #e4edf9 !important;
}
.pagination > li > a:hover, .pagination > li > span:hover,
.pagination > li > a:focus, .pagination > li > span:focus {
    background: #253754 !important;
    border-color: #58759e !important;
    color: #fff !important;
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
    background: var(--wiz-orange) !important;
    border-color: var(--wiz-orange) !important;
    color: #fff !important;
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn,
.list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus {
    opacity: 1;
    color: #8292aa !important;
    background: #111c2f !important;
    border-color: #2a3a54 !important;
}
.text-muted, .help-block, .text-grey, .text-gray { color: #aebdd1 !important; }
.table > tbody > tr > td { color: #b9c6d9; }
.table > thead > tr > th { color: #dbe6f5; }
.table a, .list-group-item a { color: #48afff; }
.table a:hover, .list-group-item a:hover { color: #9bd1ff; }

/* 15. Layout correction and clean header (v1.2) -------------------------- */
/* The original shell is already a flex layout. A second sidebar margin was
   reducing the client area by another 248px, so the content looked centred
   and compressed. Keep only the flex reservation made by the sidebar. */
@media (min-width: 661px) {
    .flex-wrap { width: 100%; }
    .sidebar-left + .main-content-wrapper,
    .sidebar-mini .sidebar-left + .main-content-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0;
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 0%;
        -ms-flex: 1 1 0%;
        flex: 1 1 0%;
    }
}

/* 22. Unified support ticket forms (v1.4.6) ------------------------------ */
/* WHMCS creates the Markdown wrapper at runtime, so this must target the
   generated .md-editor as well as the original ticket form. */
form[name="submitticket"] .panel-body {
    padding: 28px 30px 24px;
}
form[name="submitticket"] .form-group {
    margin-bottom: 16px;
}
form[name="submitticket"] .control-label {
    padding-top: 11px;
    color: #c9d5e6;
}
form[name="submitticket"] .form-control,
form[name="submitticket"] .form-control[disabled],
form[name="submitticket"] .form-control[readonly] {
    background: #0d1728 !important;
    color: #dce6f5 !important;
    -webkit-text-fill-color: #dce6f5 !important;
    border-color: #2a3a54 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
form[name="submitticket"] .form-control[disabled],
form[name="submitticket"] .form-control[readonly] {
    color: #9eacc2 !important;
    -webkit-text-fill-color: #9eacc2 !important;
}
form[name="submitticket"] .form-control:focus {
    background: #0f1b2e !important;
    color: #eef4ff !important;
    -webkit-text-fill-color: #eef4ff !important;
    border-color: #4ca7ff !important;
    box-shadow: 0 0 0 3px rgba(76, 167, 255, .11) !important;
}

.md-editor {
    width: 100%;
    overflow: hidden;
    background: #0d1728 !important;
    border: 1px solid #2a3a54 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.md-editor.active {
    border-color: rgba(76, 167, 255, .72) !important;
    box-shadow: 0 0 0 3px rgba(76, 167, 255, .10) !important;
}
.md-editor > .btn-toolbar,
.md-editor > .md-header {
    min-height: 52px;
    margin: 0;
    padding: 8px 10px !important;
    background: #162238 !important;
    border: 0 !important;
}
.md-editor .btn-toolbar .btn {
    min-height: 34px;
    color: #dbe6f5 !important;
    background: #1b2940 !important;
    border-color: #31435f !important;
    box-shadow: none !important;
}
.md-editor .btn-toolbar .btn:hover,
.md-editor .btn-toolbar .btn:focus,
.md-editor .btn-toolbar .btn.active {
    color: #fff !important;
    background: #263854 !important;
    border-color: #4ca7ff !important;
}
.md-editor .btn-toolbar .btn.btn-primary {
    color: #fff !important;
    background: #ff6a17 !important;
    border-color: #ff6a17 !important;
}
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
    min-height: 270px;
    padding: 18px !important;
    background: #0b1423 !important;
    color: #eef4ff !important;
    -webkit-text-fill-color: #eef4ff !important;
    caret-color: #ff8a3d;
    border-top: 1px solid #2a3a54 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #2a3a54 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 14px;
    line-height: 1.65;
    resize: vertical;
}
.md-editor > textarea.markdown-editor:focus {
    background: #0d182a !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    outline: 0;
}
.md-editor > .md-preview,
.md-editor > .md-preview * {
    color: #dce6f5 !important;
    -webkit-text-fill-color: #dce6f5 !important;
}
.md-editor .md-footer {
    min-height: 34px;
    padding: 8px 12px !important;
    background: #111c2f !important;
    color: #8797af !important;
}
.md-editor .md-controls .md-control,
.md-editor .md-controls .md-control:hover,
.markdown-editor-status {
    color: #9eacc2 !important;
}
.md-editor.md-fullscreen-mode {
    background: #080d18 !important;
}
.md-editor.md-fullscreen-mode .md-header {
    background: #0d1728 !important;
}
.md-editor.md-fullscreen-mode .md-input,
.md-editor.md-fullscreen-mode .md-preview {
    background: #0b1423 !important;
    color: #eef4ff !important;
    -webkit-text-fill-color: #eef4ff !important;
}
form[name="submitticket"] input[type="file"].form-control {
    height: auto;
    min-height: 42px;
    padding: 6px 8px;
    line-height: 28px;
}
form[name="submitticket"] input[type="file"]::file-selector-button {
    margin: -1px 10px -1px -1px;
    padding: 7px 12px;
    color: #e9f0fa;
    background: #1b2940;
    border: 1px solid #31435f;
    border-radius: 7px;
    cursor: pointer;
}
form[name="submitticket"] input[type="file"]::-webkit-file-upload-button {
    margin: -1px 10px -1px -1px;
    padding: 7px 12px;
    color: #e9f0fa;
    background: #1b2940;
    border: 1px solid #31435f;
    border-radius: 7px;
    cursor: pointer;
}

@media (min-width: 768px) {
    form[name="submitticket"] fieldset > .form-group > .control-label {
        width: 18%;
    }
    form[name="submitticket"] fieldset > .form-group > .control-label + .col-sm-6 {
        width: 78%;
    }
    form[name="submitticket"] label[for="inputAttachments"] + .col-sm-6 {
        width: 62% !important;
    }
    form[name="submitticket"] label[for="inputAttachments"] ~ .col-sm-3 {
        width: 16%;
        padding-left: 14px;
    }
    form[name="submitticket"] label[for="inputAttachments"] ~ .col-sm-3 .btn {
        width: 100%;
        min-height: 42px;
    }
}

@media (max-width: 767px) {
    form[name="submitticket"] .panel-body { padding: 20px 16px; }
    form[name="submitticket"] .control-label {
        padding-top: 0;
        margin-bottom: 8px;
        text-align: left;
    }
    form[name="submitticket"] label[for="inputAttachments"] ~ .col-sm-3 {
        margin-top: 10px;
    }
    .md-editor > textarea.markdown-editor,
    .md-editor > .md-preview { min-height: 220px; }
}

/* 21. Cart review and totals (v1.4.4) ----------------------------------- */
.panel-view-cart .view-cart-items-header,
.panel-view-cart .item,
.panel-view-cart .tax-promo-wrapper,
.panel-view-cart .recurring-wrapper {
    color: #b9c6d9 !important;
    background: transparent !important;
    border-color: #2a3a54 !important;
}
.panel-view-cart .view-cart-items-header {
    color: #eef4ff !important;
    background: rgba(255, 255, 255, .025) !important;
}
.panel-view-cart .item .item-title,
.panel-view-cart .item .item-price,
.panel-view-cart .item span.setup-price,
.panel-view-cart .item span:first-of-type {
    color: #dce6f5 !important;
}
.panel-view-cart .item .item-domain,
.panel-view-cart .item .item-description,
.panel-view-cart .item span.renewal-price {
    color: #9eacc2 !important;
}
.panel-view-cart .item .item-qty input {
    width: 80px;
    height: 42px;
    color: #eef4ff !important;
    background: #0c1525 !important;
    border-color: #2a3a54 !important;
    border-radius: 9px;
}
.panel-view-cart .item .item-qty .btn {
    width: auto !important;
    min-width: 108px;
    min-height: 42px;
    margin-top: 8px;
    white-space: nowrap;
    color: #dce6f5 !important;
    background: #1b2940 !important;
    border-color: #31435f !important;
    box-shadow: none !important;
}
.panel-view-cart .item .item-qty .btn:not([disabled]):not(.disabled) {
    color: #fff !important;
    background: #ff6a17 !important;
    border-color: #ff6a17 !important;
    box-shadow: 0 7px 16px rgba(255, 106, 23, .18) !important;
}
.panel-view-cart .item .item-qty .btn[disabled],
.panel-view-cart .item .item-qty .btn.disabled {
    color: #91a2ba !important;
    background: #17243a !important;
    border-color: #2a3a54 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed;
    transform: none !important;
}
.panel-view-cart .promotion-code,
.panel-view-cart .recurring,
.panel-view-cart .tax-1,
.panel-view-cart .tax-2 {
    color: #aebdd1 !important;
}
.panel-view-cart .sub-total,
.panel-view-cart .total {
    padding: 16px !important;
    color: #dce6f5 !important;
    background: #111c2f !important;
    border-color: #2a3a54 !important;
}
.panel-view-cart .sub-total {
    border-top: 1px solid #2a3a54 !important;
    border-bottom: 1px solid #2a3a54 !important;
}
.panel-view-cart .total {
    font-size: 16px !important;
    font-weight: 700;
    color: #fff !important;
    background: linear-gradient(90deg, rgba(255, 106, 23, .14), #162238 42%) !important;
    border-top: 1px solid rgba(255, 106, 23, .42) !important;
    border-bottom: 1px solid #2a3a54 !important;
}
.panel-view-cart .sub-total strong,
.panel-view-cart .sub-total span,
.panel-view-cart .total strong,
.panel-view-cart .total span {
    color: inherit !important;
}
.panel-view-cart .recurring-wrapper {
    font-style: italic;
    color: #8797af !important;
}
body.viewcart .panel-promo-code .panel-body,
body.viewcart [class*="promo-code"] .panel-body {
    background: transparent !important;
}
body.viewcart .panel-promo-code .btn,
body.viewcart [class*="promo-code"] .btn {
    color: #fff !important;
    background: #ff6a17 !important;
    border-color: #ff6a17 !important;
    box-shadow: 0 7px 16px rgba(255, 106, 23, .18);
}

@media (max-width: 767px) {
    .panel-view-cart .item .item-qty .btn {
        min-width: 0;
        width: 100% !important;
    }
}

/* Header controls are flat navigation targets, not generic dark buttons. */
#header .toggle-navigation .btn-default,
#header .user-nav .btn-default,
#header .toggle-navigation .btn-default:focus,
#header .toggle-navigation .btn-default:hover,
#header .toggle-navigation .btn-default:active,
#header .user-nav .btn-default:focus,
#header .user-nav .btn-default:hover,
#header .user-nav .btn-default:active,
#header .user-nav li.open .btn-default {
    height: 72px;
    margin: 0;
    padding: 0 17px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    transform: none !important;
}
#header .toggle-navigation .btn-default:hover,
#header .toggle-navigation .btn-default:focus,
#header .user-nav .btn-default:hover,
#header .user-nav .btn-default:focus,
#header .user-nav li.open .btn-default {
    background: rgba(8, 13, 24, .12) !important;
}
#header .toggle-navigation .btn-default i,
#header .user-nav .btn-default i { color: #fff !important; }
#header .user-nav .dropdown-toggle { border-radius: 0 !important; }

@media (max-width: 767px) {
    #header .toggle-navigation .btn-default,
    #header .user-nav .btn-default { height: 62px; padding-left: 13px; padding-right: 13px; }
}

/* 16. Inter typography system (v1.3) ------------------------------------- */
body, button, input, select, textarea,
.form-control, .btn, .panel, .table, .breadcrumb,
.sidebar-left, #header, #footer, .dropdown-menu, .popover, .tooltip {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.main-content-wrapper #main-content .h1,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-kerning: normal;
}
.main-content-wrapper #main-content .h1, h1.h1 { font-weight: 700; letter-spacing: -.035em; }
.panel-heading .panel-title, .panel-heading h3,
.table > thead > tr > th, .btn, label, .control-label { font-weight: 600; }
body, p, li, td, .form-control, .list-group-item { letter-spacing: -.006em; }
.sidebar-left .nav-pills > li > a { font-weight: 500; }
.sidebar-left .nav-pills > li.active > a,
.sidebar-left .nav-pills > li.open > a { font-weight: 600; }

/* 17. Full-width dashboard panel lists (v1.3.1) -------------------------- */
.client-home-panels .panel > .list-group {
    display: block !important;
    float: none !important;
    clear: both;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-color: #71819a #0e1829;
    scrollbar-width: thin;
}
.client-home-panels .panel > .list-group > .list-group-item {
    display: block;
    float: none;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}
.client-home-panels .panel > .list-group::-webkit-scrollbar { width: 9px; }
.client-home-panels .panel > .list-group::-webkit-scrollbar-track { background: #0e1829; }
.client-home-panels .panel > .list-group::-webkit-scrollbar-thumb {
    background: #71819a;
    border: 2px solid #0e1829;
    border-radius: 999px;
}
.client-home-panels .panel > .list-group::-webkit-scrollbar-thumb:hover { background: #98a8bf; }

/* 18. Unified premium header (v1.4.1) ----------------------------------- */
/* Control mixes an 80px shell with 23px offsets and 72px buttons. Reset the
   complete header geometry so controls cannot hang below the bar. */
#header {
    height: 80px;
    min-height: 80px;
    background-color: #0c1626 !important;
    background-image: linear-gradient(90deg, #0b1423 0%, #0d1727 100%) !important;
    border-bottom: 1px solid rgba(151, 170, 199, .15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .20);
}
#header .brand,
#header .logo,
#header .logo a,
#header .navbar-header {
    height: 80px;
    background: transparent !important;
    box-shadow: none !important;
}
#header .brand {
    border-right: 1px solid rgba(151, 170, 199, .12);
}
#header .logo {
    padding-top: 0;
    padding-bottom: 0;
}
#header .toggle-navigation.toggle-left {
    left: auto;
    height: 80px;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
}
#header .user-nav {
    height: 80px;
    padding-top: 0 !important;
}
#header .user-nav > ul {
    display: flex;
    align-items: stretch;
    height: 80px;
    margin: 0;
    padding: 0;
}
#header .user-nav > ul > li,
#header .user-nav ul li.dropdown.settings {
    position: relative;
    display: flex;
    align-items: center;
    height: 80px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal;
    border-left: 1px solid rgba(151, 170, 199, .12) !important;
}
#header .toggle-navigation .btn-default,
#header .user-nav .messages > .btn-default {
    width: 64px;
    height: 80px;
    padding: 0;
    color: #e9f0fa !important;
}
#header #toggle-user {
    width: 38px;
    height: 80px;
    padding: 0 8px;
}
#header .dropdown.settings > a {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 18px 0 0;
    color: #e9f0fa !important;
}
#header .toggle-navigation .btn-default:hover,
#header .toggle-navigation .btn-default:focus,
#header .user-nav .btn-default:hover,
#header .user-nav .btn-default:focus,
#header .user-nav li.open .btn-default,
#header .user-nav > ul > li > a:hover,
#header .user-nav > ul > li > a:focus {
    background: rgba(255, 255, 255, .045) !important;
}
#header .toggle-navigation .btn-default:hover i,
#header .toggle-navigation .btn-default:focus i,
#header .user-nav .btn-default:hover i,
#header .user-nav .btn-default:focus i,
#header .user-nav li.open .btn-default i {
    color: #ff8a3d !important;
}
#header .messages .badge {
    top: 10px;
    left: 8px;
}
html[dir='rtl'] #header .messages .badge {
    right: 8px;
    left: auto;
}
#header .badge,
#header .label {
    background-color: #ff6a17 !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px #0d1727;
}
#header .user-nav ul li.dropdown.settings .dropdown-menu,
#header .user-nav ul li.dropdown.messages .dropdown-menu {
    top: 80px;
}
.main-content-wrapper {
    border-top: 0 !important;
}
.flex-wrap {
    min-height: calc(100vh - 80px);
}

@media (max-width: 767px) {
    #header,
    #header .brand,
    #header .logo,
    #header .logo a,
    #header .navbar-header,
    #header .toggle-navigation.toggle-left,
    #header .user-nav,
    #header .user-nav > ul,
    #header .user-nav > ul > li,
    #header .user-nav ul li.dropdown.settings {
        height: 64px;
        min-height: 64px;
    }
    #header .toggle-navigation .btn-default,
    #header .user-nav .messages > .btn-default,
    #header #toggle-user,
    #header .dropdown.settings > a {
        height: 64px;
    }
    #header .user-nav .messages > .btn-default { width: 52px; }
    #header .dropdown.settings > a { padding-right: 12px; }
    #header .user-nav ul li.dropdown.settings .dropdown-menu,
    #header .user-nav ul li.dropdown.messages .dropdown-menu { top: 64px; }
    .flex-wrap { min-height: calc(100vh - 64px); }
}

/* 19. Ticket reply composer (v1.4.2) ------------------------------------ */
#frmReply #replyform {
    overflow: hidden;
}
#frmReply #replybody {
    padding: 28px 30px 24px;
}
#frmReply #replybody hr {
    margin: 22px 0;
}
#frmReply #replybody .form-group {
    margin-bottom: 16px;
}
#frmReply #replybody .control-label {
    padding-top: 11px;
    color: #c9d5e6;
}
#frmReply .form-control,
#frmReply .form-control[disabled],
#frmReply .form-control[readonly] {
    background: #0d1728 !important;
    color: #dce6f5 !important;
    border-color: #2a3a54 !important;
    opacity: 1;
}
#frmReply .form-control[disabled],
#frmReply .form-control[readonly] {
    color: #9eacc2 !important;
}
#frmReply .md-editor {
    width: 100%;
    overflow: hidden;
    background: #0d1728;
    border: 1px solid #2a3a54 !important;
    border-radius: 10px;
    box-shadow: none;
}
#frmReply .md-editor.active {
    border-color: rgba(76, 167, 255, .72) !important;
    box-shadow: 0 0 0 3px rgba(76, 167, 255, .10);
}
#frmReply .md-editor > .btn-toolbar,
#frmReply .md-editor > .md-header {
    min-height: 52px;
    padding: 8px 10px;
    background: #162238 !important;
    border: 0;
}
#frmReply .md-editor .btn-toolbar .btn {
    min-height: 34px;
    color: #dbe6f5 !important;
    background: #1b2940 !important;
    border-color: #31435f !important;
    box-shadow: none !important;
}
#frmReply .md-editor .btn-toolbar .btn:hover,
#frmReply .md-editor .btn-toolbar .btn:focus,
#frmReply .md-editor .btn-toolbar .btn.active {
    color: #fff !important;
    background: #263854 !important;
    border-color: #4ca7ff !important;
}
#frmReply .md-editor .btn-toolbar .btn.btn-primary {
    background: #ff6a17 !important;
    border-color: #ff6a17 !important;
}
#frmReply .md-editor > textarea.markdown-editor,
#frmReply .md-editor > .md-preview {
    min-height: 270px;
    padding: 18px !important;
    background: #0b1423 !important;
    color: #dce6f5 !important;
    border-top: 1px solid #2a3a54 !important;
    border-bottom: 1px solid #2a3a54 !important;
    border-radius: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.65;
    resize: vertical;
}
#frmReply .md-editor > textarea.markdown-editor:focus {
    background: #0d182a !important;
    color: #eef4ff !important;
}
#frmReply .md-editor .md-footer {
    min-height: 34px;
    padding: 8px 12px;
    background: #111c2f;
    color: #8797af;
}
#frmReply .md-editor .md-controls .md-control,
#frmReply .md-editor .md-controls .md-control:hover {
    color: #9eacc2;
}
#frmReply input[type="file"].form-control {
    height: auto;
    min-height: 42px;
    padding: 6px 8px;
    line-height: 28px;
}
#frmReply input[type="file"]::file-selector-button {
    margin: -1px 10px -1px -1px;
    padding: 7px 12px;
    color: #e9f0fa;
    background: #1b2940;
    border: 1px solid #31435f;
    border-radius: 7px;
    cursor: pointer;
}
#frmReply input[type="file"]::-webkit-file-upload-button {
    margin: -1px 10px -1px -1px;
    padding: 7px 12px;
    color: #e9f0fa;
    background: #1b2940;
    border: 1px solid #31435f;
    border-radius: 7px;
    cursor: pointer;
}
#frmReply #replyfooter {
    padding: 14px 16px;
    background: #101b2d !important;
    border-top-color: #2a3a54 !important;
}

@media (min-width: 768px) {
    #frmReply #replybody label[for="inputName"],
    #frmReply #replybody label[for="inputEmail"],
    #frmReply #replybody label[for="inputMessage"],
    #frmReply #replybody label[for="inputAttachments"] {
        width: 18%;
    }
    #frmReply #replybody label[for="inputName"] + .col-sm-6,
    #frmReply #replybody label[for="inputEmail"] + .col-sm-6,
    #frmReply #replybody label[for="inputMessage"] + .col-sm-6 {
        width: 78%;
    }
    #frmReply #replybody label[for="inputAttachments"] + .col-sm-6 {
        width: 62%;
    }
    #frmReply #replybody label[for="inputAttachments"] ~ .col-sm-3 {
        width: 16%;
        padding-left: 14px;
    }
    #frmReply #replybody label[for="inputAttachments"] ~ .col-sm-3 .btn {
        width: 100%;
        min-height: 42px;
    }
}

@media (max-width: 767px) {
    #frmReply #replybody { padding: 20px 16px; }
    #frmReply #replybody .control-label {
        padding-top: 0;
        margin-bottom: 8px;
        text-align: left;
    }
    #frmReply #replybody label[for="inputAttachments"] ~ .col-sm-3 {
        margin-top: 10px;
    }
    #frmReply .md-editor > textarea.markdown-editor,
    #frmReply .md-editor > .md-preview { min-height: 220px; }
}

/* 20. Product add-on catalogue and mini navigation (v1.4.3) ------------- */
/* Standard Cart and compatible order forms use .products > .product for
   both hosting plans and add-ons. Scope the override to the products page so
   unrelated WHMCS cards keep their own presentation. */
body.products #order-standard_cart .products .product,
body.products section.cart .products .product,
body.products .products > .product,
body.products .products > [class*="product"] {
    position: relative;
    overflow: hidden;
    margin-bottom: 18px !important;
    padding: 24px !important;
    background-color: #111c2f !important;
    background-image: linear-gradient(135deg, #162238 0%, #101a2c 100%) !important;
    color: #dce6f5 !important;
    border: 1px solid #2a3a54 !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18) !important;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
body.products #order-standard_cart .products .product:hover,
body.products section.cart .products .product:hover,
body.products .products > .product:hover,
body.products .products > [class*="product"]:hover {
    border-color: rgba(255, 106, 23, .48) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .24) !important;
    transform: translateY(-1px);
}
body.products .products .product .product-desc,
body.products .products .product .product-pricing,
body.products .products .product .product-actions,
body.products .products .product .header,
body.products .products .product .footer {
    background: transparent !important;
    border-color: #2a3a54 !important;
}
body.products .products .product h1,
body.products .products .product h2,
body.products .products .product h3,
body.products .products .product h4,
body.products .products .product .product-title,
body.products .products .product .product-name,
body.products .products .product [id$="-name"] {
    color: #eef4ff !important;
}
body.products .products .product p,
body.products .products .product .product-desc,
body.products .products .product .description {
    color: #aebdd1 !important;
    line-height: 1.65;
}
body.products .products .product .price,
body.products .products .product .product-pricing,
body.products .products .product .product-price {
    color: #f4f8ff !important;
}
body.products .products .product .product-pricing small,
body.products .products .product .price-cycle,
body.products .products .product .billing-cycle {
    color: #8797af !important;
}
body.products .products .product .btn-primary,
body.products .products .product .btn-success {
    background: #ff6a17 !important;
    border-color: #ff6a17 !important;
    color: #fff !important;
}

/* Make the collapsed desktop flyout look intentional and align it exactly
   with the 66px sidebar edge. It remains an overlay, preserving Control's
   original navigation behaviour and click targets. */
@media (min-width: 661px) {
    .sidebar-mini .sidebar-left {
        overflow: visible;
        position: relative;
        z-index: 190;
    }
    .sidebar-mini .sidebar-left .nav-pills > li.nav-dropdown-open,
    .sidebar-mini .sidebar-left .nav-pills > li:hover {
        width: 250px !important;
        z-index: 2100;
        background: #111c2f;
        border-radius: 10px 10px 10px 0;
        box-shadow: 0 18px 42px rgba(0, 0, 0, .42);
    }
    .sidebar-mini .sidebar-left .nav-pills > li.nav-dropdown-open > a,
    .sidebar-mini .sidebar-left .nav-pills > li:hover > a {
        min-height: 48px;
        background: #1b2940 !important;
        border-radius: 10px 10px 0 10px;
        box-shadow: inset 3px 0 0 #ff6a17;
    }
    .sidebar-mini .sidebar-left .nav-pills > li > .nav-sub,
    .es_ES .sidebar-mini .sidebar-left .nav-pills > li > .nav-sub {
        left: 54px !important;
        width: 196px !important;
        margin: 0 !important;
        padding: 6px 0 8px !important;
        background: #111c2f !important;
        border: 1px solid #2a3a54;
        border-top: 0;
        border-radius: 0 0 10px 10px;
        box-shadow: 12px 18px 32px rgba(0, 0, 0, .32);
    }
    .sidebar-mini .sidebar-left .nav-pills > li > .nav-sub > li > a {
        padding: 10px 14px 10px 24px !important;
        color: #9eacc2 !important;
        background: transparent !important;
    }
    .sidebar-mini .sidebar-left .nav-pills > li > .nav-sub > li > a:hover,
    .sidebar-mini .sidebar-left .nav-pills > li > .nav-sub > li.active > a {
        color: #fff !important;
        background: rgba(255, 106, 23, .08) !important;
    }
}

/* 27. Collapsed sidebar active surface (v1.4.11) */
@media (min-width: 661px) {
    .sidebar-mini .sidebar-left .nav {
        padding-right: 6px;
        padding-left: 6px;
    }
    .sidebar-mini .sidebar-left .nav-pills {
        margin-right: 0;
    }
    .sidebar-mini .sidebar-left .nav-pills > li:not(:hover):not(.nav-dropdown-open) > a {
        min-height: 48px;
    }
}

/* 28. Linked-account login buttons (v1.4.14) ---------------------------- */
/* The generic .btn rule is loaded after Control's .btn-social declaration.
   Restore the provider-icon gutter explicitly so the icon never overlaps
   the translated label. Provider markup and authentication remain intact. */
.login .panel-login .social-signin-btns .btn-social,
#loginModal .social-signin-btns .btn-social {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    margin: 0 0 12px;
    padding: 10px 16px 10px 54px !important;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.login .panel-login .social-signin-btns .btn-google,
#loginModal .social-signin-btns .btn-google,
.login .panel-login .social-signin-btns .btn-google:hover,
.login .panel-login .social-signin-btns .btn-google:focus,
#loginModal .social-signin-btns .btn-google:hover,
#loginModal .social-signin-btns .btn-google:focus {
    color: #4c5565 !important;
    background-color: #fff !important;
    background-image: url('../img/google-signin.png') !important;
    background-repeat: no-repeat !important;
    background-size: 28px 28px !important;
    background-position: 12px center !important;
    border-color: #d2d8e2 !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .14);
    transform: none;
}
.login .panel-login .social-signin-btns .btn-google:hover,
.login .panel-login .social-signin-btns .btn-google:focus,
#loginModal .social-signin-btns .btn-google:hover,
#loginModal .social-signin-btns .btn-google:focus {
    color: #202938 !important;
    border-color: #9da9ba !important;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
}

@media (min-width: 992px) {
    .login .panel-login .col-md-7,
    #loginModal .col-md-7 {
        padding-right: 24px;
        border-right-color: var(--wiz-border);
    }
    .login .panel-login .social-login,
    #loginModal .social-login {
        padding-top: 25px;
        padding-left: 24px;
    }
}

@media (max-width: 991px) {
    .login .panel-login .social-login,
    #loginModal .social-login {
        margin-top: 22px;
        padding-top: 22px;
        border-top: 1px solid var(--wiz-border);
    }
}

/* 29. Dedicated login experience (v1.4.15) ------------------------------ */
.login {
    background:
        radial-gradient(circle at 72% 28%, rgba(88, 179, 255, .08), transparent 29%),
        radial-gradient(circle at 20% 78%, rgba(255, 106, 23, .06), transparent 27%),
        #080e19;
}
.login #header {
    background: rgba(9, 17, 30, .94);
    border-bottom-color: rgba(73, 94, 126, .48);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
}
.login #header .brand { border-right: 0; }
.login #header .user-nav { display: none; }
.login .flex-wrap,
.login .main-content-wrapper { width: 100%; min-width: 0; }
.login .main-content-wrapper #main-content {
    position: relative;
    min-height: calc(100vh - 72px);
    padding: clamp(42px, 6vh, 76px) clamp(24px, 5vw, 76px) !important;
    overflow: hidden;
}
.login .main-content-wrapper #main-content::before {
    content: "";
    position: absolute;
    top: 7%;
    left: 8%;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(88, 179, 255, .08);
    border-radius: 50%;
    box-shadow: 0 0 0 62px rgba(88, 179, 255, .025), 0 0 0 124px rgba(255, 106, 23, .018);
    pointer-events: none;
}
.login .main-content-wrapper #main-content > .row:first-of-type { display: none; }
.login #internal-content {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}
.login .wiz-login-form {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}
.login .wiz-login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(410px, 460px);
    align-items: stretch;
    min-height: 610px;
    overflow: hidden;
    background: rgba(11, 19, 33, .84);
    border: 1px solid rgba(58, 78, 108, .78);
    border-radius: 22px;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .42);
    backdrop-filter: blur(12px);
}
.login .wiz-login-intro {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: clamp(48px, 6vw, 78px);
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(25, 42, 67, .92), rgba(11, 22, 39, .95)),
        #111c2f;
    border-right: 1px solid rgba(58, 78, 108, .72);
}
.login .wiz-login-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom right, #000, transparent 76%);
    pointer-events: none;
}
.login .wiz-login-intro-content { position: relative; z-index: 2; max-width: 520px; }
.login .wiz-login-eyebrow,
.login .wiz-login-card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--wiz-orange);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.login .wiz-login-eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    background: var(--wiz-orange);
    border-radius: 99px;
}
.login .wiz-login-intro h2 {
    max-width: 560px;
    margin: 22px 0 20px;
    color: #f5f8ff;
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -.045em;
}
.login .wiz-login-intro p {
    max-width: 500px;
    margin: 0;
    color: #afbdd1;
    font-size: 17px;
    line-height: 1.7;
}
.login .wiz-login-benefits {
    display: grid;
    gap: 16px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}
.login .wiz-login-benefits li {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #d5deeb;
    font-size: 14px;
}
.login .wiz-login-benefits i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--wiz-blue);
    background: rgba(88, 179, 255, .10);
    border: 1px solid rgba(88, 179, 255, .22);
    border-radius: 10px;
}
.login .wiz-login-orbit {
    position: absolute;
    right: -118px;
    bottom: -118px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(255, 106, 23, .22);
    border-radius: 50%;
    box-shadow: 0 0 0 40px rgba(255, 106, 23, .035), 0 0 0 80px rgba(88, 179, 255, .025);
}
.login .wiz-login-orbit span {
    position: absolute;
    top: 42px;
    left: 34px;
    width: 13px;
    height: 13px;
    background: var(--wiz-orange);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(255, 106, 23, .72);
}
.login .panel-login {
    align-self: center;
    width: 100%;
    max-width: none;
    margin: 0;
    background: #111c2f;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.login .panel-login > .wiz-login-heading {
    padding: 44px 44px 24px !important;
    background: transparent;
    border: 0;
}
.login .wiz-login-heading .panel-title {
    margin: 9px 0 7px;
    color: #f5f8ff;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.035em;
}
.login .wiz-login-heading p { margin: 0; color: var(--wiz-faint); font-size: 14px; }
.login .panel-login > .panel-body { padding: 0 44px 36px; }
.login .panel-login .form-group { margin-bottom: 20px; }
.login .panel-login label { margin-bottom: 8px; color: #dce5f2; font-size: 13px; font-weight: 600; }
.login .panel-login .form-control {
    height: 52px;
    padding: 13px 15px;
    color: #f4f7fc;
    background: #0b1628;
    border: 1px solid #31445f;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
}
.login .panel-login .form-control:focus {
    background: #0d192c;
    border-color: var(--wiz-blue);
    box-shadow: 0 0 0 3px rgba(88, 179, 255, .14);
}
.login .wiz-login-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}
.login .wiz-login-label-row a { font-size: 12px; font-weight: 600; }
.login .wiz-login-social .social-signin-btns .btn-social {
    justify-content: center;
    min-height: 50px;
    margin-bottom: 0;
    padding-right: 18px !important;
    text-align: center;
    border-radius: 10px;
}
.login .wiz-login-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 23px 0;
    color: #718199;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.login .wiz-login-divider::before,
.login .wiz-login-divider::after { content: ""; flex: 1; height: 1px; background: #2a3a54; }
.login .wiz-login-divider span { white-space: nowrap; }
.login .wiz-login-remember { margin: 2px 0 24px !important; }
.login .wiz-login-remember .rememberme { display: inline-flex; align-items: center; min-height: 28px; color: #bdc9da; }
.login #login {
    min-height: 52px;
    font-size: 15px;
    letter-spacing: .01em;
    border-radius: 10px;
    box-shadow: 0 4px 0 #bd4309, 0 14px 30px rgba(255, 106, 23, .24);
}
.login #login:hover,
.login #login:focus { box-shadow: 0 4px 0 #bd4309, 0 16px 34px rgba(255, 106, 23, .32), 0 0 0 3px rgba(255, 106, 23, .16); }
.login .wiz-login-captcha { margin-bottom: 20px; }
.login .panel-login > .wiz-login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 17px 24px;
    color: #8494aa;
    background: rgba(6, 13, 24, .32) !important;
    border-top: 1px solid #2a3a54;
    font-size: 12px;
}
.login .wiz-login-footer i { color: var(--wiz-green); }
.login #errormessages:empty,
.login .providerLinkingFeedback:empty { display: none; }
.login #errormessages .alert,
.login .providerLinkingFeedback .alert { margin-bottom: 22px; }

@media (max-width: 991px) {
    .login .main-content-wrapper #main-content { padding: 32px 22px 44px !important; }
    .login .wiz-login-shell { grid-template-columns: 1fr; max-width: 620px; min-height: 0; margin: 0 auto; }
    .login .wiz-login-intro { min-height: 300px; padding: 42px 44px; border-right: 0; border-bottom: 1px solid rgba(58, 78, 108, .72); }
    .login .wiz-login-intro h2 { font-size: 39px; }
    .login .wiz-login-intro p { font-size: 15px; }
    .login .wiz-login-benefits { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 27px; }
    .login .wiz-login-benefits li { align-items: flex-start; font-size: 12px; }
    .login .wiz-login-benefits i { flex: 0 0 32px; width: 32px; height: 32px; }
}

@media (max-width: 600px) {
    .login #header .brand { width: 100%; }
    .login #header .logo { justify-content: center; }
    .login .main-content-wrapper #main-content { padding: 20px 12px 32px !important; }
    .login .wiz-login-shell { border-radius: 16px; }
    .login .wiz-login-intro { min-height: 230px; padding: 32px 26px; }
    .login .wiz-login-intro h2 { margin: 15px 0 12px; font-size: 31px; }
    .login .wiz-login-intro p { line-height: 1.55; }
    .login .wiz-login-benefits { display: none; }
    .login .wiz-login-orbit { opacity: .65; }
    .login .panel-login > .wiz-login-heading { padding: 32px 24px 20px !important; }
    .login .panel-login > .panel-body { padding: 0 24px 28px; }
    .login .wiz-login-heading .panel-title { font-size: 28px; }
    .login .wiz-login-label-row { align-items: flex-start; flex-direction: column; gap: 1px; }
    .login .wiz-login-divider span { white-space: normal; text-align: center; }
}

/* 30. Registration autofill and linked account controls (v1.4.16) ------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #e8eef8 !important;
    caret-color: #e8eef8;
    -webkit-box-shadow: 0 0 0 1000px #0c1525 inset !important;
    box-shadow: 0 0 0 1000px #0c1525 inset !important;
    transition: background-color 9999s ease-out 0s;
}
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px #101c30 inset, 0 0 0 3px rgba(88, 179, 255, .14) !important;
    box-shadow: 0 0 0 1000px #101c30 inset, 0 0 0 3px rgba(88, 179, 255, .14) !important;
}
#registration .social-signin-btns .btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0 auto 14px;
    padding: 10px 18px 10px 54px !important;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
}
#registration .social-signin-btns .btn-google,
#registration .social-signin-btns .btn-google:hover,
#registration .social-signin-btns .btn-google:focus {
    color: #4c5565 !important;
    background-color: #fff !important;
    background-image: url('../img/google-signin.png') !important;
    background-repeat: no-repeat !important;
    background-size: 28px 28px !important;
    background-position: 14px center !important;
    border-color: #d2d8e2 !important;
    border-radius: 10px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .14);
    transform: none;
}
#registration .social-signin-btns .btn-google:hover,
#registration .social-signin-btns .btn-google:focus {
    color: #202938 !important;
    border-color: #9da9ba !important;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
}

/* 31. Homepage featured TLDs (v1.4.17) ---------------------------------- */
body.homepage .featured-tlds-container {
    margin: 30px 0 12px;
}
body.homepage .featured-tld {
    margin: 0 0 22px;
    padding: 10px;
    overflow: hidden;
    background: linear-gradient(145deg, #17243a, #101a2c);
    border: 1px solid #2a3a54;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.homepage .featured-tld:hover {
    transform: translateY(-3px);
    border-color: rgba(88, 179, 255, .58);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
}
body.homepage .featured-tld .img-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 126px;
    padding: 20px;
    background: linear-gradient(145deg, #f8fafc, #e9eef5);
    border-radius: 8px 8px 0 0;
}
body.homepage .featured-tld .img-container img {
    max-width: 68%;
    max-height: 82px;
}
body.homepage .featured-tld .price,
body.homepage .featured-tld .price.blog,
body.homepage .featured-tld .price.club,
body.homepage .featured-tld .price.com,
body.homepage .featured-tld .price.couk,
body.homepage .featured-tld .price.host,
body.homepage .featured-tld .price.live,
body.homepage .featured-tld .price.name,
body.homepage .featured-tld .price.net,
body.homepage .featured-tld .price.online,
body.homepage .featured-tld .price.rocks,
body.homepage .featured-tld .price.shop,
body.homepage .featured-tld .price.social,
body.homepage .featured-tld .price.store,
body.homepage .featured-tld .price.tech,
body.homepage .featured-tld .price.tv,
body.homepage .featured-tld .price.website {
    min-height: 46px;
    padding: 10px 14px;
    color: #eaf3ff !important;
    background: linear-gradient(90deg, #1d3556, #162842) !important;
    border-top: 1px solid rgba(88, 179, 255, .18);
    border-radius: 0 0 8px 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: .01em;
}
@media (max-width: 767px) {
    body.homepage .featured-tld { margin-bottom: 14px; }
    body.homepage .featured-tld .img-container { height: 102px; }
    body.homepage .featured-tld .img-container img { max-height: 64px; }
}

/* 32. Cart Weebly promotion (v1.4.18) ----------------------------------- */
/* The inherited promo component is white; keep its product content intact, */
/* but integrate just the Weebly banner into the dark cart surface. */
section.cart .promo-banner.promo-cart.weebly {
    padding: 20px 24px;
    color: #b8c6d9;
    background: linear-gradient(135deg, #1a2a43, #111d31) !important;
    border: 1px solid #2f4869 !important;
    border-radius: 12px 12px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
section.cart .promo-banner.promo-cart.weebly:hover {
    border-color: #58b3ff !important;
}
section.cart .promo-banner.promo-cart.weebly h3,
section.cart .promo-banner.promo-cart.weebly h4 {
    color: #edf4ff !important;
}
section.cart .promo-banner.promo-cart.weebly p,
section.cart .promo-banner.promo-cart.weebly li {
    color: #b8c6d9 !important;
}
section.cart .promo-banner.promo-cart.weebly .learn-more a {
    color: #58b3ff !important;
}
section.cart .promo-banner.promo-cart.weebly .pricing h3 {
    color: #6bc0ff !important;
}
@media (max-width: 767px) {
    section.cart .promo-banner.promo-cart.weebly {
        padding: 18px;
        border-radius: 10px 10px 0 0;
    }
}

/* 33. Cart review and checkout legibility (v1.4.19) --------------------- */
/* WHMCS ships the review rows at 12px. Raise only this final cart summary */
/* so product, add-on and renewal details are comfortable to scan. */
body.viewcart .panel-view-cart .view-cart-items-header {
    font-size: 16px;
}
body.viewcart .panel-view-cart .item {
    font-size: 14px;
    line-height: 1.5;
}
body.viewcart .panel-view-cart .item .item-title,
body.viewcart .panel-view-cart .item .item-price,
body.viewcart .panel-view-cart .item .item-domain,
body.viewcart .panel-view-cart .item .item-description,
body.viewcart .panel-view-cart .item span.setup-price,
body.viewcart .panel-view-cart .item span.renewal-price {
    font-size: 14px;
}
body.viewcart .panel-view-cart .product-actions .btn-xs {
    font-size: 13px;
}
body.viewcart .panel-view-cart .promotion-code,
body.viewcart .panel-view-cart .tax-1,
body.viewcart .panel-view-cart .tax-2,
body.viewcart .panel-view-cart .recurring {
    font-size: 14px;
}
/* Checkout renders the same #registration block as /register.php. */
#registration .social-signin-btns .btn-google {
    min-width: 250px;
    padding-right: 22px !important;
    padding-left: 60px !important;
    background-position: 18px center !important;
}