/* ==========================================================================
   ZenHost Premium Theme — custom.css
   WHMCS 8.13 "twenty-one" (Bootstrap 4) complete visual override
   Version: 9.0.0

   Lagom-inspired design system applied to WHMCS twenty-one template.
   Targets exact WHMCS class names for maximum visual transformation.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* ==========================================================================
   § 1 — DESIGN TOKENS
   ========================================================================== */
:root {
  --zh-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --zh-primary: #0B64F4;
  --zh-primary-rgb: 11,100,244;
  --zh-primary-hover: #0952D0;
  --zh-primary-lighter: #B3D1FF;
  --zh-primary-bg: #E8F1FE;
  --zh-primary-dark: #083FB2;
  --zh-accent: #E8590C;
  --zh-accent-hover: #D14B07;
  --zh-success: #2D9F46;
  --zh-success-bg: #DBF5E1;
  --zh-warning: #F08000;
  --zh-warning-bg: #FFF3E0;
  --zh-danger: #D92632;
  --zh-danger-bg: #FCEEEF;
  --zh-gray-900: #17191C;
  --zh-gray-800: #2E3138;
  --zh-gray-700: #464A54;
  --zh-gray-600: #5E636E;
  --zh-gray-500: #979BA4;
  --zh-gray-400: #ACB0B9;
  --zh-gray-300: #DEE0E3;
  --zh-gray-200: #E9EAEC;
  --zh-gray-100: #F0F1F2;
  --zh-gray-50: #F7F7F8;
  --zh-body-bg: #F7F7F8;
  --zh-card-bg: #FFFFFF;
  --zh-border: #E9EAEC;
  --zh-shadow-sm: 0px 0px 1px rgba(0,0,0,.10), 0px 2px 16px rgba(0,0,0,.06);
  --zh-shadow: 0px 0px 1px rgba(0,0,0,.10), 0px 4px 24px rgba(0,0,0,.08);
  --zh-shadow-lg: 0px 0px 1px rgba(0,0,0,.12), 0px 8px 32px rgba(0,0,0,.10);
  --zh-shadow-xl: 0px 0px 1px rgba(0,0,0,.12), 0px 16px 40px rgba(0,0,0,.16);
  --zh-radius: 6px;
  --zh-radius-lg: 8px;
  --zh-radius-xl: 12px;
  --zh-ease: .24s ease;
}

/* ==========================================================================
   § 2 — BASE RESET
   ========================================================================== */
html {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body, body.primary-bg-color {
  font-family: var(--zh-font) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--zh-gray-900) !important;
  background: var(--zh-body-bg) !important;
  letter-spacing: -0.01em;
}

::selection {
  background: var(--zh-primary-bg) !important;
  color: var(--zh-primary-dark) !important;
}

a { color: var(--zh-primary) !important; text-decoration: none !important; transition: color .15s ease !important; }
a:hover { color: var(--zh-primary-hover) !important; }

/* ==========================================================================
   § 3 — TYPOGRAPHY
   ========================================================================== */
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 {
  font-family: var(--zh-font) !important;
  color: var(--zh-gray-900) !important;
  letter-spacing: -0.025em;
}
h1,.h1 { font-size: 40px !important; font-weight: 800 !important; line-height: 1.15 !important; }
h2,.h2 { font-size: 32px !important; font-weight: 800 !important; line-height: 1.2 !important; }
h3,.h3 { font-size: 24px !important; font-weight: 700 !important; }
h4,.h4 { font-size: 20px !important; font-weight: 300 !important; color: var(--zh-gray-600) !important; }
h5,.h5 { font-size: 18px !important; font-weight: 600 !important; }
h6,.h6 { font-size: 16px !important; font-weight: 600 !important; }
p { color: var(--zh-gray-600) !important; margin-bottom: 16px !important; }
small,.small { font-size: 12px !important; color: var(--zh-gray-500) !important; }
.text-muted { color: var(--zh-gray-500) !important; }
hr { border-top-color: var(--zh-gray-200) !important; }

code {
  font-size: 13px !important; color: var(--zh-danger) !important;
  background: var(--zh-danger-bg) !important; padding: 2px 6px !important; border-radius: 3px !important;
}
pre {
  background: var(--zh-gray-900) !important; color: #E4E6EB !important;
  border: none !important; border-radius: var(--zh-radius) !important; padding: 24px !important;
}

/* ==========================================================================
   § 4 — UNIFIED HEADER
   Single-bar layout: Brand → Nav (center) → Actions (right)
   ========================================================================== */

/* Admin masquerade bar */
.zh-admin-bar {
  background: var(--zh-gray-900) !important;
  padding: 6px 0 !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.6) !important;
}
.zh-admin-bar strong { color: #fff !important; }
.zh-admin-bar__link {
  color: rgba(255,255,255,.7) !important;
  font-size: 12px !important;
  text-decoration: none !important;
}
.zh-admin-bar__link:hover { color: #fff !important; }

/* ── Main nav bar ── */
.zh-navbar,
.zh-navbar.navbar-light {
  background: var(--zh-card-bg) !important;
  border: none !important;
  border-bottom: 1px solid var(--zh-gray-200) !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 64px !important;
  font-family: var(--zh-font) !important;
  transition: box-shadow .3s ease !important;
}
.zh-navbar.is-scrolled {
  box-shadow: 0 1px 16px rgba(0,0,0,.06) !important;
  border-bottom-color: transparent !important;
}
.zh-navbar > .container {
  align-items: center !important;
  padding: 0 24px !important;
}

/* ── Brand ── */
.zh-brand {
  padding: 10px 0 !important;
  margin-right: 0 !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}
.zh-brand:hover { text-decoration: none !important; }
.zh-brand__img {
  height: 34px !important;
  width: auto !important;
  max-width: 180px !important;
}
.zh-brand__text {
  font-size: 26px !important;
  font-weight: 800 !important;
  font-style: italic !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}
.zh-brand__zen  { color: var(--zh-primary) !important; }
.zh-brand__host { color: var(--zh-gray-900) !important; }

/* ── Collapse container — inline on xl, drop-down on mobile ── */
@media (min-width: 1200px) {
  .zh-navbar .zh-collapse {
    flex-grow: 1 !important;
    justify-content: center !important;
    order: 2 !important;
  }
  .zh-actions { order: 3 !important; }
}

/* ── Nav links ── */
.zh-nav-list > li { position: relative !important; }
.zh-nav-list > li > a,
.zh-nav-list > li > a.pr-4,
.zh-nav-list > li > a.dropdown-toggle {
  font-family: var(--zh-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--zh-gray-600) !important;
  padding: 22px 16px !important;
  transition: color .2s ease !important;
  white-space: nowrap !important;
  position: relative !important;
}
.zh-nav-list > li > a:hover,
.zh-nav-list > li > a:focus {
  color: var(--zh-gray-900) !important;
  background: transparent !important;
}
.zh-nav-list > li.active > a {
  color: var(--zh-primary) !important;
  font-weight: 600 !important;
}

/* Active bottom indicator */
.zh-nav-list > li.active > a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 16px !important; right: 16px !important;
  height: 2px !important;
  background: var(--zh-primary) !important;
  border-radius: 2px 2px 0 0 !important;
}

/* Hover underline reveal */
.zh-nav-list > li:not(.active) > a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 16px !important; right: 16px !important;
  height: 2px !important;
  background: var(--zh-gray-300) !important;
  border-radius: 2px 2px 0 0 !important;
  transform: scaleX(0) !important;
  transition: transform .2s ease !important;
}
.zh-nav-list > li:not(.active) > a:hover::after {
  transform: scaleX(1) !important;
}

/* Nav dropdown */
.zh-nav-list .dropdown-menu,
.zh-navbar .dropdown-menu {
  border: 1px solid var(--zh-gray-200) !important;
  border-radius: var(--zh-radius-lg) !important;
  box-shadow: var(--zh-shadow-lg) !important;
  padding: 8px !important;
  margin-top: 0 !important;
  min-width: 220px !important;
  background: var(--zh-card-bg) !important;
  animation: zhFadeIn .15s ease !important;
}
.zh-nav-list .dropdown-menu .dropdown-item,
.zh-nav-list .dropdown-menu li.dropdown-item {
  font-family: var(--zh-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--zh-gray-700) !important;
  padding: 8px 12px !important;
  border-radius: var(--zh-radius) !important;
  transition: background .15s ease, color .15s ease !important;
}
.zh-nav-list .dropdown-menu .dropdown-item:hover,
.zh-nav-list .dropdown-menu li.dropdown-item:hover {
  background: var(--zh-gray-50) !important;
  color: var(--zh-gray-900) !important;
}
.zh-nav-list .dropdown-menu .dropdown-item a {
  color: inherit !important;
  text-decoration: none !important;
  padding: 0 !important;
  display: block !important;
}

/* ==========================================================================
   § 5 — HEADER COMPONENTS (search, icons, user, mobile)
   ========================================================================== */

/* ── Inline search (pill) ── */
.zh-search__box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  margin-right: 4px !important;
}
.zh-search__icon {
  position: absolute !important;
  left: 12px !important;
  color: var(--zh-gray-400) !important;
  font-size: 13px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.zh-search__input {
  font-family: var(--zh-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--zh-gray-900) !important;
  background: var(--zh-gray-50) !important;
  border: 1px solid transparent !important;
  border-radius: 20px !important;
  padding: 7px 14px 7px 34px !important;
  width: 200px !important;
  height: 36px !important;
  outline: none !important;
  transition: all .25s ease !important;
}
.zh-search__input::placeholder { color: var(--zh-gray-400) !important; }
.zh-search__input:focus {
  background: var(--zh-card-bg) !important;
  border-color: var(--zh-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--zh-primary-rgb),.1) !important;
  width: 260px !important;
}

/* ── Icon buttons (bell, cart) ── */
.zh-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--zh-radius-lg) !important;
  background: transparent !important;
  border: none !important;
  color: var(--zh-gray-500) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all .2s ease !important;
  text-decoration: none !important;
  margin-left: 2px !important;
  padding: 0 !important;
}
.zh-icon-btn:hover {
  background: var(--zh-gray-50) !important;
  color: var(--zh-gray-900) !important;
  text-decoration: none !important;
}
.zh-icon-btn__badge {
  position: absolute !important;
  top: 4px !important; right: 4px !important;
  min-width: 16px !important; height: 16px !important;
  padding: 0 4px !important;
  font-size: 10px !important; font-weight: 700 !important;
  line-height: 16px !important; text-align: center !important;
  color: #fff !important;
  background: var(--zh-danger) !important;
  border-radius: 50px !important;
  border: 2px solid var(--zh-card-bg) !important;
}

/* ── User avatar & dropdown ── */
.zh-user { margin-left: 6px !important; }
.zh-user__btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px 8px 4px 4px !important;
  border-radius: var(--zh-radius-lg) !important;
  transition: background .2s ease !important;
}
.zh-user__btn:hover { background: var(--zh-gray-50) !important; }
.zh-user__btn::after { display: none !important; }

.zh-user__avatar {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--zh-primary) 0%, var(--zh-primary-dark) 100%) !important;
  color: #fff !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 12px !important; font-weight: 700 !important;
  font-family: var(--zh-font) !important;
  letter-spacing: .03em !important;
  flex-shrink: 0 !important;
}
.zh-user__name {
  font-family: var(--zh-font) !important;
  font-size: 14px !important; font-weight: 500 !important;
  color: var(--zh-gray-700) !important;
  max-width: 120px !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
.zh-user__chevron {
  font-size: 10px !important;
  color: var(--zh-gray-400) !important;
  transition: transform .2s ease !important;
  margin-left: -2px !important;
}
.zh-user.show .zh-user__chevron { transform: rotate(180deg) !important; }

/* User dropdown panel */
.zh-user__dropdown {
  min-width: 260px !important;
  border: 1px solid var(--zh-gray-200) !important;
  border-radius: var(--zh-radius-lg) !important;
  box-shadow: var(--zh-shadow-lg) !important;
  padding: 0 !important;
  margin-top: 8px !important;
  overflow: hidden !important;
  background: var(--zh-card-bg) !important;
  animation: zhFadeIn .15s ease !important;
}
.zh-user__dropdown-header {
  padding: 16px 16px 12px !important;
  background: var(--zh-gray-50) !important;
  border-bottom: 1px solid var(--zh-gray-200) !important;
}
.zh-user__dropdown-name {
  font-family: var(--zh-font) !important;
  font-size: 14px !important; font-weight: 600 !important;
  color: var(--zh-gray-900) !important;
}
.zh-user__dropdown-email {
  font-family: var(--zh-font) !important;
  font-size: 12px !important;
  color: var(--zh-gray-500) !important;
  margin-top: 2px !important;
}
.zh-user__dropdown .dropdown-divider {
  margin: 4px 0 !important;
  border-color: var(--zh-gray-100) !important;
}
.zh-user__dropdown-item {
  font-family: var(--zh-font) !important;
  font-size: 14px !important; font-weight: 400 !important;
  color: var(--zh-gray-700) !important;
  padding: 9px 16px !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
  transition: background .15s ease, color .15s ease !important;
}
.zh-user__dropdown-item:hover {
  background: var(--zh-gray-50) !important;
  color: var(--zh-gray-900) !important;
}
.zh-user__dropdown-icon {
  width: 18px !important; text-align: center !important;
  color: var(--zh-gray-400) !important;
  font-size: 14px !important;
}
.zh-user__dropdown-item:hover .zh-user__dropdown-icon {
  color: var(--zh-primary) !important;
}

/* ── Auth buttons (not logged in) ── */
.zh-auth { gap: 8px !important; margin-left: 12px !important; }
.zh-auth__btn {
  font-family: var(--zh-font) !important;
  font-size: 14px !important; font-weight: 500 !important;
  color: var(--zh-gray-700) !important;
  padding: 7px 16px !important;
  border-radius: var(--zh-radius) !important;
  text-decoration: none !important;
  transition: all .2s ease !important;
  white-space: nowrap !important;
}
.zh-auth__btn:hover {
  color: var(--zh-gray-900) !important;
  background: var(--zh-gray-50) !important;
  text-decoration: none !important;
}
.zh-auth__btn--primary {
  background: var(--zh-primary) !important;
  color: #fff !important; font-weight: 600 !important;
}
.zh-auth__btn--primary:hover {
  background: var(--zh-primary-hover) !important;
  color: #fff !important;
}

/* ── Hamburger toggle ── */
.zh-hamburger {
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  width: 38px !important; height: 38px !important;
  border: none !important;
  background: transparent !important;
  color: var(--zh-gray-600) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  border-radius: var(--zh-radius) !important;
  margin-left: 4px !important; padding: 0 !important;
  transition: background .2s ease !important;
}
.zh-hamburger:hover { background: var(--zh-gray-50) !important; }
@media (min-width: 1200px) {
  .zh-hamburger { display: none !important; }
}

/* ── Mobile collapse ── */
.zh-mobile-search { margin-bottom: 12px !important; }
.zh-mobile-search .form-control {
  font-family: var(--zh-font) !important;
  font-size: 14px !important;
  border: 1px solid var(--zh-gray-200) !important;
  border-radius: 0 var(--zh-radius) var(--zh-radius) 0 !important;
  height: 40px !important;
}
.zh-mobile-search .btn {
  background: var(--zh-gray-50) !important;
  border: 1px solid var(--zh-gray-200) !important;
  border-right: none !important;
  border-radius: var(--zh-radius) 0 0 var(--zh-radius) !important;
  color: var(--zh-gray-400) !important;
  height: 40px !important;
}

@media (max-width: 1199.98px) {
  .zh-collapse {
    padding: 12px 0 16px !important;
    border-top: 1px solid var(--zh-gray-200) !important;
  }
  .zh-nav-list > li > a,
  .zh-nav-list > li > a.pr-4,
  .zh-nav-list > li > a.dropdown-toggle {
    padding: 10px 0 !important;
    font-size: 15px !important;
    color: var(--zh-gray-700) !important;
  }
  .zh-nav-list > li > a::after { display: none !important; }
  .zh-nav-list .dropdown-menu {
    box-shadow: none !important;
    border: none !important;
    padding: 0 0 0 16px !important;
    background: transparent !important;
    animation: none !important;
  }
}

/* ── Fade-in keyframe for dropdowns ── */
@keyframes zhFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   § 6 — BREADCRUMBS
   ========================================================================== */
/* Master breadcrumb wrapper — WHMCS wraps breadcrumbs in nav.master-breadcrumb */
nav.master-breadcrumb,
.master-breadcrumb {
  background: transparent !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  border: none !important;
}

.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  font-size: 13px !important;
  border-radius: 0 !important;
  border: none !important;
}
.breadcrumb li, .breadcrumb-item { color: var(--zh-gray-500) !important; }
.breadcrumb li a, .breadcrumb-item a { color: var(--zh-gray-500) !important; }
.breadcrumb li a:hover, .breadcrumb-item a:hover { color: var(--zh-primary) !important; }
.breadcrumb > .active, .breadcrumb-item.active { color: var(--zh-gray-900) !important; font-weight: 500 !important; }
.breadcrumb > li + li::before, .breadcrumb-item + .breadcrumb-item::before {
  content: '/' !important; color: var(--zh-gray-400) !important; padding: 0 8px !important;
}

/* ==========================================================================
   § 7 — MAIN CONTENT AREA
   ========================================================================== */
#main-body {
  padding-top: 32px !important;
  padding-bottom: 48px !important;
}

.primary-content {
  font-family: var(--zh-font) !important;
}

/* Page titles — Lagom: huge, bold, left-aligned */
.header-lined {
  border-bottom: none !important;
  padding: 0 0 24px !important;
  margin-bottom: 32px !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: auto !important;
}

.header-lined h1,
h1.font-size-36 {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--zh-gray-900) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
}

.header-lined p {
  font-size: 15px !important;
  color: var(--zh-gray-500) !important;
  font-weight: 400 !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   § 8 — HOMEPAGE — Product/Service Group Cards
   WHMCS: .card-columns.home > .card.mb-3 > .card-body > h3.pricing-card-title
   Lagom: Clean cards with name, description, and browse button
   ========================================================================== */

/* Home heading */
.primary-content > h2.text-center {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--zh-gray-900) !important;
  margin-bottom: 32px !important;
  margin-top: 0 !important;
  text-align: left !important;
  letter-spacing: -0.025em;
}

/* Override the card-columns CSS columns layout → use flexbox grid */
.card-columns.home {
  column-count: unset !important;
  -webkit-column-count: unset !important;
  -moz-column-count: unset !important;
  column-gap: unset !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  margin-bottom: 48px !important;
}

.card-columns.home .card.mb-3 {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 280px !important;
  max-width: 400px !important;
  margin-bottom: 0 !important;
  background: var(--zh-card-bg) !important;
  border: none !important;
  border-radius: var(--zh-radius-lg) !important;
  box-shadow: var(--zh-shadow-sm) !important;
  transition: all var(--zh-ease) !important;
  overflow: hidden;
  cursor: pointer;
  break-inside: unset !important;
  -webkit-column-break-inside: unset !important;
}

.card-columns.home .card.mb-3:hover {
  box-shadow: var(--zh-shadow-lg) !important;
  transform: translateY(-6px) !important;
}

.card-columns.home .card-body {
  padding: 40px 32px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Product group icon — inject via CSS pseudo-element */
.card-columns.home .card-body::before {
  content: '' !important;
  display: block !important;
  width: 56px !important;
  height: 56px !important;
  background: var(--zh-primary-bg) !important;
  border-radius: 14px !important;
  margin-bottom: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B64F4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'%3E%3C/path%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'%3E%3C/polyline%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 28px !important;
}

.card-columns.home h3.pricing-card-title,
.card-columns.home h3.card-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.02em;
}

.card-columns.home .card-body p {
  font-size: 14px !important;
  color: var(--zh-gray-500) !important;
  margin-bottom: 24px !important;
  line-height: 1.5 !important;
}

.card-columns.home .btn-outline-primary,
.card-columns.home .btn.btn-block {
  background: var(--zh-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--zh-radius) !important;
  padding: 12px 32px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  width: 100% !important;
  box-shadow: 0 2px 8px rgba(var(--zh-primary-rgb),.25) !important;
  transition: all var(--zh-ease) !important;
}

.card-columns.home .btn-outline-primary:hover,
.card-columns.home .btn.btn-block:hover {
  background: var(--zh-primary-hover) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(var(--zh-primary-rgb),.35) !important;
}

/* ==========================================================================
   § 9 — HOMEPAGE — Action Icon Buttons
   WHMCS: .action-icon-btns > div > a.card-accent-{color} > figure.ico-container > i
   Lagom: Clean icon cards with hover lift
   ========================================================================== */
.row.action-icon-btns {
  margin-bottom: 48px !important;
  margin-top: 24px !important;
}

/* Remove the default border-top accent — replace with icon background */
[class*="card-accent-"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 28px 16px 20px !important;
  background: var(--zh-card-bg) !important;
  border: none !important;
  border-top: none !important;
  border-radius: var(--zh-radius-lg) !important;
  box-shadow: var(--zh-shadow-sm) !important;
  transition: all var(--zh-ease) !important;
  text-decoration: none !important;
  color: var(--zh-gray-700) !important;
}

[class*="card-accent-"]:hover {
  box-shadow: var(--zh-shadow-lg) !important;
  transform: translateY(-6px) !important;
  color: var(--zh-primary) !important;
}

/* Icon container — Lagom style circular icon with tinted bg */
figure.ico-container {
  width: 64px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
  margin: 0 auto 14px !important;
  transition: all var(--zh-ease) !important;
}

/* Color each icon's bg based on the accent class */
.card-accent-teal figure.ico-container { background: #E0F7F5 !important; }
.card-accent-pomegranate figure.ico-container { background: #FDEAEA !important; }
.card-accent-sun-flower figure.ico-container { background: #FFF8E1 !important; }
.card-accent-asbestos figure.ico-container { background: #F0F1F2 !important; }
.card-accent-midnight-blue figure.ico-container { background: var(--zh-primary-bg) !important; }
.card-accent-green figure.ico-container { background: var(--zh-success-bg) !important; }

/* Icon colors matching the accent */
.card-accent-teal .ico-container i { color: #00897B !important; font-size: 28px !important; }
.card-accent-pomegranate .ico-container i { color: #C0392B !important; font-size: 28px !important; }
.card-accent-sun-flower .ico-container i { color: #F4A900 !important; font-size: 28px !important; }
.card-accent-asbestos .ico-container i { color: #7F8C8D !important; font-size: 28px !important; }
.card-accent-midnight-blue .ico-container i { color: var(--zh-primary) !important; font-size: 28px !important; }
.card-accent-green .ico-container i { color: var(--zh-success) !important; font-size: 28px !important; }

/* Hover: brighten icon container */
[class*="card-accent-"]:hover .ico-container {
  transform: scale(1.08) !important;
}

/* Figcaption text */
[class*="card-accent-"] figcaption,
.ico-container + span,
.action-icon-btns .col-6 a span,
.action-icon-btns a {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-700) !important;
  margin-top: 4px !important;
}

[class*="card-accent-"]:hover figcaption {
  color: var(--zh-primary) !important;
}

/* ==========================================================================
   § 10 — HOMEPAGE — "Sua Conta" (Your Account) Section
   WHMCS: ul.nav.justify-content-center > li > a.item
   ========================================================================== */
.primary-content > h2.text-center:last-of-type {
  text-align: left !important;
  margin-top: 16px !important;
}

ul.nav.justify-content-center {
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-bottom: 48px !important;
}

ul.nav.justify-content-center a.item,
.nav.justify-content-center a,
a.item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 20px !important;
  background: var(--zh-card-bg) !important;
  border: none !important;
  border-radius: var(--zh-radius) !important;
  box-shadow: var(--zh-shadow-sm) !important;
  color: var(--zh-gray-700) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all var(--zh-ease) !important;
  text-decoration: none !important;
}

a.item:hover {
  box-shadow: var(--zh-shadow) !important;
  color: var(--zh-primary) !important;
  transform: translateY(-2px) !important;
}

a.item i,
a.item .fa,
a.item .fas,
a.item .far,
a.item .fal {
  color: var(--zh-primary) !important;
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
}

/* ==========================================================================
   § 11 — CARDS / PANELS  (Base — Lagom depth: shadow-only, no borders)
   ========================================================================== */
.card,
.panel,
.panel-default,
.well {
  background: var(--zh-card-bg) !important;
  border: none !important;
  border-radius: var(--zh-radius) !important;
  box-shadow: var(--zh-shadow-sm) !important;
  margin-bottom: 24px !important;
  font-family: var(--zh-font) !important;
}

.well { padding: 24px !important; }

.card-header, .panel-heading {
  background: var(--zh-gray-50) !important;
  border-bottom: 1px solid var(--zh-gray-200) !important;
  padding: 14px 20px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
}

.panel-heading .panel-title, .card-header .card-title,
.panel-heading h3, .card-header h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-900) !important;
  margin: 0 !important;
}

/* Panel heading icons (stars, gears, etc.) */
.panel-heading i,
.card-header i {
  margin-right: 8px !important;
  color: var(--zh-gray-500) !important;
  font-size: 14px !important;
}

.card-body, .panel-body { padding: 24px !important; }
.card-footer, .panel-footer {
  background: var(--zh-gray-50) !important;
  border-top: 1px solid var(--zh-gray-200) !important;
  padding: 14px 20px !important;
}

/* Colored panels */
.panel-primary > .panel-heading { background: var(--zh-primary-bg) !important; }
.panel-success > .panel-heading { background: var(--zh-success-bg) !important; }
.panel-warning > .panel-heading { background: var(--zh-warning-bg) !important; }
.panel-danger > .panel-heading { background: var(--zh-danger-bg) !important; }

/* ==========================================================================
   § 12 — STORE — Product Cards
   WHMCS: #products .product.clearfix > header > span#name
                                       > .product-desc > p + ul
                                       > footer > .product-pricing > span.price
                                                > a.btn-order-now
   Lagom: Icon top, name centered, price large, features list, full-width button
   ========================================================================== */

/* Product grid rows */
#products .row.row-eq-height {
  margin-bottom: 24px !important;
}

/* Reset clearfix on products — we use flexbox instead */
.product.clearfix::before,
.product.clearfix::after {
  display: none !important;
  content: none !important;
}

/* Individual product card */
.product,
.product.clearfix,
div[id^="product"].product {
  background: var(--zh-card-bg) !important;
  border: none !important;
  border-radius: var(--zh-radius-lg) !important;
  box-shadow: var(--zh-shadow-sm) !important;
  transition: all var(--zh-ease) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

.product:hover,
.product.clearfix:hover {
  box-shadow: var(--zh-shadow-lg) !important;
  transform: translateY(-6px) !important;
}

/* Product header — Lagom: icon area + product name centered */
.product header,
.product.clearfix > header {
  float: none !important;
  width: 100% !important;
  background: transparent !important;
  padding: 32px 24px 0 !important;
  text-align: center !important;
  border-bottom: none !important;
  margin: 0 !important;
  position: relative;
}

/* Product icon pseudo-element */
.product header::before {
  content: '' !important;
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  background: var(--zh-primary-bg) !important;
  border-radius: 14px !important;
  margin: 0 auto 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B64F4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'%3E%3C/path%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'%3E%3C/polyline%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 26px !important;
}

/* Product name */
.product header span[id$="-name"],
.product header span {
  font-family: var(--zh-font) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
  display: block !important;
  text-align: center !important;
  letter-spacing: -0.02em;
  line-height: 1.3 !important;
}

/* Product description — CRITICAL: Reset WHMCS float:left */
.product .product-desc,
.product-desc {
  float: none !important;
  width: 100% !important;
  padding: 8px 24px !important;
  text-align: center !important;
  flex: 1 !important;
  font-size: 14px !important;
}

.product .product-desc p,
.product-desc p {
  font-size: 14px !important;
  color: var(--zh-gray-500) !important;
  text-align: center !important;
  margin-bottom: 12px !important;
}

/* Feature list in product */
.product .product-desc ul,
.product-desc ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

.product .product-desc ul li,
.product-desc ul li {
  padding: 6px 0 !important;
  color: var(--zh-gray-600) !important;
  font-size: 14px !important;
  border-bottom: 1px solid var(--zh-gray-100) !important;
  text-align: center !important;
}

.product .product-desc ul li:last-child {
  border-bottom: none !important;
}

.product .product-desc ul li strong,
.product .product-desc ul li b {
  color: var(--zh-gray-900) !important;
  font-weight: 700 !important;
}

/* Product footer — CRITICAL: Reset WHMCS float:right */
.product footer,
.product.clearfix > footer {
  float: none !important;
  width: 100% !important;
  padding: 16px 24px 28px !important;
  text-align: center !important;
  background: transparent !important;
  border-top: none !important;
  margin: 0 !important;
}

/* Price — Lagom: HUGE, centered, bold */
.product-pricing,
.product .product-pricing,
div[id$="-price"].product-pricing {
  margin-bottom: 16px !important;
  text-align: center !important;
}

.product-pricing span.price,
.product-pricing .price,
span.price {
  font-family: var(--zh-font) !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--zh-gray-900) !important;
  display: block !important;
  text-align: center !important;
  letter-spacing: -0.03em;
  line-height: 1.2 !important;
}

/* Billing cycle text below price */
.product-pricing br + br + span,
.product-pricing small,
.product-pricing .billing-cycle {
  font-size: 13px !important;
  color: var(--zh-gray-500) !important;
  font-weight: 400 !important;
}

/* Hide extra <br> tags in pricing */
.product-pricing br {
  display: none !important;
}

/* "por mês" text after price — style it  */
.product-pricing {
  line-height: 1.6 !important;
  font-size: 14px !important;
  color: var(--zh-gray-500) !important;
}

/* Order Now button — Lagom: full-width, primary blue, rounded */
.btn-order-now,
a.btn-order-now,
a.btn.btn-order-now,
a.btn.btn-success.btn-sm.btn-order-now {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: var(--zh-primary) !important;
  color: #fff !important;
  border: none !important;
  border-color: var(--zh-primary) !important;
  border-radius: var(--zh-radius) !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--zh-font) !important;
  box-shadow: 0 2px 8px rgba(var(--zh-primary-rgb),.25) !important;
  transition: all var(--zh-ease) !important;
  letter-spacing: -0.01em;
}

.btn-order-now:hover,
a.btn-order-now:hover,
a.btn.btn-order-now:hover {
  background: var(--zh-primary-hover) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(var(--zh-primary-rgb),.35) !important;
}

/* ==========================================================================
   § 13 — SIDEBARS (All pages — Store, Account, Services, Product Details)
   Consistent card-based sidebar with proper spacing throughout WHMCS.
   Lagom: Clean panel, proper padding, subtle bg, icon + text items
   ========================================================================== */
.cart-sidebar,
.cart-sidebar.sidebar {
  font-family: var(--zh-font) !important;
}

/* Hide default cart sidebar on ALL cart/store pages (Lagom-style full-width layout).
   Categories are accessible via main nav; sidebar just wastes horizontal space. */
#order-standard_cart > .row > .cart-sidebar,
#order-standard_cart .cart-sidebar.sidebar {
  display: none !important;
}

/* Sidebar panel — card-style container */
.panel-sidebar,
.card-sidebar,
.panel.card.card-sidebar,
.panel.card.card-sidebar.panel-sidebar {
  background: var(--zh-card-bg) !important;
  box-shadow: var(--zh-shadow-sm) !important;
  border: none !important;
  border-radius: var(--zh-radius) !important;
  overflow: hidden !important;
}

/* Sidebar panel heading */
.panel-sidebar > .panel-heading,
.card-sidebar > .card-header,
.panel-sidebar > .panel-heading.card-header {
  background: var(--zh-gray-50) !important;
  border-bottom: 1px solid var(--zh-gray-200) !important;
  padding: 14px 16px !important;
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;
}

.panel-sidebar > .panel-heading .panel-title,
.panel-sidebar .panel-heading h3,
.card-sidebar > .card-header h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

/* Chevron icons in sidebar headings */
.panel-sidebar .panel-minimise,
.card-sidebar .card-minimise {
  color: var(--zh-gray-400) !important;
  font-size: 12px !important;
  margin-left: auto !important;
}

/* Sidebar list group container */
.panel-sidebar .list-group,
.card-sidebar .list-group,
.panel-sidebar .collapsable-card-body.list-group {
  background: var(--zh-card-bg) !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
}

/* Sidebar list items — consistent 16px horizontal padding */
.panel-sidebar .list-group-item,
.card-sidebar .list-group-item,
.panel-sidebar .collapsable-card-body .list-group-item {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: var(--zh-radius) !important;
  padding: 10px 16px !important;
  margin: 0 6px !important;
  color: var(--zh-gray-700) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all .15s ease !important;
  box-shadow: none !important;
}

.panel-sidebar .list-group-item:hover,
.card-sidebar .list-group-item:hover {
  color: var(--zh-primary) !important;
  background: var(--zh-gray-50) !important;
}

.panel-sidebar .list-group-item.active,
.card-sidebar .list-group-item.active {
  background: var(--zh-primary-bg) !important;
  color: var(--zh-primary) !important;
  font-weight: 600 !important;
  border-radius: var(--zh-radius) !important;
  padding: 10px 16px !important;
  margin: 0 6px !important;
}

/* Sidebar icons */
.panel-sidebar .list-group-item i,
.card-sidebar .list-group-item i {
  color: var(--zh-primary) !important;
  margin-right: 10px !important;
  width: 18px !important;
  text-align: center !important;
  font-size: 14px !important;
}

/* Sidebar footer buttons — all should use brand blue */
.card-sidebar .card-footer .btn,
.panel-sidebar .panel-footer .btn,
.card-sidebar .card-footer .btn-success,
.card-sidebar .card-footer .btn-block {
  background: var(--zh-primary) !important;
  border-color: var(--zh-primary) !important;
  color: #fff !important;
  border-radius: var(--zh-radius) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
}
.card-sidebar .card-footer .btn:hover,
.panel-sidebar .panel-footer .btn:hover {
  background: var(--zh-primary-hover) !important;
  border-color: var(--zh-primary-hover) !important;
  transform: translateY(-1px) !important;
}

/* Sidebar card body */
.card-sidebar .card-body,
.panel-sidebar .panel-body {
  padding: 16px !important;
  font-size: 13px !important;
  color: var(--zh-gray-600) !important;
  line-height: 1.7 !important;
}

/* Sidebar card footer */
.card-sidebar .card-footer {
  border-top: 1px solid var(--zh-gray-200) !important;
  background: #fff !important;
  padding: 14px 16px !important;
}

/* Hide duplicate .sidebar-collapsed panels that appear below main sidebar */
.sidebar-collapsed {
  display: none !important;
}

/* ==========================================================================
   § 14 — TABLES (Lagom: uppercase headers, 58px rows, hover blue tint)
   ========================================================================== */
.table {
  font-family: var(--zh-font) !important;
  background: var(--zh-card-bg) !important;
  margin-bottom: 0 !important;
}

.table-responsive {
  border: none !important;
  border-radius: var(--zh-radius) !important;
  box-shadow: var(--zh-shadow-sm) !important;
  background: var(--zh-card-bg) !important;
  margin-bottom: 24px !important;
}

/* Table header */
.table > thead > tr > th,
.table thead th {
  background: var(--zh-gray-50) !important;
  color: var(--zh-gray-600) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--zh-gray-200) !important;
  border-top: none !important;
  white-space: nowrap;
  vertical-align: middle !important;
}

