/*!
 * TechTemple WHMCS Portal – Custom Theme Override
 * Targets: WHMCS Twenty-One theme (Bootstrap 4)
 * Brand: Navy #0B1F3A / Teal #00C4D4 / Inter font
 * Place this file at:
 *   ~/public_html/portal.techtemple.com.au/templates/twenty-one/css/custom.css
 * It is auto-loaded by head.tpl via the {assetExists} block.
 */

/* =====================================================================
   0. GOOGLE FONTS – Inter
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* =====================================================================
   1. CSS CUSTOM PROPERTIES (brand tokens)
   ===================================================================== */
:root {
  --tt-navy-deep:      #071528;
  --tt-navy:           #0B1F3A;
  --tt-navy-mid:       #0D2744;
  --tt-navy-card:      rgba(13, 39, 68, 0.85);
  --tt-teal:           #00C4D4;
  --tt-teal-dark:      #00A8B8;
  --tt-teal-glow:      rgba(0, 196, 212, 0.15);
  --tt-teal-border:    rgba(0, 196, 212, 0.2);
  --tt-teal-border-h:  rgba(0, 196, 212, 0.5);
  --tt-text:           #E8EDF5;
  --tt-text-muted:     rgba(232, 237, 245, 0.55);
  --tt-text-subtle:    rgba(232, 237, 245, 0.35);
  --tt-header-bg:      rgba(7, 21, 40, 0.96);
  --tt-input-bg:       rgba(7, 21, 40, 0.6);
  --tt-input-border:   rgba(0, 196, 212, 0.25);
  --tt-radius:         8px;
  --tt-radius-sm:      6px;
  --tt-radius-lg:      12px;
  --tt-shadow:         0 4px 24px rgba(0, 0, 0, 0.35);
  --tt-shadow-teal:    0 0 20px rgba(0, 196, 212, 0.12);
  --tt-transition:     0.2s ease;
}

/* =====================================================================
   2. BASE / RESET
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body,
body.primary-bg-color {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--tt-text) !important;
  background-color: var(--tt-navy) !important;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(0, 196, 212, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(0, 196, 212, 0.04) 0%, transparent 50%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

/* Links */
a {
  color: var(--tt-teal);
  transition: color var(--tt-transition), opacity var(--tt-transition);
}
a:hover {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
}

/* Horizontal rules */
hr {
  border-color: var(--tt-teal-border);
  opacity: 0.6;
}

/* Text helpers */
.text-muted {
  color: var(--tt-text-muted) !important;
}
.text-primary {
  color: var(--tt-teal) !important;
}
small, .small {
  color: var(--tt-text-muted);
}

/* =====================================================================
   3. HEADER / NAVBAR
   ===================================================================== */
#header,
.header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--tt-header-bg) !important;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--tt-teal-border);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* Top notification bar */
.topbar {
  background: rgba(7, 21, 40, 0.7) !important;
  border-bottom: 1px solid var(--tt-teal-border);
  padding: 0.35rem 0;
  font-size: 0.8125rem;
}
.topbar .btn {
  color: var(--tt-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: var(--tt-radius-sm);
  background: transparent;
  border: 1px solid transparent;
  transition: all var(--tt-transition);
}
.topbar .btn:hover {
  color: var(--tt-teal);
  border-color: var(--tt-teal-border);
  background: var(--tt-teal-glow);
}

/* Active client display */
.input-group.active-client .input-group-text {
  background: transparent;
  border-color: var(--tt-teal-border);
  color: var(--tt-text-muted);
  font-size: 0.8125rem;
}
.btn-active-client {
  background: rgba(0, 196, 212, 0.1) !important;
  border-color: var(--tt-teal-border) !important;
  color: var(--tt-teal) !important;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--tt-radius-sm) !important;
}
.btn-active-client:hover {
  background: rgba(0, 196, 212, 0.2) !important;
  color: #ffffff !important;
}
.btn-return-to-admin {
  background: rgba(255, 165, 0, 0.12) !important;
  border-color: rgba(255, 165, 0, 0.3) !important;
  color: #ffa500 !important;
  border-radius: var(--tt-radius-sm) !important;
  font-size: 0.8125rem;
}

/* Brand logo row */
.navbar.navbar-light {
  background: transparent !important;
  padding: 0.6rem 0;
}

/* TechTemple logo */
.navbar-brand {
  padding: 0;
  margin-right: 2rem;
}
.navbar-brand .logo-img {
  height: 38px;
  width: auto;
  filter: brightness(1.05);
  transition: opacity var(--tt-transition);
}
.navbar-brand:hover .logo-img {
  opacity: 0.85;
}
.navbar-brand:hover {
  text-decoration: none;
}

/* Fallback text brand */
.navbar-brand:not(:has(.logo-img)) {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--tt-teal) !important;
  letter-spacing: -0.02em;
}

.navbar-brand .logo-img {
  height: 40px !important;
  width: auto;
}

/* Search bar in header */
.navbar .input-group.search .form-control {
  background: var(--tt-input-bg);
  border-color: var(--tt-input-border);
  color: var(--tt-text);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  border-radius: 0 var(--tt-radius-sm) var(--tt-radius-sm) 0;
}
.navbar .input-group.search .form-control:focus {
  background: rgba(7, 21, 40, 0.85);
  border-color: var(--tt-teal);
  box-shadow: 0 0 0 3px var(--tt-teal-glow);
  color: #ffffff;
}
.navbar .input-group.search .form-control::placeholder {
  color: var(--tt-text-subtle);
}
.navbar .input-group.search .btn {
  background: var(--tt-input-bg);
  border-color: var(--tt-input-border);
  color: var(--tt-text-muted);
  border-radius: var(--tt-radius-sm) 0 0 var(--tt-radius-sm);
}
.navbar .input-group.search .btn:hover {
  color: var(--tt-teal);
  border-color: var(--tt-teal-border-h);
}

/* Cart & toolbar icons */
.navbar-nav.toolbar .nav-link,
.navbar-nav.toolbar .btn.nav-link {
  color: var(--tt-text-muted) !important;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--tt-radius-sm);
  padding: 0.45rem 0.75rem;
  transition: all var(--tt-transition);
  font-size: 1rem;
}
.navbar-nav.toolbar .nav-link:hover,
.navbar-nav.toolbar .btn.nav-link:hover {
  color: var(--tt-teal) !important;
  border-color: var(--tt-teal-border);
  background: var(--tt-teal-glow);
}

/* Main navigation bar */
.navbar.main-navbar-wrapper,
.navbar.navbar-expand-xl.main-navbar-wrapper {
  background: rgba(10,26,46,.98) !important;
  border-top: 1px solid rgba(0, 196, 212, 0.12);
  padding: 0;
}

.master-breadcrumb {
  background: rgba(7, 21, 40, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--tt-teal-border);
}

.master-breadcrumb .breadcrumb {
  margin-bottom: 0;
  padding: 0.9rem 0;
}

.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a {
  color: var(--tt-text-muted);
}

#main-body {
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}

.card,
.tile,
.dashboard-stat,
.panel,
.modal-content,
.dataTables_wrapper .listtable,
.table-container,
.search-box,
.knowledgebase-article,
.domain-checker-container,
.product-status,
.status-box,
.client-home-panels .panel,
.support-ticket-panel {
  background: linear-gradient(180deg, rgba(13, 39, 68, 0.88), rgba(7, 21, 40, 0.96)) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: var(--tt-shadow) !important;
  border-radius: var(--tt-radius-lg) !important;
  color: var(--tt-text);
}

.card-body,
.card-footer,
.list-group-item,
.table th,
.table td,
.modal-header,
.modal-footer {
  border-color: rgba(255, 255, 255, 0.07) !important;
}

.list-group-item,
.table,
.table-striped tbody tr:nth-of-type(odd),
.table-hover tbody tr:hover {
  background-color: transparent !important;
  color: var(--tt-text);
}

