/* =========================================
   Ultra Custom Overrides
   /templates/ultra4/css/ultra-custom.css
   ========================================= */

/* --- Full-bleed footer top bar --- */
.footer .ftop {
  position: relative;
  background: none !important;
  overflow: visible;
}

.footer .ftop::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: url(https://ultracdn.ultrawebhosting.com/images/footer-img1.png) center top no-repeat;
  background-size: 100% 100%;
  z-index: -1;
  pointer-events: none;
}


/* =====================================================================
   CLIENT AREA HOMEPAGE REDESIGN - March 2026
   All classes prefixed with "ultra-" to avoid conflicts
   ===================================================================== */

/* --- Font (self-hosted on Ultra CDN) --- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://ultracdn.ultrawebhosting.com/fonts/Google/dm-sans/dm-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://ultracdn.ultrawebhosting.com/fonts/Google/dm-sans/dm-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://ultracdn.ultrawebhosting.com/fonts/Google/dm-sans/dm-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://ultracdn.ultrawebhosting.com/fonts/Google/dm-sans/dm-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('https://ultracdn.ultrawebhosting.com/fonts/Google/dm-sans/dm-sans-variable-italic.woff2') format('woff2');
}

section#main-body,
section#main-body *,
.sidebar,
.sidebar *,
section#main-menu,
section#main-menu *,
section#header,
section#header * {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Restore Font Awesome 7 - must come after the * override */
.fas, .far, .fal, .fad, .fa,
.fas::before, .far::before, .fal::before, .fad::before, .fa::before {
  font-family: 'Font Awesome 7 Free' !important;
}
.fab, .fab::before {
  font-family: 'Font Awesome 7 Brands' !important;
}
/* Restore Bootstrap Glyphicons */
.glyphicon, .glyphicon::before {
  font-family: 'Glyphicons Halflings' !important;
}
/* Restore Simple Line Icons */
[class^="icon-"], [class*=" icon-"],
[class^="icon-"]::before, [class*=" icon-"]::before {
  font-family: 'simple-line-icons' !important;
}

/* --- Welcome Header --- */
.ultra-welcome {
  background: linear-gradient(135deg, #0f2744 0%, #1b4a7a 50%, #1b79cf 100%);
  border-radius: 16px;
  padding: 32px 36px 28px;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}
.ultra-welcome::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  pointer-events: none;
}
.ultra-welcome::after {
  content: '';
  position: absolute;
  bottom: -30%; left: 20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(247,163,0,.08) 0%, transparent 70%);
  pointer-events: none;
}
.ultra-welcome-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.ultra-welcome-greeting h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 4px 0;
  color: #fff;
  border: none;
  padding: 0;
  line-height: 1.3;
}
.ultra-welcome-company {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  margin: 0;
}
.ultra-welcome-actions {
  display: flex;
  gap: 10px;
  position: relative;
  z-index: 1;
}