.table > thead > tr > th:first-child { padding-left: 24px !important; }
.table > thead > tr > th:last-child { padding-right: 24px !important; }

/* Table cells */
.table > tbody > tr > td,
.table > tbody > tr > th,
.table-list > tbody > tr > td {
  padding: 16px !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--zh-gray-100) !important;
  color: var(--zh-gray-900) !important;
  font-size: 14px !important;
  background: transparent !important;
  transition: background .15s ease !important;
}

.table > tbody > tr > td:first-child { padding-left: 24px !important; }
.table > tbody > tr > td:last-child { padding-right: 24px !important; }
.table > tbody > tr:first-child > td { border-top: none !important; }

/* Row hover */
.table > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > td,
.table-list > tbody > tr:hover > td {
  background: var(--zh-primary-bg) !important;
}

/* DataTables */
.dataTables_wrapper { font-family: var(--zh-font) !important; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size: 13px !important; color: var(--zh-gray-600) !important;
}
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--zh-gray-300) !important; border-radius: 4px !important;
  padding: 6px 12px !important; font-size: 13px !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--zh-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--zh-primary-rgb),.1) !important;
}
.dataTables_wrapper .dataTables_info { font-size: 13px !important; color: var(--zh-gray-500) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 6px 12px !important; border: 1px solid var(--zh-gray-300) !important;
  border-radius: 4px !important; font-size: 13px !important; margin: 0 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--zh-primary) !important; border-color: var(--zh-primary) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--zh-primary-bg) !important; color: var(--zh-primary) !important;
}

/* ==========================================================================
   § 15 — BUTTONS
   ========================================================================== */
.btn {
  font-family: var(--zh-font) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 10px 20px !important;
  border-radius: 4px !important;
  transition: all var(--zh-ease) !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em;
}

.btn:focus, .btn:active:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--zh-primary-rgb),.15) !important;
}

.btn-primary {
  background: var(--zh-primary) !important; border-color: var(--zh-primary) !important;
  color: #fff !important; box-shadow: 0 1px 3px rgba(var(--zh-primary-rgb),.2) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--zh-primary-hover) !important; border-color: var(--zh-primary-hover) !important;
  color: #fff !important; transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(var(--zh-primary-rgb),.3) !important;
}

.btn-default, .btn-secondary {
  background: transparent !important; border: 1px solid var(--zh-gray-300) !important;
  color: var(--zh-gray-900) !important;
}
.btn-default:hover, .btn-secondary:hover {
  background: var(--zh-gray-50) !important; border-color: var(--zh-gray-400) !important;
  transform: translateY(-1px) !important;
}

.btn-success {
  background: var(--zh-success) !important; border-color: var(--zh-success) !important; color: #fff !important;
}
.btn-success:hover { background: #259A3E !important; transform: translateY(-1px) !important; }

.btn-danger {
  background: var(--zh-danger) !important; border-color: var(--zh-danger) !important; color: #fff !important;
}
.btn-danger:hover { background: #B6202A !important; transform: translateY(-1px) !important; }

.btn-warning {
  background: var(--zh-warning) !important; border-color: var(--zh-warning) !important; color: #fff !important;
}
.btn-warning:hover { background: #E67A00 !important; transform: translateY(-1px) !important; }

.btn-info {
  background: var(--zh-primary) !important; border-color: var(--zh-primary) !important; color: #fff !important;
}

.btn-link {
  background: transparent !important; border: none !important; color: var(--zh-primary) !important;
  box-shadow: none !important; padding: 0 !important;
}
.btn-link:hover { color: var(--zh-primary-hover) !important; }

.btn-outline-primary {
  background: transparent !important; border: 1px solid var(--zh-primary) !important;
  color: var(--zh-primary) !important;
}
.btn-outline-primary:hover { background: var(--zh-primary) !important; color: #fff !important; }

.btn-lg { padding: 12px 28px !important; font-size: 16px !important; }
.btn-sm { padding: 6px 14px !important; font-size: 13px !important; }
.btn-xs { padding: 4px 10px !important; font-size: 12px !important; }
.btn-block { display: block !important; width: 100% !important; }

.btn.disabled, .btn:disabled { opacity: .5 !important; pointer-events: none; }

/* ==========================================================================
   § 16 — FORMS / INPUTS
   ========================================================================== */
.form-control {
  font-family: var(--zh-font) !important;
  height: 44px !important; padding: 10px 14px !important;
  border: 1px solid var(--zh-gray-300) !important; border-radius: 4px !important;
  background: var(--zh-card-bg) !important; color: var(--zh-gray-900) !important;
  font-size: 14px !important; box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.form-control:hover { border-color: var(--zh-gray-400) !important; }
.form-control:focus {
  border-color: var(--zh-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--zh-primary-rgb),.1) !important;
}
.form-control::placeholder { color: var(--zh-gray-500) !important; }
.form-control:disabled, .form-control[readonly] {
  background: var(--zh-gray-50) !important; opacity: .8 !important;
}

select.form-control, .custom-select {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23979BA4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important;
  background-size: 14px !important; padding-right: 36px !important;
}

textarea.form-control { height: auto !important; min-height: 100px !important; }

.form-group { margin-bottom: 16px !important; }
.form-group label, .control-label, label {
  font-family: var(--zh-font) !important; font-size: 14px !important;
  font-weight: 500 !important; color: var(--zh-gray-700) !important; margin-bottom: 6px !important;
}

.help-block, .form-text { font-size: 12px !important; color: var(--zh-gray-500) !important; }

.input-group-addon, .input-group-text {
  background: var(--zh-gray-50) !important; border: 1px solid var(--zh-gray-300) !important;
  color: var(--zh-gray-600) !important; border-radius: 4px !important;
}

/* Prepend-icon fields (WHMCS standard_cart checkout & promo code) */
.prepend-icon { position: relative !important; display: block !important; }
.prepend-icon .field-icon {
  position: absolute !important; left: 0 !important; top: 0 !important;
  width: 44px !important; height: 44px !important; line-height: 44px !important;
  text-align: center !important; z-index: 4 !important;
  pointer-events: none !important; color: var(--zh-gray-400) !important;
  margin: 0 !important; padding: 0 !important; font-size: 14px !important;
  font-weight: 400 !important;
}
.prepend-icon .field-icon i {
  font-size: 15px !important; line-height: 44px !important;
  color: var(--zh-gray-400) !important; width: auto !important;
}
.prepend-icon .form-control,
.prepend-icon input.field,
.prepend-icon select.field,
.prepend-icon select.form-control,
.cart-body .prepend-icon select.form-control,
.cart-body .prepend-icon .form-control {
  padding-left: 40px !important;
}

/* Validation */
.has-error .form-control, .is-invalid { border-color: var(--zh-danger) !important; }
.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(217,38,50,.1) !important; }
.has-error .control-label, .has-error .help-block { color: var(--zh-danger) !important; }

/* ==========================================================================
   § 17 — BADGES / LABELS (Lagom: tinted bg + dark text, uppercase, pill)
   ========================================================================== */
.badge, .label {
  font-family: var(--zh-font) !important;
  font-size: 11px !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: .04em !important;
  padding: 4px 10px !important; border-radius: 50px !important;
  display: inline-flex !important; align-items: center !important;
}

.badge-default, .label-default { background: var(--zh-gray-200) !important; color: var(--zh-gray-600) !important; }
.badge-primary, .label-primary { background: var(--zh-primary-bg) !important; color: var(--zh-primary-dark) !important; }
.badge-success, .label-success { background: var(--zh-success-bg) !important; color: var(--zh-success) !important; }
.badge-warning, .label-warning { background: var(--zh-warning-bg) !important; color: var(--zh-warning) !important; }
.badge-danger, .label-danger { background: var(--zh-danger-bg) !important; color: var(--zh-danger) !important; }
.badge-info, .label-info { background: var(--zh-primary-bg) !important; color: var(--zh-primary) !important; }

/* Status labels */
.label-active,.status-active,.label-paid,.status-paid,
span.label.paid,span.badge.paid,span.label.active,span.badge.active {
  background: var(--zh-success-bg) !important; color: var(--zh-success) !important;
}
.label-unpaid,.status-unpaid,.label-overdue,.status-overdue,
span.label.unpaid,span.badge.unpaid,span.label.overdue,span.badge.overdue {
  background: var(--zh-danger-bg) !important; color: var(--zh-danger) !important;
}
.label-pending,.status-pending,span.label.pending,span.badge.pending {
  background: var(--zh-warning-bg) !important; color: var(--zh-warning) !important;
}
.label-cancelled,.status-cancelled,.label-terminated,.status-terminated,
span.label.cancelled,span.badge.cancelled {
  background: var(--zh-gray-200) !important; color: var(--zh-gray-600) !important;
}
.label-suspended,.status-suspended,span.label.suspended,span.badge.suspended {
  background: #FAE1E2 !important; color: #B6202A !important;
}

/* ==========================================================================
   § 18 — ALERTS (Lagom: left border 4px + tinted bg)
   ========================================================================== */
.alert {
  font-family: var(--zh-font) !important;
  border: none !important; border-left: 4px solid transparent !important;
  border-radius: var(--zh-radius) !important;
  padding: 14px 24px !important; font-size: 14px !important; margin-bottom: 24px !important;
}
.alert a { font-weight: 600 !important; }
.alert-success { background: #E7F8EB !important; border-left-color: var(--zh-success) !important; color: #1E7A34 !important; }
.alert-info { background: #E8F1FE !important; border-left-color: var(--zh-primary) !important; color: var(--zh-primary-dark) !important; }
.alert-warning { background: #FFF8EB !important; border-left-color: var(--zh-warning) !important; color: #8A5600 !important; }
.alert-danger { background: var(--zh-danger-bg) !important; border-left-color: var(--zh-danger) !important; color: #B6202A !important; }

/* Client alerts bar */
.client-alerts { margin-bottom: 0 !important; }

/* ==========================================================================
   § 19 — SIDEBAR / LIST GROUPS (General — Account, Services, Filters)
   These are the non-store sidebars: "Conta" (Meus Dados, Gerenciamento...),
   Services filter (Ativo, Pendente...), Product Detail sidebar (Visão geral, Ações)
   ========================================================================== */
.sidebar, #sidebar {
  background: var(--zh-card-bg) !important;
  border: none !important; border-radius: var(--zh-radius) !important;
  box-shadow: var(--zh-shadow-sm) !important;
}

.list-group { margin-bottom: 0 !important; }

/* General list items inside panels/cards — consistent 16px padding */
.list-group-item {
  background: var(--zh-card-bg) !important;
  border: none !important; border-bottom: 1px solid var(--zh-gray-100) !important;
  padding: 12px 20px !important; color: var(--zh-gray-700) !important;
  font-size: 14px !important; transition: all .15s ease !important;
}
.list-group-item:last-child { border-bottom: none !important; }
.list-group-item:hover { background: var(--zh-primary-bg) !important; color: var(--zh-primary) !important; }
.list-group-item.active {
  background: var(--zh-primary-bg) !important; color: var(--zh-primary) !important;
  font-weight: 600 !important; border-left: 3px solid var(--zh-primary) !important;
  padding-left: 17px !important;
}

/* List items with icons — ensure icon spacing */
.list-group-item i,
.list-group-item .fas,
.list-group-item .far,
.list-group-item .fal,
.list-group-item .fa {
  margin-right: 10px !important;
  width: 18px !important;
  text-align: center !important;
  color: var(--zh-gray-400) !important;
  font-size: 14px !important;
}
.list-group-item:hover i,
.list-group-item.active i {
  color: var(--zh-primary) !important;
}

/* Panel/Card body + list-group combo — remove double padding */
.panel .list-group,
.card .list-group {
  margin: 0 !important;
}

/* When list-group is direct child of panel (no panel-body wrapper) */
.panel > .list-group .list-group-item:first-child,
.card > .list-group .list-group-item:first-child {
  border-top: none !important;
}

/* Service detail sidebar — headings like "Visão geral", "Ações" */
.panel .panel-heading + .list-group .list-group-item:first-child {
  border-top: none !important;
}

/* ==========================================================================
   § 20 — MODALS (Lagom: backdrop blur, scale animation)
   ========================================================================== */
.modal-backdrop, .modal-backdrop.in, .modal-backdrop.show {
  background: rgba(23,25,28,.5) !important;
  backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
}
.modal.in .modal-dialog, .modal.show .modal-dialog { animation: zhModalIn .3s ease !important; }
.modal-content {
  background: var(--zh-card-bg) !important; border: none !important;
  border-radius: var(--zh-radius-lg) !important; box-shadow: var(--zh-shadow-xl) !important;
}
.modal-header {
  border-bottom: 1px solid var(--zh-gray-200) !important; padding: 20px 24px !important;
}
.modal-header .modal-title { font-size: 18px !important; font-weight: 600 !important; }
.modal-header .close, .modal-header .btn-close {
  background: transparent !important; border: none !important;
  color: var(--zh-gray-500) !important; opacity: 1 !important;
}
.modal-body { padding: 24px !important; font-size: 14px !important; }
.modal-footer { border-top: 1px solid var(--zh-gray-200) !important; padding: 16px 24px !important; }

/* ==========================================================================
   § 21 — DROPDOWNS
   ========================================================================== */
.dropdown-menu {
  background: var(--zh-card-bg) !important;
  border: 1px solid var(--zh-gray-200) !important;
  border-radius: var(--zh-radius) !important;
  box-shadow: var(--zh-shadow-lg) !important;
  padding: 6px 0 !important; min-width: 200px !important;
  animation: zhDropIn .18s ease !important;
}
.dropdown-menu > li > a, .dropdown-item {
  font-size: 14px !important; color: var(--zh-gray-700) !important;
  padding: 8px 16px !important; transition: all .1s ease !important;
}
.dropdown-menu > li > a:hover, .dropdown-item:hover {
  background: var(--zh-primary-bg) !important; color: var(--zh-primary) !important;
}
.dropdown-divider, .dropdown-menu .divider { border-top-color: var(--zh-gray-200) !important; }

/* WHMCS specific dropdown items */
li.dropdown-item { padding: 0 !important; list-style: none !important; }
a.dropdown-item.px-2.py-0 {
  padding: 8px 16px !important;
}

/* ==========================================================================
   § 22 — TABS / NAV
   ========================================================================== */
.nav-tabs {
  border-bottom: 1px solid var(--zh-gray-200) !important; margin-bottom: 24px !important;
}
.nav-tabs > li > a, .nav-tabs .nav-link {
  font-family: var(--zh-font) !important; font-size: 14px !important;
  font-weight: 500 !important; color: var(--zh-gray-600) !important;
  padding: 12px 20px !important; border: none !important;
  border-bottom: 2px solid transparent !important; background: transparent !important;
  border-radius: 0 !important; margin-bottom: -1px !important;
}
.nav-tabs > li > a:hover, .nav-tabs .nav-link:hover {
  color: var(--zh-primary) !important; border-bottom-color: var(--zh-primary-lighter) !important;
}
.nav-tabs > li.active > a, .nav-tabs .nav-link.active {
  color: var(--zh-primary) !important; border-bottom: 2px solid var(--zh-primary) !important;
  font-weight: 600 !important; background: transparent !important;
}

/* ==========================================================================
   § 23 — PAGINATION
   ========================================================================== */
.pagination { gap: 4px !important; }
.pagination > li > a, .pagination > li > span, .page-link {
  font-family: var(--zh-font) !important; font-size: 13px !important;
  color: var(--zh-gray-700) !important; background: var(--zh-card-bg) !important;
  border: 1px solid var(--zh-gray-300) !important; padding: 8px 14px !important; border-radius: 4px !important;
}
.pagination > li > a:hover, .page-link:hover {
  background: var(--zh-primary-bg) !important; color: var(--zh-primary) !important;
}
.pagination > .active > a, .page-item.active .page-link {
  background: var(--zh-primary) !important; border-color: var(--zh-primary) !important; color: #fff !important;
}

/* ==========================================================================
   § 24 — LOGIN / REGISTER
   WHMCS structure: form.login-form > .card.mw-540 > .card-body.px-sm-5.py-5
   Button inside: .float-left > button#login.btn.btn-primary
   ========================================================================== */

/* Login form card — centered, refined */
form.login-form .card,
form.login-form .card.mw-540 {
  max-width: 460px !important;
  border: none !important;
  border-radius: var(--zh-radius-lg) !important;
  box-shadow: var(--zh-shadow) !important;
  margin: 24px auto !important;
}

form.login-form .card-body,
form.login-form .card-body.px-sm-5,
form.login-form .card-body.py-5 {
  padding: 40px 36px 36px !important;
}

/* Login heading */
form.login-form .h3,
form.login-form h6.h3 {
  font-size: 26px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
  letter-spacing: -0.03em;
}

/* Login inputs — slightly taller */
form.login-form .form-control {
  height: 48px !important;
  font-size: 15px !important;
}

form.login-form .input-group-text {
  height: 48px !important;
  min-width: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* FIX: .float-left wrapper — remove float, make full-width for button */
form.login-form .float-left {
  float: none !important;
  width: 100% !important;
  display: block !important;
  margin-top: 8px !important;
}

/* FIX: Login button — override WHMCS default 48px padding-top bug */
form.login-form .btn-primary,
form.login-form button[type="submit"],
form.login-form button#login,
button#login.btn.btn-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 48px !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: var(--zh-radius) !important;
  letter-spacing: -0.01em;
}

/* Remember checkbox — align properly */
form.login-form .text-right {
  float: none !important;
  text-align: right !important;
  margin-top: 12px !important;
  clear: both !important;
}

form.login-form .text-right label {
  font-size: 13px !important;
  color: var(--zh-gray-600) !important;
  cursor: pointer !important;
}

/* Forgot password link */
form.login-form a[href*="password/reset"] {
  font-size: 13px !important;
  color: var(--zh-primary) !important;
  font-weight: 500 !important;
}

/* "Criar conta" link at bottom */
form.login-form .card-footer,
form.login-form .card-body + div {
  text-align: center !important;
  padding: 16px 36px !important;
  font-size: 14px !important;
}

/* Password reveal button */
form.login-form .btn-reveal-pw,
form.login-form .btn-default.btn-reveal-pw {
  background: transparent !important;
  border: 1px solid var(--zh-gray-300) !important;
  border-left: none !important;
  height: 48px !important;
  padding: 10px 14px !important;
  color: var(--zh-gray-500) !important;
}

/* Register form — same treatment */
form#frmRegister .btn-primary,
.register-form .btn-primary,
#frmRegister .btn-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 48px !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* Legacy login-container fallback */
.login-container, .login-container #login {
  display: flex !important; justify-content: center !important;
}
.login-container .panel, .login-container .card {
  max-width: 460px !important; width: 100% !important;
  border: none !important; border-radius: var(--zh-radius-lg) !important;
  box-shadow: var(--zh-shadow) !important;
}

/* ==========================================================================
   § 25 — INVOICES (Lagom: clean white card, blue CTA, tinted status)
   ========================================================================== */
.invoice-container, #invoice-container,
.container-fluid.invoice-container {
  background: var(--zh-card-bg) !important;
  border: none !important;
  border-radius: var(--zh-radius-lg) !important;
  box-shadow: var(--zh-shadow) !important;
  padding: 40px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}
.invoice-header { border-bottom: 1px solid var(--zh-gray-200) !important; padding-bottom: 24px !important; margin-bottom: 24px !important; }
.invoice-header h2 { font-size: 24px !important; font-weight: 800 !important; color: var(--zh-gray-900) !important; }

/* Invoice status badge — the spans (unpaid/paid/etc) are children of .invoice-status */
.invoice-status {
  display: inline-block !important;
}
.invoice-status span {
  font-family: var(--zh-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 6px 16px !important;
  border-radius: 50px !important;
  display: inline-block !important;
}
.invoice-status span.unpaid,
.invoice-status span.draft,
.invoice-status span.collections {
  background: var(--zh-danger-bg) !important;
  color: var(--zh-danger) !important;
}
.invoice-status span.paid {
  background: var(--zh-success-bg) !important;
  color: var(--zh-success) !important;
}
.invoice-status span.refunded,
.invoice-status span.cancelled {
  background: var(--zh-gray-100) !important;
  color: var(--zh-gray-600) !important;
}

/* Invoice "Pagar Agora" button — force brand blue */
.invoice-container .btn-primary,
.container-fluid.invoice-container .btn-primary,
#invoice-container .btn-primary {
  background: var(--zh-primary) !important;
  border-color: var(--zh-primary) !important;
  color: #fff !important;
  border-radius: var(--zh-radius) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  box-shadow: 0 2px 8px rgba(var(--zh-primary-rgb),.25) !important;
  transition: all 0.2s ease !important;
}
.invoice-container .btn-primary:hover,
.container-fluid.invoice-container .btn-primary:hover {
  background: var(--zh-primary-hover) !important;
  border-color: var(--zh-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(var(--zh-primary-rgb),.35) !important;
}

/* Invoice table refinements */
.invoice-container table,
.container-fluid.invoice-container table {
  font-family: var(--zh-font) !important;
  font-size: 14px !important;
  color: var(--zh-gray-700) !important;
  width: 100% !important;
}
.invoice-container table th {
  font-weight: 600 !important;
  color: var(--zh-gray-900) !important;
  border-bottom: 2px solid var(--zh-gray-200) !important;
  padding: 10px 12px !important;
}
.invoice-container table td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--zh-gray-100) !important;
}

/* Invoice info sections */
.invoice-container .invoice-col,
.invoice-container .col-sm-6,
.invoice-container .col-md-6 {
  font-family: var(--zh-font) !important;
  font-size: 14px !important;
  color: var(--zh-gray-600) !important;
}
.invoice-container strong,
.invoice-container b {
  color: var(--zh-gray-900) !important;
  font-weight: 600 !important;
}

/* Payment method select */
.invoice-container select.form-control {
  font-family: var(--zh-font) !important;
  border: 1px solid var(--zh-gray-300) !important;
  border-radius: var(--zh-radius) !important;
  height: 40px !important;
  font-size: 13px !important;
}

/* Due date label */
.invoice-container .small,
.invoice-container small,
.invoice-container .small-text {
  color: var(--zh-gray-500) !important;
  font-size: 13px !important;
  font-family: var(--zh-font) !important;
}

/* Standalone invoice page body (viewinvoice.tpl is its own HTML doc) */
body:has(.invoice-container) {
  background: var(--zh-body-bg) !important;
  font-family: var(--zh-font) !important;
  padding: 32px 16px !important;
}

/* Invoice h3 (pagetitle, e.g. "Fatura #12345") */
.invoice-container h3:not(.card-title):not(.card-subtitle) {
  font-family: var(--zh-font) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-600) !important;
}

/* Credit apply card refinement */
.invoice-container .card .card-header.bg-success {
  background: var(--zh-success) !important;
  border-radius: var(--zh-radius) var(--zh-radius) 0 0 !important;
}

/* Invoice line items card */
.invoice-container .card.bg-default,
.invoice-container .card {
  border: none !important;
  border-radius: var(--zh-radius) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  overflow: hidden !important;
}
.invoice-container .card .card-header {
  background: var(--zh-gray-50) !important;
  border-bottom: 1px solid var(--zh-gray-200) !important;
  padding: 16px 20px !important;
}
.invoice-container .card .card-header .card-title {
  font-family: var(--zh-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
}

/* Total row emphasis */
.invoice-container .total-row {
  background: var(--zh-gray-50) !important;
  font-weight: 600 !important;
}

/* Transactions container */
.invoice-container .transactions-container {
  margin-top: 24px !important;
}

/* Print & Download buttons */
.invoice-container .btn-default,
.invoice-container .btn-group .btn-default {
  font-family: var(--zh-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1px solid var(--zh-gray-300) !important;
  border-radius: var(--zh-radius) !important;
  color: var(--zh-gray-700) !important;
  background: var(--zh-card-bg) !important;
  padding: 6px 14px !important;
  transition: all 0.2s ease !important;
}
.invoice-container .btn-default:hover {
  background: var(--zh-gray-50) !important;
  border-color: var(--zh-gray-400) !important;
  color: var(--zh-gray-900) !important;
}

/* Back to client area link */
body:has(.invoice-container) > .text-center a {
  font-family: var(--zh-font) !important;
  color: var(--zh-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
body:has(.invoice-container) > .text-center a:hover {
  text-decoration: underline !important;
}

/* Payment button container alignment */
.invoice-container .payment-btn-container {
  margin-top: 16px !important;
}

/* Invoice address formatting */
.invoice-container address {
  font-family: var(--zh-font) !important;
  line-height: 1.7 !important;
  color: var(--zh-gray-600) !important;
}

/* ==========================================================================
   § 26 — TICKETS
   ========================================================================== */
.ticket-reply, .ticket-message {
  background: var(--zh-card-bg) !important; border: none !important;
  border-radius: var(--zh-radius) !important; box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  padding: 24px !important; margin-bottom: 16px !important;
}
.ticket-reply.staff-reply, .ticket-reply.operator-reply {
  border-left: 4px solid var(--zh-primary) !important; background: var(--zh-primary-bg) !important;
}
.ticket-reply.client-reply { border-left: 4px solid var(--zh-gray-300) !important; }

/* ==========================================================================
   § 27 — KNOWLEDGE BASE
   ========================================================================== */
.kb-article-list .article, .kb-category-list .category {
  background: var(--zh-card-bg) !important; border: none !important;
  border-radius: var(--zh-radius) !important; box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  padding: 24px !important; margin-bottom: 16px !important;
  transition: all var(--zh-ease) !important;
}
.kb-article-list .article:hover, .kb-category-list .category:hover {
  box-shadow: var(--zh-shadow-sm) !important; transform: translateY(-2px) !important;
}

/* ==========================================================================
   § 28 — DOMAIN CHECKER
   ========================================================================== */
.domain-checker-container, .domain-checker-bg {
  background: linear-gradient(135deg, var(--zh-primary) 0%, #0952D0 50%, #083FB2 100%) !important;
  border-radius: var(--zh-radius-lg) !important;
  padding: 48px 32px !important; text-align: center !important;
  position: relative; overflow: hidden;
}
.domain-checker-container::before {
  content: '' !important; position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0) !important;
  background-size: 24px 24px !important; pointer-events: none;
}
.domain-checker-container h2 { color: #fff !important; font-size: 28px !important; position: relative; }
.domain-checker-container p { color: rgba(255,255,255,.7) !important; position: relative; }
.domain-checker-container .input-group { max-width: 600px !important; margin: 0 auto !important; position: relative; }
.domain-checker-container .form-control {
  height: 56px !important; border: 2px solid rgba(255,255,255,.2) !important;
  background: rgba(255,255,255,.12) !important; color: #fff !important;
  font-size: 16px !important; backdrop-filter: blur(10px) !important;
}
.domain-checker-container .form-control::placeholder { color: rgba(255,255,255,.5) !important; }
.domain-checker-container .form-control:focus {
  border-color: rgba(255,255,255,.4) !important; background: rgba(255,255,255,.18) !important;
}
.domain-checker-container .btn {
  height: 56px !important; background: #fff !important; color: var(--zh-primary) !important;
  border: 2px solid #fff !important; font-weight: 700 !important; font-size: 15px !important;
  padding: 14px 28px !important;
}

/* Domain results */
.spotlight-tlds .tld-row {
  background: var(--zh-card-bg) !important; border: none !important;
  border-radius: var(--zh-radius) !important; box-shadow: var(--zh-shadow-sm) !important;
  padding: 16px 24px !important; margin-bottom: 8px !important;
  transition: all var(--zh-ease) !important;
}
.spotlight-tlds .tld-row:hover { box-shadow: var(--zh-shadow) !important; transform: translateY(-2px) !important; }

/* ==========================================================================
   § 29 — PROGRESS BARS
   ========================================================================== */
.progress {
  background: var(--zh-gray-200) !important; border-radius: 50px !important;
  height: 8px !important; box-shadow: none !important;
}
.progress-bar { background: var(--zh-primary) !important; border-radius: 50px !important; }
.progress-bar-success { background: var(--zh-success) !important; }
.progress-bar-warning { background: var(--zh-warning) !important; }
.progress-bar-danger { background: var(--zh-danger) !important; }

/* ==========================================================================
   § 29b — CART / CONFIGURE / ORDER PAGES
   Complete cart flow: product listing → domain → configure → review → checkout
   Lagom-inspired: clean order summary, light table headers, blue CTA
   ========================================================================== */

/* --- Order Summary Panel (right sidebar on cart/configure pages) --- */
/* WHMCS: .order-summary > h2.font-size-30 + .summary-container */
.order-summary {
  background: var(--zh-card-bg) !important;
  border: none !important;
  border-radius: var(--zh-radius-lg) !important;
  box-shadow: var(--zh-shadow) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Order summary heading — clean Lagom style */
.order-summary > h2,
.order-summary > h2.font-size-30,
.order-summary > .h2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
  background: var(--zh-gray-50) !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--zh-gray-200) !important;
  letter-spacing: -0.01em;
  text-align: left !important;
}

/* Summary container (subtotals, totals) */
.order-summary .summary-container {
  background: var(--zh-card-bg) !important;
  padding: 20px !important;
}

/* Subtotal / recurring rows */
.order-summary .subtotal,
.order-summary .recurring-totals {
  padding: 8px 0 !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid var(--zh-gray-100) !important;
  font-size: 14px !important;
  color: var(--zh-gray-600) !important;
}

.order-summary .subtotal .pull-right,
.order-summary .subtotal .float-right,
.order-summary .recurring-totals .pull-right,
.order-summary .recurring-totals .float-right {
  font-weight: 600 !important;
  color: var(--zh-gray-900) !important;
}

/* Total due today — prominent */
.order-summary .total-due-today {
  padding: 16px 0 12px !important;
  margin-top: 8px !important;
  border-top: 2px solid var(--zh-gray-200) !important;
  border-bottom: none !important;
}

.order-summary .total-due-today .amt,
.order-summary .total-due-today .pull-right,
.order-summary .total-due-today .float-right {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--zh-gray-900) !important;
  letter-spacing: -0.03em;
}

.order-summary .total-due-today small,
.order-summary .total-due-today .payment-today-label {
  font-size: 12px !important;
  color: var(--zh-gray-500) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

/* Checkout / Finalizar button — PRIMARY BLUE, full-width */
.order-summary .btn-checkout,
.btn-checkout,
a.btn.btn-checkout,
.order-summary .btn-success.btn-checkout {
  background: var(--zh-primary) !important;
  border-color: var(--zh-primary) !important;
  color: #fff !important;
  border-radius: var(--zh-radius) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 14px 24px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 8px rgba(var(--zh-primary-rgb),.25) !important;
  transition: all var(--zh-ease) !important;
  margin-top: 16px !important;
}

.order-summary .btn-checkout:hover,
.btn-checkout:hover {
  background: var(--zh-primary-hover) !important;
  border-color: var(--zh-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(var(--zh-primary-rgb),.35) !important;
}

/* "Continuar Comprando" link */
.order-summary .text-right a:not(.btn),
.order-summary a.continue-shopping {
  font-size: 13px !important;
  color: var(--zh-primary) !important;
  font-weight: 500 !important;
  display: inline-block !important;
  margin-top: 12px !important;
}

/* Express checkout buttons area */
.order-summary .express-checkout-buttons {
  margin-top: 8px !important;
}

/* --- Cart Review Items Header (dark navy → light gray) --- */
/* WHMCS: div.view-cart-items-header */
.view-cart-items-header {
  background: var(--zh-gray-50) !important;
  color: var(--zh-gray-600) !important;
  border: none !important;
  border-radius: var(--zh-radius) var(--zh-radius) 0 0 !important;
  padding: 14px 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.view-cart-items-header span,
.view-cart-items-header div {
  color: var(--zh-gray-600) !important;
}

/* Cart item rows */
.view-cart-items .item,
.view-cart-items .cart-item,
.item-container {
  background: var(--zh-card-bg) !important;
  border-bottom: 1px solid var(--zh-gray-100) !important;
  padding: 16px 20px !important;
  transition: background .15s ease !important;
}

.view-cart-items .item:hover,
.item-container:hover {
  background: var(--zh-primary-bg) !important;
}

/* --- Cart Configure Page --- */
/* Configure heading */
.cart-body .header-lined,
#order-standard_cart .header-lined {
  padding: 0 0 24px !important;
  margin-bottom: 24px !important;
}

/* Product info card on configure page */
#frmConfigureProduct,
.cart-body form {
  font-family: var(--zh-font) !important;
}

/* Form groups in cart */
#order-standard_cart .form-group,
#frmConfigureProduct .form-group,
.cart-body .form-group {
  margin-bottom: 20px !important;
}

/* Billing cycle dropdown enhancement */
#frmConfigureProduct select.form-control,
.cart-body select.form-control,
#inputBillingcycle {
  height: 48px !important;
  font-size: 15px !important;
  padding: 10px 16px !important;
  border: 1px solid var(--zh-gray-300) !important;
  border-radius: var(--zh-radius) !important;
  background: var(--zh-card-bg) !important;
}

/* Cart body buttons */
#order-standard_cart .btn-primary,
.cart-body .btn-primary {
  min-width: 100px !important;
}

/* Domain input area on configure */
.domain-input-group,
.input-domain-row {
  margin-bottom: 20px !important;
}

/* "USO" button in domain form */
.domain-input-group .btn,
.input-domain-row .btn {
  height: 44px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* --- Promo Code Section --- */
#inputPromotionCode,
input[name="promocode"] {
  height: 44px !important;
  border: 1px solid var(--zh-gray-300) !important;
  border-radius: var(--zh-radius) !important;
}

/* Promo validation button */
.promo-code .btn,
#btnApplyPromo {
  height: 44px !important;
}

/* --- Collapsed sidebar panels (hidden — we use main sidebar) --- */
.sidebar-collapsed {
  display: none !important;
}

/* --- Order Summary on Configure Page (panel-primary variant) --- */
#order-standard_cart .panel-primary,
.order-summary-panel,
.cart-body .panel-primary {
  border: none !important;
  border-radius: var(--zh-radius-lg) !important;
  box-shadow: var(--zh-shadow) !important;
  overflow: hidden !important;
}

#order-standard_cart .panel-primary > .panel-heading,
.cart-body .panel-primary > .panel-heading {
  background: var(--zh-gray-50) !important;
  border-bottom: 1px solid var(--zh-gray-200) !important;
  color: var(--zh-gray-900) !important;
}

#order-standard_cart .panel-primary > .panel-heading .panel-title,
.cart-body .panel-primary > .panel-heading .panel-title {
  color: var(--zh-gray-900) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* --- Cart info alerts --- */
.cart-body .alert,
#order-standard_cart .alert {
  border-radius: var(--zh-radius) !important;
  padding: 16px 20px !important;
  font-size: 14px !important;
}

/* --- "Continuar" button (green → primary blue) on configure pages --- */
#order-standard_cart .btn-success:not(.btn-order-now),
.cart-body .btn-success:not(.btn-order-now),
a.btn.btn-success[href*="cart.php"] {
  background: var(--zh-primary) !important;
  border-color: var(--zh-primary) !important;
  color: #fff !important;
}

#order-standard_cart .btn-success:not(.btn-order-now):hover,
.cart-body .btn-success:not(.btn-order-now):hover {
  background: var(--zh-primary-hover) !important;
  border-color: var(--zh-primary-hover) !important;
}

/* --- Secondary cart sidebar column --- */
.secondary-cart-sidebar {
  font-family: var(--zh-font) !important;
}

/* --- Domain chooser page --- */
/* Domain option tabs/checkboxes */
.domain-checker-result-text {
  font-size: 15px !important;
  color: var(--zh-gray-600) !important;
}

/* Domain selection checkmark icon */
.domain-selection .active-icon {
  color: var(--zh-primary) !important;
}

/* ==========================================================================
   § 29e — DOMAIN CHOOSER PAGE (ZenHost redesign)
   Redesigned for clarity: hero section, card-based form, help section.
   Optimized for Brazilian users (com.br default, Portuguese UX copy).
   ========================================================================== */

/* ── Hero Section ── */
.zh-domain-hero {
  text-align: center !important;
  padding: 48px 24px 32px !important;
  margin-bottom: 0 !important;
}

.zh-domain-hero-icon {
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 20px !important;
  background: linear-gradient(135deg, var(--zh-primary-bg) 0%, rgba(var(--zh-primary-rgb), 0.12) 100%) !important;
  border-radius: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--zh-primary) !important;
  animation: zh-domain-float 3s ease-in-out infinite;
}

@keyframes zh-domain-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.zh-domain-hero-title {
  font-family: var(--zh-font) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--zh-gray-900) !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 10px !important;
}

.zh-domain-hero-subtitle {
  font-family: var(--zh-font) !important;
  font-size: 16px !important;
  color: var(--zh-gray-500) !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  line-height: 1.6 !important;
}

.zh-domain-hero-subtitle strong {
  color: var(--zh-primary) !important;
  font-weight: 700 !important;
  background: var(--zh-primary-bg) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
}

/* ── Domain Form Card ── */
.zh-domain-card {
  background: var(--zh-card-bg) !important;
  border-radius: var(--zh-radius-lg) !important;
  box-shadow: var(--zh-shadow-base) !important;
  padding: 32px !important;
  margin: 0 auto 32px !important;
  max-width: 820px !important;
}

/* ── Domain Option (radio card) ── */
.zh-domain-option {
  border: 2px solid var(--zh-gray-100) !important;
  border-radius: var(--zh-radius) !important;
  margin-bottom: 12px !important;
  transition: all var(--zh-ease) !important;
  overflow: hidden !important;
  background: var(--zh-card-bg) !important;
}

.zh-domain-option:hover {
  border-color: rgba(var(--zh-primary-rgb), 0.3) !important;
}

.zh-domain-option:has(input[type="radio"]:checked) {
  border-color: var(--zh-primary) !important;
  background: var(--zh-primary-bg) !important;
}

/* Option label row */
.zh-domain-option-label {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-weight: normal !important;
  width: 100% !important;
}

.zh-domain-option-label input[type="radio"] {
  display: none !important;
}

/* Custom radio indicator */
.zh-domain-option-radio {
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 22px !important;
  border: 2px solid var(--zh-gray-300) !important;
  border-radius: 50% !important;
  position: relative !important;
  transition: all var(--zh-ease) !important;
}

.zh-domain-option-radio::after {
  content: '' !important;
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--zh-primary) !important;
  transform: scale(0) !important;
  transition: transform var(--zh-ease) !important;
}

input[type="radio"]:checked ~ .zh-domain-option-radio,
.iradio_square-blue.checked ~ .zh-domain-option-radio {
  border-color: var(--zh-primary) !important;
}

input[type="radio"]:checked ~ .zh-domain-option-radio::after,
.iradio_square-blue.checked ~ .zh-domain-option-radio::after {
  transform: scale(1) !important;
}

/* Option text content */
.zh-domain-option-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.zh-domain-option-title {
  font-family: var(--zh-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
}

.zh-domain-option-desc {
  font-family: var(--zh-font) !important;
  font-size: 13px !important;
  color: var(--zh-gray-500) !important;
}

/* ── Domain Input Area ── */
.zh-domain-input-area {
  padding: 0 20px 20px !important;
  margin: 0 !important;
}

.zh-domain-input-row {
  display: flex !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.zh-domain-input-field {
  flex: 1 !important;
  min-width: 0 !important;
}

.zh-domain-tld-field {
  flex: 0 0 120px !important;
}

.zh-domain-btn-field {
  flex: 0 0 140px !important;
}

/* Style the domain inputs */
.zh-domain-input-area .form-control,
.zh-domain-input-area .input-group-text {
  height: 48px !important;
  font-size: 15px !important;
  font-family: var(--zh-font) !important;
}

.zh-domain-input-area .input-group-text {
  background: var(--zh-gray-50) !important;
  border-color: var(--zh-gray-200) !important;
  color: var(--zh-gray-500) !important;
  font-weight: 500 !important;
  padding: 0 14px !important;
}

.zh-domain-input-area .form-control {
  border-color: var(--zh-gray-200) !important;
  border-radius: 6px !important;
}

.zh-domain-input-area .form-control:focus {
  border-color: var(--zh-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--zh-primary-rgb), 0.12) !important;
}

.zh-domain-input-area .btn-primary {
  height: 48px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--zh-font) !important;
  border-radius: 8px !important;
  background: var(--zh-primary) !important;
  border-color: var(--zh-primary) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: all var(--zh-ease) !important;
}

.zh-domain-input-area .btn-primary:hover {
  background: var(--zh-primary-hover) !important;
  border-color: var(--zh-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(var(--zh-primary-rgb), 0.3) !important;
}

.zh-domain-input-area .btn-primary i {
  margin-right: 4px !important;
}

/* ── Help text below domain input ── */
.zh-domain-help-text {
  font-size: 13px !important;
  color: var(--zh-gray-500) !important;
  margin: 12px 0 0 !important;
  padding: 10px 14px !important;
  background: var(--zh-gray-50) !important;
  border-radius: 6px !important;
  border-left: 3px solid var(--zh-primary) !important;
  line-height: 1.5 !important;
}

.zh-domain-help-text i {
  color: var(--zh-primary) !important;
  margin-right: 4px !important;
}

/* ── Free domain note ── */
.zh-free-domain-note {
  font-size: 13px !important;
  color: var(--zh-gray-500) !important;
  margin-top: 16px !important;
  padding: 0 4px !important;
}

/* ── Help Section (bottom) ── */
.zh-domain-help-section {
  max-width: 820px !important;
  margin: 0 auto 48px !important;
  padding: 0 !important;
}

.zh-domain-help-title {
  font-family: var(--zh-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.zh-domain-help-title i {
  color: var(--zh-primary) !important;
  font-size: 20px !important;
}

.zh-domain-help-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}

.zh-domain-help-item {
  background: var(--zh-card-bg) !important;
  border-radius: var(--zh-radius) !important;
  box-shadow: var(--zh-shadow-sm) !important;
  padding: 20px !important;
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  transition: all var(--zh-ease) !important;
}

.zh-domain-help-item:hover {
  box-shadow: var(--zh-shadow-base) !important;
  transform: translateY(-2px) !important;
}

.zh-domain-help-icon {
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  background: var(--zh-primary-bg) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--zh-primary) !important;
  font-size: 16px !important;
}

.zh-domain-help-item strong {
  font-family: var(--zh-font) !important;
  font-size: 14px !important;
  color: var(--zh-gray-900) !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.zh-domain-help-item p {
  font-size: 13px !important;
  color: var(--zh-gray-500) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.zh-domain-help-item a {
  color: var(--zh-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.zh-domain-help-item a:hover {
  text-decoration: underline !important;
}

/* ── Hide original WHMCS header-lined on domain page ── */
.cart-body .header-lined:has(+ .sidebar-collapsed) {
  display: none !important;
}

/* ── Also hide iCheck styling, we use custom radios ── */
.zh-domain-option .iradio_square-blue,
.zh-domain-option .iCheck-helper {
  display: none !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .zh-domain-hero {
    padding: 32px 16px 24px !important;
  }
  .zh-domain-hero-title {
    font-size: 24px !important;
  }
  .zh-domain-hero-subtitle {
    font-size: 14px !important;
  }
  .zh-domain-card {
    padding: 20px !important;
    margin: 0 auto 24px !important;
  }
  .zh-domain-input-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .zh-domain-tld-field {
    flex: 0 0 auto !important;
  }
  .zh-domain-btn-field {
    flex: 0 0 auto !important;
  }
  .zh-domain-help-grid {
    grid-template-columns: 1fr !important;
  }
  .zh-domain-option-label {
    padding: 12px 14px !important;
  }
  .zh-domain-input-area {
    padding: 0 14px 16px !important;
  }
}

/* ==========================================================================
   § 29d — SINGLE-PAGE CHECKOUT (Lagom-style combined review + checkout)
   ========================================================================== */

/* Hide left sidebar on combined checkout page */
.zh-checkout-hide-sidebar { display: none !important; }

/* Expand cart-body to full width on all cart pages (sidebar is hidden globally) */
.zh-checkout-hide-sidebar + .cart-body,
#order-standard_cart > .row > .cart-body {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2-column checkout layout */
.zh-checkout-layout {
  display: flex !important;
  gap: 32px !important;
  align-items: stretch !important;
}
.zh-checkout-main {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: none !important;
}
.zh-checkout-sidebar {
  flex: 0 0 340px !important;
  max-width: 340px !important;
  width: 340px !important;
}

/* Sticky sidebar */
.zh-sticky {
  position: sticky !important;
  top: 20px !important;
}

/* Checkout card sections */
.zh-checkout-card {
  background: var(--zh-card-bg) !important;
  border-radius: var(--zh-radius-lg) !important;
  box-shadow: var(--zh-shadow-sm) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}

/* Section titles inside checkout cards */
.zh-checkout-card .zh-section-title,
.zh-checkout-card > h3.zh-section-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--zh-gray-100) !important;
}

/* Cart items inside checkout card */
.zh-checkout-card .view-cart-items-header {
  margin: -24px -24px 0 !important;
  border-radius: var(--zh-radius-lg) var(--zh-radius-lg) 0 0 !important;
}
.zh-checkout-card .view-cart-items {
  margin: 0 -24px !important;
}
.zh-checkout-card .view-cart-items .item:last-child {
  border-bottom: none !important;
}

/* Cart actions row (continue shopping + empty cart) */
.zh-cart-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 16px !important;
  margin-top: 4px !important;
  border-top: none !important;
}
.zh-cart-actions a,
.zh-cart-actions .btn-link {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--zh-gray-500) !important;
}
.zh-cart-actions a:hover,
.zh-cart-actions .btn-link:hover {
  color: var(--zh-danger) !important;
}

/* Remove bottom border on last cart item before actions */
.zh-checkout-card .view-cart-items {
  border-bottom: none !important;
}
.zh-checkout-card .empty-cart {
  padding: 12px 20px 0 !important;
  margin: 0 !important;
  border-top: none !important;
}
.zh-checkout-card .empty-cart .btn-link {
  color: var(--zh-gray-500) !important;
  font-size: 13px !important;
  padding: 0 !important;
}
.zh-checkout-card .empty-cart .btn-link:hover {
  color: var(--zh-danger) !important;
}

/* Promo code section */
.zh-promo-section .input-group {
  display: flex !important;
}
.zh-promo-section .input-group .form-group {
  flex: 1 !important;
}
.zh-promo-section .input-group .input-group-btn .btn,
.zh-promo-section .input-group .input-group-append .btn {
  height: 44px !important;
  border-radius: 0 4px 4px 0 !important;
  background: var(--zh-primary) !important;
  color: #fff !important;
  border: 1px solid var(--zh-primary) !important;
  font-weight: 600 !important;
  padding: 0 20px !important;
}
.zh-promo-section .input-group .input-group-btn .btn:hover,
.zh-promo-section .input-group .input-group-append .btn:hover {
  background: var(--zh-primary-hover) !important;
}
.zh-promo-section .view-cart-promotion-code {
  background: var(--zh-success-bg) !important;
  color: var(--zh-success) !important;
  padding: 10px 16px !important;
  border-radius: var(--zh-radius) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-bottom: 12px !important;
}

/* Order Summary sidebar */
.zh-order-summary {
  background: var(--zh-card-bg) !important;
  border-radius: var(--zh-radius-lg) !important;
  box-shadow: var(--zh-shadow) !important;
}
.zh-order-summary .zh-section-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--zh-gray-100) !important;
}
.zh-order-summary .summary-container {
  padding: 0 !important;
}
.zh-order-summary .subtotal,
.zh-order-summary .bordered-totals > div,
.zh-order-summary .recurring-totals {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 8px 0 !important;
  font-size: 14px !important;
  color: var(--zh-gray-600) !important;
}
.zh-order-summary .bordered-totals {
  border-top: 1px solid var(--zh-gray-100) !important;
  border-bottom: 1px solid var(--zh-gray-100) !important;
  margin: 4px 0 !important;
  padding: 4px 0 !important;
}
.zh-order-summary .recurring-totals {
  font-weight: 600 !important;
  color: var(--zh-gray-800) !important;
}
.zh-order-summary .recurring-charges .cost {
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
}
.zh-order-summary .total-due-today {
  text-align: center !important;
  padding: 20px 0 16px !important;
  border-top: 1px solid var(--zh-gray-200) !important;
  margin-top: 8px !important;
}
.zh-order-summary .total-due-today .amt {
  display: block !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--zh-gray-900) !important;
  line-height: 1.2 !important;
}
.zh-order-summary .total-due-today span:not(.amt) {
  font-size: 13px !important;
  color: var(--zh-gray-500) !important;
  font-weight: 400 !important;
}

/* Place Order button in sidebar */
.zh-btn-place-order {
  width: 100% !important;
  height: 52px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: var(--zh-radius-lg) !important;
  background: var(--zh-primary) !important;
  border: none !important;
  color: #fff !important;
  transition: all var(--zh-ease) !important;
  box-shadow: 0 4px 12px rgba(var(--zh-primary-rgb),.3) !important;
}
.zh-btn-place-order:hover {
  background: var(--zh-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(var(--zh-primary-rgb),.4) !important;
}

/* --- Page title refinement --- */
.zh-checkout-main .header-lined h1,
#order-standard_cart .header-lined h1 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--zh-gray-900) !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 4px !important;
}
#order-standard_cart .header-lined {
  border: none !important;
  margin-bottom: 24px !important;
}

/* --- Cart items header row (Lagom: subtle bg tint, clean typography) --- */
.zh-checkout-card .view-cart-items-header {
  background: var(--zh-bg) !important;
  padding: 12px 24px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--zh-gray-500) !important;
  border-bottom: 1px solid var(--zh-gray-100) !important;
}
.zh-checkout-card .view-cart-items-header .row {
  margin: 0 !important;
}