.panel-heading,
.card-header,
.section-heading {
  background: transparent !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-default,
.btn.btn-primary {
  background: var(--tt-teal) !important;
  border-color: var(--tt-teal) !important;
  color: #071528 !important;
  font-weight: 700;
  border-radius: var(--tt-radius-sm);
  box-shadow: var(--tt-shadow-teal);
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-default:hover,
.btn.btn-primary:hover {
  background: var(--tt-teal-dark) !important;
  border-color: var(--tt-teal-dark) !important;
  color: #071528 !important;
}

.btn-secondary,
.btn-outline-primary,
.btn-light {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--tt-teal-border) !important;
  color: var(--tt-text) !important;
  border-radius: var(--tt-radius-sm);
}

.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"] {
  background: var(--tt-input-bg) !important;
  border-color: var(--tt-input-border) !important;
  color: var(--tt-text) !important;
  border-radius: var(--tt-radius-sm) !important;
}

.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
input:focus {
  border-color: var(--tt-teal) !important;
  box-shadow: 0 0 0 3px var(--tt-teal-glow) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--tt-text-subtle) !important;
}

.dropdown-menu,
.popover,
.alert,
.modal-content {
  background: rgba(7, 21, 40, 0.97) !important;
  color: var(--tt-text);
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.nav-tabs,
.nav-tabs .nav-link,
.nav-pills .nav-link {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  background: rgba(0, 196, 212, 0.14) !important;
  border-color: var(--tt-teal-border-h) !important;
  color: var(--tt-teal) !important;
}

#footer.footer {
  margin-top: 3rem;
  padding: 2rem 0 3rem;
  background: transparent;
  border-top: 1px solid var(--tt-teal-border);
}

#footer .nav-link,
#footer .btn,
#footer .copyright {
  color: var(--tt-text-muted) !important;
}

#footer .nav-link:hover {
  color: var(--tt-teal) !important;
}

/* Chatbot */
.tt-chatbot {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.tt-chatbot__launcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 196, 212, 0.98), rgba(19, 227, 242, 0.86));
  color: #071528;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22), 0 8px 24px rgba(0, 196, 212, 0.25);
  border: 0;
}

.tt-chatbot__launcher-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #071528;
  box-shadow: 0 0 0 6px rgba(7, 21, 40, 0.12);
}

.tt-chatbot__panel {
  width: min(380px, calc(100vw - 32px));
  max-height: min(78vh, 720px);
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: radial-gradient(circle at top right, rgba(0, 196, 212, 0.18), transparent 34%), linear-gradient(180deg, rgba(13, 39, 68, 0.98), rgba(7, 21, 40, 0.98));
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(16px);
}

.tt-chatbot__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tt-chatbot__eyebrow {
  margin-bottom: 6px;
  color: var(--tt-teal);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tt-chatbot__header h3 {
  color: #fff;
  font-size: 20px;
  line-height: 1.1;
  margin: 0;
}

.tt-chatbot__header-actions {
  display: flex;
  gap: 8px;
}

.tt-chatbot__ghost {
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px;
  border: 0;
}

.tt-chatbot__ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.tt-chatbot__quick-actions {
  display: flex;
  gap: 8px;
  padding: 14px 20px 0;
  overflow-x: auto;
}

.tt-chatbot__quick-actions button {
  flex: 0 0 auto;
  padding: 10px 12px;
  border: 1px solid rgba(0, 196, 212, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 600;
}

.tt-chatbot__messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  overflow-y: auto;
}

.tt-chatbot__message {
  max-width: 92%;
  padding: 12px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.tt-chatbot__message--assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  border-top-left-radius: 8px;
}

.tt-chatbot__message--user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(0, 196, 212, 0.94), rgba(74, 236, 249, 0.84));
  color: #041320;
  border-top-right-radius: 8px;
  font-weight: 600;
}

.tt-chatbot__form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 0 20px 16px;
}

.tt-chatbot__input {
  width: 100%;
  min-height: 48px;
  max-height: 120px;
  resize: none;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.tt-chatbot__send {
  flex: 0 0 auto;
  padding: 13px 16px;
  border-radius: 16px;
  background: var(--tt-teal);
  color: #071528;
  font-weight: 800;
  border: 0;
}

.tt-chatbot__send:disabled,
.tt-chatbot__quick-actions button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.tt-chatbot__hint {
  padding: 0 20px 18px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .tt-chatbot {
    right: 12px;
    bottom: 12px;
    left: 12px;
    align-items: stretch;
  }

  .tt-chatbot__launcher {
    align-self: flex-end;
  }

  .tt-chatbot__panel {
    width: 100%;
    max-height: calc(100vh - 96px);
  }
}

/* Final nav readability overrides */
.navbar.main-navbar-wrapper,
.navbar.navbar-expand-xl.main-navbar-wrapper {
  background: #0b1d33 !important;
  border-top: 1px solid rgba(0, 196, 212, 0.16) !important;
  border-bottom: 1px solid rgba(0, 196, 212, 0.14) !important;
}

#nav.navbar-nav .nav-item > .nav-link,
.navbar-nav .nav-item > .nav-link,
.navbar-nav .nav-item > .dropdown-toggle.nav-link,
.navbar-nav .dropdown-toggle.nav-link,
.navbar-nav .nav-link {
  color: rgba(232, 237, 245, 0.88) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#nav.navbar-nav .nav-item > .nav-link:hover,
.navbar-nav .nav-item > .nav-link:hover,
#nav.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .show > .nav-link,
.navbar-nav .show > .dropdown-toggle,
.navbar-nav .nav-link:focus {
  color: #25d8e8 !important;
}

#nav.navbar-nav .nav-item > .nav-link::after,
.navbar-nav .nav-item > .nav-link::after,
.navbar-nav .dropdown-toggle.nav-link::after {
  background: #25d8e8 !important;
}

.navbar-nav .dropdown-menu {
  background: rgba(8, 22, 40, 0.98) !important;
  border: 1px solid rgba(0, 196, 212, 0.18) !important;
}

.navbar-nav .dropdown-item {
  color: rgba(240, 248, 255, 0.94) !important;
}

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
  background: rgba(0, 196, 212, 0.16) !important;
  color: #ffffff !important;
}

/* WHMCS lower nav uses plain anchors, not .nav-link */
.main-navbar-wrapper #nav > li > a,
.main-navbar-wrapper .navbar-nav > li > a,
.main-navbar-wrapper .navbar-nav > li > a.pr-4,
.main-navbar-wrapper .navbar-nav > li > a.dropdown-toggle,
.main-navbar-wrapper .navbar-nav > li > a[href],
.main-navbar-wrapper .navbar-nav.ml-auto > li > a,
.main-navbar-wrapper .navbar-nav.ml-auto > li > a[href] {
  color: rgba(236, 243, 250, 0.92) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.main-navbar-wrapper #nav > li > a:hover,
.main-navbar-wrapper .navbar-nav > li > a:hover,
.main-navbar-wrapper #nav > li.active > a,
.main-navbar-wrapper .navbar-nav > li.active > a,
.main-navbar-wrapper .navbar-nav > li.show > a,
.main-navbar-wrapper .navbar-nav > li > a:focus {
  color: #25d8e8 !important;
}

.main-navbar-wrapper .dropdown-menu > li > a,
.main-navbar-wrapper .dropdown-menu .dropdown-item,
.main-navbar-wrapper .dropdown-menu > .dropdown-item > a {
  color: rgba(240, 248, 255, 0.95) !important;
}

.main-navbar-wrapper .dropdown-menu > li > a:hover,
.main-navbar-wrapper .dropdown-menu > li > a:focus,
.main-navbar-wrapper .dropdown-menu .dropdown-item:hover,
.main-navbar-wrapper .dropdown-menu .dropdown-item:focus,
.main-navbar-wrapper .dropdown-menu > .dropdown-item > a:hover,
.main-navbar-wrapper .dropdown-menu > .dropdown-item > a:focus {
  color: #ffffff !important;
  background: rgba(0, 196, 212, 0.18) !important;
}

/* =====================================================================
   38. HIGH-CONTRAST PORTAL OVERRIDES
   ===================================================================== */
.tt-marketing-header {
  border-bottom: 1px solid rgba(0, 196, 212, 0.12);
  background: rgba(7,21,40,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.tt-marketing-nav {
  display: flex;
  align-items: center;
  min-height: 72px;
  gap: 32px;
}

.tt-marketing-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.tt-marketing-logo .logo-img {
  height: 38px !important;
  width: auto;
  display: block;
  filter: brightness(1.05);
}

.tt-marketing-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tt-marketing-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  color: rgba(255,255,255,.65);
  font-size: 15px;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}

.tt-marketing-link::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--tt-teal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease;
}

.tt-marketing-link:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
  text-decoration: none;
}

.tt-marketing-link:hover::after,
.tt-marketing-link--active::after {
  transform: scaleX(1);
}

.tt-marketing-link--active {
  color: var(--tt-teal);
}

.tt-marketing-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.tt-marketing-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
}

