/* ==========================================================================
   Paralela Cloud - Custom Theme
   Based on Twenty-One | Cloud/VPS focused design
   Colors: #0948b3 (primary dark), #2E75F3 (primary), #1a1f36 (dark bg)
   ========================================================================== */

/* ---------- CSS Variables ---------- */
:root {
  --pc-primary: #2E75F3;
  --pc-primary-dark: #0948b3;
  --pc-primary-darker: #072d6e;
  --pc-accent: #00d4aa;
  --pc-accent-hover: #00b894;
  --pc-dark: #1a1f36;
  --pc-dark-light: #252b48;
  --pc-gray-50: #f8fafc;
  --pc-gray-100: #f1f5f9;
  --pc-gray-200: #e2e8f0;
  --pc-gray-300: #cbd5e1;
  --pc-gray-500: #64748b;
  --pc-gray-700: #334155;
  --pc-gray-900: #0f172a;
  --pc-radius: 12px;
  --pc-radius-sm: 8px;
  --pc-radius-lg: 16px;
  --pc-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --pc-shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --pc-shadow-lg: 0 10px 25px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);
  --pc-shadow-xl: 0 20px 40px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.06);
  --pc-transition: all .2s cubic-bezier(.4,0,.2,1);
}

/* Fix: prepend-icon overlapping select text globally */
.prepend-icon select.form-control,
.prepend-icon select.field,
.form-group.prepend-icon select {
  padding-left: 42px !important;
}
/* Hide icon when intl-tel-input flag replaces it */
.form-group.prepend-icon:has(.iti) > .field-icon {
  display: none !important;
}

/* ---------- Inter Font Import ---------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

/* ---------- Base Overrides ---------- */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background: var(--pc-gray-50) !important;
  color: var(--pc-gray-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override the primary-bg-color on body - only header should be dark */
body.primary-bg-color {
  background-color: var(--pc-gray-50) !important;
}

/* Primary bg used on header elements - keep those dark */
.header .primary-bg-color {
  background-color: var(--pc-primary-dark) !important;
}
#order-standard_cart .empty-cart {
    margin: -10px 0px 0 0 !important;
}

/* Sub-heading section dividers - transparent bg with dark text */
/* Using body-level specificity to override theme.min.css */
body .sub-heading span.primary-bg-color,
body .sub-heading-borderless span.primary-bg-color,
body #order-standard_cart .sub-heading span.primary-bg-color,
body #order-standard_cart .sub-heading-borderless span.primary-bg-color,
body span.primary-bg-color[class] {
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  color: #0948b3 !important;
}

a { color: var(--pc-primary); }
a:hover { color: var(--pc-primary-dark); text-decoration: none; }

/* ---------- Header ---------- */
#header.header {
  background: var(--pc-primary-darker) !important;
  border-bottom: none;
  box-shadow: 0 4px 20px rgba(9,72,179,.15);
}

#header .navbar {
  padding: .75rem 0;
}

#header .logo-container img,
#header .navbar-brand img {
  max-height: 42px;
  filter: brightness(0) invert(1);
}

#header .navbar-nav .nav-link {
  color: rgba(255,255,255,.85) !important;
  font-weight: 500;
  font-size: .9rem;
  padding: .5rem 1rem !important;
  border-radius: var(--pc-radius-sm);
  transition: var(--pc-transition);
  letter-spacing: .01em;
}

#header .navbar-nav .nav-link:hover,
#header .navbar-nav .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.1);
}

/* All navbar TOP-LEVEL links (excluding dropdown items) */
#header #nav > li > a,
#header #nav > li > .dropdown-toggle,
#header .navbar-nav.ml-auto > li > a,
#header .navbar-nav.ml-auto > li > .dropdown-toggle,
#header .main-navbar-wrapper > .container > .navbar-collapse > ul > li > a {
  color: rgba(255,255,255,.85) !important;
  font-weight: 500;
  font-size: .9rem;
  transition: var(--pc-transition);
}

#header #nav > li > a:hover,
#header .navbar-nav.ml-auto > li > a:hover {
  color: #fff !important;
}

/* Dropdown items inside navbar must be dark on white */
#header .dropdown-menu a,
#header .dropdown-menu .dropdown-item,
#header .dropdown-menu li a {
  color: var(--pc-gray-700) !important;
  font-weight: 400;
}

#header .dropdown-menu a:hover,
#header .dropdown-menu .dropdown-item:hover,
#header .dropdown-menu li a:hover {
  color: var(--pc-primary) !important;
  background: var(--pc-gray-100) !important;
}

/* Search bar in header - remove white border */
#header .search .form-control,
#header .search .btn,
#header .input-group.search .form-control {
  border: none !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  box-shadow: none !important;
}

#header .search .form-control::placeholder {
  color: rgba(255,255,255,.5) !important;
}

#header .search .form-control:focus {
  background: rgba(255,255,255,.18) !important;
  box-shadow: none !important;
}

#header .search .btn {
  color: rgba(255,255,255,.6) !important;
}

#header .search .input-group-prepend .btn {
  border: none !important;
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.6) !important;
}

/* Cart button in header - remove white border */
#header .cart-btn,
#header .navbar-nav.toolbar .nav-link {
  color: rgba(255,255,255,.85) !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

#header .cart-btn:hover,
#header .navbar-nav.toolbar .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.1) !important;
  border-radius: var(--pc-radius-sm);
}

/* Hamburger menu button */
#header .navbar-nav.toolbar button.btn {
  color: rgba(255,255,255,.85) !important;
  border: none !important;
  background: transparent !important;
}

.topbar {
  background: rgba(0,0,0,.15) !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: .35rem 0;
}

.topbar .btn,
.topbar .input-group-text,
.topbar a {
  color: rgba(255,255,255,.7) !important;
  font-size: .82rem;
}

.topbar .btn:hover { color: #fff !important; }

/* ---------- Primary BG Override ---------- */
/* Only apply dark blue bg to header and sidebar headers, NOT sub-heading spans */
#header .primary-bg-color,
.card-sidebar .card-header.primary-bg-color,
.panel-sidebar .panel-heading.primary-bg-color,
.cart-sidebar .panel-heading.primary-bg-color,
.cart-sidebar .card-header.primary-bg-color {
  background-color: var(--pc-primary-dark) !important;
}

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--pc-primary) !important;
  border: none !important;
  border-radius: var(--pc-radius-sm) !important;
  font-weight: 600;
  padding: .55rem 1.5rem;
  transition: var(--pc-transition);
  box-shadow: 0 2px 8px rgba(46,117,243,.25);
  letter-spacing: .01em;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--pc-primary-dark) !important;
  box-shadow: 0 4px 15px rgba(46,117,243,.35);
  transform: translateY(-1px);
}

.btn-success {
  background: var(--pc-accent) !important;
  border: none !important;
  border-radius: var(--pc-radius-sm) !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,212,170,.25);
  color: #fff !important;
}

.btn-success:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0,212,170,.35);
}

.btn { border-radius: var(--pc-radius-sm) !important; }

/* ---------- Cards & Panels ---------- */
.panel, .card {
  border: 1px solid var(--pc-gray-200) !important;
  border-radius: var(--pc-radius) !important;
  box-shadow: var(--pc-shadow);
  transition: var(--pc-transition);
  overflow: hidden;
}

.panel:hover, .card:hover {
  box-shadow: var(--pc-shadow-md);
}

.panel-heading, .card-header {
  background: #fff !important;
  border-bottom: 1px solid var(--pc-gray-200) !important;
  font-weight: 600;
  padding: 1rem 1.25rem;
}

.panel-body, .card-body { padding: 1.25rem; }

.panel-default > .panel-heading,
.card-sidebar .card-header {
  background: var(--pc-primary-darker) !important;
  color: #fff !important;
  border: none !important;
}

.card-sidebar .card-header .panel-title,
.panel-sidebar .panel-heading .panel-title {
  color: #fff !important;
}

/* ---------- Sidebar ---------- */
.sidebar .list-group-item {
  border: none !important;
  padding: .6rem 1.25rem;
  font-size: .9rem;
  color: var(--pc-gray-700);
  transition: var(--pc-transition);
}

.sidebar .list-group-item:hover {
  background: var(--pc-gray-100);
  color: var(--pc-primary);
  padding-left: 1.5rem;
}

.sidebar .list-group-item.active {
  background: rgba(46,117,243,.08) !important;
  color: var(--pc-primary) !important;
  font-weight: 600;
  border-left: 3px solid var(--pc-primary) !important;
}

/* ---------- Tables ---------- */
.table { border-radius: var(--pc-radius); overflow: hidden; }