/* --- Buttons --- */
.ultra-btn {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s ease;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
.ultra-btn-light {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}
.ultra-btn-light:hover { background: rgba(255,255,255,.25); color: #fff; text-decoration: none; }
.ultra-btn-gold {
  background: #f7a300;
  color: #1a2332;
}
.ultra-btn-gold:hover { background: #ffc107; color: #1a2332; text-decoration: none; }

/* --- Stat Tiles --- */
.ultra-stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
}
.ultra-stat-tile {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 16px 18px;
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
  color: #fff;
  display: block;
}
.ultra-stat-tile:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.25);
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}
.ultra-stat-tile:focus { text-decoration: none; color: #fff; }
.ultra-stat-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ultra-stat-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.ultra-stat-icon.blue { background: rgba(59,130,246,.25); color: #93c5fd; }
.ultra-stat-icon.green { background: rgba(34,197,94,.25); color: #86efac; }
.ultra-stat-icon.orange { background: rgba(245,158,11,.25); color: #fcd34d; }
.ultra-stat-icon.red { background: rgba(239,68,68,.2); color: #fca5a5; }
.ultra-stat-number {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: #fff;
}
.ultra-stat-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,.6);
  margin-top: 2px;
}

/* --- KB Search --- */
.ultra-kb-search {
  position: relative;
  margin-bottom: 24px;
  display: flex;
  gap: 0;
}
.ultra-kb-search > i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: 16px;
  z-index: 2;
}
.ultra-kb-input {
  flex: 1;
  padding: 14px 20px 14px 48px;
  border: 1px solid #e4e8ee;
  border-radius: 12px 0 0 12px;
  font-size: 15px;
  color: #1a2332;
  background: #fff;
  outline: none;
  transition: all .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
.ultra-kb-input::placeholder { color: #8a94a3; }
.ultra-kb-input:focus {
  border-color: #1b79cf;
  box-shadow: 0 0 0 3px rgba(27,121,207,.1);
}
.ultra-kb-btn {
  padding: 14px 24px;
  background: #1b79cf;
  color: #fff;
  border: 1px solid #1b79cf;
  border-radius: 0 12px 12px 0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
  white-space: nowrap;
  font-family: inherit;
}
.ultra-kb-btn:hover { background: #155fa3; border-color: #155fa3; }

/* --- Section Label --- */
.ultra-section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8a94a3;
  margin-bottom: 14px;
}

/* --- Quick Actions Grid --- */
.ultra-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.ultra-qa {
  background: #fff;
  border: 1px solid #e4e8ee;
  border-radius: 12px;
  padding: 18px 16px;
  text-decoration: none;
  color: #1a2332;
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.03);
}
.ultra-qa:hover {
  border-color: #1b79cf;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-2px);
  text-decoration: none;
  color: #1a2332;
}
.ultra-qa-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.ultra-qa-icon.cpanel { background: rgba(255,108,44,.08); color: #ff6c2c; }
.ultra-qa-icon.webmail { background: rgba(27,121,207,.07); color: #1b79cf; }
.ultra-qa-icon.firewall { background: rgba(239,68,68,.07); color: #ef4444; }
.ultra-qa-icon.softaculous { background: rgba(139,92,246,.08); color: #8b5cf6; }
.ultra-qa-icon.accelerate { background: rgba(34,197,94,.07); color: #22c55e; }
.ultra-qa-icon.cloudflare { background: rgba(244,129,20,.08); color: #f48114; }
.ultra-qa-text {
  font-size: 13px;
  font-weight: 600;
}
.ultra-qa-desc {
  font-size: 11px;
  color: #8a94a3;
  line-height: 1.4;
}

/* --- Panel / Card Restyling --- */
.ultra-panels {
  margin-bottom: 20px;
}
.ultra-panel {
  background: #fff;
  border: 1px solid #e4e8ee !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.03);
  margin-bottom: 20px;
  overflow: hidden;
}
.ultra-panel .panel-heading {
  background: #fff !important;
  border-bottom: 1px solid #e4e8ee !important;
  padding: 16px 20px !important;
  border-radius: 12px 12px 0 0 !important;
}
.ultra-panel .panel-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a2332 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
.ultra-panel .panel-title i {
  color: #8a94a3;
  font-size: 14px;
}
.ultra-panel .panel-body {
  padding: 16px 20px;
}
.ultra-panel .panel-footer {
  background: #fff !important;
  border-top: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.ultra-panel .panel-footer:empty {
  display: none;
}

/* Panel list items */
.ultra-panel .list-group {
  margin: 0;
}
.ultra-panel .list-group-item {
  border: none !important;
  border-bottom: 1px solid #f0f2f5 !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  font-size: 14px;
  color: #1a2332;
  transition: background .15s ease;
}
.ultra-panel .list-group-item:last-child {
  border-bottom: none !important;
}
.ultra-panel .list-group-item:hover {
  background: #f8fafc;
}
.ultra-panel .list-group-item strong {
  font-weight: 600;
}
.ultra-panel .list-group-item small,
.ultra-panel .list-group-item .text-last-updated,
.ultra-panel .list-group-item .text-domain {
  font-size: 12px;
  color: #8a94a3;
}
.ultra-panel .list-group-item .text-domain {
  color: #1b79cf;
  font-size: 13px;
}

/* Panel accent override - all get clean look */
.ultra-panel[class*="panel-accent-"] .panel-heading {
  border-left: none !important;
}

/* Panel action link (replaces colored btn-xs) */
.ultra-card-action {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1b79cf !important;
  text-decoration: none !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  transition: all .15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: none !important;
  border: none !important;
}
.ultra-card-action:hover {
  background: rgba(27,121,207,.08) !important;
  text-decoration: none !important;
}
.ultra-card-action i {
  color: #1b79cf !important;
  font-size: 11px !important;
}

/* Status badges */
.ultra-panel .label {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ultra-panel .label-success {
  background: #dcfce7 !important;
  color: #15803d !important;
}

/* --- Addon Module Panel (Weebly etc.) --- */
.ultra-addon-panel {
  margin-bottom: 20px;
}
.ultra-addon-panel .panel {
  background: #fff;
  border: 1px solid #e4e8ee !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.03);
  overflow: hidden;
}
.ultra-addon-panel .panel-heading {
  background: #fff !important;
  border-bottom: 1px solid #e4e8ee !important;
  padding: 16px 20px !important;
  border-radius: 12px 12px 0 0 !important;
}
.ultra-addon-panel .panel-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a2332 !important;
}
.ultra-addon-panel .panel-body {
  padding: 16px 20px;
}
.ultra-addon-panel .panel-footer {
  background: #fff !important;
  border-top: none !important;
  padding: 0 !important;
}
.ultra-addon-panel .panel-footer:empty {
  display: none;
}

/* --- Promo Cards Row --- */
.ultra-promo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
  margin-bottom: 20px;
}
.ultra-promo-card {
  border-radius: 12px;
  overflow: hidden;
}
.ultra-promo-header {
  padding: 12px 18px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.ultra-promo-body {
  padding: 18px;
}
.ultra-promo-body p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Review card - dark blue */
.ultra-promo-review {
  background: linear-gradient(135deg, #0f2744 0%, #1b4a7a 100%);
  color: #fff;
}
.ultra-promo-review .ultra-promo-header {
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
}
.ultra-promo-review .ultra-promo-body p {
  color: rgba(255,255,255,.8);
}
.ultra-promo-btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  background: #f7a300;
  color: #1a2332;
  border: none;
  cursor: pointer;
  transition: all .15s ease;
}
.ultra-promo-btn-gold:hover { background: #ffc107; color: #1a2332; text-decoration: none; }

/* Attracta card - dark green */
.ultra-promo-attracta {
  background: linear-gradient(135deg, #1a4731 0%, #15803d 100%);
  color: #fff;
}
.ultra-promo-attracta .ultra-promo-header {
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
}
.ultra-promo-attracta .ultra-promo-body p {
  color: rgba(255,255,255,.8);
}
.ultra-promo-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  cursor: pointer;
  transition: all .15s ease;
}
.ultra-promo-btn-outline:hover { background: rgba(255,255,255,.25); color: #fff; text-decoration: none; }

/* --- Hide old homepage elements replaced by our new layout --- */
.tiles { display: none !important; }
.home-kb-search { display: none !important; }
#cah { display: none !important; }
/* NOTE: .header-lined is hidden via inline <style> in clientareahome.tpl only */

/* =====================================================================
   SIDEBAR RESTYLING (SITE-WIDE)
   Applies to all client area pages: homepage, invoices, tickets, etc.
   Targets .panel, .panel-sidebar, and .panel-default in the sidebar.
   ===================================================================== */
.sidebar .panel,
.sidebar .panel-sidebar,
.sidebar .panel-default {
  background: #fff !important;
  border: 1px solid #e4e8ee !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.03) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}
.sidebar .panel .panel-heading,
.sidebar .panel-sidebar .panel-heading,
.sidebar .panel-default .panel-heading {
  background: #fff !important;
  border-bottom: 1px solid #e4e8ee !important;
  border-left: none !important;
  padding: 14px 18px !important;
  border-radius: 12px 12px 0 0 !important;
}
.sidebar .panel .panel-title,
.sidebar .panel-sidebar .panel-title,
.sidebar .panel-default .panel-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #8a94a3 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
.sidebar .panel .panel-title i {
  font-size: 13px !important;
}
.sidebar .panel .panel-title .panel-minimise {
  color: #ccc !important;
  font-size: 11px !important;
}
.sidebar .panel .panel-body,
.sidebar .panel-default .panel-body {
  padding: 18px !important;
  font-size: 14px !important;
  color: #5a6577 !important;
  line-height: 1.6 !important;
}

/* Account info card (homepage) */
.sidebar .panel-sidebar .panel-body strong {
  color: #1a2332 !important;
  font-size: 16px !important;
  display: block !important;
  margin-bottom: 2px !important;
}
.sidebar .panel-sidebar .panel-body em {
  color: #5a6577 !important;
  font-style: normal !important;
  font-size: 14px !important;
}

/* Panel footers */
.sidebar .panel .panel-footer {
  background: #fff !important;
  border-top: 1px solid #e4e8ee !important;
  padding: 14px 18px !important;
}
.sidebar .panel .panel-footer:empty {
  display: none !important;
  padding: 0 !important;
  border: none !important;
}

/* Buttons in sidebar panels */
.sidebar .panel .btn {
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  transition: all .15s ease !important;
}
.sidebar .panel .btn-success {
  background: #fff !important;
  color: #5a6577 !important;
  border: 1px solid #d0d5dd !important;
}
.sidebar .panel .btn-success:hover {
  border-color: #1b79cf !important;
  color: #1b79cf !important;
  background: rgba(27,121,207,.04) !important;
}

/* List-group items in sidebar (shortcuts, billing nav, filters) */
.sidebar .panel .list-group-item {
  border: none !important;
  border-bottom: 1px solid #f0f2f5 !important;
  border-radius: 0 !important;
  padding: 11px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #5a6577 !important;
  transition: all .15s ease !important;
}
.sidebar .panel .list-group-item:last-child {
  border-bottom: none !important;
}
.sidebar .panel .list-group-item:hover {
  background: #f8fafc !important;
  color: #1b79cf !important;
}
.sidebar .panel .list-group-item i {
  font-size: 14px !important;
  width: 18px !important;
  text-align: center !important;
  color: #8a94a3 !important;
}
.sidebar .panel .list-group-item:hover i {
  color: #1b79cf !important;
}

/* Active state for sidebar nav (e.g. "My Invoices" on invoices page) */
.sidebar .panel .list-group-item.active {
  background: #1b79cf !important;
  color: #fff !important;
  border-color: #1b79cf !important;
  font-weight: 600 !important;
}
.sidebar .panel .list-group-item.active:hover {
  background: #155fa3 !important;
  color: #fff !important;
}
.sidebar .panel .list-group-item.active i {
  color: #fff !important;
}
/* First list item active - round top corners to match panel */
.sidebar .panel .list-group-item:first-child.active {
  border-radius: 0 !important;
}
/* Last list item active - round bottom corners */
.sidebar .panel .list-group-item:last-child.active {
  border-radius: 0 0 12px 12px !important;
}
/* Only list item active */
.sidebar .panel .list-group-item:only-child.active {
  border-radius: 0 !important;
}

/* Radio/filter labels in sidebar (invoice status, ticket filters) */
.sidebar .panel .panel-body label {
  font-size: 14px !important;
  color: #5a6577 !important;
}

/* =====================================================================
   WHMCS PANEL ORDERING (HOMEPAGE)
   Push Weebly "Build A Stunning Website" panel below Products/Tickets
   ===================================================================== */
.ultra-panels {
  display: flex;
  flex-direction: column;
}
.ultra-panels > .ultra-panel {
  order: 0;
}
/* Weebly Cloud panel - push to end */
.ultra-panels > [menuItemName="weeblycloud"] {
  order: 99;
}
/* Active Products/Services - keep at top */
.ultra-panels > [menuItemName="Active Products/Services"] {
  order: -3;
}
/* Recent Support Tickets - second */
.ultra-panels > [menuItemName="Recent Support Tickets"] {
  order: -2;
}
/* Recent News - third */
.ultra-panels > [menuItemName="Recent News"] {
  order: -1;
}

/* Remove colored left borders from sidebar accent panels */
.sidebar .panel[class*="panel-accent-"] .panel-heading {
  border-left: none !important;
}

/* Remove colored left borders from ALL accent panels site-wide */
.panel[class*="panel-accent-"] .panel-heading {
  border-left: none !important;
}

/* =====================================================================
   SUBPAGE CONTENT STYLING (SITE-WIDE)
   Modernize tables, forms, and panels on invoices, tickets, services, etc.
   ===================================================================== */

/* Main content area panels */
.main-content .panel,
.main-content .panel-default {
  border: 1px solid #e4e8ee !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.03) !important;
}
/* Let dropdowns overflow but clip panel backgrounds to rounded corners */
.main-content .panel > .panel-heading:first-child {
  border-radius: 12px 12px 0 0 !important;
}
.main-content .panel > .panel-body:last-child,
.main-content .panel > .panel-footer:last-child,
.main-content .panel > .list-group:last-child,
.main-content .panel > .list-group:last-child .list-group-item:last-child {
  border-radius: 0 0 12px 12px !important;
}
/* Only use overflow hidden when no dropdowns are present */
.main-content .panel > .panel-body:only-child {
  border-radius: 12px !important;
}
.main-content .panel .panel-heading,
.main-content .panel-default .panel-heading {
  background: #fff !important;
  border-bottom: 1px solid #e4e8ee !important;
  border-left: none !important;
  border-radius: 12px 12px 0 0 !important;
}
.main-content .panel .panel-title {
  font-weight: 700 !important;
  color: #1a2332 !important;
}
.main-content .panel .panel-title i {
  color: #8a94a3;
}
.main-content .panel .panel-body {
  background: #fff;
}
.main-content .panel .panel-footer {
  background: #fff !important;
  border-top: 1px solid #e4e8ee !important;
}
.main-content .panel .panel-footer:empty {
  display: none !important;
}

/* Main content list-group items */
.main-content .panel .list-group-item {
  border: none !important;
  border-bottom: 1px solid #f0f2f5 !important;
  border-radius: 0 !important;
  transition: background .15s ease;
}
.main-content .panel .list-group-item:last-child {
  border-bottom: none !important;
}
.main-content .panel .list-group-item:hover {
  background: #f8fafc;
}

/* Status labels */
.label {
  border-radius: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}
.label-success {
  background: #dcfce7 !important;
  color: #15803d !important;
}

/* DataTables styling (invoices, domains, etc.) */
.main-content .dataTables_wrapper {
  border-radius: 12px;
}
.main-content table.dataTable thead th {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #5a6577;
  border-bottom: 2px solid #e4e8ee !important;
}
.main-content table.dataTable tbody td {
  font-size: 14px;
  color: #1a2332;
  border-bottom: 1px solid #f0f2f5 !important;
  padding: 14px 12px;
}
.main-content table.dataTable tbody tr:hover td {
  background: #f8fafc;
}

/* DataTables info bar (blue header) - ensure white text */
.main-content .dataTables_wrapper .dataTables_info,
.main-content .dataTables_wrapper .dataTables_filter,
.main-content .dataTables_wrapper .dataTables_filter label,
.main-content .dataTables_wrapper .dataTables_filter input {
  color: #fff !important;
}
/* Colored panel headings in main content - keep white text */
.main-content .panel-heading[style*="background"],
.main-content .panel-heading.bg-color-blue,
.main-content .panel-heading.bg-color-green,
.main-content .panel-heading.bg-color-red,
.main-content .panel-heading.bg-color-gold {
  color: #fff !important;
}
.main-content .panel-heading[style*="background"] *,
.main-content .panel-heading.bg-color-blue *,
.main-content .panel-heading.bg-color-green *,
.main-content .panel-heading.bg-color-red *,
.main-content .panel-heading.bg-color-gold * {
  color: #fff !important;
}

/* DataTables pagination controls */
.main-content .dataTables_length,
.main-content .dataTables_info {
  font-size: 13px;
  color: #8a94a3;
  padding: 12px 0;
}
.main-content .dataTables_length select {
  display: inline-block;
  vertical-align: middle;
  padding: 4px 8px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-size: 13px;
  margin: 0 4px;
  height: auto;
  line-height: 1.4;
}
.main-content .dataTables_length label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 13px;
  color: #8a94a3;
}
.main-content .dataTables_paginate {
  padding: 12px 0;
}
/* DataTables Bootstrap pagination renders the <a> inside <li.paginate_button>
   as the actual visible button (Bootstrap floats <a> left and applies the
   button chrome). Previously we styled the <li> itself, which left empty
   button-shaped <li> shells next to the floating <a> text. Target the <a>. */
.main-content .dataTables_paginate .paginate_button {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.main-content .dataTables_paginate .paginate_button > a,
.main-content .dataTables_paginate .paginate_button > span {
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  margin: 0 2px !important;
  border: 1px solid #d0d5dd !important;
  background: #fff !important;
  color: #5a6577 !important;
  text-decoration: none !important;
}
.main-content .dataTables_paginate .paginate_button.current > a,
.main-content .dataTables_paginate .paginate_button.active > a {
  background: #1b79cf !important;
  border-color: #1b79cf !important;
  color: #fff !important;
}
.main-content .dataTables_paginate .paginate_button:hover:not(.current):not(.active):not(.disabled) > a {
  background: #f8fafc !important;
  border-color: #1b79cf !important;
  color: #1b79cf !important;
}
.main-content .dataTables_paginate .paginate_button.disabled > a {
  opacity: 0.4;
  cursor: default;
}
/* Keep pagination inside the panel bounds */
.main-content .dataTables_wrapper .row:last-child {
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =====================================================================
   PRODUCTS & SERVICES PAGE ENHANCEMENTS
   Help clients understand they can click through for cPanel/Webmail
   ===================================================================== */

/* Add hint text below the "Your Active Products/Services" panel title on homepage */
.ultra-panel[menuItemName="Active Products/Services"] .panel-heading h3::after {
  content: "Click your hosting package below for cPanel, Webmail, and account details";
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #1b79cf;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 4px;
}

/* Make product rows look more obviously clickable */
.main-content table.dataTable tbody tr {
  cursor: pointer;
}
.main-content table.dataTable tbody tr td a {
  color: #1b79cf;
  font-weight: 600;
}
.main-content table.dataTable tbody tr:hover td a {
  text-decoration: underline;
}

/* =====================================================================
   Per-service action buttons (cPanel / Webmail)
   Uses custom .ultra-svc-btn classes (NOT Bootstrap .btn) to sidestep
   the global .btn-info / .btn-primary / etc. overrides further down in
   this file. No !important wars needed.
   ===================================================================== */
#tableServicesList .responsive-edit-button,
#tableServicesList thead th.responsive-edit-button {
  display: table-cell !important;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle !important;
  text-align: right;
  padding: 12px 16px !important;
}

#tableServicesList .ultra-svc-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

#tableServicesList .ultra-svc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: 8px;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
  cursor: pointer;
  box-sizing: border-box;
}
#tableServicesList .ultra-svc-btn i {
  font-size: 13px;
  line-height: 1;
}
#tableServicesList .ultra-svc-btn:hover {
  transform: translateY(-1px);
  text-decoration: none !important;
}

/* Primary — cPanel (filled blue, the main action) */
#tableServicesList .ultra-svc-btn-primary,
#tableServicesList .ultra-svc-btn-primary:link,
#tableServicesList .ultra-svc-btn-primary:visited {
  background: #1b79cf;
  border-color: #1b79cf;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(27,121,207,0.18);
}
#tableServicesList .ultra-svc-btn-primary:hover,
#tableServicesList .ultra-svc-btn-primary:focus {
  background: #155fa3;
  border-color: #155fa3;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(27,121,207,0.28);
}

/* Outline — Webmail (white card with blue stroke) */
#tableServicesList .ultra-svc-btn-outline,
#tableServicesList .ultra-svc-btn-outline:link,
#tableServicesList .ultra-svc-btn-outline:visited {
  background: #fff;
  border-color: #cdd9e6;
  color: #1b79cf !important;
}
#tableServicesList .ultra-svc-btn-outline:hover,
#tableServicesList .ultra-svc-btn-outline:focus {
  background: #f0f7ff;
  border-color: #1b79cf;
  color: #155fa3 !important;
  box-shadow: 0 1px 4px rgba(27,121,207,0.12);
}

/* Dark theme variants */
html:not([data-theme="light"]) #tableServicesList .ultra-svc-btn-primary,
html:not([data-theme="light"]) #tableServicesList .ultra-svc-btn-primary:link,
html:not([data-theme="light"]) #tableServicesList .ultra-svc-btn-primary:visited {
  background: #1a7fd4;
  border-color: #1a7fd4;
  color: #fff !important;
}
html:not([data-theme="light"]) #tableServicesList .ultra-svc-btn-primary:hover {
  background: #2196f3;
  border-color: #2196f3;
}
html:not([data-theme="light"]) #tableServicesList .ultra-svc-btn-outline,
html:not([data-theme="light"]) #tableServicesList .ultra-svc-btn-outline:link,
html:not([data-theme="light"]) #tableServicesList .ultra-svc-btn-outline:visited {
  background: rgba(255,255,255,0.04);
  border-color: rgba(77,166,232,0.4);
  color: #4da6e8 !important;
}
html:not([data-theme="light"]) #tableServicesList .ultra-svc-btn-outline:hover {
  background: rgba(77,166,232,0.12);
  border-color: #4da6e8;
  color: #fff !important;
}

/* Tighten button label on narrow columns — hide text, keep icons */
@media (max-width: 991px) {
  #tableServicesList .ultra-svc-btn {
    padding: 0 10px;
    gap: 4px;
  }
}
@media (max-width: 767px) {
  #tableServicesList .responsive-edit-button {
    text-align: center !important;
  }
  #tableServicesList .ultra-svc-actions {
    justify-content: center;
  }
}