/* --- Cart item rows (Lagom: 58px rows, clean hover) --- */
.zh-checkout-card .view-cart-items .item {
  padding: 16px 24px !important;
  border-bottom: 1px solid var(--zh-gray-100) !important;
  transition: background var(--zh-ease) !important;
}
.zh-checkout-card .view-cart-items .item:hover {
  background: rgba(var(--zh-primary-rgb), 0.02) !important;
}
.zh-checkout-card .view-cart-items .item .row {
  align-items: center !important;
}
.zh-checkout-card .view-cart-items .item .item-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-900) !important;
}
.zh-checkout-card .view-cart-items .item .item-group {
  font-size: 13px !important;
  color: var(--zh-gray-500) !important;
}
.zh-checkout-card .view-cart-items .item .item-domain {
  font-size: 13px !important;
  color: var(--zh-primary) !important;
  font-weight: 500 !important;
}
.zh-checkout-card .view-cart-items .item .item-price {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-900) !important;
  text-align: right !important;
}
.zh-checkout-card .view-cart-items .item .item-price .cycle {
  display: block !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--zh-gray-500) !important;
}
/* Edit link inside cart items */
.zh-checkout-card .view-cart-items .item .btn-link {
  color: var(--zh-primary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 2px 6px !important;
  text-decoration: none !important;
}
.zh-checkout-card .view-cart-items .item .btn-link:hover {
  color: var(--zh-primary-hover) !important;
}
/* Remove button (X) */
.zh-checkout-card .view-cart-items .btn-remove-from-cart {
  color: var(--zh-gray-400) !important;
  font-size: 16px !important;
  padding: 4px !important;
  transition: color var(--zh-ease) !important;
}
.zh-checkout-card .view-cart-items .btn-remove-from-cart:hover {
  color: var(--zh-danger) !important;
}

/* Billing form sub-headings inside checkout card */
.zh-checkout-card .sub-heading {
  margin: 28px 0 16px !important;
  border-bottom: 1px solid var(--zh-gray-100) !important;
  padding-bottom: 10px !important;
}
.zh-checkout-card .sub-heading span.primary-bg-color {
  background: transparent !important;
  color: var(--zh-gray-900) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Already registered bar (Lagom: clean intro section) */
.zh-checkout-card .already-registered {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row-reverse !important;
  margin-bottom: 24px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--zh-gray-100) !important;
}
.zh-checkout-card .already-registered p {
  font-size: 14px !important;
  color: var(--zh-gray-600) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  flex: 1 !important;
  padding-right: 16px !important;
}
.zh-checkout-card .already-registered .pull-right,
.zh-checkout-card .already-registered .float-right {
  float: none !important;
  flex-shrink: 0 !important;
}
/* "Já registrado?" button — outline style */
.zh-checkout-card #btnAlreadyRegistered {
  background: transparent !important;
  color: var(--zh-primary) !important;
  border: 2px solid var(--zh-primary) !important;
  border-radius: var(--zh-radius-lg) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  transition: all var(--zh-ease) !important;
}
.zh-checkout-card #btnAlreadyRegistered:hover {
  background: var(--zh-primary) !important;
  color: #fff !important;
}
.zh-checkout-card #btnNewUserSignup {
  background: transparent !important;
  color: var(--zh-primary) !important;
  border: 2px solid var(--zh-primary) !important;
  border-radius: var(--zh-radius-lg) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  transition: all var(--zh-ease) !important;
}
.zh-checkout-card #btnNewUserSignup:hover {
  background: var(--zh-primary) !important;
  color: #fff !important;
}

/* Checkout alert for total (Lagom: elegant tinted banner) */
.zh-checkout-card #totalDueToday.alert-success,
.zh-checkout-card .alert-success {
  background: linear-gradient(135deg, var(--zh-primary-bg) 0%, rgba(var(--zh-primary-rgb), 0.06) 100%) !important;
  color: var(--zh-primary) !important;
  border: 1px solid rgba(var(--zh-primary-rgb), 0.12) !important;
  border-radius: var(--zh-radius-lg) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 16px 20px !important;
  text-align: center !important;
}
.zh-checkout-card #totalDueToday strong {
  font-weight: 800 !important;
  font-size: 18px !important;
  color: var(--zh-primary) !important;
}

/* Payment gateway section (Lagom: card-style radio selection) */
.zh-checkout-card .radio-inline {
  margin-right: 16px !important;
  padding: 10px 16px !important;
  border: 1px solid var(--zh-gray-200) !important;
  border-radius: var(--zh-radius) !important;
  transition: all var(--zh-ease) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.zh-checkout-card .radio-inline:hover {
  border-color: var(--zh-primary-lighter) !important;
  background: rgba(var(--zh-primary-rgb), 0.02) !important;
}
.zh-checkout-card .radio-inline input[type="radio"]:checked + img,
.zh-checkout-card .radio-inline input[type="radio"]:checked ~ * {
  opacity: 1 !important;
}
/* Payment method text */
.zh-checkout-card .sub-heading + p,
.zh-checkout-card .gateway-section > p {
  font-size: 13px !important;
  color: var(--zh-gray-500) !important;
}

/* --- Notes textarea (Lagom: clean bordered textarea) --- */
.zh-checkout-card textarea.form-control {
  border: 1px solid var(--zh-gray-200) !important;
  border-radius: var(--zh-radius) !important;
  font-size: 14px !important;
  color: var(--zh-gray-700) !important;
  padding: 14px 16px !important;
  min-height: 100px !important;
  resize: vertical !important;
  transition: border-color var(--zh-ease), box-shadow var(--zh-ease) !important;
}
.zh-checkout-card textarea.form-control:focus {
  border-color: var(--zh-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--zh-primary-rgb), 0.1) !important;
  outline: none !important;
}

/* --- Mailing list section (Lagom: clean toggle with descriptive text) --- */
.zh-checkout-card .marketing-email-optin {
  margin-top: 28px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--zh-gray-100) !important;
}
.zh-checkout-card .marketing-email-optin h4,
.zh-checkout-card h4:has(+ p) {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
  margin-bottom: 8px !important;
}
.zh-checkout-card .marketing-email-optin p {
  font-size: 13px !important;
  color: var(--zh-gray-500) !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
}
/* Bootstrap Switch refinement (mailing list toggle) */
.zh-checkout-card .bootstrap-switch,
.bootstrap-switch {
  border-radius: 20px !important;
  border: none !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
}
.zh-checkout-card .bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-on {
  border-radius: 20px 0 0 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
}
.zh-checkout-card .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
  background: var(--zh-primary) !important;
  color: #fff !important;
}
.zh-checkout-card .bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-off {
  border-radius: 0 20px 20px 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  background: var(--zh-gray-200) !important;
  color: var(--zh-gray-600) !important;
}
.zh-checkout-card .bootstrap-switch .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-label {
  background: var(--zh-gray-100) !important;
  border: none !important;
  padding: 4px 6px !important;
}

/* --- Password section refinements --- */
.zh-checkout-card .btn.generate-password,
.zh-checkout-card button.generate-password {
  background: var(--zh-bg) !important;
  border: 1px solid var(--zh-gray-200) !important;
  color: var(--zh-gray-600) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: var(--zh-radius) !important;
  transition: all var(--zh-ease) !important;
  letter-spacing: 0.01em !important;
}
.zh-checkout-card .btn.generate-password:hover,
.zh-checkout-card button.generate-password:hover {
  border-color: var(--zh-primary) !important;
  color: var(--zh-primary) !important;
  background: rgba(var(--zh-primary-rgb), 0.04) !important;
}
/* Password strength meter */
.zh-checkout-card .password-strength-meter,
.zh-checkout-card .pw-strength {
  margin-top: 8px !important;
}
.zh-checkout-card .password-strength-meter .progress,
.zh-checkout-card .pw-strength .progress {
  height: 4px !important;
  border-radius: 4px !important;
  background: var(--zh-gray-100) !important;
  overflow: hidden !important;
}
.zh-checkout-card .password-strength-meter .progress-bar,
.zh-checkout-card .pw-strength .progress-bar {
  border-radius: 4px !important;
  transition: width 0.4s ease !important;
}
.zh-checkout-card .password-strength-text,
.zh-checkout-card .pw-strength-text {
  font-size: 12px !important;
  color: var(--zh-gray-500) !important;
  margin-top: 4px !important;
}

/* Complete order button at bottom of form */
.zh-checkout-card #btnCompleteOrder {
  width: 100% !important;
  height: 52px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: var(--zh-radius-lg) !important;
  background: var(--zh-primary) !important;
  border: none !important;
  margin-top: 24px !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(var(--zh-primary-rgb), .3) !important;
  transition: all var(--zh-ease) !important;
}
.zh-checkout-card #btnCompleteOrder:hover {
  background: var(--zh-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(var(--zh-primary-rgb), .4) !important;
}

/* Security message (Lagom: subtle info bar) */
.zh-checkout-card .checkout-security-msg,
.checkout-security-msg {
  background: var(--zh-warning-bg) !important;
  border: none !important;
  border-left: 3px solid #F59E0B !important;
  border-radius: var(--zh-radius) !important;
  color: var(--zh-gray-700) !important;
  margin-top: 24px !important;
  padding: 14px 18px 14px 42px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  position: relative !important;
}
.zh-checkout-card .checkout-security-msg i,
.checkout-security-msg i {
  color: #F59E0B !important;
  font-size: 18px !important;
  position: absolute !important;
  left: 14px !important;
  top: 15px !important;
}
.zh-checkout-card .checkout-security-msg .clearfix,
.checkout-security-msg .clearfix {
  display: none !important;
}

/* --- Order summary sidebar enhancements --- */
.zh-order-summary {
  box-shadow: var(--zh-shadow) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
}
/* Summary title refinement */
.zh-order-summary .zh-section-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 0 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--zh-gray-100) !important;
}
/* Subtotal/totals rows */
.zh-order-summary .subtotal,
.zh-order-summary .bordered-totals > div,
.zh-order-summary .recurring-totals {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 10px 0 !important;
  font-size: 14px !important;
  color: var(--zh-gray-600) !important;
}
.zh-order-summary .subtotal .pull-right,
.zh-order-summary .subtotal .float-right {
  font-weight: 500 !important;
  color: var(--zh-gray-800) !important;
}
.zh-order-summary .recurring-totals .pull-right,
.zh-order-summary .recurring-totals .float-right {
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
}
/* Total due emphasis */
.zh-order-summary .total-due-today {
  text-align: center !important;
  padding: 20px 0 16px !important;
  border-top: 2px solid var(--zh-gray-200) !important;
  margin-top: 8px !important;
}
.zh-order-summary .total-due-today .amt {
  display: block !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  color: var(--zh-gray-900) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}
.zh-order-summary .total-due-today span:not(.amt) {
  font-size: 12px !important;
  color: var(--zh-gray-500) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
/* Continue Shopping link in sidebar */
.zh-order-summary .btn-continue-shopping {
  color: var(--zh-primary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color var(--zh-ease) !important;
}
.zh-order-summary .btn-continue-shopping:hover {
  color: var(--zh-primary-hover) !important;
  text-decoration: underline !important;
}

/* --- Existing user login section --- */
.zh-checkout-card #containerExistingUserSignin .row,
.zh-checkout-card #containerNewUserSignup .row {
  margin-left: -8px !important;
  margin-right: -8px !important;
}
.zh-checkout-card #containerExistingUserSignin .col-sm-6,
.zh-checkout-card #containerNewUserSignup .col-sm-6,
.zh-checkout-card #containerNewUserSignup .col-sm-4,
.zh-checkout-card #containerNewUserSignup .col-sm-5,
.zh-checkout-card #containerNewUserSignup .col-sm-3,
.zh-checkout-card #containerNewUserSignup .col-sm-12 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Login button refinement */
.zh-checkout-card #btnExistingLogin {
  background: var(--zh-primary) !important;
  border: none !important;
  border-radius: var(--zh-radius-lg) !important;
  font-weight: 600 !important;
  padding: 10px 32px !important;
  transition: all var(--zh-ease) !important;
  box-shadow: 0 2px 8px rgba(var(--zh-primary-rgb), .2) !important;
}
.zh-checkout-card #btnExistingLogin:hover {
  background: var(--zh-primary-hover) !important;
  transform: translateY(-1px) !important;
}

/* --- Form group spacing inside checkout --- */
.zh-checkout-card .form-group {
  margin-bottom: 12px !important;
}

/* --- Account select cards (Lagom: clean radio cards) --- */
.zh-checkout-card .account-select-container .account {
  border: 1px solid var(--zh-gray-200) !important;
  border-radius: var(--zh-radius) !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
  transition: all var(--zh-ease) !important;
  cursor: pointer !important;
}
.zh-checkout-card .account-select-container .account:hover {
  border-color: var(--zh-primary-lighter) !important;
  background: rgba(var(--zh-primary-rgb), 0.02) !important;
}
.zh-checkout-card .account-select-container .account.active {
  border-color: var(--zh-primary) !important;
  background: var(--zh-primary-bg) !important;
  box-shadow: 0 0 0 3px rgba(var(--zh-primary-rgb), 0.1) !important;
}

/* Mobile responsiveness */
@media (max-width: 991px) {
  .zh-checkout-layout {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .zh-checkout-sidebar {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    order: -1 !important;
  }
  .zh-sticky {
    position: static !important;
  }
  .zh-checkout-main {
    max-width: 100% !important;
  }
  .zh-checkout-main .header-lined h1 {
    font-size: 24px !important;
  }
}

/* ==========================================================================
   § 29c — CONFIGURE PAGE — Lagom-style components
   Product card, billing cycle cards, section titles, addon cards, continue btn
   ========================================================================== */

/* --- Configure subtitle --- */
.zh-configure-subtitle {
  font-size: 15px !important;
  color: var(--zh-gray-500) !important;
  margin-bottom: 24px !important;
}

/* --- Product Info Card (Lagom: icon + name + features in bordered card) --- */
.zh-product-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  background: var(--zh-card-bg) !important;
  border: 1px solid var(--zh-gray-200) !important;
  border-radius: var(--zh-radius-lg) !important;
  padding: 24px !important;
  margin-bottom: 32px !important;
}

.zh-product-icon {
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 48px !important;
  background: var(--zh-primary-bg) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.zh-product-icon svg {
  width: 26px !important;
  height: 26px !important;
  color: var(--zh-primary) !important;
  stroke: var(--zh-primary) !important;
}

.zh-product-details {
  flex: 1 !important;
  min-width: 0 !important;
}

.zh-product-name {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.02em !important;
}

.zh-product-desc,
.zh-product-desc p {
  font-size: 14px !important;
  color: var(--zh-gray-500) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.zh-product-desc ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
}

.zh-product-desc ul li {
  padding: 4px 0 !important;
  font-size: 14px !important;
  color: var(--zh-gray-600) !important;
}

.zh-product-desc ul li::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--zh-primary) !important;
  border-radius: 50% !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}

.zh-product-desc ul li strong,
.zh-product-desc ul li b {
  color: var(--zh-gray-900) !important;
  font-weight: 700 !important;
}

/* Also style the legacy .product-info if TPL not yet updated */
.product-info {
  background: var(--zh-card-bg) !important;
  border: 1px solid var(--zh-gray-200) !important;
  border-radius: var(--zh-radius-lg) !important;
  padding: 24px !important;
  margin-bottom: 32px !important;
}

.product-info .product-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
  margin-bottom: 8px !important;
}

/* --- Section Titles (Lagom: clean divider headings) --- */
.zh-section-title,
.sub-heading {
  font-family: var(--zh-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
  margin: 32px 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--zh-gray-200) !important;
  letter-spacing: -0.02em !important;
}

.sub-heading span,
.sub-heading .primary-bg-color {
  background: transparent !important;
  color: var(--zh-gray-900) !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* --- Billing Cycle Cards (Lagom: horizontal selectable cards) --- */
.zh-billing-section {
  margin-bottom: 32px !important;
}

.zh-billing-cards {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.zh-billing-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  background: var(--zh-card-bg) !important;
  border: 2px solid var(--zh-gray-200) !important;
  border-radius: var(--zh-radius-lg) !important;
  padding: 16px !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  position: relative !important;
}

.zh-billing-card:hover {
  border-color: var(--zh-primary-lighter) !important;
  background: var(--zh-primary-bg) !important;
}

.zh-billing-card.zh-billing-active {
  border-color: var(--zh-primary) !important;
  background: var(--zh-primary-bg) !important;
  box-shadow: 0 0 0 1px var(--zh-primary) !important;
}

/* Radio circle indicator */
.zh-billing-radio-wrap {
  margin-bottom: 4px !important;
}

.zh-billing-radio {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--zh-gray-300) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all .15s ease !important;
  background: var(--zh-card-bg) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.zh-billing-radio:checked {
  border-color: var(--zh-primary) !important;
  background: var(--zh-card-bg) !important;
}

.zh-billing-radio:checked::after {
  content: '' !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--zh-primary) !important;
}

/* Period name (Monthly, Quarterly, etc.) */
.zh-billing-period {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-900) !important;
  display: block !important;
}

/* Price text */
.zh-billing-price {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--zh-gray-500) !important;
  display: block !important;
  line-height: 1.4 !important;
}

.zh-billing-active .zh-billing-price {
  color: var(--zh-primary) !important;
  font-weight: 600 !important;
}

/* --- Addon Cards (Lagom style) --- */
.addon-products {
  margin-bottom: 24px !important;
}