.table thead th {
  background: var(--pc-dark) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .85rem 1rem;
  border: none !important;
}

.table tbody tr { transition: var(--pc-transition); }
.table tbody tr:hover { background: rgba(46,117,243,.03); }

.table td {
  padding: .85rem 1rem;
  vertical-align: middle;
  border-color: var(--pc-gray-100) !important;
}

/* ---------- Forms ---------- */
.form-control {
  border: 1.5px solid var(--pc-gray-200) !important;
  border-radius: 6px !important;
  padding: .6rem .9rem;
  font-size: .9rem;
  transition: var(--pc-transition);
  background: #fff;
}

.form-control:focus {
  border-color: var(--pc-primary) !important;
  box-shadow: 0 0 0 3px rgba(46,117,243,.12) !important;
}

/* ---------- Input Groups (login, search etc) ---------- */
.input-group .input-group-prepend .input-group-text,
.input-group .input-group-append .input-group-text,
.input-group .input-group-prepend .btn {
  border-radius: 6px 0 0 6px !important;
  border: 1.5px solid var(--pc-gray-200) !important;
  border-right: none !important;
  background: var(--pc-gray-50) !important;
  color: var(--pc-gray-500);
}

.input-group .form-control {
  border-radius: 0 6px 6px 0 !important;
}

.input-group .input-group-append .input-group-text,
.input-group .input-group-append .btn {
  border-radius: 0 6px 6px 0 !important;
  border: 1.5px solid var(--pc-gray-200) !important;
  border-left: none !important;
}

/* Login page specific input group fix */
.login-container .input-group,
section#main-body .input-group {
  border-radius: 6px;
}

.login-container .input-group .input-group-prepend,
.login-container .input-group .input-group-prepend > * {
  border-radius: 6px 0 0 6px !important;
}

.login-container .input-group .form-control {
  border-radius: 0 6px 6px 0 !important;
  border-left: none !important;
}

/* ---------- Content Area ---------- */
.main-content { min-height: 70vh; }

#main-body {
  padding: 2rem 0;
  background: var(--pc-gray-50);
}

/* Also ensure the section has light bg */
section#main-body {
  background: var(--pc-gray-50) !important;
}

.header-lined h1 {
  color: var(--pc-dark);
  font-weight: 700;
  font-size: 1.75rem;
  position: relative;
  padding-bottom: .75rem;
}

.header-lined h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--pc-accent);
  border-radius: 2px;
}

/* ---------- Alerts ---------- */
.alert {
  border-radius: var(--pc-radius-sm) !important;
  border: none !important;
  font-size: .9rem;
}

.alert-info {
  background: rgba(46,117,243,.08) !important;
  color: var(--pc-primary-dark) !important;
}

.alert-success {
  background: rgba(0,212,170,.08) !important;
  color: #047857 !important;
}

/* ---------- Badges ---------- */
.badge {
  border-radius: 20px;
  padding: .35em .75em;
  font-weight: 600;
  font-size: .75rem;
}

.badge-primary, .badge-info { background: var(--pc-primary) !important; }
.badge-success { background: var(--pc-accent) !important; }

/* ---------- Status Indicators ---------- */
.label-active, .badge-active,
.label-success { background: var(--pc-accent) !important; }
.label-danger, .badge-danger { background: #ef4444 !important; }

/* ---------- Footer ---------- */
#footer.footer {
  background: var(--pc-dark) !important;
  color: rgba(255,255,255,.6);
  padding: 2.5rem 0;
  margin-top: 3rem;
}

#footer a { color: rgba(255,255,255,.7) !important; }
#footer a:hover { color: var(--pc-accent) !important; }
#footer .copyright { color: rgba(255,255,255,.4); font-size: .82rem; }

/* ---------- Login Page ---------- */
.auth-wrap {
  background: var(--pc-primary-darker) !important;
}

.auth-wrap .login-container,
.auth-wrap .main-content .card {
  border-radius: var(--pc-radius-lg) !important;
  box-shadow: var(--pc-shadow-xl) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

/* ---------- Breadcrumb ---------- */
.master-breadcrumb {
  background: var(--pc-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.breadcrumb {
  background: transparent !important;
  padding: .5rem 0;
  font-size: .85rem;
  margin-bottom: 0;
}

.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item.active {
  color: #fff !important;
}

.breadcrumb-item a:hover {
  color: var(--pc-accent) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,.5) !important;
}

/* ---------- Pagination ---------- */
.page-item.active .page-link {
  background: var(--pc-primary) !important;
  border-color: var(--pc-primary) !important;
}

.page-link {
  color: var(--pc-primary);
  border-radius: var(--pc-radius-sm) !important;
  margin: 0 2px;
}

/* ---------- Dropdowns ---------- */
.dropdown-menu {
  border: 1px solid var(--pc-gray-200);
  border-radius: var(--pc-radius-sm) !important;
  box-shadow: var(--pc-shadow-lg);
  padding: .5rem;
  background: #fff !important;
}

/* Dropdown items must be dark text on white bg */
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item a,
.dropdown-menu a.dropdown-item,
.dropdown-menu li a {
  color: var(--pc-gray-700) !important;
  border-radius: 6px;
  padding: .5rem .75rem;
  font-size: .9rem;
  background: transparent !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item a:hover,
.dropdown-menu a.dropdown-item:hover,
.dropdown-menu li a:hover {
  background: var(--pc-gray-100) !important;
  color: var(--pc-primary) !important;
}

.dropdown-menu .dropdown-divider {
  border-color: var(--pc-gray-100);
}

/* ---------- Modal ---------- */
.modal-content {
  border-radius: var(--pc-radius-lg) !important;
  border: none !important;
  box-shadow: var(--pc-shadow-xl);
}

.modal-header {
  border-bottom: 1px solid var(--pc-gray-100);
  padding: 1.25rem 1.5rem;
}

.modal-body { padding: 1.5rem; }

/* ---------- Homepage Panels ---------- */
.home-shortcuts .shortcut-item,
.home-shortcuts a {
  border-radius: var(--pc-radius) !important;
  transition: var(--pc-transition);
}

.home-shortcuts a:hover {
  transform: translateY(-3px);
  box-shadow: var(--pc-shadow-lg);
}

/* ---------- Progress ---------- */
.progress {
  border-radius: 20px;
  height: .6rem;
  background: var(--pc-gray-100);
}

.progress-bar {
  background: var(--pc-accent);
  border-radius: 20px;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--pc-gray-100); }
::-webkit-scrollbar-thumb { background: var(--pc-gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--pc-gray-500); }

/* ---------- Animations ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.main-content .container { animation: fadeInUp .35s ease-out; }

/* ---------- Custom Select ---------- */
.custom-select,
select.form-control {
  border-radius: 6px !important;
  color: var(--pc-gray-900) !important;
  font-weight: 500;
  background-color: #fff !important;
  height: auto !important;
  min-height: 38px;
  padding: .5rem 2rem .5rem .75rem !important;
  line-height: 1.5 !important;
}

/* ---------- Nav Tabs ---------- */
.nav-tabs .nav-link {
  border-radius: var(--pc-radius-sm) var(--pc-radius-sm) 0 0 !important;
  font-weight: 500;
}

.nav-tabs .nav-link.active {
  color: var(--pc-primary);
  border-color: var(--pc-gray-200) var(--pc-gray-200) #fff;
}

/* ---------- Service Details ---------- */
.client-area-service-details .panel-sidebar {
  border-radius: var(--pc-radius) !important;
}

/* ---------- Ticket styling ---------- */
.ticket-reply {
  border-radius: var(--pc-radius) !important;
  margin-bottom: 1rem;
}

/* ---------- Invoice ---------- */
.invoice-container {
  border-radius: var(--pc-radius) !important;
  box-shadow: var(--pc-shadow-md);
}

/* ---------- Checkout Progress & UX ---------- */
.checkout-progress-summary {
  background: var(--pc-primary);
  color: #fff;
  border-radius: var(--pc-radius-sm);
  padding: .85rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: .88rem;
}

.checkout-progress-summary .progress-info {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.checkout-progress-summary .progress-info i {
  font-size: 1.1rem;
  opacity: .8;
}

/* Icons in sub-heading spans */
.sub-heading span i.fas,
.sub-heading span i.far {
  margin-right: .3rem;
  opacity: .7;
}

/* ---------- Checkout - Newsletter optin spacing ---------- */
.marketing-email-optin {
  margin-bottom: 2rem !important;
  padding: 1.25rem !important;
  background: var(--pc-gray-50) !important;
  border: 1px solid var(--pc-gray-200) !important;
  border-radius: 8px !important;
}


/* ==========================================================================
   MULTI-STEP REGISTRATION FORM
   ========================================================================== */

/* --- Stepper Progress Bar --- */
.reg-stepper {
  max-width: 600px;
  margin: 0 auto 2.5rem;
  position: relative;
  padding: 0 1rem;
}

.reg-stepper-track {
  position: absolute;
  top: 20px;
  left: 80px;
  right: 80px;
  height: 3px;
  background: var(--pc-gray-200);
  border-radius: 2px;
  z-index: 0;
}

.reg-stepper-fill {
  height: 100%;
  background: var(--pc-accent);
  border-radius: 2px;
  width: 0%;
  transition: width 0.4s cubic-bezier(.4,0,.2,1);
}

.reg-stepper-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.reg-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: var(--pc-transition);
}

.reg-step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pc-gray-200);
  color: var(--pc-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .95rem;
  transition: var(--pc-transition);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.reg-step.active .reg-step-num {
  background: var(--pc-primary);
  color: #fff;
  box-shadow: 0 4px 15px rgba(46,117,243,.35);
  transform: scale(1.1);
}

.reg-step.completed .reg-step-num {
  background: var(--pc-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,212,170,.3);
}

.reg-step.completed .reg-step-num::after {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: .8rem;
}

.reg-step.completed .reg-step-num {
  font-size: 0;
}

.reg-step-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--pc-gray-500);
  text-transform: uppercase;
  letter-spacing: .03em;
  transition: var(--pc-transition);
  white-space: nowrap;
}