/* Products page helper banner */
#tableServicesList_wrapper::before {
  content: "Click any service below to access cPanel, Webmail, and manage your hosting account.";
  display: block;
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 14px;
  color: #1e40af;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* Style Active badge as a pill that looks interactive */
.main-content table.dataTable .label-success {
  background: #dcfce7 !important;
  color: #15803d !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  border: 1px solid #bbf7d0 !important;
}

/* =====================================================================
   FIREWALL CONNECTION CHECKER (CSF Unblock Module)   Product details page - clean up the messy module HTML output
   ===================================================================== */
/* Hide the ugly font/color red header, we'll restyle with CSS */
#home p font[color="red"] {
  font-size: 16px !important;
  font-family: inherit !important;
  display: block;
  background: #fef2f2;
  color: #dc2626 !important;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid #fecaca;
  margin-bottom: 16px;
  line-height: 1.5;
}
#home p font[color="red"] strong {
  font-weight: 700;
}
/* Clean up the body text */
#home .tab-pane p {
  font-size: 14px;
  line-height: 1.7;
  color: #5a6577;
  margin-bottom: 12px;
}
#home .tab-pane p b,
#home .tab-pane p strong {
  color: #1a2332;
}
/* Style the Check Firewall Block button */
#checkform .btn-success {
  background: #1b79cf !important;
  border-color: #1b79cf !important;
  border-radius: 6px !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: background .15s ease !important;
}
#checkform .btn-success:hover {
  background: #155fa3 !important;
  border-color: #155fa3 !important;
}
/* Clean up broken table remnants inside the text */
#home .tab-pane td {
  display: block;
  padding: 0;
  border: none;
}
#home .tab-pane tr {
  display: block;
}

