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

/* =============================================================
   CimaServer Premium Dashboard — CimaPress Design System
   Built on Horn v3.2 base — CSS-only transformation
   Author: CimaPress | Version: 1.0
   ============================================================= */

/* ─── 1. CSS VARIABLES — CimaPress Palette ─── */
:root {
  /* Core Brand */
  --cima-sidebar:       #111111;
  --cima-sidebar-deep:  #111111;
  --cima-sidebar-hover: #1a1a1a;
  --cima-sidebar-text:  #8b8b8b;
  --cima-sidebar-active:#0d9488;

  /* Primary Accent — Teal */
  --cima-accent:        #0d9488;
  --cima-accent-hover:  #0f766e;
  --cima-accent-light:  #5eead4;
  --cima-accent-bg:     rgba(13, 148, 136, 0.08);
  --cima-accent-border: rgba(13, 148, 136, 0.2);

  /* Content Area */
  --cima-bg:            #f1f5f9;
  --cima-card:          #ffffff;
  --cima-heading:       #111111;
  --cima-text:          #334155;
  --cima-muted:         #64748b;
  --cima-border:        #e2e8f0;
  --cima-border-light:  #f1f5f9;

  /* Status Colors */
  --cima-success:       #10b981;
  --cima-success-bg:    rgba(16, 185, 129, 0.1);
  --cima-warning:       #f59e0b;
  --cima-warning-bg:    rgba(245, 158, 11, 0.1);
  --cima-danger:        #ef4444;
  --cima-danger-bg:     rgba(239, 68, 68, 0.1);
  --cima-info:          #3b82f6;
  --cima-info-bg:       rgba(59, 130, 246, 0.1);

  /* Glassmorphism */
  --cima-glass:         rgba(255, 255, 255, 0.75);
  --cima-glass-border:  rgba(255, 255, 255, 0.4);
  --cima-glass-shadow:  0 8px 32px rgba(0, 0, 0, 0.06);

  /* Radius */
  --cima-radius:        12px;
  --cima-radius-sm:     8px;
  --cima-radius-lg:     16px;

  /* Transitions */
  --cima-transition:    all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─── 2. GLOBAL RESETS ─── */
html {
  font-size: 14px;
}

body#layout01 {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: var(--cima-bg) !important;
  color: var(--cima-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Logo: hide company name text, show only logo image */
.b-title,
.logo-content .b-title,
.header-logo .b-title,
nav .b-title,
.m-header .b-title {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Force font globally — override WHMCS Open Sans */
body#layout01 *:not(i):not(.fas):not(.far):not(.fab):not(.fa):not(.glyphicon):not([class*="icon"]) {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}


/* Content area padding - tighter for more usable space */
.main-container .content.main {
  padding: 10px 15px 0 !important;
}

��€ 3. DARK SIDEBAR — Always Expanded ─── */

/* Force sidebar always expanded — never collapse */
nav.navbar.default {
  background: #111111 !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
  width: 280px !important;
  height: 100% !important;
}

/* Prevent JS from collapsing */
nav.navbar.navbar-collapsed {
  width: 280px !important;
}

nav.navbar.navbar-collapsed .inner-navbar li > a .sideinfo {
  display: inline !important;
}

nav.navbar.navbar-collapsed .header-logo {
  width: 280px !important;
}

nav.navbar.navbar-collapsed .logo-content .b-title {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

nav.navbar.navbar-collapsed .badge,
nav.navbar.navbar-collapsed .labelinfo {
  opacity: 1 !important;
  transform: none !important;
}

nav.navbar.navbar-collapsed .nav-menu-title {
  display: block !important;
}

nav.navbar.navbar-collapsed .nav-menu-title span {
  display: inline !important;
}

nav.navbar.navbar-collapsed ~ .header {
  width: calc(100% - 280px) !important;
}

nav.navbar.navbar-collapsed ~ .header,
nav.navbar.navbar-collapsed ~ .main-container {
  margin-left: 280px !important;
}

/* Submenus back to normal dropdown (not side-pop) */
nav.navbar.navbar-collapsed .inner-navbar > li.hasmenu .submenu {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  min-width: auto !important;
}

nav.navbar.navbar-collapsed .inner-navbar > li.hasmenu.trigger .submenu {
  padding-top: 0 !important;
  box-shadow: none !important;
}

.navbar .navbar-wrapper {
  background: #111111 !important;
}

.navbar .navbar-brand.header-logo {
  background: #111111 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  width: 262px !important;
}

.navbar .header-logo .b-title {
  display: none !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Logo — use the actual company logo PNG */
.navbar .header-logo .logo {
  filter: none !important;
  max-height: 40px !important;
  width: auto !important;
}

/* Hide hamburger menu button — sidebar is always open */
/* Hide hamburger on desktop only */
@media (min-width: 769px) {
  .navbar .mobmenu {
    display: none !important;
  }
}

/* Sidebar text overflow fix — ensure long items like 'Preguntas Frecuentes' fit */
.navbar .inner-navbar > li > a .sideinfo {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 13px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Sidebar menu items */
.navbar .inner-navbar > li > a {
  color: var(--cima-sidebar-text) !important;
  transition: var(--cima-transition) !important;
  border-radius: var(--cima-radius-sm) !important;
  margin: 2px 8px !important;
  padding: 10px 14px !important;
}

.navbar .inner-navbar > li > a:hover,
.navbar .inner-navbar > li > a:focus {
  color: #f1f5f9 !important;
  background: var(--cima-sidebar-hover) !important;
}

.navbar .inner-navbar > li.active > a,
.navbar .inner-navbar > li > a.active {
  color: #000000 !important;
  background: rgb(156, 210, 1) !important;
  border-left: 3px solid #ffffff !important;
}

/* Menu section titles */
.navbar .nav-menu-title span {
  color: var(--cima-sidebar-text) !important;
  opacity: 0.5;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
}

/* Submenu */
.navbar .submenu {
  background: #111111 !important;
}

.navbar .submenu li a {
  color: var(--cima-sidebar-text) !important;
  font-size: 13px !important;
}

.navbar .submenu li a:hover {
  color: var(--cima-accent-light) !important;
  padding-left: 20px !important;
}

/* Menu icons — teal tint */
.navbar .inner-navbar .icony .svg {
  filter: invert(60%) sepia(15%) saturate(500%) hue-rotate(130deg) brightness(95%) contrast(90%) !important;
  opacity: 0.7;
  transition: var(--cima-transition);
}

.navbar .inner-navbar > li:hover .icony .svg,
.navbar .inner-navbar > li.active .icony .svg {
  filter: invert(55%) sepia(80%) saturate(400%) hue-rotate(130deg) brightness(100%) contrast(95%) !important;
  opacity: 1;
}

.navbar .inner-navbar > li.active > a .icony .svg,
.navbar .inner-navbar > li > a.active .icony .svg {
  filter: brightness(0) !important;
  opacity: 1 !important;
}

/* Label badges in sidebar */
.navbar .labelinfo {
  background: var(--cima-accent) !important;
  color: #fff !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  padding: 2px 8px !important;
}

.navbar .labelinfo.custom {
  background: #ffffff !important;
  color: #000000 !important;
}

/* Scrollbar in sidebar */
.navbar .navbar-content::-webkit-scrollbar {
  width: 4px;
}

.navbar .navbar-content::-webkit-scrollbar-track {
  background: transparent;
}

.navbar .navbar-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}


/* ─── 4. TOP HEADER BAR ─── */
.header.navbar {
  background: var(--cima-card) !important;
  border-bottom: 1px solid var(--cima-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.header.navbar .main-search .form-control {
  background: var(--cima-bg) !important;
  border: 1px solid var(--cima-border) !important;
  border-radius: var(--cima-radius) !important;
  color: var(--cima-text) !important;
  font-size: 13px !important;
}

.header.navbar .main-search .form-control:focus {
  border-color: var(--cima-accent) !important;
  box-shadow: 0 0 0 3px var(--cima-accent-bg) !important;
}

/* Header icons */
.header.navbar .icohorn {
  filter: brightness(0) saturate(0%) !important;
  opacity: 0.5;
  transition: var(--cima-transition);
}

.header.navbar .icohorn:hover {
  opacity: 0.8;
  filter: invert(40%) sepia(80%) saturate(500%) hue-rotate(130deg) brightness(95%) !important;
}


/* ─── 5. MAIN CONTENT AREA ─── */
.main-container {
  background: var(--cima-bg) !important;
}

.page-wrapper {
  background: transparent !important;
}

/* Page headers */
.page-header-section .page-header-title h5 {
  color: var(--cima-heading) !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.02em;
}

.page-header-section .breadcrumb a {
  color: var(--cima-accent) !important;
}


/* ─── 6. CLIENT AREA HOME — KPI CARDS ─── */

/* Welcome banner */
.container-clientarea {
  background: linear-gradient(135deg, var(--cima-sidebar), var(--cima-accent-hover)) !important;
  border-radius: var(--cima-radius-lg) !important;
  overflow: hidden;
  position: relative;
}

.container-clientarea::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(94, 234, 212, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.container-clientarea .container-clientarea-bg {
  display: none !important;
}

.clientarea-new-header .username {
  color: #f8fafc !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.clientarea-new-header .adress {
  color: rgba(248, 250, 252, 0.7) !important;
}

.clientarea-new-header .header-features-icons .badge.feat {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  backdrop-filter: blur(8px);
  color: #f8fafc !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--cima-transition) !important;
}

.clientarea-new-header .header-features-icons .badge.feat:hover {
  background: rgba(255,255,255,0.25) !important;
  transform: translateY(-2px);
}

/* Gravatar in welcome */
.img-profile-client-area {
  border: 3px solid rgba(255,255,255,0.3) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* KPI stat cards */
.area-discreted-info-user {
  margin-top: -20px !important;
  position: relative;
  z-index: 10;
  padding: 0 20px !important;
}

.area-discreted-info-user .content-serv {
  background: var(--cima-glass) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--cima-glass-border) !important;
  border-radius: var(--cima-radius) !important;
  box-shadow: var(--cima-glass-shadow) !important;
  padding: 24px 20px !important;
  transition: var(--cima-transition) !important;
  position: relative;
  overflow: hidden;
}

.area-discreted-info-user .content-serv::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, var(--cima-accent-bg) 0%, transparent 70%);
  pointer-events: none;
}

.area-discreted-info-user .content-serv:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--cima-accent-border) !important;
}

.area-discreted-info-user .content-serv .title {
  color: var(--cima-heading) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  display: block !important;
}

.area-discreted-info-user .content-serv span:last-child {
  color: var(--cima-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.area-discreted-info-user .content-serv i {
  background: var(--cima-accent-bg) !important;
  color: var(--cima-accent) !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--cima-radius-sm) !important;
  font-size: 22px !important;
  margin-bottom: 12px !important;
}


/* ─── 7. PANELS — Service/Invoice/Ticket Panels ─── */
.client-home-panels .panel {
  background: var(--cima-card) !important;
  border: 1px solid var(--cima-border) !important;
  border-radius: var(--cima-radius) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  overflow: hidden;
  transition: var(--cima-transition);
}

.client-home-panels .panel:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}

.client-home-panels .panel-heading {
  background: var(--cima-bg) !important;
  border-bottom: 1px solid var(--cima-border) !important;
  padding: 14px 20px !important;
}

.client-home-panels .panel-title {
  color: var(--cima-heading) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.client-home-panels .panel-body {
  padding: 16px 20px !important;
}

.client-home-panels .list-group-item {
  border-color: var(--cima-border-light) !important;
  color: var(--cima-text) !important;
  transition: var(--cima-transition);
  padding: 10px 20px !important;
}

.client-home-panels .list-group-item:hover {
  background: var(--cima-accent-bg) !important;
  color: var(--cima-accent) !important;
}

/* Green accent for active services panel */
.panel-accent-success .panel-heading {
  border-left: 3px solid var(--cima-success) !important;
}

/* Red accent for overdue */
.panel-accent-danger .panel-heading {
  border-left: 3px solid var(--cima-danger) !important;
}

/* Info panel */
.panel-accent-info .panel-heading {
  border-left: 3px solid var(--cima-info) !important;
}

/* Panel buttons */
.cima-panel-link-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background: #111111 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    float: right !important;
}
.cima-panel-link-btn:hover {
    background: #1a1a1a !important;
    color: #9cd201 !important;
}
.client-home-panels .badge.feat {
  background: var(--cima-accent) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ─── 8. INVOICE CARDS ─── */
.invoices-elements-tringo {
  background: var(--cima-card) !important;
  border: 1px solid var(--cima-border) !important;
  border-radius: var(--cima-radius) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  transition: var(--cima-transition);
  overflow: hidden;
}

.invoices-elements-tringo:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
  transform: translateY(-2px);
}

.invoice-elements-header {
  background: var(--cima-bg) !important;
  border-bottom: 1px solid var(--cima-border) !important;
}

.invoice-pay-button-now {
  background: var(--cima-accent) !important;
  color: #fff !important;
  border-radius: var(--cima-radius-sm) !important;
  font-weight: 600 !important;
  transition: var(--cima-transition) !important;
}

.invoice-pay-button-now:hover {
  background: var(--cima-accent-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
}


/* ─── 9. BUTTONS ─── */
.btn-prussian,
.btn-primary {
  background: var(--cima-accent) !important;
  border-color: var(--cima-accent) !important;
  color: #fff !important;
  border-radius: var(--cima-radius-sm) !important;
  font-weight: 600 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: var(--cima-transition) !important;
  box-shadow: 0 1px 3px rgba(13, 148, 136, 0.3) !important;
}

.btn-prussian:hover,
.btn-primary:hover {
  background: var(--cima-accent-hover) !important;
  border-color: var(--cima-accent-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3) !important;
}

.btn-prussian:focus,
.btn-primary:focus {
  box-shadow: 0 0 0 3px var(--cima-accent-bg) !important;
}

.btn-prussian-light {
  background: var(--cima-accent-bg) !important;
  color: var(--cima-accent) !important;
  border: 1px solid var(--cima-accent-border) !important;
  border-radius: var(--cima-radius-sm) !important;
}

.btn-prussian-light:hover {
  background: var(--cima-accent) !important;
  color: #fff !important;
}

/* Success button */
.btn-success {
  background: var(--cima-success) !important;
  border-color: var(--cima-success) !important;
  border-radius: var(--cima-radius-sm) !important;
}

/* Default/secondary buttons */
.btn-default {
  background: var(--cima-card) !important;
  border: 1px solid var(--cima-border) !important;
  color: var(--cima-text) !important;
  border-radius: var(--cima-radius-sm) !important;
  transition: var(--cima-transition) !important;
}

.btn-default:hover {
  background: var(--cima-bg) !important;
  border-color: var(--cima-accent) !important;
  color: var(--cima-accent) !important;
}


/* ─── 10. LOGIN PAGE ─── */
.loginpage {
  background: linear-gradient(135deg, var(--cima-sidebar-deep) 0%, var(--cima-sidebar) 50%, var(--cima-accent-hover) 100%) !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.loginpage .login-page-header {
  margin-bottom: 0 !important;
}

.loginpage .login-page-header .w-text {
  color: #f8fafc !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.loginpage .login-page-header .logo {
  /* filter: none - full color logo */
}

.loginpage .logincontent {
  background: var(--cima-card) !important;
  border-radius: var(--cima-radius-lg) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
  padding: 40px !important;
  max-width: 440px !important;
  width: 100% !important;
}

.loginpage .login-title {
  color: var(--cima-heading) !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.3rem !important;
  margin-bottom: 24px !important;
}

.loginpage .login-title span {
  color: var(--cima-muted) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  display: block !important;
  margin-top: 4px !important;
}

.loginpage .form-control {
  border: 1px solid var(--cima-border) !important;
  border-radius: var(--cima-radius-sm) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  transition: var(--cima-transition) !important;
  background: var(--cima-bg) !important;
}

.loginpage .form-control:focus {
  border-color: var(--cima-accent) !important;
  box-shadow: 0 0 0 3px var(--cima-accent-bg) !important;
  background: var(--cima-card) !important;
}

.loginpage .btn-prussian {
  padding: 12px 24px !important;
  font-size: 15px !important;
  width: 100% !important;
  margin-top: 8px !important;
}

.loginpage .forgotpw-txt {
  color: var(--cima-accent) !important;
  font-size: 13px !important;
}

.loginpage .forgotpw-txt:hover {
  color: var(--cima-accent-hover) !important;
}

.loginpage .ico-user-plus {
  color: rgba(255,255,255,0.6) !important;
  transition: var(--cima-transition);
}

.loginpage .ico-user-plus:hover {
  color: var(--cima-accent-light) !important;
}


/* ─── 11. FORM CONTROLS ─── */
.form-control {
  border: 1px solid var(--cima-border) !important;
  border-radius: var(--cima-radius-sm) !important;
  transition: var(--cima-transition) !important;
  color: var(--cima-text) !important;
}

.form-control:focus {
  border-color: var(--cima-accent) !important;
  box-shadow: 0 0 0 3px var(--cima-accent-bg) !important;
}


/* ─── 12. TABLES (DataTables) ─── */
.table {
  border-radius: var(--cima-radius) !important;
  overflow: hidden;
}

.table thead th {
  background: var(--cima-bg) !important;
  color: var(--cima-muted) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid var(--cima-border) !important;
  padding: 12px 16px !important;
}

.table tbody td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--cima-border-light) !important;
  color: var(--cima-text) !important;
  vertical-align: middle !important;
}

.table tbody tr:hover td {
  background: var(--cima-accent-bg) !important;
}

.table-actions-single {
  border-radius: var(--cima-radius) !important;
  overflow: hidden;
}


/* ─── 13. LABELS / BADGES ─── */
.label {
  border-radius: 20px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
}

.label-success,
.status-active {
  background: var(--cima-success-bg) !important;
  color: var(--cima-success) !important;
}

.label-danger,
.status-overdue {
  background: var(--cima-danger-bg) !important;
  color: var(--cima-danger) !important;
}

.label-warning,
.status-pending {
  background: var(--cima-warning-bg) !important;
  color: var(--cima-warning) !important;
}

.label-info {
  background: var(--cima-info-bg) !important;
  color: var(--cima-info) !important;
}


/* ─── 14. ALERTS ─── */
.alert {
  border-radius: var(--cima-radius-sm) !important;
  border: none !important;
  font-size: 14px !important;
}

.alert-success {
  background: var(--cima-success-bg) !important;
  color: #065f46 !important;
  border-left: 3px solid var(--cima-success) !important;
}

.alert-danger {
  background: var(--cima-danger-bg) !important;
  color: #991b1b !important;
  border-left: 3px solid var(--cima-danger) !important;
}

.alert-warning {
  background: var(--cima-warning-bg) !important;
  color: #92400e !important;
  border-left: 3px solid var(--cima-warning) !important;
}

.alert-info {
  background: var(--cima-info-bg) !important;
  color: #1e40af !important;
  border-left: 3px solid var(--cima-info) !important;
}


/* ─── 15. NOTIFICATIONS DROPDOWN ─── */
/* ��� 15. NOTIFICATIONS DROPDOWN ��� */
.notification {
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
}

.notify-header {
  background: linear-gradient(135deg, #111111, #111111) !important;
  border-bottom: none !important;
  padding: 16px 20px !important;
}

/* ─── 16. FOOTER ─── */
.footer-copyright {
  background: var(--cima-card) !important;
  border-top: 1px solid var(--cima-border) !important;
  color: var(--cima-muted) !important;
}


/* ─── 17. SPINNER/LOADING ─── */
#spinner-area {
  background: var(--cima-bg) !important;
}

.spinner .double-bounce1,
.spinner .double-bounce2 {
  background-color: var(--cima-accent) !important;
}


/* ─── 18. TICKET VIEWS ─── */
.ticket-reply {
  border-radius: var(--cima-radius) !important;
  border: 1px solid var(--cima-border) !important;
  margin-bottom: 16px !important;
}

.ticket-reply.staff {
  border-left: 3px solid var(--cima-accent) !important;
  background: var(--cima-accent-bg) !important;
}


/* ─── 19. PAGINATION ─── */
.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--cima-accent) !important;
  border-color: var(--cima-accent) !important;
}

.pagination > li > a {
  color: var(--cima-accent) !important;
  border-radius: var(--cima-radius-sm) !important;
  margin: 0 2px !important;
  border: 1px solid var(--cima-border) !important;
}

.pagination > li > a:hover {
  background: var(--cima-accent-bg) !important;
}


/* ─── 20. MODAL ─── */
.modal-content {
  border-radius: var(--cima-radius-lg) !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
}

.modal-header {
  border-bottom: 1px solid var(--cima-border) !important;
  padding: 20px 24px !important;
}

.modal-footer {
  border-top: 1px solid var(--cima-border) !important;
  padding: 16px 24px !important;
}


/* ─── 21. BODY BG SVG — Hide original ─── */
#bgbody {
  display: none !important;
}


/* ─── 22. SCROLLBAR ─── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--cima-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--cima-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cima-muted);
}


/* ─── 23. ACCESSIBILITY ─── */
*:focus-visible {
  outline: 2px solid var(--cima-accent) !important;
  outline-offset: 2px !important;
}


/* ─── 24. RESPONSIVE FIXES ─── */
@media (max-width: 991px) {
  .area-discreted-info-user {
    margin-top: 10px !important;
    padding: 0 10px !important;
  }

  .area-discreted-info-user .content-serv {
    margin-bottom: 10px !important;
  }

  .loginpage .logincontent {
    margin: 20px !important;
    padding: 30px 24px !important;
  }
}

@media (max-width: 575px) {
  .clientarea-new-header .username {
    font-size: 1.1rem !important;
  }

  .area-discreted-info-user .content-serv .title {
    font-size: 1.2rem !important;
  }
}


/* ─── 25. SMOOTH TRANSITIONS FOR EVERYTHING ─── */
a, .btn, .panel, .list-group-item, .form-control, .badge, .label, .nav-item {
  transition: var(--cima-transition) !important;
}

/* --- 26. CIMA PRODUCT DETAILS HERO (Hostinger Style) --- */
.cima-product-hero-wrapper {
  margin-bottom: 24px;
}
.cima-product-hero {
  background: var(--cima-card);
  border-radius: 16px;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0,0,0,0.04);
  flex-wrap: wrap;
  gap: 20px;
}
.cima-ph-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cima-ph-icon {
  width: 64px;
  height: 64px;
  background: var(--cima-accent-bg);
  color: var(--cima-accent);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.cima-ph-text h4 {
  font-size: 13px;
  color: var(--cima-gray);
  margin: 0 0 4px 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cima-ph-text h2 {
  font-size: 24px;
  color: var(--cima-heading);
  margin: 0 0 4px 0;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.cima-ph-text p {
  margin: 0;
  font-size: 14px;
}
.cima-ph-text p a {
  color: var(--cima-gray);
  text-decoration: none;
}
.cima-ph-text p a:hover {
  color: var(--cima-accent);
}
.cima-ph-right {
  display: flex;
  align-items: center;
  gap: 24px;
}
.cima-status-badge {
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 13px;
  background: #f1f5f9;
  color: #64748b;
}
.cima-status-badge.status-active { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.cima-status-badge.status-suspended { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.cima-status-badge.status-terminated, .cima-status-badge.status-cancelled, .cima-status-badge.status-fraud { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.cima-status-badge.status-pending { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }

.cima-ph-actions {
  display: flex;
  gap: 12px;
}
.btn-cima-primary {
  background: var(--cima-accent) !important;
  color: white !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.2) !important;
}
.btn-cima-primary:hover {
  background: var(--cima-accent-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(13, 148, 136, 0.3) !important;
}
.btn-cima-secondary {
  background: white !important;
  color: var(--cima-heading) !important;
  border: 1px solid #e2e8f0 !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.btn-cima-secondary:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.cima-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.cima-metric-card {
  background: #f8fafc;
  padding: 20px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(0,0,0,0.03);
}
.cima-mc-label {
  font-size: 12px;
  color: var(--cima-gray);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cima-mc-label i { margin-right: 6px; }
.cima-mc-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--cima-heading);
}

.cima-cancel-action {
  margin-top: 24px;
  text-align: right;
}
.btn-cima-ghost-danger {
  color: #ef4444 !important;
  background: transparent !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
}
.btn-cima-ghost-danger:hover {
  color: #b91c1c !important;
  background: rgba(239, 68, 68, 0.05) !important;
  border-radius: 8px !important;
}

/* Redesign product tabs to pill style */
.product-details-tab-container {
  background: var(--cima-card);
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0,0,0,0.04);
}
ul.nav-tabs.nav-tabs-overflow {
  border-bottom: none !important;
  margin-bottom: 24px !important;
  background: #f1f5f9;
  padding: 6px;
  border-radius: 12px;
  display: block; /* fixed from inline-flex */
  overflow: hidden;
}
ul.nav-tabs.nav-tabs-overflow > li {
  margin-bottom: 0;
  float: left;
}
ul.nav-tabs.nav-tabs-overflow > li > a {
  border: none !important;
  color: var(--cima-gray) !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  margin-right: 4px;
}
ul.nav-tabs.nav-tabs-overflow > li > a:hover {
  background: rgba(0,0,0,0.03) !important;
}
ul.nav-tabs.nav-tabs-overflow > li.active > a,
ul.nav-tabs.nav-tabs-overflow > li.active > a:focus,
ul.nav-tabs.nav-tabs-overflow > li.active > a:hover {
  background: white !important;
  color: var(--cima-heading) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
}

@media (max-width: 768px) {
  .cima-product-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .cima-ph-right {
    width: 100%;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
  .cima-cancel-action {
    text-align: left;
  }
}

/* --- 27. CIMA DASHBOARD HOME (Hostinger Style) --- */
.cima-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 991px) { .cima-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .cima-kpi-grid { grid-template-columns: 1fr; } }

.cima-kpi-card {
  background: var(--cima-card);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0,0,0,0.04);
  text-decoration: none !important;
  transition: all 0.3s ease;
}
.cima-kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}
.cima-kpi-icon {
  width: 56px;
  height: 56px;
  background: var(--cima-accent-bg);
  color: var(--cima-accent);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.cima-kpi-content {
  display: flex;
  flex-direction: column;
}
.cima-kpi-number {
  font-size: 32px;
  font-weight: 700;
  color: var(--cima-heading);
  line-height: 1;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.cima-kpi-title {
  font-size: 14px;
  color: var(--cima-gray);
  margin-top: 4px;
  font-weight: 500;
}

.cima-invoice-alert {
  background: rgba(245, 158, 11, 0.05); /* Orange-ish warning */
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}
.cima-ia-icon {
  color: #f59e0b;
  font-size: 32px;
}
.cima-ia-text {
  flex-grow: 1;
}
.cima-ia-text p {
  margin: 0;
  color: var(--cima-heading);
  font-size: 14px;
}
.cima-ia-text strong {
  color: #d97706;
}
.cima-ia-action .btn {
  white-space: nowrap;
}

/* OVERRIDE WHMCS PANELS */
.client-home-panels .panel {
  background: var(--cima-card) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  overflow: hidden;
  margin-bottom: 24px;
}
.client-home-panels .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  padding: 20px 24px !important;
}
.client-home-panels .panel-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--cima-heading) !important;
  font-size: 16px !important;
}
.client-home-panels .list-group-item {
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.03) !important;
  padding: 16px 24px !important;
  color: var(--cima-gray) !important;
}
.client-home-panels .list-group-item:last-child {
  border-bottom: none !important;
}
.client-home-panels .list-group-item:hover {
  background: #f8fafc !important;
}
.client-home-panels .panel-body {
  padding: 20px 24px !important;
  color: var(--cima-gray) !important;
}