.reg-step.active .reg-step-label {
  color: var(--pc-primary);
}

.reg-step.completed .reg-step-label {
  color: var(--pc-accent-hover);
}

/* --- Panel Animations --- */
@keyframes regSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes regShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}

.reg-panel {
  animation: regSlideIn 0.35s ease-out;
}

/* --- Navigation Buttons --- */
.reg-next-btn {
  min-width: 180px;
  padding: .75rem 2rem !important;
  font-size: 1rem !important;
}

/* --- Trust Signals --- */
.reg-trust-signals {
  margin: 1.5rem 0;
  padding: 1rem;
}

.reg-trust-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--pc-gray-500);
  font-size: .82rem;
  font-weight: 500;
  padding: .4rem 1rem;
}

.reg-trust-item i {
  color: var(--pc-accent);
  font-size: .9rem;
}

/* --- CEP Field States (also for registration) --- */
.cep-loading {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 50 50'%3E%3Cpath fill='%232E75F3' d='M25 5A20 20 0 1 0 45 25' stroke='%232E75F3' stroke-width='4' fill='none'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 18px !important;
}

.cep-success {
  border-color: var(--pc-accent) !important;
  box-shadow: 0 0 0 3px rgba(0,212,170,.12) !important;
}

.cep-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}

/* --- Invalid field highlight --- */
.is-invalid,
input.is-invalid.field,
input.is-invalid.form-control {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.1) !important;
}

/* --- Responsive Stepper --- */
@media (max-width: 576px) {
  .reg-stepper-track {
    left: 50px;
    right: 50px;
  }
  .reg-step-label {
    font-size: .65rem;
  }
  .reg-step-num {
    width: 34px;
    height: 34px;
    font-size: .85rem;
  }
  .reg-trust-item {
    font-size: .75rem;
    padding: .3rem .5rem;
  }
}

/* ==========================================================================
   CHECKOUT UX IMPROVEMENTS
   ========================================================================== */

/* Better "Already Registered" button prominence */
#order-standard_cart .already-registered {
  background: rgba(46,117,243,.05);
  border: 1px solid var(--pc-gray-200);
  border-radius: var(--pc-radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

#order-standard_cart .already-registered #btnAlreadyRegistered {
  background: var(--pc-primary) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600;
  padding: .5rem 1.5rem;
  border-radius: var(--pc-radius-sm) !important;
  box-shadow: 0 2px 8px rgba(46,117,243,.25);
}

/* Checkout security message */
.checkout-security-msg {
  background: rgba(0,212,170,.06) !important;
  border: 1px solid rgba(0,212,170,.2) !important;
  color: #047857 !important;
  border-radius: var(--pc-radius-sm) !important;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
  text-align: center;
  font-size: .88rem;
}

.checkout-security-msg i {
  color: var(--pc-accent);
  margin-right: .4rem;
}

/* Complete Order button enhancement */
#btnCompleteOrder {
  min-width: 280px;
  padding: 1rem 2rem !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  background: var(--pc-accent) !important;
  box-shadow: 0 4px 20px rgba(0,212,170,.3) !important;
  border-radius: var(--pc-radius) !important;
  margin-top: 1rem;
}

#btnCompleteOrder:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(0,212,170,.4) !important;
}

/* ==========================================================================
   HOMEPAGE IMPROVEMENTS
   ========================================================================== */

/* Domain search hero - more prominent */
.home-domain-search {
  background: var(--pc-primary-darker) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 -4px 20px rgba(0,0,0,.1);
}

.home-domain-search h2 {
  color: #fff !important;
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 1.25rem;
}

.home-domain-search .form-control {
  border-radius: var(--pc-radius-sm) 0 0 var(--pc-radius-sm) !important;
  border: 2px solid rgba(255,255,255,.15) !important;
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  font-size: 1.05rem;
  padding: .85rem 1.25rem;
  height: auto;
}

.home-domain-search .form-control::placeholder {
  color: rgba(255,255,255,.5) !important;
}

.home-domain-search .form-control:focus {
  background: rgba(255,255,255,.15) !important;
  border-color: var(--pc-accent) !important;
  box-shadow: 0 0 0 3px rgba(0,212,170,.2) !important;
}

.home-domain-search .btn-primary {
  border-radius: 0 !important;
  padding: .85rem 1.5rem !important;
  font-weight: 700;
  font-size: .95rem;
}

.home-domain-search .btn-success {
  border-radius: 0 var(--pc-radius-sm) var(--pc-radius-sm) 0 !important;
  padding: .85rem 1.5rem !important;
  font-weight: 700;
  font-size: .95rem;
}

.home-domain-search .tld-logos {
  margin-top: 1.25rem;
}

.home-domain-search .tld-logos li {
  color: rgba(255,255,255,.7) !important;
  font-size: .85rem;
}

.home-domain-search .tld-logos li img {
  filter: brightness(0) invert(1);
  opacity: .7;
}

.home-domain-search .btn-link {
  color: rgba(255,255,255,.6) !important;
}

.home-domain-search .btn-link:hover {
  color: var(--pc-accent) !important;
}

/* Homepage action icons - better visual hierarchy */
.action-icon-btns a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: var(--pc-radius) !important;
  background: #fff;
  border: 1px solid var(--pc-gray-200);
  box-shadow: var(--pc-shadow);
  transition: var(--pc-transition);
  color: var(--pc-gray-700);
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none !important;
  margin-bottom: .75rem;
}

.action-icon-btns a:hover {
  transform: translateY(-3px);
  box-shadow: var(--pc-shadow-lg);
  border-color: var(--pc-primary);
  color: var(--pc-primary);
}

.action-icon-btns .ico-container {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(46,117,243,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .75rem;
}

.action-icon-btns .ico-container i {
  font-size: 1.4rem;
  color: var(--pc-primary);
}

/* Homepage product cards */
.home .card {
  transition: var(--pc-transition);
}

.home .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pc-shadow-lg);
  border-color: var(--pc-primary) !important;
}

.home .card .btn-outline-primary {
  border: 2px solid var(--pc-primary) !important;
  font-weight: 600;
  transition: var(--pc-transition);
}

.home .card:hover .btn-outline-primary {
  background: var(--pc-primary) !important;
  color: #fff !important;
}


/* Fix: Order Summary sidebar header - forcar fundo escuro chapado */
#orderSummary > .panel-heading,
#orderSummary > .card-header,
#order-standard_cart #orderSummary > .panel-heading,
#order-standard_cart #orderSummary > .card-header,
div#orderSummary .panel-heading,
div#orderSummary .card-header {
  background: var(--pc-primary-darker) !important;
  color: #fff !important;
  border: none !important;
}

#orderSummary > .panel-heading .panel-title,
#orderSummary > .card-header .panel-title,
#orderSummary > .panel-heading h3,
#orderSummary > .card-header h3,
div#orderSummary .panel-heading .panel-title,
div#orderSummary .card-header h3 {
  color: #fff !important;
}