.tt-marketing-phone:hover {
  color: var(--tt-teal);
  text-decoration: none;
}

.tt-login-dropdown {
  position: relative;
}

.tt-login-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  background: rgba(0,196,212,.12);
  border: 1px solid rgba(0,196,212,.3);
  border-radius: 8px;
  color: var(--tt-teal);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.tt-login-dropdown__toggle:hover {
  background: rgba(0,196,212,.2);
  border-color: var(--tt-teal);
  box-shadow: 0 0 16px rgba(0, 196, 212, 0.15);
}

.tt-login-dropdown__toggle svg:last-child {
  transition: transform .2s ease;
}

.tt-login-dropdown.open .tt-login-dropdown__toggle svg:last-child {
  transform: rotate(180deg);
}

.tt-login-dropdown__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  background: #0D2744;
  border: 1px solid rgba(0,196,212,.2);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(0,196,212,.05);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: all .2s;
  z-index: 1200;
}

.tt-login-dropdown.open .tt-login-dropdown__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.tt-login-dropdown__panel h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.tt-login-dropdown__panel p {
  margin: 0 0 18px;
  font-size: 12px;
  color: rgba(255,255,255,.45);
}

.tt-login-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.tt-login-field label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.tt-login-field input {
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
}

.tt-login-field input::placeholder {
  color: rgba(255,255,255,.25);
}

.tt-login-field input:focus {
  border-color: var(--tt-teal);
  box-shadow: 0 0 0 3px rgba(0, 196, 212, 0.15);
  outline: none;
}

.tt-login-submit {
  width: 100%;
  padding: 11px;
  background: var(--tt-teal);
  color: #071528;
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  border: 0;
  margin-top: 4px;
}

.tt-login-submit:hover {
  background: var(--tt-teal-dark);
}

.tt-login-links {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.tt-login-links a {
  font-size: 12px;
  color: rgba(255,255,255,.4);
}

.tt-login-links a:hover {
  color: var(--tt-teal);
  text-decoration: none;
}

.tt-login-links--stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.tt-marketing-support {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  background: var(--tt-teal);
  color: #071528;
  font-weight: 800;
  font-size: 14.5px;
  border-radius: 8px;
  white-space: nowrap;
}

.tt-marketing-support:hover {
  background: #1ad8ea;
  color: #071528;
  text-decoration: none;
}

.navbar .input-group.search .form-control {
  background: rgba(10, 34, 58, 0.96) !important;
  border-color: rgba(132, 227, 237, 0.28) !important;
  color: #f4fbff !important;
}

.navbar .input-group.search .form-control::placeholder {
  color: rgba(232, 237, 245, 0.52) !important;
}

.navbar .input-group.search .form-control:focus {
  background: rgba(8, 28, 48, 0.98) !important;
  border-color: #5be6f3 !important;
  box-shadow: 0 0 0 3px rgba(0, 196, 212, 0.18) !important;
}

.navbar .input-group.search .btn {
  background: rgba(10, 34, 58, 0.96) !important;
  border-color: rgba(132, 227, 237, 0.28) !important;
  color: rgba(240, 248, 255, 0.82) !important;
}

.navbar .input-group.search .btn:hover {
  color: #ffffff !important;
  border-color: rgba(132, 227, 237, 0.5) !important;
  background: rgba(0, 196, 212, 0.12) !important;
}

#nav.navbar-nav .nav-link,
.navbar-nav .nav-link,
.navbar-nav .dropdown-toggle,
.navbar-nav .dropdown-toggle.nav-link {
  color: rgba(255,255,255,.65) !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}

#nav.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:hover,
#nav.navbar-nav .nav-link.active,
.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link,
.navbar-nav .show > .dropdown-toggle {
  color: var(--tt-teal) !important;
}

.navbar-nav .dropdown-menu {
  background: rgba(7, 21, 40, 0.98) !important;
}

.navbar-nav .dropdown-item {
  color: rgba(240, 248, 255, 0.9) !important;
}

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
  background: rgba(0, 196, 212, 0.12) !important;
  color: #ffffff !important;
}

.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a {
  color: rgba(232, 237, 245, 0.72) !important;
}

.home-domain-search,
.home-domain-search.bg-white,
.domain-search-section {
  background: linear-gradient(180deg, rgba(7, 21, 40, 0.92), rgba(11, 31, 58, 0.98)) !important;
  border-top: 1px solid rgba(0, 196, 212, 0.12);
  border-bottom: 1px solid rgba(0, 196, 212, 0.12);
}

.home-domain-search .input-group,
.home-domain-search .input-group-wrapper,
#frmDomainHomepage .input-group {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(132, 227, 237, 0.18) !important;
  border-radius: 16px !important;
  padding: 8px !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.home-domain-search .form-control,
.domain-search-section .form-control,
#frmDomainHomepage .form-control {
  background: rgba(10, 34, 58, 0.98) !important;
  color: #f4fbff !important;
  border: 1px solid rgba(132, 227, 237, 0.22) !important;
  min-height: 52px;
}

.home-domain-search .form-control::placeholder,
.domain-search-section .form-control::placeholder,
#frmDomainHomepage .form-control::placeholder {
  color: rgba(232, 237, 245, 0.48) !important;
}

.home-domain-search .btn,
#frmDomainHomepage .btn {
  min-height: 52px;
  border-radius: 12px !important;
}

.home-domain-search .btn-success,
#frmDomainHomepage .btn-success {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(132, 227, 237, 0.28) !important;
  color: #e8edf5 !important;
  box-shadow: none !important;
}

.home-domain-search .btn-success:hover,
#frmDomainHomepage .btn-success:hover {
  background: rgba(0, 196, 212, 0.12) !important;
  color: #ffffff !important;
}

.home-domain-search h2,
.home-domain-search p,
.home-domain-search a {
  color: #ffffff !important;
}

.tiles .tile,
.client-home-panels .panel,
.client-home-cards .card,
.card {
  border-color: rgba(0, 196, 212, 0.18) !important;
  color: #eef8ff !important;
}

.tiles .tile:hover,
.client-home-panels .panel:hover,
.client-home-cards .card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 196, 212, 0.38) !important;
  box-shadow: 0 22px 44px rgba(0,0,0,.28), 0 0 0 1px rgba(0,196,212,.12) !important;
}

.tiles .tile .title,
.tiles .tile .stat,
.tiles .tile h3,
.client-home-panels .panel h3,
.client-home-panels .panel h4,
.client-home-cards .card-title {
  color: #ffffff !important;
}

.tiles .tile .btn,
.client-home-panels .panel .btn,
.client-home-cards .card .btn {
  background: rgba(0, 196, 212, 0.14) !important;
  border-color: rgba(0, 196, 212, 0.3) !important;
  color: #bff7fb !important;
}

.tiles .tile .btn:hover,
.client-home-panels .panel .btn:hover,
.client-home-cards .card .btn:hover {
  background: var(--tt-teal) !important;
  color: #071528 !important;
}

.text-light,
.text-white,
.text-body,
.lead,
.domain-promo-box p,
.domain-promo-box small,
.client-home-panels p,
.client-home-cards .card-body,
.subtitle,
.text-muted {
  color: rgba(232, 237, 245, 0.84) !important;
}

@media (max-width: 991.98px) {
  .tt-marketing-nav {
    min-height: auto;
    padding: 14px 0;
    flex-wrap: wrap;
    gap: 16px;
  }

  .tt-marketing-links {
    order: 3;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    flex: 0 0 100%;
    padding-bottom: 4px;
  }

  .tt-marketing-actions {
    margin-left: auto;
  }
}