.panel-addon,
.panel.panel-addon {
  background: var(--zh-card-bg) !important;
  border: 2px solid var(--zh-gray-200) !important;
  border-radius: var(--zh-radius-lg) !important;
  box-shadow: none !important;
  transition: all .2s ease !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.panel-addon:hover {
  border-color: var(--zh-primary-lighter) !important;
}

.panel-addon-selected,
.panel.panel-addon-selected {
  border-color: var(--zh-primary) !important;
  background: var(--zh-primary-bg) !important;
}

.panel-addon .panel-body,
.panel-addon .card-body {
  padding: 20px !important;
  font-size: 14px !important;
}

.panel-addon .panel-body label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-900) !important;
  cursor: pointer !important;
}

.panel-addon .panel-price {
  background: var(--zh-gray-50) !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-900) !important;
  border-top: 1px solid var(--zh-gray-200) !important;
}

.panel-addon .panel-add {
  background: var(--zh-primary-bg) !important;
  color: var(--zh-primary) !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}

.panel-addon .panel-add:hover {
  background: var(--zh-primary) !important;
  color: #fff !important;
}

.panel-addon-selected .panel-add {
  background: var(--zh-primary) !important;
  color: #fff !important;
}

/* --- Continue Button (below order summary on configure page) --- */
.zh-continue-wrap {
  margin-top: 16px !important;
}

#btnCompleteProductConfig,
.zh-continue-wrap .btn-primary,
.zh-continue-wrap .btn-lg {
  background: var(--zh-primary) !important;
  border-color: var(--zh-primary) !important;
  color: #fff !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: var(--zh-radius) !important;
  box-shadow: 0 2px 8px rgba(var(--zh-primary-rgb),.25) !important;
  transition: all var(--zh-ease) !important;
}

#btnCompleteProductConfig:hover,
.zh-continue-wrap .btn-primary:hover {
  background: var(--zh-primary-hover) !important;
  border-color: var(--zh-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(var(--zh-primary-rgb),.35) !important;
}

/* --- Info Alert (Lagom style) --- */
.zh-info-alert,
.cart-body .alert-warning {
  background: var(--zh-warning-bg) !important;
  border: none !important;
  border-left: 4px solid var(--zh-warning) !important;
  border-radius: var(--zh-radius) !important;
  padding: 16px 20px !important;
  font-size: 14px !important;
  color: #8A5600 !important;
  margin-top: 24px !important;
}

.zh-info-alert i,
.cart-body .alert-warning i {
  color: var(--zh-warning) !important;
  margin-right: 8px !important;
}

/* --- Configurable Options Grid --- */
.product-configurable-options {
  margin-bottom: 24px !important;
}

.product-configurable-options .form-group {
  margin-bottom: 20px !important;
}

.product-configurable-options label {
  font-weight: 500 !important;
  color: var(--zh-gray-700) !important;
}

/* --- Responsive Billing Cards --- */
@media (max-width: 575px) {
  .zh-billing-cards {
    flex-direction: column !important;
  }
  .zh-billing-card {
    flex-direction: row !important;
    text-align: left !important;
    gap: 12px !important;
  }
  .zh-billing-radio-wrap {
    margin-bottom: 0 !important;
  }
}

/* ==========================================================================
   § 30 — PREMIUM FOOTER
   4-column layout: Brand + Links + Account + Support
   ========================================================================== */

/* ── Main footer area ── */
.zh-footer {
  font-family: var(--zh-font) !important;
  margin-top: 0 !important;
  clear: both !important;
}
.zh-footer__main {
  background: var(--zh-gray-900) !important;
  padding: 56px 0 40px !important;
}

/* Brand column */
.zh-footer__brand { margin-bottom: 16px !important; }
.zh-footer__logo {
  height: 30px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
}
.zh-footer__wordmark {
  font-size: 24px !important;
  font-weight: 800 !important;
  font-style: italic !important;
  letter-spacing: -0.04em !important;
}
.zh-footer__wordmark .zh-brand__zen { color: #6DA3FF !important; }
.zh-footer__wordmark .zh-brand__host { color: #fff !important; }

.zh-footer__desc {
  color: var(--zh-gray-400) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin-bottom: 20px !important;
  max-width: 320px !important;
}

/* Social icons */
.zh-footer__social {
  display: flex !important;
  gap: 8px !important;
}
.zh-footer__social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.08) !important;
  color: var(--zh-gray-400) !important;
  font-size: 16px !important;
  text-decoration: none !important;
  transition: all .25s ease !important;
}
.zh-footer__social-link:hover {
  background: var(--zh-primary) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

/* Column headings */
.zh-footer__heading {
  color: #fff !important;
  font-family: var(--zh-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  position: relative !important;
}
.zh-footer__heading::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important;
  width: 24px !important; height: 2px !important;
  background: var(--zh-primary) !important;
  border-radius: 2px !important;
}

/* Link columns */
.zh-footer__links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.zh-footer__links li {
  margin-bottom: 10px !important;
}
.zh-footer__links a {
  color: var(--zh-gray-400) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color .2s ease, padding-left .2s ease !important;
  display: inline-block !important;
}
.zh-footer__links a:hover {
  color: #fff !important;
  padding-left: 4px !important;
  text-decoration: none !important;
}

/* Contact/support items */
.zh-footer__contact {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.zh-footer__contact li {
  margin-bottom: 12px !important;
}
.zh-footer__contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-decoration: none !important;
  padding: 10px 14px !important;
  border-radius: var(--zh-radius-lg) !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  transition: all .25s ease !important;
}
.zh-footer__contact-item:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}
.zh-footer__contact-icon {
  width: 40px !important; height: 40px !important;
  border-radius: var(--zh-radius) !important;
  background: rgba(var(--zh-primary-rgb),.15) !important;
  color: #6DA3FF !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}
.zh-footer__contact-icon--success {
  background: rgba(45,159,70,.15) !important;
  color: #5EE07A !important;
}
.zh-footer__contact-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
}
.zh-footer__contact-value {
  font-size: 12px !important;
  color: var(--zh-gray-400) !important;
  margin-top: 1px !important;
}

/* ── Bottom bar ── */
.zh-footer__bottom {
  background: rgba(0,0,0,.2) !important;
  padding: 16px 0 !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
.zh-footer__bottom-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.zh-footer__copyright {
  color: var(--zh-gray-500) !important;
  font-size: 13px !important;
  margin: 0 !important;
}
.zh-footer__bottom-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
.zh-footer__bottom-link {
  color: var(--zh-gray-500) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}
.zh-footer__bottom-link:hover {
  color: #fff !important;
  text-decoration: none !important;
}
.zh-footer__lang-btn {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: var(--zh-radius) !important;
  color: var(--zh-gray-400) !important;
  font-family: var(--zh-font) !important;
  font-size: 13px !important;
  padding: 5px 12px !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
}
.zh-footer__lang-btn:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}

/* Override old footer styles */
footer.zh-footer, .zh-footer#footer {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* ==========================================================================
   § 31 — TOOLTIPS / POPOVERS
   ========================================================================== */
.tooltip-inner {
  background: var(--zh-gray-900) !important; font-family: var(--zh-font) !important;
  font-size: 12px !important; padding: 6px 12px !important; border-radius: 4px !important;
}
.popover {
  border: 1px solid var(--zh-gray-200) !important; border-radius: var(--zh-radius) !important;
  box-shadow: var(--zh-shadow-lg) !important;
}

/* ==========================================================================
   § 32 — BOOTSTRAP UTILITIES
   ========================================================================== */
.bg-white { background-color: var(--zh-card-bg) !important; }
.bg-light { background-color: var(--zh-gray-50) !important; }
.bg-primary { background-color: var(--zh-primary) !important; }
.text-primary { color: var(--zh-primary) !important; }
.text-success { color: var(--zh-success) !important; }
.text-warning { color: var(--zh-warning) !important; }
.text-danger { color: var(--zh-danger) !important; }
.text-dark { color: var(--zh-gray-900) !important; }
.border { border-color: var(--zh-gray-200) !important; }

/* ==========================================================================
   § 33 — SCROLLBAR
   ========================================================================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--zh-gray-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--zh-gray-400); }
* { scrollbar-width: thin; scrollbar-color: var(--zh-gray-300) transparent; }

/* ==========================================================================
   § 34 — ANIMATIONS
   ========================================================================== */
@keyframes zhModalIn {
  from { opacity: 0; transform: scale(.92) translateY(-20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes zhDropIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes zhSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Staggered card entrance */
.card, .panel { animation: zhSlideUp .35s ease both; }
.row > [class*="col-"]:nth-child(1) .card,
.row > [class*="col-"]:nth-child(1) .panel { animation-delay: 0s; }
.row > [class*="col-"]:nth-child(2) .card,
.row > [class*="col-"]:nth-child(2) .panel { animation-delay: .06s; }
.row > [class*="col-"]:nth-child(3) .card,
.row > [class*="col-"]:nth-child(3) .panel { animation-delay: .12s; }
.row > [class*="col-"]:nth-child(4) .card,
.row > [class*="col-"]:nth-child(4) .panel { animation-delay: .18s; }

/* ==========================================================================
   § 35 — DARK MODE (body.zh-dark)
   ========================================================================== */
body.zh-dark {
  --zh-body-bg: #0F1117;
  --zh-card-bg: #1A1D26;
  --zh-border: #2A2D38;
  --zh-gray-50: #1E2130; --zh-gray-100: #252838; --zh-gray-200: #2A2D38;
  --zh-gray-300: #353845; --zh-gray-400: #4A4E5C; --zh-gray-500: #6B7080;
  --zh-gray-600: #8B8F9A; --zh-gray-700: #B0B3BC; --zh-gray-800: #D0D2D8;
  --zh-gray-900: #E4E6EB;
  --zh-shadow-sm: 0px 0px 1px rgba(0,0,0,.4), 0px 2px 16px rgba(0,0,0,.25);
  --zh-shadow: 0px 0px 1px rgba(0,0,0,.4), 0px 4px 24px rgba(0,0,0,.30);
  --zh-shadow-lg: 0px 0px 1px rgba(0,0,0,.5), 0px 8px 32px rgba(0,0,0,.35);
  --zh-primary-bg: rgba(11,100,244,.12);
  --zh-success-bg: rgba(45,159,70,.12);
  --zh-warning-bg: rgba(240,128,0,.12);
  --zh-danger-bg: rgba(217,38,50,.12);
}
body.zh-dark { color: var(--zh-gray-900) !important; background: var(--zh-body-bg) !important; }
body.zh-dark .navbar, body.zh-dark nav.navbar { background: var(--zh-card-bg) !important; border-bottom-color: var(--zh-border) !important; }
body.zh-dark .topbar { background: #0A0C12 !important; }
body.zh-dark .card, body.zh-dark .panel, body.zh-dark .well { background: var(--zh-card-bg) !important; }
body.zh-dark .card-header, body.zh-dark .panel-heading { background: var(--zh-gray-50) !important; border-bottom-color: var(--zh-border) !important; }
body.zh-dark .table { background: var(--zh-card-bg) !important; }
body.zh-dark .table > thead > tr > th { background: var(--zh-gray-50) !important; color: var(--zh-gray-600) !important; }
body.zh-dark .table > tbody > tr > td { color: var(--zh-gray-700) !important; border-top-color: var(--zh-gray-100) !important; }
body.zh-dark .form-control { background: var(--zh-gray-50) !important; border-color: var(--zh-gray-300) !important; color: var(--zh-gray-900) !important; }
body.zh-dark .dropdown-menu { background: var(--zh-card-bg) !important; border-color: var(--zh-border) !important; }
body.zh-dark .modal-content { background: var(--zh-card-bg) !important; }
body.zh-dark footer { background: var(--zh-card-bg) !important; border-top-color: var(--zh-border) !important; }
body.zh-dark .list-group-item { background: var(--zh-card-bg) !important; border-bottom-color: var(--zh-gray-100) !important; }
body.zh-dark .btn-default, body.zh-dark .btn-secondary { background: var(--zh-gray-100) !important; border-color: var(--zh-gray-300) !important; color: var(--zh-gray-900) !important; }
body.zh-dark a { color: #4D8FF7 !important; }
body.zh-dark h1,body.zh-dark h2,body.zh-dark h3,body.zh-dark h5,body.zh-dark h6 { color: var(--zh-gray-900) !important; }
body.zh-dark p { color: var(--zh-gray-600) !important; }
body.zh-dark [class*="card-accent-"] { background: var(--zh-card-bg) !important; }
body.zh-dark .card-columns.home .card { background: var(--zh-card-bg) !important; }
body.zh-dark .product, body.zh-dark .product.clearfix { background: var(--zh-card-bg) !important; }
body.zh-dark .table-responsive { background: var(--zh-card-bg) !important; }

/* ==========================================================================
   § 36 — RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
  h1,.h1 { font-size: 30px !important; }
  h2,.h2 { font-size: 26px !important; }
  .header-lined h1, h1.font-size-36 { font-size: 28px !important; }
  .navbar-nav > li > a { padding: 12px 14px !important; font-size: 14px !important; }
  .card-columns.home .card.mb-3 { max-width: 100% !important; }
}

@media (max-width: 767px) {
  h1,.h1 { font-size: 26px !important; }
  h2,.h2 { font-size: 22px !important; }
  .header-lined h1, h1.font-size-36 { font-size: 24px !important; }
  #main-body { padding-top: 20px !important; }
  .card-columns.home { gap: 16px !important; }
  .product:hover, [class*="card-accent-"]:hover, .card-columns.home .card:hover {
    transform: none !important;
  }
  .product-pricing span.price { font-size: 28px !important; }
  .product header::before { width: 44px !important; height: 44px !important; }
  .card, .panel { animation-delay: 0s !important; }
}

@media (max-width: 480px) {
  .container { padding-left: 12px !important; padding-right: 12px !important; }
  .btn { padding: 8px 16px !important; font-size: 13px !important; }
  .domain-checker-container { padding: 32px 16px !important; }
}

/* ==========================================================================
   End of ZenHost Premium Theme v9.0.0
   ========================================================================== */


/* ==========================================================================
   § 37 — COMPREHENSIVE MOBILE / RESPONSIVE OVERRIDES
   Added: 2026-04-15
   Covers ALL pages and components for a polished mobile experience.
   Breakpoints: 1199.98px (xl), 991.98px (lg), 767.98px (md), 575.98px (sm)
   ========================================================================== */

/* --------------------------------------------------------------------------
   37.1 — NAVBAR / HEADER — Mobile Menu, Search, User Dropdown
   -------------------------------------------------------------------------- */

/* Below xl — navbar collapses */
@media (max-width: 1199.98px) {
  /* Ensure container doesn't clip on mobile */
  .zh-navbar > .container {
    padding: 0 16px !important;
    flex-wrap: wrap !important;
  }

  /* Brand sizing */
  .zh-brand__img {
    height: 30px !important;
    max-width: 140px !important;
  }
  .zh-brand__text {
    font-size: 22px !important;
  }

  /* Mobile collapse panel — full width below header */
  .zh-collapse {
    position: relative !important;
    width: 100% !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Mobile nav links — touch-friendly 48px rows */
  .zh-nav-list > li > a,
  .zh-nav-list > li > a.pr-4,
  .zh-nav-list > li > a.dropdown-toggle {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Mobile dropdown sub-items */
  .zh-nav-list .dropdown-menu .dropdown-item,
  .zh-nav-list .dropdown-menu li.dropdown-item {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Show dropdowns as expanded on mobile (no flyout) */
  .zh-nav-list .dropdown-menu {
    position: static !important;
    float: none !important;
    display: none !important;
    transform: none !important;
  }
  .zh-nav-list .dropdown.show .dropdown-menu,
  .zh-nav-list .dropdown-menu.show {
    display: block !important;
  }

  /* Icon buttons — slightly larger touch targets */
  .zh-icon-btn {
    width: 42px !important;
    height: 42px !important;
    font-size: 17px !important;
  }

  /* Hamburger — larger touch target */
  .zh-hamburger {
    width: 42px !important;
    height: 42px !important;
    font-size: 20px !important;
  }

  /* User dropdown on mobile */
  .zh-user__dropdown {
    position: fixed !important;
    top: auto !important;
    right: 8px !important;
    left: 8px !important;
    bottom: 8px !important;
    max-width: none !important;
    width: auto !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    border-radius: var(--zh-radius-xl) !important;
    box-shadow: var(--zh-shadow-xl) !important;
    z-index: 1060 !important;
    animation: zhSlideUp .25s ease !important;
  }

  /* User dropdown items — touch-friendly */
  .zh-user__dropdown-item {
    min-height: 46px !important;
    padding: 12px 16px !important;
  }

  /* Auth buttons (logged out) — hide text on small tablets, keep icon */
  .zh-auth {
    margin-left: 6px !important;
    gap: 6px !important;
  }
}

/* Below lg */
@media (max-width: 991.98px) {
  .zh-navbar > .container {
    padding: 0 12px !important;
  }

  /* Admin bar — stack */
  .zh-admin-bar .container {
    flex-direction: column !important;
    gap: 4px !important;
    text-align: center !important;
  }
}

/* Below md — phone landscape */
@media (max-width: 767.98px) {
  .zh-brand__img {
    height: 26px !important;
    max-width: 120px !important;
  }
  .zh-brand__text {
    font-size: 20px !important;
  }

  .zh-navbar,
  .zh-navbar.navbar-light {
    min-height: 56px !important;
  }

  /* Hide cart icon text — keep just icon */
  .zh-icon-btn {
    width: 40px !important;
    height: 40px !important;
    margin-left: 0 !important;
  }

  .zh-user {
    margin-left: 2px !important;
  }

  /* Notification popover — full-width on mobile */
  .popover {
    max-width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
  }
}

/* Below sm — phone portrait */
@media (max-width: 575.98px) {
  .zh-navbar > .container {
    padding: 0 10px !important;
  }

  .zh-brand__img {
    height: 24px !important;
    max-width: 110px !important;
  }

  /* Mobile search full width */
  .zh-mobile-search {
    margin: 0 -4px 12px !important;
  }
  .zh-mobile-search .form-control,
  .zh-mobile-search .btn {
    height: 44px !important;
  }

  /* Collapse padding */
  .zh-collapse {
    padding: 8px 0 12px !important;
  }
}

/* --------------------------------------------------------------------------
   37.2 — BREADCRUMBS
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  nav.master-breadcrumb,
  .master-breadcrumb {
    padding: 6px 0 !important;
  }
  .breadcrumb {
    font-size: 12px !important;
    flex-wrap: wrap !important;
  }
  .breadcrumb > li + li::before,
  .breadcrumb-item + .breadcrumb-item::before {
    padding: 0 5px !important;
  }
}

/* --------------------------------------------------------------------------
   37.3 — MAIN CONTENT AREA & PAGE TITLES
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  #main-body {
    padding-top: 24px !important;
    padding-bottom: 36px !important;
  }
  .header-lined {
    padding: 0 0 16px !important;
    margin-bottom: 24px !important;
  }
}

@media (max-width: 767.98px) {
  #main-body {
    padding-top: 16px !important;
    padding-bottom: 28px !important;
  }
  .header-lined {
    padding: 0 0 12px !important;
    margin-bottom: 16px !important;
  }
  .header-lined p {
    font-size: 14px !important;
  }
}

@media (max-width: 575.98px) {
  #main-body {
    padding-top: 12px !important;
    padding-bottom: 24px !important;
  }
  h1, .h1 { font-size: 24px !important; }
  h2, .h2 { font-size: 20px !important; }
  h3, .h3 { font-size: 18px !important; }
  h4, .h4 { font-size: 16px !important; }
  .header-lined h1,
  h1.font-size-36 {
    font-size: 22px !important;
  }
}

/* --------------------------------------------------------------------------
   37.4 — SIDEBAR — Primary & Secondary
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Sidebar column goes full width below lg */
  .col-lg-4.col-xl-3 > .sidebar {
    margin-bottom: 20px !important;
  }

  .sidebar, #sidebar {
    border-radius: var(--zh-radius) !important;
  }

  /* Sidebar panels — collapsible behavior hint */
  .panel-sidebar .list-group-item,
  .card-sidebar .list-group-item {
    padding: 12px 16px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
}

@media (max-width: 767.98px) {
  /* Sidebar — accordion style on mobile */
  .sidebar .panel-sidebar,
  .sidebar .card-sidebar {
    margin-bottom: 12px !important;
  }

  /* Make sidebar items smaller */
  .panel-sidebar > .panel-heading,
  .card-sidebar > .card-header {
    padding: 12px 14px !important;
  }

  .panel-sidebar .panel-heading .panel-title,
  .card-sidebar .card-header h3 {
    font-size: 13px !important;
  }
}

/* --------------------------------------------------------------------------
   37.5 — CARDS / PANELS — General
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .card, .panel, .well {
    margin-bottom: 16px !important;
    border-radius: var(--zh-radius) !important;
  }
  .card-body, .panel-body {
    padding: 16px !important;
  }
  .card-header, .panel-heading {
    padding: 12px 16px !important;
    min-height: 44px !important;
  }
  .card-footer, .panel-footer {
    padding: 12px 16px !important;
  }
  .well {
    padding: 16px !important;
  }
}

@media (max-width: 575.98px) {
  .card-body, .panel-body {
    padding: 14px !important;
  }
  .card-header, .panel-heading {
    padding: 10px 14px !important;
  }
}

/* --------------------------------------------------------------------------
   37.6 — TABLES — Horizontal scroll, responsive wrapping
   -------------------------------------------------------------------------- */

/* Force all tables to be responsive on mobile */
@media (max-width: 991.98px) {
  /* Wrap bare tables that aren't already in .table-responsive */
  .primary-content > .table,
  .card-body > .table,
  .panel-body > .table,
  .tab-content > .table,
  .tab-pane > .table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .table-responsive {
    margin-bottom: 16px !important;
  }
}

@media (max-width: 767.98px) {
  /* Reduce table padding */
  .table > thead > tr > th,
  .table thead th {
    padding: 10px 12px !important;
    font-size: 11px !important;
  }
  .table > thead > tr > th:first-child { padding-left: 14px !important; }
  .table > thead > tr > th:last-child { padding-right: 14px !important; }

  .table > tbody > tr > td,
  .table > tbody > tr > th,
  .table-list > tbody > tr > td {
    padding: 12px !important;
    font-size: 13px !important;
  }
  .table > tbody > tr > td:first-child { padding-left: 14px !important; }
  .table > tbody > tr > td:last-child { padding-right: 14px !important; }

  /* DataTables controls stacking */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    float: none !important;
    text-align: left !important;
    margin-bottom: 8px !important;
  }
  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  .dataTables_wrapper .dataTables_info {
    float: none !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    padding-top: 8px !important;
  }
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: center !important;
    padding-top: 8px !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 8px 10px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 575.98px) {
  .table > thead > tr > th,
  .table thead th {
    padding: 8px 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.02em !important;
  }
  .table > tbody > tr > td,
  .table > tbody > tr > th {
    padding: 10px !important;
    font-size: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   37.7 — HOMEPAGE — Product Cards, Action Icons, Account Section
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .card-columns.home {
    gap: 16px !important;
  }
  .card-columns.home .card.mb-3 {
    flex: 1 1 240px !important;
    max-width: 100% !important;
  }
  .card-columns.home .card-body {
    padding: 28px 20px !important;
  }
  .card-columns.home .card-body::before {
    width: 48px !important;
    height: 48px !important;
    background-size: 24px !important;
    margin-bottom: 16px !important;
  }
  .card-columns.home h3.pricing-card-title,
  .card-columns.home h3.card-title {
    font-size: 18px !important;
  }

  /* Action icon buttons — 3 per row */
  .row.action-icon-btns [class*="col-"] {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
}

@media (max-width: 767.98px) {
  .card-columns.home {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .card-columns.home .card.mb-3 {
    flex: 1 1 100% !important;
  }
  .card-columns.home .card-body {
    padding: 24px 16px !important;
  }
  .card-columns.home .btn-outline-primary,
  .card-columns.home .btn.btn-block {
    padding: 10px 20px !important;
    font-size: 13px !important;
  }

  /* Action icon buttons — 2 per row */
  .row.action-icon-btns {
    margin-bottom: 24px !important;
    margin-top: 16px !important;
  }
  .row.action-icon-btns [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 4px !important;
  }
  [class*="card-accent-"] {
    padding: 20px 12px 16px !important;
  }
  figure.ico-container {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
  }
  .card-accent-teal .ico-container i,
  .card-accent-pomegranate .ico-container i,
  .card-accent-sun-flower .ico-container i,
  .card-accent-asbestos .ico-container i,
  .card-accent-midnight-blue .ico-container i,
  .card-accent-green .ico-container i {
    font-size: 22px !important;
  }
  [class*="card-accent-"] figcaption,
  .action-icon-btns .col-6 a span,
  .action-icon-btns a {
    font-size: 12px !important;
  }

  /* Account quick links — 2 per row or stack */
  ul.nav.justify-content-center {
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 24px !important;
  }
  ul.nav.justify-content-center a.item,
  a.item {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 575.98px) {
  /* Action icon buttons — still 2 per row but smaller */
  .row.action-icon-btns [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 3px !important;
  }
  [class*="card-accent-"] {
    padding: 16px 10px 12px !important;
  }
  figure.ico-container {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }
}

/* --------------------------------------------------------------------------
   37.8 — STORE / PRODUCT CARDS
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .product header,
  .product.clearfix > header {
    padding: 24px 20px 0 !important;
  }
  .product header span[id$="-name"],
  .product header span {
    font-size: 18px !important;
  }
  .product .product-desc {
    padding: 8px 20px !important;
  }
  .product footer {
    padding: 12px 20px 24px !important;
  }
  .product-pricing span.price,
  span.price {
    font-size: 30px !important;
  }
}

@media (max-width: 767.98px) {
  .product header::before {
    width: 40px !important;
    height: 40px !important;
    background-size: 22px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }
  .product header,
  .product.clearfix > header {
    padding: 20px 16px 0 !important;
  }
  .product .product-desc {
    padding: 6px 16px !important;
  }
  .product footer {
    padding: 12px 16px 20px !important;
  }
  .product-pricing span.price,
  span.price {
    font-size: 26px !important;
  }
  .btn-order-now,
  a.btn-order-now,
  a.btn.btn-order-now {
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  /* Products grid — ensure single-column on small phones */
  #products .row.row-eq-height [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   37.9 — CART / CONFIGURE / CHECKOUT PAGES
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Order summary — full width, no sticky */
  .order-summary {
    margin-bottom: 20px !important;
  }

  /* Cart body full width */
  .cart-body,
  #order-standard_cart > .row > .cart-body {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Configure page product card */
  .zh-product-card {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 20px !important;
  }

  /* Billing cycle cards — 2 per row on tablet */
  .zh-billing-cards {
    flex-wrap: wrap !important;
  }
  .zh-billing-card {
    flex: 0 0 calc(50% - 6px) !important;
    min-width: calc(50% - 6px) !important;
  }
}

@media (max-width: 767.98px) {
  /* Order summary heading & content */
  .order-summary > h2,
  .order-summary > h2.font-size-30 {
    font-size: 15px !important;
    padding: 14px 16px !important;
  }
  .order-summary .summary-container {
    padding: 16px !important;
  }
  .order-summary .total-due-today .amt,
  .order-summary .total-due-today .pull-right,
  .order-summary .total-due-today .float-right {
    font-size: 24px !important;
  }
  .order-summary .btn-checkout,
  .btn-checkout {
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  /* Cart items */
  .view-cart-items-header {
    padding: 10px 14px !important;
    font-size: 11px !important;
  }
  .view-cart-items .item,
  .item-container {
    padding: 12px 14px !important;
  }

  /* Checkout layout stacking */
  .zh-checkout-layout {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .zh-checkout-sidebar {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    order: -1 !important;
  }
  .zh-sticky {
    position: static !important;
  }
  .zh-checkout-main {
    max-width: 100% !important;
  }

  /* Checkout card sections */
  .zh-checkout-card {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }

  .zh-checkout-card .view-cart-items-header {
    margin: -16px -16px 0 !important;
    padding: 10px 16px !important;
  }
  .zh-checkout-card .view-cart-items {
    margin: 0 -16px !important;
  }
  .zh-checkout-card .view-cart-items .item {
    padding: 12px 16px !important;
  }

  /* Checkout already-registered section */
  .zh-checkout-card .already-registered {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
  .zh-checkout-card .already-registered p {
    padding-right: 0 !important;
    text-align: center !important;
  }

  /* Billing cycle cards — single column on phone */
  .zh-billing-cards {
    flex-direction: column !important;
  }
  .zh-billing-card {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    flex-direction: row !important;
    text-align: left !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
  .zh-billing-radio-wrap {
    margin-bottom: 0 !important;
  }

  /* Promo code section */
  .zh-promo-section .input-group {
    flex-wrap: nowrap !important;
  }

  /* Cart configure form */
  #frmConfigureProduct select.form-control,
  .cart-body select.form-control,
  #inputBillingcycle {
    height: 44px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 575.98px) {
  /* Order summary even tighter */
  .order-summary .summary-container {
    padding: 12px !important;
  }
  .order-summary .total-due-today .amt,
  .order-summary .total-due-today .pull-right {
    font-size: 22px !important;
  }

  .zh-checkout-card {
    padding: 12px !important;
  }
  .zh-checkout-card .zh-section-title {
    font-size: 13px !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
  }

  /* Complete order button */
  .zh-checkout-card #btnCompleteOrder,
  .zh-btn-place-order {
    height: 48px !important;
    font-size: 15px !important;
  }

  /* Security message */
  .checkout-security-msg,
  .zh-checkout-card .checkout-security-msg {
    padding: 12px 14px 12px 38px !important;
    font-size: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   37.10 — DOMAIN SEARCH / CHECKER
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .domain-checker-container, .domain-checker-bg {
    padding: 36px 24px !important;
  }
  .domain-checker-container h2 {
    font-size: 24px !important;
  }
  .domain-checker-container .input-group {
    max-width: 100% !important;
  }
}

@media (max-width: 767.98px) {
  .domain-checker-container, .domain-checker-bg {
    padding: 28px 16px !important;
    border-radius: var(--zh-radius) !important;
  }
  .domain-checker-container h2 {
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }
  .domain-checker-container p {
    font-size: 14px !important;
    margin-bottom: 16px !important;
  }
  .domain-checker-container .form-control {
    height: 48px !important;
    font-size: 14px !important;
  }
  .domain-checker-container .btn {
    height: 48px !important;
    font-size: 14px !important;
    padding: 12px 20px !important;
  }

  /* Domain results */
  .spotlight-tlds .tld-row {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 575.98px) {
  .domain-checker-container, .domain-checker-bg {
    padding: 24px 12px !important;
  }
  .domain-checker-container h2 {
    font-size: 18px !important;
  }
  .domain-checker-container .input-group {
    flex-direction: column !important;
  }
  .domain-checker-container .form-control {
    border-radius: var(--zh-radius) !important;
    margin-bottom: 8px !important;
  }
  .domain-checker-container .btn {
    border-radius: var(--zh-radius) !important;
    width: 100% !important;
  }
  .domain-checker-container .input-group-append {
    width: 100% !important;
  }
  .domain-checker-container .input-group-append .btn {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   37.11 — INVOICES (List & Individual Invoice)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .invoice-container,
  #invoice-container,
  .container-fluid.invoice-container {
    padding: 28px !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767.98px) {
  .invoice-container,
  #invoice-container,
  .container-fluid.invoice-container {
    padding: 20px 16px !important;
    border-radius: var(--zh-radius) !important;
  }

  .invoice-header h2 {
    font-size: 20px !important;
  }

  /* Invoice table — force responsive */
  .invoice-container table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 13px !important;
  }
  .invoice-container table th,
  .invoice-container table td {
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  /* Invoice columns stacking */
  .invoice-container .col-sm-6,
  .invoice-container .col-md-6,
  .invoice-container .invoice-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px !important;
  }

  /* Invoice buttons — full width */
  .invoice-container .btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .invoice-container .btn-group .btn {
    flex: 1 1 auto !important;
  }

  /* Invoice payment button — prominent */
  .invoice-container .btn-primary {
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    margin-bottom: 12px !important;
  }

  /* Standalone invoice page */
  body:has(.invoice-container) {
    padding: 16px 8px !important;
  }
}

@media (max-width: 575.98px) {
  .invoice-container,
  #invoice-container,
  .container-fluid.invoice-container {
    padding: 14px 10px !important;
  }
  .invoice-header {
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
  }
  .invoice-header h2 {
    font-size: 18px !important;
  }

  /* Invoice status badge sizing */
  .invoice-status span {
    font-size: 11px !important;
    padding: 4px 12px !important;
  }
}

/* --------------------------------------------------------------------------
   37.12 — TICKETS (List & Individual Ticket View)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .ticket-reply, .ticket-message {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }

  /* Ticket metadata — stack name & date */
  .ticket-reply .ticket-reply-head,
  .ticket-reply .reply-header {
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* Ticket list table — make it scrollable */
  .primary-content .table-responsive {
    margin-bottom: 16px !important;
  }

  /* Ticket reply form */
  .ticket-reply-form textarea.form-control {
    min-height: 120px !important;
    font-size: 14px !important;
  }

  /* Ticket buttons */
  .ticket-reply-form .btn {
    min-width: 120px !important;
    min-height: 44px !important;
  }

  /* Ticket attachments */
  .ticket-attachments {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 575.98px) {
  .ticket-reply, .ticket-message {
    padding: 12px !important;
    border-radius: var(--zh-radius) !important;
  }
  .ticket-reply.staff-reply,
  .ticket-reply.operator-reply {
    border-left-width: 3px !important;
  }
}

/* --------------------------------------------------------------------------
   37.13 — KNOWLEDGE BASE
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .kb-article-list .article,
  .kb-category-list .category {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }

  /* Article content — images/embeds responsive */
  .kb-article-content img,
  .article-content img {
    max-width: 100% !important;
    height: auto !important;
  }

  .kb-article-content pre,
  .article-content pre {
    overflow-x: auto !important;
    padding: 16px !important;
    font-size: 12px !important;
  }

  /* KB search */
  .kb-search .form-control {
    height: 48px !important;
    font-size: 14px !important;
  }
}

/* --------------------------------------------------------------------------
   37.14 — LOGIN / REGISTER / PASSWORD RESET
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  form.login-form .card,
  form.login-form .card.mw-540 {
    max-width: 100% !important;
    margin: 16px 0 !important;
    border-radius: var(--zh-radius) !important;
  }
  form.login-form .card-body,
  form.login-form .card-body.px-sm-5,
  form.login-form .card-body.py-5 {
    padding: 28px 20px 24px !important;
  }

  form.login-form .h3,
  form.login-form h6.h3 {
    font-size: 22px !important;
  }

  form.login-form .form-control {
    height: 46px !important;
    font-size: 14px !important;
  }
  form.login-form .input-group-text {
    height: 46px !important;
  }
  form.login-form .btn-primary,
  form.login-form button#login {
    height: 46px !important;
    font-size: 14px !important;
  }
  form.login-form .btn-reveal-pw,
  form.login-form .btn-default.btn-reveal-pw {
    height: 46px !important;
  }

  /* Register form columns — full width */
  form#frmRegister .col-sm-6,
  form#frmRegister .col-md-6,
  #frmRegister .col-sm-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Register button */
  form#frmRegister .btn-primary,
  #frmRegister .btn-primary {
    width: 100% !important;
    height: 46px !important;
    font-size: 14px !important;
  }

  /* Legacy login container */
  .login-container .panel,
  .login-container .card {
    max-width: 100% !important;
    margin: 16px 0 !important;
  }
}

@media (max-width: 575.98px) {
  form.login-form .card-body,
  form.login-form .card-body.px-sm-5,
  form.login-form .card-body.py-5 {
    padding: 20px 16px !important;
  }
  form.login-form .h3,
  form.login-form h6.h3 {
    font-size: 20px !important;
    text-align: center !important;
  }
  form.login-form .card-footer,
  form.login-form .card-body + div {
    padding: 12px 16px !important;
  }
}

/* --------------------------------------------------------------------------
   37.15 — FORMS / INPUTS — General Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .form-control {
    height: 44px !important;
    font-size: 14px !important;
  }
  textarea.form-control {
    min-height: 80px !important;
  }
  .form-group {
    margin-bottom: 14px !important;
  }
  .form-group label, .control-label, label {
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }

  /* Input groups — prevent overflow */
  .input-group {
    flex-wrap: nowrap !important;
  }
  .input-group > .form-control,
  .input-group > .custom-select {
    min-width: 0 !important;
  }

  /* Prepend icon fields */
  .prepend-icon .field-icon {
    width: 40px !important;
    height: 44px !important;
    line-height: 44px !important;
  }
  .prepend-icon .field-icon i {
    line-height: 44px !important;
  }
}

@media (max-width: 575.98px) {
  /* Full-width form columns */
  .form-group .col-sm-6,
  .form-group .col-sm-4,
  .form-group .col-sm-3,
  .form-group .col-md-6,
  .form-group .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
  }

  /* Custom selects */
  select.form-control, .custom-select {
    font-size: 14px !important;
  }
}

/* --------------------------------------------------------------------------
   37.16 — BUTTONS — Mobile Touch Targets & Sizing
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
  }
  .btn-sm {
    min-height: 36px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
  }
  .btn-xs {
    min-height: 32px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
  }
  .btn-lg {
    min-height: 48px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
  }

  /* Full-width buttons in mobile contexts */
  .btn-block {
    width: 100% !important;
  }

  /* Button groups — wrap instead of overflow */
  .btn-group {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Remove transform on hover for touch devices (prevents jank) */
  .btn:hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   37.17 — BADGES / LABELS — Mobile Sizing
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .badge, .label {
    font-size: 10px !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
  }
}

/* --------------------------------------------------------------------------
   37.18 — MODALS — Mobile Full-Screen or Optimized
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .modal-dialog {
    margin: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: calc(100vw - 24px) !important;
  }
  .modal-header {
    padding: 16px !important;
  }
  .modal-header .modal-title {
    font-size: 16px !important;
  }
  .modal-body {
    padding: 16px !important;
  }
  .modal-footer {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .modal-footer .btn {
    flex: 1 1 auto !important;
    min-width: 100px !important;
  }

  /* Language/currency chooser modal */
  .modal-localisation .modal-body {
    padding: 16px !important;
  }
  .modal-localisation .row.item-selector .col-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
  .modal-localisation .row.item-selector .col-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   37.19 — TABS / NAV — Mobile Horizontal Scroll
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    margin-bottom: 16px !important;
  }
  .nav-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .nav-tabs > li > a, .nav-tabs .nav-link {
    white-space: nowrap !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* --------------------------------------------------------------------------
   37.20 — PAGINATION — Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 3px !important;
  }
  .pagination > li > a,
  .pagination > li > span,
  .page-link {
    padding: 8px 10px !important;
    font-size: 12px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* --------------------------------------------------------------------------
   37.21 — ALERTS — Mobile Sizing
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .alert {
    padding: 12px 16px !important;
    font-size: 13px !important;
    margin-bottom: 16px !important;
    border-left-width: 3px !important;
  }
}

/* --------------------------------------------------------------------------
   37.22 — FOOTER — 4-Column Stacking
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .zh-footer__main {
    padding: 40px 0 24px !important;
  }

  /* 2+2 grid on tablet */
  .zh-footer__main .col-lg-4:first-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 32px !important;
  }

  .zh-footer__desc {
    max-width: 100% !important;
  }

  /* Contact cards — 2 per row */
  .zh-footer__contact-item {
    padding: 8px 12px !important;
  }
}

@media (max-width: 767.98px) {
  .zh-footer__main {
    padding: 32px 0 16px !important;
  }

  /* Stack all footer columns */
  .zh-footer__main .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
  }

  /* Except the 2 link columns — keep side by side */
  .zh-footer__main .col-6.col-lg-2 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-bottom: 20px !important;
  }

  .zh-footer__heading {
    font-size: 12px !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
  }

  .zh-footer__links a {
    font-size: 13px !important;
  }
  .zh-footer__links li {
    margin-bottom: 8px !important;
  }

  /* Social icons — centered */
  .zh-footer__social {
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  .zh-footer__social-link {
    width: 42px !important;
    height: 42px !important;
    font-size: 18px !important;
  }

  /* Contact items */
  .zh-footer__contact-item {
    padding: 10px 12px !important;
    gap: 12px !important;
  }
  .zh-footer__contact-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
  .zh-footer__contact-label {
    font-size: 13px !important;
  }
  .zh-footer__contact-value {
    font-size: 11px !important;
  }

  /* Bottom bar */
  .zh-footer__bottom {
    padding: 14px 0 !important;
  }
  .zh-footer__bottom-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
  }
  .zh-footer__bottom-right {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .zh-footer__copyright {
    font-size: 12px !important;
  }
  .zh-footer__bottom-link {
    font-size: 12px !important;
  }
}

@media (max-width: 575.98px) {
  .zh-footer__main {
    padding: 28px 0 12px !important;
  }

  /* Both link columns stack on very small phones */
  .zh-footer__main .col-6.col-lg-2 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px !important;
  }

  .zh-footer__brand {
    text-align: center !important;
    margin-bottom: 12px !important;
  }
  .zh-footer__desc {
    text-align: center !important;
    font-size: 13px !important;
  }
  .zh-footer__social {
    justify-content: center !important;
    margin-bottom: 8px !important;
  }

  .zh-footer__lang-btn {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }
}

/* --------------------------------------------------------------------------
   37.23 — CLIENT AREA — Services, Domains, Details
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Service detail panels — full width */
  .primary-content .col-sm-5,
  .primary-content .col-sm-7,
  .primary-content .col-md-5,
  .primary-content .col-md-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Overview / stats tiles that use col-sm-6 */
  .primary-content .row .col-sm-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }

  /* Service/Domain list — compact */
  .table > tbody > tr > td .btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 36px !important;
  }

  /* Detail page panels */
  .service-details .row > [class*="col-"],
  .domain-details .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   37.24 — PROGRESS BARS — Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .progress {
    height: 6px !important;
  }
}

/* --------------------------------------------------------------------------
   37.25 — LONG TEXT / URL OVERFLOW FIX
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Prevent long text from overflowing containers */
  .primary-content,
  .card-body,
  .panel-body,
  .table td,
  .modal-body,
  .alert,
  .ticket-reply,
  .kb-article-content {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Long URLs/emails in table cells */
  .table td a,
  .table td span {
    word-break: break-all !important;
  }
}

/* --------------------------------------------------------------------------
   37.26 — ANIMATIONS — Reduce motion on mobile for performance
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Disable hover transforms (not applicable on touch) */
  .product:hover,
  .product.clearfix:hover,
  [class*="card-accent-"]:hover,
  .card-columns.home .card.mb-3:hover,
  .spotlight-tlds .tld-row:hover,
  .kb-article-list .article:hover,
  .kb-category-list .category:hover,
  a.item:hover,
  .zh-footer__social-link:hover,
  .zh-footer__contact-item:hover {
    transform: none !important;
  }

  /* Reduce animation intensity */
  .card, .panel {
    animation-duration: 0.2s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card, .panel,
  .modal.in .modal-dialog,
  .modal.show .modal-dialog,
  .dropdown-menu,
  .zh-user__dropdown {
    animation: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   37.27 — CONTAINER — Mobile Padding
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media (max-width: 575.98px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   37.28 — SCROLLBAR — Hide on mobile (use native)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  ::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
  }
}

/* --------------------------------------------------------------------------
   37.29 — TOOLTIPS / POPOVERS — Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .tooltip-inner {
    font-size: 11px !important;
    padding: 6px 10px !important;
    max-width: 220px !important;
  }
  .popover {
    max-width: calc(100vw - 24px) !important;
  }
  .popover-body {
    padding: 12px !important;
    font-size: 13px !important;
  }
}

/* --------------------------------------------------------------------------
   37.30 — GLOBAL TOUCH TARGET ENFORCEMENT
   Ensure all interactive elements meet 44px minimum touch target.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Links in lists */
  .list-group-item {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Dropdown items */
  .dropdown-menu > li > a,
  .dropdown-item {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
  }

  /* Nav links */
  .nav > li > a,
  .nav-link {
    min-height: 44px !important;
  }

  /* Checkboxes and radios — bigger tap area */
  .custom-control {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 28px !important;
  }

  /* Close buttons in modals/alerts */
  .close, .btn-close {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   37.31 — SERVICE STATUS TILES / DASHBOARD CARDS
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Dashboard overview tiles */
  .row > .col-sm-3,
  .row > .col-md-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-bottom: 12px !important;
  }

  /* Stats values */
  .stats-value,
  .counter,
  .count {
    font-size: 24px !important;
  }
}

@media (max-width: 575.98px) {
  .row > .col-sm-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   37.32 — ANNOUNCEMENTS PAGE
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .announcement-single .article-content {
    padding: 16px !important;
  }
  .announcement-single .article-content img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* --------------------------------------------------------------------------
   37.33 — AFFILIATE PAGE
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .affiliate-stats .col-sm-4,
  .affiliate-stats .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   37.34 — PRINT STYLES — Ensure invoice prints well
   -------------------------------------------------------------------------- */
@media print {
  .zh-navbar, header, nav.master-breadcrumb, .sidebar,
  .zh-footer, footer, .zh-admin-bar, .btn-return-to-admin,
  .breadcrumb, #fullpage-overlay {
    display: none !important;
  }
  body, body.primary-bg-color {
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .invoice-container,
  #invoice-container,
  .container-fluid.invoice-container {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
  .card, .panel {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid !important;
    animation: none !important;
  }
  a { color: #333 !important; }
}

/* --------------------------------------------------------------------------
   37.35 — DOMAIN CHOOSER PAGE (Custom ZenHost) — Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .zh-domain-hero {
    padding: 24px 10px 16px !important;
  }
  .zh-domain-hero-title {
    font-size: 20px !important;
  }
  .zh-domain-hero-subtitle {
    font-size: 13px !important;
  }
  .zh-domain-hero-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 18px !important;
  }
  .zh-domain-card {
    padding: 14px !important;
    margin: 0 auto 16px !important;
  }
  .zh-domain-option-label {
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  .zh-domain-option-title {
    font-size: 14px !important;
  }
  .zh-domain-option-desc {
    font-size: 12px !important;
  }
  .zh-domain-option-radio {
    width: 20px !important;
    height: 20px !important;
  }
  .zh-domain-input-area {
    padding: 0 10px 12px !important;
  }
  .zh-domain-input-area .form-control,
  .zh-domain-input-area .btn-primary {
    height: 44px !important;
    font-size: 14px !important;
  }
  .zh-domain-help-text {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
  .zh-domain-help-section {
    margin: 0 auto 24px !important;
  }
  .zh-domain-help-title {
    font-size: 16px !important;
  }
  .zh-domain-help-item {
    padding: 14px !important;
    gap: 10px !important;
  }
  .zh-domain-help-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
  }
  .zh-domain-help-item strong {
    font-size: 13px !important;
  }
  .zh-domain-help-item p {
    font-size: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   37.36 — iOS SPECIFIC FIXES
   -------------------------------------------------------------------------- */

/* Prevent iOS zoom on input focus (font-size must be >= 16px) */
@media (max-width: 767.98px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Fix iOS momentum scrolling */
.zh-collapse,
.table-responsive,
.modal-body,
.dropdown-menu,
.zh-user__dropdown {
  -webkit-overflow-scrolling: touch !important;
}

/* --------------------------------------------------------------------------
   37.37 — INTL-TEL-INPUT PHONE FIELD — Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .intl-tel-input .country-list {
    max-width: calc(100vw - 40px) !important;
    max-height: 200px !important;
  }
}

/* --------------------------------------------------------------------------
   37.38 — PRODUCT CONFIGURABLE OPTIONS — Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .product-configurable-options .form-group {
    margin-bottom: 16px !important;
  }
  .product-configurable-options label {
    font-size: 13px !important;
  }
  .product-configurable-options .form-control {
    height: 44px !important;
  }
}

/* --------------------------------------------------------------------------
   37.39 — ADDON CARDS — Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .panel-addon .panel-body,
  .panel-addon .card-body {
    padding: 14px !important;
  }
  .panel-addon .panel-body label {
    font-size: 14px !important;
  }
  .panel-addon .panel-price {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  .panel-addon .panel-add {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   37.40 — CONTACT US / SUBMIT TICKET PAGES — Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Ticket submission form */
  #frmTicketSubmit .col-sm-6,
  #frmTicketSubmit .col-md-6,
  #frmTicketSubmit .col-sm-4,
  #frmTicketSubmit .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* File upload area */
  .file-upload, .dropzone {
    min-height: 80px !important;
    padding: 16px !important;
  }
}

/* ==========================================================================
   End of § 37 — Comprehensive Mobile / Responsive Overrides
   ========================================================================== */


/* ==========================================================================
   § 38 — MOBILE HOTFIXES (v9.0.1 — 2026-04-16)
   ========================================================================== */

/* --- 38.1 FOOTER: Force single column on phones --- */
@media (max-width: 767.98px) {
  .zh-footer__main .col-6.col-lg-2 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }
  .zh-footer__main .row {
    flex-direction: column !important;
  }
}

/* --- 38.2 DOMAIN INPUT: Fix www/extension layout on mobile --- */
@media (max-width: 767.98px) {
  /* Domain registration form — stack vertically */
  .domain-input-group,
  #frmDomainHomepage .input-group,
  #order-standard_cart .domain-input-group,
  form[action*="domainchecker"] .input-group {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  /* www prefix label */
  .domain-input-group .input-group-prepend,
  .domain-input-group .input-group-text,
  #frmDomainHomepage .input-group-prepend {
    flex: 0 0 auto !important;
    border-radius: var(--zh-radius) !important;
  }
  
  /* Main domain input field */
  .domain-input-group .form-control,
  #frmDomainHomepage .domain-input,
  #frmDomainHomepage input[type="text"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    font-size: 16px !important; /* prevents iOS zoom */
  }
  
  /* Extension dropdown */
  .domain-input-group .input-group-append,
  .domain-input-group select,
  #frmDomainHomepage select {
    flex: 0 0 100% !important;
    width: 100% !important;
    border-radius: var(--zh-radius) !important;
    margin-top: 0 !important;
  }
  
  /* Continue button */
  .domain-input-group .btn,
  #frmDomainHomepage .btn,
  form[action*="domainchecker"] .btn-primary {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-top: 4px !important;
    min-height: 48px !important;
    font-size: 16px !important;
    border-radius: var(--zh-radius) !important;
  }
  
  /* Domain checker on cart page */
  .domain-checker-container .input-group {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }
  .domain-checker-container .form-control {
    flex: 0 0 100% !important;
    border-radius: var(--zh-radius) !important;
    margin-bottom: 8px !important;
  }
  .domain-checker-container .btn {
    flex: 0 0 100% !important;
    border-radius: var(--zh-radius) !important;
  }
}

/* --- 38.3 GENERAL: Min touch targets 44px --- */
@media (max-width: 767.98px) {
  .btn, button, a.btn,
  .dropdown-item,
  .nav-link,
  .pagination .page-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   § 39 — CHECKOUT PAYMENT CARDS REDESIGN (v9.1.0)
   --------------------------------------------------------------------------
   Transforma a area "DETALHES DO PAGAMENTO" em cards visuais grandes,
   claros, com logos e descricoes. Resolve UX confusa de gateway selection.
   ========================================================================== */

/* --- 39.1 Container do bloco "DETALHES DO PAGAMENTO" --- */
#paymentGatewaysContainer {
  margin-top: 24px !important;
  padding: 0 !important;
}

#paymentGatewaysContainer > p.small.text-muted {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-600) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 16px !important;
  text-align: left !important;
  padding-left: 4px !important;
}

#paymentGatewaysContainer > p.small.text-muted::before {
  content: "\1F4B3  ";
  margin-right: 6px;
}

/* --- 39.2 Wrapper dos gateways: grid responsivo --- */
#paymentGatewaysContainer .text-center {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 14px !important;
  text-align: left !important;
}

/* --- 39.3 Reset dos labels: viram cards clicaveis --- */
#paymentGatewaysContainer label.radio-inline {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 18px 20px 18px 56px !important;
  margin: 0 !important;
  background: var(--zh-card-bg) !important;
  border: 2px solid var(--zh-border) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-size: 0 !important;
  min-height: 100px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

#paymentGatewaysContainer label.radio-inline:hover {
  border-color: var(--zh-primary-lighter) !important;
  background: var(--zh-primary-bg) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(11, 100, 244, 0.12) !important;
}

/* --- 39.4 Esconde o radio button nativo --- */
#paymentGatewaysContainer label.radio-inline input[type="radio"].payment-methods {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* --- 39.5 Radio button visual customizado (ponto azul a esquerda) --- */
#paymentGatewaysContainer label.radio-inline::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  top: 28px !important;
  width: 22px !important;
  height: 22px !important;
  border: 2px solid var(--zh-gray-300) !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: all 0.2s ease !important;
  z-index: 2 !important;
}

/* Estado selecionado: borda azul + check icon */
#paymentGatewaysContainer label.radio-inline:has(input:checked) {
  border-color: var(--zh-primary) !important;
  background: linear-gradient(135deg, #EBF2FE 0%, #F4F8FF 100%) !important;
  box-shadow: 0 4px 16px rgba(11, 100, 244, 0.15), 0 0 0 3px rgba(11, 100, 244, 0.1) !important;
  transform: translateY(-1px) !important;
}

#paymentGatewaysContainer label.radio-inline:has(input:checked)::before {
  border-color: var(--zh-primary) !important;
  background: var(--zh-primary) !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

/* --- 39.6 LOGOS dos gateways via background-image --- */

/* === MERCADO PAGO === */
#paymentGatewaysContainer label.radio-inline:has(input[value*="mercadopago"]),
#paymentGatewaysContainer label.radio-inline:has(input[value*="MercadoPago"]),
#paymentGatewaysContainer label.radio-inline:has(input[value*="mercado"]) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 70'><rect width='220' height='70' fill='%2300B1EA' rx='10'/><text x='110' y='32' text-anchor='middle' fill='white' font-family='Arial Black, Arial, sans-serif' font-weight='900' font-size='18'>Mercado</text><text x='110' y='54' text-anchor='middle' fill='white' font-family='Arial Black, Arial, sans-serif' font-weight='900' font-size='18'>Pago</text></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: 56px center !important;
  background-size: 110px auto !important;
}