/* --- 28. CIMA WELCOME BANNER --- */
.cima-welcome-banner {
  background: #0d0d0d !important;
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  margin-top: -10px; /* pull closer to top if needed */
  position: relative;
  overflow: hidden;
}
/* Subte background ornament */
.cima-welcome-banner::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  pointer-events: none;
}
.cima-wb-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cima-wb-avatar {
  background: rgba(255,255,255,0.1);
  padding: 4px;
  border-radius: 50%;
}
.cima-wb-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.cima-wb-text {
  display: flex;
  flex-direction: column;
}
.cima-greeting {
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 24px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 4px;
}
.cima-location {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  text-transform: capitalize;
  font-weight: 400;
}
.cima-bold {
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
}

.cima-wb-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.cima-wb-actions {
  display: flex;
  gap: 12px;
}
.cima-wb-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.1);
}
.cima-wb-icon-btn:hover {
  background: rgba(255,255,255,0.15);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.25);
}

@media (max-width: 768px) {
  .cima-wb-left {
    flex-direction: column;
    text-align: center;
    margin-bottom: 20px;
  }
  .cima-wb-right {
    justify-content: center;
  }
}

/* --- 29. PRODUCT DETAILS PANEL (DIRECTADMIN/HOSTING) --- */
.tab-content .tab-pane {
  background: var(--cima-card);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  text-align: left !important;
  margin-top: 15px;
  border: 1px solid rgba(0,0,0,0.04);
}
.tab-content .tab-pane#domain .row {
  display: flex !important;
  align-items: center;
  padding: 14px 15px;
  border-bottom: 1px dashed rgba(0,0,0,0.08);
  margin: 0;
}
.tab-content .tab-pane#domain .row:last-of-type,
.tab-content .tab-pane#domain .row:nth-last-child(2) {
  border-bottom: none;
}
.tab-content .tab-pane#domain .col-sm-5.text-right {
  text-align: left !important;
  color: #64748b;
  font-weight: 500;
  width: 35%;
  padding: 0;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.tab-content .tab-pane#domain .col-sm-5.text-right strong {
  font-weight: 500;
}
.tab-content .tab-pane#domain .col-sm-7.text-left {
  text-align: left !important;
  color: var(--cima-heading);
  font-weight: 600;
  width: 65%;
  padding: 0;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
