/* ASASI360-inspired skin for NyumbaniHost WHMCS client area */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Rubik:wght@400;500;600;700&display=swap');

:root {
  --asasi-brand: #0b3d4a;
  --asasi-brand-hover: #0f4f5f;
  --asasi-brand-deep: #072a33;
  --asasi-brand-mid: #115e59;
  --asasi-soft: #f4f7f8;
  --asasi-mist: #e7f3f4;
  --asasi-accent: #16a34a;
  --asasi-accent-hover: #15803d;
  --asasi-gold: #ca8a04;
  --asasi-ink: #0f172a;
  --asasi-muted: #64748b;
  --asasi-card-shadow: 0 24px 60px -28px rgba(11, 61, 74, 0.18);
  --asasi-btn-shadow: 0 14px 28px -12px rgba(11, 61, 74, 0.45);
  --asasi-radius: 1rem;

  --primary: #0b3d4a;
  --primary-50: #e7f3f4;
  --primary-100: #d5ebee;
  --primary-200: #a8d5db;
  --primary-300: #6fb4bd;
  --primary-400: #3d8f9b;
  --primary-500: #0b3d4a;
  --primary-600: #0f4f5f;
  --primary-700: #072a33;
  --primary-800: #051f26;
  --primary-900: #031419;
}

html { font-size: 15px; }

body,
.primary-content {
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif !important;
  color: #1e293b;
  background-color: var(--asasi-soft) !important;
  background-image: radial-gradient(rgba(15, 118, 110, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}

h1, h2, h3, h4, h5, h6,
.header-lined h1,
.font-size-36 {
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 600;
  color: var(--asasi-brand-deep);
  letter-spacing: -0.02em;
}

/* Top navigation */
#main-menu,
.navbar,
.topbar,
header.header,
#header,
.master-breadcrumb + .navbar,
nav.navbar-light,
.navbar-default {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 30px -24px rgba(11, 61, 74, 0.35);
}

.navbar .navbar-brand,
.navbar-brand,
#logo a,
.logo a {
  font-family: 'Rubik', sans-serif !important;
  font-weight: 700;
  color: var(--asasi-brand) !important;
  letter-spacing: -0.03em;
}

.navbar .nav-link,
.navbar-nav > li > a,
#main-menu .navbar-nav .nav-link {
  font-family: 'Rubik', sans-serif !important;
  font-weight: 500;
  color: #475569 !important;
  border-radius: 0.75rem;
  transition: color .15s ease, background .15s ease;
}

.navbar .nav-link:hover,
.navbar-nav > li > a:hover,
#main-menu .navbar-nav .nav-link:hover,
.navbar .nav-link.active,
.navbar-nav > li.active > a {
  color: var(--asasi-brand) !important;
  background: var(--asasi-mist) !important;
}

/* Buttons */
.btn-primary,
.btn.btn-primary,
input.btn-primary,
a.btn-primary,
#main-body .btn-primary,
.panel-primary > .panel-heading {
  background-color: var(--asasi-brand) !important;
  border-color: var(--asasi-brand) !important;
  color: #fff !important;
  border-radius: var(--asasi-radius) !important;
  box-shadow: var(--asasi-btn-shadow);
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--asasi-brand-hover) !important;
  border-color: var(--asasi-brand-hover) !important;
}

.btn-success,
.btn.btn-success {
  background-color: var(--asasi-accent) !important;
  border-color: var(--asasi-accent) !important;
  border-radius: var(--asasi-radius) !important;
  font-weight: 600;
}

.btn-success:hover {
  background-color: var(--asasi-accent-hover) !important;
  border-color: var(--asasi-accent-hover) !important;
}

.btn-default,
.btn-secondary,
.btn-outline-primary {
  border-radius: var(--asasi-radius) !important;
  font-weight: 600;
}

.btn-outline-primary {
  color: var(--asasi-brand) !important;
  border-color: var(--asasi-brand) !important;
}

.btn-outline-primary:hover {
  background: var(--asasi-brand) !important;
  color: #fff !important;
}

/* Cards / panels */
.card,
.panel,
.tile,
.home-kb-search,
.dataTables_wrapper,
.list-group,
.sidebar .panel,
.card-body,
.panel-body {
  border-radius: 1.25rem !important;
}

.card,
.panel,
.tile {
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-shadow: var(--asasi-card-shadow) !important;
  background: #fff !important;
  overflow: hidden;
}

.panel-heading,
.card-header,
.tile-header {
  background: var(--asasi-mist) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important;
  color: var(--asasi-brand) !important;
  font-weight: 600;
}

.panel-primary > .panel-heading,
.card-primary .card-header {
  background: var(--asasi-brand) !important;
  color: #fff !important;
  border-color: var(--asasi-brand) !important;
}

/* Forms */
.form-control,
.custom-select,
.select2-container .select2-selection,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  border-radius: 0.9rem !important;
  border-color: #e2e8f0 !important;
  background: #f8fafc !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--asasi-brand-mid) !important;
  background: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(17, 94, 89, 0.18) !important;
}

/* Links */
a { color: var(--asasi-brand-mid); }
a:hover { color: var(--asasi-brand); }

/* Sidebar */
.sidebar .list-group-item,
.sidebar .card .list-group-item {
  border: 0 !important;
  border-radius: 0.75rem !important;
  margin: 0.15rem 0.35rem;
  color: #64748b;
  font-weight: 500;
}

.sidebar .list-group-item.active,
.sidebar .list-group-item:hover {
  background: var(--asasi-mist) !important;
  color: var(--asasi-brand) !important;
  font-weight: 600;
}

/* Homepage tiles */
.tiles .tile,
#home-banner,
.hero,
.home-shortcuts {
  border-radius: 1.25rem !important;
}

.tiles .tile {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: var(--asasi-card-shadow);
}

.tiles .tile .stat,
.tiles .tile .title {
  color: var(--asasi-brand);
}

/* Alerts */
.alert {
  border-radius: 1rem !important;
  border: 0;
}

