/* OneBestHost portal foundation: existing WHMCS markup only. */
:root{--obh-navy:#062a43;--obh-blue:#087ca7;--obh-cyan:#00a8c6;--obh-teal:#12a978;--obh-ink:#102a3a;--obh-muted:#5d7180;--obh-line:#d9e5ea;--obh-shadow:0 22px 60px rgba(6,42,67,.12)}
#main-body:has(.logincontainer){background:radial-gradient(circle at 8% 10%,rgba(0,168,198,.16),transparent 28%),radial-gradient(circle at 92% 80%,rgba(18,169,120,.12),transparent 26%),linear-gradient(180deg,#fbfdfe,#eef6f8);min-height:650px;padding:64px 0 84px}
.logincontainer{max-width:540px;overflow:hidden;position:relative}
.logincontainer::before{background:linear-gradient(90deg,var(--obh-blue),var(--obh-cyan),var(--obh-teal));content:"";height:5px;left:0;position:absolute;right:0;top:0}
.logincontainer .header-lined h1{font-size:34px}
.logincontainer .header-lined h1::before{color:var(--obh-blue);content:"OneBestHost Portal";display:block;font-family:"Open Sans",Arial,sans-serif;font-size:11px;font-weight:800;letter-spacing:.13em;margin-bottom:12px;text-transform:uppercase}
.logincontainer .header-lined h1 small{font-size:15px;line-height:1.55}
.logincontainer .login-form .form-control{background:#fff}
.logincontainer .login-form .btn-primary{letter-spacing:.01em;width:100%}
.logincontainer .login-form a,#main-body:has(#registration) .panel-sidebar .list-group-item a{color:var(--obh-blue);font-weight:700}
#main-body:has(#registration){background:radial-gradient(circle at 6% 10%,rgba(0,168,198,.12),transparent 30%),linear-gradient(180deg,#fbfdfe,#f1f7f9);padding:42px 0 80px}
#main-body:has(#registration) .header-lined{border-bottom:0;margin:0 0 18px}
#main-body:has(#registration) .header-lined h1{color:var(--obh-navy);font-family:Raleway,"Open Sans",Arial,sans-serif;font-size:clamp(32px,4vw,42px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
#main-body:has(#registration) .header-lined h1 small{color:var(--obh-muted);display:block;font-family:"Open Sans",Arial,sans-serif;font-size:15px;font-weight:500;letter-spacing:0;margin-top:9px}
#main-body:has(#registration) .breadcrumb{background:transparent;margin:12px 0 0;padding:0}
#registration{background:#fff;border:1px solid var(--obh-line);border-radius:20px;box-shadow:var(--obh-shadow);overflow:hidden;padding:32px}
#registration .sub-heading{border-bottom:1px solid var(--obh-line);color:var(--obh-navy);font-size:16px;font-weight:800;letter-spacing:-.01em;margin:31px 0 20px;padding-bottom:12px}
#registration .sub-heading:first-child{margin-top:0}
#registration .form-group{margin-bottom:18px}
#registration label:not(.field-icon){color:var(--obh-ink);font-size:12px;font-weight:800;margin-bottom:8px}
#registration .form-control{background:#fbfdfe;border:1px solid #cbdce3;border-radius:9px;box-shadow:none;color:var(--obh-ink);font-size:14px;height:47px;padding:11px 14px;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
#registration textarea.form-control{height:auto;min-height:94px}
#registration .form-control:focus{background:#fff;border-color:var(--obh-cyan);box-shadow:0 0 0 3px rgba(0,168,198,.13)}
#registration .prepend-icon .field-icon{color:var(--obh-blue)}
#registration .btn-primary,#registration input[type="submit"].btn-primary{background:linear-gradient(135deg,var(--obh-blue),var(--obh-cyan));border:0;border-radius:9px;box-shadow:0 10px 24px rgba(8,124,167,.2);font-size:14px;font-weight:800;min-height:48px;padding:12px 22px}
#main-body:has(#registration) .panel-sidebar{background:#fff;border:1px solid var(--obh-line);border-radius:16px;box-shadow:0 12px 32px rgba(6,42,67,.07);overflow:hidden}
#main-body:has(#registration) .panel-sidebar .panel-heading{background:var(--obh-navy);border:0;padding:15px 17px}
#main-body:has(#registration) .panel-sidebar .panel-title,#main-body:has(#registration) .panel-sidebar .panel-title *{color:#fff;font-size:14px;font-weight:700}
#main-body:has(#registration) .panel-sidebar .list-group-item{border-color:#edf2f4;color:var(--obh-muted);font-size:13px;padding:13px 16px}
.btn-primary:focus,.btn-primary:hover{background:linear-gradient(135deg,#066d94,#0097b2)}
@media(max-width:767px){#main-body:has(.logincontainer){min-height:0;padding:32px 0 46px}.logincontainer{max-width:calc(100% - 28px)}#main-body:has(#registration){padding:28px 0 48px}#registration{border-radius:16px;padding:22px 18px}#registration .sub-heading{margin-top:26px}#main-body:has(#registration) .sidebar{margin-top:24px}}

/* Keep entry screens focused on sign-in and account creation. */
body:has(#main-body .logincontainer) #main-menu,
body:has(#main-body #registration) #main-menu { display: none; }

body:has(#main-body .logincontainer) #header,
body:has(#main-body #registration) #header { border-bottom: 1px solid #d9e5ea; }

body:has(#main-body .logincontainer) #header .logo,
body:has(#main-body #registration) #header .logo { display: inline-block; }

body:has(#main-body .logincontainer) #main-menu { display: none !important; }


/* Registration polish: a calm, premium account-creation flow using native WHMCS markup. */
#main-body:has(#registration) > .container { max-width: 1180px; }
#main-body:has(#registration) #registration { position: relative; }
#main-body:has(#registration) #registration::before {
    background: linear-gradient(90deg, var(--obh-portal-blue), var(--obh-portal-cyan), var(--obh-portal-teal));
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
#registration .sub-heading {
    align-items: center;
    display: flex;
    gap: 10px;
}
#registration .sub-heading::before {
    background: var(--obh-portal-cyan);
    border-radius: 999px;
    content: "";
    display: inline-block;
    height: 8px;
    width: 8px;
}
#registration .form-control:hover { border-color: #9dc6d1; }
#registration .form-control:focus {
    background: #fff;
    border-color: var(--obh-portal-blue);
    box-shadow: 0 0 0 4px rgba(8, 124, 167, .12);
}
#registration .input-group-addon,
#registration .field-icon { color: var(--obh-portal-blue); }
#registration .checkbox label { color: var(--obh-portal-muted); font-weight: 600; }
#registration .alert { border: 0; border-radius: 12px; box-shadow: none; }
#registration .btn-primary { box-shadow: 0 12px 28px rgba(8, 124, 167, .24); }


/* Signed-in dashboard: turn native WHMCS panels into a calm account workspace. */
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body {
    background: linear-gradient(180deg, #fbfdfe 0%, #f3f8fa 100%);
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .header-lined {
    border-bottom: 0;
    margin-bottom: 20px;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .header-lined h1 {
    color: var(--obh-portal-navy);
    font-family: Raleway, "Open Sans", Arial, sans-serif;
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    letter-spacing: -.03em;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .tiles .tile,
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .client-home-panels .panel,
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .panel-default {
    background: #fff;
    border: 1px solid var(--obh-portal-line);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(6, 42, 67, .07);
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .tiles .tile {
    min-height: 112px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .tiles .tile:hover {
    border-color: #a8d5df;
    box-shadow: 0 16px 38px rgba(6, 42, 67, .12);
    transform: translateY(-2px);
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .panel-heading {
    background: #f6fafc;
    border-bottom: 1px solid var(--obh-portal-line);
    color: var(--obh-portal-navy);
    font-weight: 800;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .panel-title { font-weight: 800; }
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .list-group-item {
    border-color: #edf2f4;
    padding-bottom: 13px;
    padding-top: 13px;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body a { color: var(--obh-portal-blue); }
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .btn-primary {
    border: 0;
    border-radius: 9px;
    box-shadow: 0 10px 24px rgba(8, 124, 167, .2);
}


/* Reference-style split login: brand/news panel on desktop, stacked on mobile. */
@media (min-width: 900px) {
    body:has(#main-body .logincontainer) { background: #fff; }
    body:has(#main-body .logincontainer) #main-body {
        align-items: stretch;
        background: #fff;
        display: flex;
        min-height: calc(100vh - 72px);
        padding: 0;
        position: relative;
    }
    body:has(#main-body .logincontainer) #main-body::before {
        background-color: #102f91;
        background-image: url('/assets/img/onebesthost-logo.svg');
        background-position: 46px 46px;
        background-repeat: no-repeat;
        background-size: 286px auto;
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        top: 0;
        width: 32.5%;
    }
    body:has(#main-body .logincontainer) #main-body::after {
        bottom: 150px;
        color: rgba(255,255,255,.92);
        content: "Your trusted partner for hosting\A\AWhat's new\A\AFast, secure hosting for your next project.\A\A\A●  ●  ●  ●";
        font-family: "Open Sans", Arial, sans-serif;
        font-size: 17px;
        left: 46px;
        line-height: 1.55;
        max-width: 330px;
        position: absolute;
        white-space: pre-wrap;
    }
    body:has(#main-body .logincontainer) #main-body > .container {
        align-items: center;
        display: flex;
        justify-content: flex-end;
        margin-left: 32.5%;
        max-width: none;
        padding: 80px 8vw;
        width: 67.5%;
    }
    body:has(#main-body .logincontainer) .logincontainer {
        margin: 0;
        max-width: 430px;
        width: 100%;
    }
    body:has(#main-body .logincontainer) .logincontainer .header-lined h1 {
        font-size: 34px;
        text-align: center;
    }
    body:has(#main-body .logincontainer) .logincontainer .header-lined h1::before { display: none; }
}

@media (max-width: 899px) {
    body:has(#main-body .logincontainer) #main-body { padding-top: 0; }
    body:has(#main-body .logincontainer) #main-body::before {
        background: #102f91 url('/assets/img/onebesthost-logo.svg') 24px 22px / 210px auto no-repeat;
        content: "";
        display: block;
        height: 122px;
        margin: 0;
        width: 100%;
    }
    body:has(#main-body .logincontainer) #main-body > .container { padding-top: 28px; }
    body:has(#main-body .logincontainer) .logincontainer { margin-top: 0; }
}


/* Refine split layout spacing so the card sits centrally in the white half. */
@media (min-width: 900px) {
    body:has(#main-body .logincontainer) #main-body > .container {
        justify-content: center;
        padding: 64px 4vw;
    }
}


/* Keep signed-in pages readable on wide desktop screens without affecting entry pages. */
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body > .container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1320px;
    width: calc(100% - 48px);
}

@media (max-width: 767px) {
    body:not(:has(.logincontainer)):not(:has(#registration)) #main-body > .container {
        max-width: none;
        width: 100%;
    }
}


/* Dashboard composition: structured profile, metric cards, and readable work panels. */
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .sidebar .panel {
    background: #fff;
    border: 1px solid var(--obh-portal-line);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(6, 42, 67, .07);
    overflow: hidden;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .sidebar .panel-heading {
    background: #f6fafc;
    padding: 15px 18px;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .sidebar .panel-body { padding: 18px; }
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .tiles { margin-bottom: 24px; }
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .tiles .tile {
    border-radius: 16px;
    margin-bottom: 16px;
    padding: 22px 20px;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .tiles .tile .tile-title,
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .tiles .tile .tile-title span {
    color: var(--obh-portal-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .tiles .tile .tile-stat {
    color: var(--obh-portal-navy);
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .panel {
    margin-bottom: 22px;
    overflow: hidden;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .panel-body { padding: 18px; }
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .input-group .form-control,
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body input.form-control {
    border-color: #cbdce3;
    border-radius: 9px;
    min-height: 44px;
}

@media (min-width: 992px) {
    body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .sidebar { padding-right: 10px; }
    body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .main-content { padding-left: 10px; }
}

@media (max-width: 991px) {
    body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .sidebar { margin-bottom: 20px; }
}


/* Modern portal navigation: branded, compact, and independent of the default WHMCS look. */
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu {
    background: rgba(255, 255, 255, .96);
    border: 0;
    box-shadow: 0 8px 24px rgba(6, 42, 67, .08);
    position: relative;
    z-index: 20;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .navbar-nav > li > a {
    border-radius: 10px;
    color: var(--obh-portal-navy);
    font-size: 13px;
    font-weight: 700;
    margin: 8px 3px;
    padding: 10px 13px;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .navbar-nav > li > a:hover,
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .navbar-nav > li.open > a,
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .navbar-nav > li.active > a {
    background: #e8f7fa;
    color: var(--obh-portal-blue);
    transform: translateY(-1px);
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .navbar-nav > li:last-child > a {
    background: var(--obh-portal-navy);
    color: #fff;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .navbar-nav > li:last-child > a:hover {
    background: var(--obh-portal-blue);
    color: #fff;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .dropdown-menu {
    border: 1px solid var(--obh-portal-line);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(6, 42, 67, .16);
    margin-top: 4px;
    min-width: 220px;
    overflow: hidden;
    padding: 8px;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .dropdown-menu > li > a {
    border-radius: 9px;
    color: var(--obh-portal-ink);
    font-size: 13px;
    font-weight: 650;
    padding: 10px 12px;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .dropdown-menu > li > a:hover,
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .dropdown-menu > li > a:focus {
    background: #e8f7fa;
    color: var(--obh-portal-blue);
}

/* Elevated dashboard details and action controls. */
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body {
    background:
        radial-gradient(circle at 92% 6%, rgba(0, 168, 198, .08), transparent 24%),
        linear-gradient(180deg, #fbfdfe 0%, #f2f7f9 100%);
    padding-bottom: 52px;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .sidebar .panel-heading,
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .panel-heading {
    align-items: center;
    display: flex;
    min-height: 52px;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .sidebar .btn,
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .panel .btn-primary,
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .panel .btn-success {
    background: linear-gradient(135deg, var(--obh-portal-blue), var(--obh-portal-cyan));
    border: 0;
    border-radius: 9px;
    color: #fff;
    font-weight: 750;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .tiles .tile {
    background: linear-gradient(145deg, #fff, #f8fcfd);
    position: relative;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .tiles .tile:before {
    background: linear-gradient(180deg, var(--obh-portal-cyan), var(--obh-portal-teal));
    border-radius: 99px;
    content: "";
    height: 34px;
    left: 0;
    position: absolute;
    top: 20px;
    width: 4px;
}

@media (max-width: 767px) {
    body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .navbar-nav > li > a {
        margin: 2px 9px;
        padding: 12px 14px;
    }
    body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .dropdown-menu {
        border: 0;
        box-shadow: none;
        margin: 0 12px;
    }
}


/* Restore the WHMCS content grid for ticket, support, billing, and account pages. */
@media (min-width: 992px) {
    body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .sidebar:not(.sidebar-secondary) {
        float: left;
        width: 25%;
    }
    body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .main-content {
        float: right !important;
        width: 75% !important;
    }
    body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .sidebar-secondary {
        clear: left;
        float: left;
        width: 25%;
    }
}

/* Override legacy template menu colours so navigation remains readable. */
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu,
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .navbar { background: #fff !important; }
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .navbar-nav > li > a {
    color: var(--obh-portal-navy) !important;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .navbar-nav > li > a:hover,
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .navbar-nav > li.open > a,
body:not(:has(.logincontainer)):not(:has(#registration)) #main-menu .navbar-nav > li.active > a {
    background: #e8f7fa !important;
    color: var(--obh-portal-blue) !important;
}


/* Cart/store pages have their own sidebar grid; do not force the client-area ratio onto them. */
@media (min-width: 992px) {
    body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .main-content:has(#order-standard_cart) {
        float: none !important;
        width: 100% !important;
    }
}


/* Dashboard metric grid and action controls: prevent overlapping cards and low-contrast buttons. */
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .tiles {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .tiles .tile {
    float: none !important;
    margin: 0 !important;
    min-width: 0;
    width: auto !important;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .sidebar .panel-footer {
    background: #f7fafb;
    border-top: 1px solid var(--obh-portal-line);
    padding: 12px 18px;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .sidebar .panel-footer .btn,
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .sidebar .btn-default,
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .sidebar .btn-primary,
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .sidebar .btn-success {
    background: linear-gradient(135deg, var(--obh-portal-blue), var(--obh-portal-cyan)) !important;
    border: 0 !important;
    color: #fff !important;
    text-shadow: none;
}
body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .panel-heading .btn {
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 991px) {
    body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    body:not(:has(.logincontainer)):not(:has(#registration)) #main-body .tiles {
        grid-template-columns: 1fr;
    }
}