/* Module Client Area (DirectAdmin Buttons) */
.module-client-area {
  margin-top: 20px;
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 25px 15px 10px 15px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.module-client-area form {
  margin: 0;
}
.module-client-area input[type="submit"], 
.module-client-area input[type="button"],
.module-client-area button,
.module-client-area .btn,
.module-client-area a.btn,
.module-client-area a {
  background-color: #0d9488 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  box-shadow: 0 4px 10px rgba(13, 148, 136, 0.2) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}
.module-client-area input[type="submit"]:hover, 
.module-client-area input[type="button"]:hover,
.module-client-area button:hover,
.module-client-area .btn:hover,
.module-client-area a.btn:hover,
.module-client-area a:hover {
  background-color: #0f766e !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 15px rgba(13, 148, 136, 0.3) !important;
  color: #ffffff !important;
}
/* SSL Status Styling */
#domain .ssl-inactive img, #domain img[data-showlabel="1"] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
}
#statusDisplayLabel {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* Fix tabs look */
.nav-tabs-overflow {
  border-bottom: 2px solid #e1e7ef !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.nav-tabs-overflow > li > a {
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  position: relative;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.nav-tabs-overflow > li.active > a {
  color: var(--cima-primary) !important;
}
.nav-tabs-overflow > li.active > a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--cima-primary);
  border-radius: 2px 2px 0 0;
}




/* =====================================================================
   THE WPGENIAL CLONE - SIDEBAR OVERRIDES (FASE 1)
   ===================================================================== */
#cima-sidebar {
  background: #0d0d0d !important;
  box-shadow: none !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
}
#cima-sidebar .logo-content .b-title {
  display: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
}
.inner-navbar .nav-menu-title {
  color: #475569 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-top: 20px !important;
  margin-bottom: 5px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.inner-navbar > li > a {
  color: #8b8b8b !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
  padding: 12px 20px !important;
  margin: 4px 15px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}
.inner-navbar > li > a:hover {
  background: rgba(255,255,255,0.04) !important;
  color: #ffffff !important;
}
.inner-navbar > li.active > a,
.inner-navbar > li.active2 > a {
  background: #0d9488 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3) !important;
}
.inner-navbar > li > a .icony {
  opacity: 0.7;
}
.inner-navbar > li.active > a .icony,
.inner-navbar > li:hover > a .icony {
  opacity: 1;
}
.inner-navbar .submenu {
  background: #0d0d0d !important;
}
.inner-navbar .submenu > li > a {
  color: #8b8b8b !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  padding: 10px 15px 10px 50px !important;
}
.inner-navbar .submenu > li > a:hover {
  color: #ffffff !important;
}
/* Badges */
.inner-navbar .labelinfo {
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}
.inner-navbar .labelinfo.custom {
  background: var(--cima-primary) !important;
}
/* If icons are inline SVGs */
.inner-navbar path, .inner-navbar polygon, .inner-navbar rect, .inner-navbar svg, .inner-navbar img.svg {
  fill: currentColor !important;
}


/* =====================================================================
   THE WPGENIAL CLONE - MAIN LAYOUT & BACKGROUNDS (FASE 2)
   ===================================================================== */
body, .main-container {
  background: #f8fafc !important;
}
.main-content {
  background: #f8fafc !important;
}
.header {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}
.client-home-panels .panel-default {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
  overflow: hidden;
}
.client-home-panels .panel-heading {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 16px 20px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  color: var(--cima-heading) !important;
  font-size: 15px !important;
}
.client-home-panels .panel-body {
  padding: 20px !important;
}
.list-group-item {
  border-color: #f1f5f9 !important;
  padding: 12px 20px !important;
  color: var(--cima-text) !important;
}
.list-group-item:hover {
  background: #f8fafc !important;
}


/* =====================================================================
   WPGENIAL CLONE - REFINEMENTS
   ===================================================================== */
.inner-navbar > li.active > a,
.inner-navbar > li.active2 > a {
  border: none !important;
  box-shadow: none !important;
}
.client-home-panels .panel-heading .btn-default,
.client-home-panels .panel-heading .btn {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
}
.client-home-panels .panel-heading .btn-default:hover,
.client-home-panels .panel-heading .btn:hover {
  background: #e2e8f0 !important;
  color: #111111 !important;
}
.cima-pills-nav a {
  flex-direction: row !important;
  justify-content: center !important;
}



/* =====================================================================
   WPGENIAL CLONE - DEEP VISUAL ALIGNMENT v2
   ===================================================================== */

/* --- KPI Cards: match WPGenial dashed-border style --- */
.cima-kpi-card {
  border: 2px dashed #e2e8f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  box-shadow: none !important;
  position: relative !important;
  transition: all 0.25s ease !important;
}
.cima-kpi-card:hover {
  border-color: #0d9488 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(13,148,136,0.08) !important;
}
.cima-kpi-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  color: #111111 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
}
.cima-kpi-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.cima-kpi-number {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #111111 !important;
  line-height: 1 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.cima-kpi-title {
  font-size: 14px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  line-height: 1.3 !important;
}
.cima-kpi-badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
}

/* --- Pills nav: WPGenial chip-bar style --- */
.cima-pills-nav {
  background: #f3f4f6 !important;
  padding: 6px !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 24px !important;
}
.cima-pills-nav a {
  flex: 1 !important;
  min-width: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  text-align: center !important;
  color: #6b7280 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}
.cima-pills-nav a:hover {
  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  transform: none !important;
  border-color: transparent !important;
}
.cima-pills-nav a i {
  color: inherit !important;
  font-size: 14px !important;
}

/* --- Header bar: cleaner --- */
.header.navbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: none !important;
}
.header .main-search input {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* --- Panel borders: sharper like WPGenial cards --- */
.client-home-panels .panel-default {
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}
.client-home-panels .panel-heading {
  border-bottom: 1px solid #f1f5f9 !important;
}

/* --- Footer: clean match --- */
footer, .footer-content {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: #8b8b8b !important;
}
footer a {
  color: #64748b !important;
}
footer a:hover {
  color: #0d9488 !important;
}


/* FINAL SIDEBAR ACTIVE - Subtle teal accent */
nav#cima-sidebar .inner-navbar > li.active > a,
nav#cima-sidebar .inner-navbar > li.active2 > a,
#cima-sidebar .navbar-content .inner-navbar > li.active > a {
  color: #ffffff !important;
  background: rgba(13, 148, 136, 0.15) !important;
  border-left: 3px solid #0d9488 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}


/* =====================================================================
   FINAL REFINEMENTS v3 - Sidebar, Spacing, Triple Background
   ===================================================================== */

/* --- 1. SIDEBAR: Pure black, tighter spacing like WPGenial --- */
#cima-sidebar,
nav#cima-sidebar,
.navbar.default {
  background: #111111 !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}
#cima-sidebar .navbar-brand,
#cima-sidebar .header-logo {
  background: #111111 !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
#cima-sidebar .logo-content .b-title {
  font-size: 14px !important;
}
.inner-navbar .nav-menu-title {
  padding: 0 20px !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
  font-size: 10px !important;
  letter-spacing: 1.2px !important;
  color: #525252 !important;
}
.inner-navbar > li > a {
  padding: 10px 16px !important;
  margin: 2px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #8b8b8b !important;
  gap: 10px !important;
}
.inner-navbar > li > a:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #e5e5e5 !important;
}
nav#cima-sidebar .inner-navbar > li.active > a,
nav#cima-sidebar .inner-navbar > li.active2 > a,
#cima-sidebar .navbar-content .inner-navbar > li.active > a {
  color: #ffffff !important;
  background: rgba(13, 148, 136, 0.15) !important;
  border-left: 3px solid #0d9488 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.inner-navbar > li > a .icony {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.inner-navbar > li > a .icony img.svg {
  width: 16px !important;
  height: 16px !important;
}
.inner-navbar .submenu {
  background: #111111 !important;
  border: none !important;
}
.inner-navbar .submenu > li > a {
  padding: 8px 16px 8px 48px !important;
  font-size: 12px !important;
  color: #8b8b8b !important;
}
.inner-navbar .submenu > li > a:hover {
  color: #e5e5e5 !important;
  background: rgba(255,255,255,0.04) !important;
}
/* Sidebar labels */
.inner-navbar .labelinfo {
  background: rgba(255,255,255,0.08) !important;
  color: #d4d4d4 !important;
  padding: 2px 6px !important;
  font-size: 9px !important;
}
.inner-navbar .labelinfo.custom {
  background: #0d9488 !important;
  color: #ffffff !important;
}
/* Chevrons */
.inner-navbar > li > a > .fa-angle-right,
.inner-navbar > li > a > img[src*="chevron"] {
  opacity: 0.3 !important;
}