.alert-success { background: #ecfdf5; color: #14532d; }
.alert-info { background: var(--asasi-mist); color: var(--asasi-brand-deep); }
.alert-warning { background: #fffbeb; color: #92400e; }
.alert-danger { background: #fef2f2; color: #991b1b; }

/* Tables */
.table thead th {
  background: var(--asasi-mist) !important;
  color: var(--asasi-brand) !important;
  border-bottom: 0 !important;
  font-weight: 600;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(231, 243, 244, 0.45);
}

/* Footer */
#footer,
.footer,
footer {
  background: var(--asasi-brand-deep) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-top: 0 !important;
}

#footer a,
.footer a,
footer a {
  color: #99f6e4 !important;
}

/* Login / register panels */
.logincontainer,
.providerLinkingFeedback,
#login,
.user-login {
  border-radius: 1.5rem !important;
}

/* Domain search / store accents */
.domain-checker-container,
.domain-promo-box,
.store-promos {
  border-radius: 1.25rem;
}

/* Badge / label polish */
.badge-primary,
.label-primary {
  background: var(--asasi-brand) !important;
}

.badge-success,
.label-success {
  background: var(--asasi-accent) !important;
}

/* Brand mark helper next to logo text */
.asasi-mark {
  height: 36px;
  width: 36px;
  vertical-align: middle;
  margin-right: 0.5rem;
}

.navbar-brand .logo-img, .navbar-brand .asasi-mark { height: 40px; width: auto; }
.navbar-brand { gap: .35rem; }


/* =========================================================
   ASASI360 FIXED FLOATING SIDEBAR + TOPBAR DROPDOWNS
   ========================================================= */

:root {
  --asasi-shadow: 0 24px 60px -28px rgba(11, 61, 74, 0.28);
  /* Match PFTMS superadmin: sidebar 17.5rem + left-3 + content gap ≈ 20rem */
  --asasi-sidebar-w: 17.5rem;
  --asasi-sidebar-gap: 0.75rem; /* inset-y-3 / left-3 */
  --asasi-shell-pad: 20rem; /* lg:pl-[20rem] */
}

/* Never clip topbar menus */
#header,
#header .topbar,
#header .navbar,
#header .container,
#header .navbar-collapse,
#header .navbar-nav,
.main-navbar-wrapper,
.main-navbar-wrapper .container,
.main-navbar-wrapper .navbar-collapse,
.master-breadcrumb,
.master-breadcrumb .container,
body,
html {
  overflow: visible !important;
}

/* ----- Desktop: PFTMS superadmin structure -----
   Shell: content column starts at lg:pl-[20rem]
   Sidebar: fixed inset-y-3 left-3 (separate floating card)
   Topbar: sticky in CONTENT column only — never overlaps sidebar
   ------------------------------------------------------------- */
@media (min-width: 992px) {
  body.has-asasi-sidebar {
    background-color: #f4f7f8 !important;
    background-image: radial-gradient(rgba(15, 118, 110, 0.07) 1px, transparent 1px) !important;
    background-size: 22px 22px !important;
    background-attachment: fixed !important;
    /* NO padding-top/bottom — topbar is not full-bleed over sidebar */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Content column offset — same as lg:pl-[20rem] */
  body.has-asasi-sidebar #header,
  body.has-asasi-sidebar .master-breadcrumb,
  body.has-asasi-sidebar #main-body,
  body.has-asasi-sidebar #footer,
  body.has-asasi-sidebar footer.footer {
    margin-left: var(--asasi-shell-pad) !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
  }

  /* Topbar sticky INSIDE content column (z-30 like ASASI) — separate from sidebar */
  body.has-asasi-sidebar #header {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    z-index: 30 !important;
    background: rgba(255, 255, 255, 0.90) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body.has-asasi-sidebar .master-breadcrumb {
    position: relative !important;
    top: auto !important;
    z-index: 20 !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important;
  }

  /* Footer stays in content column — not fixed over sidebar */
  body.has-asasi-sidebar #footer,
  body.has-asasi-sidebar footer.footer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 10 !important;
  }

  /* Containers inside content column — normal padding, no extra shell pad */
  body.has-asasi-sidebar #header > .topbar > .container,
  body.has-asasi-sidebar #header > .navbar > .container,
  body.has-asasi-sidebar #header > .main-navbar-wrapper > .container,
  body.has-asasi-sidebar .master-breadcrumb > .container,
  body.has-asasi-sidebar #main-body > .container,
  body.has-asasi-sidebar #footer .container,
  body.has-asasi-sidebar footer .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }

  @media (min-width: 1200px) {
    body.has-asasi-sidebar #header > .topbar > .container,
    body.has-asasi-sidebar #header > .navbar > .container,
    body.has-asasi-sidebar #header > .main-navbar-wrapper > .container,
    body.has-asasi-sidebar .master-breadcrumb > .container,
    body.has-asasi-sidebar #main-body > .container,
    body.has-asasi-sidebar #footer .container {
      padding-left: 2rem !important;
      padding-right: 2rem !important;
    }
  }

  body.has-asasi-sidebar .asasi-sidebar-col {
    position: static !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }

  body.has-asasi-sidebar .asasi-sidebar-host {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Floating sidebar — inset-y-3 left-3 w-[17.5rem] z-50 */
  body.has-asasi-sidebar .asasi-sidebar {
    position: fixed !important;
    top: var(--asasi-sidebar-gap) !important;      /* inset-y-3 */
    bottom: var(--asasi-sidebar-gap) !important;
    left: var(--asasi-sidebar-gap) !important;     /* left-3 */
    width: var(--asasi-sidebar-w) !important;
    max-width: var(--asasi-sidebar-w) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    z-index: 50 !important;
  }

  body.has-asasi-sidebar #main-body {
    min-height: calc(100vh - 3.5rem) !important;
  }

  body.has-asasi-sidebar #main-body .primary-content.col-lg-8,
  body.has-asasi-sidebar #main-body .primary-content.col-xl-9,
  body.has-asasi-sidebar #main-body .primary-content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Mobile off-canvas */
.asasi-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
}

body.asasi-sidebar-open .asasi-sidebar-backdrop {
  display: block;
}

@media (max-width: 991.98px) {
  body.has-asasi-sidebar .asasi-sidebar {
    position: fixed !important;
    top: var(--asasi-sidebar-gap) !important;
    bottom: var(--asasi-sidebar-gap) !important;
    left: var(--asasi-sidebar-gap) !important;
    width: min(17.5rem, calc(100vw - 1.5rem)) !important;
    z-index: 50 !important;
    margin: 0 !important;
    transform: translateX(calc(-100% - 1.5rem));
    transition: transform .2s ease;
  }
  body.asasi-sidebar-open .asasi-sidebar {
    transform: translateX(0);
  }
  body.has-asasi-sidebar .asasi-sidebar-col {
    flex: 0 0 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.has-asasi-sidebar #main-body .primary-content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

.asasi-sidebar {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 28rem;
  margin: 0 0 1.25rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 1.75rem;
  background: #ffffff !important;
  color: #334155;
  box-shadow: var(--asasi-shadow);
  font-family: 'Rubik', 'Jost', ui-sans-serif, system-ui, sans-serif;
}

.asasi-sidebar-brand { padding: 1.25rem 1.25rem 0.55rem; }

.asasi-sidebar-brand-link {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-decoration: none !important;
  color: inherit !important;
}

.asasi-sidebar-mark {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
}

.asasi-sidebar-brand-name {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--asasi-brand);
  line-height: 1.2;
}

.asasi-sidebar-brand-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: #94a3b8;
}

.asasi-dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: #34d399;
  flex-shrink: 0;
}

.asasi-sidebar-search {
  padding: 0 1.25rem 0.85rem;
}

.asasi-sidebar-search-label {
  position: relative;
  display: block;
  margin: 0;
}

.asasi-sidebar-search-label > i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.85rem;
  pointer-events: none;
}

.asasi-sidebar-search-input {
  width: 100% !important;
  border: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.55rem 0.35rem 0.55rem 1.45rem !important;
  font-size: 0.875rem !important;
  color: #334155 !important;
}

.asasi-sidebar-search-input:focus {
  border-bottom-color: var(--asasi-brand) !important;
  outline: none !important;
  box-shadow: none !important;
}

.asasi-sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.15rem 0.75rem 1rem;
  scroll-behavior: smooth;
}

.asasi-sidebar-section { margin: 0 0 1.15rem; }

.asasi-sidebar-section-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0 0.75rem;
  font-family: 'Rubik', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0f172a;
}

.asasi-sidebar-section-label i {
  color: var(--asasi-brand);
  font-size: 0.75rem;
}

.asasi-sidebar-accent {
  width: 2rem;
  height: 0.15rem;
  margin: 0.4rem 0 0.55rem 0.75rem;
  border-radius: 999px;
  background: var(--asasi-brand);
}

.asasi-sidebar-items {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.asasi-sidebar-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 0.85rem;
  color: #64748b !important;
  text-decoration: none !important;
  font-size: 0.925rem;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}

