/**
 * HostElevate brand overrides for the WHMCS Twenty-One theme.
 *
 * This file lives in the child theme, so a WHMCS update never touches it
 * and every template that is not overridden keeps coming from the parent.
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --he-emerald: #047857;
  --he-emerald-deep: #064E3B;
  --he-emerald-ink: #032A1E;
  --he-emerald-lift: #059669;
  --he-emerald-mist: #A7F3D0;
  --he-emerald-wash: #F0FAF6;
  --he-amber: #F59E0B;
  --he-amber-lift: #FBBF24;
  --he-amber-ink: #6B3B00;
  --he-ink: #14201B;
  --he-ink-mid: #4E5F58;
  --he-ink-soft: #8A9A93;
  --he-paper: #FDFCF9;
  --he-paper-tint: #F5F1E9;
  --he-line: #E6E0D4;
}

/* ===================================================================
   Base
   =================================================================== */

body, .body,
input, select, textarea, button {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

body {
  font-size: 15px;
  line-height: 1.62;
  color: var(--he-ink);
  background: var(--he-paper-tint);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5,
.panel-title, .card-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.032em;
  color: var(--he-ink);
}

h1, .h1 { font-size: 1.9rem; letter-spacing: -0.042em; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.22rem; }

a { color: var(--he-emerald); }
a:hover, a:focus { color: var(--he-emerald-deep); }

.price, .amount, .invoice-total, code, kbd, pre,
.total-due, .cart-total {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: -0.03em;
}

/* ===================================================================
   Top bar
   ===================================================================
   This strip carries notifications and the account switcher. It is
   utility furniture rather than branding, so it stays quiet: a tinted
   band that separates itself from the header without competing with the
   page beneath it.
   =================================================================== */

.topbar,
#top-nav,
.header .topbar {
  background: var(--he-paper-tint) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--he-line) !important;
  color: var(--he-ink-mid) !important;
  font-size: 0.83rem;
}

.topbar a,
.topbar .btn,
.topbar span,
.topbar .input-group-text {
  color: var(--he-ink-mid) !important;
  background: transparent !important;
  border-color: transparent !important;
  font-size: 0.83rem;
}

.topbar .btn:hover,
.topbar a:hover { color: var(--he-ink) !important; }

.topbar .btn-active-client {
  border: 1px solid var(--he-line) !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: var(--he-ink) !important;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
}

.topbar .btn-active-client:hover { border-color: var(--he-emerald) !important; }

/* ===================================================================
   Header and navigation
   =================================================================== */

#header, .header, .header-lined {
  background: var(--he-paper) !important;
  border-bottom: 1px solid var(--he-line);
  box-shadow: none;
}

/* Capped here rather than trusting the uploaded file's dimensions */
#header .logo img, #logo img,
.navbar-brand img, .logo-img {
  max-height: 32px !important;
  width: auto !important;
}

.navbar-main, #main-menu {
  background: var(--he-paper) !important;
  border: 0;
}

.navbar-main .nav-link,
#main-menu .navbar-nav > li > a {
  font-weight: 600;
  font-size: 0.93rem;
  letter-spacing: -0.015em;
  color: var(--he-ink-mid) !important;
  border-radius: 10px;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.navbar-main .nav-link:hover,
.navbar-main .nav-item.active .nav-link,
#main-menu .navbar-nav > li > a:hover,
#main-menu .navbar-nav > li.active > a {
  color: var(--he-ink) !important;
  background: var(--he-paper-tint) !important;
}

.breadcrumb-bar, #breadcrumb {
  background: var(--he-paper) !important;
  border-bottom: 1px solid var(--he-line);
}

.breadcrumb { background: transparent; font-size: 0.82rem; margin-bottom: 0; }
.breadcrumb a { color: var(--he-ink-soft); }
.breadcrumb a:hover { color: var(--he-emerald); }
.breadcrumb .active { color: var(--he-ink); font-weight: 600; }

.dropdown-menu {
  border: 1px solid var(--he-line);
  border-radius: 14px;
  box-shadow: 0 22px 48px -30px rgba(3, 42, 30, 0.4);
  padding: 0.5rem;
}

.dropdown-item { border-radius: 9px; font-size: 0.9rem; padding: 0.55rem 0.75rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--he-paper-tint); color: var(--he-ink); }

/* ===================================================================
   Dashboard tiles
   =================================================================== */

.tile {
  display: block;
  background: #FFFFFF;
  border: 1px solid var(--he-line);
  border-radius: 16px;
  padding: 1.25rem 1.35rem 1.1rem;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.tile:hover {
  transform: translateY(-3px);
  border-color: #BFE3D4;
  box-shadow: 0 22px 44px -34px rgba(3, 42, 30, 0.5);
  text-decoration: none;
}

.tile i {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  font-size: 1.5rem;
  color: var(--he-line);
  transition: color 0.2s ease;
}

.tile:hover i { color: #BFE3D4; }

.tile .stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.1rem;
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--he-ink);
}