/* Fix: sub-heading span bg must match page background */
body .sub-heading span.primary-bg-color,
body .sub-heading-borderless span.primary-bg-color,
body #order-standard_cart .sub-heading span.primary-bg-color,
body #order-standard_cart .sub-heading-borderless span.primary-bg-color,
body span.primary-bg-color[class],
section#main-body .sub-heading span,
section#main-body .sub-heading span.primary-bg-color {
  background-color: var(--pc-gray-50, #f8fafc) !important;
  background: var(--pc-gray-50, #f8fafc) !important;
  color: var(--pc-primary-dark, #0948b3) !important;
}


/* ==========================================================================
   FIX: Wide tables overflowing the viewport (My Services, invoices, etc.)
   --------------------------------------------------------------------------
   WHMCS wraps client-area tables in .table-container (and Bootstrap uses
   .table-responsive), but the theme never gave those wrappers horizontal
   scrolling. A table wider than the screen therefore pushed the whole page
   sideways. Contain the overflow inside the wrapper so the table scrolls on
   its own instead of breaking the layout.
   min-width:0 lets the wrapper shrink below the table's intrinsic width when
   it sits inside a flex/grid column (otherwise overflow-x:auto never kicks in).
   ========================================================================== */
.table-container,
.table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}

/* Belt-and-suspenders: never let a raw table force the page wider than the
   viewport on small screens. */
@media (max-width: 767px) {
  .main-content table.table {
    max-width: 100%;
  }
}


/* ==========================================================================
   MOBILE NAVIGATION: app-like bottom tab bar + off-canvas drawer
   --------------------------------------------------------------------------
   The stock mobile menu was a single corner hamburger that expanded an inline
   collapse with fiddly nested dropdowns. This replaces that experience on
   small screens with: (1) a fixed bottom tab bar putting the core conversion
   paths (Loja, Carrinho, Conta) one thumb-tap away, and (2) a polished
   slide-in drawer for the full menu with every store category visible at once.
   Desktop (>=1200px / navbar-expand-xl) is untouched. All rules are gated by
   max-width media queries.
   ========================================================================== */

/* ---------- Fixed bottom tab bar (phones & small tablets) ---------- */
.mobile-bottom-nav { display: none; }

@media (max-width: 991.98px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1041;
    background: #fff;
    border-top: 1px solid var(--pc-gray-200);
    box-shadow: 0 -6px 24px rgba(9, 72, 179, .08);
    padding: 0 .25rem env(safe-area-inset-bottom);
    height: 60px;
  }

  .mobile-bottom-nav .mbn-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: 0;
    color: var(--pc-gray-500);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    border-radius: 12px;
    transition: color .2s ease, transform .2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-bottom-nav .mbn-item i { font-size: 1.18rem; line-height: 1; }
  .mobile-bottom-nav .mbn-item span { line-height: 1; }
  .mobile-bottom-nav .mbn-item:hover,
  .mobile-bottom-nav .mbn-item:focus,
  .mobile-bottom-nav .mbn-item:active { color: var(--pc-primary); text-decoration: none; outline: none; }
  .mobile-bottom-nav .mbn-item.active { color: var(--pc-primary); }
  .mobile-bottom-nav .mbn-item.active i { transform: translateY(-1px); }

  .mobile-bottom-nav .mbn-cart-wrap { position: relative; display: inline-flex; }
  .mobile-bottom-nav .mbn-cart-count {
    position: absolute;
    top: -7px; right: -11px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: var(--pc-accent);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: 9px;
    box-shadow: 0 1px 5px rgba(0, 212, 170, .45);
  }
  .mobile-bottom-nav .mbn-cart-count.is-empty { display: none; }

  /* Keep page content (and footer) clear of the fixed bar. */
  body { padding-bottom: 60px; }
  #footer.footer { margin-bottom: 60px; }
}

/* ---------- Off-canvas slide-in drawer (wherever the menu collapses) ---------- */
@media (max-width: 1199.98px) {
  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
    z-index: 1045;
  }
  .mobile-nav-backdrop.show { opacity: 1; visibility: visible; }

  body.mobile-nav-open { overflow: hidden; }

  .main-navbar-wrapper { position: static !important; padding: 0 !important; border: 0 !important; }

  #mainNavbar {
    position: fixed !important;
    top: 0; right: 0; bottom: 0;
    width: 86%;
    max-width: 360px;
    height: 100% !important;
    display: block !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.1rem 1rem 2.5rem;
    background: var(--pc-primary-darker);
    box-shadow: -12px 0 44px rgba(0, 0, 0, .32);
    z-index: 1050;
    transform: translateX(105%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  }
  #mainNavbar.show { transform: translateX(0); }
  /* Neutralise Bootstrap's height animation so it completes fast and the
     transform slide is the only motion. */
  #mainNavbar.collapsing { transition: none !important; height: 100% !important; }

  /* Drawer header with close button */
  .mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .25rem .9rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .mobile-nav-head .mn-title {
    color: #fff;
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .55;
  }
  .mobile-nav-close {
    background: rgba(255, 255, 255, .08);
    border: 0;
    color: #fff;
    width: 38px; height: 38px;
    border-radius: 10px;
    font-size: 1rem;
    transition: background .2s ease;
  }
  .mobile-nav-close:active { background: rgba(255, 255, 255, .18); }

  /* Search field inside the drawer */
  #mainNavbar .search { margin-bottom: 1rem; }
  #mainNavbar .search .form-control {
    background: rgba(255, 255, 255, .1) !important;
    border: 0 !important;
    color: #fff !important;
  }
  #mainNavbar .search .form-control::placeholder { color: rgba(255, 255, 255, .5) !important; }
  #mainNavbar .search .input-group-prepend .btn,
  #mainNavbar .search .btn {
    background: rgba(255, 255, 255, .12) !important;
    border: 0 !important;
    color: rgba(255, 255, 255, .7) !important;
  }

  /* Nav lists fill the drawer */
  #mainNavbar .navbar-nav { width: 100%; flex-direction: column; }
  #mainNavbar .navbar-nav > li {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  #mainNavbar .navbar-nav > li > a {
    display: flex !important;
    align-items: center;
    gap: .65rem;
    color: rgba(255, 255, 255, .92) !important;
    font-size: 1rem;
    font-weight: 600;
    padding: .9rem .5rem !important;
    border-radius: 8px;
  }
  #mainNavbar .navbar-nav > li > a:hover,
  #mainNavbar .navbar-nav > li > a:focus { color: #fff !important; background: rgba(255, 255, 255, .06); }
  #mainNavbar .navbar-nav > li > a > i { width: 1.4em; text-align: center; color: var(--pc-accent); font-size: .95rem; }

  /* Dropdown parents become non-clickable section headers; children always show */
  #mainNavbar .dropdown-toggle { pointer-events: none; }
  #mainNavbar .dropdown-toggle::after { display: none; }
  #mainNavbar .dropdown-menu {
    position: static !important;
    float: none !important;
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 0 .5rem !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  #mainNavbar .dropdown-menu .dropdown-item,
  #mainNavbar .dropdown-menu li > a {
    display: block;
    color: rgba(255, 255, 255, .72) !important;
    padding: .55rem .5rem .55rem 2.15rem !important;
    font-size: .9rem !important;
    font-weight: 500;
    border-radius: 8px;
    white-space: normal;
  }
  #mainNavbar .dropdown-menu .dropdown-item:hover,
  #mainNavbar .dropdown-menu li > a:hover { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }
  #mainNavbar .dropdown-divider { border-color: rgba(255, 255, 255, .1) !important; }
  #mainNavbar .badge { background: var(--pc-accent) !important; color: #fff !important; }

  /* The auto "More" helper item is meaningless in a vertical drawer */
  #mainNavbar .collapsable-dropdown { display: none !important; }
}


/* ==========================================================================
   FLOATING CONTACT SPEED-DIAL (.para-fab)
   --------------------------------------------------------------------------
   Replaces the third-party Robbu green button. A single brand FAB that
   expands upward into separate, transparent-stacked contact actions
   (WhatsApp / Suporte / Contato), each with its own colour + label pill.
   Sits clear of the mobile bottom tab bar.
   ========================================================================== */
.para-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1042;
  width: 58px;
  height: 58px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Main toggle button */