/* Texto descritivo Mercado Pago */
#paymentGatewaysContainer label.radio-inline:has(input[value*="mercadopago"])::after,
#paymentGatewaysContainer label.radio-inline:has(input[value*="MercadoPago"])::after,
#paymentGatewaysContainer label.radio-inline:has(input[value*="mercado"])::after {
  content: "Pix \2022  Boleto \2022  Cartao a vista" !important;
  position: absolute !important;
  bottom: 12px !important;
  left: 56px !important;
  right: 16px !important;
  font-family: var(--zh-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-600) !important;
  letter-spacing: 0.3px !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  top: auto !important;
  text-align: left !important;
}

/* === STRIPE === */
#paymentGatewaysContainer label.radio-inline:has(input[value="stripe"]) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 70'><rect width='220' height='70' fill='%23635BFF' rx='10'/><text x='110' y='48' text-anchor='middle' fill='white' font-family='Helvetica Neue, Arial, sans-serif' font-weight='900' font-size='32' font-style='italic'>stripe</text></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: 56px center !important;
  background-size: 100px auto !important;
}

/* Texto descritivo Stripe */
#paymentGatewaysContainer label.radio-inline:has(input[value="stripe"])::after {
  content: "Cartao de Credito \2022  Cobranca Recorrente" !important;
  position: absolute !important;
  bottom: 12px !important;
  left: 56px !important;
  right: 16px !important;
  font-family: var(--zh-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-600) !important;
  letter-spacing: 0.3px !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  top: auto !important;
  text-align: left !important;
}

/* Badge "RECOMENDADO" no Stripe */
#paymentGatewaysContainer label.radio-inline:has(input[value="stripe"]) {
  position: relative !important;
}

/* --- 39.7 Check mark badge no canto superior direito quando selecionado --- */
#paymentGatewaysContainer label.radio-inline:has(input:checked) {
  position: relative !important;
}

#paymentGatewaysContainer label.radio-inline:has(input:checked)::after {
  /* override do texto descritivo para virar check */
}

/* Adiciona check separado via outro pseudo (usando outline) */
#paymentGatewaysContainer label.radio-inline:has(input:checked) {
  outline: none !important;
}

#paymentGatewaysContainer label.radio-inline:has(input:checked)::before {
  background: var(--zh-primary) !important;
  border-color: var(--zh-primary) !important;
  box-shadow: inset 0 0 0 4px #fff, 0 2px 8px rgba(11, 100, 244, 0.4) !important;
}

/* --- 39.8 BLOCO "Pagamento hoje: R$XX,XX" --- */
.cart-checkout-payment-amount,
.payment-amount-due,
#paymentDetailsContainer > .alert-info,
#paymentDetailsContainer > div:first-of-type[class*="alert"] {
  background: linear-gradient(135deg, #EBF2FE 0%, #F4F8FF 100%) !important;
  border: 1px solid var(--zh-primary-lighter) !important;
  border-left: 4px solid var(--zh-primary) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
  color: var(--zh-gray-900) !important;
  font-weight: 600 !important;
}

/* --- 39.9 AREA DE CARTAO SALVO (RemoteCreditCard) --- */
#existingCardsContainer.existing-cc-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
}

#existingCardsContainer .pay-method,
#existingCardsContainer label,
#existingCardsContainer .saved-card,
#existingCardsContainer > div,
#existingCardsContainer > li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 16px 20px 16px 52px !important;
  background: #fff !important;
  border: 2px solid var(--zh-border) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  min-height: 64px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

#existingCardsContainer label:hover,
#existingCardsContainer .pay-method:hover {
  border-color: var(--zh-primary-lighter) !important;
  background: var(--zh-primary-bg) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(11, 100, 244, 0.1) !important;
}

/* Esconde radio button nativo do cartao */
#existingCardsContainer input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Radio customizado a esquerda */
#existingCardsContainer label::before,
#existingCardsContainer .pay-method::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--zh-gray-300) !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: all 0.2s ease !important;
}

/* Estado checked do cartao salvo */
#existingCardsContainer label:has(input:checked),
#existingCardsContainer .pay-method:has(input:checked) {
  border-color: var(--zh-primary) !important;
  background: linear-gradient(135deg, #EBF2FE 0%, #F4F8FF 100%) !important;
  box-shadow: 0 4px 16px rgba(11, 100, 244, 0.15) !important;
}

#existingCardsContainer label:has(input:checked)::before,
#existingCardsContainer .pay-method:has(input:checked)::before {
  border-color: var(--zh-primary) !important;
  background: var(--zh-primary) !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

/* Icones de bandeira coloridos */
#existingCardsContainer .pay-method i.fab,
#existingCardsContainer label i.fab,
#existingCardsContainer i[class*="fa-cc-"] {
  font-size: 28px !important;
  margin-right: 14px !important;
  vertical-align: middle !important;
}
#existingCardsContainer i.fa-cc-visa { color: #1A1F71 !important; }
#existingCardsContainer i.fa-cc-mastercard { color: #EB001B !important; }
#existingCardsContainer i.fa-cc-amex { color: #006FCF !important; }
#existingCardsContainer i.fa-cc-discover { color: #FF6000 !important; }
#existingCardsContainer i.fa-cc-jcb { color: #0E4C96 !important; }
#existingCardsContainer i.fa-cc-diners-club { color: #0079BE !important; }
#existingCardsContainer i.fa-credit-card { color: var(--zh-gray-600) !important; font-size: 22px !important; margin-right: 12px !important; }

/* --- 39.10 AREA "Digite informacoes do novo cartao abaixo" --- */
.cc-input-container ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 12px !important;
}

.cc-input-container ul li {
  list-style: none !important;
  margin-bottom: 0 !important;
}

.cc-input-container ul li label.radio-inline,
label.radio-inline:has(input[name="ccinfo"][value="new"]) {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 14px 20px 14px 50px !important;
  background: #fff !important;
  border: 2px dashed var(--zh-gray-300) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--zh-gray-700) !important;
}

label.radio-inline:has(input[name="ccinfo"][value="new"])::before {
  content: "+" !important;
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  border: 2px solid var(--zh-gray-400) !important;
  border-radius: 50% !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--zh-gray-500) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
}

label.radio-inline:has(input[name="ccinfo"][value="new"]):hover {
  border-color: var(--zh-primary) !important;
  background: var(--zh-primary-bg) !important;
  color: var(--zh-primary) !important;
}

label.radio-inline:has(input[name="ccinfo"][value="new"]:checked) {
  border-color: var(--zh-primary) !important;
  border-style: solid !important;
  background: var(--zh-primary-bg) !important;
  color: var(--zh-primary-dark) !important;
  font-weight: 600 !important;
}

label.radio-inline:has(input[name="ccinfo"][value="new"]:checked)::before {
  border-color: var(--zh-primary) !important;
  background: var(--zh-primary) !important;
  color: #fff !important;
}

/* Esconde radio nativo do "novo cartao" */
label.radio-inline input[name="ccinfo"][value="new"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* --- 39.11 INPUT DE CVV (cartao salvo) --- */
.cvv-input {
  background: var(--zh-gray-50) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.cvv-input::before {
  content: "\1F512  Confirme o codigo de seguranca (CVV) do cartao" !important;
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-700) !important;
  margin-bottom: 10px !important;
  padding-left: 8px !important;
}

/* --- 39.12 CONTAINER DE INPUTS DE NOVO CARTAO --- */
#newCardInfo {
  background: var(--zh-gray-50) !important;
  border-radius: 10px !important;
  padding: 20px 16px !important;
  margin-top: 12px !important;
  border: 1px solid var(--zh-border-light) !important;
}

#newCardInfo .form-control {
  background: #fff !important;
  border: 1.5px solid var(--zh-border) !important;
  height: 46px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

#newCardInfo .form-control:focus {
  border-color: var(--zh-primary) !important;
  box-shadow: 0 0 0 3px rgba(11, 100, 244, 0.12) !important;
}

#newCardInfo .field-icon {
  color: var(--zh-gray-500) !important;
}

/* --- 39.13 BLOCO "DETALHES DO PAGAMENTO" titulo --- */
.payment-details-title,
h3:contains("DETALHES DO PAGAMENTO"),
form#frmCheckout .field-section h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
  margin: 32px 0 8px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--zh-border) !important;
  letter-spacing: 0.2px !important;
}

/* --- 39.14 RESPONSIVE: Mobile --- */
@media (max-width: 767.98px) {
  #paymentGatewaysContainer .text-center {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #paymentGatewaysContainer label.radio-inline {
    min-height: 96px !important;
    padding: 16px 16px 28px 50px !important;
  }

  #paymentGatewaysContainer label.radio-inline::before {
    left: 16px !important;
    width: 20px !important;
    height: 20px !important;
    top: 24px !important;
  }

  #paymentGatewaysContainer label.radio-inline:has(input[value*="mercadopago"]),
  #paymentGatewaysContainer label.radio-inline:has(input[value*="MercadoPago"]),
  #paymentGatewaysContainer label.radio-inline:has(input[value*="mercado"]),
  #paymentGatewaysContainer label.radio-inline:has(input[value="stripe"]) {
    background-position: 50px center !important;
    background-size: 100px auto !important;
  }

  #paymentGatewaysContainer label.radio-inline:has(input[value*="mercadopago"])::after,
  #paymentGatewaysContainer label.radio-inline:has(input[value*="MercadoPago"])::after,
  #paymentGatewaysContainer label.radio-inline:has(input[value*="mercado"])::after,
  #paymentGatewaysContainer label.radio-inline:has(input[value="stripe"])::after {
    left: 50px !important;
    font-size: 10px !important;
    bottom: 8px !important;
  }
}

/* ==========================================================================
   § 40 — CHECKOUT HOTFIXES (v9.1.1)
   --------------------------------------------------------------------------
   Corrige bugs visuais identificados em tela:
   - Radio nativo duplicado dentro dos cards de gateway
   - Cartao salvo quebrado em 5 cards separados (era para ser 1 unico)
   - Quadrado residual no "novo cartao"
   - Logos atualizadas com forma mais proxima das oficiais
   ========================================================================== */

/* ==========================================================================
   40.1  Esconde radios nativos com FORCA TOTAL (substitui display:none)
   ========================================================================== */

#paymentGatewaysContainer input[type="radio"],
#paymentGatewaysContainer input[type="radio"].payment-methods,
.cc-input-container input[type="radio"][name="ccinfo"],
#existingCardsContainer input[type="radio"] {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  visibility: hidden !important;
  display: block !important;
}

/* ==========================================================================
   40.2  CARTAO SALVO - Unifica os 5 divs em UM unico card
   --------------------------------------------------------------------------
   Estrutura WHMCS:
   <div class="existing-cc-grid">
     <div class="paymethod-info radio-inline" data-paymethod-id="1">[radio]</div>
     <div class="paymethod-info" data-paymethod-id="1">[icon]</div>
     <div class="paymethod-info" data-paymethod-id="1">[Mastercard-3130]</div>
     <div class="paymethod-info" data-paymethod-id="1">[Hospedagem teste]</div>
     <div class="paymethod-info" data-paymethod-id="1">[01/2027]</div>
   </div>
   ========================================================================== */

#existingCardsContainer.existing-cc-grid {
  display: grid !important;
  grid-template-columns: 36px 50px 1fr auto auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 22px !important;
  background: #fff !important;
  border: 2px solid var(--zh-border) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 0 14px 0 !important;
  position: relative !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  min-height: 72px !important;
}

#existingCardsContainer.existing-cc-grid:hover {
  border-color: var(--zh-primary-lighter) !important;
  background: var(--zh-primary-bg) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(11, 100, 244, 0.12) !important;
}

/* Estado checked: container inteiro fica azul */
#existingCardsContainer.existing-cc-grid:has(input:checked) {
  border-color: var(--zh-primary) !important;
  background: linear-gradient(135deg, #EBF2FE 0%, #F4F8FF 100%) !important;
  box-shadow: 0 6px 20px rgba(11, 100, 244, 0.18), 0 0 0 3px rgba(11, 100, 244, 0.08) !important;
}

/* Reset de cada cell (paymethod-info): sem border, sem padding */
#existingCardsContainer .paymethod-info {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: auto !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  font-size: 14px !important;
  color: var(--zh-gray-800) !important;
  font-weight: 500 !important;
  position: relative !important;
}

#existingCardsContainer .paymethod-info::before,
#existingCardsContainer .paymethod-info::after {
  display: none !important;
}

/* Cell #1 - radio: agora vira o pseudo-radio visual */
#existingCardsContainer .paymethod-info.radio-inline,
#existingCardsContainer .paymethod-info:first-child {
  width: 36px !important;
  height: 36px !important;
  justify-content: center !important;
  position: relative !important;
}

#existingCardsContainer .paymethod-info.radio-inline::before,
#existingCardsContainer .paymethod-info:first-child::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  border: 2px solid var(--zh-gray-300) !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: all 0.2s ease !important;
  position: static !important;
}

/* Quando checked: bolinha vira azul preenchida */
#existingCardsContainer.existing-cc-grid:has(input:checked) .paymethod-info.radio-inline::before,
#existingCardsContainer.existing-cc-grid:has(input:checked) .paymethod-info:first-child::before {
  border-color: var(--zh-primary) !important;
  background: var(--zh-primary) !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

/* Click na card inteira ativa o radio */
#existingCardsContainer.existing-cc-grid {
  cursor: pointer !important;
}

#existingCardsContainer.existing-cc-grid input[type="radio"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 5 !important;
  left: 0 !important;
  margin: 0 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Cell #2 - icone bandeira */
#existingCardsContainer .paymethod-info:nth-child(2) {
  justify-content: center !important;
}

#existingCardsContainer .paymethod-info i {
  font-size: 32px !important;
  margin: 0 !important;
}

/* Cell #3 - nome cartao (MasterCard-3130) */
#existingCardsContainer .paymethod-info:nth-child(3) {
  font-weight: 600 !important;
  color: var(--zh-gray-900) !important;
  font-size: 15px !important;
}

/* Cell #4 - descricao (Hospedagem teste) */
#existingCardsContainer .paymethod-info:nth-child(4) {
  font-size: 13px !important;
  color: var(--zh-gray-600) !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

/* Cell #5 - data expiracao */
#existingCardsContainer .paymethod-info:nth-child(5) {
  font-size: 12px !important;
  color: var(--zh-gray-500) !important;
  font-weight: 600 !important;
  background: var(--zh-gray-100) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-family: var(--zh-font-mono, monospace) !important;
}