.tile .title {
  margin-top: 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--he-ink-soft);
}

/* Four unrelated colours read as decoration. Tickets and invoices keep a
   warning tone because those two genuinely need attention. */
.tile .highlight {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
}

.tile .highlight.bg-color-blue   { background: var(--he-emerald) !important; }
.tile .highlight.bg-color-green  { background: var(--he-emerald) !important; }
.tile .highlight.bg-color-red    { background: #B91C1C !important; }
.tile .highlight.bg-color-orange { background: var(--he-amber) !important; }

/* ===================================================================
   Buttons
   ===================================================================
   Amber is the action colour on the marketing site, so the primary
   button carries it here too. Emerald stays for confirmations so the
   two are never competing for the same click.
   =================================================================== */

.btn {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.89rem;
  letter-spacing: -0.015em;
  border-radius: 11px;
  padding: 0.62rem 1.2rem;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary, .btn-info, #login,
input[type="submit"].btn-primary {
  background: var(--he-amber) !important;
  border-color: var(--he-amber) !important;
  color: var(--he-amber-ink) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover, .btn-info:focus, #login:hover {
  background: var(--he-amber-lift) !important;
  border-color: var(--he-amber-lift) !important;
  color: var(--he-amber-ink) !important;
}

.btn-success, #btnCompleteOrder, .checkout-btn {
  background: var(--he-emerald) !important;
  border-color: var(--he-emerald) !important;
  color: #FFFFFF !important;
}

.btn-success:hover, #btnCompleteOrder:hover, .checkout-btn:hover {
  background: var(--he-emerald-lift) !important;
  border-color: var(--he-emerald-lift) !important;
}

.btn-default, .btn-secondary {
  background: #FFFFFF;
  border: 1px solid var(--he-line);
  color: var(--he-ink);
}

.btn-default:hover, .btn-secondary:hover {
  border-color: var(--he-emerald);
  background: var(--he-emerald-wash);
  color: var(--he-ink);
}

.btn-link { color: var(--he-emerald); font-weight: 600; }
.btn-sm { padding: 0.42rem 0.85rem; font-size: 0.82rem; border-radius: 9px; }

/* ===================================================================
   Panels and cards
   =================================================================== */

.panel, .card, .well, .home-shortcuts {
  background: #FFFFFF;
  border: 1px solid var(--he-line);
  border-radius: 16px;
  box-shadow: none;
}

.panel-heading, .card-header {
  background: #FFFFFF;
  border-bottom: 1px solid var(--he-line);
  border-radius: 16px 16px 0 0;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.025em;
  color: var(--he-ink);
  padding: 1rem 1.2rem;
}

.panel-heading i, .card-header i { color: var(--he-emerald); margin-right: 0.4rem; }

.panel-body, .card-body { padding: 1.2rem; }

.panel-footer, .card-footer {
  background: var(--he-paper-tint);
  border-top: 1px solid var(--he-line);
  border-radius: 0 0 16px 16px;
  padding: 0.85rem 1.2rem;
  font-size: 0.85rem;
}