.para-fab-toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: #2E75F3;
  box-shadow: 0 10px 26px rgba(9, 72, 179, .42), 0 2px 6px rgba(0, 0, 0, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.para-fab-toggle:hover { transform: scale(1.06); box-shadow: 0 14px 32px rgba(9, 72, 179, .5); }
.para-fab-toggle:active { transform: scale(.96); }
.para-fab-toggle i { position: absolute; font-size: 1.4rem; transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.para-fab-toggle .para-fab-i-open  { opacity: 1; transform: rotate(0) scale(1); }
.para-fab-toggle .para-fab-i-close { opacity: 0; transform: rotate(-90deg) scale(.4); font-size: 1.5rem; }
.para-fab.open .para-fab-toggle { background: var(--pc-primary-darker); }
.para-fab.open .para-fab-toggle .para-fab-i-open  { opacity: 0; transform: rotate(90deg) scale(.4); }
.para-fab.open .para-fab-toggle .para-fab-i-close { opacity: 1; transform: rotate(0) scale(1); }

/* Attention pulse ring (only while closed) */
.para-fab-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(46, 117, 243, .55);
  animation: paraFabPulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
.para-fab.open .para-fab-toggle::after { animation: none; }
@keyframes paraFabPulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 117, 243, .5); }
  70%  { box-shadow: 0 0 0 16px rgba(46, 117, 243, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 117, 243, 0); }
}

/* Action stack: transparent, floats above the toggle */
.para-fab-actions {
  position: absolute;
  right: 5px;
  bottom: 72px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 14px;
}

.para-fab-action {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px) scale(.6);
  pointer-events: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.para-fab.open .para-fab-action { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* staggered reveal (nearest the toggle first) */
.para-fab.open .para-fab-action:nth-child(1) { transition-delay: .05s; }
.para-fab.open .para-fab-action:nth-child(2) { transition-delay: .11s; }
.para-fab.open .para-fab-action:nth-child(3) { transition-delay: .17s; }

/* Circular icon */
.para-fab-ic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.15rem;
  flex: 0 0 auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: transform .2s ease;
}
.para-fab-action:hover .para-fab-ic { transform: scale(1.1); }
.para-fab-action.wa   .para-fab-ic { background: #25D366; box-shadow: 0 6px 18px rgba(37, 211, 102, .45); }
.para-fab-action.sup  .para-fab-ic { background: #2E75F3; box-shadow: 0 6px 18px rgba(46, 117, 243, .45); }
.para-fab-action.mail .para-fab-ic { background: #00d4aa; box-shadow: 0 6px 18px rgba(0, 212, 170, .45); }

/* Label pill */
.para-fab-label {
  background: #fff;
  color: var(--pc-gray-900, #0f172a);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .42rem .8rem;
  border-radius: 9px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .14);
  position: relative;
}
.para-fab-label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 10px;
  height: 10px;
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 1px;
}

/* Lift the whole widget above the fixed bottom tab bar on mobile */
@media (max-width: 991.98px) {
  .para-fab {
    right: 16px;
    bottom: calc(60px + 16px + env(safe-area-inset-bottom));
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .para-fab-toggle::after { animation: none; }
  .para-fab-action,
  .para-fab-toggle,
  .para-fab-toggle i { transition: opacity .15s ease; }
}

/* ==========================================================================
   PARALELA: UX de faturamento / área do cliente            (2026-08-25)
   Faturas, central do cliente e serviços: leitura mobile-first, uma ação
   principal por tela e números em fonte tabular.
   Blocos: tokens · botões · pills · banner · chips · cartões de fatura ·
           cartões de serviço · vazio · "próximo passo" · página da fatura.
   ========================================================================== */

:root {
  --pa-ok: #047857;
  --pa-ok-bg: #d1fae5;
  --pa-ok-br: #6ee7b7;
  --pa-warn: #92400e;
  --pa-warn-bg: #fef3c7;
  --pa-warn-br: #fcd34d;
  --pa-bad: #b91c1c;
  --pa-bad-bg: #fee2e2;
  --pa-bad-br: #fca5a5;
  --pa-neutral: #475569;
  --pa-neutral-bg: #e9eef5;
  --pa-neutral-br: #cbd5e1;
  --pa-pay: #00b894;
  --pa-pay-dark: #059a7c;
  --pa-line: #e6ebf2;
  --pa-num: "Inter", ui-sans-serif, system-ui, sans-serif;
}

.pa-inv-cards, .pa-svc-cards, .pa-next, .pa-due-banner,
.pa-invoice-page { font-variant-numeric: tabular-nums; }

/* ---------- Botões ---------- */
.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .72rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-decoration: none !important;
  cursor: pointer;
  transition: var(--pc-transition);
  white-space: nowrap;
}
.pa-btn:focus-visible { outline: 3px solid rgba(46,117,243,.45); outline-offset: 2px; }
.pa-btn-pay {
  background: var(--pc-accent);
  color: #04261f !important;
  box-shadow: 0 6px 16px -6px rgba(0,184,148,.75);
}
.pa-btn-pay:hover { filter: brightness(1.05); transform: translateY(-1px); color: #04261f !important; }
.pa-btn-pay:active { transform: translateY(0); }
.pa-btn-ghost {
  background: #fff;
  color: var(--pc-primary-dark) !important;
  border-color: var(--pa-line);
  font-weight: 600;
}
.pa-btn-ghost:hover { background: var(--pc-gray-50); border-color: var(--pc-gray-300); }
.pa-btn-block { display: flex; width: 100%; }
.pa-btn-sm { padding: .4rem .8rem; font-size: .82rem; border-radius: 8px; }

/* ---------- Pills de status ---------- */
.pa-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--pa-neutral-bg);
  color: var(--pa-neutral);
  border: 1px solid var(--pa-neutral-br);
}
.pa-pill-paid, .pa-pill-active   { background: var(--pa-ok-bg);  color: var(--pa-ok);   border-color: var(--pa-ok-br); }
.pa-pill-unpaid, .pa-pill-pending, .pa-pill-payment-pending,
.pa-pill-draft                   { background: var(--pa-warn-bg); color: var(--pa-warn); border-color: var(--pa-warn-br); }
.pa-pill-collections, .pa-pill-suspended, .pa-pill-terminated,
.pa-pill-fraud                   { background: var(--pa-bad-bg);  color: var(--pa-bad);  border-color: var(--pa-bad-br); }

/* ---------- Banner de total em aberto (topo da lista) ---------- */
.pa-due-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  margin: 0 0 1.15rem;
  padding: 1rem 1.15rem;
  border-radius: var(--pc-radius);
  background: #fef6da;
  border: 1px solid var(--pa-warn-br);
}
.pa-due-banner.is-overdue {
  background: #fee2e2;
  border-color: var(--pa-bad-br);
}
.pa-due-banner-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pa-due-banner-label { font-size: .82rem; font-weight: 600; color: var(--pa-warn); }
.pa-due-banner.is-overdue .pa-due-banner-label { color: var(--pa-bad); }
.pa-due-banner-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--pc-gray-900); }
.pa-due-banner .pa-btn { flex: 0 0 auto; }

/* ---------- Chips de filtro ---------- */
.pa-chips {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: 0 0 .85rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pa-chips::-webkit-scrollbar { display: none; }
.pa-chip {
  flex: 0 0 auto;
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--pa-line);
  background: #fff;
  color: var(--pc-gray-700);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pc-transition);
}
.pa-chip b { font-weight: 800; opacity: .55; margin-left: .2rem; }
.pa-chip.is-active {
  background: var(--pc-primary-dark);
  border-color: var(--pc-primary-dark);
  color: #fff;
}
.pa-chip.is-active b { opacity: .8; }

/* ---------- Cartão de fatura (mobile) ---------- */
.pa-inv-cards { display: block; }
.pa-inv-card {
  display: block;
  background: #fff;
  border: 1px solid var(--pa-line);
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow);
  margin-bottom: .85rem;
  overflow: hidden;
}
.pa-inv-card.is-open   { border-left: 4px solid var(--pc-accent); }
.pa-inv-card.is-overdue { border-left: 4px solid #ef4444; }
.pa-inv-card-main { display: block; padding: 1rem 1.1rem .9rem; text-decoration: none !important; color: inherit; }
.pa-inv-card-main:hover { background: var(--pc-gray-50); }
.pa-inv-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .45rem;
}
.pa-inv-num { font-size: .8rem; font-weight: 600; color: var(--pc-gray-500); letter-spacing: .01em; }
.pa-inv-amount {
  font-size: 1.85rem; font-weight: 800; letter-spacing: -.035em;
  color: var(--pc-gray-900); line-height: 1.05;
}
.pa-inv-meta { margin-top: .3rem; font-size: .84rem; color: var(--pc-gray-500); }
.pa-inv-meta i { margin-right: .3rem; }
.pa-inv-card.is-overdue .pa-inv-meta { color: var(--pa-bad); font-weight: 600; }
.pa-inv-card > .pa-btn { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; padding: .85rem; }
.pa-inv-card > .pa-btn-pay { box-shadow: none; }
.pa-inv-empty-filter { text-align: center; color: var(--pc-gray-500); padding: 1.5rem 0; }