/* Page header on subpages (keep visible, just clean up) */
.main-content .header-lined h1 {
  font-size: 24px;
  font-weight: 700;
  color: #1a2332;
  border-bottom: 2px solid #e4e8ee;
  padding-bottom: 12px;
}
.main-content .header-lined .breadcrumb {
  background: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
}

/* Action buttons */
.main-content .btn-default.bg-color-blue,
.main-content .btn-default.bg-color-red,
.main-content .btn-default.bg-color-gold,
.main-content .btn-default.bg-color-green,
.main-content .btn-default.bg-color-emerald,
.main-content .btn-default.bg-color-asbestos {
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* KB search results page - scope to knowledgebase only */
.knowledgebase-search .input-group .form-control,
#main-body .knowledgebase-search .input-group .form-control {
  border-radius: 12px 0 0 12px !important;
  border: 1px solid #e4e8ee !important;
  padding: 12px 18px !important;
  font-size: 15px !important;
}
.knowledgebase-search .input-group .btn,
#main-body .knowledgebase-search .input-group .btn {
  border-radius: 0 12px 12px 0 !important;
}

/* =====================================================================
   TICKET VIEW PAGE
   Modernize the ticket reply thread and reply form
   ===================================================================== */

/* Reply form panel */
.panel-info {
  border: 1px solid #e4e8ee !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.03) !important;
  overflow: hidden;
}
.panel-info .panel-heading {
  background: #fff !important;
  border-bottom: 1px solid #e4e8ee !important;
  border-color: #e4e8ee !important;
  padding: 16px 20px !important;
  cursor: pointer;
}
.panel-info .panel-heading .panel-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a2332 !important;
}
.panel-info .panel-heading .panel-title i {
  color: #8a94a3;
}
.panel-info .panel-heading .collapse-icon i {
  color: #8a94a3;
  font-size: 14px;
}
.panel-info .panel-body {
  padding: 24px 20px !important;
  background: #fff !important;
}
.panel-info .panel-body .form-control {
  border-radius: 8px !important;
  border: 1px solid #d0d5dd !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  transition: border-color .15s ease !important;
}
.panel-info .panel-body .form-control:focus {
  border-color: #1b79cf !important;
  box-shadow: 0 0 0 3px rgba(27,121,207,.1) !important;
}
.panel-info .panel-body label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #5a6577 !important;
  margin-bottom: 6px !important;
}
.panel-info .panel-body .btn-primary {
  background: #1b79cf !important;
  border-color: #1b79cf !important;
  border-radius: 8px !important;
  padding: 10px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.panel-info .panel-body .btn-primary:hover {
  background: #155fa3 !important;
}
.panel-info .panel-body .btn-default {
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: 1px solid #d0d5dd !important;
}
.panel-info .panel-body .ticket-attachments-message {
  font-size: 12px !important;
  margin-top: 8px !important;
}

/* Ticket replies thread */
.ticket-reply {
  border: 1px solid #e4e8ee !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.03) !important;
  background: #fff;
  overflow: auto !important;
}

/* User info header */
.ticket-reply .user {
  background: #f8fafc !important;
  border-bottom: 1px solid #e4e8ee !important;
  padding: 14px 20px !important;
}
.ticket-reply .user i.fa-user {
  font-size: 16px;
  color: #fff;
  background: #8a94a3;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
}
.ticket-reply .user .name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a2332 !important;
}
.ticket-reply .user .type {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 2px 10px !important;
  border-radius: 20px !important;
}

