/*
 * WHMCS client area — 2026 look.
 *
 * Loaded on every WHMCS page by includes/head.tpl, but every rule is scoped to
 * .wd-ca, which header.tpl adds to .main-body only on logged-in client-area
 * pages (clientarea*, account-*, user-*, tickets, invoices, upgrades). The cart,
 * store, domain search and public pages never match.
 *
 * CSS ONLY. No template markup or WHMCS behaviour changes: DataTables, the
 * bulk-action dropdowns, the sidebar dropdown and every form keep their markup
 * and class names. Restyling only.
 *
 * The legacy Antler theme paints many of these elements with !important
 * (.bg-white, .bg-seccolorstyle, .mergecolor, .btn-default-yellow-fill …), so
 * colour and background declarations here carry !important where the theme
 * does. Layout declarations do not need it.
 */

/* ---------- canvas ---------- */

.wd-ca,
.wd-ca .content,
.wd-ca .inner-content,
.wd-ca .page-wrapper {
  background: var(--wd-warm-050, #fafaf8) !important;
}

.wd-ca #main-body {
  color: var(--wd-slate-600, #4c555d);
  font-family: var(--wd-font-sans);
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.wd-ca #main-body > .container {
  max-width: var(--wd-container, 1320px);
  padding: 0 clamp(1rem, 3vw, 1.5rem);
  width: 100%;
}

.wd-ca h1,
.wd-ca h2,
.wd-ca h3,
.wd-ca h4,
.wd-ca h5,
.wd-ca .title {
  color: var(--wd-charcoal-950, #111416) !important;
  font-family: var(--wd-font-sans) !important;
  letter-spacing: -0.01em;
}

.wd-ca a:not(.btn):not(.list-group-item):not(.wd-btn) {
  color: var(--wd-orange-700, #c9570a);
}

.wd-ca a:not(.btn):not(.list-group-item):not(.wd-btn):hover {
  color: var(--wd-orange-600, #df6812);
}

/* ---------- section menu (the ⋮ dropdown holding the WHMCS sidebar) ---------- */

.wd-ca .dropnav-header-lined {
  display: flex;
  justify-content: flex-end;
}

.wd-ca .drop-down-btn.dropside-content {
  align-items: center;
  background: var(--wd-white, #fff) !important;
  border: 1px solid var(--wd-grey-200, #d9dee3) !important;
  border-radius: var(--wd-radius-pill, 999px) !important;
  box-shadow: var(--wd-shadow-xs);
  color: var(--wd-charcoal-900, #161a1d) !important;
  display: inline-flex;
  font-family: var(--wd-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.5rem;
  height: 2.75rem;
  justify-content: center;
  padding: 0 1.125rem;
  width: auto;
}

.wd-ca .drop-down-btn.dropside-content::after {
  content: "Menu";
}

.wd-ca .drop-down-btn.dropside-content:hover,
.wd-ca .drop-down-btn.dropside-content[aria-expanded="true"] {
  border-color: var(--wd-orange-500, #f47c20) !important;
  color: var(--wd-orange-700, #c9570a) !important;
}

.wd-ca .dropnav-header-lined .dropdown-menu {
  background: var(--wd-white, #fff) !important;
  border: 1px solid var(--wd-grey-200, #d9dee3);
  border-radius: var(--wd-radius-lg, 18px);
  box-shadow: var(--wd-shadow-md);
  max-height: 75vh;
  min-width: 18rem;
  overflow-y: auto;
  padding: 0.75rem;
}

.wd-ca .item-drop-side {
  background: transparent !important;
  border: 0;
  margin: 0 0 0.75rem;
}

.wd-ca .item-drop-side:last-child {
  margin-bottom: 0;
}

.wd-ca .item-drop-side .panel-heading {
  background: transparent !important;
  border: 0;
  padding: 0.25rem 0.625rem 0.375rem;
}

.wd-ca .item-drop-side .panel-title {
  color: var(--wd-grey-500, #69737d) !important;
  font-size: 0.75rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wd-ca .item-drop-side .list-group-item {
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--wd-radius-sm, 8px) !important;
  color: var(--wd-charcoal-900, #161a1d) !important;
  font-size: 0.9375rem;
  font-weight: 500;
  margin: 0;
  padding: 0.5rem 0.625rem;
}

.wd-ca .item-drop-side a.list-group-item:hover,
.wd-ca .item-drop-side a.list-group-item:focus-visible {
  background: var(--wd-orange-050, #fff6ee) !important;
  color: var(--wd-orange-700, #c9570a) !important;
}

.wd-ca .item-drop-side .list-group-item.active {
  background: var(--wd-orange-050, #fff6ee) !important;
  color: var(--wd-orange-700, #c9570a) !important;
  font-weight: 600;
}

.wd-ca .item-drop-side .list-group-item .badge,
.wd-ca .panel-title .badge {
  background: var(--wd-grey-100, #eef1f3) !important;
  border-radius: var(--wd-radius-pill, 999px);
  color: var(--wd-grey-700, #3f4850) !important;
  font-weight: 600;
}

/* ---------- cards: panels, boxed sections ---------- */

.wd-ca .panel,
.wd-ca .service-section,
.wd-ca .bg-seccolorstyle.p-50,
.wd-ca .marketing-email-optin,
.wd-ca .tab-content > .tab-pane > .bg-seccolorstyle {
  background: var(--wd-white, #fff) !important;
  border: 1px solid var(--wd-grey-200, #d9dee3) !important;
  border-radius: var(--wd-radius-lg, 18px) !important;
  box-shadow: var(--wd-shadow-xs) !important;
}

.wd-ca .panel {
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
}

.wd-ca .panel > .panel-heading {
  background: var(--wd-white, #fff) !important;
  border-bottom: 1px solid var(--wd-grey-100, #eef1f3) !important;
  color: var(--wd-charcoal-950, #111416) !important;
  padding: 1rem 1.25rem;
}

.wd-ca .panel > .panel-heading .panel-title {
  color: var(--wd-charcoal-950, #111416) !important;
  font-size: 1.0625rem !important;
  font-weight: 700;
}

.wd-ca .panel > .panel-body {
  padding: 1.25rem;
}

.wd-ca .panel > .panel-footer {
  background: var(--wd-grey-050, #f6f7f8) !important;
  border-top: 1px solid var(--wd-grey-100, #eef1f3);
  padding: 0.875rem 1.25rem;
}

/* ---------- tables (services, domains, invoices, tickets, quotes, emails) ---------- */

.wd-ca .table-container,
.wd-ca .dataTables_wrapper {
  background: var(--wd-white, #fff) !important;
  border: 1px solid var(--wd-grey-200, #d9dee3);
  border-radius: var(--wd-radius-lg, 18px);
  box-shadow: var(--wd-shadow-xs);
  padding: clamp(0.75rem, 2vw, 1.25rem);
}

/* The table container usually wraps the DataTables wrapper; one card, not two. */
.wd-ca .table-container .dataTables_wrapper {
  background: transparent !important;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.wd-ca table.table,
.wd-ca table.table-list {
  background: transparent !important;
  border: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  width: 100% !important;
}

.wd-ca table.table > thead > tr > th {
  background: var(--wd-grey-050, #f6f7f8) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wd-grey-200, #d9dee3) !important;
  color: var(--wd-grey-500, #69737d) !important;
  font-family: var(--wd-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.875rem 1rem !important;
  text-transform: uppercase;
  white-space: nowrap;
}

.wd-ca table.table > thead > tr > th:first-child {
  border-top-left-radius: var(--wd-radius-sm, 8px);
}

.wd-ca table.table > thead > tr > th:last-child {
  border-top-right-radius: var(--wd-radius-sm, 8px);
}

.wd-ca table.table > tbody > tr > td {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wd-grey-100, #eef1f3) !important;
  color: var(--wd-slate-600, #4c555d) !important;
  font-size: 0.9375rem;
  padding: 1rem !important;
  vertical-align: middle !important;
}

.wd-ca table.table > tbody > tr:last-child > td {
  border-bottom: 0 !important;
}

.wd-ca table.table-list > tbody > tr {
  cursor: pointer;
  transition: background-color var(--wd-duration, 200ms);
}

.wd-ca table.table-list > tbody > tr:hover > td {
  background: var(--wd-orange-050, #fff6ee) !important;
}

.wd-ca table.table > tbody strong {
  color: var(--wd-charcoal-950, #111416);
  font-weight: 600;
}

.wd-ca tr.greyed-out > td {
  opacity: 0.6;
}

/* DataTables toolbar: search, page length, info, pagination. */
.wd-ca .dataTables_filter input,
.wd-ca .dataTables_length select {
  background: var(--wd-white, #fff) !important;
  border: 1px solid var(--wd-grey-200, #d9dee3) !important;
  border-radius: var(--wd-radius-pill, 999px) !important;
  color: var(--wd-charcoal-900, #161a1d) !important;
  font-size: 0.875rem;
  height: 2.5rem;
  padding: 0 1rem !important;
}

.wd-ca .dataTables_filter input:focus,
.wd-ca .dataTables_length select:focus {
  border-color: var(--wd-orange-500, #f47c20) !important;
  box-shadow: var(--wd-focus) !important;
  outline: none;
}

.wd-ca .dataTables_filter label,
.wd-ca .dataTables_length label,
.wd-ca .dataTables_info {
  color: var(--wd-grey-500, #69737d) !important;
  font-size: 0.875rem;
}

.wd-ca .dataTables_paginate .pagination {
  gap: 0.25rem;
  margin: 1rem 0 0;
}

.wd-ca .dataTables_paginate .pagination > li > a,
.wd-ca .dataTables_paginate .pagination > li > span,
.wd-ca .dataTables_paginate a.paginate_button {
  background: var(--wd-white, #fff) !important;
  border: 1px solid var(--wd-grey-200, #d9dee3) !important;
  border-radius: var(--wd-radius-sm, 8px) !important;
  color: var(--wd-charcoal-900, #161a1d) !important;
  font-size: 0.875rem;
  margin: 0 !important;
  min-width: 2.25rem;
  padding: 0.375rem 0.75rem !important;
  text-align: center;
}

.wd-ca .dataTables_paginate .pagination > .active > a,
.wd-ca .dataTables_paginate a.paginate_button.current {
  background: var(--wd-orange-600, #df6812) !important;
  border-color: var(--wd-orange-600, #df6812) !important;
  color: var(--wd-white, #fff) !important;
}

.wd-ca .dataTables_paginate .pagination > .disabled > a {
  opacity: 0.45;
}

/* ---------- status labels ---------- */

.wd-ca .label.status,
.wd-ca .label {
  align-items: center;
  background: var(--wd-grey-100, #eef1f3) !important;
  border: 0 !important;
  border-radius: var(--wd-radius-pill, 999px) !important;
  color: var(--wd-grey-700, #3f4850) !important;
  display: inline-flex;
  font-family: var(--wd-font-sans);
  font-size: 0.75rem !important;
  font-weight: 600;
  gap: 0.375rem;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.375rem 0.75rem !important;
  text-transform: none;
  white-space: nowrap;
}

.wd-ca .label.status::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  height: 6px;
  opacity: 0.85;
  width: 6px;
}

.wd-ca .status-active,
.wd-ca .status-paid,
.wd-ca .status-completed,
.wd-ca .status-accepted,
.wd-ca .status-open,
.wd-ca .status-delivered,
.wd-ca .label.status-active,
.wd-ca .label.status-paid,
.wd-ca .label.status-completed,
.wd-ca .label.status-accepted,
.wd-ca .label.status-open,
.wd-ca .label.status-delivered {
  background: var(--wd-success-050, #effaf4) !important;
  color: var(--wd-success-800, #0f6b42) !important;
}

.wd-ca .status-pending,
.wd-ca .status-pending-transfer,
.wd-ca .status-pending-registration,
.wd-ca .status-unpaid,
.wd-ca .status-answered,
.wd-ca .status-customer-reply,
.wd-ca .status-in-progress,
.wd-ca .status-onhold,
.wd-ca .status-draft,
.wd-ca .status-grace,
.wd-ca .label.status-pending,
.wd-ca .label.status-pending-transfer,
.wd-ca .label.status-pending-registration,
.wd-ca .label.status-unpaid,
.wd-ca .label.status-answered,
.wd-ca .label.status-customer-reply,
.wd-ca .label.status-in-progress,
.wd-ca .label.status-onhold,
.wd-ca .label.status-draft,
.wd-ca .label.status-grace {
  background: var(--wd-warning-050, #fff8e8) !important;
  color: var(--wd-warning-800, #8a5606) !important;
}

.wd-ca .status-suspended,
.wd-ca .status-overdue,
.wd-ca .status-expired,
.wd-ca .status-fraud,
.wd-ca .status-redemption,
.wd-ca .status-collections,
.wd-ca .status-dead,
.wd-ca .label.status-suspended,
.wd-ca .label.status-overdue,
.wd-ca .label.status-expired,
.wd-ca .label.status-fraud,
.wd-ca .label.status-redemption,
.wd-ca .label.status-collections,
.wd-ca .label.status-dead {
  background: var(--wd-error-050, #fff1f1) !important;
  color: var(--wd-error-600, #c93434) !important;
}

.wd-ca .status-terminated,
.wd-ca .status-cancelled,
.wd-ca .status-closed,
.wd-ca .status-refunded,
.wd-ca .status-transferred-away,
.wd-ca .label.status-terminated,
.wd-ca .label.status-cancelled,
.wd-ca .label.status-closed,
.wd-ca .label.status-refunded,
.wd-ca .label.status-transferred-away {
  background: var(--wd-grey-100, #eef1f3) !important;
  color: var(--wd-grey-500, #69737d) !important;
}

/* ---------- buttons ---------- */

.wd-ca .btn {
  align-items: center;
  border-radius: var(--wd-radius-pill, 999px) !important;
  display: inline-flex;
  font-family: var(--wd-font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  gap: 0.5rem;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1.2;
  min-height: 2.5rem;
  padding: 0.5rem 1.25rem !important;
  text-transform: none !important;
  transition: background-color var(--wd-duration, 200ms), border-color var(--wd-duration, 200ms),
    color var(--wd-duration, 200ms);
}

.wd-ca .btn-lg {
  font-size: 1rem !important;
  min-height: 3rem;
  padding: 0.75rem 1.75rem !important;
}

.wd-ca .btn-sm,
.wd-ca .btn-xs {
  font-size: 0.8125rem !important;
  min-height: 2rem;
  padding: 0.3125rem 0.875rem !important;
}

/* Primary actions: the theme's yellow-fill and Bootstrap primary/info/success. */
.wd-ca .btn-default-yellow-fill,
.wd-ca .btn-primary,
.wd-ca .btn-info,
.wd-ca .btn-success {
  background: var(--wd-orange-600, #df6812) !important;
  border: 1px solid var(--wd-orange-600, #df6812) !important;
  color: var(--wd-white, #fff) !important;
}

.wd-ca .btn-default-yellow-fill:hover,
.wd-ca .btn-primary:hover,
.wd-ca .btn-info:hover,
.wd-ca .btn-success:hover {
  background: var(--wd-orange-700, #c9570a) !important;
  border-color: var(--wd-orange-700, #c9570a) !important;
  color: var(--wd-white, #fff) !important;
}

/* The domains bulk-action toggle is icon-only. */
.wd-ca .btn-domain-set > .btn {
  min-width: 2.5rem;
  padding: 0.5rem 0.875rem !important;
}

/* Secondary: outline. */
.wd-ca .btn-default,
.wd-ca .btn-default-fill,
.wd-ca .btn-default-primary-fill,
.wd-ca .btn-domain-set > .btn {
  background: var(--wd-white, #fff) !important;
  border: 1px solid var(--wd-grey-300, #c3cad1) !important;
  color: var(--wd-charcoal-900, #161a1d) !important;
}

.wd-ca .btn-default:hover,
.wd-ca .btn-default-fill:hover,
.wd-ca .btn-default-primary-fill:hover,
.wd-ca .btn-domain-set > .btn:hover {
  background: var(--wd-orange-050, #fff6ee) !important;
  border-color: var(--wd-orange-500, #f47c20) !important;
  color: var(--wd-orange-700, #c9570a) !important;
}

.wd-ca .btn-danger {
  background: var(--wd-white, #fff) !important;
  border: 1px solid var(--wd-error-600, #c93434) !important;
  color: var(--wd-error-600, #c93434) !important;
}

.wd-ca .btn-danger:hover {
  background: var(--wd-error-050, #fff1f1) !important;
}

.wd-ca .btn:focus-visible {
  box-shadow: var(--wd-focus) !important;
  outline: none;
}

.wd-ca .btn.disabled,
.wd-ca .btn:disabled {
  opacity: 0.5;
}

.wd-ca .dropdown-menu:not(.bg-seccolorstyle) ,
.wd-ca .btn-group .dropdown-menu {
  background: var(--wd-white, #fff) !important;
  border: 1px solid var(--wd-grey-200, #d9dee3);
  border-radius: var(--wd-radius-md, 12px);
  box-shadow: var(--wd-shadow-md);
  padding: 0.375rem;
}

.wd-ca .btn-group .dropdown-menu > li > a {
  border-radius: var(--wd-radius-sm, 8px);
  color: var(--wd-charcoal-900, #161a1d) !important;
  font-size: 0.9375rem;
  padding: 0.5rem 0.75rem;
}

.wd-ca .btn-group .dropdown-menu > li > a:hover {
  background: var(--wd-orange-050, #fff6ee) !important;
  color: var(--wd-orange-700, #c9570a) !important;
}

/* ---------- forms ---------- */

.wd-ca .form-control,
.wd-ca select.form-control,
.wd-ca textarea.form-control,
.wd-ca input[type="text"].form-control,
.wd-ca input[type="email"].form-control,
.wd-ca input[type="password"].form-control,
.wd-ca input[type="tel"].form-control {
  background: var(--wd-white, #fff) !important;
  border: 1px solid var(--wd-grey-200, #d9dee3) !important;
  border-radius: var(--wd-radius-sm, 8px) !important;
  box-shadow: none !important;
  color: var(--wd-charcoal-900, #161a1d) !important;
  font-family: var(--wd-font-sans);
  font-size: 0.9375rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem !important;
}

.wd-ca textarea.form-control {
  min-height: 7rem;
}

.wd-ca .form-control:focus {
  border-color: var(--wd-orange-500, #f47c20) !important;
  box-shadow: var(--wd-focus) !important;
  outline: none;
}

.wd-ca .control-label,
.wd-ca .col-form-label,
.wd-ca label {
  color: var(--wd-charcoal-900, #161a1d) !important;
  font-family: var(--wd-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
}

.wd-ca .form-group {
  margin-bottom: 1.125rem;
}

.wd-ca .help-block,
.wd-ca .text-muted {
  color: var(--wd-grey-500, #69737d) !important;
}

/* ---------- alerts ---------- */

.wd-ca .alert {
  border: 1px solid transparent;
  border-radius: var(--wd-radius-md, 12px);
  font-size: 0.9375rem;
  padding: 0.875rem 1.125rem;
}

.wd-ca .alert-success {
  background: var(--wd-success-050, #effaf4) !important;
  border-color: rgb(22 138 85 / 25%);
  color: var(--wd-success-800, #0f6b42) !important;
}

.wd-ca .alert-info {
  background: var(--wd-info-050, #eff7ff) !important;
  border-color: rgb(39 112 184 / 25%);
  color: var(--wd-info-600, #2770b8) !important;
}

.wd-ca .alert-warning {
  background: var(--wd-warning-050, #fff8e8) !important;
  border-color: rgb(217 137 18 / 30%);
  color: var(--wd-warning-800, #8a5606) !important;
}

.wd-ca .alert-danger {
  background: var(--wd-error-050, #fff1f1) !important;
  border-color: rgb(201 52 52 / 25%);
  color: var(--wd-error-600, #c93434) !important;
}

/* ---------- tabs ---------- */

.wd-ca .nav-tabs {
  border-bottom: 1px solid var(--wd-grey-200, #d9dee3);
  gap: 0.25rem;
  margin-bottom: 1.25rem;
}

.wd-ca .nav-tabs > li > a {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--wd-grey-700, #3f4850) !important;
  font-weight: 600;
  padding: 0.75rem 1rem;
}

.wd-ca .nav-tabs > li.active > a,
.wd-ca .nav-tabs > li > a.active,
.wd-ca .nav-tabs > li > a:hover {
  border-bottom-color: var(--wd-orange-600, #df6812) !important;
  color: var(--wd-orange-700, #c9570a) !important;
}

/* ---------- dashboard (clientareahome) ---------- */

/* Welcome strip: avatar, name, address, quick-action icons. */
.wd-ca .container-clientarea {
  background: var(--wd-white, #fff) !important;
  border: 1px solid var(--wd-grey-200, #d9dee3);
  border-radius: var(--wd-radius-lg, 18px);
  box-shadow: var(--wd-shadow-xs);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.wd-ca .container-clientarea-bg {
  display: none;
}

.wd-ca .clientarea-new-header .username {
  color: var(--wd-charcoal-950, #111416) !important;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
}

.wd-ca .clientarea-new-header .adress {
  color: var(--wd-grey-500, #69737d) !important;
  font-size: 0.9375rem;
}

.wd-ca .header-features-icons .badge.feat {
  align-items: center;
  background: var(--wd-grey-050, #f6f7f8) !important;
  border: 1px solid var(--wd-grey-200, #d9dee3);
  border-radius: 50%;
  color: var(--wd-charcoal-900, #161a1d) !important;
  display: inline-flex;
  height: 2.75rem;
  justify-content: center;
  width: 2.75rem;
}

.wd-ca .header-features-icons .badge.feat:hover {
  background: var(--wd-orange-050, #fff6ee) !important;
  border-color: var(--wd-orange-500, #f47c20);
  color: var(--wd-orange-700, #c9570a) !important;
}

/* The four count tiles: services, domains, tickets, invoices. */
.wd-ca .overview-services .service-section {
  height: 100%;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) !important;
  text-align: left;
}

.wd-ca .overview-services .service-section .plans.badge {
  background: var(--wd-orange-050, #fff6ee) !important;
  border-radius: var(--wd-radius-pill, 999px);
  color: var(--wd-orange-700, #c9570a) !important;
  font-size: 0.75rem;
  font-weight: 700;
}

.wd-ca .overview-services .service-section .title {
  font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
  font-weight: 700;
  margin: 0.75rem 0 0.25rem;
}

.wd-ca .overview-services .service-section .subtitle {
  color: var(--wd-grey-500, #69737d) !important;
  font-size: 0.9375rem;
}

.wd-ca .overview-services .service-section img.svg,
.wd-ca .overview-services .service-section svg {
  height: 2.5rem;
  width: 2.5rem;
}

/* Account overview band: the theme paints it bright yellow. */
.wd-ca .overview-services.bg-yellow {
  background: var(--wd-grey-050, #f6f7f8) !important;
  border: 1px solid var(--wd-grey-200, #d9dee3);
  border-radius: var(--wd-radius-lg, 18px) !important;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: clamp(2rem, 5vw, 3.5rem) 0 !important;
}

.wd-ca .overview-services .section-heading {
  color: var(--wd-charcoal-950, #111416) !important;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
}

.wd-ca .overview-services .section-subheading {
  color: var(--wd-grey-500, #69737d) !important;
}

/*
 * Account Overview panels as a real grid. The theme floats them as col-lg-6,
 * so a short panel left a hole beside a tall one. Two equal columns, rows
 * as tall as their tallest card, the heading spanning both.
 */
.wd-ca .overview-services.bg-yellow .service-wrap > .row {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0 clamp(1rem, 2.5vw, 1.75rem);
}

.wd-ca .overview-services.bg-yellow .service-wrap > .row::before,
.wd-ca .overview-services.bg-yellow .service-wrap > .row::after {
  content: none;
}

.wd-ca .overview-services.bg-yellow .service-wrap > .row > [class*="col-"] {
  float: none;
  max-width: none;
  padding: 0;
  width: auto;
}

.wd-ca .overview-services.bg-yellow .service-wrap > .row > .col-md-12.text-center {
  grid-column: 1 / -1;
  margin-bottom: 0.5rem;
}

.wd-ca .rockbox {
  display: flex;
}

.wd-ca .rockbox .service-section {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0 !important;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) !important;
  text-align: left;
}

.wd-ca .rockbox .service-section > .title {
  font-size: 1.25rem !important;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

/* The theme paints panel copy white (it was designed for the yellow band). */
.wd-ca .rockbox .service-section p,
.wd-ca .rockbox .service-section .list-group-item {
  color: var(--wd-slate-600, #4c555d) !important;
}

/* Read more sits on the card floor, so buttons line up across a row. */
.wd-ca .rockbox .service-section > .btn {
  align-self: flex-start;
  margin-top: auto;
}

.wd-ca .rockbox .service-section > .list-group,
.wd-ca .rockbox .service-section > p,
.wd-ca .rockbox .service-section > form,
.wd-ca .rockbox .service-section > div:not(.title) {
  margin-bottom: 1.25rem;
}

@media (max-width: 991.98px) {
  .wd-ca .overview-services.bg-yellow .service-wrap > .row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * "Register a New Domain" panel: WHMCS-generated form (text field + Register /
 * Transfer submits inside an input-group). Laid out as one search field with
 * the two actions beside it, wrapping under it on narrow cards.
 */
.wd-ca .rockbox form[action*="domainchecker"] .input-group,
.wd-ca .rockbox form[action*="domainchecker"] {
  align-items: stretch;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  width: 100%;
}

.wd-ca .rockbox form[action*="domainchecker"] .input-group-btn,
.wd-ca .rockbox form[action*="domainchecker"] .input-group-append,
.wd-ca .rockbox form[action*="domainchecker"] .input-group-addon {
  background: transparent !important;
  border: 0 !important;
  display: flex;
  gap: 0.625rem;
  padding: 0;
  width: auto;
}

.wd-ca .rockbox form[action*="domainchecker"] input[type="text"],
.wd-ca .rockbox form[action*="domainchecker"] input[name="domain"] {
  background: var(--wd-white, #fff) !important;
  border: 1px solid var(--wd-grey-300, #c3cad1) !important;
  border-radius: var(--wd-radius-pill, 999px) !important;
  box-shadow: none !important;
  color: var(--wd-charcoal-900, #161a1d) !important;
  flex: 1 1 14rem;
  float: none;
  font-size: 1rem;
  height: 3rem;
  left: auto;
  min-width: 0;
  padding: 0 1.25rem !important;
  /* The theme pins this field position:absolute, so the buttons sat on top
     of it. Back into the flow. */
  position: static !important;
  top: auto;
  width: auto !important;
}

.wd-ca .rockbox form[action*="domainchecker"] input[type="text"]:focus {
  border-color: var(--wd-orange-500, #f47c20) !important;
  box-shadow: var(--wd-focus) !important;
  outline: none;
}

.wd-ca .rockbox form[action*="domainchecker"] [type="submit"] {
  border-radius: var(--wd-radius-pill, 999px) !important;
  box-shadow: none !important;
  height: 3rem;
  margin: 0 !important;
  min-width: 7rem;
  padding: 0 1.5rem !important;
}

/* Register is the primary action; Transfer the outline secondary. */
.wd-ca .rockbox form[action*="domainchecker"] [type="submit"]:not([name="transfer"]) {
  background: var(--wd-orange-600, #df6812) !important;
  border: 1px solid var(--wd-orange-600, #df6812) !important;
  color: var(--wd-white, #fff) !important;
}

.wd-ca .rockbox form[action*="domainchecker"] [type="submit"][name="transfer"] {
  background: var(--wd-white, #fff) !important;
  border: 1px solid var(--wd-grey-300, #c3cad1) !important;
  color: var(--wd-charcoal-900, #161a1d) !important;
}

.wd-ca .rockbox form[action*="domainchecker"] [type="submit"][name="transfer"]:hover {
  background: var(--wd-orange-050, #fff6ee) !important;
  border-color: var(--wd-orange-500, #f47c20) !important;
  color: var(--wd-orange-700, #c9570a) !important;
}

.wd-ca .rockbox .service-section .list-group-item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wd-grey-100, #eef1f3) !important;
  border-radius: 0 !important;
  color: var(--wd-slate-600, #4c555d) !important;
  padding: 0.75rem 0;
}

.wd-ca .rockbox .service-section .list-group-item:last-child {
  border-bottom: 0 !important;
}

/* ---------- small screens ---------- */

@media (max-width: 767.98px) {
  .wd-ca table.table > tbody > tr > td,
  .wd-ca table.table > thead > tr > th {
    padding: 0.75rem !important;
  }

  .wd-ca .dataTables_filter,
  .wd-ca .dataTables_length {
    text-align: left !important;
  }

  .wd-ca .dataTables_filter input {
    margin-left: 0 !important;
    width: 100% !important;
  }
}