.panel-primary > .panel-heading,
.panel-info > .panel-heading { border-top: 3px solid var(--he-emerald); }
.panel-success > .panel-heading { border-top: 3px solid var(--he-emerald-lift); }
.panel-warning > .panel-heading { border-top: 3px solid var(--he-amber); }
.panel-danger > .panel-heading { border-top: 3px solid #B91C1C; }

#main-body { background: var(--he-paper-tint); padding-block: 2rem 3rem; }

/* ===================================================================
   Dashboard card actions
   ===================================================================
   The stock theme paints these white on a coloured background, which
   leaves the label invisible once the background classes are re-themed.
   A quiet tinted chip solves that without turning every panel header
   into a row of loud amber blocks.
   =================================================================== */

.client-home-cards .card-header .btn,
.client-home-cards .card-header .btn:hover,
.client-home-cards .card-header .btn:focus {
  color: var(--he-ink) !important;
  background: var(--he-emerald-wash) !important;
  border: 1px solid #DCEFE6 !important;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 9px;
  opacity: 1 !important;
  transform: none !important;
}

.client-home-cards .card-header .btn:hover {
  border-color: var(--he-emerald) !important;
  background: #E4F5EE !important;
}

.client-home-cards .card-header .btn i {
  margin-right: 0.3rem;
  color: var(--he-emerald) !important;
}

/* The same white-on-white applies to any bg-color-* button elsewhere */
.btn[class*="bg-color-"] {
  color: var(--he-ink) !important;
  background: var(--he-emerald-wash) !important;
  border: 1px solid #DCEFE6 !important;
}

.btn[class*="bg-color-"]:hover {
  color: var(--he-ink) !important;
  background: #E4F5EE !important;
  border-color: var(--he-emerald) !important;
}

.client-home-cards .card-footer a {
  color: var(--he-emerald) !important;
  font-weight: 600;
  font-size: 0.82rem;
}

.client-home-cards .card-footer a:hover { color: var(--he-emerald-deep) !important; }

/* ===================================================================
   Sidebar
   ===================================================================
   Panels here are stacked in a plain column. Sticky positioning was
   tried and removed: it lifted each panel out of the flow and let the
   one below overlap the button above it.
   =================================================================== */

.sidebar .panel,
.sidebar .card,
.sidebar .list-group {
  border-radius: 16px;
  border: 1px solid var(--he-line);
  margin-bottom: 1rem;
  overflow: visible;
}

.sidebar .panel-heading,
.sidebar .card-header {
  font-size: 0.88rem;
  padding: 0.8rem 1.05rem;
}

.sidebar .panel-body,
.sidebar .card-body {
  padding: 1rem 1.05rem;
  font-size: 0.87rem;
}

/* Address block is reference information, not a headline */
.sidebar address,
.sidebar .client-details {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--he-ink-mid);
  margin-bottom: 0;
}

.sidebar .list-group-item {
  border: 0;
  border-bottom: 1px solid var(--he-line);
  padding: 0.75rem 1.15rem;
  font-size: 0.89rem;
  color: var(--he-ink-mid);
  transition: background-color 0.16s ease, color 0.16s ease;
}

.sidebar .list-group-item:last-child { border-bottom: 0; }
.sidebar .list-group-item:hover { background: var(--he-paper-tint); color: var(--he-ink); }

.sidebar .list-group-item.active {
  background: var(--he-emerald-wash);
  color: var(--he-emerald-deep);
  font-weight: 600;
  border-left: 3px solid var(--he-emerald);
}

.sidebar .list-group-item i { color: var(--he-ink-soft); width: 18px; }
.sidebar .list-group-item:hover i,
.sidebar .list-group-item.active i { color: var(--he-emerald); }

/* Buttons that sit inside a sidebar panel need clearance below them */
.sidebar .panel-body .btn-block,
.sidebar .card-body .btn-block { margin-bottom: 0; }

/* ===================================================================
   Forms, login and register
   =================================================================== */

.logincontainer, #loginfrm, .login-wrapper .card {
  background: #FFFFFF;
  border: 1px solid var(--he-line);
  border-radius: 18px;
  box-shadow: 0 26px 56px -40px rgba(3, 42, 30, 0.45);
}

.form-control, .input-group .form-control, select.form-control {
  height: auto;
  padding: 0.68rem 0.9rem;
  border: 1px solid var(--he-line);
  border-radius: 11px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--he-ink);
  box-shadow: none;
}

.form-control:focus {
  border-color: var(--he-emerald);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12);
}

.form-control::placeholder { color: var(--he-ink-soft); }

.input-group-addon, .input-group-text {
  background: var(--he-paper-tint);
  border: 1px solid var(--he-line);
  color: var(--he-ink-soft);
}

label, .control-label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--he-ink-mid);
  margin-bottom: 0.35rem;
}

/* ===================================================================
   Tables
   =================================================================== */

.table { background: #FFFFFF; }

.table > thead > tr > th, .table thead th {
  background: var(--he-paper-tint);
  border-bottom: 1px solid var(--he-line);
  border-top: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--he-ink-soft);
  padding: 0.8rem 1rem;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--he-line);
  vertical-align: middle;
  padding: 0.85rem 1rem;
}