/* Staff vs Client differentiation */
.ticket-reply.staff {
  border-left: 3px solid #1b79cf !important;
}
.ticket-reply.staff .user {
  background: #f0f7ff !important;
  border-bottom-color: #dbeafe !important;
}
.ticket-reply.staff .user i.fa-user {
  background: #1b79cf;
  color: #fff;
}
.ticket-reply.staff .user .type {
  background: #dbeafe !important;
  color: #1e40af !important;
}

/* Client replies */
.ticket-reply:not(.staff) .user .type {
  background: #f0f2f5 !important;
  color: #5a6577 !important;
}

/* Date */
.ticket-reply .date {
  float: right;
  font-size: 13px !important;
  color: #8a94a3 !important;
  padding: 16px 20px 0 0 !important;
  font-weight: 500;
}

/* Message body */
.ticket-reply .message {
  padding: 18px 20px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #3a3f4a !important;
}

/* Attachments */
.ticket-reply .attachments {
  padding: 14px 20px !important;
  background: #f8fafc !important;
  border-top: 1px solid #e4e8ee !important;
  font-size: 13px !important;
}
.ticket-reply .attachments strong {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #5a6577 !important;
}
.ticket-reply .attachments ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
}
.ticket-reply .attachments ul li {
  padding: 4px 0;
}
.ticket-reply .attachments ul li a {
  color: #1b79cf;
  font-weight: 500;
}
.ticket-reply .attachments ul li a:hover {
  text-decoration: underline;
}