@media (max-width: 768px) {
  .tt-marketing-phone {
    display: none;
  }

  .tt-marketing-support {
    padding: 12px 18px;
  }

  .tt-login-dropdown__panel {
    width: min(320px, calc(100vw - 24px));
    right: -12px;
  }
}

/* Nav items */
#nav.navbar-nav .nav-link,
.navbar-nav .nav-link {
  color: rgba(232, 237, 245, 0.8) !important;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.75rem 1rem !important;
  position: relative;
  transition: color var(--tt-transition);
  letter-spacing: 0.01em;
}
#nav.navbar-nav .nav-link::after,
.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: var(--tt-teal);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform var(--tt-transition);
}
#nav.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:hover,
#nav.navbar-nav .nav-link.active,
.navbar-nav .nav-link.active {
  color: var(--tt-teal) !important;
  text-decoration: none;
}
#nav.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:hover::after,
#nav.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link.active::after {
  transform: scaleX(1);
}

/* Dropdown menus */
.navbar-nav .dropdown-menu {
  background: rgba(7, 21, 40, 0.97);
  border: 1px solid var(--tt-teal-border);
  border-radius: var(--tt-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 196, 212, 0.05);
  padding: 0.5rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.navbar-nav .dropdown-item {
  color: rgba(232, 237, 245, 0.8);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--tt-radius-sm);
  padding: 0.5rem 0.875rem;
  transition: all var(--tt-transition);
}
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
  background: var(--tt-teal-glow);
  color: var(--tt-teal);
}
.navbar-nav .dropdown-divider {
  border-color: var(--tt-teal-border);
  margin: 0.35rem 0.5rem;
}

/* Mobile hamburger */
.navbar-toggler {
  border: 1px solid var(--tt-teal-border) !important;
  border-radius: var(--tt-radius-sm) !important;
  color: var(--tt-text-muted) !important;
  padding: 0.4rem 0.6rem;
}
.navbar-toggler:hover {
  color: var(--tt-teal) !important;
  border-color: var(--tt-teal) !important;
  background: var(--tt-teal-glow);
}

/* Cart badge */
.badge-info,
.badge-primary {
  background-color: var(--tt-teal) !important;
  color: var(--tt-navy-deep) !important;
  font-weight: 700;
  font-size: 0.7rem;
  border-radius: 999px;
}

/* =====================================================================
   4. BREADCRUMB
   ===================================================================== */
.master-breadcrumb {
  background: rgba(7, 21, 40, 0.5);
  border-bottom: 1px solid var(--tt-teal-border);
  padding: 0.5rem 0;
}
.master-breadcrumb .breadcrumb {
  background: transparent;
  margin: 0;
  padding: 0.25rem 0;
  font-size: 0.8125rem;
}
.master-breadcrumb .breadcrumb-item {
  color: var(--tt-text-muted);
}
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--tt-text-subtle);
  content: '/';
}
.master-breadcrumb .breadcrumb-item.active {
  color: var(--tt-teal);
}
.master-breadcrumb .breadcrumb-item a {
  color: var(--tt-text-muted);
}
.master-breadcrumb .breadcrumb-item a:hover {
  color: var(--tt-teal);
}

/* =====================================================================
   5. MAIN BODY LAYOUT
   ===================================================================== */
#main-body {
  padding: 2rem 0;
  min-height: calc(100vh - 200px);
}

/* =====================================================================
   6. CARDS / PANELS
   ===================================================================== */
.card,
.mc-promo-manage,
.mc-promo-login {
  background: var(--tt-navy-card) !important;
  border: 1px solid var(--tt-teal-border) !important;
  border-radius: var(--tt-radius-lg) !important;
  box-shadow: var(--tt-shadow), var(--tt-shadow-teal);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--tt-text);
  transition: border-color var(--tt-transition), box-shadow var(--tt-transition);
}
.card:hover {
  border-color: var(--tt-teal-border-h) !important;
  box-shadow: var(--tt-shadow), 0 0 28px rgba(0, 196, 212, 0.18);
}

.card-header,
.mc-promo-manage .panel-heading,
.mc-promo-login .panel-heading {
  background: rgba(0, 196, 212, 0.06) !important;
  border-bottom: 1px solid var(--tt-teal-border) !important;
  color: #ffffff !important;
  font-weight: 600;
  border-radius: var(--tt-radius-lg) var(--tt-radius-lg) 0 0 !important;
  padding: 1rem 1.25rem;
}

.card-body,
.mc-promo-manage .content,
.mc-promo-login .content {
  color: var(--tt-text);
  padding: 1.25rem;
}

.card-footer,
.mc-promo-manage .panel-footer,
.mc-promo-login .panel-footer {
  background: rgba(7, 21, 40, 0.4) !important;
  border-top: 1px solid var(--tt-teal-border) !important;
  color: var(--tt-text-muted);
  border-radius: 0 0 var(--tt-radius-lg) var(--tt-radius-lg) !important;
  padding: 0.875rem 1.25rem;
}

/* Card accent top borders - restyle to teal family */
.card-accent-blue   { border-top: 3px solid var(--tt-teal) !important; }
.card-accent-teal   { border-top: 3px solid var(--tt-teal) !important; }
.card-accent-green  { border-top: 3px solid #22c55e !important; }
.card-accent-gold   { border-top: 3px solid #f59e0b !important; }
.card-accent-red    { border-top: 3px solid #ef4444 !important; }
.card-accent-orange { border-top: 3px solid #f97316 !important; }

/* Client home cards */
.client-home-cards .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.client-home-cards .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--tt-shadow), 0 0 32px rgba(0, 196, 212, 0.2) !important;
}
.client-home-cards .card-header {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff !important;
}
.client-home-cards .card-body {
  font-size: 0.875rem;
}

/* =====================================================================
   7. STAT TILES (dashboard)
   ===================================================================== */
.tiles .tile {
  background: var(--tt-navy-card) !important;
  border: 1px solid var(--tt-teal-border) !important;
  border-radius: var(--tt-radius) !important;
  color: var(--tt-text) !important;
  padding: 1.5rem 1rem !important;
  text-align: center;
  transition: all var(--tt-transition);
  text-decoration: none;
  display: block;
}
.tiles .tile:hover {
  background: rgba(0, 196, 212, 0.08) !important;
  border-color: var(--tt-teal-border-h) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 196, 212, 0.15);
  text-decoration: none;
  color: #ffffff !important;
}
.tiles .tile i {
  color: var(--tt-teal) !important;
  font-size: 1.75rem !important;
  margin-bottom: 0.75rem;
}
.tiles .tile .stat {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 0.35rem;
  font-family: 'Inter', sans-serif;
}
.tiles .tile .title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tt-text-muted);
}
.tiles .tile .highlight {
  height: 3px;
  border-radius: 2px;
  margin-top: 1rem;
  background: var(--tt-teal) !important;
  opacity: 0.6;
  transition: opacity var(--tt-transition);
}
.tiles .tile:hover .highlight {
  opacity: 1;
}

