/* HatterHosting WHMCS brand layer — September 2026 */
:root {
  --hh-ink:#081b2b;
  --hh-ink-2:#153147;
  --hh-mint:#32e3ad;
  --hh-mint-dark:#0b7a5d;
  --hh-yellow:#ffd166;
  --hh-cream:#eef5f2;
  --hh-paper:#fffdf8;
  --hh-muted:#587080;
  --hh-line:#d6e3df;
  --hh-shadow:0 18px 46px rgba(8,27,43,.10);
}
html { scroll-behavior:smooth; }
body {
  background:var(--hh-paper);
  color:var(--hh-ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--hh-mint-dark); }
a:hover, a:focus { color:#075f49; }
.header {
  background:rgba(255,253,248,.96);
  border-bottom:1px solid rgba(8,27,43,.10);
  box-shadow:none;
  position:sticky;
  top:0;
  z-index:1030;
  backdrop-filter:blur(14px);
}
.header .navbar { min-height:78px; padding-top:10px; padding-bottom:10px; }
.header .navbar-brand {
  width:215px;
  height:52px;
  display:block;
  font-size:0 !important;
  background:url("https://www.hatterhosting.com/hatterhosting-logo-header.png") left center/contain no-repeat;
}
.header .toolbar .nav-link, .header .navbar-nav .nav-link { color:var(--hh-ink); font-weight:700; }
.header .form-control {
  border:1px solid #b8c5c8;
  border-radius:9px;
  min-height:44px;
  background:#fff;
}
.header .form-control:focus, .form-control:focus, .custom-select:focus {
  border-color:var(--hh-mint-dark);
  box-shadow:0 0 0 3px rgba(50,227,173,.18);
}
.main-navbar-wrapper {
  background:var(--hh-paper);
  border-top:1px solid rgba(8,27,43,.06);
  border-bottom:1px solid var(--hh-line);
}
.main-navbar-wrapper .navbar-nav .nav-link {
  color:var(--hh-ink);
  font-weight:700;
  border-radius:8px;
  padding:.78rem .9rem;
}
.main-navbar-wrapper .navbar-nav .nav-link:hover,
.main-navbar-wrapper .navbar-nav .active > .nav-link {
  color:var(--hh-mint-dark);
  background:var(--hh-cream);
}
.breadcrumb {
  background:var(--hh-cream);
  color:var(--hh-muted);
  border-radius:0;
  border-bottom:1px solid var(--hh-line);
}
#main-body {
  background:
    radial-gradient(circle at 86% 0%, rgba(50,227,173,.13), transparent 31%),
    var(--hh-paper);
  min-height:62vh;
  padding-top:44px;
  padding-bottom:70px;
}
#main-body h1, #main-body h2, #main-body h3, #main-body h4 {
  color:var(--hh-ink);
  letter-spacing:-.025em;
  font-weight:800;
}
#main-body .main-content > h2:first-child,
#main-body .main-content > .header-lined h1 {
  font-size:clamp(2rem,4vw,3.6rem);
  letter-spacing:-.045em;
}
.card, .panel, .list-group-item, .home .card {
  border:1px solid var(--hh-line) !important;
  border-radius:14px !important;
  background:#fff;
  box-shadow:var(--hh-shadow);
}
.card-header, .panel-heading {
  background:var(--hh-cream) !important;
  color:var(--hh-ink) !important;
  border-bottom:1px solid var(--hh-line) !important;
  font-weight:800;
}
.card-columns.home {
  column-gap:18px;
}
.card-columns.home > a {
  border:2px solid var(--hh-ink) !important;
  border-top:2px solid var(--hh-ink) !important;
  border-radius:14px !important;
  box-shadow:6px 6px 0 var(--hh-mint);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card-columns.home > a:nth-child(even) { box-shadow:6px 6px 0 var(--hh-yellow); }
.card-columns.home > a:hover {
  transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--hh-mint);
}
.card-columns.home > a i { color:var(--hh-mint-dark) !important; }
.btn {
  border-radius:9px;
  font-weight:750;
  min-height:44px;
}
.btn-primary, .btn-success {
  background:var(--hh-ink) !important;
  border:2px solid var(--hh-ink) !important;
  color:#fff !important;
  box-shadow:4px 4px 0 var(--hh-mint);
}
.btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-success:focus {
  background:var(--hh-ink-2) !important;
  border-color:var(--hh-ink-2) !important;
  transform:translate(-1px,-1px);
  box-shadow:6px 6px 0 var(--hh-mint);
}
.btn-outline-primary {
  color:var(--hh-ink) !important;
  border:2px solid var(--hh-ink) !important;
  background:#fff !important;
}
.btn-outline-primary:hover { background:var(--hh-cream) !important; }
.badge-primary, .label-primary { background:var(--hh-mint-dark) !important; }
.alert-info { background:#e8f8f2; border-color:#b7dfd2; color:var(--hh-ink); }
.alert-warning { background:#fff3c9; border-color:var(--hh-yellow); color:var(--hh-ink); }
.table { background:#fff; border-radius:12px; overflow:hidden; }
.table thead th { background:var(--hh-ink); color:#fff; border-color:#345065; }
.table td, .table th { border-color:var(--hh-line); }
.input-group-text { background:var(--hh-cream); border-color:#b8c5c8; color:var(--hh-ink); }
.form-control, .custom-select {
  border:1px solid #b8c5c8;
  border-radius:8px;
  min-height:46px;
  color:var(--hh-ink);
  background:#fff;
}
.modal-content {
  border:2px solid var(--hh-ink);
  border-radius:16px;
  box-shadow:10px 10px 0 var(--hh-mint);
}
.modal-header, .modal-footer { border-color:var(--hh-line); }
.footer {
  background:#06131e;
  color:#aebcc5;
  border-top:0;
  padding:46px 0 30px;
}
.footer a { color:var(--hh-mint); }
.footer .copyright { color:#8295a2; }

/* Login / client-account focus */
.logincontainer, .logincontainer .card, .client-home-cards .card {
  border-radius:16px !important;
}
.logincontainer .card {
  border:2px solid var(--hh-ink) !important;
  box-shadow:9px 9px 0 var(--hh-mint) !important;
}
.logincontainer .btn-primary { width:100%; min-height:52px; }

/* WHMCS standard cart / checkout visual readiness */
#order-standard_cart {
  color:var(--hh-ink);
}
#order-standard_cart .products .product,
#order-standard_cart .product,
#order-standard_cart .summary-container,
#order-standard_cart .order-summary,
#order-standard_cart .view-cart-items,
#order-standard_cart .view-cart-tabs .tab-content {
  border:2px solid var(--hh-ink) !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:7px 7px 0 var(--hh-mint);
}
#order-standard_cart .products .product:nth-child(even) { box-shadow:7px 7px 0 var(--hh-yellow); }
#order-standard_cart .products .product header,
#order-standard_cart .view-cart-items-header,
#order-standard_cart .order-summary h2 {
  background:var(--hh-ink) !important;
  color:#fff !important;
}
#order-standard_cart .products .product .price,
#order-standard_cart .summary-container .total-due-today {
  color:var(--hh-mint-dark) !important;
  font-weight:850 !important;
}
#order-standard_cart .btn-primary,
#order-standard_cart .btn-success {
  min-height:52px;
  font-size:1rem;
}
#order-standard_cart .field, #order-standard_cart .form-group { margin-bottom:1rem; }
#order-standard_cart .domain-selection-options .option {
  border:1px solid var(--hh-line);
  border-radius:10px;
  background:var(--hh-paper);
}
#order-standard_cart .domain-selection-options .option:hover { border-color:var(--hh-mint-dark); }
#order-standard_cart .cc-input-container,
#order-standard_cart .payment-methods {
  border-radius:12px;
  border-color:var(--hh-line);
}

/* Better touch targets and mobile behavior */
@media (max-width: 991px) {
  .header { position:relative; }
  .header .navbar { min-height:68px; }
  .header .navbar-brand { width:178px; height:44px; }
  #main-body { padding-top:28px; padding-bottom:54px; }
}
@media (max-width: 767px) {
  #main-body { padding-inline:0; }
  .container { width:min(100% - 28px, 1140px); max-width:none; }
  .card-columns.home { column-count:1; }
  .card-columns.home > a { margin-bottom:18px; }
  .btn, .form-control, .custom-select { min-height:48px; }
  #order-standard_cart .products .product,
  #order-standard_cart .summary-container,
  #order-standard_cart .order-summary { box-shadow:5px 5px 0 var(--hh-mint); }
}
@media (max-width: 430px) {
  .header .navbar-brand { width:158px; }
  .btn-primary, .btn-success { width:100%; }
}