/* Override do hover do label/pay-method que estava no §39 */
#existingCardsContainer .pay-method,
#existingCardsContainer label,
#existingCardsContainer .saved-card,
#existingCardsContainer > div:not(.paymethod-info),
#existingCardsContainer > li {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: auto !important;
  box-shadow: none !important;
  display: contents !important;
}

/* ==========================================================================
   40.3  "Digite informacoes do novo cartao abaixo" - corrigir radio residual
   ========================================================================== */

.cc-input-container ul li label.radio-inline,
label.radio-inline:has(input[name="ccinfo"][value="new"]) {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 14px 20px 14px 52px !important;
  background: #fff !important;
  border: 2px dashed var(--zh-gray-300) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--zh-gray-700) !important;
}

/* Esconde QUALQUER input dentro do label "novo cartao" */
label.radio-inline:has(input[name="ccinfo"][value="new"]) input[type="radio"],
label.radio-inline input[name="ccinfo"][value="new"] {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  visibility: hidden !important;
  pointer-events: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* O "+" customizado fica do lado esquerdo */
label.radio-inline:has(input[name="ccinfo"][value="new"])::before {
  content: "+" !important;
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  border: 2px solid var(--zh-gray-400) !important;
  border-radius: 50% !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--zh-gray-500) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
}

/* ==========================================================================
   40.4  Gateway cards - corrigir radio nativo aparecendo dentro do label
   ========================================================================== */

#paymentGatewaysContainer label.radio-inline {
  /* mesma config do §39, com reforco anti-radio-nativo */
  overflow: hidden !important;
}

#paymentGatewaysContainer label.radio-inline > input[type="radio"] {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  visibility: hidden !important;
  display: none !important;
}

/* Esconde qualquer span/text-node residual deixando font-size 0 */
#paymentGatewaysContainer label.radio-inline {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

/* Restaurar font-size apenas no ::before/::after (que pegam de proprio) */
#paymentGatewaysContainer label.radio-inline::before,
#paymentGatewaysContainer label.radio-inline::after {
  font-size: 11px !important;
  line-height: 1 !important;
}

/* ==========================================================================
   40.5  AVATAR DA CONTA - melhora o quadrado vazio do nome do cliente
   ========================================================================== */

.account-section .account-avatar,
label[for*="account"] .avatar,
label.radio-inline .avatar,
.client-name-row > .avatar,
form label > .avatar:empty,
label.radio-inline > div:empty:first-child {
  display: none !important;
}

/* Melhorar o card "ESCOLHA A CONTA" geral */
.account-selection .radio-inline,
label.radio-inline:has(.account-info),
form#frmCheckout > div:first-of-type label.radio-inline {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  border-radius: 10px !important;
  border: 2px solid var(--zh-border) !important;
  background: #fff !important;
  margin-bottom: 8px !important;
  transition: all 0.2s ease !important;
}

/* ==========================================================================
   40.6  LOGOS dos gateways - versao SVG mais limpa (placeholder ate user mandar oficiais)
   ========================================================================== */

/* MERCADO PAGO - logo redondo amarelo com handshake azul (estilo oficial) */
#paymentGatewaysContainer label.radio-inline:has(input[value*="mercadopago"]),
#paymentGatewaysContainer label.radio-inline:has(input[value*="MercadoPago"]),
#paymentGatewaysContainer label.radio-inline:has(input[value*="mercado"]) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 70'><circle cx='35' cy='35' r='30' fill='%23FFE600'/><path d='M20 35c5-7 12-9 18-2-3 4-7 4-10 1l-2 3c4 5 11 5 15 0l3 3c-7 9-19 8-26-1-1-1-1-3 2-4z' fill='%2300A1EA'/><text x='75' y='32' fill='%23333' font-family='Helvetica,Arial,sans-serif' font-weight='800' font-size='18'>Mercado</text><text x='75' y='52' fill='%2300A1EA' font-family='Helvetica,Arial,sans-serif' font-weight='800' font-size='18'>Pago</text></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: 56px center !important;
  background-size: 150px auto !important;
}

/* STRIPE - cor purple-blue oficial #635BFF + texto italico */
#paymentGatewaysContainer label.radio-inline:has(input[value="stripe"]) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 70'><rect width='240' height='70' fill='%23635BFF' rx='12'/><text x='120' y='48' text-anchor='middle' fill='white' font-family='Helvetica,Arial,sans-serif' font-weight='900' font-size='34' font-style='italic' letter-spacing='-1'>stripe</text></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: 56px center !important;
  background-size: 110px auto !important;
}

/* ==========================================================================
   40.7  Notas Adicionais - melhora visual do textarea
   ========================================================================== */

textarea[name="notes"],
#cartNotes,
.notes-section textarea {
  border: 1.5px solid var(--zh-border) !important;
  border-radius: 10px !important;
  padding: 14px !important;
  min-height: 100px !important;
  font-size: 14px !important;
  background: #fff !important;
  transition: all 0.2s ease !important;
  resize: vertical !important;
}

textarea[name="notes"]:focus,
#cartNotes:focus {
  border-color: var(--zh-primary) !important;
  box-shadow: 0 0 0 3px rgba(11, 100, 244, 0.1) !important;
  outline: none !important;
}

/* ==========================================================================
   40.8  Aviso de seguranca (IP gravado) - estilo destaque
   ========================================================================== */

.alert.alert-warning:has(strong),
.alert-info.text-center:has(.fa-lock),
.cart .alert-warning {
  background: linear-gradient(135deg, #FFF8EB 0%, #FFFAF2 100%) !important;
  border: 1px solid #FDE68A !important;
  border-left: 4px solid #EA8C00 !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  font-size: 13px !important;
  color: var(--zh-gray-700) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ==========================================================================
   § 41 — CHECKOUT HOTFIXES PART 2 (v9.1.2)
   --------------------------------------------------------------------------
   Bugs reportados via screenshot:
   1) Radio nativo AINDA aparece ao lado da bandeira do cartao salvo
      e ao lado do "+" no "novo cartao"
   2) Campos do cartao bagunçados (numero/expiracao/cvv mal alinhados)
   3) Telefone com flag intl-tel-input sobreposta ao icone
   4) Aviso de IP com layout quebrado (IP indo pra direita)
   ========================================================================== */

/* ==========================================================================
   41.1  RADIOS NATIVOS - opcao nuclear: estilizar o proprio input
   --------------------------------------------------------------------------
   Estrategia: ao inves de esconder o radio e usar pseudo, transformar
   o proprio <input type="radio"> no circulo visual. Mais robusto.
   ========================================================================== */

/* CARTAO SALVO - radio na cell 1 vira o proprio circulo visual */
#existingCardsContainer .paymethod-info.radio-inline {
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

/* Remove o pseudo do §40 (que causava 2 elementos visuais) */
#existingCardsContainer .paymethod-info.radio-inline::before,
#existingCardsContainer .paymethod-info:first-child::before,
#existingCardsContainer .paymethod-info.radio-inline::after,
#existingCardsContainer .paymethod-info:first-child::after {
  display: none !important;
  content: none !important;
}

/* O radio EM SI vira o circulo visual */
#existingCardsContainer .paymethod-info.radio-inline input[type="radio"],
#existingCardsContainer input[type="radio"][name="ccinfo"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid var(--zh-gray-300) !important;
  border-radius: 50% !important;
  background: #fff !important;
  cursor: pointer !important;
  position: static !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: block !important;
  clip: auto !important;
  clip-path: none !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  outline: none !important;
}

#existingCardsContainer .paymethod-info.radio-inline input[type="radio"]:hover,
#existingCardsContainer input[type="radio"][name="ccinfo"]:hover {
  border-color: var(--zh-primary-lighter) !important;
}

#existingCardsContainer .paymethod-info.radio-inline input[type="radio"]:checked,
#existingCardsContainer input[type="radio"][name="ccinfo"]:checked {
  border-color: var(--zh-primary) !important;
  background: var(--zh-primary) !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

/* Hover do card inteiro tambem destaca o radio */
#existingCardsContainer.existing-cc-grid:hover input[type="radio"]:not(:checked) {
  border-color: var(--zh-primary-lighter) !important;
}

/* ==========================================================================
   41.2  RADIO "USE NEW CARD" - mesmo tratamento + "+" estilizado
   ========================================================================== */

/* Container do "Digite informacoes do novo cartao" */
.cc-input-container > ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 !important;
}

.cc-input-container > ul > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cc-input-container > ul > li > label.radio-inline {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  background: #fff !important;
  border: 2px dashed var(--zh-gray-300) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--zh-gray-700) !important;
  position: relative !important;
}

/* Anula pseudo "+" do §40 e qualquer ::after antigo */
.cc-input-container > ul > li > label.radio-inline::before,
.cc-input-container > ul > li > label.radio-inline::after,
label.radio-inline:has(input[name="ccinfo"][value="new"])::before,
label.radio-inline:has(input[name="ccinfo"][value="new"])::after {
  display: none !important;
  content: none !important;
}

/* O proprio radio "new" vira o circulo com "+" */
.cc-input-container > ul > li > label.radio-inline > input[type="radio"][value="new"],
input[type="radio"][name="ccinfo"][value="new"],
input[type="radio"][name="ccinfo"]#new {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid var(--zh-gray-400) !important;
  border-radius: 50% !important;
  background: #fff !important;
  cursor: pointer !important;
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  clip: auto !important;
  clip-path: none !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}

/* "+" interno via pseudo no proprio radio */
.cc-input-container > ul > li > label.radio-inline > input[type="radio"][value="new"]::before,
input[type="radio"][name="ccinfo"][value="new"]::before {
  content: "+" !important;
  display: block !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-500) !important;
  line-height: 1 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
}

/* Quando "new" esta selecionado: borda azul, "+" branco em fundo azul */
.cc-input-container > ul > li > label.radio-inline:has(input:checked) {
  border-color: var(--zh-primary) !important;
  border-style: solid !important;
  background: linear-gradient(135deg, #EBF2FE 0%, #F4F8FF 100%) !important;
  color: var(--zh-primary) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(11, 100, 244, 0.12) !important;
}

input[type="radio"][name="ccinfo"][value="new"]:checked {
  border-color: var(--zh-primary) !important;
  background: var(--zh-primary) !important;
}

input[type="radio"][name="ccinfo"][value="new"]:checked::before {
  color: #fff !important;
}

/* Hover */
.cc-input-container > ul > li > label.radio-inline:hover {
  border-color: var(--zh-primary-lighter) !important;
  background: var(--zh-primary-bg) !important;
}

/* ==========================================================================
   41.3  FORMULARIO NOVO CARTAO - layout grid 2/1/1 (numero/exp/cvv)
   ========================================================================== */

#newCardInfo.row {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr !important;
  gap: 14px !important;
  margin: 16px 0 0 0 !important;
}

#newCardInfo > div[class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: unset !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* Mobile: empilha */
@media (max-width: 720px) {
  #newCardInfo.row {
    grid-template-columns: 1fr !important;
  }
}

/* form-group dentro do newCardInfo */
#newCardInfo .form-group {
  margin: 0 !important;
  position: relative !important;
}

/* Icone esquerdo (label.field-icon) - fica posicionado dentro do input */
#newCardInfo .form-group.prepend-icon {
  position: relative !important;
}

#newCardInfo .form-group.prepend-icon > label.field-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--zh-gray-500) !important;
  font-size: 14px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background: transparent !important;
  border: 0 !important;
}

#newCardInfo input[type="tel"],
#newCardInfo input[type="text"] {
  height: 48px !important;
  padding: 12px 14px 12px 42px !important;
  border: 1.5px solid var(--zh-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

#newCardInfo input:focus {
  border-color: var(--zh-primary) !important;
  box-shadow: 0 0 0 3px rgba(11, 100, 244, 0.1) !important;
  outline: none !important;
}

/* Input group do CVV (com botao "?") */
#newCardInfo .input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}

#newCardInfo .input-group > input {
  flex: 1 1 auto !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

#newCardInfo .input-group .input-group-btn,
#newCardInfo .input-group .input-group-append {
  display: flex !important;
}

#newCardInfo .input-group .input-group-btn .btn,
#newCardInfo .input-group .input-group-append .btn {
  height: 48px !important;
  padding: 0 14px !important;
  border: 1.5px solid var(--zh-border) !important;
  border-left: 0 !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  background: var(--zh-gray-100) !important;
  color: var(--zh-gray-600) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

#newCardInfo .input-group .btn:hover {
  background: var(--zh-gray-200) !important;
}

/* Container do "Salvar este cartao para uso futuro" - separa visualmente */
#newCardSaveSettings {
  margin-top: 14px !important;
}

#newCardSaveSettings .row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 0 !important;
}

#newCardSaveSettings #inputDescriptionContainer,
#newCardSaveSettings #inputNoStoreContainer {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

#newCardSaveSettings input[name="ccdescription"] {
  height: 44px !important;
  padding: 10px 14px 10px 38px !important;
  border: 1.5px solid var(--zh-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 13px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#newCardSaveSettings .prepend-icon {
  position: relative !important;
}

#newCardSaveSettings .prepend-icon > label.field-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  color: var(--zh-gray-500) !important;
  font-size: 13px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background: transparent !important;
  border: 0 !important;
  width: auto !important;
  height: auto !important;
}

@media (max-width: 720px) {
  #newCardSaveSettings .row {
    grid-template-columns: 1fr !important;
  }
}

/* CVV pequeno do cartao salvo (#existingCardInfo) - mesma vibe */
#existingCardInfo {
  margin: 14px 0 !important;
  display: flex !important;
}

#existingCardInfo > div[class*="col-"] {
  width: auto !important;
  max-width: 220px !important;
  padding: 0 !important;
}

#existingCardInfo .form-group {
  margin: 0 !important;
}

#existingCardInfo input[type="tel"] {
  height: 44px !important;
  padding: 10px 14px 10px 40px !important;
  border: 1.5px solid var(--zh-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
}

/* ==========================================================================
   41.4  TELEFONE intl-tel-input - FIX flag x icone duplicado
   --------------------------------------------------------------------------
   intl-tel-input injeta a flag dentro do input. O icone .field-icon
   do template fica POR BAIXO da flag e o texto sobrepoe. Solucao:
   esconder o icone do template quando .iti esta ativo
   ========================================================================== */

/* Quando intl-tel-input esta ativo, esconder o icone original */
.iti ~ label.field-icon,
.iti + label.field-icon,
.form-group:has(.iti) > label.field-icon,
.form-group.prepend-icon:has(.iti) > label.field-icon {
  display: none !important;
}

/* O wrapper .iti deve ocupar largura total */
.iti {
  display: block !important;
  position: relative !important;
  width: 100% !important;
}

/* Input dentro do .iti - padding-left para a flag */
.iti input[type="tel"],
.iti > input,
.iti.iti--allow-dropdown > input {
  padding-left: 56px !important;
  height: 48px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1.5px solid var(--zh-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 14px !important;
  font-family: var(--zh-font-sans, inherit) !important;
}

/* Flag container fica acima do input com z-index */
.iti__flag-container,
.iti__country-container {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  padding: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
}

.iti__selected-flag {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 8px 0 12px !important;
  background: transparent !important;
  border-right: 1px solid var(--zh-border) !important;
}

.iti__arrow {
  margin-left: 6px !important;
}

/* Telefone SEM intl-tel-input (caso nao carregue): mantem icone */
.form-group.prepend-icon > input[type="tel"][name="phonenumber"]:not(.iti__tel-input) {
  padding-left: 42px !important;
}

/* ==========================================================================
   41.5  AVISO DE SEGURANCA (IP gravado) - layout block + icone absoluto
   --------------------------------------------------------------------------
   O HTML eh:
   <div class="alert alert-warning checkout-security-msg">
     <i class="fas fa-lock"></i>
     Texto antes (<strong>187.84.7.157</strong>) texto depois
     <div class="clearfix"></div>
   </div>
   Flex quebrava porque o <strong> inline ficava como flex item separado.
   ========================================================================== */

.alert.alert-warning.checkout-security-msg,
.checkout-security-msg,
.alert.alert-warning:has(.fa-lock),
.cart .alert-warning {
  display: block !important;
  text-align: left !important;
  position: relative !important;
  padding: 16px 20px 16px 52px !important;
  background: linear-gradient(135deg, #FFF8EB 0%, #FFFAF2 100%) !important;
  border: 1px solid #FDE68A !important;
  border-left: 4px solid #EA8C00 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--zh-gray-700) !important;
  margin: 16px 0 !important;
  align-items: unset !important;
  gap: unset !important;
}

.alert.alert-warning.checkout-security-msg > i.fa-lock,
.alert.alert-warning.checkout-security-msg i.fas.fa-lock,
.checkout-security-msg > i.fa-lock,
.checkout-security-msg i.fas.fa-lock {
  position: absolute !important;
  left: 18px !important;
  top: 18px !important;
  font-size: 18px !important;
  color: #EA8C00 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: inline-block !important;
}

.alert.alert-warning.checkout-security-msg strong,
.checkout-security-msg strong,
.checkout-security-msg b {
  display: inline !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
  background: rgba(234, 140, 0, 0.08) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  font-family: var(--zh-font-mono, monospace) !important;
  font-size: 12.5px !important;
}

.checkout-security-msg .clearfix {
  display: none !important;
}

/* ==========================================================================
   41.6  REMOVE quadrado da AVATAR vazia ao lado do "Jamile"
   --------------------------------------------------------------------------
   Pode ser um <div class="avatar"> vazio ou um placeholder dentro do
   label da conta selecionada
   ========================================================================== */

label.radio-inline > div:empty,
label.radio-inline > span:empty,
.account-info > div:empty:first-child,
.account-selection > label > div:empty {
  display: none !important;
}

/* ==========================================================================
   41.7  Garantir que NAO ha mais residuos do §40 conflitantes
   ========================================================================== */

/* Reseta override do §40.2 que punha o radio com inset:0 (cobria o card) */
#existingCardsContainer.existing-cc-grid input[type="radio"] {
  position: static !important;
  inset: auto !important;
  width: 22px !important;
  height: 22px !important;
  left: auto !important;
  top: auto !important;
  z-index: auto !important;
}

/* ==========================================================================
   § 42 — iCheck NUKE + FIX DEFINITIVO (v9.1.3)
   --------------------------------------------------------------------------
   DIAGNOSTICO FINAL:
   WHMCS wrapa TODOS os radios/checkboxes com o plugin iCheck que cria:
     <div class="iradio_square-blue">
       <input type="radio" style="position:absolute; opacity:0;">
       <ins class="iCheck-helper" style="..."></ins>
     </div>
   A div .iradio_square-blue tem um sprite PNG como background showing
   o circulo vazio/preenchido. ISSO eh o "quadrado branco" visivel.

   Estrategia: neutralizar o wrapper (sem sprite, sem tamanho fixo) e
   mostrar o input nativo com appearance:none estilizado pelo §41.

   ADICIONALMENTE:
   - #newCardInfo tinha display:grid!important bloqueando JS toggle
   - .input-group quebrava pq btn "?" nao era flex item
   - Avatar vazio ao lado do nome da conta tb era iCheck
   ========================================================================== */

/* ==========================================================================
   42.1  NEUTRALIZA WRAPPERS DO iCheck (sprite PNG)
   --------------------------------------------------------------------------
   Todos os wrappers iradio_*/icheckbox_* ficam "invisiveis" como wrapper
   mas mantem filhos (input nativo) visiveis. Usamos display:contents que
   faz o wrapper sumir do layout mas preserva os filhos.
   ========================================================================== */

.iradio_square-blue,
.icheckbox_square-blue,
.iradio_square-green,
.icheckbox_square-green,
.iradio_minimal-blue,
.icheckbox_minimal-blue,
.iradio_flat-blue,
.icheckbox_flat-blue,
div[class^="iradio_"],
div[class^="icheckbox_"],
div[class*=" iradio_"],
div[class*=" icheckbox_"] {
  background-image: none !important;
  background: transparent !important;
  background-color: transparent !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  position: static !important;
  overflow: visible !important;
  vertical-align: middle !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}

/* ==========================================================================
   42.2  ESCONDE o <ins class="iCheck-helper"> (overlay de clique)
   --------------------------------------------------------------------------
   O proprio input agora eh clicavel, nao precisa mais do helper
   ========================================================================== */

ins.iCheck-helper,
.iCheck-helper {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ==========================================================================
   42.3  FORCA o input nativo a ser visivel E clicavel
   --------------------------------------------------------------------------
   iCheck aplica inline style="position:absolute; opacity:0" no input.
   !important vence inline-style sem !important.
   ========================================================================== */

.iradio_square-blue > input[type="radio"],
.icheckbox_square-blue > input[type="checkbox"],
div[class^="iradio_"] > input[type="radio"],
div[class^="icheckbox_"] > input[type="checkbox"],
div[class*=" iradio_"] > input[type="radio"],
div[class*=" icheckbox_"] > input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border: 2px solid var(--zh-gray-300) !important;
  border-radius: 50% !important;
  background: #fff !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
}

/* Checkbox quadrado com cantos arredondados */
div[class^="icheckbox_"] > input[type="checkbox"],
div[class*=" icheckbox_"] > input[type="checkbox"] {
  border-radius: 5px !important;
}

/* Estado checked */
.iradio_square-blue.checked > input[type="radio"],
div[class^="iradio_"].checked > input[type="radio"],
div[class^="iradio_"] > input[type="radio"]:checked {
  border-color: var(--zh-primary) !important;
  background: var(--zh-primary) !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

.icheckbox_square-blue.checked > input[type="checkbox"],
div[class^="icheckbox_"].checked > input[type="checkbox"],
div[class^="icheckbox_"] > input[type="checkbox"]:checked {
  border-color: var(--zh-primary) !important;
  background: var(--zh-primary) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
  background-size: 14px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Hover */
.iradio_square-blue.hover > input,
div[class^="iradio_"].hover > input,
div[class^="iradio_"] > input:hover,
div[class^="icheckbox_"] > input:hover {
  border-color: var(--zh-primary-lighter) !important;
}

/* Disabled */
.iradio_square-blue.disabled > input,
div[class^="iradio_"].disabled > input {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ==========================================================================
   42.4  CARTAO SALVO - special case (esta dentro de cell grid)
   ========================================================================== */

#existingCardsContainer .paymethod-info.radio-inline div[class^="iradio_"],
#existingCardsContainer .paymethod-info.radio-inline .iradio_square-blue {
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#existingCardsContainer .paymethod-info.radio-inline input[type="radio"] {
  width: 22px !important;
  height: 22px !important;
}

/* ==========================================================================
   42.5  "USE NEW CARD" radio - wrapper iCheck tambem neutralizado
   --------------------------------------------------------------------------
   Aqui o radio esta dentro de <label> e tem "+" como decoracao
   ========================================================================== */

.cc-input-container > ul > li > label.radio-inline div[class^="iradio_"],
.cc-input-container > ul > li > label.radio-inline .iradio_square-blue {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  background-image: none !important;
}

.cc-input-container > ul > li > label.radio-inline input[type="radio"][value="new"] {
  width: 24px !important;
  height: 24px !important;
  border: 2px solid var(--zh-gray-400) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

/* "+" via pseudo NO input (funciona em alguns browsers com appearance:none) */
.cc-input-container > ul > li > label.radio-inline input[type="radio"][value="new"]::before {
  content: "+" !important;
  display: block !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-500) !important;
  line-height: 1 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: transparent !important;
  border: 0 !important;
  width: auto !important;
  height: auto !important;
}

.cc-input-container > ul > li > label.radio-inline input[type="radio"][value="new"]:checked {
  border-color: var(--zh-primary) !important;
  background: var(--zh-primary) !important;
  box-shadow: none !important;
}

.cc-input-container > ul > li > label.radio-inline input[type="radio"][value="new"]:checked::before {
  color: #fff !important;
}

/* ==========================================================================
   42.6  REMOVE display:grid!important que bloqueava JS toggle
   --------------------------------------------------------------------------
   WHMCS JS faz #newCardInfo.style.display = 'none' quando selecionado
   "cartao salvo". Meu !important bloqueava isso. Solucao: aplicar grid
   SO quando o elemento NAO esta escondido inline.
   ========================================================================== */

/* Remove o override do §41 (reseta) */
#newCardInfo.row {
  display: revert;
}

/* Aplica grid SO se nao estiver hidden */
#newCardInfo.row:not([style*="display: none"]):not([style*="display:none"]):not(.w-hidden) {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr !important;
  gap: 14px !important;
  margin: 16px 0 0 0 !important;
}

/* Mesma logica para #existingCardInfo */
#existingCardInfo.row {
  display: revert;
}

#existingCardInfo.row:not([style*="display: none"]):not([style*="display:none"]):not(.w-hidden) {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 12px 0 !important;
  padding: 12px 16px !important;
  background: var(--zh-gray-50) !important;
  border-radius: 8px !important;
  border: 1px solid var(--zh-border) !important;
}

#existingCardInfo::before {
  content: "🔒 Confirme o código de segurança (CVV) do cartão" !important;
  font-size: 13px !important;
  color: var(--zh-gray-700) !important;
  font-weight: 500 !important;
  flex: 1 !important;
}

#existingCardInfo > div[class*="col-"] {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 180px !important;
  padding: 0 !important;
}

/* Mesmo para #newCardSaveSettings */
#newCardSaveSettings .row:not([style*="display: none"]):not([style*="display:none"]):not(.w-hidden) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 14px 0 0 0 !important;
}

/* ==========================================================================
   42.7  INPUT GROUP ("?" button) - flex definitivo
   ========================================================================== */

.cc-input-container .input-group,
#newCardInfo .input-group,
#existingCardInfo .input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
  position: relative !important;
}

.cc-input-container .input-group > input,
.cc-input-container .input-group > .form-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 0 !important;
}

.cc-input-container .input-group > .input-group-btn,
.cc-input-container .input-group > .input-group-append,
.cc-input-container .input-group-append,
.cc-input-container .input-group-btn {
  display: flex !important;
  flex-shrink: 0 !important;
  margin-left: 0 !important;
  position: static !important;
  align-items: stretch !important;
}

.cc-input-container .input-group > .input-group-btn > .btn,
.cc-input-container .input-group > .input-group-append > .btn,
.cc-input-container .input-group .btn {
  height: auto !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border: 1.5px solid var(--zh-border) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  background: var(--zh-gray-100) !important;
  color: var(--zh-gray-700) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.cc-input-container .input-group .btn:hover {
  background: var(--zh-gray-200) !important;
  color: var(--zh-gray-900) !important;
}

/* CVV menor no #existingCardInfo */
#existingCardInfo .input-group > .btn {
  min-height: 44px !important;
}

/* ==========================================================================
   42.8  FIELD LAYOUT - icones dentro dos inputs (new card)
   --------------------------------------------------------------------------
   Recalibra o padding-left e icon-position para ficar perfeito
   ========================================================================== */

#newCardInfo .form-group.prepend-icon,
.cc-input-container .form-group.prepend-icon {
  position: relative !important;
  margin: 0 !important;
}

#newCardInfo .form-group.prepend-icon > label.field-icon,
.cc-input-container .form-group.prepend-icon > label.field-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 16px !important;
  height: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--zh-gray-400) !important;
  font-size: 13px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#newCardInfo input,
.cc-input-container .form-group.prepend-icon input {
  height: 48px !important;
  padding: 12px 14px 12px 40px !important;
  border: 1.5px solid var(--zh-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  color: var(--zh-gray-900) !important;
  line-height: 1.4 !important;
}

#newCardInfo input::placeholder {
  color: var(--zh-gray-400) !important;
  font-weight: 400 !important;
}

#newCardInfo input:focus {
  border-color: var(--zh-primary) !important;
  box-shadow: 0 0 0 3px rgba(11, 100, 244, 0.1) !important;
  outline: none !important;
}

/* CVV pequeno do cartao salvo */
#existingCardInfo input[type="tel"] {
  height: 44px !important;
  padding: 10px 14px 10px 40px !important;
  border: 1.5px solid var(--zh-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#existingCardInfo .form-group.prepend-icon > label.field-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--zh-gray-400) !important;
  font-size: 13px !important;
  z-index: 2 !important;
  pointer-events: none !important;
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
}

/* ==========================================================================
   42.9  REMOVE todos os pseudo-elementos do §40 e §41 que criavam
         "circulos extras" e conflitavam com o radio nativo
   ========================================================================== */

#existingCardsContainer .paymethod-info::before,
#existingCardsContainer .paymethod-info::after,
#existingCardsContainer .paymethod-info.radio-inline::before,
#existingCardsContainer .paymethod-info.radio-inline::after,
#existingCardsContainer .paymethod-info:first-child::before,
#existingCardsContainer .paymethod-info:first-child::after,
.cc-input-container > ul > li > label.radio-inline::before,
.cc-input-container > ul > li > label.radio-inline::after,
label.radio-inline:has(input[name="ccinfo"][value="new"])::before,
label.radio-inline:has(input[name="ccinfo"][value="new"])::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   42.10  AVATAR VAZIO / ACCOUNT SELECTION - esconde icheck wrappers extras
   --------------------------------------------------------------------------
   "Criar uma nova conta" mostra circulo iCheck vazio do lado. Mesma logica.
   ========================================================================== */

form#frmCheckout label.radio-inline div[class^="iradio_"] {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
}

/* Se houver DIV vazia residual (nao-iCheck) ao lado do nome da conta */
form#frmCheckout label.radio-inline > div:empty,
form#frmCheckout label.radio-inline > span:empty:not(.fa) {
  display: none !important;
}

/* ==========================================================================
   42.11  GATEWAY CARDS (Mercado Pago / Stripe) - mantem pseudo do §39
   --------------------------------------------------------------------------
   Aqui o pseudo ::before do label eh o circulo. O radio nativo dentro
   tinha font-size:0 trick. Com iCheck, o wrapper .iradio aparece ANTES
   do pseudo. Precisa zerar o wrapper mas preservar o pseudo.
   ========================================================================== */

#paymentGatewaysContainer label.radio-inline div[class^="iradio_"] {
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline !important;
  background: transparent !important;
  background-image: none !important;
  overflow: visible !important;
  position: absolute !important;
  visibility: hidden !important;
}

#paymentGatewaysContainer label.radio-inline div[class^="iradio_"] > input[type="radio"] {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  visibility: hidden !important;
  pointer-events: none !important;
  border: 0 !important;
  background: transparent !important;
  display: none !important;
}

/* ==========================================================================
   42.12  DEFENSE - se Stripe Elements renderizar fields proprios,
          esconder o #newCardInfo nativo (sera substituido por iframe)
   --------------------------------------------------------------------------
   Quando Stripe Elements esta ativo, o body ganha uma classe ou o
   container Stripe renderiza em #paymentGatewayInput. Se existir iframe
   Stripe, esconde os fields nativos.
   ========================================================================== */

/* Se o paymentGatewayInput tiver conteudo (iframe Stripe), esconde CC nativo */
#paymentGatewayInput:not(:empty) ~ .cc-input-container #newCardInfo,
#paymentGatewayInput iframe[name^="__privateStripeFrame"] ~ * #newCardInfo {
  /* nao forca - deixa o proprio Stripe JS decidir */
}

/* ==========================================================================
   42.13  TOGGLE WHMCS - classe .w-hidden e style inline display:none
   --------------------------------------------------------------------------
   Garante que classe padrao do WHMCS esconde mesmo com custom overrides
   ========================================================================== */

.w-hidden,
[class*="w-hidden"] {
  display: none !important;
}

/* ==========================================================================
   42.14  NOTAS - corrige espacamento do section "Digite informacoes do novo"
   ========================================================================== */

.cc-input-container > ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 14px 0 !important;
}

.cc-input-container > ul > li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* ==========================================================================
   § 43 — TOGGLE FIX + ORDER COMPLETE REDESIGN + STICKY FOOTER (v9.1.4)
   --------------------------------------------------------------------------
   DIAGNOSTICO:
   1) §42.13 adicionou .w-hidden {display:none!important} que BLOQUEOU
      jQuery.slideDown(). Por isso #creditCardInputFields nao aparece
      quando user troca de gateway.
   2) Pagina complete.tpl (Pedido gerado) usa design generico do WHMCS
   3) Pagina complete tem pouco conteudo → espaco branco grande antes
      do footer
   ========================================================================== */

/* ==========================================================================
   43.1  FIX CRITICO: UNDO .w-hidden !important do §42.13
   --------------------------------------------------------------------------
   Theme original: .w-hidden { display: none; }  (SEM !important)
   Assim slideDown/slideUp do jQuery pode sobrescrever via style inline.
   ========================================================================== */

.w-hidden {
  display: none;
  /* SEM !important - permite jQuery slideDown/slideUp funcionar */
}

/* Se ALGUEM (theme ou outro CSS) colocou !important, aqui reverte */
.cc-input-container.w-hidden[style*="display: block"],
.cc-input-container.w-hidden[style*="display:block"],
#creditCardInputFields[style*="display: block"],
#creditCardInputFields[style*="display:block"],
.w-hidden[style*="display: block"],
.w-hidden[style*="display:block"] {
  display: block !important;
}

/* Garante que #creditCardInputFields respeita o style inline do jQuery */
#creditCardInputFields {
  transition: none !important;
}

/* ==========================================================================
   43.2  PAGINA COMPLETE (Pedido Gerado) - redesign celebrativo
   --------------------------------------------------------------------------
   Estrutura atual:
   <div id="order-standard_cart">
     <div class="row">
       <div class="cart-sidebar">[...]</div>
       <div class="cart-body">
         <h1>Finalizacao do Pedido</h1>
         <p>Agradecemos a preferencia...</p>
         <div class="alert alert-info order-confirmation">
           O numero de seu pedido e: <span>7688452993</span>
         </div>
         <p>Se voce tem alguma duvida...</p>
         <a class="btn btn-default">Para continuar Area do Cliente</a>
       </div>
     </div>
   </div>
   ========================================================================== */

/* Quando estamos na pagina de complete (cart.php?a=complete) */
body:has(.alert.order-confirmation) #order-standard_cart,
#order-standard_cart:has(.alert.order-confirmation) {
  min-height: 60vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 20px !important;
}

#order-standard_cart:has(.alert.order-confirmation) > .row {
  width: 100% !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  display: block !important;
}

#order-standard_cart:has(.alert.order-confirmation) .cart-sidebar {
  display: none !important;
}