.asasi-sidebar-item-icon {
  display: inline-flex;
  width: 1.25rem;
  justify-content: center;
  color: #94a3b8;
}

.asasi-sidebar-item-label {
  flex: 1 1 auto;
  min-width: 0;
}

.asasi-sidebar-item:hover {
  background: rgba(231, 243, 244, 0.85);
  color: var(--asasi-brand) !important;
  font-weight: 600;
}

.asasi-sidebar-item:hover .asasi-sidebar-item-icon { color: var(--asasi-brand); }

.asasi-sidebar-item.is-active {
  background: rgba(231, 243, 244, 0.95);
  color: var(--asasi-brand) !important;
  font-weight: 650;
}

.asasi-sidebar-item.is-active .asasi-sidebar-item-icon { color: var(--asasi-brand); }

.asasi-sidebar-rail {
  position: absolute;
  top: 0.45rem;
  bottom: 0.45rem;
  right: 0;
  width: 0.25rem;
  border-radius: 999px 0 0 999px;
  background: var(--asasi-brand);
}

.asasi-sidebar-body,
.asasi-sidebar-section-footer {
  padding: 0.35rem 0.85rem 0.75rem;
  color: #64748b;
  font-size: 0.875rem;
}

.asasi-sidebar-user { padding: 0.5rem 1rem 1rem; }

.asasi-sidebar-user-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem;
  border-radius: 1rem;
  background: var(--asasi-brand);
  color: #fff;
  box-shadow: 0 14px 28px -12px rgba(11, 61, 74, 0.5);
}

.asasi-sidebar-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: rgba(255,255,255,0.15);
  font-family: 'Jost', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.asasi-sidebar-online {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: #34d399;
  border: 2px solid var(--asasi-brand);
}

.asasi-sidebar-user-meta { min-width: 0; flex: 1; }

.asasi-sidebar-user-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 650;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asasi-sidebar-user-role {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: rgba(204, 251, 241, 0.8);
}

.asasi-sidebar-user-contact {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.asasi-sidebar-user-contact-label {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(204, 251, 241, 0.55);
}

.asasi-sidebar-user-contact-value {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: #f0fdfa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asasi-sidebar-mobile-select {
  margin: 0 0 1rem;
  padding: 0 0.25rem;
}

.asasi-sidebar .card-sidebar,
.asasi-sidebar .card,
.asasi-sidebar .card-header,
.asasi-sidebar .list-group {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   TOPBAR DROPDOWNS — always readable & above content
   ========================================================= */

/* Default (no sidebar): keep header above page content */
body:not(.has-asasi-sidebar) #header,
body:not(.has-asasi-sidebar) .navbar,
body:not(.has-asasi-sidebar) .main-navbar-wrapper,
body:not(.has-asasi-sidebar) .navbar-light,
body:not(.has-asasi-sidebar) .topbar {
  position: relative;
  z-index: 1060;
}

/* With sidebar: topbar is content-column only (z-30); dropdowns still readable */
body.has-asasi-sidebar #header .dropdown-menu,
body.has-asasi-sidebar .navbar .dropdown-menu {
  z-index: 3000 !important;
}

.navbar .dropdown,
.navbar .nav-item.dropdown,
#nav > li.dropdown,
.navbar-nav .dropdown,
.navbar-nav > li.dropdown {
  position: relative !important;
}

/* Closed state */
#header .dropdown-menu,
.navbar .dropdown-menu,
#nav .dropdown-menu,
.main-navbar-wrapper .dropdown-menu,
.navbar-nav .dropdown-menu,
.collapsable-dropdown-menu.dropdown-menu {
  display: none;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  float: none !important;
  z-index: 3000 !important;
  min-width: 16rem !important;
  margin: 0.4rem 0 0 !important;
  padding: 0.5rem !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(148, 163, 184, 0.55) !important;
  border-radius: 1rem !important;
  box-shadow: 0 28px 70px -18px rgba(11, 61, 74, 0.45) !important;
  opacity: 1 !important;
  visibility: visible !important;
  clip: auto !important;
  clip-path: none !important;
  transform: none !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Open state — Bootstrap 4 uses .show on menu and/or parent */
#header .dropdown.show > .dropdown-menu,
#header .dropdown-menu.show,
.navbar .dropdown.show > .dropdown-menu,
.navbar .dropdown-menu.show,
#nav > li.dropdown.show > .dropdown-menu,
#nav > li.show > .dropdown-menu,
.navbar-nav .dropdown.show > .dropdown-menu,
.navbar-nav > li.show > .dropdown-menu,
.main-navbar-wrapper .dropdown.show > .dropdown-menu,
.main-navbar-wrapper .dropdown-menu.show {
  display: block !important;
}

#header .dropdown-menu-right,
.navbar .dropdown-menu-right,
.navbar-nav.ml-auto .dropdown-menu,
#Secondary_Navbar-Account .dropdown-menu {
  right: 0 !important;
  left: auto !important;
}

#header .dropdown-menu .asasi-dd-item,
#header .dropdown-menu li,
.navbar .dropdown-menu li,
#nav .dropdown-menu li {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

#header .dropdown-menu a,
#header .dropdown-menu a.dropdown-item,
#header .dropdown-menu .asasi-dd-link,
.navbar .dropdown-menu a,
.navbar .dropdown-menu a.dropdown-item,
#nav .dropdown-menu a,
#nav .dropdown-menu a.dropdown-item,
.main-navbar-wrapper .dropdown-menu a {
  display: block !important;
  width: 100% !important;
  padding: 0.7rem 0.95rem !important;
  margin: 0.12rem 0 !important;
  border: 0 !important;
  border-radius: 0.75rem !important;
  color: #0f172a !important;
  background: #ffffff !important;
  background-color: transparent !important;
  font-family: 'Rubik', 'Jost', sans-serif !important;
  font-size: 0.925rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  white-space: normal !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
}

#header .dropdown-menu a:hover,
#header .dropdown-menu a:focus,
.navbar .dropdown-menu a:hover,
.navbar .dropdown-menu a:focus,
#nav .dropdown-menu a:hover,
#nav .dropdown-menu a:focus,
.main-navbar-wrapper .dropdown-menu a:hover {
  background: #e7f3f4 !important;
  color: #0b3d4a !important;
  font-weight: 600 !important;
}

#header .dropdown-divider,
.navbar .dropdown-divider,
#nav .dropdown-divider {
  display: block !important;
  height: 0 !important;
  margin: 0.4rem 0.45rem !important;
  border-top: 1px solid #e2e8f0 !important;
  opacity: 1 !important;
}

/* Notifications popover */
.popover,
.popover-body,
#accountNotificationsContent,
.client-alerts {
  background: #fff !important;
  color: #0f172a !important;
  border-radius: 1rem !important;
  box-shadow: var(--asasi-shadow) !important;
  z-index: 3100 !important;
}

.client-alerts a,
.client-alerts .message {
  color: #0f172a !important;
  opacity: 1 !important;
}

.main-navbar-wrapper,
.main-navbar-wrapper .navbar-nav {
  background: #ffffff !important;
}

.main-navbar-wrapper #nav > li > a,
.main-navbar-wrapper .navbar-nav > li > a {
  color: #475569 !important;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 550 !important;
  border-radius: 0.75rem;
  padding: 0.5rem 0.9rem !important;
}

.main-navbar-wrapper #nav > li > a:hover,
.main-navbar-wrapper #nav > li.show > a,
.main-navbar-wrapper #nav > li > a:focus,
.main-navbar-wrapper .navbar-nav > li.show > a {
  color: #0b3d4a !important;
  background: #e7f3f4 !important;
}


/* White-label: remove WHMCS powered-by / brand leftovers */
.powered-by-whmcs,
a[href*="www.whmcs.com"],
a[href="http://www.whmcs.com/"],
a[href="https://www.whmcs.com/"] {
  display: none !important;
}

/* ASASI360 AUTH SHARED */
/* ASASI360 admin login — split auth layout */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Rubik:wght@400;500;600;700&display=swap');

:root {
  --asasi-brand: #0b3d4a;
  --asasi-brand-hover: #0f4f5f;
  --asasi-brand-deep: #072a33;
  --asasi-mist: #e7f3f4;
  --asasi-soft: #f4f7f8;
}

* { box-sizing: border-box; }

html, body.asasi-auth-body {
  margin: 0 !important;
  min-height: 100% !important;
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif !important;
  color: #1e293b !important;
  background: var(--asasi-soft) !important;
}

.asasi-auth-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .asasi-auth-shell {
    grid-template-columns: 1fr 1fr;
  }
}