/* ---------- Cartão de serviço (mobile) ---------- */
.pa-svc-card {
  background: #fff;
  border: 1px solid var(--pa-line);
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow);
  margin-bottom: .85rem;
  overflow: hidden;
}
.pa-svc-card-main { display: block; padding: 1rem 1.1rem .9rem; text-decoration: none !important; color: inherit; }
.pa-svc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.pa-svc-name { font-size: 1.05rem; font-weight: 700; color: var(--pc-gray-900); letter-spacing: -.02em; }
.pa-svc-domain { margin-top: .15rem; font-size: .85rem; color: var(--pc-primary); word-break: break-all; }
.pa-svc-facts { display: flex; gap: 1.6rem; margin-top: .8rem; }
.pa-svc-facts span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pc-gray-500); }
.pa-svc-facts b { font-size: 1rem; font-weight: 700; color: var(--pc-gray-900); }
.pa-svc-facts small { color: var(--pc-gray-500); }
.pa-svc-card > .pa-btn { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; padding: .8rem; }

/* ---------- Estado vazio ---------- */
.pa-empty {
  text-align: center;
  padding: 2.75rem 1.25rem;
  background: #fff;
  border: 1px dashed var(--pc-gray-300);
  border-radius: var(--pc-radius);
}
.pa-empty-icon {
  width: 62px; height: 62px; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--pc-gray-100);
  color: var(--pc-primary);
  font-size: 1.6rem;
}
.pa-empty h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .4rem; color: var(--pc-gray-900); }
.pa-empty p { color: var(--pc-gray-500); font-size: .92rem; margin: 0 auto 1.25rem; max-width: 34ch; }

/* ---------- "Próximo passo" na central do cliente ---------- */
.pa-next {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 1.35rem 1.35rem 1.4rem;
  border-radius: var(--pc-radius-lg);
  background: var(--pc-primary-dark);
  color: #fff;
  box-shadow: var(--pc-shadow-lg);
  overflow: hidden;
}
.pa-next.is-overdue {
  background: #9f1239;
}
.pa-next-kicker {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--pc-accent);
}
.pa-next.is-overdue .pa-next-kicker { color: #fecdd3; }
.pa-next-title {
  margin: .45rem 0 .3rem;
  font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: #fff;
}
.pa-next-sub { margin: 0; font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.78); }
.pa-next-cta { align-self: stretch; padding: .9rem 1.2rem; font-size: 1rem; }

/* ---------- Trilha do primeiro pedido ---------- */
.pa-track {
  display: flex;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  counter-reset: pa-track;
}
.pa-track li {
  flex: 1;
  position: relative;
  padding-top: 1.75rem;
  text-align: center;
  font-size: .76rem;
  font-weight: 600;
  color: var(--pc-gray-500);
}
.pa-track li span {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--pc-gray-300);
  z-index: 1;
}
.pa-track li::before {
  content: ""; position: absolute; top: 8px; left: 0; width: 100%; height: 2px;
  background: var(--pc-gray-200);
}
.pa-track li:first-child::before { left: 50%; width: 50%; }
.pa-track li:last-child::before { width: 50%; }
.pa-track li.is-done { color: var(--pa-ok); }
.pa-track li.is-done span { background: var(--pc-accent); border-color: var(--pc-accent); }
.pa-track li.is-done::before { background: var(--pc-accent); }
.pa-track li.is-current { color: var(--pc-primary-dark); }
.pa-track li.is-current span {
  border-color: var(--pc-primary);
  box-shadow: 0 0 0 4px rgba(46,117,243,.18);
}

/* Tile de faturas em aberto */
.tiles .tile .title { white-space: normal; line-height: 1.2; }
.tiles .tile.pa-tile-alert .stat { color: #d97706 !important; }
.tiles .tile.pa-tile-alert { box-shadow: inset 0 0 0 1px rgba(217,119,6,.35); }

/* No mobile, os chips substituem o painel lateral "Status" */
@media (max-width: 767.98px) {
  .card-sidebar.view-filter-btns { display: none !important; }
}

/* No mobile a barra lateral (Perfil, filtros) vinha antes do conteúdo e
   empurrava a ação principal para baixo da dobra. Só nas telas que têm o
   bloco "próximo passo" ou a lista de faturas o conteúdo sobe. */
@media (max-width: 991.98px) {
  #main-body .row:has(.pa-next) > .primary-content,
  #main-body .row:has(.pa-inv-cards) > .primary-content,
  #main-body .row:has(.pa-svc-cards) > .primary-content { order: -1; }
}

/* O painel "Faturas em aberto" do WHMCS repete o que o bloco acima já diz. */
.primary-content:has(.pa-next) [menuitemname="Overdue Invoices"] { display: none !important; }

/* ==========================================================================
   PÁGINA DA FATURA (viewinvoice.php, layout próprio, fora do header)
   ========================================================================== */
.pa-invoice-page {
  background: var(--pc-gray-50) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--pc-gray-900);
  padding-bottom: 2.5rem;
}

.pa-inv-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--pa-line);
}
.pa-inv-topbar-back {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .88rem; font-weight: 600;
  color: var(--pc-primary-dark) !important; text-decoration: none !important;
}
.pa-inv-topbar-back:hover { color: var(--pc-primary) !important; }
.pa-inv-topbar-brand img { height: 26px; width: auto; }

.pa-inv-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.15rem 1rem 0;
}

/* Avisos de retorno do gateway */
.pa-flash {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .95rem 1.1rem; margin-bottom: 1rem;
  border-radius: var(--pc-radius); border: 1px solid;
  font-size: .9rem;
}
.pa-flash i { font-size: 1.15rem; margin-top: .1rem; }
.pa-flash div { display: flex; flex-direction: column; gap: .15rem; }
.pa-flash strong { font-size: .95rem; }
.pa-flash-ok   { background: var(--pa-ok-bg);  border-color: var(--pa-ok-br);  color: var(--pa-ok); }
.pa-flash-info { background: #e0f2fe; border-color: #7dd3fc; color: #075985; }
.pa-flash-bad  { background: var(--pa-bad-bg); border-color: var(--pa-bad-br); color: var(--pa-bad); }

/* Hero */
.pa-hero {
  position: relative;
  padding: 1.5rem 1.35rem 1.6rem;
  border-radius: var(--pc-radius-lg);
  background: #0948b3;
  color: #fff;
  box-shadow: var(--pc-shadow-lg);
  overflow: hidden;
}
.pa-hero.is-overdue {
  background: #9f1239;
}
.pa-hero-paid {
  background: #047857;
}
.pa-hero-cancelled, .pa-hero-refunded {
  background: #334155;
}
.pa-hero-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.pa-hero-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem; border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.pa-hero-num { font-size: .82rem; color: rgba(255,255,255,.66); font-weight: 600; }
.pa-hero-amount {
  font-size: 2.9rem; font-weight: 800; letter-spacing: -.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pa-hero-sub { margin-top: .5rem; font-size: .92rem; color: rgba(255,255,255,.8); }
.pa-hero-actions { margin-top: 1.25rem; }
.pa-hero-actions .btn,
.pa-hero-actions button,
.pa-hero-actions input[type="submit"] {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 54px;
  padding: .95rem 1.25rem !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--pc-accent) !important;
  color: #04261f !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.6);
  cursor: pointer;
  transition: var(--pc-transition);
}
.pa-hero-actions .btn:hover,
.pa-hero-actions button:hover,
.pa-hero-actions input[type="submit"]:hover { filter: brightness(1.06); transform: translateY(-1px); }
.pa-hero-actions form { margin: 0; }
/* Logos de gateway (PagHiper manda um <input type="image">) não competem com o botão */
.pa-hero-actions img,
.pa-hero-actions input[type="image"] {
  display: block !important;
  width: auto !important;
  max-width: 78px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 .85rem !important;
  padding: 6px 10px !important;
  background: rgba(255,255,255,.92) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  cursor: pointer;
}
/* Avisos que o gateway injeta junto do botão */
.pa-hero-actions .alert {
  margin: .95rem 0 0 !important;
  padding: .7rem .9rem !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.88) !important;
  font-size: .82rem;
  line-height: 1.45;
  text-align: left;
}
.pa-hero-actions br { display: none; }
.pa-hero-paidnote {
  margin-top: 1rem; display: flex; align-items: center; gap: .5rem;
  font-size: .88rem; color: rgba(255,255,255,.82);
}
.pa-gw { margin-top: .9rem; }
.pa-gw > summary {
  cursor: pointer; list-style: none;
  font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.72);
  text-decoration: underline; text-underline-offset: 3px;
}
.pa-gw > summary::-webkit-details-marker { display: none; }
.pa-gw > summary:hover { color: #fff; }
.pa-gw form { margin-top: .6rem; }
.pa-gw select { border-radius: 10px; border: 0; min-height: 46px; }

/* Passos */
.pa-steps {
  list-style: none; margin: 1rem 0 0; padding: 1.1rem 1.15rem;
  background: #fff; border: 1px solid var(--pa-line); border-radius: var(--pc-radius);
}
.pa-steps li { display: flex; gap: .8rem; align-items: flex-start; }
.pa-steps li + li { margin-top: .9rem; }
.pa-steps-n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pc-gray-100); color: var(--pc-primary-dark);
  font-size: .82rem; font-weight: 800;
}
.pa-steps li div { font-size: .86rem; color: var(--pc-gray-500); line-height: 1.45; }
.pa-steps li strong { display: block; font-size: .93rem; color: var(--pc-gray-900); font-weight: 700; }