/* Override all highlight colours to use teal family */
.bg-color-blue   { background-color: var(--tt-teal) !important; }
.bg-color-green  { background-color: #22c55e !important; }
.bg-color-red    { background-color: #ef4444 !important; }
.bg-color-gold   { background-color: #f59e0b !important; }

/* =====================================================================
   8. SIDEBAR
   ===================================================================== */
.sidebar {
  margin-bottom: 1.5rem;
}
.sidebar .card {
  overflow: hidden;
}
.sidebar .card-header {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--tt-teal) !important;
  background: rgba(0, 196, 212, 0.04) !important;
}
.sidebar-panel,
.sidebar .list-group {
  background: transparent;
}
.sidebar .list-group-item {
  background: transparent;
  border-color: var(--tt-teal-border);
  color: var(--tt-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.65rem 1.25rem;
  transition: all var(--tt-transition);
}
.sidebar .list-group-item:first-child {
  border-radius: 0;
}
.sidebar .list-group-item:last-child {
  border-radius: 0 0 var(--tt-radius-sm) var(--tt-radius-sm);
}
.sidebar .list-group-item a {
  color: var(--tt-text-muted);
  display: block;
  transition: color var(--tt-transition);
}
.sidebar .list-group-item:hover,
.sidebar .list-group-item.active {
  background: var(--tt-teal-glow) !important;
  border-left: 3px solid var(--tt-teal);
  color: var(--tt-teal);
  padding-left: calc(1.25rem + 3px);
}
.sidebar .list-group-item:hover a,
.sidebar .list-group-item.active a {
  color: var(--tt-teal);
}

/* =====================================================================
   9. FORMS
   ===================================================================== */
.form-control,
.custom-select,
select.form-control {
  background: var(--tt-input-bg) !important;
  border: 1px solid var(--tt-input-border) !important;
  border-radius: var(--tt-radius-sm) !important;
  color: var(--tt-text) !important;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 0.55rem 0.875rem;
  transition: border-color var(--tt-transition), box-shadow var(--tt-transition), background var(--tt-transition);
  -webkit-appearance: none;
}
.form-control:focus,
.custom-select:focus,
select.form-control:focus {
  background: rgba(7, 21, 40, 0.85) !important;
  border-color: var(--tt-teal) !important;
  box-shadow: 0 0 0 3px var(--tt-teal-glow) !important;
  color: #ffffff !important;
  outline: none;
}
.form-control::placeholder {
  color: var(--tt-text-subtle) !important;
  font-weight: 400;
}
.form-control:disabled,
.form-control[readonly] {
  background: rgba(7, 21, 40, 0.3) !important;
  border-color: rgba(0, 196, 212, 0.1) !important;
  color: var(--tt-text-muted) !important;
  opacity: 0.7;
}

/* Select arrow */
select.form-control,
.custom-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300C4D4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.875rem center !important;
  background-size: 12px !important;
  padding-right: 2.25rem !important;
}

/* Labels */
label,
.form-control-label,
.col-form-label {
  color: rgba(232, 237, 245, 0.85);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

/* Form group spacing */
.form-group {
  margin-bottom: 1.25rem;
}

/* Input groups */
.input-group-text {
  background: rgba(7, 21, 40, 0.7) !important;
  border: 1px solid var(--tt-input-border) !important;
  color: var(--tt-text-muted) !important;
  font-size: 0.9rem;
}
.input-group-merge .input-group-text {
  border-right: none !important;
}
.input-group-merge .form-control {
  border-left: none !important;
}
.input-group-merge .form-control:focus ~ .input-group-prepend .input-group-text,
.input-group-prepend ~ .form-control:focus + .input-group-prepend .input-group-text {
  border-color: var(--tt-teal) !important;
}
.input-group > .form-control:focus {
  z-index: 3;
}

/* Validation */
.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: #22c55e !important;
  background-image: none !important;
}
.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: #ef4444 !important;
  background-image: none !important;
}
.invalid-feedback {
  color: #fca5a5;
  font-size: 0.8125rem;
}
.valid-feedback {
  color: #86efac;
  font-size: 0.8125rem;
}

/* Checkboxes & Radios */
.form-check-input {
  accent-color: var(--tt-teal);
}

/* =====================================================================
   10. BUTTONS
   ===================================================================== */
.btn {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  border-radius: var(--tt-radius-sm) !important;
  transition: all var(--tt-transition);
  letter-spacing: 0.01em;
  font-size: 0.875rem;
  padding: 0.5rem 1.25rem;
}
.btn:focus,
.btn.focus {
  box-shadow: 0 0 0 3px var(--tt-teal-glow) !important;
  outline: none;
}

/* Primary – teal */
.btn-primary {
  background: var(--tt-teal) !important;
  border-color: var(--tt-teal) !important;
  color: var(--tt-navy-deep) !important;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(0, 196, 212, 0.3);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
  background: var(--tt-teal-dark) !important;
  border-color: var(--tt-teal-dark) !important;
  color: var(--tt-navy-deep) !important;
  box-shadow: 0 4px 20px rgba(0, 196, 212, 0.45);
  transform: translateY(-1px);
}
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background: #009aaa !important;
  border-color: #009aaa !important;
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 196, 212, 0.3);
}
.btn-primary.disabled,
.btn-primary:disabled {
  background: rgba(0, 196, 212, 0.4) !important;
  border-color: transparent !important;
  color: rgba(7, 21, 40, 0.7) !important;
  box-shadow: none;
}

/* Default / secondary */
.btn-default,
.btn-secondary {
  background: rgba(232, 237, 245, 0.06) !important;
  border: 1px solid var(--tt-teal-border) !important;
  color: var(--tt-text) !important;
}
.btn-default:hover,
.btn-secondary:hover {
  background: rgba(232, 237, 245, 0.1) !important;
  border-color: var(--tt-teal-border-h) !important;
  color: #ffffff !important;
}

/* Danger */
.btn-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
}
.btn-danger:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

/* Success */
.btn-success {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #86efac !important;
}
.btn-success:hover {
  background: rgba(34, 197, 94, 0.25) !important;
  border-color: #22c55e !important;
  color: #ffffff !important;
}

/* Info */
.btn-info {
  background: rgba(0, 196, 212, 0.1) !important;
  border-color: var(--tt-teal-border) !important;
  color: var(--tt-teal) !important;
}
.btn-info:hover {
  background: rgba(0, 196, 212, 0.2) !important;
  border-color: var(--tt-teal) !important;
  color: #ffffff !important;
}

/* Link-style buttons */
.btn-link {
  color: var(--tt-teal) !important;
  font-weight: 600;
  text-decoration: none !important;
  padding: 0;
}
.btn-link:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Password reveal button */
.btn-reveal-pw {
  background: var(--tt-input-bg) !important;
  border-left: none !important;
  border-color: var(--tt-input-border) !important;
  color: var(--tt-text-muted) !important;
}
.btn-reveal-pw:hover {
  color: var(--tt-teal) !important;
}

/* =====================================================================
   11. LOGIN PAGE
   ===================================================================== */