/* Brand panel */
.asasi-auth-brand {
  position: relative;
  display: none;
  overflow: hidden;
  color: #fff;
  background: var(--asasi-brand);
}

@media (min-width: 992px) {
  .asasi-auth-brand {
    display: flex;
    flex-direction: column;
  }
}

.asasi-auth-brand-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(45, 212, 191, 0.35), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 10%, rgba(56, 189, 248, 0.28), transparent 50%),
    radial-gradient(ellipse 60% 50% at 70% 90%, rgba(251, 146, 60, 0.22), transparent 55%),
    linear-gradient(160deg, #072a33 0%, #0b3d4a 42%, #115e59 100%);
}

.asasi-auth-orb {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.asasi-auth-orb-1 {
  left: -4rem; top: 6rem;
  width: 14rem; height: 14rem;
  border: 1px solid rgba(204, 251, 241, 0.2);
  background: rgba(94, 234, 212, 0.1);
  animation: asasi-drift 9s ease-in-out infinite;
}
.asasi-auth-orb-2 {
  right: 2.5rem; top: 7rem;
  width: 7rem; height: 7rem;
  border-radius: 2rem;
  background: rgba(125, 211, 252, 0.15);
  animation: asasi-float 7s ease-in-out infinite;
}
.asasi-auth-orb-3 {
  left: 33%; bottom: 9rem;
  width: 5rem; height: 5rem;
  background: rgba(253, 186, 116, 0.2);
  animation: asasi-float 8.5s ease-in-out 0.8s infinite;
}

@keyframes asasi-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes asasi-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(12px, -10px) scale(1.04); }
}
@keyframes asasi-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.asasi-auth-brand-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem 3.5rem;
}

.asasi-auth-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff !important;
  text-decoration: none !important;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  animation: asasi-rise 0.7s ease-out both;
}
.asasi-auth-brand-link.is-dark { color: var(--asasi-brand) !important; }
.asasi-auth-mark { width: 2.75rem; height: 2.75rem; }

.asasi-auth-brand-copy {
  max-width: 28rem;
  margin: 2.5rem auto;
  animation: asasi-rise 0.7s ease-out 0.12s both;
}
.asasi-auth-illo {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  margin: 0 auto 2rem;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.25));
  animation: asasi-float 7s ease-in-out infinite;
}
.asasi-auth-headline {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.asasi-auth-tagline {
  margin: 0.85rem 0 0;
  font-size: 1.15rem;
  font-weight: 500;
  color: rgba(204, 251, 241, 0.95);
}
.asasi-auth-lead {
  margin: 1rem 0 0;
  max-width: 24rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(240, 253, 250, 0.85);
}
.asasi-auth-brand-foot {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(204, 251, 241, 0.6);
  animation: asasi-rise 0.7s ease-out 0.24s both;
}

/* Form panel */
.asasi-auth-main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 2.5rem 1.25rem;
  background:
    radial-gradient(rgba(15, 118, 110, 0.07) 1px, transparent 1px),
    var(--asasi-soft);
  background-size: 22px 22px, auto;
}

@media (min-width: 640px) {
  .asasi-auth-main { padding: 3rem 2rem; }
}
@media (min-width: 1200px) {
  .asasi-auth-main { padding-left: 4rem; padding-right: 5rem; }
}

.asasi-auth-mobile-brand {
  margin: 0 auto 1.75rem;
  width: 100%;
  max-width: 26rem;
}
@media (min-width: 992px) {
  .asasi-auth-mobile-brand { display: none; }
}

.asasi-auth-card {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: 2.25rem;
  border-radius: 1.75rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 24px 60px -28px rgba(11, 61, 74, 0.35);
  animation: asasi-rise 0.7s ease-out both;
}
@media (min-width: 640px) {
  .asasi-auth-card { padding: 2.5rem; }
}

.asasi-auth-card-head { margin-bottom: 1.6rem; }
.asasi-auth-eyebrow {
  margin: 0;
  font-family: 'Rubik', sans-serif;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 118, 110, 0.7);
}
.asasi-auth-card-head h1,
.asasi-auth-card-head h2 {
  margin: 0.45rem 0 0 !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 1.875rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.03em;
  color: #0f172a !important;
  text-align: left !important;
}
.asasi-auth-subtitle {
  margin: 0.55rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #64748b;
}

.asasi-auth-alert {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  font-size: 0.9rem;
}
.asasi-auth-alert.is-info { background: var(--asasi-mist); color: var(--asasi-brand-deep); }
.asasi-auth-alert.is-success { background: #ecfdf5; color: #14532d; }
.asasi-auth-alert.is-danger { background: #fef2f2; color: #991b1b; }

.asasi-auth-form .asasi-field,
.asasi-auth-form .form-group {
  margin-bottom: 1.1rem;
}
.asasi-field label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.875rem;
  font-weight: 550;
  color: #334155;
}
.asasi-input-wrap { position: relative !important; }
.asasi-input-icon {
  position: absolute !important;
  left: 1rem !important;
  top: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.25rem !important;
  height: auto !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.asasi-input-icon svg { width: 1.25rem !important; height: 1.25rem !important; display: block !important; }

.asasi-auth-form .form-control,
.asasi-auth-card input.form-control,
.asasi-auth-card input[type="text"],
.asasi-auth-card input[type="password"],
.asasi-auth-card input[type="email"],
.asasi-auth-card input.asasi-input {
  width: 100% !important;
  min-height: 3rem !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  color: #0f172a !important;
}
/* Full shorthand so icons never cover credentials */
.asasi-input-wrap .form-control,
.asasi-input-wrap input.form-control,
.asasi-input-wrap input.asasi-input,
.asasi-input-wrap input[type="text"],
.asasi-input-wrap input[type="password"],
.asasi-input-wrap input[type="email"] {
  padding: 0.75rem 1rem 0.75rem 3.25rem !important;
  text-indent: 0 !important;
}
.asasi-input-wrap--password .form-control,
.asasi-input-wrap--password input {
  padding: 0.75rem 3rem 0.75rem 3.25rem !important;
}
.asasi-auth-form .form-control:focus {
  border-color: #0f766e !important;
  background: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.18) !important;
}

.asasi-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.25rem 0 1.25rem;
  flex-wrap: wrap;
}
.asasi-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.875rem;
  color: #475569;
  font-weight: 500;
}
.asasi-link {
  color: #0f766e !important;
  font-size: 0.875rem !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}
.asasi-link:hover { color: var(--asasi-brand) !important; }