/* Cartões da fatura */
.pa-card {
  margin-top: 1rem;
  background: #fff;
  border: 1px solid var(--pa-line);
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow);
  overflow: hidden;
}
.pa-card-title {
  margin: 0; padding: .95rem 1.15rem;
  font-size: .95rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--pc-gray-900);
  border-bottom: 1px solid var(--pa-line);
  background: var(--pc-gray-50);
}
.pa-card-body { padding: 1.1rem 1.15rem; font-size: .9rem; color: var(--pc-gray-700); }

/* Itens */
.pa-items { list-style: none; margin: 0; padding: 0; }
.pa-items li {
  display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start;
  padding: .9rem 1.15rem;
}
.pa-items li + li { border-top: 1px solid var(--pa-line); }
.pa-items-desc { font-size: .88rem; line-height: 1.55; color: var(--pc-gray-700); min-width: 0; }
.pa-items-amt { font-size: .95rem; font-weight: 700; white-space: nowrap; color: var(--pc-gray-900); }

/* Totais */
.pa-totals { margin: 0; padding: .85rem 1.15rem 1rem; border-top: 2px solid var(--pa-line); background: var(--pc-gray-50); }
.pa-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .28rem 0; }
.pa-totals dt { font-size: .86rem; font-weight: 500; color: var(--pc-gray-500); margin: 0; }
.pa-totals dd { font-size: .9rem; font-weight: 600; color: var(--pc-gray-700); margin: 0; }
.pa-totals-grand { margin-top: .45rem; padding-top: .6rem !important; border-top: 1px solid var(--pc-gray-300); }
.pa-totals-grand dt { font-size: 1rem; font-weight: 700; color: var(--pc-gray-900); }
.pa-totals-grand dd { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: var(--pc-gray-900); }
.pa-totals-balance dt, .pa-totals-balance dd { color: var(--pa-warn); font-weight: 700; }
.pa-fineprint { margin: 0; padding: 0 1.15rem 1rem; font-size: .75rem; color: var(--pc-gray-500); }

/* Bloco recolhível */
.pa-fold > summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none;
}
.pa-fold > summary::-webkit-details-marker { display: none; }
.pa-fold > summary:hover { background: var(--pc-gray-100); }
.pa-fold-chevron { transition: transform .2s ease; color: var(--pc-gray-500); font-size: .8rem; }
.pa-fold[open] .pa-fold-chevron { transform: rotate(180deg); }

.pa-parties { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.pa-parties h3 {
  margin: 0 0 .3rem; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--pc-gray-500);
}
.pa-parties address, .pa-parties p { margin: 0; font-size: .86rem; line-height: 1.55; font-style: normal; color: var(--pc-gray-700); }
.pa-subhead {
  margin: 1.5rem 0 .5rem; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--pc-gray-500);
}
.pa-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pa-txn { width: 100%; border-collapse: collapse; font-size: .82rem; }
.pa-txn th {
  text-align: left; font-weight: 700; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--pc-gray-500);
  padding: .45rem .6rem; border-bottom: 1px solid var(--pa-line); white-space: nowrap;
}
.pa-txn td { padding: .55rem .6rem; border-bottom: 1px solid var(--pc-gray-100); color: var(--pc-gray-700); }
.pa-txn-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; word-break: break-all; }
.pa-txn-none { text-align: center; color: var(--pc-gray-500); padding: 1rem !important; }
.pa-txn-balance td { font-weight: 700; color: var(--pc-gray-900); border-bottom: 0; }

.pa-doc-actions { display: flex; gap: .6rem; margin-top: 1rem; }
.pa-doc-actions .pa-btn { flex: 1; }
.pa-back { margin: 1.5rem 0 0; text-align: center; font-size: .86rem; color: var(--pc-gray-500); }
.pa-back a { color: var(--pc-primary-dark); font-weight: 600; }
.pa-back span { margin: 0 .5rem; opacity: .5; }

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
  .pa-inv-shell { padding: 2rem 1.5rem 0; }
  .pa-hero { padding: 2rem 2rem 2.1rem; }
  .pa-hero-amount { font-size: 3.4rem; }
  .pa-hero-actions .btn,
  .pa-hero-actions button,
  .pa-hero-actions input[type="submit"] { width: auto !important; min-width: 280px; display: inline-block !important; }
  /* logo do gateway, botão e aviso alinhados à esquerda, na mesma prumada
     do valor e do status, nada centralizado no meio do hero. */
  .pa-hero-actions { text-align: left; }
  .pa-hero-actions .alert { max-width: 640px; }
  .pa-steps { display: flex; gap: 1.5rem; }
  .pa-steps li { flex: 1; }
  .pa-steps li + li { margin-top: 0; }
  .pa-parties { grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; }
  .pa-next { flex-direction: row; align-items: center; justify-content: space-between; padding: 1.6rem 1.8rem; }
  .pa-next-cta { align-self: center; flex: 0 0 auto; padding: 1rem 1.75rem; }
  .pa-next-title { font-size: 2.4rem; }
  .pa-next-sub { max-width: 60ch; }
}

/* ---------- Impressão ---------- */
@media print {
  .pa-invoice-page { background: #fff !important; }
  .pa-hero {
    background: #fff !important; color: #000 !important;
    border: 2px solid #000; box-shadow: none; border-radius: 0;
  }
  .pa-hero-pill { background: none; border: 1px solid #000; color: #000; }
  .pa-hero-num, .pa-hero-sub { color: #333 !important; }
  .pa-card, .pa-fold { box-shadow: none; border-color: #999; }
  .pa-fold > summary { display: none; }
  .pa-fold .pa-card-body { display: block !important; }
  .pa-steps, .pa-back { display: none !important; }
}

/* ==========================================================================
   PARALELA: cabeçalho no mobile                             (2026-08-25)

   A logo estava travada em 42px de altura, o que dá 226px de largura. Somada
   ao bloco de carrinho + menu (132px) e às margens, estourava os 360px úteis
   de um iPhone 12 Pro, e o Bootstrap quebrava a linha: logo em cima, carrinho
   e menu numa segunda linha alinhados à esquerda. O cabeçalho ficava com
   114px de altura e visivelmente torto.

   Aqui a barra da marca vira uma linha só, com a logo dimensionada por faixa
   de tela e as ações ancoradas à direita.
   ========================================================================== */

@media (max-width: 1199.98px) {
  #header .navbar.navbar-light {
    padding: .5rem 0;
  }

  #header .navbar.navbar-light > .container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem;
  }

  #header .navbar-brand {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    margin-right: 0 !important;
    padding: 0;
  }

  #header .navbar-brand img,
  #header .logo-container img {
    max-height: 34px;
    width: auto;
    max-width: 100%;
  }

  /* O form de busca some abaixo de xl, mas continua no fluxo como item vazio:
     é ele que empurra as ações para a direita. */
  #header .navbar.navbar-light form.form-inline {
    flex: 1 1 auto;
    min-width: 0;
  }

  #header .navbar-nav.toolbar {
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
  }

  #header .navbar-nav.toolbar .nav-item {
    margin-left: .25rem !important;
  }

  #header .navbar-nav.toolbar .nav-link {
    padding: .5rem .6rem !important;
    line-height: 1;
  }
}

@media (max-width: 767.98px) {
  #header .navbar-brand img,
  #header .logo-container img { max-height: 28px; }
}

@media (max-width: 359.98px) {
  #header .navbar-brand img,
  #header .logo-container img { max-height: 24px; }
  #header .navbar-nav.toolbar .nav-link { padding: .5rem .45rem !important; }
}