/* --- 2. DASHBOARD: Reduce gap between header bar and content --- */
#main-body {
  padding-top: 12px !important;
}
section#main-body {
  padding-top: 12px !important;
}
.main-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.header-lined {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- 3. PRODUCT DETAILS: Kill the triple background --- */
.tab-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.tab-content > .tab-pane {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  padding: 24px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}
.nav-tabs-overflow {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}
/* Remove nested gray containers inside product details */
.tab-pane .panel,
.tab-pane .panel-default {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tab-pane .panel-body {
  background: transparent !important;
  padding: 0 !important;
}
.tab-pane .panel-heading {
  background: transparent !important;
  border: none !important;
  padding: 0 0 16px 0 !important;
}
/* Info rows inside product details - clean up */
.tab-pane .row {
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 12px 0 !important;
  margin: 0 !important;
}
.tab-pane .row:last-child {
  border-bottom: none !important;
}


/* --- Product Details: Eliminate ALL nested gray backgrounds --- */
.tab-content,
.tab-content > .tab-pane,
.tab-content > .active,
.tab-pane > .container-fluid,
.tab-pane > div,
.cima-product-info-card,
.nav-tabs-overflow + .tab-content,
.nav-tabs-overflow + .tab-content > .active {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}
/* The outer wrapping container that creates the gray band */
section#main-body .container,
section#main-body .container-fluid,
section#main-body > div > .container {
  background: transparent !important;
}
/* The header toolbar area */
.navbar.header {
  margin-bottom: 0 !important;
}


/* --- SIDEBAR ICONS: Force white/light on dark background --- */
.inner-navbar > li > a .icony img.svg,
.inner-navbar > li > a .icony svg {
  filter: brightness(0) invert(0.7) !important;
  width: 18px !important;
  height: 18px !important;
}
.inner-navbar > li.active > a .icony img.svg,
.inner-navbar > li.active2 > a .icony img.svg,
.inner-navbar > li.active > a .icony svg,
.inner-navbar > li.active2 > a .icony svg {
  filter: brightness(0) invert(1) !important;
}
.inner-navbar > li:hover > a .icony img.svg,
.inner-navbar > li:hover > a .icony svg {
  filter: brightness(0) invert(0.95) !important;
}
/* Fix inline SVGs converted by JS - use FILL not stroke */
.inner-navbar > li > a .icony svg path,
.inner-navbar > li > a .icony svg polygon,
.inner-navbar > li > a .icony svg circle,
.inner-navbar > li > a .icony svg rect {
  fill: #8b8b8b !important;
}
.inner-navbar > li.active > a .icony svg path,
.inner-navbar > li.active > a .icony svg polygon,
.inner-navbar > li.active > a .icony svg circle,
.inner-navbar > li.active > a .icony svg rect,
.inner-navbar > li.active2 > a .icony svg path,
.inner-navbar > li.active2 > a .icony svg polygon {
  fill: #ffffff !important;
}
.inner-navbar > li:hover > a .icony svg path,
.inner-navbar > li:hover > a .icony svg polygon,
.inner-navbar > li:hover > a .icony svg circle,
.inner-navbar > li:hover > a .icony svg rect {
  fill: #e5e5e5 !important;
}



/* =====================================================================
   SIDEBAR ICONS - BULLETPROOF FIX using filter on container
   ===================================================================== */
.inner-navbar > li > a > .icony,
.inner-navbar > li > a > span.icony {
  filter: brightness(0) invert(0.65) !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
}
.inner-navbar > li > a > .icony svg,
.inner-navbar > li > a > .icony img {
  width: 18px !important;
  height: 18px !important;
}
.inner-navbar > li.active > a > .icony,
.inner-navbar > li.active2 > a > .icony {
  filter: brightness(0) invert(1) !important;
}
.inner-navbar > li:hover > a > .icony {
  filter: brightness(0) invert(0.9) !important;
}


/* FORCE SVG WIDTH - The inline SVGs collapse to 0px width */
.inner-navbar > li > a > .icony > svg,
.inner-navbar .icony svg,
.inner-navbar .icony svg[viewBox] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  display: inline-block !important;
  overflow: visible !important;
}


/* =====================================================================
   MEGA FIX: Gap Reduction + Services Page + Mobile Responsive
   ===================================================================== */

/* --- GLOBAL: Kill all excessive top gaps --- */
.page-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.main-body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.inner-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
section#main-body {
  padding-top: 16px !important;
  margin-top: 0 !important;
}
section#main-body > div {
  padding-top: 0 !important;
}
section#main-body > div > .row {
  margin-top: 0 !important;
}
.main-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Page header - tighten */
.page-header, .pageheader {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 16px !important;
}
.header-lined {
  display: none !important;
}