.asasi-auth-submit,
.asasi-auth-card .btn-primary,
.asasi-auth-card input[type="submit"],
.asasi-auth-card button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  min-height: 3rem !important;
  margin-top: 0.25rem !important;
  padding: 0.85rem 1rem !important;
  border: 0 !important;
  border-radius: 1rem !important;
  background: var(--asasi-brand) !important;
  color: #fff !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 650 !important;
  box-shadow: 0 14px 28px -12px rgba(11, 61, 74, 0.65) !important;
  cursor: pointer;
}
.asasi-auth-submit svg { width: 1rem; height: 1rem; }
.asasi-auth-submit:hover,
.asasi-auth-card .btn-primary:hover,
.asasi-auth-card input[type="submit"]:hover {
  background: var(--asasi-brand-hover) !important;
}

.asasi-auth-alt { margin: 1.1rem 0 0; text-align: center; }
.asasi-auth-meta {
  width: 100%;
  max-width: 26rem;
  margin: 1.75rem auto 0;
  text-align: center;
}
.asasi-auth-copy {
  margin: 0.85rem 0 0;
  font-size: 0.75rem;
  color: #94a3b8;
}
.asasi-lang-btn {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: var(--asasi-brand) !important;
  border-radius: 0.75rem !important;
  font-weight: 600 !important;
}




/* =========================================================
   CLIENT LOGIN — ASASI360 full-page auth overlay
   ========================================================= */

body.asasi-auth-active #header,
body.asasi-auth-active .master-breadcrumb,
body.asasi-auth-active #footer,
body.asasi-auth-active .asasi-sidebar-col,
body.asasi-auth-active .asasi-sidebar,
body.asasi-auth-active .sidebar,
body.asasi-auth-active .btn-return-to-admin,
body.asasi-auth-active .network-status,
body.asasi-auth-active #hiddencaptcha {
  /* keep captcha */
}

body.asasi-auth-active #header,
body.asasi-auth-active .master-breadcrumb,
body.asasi-auth-active #footer,
body.asasi-auth-active .asasi-sidebar-col,
body.asasi-auth-active .sidebar.asasi-sidebar-host,
body.asasi-auth-active .btn-return-to-admin {
  display: none !important;
}

body.asasi-auth-active {
  background: #f4f7f8 !important;
  padding: 0 !important;
}

body.asasi-auth-active #main-body,
body.asasi-auth-active #main-body > .container,
body.asasi-auth-active #main-body .row,
body.asasi-auth-active #main-body .primary-content {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  float: none !important;
}

body.asasi-auth-active .asasi-auth-shell--client {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  body.asasi-auth-active .asasi-auth-shell--client {
    grid-template-columns: 1fr 1fr;
  }
  body.asasi-auth-active .asasi-auth-shell--client .asasi-auth-brand {
    display: flex;
  }
}

body.asasi-auth-active .asasi-auth-shell--client .asasi-auth-brand {
  display: none;
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #0b3d4a;
  min-height: 100vh;
}

body.asasi-auth-active .card.mw-540,
body.asasi-auth-active .login-form .card {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.asasi-auth-active .asasi-auth-card .card-body,
body.asasi-auth-active .asasi-auth-card .card-footer {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.asasi-auth-active .asasi-input-wrap--password .form-control,
body.asasi-auth-active .asasi-input-wrap--password input {
  padding: 0.75rem 3rem 0.75rem 3.25rem !important;
}
body.asasi-auth-active .asasi-reveal {
  position: absolute !important;
  right: 0.35rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  background: transparent !important;
  color: #94a3b8 !important;
  z-index: 2;
  box-shadow: none !important;
}

body.asasi-auth-active .asasi-auth-form-wrap {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
}

body.asasi-auth-active .providerLinkingFeedback,
body.asasi-auth-active .linked-accounts,
body.asasi-auth-active .social-signin {
  max-width: 26rem;
  margin: 1rem auto 0;
}

/* reuse admin auth component classes already in page */


/* Back to website — under login CTA */
.asasi-auth-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  min-height: 3rem !important;
  margin-top: 0.75rem !important;
  padding: 0.85rem 1.1rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 1rem !important;
  background: #fff !important;
  color: #0b3d4a !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 650 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.asasi-auth-back svg {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0;
}
.asasi-auth-back:hover {
  background: #f8fafc !important;
  border-color: #0b3d4a !important;
  color: #0b3d4a !important;
  text-decoration: none !important;
}

body.asasi-auth-active html,
html:has(body.asasi-auth-active) {
  font-size: 16px !important;
}
body.asasi-auth-active {
  font-size: 16px !important;
}


/* =========================================================
   REGISTRATION — writing fields match login (ASASI360)
   ========================================================= */
/* Constrain registration form width so cards aren't oversized */
#registration {
  width: 100% !important;
  max-width: 44rem !important; /* ~704px — comfortable 2-col fields */
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 992px) {
  #registration {
    max-width: 40rem !important; /* tighter on desktop beside sidebar */
  }
}

body.has-asasi-sidebar #registration .card,
#registration .card {
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  border-radius: 1.75rem !important;
  box-shadow: var(--asasi-shadow) !important;
  background: #fff !important;
  overflow: visible;
}
#registration .card-body {
  padding: 1.35rem 1.35rem !important;
}
@media (min-width: 640px) {
  #registration .card-body {
    padding: 1.5rem 1.6rem !important;
  }
}
#registration .card-title,
#registration h3.card-title {
  font-family: 'Jost', sans-serif !important;
  font-weight: 650 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em;
  font-size: 1.15rem !important;
  margin-bottom: 1.25rem !important;
}

/* Field wrapper = login .asasi-input-wrap */
#registration .form-group,
#registration .form-group.prepend-icon {
  position: relative !important;
  margin-bottom: 1.25rem !important;
}

/* Icons = login .asasi-input-icon — never overlap typed text */
#registration .prepend-icon .field-icon {
  position: absolute !important;
  left: 1rem !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1.25rem !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  background: transparent !important;
  border: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  line-height: 1 !important;
  font-size: 0 !important; /* hide label text if any */
}
#registration .prepend-icon .field-icon i {
  font-size: 1rem !important;
  line-height: 1 !important;
  width: 1.25rem !important;
  text-align: center !important;
  color: #94a3b8 !important;
}

/* Inputs / selects = login asasi fields (min-h-12, rounded-2xl, pl-11) */
#registration .form-control:not(#inputPhone):not([type="tel"]),
#registration .field:not(#inputPhone):not([type="tel"]),
#registration input.field:not(#inputPhone):not([type="tel"]),
#registration input.form-control:not(#inputPhone):not([type="tel"]),
#registration select.field,
#registration select.form-control,
#registration textarea.field,
#registration textarea.form-control,
#registration .prepend-icon .field:not(#inputPhone):not([type="tel"]),
#registration .prepend-icon .form-control:not(#inputPhone):not([type="tel"]),
#registration .control .form-control:not(#inputPhone),
#registration .control input:not(#inputPhone):not([type="tel"]),
#registration .control select,
#registration .control textarea {
  width: 100% !important;
  height: auto !important;
  min-height: 3rem !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important; /* rounded-2xl */
  background: #f8fafc !important;
  box-shadow: none !important;
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: #0f172a !important;
  text-indent: 0 !important;
}

/* Left inset so icons never cover credentials (not phone — ITI handles that) */
#registration .prepend-icon .field:not(#inputPhone):not([type="tel"]),
#registration .prepend-icon .form-control:not(#inputPhone):not([type="tel"]),
#registration .prepend-icon input:not(#inputPhone):not([type="tel"]),
#registration .prepend-icon select,
#registration .prepend-icon textarea {
  padding: 0.75rem 1rem 0.75rem 3.25rem !important;
}