.table-hover > tbody > tr:hover { background: #F7FAF8; }

.table td .btn-group .btn,
.table td .btn-sm { border-radius: 8px; }

/* ===================================================================
   Alerts and labels
   =================================================================== */

.alert { border: 1px solid var(--he-line); border-radius: 13px; font-size: 0.9rem; }

.alert-success { background: #E4F5EE; border-color: #BFE3D4; color: var(--he-emerald-deep); }
.alert-info    { background: var(--he-emerald-wash); border-color: #BFE3D4; color: var(--he-emerald-deep); }
.alert-warning { background: #FEF3DC; border-color: #F3D9A6; color: #B45309; }
.alert-danger  { background: #FDECEC; border-color: #F2C6C6; color: #B91C1C; }

.label, .badge { font-weight: 600; border-radius: 6px; padding: 0.3em 0.6em; font-size: 0.72rem; }

.label-success, .badge-success { background: var(--he-emerald); }
.label-warning, .badge-warning { background: var(--he-amber); color: var(--he-amber-ink); }
.label-info,    .badge-info    { background: var(--he-emerald-lift); }
.label-default, .badge-default { background: var(--he-ink-soft); }

/* ===================================================================
   Portal home — product grid
   ===================================================================
   The stock layout is a masonry column flow, which staggers cards at
   different heights and makes eleven product groups feel like a wall.
   A plain grid with equal cards reads as a menu instead.
   =================================================================== */

.card-columns.home {
  column-count: unset !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.9rem;
}

.card-columns.home .card {
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
  min-height: 180px;
  border: 1px solid var(--he-line);
  border-radius: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-columns.home .card:hover {
  transform: translateY(-3px);
  border-color: #BFE3D4;
  box-shadow: 0 22px 44px -34px rgba(3, 42, 30, 0.5);
}

.card-columns.home .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.35rem 1.25rem 1.2rem !important;
  text-align: left !important;
}

.card-columns.home .card-title {
  font-size: 1.02rem !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.32;
  color: var(--he-ink);
  margin-bottom: 0.5rem;
}

/* The blurb varies wildly in length between groups, so it is clamped to
   keep every card the same height. */
.card-columns.home .card-body p {
  flex: 1 1 auto;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--he-ink-mid);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1rem;
}

.card-columns.home .btn-outline-primary {
  margin-top: auto;
  background: transparent;
  border: 1px solid var(--he-line);
  color: var(--he-emerald-deep) !important;
  font-size: 0.83rem;
  padding: 0.5rem 0.9rem;
}

.card-columns.home .card:hover .btn-outline-primary {
  border-color: var(--he-emerald);
  background: var(--he-emerald-wash);
}

/* ===================================================================
   Portal home — help and account tiles
   =================================================================== */

[class*="card-accent-"] {
  border: 1px solid var(--he-line) !important;
  border-top: 3px solid var(--he-emerald) !important;
  border-radius: 14px !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.card-accent-midnight-blue { border-top-color: var(--he-amber) !important; }

[class*="card-accent-"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -30px rgba(3, 42, 30, 0.5);
}

.ico-container i,
.ico-container .fal,
.ico-container .far,
.ico-container .fas {
  color: var(--he-ink-soft);
  transition: color 0.18s ease;
}

[class*="card-accent-"]:hover .ico-container i { color: var(--he-emerald); }

.text-center.m-4 {
  margin-block: 2.5rem 1.25rem !important;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--he-ink);
}

/* ===================================================================
   Domain search block
   =================================================================== */

#frmDomainChecker .form-control,
.domain-checker-container input[type="text"] {
  height: 52px;
  font-size: 1rem;
}

#frmDomainChecker .btn,
.domain-checker-container .btn { height: 52px; padding-inline: 1.5rem; }

/* ===================================================================
   Footer
   =================================================================== */

#footer, .footer {
  background: var(--he-emerald-ink) !important;
  border-top: 0;
  color: #8FB0A3;
  padding-block: 2rem 1.5rem;
}

#footer a, .footer a { color: #8FB0A3 !important; transition: color 0.16s ease; }
#footer a:hover, .footer a:hover { color: #FFFFFF !important; }

#footer .copyright, .footer .copyright {
  border-top: 1px solid rgba(167, 243, 208, 0.14);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  font-size: 0.8rem;
  color: #6F9184;
}

#footer .btn, .footer .btn {
  background: transparent;
  border: 1px solid rgba(167, 243, 208, 0.2);
  color: #DCEFE6 !important;
}

#footer .btn:hover, .footer .btn:hover {
  border-color: var(--he-emerald-mist);
  background: rgba(255, 255, 255, 0.06);
}

/* ===================================================================
   Order form
   =================================================================== */

.order-summary, #order-standard_cart .summary-container {
  background: #FFFFFF;
  border: 1px solid var(--he-line);
  border-radius: 16px;
}

#order-standard_cart .product, .product-card {
  border: 1px solid var(--he-line);
  border-radius: 16px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

#order-standard_cart .product:hover, .product-card:hover {
  border-color: #BFE3D4;
  transform: translateY(-2px);
}

#order-standard_cart .product-pricing .price, .product-price {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--he-ink);
}

/* ===================================================================
   Focus, for anyone using a keyboard
   =================================================================== */

a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 3px solid var(--he-amber);
  outline-offset: 2px;
}

/* ===================================================================
   Responsive
   =================================================================== */

@media (max-width: 767px) {
  .card-columns.home { grid-template-columns: 1fr; }
  .card-columns.home .card { min-height: 0; }
}