/* Troca de conta: ícone em Font Awesome duotone (que não existe no pacote
   gratuito carregado aqui) e tooltip em inglês, num painel 100% em português.
   Só faz sentido para quem administra mais de um cliente, então sai do celular. */
@media (max-width: 767.98px) {
  .topbar .active-client .btn[href*="user-accounts"] { display: none !important; }
}

/* Badge do carrinho: um "0" permanente ao lado do ícone não informa nada. */
#header #cartItemCount.is-empty { display: none !important; }

/* ==========================================================================
   PARALELA: paleta dos painéis da central do cliente        (2026-08-25)

   O WHMCS pinta cada painel e cada botão de topo com a paleta do Bootstrap 3
   (#f0ad4e, #5bc0de, #d9534f, roxo, rosa, lima). Ao lado do azul da Paralela
   isso vira arco-íris e entrega a idade do template. Aqui as faixas coloridas
   dos cards somem e as cores restantes passam a ser as da marca.
   ========================================================================== */

/* Faixa colorida no topo de cada painel: some, fica a borda do card */
.client-home-cards .card[class*="card-accent-"] {
  border-top-width: 1px !important;
  border-top-color: var(--pa-line) !important;
}

/* Botões de atalho no cabeçalho dos painéis */
.client-home-cards .card-header .btn[class*="bg-color-"] {
  background: rgba(46,117,243,.09) !important;
  color: var(--pc-primary-dark) !important;
  border: 1px solid rgba(46,117,243,.18) !important;
  font-weight: 600;
  border-radius: 999px;
  padding: .25rem .7rem;
}
.client-home-cards .card-header .btn[class*="bg-color-"]:hover {
  background: rgba(46,117,243,.16) !important;
  color: var(--pc-primary-dark) !important;
}


/* Barra de breadcrumb vazia (login, cadastro, recuperação de senha): sem
   itens ela virava uma faixa escura de 19px sem função nenhuma. */
.master-breadcrumb:has(.breadcrumb:empty) { display: none !important; }

/* "Logado como:" na barra de topo herdava o fundo branco do .input-group-text
   do Bootstrap, virando um retângulo branco vazio ao lado do nome do cliente. */
.topbar .active-client .input-group-text {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,.7) !important;
  padding-right: .4rem;
}
.topbar .active-client .btn-active-client {
  background: transparent !important;
  border: none !important;
}

/* ==========================================================================
   PARALELA: dashboard da area do cliente                    (2026-08-25)

   O que estava ruim:
   - quatro cartoes grandes so para dizer 0, 0, 0, 1, sendo que o 1 repetia a
     fatura que o bloco de "proximo passo" logo acima ja mostrava inteira;
   - dois sistemas de card na mesma tela: os da lateral com cabecalho azul
     escuro solido, os do conteudo com cabecalho branco;
   - os paineis em column-count, que empilha por altura de coluna e deixa o
     conjunto desalinhado;
   - rodape de card vazio, sobrando como uma faixa cinza sem conteudo.
   ========================================================================== */

/* ---------- Faixa de resumo ---------- */
.pa-summary {
  /* flex, nao grid de 4 colunas: o numero de metricas varia (a de fatura sai
     quando o bloco de proximo passo ja mostra a mesma fatura) e o grid fixo
     deixava uma celula cinza vazia sobrando na direita. */
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-bottom: 1.25rem;
  background: var(--pa-line);
  border: 1px solid var(--pa-line);
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow);
  overflow: hidden;
}

/* No celular a faixa vira lista: uma metrica por linha, rotulo a esquerda e
   numero a direita. Em duas colunas, um numero impar de metricas deixava a
   ultima celula sozinha com o conteudo encostado num canto. */
.pa-summary { flex-direction: column; }
.pa-summary-item { flex: 1 1 auto; }
.pa-summary .pa-summary-txt {
  flex: 1 1 auto;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.pa-summary .pa-summary-txt span { margin-top: 0; }

@media (min-width: 768px) {
  .pa-summary { flex-direction: row; }
  .pa-summary-item { flex: 1 1 0; }
  .pa-summary .pa-summary-txt {
    flex: 0 1 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
  }
  .pa-summary .pa-summary-txt span { margin-top: .15rem; }
}

.pa-summary-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem;
  background: #fff;
  color: inherit;
  text-decoration: none !important;
  transition: var(--pc-transition);
}
.pa-summary-item:hover { background: var(--pc-gray-50); color: inherit; }

.pa-summary-ic {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  background: rgba(46,117,243,.1);
  color: var(--pc-primary);
}

.pa-summary-txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.pa-summary-txt b {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--pc-gray-900);
  font-variant-numeric: tabular-nums;
}
.pa-summary-txt span {
  margin-top: .15rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pc-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa-summary-item.is-alert .pa-summary-ic { background: rgba(217,119,6,.14); color: #b45309; }
.pa-summary-item.is-alert .pa-summary-txt b { color: #b45309; }

/* ---------- Um sistema de card so ---------- */
/* A lateral vinha com cabecalho azul escuro solido e o conteudo com cabecalho
   branco. Na mesma tela isso le como duas interfaces coladas. */
.card-sidebar > .card-header {
  background: var(--pc-gray-50) !important;
  border-bottom: 1px solid var(--pa-line) !important;
}
.card-sidebar > .card-header .card-title,
.card-sidebar > .card-header .card-title i,
.card-sidebar > .card-header a { color: var(--pc-gray-900) !important; }
.card-sidebar > .card-header .card-minimise { color: var(--pc-gray-500) !important; }
.card-sidebar > .card-header .card-title i { color: var(--pc-primary) !important; }

.card-sidebar,
.client-home-cards .card {
  border: 1px solid var(--pa-line) !important;
  border-radius: var(--pc-radius) !important;
  box-shadow: var(--pc-shadow);
  overflow: hidden;
}

.client-home-cards .card-header {
  background: var(--pc-gray-50) !important;
  border-bottom: 1px solid var(--pa-line) !important;
  padding: .8rem 1.1rem;
}
.client-home-cards .card-header .card-title {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--pc-gray-900);
}
.client-home-cards .card-header .card-title > i { color: var(--pc-primary); }

/* ---------- Grade dos paineis ---------- */
.client-home-cards .pa-panels > .card { margin-bottom: 1.25rem; }

@media (min-width: 992px) {
  .client-home-cards .pa-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
  }
  .client-home-cards .pa-panels > .card { margin-bottom: 0; }
}

/* ---------- Corpo e estados vazios ---------- */
.client-home-cards .card-body {
  padding: 1.1rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--pc-gray-500);
}
.client-home-cards .card-body a { font-weight: 600; }
.client-home-cards .card-footer {
  background: transparent;
  border-top: 1px solid var(--pa-line);
  padding: .6rem 1.1rem;
  font-size: .82rem;
}

/* Lista de itens dentro dos paineis (servicos, chamados, noticias) */
.client-home-cards .list-group-item {
  border-left: 0;
  border-right: 0;
  padding: .75rem 1.1rem;
  font-size: .88rem;
}
.client-home-cards .list-group-item:last-child { border-bottom: 0; }

/* O painel de registrar dominio e produto secundario para um host de VPS:
   fica com peso visual menor que os paineis de servico e cobranca. */
.client-home-cards [menuitemname="Register a New Domain"] .card-body { padding: .9rem 1.1rem; }

/* Cabecalho de painel com altura constante, tenha ou nao botao de atalho */
.client-home-cards .card-header,
.card-sidebar > .card-header {
  min-height: 50px;
  display: flex;
  align-items: center;
}
.client-home-cards .card-header .card-title,
.card-sidebar > .card-header .card-title { width: 100%; }

/* ---------- Estado vazio dentro dos paineis ----------
   O corpo dos paineis vem do WHMCS via lang. Em vez de uma frase solta num
   card largo e vazio, o texto vira um estado vazio de verdade: icone, frase
   curta e uma acao. A marcacao esta em lang/overrides/portuguese-br.php. */
.pa-empty-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
  padding: .4rem 0 .2rem;
}
/* O paragrafo que o WHMCS coloca em volta do corpo do painel nao pode somar
   padding nem margem quando o conteudo ja e um estado vazio. */
.client-home-cards .card-body > p:has(.pa-empty-inline) { margin: 0; padding: 0; }
.pa-empty-inline-txt {
  display: block;
  max-width: 46ch;
  font-size: .89rem;
  line-height: 1.5;
  color: var(--pc-gray-500);
}
.pa-empty-inline > i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pc-gray-100);
  color: var(--pc-primary);
  font-size: 1.15rem;
}
.pa-empty-inline .pa-btn { margin-top: .15rem; }