#registration .form-control:focus,
#registration .field:focus,
#registration input.field:focus,
#registration select.field:focus,
#registration select.form-control:focus,
#registration .prepend-icon .field:focus,
#registration .prepend-icon .form-control:focus {
  border-color: #0f766e !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.18) !important;
  outline: none !important;
}

#registration label:not(.field-icon):not(.form-check) {
  display: block !important;
  margin-bottom: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 550 !important;
  color: #334155 !important;
}

#registration .field-help-text {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #64748b;
}

#registration .btn-default.generate-password {
  min-height: 2.5rem;
  border-radius: 0.85rem !important;
  border-color: #cbd5e1 !important;
  color: #0b3d4a !important;
  font-weight: 600 !important;
}

#registration .password-strength-meter .progress {
  height: 0.55rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

/* Submit CTA = login .asasi-auth-submit */
#registration .btn-primary,
#registration input[type="submit"].btn-primary,
#registration button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 3rem !important;
  padding: 0.85rem 1.5rem !important;
  border: 0 !important;
  border-radius: 1rem !important;
  background: #0b3d4a !important;
  border-color: #0b3d4a !important;
  color: #fff !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 650 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: 0 14px 28px -12px rgba(11, 61, 74, 0.65) !important;
}
#registration .btn-primary:hover,
#registration input[type="submit"].btn-primary:hover {
  background: #0f4f5f !important;
  border-color: #0f4f5f !important;
}

#registration .form-check {
  font-size: 0.875rem;
  color: #475569;
}
#registration a {
  color: #0f766e !important;
  font-weight: 650;
}




/* =========================================================
   REGISTRATION — phone (intl-tel) + country select overlap fix
   ========================================================= */

/* Phone label */
#registration .asasi-phone-field .asasi-field-label {
  display: block !important;
  margin-bottom: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 550 !important;
  color: #334155 !important;
}

/* Never show a second icon on phone — flag/dial-code is the left UI */
#registration .asasi-phone-field .field-icon,
#registration label.field-icon[for="inputPhone"] {
  display: none !important;
}

#registration .intl-tel-input {
  width: 100% !important;
  display: block !important;
}

/* Base chrome for phone input — DO NOT set padding-left here (ITI owns it) */
#registration #inputPhone,
#registration .intl-tel-input input,
#registration .intl-tel-input input[type="tel"],
#registration .asasi-phone-field input[type="tel"] {
  width: 100% !important;
  height: auto !important;
  min-height: 3rem !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  padding-right: 0.75rem !important;
  /* padding-left intentionally omitted — set only in ITI rules below */
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: #0f172a !important;
  position: relative !important;
  z-index: 0 !important;
}

#registration #inputPhone:focus,
#registration .intl-tel-input input:focus {
  border-color: #0f766e !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.18) !important;
  outline: none !important;
}

/* Flag container on the LEFT */
#registration .intl-tel-input .flag-container,
#registration .intl-tel-input.allow-dropdown .flag-container,
#registration .intl-tel-input.separate-dial-code .flag-container {
  right: auto !important;
  left: 0 !important;
  z-index: 2 !important;
}

/* Exact ITI padding (px) with #inputPhone ID so we beat any other !important */
#registration .intl-tel-input.allow-dropdown #inputPhone,
#registration .intl-tel-input.separate-dial-code #inputPhone,
#registration .intl-tel-input.allow-dropdown input,
#registration .intl-tel-input.separate-dial-code input {
  padding-left: 52px !important;
}

#registration .intl-tel-input.separate-dial-code.iti-sdc-2 #inputPhone,
#registration .intl-tel-input.separate-dial-code.iti-sdc-2 input {
  padding-left: 66px !important;
}
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 #inputPhone,
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input {
  padding-left: 76px !important;
}

#registration .intl-tel-input.separate-dial-code.iti-sdc-3 #inputPhone,
#registration .intl-tel-input.separate-dial-code.iti-sdc-3 input {
  padding-left: 74px !important;
}
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 #inputPhone,
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input {
  padding-left: 84px !important;
}

#registration .intl-tel-input.separate-dial-code.iti-sdc-4 #inputPhone,
#registration .intl-tel-input.separate-dial-code.iti-sdc-4 input {
  padding-left: 82px !important;
}
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 #inputPhone,
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input {
  padding-left: 92px !important;
}

#registration .intl-tel-input.separate-dial-code.iti-sdc-5 #inputPhone,
#registration .intl-tel-input.separate-dial-code.iti-sdc-5 input {
  padding-left: 90px !important;
}
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 #inputPhone,
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input {
  padding-left: 100px !important;
}

/* Safe fallback before/without sdc class: room for flag + dial code */
#registration .asasi-phone-field .intl-tel-input #inputPhone {
  padding-left: 92px !important;
}

#registration .intl-tel-input .selected-flag {
  z-index: 3 !important;
  height: 100% !important;
}
#registration .intl-tel-input.separate-dial-code .selected-dial-code {
  display: table-cell !important;
  vertical-align: middle !important;
  padding-left: 28px !important;
  color: #334155 !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.95rem !important;
  white-space: nowrap !important;
}

/* Country select: icon clear of option text */
#registration .asasi-country-field,
#registration .prepend-icon:has(#inputCountry) {
  position: relative !important;
}
#registration #inputCountry,
#registration select.asasi-select-with-icon,
#registration .asasi-country-field select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding: 0.75rem 2.5rem 0.75rem 3.25rem !important;
  background-color: #f8fafc !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  background-size: 1rem 1rem !important;
  text-indent: 0 !important;
  line-height: 1.4 !important;
}
#registration .asasi-country-field .field-icon,
#registration label#inputCountryIcon {
  left: 1rem !important;
  width: 1.25rem !important;
  z-index: 2 !important;
}


#registration .row {
  margin-left: -0.5rem !important;
  margin-right: -0.5rem !important;
}
#registration .row > [class*="col-"] {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
#registration .form-group,
#registration .form-group.prepend-icon {
  margin-bottom: 1rem !important;
}


/* =========================================================
   ALL SIDEBAR PAGES — match registration shell + content look
   ========================================================= */

/* Content column: ASASI-style readable width (max-w-7xl), centered */
@media (min-width: 992px) {
  body.has-asasi-sidebar #main-body > .container {
    max-width: 80rem !important; /* ~max-w-7xl */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
  }
  body.has-asasi-sidebar #header > .topbar > .container,
  body.has-asasi-sidebar #header > .navbar > .container,
  body.has-asasi-sidebar #header > .main-navbar-wrapper > .container,
  body.has-asasi-sidebar .master-breadcrumb > .container,
  body.has-asasi-sidebar #footer .container {
    max-width: 80rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* Soft page canvas already set on body.has-asasi-sidebar */