#order-standard_cart:has(.alert.order-confirmation) .cart-body {
  width: 100% !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  background: #fff !important;
  border-radius: 20px !important;
  padding: 64px 48px 48px 48px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 20px 60px rgba(11, 100, 244, 0.08) !important;
  border: 1px solid var(--zh-border) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Detalhe decorativo: gradient no topo do card */
#order-standard_cart:has(.alert.order-confirmation) .cart-body::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 6px !important;
  background: linear-gradient(90deg, #0B64F4 0%, #00A876 50%, #0B64F4 100%) !important;
  background-size: 200% 100% !important;
  animation: zhGradientShift 6s ease infinite !important;
}

@keyframes zhGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Icone de success (checkmark circular) antes do H1 */
#order-standard_cart:has(.alert.order-confirmation) .cart-body::after {
  content: "" !important;
  display: block !important;
  width: 88px !important;
  height: 88px !important;
  margin: 0 auto 24px auto !important;
  border-radius: 50% !important;
  background:
    linear-gradient(135deg, #22C55E 0%, #16A34A 100%)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center !important;
  background-size: 52px 52px, 46px 46px !important;
  background-blend-mode: normal !important;
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.35), 0 0 0 8px rgba(34, 197, 94, 0.1) !important;
  animation: zhCheckPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  order: -1 !important;
  position: absolute !important;
  top: 48px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

@keyframes zhCheckPop {
  0% { transform: translateX(-50%) scale(0); opacity: 0; }
  60% { transform: translateX(-50%) scale(1.15); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* Empurra o conteudo para baixo do checkmark */
#order-standard_cart:has(.alert.order-confirmation) .cart-body > * {
  position: relative !important;
  z-index: 1 !important;
}

#order-standard_cart:has(.alert.order-confirmation) .cart-body > .header-lined {
  margin-top: 104px !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
}

#order-standard_cart:has(.alert.order-confirmation) .cart-body h1,
#order-standard_cart:has(.alert.order-confirmation) .cart-body .font-size-36 {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--zh-gray-900) !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  font-family: var(--zh-font-display, 'Plus Jakarta Sans', sans-serif) !important;
}

/* Paragrafos - texto explicativo */
#order-standard_cart:has(.alert.order-confirmation) .cart-body > p {
  font-size: 16px !important;
  color: var(--zh-gray-600) !important;
  line-height: 1.6 !important;
  max-width: 520px !important;
  margin: 0 auto 24px auto !important;
}

/* Alert do numero do pedido - destaque premium */
#order-standard_cart .alert.alert-info.order-confirmation {
  background: linear-gradient(135deg, #F0F7FF 0%, #E6EFFC 100%) !important;
  border: 1.5px solid #C7DAFB !important;
  border-radius: 14px !important;
  padding: 28px 32px !important;
  margin: 32px auto !important;
  max-width: 600px !important;
  font-size: 15px !important;
  color: var(--zh-gray-700) !important;
  box-shadow: 0 4px 20px rgba(11, 100, 244, 0.08) !important;
  text-align: center !important;
  position: relative !important;
}

#order-standard_cart .alert.alert-info.order-confirmation::before {
  content: "📦" !important;
  display: block !important;
  font-size: 28px !important;
  margin-bottom: 8px !important;
  filter: grayscale(0.1) !important;
}

#order-standard_cart .alert.alert-info.order-confirmation span {
  display: inline-block !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--zh-primary) !important;
  font-family: var(--zh-font-mono, 'JetBrains Mono', monospace) !important;
  letter-spacing: 0.02em !important;
  margin-left: 8px !important;
  padding: 4px 12px !important;
  background: #fff !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: all !important;
}

#order-standard_cart .alert.alert-info.order-confirmation span:hover {
  box-shadow: 0 2px 8px rgba(11, 100, 244, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* Botao "Para continuar Area do Cliente" - CTA primario */
#order-standard_cart:has(.alert.order-confirmation) .text-center > a.btn.btn-default,
#order-standard_cart .order-confirmation ~ .text-center .btn,
#order-standard_cart:has(.alert.order-confirmation) .cart-body a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 16px 40px !important;
  background: linear-gradient(135deg, var(--zh-primary) 0%, #0A56D6 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(11, 100, 244, 0.3), 0 1px 3px rgba(0,0,0,0.1) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-top: 16px !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#order-standard_cart:has(.alert.order-confirmation) .cart-body a.btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(11, 100, 244, 0.4), 0 2px 6px rgba(0,0,0,0.1) !important;
  background: linear-gradient(135deg, #0A56D6 0%, #094BC0 100%) !important;
  color: #fff !important;
}

#order-standard_cart:has(.alert.order-confirmation) .cart-body a.btn i.fas {
  transition: transform 0.2s ease !important;
}

#order-standard_cart:has(.alert.order-confirmation) .cart-body a.btn:hover i.fas {
  transform: translateX(4px) !important;
}

/* Breadcrumb "Carrinho de Compras" pequeno no topo */
#order-standard_cart:has(.alert.order-confirmation) ~ .breadcrumb,
body:has(.alert.order-confirmation) .breadcrumb {
  max-width: 780px !important;
  margin: 20px auto !important;
  padding: 0 20px !important;
  background: transparent !important;
  color: var(--zh-gray-500) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Esconde paragrafo final de instrucoes duplicadas se vazio */
#order-standard_cart:has(.alert.order-confirmation) .cart-body > p:empty {
  display: none !important;
}

/* Alerts de warning/info adicionais na pagina (ex: fatura nao paga) */
#order-standard_cart:has(.alert.order-confirmation) .cart-body .alert.alert-warning,
#order-standard_cart:has(.alert.order-confirmation) .cart-body .alert.alert-danger {
  max-width: 600px !important;
  margin: 16px auto !important;
  border-radius: 12px !important;
  padding: 18px 24px !important;
  font-size: 14px !important;
  text-align: center !important;
}

/* Mobile */
@media (max-width: 720px) {
  #order-standard_cart:has(.alert.order-confirmation) .cart-body {
    padding: 56px 24px 32px 24px !important;
    border-radius: 16px !important;
  }
  #order-standard_cart:has(.alert.order-confirmation) .cart-body::after {
    top: 36px !important;
    width: 72px !important;
    height: 72px !important;
  }
  #order-standard_cart:has(.alert.order-confirmation) .cart-body > .header-lined {
    margin-top: 88px !important;
  }
  #order-standard_cart:has(.alert.order-confirmation) .cart-body h1 {
    font-size: 26px !important;
  }
  #order-standard_cart .alert.alert-info.order-confirmation {
    padding: 20px !important;
  }
  #order-standard_cart .alert.alert-info.order-confirmation span {
    display: block !important;
    margin: 8px 0 0 0 !important;
  }
}

/* ==========================================================================
   43.4  CONFETTI / particulas de celebracao (opcional, sutil)
   ========================================================================== */

#order-standard_cart:has(.alert.order-confirmation) .cart-body {
  background:
    radial-gradient(circle at 20% 10%, rgba(11, 100, 244, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(34, 197, 94, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(11, 100, 244, 0.02) 0%, transparent 50%),
    #fff !important;
}

/* ==========================================================================
   § 47 — MINIMAL FIXES (v9.2.0)
   --------------------------------------------------------------------------
   §44, §45 e §46 foram REMOVIDOS do custom.css via sed. Estavam miraando
   IDs fantasma, forçando display:block em #stripeElements (quebrando a
   logica de gateway switching) e fixando larguras em intl-tel-input
   (quebrando o posicionamento natural).

   §47 faz SOMENTE o essencial:
   1) Telefone: padding-left maior para caber "+55" sem sobrepor placeholder
      — sem mexer em .iti__flag-container width (deixar o plugin decidir)
   2) #existingCardInfo: HIDE (user nao quer CVV confirm para saved card)
   3) #newCardInfo: HIDE quando Stripe Elements mountou (#elementCardNumber
      existe NO DOM visivel) — SEM forcar display:block em nada
   4) #stripeElements: ESTILO apenas (border/padding) — NAO mexer em display
   ========================================================================== */

/* ==========================================================================
   47.1  TELEFONE - fix "+55:efone" overlap
   --------------------------------------------------------------------------
   §41.4 colocou padding-left: 56px (suficiente para bandeira SEM +55).
   Quando intl-tel-input usa separateDialCode (mostra +55 como caixa
   separada), 56px e POUCO e o placeholder "Telefone" comeca debaixo do +55.

   Solucao: detectar .iti--separate-dial-code e aumentar padding-left
   SEM mexer em widths do container (que §44.1 quebrou).
   ========================================================================== */

/* Quando intl-tel-input tem dial code separado visivel */
.iti.iti--separate-dial-code input[type="tel"],
.iti.iti--separate-dial-code > input,
.iti--separate-dial-code > input#inputPhone {
  padding-left: 95px !important;
}

/* Dial code (+55) - estilo limpo dentro do flag container */
.iti--separate-dial-code .iti__selected-dial-code {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-700) !important;
  margin-left: 4px !important;
  letter-spacing: 0 !important;
}

/* ==========================================================================
   47.2  CVV CONFIRM (#existingCardInfo) - HIDE SIMPLES
   --------------------------------------------------------------------------
   User quer que saved card NAO peca CVV de novo. Um seletor simples basta.
   Nao uso position:absolute/left:-9999px pra nao confundir JS do base.js
   (que faz .slideDown/.slideUp) - display:none e pointer-events:none
   sao suficientes.

   AVISO: Stripe pode exigir CVV para pagamento 3DS. Se der problema com
   transacoes recusadas, comentar esta secao para voltar a mostrar.
   ========================================================================== */

#existingCardInfo {
  display: none !important;
}

#existingCardInfo input,
#existingCardInfo button {
  pointer-events: none !important;
}

/* Esconde tambem o pseudo-label "🔒 Confirme o codigo de seguranca" do §39 */
.cvv-input::before,
#existingCardInfo::before {
  display: none !important;
  content: none !important;
}

/* ==========================================================================
   47.3  DUPLICACAO: esconder #newCardInfo quando Stripe Elements estao
         visiveis (mountados em #stripeElements)
   --------------------------------------------------------------------------
   Stripe.js mountа #elementCardNumber DENTRO de #stripeElements quando
   o gateway Stripe esta ativo. Quando isso acontece, os inputs nativos
   do WHMCS em #newCardInfo sao redundantes.

   Usamos body:has() + condicao de visibilidade real (via :not()) para
   nao hardcodar quando Stripe esta ativo.
   ========================================================================== */

/* Se #stripeElements existe E nao esta com display:none inline, esconder
   #newCardInfo (os inputs nativos duplicam com Stripe Elements) */
body:has(#stripeElements #elementCardNumber) #newCardInfo {
  display: none !important;
}

/* Quando Stripe NAO mountou (Mercado Pago ou gateway sem Elements),
   #stripeElements nao tem #elementCardNumber filho — #newCardInfo fica
   visivel naturalmente (sem override) */

/* ==========================================================================
   47.4  #stripeElements - ESTILO apenas (sem display forcado)
   --------------------------------------------------------------------------
   NAO ponho display: block !important aqui - isso bloqueava o slideUp()
   do stripe.js quando user troca de gateway.
   ========================================================================== */

#stripeElements {
  margin-top: 14px !important;
  padding: 20px !important;
  background: var(--zh-gray-50, #F7F7F8) !important;
  border: 1px solid var(--zh-border) !important;
  border-radius: 12px !important;
}

/* Iframes individuais do Stripe */
#elementCardNumber,
#elementCardExpiry,
#elementCardCvc,
#stripeElements .form-control,
#stripeElements .StripeElement {
  min-height: 44px !important;
  padding: 12px 14px !important;
  background: #fff !important;
  border: 1.5px solid var(--zh-border) !important;
  border-radius: 8px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  margin-bottom: 12px !important;
}

#elementCardNumber.StripeElement--focus,
#elementCardExpiry.StripeElement--focus,
#elementCardCvc.StripeElement--focus,
.StripeElement--focus {
  border-color: var(--zh-primary) !important;
  box-shadow: 0 0 0 3px rgba(11, 100, 244, 0.12) !important;
  outline: none !important;
}

.StripeElement--invalid {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Layout dos 3 iframes: numero (100%) / expiry (50%) + cvc (50%) */
#stripeElements #elementCardNumber {
  width: 100% !important;
}

#stripeElements #elementCardExpiry,
#stripeElements #elementCardCvc {
  width: calc(50% - 7px) !important;
  display: inline-block !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}

#stripeElements #elementCardExpiry {
  margin-right: 12px !important;
}

/* ==========================================================================
   FIM §47
   ========================================================================== */

/* ==========================================================================
   § 48 — NAPOLEON-STYLE VERTICAL GATEWAY LIST (v9.3.0)
   --------------------------------------------------------------------------
   Emula o checkout do Napoleon Host: gateways em lista vertical com linhas
   limpas (nao cards gigantes com logo no fundo). Cada linha:
     [radio] Nome do gateway                    [logo compacto a direita]
             Descricao pequena em cinza

   Sobrescreve §39 (que fazia 2-col grid com logo de fundo gigante).
   ========================================================================== */

/* ==========================================================================
   48.1  Titulo "Detalhes do Pagamento" - estilo Napoleon
   ========================================================================== */

#paymentGatewaysContainer > p.small.text-muted {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900, #111827) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 14px !important;
  padding-left: 0 !important;
  text-align: left !important;
}

#paymentGatewaysContainer > p.small.text-muted::before {
  content: "" !important;
  margin-right: 0 !important;
}

/* ==========================================================================
   48.2  Container dos gateways: LISTA VERTICAL (nao grid)
   ========================================================================== */

#paymentGatewaysContainer .text-center {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  text-align: left !important;
  grid-template-columns: none !important;
}

/* ==========================================================================
   48.3  Cada gateway: linha horizontal limpa
   --------------------------------------------------------------------------
   Layout: [radio 20px] [nome + descricao] --- [logo 70px a direita]
   Background branco, borda cinza clara, hover azul suave.
   ========================================================================== */

#paymentGatewaysContainer label.radio-inline {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 16px 90px 16px 48px !important;
  margin: 0 !important;
  background: #fff !important;
  border: 1.5px solid var(--zh-border, #E5E7EB) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  font-size: 14px !important;
  min-height: 64px !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background-image: none !important;
  transform: none !important;
}

#paymentGatewaysContainer label.radio-inline:hover {
  border-color: var(--zh-primary, #0B64F4) !important;
  background: #F8FAFF !important;
  box-shadow: 0 2px 8px rgba(11, 100, 244, 0.08) !important;
  transform: none !important;
}

/* Estado selecionado: borda azul + fundo azul bem suave */
#paymentGatewaysContainer label.radio-inline:has(input:checked) {
  border-color: var(--zh-primary, #0B64F4) !important;
  background: #F4F8FF !important;
  box-shadow: 0 0 0 3px rgba(11, 100, 244, 0.1) !important;
  transform: none !important;
}

/* ==========================================================================
   48.4  Radio nativo escondido + radio visual (bolinha a esquerda)
   ========================================================================== */

#paymentGatewaysContainer label.radio-inline input[type="radio"].payment-methods,
#paymentGatewaysContainer label.radio-inline input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

#paymentGatewaysContainer label.radio-inline::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--zh-gray-300, #D1D5DB) !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: all 0.18s ease !important;
  z-index: 2 !important;
  box-shadow: none !important;
}

#paymentGatewaysContainer label.radio-inline:has(input:checked)::before {
  border-color: var(--zh-primary, #0B64F4) !important;
  background: var(--zh-primary, #0B64F4) !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

/* ==========================================================================
   48.5  LOGOS compactos a direita (via background-image no pseudo ::after)
   --------------------------------------------------------------------------
   §39 usava o background do label inteiro (logo gigante). Aqui o logo fica
   num pseudo ::after posicionado no canto direito, tamanho ~60px de altura.
   ========================================================================== */

#paymentGatewaysContainer label.radio-inline::after {
  content: "" !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 64px !important;
  height: 40px !important;
  background-repeat: no-repeat !important;
  background-position: center right !important;
  background-size: contain !important;
  pointer-events: none !important;
}

/* === MERCADO PAGO === */
#paymentGatewaysContainer label.radio-inline:has(input[value*="mercadopago"]),
#paymentGatewaysContainer label.radio-inline:has(input[value*="MercadoPago"]),
#paymentGatewaysContainer label.radio-inline:has(input[value*="mercado"]) {
  background-image: none !important;
}

#paymentGatewaysContainer label.radio-inline:has(input[value*="mercadopago"])::after,
#paymentGatewaysContainer label.radio-inline:has(input[value*="MercadoPago"])::after,
#paymentGatewaysContainer label.radio-inline:has(input[value*="mercado"])::after {
  content: "" !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 48'><rect width='150' height='48' fill='%2300B1EA' rx='6'/><text x='75' y='20' text-anchor='middle' fill='white' font-family='Arial Black, Arial, sans-serif' font-weight='900' font-size='13'>Mercado</text><text x='75' y='37' text-anchor='middle' fill='white' font-family='Arial Black, Arial, sans-serif' font-weight='900' font-size='13'>Pago</text></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: contain !important;
  width: 72px !important;
  height: 40px !important;
  bottom: auto !important;
  left: auto !important;
  right: 16px !important;
  font-size: 0 !important;
  color: transparent !important;
}

/* === STRIPE === */
#paymentGatewaysContainer label.radio-inline:has(input[value="stripe"]) {
  background-image: none !important;
}

#paymentGatewaysContainer label.radio-inline:has(input[value="stripe"])::after {
  content: "" !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 48'><rect width='150' height='48' fill='%23635BFF' rx='6'/><text x='75' y='34' text-anchor='middle' fill='white' font-family='Helvetica Neue, Arial, sans-serif' font-weight='900' font-size='22' font-style='italic'>stripe</text></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: contain !important;
  width: 72px !important;
  height: 40px !important;
  bottom: auto !important;
  left: auto !important;
  right: 16px !important;
  font-size: 0 !important;
  color: transparent !important;
}

/* ==========================================================================
   48.6  Nome e descricao do gateway (texto do label)
   --------------------------------------------------------------------------
   O label renderiza o nome do gateway direto como texto (vem do WHMCS:
   $gateway.name). Nao temos subdescricao inline no HTML, entao usamos
   ::marker ou um segundo pseudo — aqui optamos por deixar so o nome e
   manter o logo a direita como identificador.
   ========================================================================== */

#paymentGatewaysContainer label.radio-inline {
  color: var(--zh-gray-900, #111827) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   48.7  RESPONSIVO: mobile mantém mesma estrutura (ja e 1-col)
   --------------------------------------------------------------------------
   No §39 havia override mobile forcando grid-template-columns: 1fr.
   Com lista vertical, nao precisamos de override - ja e 1-col sempre.
   Mas reduzimos paddings pra telas pequenas.
   ========================================================================== */

@media (max-width: 576px) {
  #paymentGatewaysContainer label.radio-inline {
    padding: 14px 80px 14px 44px !important;
    min-height: 58px !important;
  }

  #paymentGatewaysContainer label.radio-inline::after {
    width: 56px !important;
    height: 34px !important;
    right: 12px !important;
  }

  #paymentGatewaysContainer label.radio-inline:has(input[value*="mercadopago"])::after,
  #paymentGatewaysContainer label.radio-inline:has(input[value*="MercadoPago"])::after,
  #paymentGatewaysContainer label.radio-inline:has(input[value*="mercado"])::after,
  #paymentGatewaysContainer label.radio-inline:has(input[value="stripe"])::after {
    width: 60px !important;
    height: 34px !important;
    right: 12px !important;
  }

  #paymentGatewaysContainer label.radio-inline::before {
    left: 14px !important;
  }
}

/* ==========================================================================
   48.8  Titulo da secao "Detalhes do pagamento" quando CC-container visivel
   --------------------------------------------------------------------------
   Napoleon tem um titulo extra antes do form de cartao. Adicionamos via
   ::before no #creditCardInputFields quando visivel.
   ========================================================================== */

#creditCardInputFields:not(.w-hidden)::before {
  content: "Detalhes do pagamento" !important;
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900, #111827) !important;
  margin: 20px 0 12px 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* ==========================================================================
   48.9  CARD FORM (Stripe) visual limpo Napoleon-style
   --------------------------------------------------------------------------
   Inputs do cartao: fundo branco, borda cinza clara, focus azul suave.
   Layout: numero (full) + expiracao (50%) + cvv (50%)
   §47.4 ja define o box geral do #stripeElements — reforcamos apenas
   estetica dos iframes para bater com Napoleon.
   ========================================================================== */

#stripeElements {
  background: #fff !important;
  border: 1px solid var(--zh-border, #E5E7EB) !important;
  border-radius: 10px !important;
  padding: 18px !important;
}

#elementCardNumber,
#elementCardExpiry,
#elementCardCvc,
#stripeElements .StripeElement,
#stripeElements .form-control {
  background: #fff !important;
  border: 1.5px solid var(--zh-border, #E5E7EB) !important;
  border-radius: 8px !important;
  min-height: 46px !important;
  padding: 13px 14px !important;
}

/* ==========================================================================
   48.10  "Estamos quase la" - header friendly opcional
   --------------------------------------------------------------------------
   Napoleon tem "Estamos quase la ✅" antes do form. Adicionamos via
   ::before no primeiro form-group do checkout.
   (Comentado - ativar se usuario confirmar que quer)
   ========================================================================== */

/*
#checkoutFrm > .row:first-child::before,
#frmCheckout > fieldset:first-of-type legend::before {
  content: "Estamos quase la \2705 " !important;
  display: block !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900) !important;
  margin-bottom: 18px !important;
}
*/

/* ==========================================================================
   FIM §48
   ========================================================================== */

/* ==========================================================================
   § 49 — FIX STRIPE IDS REAIS (v9.3.1)
   --------------------------------------------------------------------------
   §47.3 e §48.9 usaram IDs ERRADOS (#elementCardNumber/Expiry/Cvc) que
   NAO EXISTEM. O modulo stripe.js deste WHMCS 8.13.2 cria:
     #stripeCreditCard   (iframe do card number)
     #stripeExpiryDate   (iframe do expiry)
     #stripeCvc          (iframe do cvc)
   dentro de #stripeElements.

   Estrutura real do DOM quando Stripe ativo:
     #creditCardInputFields
       #newCardInfo            ← inputs nativos WHMCS (DUPLICATA - esconder!)
       #stripeElements         ← iframes Stripe (manter visivel)
         .stripe-cards-inputs
           #stripeCreditCard   (iframe)
           #stripeExpiryDate   (iframe)
           #stripeCvc          (iframe)
       #newCardSaveSettings    ← "Digite nome do cartao" (OK, manter)

   Stripe insere via: jQuery('#newCardInfo').after(html)  →  SIBLINGS.
   ========================================================================== */

/* ==========================================================================
   49.1  ESCONDER #newCardInfo quando Stripe Elements existem
   --------------------------------------------------------------------------
   Usamos multiplos seletores pra garantir match em diferentes browsers/versões:
   - body:has() com ID real
   - seletor direto com sibling combinator
   ========================================================================== */

/* Seletor principal: body has #stripeCreditCard (iframe do Stripe mountado) */
body:has(#stripeCreditCard) #newCardInfo,
html:has(#stripeCreditCard) #newCardInfo,
#creditCardInputFields:has(#stripeCreditCard) #newCardInfo {
  display: none !important;
}

/* Fallback 1: se #stripeElements esta VISIVEL (nao tem display:none inline) */
body:has(#stripeElements:not([style*="display: none"]):not([style*="display:none"])) #newCardInfo {
  display: none !important;
}

/* Fallback 2: sibling combinator - #newCardInfo que tem #stripeElements como irmao posterior */
#newCardInfo:has(~ #stripeElements:not([style*="display: none"]):not([style*="display:none"])) {
  display: none !important;
}

/* ==========================================================================
   49.2  ESTILIZAR #stripeElements com IDs REAIS
   --------------------------------------------------------------------------
   §47.4 e §48.9 estilizavam #elementCardNumber/Expiry/Cvc (IDs errados).
   Aqui aplicamos nos IDs REAIS: #stripeCreditCard/ExpiryDate/Cvc.
   ========================================================================== */

/* Container Stripe Elements */
#stripeElements {
  display: block !important;
  margin-top: 14px !important;
  padding: 18px !important;
  background: #fff !important;
  border: 1px solid var(--zh-border, #E5E7EB) !important;
  border-radius: 10px !important;
}

/* Row interna do Stripe - grid layout organizado */
#stripeElements .stripe-cards-inputs {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

#stripeElements .stripe-cards-inputs > .row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 14px !important;
  margin: 0 !important;
}

/* Coluna do card number (primeira) - ocupa 100% (full width no grid) */
#stripeElements .stripe-cards-inputs > .row > .col-md-6:first-child {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex: none !important;
}

/* Colunas expiry + cvc - 50/50 na segunda linha */
#stripeElements .stripe-cards-inputs > .row > .col-md-3 {
  grid-column: span 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex: none !important;
}

/* Se o grid quebrar em 3-col, faz o card number ocupar toda linha 1
   e expiry+cvc dividirem linha 2 */
@supports (grid-template-columns: subgrid) {
  #stripeElements .stripe-cards-inputs > .row {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
  }
  #stripeElements .stripe-cards-inputs > .row > .col-md-6:first-child {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
}

/* Labels do Stripe Elements - estilo clean */
#stripeElements label[for="stripeCreditCard"],
#stripeElements label[for="stripeExpiryDate"],
#stripeElements label[for="stripeCvc"] {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-700, #374151) !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  text-align: left !important;
}

/* Os divs que recebem o mount do iframe Stripe */
#stripeCreditCard,
#stripeExpiryDate,
#stripeCvc,
#stripeElements .StripeElement {
  min-height: 46px !important;
  padding: 13px 14px !important;
  background: #fff !important;
  border: 1.5px solid var(--zh-border, #E5E7EB) !important;
  border-radius: 8px !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Focus states */
#stripeCreditCard.StripeElement--focus,
#stripeExpiryDate.StripeElement--focus,
#stripeCvc.StripeElement--focus,
#stripeElements .StripeElement--focus {
  border-color: var(--zh-primary, #0B64F4) !important;
  box-shadow: 0 0 0 3px rgba(11, 100, 244, 0.12) !important;
  outline: none !important;
}

/* Invalid states */
#stripeCreditCard.StripeElement--invalid,
#stripeExpiryDate.StripeElement--invalid,
#stripeCvc.StripeElement--invalid,
#stripeElements .StripeElement--invalid {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* #stripeCardType (badge do tipo de cartao - Visa/Master) abaixo do input */
#stripeCardType {
  margin-top: 6px !important;
  font-size: 11px !important;
  color: var(--zh-gray-600, #4B5563) !important;
}

/* #stripeCvcWhere (link "onde fica o CVV") */
#stripeCvcWhere {
  margin-top: 6px !important;
  font-size: 11px !important;
}

#stripeCvcWhere a,
#stripeCvcWhere #cvvWhereLink {
  color: var(--zh-primary, #0B64F4) !important;
  text-decoration: none !important;
  font-size: 11px !important;
}

#stripeCvcWhere a:hover {
  text-decoration: underline !important;
}

/* ==========================================================================
   49.3  RESPONSIVO: mobile empilha em 1-col
   ========================================================================== */

@media (max-width: 576px) {
  #stripeElements .stripe-cards-inputs > .row {
    grid-template-columns: 1fr !important;
  }

  #stripeElements .stripe-cards-inputs > .row > .col-md-3,
  #stripeElements .stripe-cards-inputs > .row > .col-md-6:first-child {
    grid-column: 1 !important;
  }
}

/* ==========================================================================
   FIM §49
   ========================================================================== */

/* ==========================================================================
   § 50 — UNIFIED CARD BOX (v9.3.2)
   --------------------------------------------------------------------------
   Bug visivel: Stripe Elements (white box) fica DENTRO do #creditCardInputFields
   (gray box do §48.8), mas o radio "Digite informacoes do novo cartao abaixo"
   e o input "Digite um nome para esse cartao" ficam FORA, soltos.

   Estrutura real:
     #creditCardInputFields (parent — gray bg)
       #existingCardsContainer (cartoes salvos)
       #existingCardInfo (CVV confirm - hidden §47)
       <ul><li><label radio "Digite informacoes...">  ← FORA do white box
       #newCardInfo (hidden §49)
       #stripeElements (white box - Stripe Elements)   ← so este e box branco
       #newCardSaveSettings ("Digite um nome...")      ← FORA do white box

   Solucao: REMOVER o white box do #stripeElements e fazer o #creditCardInputFields
   inteiro ser UM unico container visual com tudo dentro fluindo organizado.
   ========================================================================== */

/* ==========================================================================
   50.1  PARENT CONTAINER #creditCardInputFields - white box principal
   --------------------------------------------------------------------------
   Substitui o gray bg por white bg + borda — vira A caixa principal.
   ========================================================================== */

#creditCardInputFields,
.cc-input-container#creditCardInputFields,
.cc-input-container {
  background: #fff !important;
  border: 1px solid var(--zh-border, #E5E7EB) !important;
  border-radius: 12px !important;
  padding: 22px 24px !important;
  margin-top: 0 !important;
}

/* Titulo "Detalhes do pagamento" - mantido do §48.8 mas com margin diferente */
#creditCardInputFields:not(.w-hidden)::before {
  content: "Detalhes do pagamento" !important;
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900, #111827) !important;
  margin: 0 0 16px 0 !important;
  padding: 0 0 14px 0 !important;
  border-bottom: 1px solid var(--zh-border, #E5E7EB) !important;
  text-align: left !important;
}

/* ==========================================================================
   50.2  #stripeElements - SEM box duplicado (vira parte do parent)
   --------------------------------------------------------------------------
   Sobrescreve §47.4 + §48.9 + §49.2 que davam border/bg/padding.
   Aqui: transparente, sem borda, padding apenas vertical.
   ========================================================================== */

#stripeElements {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================================
   50.3  RADIO "Digite informacoes do novo cartao abaixo"
   --------------------------------------------------------------------------
   Esta dentro de <ul><li><label class="radio-inline"> entre #existingCardInfo
   e #newCardInfo. Quando o usuario NAO tem cartoes salvos, esse radio
   e redundante (so existe a opcao "new") - escondemos.

   Quando o usuario TEM cartoes salvos, mostramos como linha simples no topo.
   ========================================================================== */

/* Reset visual do label - tira qualquer estilo herdado de §39/iCheck */
#creditCardInputFields ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 14px 0 !important;
  background: transparent !important;
  border: none !important;
}

#creditCardInputFields ul li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  display: block !important;
}

#creditCardInputFields ul li label.radio-inline {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  background: var(--zh-gray-50, #F9FAFB) !important;
  border: 1px solid var(--zh-border, #E5E7EB) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-700, #374151) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background-image: none !important;
  position: relative !important;
}

#creditCardInputFields ul li label.radio-inline::before,
#creditCardInputFields ul li label.radio-inline::after {
  display: none !important;
  content: none !important;
}

/* Quando "new" esta checked: borda azul */
#creditCardInputFields ul li label.radio-inline:has(input[value="new"]:checked) {
  border-color: var(--zh-primary, #0B64F4) !important;
  background: #F4F8FF !important;
  color: var(--zh-primary, #0B64F4) !important;
}

/* Radio nativo dentro do label - mostra como bolinha minimalista */
#creditCardInputFields ul li label.radio-inline input[type="radio"] {
  position: static !important;
  opacity: 1 !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  accent-color: var(--zh-primary, #0B64F4) !important;
  flex-shrink: 0 !important;
}

/* Se o usuario NAO tem cartoes salvos (lista vazia), esconde o radio
   "Digite informacoes do novo cartao abaixo" porque e a unica opcao */
#creditCardInputFields:not(:has(#existingCardsContainer .paymethod-info[data-paymethod-id])) ul,
#creditCardInputFields:not(:has(.existing-card)) ul {
  display: none !important;
}

/* ==========================================================================
   50.4  STRIPE ELEMENTS layout limpo dentro do parent box
   --------------------------------------------------------------------------
   §49.2 ja organiza o grid - aqui apenas refinamos espacos.
   ========================================================================== */

#stripeElements .stripe-cards-inputs {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

#stripeElements .stripe-cards-inputs > .row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px 16px !important;
  margin: 0 !important;
}

/* Card number ocupa as 2 colunas (linha completa) */
#stripeElements .stripe-cards-inputs > .row > .col-md-6:first-child {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex: none !important;
}

/* Expiry e CVC ficam 50/50 na proxima linha */
#stripeElements .stripe-cards-inputs > .row > .col-md-3 {
  grid-column: span 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex: none !important;
}

/* Labels dentro do Stripe */
#stripeElements label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-700, #374151) !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ==========================================================================
   50.5  #newCardSaveSettings - "Digite um nome para esse cartao"
   --------------------------------------------------------------------------
   Este input agora fica DENTRO da mesma caixa, separado do Stripe por
   uma linha sutil. Nao tem mais background separado.
   ========================================================================== */

#newCardSaveSettings {
  margin: 18px 0 0 0 !important;
  padding: 16px 0 0 0 !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--zh-gray-100, #F3F4F6) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#newCardSaveSettings .form-group,
#newCardSaveSettings .row {
  margin: 0 !important;
  padding: 0 !important;
}

#newCardSaveSettings #inputDescriptionContainer {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex: none !important;
}

#newCardSaveSettings .prepend-icon {
  position: relative !important;
  display: block !important;
}

#newCardSaveSettings label.field-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--zh-gray-400, #9CA3AF) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  margin: 0 !important;
}

#newCardSaveSettings #inputDescription {
  width: 100% !important;
  height: 44px !important;
  padding: 10px 14px 10px 38px !important;
  border: 1.5px solid var(--zh-border, #E5E7EB) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 13px !important;
  color: var(--zh-gray-900, #111827) !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

#newCardSaveSettings #inputDescription:focus {
  border-color: var(--zh-primary, #0B64F4) !important;
  box-shadow: 0 0 0 3px rgba(11, 100, 244, 0.12) !important;
  outline: none !important;
}

#newCardSaveSettings #inputDescription::placeholder {
  color: var(--zh-gray-400, #9CA3AF) !important;
  opacity: 1 !important;
}

/* Toggle "salvar este cartao" (se aparecer) */
#newCardSaveSettings #inputNoStoreContainer {
  margin-top: 10px !important;
}

#newCardSaveSettings #inputNoStoreContainer label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--zh-gray-700, #374151) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  cursor: pointer !important;
}