.login-form {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 300px);
  padding: 2rem 1rem;
}
.login-form .card {
  width: 100%;
  max-width: 480px;
  border-radius: var(--tt-radius-lg) !important;
  overflow: hidden;
  background: rgba(11, 31, 58, 0.92) !important;
  border: 1px solid var(--tt-teal-border) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 196, 212, 0.08) !important;
}
.login-form .card::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--tt-teal), rgba(0, 196, 212, 0.3));
  border-radius: var(--tt-radius-lg) var(--tt-radius-lg) 0 0;
}
.login-form .card .card-body {
  padding: 2.5rem !important;
}
.login-form .card .card-body .h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.25rem;
}
.login-form .card .card-footer {
  padding: 1.25rem 2.5rem !important;
  text-align: center;
  border-top: 1px solid var(--tt-teal-border) !important;
  background: rgba(7, 21, 40, 0.4) !important;
}
.login-form .card .card-footer a {
  color: var(--tt-teal);
  font-weight: 700;
}
.login-form .card .card-footer a:hover {
  color: #ffffff;
}
.login-form #login.btn-primary {
  padding: 0.65rem 2rem;
  font-size: 0.9375rem;
  border-radius: var(--tt-radius-sm) !important;
  min-width: 120px;
}
/* Forgot password link */
.login-form .small.text-muted {
  color: var(--tt-teal) !important;
  font-weight: 500;
}
.login-form .small.text-muted:hover {
  color: #ffffff !important;
}
/* Remember me checkbox row */
.login-form .text-right label {
  color: var(--tt-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

/* =====================================================================
   12. REGISTER PAGE
   ===================================================================== */
.clientregister .card,
#clientregister .card {
  background: var(--tt-navy-card) !important;
  border: 1px solid var(--tt-teal-border) !important;
  border-radius: var(--tt-radius-lg) !important;
}

/* =====================================================================
   13. ALERTS / FLASH MESSAGES
   ===================================================================== */
.alert {
  border-radius: var(--tt-radius-sm) !important;
  border-width: 1px;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.875rem 1.25rem;
}
.alert-success {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #86efac !important;
}
.alert-danger,
.alert-error {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}
.alert-warning {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fde68a !important;
}
.alert-info {
  background: rgba(0, 196, 212, 0.08) !important;
  border-color: var(--tt-teal-border) !important;
  color: var(--tt-teal) !important;
}
.alert .close {
  color: inherit !important;
  opacity: 0.6;
}
.alert .close:hover {
  opacity: 1;
}

/* =====================================================================
   14. TABLES
   ===================================================================== */
.table {
  color: var(--tt-text) !important;
  font-size: 0.875rem;
}
.table thead th {
  background: rgba(0, 196, 212, 0.06) !important;
  color: var(--tt-teal) !important;
  border-bottom: 2px solid var(--tt-teal-border) !important;
  border-top: none !important;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.875rem 1rem;
}
.table td {
  border-color: var(--tt-teal-border) !important;
  padding: 0.875rem 1rem;
  vertical-align: middle;
  color: var(--tt-text);
}
.table tbody tr {
  transition: background var(--tt-transition);
}
.table tbody tr:hover {
  background: rgba(0, 196, 212, 0.04) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(7, 21, 40, 0.3) !important;
}
.table-striped tbody tr:nth-of-type(odd):hover {
  background: rgba(0, 196, 212, 0.06) !important;
}
.table-bordered,
.table-bordered td,
.table-bordered th {
  border-color: var(--tt-teal-border) !important;
}
.table-responsive {
  border-radius: var(--tt-radius);
  border: 1px solid var(--tt-teal-border);
  overflow: hidden;
}

/* Status badges */
.label-success, .badge-success { background: rgba(34,197,94,.15) !important; color: #86efac !important; border: 1px solid rgba(34,197,94,.3) !important; }
.label-danger,  .badge-danger  { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; border: 1px solid rgba(239,68,68,.3) !important; }
.label-warning, .badge-warning  { background: rgba(245,158,11,.15) !important; color: #fde68a !important; border: 1px solid rgba(245,158,11,.3) !important; }
.label-info,    .badge-info     { background: rgba(0,196,212,.12) !important; color: var(--tt-teal) !important; border: 1px solid var(--tt-teal-border) !important; }
.label, .badge {
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 0.3em 0.7em !important;
  letter-spacing: 0.04em;
}

/* =====================================================================
   15. PAGINATION
   ===================================================================== */
.pagination .page-link {
  background: var(--tt-input-bg);
  border-color: var(--tt-teal-border);
  color: var(--tt-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--tt-transition);
}
.pagination .page-link:hover {
  background: var(--tt-teal-glow);
  border-color: var(--tt-teal-border-h);
  color: var(--tt-teal);
}
.pagination .page-item.active .page-link {
  background: var(--tt-teal) !important;
  border-color: var(--tt-teal) !important;
  color: var(--tt-navy-deep) !important;
  font-weight: 700;
}
.pagination .page-item.disabled .page-link {
  background: rgba(7, 21, 40, 0.3);
  border-color: rgba(0, 196, 212, 0.08);
  color: var(--tt-text-subtle);
}

/* =====================================================================
   16. MODALS
   ===================================================================== */
.modal-content {
  background: rgba(11, 31, 58, 0.97) !important;
  border: 1px solid var(--tt-teal-border) !important;
  border-radius: var(--tt-radius-lg) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.modal-header {
  background: rgba(0, 196, 212, 0.05) !important;
  border-bottom: 1px solid var(--tt-teal-border) !important;
  padding: 1.25rem 1.5rem;
  border-radius: var(--tt-radius-lg) var(--tt-radius-lg) 0 0 !important;
}
.modal-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.125rem;
}
.modal-body {
  color: var(--tt-text);
  padding: 1.5rem;
}
.modal-footer {
  border-top: 1px solid var(--tt-teal-border) !important;
  background: rgba(7, 21, 40, 0.4) !important;
  padding: 1rem 1.5rem;
  border-radius: 0 0 var(--tt-radius-lg) var(--tt-radius-lg) !important;
}
.modal .close,
.modal-header > .close {
  color: var(--tt-text-muted) !important;
  opacity: 0.7;
  text-shadow: none;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all var(--tt-transition);
}
.modal .close:hover,
.modal-header > .close:hover {
  color: #ffffff !important;
  opacity: 1;
  background: rgba(255,255,255,0.08);
}
.modal-backdrop {
  background: var(--tt-navy-deep);
}
.modal-backdrop.show {
  opacity: 0.75;
}

/* =====================================================================
   17. LIST GROUPS
   ===================================================================== */
.list-group-item {
  background: rgba(13, 39, 68, 0.6) !important;
  border-color: var(--tt-teal-border) !important;
  color: var(--tt-text);
  font-size: 0.875rem;
  transition: all var(--tt-transition);
}
.list-group-item:hover {
  background: var(--tt-teal-glow) !important;
  color: var(--tt-teal);
  text-decoration: none;
}
.list-group-item.active {
  background: rgba(0, 196, 212, 0.15) !important;
  border-color: var(--tt-teal-border-h) !important;
  color: var(--tt-teal) !important;
}
a.list-group-item {
  color: var(--tt-text-muted);
}
a.list-group-item:hover {
  color: var(--tt-teal);
}

/* =====================================================================
   18. PROGRESS BARS
   ===================================================================== */
.progress {
  background: rgba(7, 21, 40, 0.6);
  border-radius: 999px;
  height: 8px;
  border: 1px solid var(--tt-teal-border);
  overflow: hidden;
}
.progress-bar {
  background: linear-gradient(90deg, var(--tt-teal), #007a86) !important;
  border-radius: 999px;
}

/* =====================================================================
   19. INVOICES / QUOTES
   ===================================================================== */
.viewinvoice-table thead,
#invoice-summary thead {
  background: rgba(0, 196, 212, 0.06) !important;
}
.invoice-status-paid {
  color: #86efac;
  font-weight: 700;
}
.invoice-status-unpaid {
  color: #fca5a5;
  font-weight: 700;
}
.invoice-status-overdue {
  color: #fde68a;
  font-weight: 700;
}

/* =====================================================================
   20. SUPPORT TICKETS
   ===================================================================== */
.view-ticket .card-body {
  padding: 1.5rem;
}
.ticket-reply {
  border-left: 3px solid var(--tt-teal-border);
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}
.ticket-reply.staff-reply {
  border-left-color: var(--tt-teal);
  background: rgba(0, 196, 212, 0.03);
  border-radius: 0 var(--tt-radius) var(--tt-radius) 0;
  padding: 1rem 1.25rem;
}

/* =====================================================================
   21. DOMAIN SEARCH
   ===================================================================== */
.domain-search-section {
  background: rgba(7, 21, 40, 0.6);
  border-bottom: 1px solid var(--tt-teal-border);
  padding: 2rem 0;
}
.domain-search-section .form-control {
  border-radius: var(--tt-radius-sm) 0 0 var(--tt-radius-sm) !important;
  height: 52px;
  font-size: 1rem;
}
.domain-search-section .btn-primary {
  border-radius: 0 var(--tt-radius-sm) var(--tt-radius-sm) 0 !important;
  height: 52px;
  padding: 0 1.75rem;
  font-size: 0.9375rem;
}
.domain-check-result-available {
  color: #86efac;
  font-weight: 700;
}
.domain-check-result-unavailable {
  color: #fca5a5;
  font-weight: 700;
}

/* =====================================================================
   22. STORE / ORDER FORM
   ===================================================================== */
.product-list .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.product-list .card:hover {
  transform: translateY(-3px);
  border-color: var(--tt-teal-border-h) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4), 0 0 24px rgba(0,196,212,.18) !important;
}
.product-list .card .card-header {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
}
.price {
  color: var(--tt-teal) !important;
  font-weight: 800 !important;
  font-size: 1.5rem;
}
.cycle-select .active {
  background: var(--tt-teal) !important;
  border-color: var(--tt-teal) !important;
  color: var(--tt-navy-deep) !important;
}

/* =====================================================================
   23. FOOTER
   ===================================================================== */
#footer,
.footer {
  background: var(--tt-navy-deep) !important;
  border-top: 1px solid var(--tt-teal-border);
  padding: 2rem 0;
  margin-top: 3rem;
}
#footer .nav-link,
.footer .nav-link {
  color: var(--tt-text-muted) !important;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  transition: color var(--tt-transition);
}
#footer .nav-link:hover,
.footer .nav-link:hover {
  color: var(--tt-teal) !important;
  text-decoration: none;
}
#footer .copyright,
.footer .copyright {
  color: var(--tt-text-subtle);
  font-size: 0.8125rem;
}
#footer .list-inline-item .btn,
.footer .list-inline-item .btn {
  color: var(--tt-text-muted);
  font-size: 0.875rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--tt-radius-sm);
  transition: all var(--tt-transition);
}
#footer .list-inline-item .btn:hover,
.footer .list-inline-item .btn:hover {
  color: var(--tt-teal);
  background: var(--tt-teal-glow);
}

/* =====================================================================
   24. FULL PAGE OVERLAY / SPINNER
   ===================================================================== */
#fullpage-overlay {
  background: rgba(7, 21, 40, 0.92) !important;
  backdrop-filter: blur(8px);
}
#fullpage-overlay .msg {
  color: var(--tt-teal);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