/* Rating stars */
.ticket-reply .rating,
.ticket-reply .rating-done {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f2f5;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .ultra-welcome {
    padding: 24px 20px 20px;
    border-radius: 12px;
  }
  .ultra-welcome-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .ultra-welcome-greeting h1 { font-size: 22px; }
  .ultra-welcome-actions { width: 100%; }
  .ultra-welcome-actions .ultra-btn { flex: 1; justify-content: center; }
  .ultra-stat-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .ultra-quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }
  .ultra-promo-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .ultra-welcome { padding: 20px 16px; }
  .ultra-welcome-greeting h1 { font-size: 20px; }
  .ultra-stat-number { font-size: 24px; }
  .ultra-quick-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ultra-qa { padding: 14px 12px; }
}
.ticket-reply .message p {
    margin-bottom: 0.75em;
}

.ticket-reply .message p:last-child {
    margin-bottom: 0;
}
/* FA7 new class syntax */
.fa-solid, .fa-regular, .fa-light, .fa-duotone,
.fa-solid::before, .fa-regular::before, .fa-light::before, .fa-duotone::before {
  font-family: 'Font Awesome 7 Free' !important;
}
.fa-brands, .fa-brands::before {
  font-family: 'Font Awesome 7 Brands' !important;
}


/* Lock ultra-nav against Bootstrap/WHMCS CSS bleed */
.ultra-nav {
    line-height: 1 !important;
}
.ultra-nav .ultra-nav-top {
    line-height: normal !important;
}
.ultra-nav .ultra-nav-top-right a {
    line-height: var(--ultra-nav-util-h) !important;
}
.ultra-nav .ultra-nav-links > li > a {
    line-height: 1 !important;
}

/* Bootstrap button overrides � match Ultra nav CTA style */
.btn-primary,.btn-primary:link,.btn-primary:visited,.btn-primary:focus {
    background: #1a7fd4 !important;
    border-color: #1a7fd4 !important;
    border-radius: 6px !important;
    color: #fff !important;
    transition: all 0.2s ease !important;
}
.btn-primary:hover,.btn-primary:active {
    background: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.btn-success,.btn-success:link,.btn-success:visited,.btn-success:focus {
    background: #fe9f0d !important;
    border-color: #fe9f0d !important;
    border-radius: 6px !important;
    color: #fff !important;
    transition: all 0.2s ease !important;
}
.btn-success:hover,.btn-success:active {
    background: #ffb840 !important;
    border-color: #ffb840 !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.btn-default,.btn-default:link,.btn-default:visited,.btn-default:focus {
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}
.btn-default:hover,.btn-default:active {
    transform: translateY(-1px);
}
.btn-danger,.btn-danger:link,.btn-danger:visited,.btn-danger:focus {
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}
.btn-danger:hover,.btn-danger:active {
    transform: translateY(-1px);
}
.btn-info,.btn-info:link,.btn-info:visited,.btn-info:focus {
    background: #1a7fd4 !important;
    border-color: #1a7fd4 !important;
    border-radius: 6px !important;
    color: #fff !important;
    transition: all 0.2s ease !important;
}
.btn-info:hover,.btn-info:active {
    background: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Domain search button overrides */
#home-banner .btn.search,#home-banner .btn.search:link,#home-banner .btn.search:visited,#home-banner .btn.search:focus,#frmDomainHomepage .btn.search {
    background: #1a7fd4 !important;
    border-color: #1a7fd4 !important;
    border-radius: 6px !important;
    color: #fff !important;
    transition: all 0.2s ease !important;
}
#home-banner .btn.search:hover,#home-banner .btn.search:active,#frmDomainHomepage .btn.search:hover {
    background: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #fff !important;
    transform: translateY(-1px);
}
#home-banner .btn.transfer,#home-banner .btn.transfer:link,#home-banner .btn.transfer:visited,#home-banner .btn.transfer:focus,#frmDomainHomepage .btn.transfer {
    background: #fe9f0d !important;
    border-color: #fe9f0d !important;
    border-radius: 6px !important;
    color: #fff !important;
    transition: all 0.2s ease !important;
}
#home-banner .btn.transfer:hover,#home-banner .btn.transfer:active,#frmDomainHomepage .btn.transfer:hover {
    background: #ffb840 !important;
    border-color: #ffb840 !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Search/Transfer button spacing */
#home-banner .input-group-btn .btn.search,
#home-banner .input-group-btn .btn.transfer,
#frmDomainHomepage .input-group-btn .btn {
    margin-left: 6px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Domain search input styling */
