/* Mhost 2026 — look on top of WHMCS Twenty-One (all WHMCS pages keep their layout and functions; only colours, type,
   header, home page and footer change). Brand: navy #0b2545, blue #1786d4. */
:root{--mh-navy:#0b2545;--mh-navy2:#13315c;--mh-blue:#1786d4;--mh-blue2:#0f6fb5;--mh-sky:#e8f3fc;--mh-ink:#14213d;--mh-muted:#5c6b80;--mh-line:#e3e8ef;--mh-bg:#f5f7fb;--mh-r:14px}
body,body.primary-bg-color{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--mh-ink);background:var(--mh-bg);font-size:15px}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5{font-family:Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;color:var(--mh-ink)}
a{color:var(--mh-blue2)}a:hover{color:var(--mh-blue)}

/* buttons */
.btn{border-radius:10px;font-weight:600}
.btn-primary,.btn-primary:not(:disabled):not(.disabled):active{background:var(--mh-blue);border-color:var(--mh-blue)}
.btn-primary:hover,.btn-primary:focus{background:var(--mh-blue2);border-color:var(--mh-blue2)}
.btn-outline-primary{color:var(--mh-navy);border:1.5px solid var(--mh-line);background:#fff}
.btn-outline-primary:hover,.btn-outline-primary:focus{background:#fff;color:var(--mh-blue2);border-color:var(--mh-blue)}
.btn-success{background:#20b26b;border-color:#20b26b}.btn-success:hover{background:#18975a;border-color:#18975a}
.btn-default{border-radius:10px}
.form-control,.custom-select{border-radius:10px;border:1.5px solid var(--mh-line);min-height:42px}
.form-control:focus,.custom-select:focus{border-color:var(--mh-blue);box-shadow:0 0 0 4px rgba(23,134,212,.12)}
.badge-info{background:var(--mh-blue)}

/* header: one white bar */
#header{background:#fff;border-bottom:1px solid var(--mh-line);box-shadow:none}
#header .topbar{background:var(--mh-navy);color:#c9d8ec}
#header .topbar .btn,#header .topbar .input-group-text{color:#c9d8ec;background:transparent;border:0}
#header .topbar .btn-active-client{color:#fff;font-weight:600}
.mh-bar{padding:12px 0;background:#fff}
.mh-bar .logo-img{max-height:42px;width:auto}
.mh-bar #nav .nav-link,.mh-bar .navbar-nav .nav-link{color:var(--mh-ink);font-weight:500;padding:8px 12px;border-radius:8px}
.mh-bar #nav .nav-link:hover,.mh-bar .navbar-nav .nav-item.active>.nav-link,.mh-bar .navbar-nav .nav-link:focus{background:var(--mh-sky);color:var(--mh-blue2)}
.mh-bar .dropdown-menu{border:1px solid var(--mh-line);border-radius:12px;box-shadow:0 14px 40px rgba(16,40,80,.12);padding:6px}
.mh-bar .dropdown-item{border-radius:8px;padding:8px 12px}.mh-bar .dropdown-item:hover{background:var(--mh-sky);color:var(--mh-blue2)}
.mh-bar .cart-btn{width:42px;height:42px;border:1px solid var(--mh-line)!important;border-radius:10px;display:grid;place-items:center;position:relative;color:var(--mh-navy)}
.mh-bar .cart-btn .badge{position:absolute;top:-7px;right:-7px;border-radius:20px}
.mh-bar .btn-sm{padding:7px 14px;font-size:14px}
@media (max-width:1199px){.mh-bar .navbar-collapse{order:9;width:100%;padding-top:10px}}
.master-breadcrumb{background:transparent;border:0}.master-breadcrumb .breadcrumb{background:transparent;padding:14px 0 0;font-size:13.5px}

/* hero (home page) */
.mh-hero{background:radial-gradient(1200px 500px at 85% -10%,#2a8fe0 0,transparent 60%),linear-gradient(135deg,var(--mh-navy) 0,var(--mh-navy2) 60%,#174a87 100%);color:#fff;padding:70px 0 96px;position:relative;overflow:hidden}
.mh-hero:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-1px;height:60px;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0}
.mh-hero h1{color:#fff;font-size:46px;line-height:1.1;margin:0 0 14px;font-weight:800;letter-spacing:-.02em;max-width:780px}
.mh-hero h1 span{background:linear-gradient(90deg,#7cc4ff,#b9e2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.mh-hero .lead{font-size:18px;color:#c9d8ec;max-width:640px;margin:0 0 30px}
.mh-dsearch{background:#fff;border-radius:16px;padding:8px;display:flex;gap:8px;max-width:780px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.mh-dsearch .form-control{flex:1;border:0;box-shadow:none;font-size:17px;font-weight:500;min-width:0}
.mh-dsearch .btn{padding:10px 20px;font-size:15px}
.mh-captcha{max-width:780px;margin-top:10px}.mh-captcha:empty{display:none}
.mh-tlds{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;align-items:center}
.mh-tlds span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:5px 12px;border-radius:30px;font-weight:600;font-size:14px}
.mh-tlds a{color:#a9c2df;font-size:14px;margin-left:4px}
.mh-trust{display:flex;gap:26px;margin-top:32px;color:#c9d8ec;font-size:14px;flex-wrap:wrap}.mh-trust i{color:#7cc4ff;margin-right:6px}
/* the home page sections run full width (homepage.tpl closes the normal container) */
.mh-s{padding:64px 0;background:#fff}.mh-alt{background:var(--mh-bg)}
.mh-sh{text-align:center;margin-bottom:38px}.mh-sh h2{font-size:32px;margin:0 0 8px}.mh-sh p{color:var(--mh-muted);margin:0;font-size:16px}
.mh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mh-card{background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-r);padding:26px;transition:.15s}
.mh-card:hover{box-shadow:0 14px 40px rgba(16,40,80,.10);transform:translateY(-2px);border-color:#cfe2f6}
.mh-svc .mh-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--mh-sky);color:var(--mh-blue2);margin-bottom:16px;font-size:20px}
.mh-svc h3{margin:0 0 6px;font-size:19px}.mh-svc p{color:var(--mh-muted);margin:0 0 16px;min-height:48px}
.mh-price{font-size:14px;color:var(--mh-muted);margin-bottom:18px}.mh-price b{font-size:26px;color:var(--mh-ink);letter-spacing:-.02em}
.mh-feat{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.mh-feat>div{display:flex;gap:14px}.mh-feat>div>i{color:var(--mh-blue);font-size:20px;margin-top:4px}
.mh-feat h4{margin:0 0 4px;font-size:16px}.mh-feat p{margin:0;color:var(--mh-muted);font-size:14.5px}
.mh-quick{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:40px}
.mh-quick a{background:#fff;border:1px solid var(--mh-line);border-radius:12px;padding:20px 12px;text-align:center;color:var(--mh-ink);font-weight:600;font-size:14.5px}
.mh-quick a:hover{border-color:var(--mh-blue);color:var(--mh-blue2);text-decoration:none;box-shadow:0 8px 24px rgba(16,40,80,.08)}
.mh-quick i{display:block;margin:0 auto 10px;color:var(--mh-blue);font-size:22px}
.mh-cta{background:linear-gradient(120deg,var(--mh-blue2),#2a9be8);color:#fff;border-radius:20px;padding:36px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.mh-cta h3{margin:0 0 4px;font-size:24px;color:#fff}.mh-cta p{margin:0;color:#dbeeff}.mh-cta .btn{background:#fff;color:var(--mh-blue2);padding:11px 20px}
body:has(.mh-hero) #main-body{padding:0!important;min-height:0!important;background:#fff}
body:has(.mh-hero) #main-body>.container,body:has(.mh-hero) #main-body .primary-content{min-height:0!important;padding:0!important}

/* inner pages: cards, sidebar, tables */
#main-body{padding:26px 0 50px}
.card{border:1px solid var(--mh-line);border-radius:var(--mh-r);box-shadow:none}
.card-header{background:#fff;border-bottom:1px solid var(--mh-line);border-radius:var(--mh-r) var(--mh-r) 0 0!important}
.card-header .card-title{font-size:16px;font-weight:700}
.card-footer{background:#fafbfd;border-top:1px solid var(--mh-line)}
.sidebar .card{border-radius:var(--mh-r);overflow:hidden}
.sidebar .card-header{background:#fff}
.sidebar .list-group-item{border:0;border-radius:9px!important;margin:2px 8px;padding:9px 12px;color:var(--mh-ink);font-weight:500;font-size:14.5px}
.sidebar .list-group{padding:6px 0}
.sidebar .list-group-item:hover,.sidebar .list-group-item.active{background:var(--mh-sky);color:var(--mh-blue2)}
.sidebar .list-group-item.active .badge,.sidebar .list-group-item .badge{border-radius:20px}
.tiles{border-radius:var(--mh-r);overflow:hidden;border:1px solid var(--mh-line);background:#fff}
.tiles .tile{border:0;border-right:1px solid var(--mh-line);background:#fff;padding:22px}
.tiles .tile i{color:var(--mh-blue);opacity:.25}
.tiles .tile .stat{color:var(--mh-ink);font-weight:800}
.tiles .tile .title{color:var(--mh-muted);font-weight:600;text-transform:none;letter-spacing:0}
.tiles .tile .highlight{height:3px}
.tiles .tile:hover{background:var(--mh-sky)}
.client-home-cards .card{border-top-width:1px}
.table{color:var(--mh-ink)}
.table thead th,.table-list thead th{border-bottom:1px solid var(--mh-line);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mh-muted);font-weight:600;background:#fafbfd}
.table td{border-top:1px solid var(--mh-line);vertical-align:middle}
.table-list{border-radius:var(--mh-r);overflow:hidden}
.label,.status{border-radius:20px;font-weight:700;padding:3px 10px}
.status-active,.label-success{background:#e7f8ef!important;color:#15803d!important}
.status-pending,.label-warning{background:#fff4e5!important;color:#b45309!important}
.status-suspended,.status-terminated,.status-cancelled,.label-danger,.status-unpaid,.status-overdue{background:#fdecec!important;color:#b91c1c!important}
.status-paid{background:#e7f8ef!important;color:#15803d!important}
.alert{border-radius:12px}
.primary-content>h1,.header-lined h1{font-size:26px;font-weight:700}

/* login & register */
.login-form,.logincontainer{max-width:440px;margin:20px auto}
.login-form .card,.logincontainer .card{border-radius:18px;box-shadow:0 20px 50px rgba(16,40,80,.08)}

/* footer */
.mh-footer{background:var(--mh-navy);color:#b7c6da;padding:54px 0 26px;font-size:14.5px;margin-top:0;border:0}
.mh-footer .mh-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.mh-footer h5{color:#fff;font-size:15px;margin:0 0 12px}
.mh-footer a{color:#b7c6da;display:block;margin:6px 0}.mh-footer a:hover{color:#fff;text-decoration:none}
.mh-footer .mh-fl img{height:38px;background:#fff;border-radius:8px;padding:4px 8px}
.mh-footer .mh-fl p{margin:14px 0 10px;max-width:300px}
.mh-footer .mh-fl .list-inline a{display:inline-block;margin:0 10px 0 0;font-size:18px}
.mh-footer .mh-bot{border-top:1px solid #23406a;margin-top:34px;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px}
.mh-footer .mh-loc{color:#dbe6f3;background:#16365f;border:0;font-size:13px;padding:5px 12px}

/* phones / tablets */
@media (max-width:991px){.mh-grid{grid-template-columns:1fr 1fr}.mh-feat{grid-template-columns:1fr 1fr}.mh-quick{grid-template-columns:repeat(3,1fr)}.mh-footer .mh-cols{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.mh-hero{padding:44px 0 74px}.mh-hero h1{font-size:31px}.mh-hero .lead{font-size:16px}.mh-dsearch{flex-wrap:wrap}.mh-dsearch .form-control{flex-basis:100%}.mh-dsearch .btn{flex:1}
  .mh-s{padding:44px 0}.mh-sh h2{font-size:25px}.mh-grid,.mh-feat{grid-template-columns:1fr}.mh-quick{grid-template-columns:1fr 1fr}.mh-footer .mh-cols{grid-template-columns:1fr}.mh-cta{padding:26px}}
.mh-bar .btn-primary,.mh-bar .btn-primary:hover{color:#fff!important}.mh-bar .mh-login{color:var(--mh-navy)!important}
#footer.mh-footer,.footer.mh-footer{background:var(--mh-navy)!important;color:#b7c6da!important}#footer.mh-footer .mh-bot span{color:#b7c6da}