/* --- SERVICES LIST PAGE: Modernize table to ROW CARDS --- */
.table-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.table-list {
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
  border: none !important;
  margin-top: -12px !important;
}
.table-list thead th {
  background: transparent !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 16px 0 16px !important;
  border-bottom: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.table-list tbody tr {
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  cursor: pointer !important;
}
.table-list tbody tr:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.06) !important;
}
.table-list tbody td {
  background: #ffffff !important;
  padding: 20px 16px !important;
  vertical-align: middle !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: #334155 !important;
  font-size: 13px !important;
  border-top: 1px solid #f1f5f9 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-left: none !important;
  border-right: none !important;
}
.table-list tbody td:first-child {
  border-left: 1px solid #f1f5f9 !important;
  border-radius: 12px 0 0 12px !important;
}
.table-list tbody td:last-child {
  border-right: 1px solid #f1f5f9 !important;
  border-radius: 0 12px 12px 0 !important;
}
.table-list tbody tr:hover td {
  background: #ffffff !important; /* Prevent WHMCS default gray hover */
}
/* Style the product name inside the card */
.table-list tbody td strong {
  font-size: 15px !important;
  color: #111111 !important;
  font-weight: 700 !important;
  display: block;
  margin-bottom: 4px;
}
.table-list tbody td a {
  color: #0d9488 !important;
  font-weight: 600 !important;
}
/* Status badges */
.label-active,
.label-success {
  background: rgba(16,185,129,0.1) !important;
  color: #059669 !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.label-default {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
/* Panels */
.contentarea .panel,
.contentarea .panel-default {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
  overflow: hidden !important;
}
/* Search input in tables */
.dataTables_filter input,
.table-container input[type="search"] {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
}
/* Pagination */
.dataTables_paginate .paginate_button {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  color: #475569 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  margin: 0 2px !important;
}
.dataTables_paginate .paginate_button.current {
  background: #0d9488 !important;
  color: #ffffff !important;
  border-color: #0d9488 !important;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
  /* === SIDEBAR: Hidden off-screen by default === */
  nav.navbar.default,
  nav.navbar.navbar-collapsed {
    width: 280px !important;
    transform: translateX(-300px) !important;
    transition: transform 0.3s ease !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1050 !important;
    height: 100vh !important;
    border-right: none !important;
  }
  /* Sidebar visible ONLY when JS toggles it (Horn uses .mob-open on click) */
  nav.navbar.default.mob-open,
  nav.navbar.navbar-collapsed.mob-open {
    transform: translateX(0) !important;
    border-right: 1px solid rgba(255,255,255,0.05) !important;
  }
  /* Push main content full-width when sidebar is hidden */
  .header,
  .main-container {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* ── MOBILE HEADER: single seamless black bar ── */
  /* Parent <header>: one-row flex, all black */
  header.header,
  header.header.navbar,
  body#layout01 .header {
    background: #111111 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  /* Left side: hamburger + logo */
  .header .m-header,
  body#layout01 .header .m-header {
    padding: 10px 0 10px 14px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }
  /* Hamburger: reset main.css absolute positioning */
  .header .m-header .mobmenu,
  body#layout01 .header .m-header .mobmenu {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
  /* Right side: icons (cart, bell, user, lang) */
  /* Right side: icons (cart, bell, user, lang) */
  .header > .collapse:not(.show),
  .header > .navbar-collapse,
  body#layout01 .header > .collapse:not(.show),
  body#layout01 .header > .navbar-collapse {
    display: flex !important;
    background: transparent !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 10px 14px 10px 0 !important;
    border: none !important;
    flex: 1 !important;
    position: relative !important;
    margin: 0 !important;
  }
  header.header .navbar-collapse {
    background: transparent !important;
    border: none !important;
  }
  /* Space below header — must match actual header height */
  .header-hight-fixed,
  body#layout01 .header-hight-fixed {
    background: transparent !important;
    border: none !important;
    height: 60px !important;
    min-height: 60px !important;
  }
  .header.navbar .icohorn {
    filter: brightness(0) invert(1) !important;
    opacity: 0.7;
  }
  .header.navbar .icohorn:hover { opacity: 1; }
  .header.navbar .main-search .form-control {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
  }
  /* === HAMBURGER ICON: Proper 3-line menu icon === */
  .m-header .mobmenu,
  .m-header #mobcols {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    cursor: pointer !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    border: none !important;
  }
  .m-header #mobcols span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: #ffffff !important;
    position: relative !important;
    border-radius: 2px !important;
  }
  .m-header #mobcols span::before,
  .m-header #mobcols span::after {
    content: '' !important;
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: #ffffff !important;
    position: absolute !important;
    left: 0 !important;
    border-radius: 2px !important;
  }
  .m-header #mobcols span::before {
    top: -6px !important;
  }
  .m-header #mobcols span::after {
    top: 6px !important;
  }
  .m-header .logo-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
  }
  .m-header .b-title {
    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }
  .m-header .logo {
    filter: none !important;
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
  }
  /* Hamburger fallback colors */
  .mobmenu span,
  .mobmenu span::before,
  .mobmenu span::after {
    background: #ffffff !important;
  }
  /* Maximize content width on mobile — kill all side padding */
  section#main-body {
    padding: 8px 4px !important;
  }
  .main-container .content.main {
    padding: 10px 10px 0 !important;
  }
  .main-container {
    padding: 0 !important;
  }
  .container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .contentarea {
    padding: 0 4px !important;
  }
  .row {
    margin-left: -4px !important;
    margin-right: -4px !important;
  }
  .row > [class*="col-"] {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  /* KPI Grid: 2 columns on mobile */
  .cima-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }
  .cima-kpi-card {
    padding: 16px !important;
  }
  .cima-kpi-number {
    font-size: 24px !important;
  }
  .cima-kpi-title {
    font-size: 12px !important;
  }
  .cima-kpi-icon {
    width: 36px !important;
    height: 36px !important;
  }
  /* Pills nav: scroll horizontal on mobile */
  .cima-pills-nav {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px !important;
  }
  .cima-pills-nav a {
    min-width: max-content !important;
    flex: none !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  /* Promotional banner: stack on mobile */
  .cima-pills-nav + div[style*="linear-gradient"],
  div[style*="linear-gradient(135deg, #111111"] {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  /* Panels: full width */
  .client-home-panels .col-sm-6 {
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
  }
  .client-home-panels .panel-default {
    margin-bottom: 12px !important;
  }
  /* Table responsive */
  .table-responsive {
    border: none !important;
  }
  /* Resumen title */
  .row > div > h1 {
    font-size: 20px !important;
  }
  /* Footer */
  footer {
    padding: 16px !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .cima-kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .cima-kpi-card {
    padding: 14px 16px !important;
  }
  .cima-kpi-number {
    font-size: 22px !important;
  }
}


/* Fix gap between top bar and content - desktop only */
@media (min-width: 769px) {
  .main-container .content.main {
    padding: 20px 60px 0 !important;
  }
}


/* --- Fix excessive margins on all inner pages (services, invoices, etc.) --- */
.content.main .page-header,
.content.main .header-lined,
.content.main > .row:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.contentarea {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* The pageheader.tpl title area creates hidden space */
.page-header h1,
.page-header .header-lined {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}
/* DataTables wrapper - reduce top spacing */
.dataTables_wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Table container gap */
.table-container {
  margin-top: 0 !important;
}



/* Other status labels for the modern cards */
.label-cancelled, .status-cancelled {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.label-suspended, .status-suspended {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #f59e0b !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.label-pending, .status-pending {
  background: rgba(67, 56, 202, 0.1) !important;
  color: #4338ca !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}


/* --- PAGINATION: Modern clean style --- */
.dataTables_wrapper .dataTables_paginate {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 12px 0 !important;
}
.dataTables_wrapper .dataTables_paginate ul.pagination {
  margin: 0 !important;
  display: flex !important;
  gap: 4px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button a {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  color: #334155 !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  float: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover a {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #111111 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current a,
.dataTables_wrapper .dataTables_paginate .paginate_button.active a,
.dataTables_wrapper .dataTables_paginate .paginate_button.active:hover a {
  background: #0d9488 !important;
  border-color: #0d9488 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(13,148,136,0.3) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled a,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover a {
  background: #f8fafc !important;
  border-color: #f1f5f9 !important;
  color: #cbd5e1 !important;
  cursor: default !important;
  pointer-events: none !important;
}
/* DataTables info text */
.dataTables_wrapper .dataTables_info {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  color: #64748b !important;
  padding: 12px 0 !important;
}
/* DataTables length selector */
.dataTables_wrapper .dataTables_length {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  color: #64748b !important;
}
.dataTables_wrapper .dataTables_length select {
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  color: #334155 !important;
  background: #ffffff !important;
}
/* Bottom row alignment */
.dataTables_wrapper .row:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}


/* Specific styling to ensure Cancel link looks like text, not a button, and floats right */
.module-client-area a.cancel-link {
    background-color: transparent !important;
    color: #ef4444 !important;
    box-shadow: none !important;
    padding: 10px 15px !important;
    margin-left: auto !important; /* Forces it to the right corner in flex container */
}
.module-client-area a.cancel-link:hover {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
    box-shadow: none !important;
    transform: none !important;
}


/* FORCE SHOW PAGINATION TEXT */
.dataTables_wrapper .dataTables_paginate ul.pagination > li > a {
    color: #334155 !important;
    font-size: 13px !important;
    text-indent: 0 !important;
    line-height: inherit !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    z-index: auto !important;
}
.dataTables_wrapper .dataTables_paginate ul.pagination > li.active > a,
.dataTables_wrapper .dataTables_paginate ul.pagination > li.current > a {
    color: #ffffff !important;
}




/* === HOME PANELS: Clean 2-column layout === */
body#layout01 .client-home-panels {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom-right-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}
body#layout01 .client-home-panels > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -8px !important;
}
body#layout01 .client-home-panels > .row > .col-sm-6 {
  width: 50% !important;
  padding: 0 8px !important;
}
@media (max-width: 576px) {
  body#layout01 .client-home-panels > .row > .col-sm-6 {
    width: 100% !important;
  }
}

/* === PROFILE DROPDOWN: Stats boxes 3-column row === */
.profile-notification .user-info-content {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 5px 5px !important;
  padding: 8px !important;
}

/* === USER PROFILE DROPDOWN � CimaPress Design === */
.profile-notification {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
  padding: 0 !important;
  overflow: hidden !important;
  min-width: 300px !important;
}
/* Header - Welcome banner */
.profile-notification .login-header.on {
  background: linear-gradient(135deg, #111111, #111111) !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 0 !important;
}
.profile-notification .login-header.on h6 br {
  display: block !important;
}
.profile-notification .login-header.on h6 {
  color: #e2e8f0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  margin: 0 !important;
  flex: 1 !important;
  display: block !important;
}
.profile-notification .login-header.on h6 .c-white {
  color: #5eead4 !important;
  font-weight: 700 !important;
}
.profile-notification .login-header.on .user-info-avatar img {
  width: 44px !important;
  height: 44px !important;
  border: 2px solid rgba(255,255,255,0.2) !important;
}
.profile-notification .login-header.on .logout-btn {
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  transition: all 0.2s ease !important;
}
.profile-notification .login-header.on .logout-btn:hover {
  background: rgba(239, 68, 68, 0.3) !important;
}
/* Stats boxes */
.profile-notification .user-info-content {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 5px 5px !important;
  padding: 8px !important;
}
.profile-notification .user-info-content .user-info {
  background: #f1f5f9 !important;
  border-radius: 12px !important;
  padding: 12px 1px !important;
  flex: 1 1 auto !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  border: 1px solid #e2e8f0 !important;
}
.profile-notification .user-info-content .user-info:hover {
  background: rgba(13, 148, 136, 0.08) !important;
  border-color: #0d9488 !important;
}
.profile-notification .user-info-content .user-info .number-services {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #111111 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.profile-notification .user-info-content .user-info .number-services span {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.profile-notification .user-info-content .user-info i {
  color: #0d9488 !important;
  font-size: 16px !important;
  margin-bottom: 4px !important;
  display: none !important;
}
/* Quick links */
.profile-notification .user-quicklinks {
  list-style: none !important;
  padding: 0 0.5px !important;
  margin: 0 !important;
}
.profile-notification .user-quicklinks li {
  border: none !important;
}
.profile-notification .user-quicklinks li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  color: #334155 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  position: relative !important;
}
.profile-notification .user-quicklinks li a:hover {
  background: #f1f5f9 !important;
  color: #0d9488 !important;
}
.profile-notification .user-quicklinks li a i {
  display: none !important;
}
/* icons hidden */
.profile-notification .user-quicklinks li a span {
  display: block !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #8b8b8b !important;
  margin-top: 0 !important;
  line-height: 1.4 !important;
}





/* === NOTIFICATIONS DROPDOWN � CimaPress Design === */
.dropdown-menu.notification {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
  padding: 0 !important;
  overflow: hidden !important;
  min-width: 320px !important;
}
.dropdown-menu.notification .notify-header {
  background: linear-gradient(135deg, #111111, #111111) !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: none !important;
}
.dropdown-menu.notification .notify-header h6 {
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.dropdown-menu.notification .notify-header .notify-number {
  background: #0d9488 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.dropdown-menu.notification .notify-content {
  padding: 12px !important;
  max-height: 300px !important;
  overflow-y: auto !important;
}
.dropdown-menu.notification .notify-content .client-alerts {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.dropdown-menu.notification .notify-content .client-alerts li {
  margin-bottom: 4px !important;
}
.dropdown-menu.notification .notify-content .client-alerts li a {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  background: #f8fafc !important;
  border: 1px solid #f1f5f9 !important;
  transition: all 0.15s ease !important;
}
.dropdown-menu.notification .notify-content .client-alerts li a:hover {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
.dropdown-menu.notification .notify-content .client-alerts li a i {
  color: #f59e0b !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
.dropdown-menu.notification .notify-content .client-alerts li a .message {
  color: #334155 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
.dropdown-menu.notification .notify-content .notify-alert {
  background: #fffbeb !important;
  border: 1px solid #fef3c7 !important;
  color: #92400e !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
}
.dropdown-menu.notification .notify-footer {
  padding: 12px 16px !important;
  border-top: 1px solid #f1f5f9 !important;
  text-align: center !important;
  background: #ffffff !important;
}
.dropdown-menu.notification .notify-footer a {
  background: #f1f5f9 !important;
  color: #0d9488 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}
.dropdown-menu.notification .notify-footer a:hover {
  background: rgba(13,148,136,0.1) !important;
  color: #0f766e !important;
}









/* === Mejorar Plan button glow effect === */
.btn-cima-primary {
  position: relative !important;
  box-shadow: 0 0 15px rgba(13, 148, 136, 0.4), 0 0 30px rgba(13, 148, 136, 0.2) !important;
  animation: cima-glow 2s ease-in-out infinite !important;
}
@keyframes cima-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(13, 148, 136, 0.4), 0 0 30px rgba(13, 148, 136, 0.2); }
  50% { box-shadow: 0 0 25px rgba(13, 148, 136, 0.6), 0 0 50px rgba(13, 148, 136, 0.3); }
}

/* === SSL status icon fix === */
.product-details-tab-container #domain .col-sm-7 img[data-type="service"] {
  display: none !important;
}

/* === Product hero overflow fix === */
.cima-product-hero-wrapper {
  overflow: hidden !important;
}

/* === Footer: hide menu links === */
.footer-menu {
  display: none !important;
}

/* === Ingresar al Hosting button === */
.btn-cima-login {
  background: linear-gradient(135deg, #111111, #334155) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.btn-cima-login:hover {
  background: linear-gradient(135deg, #334155, #475569) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(30, 41, 59, 0.3) !important;
}

/* ==========================================================
   AUTH PAGES � Login, Register, Password Reset (CimaPress)
   ========================================================== */

/* Wrapper */
.cima-auth-wrapper {
  display: flex !important;
  min-height: 100vh !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.cima-auth-page-wrapper {
  min-height: 100vh;
}

/* Left Panel - Branding */
.cima-auth-left {
  flex: 0 0 420px;
  background: linear-gradient(135deg, #111111 0%, #111111 50%, #9cd201 100%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 48px;
  position: relative;
  overflow: hidden;
}
.cima-auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 48px;
}
.cima-auth-brand .logo {
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.cima-auth-company {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.cima-auth-hero h1 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 16px 0;
  letter-spacing: -1px;
}
.cima-auth-hero p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  margin: 0;
}
.cima-auth-features {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cima-auth-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
}
.cima-auth-feature i {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ffffff;
  flex-shrink: 0;
}

/* Floating shapes */
.cima-auth-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.cima-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
}
.cima-shape-1 { width: 200px; height: 200px; top: -60px; right: -60px; }
.cima-shape-2 { width: 120px; height: 120px; bottom: 80px; left: -40px; }
.cima-shape-3 { width: 80px; height: 80px; bottom: 40px; right: 30px; background: rgba(13,148,136,0.15); }

/* Right Panel - Form */
.cima-auth-form-wide {
  max-width: 600px !important;
}
.cima-auth-form-header {
  margin-bottom: 32px;
}
.cima-auth-form-header h2 {
  font-size: 24px;
  font-weight: 800;
  color: #111111;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}
.cima-auth-form-header p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}
.cima-reset-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #0d9488;
  margin-bottom: 20px;
}

/* Form Elements */
.cima-auth-form .cima-form-group {
  margin-bottom: 20px;
  position: relative;
}
.cima-auth-form .cima-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}
.cima-auth-form .cima-form-group label i {
  color: #8b8b8b;
  margin-right: 4px;
}
.cima-form-input {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: #111111 !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.cima-form-input:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1) !important;
}
.cima-form-input::placeholder {
  color: #8b8b8b !important;
}

/* Form Grid (Register) */
.cima-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 8px;
}
.cima-form-full {
  grid-column: 1 / -1;
}
.cima-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #111111;
  margin: 24px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cima-section-title i {
  color: #0d9488;
  font-size: 16px;
}

/* Options row */
.cima-form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.cima-checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cima-checkbox-group label,
.cima-marketing-optin label,
.cima-tos-box label {
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
}
.cima-forgot-link {
  font-size: 13px;
  color: #000000 !important;
  font-weight: 600;
  text-decoration: none !important;
}
.cima-forgot-link:hover {
  text-decoration: underline !important;
}

/* Auth Button */
.cima-auth-btn {
  width: 100%;
  padding: 14px 24px !important;
  background: linear-gradient(340deg, #9cd201, #111111) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.cima-auth-btn:hover {
  background: linear-gradient(340deg, #8bc000, #000000) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(156, 210, 1, 0.3) !important;
}

/* Divider */
.cima-auth-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.cima-auth-divider::before,
.cima-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}
.cima-auth-divider span {
  padding: 0 16px;
  font-size: 12px;
  color: #8b8b8b;
  text-transform: uppercase;
  font-weight: 600;
}

/* Footer */
.cima-auth-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}
.cima-auth-footer p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}
.cima-auth-footer a {
  color: #000000 !important;
  font-weight: 600;
  text-decoration: none !important;
}
.cima-auth-footer a:hover {
  text-decoration: underline !important;
}

/* Register extras */
.cima-gen-pw-btn {
  position: absolute !important;
  right: 12px !important;
  top: 36px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  color: #64748b !important;
}
.cima-marketing-optin,
.cima-tos-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 16px;
}
.cima-field-help {
  font-size: 12px;
  color: #8b8b8b;
  margin-top: 4px;
  display: block;
}

/* Hide the loginpage default wrappers on auth pages */
.loginpage {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.loginpage .container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
.loginpage .login-page-header {
  display: none !important;
}
.loginpage .logincontent {
  padding: 0 !important;
  margin: 0 !important;
}
.loginpage .login-wrapper {
  padding: 0 !important;
  max-width: 100% !important;
}
.loginpage .login-form-container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Responsive */
@media (max-width: 768px) {
  .cima-auth-wrapper {
    flex-direction: column !important;
  }
  .cima-auth-left {
    flex: none !important;
    padding: 40px 24px !important;
    min-height: auto !important;
  }
  .cima-auth-hero h1 {
    font-size: 24px !important;
  }
  .cima-auth-features {
    display: none !important;
  }
  .cima-auth-right {
    padding: 24px !important;
  }
  .cima-form-grid {
    grid-template-columns: 1fr !important;
  }
  .cima-auth-register .cima-auth-left {
    display: none !important;
  }
}

/* Auth pages: Language Selector — top-right above form content */
.cima-auth-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: #f8fafc;
}
.cima-auth-form-container {
  width: 100%;
  max-width: 420px;
  position: relative; /* anchor for lang selector */
}
.cima-auth-lang {
  float: right !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
  padding: 3px 4px !important;
  background: rgba(0,0,0,0.04) !important;
  border-radius: 20px !important;
}
.cima-auth-lang + * {
  clear: both !important;
}
.cima-lang-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  opacity: 0.45;
  text-decoration: none !important;
  cursor: pointer;
}
.cima-lang-flag:hover {
  opacity: 0.8;
  transform: scale(1.08);
}
.cima-lang-flag.active {
  opacity: 1;
  border-color: #0d9488;
  background: rgba(13, 148, 136, 0.06);
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.12);
  cursor: default;
}
.cima-lang-flag img {
  border-radius: 50%;
  object-fit: cover;
  width: 20px;
  height: 20px;
}


body#layout01 nav#cima-sidebar .b-title,
body#layout01 .header-logo .b-title,
body#layout01 .logo-content .b-title,
body#layout01 .m-header .b-title,
body nav.navbar .b-title,
.b-title {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
/* Logo: full color, no filters */
body#layout01 nav#cima-sidebar .logo,
body#layout01 .header-logo .logo,
body#layout01 .m-header .logo,
.navbar .header-logo .logo {
  filter: none !important;
  max-height: 40px !important;
  width: auto !important;
}
/* ═══════════════════════════════════════════════════════════════
   SOFT SAAS DASHBOARD v2 — CimaPress (Prodify/Linear Style)
   ═══════════════════════════════════════════════════════════════ */

/* --- Dashboard Container --- */
.cima-dash {
  padding: 0 !important;
}

/* --- Hero Greeting Section (original - keep for backward compat) --- */
.cima-dash-hero {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 28px !important;
  padding: 4px 0 !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

/* --- Split Layout: Info + Banner Slider --- */
.cima-dash-split {
  display: flex !important;
  gap: 28px !important;
  margin-bottom: 28px !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
}
.cima-dash-split-left {
  flex: 0 0 48% !important;
  max-width: 48% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.cima-dash-split-right {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
}
.cima-dash-hero-compact {
  padding: 4px 0 !important;
}

/* --- KPI Grid 2x2 --- */
.cima-kpi-grid-2x2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

/* --- Banner Slider --- */
.cima-banner-slider {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 5 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #111 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
}
.cima-banner-track {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.cima-banner-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  transition: opacity 0.6s ease !important;
  z-index: 0 !important;
}
.cima-banner-slide.cima-banner-active {
  opacity: 1 !important;
  z-index: 1 !important;
}
.cima-banner-slide img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}
.cima-banner-slide a {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
}
/* Dots */
.cima-banner-dots {
  position: absolute !important;
  bottom: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 5 !important;
}
.cima-banner-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.4) !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.3s ease !important;
}
.cima-banner-dot.active {
  background: #9cd201 !important;
  transform: scale(1.2) !important;
  box-shadow: 0 0 8px rgba(156,210,1,0.5) !important;
}
/* Arrows */
.cima-banner-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  background: rgba(0,0,0,0.35) !important;
  color: #fff !important;
  border: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}
.cima-banner-slider:hover .cima-banner-arrow {
  opacity: 1 !important;
}
.cima-banner-prev { left: 12px !important; }
.cima-banner-next { right: 12px !important; }
.cima-dash-hero-left {
  flex: 1 !important;
  min-width: 280px !important;
}
.cima-dash-date {
  display: block !important;
  font-size: 13px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
  text-transform: capitalize !important;
  letter-spacing: 0.01em !important;
}
.cima-dash-greeting {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
}
.cima-dash-subgreeting {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #0d9488 0%, #7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* --- Hero Action Pills --- */
.cima-dash-hero-pills {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  padding-top: 8px !important;
}
.cima-dash-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  background: #ffffff !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 30px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}
.cima-dash-pill:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
  text-decoration: none !important;
}
.cima-dash-pill i {
  font-size: 12px !important;
  color: inherit !important;
}
.cima-dash-pill-primary {
  background: #0d9488 !important;
  color: #ffffff !important;
  border-color: #0d9488 !important;
}
.cima-dash-pill-primary:hover {
  background: #0f766e !important;
  border-color: #0f766e !important;
  color: #ffffff !important;
}

/* --- KPI Widget Grid --- */
.cima-dash-kpis {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}
.cima-dash-kpi {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 22px !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 8px 28px -6px rgba(15,23,42,0.05) !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}
.cima-dash-kpi:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 12px rgba(15,23,42,0.06), 0 16px 40px -8px rgba(15,23,42,0.1) !important;
  text-decoration: none !important;
}
.cima-dash-kpi-alert {
  border-left: 3px solid #ef4444 !important;
}