#home-banner .input-group-lg .form-control,
#frmDomainHomepage .input-group-lg .form-control {
    border-radius: 6px !important;
    border: 2px solid rgba(255,255,255,0.15) !important;
    background: rgba(255,255,255,0.95) !important;
    height: 48px !important;
    font-size: 15px !important;
    padding: 0 16px !important;
    color: #333 !important;
    transition: border-color 0.2s ease !important;
}
#home-banner .input-group-lg .form-control:focus,
#frmDomainHomepage .input-group-lg .form-control:focus {
    border-color: #1a7fd4 !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(26,127,212,0.15) !important;
}
#home-banner .input-group-btn .btn.search,
#home-banner .input-group-btn .btn.transfer,
#frmDomainHomepage .input-group-btn .btn {
    height: 48px !important;
}

/* Cart page - replace green with Ultra blue */
#order-standard_cart .domain-checker-available {
    color: #1a7fd4 !important;
}
.suggested-domains .panel-heading {
    border-bottom: 2px solid #1a7fd4 !important;
}

/* Cart addon button - Ultra blue style */
#order-standard_cart .panel-addon .panel-add {
    background-color: #1a7fd4 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}
#order-standard_cart .panel-addon .panel-add:hover {
    background-color: #2196f3 !important;
    transform: translateY(-1px);
}