/* Cards / panels — same as registration */
body.has-asasi-sidebar .primary-content .card,
body.has-asasi-sidebar .primary-content .panel,
body.has-asasi-sidebar .primary-content .panel-default,
body.has-asasi-sidebar .primary-content .tile,
body.has-asasi-sidebar .primary-content .client-home-panels .panel {
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  border-radius: 1.75rem !important;
  box-shadow: var(--asasi-shadow) !important;
  background: #fff !important;
  overflow: visible !important;
}
body.has-asasi-sidebar .primary-content .card-body,
body.has-asasi-sidebar .primary-content .panel-body {
  padding: 1.35rem 1.35rem !important;
}
@media (min-width: 640px) {
  body.has-asasi-sidebar .primary-content .card-body,
  body.has-asasi-sidebar .primary-content .panel-body {
    padding: 1.5rem 1.6rem !important;
  }
}
body.has-asasi-sidebar .primary-content .card-title,
body.has-asasi-sidebar .primary-content .panel-title,
body.has-asasi-sidebar .primary-content h1,
body.has-asasi-sidebar .primary-content h2.card-title,
body.has-asasi-sidebar .primary-content h3.card-title {
  font-family: 'Jost', sans-serif !important;
  font-weight: 650 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em;
}
body.has-asasi-sidebar .primary-content .card-header,
body.has-asasi-sidebar .primary-content .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 1.75rem 1.75rem 0 0 !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 650 !important;
  color: #0f172a !important;
}