/* =====================================================================
   25. TOOLTIPS
   ===================================================================== */
.tooltip .tooltip-inner {
  background: rgba(7, 21, 40, 0.97);
  border: 1px solid var(--tt-teal-border);
  color: var(--tt-text);
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  border-radius: var(--tt-radius-sm);
  padding: 0.4rem 0.75rem;
}
.tooltip .arrow::before {
  border-top-color: var(--tt-teal-border) !important;
  border-bottom-color: var(--tt-teal-border) !important;
}

/* =====================================================================
   26. POPOVERS (notifications)
   ===================================================================== */
.popover {
  background: rgba(7, 21, 40, 0.97) !important;
  border: 1px solid var(--tt-teal-border) !important;
  border-radius: var(--tt-radius) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  font-family: 'Inter', sans-serif !important;
  backdrop-filter: blur(12px);
}
.popover-header {
  background: rgba(0, 196, 212, 0.06) !important;
  border-bottom: 1px solid var(--tt-teal-border) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: var(--tt-radius) var(--tt-radius) 0 0 !important;
  font-size: 0.875rem;
}
.popover-body {
  color: var(--tt-text) !important;
  font-size: 0.875rem;
}
.client-alerts li a {
  color: var(--tt-text-muted);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  transition: color var(--tt-transition);
}
.client-alerts li a:hover {
  color: var(--tt-teal);
  text-decoration: none;
}
.client-alerts li a i {
  color: var(--tt-teal);
  margin-top: 2px;
  flex-shrink: 0;
}

/* =====================================================================
   27. LANGUAGE / LOCALISATION MODAL
   ===================================================================== */
.modal-localisation .item-selector .item {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--tt-radius-sm);
  color: var(--tt-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--tt-transition);
  text-decoration: none;
  margin-bottom: 0.25rem;
}
.modal-localisation .item-selector .item:hover,
.modal-localisation .item-selector .item.active {
  background: var(--tt-teal-glow);
  color: var(--tt-teal);
}
.modal-localisation .item-selector .item.active {
  border: 1px solid var(--tt-teal-border);
}

/* =====================================================================
   28. TABS
   ===================================================================== */
.nav-tabs {
  border-bottom: 1px solid var(--tt-teal-border);
  margin-bottom: 1.5rem;
}
.nav-tabs .nav-link {
  color: var(--tt-text-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  background: transparent !important;
  border-radius: 0 !important;
  transition: all var(--tt-transition);
}
.nav-tabs .nav-link:hover {
  color: var(--tt-teal) !important;
  border-bottom-color: var(--tt-teal-border) !important;
}
.nav-tabs .nav-link.active {
  color: var(--tt-teal) !important;
  border-bottom-color: var(--tt-teal) !important;
}

/* =====================================================================
   29. PILLS
   ===================================================================== */
.nav-pills .nav-link {
  color: var(--tt-text-muted);
  border-radius: var(--tt-radius-sm) !important;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  transition: all var(--tt-transition);
  border: 1px solid transparent;
}
.nav-pills .nav-link:hover {
  background: var(--tt-teal-glow);
  color: var(--tt-teal);
  border-color: var(--tt-teal-border);
}
.nav-pills .nav-link.active {
  background: rgba(0, 196, 212, 0.15) !important;
  color: var(--tt-teal) !important;
  border-color: var(--tt-teal-border) !important;
}

/* =====================================================================
   30. TWO-FACTOR AUTH
   ===================================================================== */
.two-factor-form .card {
  max-width: 440px;
  margin: 3rem auto;
  background: rgba(11, 31, 58, 0.92) !important;
}

/* =====================================================================
   31. ACCOUNT / PROFILE PAGES
   ===================================================================== */
.account-info-section h6 {
  color: var(--tt-teal);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--tt-teal-border);
}

/* =====================================================================
   32. SCROLLBAR (webkit)
   ===================================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--tt-navy-deep);
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 196, 212, 0.25);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 196, 212, 0.45);
}

/* =====================================================================
   33. SELECTION
   ===================================================================== */
::selection {
  background: rgba(0, 196, 212, 0.25);
  color: #ffffff;
}

/* =====================================================================
   34. RESPONSIVE ADJUSTMENTS
   ===================================================================== */
@media (max-width: 991.98px) {
  .navbar.main-navbar-wrapper .navbar-collapse {
    background: rgba(7, 21, 40, 0.98);
    border: 1px solid var(--tt-teal-border);
    border-radius: var(--tt-radius);
    padding: 1rem;
    margin-top: 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  #nav.navbar-nav .nav-link::after {
    display: none;
  }
  .navbar-nav .nav-link {
    padding: 0.6rem 0.75rem !important;
    border-radius: var(--tt-radius-sm);
  }
  .navbar-nav .nav-link:hover {
    background: var(--tt-teal-glow);
  }
  .login-form .card .card-body {
    padding: 1.75rem !important;
  }
}

@media (max-width: 575.98px) {
  #main-body {
    padding: 1rem 0;
  }
  .tiles .tile .stat {
    font-size: 1.5rem;
  }
  .login-form .card .card-body {
    padding: 1.25rem !important;
  }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
}

/* =====================================================================
   35. PRINT OVERRIDES
   ===================================================================== */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .header, #header,
  .footer, #footer,
  .master-breadcrumb,
  .sidebar {
    display: none !important;
  }
  .card {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
}

/* =====================================================================
   36. UTILITY OVERRIDES
   ===================================================================== */
.bg-primary  { background-color: var(--tt-teal) !important; color: var(--tt-navy-deep) !important; }
.bg-dark     { background-color: var(--tt-navy-deep) !important; }
.bg-light    { background-color: rgba(13, 39, 68, 0.6) !important; }
.bg-white    { background-color: rgba(13, 39, 68, 0.85) !important; }
.border      { border-color: var(--tt-teal-border) !important; }
.border-top  { border-top-color: var(--tt-teal-border) !important; }
.border-bottom { border-bottom-color: var(--tt-teal-border) !important; }
.rounded     { border-radius: var(--tt-radius) !important; }
.rounded-sm  { border-radius: var(--tt-radius-sm) !important; }
.rounded-lg  { border-radius: var(--tt-radius-lg) !important; }
.shadow      { box-shadow: var(--tt-shadow) !important; }
.shadow-sm   { box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important; }
.shadow-lg   { box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; }

/* Force white text in various contexts */
.card-title,
.card-header .card-title,
h3.card-title {
  color: #ffffff !important;
  font-weight: 700;
}

/* DataTables integration */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--tt-input-bg) !important;
  border: 1px solid var(--tt-input-border) !important;
  border-radius: var(--tt-radius-sm) !important;
  color: var(--tt-text) !important;
  font-family: 'Inter', sans-serif;
  padding: 0.375rem 0.75rem;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--tt-text-muted) !important;
  font-size: 0.875rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--tt-text-muted) !important;
  border-radius: var(--tt-radius-sm) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--tt-teal) !important;
  border-color: var(--tt-teal) !important;
  color: var(--tt-navy-deep) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--tt-teal-glow) !important;
  border-color: var(--tt-teal-border) !important;
  color: var(--tt-teal) !important;
}