.ultra-nav i:not(.ultra-caret) {
  font-style: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
/* Prevent Bootstrap text-size-adjust from affecting nav rendering */
.ultra-nav, .ultra-nav * {
  -webkit-text-size-adjust: none !important;
  -moz-text-size-adjust: none !important;
  text-size-adjust: none !important;
}
.ultra-nav i.ultra-caret {
  width: 8.75px !important;
  overflow: hidden !important;
  font-style: normal !important;
}

/* Match nav link spacing exactly to CDN nav stylesheet */
.ultra-nav-links > li > a {
  letter-spacing: normal !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}


/* Match nav line-height to www - prevent reset CSS bleed */
.ultra-nav-links,
.ultra-nav-links > li,
.ultra-nav-links > li > a {
  line-height: 23px !important;
}

/* Fix ultra-nav-right button styles - prevent Bootstrap/WHMCS bleed */
.ultra-nav .ultra-nav-right .ultra-login-btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 7px 16px !important;
  line-height: 23px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.ultra-nav .ultra-nav-right .ultra-login-btn:hover {
  border-color: rgba(255,255,255,0.5) !important;
  color: #fff !important;
}
.ultra-nav .ultra-nav-right .ultra-cta {
  background: var(--ultra-blue, #1b84da) !important;
  border: none !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  line-height: 23px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  width: 117px !important;
  justify-content: center !important;
}
.ultra-nav .ultra-nav-right .ultra-cta:hover {
  background: var(--ultra-blue-hover, #1565b8) !important;
}
.ultra-nav .ultra-nav-right .ultra-admin-btn {
  position: fixed !important;
  right: 12px !important;
  top: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.7) !important;
  border: none !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

.ultra-nav .ultra-nav-right .ultra-admin-btn:hover {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}

/* Ensure nav-right margin-left auto matches CDN */
.ultra-nav .ultra-nav-right {
  margin-left: auto !important;
}

/* ==========================================================
   DARK MODE OVERRIDES (same file = guaranteed source order)
   ========================================================== */
html:not([data-theme="light"]) .main-content table.dataTable thead th {
  color: rgba(255,255,255,0.5) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
html:not([data-theme="light"]) .main-content table.dataTable tbody td {
  color: rgba(255,255,255,0.85) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
html:not([data-theme="light"]) .main-content table.dataTable tbody tr {
  background: #0f1c2e !important;
}
html:not([data-theme="light"]) .table-list > tbody > tr > td {
  background-color: #0f1c2e !important;
}
html:not([data-theme="light"]) .table-list > tbody > tr:nth-of-type(even) > td {
  background-color: rgba(255,255,255,0.02) !important;
}
html:not([data-theme="light"]) .main-content table.dataTable tbody tr:hover td {
  background: rgba(255,255,255,0.04) !important;
}
html:not([data-theme="light"]) .main-content table.dataTable tbody td a {
  color: #4da6e8 !important;
}
html:not([data-theme="light"]) .main-content .dataTables_length,
html:not([data-theme="light"]) .main-content .dataTables_info {
  color: rgba(255,255,255,0.5) !important;
}
html:not([data-theme="light"]) .main-content .dataTables_length label {
  color: rgba(255,255,255,0.5) !important;
}
html:not([data-theme="light"]) .main-content .dataTables_length select {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
html:not([data-theme="light"]) .main-content .dataTables_filter input {
  background-color: #fff !important;
  border-color: #ccc !important;
  color: #fff !important;
}
html:not([data-theme="light"]) .main-content .dataTables_paginate .paginate_button {
  background: transparent !important;
  border: 0 !important;
}
html:not([data-theme="light"]) .main-content .dataTables_paginate .paginate_button > a,
html:not([data-theme="light"]) .main-content .dataTables_paginate .paginate_button > span {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.7) !important;
}
html:not([data-theme="light"]) .main-content .dataTables_paginate .paginate_button.current > a,
html:not([data-theme="light"]) .main-content .dataTables_paginate .paginate_button.active > a {
  background: #1a7fd4 !important;
  border-color: #1a7fd4 !important;
  color: #fff !important;
}
html:not([data-theme="light"]) .main-content .dataTables_paginate .paginate_button:hover:not(.current):not(.active):not(.disabled) > a {
  background: rgba(255,255,255,0.08) !important;
  border-color: #4da6e8 !important;
  color: #4da6e8 !important;
}
html:not([data-theme="light"]) .sidebar .panel-sidebar .panel-body strong {
  color: #fff !important;
}
html:not([data-theme="light"]) .sidebar .panel-sidebar .panel-body em {
  color: rgba(255,255,255,0.6) !important;
}
html:not([data-theme="light"]) .sidebar .panel .panel-body {
  color: rgba(255,255,255,0.85) !important;
}
html:not([data-theme="light"]) .sidebar .panel .list-group-item {
  color: rgba(255,255,255,0.85) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
  background: #0f1c2e !important;
}
html:not([data-theme="light"]) .sidebar .panel .list-group-item:hover {
  background: rgba(255,255,255,0.04) !important;
  color: #4da6e8 !important;
}
html:not([data-theme="light"]) .sidebar .panel .list-group-item i {
  color: rgba(255,255,255,0.4) !important;
}
html:not([data-theme="light"]) .sidebar .panel .btn-success {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* Override ALL ultra-custom heading colors for dark mode */
html:not([data-theme="light"]) .main-content .panel .panel-title,
html:not([data-theme="light"]) .main-content .panel-title,
html:not([data-theme="light"]) .main-content h3,
html:not([data-theme="light"]) .main-content h4,
html:not([data-theme="light"]) .ultra-panel .panel-title {
  color: #fff !important;
}

/* Status labels in tables — white pill bg needs dark override */
html:not([data-theme="light"]) .label-active,
html:not([data-theme="light"]) .label[style*="Active"],
html:not([data-theme="light"]) span.label-success { background: rgba(34,197,94,0.15) !important; color: #5dde9e !important; }
html:not([data-theme="light"]) .label-cancelled,
html:not([data-theme="light"]) span.label-default { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.5) !important; }
html:not([data-theme="light"]) .label-pending,
html:not([data-theme="light"]) span.label-warning { background: rgba(243,156,18,0.15) !important; color: #f7c948 !important; }
html:not([data-theme="light"]) .label-suspended,
html:not([data-theme="light"]) span.label-danger { background: rgba(231,76,60,0.15) !important; color: #f1948a !important; }
/* Catch any .label with white/light bg */
html:not([data-theme="light"]) .table .label {
  border: 1px solid rgba(255,255,255,0.1) !important;
}
html:not([data-theme="light"]) .ultra-panel .label-success {
  background: rgba(34,197,94,0.15) !important;
  color: #5dde9e !important;
}

/* DataTables bottom bar — Show/entries/pagination */
html:not([data-theme="light"]) .main-content .dataTables_wrapper .row:last-child {
  background: #0c1929 !important;
  color: rgba(255,255,255,0.5) !important;
}
html:not([data-theme="light"]) .main-content .dataTables_wrapper .row:last-child * {
  color: rgba(255,255,255,0.5) !important;
}
html:not([data-theme="light"]) .main-content .dataTables_wrapper .row:last-child select {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
html:not([data-theme="light"]) .main-content .dataTables_wrapper .row:last-child .paginate_button {
  background: transparent !important;
  border: 0 !important;
}
html:not([data-theme="light"]) .main-content .dataTables_wrapper .row:last-child .paginate_button > a,
html:not([data-theme="light"]) .main-content .dataTables_wrapper .row:last-child .paginate_button > span {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.7) !important;
}
html:not([data-theme="light"]) .main-content .dataTables_wrapper .row:last-child .paginate_button.current > a,
html:not([data-theme="light"]) .main-content .dataTables_wrapper .row:last-child .paginate_button.active > a {
  background: #1a7fd4 !important;
  border-color: #1a7fd4 !important;
  color: #fff !important;
}
html:not([data-theme="light"]) .main-content .dataTables_wrapper .row:last-child .paginate_button.disabled > a {
  color: rgba(255,255,255,0.2) !important;
  background: transparent !important;
}

/* Status pills (.status class from styles.css) */
html:not([data-theme="light"]) .status {
  background-color: transparent !important;
  border-color: rgba(255,255,255,0.15) !important;
}
html:not([data-theme="light"]) .status-active,
html:not([data-theme="light"]) .status-open,
html:not([data-theme="light"]) .status-completed {
  color: #5dde9e !important;
  border-color: rgba(34,197,94,0.3) !important;
}
html:not([data-theme="light"]) .status-cancelled {
  color: rgba(255,255,255,0.4) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
html:not([data-theme="light"]) .status-pending {
  color: #f1948a !important;
  border-color: rgba(231,76,60,0.3) !important;
}
html:not([data-theme="light"]) .status-suspended {
  color: #f7c948 !important;
  border-color: rgba(243,156,18,0.3) !important;
}
html:not([data-theme="light"]) .status-terminated {
  color: rgba(255,255,255,0.4) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
html:not([data-theme="light"]) .status-paid {
  color: #5dde9e !important;
  border-color: rgba(34,197,94,0.3) !important;
}

/* ChatStack live support — vertically center bubble text */
#chatstack-container.copyright .chatstack-initiate-chat .text.content {
  padding-bottom: 20px !important;
}
html:not([data-theme="light"]) .status-unpaid {
  color: #f1948a !important;
  border-color: rgba(231,76,60,0.3) !important;
}
html:not([data-theme="light"]) .status-closed {
  color: rgba(255,255,255,0.4) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* DataTables controls — target by generated IDs */
html:not([data-theme="light"]) [id$="_filter"],
html:not([data-theme="light"]) [id$="_filter"] *,
html:not([data-theme="light"]) [id$="_info"],
html:not([data-theme="light"]) [id$="_length"],
html:not([data-theme="light"]) [id$="_length"] *,
html:not([data-theme="light"]) [id$="_paginate"],
html:not([data-theme="light"]) [id$="_paginate"] * {
  color: rgba(255,255,255,0.6) !important;
}
html:not([data-theme="light"]) [id$="_filter"] input {
  background-color: #fff !important;
  border-color: #ccc !important;
  color: #333 !important;
}
html:not([data-theme="light"]) [id$="_length"] select {
  background-color: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
/* Search input styling */
[id$="_filter"] label {
  position: relative !important;
}
html:not([data-theme="light"]) [id$="_filter"] input::placeholder {
  color: rgba(255,255,255,0.4) !important;
}
html:not([data-theme="light"]) [id$="_paginate"] .paginate_button.current > a,
html:not([data-theme="light"]) [id$="_paginate"] .paginate_button.active > a {
  background: #1a7fd4 !important;
  border-color: #1a7fd4 !important;
  color: #fff !important;
}
html:not([data-theme="light"]) [id$="_paginate"] .paginate_button.disabled > a {
  color: rgba(255,255,255,0.2) !important;
}
/* DataTables wrapper + table-container — kill ALL white backgrounds */
html:not([data-theme="light"]) .table-container,
html:not([data-theme="light"]) .dataTables_wrapper,
html:not([data-theme="light"]) .dataTables_wrapper > div,
html:not([data-theme="light"]) .dataTables_wrapper .row {
  background-color: #0f1c2e !important;
}