/* Form fields sitewide on sidebar pages — match login/register */
body.has-asasi-sidebar .primary-content .form-group.prepend-icon {
  position: relative !important;
  margin-bottom: 1.1rem !important;
}
body.has-asasi-sidebar .primary-content .prepend-icon .field-icon {
  position: absolute !important;
  left: 1rem !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  background: transparent !important;
  border: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.has-asasi-sidebar .primary-content .prepend-icon .field-icon i {
  font-size: 1rem !important;
  color: #94a3b8 !important;
}
body.has-asasi-sidebar .primary-content .form-control,
body.has-asasi-sidebar .primary-content .field,
body.has-asasi-sidebar .primary-content input.form-control,
body.has-asasi-sidebar .primary-content select.form-control,
body.has-asasi-sidebar .primary-content textarea.form-control {
  min-height: 3rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 1rem !important;
  color: #0f172a !important;
}
body.has-asasi-sidebar .primary-content .prepend-icon .field,
body.has-asasi-sidebar .primary-content .prepend-icon .form-control,
body.has-asasi-sidebar .primary-content .prepend-icon input:not([type="tel"]):not(#inputPhone),
body.has-asasi-sidebar .primary-content .prepend-icon select,
body.has-asasi-sidebar .primary-content .prepend-icon textarea {
  padding: 0.75rem 1rem 0.75rem 3.25rem !important;
}
body.has-asasi-sidebar .primary-content .form-control:not(.prepend-icon *):not(#inputPhone),
body.has-asasi-sidebar .primary-content input.form-control:not(#inputPhone):not([type="tel"]),
body.has-asasi-sidebar .primary-content select.form-control,
body.has-asasi-sidebar .primary-content textarea.form-control {
  padding: 0.75rem 1rem !important;
}
body.has-asasi-sidebar .primary-content .form-control:focus,
body.has-asasi-sidebar .primary-content .field:focus {
  border-color: #0f766e !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.18) !important;
  outline: none !important;
}
body.has-asasi-sidebar .primary-content .btn-primary,
body.has-asasi-sidebar .primary-content input[type="submit"].btn-primary {
  min-height: 3rem !important;
  border-radius: 1rem !important;
  background: #0b3d4a !important;
  border-color: #0b3d4a !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 650 !important;
  box-shadow: 0 14px 28px -12px rgba(11, 61, 74, 0.55) !important;
}
body.has-asasi-sidebar .primary-content .btn-primary:hover {
  background: #0f4f5f !important;
  border-color: #0f4f5f !important;
}

/* Lists / KB articles / tables sit comfortably in cards */
body.has-asasi-sidebar .primary-content .list-group {
  border-radius: 1rem !important;
  overflow: hidden;
}
body.has-asasi-sidebar .primary-content .list-group-item {
  border-color: rgba(148, 163, 184, 0.35) !important;
}
body.has-asasi-sidebar .primary-content .table {
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
}



/* =========================================================
   HOMEPAGE — HostPinnacle structure + ASASI360 design
   ========================================================= */

body.asasi-marketing-home {
  background: #f4f7f8 !important;
  background-image: radial-gradient(rgba(15, 118, 110, 0.07) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
}
body.asasi-marketing-home #main-body,
body.asasi-marketing-home #main-body > .container,
body.asasi-marketing-home .primary-content {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  float: none !important;
}
body.asasi-marketing-home .master-breadcrumb {
  display: none !important;
}
/* Hide default WHMCS domain search strip — homepage has its own */
body.asasi-marketing-home .home-domain-search {
  display: none !important;
}

.nh-home {
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
  color: #1e293b;
}
.nh-home .container {
  max-width: 1140px;
}
.nh-section-eyebrow,
.nh-promo-eyebrow {
  margin: 0 0 0.5rem;
  font-family: 'Rubik', sans-serif;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15, 118, 110, 0.85);
}
.nh-section-title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  color: #072a33;
}
.nh-lead {
  max-width: 46rem;
  margin: 0 0 1rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: #475569;
}
.nh-section-head { margin-bottom: 2rem; }
.nh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0.7rem 1.25rem;
  border-radius: 1rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.9375rem;
  font-weight: 650;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nh-btn-primary {
  background: #0b3d4a !important;
  color: #fff !important;
  box-shadow: 0 14px 28px -12px rgba(11, 61, 74, 0.55);
}
.nh-btn-primary:hover { background: #0f4f5f !important; color: #fff !important; }
.nh-btn-outline {
  background: #fff !important;
  color: #0b3d4a !important;
  border-color: #cbd5e1 !important;
}
.nh-btn-outline:hover { border-color: #0b3d4a !important; }
.nh-btn-ghost {
  background: transparent !important;
  color: #0b3d4a !important;
  border-color: rgba(11, 61, 74, 0.25) !important;
}
.nh-btn-light {
  background: #fff !important;
  color: #0b3d4a !important;
}

/* Promos */
.nh-hero-promos {
  padding: 2rem 0 1rem;
}
.nh-promo-card {
  height: 100%;
  margin-bottom: 1.25rem;
  padding: 1.6rem 1.5rem;
  border-radius: 1.75rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 24px 60px -28px rgba(11, 61, 74, 0.22);
}
.nh-promo-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.45rem;
  font-weight: 650;
  color: #072a33;
  letter-spacing: -0.02em;
}
.nh-promo-price { color: #475569; margin-bottom: 0.85rem; }
.nh-promo-price strong { color: #0b3d4a; }
.nh-promo-card ul {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.nh-promo-card li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.15rem;
  color: #475569;
  font-size: 0.92rem;
}
.nh-promo-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #14b8a6;
}
.nh-promo-vps { background: linear-gradient(165deg, #fff 55%, #e7f3f4 100%); }
.nh-promo-wp { background: linear-gradient(165deg, #fff 55%, #ecfdf5 100%); }
.nh-promo-reseller { background: linear-gradient(165deg, #fff 55%, #f0f9ff 100%); }

/* Domain */
.nh-domain-section {
  padding: 2.5rem 0 3rem;
}
.nh-domain-form { max-width: 44rem; margin: 0 auto 1.75rem; }
.nh-domain-searchbar {
  display: flex;
  gap: 0.65rem;
  padding: 0.45rem;
  border-radius: 1.25rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 18px 40px -24px rgba(11, 61, 74, 0.35);
}
.nh-domain-input {
  flex: 1;
  min-height: 3rem;
  border: 0 !important;
  background: transparent !important;
  padding: 0 1rem !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}
.nh-domain-input:focus { outline: none; }
.nh-tld-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .nh-tld-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .nh-tld-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.nh-tld {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
  padding: 0.85rem;
  border-radius: 1.15rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.35);
  text-decoration: none !important;
  color: inherit;
}
.nh-tld-ext { font-weight: 700; color: #0b3d4a; font-size: 1.05rem; }
.nh-tld-price { font-size: 0.8rem; color: #64748b; margin-top: 0.25rem; }
.nh-tld-all small { display: block; color: #94a3b8; font-size: 0.7rem; }

/* Welcome */
.nh-welcome { padding: 1rem 0 3rem; }
.nh-welcome-inner {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}
.nh-welcome-inner .nh-lead { margin-left: auto; margin-right: auto; }
.nh-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
}

/* Plans */
.nh-plans { padding: 1rem 0 3rem; }
.nh-plan-card {
  position: relative;
  height: 100%;
  margin-bottom: 1.25rem;
  padding: 1.5rem 1.25rem 1.35rem;
  border-radius: 1.75rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 20px 50px -30px rgba(11, 61, 74, 0.28);
  display: flex;
  flex-direction: column;
}
.nh-plan-card.is-popular {
  border-color: rgba(11, 61, 74, 0.45);
  box-shadow: 0 24px 60px -24px rgba(11, 61, 74, 0.4);
  background: linear-gradient(180deg, #e7f3f4 0%, #fff 38%);
}
.nh-plan-badge {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: #0b3d4a;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nh-plan-card h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 650;
  color: #072a33;
}
.nh-plan-tag { margin: 0.35rem 0 0.75rem; color: #64748b; font-size: 0.9rem; }
.nh-plan-price {
  margin: 0;
  color: #0b3d4a;
  font-size: 1.1rem;
}
.nh-plan-price strong { font-size: 1.55rem; }
.nh-plan-price span { color: #64748b; font-size: 0.9rem; font-weight: 500; }
.nh-plan-note { margin: 0.15rem 0 1rem; font-size: 0.75rem; color: #94a3b8; }
.nh-plan-card ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  flex: 1;
}
.nh-plan-card li {
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  font-size: 0.9rem;
  color: #334155;
}
.nh-plan-card .nh-btn { width: 100%; }
.nh-mini-group {
  display: block;
  padding: 1rem 1.1rem;
  border-radius: 1.15rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.35);
  text-decoration: none !important;
  color: inherit;
}
.nh-mini-group strong { display: block; color: #0b3d4a; }
.nh-mini-group span { font-size: 0.85rem; color: #64748b; }
.nh-dynamic-groups { margin-top: 2rem; }

/* SMS */
.nh-sms-cta { padding: 0 0 3rem; }
.nh-sms-card {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  border-radius: 1.75rem;
  background: linear-gradient(135deg, #072a33 0%, #0b3d4a 45%, #115e59 100%);
  color: #fff;
  box-shadow: 0 24px 60px -28px rgba(11, 61, 74, 0.55);
}
.nh-sms-card .nh-promo-eyebrow { color: rgba(204, 251, 241, 0.9); }
.nh-sms-card h2 { margin: 0 0 0.5rem; font-size: 1.6rem; font-weight: 650; color: #fff; }
.nh-sms-card p { margin: 0; max-width: 40rem; color: rgba(240, 253, 250, 0.88); }

/* VPS */
.nh-vps-block { padding: 1rem 0 3rem; }
.nh-feature-mini { margin: 1.25rem 0 1.5rem; }
.nh-feature-mini span {
  display: block;
  margin-bottom: 0.65rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.9rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.35);
  font-size: 0.9rem;
  font-weight: 600;
  color: #0b3d4a;
}
.nh-vps-panel {
  display: grid;
  gap: 0.85rem;
  padding: 1.5rem;
  border-radius: 1.75rem;
  background: #0b3d4a;
  color: #fff;
  min-height: 16rem;
  align-content: center;
}
.nh-vps-stat strong { display: block; font-size: 1.75rem; letter-spacing: -0.02em; }
.nh-vps-stat span { color: rgba(204, 251, 241, 0.85); font-size: 0.9rem; }

/* Why */
.nh-why { padding: 1rem 0 3rem; }
.nh-why-card {
  height: 100%;
  margin-bottom: 1rem;
  padding: 1.35rem 1.2rem;
  border-radius: 1.35rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.35);
}
.nh-why-card h3 { margin: 0 0 0.5rem; font-size: 1.05rem; color: #072a33; font-weight: 650; }
.nh-why-card p { margin: 0; color: #64748b; font-size: 0.92rem; line-height: 1.55; }

/* Speed */
.nh-speed { padding: 0 0 3rem; }
.nh-speed-card {
  padding: 2.25rem;
  border-radius: 1.75rem;
  background: linear-gradient(160deg, #e7f3f4 0%, #fff 55%);
  border: 1px solid rgba(148, 163, 184, 0.35);
}
.nh-speed-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
}
.nh-speed-list li {
  padding-left: 1rem;
  position: relative;
  color: #334155;
  font-weight: 550;
}
.nh-speed-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55rem;
  width: 0.45rem; height: 0.45rem;
  border-radius: 999px;
  background: #0b3d4a;
}

/* Testimonials */
.nh-testimonials { padding: 0 0 3rem; }
.nh-quote {
  height: 100%;
  margin: 0 0 1rem;
  padding: 1.4rem 1.25rem;
  border-radius: 1.35rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 18px 40px -28px rgba(11, 61, 74, 0.25);
}
.nh-quote p {
  margin: 0 0 1rem;
  color: #334155;
  line-height: 1.6;
  font-size: 0.98rem;
}
.nh-quote footer {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.nh-quote strong { color: #0b3d4a; }
.nh-quote span { color: #94a3b8; font-size: 0.85rem; }

/* Help */
.nh-help { padding: 0 0 3.5rem; }
.nh-help-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 7rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 1.35rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.35);
  text-decoration: none !important;
  color: #0b3d4a !important;
  font-weight: 650;
  text-align: center;
}
.nh-help-link i { font-size: 1.45rem; color: #0f766e; }
.nh-help-link:hover { border-color: #0b3d4a; background: #e7f3f4; }

/* Footer marketing columns */
.nh-footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .nh-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .nh-footer-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.nh-footer-col h5 {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(204, 251, 241, 0.95);
  font-weight: 700;
}
.nh-footer-col a {
  display: block;
  margin: 0.35rem 0;
  color: rgba(255,255,255,0.82) !important;
  text-decoration: none !important;
  font-size: 0.9rem;
}
.nh-footer-col a:hover { color: #99f6e4 !important; }
.nh-footer-contact p {
  margin: 0.3rem 0;
  color: rgba(255,255,255,0.82);
  font-size: 0.88rem;
}


/* Marketing mega-nav (homepage) */
.nh-marketing-nav {
  background: #0b3d4a;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.nh-marketing-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0.65rem 0;
  list-style: none;
}
.nh-mnav-item { position: relative; }
.nh-mnav-item > a {
  color: rgba(240, 253, 250, 0.95) !important;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nh-mnav-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 14rem;
  padding: 0.75rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 20px 50px -24px rgba(11, 61, 74, 0.45);
}
.nh-mnav-item:hover .nh-mnav-panel { display: block; }
.nh-mnav-panel a {
  display: block;
  padding: 0.45rem 0.65rem;
  border-radius: 0.65rem;
  color: #0b3d4a !important;
  text-decoration: none !important;
  font-size: 0.9rem;
  font-weight: 550;
}
.nh-mnav-panel a:hover { background: #e7f3f4; }
body.asasi-marketing-home #header {
  margin-left: 0 !important;
  width: 100% !important;
}
body.asasi-marketing-home #footer {
  margin-left: 0 !important;
  width: 100% !important;
}