/* KPI Icon Circles */
.cima-dash-kpi-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}
.cima-kpi-teal {
  background: rgba(13, 148, 136, 0.1) !important;
  color: #0d9488 !important;
}
.cima-kpi-indigo {
  background: rgba(99, 102, 241, 0.1) !important;
  color: #6366f1 !important;
}
.cima-kpi-amber {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #f59e0b !important;
}
.cima-kpi-rose {
  background: rgba(244, 63, 94, 0.1) !important;
  color: #f43f5e !important;
}

/* KPI Info */
.cima-dash-kpi-info {
  display: flex !important;
  flex-direction: column !important;
}
.cima-dash-kpi-num {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}
.cima-dash-kpi-label {
  font-size: 13px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}
.cima-dash-kpi-badge-alert {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
}

/* --- Invoice Alert Bar --- */
.cima-dash-alerts {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
}
.cima-dash-alert {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-radius: 14px !important;
}
.cima-dash-alert-icon {
  color: #f59e0b !important;
  font-size: 18px !important;
}
.cima-dash-alert-body {
  flex: 1 !important;
  font-size: 13px !important;
  color: #78350f !important;
  line-height: 1.4 !important;
}
.cima-dash-alert-body strong {
  font-weight: 700 !important;
}
.cima-dash-alert-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 16px !important;
  background: #f59e0b !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.2s !important;
}
.cima-dash-alert-btn:hover {
  background: #d97706 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* --- Home Panels (Soft Card Style) --- */
body#layout01 .cima-dash .client-home-panels {
  padding: 0 !important;
  margin: 0 !important;
}
body#layout01 .cima-dash .client-home-panels > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin: 0 -8px !important;
}
body#layout01 .cima-dash .client-home-panels > .row > .col-sm-6 {
  width: 50% !important;
  padding: 0 8px !important;
}
body#layout01 .cima-dash .client-home-panels .panel-default {
  background: #ffffff !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 8px 28px -6px rgba(15,23,42,0.05) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  transition: box-shadow 0.25s ease !important;
}
body#layout01 .cima-dash .client-home-panels .panel-default:hover {
  box-shadow: 0 4px 12px rgba(15,23,42,0.06), 0 12px 32px -8px rgba(15,23,42,0.08) !important;
}
body#layout01 .cima-dash .panel-heading {
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 18px 22px !important;
}
body#layout01 .cima-dash .panel-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
body#layout01 .cima-dash .panel-body {
  padding: 18px 22px !important;
}
body#layout01 .cima-dash .list-group-item {
  border-color: #f8fafc !important;
  padding: 14px 22px !important;
  color: #334155 !important;
  font-size: 13px !important;
  transition: background 0.15s ease !important;
  border-left: 3px solid transparent !important;
}
body#layout01 .cima-dash .list-group-item:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-left-color: #0d9488 !important;
}
body#layout01 .cima-dash .list-group-item .badge {
  background: rgba(13, 148, 136, 0.1) !important;
  color: #0d9488 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}
body#layout01 .cima-dash .list-group-item i {
  color: #94a3b8 !important;
  margin-right: 6px !important;
}

/* Panel Link Button (replaces purple circle) */
.cima-panel-link-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  background: rgba(13, 148, 136, 0.08) !important;
  color: #0d9488 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  float: right !important;
}
.cima-panel-link-btn:hover {
  background: #0d9488 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* --- Remove old KPI and pills styles that may conflict --- */
/* .cima-kpi-grid alias kept for banner hook */
.cima-pills-nav { display: none !important; }
.cima-welcome-banner { display: none !important; }
.cima-invoice-alert { display: none !important; }

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
  .cima-dash-hero {
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  /* Split layout mobile: stack vertically */
  .cima-dash-split {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
  }
  .cima-dash-split-left {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .cima-dash-split-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: auto !important;
  }
  .cima-banner-slider {
    aspect-ratio: 16 / 5 !important;
    border-radius: 16px !important;
  }
  .cima-dash-greeting {
    font-size: 24px !important;
  }
  .cima-dash-subgreeting {
    font-size: 14px !important;
  }
  .cima-dash-hero-pills {
    padding-top: 0 !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
  }
  .cima-dash-pill {
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
  .cima-kpi-grid-2x2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .cima-dash-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .cima-dash-kpi {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    gap: 8px !important;
  }
  .cima-dash-kpi-num {
    font-size: 22px !important;
  }
  .cima-dash-kpi-label {
    font-size: 11px !important;
  }
  .cima-dash-kpi-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
  }
  body#layout01 .cima-dash .client-home-panels > .row > .col-sm-6 {
    width: 100% !important;
    padding: 0 !important;
  }
  .cima-dash-alert {
    flex-wrap: wrap !important;
  }
}
@media (max-width: 480px) {
  .cima-dash-kpis {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .cima-dash-kpi {
    padding: 14px 16px !important;
  }
  .cima-dash-kpi-num {
    font-size: 20px !important;
  }
  .cima-dash-greeting {
    font-size: 22px !important;
  }
}

/* ─── ELEGANT SERVICES HEADER (GLOBAL) ─── */
.cima-elegant-header {
    position: relative;
    padding: 32px 36px;
    border-radius: 24px;
    background: #111111;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 20px 40px -8px rgba(0,0,0,0.3);
    overflow: hidden;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    border: 1px solid #2a2a2a;
    gap: 24px;
}
.cima-eh-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(13,148,136,0.08) 0%, rgba(99,102,241,0.05) 100%);
    pointer-events: none;
    z-index: 0;
}
.cima-eh-icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #9cd201 0%, #0f766e 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 28px;
    box-shadow: 0 10px 20px -5px rgba(13, 148, 136, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}
.cima-eh-text {
    position: relative;
    z-index: 1;
    flex: 1;
}
.cima-eh-text h2 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
}
.cima-eh-text p {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    color: #8b8b8b !important;
    margin: 0 !important;
    font-weight: 500 !important;
}
.cima-eh-action {
    position: relative;
    z-index: 1;
}
.cima-eh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: #111111 !important;
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,1);
}
.cima-eh-btn:hover {
    background: #f1f5f9;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,1);
}
@media (max-width: 768px) {
    .cima-elegant-header {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        gap: 12px;
        border-radius: 20px;
    }
    .cima-eh-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
        border-radius: 14px;
        margin: 0 auto;
    }
    .cima-eh-text h2 {
        font-size: 20px !important;
    }
    .cima-eh-text p {
        font-size: 13px !important;
    }
    .cima-eh-btn {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }
}/* =========================================================
   CIMAPRESS UPDATE (APR 2026)
   ========================================================= */

/* Responsive tables for mobile (barra espaciadora fix) */
#tableDomainList_wrapper, #tableTicketList_wrapper, #tableInvoiceList_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}
table.dataTable {
    width: 100% !important;
}