/* =====================================================================
   37. PORTAL CHATBOT
   ===================================================================== */
.tt-chatbot {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.tt-chatbot__launcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  background: #14d7e5;
  color: #071528;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
}

.tt-chatbot__launcher-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #071528;
  box-shadow: 0 0 0 6px rgba(7,21,40,.12);
}

.tt-chatbot__panel {
  width: min(360px, calc(100vw - 28px));
  max-height: min(70vh, 640px);
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: #0c1c31;
  box-shadow: 0 20px 56px rgba(0,0,0,.34);
}

.tt-chatbot__panel[hidden] {
  display: none !important;
}

.tt-chatbot__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.tt-chatbot__eyebrow {
  display: none;
}

.tt-chatbot__header h3 {
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
}

.tt-chatbot__header-actions {
  display: flex;
  gap: 6px;
}

.tt-chatbot__ghost {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  line-height: 1;
}

.tt-chatbot__ghost:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}

.tt-chatbot__quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px 0;
}

.tt-chatbot__quick-actions button {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  font-weight: 700;
}

.tt-chatbot__quick-actions button:hover,
.tt-chatbot__quick-actions button:focus-visible {
  border-color: rgba(20,215,229,.35);
  background: rgba(20,215,229,.14);
  color: #fff;
}

.tt-chatbot__messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  overflow-y: auto;
}

.tt-chatbot__message {
  max-width: 88%;
  padding: 11px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.tt-chatbot__message--assistant {
  align-self: flex-start;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  border-top-left-radius: 8px;
}

.tt-chatbot__message--user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(0,196,212,.94), rgba(74,236,249,.84));
  color: #041320;
  border-top-right-radius: 8px;
  font-weight: 600;
}

.tt-chatbot__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 16px 12px;
}

.tt-chatbot__input {
  width: 100%;
  min-height: 44px;
  max-height: 120px;
  resize: none;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 14px;
}

.tt-chatbot__input::placeholder {
  color: rgba(255,255,255,.45);
}

.tt-chatbot__input:focus {
  outline: none;
  border-color: rgba(0,196,212,.52);
  box-shadow: 0 0 0 4px rgba(0,196,212,.12);
}

.tt-chatbot__send {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: #14d7e5;
  color: #071528;
  font-weight: 800;
}

.tt-chatbot__send:disabled,
.tt-chatbot__quick-actions button:disabled {
  opacity: .55;
  cursor: wait;
}

.tt-chatbot__hint {
  padding: 0 16px 14px;
  color: rgba(255,255,255,.56);
  font-size: 11px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .tt-chatbot {
    left: 10px;
    right: 10px;
    bottom: 10px;
    align-items: stretch;
  }

  .tt-chatbot__launcher {
    align-self: stretch;
    justify-content: center;
  }

  .tt-chatbot__panel {
    width: 100%;
    max-height: min(72svh, 560px);
    border-radius: 18px;
  }

  .tt-chatbot__quick-actions button {
    flex-basis: 100%;
  }

  .tt-chatbot__message {
    max-width: 94%;
  }

  .tt-chatbot__form {
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .tt-chatbot {
    left: 0;
    right: 0;
    bottom: 0;
    gap: 0;
  }

  .tt-chatbot__launcher {
    margin: 0 12px 12px;
  }

  .tt-chatbot__panel {
    width: 100%;
    max-height: 78svh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
  }
}

/* =====================================================================
   PORTAL FOOTER MATCH — mirrors new.techtemple.com.au footer
   ===================================================================== */
#footer.footer,
footer.footer {
  background: var(--tt-navy-deep) !important;
  border-top: 1px solid rgba(0, 196, 212, 0.15);
  padding: 0 !important;
  margin-top: 4rem;
  position: relative;
}
#footer.footer::before {
  content: "";
  display: block;
  height: 100px;
  background: linear-gradient(to bottom, rgba(7,21,40,0), var(--tt-navy-deep));
  margin-top: -100px;
  pointer-events: none;
}

/* Footer logo row */
.tt-footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.tt-footer-logo {
  height: 34px;
  width: auto;
}
.tt-footer-tagline {
  font-size: 13.5px;
  color: rgba(232,237,245,.5);
  line-height: 1.65;
  max-width: 280px;
  margin: 0 0 16px;
}
.tt-footer-contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(232,237,245,.55);
  margin-bottom: 6px;
  text-decoration: none;
  transition: color .2s;
}
.tt-footer-contact-link:hover {
  color: var(--tt-teal) !important;
}

/* Override WHMCS footer nav list to be a grid */
#footer .container > ul.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-bottom: 0 !important;
  padding: 28px 0 20px;
  border-top: 1px solid rgba(0, 196, 212, 0.1);
}
#footer .container > ul.nav .nav-item .nav-link {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(232,237,245,.45) !important;
  padding: 4px 14px !important;
  transition: color .2s !important;
}
#footer .container > ul.nav .nav-item .nav-link:hover {
  color: var(--tt-teal) !important;
}
#footer .copyright {
  padding: 16px 0 28px;
  border-top: 1px solid rgba(255,255,255,.05);
  font-size: 12px;
  color: rgba(232,237,245,.28) !important;
}

/* Social icon row in footer */
#footer .list-inline {
  float: none !important;
  text-align: right;
  margin-bottom: 0 !important;
  padding: 24px 0 0;
}
#footer .list-inline-item .btn {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 196, 212, 0.18) !important;
  border-radius: 8px !important;
  color: rgba(232,237,245,.45) !important;
  transition: all .2s !important;
}
#footer .list-inline-item .btn:hover {
  background: rgba(0,196,212,.12) !important;
  border-color: rgba(0,196,212,.4) !important;
  color: var(--tt-teal) !important;
  transform: translateY(-2px);
}

/* =====================================================================
   PORTAL — smooth nav transition from website nav
   ===================================================================== */

/* Hide the default WHMCS secondary nav bar — our marketing header replaces it */
.navbar.main-navbar-wrapper .navbar-brand {
  display: none !important;
}

/* Ensure the marketing header sits above all WHMCS elements */
.tt-marketing-header {
  position: relative;
  z-index: 1040;
}

/* Portal page heading */
.master-breadcrumb .breadcrumb-item.active {
  color: var(--tt-teal) !important;
  font-weight: 600;
}

/* =====================================================================
   PORTAL — login/register page polish
   ===================================================================== */
.login-form::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(0, 196, 212, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(0, 196, 212, 0.04) 0%, transparent 55%);
  pointer-events: none;
  z-index: -1;
}

/* =====================================================================
   PORTAL — Bootstrap overrides that still leak through
   ===================================================================== */
.text-primary { color: var(--tt-teal) !important; }
.text-success { color: #86efac !important; }
.text-danger  { color: #fca5a5 !important; }
.text-warning { color: #fde68a !important; }
.text-info    { color: var(--tt-teal) !important; }
.text-dark    { color: var(--tt-text) !important; }
.text-secondary { color: var(--tt-text-muted) !important; }

/* Override Bootstrap primary color leak */
a.text-primary,
.text-primary a { color: var(--tt-teal) !important; }

/* Fix any remaining white backgrounds */
.bg-primary { background: var(--tt-teal) !important; color: var(--tt-navy-deep) !important; }
.bg-info    { background: rgba(0,196,212,.12) !important; color: var(--tt-teal) !important; }
.bg-success { background: rgba(34,197,94,.12) !important; color: #86efac !important; }
.bg-warning { background: rgba(245,158,11,.12) !important; color: #fde68a !important; }
.bg-danger  { background: rgba(239,68,68,.12) !important; color: #fca5a5 !important; }

/* Force table hover to not go white */
.table-hover > tbody > tr:hover > * {
  color: var(--tt-text) !important;
}

/* Fix dropdown-item colour (Bootstrap 4 sometimes ignores our rule) */
.dropdown-item { color: rgba(232,237,245,.88) !important; }
.dropdown-item:hover,
.dropdown-item:focus { background: rgba(0,196,212,.12) !important; color: var(--tt-teal) !important; }
.dropdown-item.active,
.dropdown-item:active { background: var(--tt-teal) !important; color: var(--tt-navy-deep) !important; }