/* ==========================================================================
   50.6  EXISTING CARDS GRID (cartoes salvos do cliente)
   --------------------------------------------------------------------------
   Quando o cliente tem cartoes salvos, eles aparecem em #existingCardsContainer
   antes do radio "new". Garantimos que o grid funcione bem dentro do parent.
   ========================================================================== */

#existingCardsContainer {
  display: grid !important;
  grid-template-columns: auto auto 1fr auto auto !important;
  gap: 8px 12px !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 0 14px 0 !important;
}

#existingCardsContainer .paymethod-info {
  padding: 8px 4px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  font-size: 13px !important;
  color: var(--zh-gray-700, #374151) !important;
}

#existingCardsContainer .paymethod-info input[type="radio"] {
  margin: 0 !important;
  accent-color: var(--zh-primary, #0B64F4) !important;
}

#existingCardsContainer .paymethod-info i.fa,
#existingCardsContainer .paymethod-info i.fas,
#existingCardsContainer .paymethod-info i.far {
  font-size: 18px !important;
  color: var(--zh-primary, #0B64F4) !important;
}

/* ==========================================================================
   50.7  RESPONSIVO mobile
   ========================================================================== */

@media (max-width: 576px) {
  #creditCardInputFields {
    padding: 16px !important;
  }

  #stripeElements .stripe-cards-inputs > .row {
    grid-template-columns: 1fr !important;
  }

  #stripeElements .stripe-cards-inputs > .row > .col-md-3 {
    grid-column: 1 !important;
  }

  #existingCardsContainer {
    grid-template-columns: auto 1fr !important;
    gap: 6px 10px !important;
  }
}

/* ==========================================================================
   FIM §50
   ========================================================================== */

/* ==========================================================================
   § 51 — STRIPE CARD FIELDS POLISH (v9.3.3)
   --------------------------------------------------------------------------
   Polimento visual dos campos de cartao (Stripe Elements) no checkout.
   - Refina altura/padding dos iframes (Numero/Data/CVV) pra 48px.
   - Adiciona label "Nome no Cartao (Opcional)" via ::before no
     #inputDescriptionContainer (nao podemos alterar o HTML do WHMCS).
   - Transforma o input do nome do cartao (que estava parecendo botao
     cinza) num input real com borda, icone posicionado e estados de
     hover/focus coesos com o resto do form.
   - Grid: Numero full-width, Data + CVV 50/50.
   ========================================================================== */

/* 51.1 Stripe iframes — altura, padding e tipografia consistentes */
#stripeCreditCard,
#stripeExpiryDate,
#stripeCvc,
#stripeElements .StripeElement {
  min-height: 48px !important;
  padding: 14px 14px !important;
  background: #fff !important;
  border: 1px solid var(--zh-border, #E5E7EB) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

#stripeCreditCard:hover,
#stripeExpiryDate:hover,
#stripeCvc:hover {
  border-color: var(--zh-gray-300, #D1D5DB) !important;
  background: #FAFBFC !important;
}

#stripeCreditCard.StripeElement--focus,
#stripeExpiryDate.StripeElement--focus,
#stripeCvc.StripeElement--focus {
  border-color: var(--zh-primary, #0B64F4) !important;
  box-shadow: 0 0 0 3px rgba(11, 100, 244, 0.12) !important;
  background: #fff !important;
  outline: none !important;
}

#stripeElements label,
#stripeElements label[for="stripeCreditCard"],
#stripeElements label[for="stripeExpiryDate"],
#stripeElements label[for="stripeCvc"] {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-700, #374151) !important;
  margin: 0 0 7px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0.1px !important;
}

/* 51.2 "Nome no Cartao" — label injetada + input de verdade */
#newCardSaveSettings #inputDescriptionContainer::before {
  content: "Nome no Cartão " !important;
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--zh-gray-700, #374151) !important;
  margin: 0 0 7px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  letter-spacing: 0.1px !important;
}

#newCardSaveSettings .prepend-icon {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

#newCardSaveSettings label.field-icon[for="inputDescription"] {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--zh-gray-400, #9CA3AF) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
}

#newCardSaveSettings #inputDescription,
#newCardSaveSettings input#inputDescription.field.form-control {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 14px 14px 14px 40px !important;
  background: #fff !important;
  border: 1px solid var(--zh-border, #E5E7EB) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--zh-gray-900, #111827) !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  text-align: left !important;
}

#newCardSaveSettings #inputDescription:hover {
  border-color: var(--zh-gray-300, #D1D5DB) !important;
  background: #FAFBFC !important;
}

#newCardSaveSettings #inputDescription:focus {
  border-color: var(--zh-primary, #0B64F4) !important;
  box-shadow: 0 0 0 3px rgba(11, 100, 244, 0.12) !important;
  background: #fff !important;
  outline: none !important;
}

#newCardSaveSettings #inputDescription::placeholder {
  color: var(--zh-gray-400, #9CA3AF) !important;
  opacity: 1 !important;
  font-size: 13.5px !important;
}

/* 51.3 Grid: Numero (full) / Data + CVV (50/50) */
#stripeElements .stripe-cards-inputs > .row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#stripeElements .stripe-cards-inputs > .row > .col-md-6:first-child {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
}

#stripeElements .stripe-cards-inputs > .row > .col-md-3 {
  grid-column: span 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
}

/* 51.4 Separador sutil entre Stripe Elements e "Nome no Cartao" */
#newCardSaveSettings {
  margin: 20px 0 0 0 !important;
  padding: 18px 0 0 0 !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--zh-gray-100, #F3F4F6) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#newCardSaveSettings .form-group,
#newCardSaveSettings .row {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

#newCardSaveSettings #inputDescriptionContainer {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
  float: none !important;
  display: block !important;
}

/* 51.5 Badge tipo de cartao + link "onde fica o CVV" */
#stripeCardType {
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  color: var(--zh-gray-500, #6B7280) !important;
  min-height: 14px !important;
  line-height: 1.3 !important;
}

#stripeCardType img {
  max-height: 18px !important;
  width: auto !important;
  vertical-align: middle !important;
}

#stripeCvcWhere {
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

#stripeCvcWhere a,
#stripeCvcWhere #cvvWhereLink {
  color: var(--zh-primary, #0B64F4) !important;
  text-decoration: none !important;
  font-size: 11px !important;
}

#stripeCvcWhere a:hover {
  text-decoration: underline !important;
}

/* 51.6 Responsivo mobile */
@media (max-width: 576px) {
  #stripeElements .stripe-cards-inputs > .row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #stripeElements .stripe-cards-inputs > .row > .col-md-3 {
    grid-column: 1 !important;
  }

  #newCardSaveSettings #inputDescription {
    height: 46px !important;
    min-height: 46px !important;
    padding: 13px 13px 13px 38px !important;
  }

  #stripeCreditCard,
  #stripeExpiryDate,
  #stripeCvc,
  #stripeElements .StripeElement {
    min-height: 46px !important;
    padding: 13px 13px !important;
  }
}

/* ==========================================================================
   FIM §51
   ========================================================================== */

/* 51.7 Asterisco vermelho indicando campo obrigatorio
   ::before cria 'Nome no Cartao ' (termina com espaco)
   ::after coloca '*' vermelho logo depois, inline no mesmo fluxo */
#newCardSaveSettings #inputDescriptionContainer {
  position: relative !important;
}
#newCardSaveSettings #inputDescriptionContainer::after {
  content: '*' !important;
  position: absolute !important;
  left: auto !important;
  color: #DC2626 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  /* posicao: logo apos o texto 'Nome no Cartao ' que tem ~112-118px */
  top: 1px !important;
  margin-left: 2px !important;
}
/* Truque: o ::before tem o texto, vamos fazer o asterisco ficar inline
   usando display:inline pro ::before (nao block) */
#newCardSaveSettings #inputDescriptionContainer::before {
  display: inline-block !important;
  margin-bottom: 7px !important;
}
#newCardSaveSettings #inputDescriptionContainer::after {
  position: static !important;
  display: inline-block !important;
  margin-left: 3px !important;
}
/* Forca o wrap depois do asterisco com quebra visual */
#newCardSaveSettings .prepend-icon {
  display: block !important;
  clear: both !important;
}

/* ==========================================================================
   § 52 — PHONE FIELD (intl-tel-input) FIX
   --------------------------------------------------------------------------
   Bug: quando o input tem a classe .separate-dial-code, o plugin coloca
   a bandeira + codigo discagem (ex: BR +55) ocupando ~80px na esquerda.
   Porem o padding-left do input estava em 40px (herdado de .prepend-icon),
   fazendo o texto digitado sobrepor o "+55".
   Fix: aumentar padding-left pra 90px quando o wrapper e separate-dial-code.
   ========================================================================== */

/* Input de telefone com separate-dial-code — dar espaco pra bandeira + codigo */
.intl-tel-input.separate-dial-code > .form-control,
.intl-tel-input.separate-dial-code input.form-control,
.form-group.prepend-icon .intl-tel-input.separate-dial-code > .form-control {
  padding-left: 94px !important;
}

/* Garante que o field-icon (label.field-icon) nao sobreponha a bandeira */
.form-group.prepend-icon:has(.intl-tel-input.separate-dial-code) > label.field-icon,
.form-group.prepend-icon:has(.intl-tel-input.separate-dial-code) > .field-icon {
  display: none !important;
}

/* Ajusta o wrapper pra width 100% (ocupa toda coluna do grid) */
.intl-tel-input.separate-dial-code,
.form-group.prepend-icon .intl-tel-input.separate-dial-code {
  width: 100% !important;
  display: block !important;
}

/* Flag container com borda-right discreta pra separar visualmente do texto */
.intl-tel-input.separate-dial-code .flag-container {
  border-right: 1px solid var(--zh-border, #E5E7EB) !important;
  background: transparent !important;
}

.intl-tel-input.separate-dial-code .selected-flag {
  padding: 0 10px 0 12px !important;
  background: transparent !important;
}

.intl-tel-input.separate-dial-code .selected-dial-code_REMOVED {
  padding-left: 6px !important;
  color: var(--zh-gray-700, #374151) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Responsivo mobile — reduz ligeiramente mas mantem espaco */
@media (max-width: 576px) {
  .intl-tel-input.separate-dial-code > .form-control,
  .intl-tel-input.separate-dial-code input.form-control,
  .form-group.prepend-icon .intl-tel-input.separate-dial-code > .form-control {
    padding-left: 90px !important;
  }
}

/* ==========================================================================
   FIM §52
   ========================================================================== */


/* ==========================================================================
   §53  PAYMENT GATEWAY CARDS — logos reais + titulo + descricao
   --------------------------------------------------------------------------
   Cada gateway renderiza um card com:
     [ radio custom ]  [ LOGO SVG ]
                       [ Titulo em negrito ]
                       [ Descricao cinza pequena ]
   Substitui a abordagem de ::after com SVG data-URI do §48 quando o label
   tem a classe .zh-payment-option (novo markup do checkout.tpl).
   Usa :has(input:checked) pra estado selecionado. Azul #0B64F4 da marca.
   ========================================================================== */

/* --- Neutraliza estilos herdados do §48 que atrapalham o novo markup --- */
#paymentGatewaysContainer .text-center {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  gap: 14px !important;
  align-items: stretch !important;
  justify-content: center !important;
  grid-template-columns: none !important;
}

#paymentGatewaysContainer label.radio-inline.zh-payment-option {
  /* Reset do §48: padding enorme a direita pra logo ::after, column, etc */
  flex: 1 1 calc(50% - 14px) !important;
  max-width: calc(50% - 14px) !important;
  min-height: 0 !important;
  padding: 20px 18px 18px 52px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  position: relative !important;
  background: #fff !important;
  border: 1.5px solid var(--zh-border, #E5E7EB) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  font-weight: 400 !important;
  text-align: left !important;
  background-image: none !important;
  transform: none !important;
}

/* Anula o ::after (logo fake do §48) - agora o logo vem do <img> real */
#paymentGatewaysContainer label.radio-inline.zh-payment-option::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Radio custom (bolinha azul) — mantem o ::before do §48 mas re-posiciona
   pro topo do card ao inves de meio vertical */
#paymentGatewaysContainer label.radio-inline.zh-payment-option::before {
  content: "" !important;
  position: absolute !important;
  top: 22px !important;
  left: 18px !important;
  transform: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--zh-gray-300, #D1D5DB) !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease !important;
  z-index: 2 !important;
  box-shadow: none !important;
}

#paymentGatewaysContainer label.radio-inline.zh-payment-option:hover {
  border-color: var(--zh-primary, #0B64F4) !important;
  background: #F8FAFF !important;
  box-shadow: 0 4px 14px rgba(11, 100, 244, 0.10) !important;
  transform: translateY(-1px) !important;
}

#paymentGatewaysContainer label.radio-inline.zh-payment-option:has(input:checked) {
  border-color: var(--zh-primary, #0B64F4) !important;
  background: #F4F8FF !important;
  box-shadow: 0 0 0 3px rgba(11, 100, 244, 0.14) !important;
  transform: none !important;
}

#paymentGatewaysContainer label.radio-inline.zh-payment-option:has(input:checked)::before {
  border-color: var(--zh-primary, #0B64F4) !important;
  background: var(--zh-primary, #0B64F4) !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

/* --- Corpo do card (logo + titulo + desc) --- */
.zh-payment-option .zh-payment-option__body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
  width: 100% !important;
}

.zh-payment-option .zh-payment-option__logo {
  display: block !important;
  max-height: 36px !important;
  max-width: 140px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto 6px !important;
  object-fit: contain !important;
}

.zh-payment-option .zh-payment-option__title {
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--zh-gray-900, #111827) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.zh-payment-option .zh-payment-option__desc {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--zh-gray-500, #6c757d) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

/* Responsivo: empilha em telas pequenas */
@media (max-width: 576px) {
  #paymentGatewaysContainer label.radio-inline.zh-payment-option {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding: 18px 16px 16px 46px !important;
  }
  #paymentGatewaysContainer label.radio-inline.zh-payment-option::before {
    top: 20px !important;
    left: 16px !important;
  }
  .zh-payment-option .zh-payment-option__logo {
    max-height: 30px !important;
  }
}

/* ==========================================================================
   FIM §53
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   §54  KILL LEGACY FAKE LOGOS (§42.11 / §48 / §39.5 duplicates)
   Os blocos antigos renderizavam logos falsos (SVG data-URI com rects coloridos)
   via background-image no label + ::after. Agora que o novo markup
   .zh-payment-option usa <img> real, precisamos neutralizar essas regras.
   Problema: as regras antigas usam :has(input[value*="stripe"]) que tem
   especificidade MAIOR que .zh-payment-option sozinha, então o !important
   não resolve. Solução: selector com especificidade ainda maior.
   ═══════════════════════════════════════════════════════════════════════════ */
html body #paymentGatewaysContainer label.radio-inline.zh-payment-option,
html body #paymentGatewaysContainer label.radio-inline.zh-payment-option:has(input[value*="stripe"]),
html body #paymentGatewaysContainer label.radio-inline.zh-payment-option:has(input[value*="mercadopago"]),
html body #paymentGatewaysContainer label.radio-inline.zh-payment-option:has(input[value*="MercadoPago"]) {
  background-image: none !important;
  background: #ffffff !important;
}

html body #paymentGatewaysContainer label.radio-inline.zh-payment-option:has(input:checked) {
  background: #F4F8FF !important;
}

html body #paymentGatewaysContainer label.radio-inline.zh-payment-option::after,
html body #paymentGatewaysContainer label.radio-inline.zh-payment-option:has(input[value*="stripe"])::after,
html body #paymentGatewaysContainer label.radio-inline.zh-payment-option:has(input[value*="mercadopago"])::after,
html body #paymentGatewaysContainer label.radio-inline.zh-payment-option:has(input[value*="MercadoPago"])::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §55  FIX: w-hidden !important quebra DataTables (faturas/serviços)
   ───────────────────────────────────────────────────────────────────────────
   §42.13 seta `.w-hidden { display:none !important }` globalmente.
   Templates clientareainvoices.tpl e clientareaproducts.tpl usam:
     <table class="table table-list w-hidden">
     jQuery('#tableXxxList').show().DataTable();
   jQuery.show() em <table> seta inline `display: table` — mas !important do
   §42.13 vence style inline. Tabela fica permanentemente oculta → usuário
   vê contador "1 para 2 de 2 registros" (DataTables conta linhas no DOM)
   mas NENHUMA linha aparece visualmente porque a própria <table> é display:none.

   §43.1 tentou consertar com `.w-hidden[style*="display: block"]` mas só
   cobre block, não table. Tabela precisa display:table.

   Fix: força display:table em tables de listagem especificas (maior
   especificidade que .w-hidden via tag+id+class = 111 > 10).
   ═══════════════════════════════════════════════════════════════════════════ */
table#tableInvoicesList.w-hidden,
table#tableServicesList.w-hidden,
table#tableDomainsList.w-hidden,
table#tableQuotesList.w-hidden,
table.table-list.w-hidden {
  display: table !important;
}

/* IMPORTANTE: NÃO mexe em <span class="w-hidden"> (usado como sort-key
   invisível dentro de <td>) — esses continuam escondidos corretamente. */

/* ==========================================================================
   § 30 — PREMIUM POLISH + MOBILE FIX (2026-04-20)
   Patch adicional para elevar a percepção premium e corrigir mobile.
   Anexado ao custom.css existente (preserva toda a v9.0.0).
   ========================================================================== */

/* ----------------------------------------------------------------
   § 30.1 — ANTI-ZOOM iOS
   Safari/iOS dá zoom automático em qualquer input com font-size < 16px.
   Solução: garantir 16px em TODOS os inputs em telas < 992px.
   ---------------------------------------------------------------- */
@media (max-width: 991.98px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  textarea,
  select,
  .form-control,
  .custom-select,
  .dataTables_wrapper .dataTables_filter input,
  .domain-search input,
  .domain-checker-container .form-control,
  #domain,
  input[name="domain"],
  input[name="sld"] {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
}

/* ----------------------------------------------------------------
   § 30.2 — TOUCH TARGETS (44x44 min — Apple HIG / WCAG 2.5.5)
   Em mobile, qualquer elemento clicável precisa de área mínima.
   ---------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .btn, button, a.btn, input[type="submit"], input[type="button"] {
    min-height: 44px;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }
  .btn-sm, .btn.btn-sm, .btn-group-sm > .btn {
    min-height: 38px;
  }
  .navbar-nav .nav-link,
  .dropdown-menu .dropdown-item,
  .nav-tabs .nav-link,
  .pagination .page-link {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }
  /* Icon-only buttons — garantir área tocável */
  .btn-icon, a.nav-icon, .navbar .icon-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Checkbox / radio areas */
  .form-check {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-left: 2.25em !important;
  }
  .form-check input[type="checkbox"],
  .form-check input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-top: 0;
  }
}

/* ----------------------------------------------------------------
   § 30.3 — BUTTONS PREMIUM (shimmer hover + elevação)
   ---------------------------------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, background-color .15s ease !important;
  isolation: isolate;
}

.btn-primary,
.btn-success,
.btn-info,
.btn.btn-cta {
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(var(--zh-primary-rgb), .15) !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn.btn-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 10px 24px rgba(var(--zh-primary-rgb), .28) !important;
}

.btn-primary:active,
.btn-success:active,
.btn-info:active {
  transform: translateY(0);
  transition-duration: .05s !important;
}

/* Shimmer sweep em hover (toque premium) */
.btn-primary::before,
.btn-success::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  z-index: -1;
  pointer-events: none;
}
.btn-primary:hover::before,
.btn-success:hover::before {
  transform: translateX(100%);
}

/* ----------------------------------------------------------------
   § 30.4 — INPUTS REFINADOS (focus ring premium)
   ---------------------------------------------------------------- */
.form-control,
.custom-select,
textarea.form-control {
  transition: border-color .18s ease, box-shadow .18s ease, background-color .15s ease !important;
}

.form-control:hover:not(:focus):not(:disabled) {
  border-color: var(--zh-gray-400) !important;
}

.form-control:focus,
.custom-select:focus,
textarea.form-control:focus {
  border-color: var(--zh-primary) !important;
  box-shadow: 0 0 0 4px rgba(var(--zh-primary-rgb), .12) !important;
  outline: none !important;
}

/* Estado de erro/sucesso suave */
.form-control.is-invalid,
.form-control.has-error {
  border-color: var(--zh-danger) !important;
  box-shadow: 0 0 0 4px rgba(217, 38, 50, .1) !important;
}
.form-control.is-valid {
  border-color: var(--zh-success) !important;
  box-shadow: 0 0 0 4px rgba(45, 159, 70, .1) !important;
}

/* Floating labels (se usar) */
.form-label-floating {
  position: relative;
}
.form-label-floating label {
  position: absolute;
  left: 14px;
  top: 12px;
  color: var(--zh-gray-500);
  transition: all .2s ease;
  pointer-events: none;
  font-size: 15px;
}
.form-label-floating .form-control:focus + label,
.form-label-floating .form-control:not(:placeholder-shown) + label {
  top: -8px;
  left: 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--zh-card-bg);
  padding: 0 6px;
  color: var(--zh-primary);
}

/* ----------------------------------------------------------------
   § 30.5 — CARDS PREMIUM (hover suave)
   ---------------------------------------------------------------- */
.card,
.panel,
.pricing-box,
.product-card,
.plan-container {
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, border-color .2s ease !important;
  will-change: transform;
}

.card:hover,
.pricing-box:hover,
.product-card:hover,
.plan-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04) !important;
}

/* Plano destacado (mais popular) — pulsa sutilmente */
.pricing-box.featured,
.plan-container.recommended,
.product-card.popular {
  position: relative;
  border: 2px solid var(--zh-primary) !important;
  box-shadow: 0 8px 32px rgba(var(--zh-primary-rgb), .18) !important;
}
.pricing-box.featured::before,
.plan-container.recommended::before {
  content: 'MAIS POPULAR';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--zh-primary);
  color: #fff;
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  box-shadow: 0 4px 12px rgba(var(--zh-primary-rgb), .3);
  white-space: nowrap;
}

/* ----------------------------------------------------------------
   § 30.6 — DOMAIN CHECKER MOBILE (elemento crítico)
   ---------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .domain-checker-container,
  .domain-checker-bg {
    padding: 32px 20px !important;
    border-radius: 16px !important;
  }
  .domain-checker-container h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }
  .domain-checker-container p {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }
  .domain-checker-container .input-group {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    max-width: 100% !important;
  }
  .domain-checker-container .form-control,
  .domain-checker-container .btn {
    width: 100% !important;
    border-radius: 12px !important;
    min-height: 52px !important;
    font-size: 16px !important;
    display: block !important;
  }
  .domain-checker-container .input-group-append {
    margin-left: 0 !important;
    width: 100% !important;
    display: block !important;
  }
  .domain-checker-container .form-control {
    text-align: center;
  }
}

/* ----------------------------------------------------------------
   § 30.7 — HOMEPAGE CARDS GRID MOBILE
   ---------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .card-columns,
  .card-columns.home {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    column-count: unset !important;
  }
  .card-columns.home .card-body {
    padding: 28px 20px !important;
  }
  .card-body, .panel-body { padding: 20px !important; }

  /* Icons com animação em hover */
  .card-columns.home .card-body::before {
    transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  .card-columns.home .card-body:hover::before {
    transform: scale(1.08) rotate(-3deg);
  }
}

/* ----------------------------------------------------------------
   § 30.8 — TABLES RESPONSIVE MOBILE
   ---------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .table-responsive,
  .dataTables_wrapper {
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .table thead th {
    white-space: nowrap;
    font-size: 12px !important;
    letter-spacing: .03em;
    padding: 10px 12px !important;
  }
  .table td, .table th {
    padding: 12px 10px !important;
    font-size: 14px !important;
  }
  /* "Pilula" visual para status */
  .table .label,
  .table .badge {
    padding: 4px 10px !important;
    border-radius: 100px !important;
    font-weight: 600;
  }
}

/* ----------------------------------------------------------------
   § 30.9 — DATATABLES FILTER MOBILE
   ---------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .dataTables_wrapper .dataTables_filter {
    text-align: left !important;
    margin-bottom: 12px;
  }
  .dataTables_wrapper .dataTables_filter input {
    font-size: 16px !important;
    height: 44px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    margin-top: 6px !important;
    margin-left: 0 !important;
  }
  .dataTables_wrapper .dataTables_length {
    margin-bottom: 8px;
  }
  .dataTables_wrapper .dataTables_length select {
    height: 40px !important;
  }
}

/* ----------------------------------------------------------------
   § 30.10 — CONTAINER & MAIN BODY MOBILE
   ---------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .container, .container-fluid {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  #main-body {
    padding-top: 20px !important;
    padding-bottom: 32px !important;
  }
  h1, .h1 { font-size: 26px !important; line-height: 1.25 !important; }
  h2, .h2 { font-size: 22px !important; line-height: 1.3 !important; }
  h3, .h3 { font-size: 18px !important; line-height: 1.35 !important; }
}

/* ----------------------------------------------------------------
   § 30.11 — BREADCRUMB MOBILE (scroll horizontal invisível)
   ---------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .breadcrumb,
  .master-breadcrumb .breadcrumb {
    font-size: 13px !important;
    padding: 10px 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
  }
  .breadcrumb::-webkit-scrollbar { display: none; }
}

/* ----------------------------------------------------------------
   § 30.12 — ALERTS PREMIUM
   ---------------------------------------------------------------- */
.alert {
  border: 1px solid rgba(0,0,0,.05) !important;
  border-left: 3px solid currentColor !important;
  padding: 14px 18px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.alert i, .alert .fa, .alert svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.alert-success { background: var(--zh-success-bg) !important; color: var(--zh-success) !important; }
.alert-warning { background: var(--zh-warning-bg) !important; color: var(--zh-warning) !important; }
.alert-danger  { background: var(--zh-danger-bg)  !important; color: var(--zh-danger)  !important; }
.alert-info    { background: var(--zh-primary-bg) !important; color: var(--zh-primary) !important; }

/* ----------------------------------------------------------------
   § 30.13 — MODAL MOBILE (full-screen-like)
   ---------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 100% !important;
  }
  .modal-content {
    min-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .modal-header, .modal-body, .modal-footer { padding: 20px !important; }
  .modal-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--zh-border);
    z-index: 2;
  }
  .modal-footer .btn { width: 100%; }
}

/* ----------------------------------------------------------------
   § 30.14 — LOGIN / REGISTER FORMS MOBILE
   ---------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .login-form,
  #frmClientRegister,
  #loginfrm,
  body.bodyLogin .primary-content {
    padding: 20px !important;
  }
  .login-form .btn-lg,
  #frmClientRegister .btn-lg,
  .login-form .btn-primary,
  #frmClientRegister .btn-primary {
    width: 100% !important;
    height: 52px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  .login-form .form-group,
  #frmClientRegister .form-group {
    margin-bottom: 16px !important;
  }
}

/* Login card premium (centralizado) */
body.bodyLogin .card,
body.bodyLogin .primary-content {
  max-width: 440px;
  margin: 40px auto !important;
  padding: 36px !important;
  border-radius: 16px !important;
  box-shadow: var(--zh-shadow-lg) !important;
  border: 1px solid var(--zh-border) !important;
}

/* ----------------------------------------------------------------
   § 30.15 — CART / CHECKOUT MOBILE
   ---------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .order-summary,
  .cart-summary,
  #orderSummary {
    position: sticky !important;
    top: 0;
    z-index: 10;
    background: var(--zh-card-bg);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
  }
  .order-forms-container,
  .cart-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Botão "Finalizar Compra" sticky no fundo */
  .cart-checkout-btn,
  .checkout-proceed-btn,
  #btnCheckout {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    z-index: 100;
    padding: 16px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,.12);
  }
  /* Espaço pro sticky não tampar conteúdo */
  .cart-container,
  .checkout-container {
    padding-bottom: 72px !important;
  }
}

/* ----------------------------------------------------------------
   § 30.16 — PRICE TAGS PREMIUM (com "/mês" sutil)
   ---------------------------------------------------------------- */
.plan-price, .product-price, .pricing-box .price {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  font-weight: 800 !important;
}
.plan-price sup, .product-price .currency {
  font-size: .5em !important;
  font-weight: 600 !important;
  vertical-align: top !important;
  margin-right: 2px;
  opacity: .7;
}
.plan-price sub, .product-price .term,
.plan-price .per-month {
  font-size: .35em !important;
  font-weight: 500 !important;
  color: var(--zh-gray-500) !important;
  vertical-align: baseline !important;
  margin-left: 6px;
}

/* Economize % badge (se existir) */
.save-badge, .discount-badge {
  display: inline-block;
  background: var(--zh-success) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(45, 159, 70, .25);
}

/* ----------------------------------------------------------------
   § 30.17 — TRUST BADGES (SSL, Stripe, PIX)
   ---------------------------------------------------------------- */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  margin-top: 24px;
  opacity: .6;
  transition: opacity .2s;
}
.trust-badges:hover { opacity: 1; }
.trust-badges img,
.trust-badges i {
  height: 24px;
  max-width: 80px;
  object-fit: contain;
  filter: grayscale(.4);
  transition: filter .2s;
}
.trust-badges:hover img,
.trust-badges:hover i { filter: grayscale(0); }

/* ----------------------------------------------------------------
   § 30.18 — SKELETON LOADER (estados de loading)
   ---------------------------------------------------------------- */
.skeleton, .is-loading {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.04) 0%,
    rgba(0,0,0,.08) 40%,
    rgba(0,0,0,.04) 80%
  ) !important;
  background-size: 200% 100% !important;
  animation: zh-skeleton-shimmer 1.4s ease-in-out infinite !important;
  border-radius: 6px !important;
  color: transparent !important;
}
@keyframes zh-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ----------------------------------------------------------------
   § 30.19 — EMPTY STATES (quando não há dados)
   ---------------------------------------------------------------- */
.empty-state,
.no-results,
.no-records {
  text-align: center;
  padding: 60px 20px !important;
  color: var(--zh-gray-500) !important;
}
.empty-state i, .empty-state .fa,
.no-results i, .no-results .fa,
.no-records i, .no-records .fa {
  font-size: 48px !important;
  opacity: .28 !important;
  margin-bottom: 16px !important;
  display: block;
}
.empty-state h3, .empty-state .h3 {
  color: var(--zh-gray-700) !important;
  margin-bottom: 8px !important;
}

/* ----------------------------------------------------------------
   § 30.20 — SMOOTH SCROLL + FOCUS VISIBLE + PRINT
   ---------------------------------------------------------------- */
html { scroll-behavior: smooth; }

*:focus-visible {
  outline: 2px solid var(--zh-primary) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
*:focus:not(:focus-visible) { outline: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .navbar, .footer, .breadcrumb, .btn, .sidebar { display: none !important; }
  body { background: white !important; color: black !important; }
  .card, .panel { border: 1px solid #ddd !important; box-shadow: none !important; }
}

/* ----------------------------------------------------------------
   § 30.21 — SCROLLBAR PREMIUM
   ---------------------------------------------------------------- */
@media (min-width: 992px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--zh-gray-300);
    border-radius: 10px;
    transition: background .15s;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--zh-gray-400); background-clip: padding-box; }
  /* Firefox */
  * { scrollbar-width: thin; scrollbar-color: var(--zh-gray-300) transparent; }
}

/* ----------------------------------------------------------------
   § 30.22 — APARIÇÃO SUAVE (fade-in up nos cards ao scrollar)
   ---------------------------------------------------------------- */
@keyframes zh-fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card, .panel, .alert, .pricing-box, .product-card {
  animation: zh-fadeInUp .4s cubic-bezier(.4,0,.2,1) both;
}
.card:nth-child(2) { animation-delay: .06s; }
.card:nth-child(3) { animation-delay: .12s; }
.card:nth-child(4) { animation-delay: .18s; }
.card:nth-child(5) { animation-delay: .24s; }

/* ----------------------------------------------------------------
   § 30.23 — DROPDOWN / TOOLTIP REFINADOS
   ---------------------------------------------------------------- */
.dropdown-menu {
  border: 1px solid var(--zh-border) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  animation: zh-fadeInUp .18s ease-out both;
}
.dropdown-item {
  border-radius: 6px !important;
  padding: 10px 12px !important;
  font-weight: 500 !important;
  transition: background-color .12s ease !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--zh-primary-bg) !important;
  color: var(--zh-primary) !important;
}
.dropdown-divider {
  margin: 6px 4px !important;
  border-top-color: var(--zh-border) !important;
}

.tooltip .tooltip-inner {
  background: var(--zh-gray-900) !important;
  color: #fff !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.2) !important;
}

/* ----------------------------------------------------------------
   § 30.24 — NAVBAR MOBILE (collapse suave)
   ---------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .navbar-collapse {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--zh-border);
  }
  .navbar-nav {
    gap: 2px;
  }
  .navbar-nav .nav-item {
    border-bottom: 1px solid var(--zh-border);
  }
  .navbar-nav .nav-item:last-child { border-bottom: none; }
}

/* ----------------------------------------------------------------
   § 30.25 — PROGRESS BARS PREMIUM
   ---------------------------------------------------------------- */
.progress {
  background: var(--zh-gray-100) !important;
  border-radius: 100px !important;
  height: 8px !important;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.progress-bar {
  background: linear-gradient(90deg, var(--zh-primary), var(--zh-primary-hover)) !important;
  border-radius: 100px !important;
  transition: width .6s cubic-bezier(.4,0,.2,1) !important;
  position: relative;
  overflow: hidden;
}
.progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: zh-progress-shine 2s linear infinite;
}
@keyframes zh-progress-shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ----------------------------------------------------------------
   § 30.26 — HELPER CLASSES (uso on-demand nos .tpl)
   ---------------------------------------------------------------- */
.zh-gradient-text {
  background: linear-gradient(135deg, var(--zh-primary), var(--zh-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.zh-glow-primary {
  box-shadow: 0 0 40px rgba(var(--zh-primary-rgb), .25);
}
.zh-blur-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(20px);
  background: rgba(255,255,255,.7);
  z-index: -1;
}

/* ==========================================================================
   Fim do patch § 30 — PREMIUM POLISH + MOBILE FIX
   ========================================================================== */