/* Domain Admin Hero Banner */
.cima-dm-hero {
    background: linear-gradient(135deg, #111111 0%, #1a1a2e 60%, #9cd201 100%) !important;
    border-radius: 20px !important;
    padding: 36px 32px !important;
    color: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}

/* View Ticket Redesign */
.ticket-reply .message {
    text-align: left !important;
    margin: 15px 0 20px !important;
    background-color: #fff !important;
    font-size: 15px !important;
    box-shadow: 0 10px 100px 0 rgba(77, 77, 119, .1) !important;
    border-radius: 10px !important;
    padding: 20px 25px !important;
    border: 1px solid rgba(232, 236, 239, .49) !important;
    display: inline-block !important;
    position: relative !important;
    width: 100% !important;
}
.ticket-reply h6, .ticket-reply p {
    font-size: 15px !important;
}
/* Reply / Submit button */
.btn-prussian, .btn-primary {
    background: #9cd201 !important;
    border-color: #9cd201 !important;
    color: #111111 !important;
    border-radius: var(--cima-radius-sm) !important;
    font-weight: 600 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    transition: var(--cima-transition) !important;
    box-shadow: 0 1px 3px rgba(13, 148, 136, 0.3) !important;
}
/* Cancel / Add File button */
.btn-default {
    background: #111111 !important;
    border: 1px solid #111111 !important;
    color: #ffffff !important;
    border-radius: var(--cima-radius-sm) !important;
    transition: var(--cima-transition) !important;
}

/* Dashboard Tweaks */
.cima-dash-pill-primary {
    background: #9cd201 !important;
    color: #000000 !important;
    border-color: #9cd201 !important;
}
.cima-dash-subgreeting {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    background: linear-gradient(135deg, #000000 0%, #000000 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.btn-success {
    background: #9cd201 !important;
    border-color: #9cd201 !important;
    color: #000000 !important;
    border-radius: var(--cima-radius-sm) !important;
}
body#layout01 .client-home-panels .panel > .list-group .list-group-item .label {
    padding: 5px 20px !important;
    border-radius: 15px !important;
    margin-top: 5px !important;
    background-color: #9cd201 !important;
    color: #000000 !important;
}
.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.label-active, .label-success {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #000000 !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* ─── PERSONA AVATARS IN TICKET REPLIES ─── */
.cima-persona-avatar {
    border-radius: 50% !important;
    border: 2px solid #0d9488 !important;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.2) !important;
    object-fit: cover !important;
    width: 50px !important;
    height: 50px !important;
}
.ticket-reply.staff .user .name {
    font-weight: 700 !important;
    color: #0f172a !important;
}
.ticket-reply.staff .user .type {
    color: #0d9488 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* ═══ MOBILE FIXES — Tickets, Invoices, Domains ═══ */

/* ─── DOMAIN LIST STYLES (HOSTINGER STYLE) ─── */
#tableDomainsList_wrapper {
    overflow: visible !important;
}
#tableDomainsList {
    min-width: 0 !important;
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 16px !important;
}
#tableDomainsList thead {
    display: none !important;
}
#tableDomainsList tbody tr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 16px 24px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.03), 0 4px 12px -4px rgba(15,23,42,0.04) !important;
    transition: all 0.25s ease !important;
    cursor: pointer;
}
#tableDomainsList tbody tr:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(15,23,42,0.06), 0 12px 32px -8px rgba(15,23,42,0.08) !important;
    transform: translateY(-1px) !important;
}

/* Hide unwanted DataTables cells */
#tableDomainsList tbody td {
    display: block !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}
#tableDomainsList .cima-td-hidden {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Card Content */
#tableDomainsList .cima-td-checkbox {
    margin-right: 20px !important;
}
#tableDomainsList .cima-td-main {
    flex: 1 !important;
    min-width: 0 !important;
}
#tableDomainsList .cima-td-actions {
    margin-left: auto !important;
}

.cima-domain-info {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
.cima-domain-icon {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    background: #f1f5f9 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}
.cima-domain-icon img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: 14px !important;
}
/* Hide purple floating bulk-action button */
.btn-group.btn-domain-set {
    display: none !important;
}
.cima-fallback-icon {
    font-size: 20px !important;
    color: #94a3b8 !important;
}
.cima-domain-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-align: left !important;
}
.cima-domain-name {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}
.cima-domain-name:hover {
    color: #0d9488 !important;
    text-decoration: none !important;
}
.table-list tbody td a {
    color: #111111 !important;
    font-weight: 600 !important;
}
/* Global DataTables Pagination — Dark active state */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current a,
.dataTables_wrapper .dataTables_paginate .paginate_button.active a,
.dataTables_wrapper .dataTables_paginate .paginate_button.active:hover a {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgb(0 0 0 / 30%) !important;
}
.cima-domain-sub {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

/* Buttons */
.cima-domain-action-btns {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.cima-btn-light {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}
.cima-btn-light:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}
.cima-btn-dark {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid #0f172a !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(15,23,42,0.1) !important;
}
.cima-btn-dark:hover {
    background: #1e293b !important;
    color: #ffffff !important;
    border-color: #1e293b !important;
}

/* --- Prevent page-wide horizontal scroll on mobile --- */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
    }
    .main-content,
    .container-fluid,
    .container,
    #main-body,
    .row {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* --- Hide mobile-only elements on desktop --- */
.cima-mobile-action,
.cima-card-label {
    display: none !important;
}

/* --- Fix horizontal scroll (barra espaciadora) on ALL DataTables --- */
.dataTables_wrapper,
.listtable,
.table-responsive,
#tableTicketsList_wrapper,
#tableInvoicesList_wrapper,
#tableDomainsList_wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
}
@media (max-width: 768px) {
    /* ── DataTables controls ── */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        float: none !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .dataTables_wrapper .dataTables_length select {
        min-width: 60px !important;
    }
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        margin-top: 10px !important;
    }

    /* ══ TICKETS TABLE → Cards on Mobile ══ */
    #tableTicketsList_wrapper {
        overflow-x: hidden !important;
    }
    #tableTicketsList {
        min-width: 0 !important;
        border: none !important;
        border-collapse: separate !important;
        border-spacing: 0 12px !important;
    }
    #tableTicketsList thead {
        display: none !important;
    }
    #tableTicketsList tbody tr {
        display: block !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
        position: relative !important;
    }
    #tableTicketsList tbody tr:hover {
        border-color: #0d9488 !important;
    }
    #tableTicketsList tbody td {
        display: block !important;
        text-align: left !important;
        padding: 4px 0 !important;
        border: none !important;
        font-size: 14px !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    /* Kill ALL DataTables Responsive plugin interference on tickets */
    #tableTicketsList td::before,
    #tableTicketsList td::after,
    #tableTicketsList td:before,
    #tableTicketsList td:after,
    #tableTicketsList tbody td::before,
    #tableTicketsList tbody td::after,
    #tableTicketsList tbody td:before,
    #tableTicketsList tbody td:after,
    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
    table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before,
    table.dataTable.dtr-column > tbody > tr > td.dtr-control::before,
    .dtr-control::before,
    .dtr-control:before {
        display: none !important;
        content: none !important;
        width: 0 !important;
        height: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    #tableTicketsList.collapsed tbody td,
    #tableTicketsList.dtr-inline tbody td {
        display: block !important;
    }
    #tableTicketsList tbody tr.child,
    #tableTicketsList tr.child {
        display: none !important;
    }
    /* Force all ticket td cells to show, override responsive hiding */
    #tableTicketsList tbody td {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* Hide DataTables Responsive native labels */
    #tableTicketsList .dtr-title,
    #tableTicketsList .dtr-data,
    #tableTicketsList li.dtr-hidden,
    .dtr-details {
        all: unset !important;
    }
    #tableTicketsList span.dtr-title {
        display: none !important;
    }
    .cima-card-label {
        display: block !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #64748b !important;
        margin-bottom: 3px !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
    }
    /* Subject (2nd column) — make it prominent */
    #tableTicketsList tbody td:nth-child(2) {
        font-weight: 700 !important;
        font-size: 15px !important;
        color: #0f172a !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        margin-bottom: 6px !important;
    }
    #tableTicketsList tbody td:nth-child(2) a {
        color: #0f172a !important;
        text-decoration: none !important;
    }
    /* Status badge style */
    #tableTicketsList tbody td:nth-child(3) span {
        display: inline-block !important;
        padding: 3px 10px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }
    /* Last Updated — smaller, muted */
    #tableTicketsList tbody td:nth-child(4) {
        font-size: 12px !important;
        color: #94a3b8 !important;
    }
    /* 'Ver Ticket' button — full width at bottom of card */
    #tableTicketsList tbody td.cima-mobile-action {
        display: block !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid #f1f5f9 !important;
    }
    #tableTicketsList tbody td.cima-mobile-action:before {
        display: none !important;
    }
    .cima-view-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 10px 0 !important;
        background: #0d9488 !important;
        color: #ffffff !important;
        border-radius: 10px;
        font-size: 14px !important;
        font-weight: 600;
        text-decoration: none !important;
        transition: background 0.2s;
    }
    .cima-view-btn:hover {
        background: #0f766e !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }
    /* ══ INVOICES TABLE → Cards on Mobile ══ */
    #tableInvoicesList_wrapper {
        overflow-x: hidden !important;
    }
    #tableInvoicesList {
        min-width: 0 !important;
        border: none !important;
        border-collapse: separate !important;
        border-spacing: 0 12px !important;
    }
    #tableInvoicesList thead {
        display: none !important;
    }
    #tableInvoicesList tbody tr {
        display: block !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    }
    #tableInvoicesList tbody td {
        display: block !important;
        text-align: left !important;
        padding: 4px 0 !important;
        border: none !important;
        font-size: 14px !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    #tableInvoicesList tbody td:before {
        display: block;
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #64748b;
        margin-bottom: 2px;
    }
    #tableInvoicesList tbody td:nth-child(1):before { content: 'Factura'; }
    #tableInvoicesList tbody td:nth-child(2):before { content: 'Fecha'; }
    #tableInvoicesList tbody td:nth-child(3):before { content: 'Monto Pagado'; }
    #tableInvoicesList tbody td:nth-child(4):before { content: 'Estado'; }
    #tableInvoicesList tbody td:nth-child(5):before { content: 'Fecha Vencimiento'; }

    /* ══ DOMAINS TABLE → Cards on Mobile ══ */
    #tableDomainsList_wrapper {
        overflow-x: hidden !important;
    }
    #tableDomainsList {
        min-width: 0 !important;
    }
    #tableDomainsList thead {
        display: none !important;
    }
    #tableDomainsList tbody tr {
        display: block !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    }
    #tableDomainsList tbody td {
        display: block !important;
        text-align: left !important;
        padding: 4px 0 !important;
        border: none !important;
        font-size: 14px !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    #tableDomainsList tbody td:before {
        display: block;
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #64748b;
        margin-bottom: 2px;
    }
    #tableDomainsList tbody td:nth-child(1):before { content: 'Dominio'; }
    #tableDomainsList tbody td:nth-child(2):before { content: 'Estado'; }
    #tableDomainsList tbody td:nth-child(3):before { content: 'Vencimiento'; }
    #tableDomainsList tbody td:nth-child(4):before { content: 'Registrador'; }

    /* Domain register hero mobile */
    .cima-dm-hero {
        padding: 30px 16px !important;
    }
    .cima-dm-hero h1 {
        font-size: 22px !important;
    }
    .cima-dm-hero p {
        font-size: 14px !important;
    }
    .cima-search-wrapper {
        flex-direction: column !important;
        border-radius: 12px !important;
    }
    .cima-search-wrapper input[type="text"],
    .cima-search-wrapper textarea {
        width: 100% !important;
        font-size: 16px !important;
        padding: 14px 16px !important;
    }
    .cima-search-wrapper button {
        width: 100% !important;
        margin: 6px 0 0 0 !important;
        padding: 14px !important;
        border-radius: 10px !important;
    }
    /* Payment grid mobile */
    .cima-payment-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    /* Checkout form mobile */
    #order-standard_cart .col-md-8 {
        padding: 0 10px !important;
    }
}

/* --- Search placeholder text for DataTables --- */
.dataTables_filter input[type="search"] {
    border: 1px solid var(--cima-border) !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    background: var(--cima-bg) !important;
    transition: var(--cima-transition) !important;
    min-width: 200px !important;
}
.dataTables_filter input[type="search"]:focus {
    border-color: #9cd201 !important;
    box-shadow: 0 0 0 3px rgba(156, 210, 1, 0.15) !important;
    outline: none !important;
}

/* --- Domain Register Hero — text and button overrides --- */
.cima-dm-hero p {
    color: #ffffff !important;
    line-height: 1.6 !important;
}
#order-standard_cart .domain-check-availability,
#order-standard_cart .input-group-box .btn-primary {
    background: #000000 !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 0 36px !important;
    font-size: 16px !important;
    margin: 6px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}
#order-standard_cart .domain-check-availability:hover {
    background: #1a1a1a !important;
    transform: translateY(-2px) !important;
}

/* --- Checkout: Hide duplicate gateway logos injected by gateway-logos.js --- */
.cima-payment-label .cima-gw-logo {
    display: none !important;
}
/* Hide iCheck radio wrapper that appears outside the card */
.cima-payment-label > .iradio_minimal-blue,
.cima-payment-label > .iradio_minimal,
.cima-payment-label > .iradio_square-blue,
.cima-payment-label > div[class^="iradio"] {
    display: none !important;
}

/* ─── Ticket View ─── */
.ticket-reply .user img,
.ticket-reply > img.gravatar,
.ticket-reply img.gravatar {
    border-radius: 50% !important;
    width: 100% !important;
    max-width: 50px !important;
    height: 50px !important;
    float: left !important;
    object-fit: cover !important;
    border: none !important;
    margin-left: 6px !important;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.2) !important;
}
.cima-persona-avatar {
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.2) !important;
    object-fit: cover !important;
    width: 100% !important;
    max-width: 50px !important;
    height: 50px !important;
    border: none !important;
    margin-left: 6px !important;
}
.ticket-reply .user .type {
    vertical-align: middle;
    background: #9cd201;
    color: #fff;
    margin: 5px;
    padding: 1px 6px;
    font-weight: 400;
    border-radius: 6px;
    font-size: 9px;
    text-transform: lowercase;
}
.ticket-reply.staff .user .type {
    color: #000000 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}
.requestor-type-owner {
    background-color: #000000;
}
.ticket-reply.staff {
    border-left: 3px solid #000000 !important;
    background: var(--cima-accent-bg) !important;
}

/* ─── Ticket Rating Stars ─── */
.ticket-reply .rating,
.ticket-reply .rating-done {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   BATCH: Multi-Page UI Improvements (cima37)
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Support Tickets List ─── */
.table-list tbody td a {
    color: #1e293b !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.table-list tbody tr:hover td a {
    color: #0d9488 !important;
}

/* Department Badge */
.cima-dept-badge {
    display: inline-block;
    background: linear-gradient(135deg, #111111, #1e293b);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(13, 148, 136, 0.3);
    white-space: nowrap;
}

/* Mobile View Ticket Button */
.cima-view-btn {
    color: #ffffff !important;
    text-decoration: none !important;
}
.cima-view-btn:hover,
.cima-view-btn:focus,
.cima-view-btn:visited {
    color: #ffffff !important;
}
@media (max-width: 768px) {
    .cima-view-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 12px 0 !important;
        background: #111111 !important;
        color: #ffffff !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: background 0.2s !important;
        margin-top: 6px !important;
    }
    .cima-view-btn:hover {
        background: #0d9488 !important;
        color: #ffffff !important;
    }
}

/* ─── 2. Invoices Page ─── */
.btn-info,
.btn-info.disabled,
.btn-info:disabled {
    color: #fff !important;
    background-color: #111111 !important;
    border-color: #111111 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}
.btn-info:hover,
.btn-info:focus {
    background-color: #0d9488 !important;
    border-color: #0d9488 !important;
    color: #fff !important;
}

@media (max-width: 768px) {
    #tableInvoicesList .responsive-edit-button .btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 10px 0 !important;
        background: #111111 !important;
        color: #ffffff !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }
}

/* ─── 3. Mass Pay Page — Clean Redesign ─── */
.cima-masspay-table {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}
.cima-masspay-table .table {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    margin-bottom: 0;
}
.cima-masspay-table .table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-top: none !important;
}
/* Invoice number header row */
.cima-masspay-table .bg-info {
    background: #f0fdf9 !important;
    border-left: 4px solid #0d9488 !important;
    border-top: 1px solid #ccfbf1 !important;
}
.cima-masspay-table .bg-info strong {
    color: #0d9488 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}
.cima-masspay-table .bg-info td {
    padding: 10px 16px !important;
    background: transparent !important;
}
/* Item rows */
.masspay-invoice-detail td {
    padding: 10px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-left: none !important;
    color: #334155 !important;
    font-size: 13px !important;
}
.masspay-invoice-detail td:last-child {
    font-weight: 600 !important;
    color: #111111 !important;
    text-align: right !important;
}
/* Total rows */
.masspay-total td {
    font-weight: 700 !important;
    background: #f8fafc !important;
    border-top: 2px solid #e2e8f0 !important;
    padding: 12px 16px !important;
    color: #111111 !important;
}
.masspay-total:last-child td {
    background: #0d9488 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    border-top: none !important;
}
/* Payment gateway panel */
.cima-masspay-table .panel {
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
}
.cima-masspay-table .panel-heading {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 14px 20px !important;
}
.cima-masspay-table .panel-title {
    color: #111111 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}
.cima-masspay-table .panel-body {
    padding: 20px !important;
}
.cima-masspay-table .form-control {
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    height: 42px !important;
}
.cima-masspay-table #btnMassPayMakePayment {
    border-radius: 10px !important;
    background: #111111 !important;
    border-color: #111111 !important;
    font-weight: 600 !important;
    height: 42px !important;
    transition: all 0.2s !important;
}
.cima-masspay-table #btnMassPayMakePayment:hover {
    background: #0d9488 !important;
    border-color: #0d9488 !important;
}

/* ─── 4. Domain Search & Pricing Page ─── */
/* Domain checker intro text */
.domain-checker p,
.domain-checker-intro,
#domainchecker p,
.domain-pricing > p {
    color: #475569 !important;
    font-size: 14px !important;
}
/* Hero banner for domain search */
.cima-domain-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 20px;
    padding: 40px 32px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}
.cima-domain-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(13,148,136,0.2) 0%, transparent 70%);
    border-radius: 50%;
}
.cima-domain-hero h2 {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
}
.cima-domain-hero p {
    color: rgba(255,255,255,0.7) !important;
    font-size: 15px !important;
    margin-bottom: 24px !important;
}
/* Featured TLD cards — light theme on white background */
.featured-tlds-container {
    margin: 20px 0 0;
}
.featured-tld {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 14px !important;
    padding: 16px 12px !important;
    text-align: center !important;
    transition: all 0.25s !important;
    cursor: pointer !important;
}
.featured-tld:hover {
    background: rgba(255,255,255,0.15) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
}
.featured-tld .img-container img {
    height: 32px !important;
    object-fit: contain !important;
    margin-bottom: 6px !important;
}
.featured-tld .price {
    color: #5eead4 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    margin-top: 4px !important;
}

/* ─── 5. Domain Pricing Table ─── */
.domain-pricing h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 16px !important;
}
.tld-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
}
.tld-filters a.label {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}
.tld-filters a.label:hover {
    background: #e2e8f0 !important;
    color: #111111 !important;
}
.tld-filters a.label.label-success {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
}
#tableDomainPricing {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
}
#tableDomainPricing thead th {
    background: #111111 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    border: none !important;
}
#tableDomainPricing tbody td {
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}
#tableDomainPricing tbody td:first-child {
    font-weight: 700 !important;
    color: #0d9488 !important;
    font-size: 16px !important;
}
#tableDomainPricing tbody tr:hover td {
    background: rgba(13, 148, 136, 0.04) !important;
}
.tld-sale-group {
    display: inline-block !important;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-left: 6px !important;
}

/* ─── 6. Menu Logout Button ─── */
.cima-logout-item {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.cima-logout-item a {
    color: #ef4444 !important;
    transition: all 0.2s !important;
}
.cima-logout-item a:hover {
    color: #ffffff !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border-radius: 8px;
}
.cima-logout-item .icony i {
    color: #ef4444 !important;
    font-size: 16px;
}

/* ─── 7. Header Welcome Message ─── */
.cima-welcome-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    border-radius: 12px;
    background: rgba(13, 148, 136, 0.08);
    border: 1px solid rgba(13, 148, 136, 0.15);
}
.cima-welcome-bar .cima-wb-greeting {
    font-size: 14px;
    color: #64748b;
    font-weight: 400;
}
.cima-welcome-bar .cima-wb-name {
    font-size: 15px;
    color: #111111;
    font-weight: 700;
}
.cima-welcome-bar .cima-wb-icon {
    font-size: 20px;
}
@media (max-width: 991px) {
    .cima-welcome-bar {
        display: none;
    }
}

/* ─── Dashboard Greeting: hide on desktop (shown in topbar), show on mobile ─── */
@media (min-width: 768px) {
    .cima-dash-hero-compact {
        display: none !important;
    }
}
@media (max-width: 767px) {
    .cima-dash-hero-compact {
        display: block !important;
        padding: 16px 0 8px !important;
    }
    .cima-dash-date {
        font-size: 12px !important;
        color: #94a3b8 !important;
    }
    .cima-dash-greeting {
        font-size: 22px !important;
        margin-bottom: 4px !important;
    }
    .cima-dash-subgreeting {
        font-size: 13px !important;
        color: #64748b !important;
        margin-bottom: 12px !important;
    }
}

/* ─── Invoice Service Names — Enhanced Display ─── */
.cima-invoice-services {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.3;
}
.cima-invoice-services i {
    color: #0d9488;
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 1px;
}
.cima-invoice-service-text {
    background: #f0fdf9;
    border: 1px solid #ccfbf1;
    color: #0d9488;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
/* Desktop invoice table column width */
@media (min-width: 768px) {
    #tableInvoicesList td:first-child {
        min-width: 220px;
    }
}

/* ─── 8. Invoice Status Labels ─── */
#tableInvoicesList .label.status {
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}
#tableInvoicesList .label.status-unpaid,
#tableInvoicesList .label.status-cancelled {
    background: #fef2f2 !important;
    color: #ef4444 !important;
    border: 1px solid #fee2e2 !important;
    font-weight: 600 !important;
}
#tableInvoicesList .label.status-paid {
    background: #9CD201 !important;
    color: #000000 !important;
    border: none !important;
    font-weight: 700 !important;
}

/* ─── 9. Domain Pricing Table (cart.php) ─── */
.domain-pricing .tld-filters {
    margin-bottom: 24px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.domain-pricing .tld-filters-button {
    background: #f1f5f9 !important;
    color: #64748b !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}
.domain-pricing .tld-filters-button:hover,
.domain-pricing .tld-filters-button.active {
    background: #0d9488 !important;
    color: #ffffff !important;
}
.domain-pricing .tld-pricing-header {
    background: #f8fafc !important;
    padding: 12px 0 !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    border: 1px solid #e2e8f0 !important;
    margin-bottom: 8px !important;
}
.domain-pricing .tld-row {
    padding: 16px 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    align-items: center !important;
}
.domain-pricing .tld-row:last-child {
    border-bottom: none !important;
}
.domain-pricing .tld-row strong {
    font-size: 16px !important;
    color: #111111 !important;
    font-weight: 700 !important;
}
.domain-pricing h4 {
    font-weight: 700 !important;
    font-size: 18px !important;
    margin-bottom: 16px !important;
}

/* ═══ CHECKOUT FORM FIX v2.0 — appended to custom.css ═══ */

/* FIX: Icon overlap — prepend-icon fields need more left padding for icon space */
#order-standard_cart .prepend-icon .field,
#order-standard_cart .prepend-icon input.field,
#order-standard_cart .prepend-icon input.form-control,
#order-standard_cart .prepend-icon select.field {
    padding-left: 44px !important;
}

/* FIX: Phone field intl-tel-input — old version uses .intl-tel-input class */
#order-standard_cart .intl-tel-input,
#order-standard_cart .iti {
    width: 100% !important;
    display: block !important;
}
#order-standard_cart .intl-tel-input input.field,
#order-standard_cart .intl-tel-input input[type="tel"],
#order-standard_cart .iti input.field,
#order-standard_cart .iti input[type="tel"] {
    padding-left: 90px !important;
    width: 100% !important;
}

/* FIX: Icon vertical centering */
#order-standard_cart .prepend-icon .field-icon {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: normal !important;
}

/* FIX: Rounded corners */
#order-standard_cart .field,
#order-standard_cart input.field,
#order-standard_cart select.field,
#order-standard_cart textarea.field {
    border-radius: 10px !important;
    border-color: #e2e8f0 !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
#order-standard_cart .field:focus,
#order-standard_cart input.field:focus,
#order-standard_cart select.field:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.08) !important;
    outline: none !important;
}

/* FIX: Account selector card */
#order-standard_cart .account {
    border-radius: 12px !important;
    transition: all 0.2s !important;
}
#order-standard_cart .account.active {
    border-color: #0d9488 !important;
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1) !important;
}