/* ============================================================
   Nova Compat — Bootstrap Dark Overrides
   Makes inherited Twenty-One pages look dark without
   overriding individual .tpl files.
   Scoped under #nova-wrapper for specificity.
   ============================================================ */

/* ---- Body (outside wrapper — prevents white flash) ---- */
body.nova-body {
  background-color: #0f1419 !important;
  color: #e8ecf0;
}

/* ---- Global ---- */
#nova-wrapper {
  background-color: #0f1419;
  color: #e8ecf0;
}

/* ---- Body & Backgrounds ---- */
#nova-wrapper .primary-bg-color,
#nova-wrapper section#main-body {
  background-color: #0f1419;
}

/* ---- Typography ---- */
#nova-wrapper h1, #nova-wrapper h2, #nova-wrapper h3,
#nova-wrapper h4, #nova-wrapper h5, #nova-wrapper h6 {
  color: #e8ecf0;
}
#nova-wrapper p,
#nova-wrapper li,
#nova-wrapper span,
#nova-wrapper label,
#nova-wrapper td,
#nova-wrapper th {
  color: #e8ecf0;
}
#nova-wrapper .text-muted,
#nova-wrapper small,
#nova-wrapper .small {
  color: #8893a0 !important;
}
#nova-wrapper a {
  color: #e07850;
}
/* Hover LIGHTENS the coral. #c86840 (accent-hover) is a darker coral: correct
   as a filled-button background, but as text on Nova's dark surfaces it drops
   contrast below AA (3.91:1 on #212830 vs 4.94:1 at rest). */
#nova-wrapper a:hover {
  color: #f08a62;
}

/* ---- Keyboard focus — one ring for everything (WCAG 2.4.7 / 2.4.11) ----
   Only a handful of templates opt into Tailwind's focus-visible:ring-* utilities;
   everything else fell back to the UA default, which on a page audit came out as
   eight different indicators (blue, 1px/5px, several shades) on a coral-accented
   dark theme. Coral on #0f1419 measures 6.15:1, well over the 3:1 minimum. */
#nova-wrapper a:focus-visible,
#nova-wrapper button:focus-visible,
#nova-wrapper input:focus-visible,
#nova-wrapper select:focus-visible,
#nova-wrapper textarea:focus-visible,
#nova-wrapper summary:focus-visible,
#nova-wrapper [tabindex]:focus-visible {
  outline: 2px solid #e07850;
  outline-offset: 2px;
}
/* Accent-filled buttons: a coral ring would sit on coral. */
#nova-wrapper .nova-btn-primary:focus-visible,
#nova-wrapper .btn-primary:focus-visible,
#nova-wrapper .nova-currency-btn.is-active:focus-visible {
  outline: 2px solid #e8ecf0;
  outline-offset: 2px;
}
/* Buttons with amber/colored backgrounds need dark text, not amber */
#nova-wrapper a.nova-btn-primary,
#nova-wrapper a.btn-primary,
#nova-wrapper a.btn-info,
#nova-wrapper a.btn-warning {
  color: #0f1419;
}
#nova-wrapper a.nova-btn-primary:hover,
#nova-wrapper a.btn-primary:hover,
#nova-wrapper a.btn-info:hover,
#nova-wrapper a.btn-warning:hover {
  color: #0f1419;
}

/* ---- Cards & Panels ---- */
#nova-wrapper .card,
#nova-wrapper .panel,
#nova-wrapper .panel-default {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .card-header,
#nova-wrapper .panel-heading {
  background-color: #212830;
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .card-body,
#nova-wrapper .panel-body {
  background-color: #1a2028;
  color: #e8ecf0;
}
#nova-wrapper .card-footer,
#nova-wrapper .panel-footer {
  background-color: #212830;
  border-color: #2d3540;
  color: #e8ecf0;
}

/* ---- Forms ---- */
#nova-wrapper .form-control,
#nova-wrapper input[type="text"],
#nova-wrapper input[type="email"],
#nova-wrapper input[type="password"],
#nova-wrapper input[type="number"],
#nova-wrapper input[type="tel"],
#nova-wrapper input[type="url"],
#nova-wrapper input[type="search"],
#nova-wrapper input[type="date"],
#nova-wrapper select,
#nova-wrapper textarea {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
  /* Renders native control chrome (date picker calendar, select dropdown,
     spinners) dark instead of the OS light default. */
  color-scheme: dark;
}
/* DataTables filter boxes carry a search.png sprite with a baked white
   background; the magnifier is decorative. */
#nova-wrapper input[type="search"] {
  background-image: none;
}
#nova-wrapper .form-control:focus {
  background-color: #212830;
  border-color: #e07850;
  color: #e8ecf0;
  box-shadow: 0 0 0 0.2rem rgba(224, 120, 80, 0.15);
}
#nova-wrapper .form-control::placeholder {
  color: #8893a0;
}
/* Invalid fields. :user-invalid, not :invalid — the latter matches empty
   required fields on load and would flag the form before it is touched. */
#nova-wrapper .form-control:user-invalid,
#nova-wrapper .form-control.is-invalid,
#nova-wrapper .has-error .form-control,
#nova-wrapper select:user-invalid,
#nova-wrapper textarea:user-invalid {
  border-color: #f85149;
  background-color: rgba(248, 81, 73, 0.06);
}
#nova-wrapper .form-control:user-invalid:focus,
#nova-wrapper .form-control.is-invalid:focus,
#nova-wrapper .has-error .form-control:focus,
#nova-wrapper select:user-invalid:focus,
#nova-wrapper textarea:user-invalid:focus {
  border-color: #f85149;
  box-shadow: 0 0 0 0.2rem rgba(248, 81, 73, 0.15);
}
#nova-wrapper .invalid-feedback,
#nova-wrapper .has-error .help-block {
  color: #ff7b72;
}
#nova-wrapper .input-group-text,
#nova-wrapper .input-group-prepend .btn,
#nova-wrapper .input-group-append .btn {
  background-color: #212830;
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .custom-select {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}

/* ---- Buttons ---- */
#nova-wrapper .btn-primary {
  background-color: #e07850;
  border-color: #e07850;
  color: #0f1419;
}
#nova-wrapper .btn-primary:hover,
#nova-wrapper .btn-primary:focus {
  background-color: #c86840;
  border-color: #c86840;
  color: #0f1419;
  box-shadow: 0 0 20px rgba(240, 144, 112, 0.15);
}
/* Bootstrap gives each button variant its own focus glow in ITS palette (green,
   yellow, blue), which clashes with the coral focus ring. Use the same coral
   glow as .btn-primary so keyboard focus looks identical across variants. */
#nova-wrapper .btn-success:focus,
#nova-wrapper .btn-success.focus,
#nova-wrapper .btn-warning:focus,
#nova-wrapper .btn-warning.focus,
#nova-wrapper .btn-danger:focus,
#nova-wrapper .btn-danger.focus,
#nova-wrapper .btn-info:focus,
#nova-wrapper .btn-info.focus,
#nova-wrapper .btn-secondary:focus,
#nova-wrapper .btn-secondary.focus {
  box-shadow: 0 0 20px rgba(240, 144, 112, 0.15);
}
#nova-wrapper .btn-default,
#nova-wrapper .btn-secondary {
  background-color: #212830;
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .btn-default:hover,
#nova-wrapper .btn-secondary:hover {
  background-color: #2d3540;
  border-color: #3d4550;
  color: #e8ecf0;
}
#nova-wrapper .btn-success {
  background-color: #3fb950;
  border-color: #3fb950;
  color: #0f1419;
}
#nova-wrapper .btn-danger {
  background-color: #f85149;
  border-color: #f85149;
  color: #0f1419;
}
#nova-wrapper .btn-warning {
  background-color: #d29922;
  border-color: #d29922;
  color: #0f1419;
}
#nova-wrapper .btn-info {
  background-color: #e07850;
  border-color: #e07850;
  color: #0f1419;
}
/* Only .btn-primary had a hover rule, so every other solid variant sat inert
   under the pointer. On the 404 page that is visible: its two CTAs are
   .btn-primary and .btn-info, both coral, and only one reacted. .btn-info gets
   the identical coral hover; the rest darken generically so one rule covers
   every palette without maintaining a second shade per variant. */
#nova-wrapper .btn-info:hover,
#nova-wrapper a.btn-info:hover {
  background-color: #c86840;
  border-color: #c86840;
  color: #0f1419;
  box-shadow: 0 0 20px rgba(240, 144, 112, 0.15);
}
#nova-wrapper .btn-success:hover,
#nova-wrapper .btn-danger:hover,
#nova-wrapper .btn-warning:hover {
  filter: brightness(0.92);
  box-shadow: 0 0 20px rgba(240, 144, 112, 0.15);
}
#nova-wrapper .btn-link {
  color: #e07850;
}
#nova-wrapper .btn-link:hover {
  color: #f08a62;
}
/* Spans inside solid (dark-text) buttons inherit the global span colour
   (#e8ecf0), turning light-on-accent (e.g. "Añadir al Carrito", the currency
   toggle). Make them follow the button's own colour instead. */
#nova-wrapper .btn-primary span,
#nova-wrapper .btn-success span,
#nova-wrapper .btn-info span,
#nova-wrapper .btn-warning span,
#nova-wrapper .btn-danger span,
#nova-wrapper .nova-btn-primary span,
#nova-wrapper .btn-checkout span,
#nova-wrapper .btn-transfer span,
#nova-wrapper .text-nova-bg span {
  color: inherit !important;
}

/* Bootstrap 3 .label badges (the order form still uses these) ship light text
   on light semantic backgrounds. Re-theme to the Nova palette with dark text. */
#nova-wrapper .label-warning {
  background-color: #d29922;
  color: #0f1419;
}
#nova-wrapper .label-success {
  background-color: #3fb950;
  color: #0f1419;
}
#nova-wrapper .label-danger {
  background-color: #f85149;
  color: #0f1419;
}
#nova-wrapper .label-info,
#nova-wrapper .label-primary {
  background-color: #e07850;
  color: #0f1419;
}
#nova-wrapper .label-default {
  background-color: #2d3540;
  color: #e8ecf0;
}

/* ---- Tables ---- */
#nova-wrapper .table {
  color: #e8ecf0;
}
#nova-wrapper .table thead th {
  border-color: #2d3540;
  color: #e8ecf0;
  background-color: #212830;
}
#nova-wrapper .table td,
#nova-wrapper .table th {
  border-color: #2d3540;
}
#nova-wrapper .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(26, 32, 40, 0.5);
}
#nova-wrapper .table-hover tbody tr:hover {
  background-color: rgba(33, 40, 48, 0.8);
  color: #e8ecf0;
}

/* ---- WHMCS client-area data tables (.table-list / DataTables) ----
   Parent twenty-one theme.min.css hard-sets WHITE backgrounds on
   .table-list rows, header, and sorted columns, which compat never
   overrode — leaving unreadable white rows with light-grey text on
   Services / Domains / Invoices / Support Tickets. Re-theme them dark. */
#nova-wrapper .table-list > tbody > tr > td,
#nova-wrapper table.dataTable tbody tr > .sorting_1,
#nova-wrapper table.dataTable tbody tr > .sorting_2,
#nova-wrapper table.dataTable tbody tr > .sorting_3 {
  background-color: transparent;
  color: #e8ecf0;
  border-color: #2d3540;
}
#nova-wrapper .table-list > tbody > tr:hover > td {
  background-color: rgba(33, 40, 48, 0.8);
}
#nova-wrapper .table-list thead th,
#nova-wrapper .table-list thead th.sorting_asc,
#nova-wrapper .table-list thead th.sorting_desc {
  background-color: #1a2028;
  color: #e8ecf0;
  border-bottom-color: #2d3540;
}

/* ---- Modals ---- */
#nova-wrapper .modal-content {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .modal-header {
  border-color: #2d3540;
}
#nova-wrapper .modal-header .close,
#nova-wrapper .modal-header .close span {
  color: #8893a0;
  text-shadow: none;
}
#nova-wrapper .modal-footer {
  border-color: #2d3540;
}

/* ---- Dropdowns ---- */
#nova-wrapper .dropdown-menu {
  background-color: #1a2028;
  border-color: #2d3540;
}
#nova-wrapper .dropdown-item {
  color: #e8ecf0;
}
#nova-wrapper .dropdown-item:hover,
#nova-wrapper .dropdown-item:focus {
  background-color: #212830;
  color: #e07850;
}
#nova-wrapper .dropdown-divider {
  border-color: #2d3540;
}

/* ---- Alerts ----
   Text uses lightened variants: a token on a 10% tint of itself is 4.4:1. */
#nova-wrapper .alert-success {
  background-color: rgba(63, 185, 80, 0.1);
  border-color: rgba(63, 185, 80, 0.3);
  color: #56d364;
}
#nova-wrapper .alert-danger {
  background-color: rgba(248, 81, 73, 0.1);
  border-color: rgba(248, 81, 73, 0.3);
  color: #ff7b72;
}
#nova-wrapper .alert-warning {
  background-color: rgba(210, 153, 34, 0.1);
  border-color: rgba(210, 153, 34, 0.3);
  color: #e3b341;
}
#nova-wrapper .alert-info {
  background-color: rgba(88, 166, 255, 0.1);
  border-color: rgba(88, 166, 255, 0.3);
  color: #79c0ff;
}
/* Muted text inside an alert would be measured against the alert's tint, not
   the page — inherit the alert's own colour instead of the global muted grey. */
#nova-wrapper .alert small,
#nova-wrapper .alert .small,
#nova-wrapper .alert .text-muted {
  color: inherit !important; /* the global muted rule is !important too */
}

/* ---- Badges ---- */
#nova-wrapper .badge-primary,
#nova-wrapper .badge-info {
  background-color: #e07850;
  color: #0f1419;
}
#nova-wrapper .badge-success {
  background-color: #3fb950;
  color: #0f1419;
}
#nova-wrapper .badge-danger {
  background-color: #f85149;
  color: #0f1419;
}
#nova-wrapper .badge-warning {
  background-color: #d29922;
  color: #0f1419;
}
#nova-wrapper .badge-secondary {
  background-color: #2d3540;
  color: #e8ecf0;
}

/* ---- Pagination ---- */
#nova-wrapper .page-link {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e07850;
}
#nova-wrapper .page-link:hover {
  background-color: #212830;
  border-color: #3d4550;
  color: #e07850;
}
#nova-wrapper .page-item.active .page-link {
  background-color: #e07850;
  border-color: #e07850;
  color: #0f1419;
}
#nova-wrapper .page-item.disabled .page-link {
  background-color: #0f1419;
  border-color: #2d3540;
  color: #7a8493; /* 4.74:1 — disabled is contrast-exempt, but keep it legible anyway */
}
/* Bootstrap renders pagination items flush against each other; separate them so
   adjacent targets clear the 8px minimum. */
#nova-wrapper .pagination {
  gap: 0.5rem;
  flex-wrap: wrap;
}
#nova-wrapper .pagination .page-item .page-link {
  border-radius: 0.625rem;
}

/* ---- Breadcrumbs ---- */
#nova-wrapper .master-breadcrumb {
  background-color: #0f1419;
  border-bottom: 1px solid #212830;
  padding: 0.35rem 0;
  font-size: 0.8rem;
}
#nova-wrapper .breadcrumb {
  background-color: transparent;
  margin-bottom: 0;
  padding: 0;
}
#nova-wrapper .breadcrumb-item,
#nova-wrapper .breadcrumb-item.active {
  color: #8893a0; /* current-page label — 5.74:1; #707d8c landed at 4.41:1, just under AA */
}
#nova-wrapper .breadcrumb-item a {
  color: #8893a0;
}
#nova-wrapper .breadcrumb-item a:hover {
  color: #e07850;
}
#nova-wrapper .breadcrumb-item + .breadcrumb-item::before {
  color: #2d3540;
}

/* ---- Sidebar ---- */
#nova-wrapper .sidebar .list-group-item {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .sidebar .list-group-item:hover {
  background-color: #212830;
  color: #e07850;
}
#nova-wrapper .sidebar .list-group-item.active {
  background-color: #e07850;
  border-color: #e07850;
  color: #0f1419;
}
/* Sidebar badges (category counts in KB) */
#nova-wrapper .sidebar .list-group-item .badge,
#nova-wrapper .sidebar .badge {
  background-color: #e07850;
  color: #0f1419;
}
/* Sidebar panel headings (Categorías, Nube de Etiquetas, Soporte) */
#nova-wrapper .sidebar .card-header,
#nova-wrapper .sidebar .panel-heading {
  background-color: #212830;
  border-color: #2d3540;
  color: #e8ecf0;
}
/* Tag cloud links */
#nova-wrapper .sidebar .tag-cloud a,
#nova-wrapper .sidebar [class*="tag"] a {
  color: #8893a0;
}
#nova-wrapper .sidebar .tag-cloud a:hover,
#nova-wrapper .sidebar [class*="tag"] a:hover {
  color: #e07850;
}

/* ---- Header ---- */
#nova-wrapper .header {
  background-color: #0f1419;
  border-bottom: 1px solid #2d3540;
}
#nova-wrapper .header .topbar {
  background-color: #1a2028;
  border-bottom: 1px solid #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .header .topbar .btn {
  color: #e8ecf0;
}
#nova-wrapper .header .topbar .input-group-text {
  background-color: transparent;
  border-color: transparent;
  color: #8893a0;
}
#nova-wrapper .header .topbar .btn-active-client {
  color: #e07850;
}

/* ---- Tailwind/Bootstrap .collapse conflict fix ---- */
/* Tailwind's .collapse utility sets visibility:collapse which breaks
   Bootstrap's collapse component. Override for Bootstrap contexts. */
#nova-wrapper .navbar-expand-xl .navbar-collapse {
  visibility: visible !important;
}
#nova-wrapper .collapse:not(.show):not(.navbar-collapse) {
  display: none;
}

/* ---- Tailwind/Bootstrap .invisible conflict fix ---- */
/* Bootstrap's .invisible uses !important which blocks Tailwind's
   group-hover:visible on dropdown menus. Override for our nav dropdowns. */
#nova-wrapper .group:hover > .invisible.group-hover\:visible {
  visibility: visible !important;
}

/* ---- Navbar ---- */
#nova-wrapper .navbar {
  background-color: #0f1419;
}
#nova-wrapper .navbar-brand {
  color: #e8ecf0;
}
#nova-wrapper .navbar .search .form-control {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .navbar .search .btn {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #8893a0;
}
#nova-wrapper .main-navbar-wrapper {
  background-color: #1a2028;
  border-top: 1px solid #2d3540;
}
#nova-wrapper .main-navbar-wrapper .navbar-nav .nav-link,
#nova-wrapper #mainNavbar .navbar-nav .nav-link,
#nova-wrapper #mainNavbar .navbar-nav > li > a,
#nova-wrapper #nav .nav-link,
#nova-wrapper #nav > li > a {
  color: #e8ecf0 !important;
}
#nova-wrapper .main-navbar-wrapper .navbar-nav .nav-link:hover,
#nova-wrapper #mainNavbar .navbar-nav .nav-link:hover,
#nova-wrapper #mainNavbar .navbar-nav > li > a:hover,
#nova-wrapper #nav .nav-link:hover,
#nova-wrapper #nav > li > a:hover {
  color: #e07850 !important;
}
#nova-wrapper .navbar .cart-btn {
  color: #e8ecf0;
}
#nova-wrapper .navbar .cart-btn:hover {
  color: #e07850;
}
#nova-wrapper .navbar .cart-btn .badge {
  background-color: #e07850;
  color: #0f1419;
}
/* Mobile hamburger */
#nova-wrapper .navbar .nav-link .fa-bars {
  color: #e8ecf0;
}

/* ---- Footer ---- */
#nova-wrapper .footer {
  background-color: #0a0e12;
  border-top: 1px solid #2d3540;
  color: #8893a0;
}
#nova-wrapper .footer a,
#nova-wrapper .footer .nav-link {
  color: #8893a0;
}
#nova-wrapper .footer a:hover,
#nova-wrapper .footer .nav-link:hover {
  color: #e07850;
}
#nova-wrapper .footer .copyright {
  color: #3d4550;
}
#nova-wrapper .footer .btn {
  color: #8893a0;
}
#nova-wrapper .footer .btn:hover {
  color: #e07850;
}

/* ---- List Groups ---- */
#nova-wrapper .list-group-item {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}

/* ---- Popover (notifications) ---- */
#nova-wrapper .popover {
  background-color: #1a2028;
  border-color: #2d3540;
}
#nova-wrapper .popover-body {
  color: #e8ecf0;
}
#nova-wrapper .client-alerts li a {
  color: #e8ecf0;
}
#nova-wrapper .client-alerts li a:hover {
  background-color: #212830;
}

/* ---- Tabs ---- */
#nova-wrapper .nav-tabs {
  border-color: #2d3540;
}
#nova-wrapper .nav-tabs .nav-link {
  color: #8893a0;
}
#nova-wrapper .nav-tabs .nav-link:hover {
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .nav-tabs .nav-link.active {
  background-color: #1a2028;
  border-color: #2d3540 #2d3540 #1a2028;
  color: #e07850;
}
#nova-wrapper .tab-content {
  background-color: #1a2028 !important;
  border: 1px solid #2d3540;
  border-top: 0;
  color: #e8ecf0;
}

/* ---- Accordion ---- */
#nova-wrapper .accordion .card {
  background-color: #1a2028;
  border-color: #2d3540;
}
#nova-wrapper .accordion .card-header {
  background-color: #212830;
}
#nova-wrapper .accordion .card-header .btn-link {
  color: #e8ecf0;
}

/* ---- Progress Bars ---- */
/* ---- Tooltips ---- */
#nova-wrapper .tooltip-inner {
  background-color: #212830;
  border: 1px solid #2d3540;
  color: #e8ecf0;
}

/* ---- Full-page Overlay ---- */
#nova-wrapper #fullpage-overlay {
  background-color: rgba(15, 20, 25, 0.85);
}

/* ---- Domain Search (homepage) ---- */
#nova-wrapper .domain-checker-container,
#nova-wrapper .domain-checker-bg {
  background-color: #1a2028;
}
#nova-wrapper .domain-checker-result-headline {
  color: #e8ecf0;
}
#nova-wrapper .domain-pricing-table td,
#nova-wrapper .domain-pricing-table th {
  border-color: #2d3540;
  color: #e8ecf0;
}

/* ---- Store / Shopping Cart ---- */
#nova-wrapper .store-product,
#nova-wrapper .product-icon {
  background-color: #1a2028;
  border-color: #2d3540;
}
#nova-wrapper .order-summary,
#nova-wrapper .summary-container,
#nova-wrapper .order-summary .summary-container {
  background-color: #1a2028 !important;
  border-color: #2d3540;
  color: #e8ecf0 !important;
}
#nova-wrapper .summary-container .summary-totals,
#nova-wrapper .summary-container .clearfix {
  color: #e8ecf0;
}
/* Cart configure page (cart.php?a=confproduct): the product description block
   ships a light #f8f8f8 background from the standard_cart stylesheet, which
   renders white-on-white under Nova. */
#nova-wrapper #order-standard_cart .product-info {
  background-color: #1a2028 !important;
  border: 1px solid #2d3540;
  color: #e8ecf0;
}
#nova-wrapper #order-standard_cart .product-info .product-title {
  color: #e8ecf0;
}
/* Store product box (legacy_boxes orderform — /store/vpn): the framing top/bottom
   borders ship sky-blue; recolor to the Nova accent. */
#nova-wrapper .fields-container {
  border-top-color: #e07850 !important;
  border-bottom-color: #e07850 !important;
}
/* Cart view tab content (promo codes area) */
#nova-wrapper .view-cart-items-header {
  background-color: #212830 !important;
  border-color: #2d3540 !important;
  color: #e8ecf0 !important;
}
/* Override the teal/green Bootstrap .bg-primary header in cart tables */
#nova-wrapper .view-cart-items-header .bg-primary,
#nova-wrapper .view-cart-items-header [class*="bg-"] {
  background-color: #212830 !important;
  color: #e8ecf0 !important;
}
/* Applied-coupon box. Stock all.min.css paints it #fff, which left nova-text
   on white at ~1.1:1 — the discount confirmation was invisible. Two IDs plus a
   class outranks the stock `#order-standard_cart .view-cart-promotion-code`,
   so no !important is needed here. */
#nova-wrapper #order-standard_cart .view-cart-promotion-code {
  background-color: rgba(224, 120, 80, 0.10);
  border: 1px dashed rgba(224, 120, 80, 0.40);
  color: #e8ecf0;
}
#nova-wrapper .view-cart-items {
  background-color: #1a2028;
  color: #e8ecf0;
}
/* Cart item rows */
#nova-wrapper .view-cart-items .item {
  border-color: #2d3540;
  color: #e8ecf0;
}
/* Override Bootstrap bg-primary/bg-info used in cart/store headers */
#nova-wrapper .main-content .bg-primary,
#nova-wrapper .main-content .bg-info,
#nova-wrapper .main-content .bg-secondary {
  background-color: #212830 !important;
  color: #e8ecf0 !important;
}
#nova-wrapper .item-info,
#nova-wrapper .item-group,
#nova-wrapper .item-domain,
#nova-wrapper .item-product {
  border-color: #2d3540;
  color: #e8ecf0;
}
/* Cart promo / discount panel */
#nova-wrapper .promo-container,
#nova-wrapper .promo-code {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
/* Store product group pages */
#nova-wrapper .product-group,
#nova-wrapper .products-list,
#nova-wrapper .product-item,
#nova-wrapper .product {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .product:hover {
  background-color: #212830;
}
#nova-wrapper .product .product-name,
#nova-wrapper .product .product-desc {
  color: #e8ecf0;
}
#nova-wrapper .product .product-pricing {
  color: #e07850;
}
/* Store field rows (VPN, product config, etc.) */
#nova-wrapper .field-container,
#nova-wrapper .field-row,
#nova-wrapper .sub-heading,
#nova-wrapper .secure-warning {
  background-color: #1a2028 !important;
  border-color: #2d3540;
  color: #e8ecf0 !important;
}
/* The span inside .sub-heading, not just the container above. Stock
   theme.min.css paints it white with blue text so it masks the divider rule
   behind it — correct on a light theme, a sticker on a dark one. The ground
   must be the page background, not the surface, because the rule it hides is
   drawn on the page. Two IDs plus classes outrank stock, so no !important. */
#nova-wrapper #registration .sub-heading span {
  background-color: #0f1419;
  color: #e8ecf0;
}
/* Domain-option explainers (includes/info-domain-selection.tpl): swap the info
   block to match the selected radio. `.hidden` is Bootstrap's display:none
   !important, so revealing needs !important back. */
#nova-wrapper .cart-body:has(#seltransfer:checked) #infobox-register,
#nova-wrapper .cart-body:has(#selowndomain:checked) #infobox-register {
  display: none;
}
#nova-wrapper .cart-body:has(#seltransfer:checked) #infobox-transfer,
#nova-wrapper .cart-body:has(#selowndomain:checked) #infobox-owndomain {
  display: block !important;
}
/* Domain search in cart */
#nova-wrapper .domain-lookup,
#nova-wrapper .domain-checker-result,
#nova-wrapper .domain-suggestions {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .domain-checker-result .available {
  color: #3fb950;
}
#nova-wrapper .domain-checker-result .unavailable {
  color: #f85149;
}
/* Product config page */
#nova-wrapper .product-config,
#nova-wrapper .product-details,
#nova-wrapper .product-config-options,
#nova-wrapper .order-form {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
/* Checkout */
#nova-wrapper .checkout,
#nova-wrapper .checkout-summary {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
/* Store heading and description blocks */
#nova-wrapper .store-cat-heading,
#nova-wrapper .store-cat-desc,
#nova-wrapper .main-content h1,
#nova-wrapper .main-content h2,
#nova-wrapper .main-content h3 {
  color: #e8ecf0;
}
/* Price/cycle selector */
#nova-wrapper .pricing-amount,
#nova-wrapper .price {
  color: #e07850;
}
/* Radio/checkbox lists in store */
#nova-wrapper .radio-container,
#nova-wrapper .checkbox-container {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
/* Override any inline white/light backgrounds on store elements */
#nova-wrapper [style*="background-color: rgb(232, 240, 249)"],
#nova-wrapper [style*="background-color: rgb(248, 248, 248)"],
#nova-wrapper [style*="background-color: rgb(241, 239, 220)"],
#nova-wrapper [style*="background: rgb(232, 240, 249)"] {
  background-color: #1a2028 !important;
  color: #e8ecf0 !important;
}
/* Override inline green/blue backgrounds on slider bars and Bootstrap utilities */
#nova-wrapper [style*="background-color: rgb(92, 184, 92)"],
#nova-wrapper [style*="background-color: rgb(91, 192, 222)"],
#nova-wrapper [style*="background-color: rgb(2, 117, 216)"],
#nova-wrapper [style*="background: rgb(92, 184, 92)"],
#nova-wrapper [style*="background: rgb(91, 192, 222)"],
#nova-wrapper [style*="background: rgb(2, 117, 216)"] {
  background-color: #e07850 !important;
}
/* Override Bootstrap bg-success/bg-info/bg-primary generic usage */
#nova-wrapper .bg-success:not(.btn):not(.badge):not(.alert) {
  background-color: #212830 !important;
}
#nova-wrapper .bg-info:not(.btn):not(.badge):not(.alert) {
  background-color: #212830 !important;
}
#nova-wrapper .bg-primary:not(.btn):not(.badge):not(.alert) {
  background-color: #212830 !important;
}
/* panel.tpl headers; tint like the matching .alert-* rules. */
#nova-wrapper .bg-warning:not(.btn):not(.badge):not(.alert) {
  background-color: rgba(210, 153, 34, 0.15) !important;
  border-left: 3px solid #d29922;
}
#nova-wrapper .bg-danger:not(.btn):not(.badge):not(.alert) {
  background-color: rgba(248, 81, 73, 0.15) !important;
  border-left: 3px solid #f85149;
}
/* Labels in forms */
#nova-wrapper label {
  color: #e8ecf0;
}
/* Client area panels reused in cart */
#nova-wrapper .main-content {
  color: #e8ecf0;
}

/* ---- View Cart (cart.php?a=view) — Nova accent + contrast fixes ----
   The standard_cart order form ships Bootstrap/light-theme colours that clash
   with Nova: a green checkout CTA, a teal-blue items divider, a white promo
   tab, #666 form labels, and an invisible "continue shopping" link. Re-theme
   them to the Nova palette so the purchase flow matches the rest of the site. */

/* Primary purchase CTA — WHMCS marks it btn-success (green); Nova's primary
   action is the coral accent (matches "Pedir Ahora"). Targeted by id/class so
   semantic btn-success elsewhere stays green. */
#nova-wrapper a#checkout,
#nova-wrapper .btn-checkout {
  background-color: #e07850 !important;
  border-color: #e07850 !important;
  color: #0f1419 !important;
}
#nova-wrapper a#checkout:hover,
#nova-wrapper a#checkout:focus,
#nova-wrapper .btn-checkout:hover,
#nova-wrapper .btn-checkout:focus {
  background-color: #c86840 !important;
  border-color: #c86840 !important;
  color: #0f1419 !important;
}
/* Disabled state (empty cart) — must not look like an active CTA. */
#nova-wrapper a#checkout.disabled,
#nova-wrapper .btn-checkout.disabled,
#nova-wrapper .btn-checkout:disabled {
  background-color: #212830 !important;
  border-color: #2d3540 !important;
  color: #8893a0 !important;
}

/* Teal-blue (#005588) divider under the cart items → Nova border. */
#nova-wrapper .view-cart-items {
  border-bottom-color: #2d3540 !important;
}

/* Promo / tax tabs ship a white active background — re-theme to Nova surface. */
#nova-wrapper .secondary-cart-body .nav-tabs .nav-link.active,
#nova-wrapper .secondary-cart-body .tab-content {
  background-color: #1a2028 !important;
  border-color: #2d3540 !important;
  color: #e8ecf0;
}
#nova-wrapper .secondary-cart-body .nav-tabs .nav-link.active {
  color: #e07850 !important;
}

/* Checkout/cart form labels default to #666 (unreadable on dark). */
#nova-wrapper .control-label,
#nova-wrapper .cart-body label,
#nova-wrapper .secondary-cart-body label {
  color: #c0c8d0 !important;
}

/* "Seguir Comprando" link renders ~invisible (near-black text on dark). */
#nova-wrapper #continueShopping,
#nova-wrapper .btn-continue-shopping {
  background-color: transparent !important;
  color: #8893a0 !important;
}
#nova-wrapper #continueShopping:hover,
#nova-wrapper #continueShopping:focus,
#nova-wrapper .btn-continue-shopping:hover,
#nova-wrapper .btn-continue-shopping:focus {
  color: #e07850 !important;
}

/* Domain name on cart rows ships a dark teal (#005566), unreadable on dark —
   render it as the Nova accent (matches the row's "Editar" link). */
#nova-wrapper .view-cart-items .item-domain,
#nova-wrapper .view-cart-items .item-domain a {
  color: #e07850 !important;
}

/* ---- Checkout (cart.php?a=checkout) ----
   Section-divider headings render in dark teal (#005588); compat already
   darkens their background, so make the text the Nova accent. */
#nova-wrapper .primary-bg-color {
  color: #e07850 !important;
}
/* The mailing-list bootstrap-switch ships green-on / white-off handles. */
#nova-wrapper .bootstrap-switch .bootstrap-switch-handle-on {
  background: #e07850 !important;
  color: #0f1419 !important;
}
#nova-wrapper .bootstrap-switch .bootstrap-switch-handle-off {
  background: #212830 !important;
  color: #8893a0 !important;
}
#nova-wrapper .bootstrap-switch,
#nova-wrapper .bootstrap-switch.bootstrap-switch-focused {
  border-color: #2d3540 !important;
  box-shadow: none !important;
}
/* Payment-method selector ships a white background. */
#nova-wrapper .payment-methods,
#nova-wrapper .paymentmethods {
  background-color: transparent !important;
}

/* Cart item rows ship a white background (light text becomes invisible) —
   re-theme to the dark cart surface. Covers product, addon, and domain rows. */
#nova-wrapper .view-cart-items .item {
  background-color: transparent !important;
  color: #e8ecf0;
}
#nova-wrapper .view-cart-items .item:hover {
  background-color: #212830 !important;
}

/* "Vaciar Carro" empty-cart button ships a teal-blue (#005588) background.
   It's a destructive action: render it as a muted Nova link with a danger hover. */
#nova-wrapper #btnEmptyCart {
  background-color: transparent !important;
  color: #8893a0 !important;
}
#nova-wrapper #btnEmptyCart:hover,
#nova-wrapper #btnEmptyCart:focus {
  color: #f85149 !important;
}

/* ---- Universal Slider / Order Form Templates ---- */
#nova-wrapper .universal-slider,
#nova-wrapper .slider-product-info,
#nova-wrapper .slider-product-info .panel,
#nova-wrapper .slider-product-info .panel-body {
  background-color: #1a2028 !important;
  border-color: #2d3540;
  color: #e8ecf0 !important;
}
#nova-wrapper .slider-product-info .panel-heading {
  background-color: #212830 !important;
  border-color: #2d3540;
  color: #e8ecf0;
}
/* Range sliders: coral accent + transparent background so the browser-default
   white track doesn't show on the dark theme (e.g. the pass.php length slider). */
#nova-wrapper input[type="range"] {
  accent-color: #e07850;
  background-color: transparent;
}
#nova-wrapper .universal-slider input[type="range"],
#nova-wrapper .slider-product-info input[type="range"] {
  accent-color: #e07850;
}
#nova-wrapper .comparison-table,
#nova-wrapper .comparison-table table,
#nova-wrapper .comparison-table th,
#nova-wrapper .comparison-table td {
  background-color: #1a2028 !important;
  border-color: #2d3540 !important;
  color: #e8ecf0 !important;
}
#nova-wrapper .comparison-table thead th {
  background-color: #212830 !important;
  color: #e07850 !important;
  font-weight: 600;
}
/* Comparison table alternating rows */
#nova-wrapper .comparison-table tbody tr:nth-child(even) {
  background-color: #212830 !important;
}
#nova-wrapper .comparison-table tbody tr:nth-child(odd) {
  background-color: #1a2028 !important;
}
/* Comparison table links (e.g. "Tipo de contenido") */
#nova-wrapper .comparison-table a {
  color: #58a6ff !important;
}
#nova-wrapper .comparison-table a:hover {
  color: #e07850 !important;
}
/* noUiSlider / range slider dark */
#nova-wrapper .noUi-connect {
  background: #e07850;
}
#nova-wrapper .noUi-target {
  background: #2d3540;
  border-color: #2d3540;
}
#nova-wrapper .noUi-handle {
  background: #e8ecf0;
  border-color: #8893a0;
}
/* Progress bars — override Bootstrap green/blue defaults → amber */
#nova-wrapper .progress {
  background-color: #2d3540;
}
#nova-wrapper .progress-bar {
  background-color: #e07850 !important;
}
#nova-wrapper .progress-bar.bg-success,
#nova-wrapper .progress-bar.bg-info,
#nova-wrapper .progress-bar.bg-primary {
  background-color: #e07850 !important;
}
/* Ion Range Slider (product selector) — override green/teal/blue */
#nova-wrapper .irs-line,
#nova-wrapper .irs-line-left,
#nova-wrapper .irs-line-mid,
#nova-wrapper .irs-line-right,
#nova-wrapper .irs-line-left.last {
  background: #2d3540 !important;
  border-color: #2d3540 !important;
}
#nova-wrapper .irs-bar,
#nova-wrapper .irs-bar-edge {
  background: #e07850 !important;
  border-color: #e07850 !important;
}
#nova-wrapper .irs-slider,
#nova-wrapper .irs-slider.single {
  background: #e8ecf0 !important;
  border-color: #e07850 !important;
}
#nova-wrapper .irs-grid-pol {
  background: #3d4550 !important;
}
#nova-wrapper .irs-grid-text {
  color: #8893a0 !important;
}
#nova-wrapper .irs-min,
#nova-wrapper .irs-max {
  background: #212830 !important;
  color: #8893a0 !important;
}
#nova-wrapper .irs-single,
#nova-wrapper .irs-from,
#nova-wrapper .irs-to {
  background: #e07850 !important;
  color: #0f1419 !important;
}
/* jQuery UI slider (product selector) — green to amber */
#nova-wrapper .ui-slider {
  background: #2d3540 !important;
  border-color: #2d3540 !important;
}
#nova-wrapper .ui-slider .ui-slider-range {
  background: #e07850 !important;
}
#nova-wrapper .ui-slider .ui-slider-handle {
  background: #e8ecf0 !important;
  border-color: #8893a0 !important;
}
/* WHMCS custom slider widget */
#nova-wrapper .product-slider .slider-track,
#nova-wrapper .slider .slider-track {
  background: #2d3540 !important;
}
#nova-wrapper .product-slider .slider-selection,
#nova-wrapper .slider .slider-selection {
  background: #e07850 !important;
}
#nova-wrapper .product-slider .slider-handle,
#nova-wrapper .slider .slider-handle {
  background: #e8ecf0 !important;
  border-color: #e07850 !important;
}
/* Bootstrap slider (bootstrap-slider.js) */
#nova-wrapper .slider.slider-horizontal .slider-track {
  background: #2d3540 !important;
}
#nova-wrapper .slider.slider-horizontal .slider-selection {
  background: #e07850 !important;
}
/* "Mostrar Menú" toggle button in cart */
#nova-wrapper .btn-sidebar-toggle,
#nova-wrapper [data-toggle="sidebar"] {
  background-color: #212830;
  border-color: #2d3540;
  color: #e8ecf0;
}
/* Order form btn */
#nova-wrapper .order-btn,
#nova-wrapper a.order-btn {
  background-color: #e07850 !important;
  border-color: #e07850 !important;
  color: #0f1419 !important;
}
#nova-wrapper .order-btn:hover,
#nova-wrapper a.order-btn:hover {
  background-color: #c86840 !important;
  border-color: #c86840 !important;
}
/* Domain registration / transfer info boxes from v8 includes */
#nova-wrapper .info-registro,
#nova-wrapper .info-transferencias,
#nova-wrapper .info-domain-selection {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}

/* ---- Articles / Announcements / Content ----
   The surface treatment is for WHMCS-generated bodies (knowledgebase,
   announcements), which use a bare <article>. Nova's own static pages also use
   <article> as their root and must opt out with .nova-page — otherwise they
   inherit a padding-less panel and their content sits flush on its edge. */
#nova-wrapper article:not(.nova-page),
#nova-wrapper .article-body,
#nova-wrapper blockquote {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}

/* ---- Nova static page shell ----
   Shared by every hand-built Nova page so they no longer each reinvent their
   own gutters, rhythm and article opt-out. Three archetypes:
     .nova-page          — landing pages, full container width
     .nova-page--prose   — documents, constrained reading measure
     .nova-page--narrow  — single-card utilities (ip / pass / blocked) */
#nova-wrapper .nova-page {
  padding: 2.25rem 0 4rem;
  background: transparent;
  border: 0;
  color: #e8ecf0;
}
#nova-wrapper .nova-page--prose {
  max-width: 816px;
  margin-left: auto;
  margin-right: auto;
}
#nova-wrapper .nova-page--narrow {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}
#nova-wrapper blockquote {
  border-left: 3px solid #e07850;
  padding: 1rem 1.25rem;
  margin: 0.75rem 0;
  border-radius: 0 0.375rem 0.375rem 0;
}
#nova-wrapper article a {
  color: #e07850;
}
#nova-wrapper article a:hover {
  color: #f08a62;
}
#nova-wrapper .announcement-single .article-body,
#nova-wrapper .announcement-single article {
  background-color: #1a2028;
  color: #e8ecf0;
}

/* ---- Prose rhythm for database-authored HTML ----
   Tailwind's Preflight (nova.css) resets `p` margins to 0 and strips
   list-style/padding from ul/ol. Nova's own components re-add spacing with
   utility classes, but knowledgebase articles, announcements and ticket bodies
   are stored HTML with no classes at all — so they render as one flush wall of
   text with unmarked, unindented lists.

   Three containers hold that HTML, and all three must be listed — a rule
   scoped to <article> alone silently misses announcements and tickets:
     <article>                             knowledgebasearticle.tpl, announcements.tpl,
                                           viewannouncement.tpl
     .card-body.extra-padding .py-5        nothing in Nova since 2026-09-11; kept for the
                                           parent theme, which still ships that markup
     .markdown-content                     viewticket.tpl replies, .md-preview

   Selectors are written out rather than folded into :is() on purpose. :is()
   needs a 2021+ browser, and where it is unsupported the whole rule is dropped
   — reintroducing the bug for exactly the older devices least able to cope.

   `!important` is deliberate: HTML pasted from Word or Google Docs carries
   inline `margin: 0pt` on every paragraph, which outranks any stylesheet. */
#nova-wrapper article:not(.nova-page) p,
#nova-wrapper article:not(.nova-page) ul,
#nova-wrapper article:not(.nova-page) ol,
#nova-wrapper article:not(.nova-page) blockquote,
#nova-wrapper article:not(.nova-page) table,
#nova-wrapper .card-body.extra-padding .py-5 p,
#nova-wrapper .card-body.extra-padding .py-5 ul,
#nova-wrapper .card-body.extra-padding .py-5 ol,
#nova-wrapper .card-body.extra-padding .py-5 blockquote,
#nova-wrapper .card-body.extra-padding .py-5 table,
#nova-wrapper .markdown-content p,
#nova-wrapper .markdown-content ul,
#nova-wrapper .markdown-content ol,
#nova-wrapper .markdown-content blockquote,
#nova-wrapper .markdown-content table {
  margin-bottom: 1rem !important;
}

#nova-wrapper article:not(.nova-page) p,
#nova-wrapper article:not(.nova-page) li,
#nova-wrapper .card-body.extra-padding .py-5 p,
#nova-wrapper .card-body.extra-padding .py-5 li,
#nova-wrapper .markdown-content p,
#nova-wrapper .markdown-content li {
  line-height: 1.7;
}

#nova-wrapper article:not(.nova-page) ul,
#nova-wrapper .card-body.extra-padding .py-5 ul,
#nova-wrapper .markdown-content ul {
  list-style: disc outside;
  padding-left: 1.5rem;
}

#nova-wrapper article:not(.nova-page) ol,
#nova-wrapper .card-body.extra-padding .py-5 ol,
#nova-wrapper .markdown-content ol {
  list-style: decimal outside;
  padding-left: 1.5rem;
}

#nova-wrapper article:not(.nova-page) li,
#nova-wrapper .card-body.extra-padding .py-5 li,
#nova-wrapper .markdown-content li {
  margin-bottom: 0.375rem;
}

#nova-wrapper article:not(.nova-page) h1,
#nova-wrapper article:not(.nova-page) h2,
#nova-wrapper article:not(.nova-page) h3,
#nova-wrapper article:not(.nova-page) h4,
#nova-wrapper .card-body.extra-padding .py-5 h1,
#nova-wrapper .card-body.extra-padding .py-5 h2,
#nova-wrapper .card-body.extra-padding .py-5 h3,
#nova-wrapper .card-body.extra-padding .py-5 h4 {
  margin-top: 1.75rem !important;
  margin-bottom: 0.75rem !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: #e8ecf0;
}

/* Image centring belongs here, not inline in stored content. All three prose
   containers are listed for the reason given above — scoping to <article>
   alone misses announcements and ticket replies, which carry the same markup.
   max-width/height keep the fixed width/height attributes in stored content
   (kept deliberately, to prevent layout shift) from overflowing on mobile. */
#nova-wrapper article:not(.nova-page) img,
#nova-wrapper .card-body.extra-padding .py-5 img,
#nova-wrapper .markdown-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* No leading gap above the first block, no trailing gap below the last. */
#nova-wrapper article:not(.nova-page) > :first-child,
#nova-wrapper .card-body.extra-padding .py-5 > :first-child,
#nova-wrapper .markdown-content > :first-child {
  margin-top: 0 !important;
}
#nova-wrapper article:not(.nova-page) > :last-child,
#nova-wrapper .card-body.extra-padding .py-5 > :last-child,
#nova-wrapper .markdown-content > :last-child {
  margin-bottom: 0 !important;
}

/* ---- Login / Auth ---- */
#nova-wrapper .logincontainer,
#nova-wrapper .login-container {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .login-container .form-group label {
  color: #e8ecf0;
}
#nova-wrapper .login-container .forgot-password a,
#nova-wrapper .logincontainer a {
  color: #e07850;
}
#nova-wrapper .login-container .forgot-password a:hover,
#nova-wrapper .logincontainer a:hover {
  color: #f08a62;
}
/* Social login buttons */
#nova-wrapper .social-login .btn {
  background-color: #212830;
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .social-login .btn:hover {
  background-color: #2d3540;
}

/* ---- Client Area ---- */
#nova-wrapper .client-home-panels .panel,
#nova-wrapper .client-home-panels .card {
  background-color: #1a2028;
  border-color: #2d3540;
}
#nova-wrapper .tiles-container .tile,
#nova-wrapper .tile {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .tile:hover {
  background-color: #212830;
  border-color: #e07850;
}
#nova-wrapper .tile .stat {
  color: #e07850;
}
#nova-wrapper .tile .title {
  color: #e8ecf0;
}
/* Status badges in client area */
#nova-wrapper .label-active,
#nova-wrapper .badge-active,
#nova-wrapper .status-active {
  background-color: #3fb950;
  color: #0f1419;
}
#nova-wrapper .label-pending,
#nova-wrapper .badge-pending,
#nova-wrapper .status-pending {
  background-color: #d29922;
  color: #0f1419;
}
#nova-wrapper .label-overdue,
#nova-wrapper .badge-overdue,
#nova-wrapper .status-overdue {
  background-color: #f85149;
  color: #0f1419;
}
/* WHMCS .label.status badges (invoices, services, tickets) ship Bootstrap
   green/grey backgrounds with light inner text (.textgreen/.textgrey spans
   forced to #e8ecf0 by the global span rule) — low contrast. Re-theme to Nova
   semantics; the descendant rule recolours the inner text spans too. */
#nova-wrapper .status.status-paid,
#nova-wrapper .status.status-completed,
#nova-wrapper .status.status-accepted {
  background-color: #3fb950 !important;
}
#nova-wrapper .status.status-unpaid,
#nova-wrapper .status.status-suspended,
#nova-wrapper .status.status-terminated,
#nova-wrapper .status.status-cancelledpending {
  background-color: #f85149 !important;
}
#nova-wrapper .status.status-draft,
#nova-wrapper .status.status-paymentpending {
  background-color: #d29922 !important;
}
#nova-wrapper .status.status-cancelled,
#nova-wrapper .status.status-closed,
#nova-wrapper .status.status-refunded,
#nova-wrapper .status.status-collections,
#nova-wrapper .status.status-fraud,
#nova-wrapper .status.status-lost,
#nova-wrapper .status.status-on-hold,
#nova-wrapper .status.status-transferred-away {
  background-color: #2d3540 !important;
}
/* Remaining ticket/domain/quote states; unthemed they fall through to
   Bootstrap 3 colours that are not in the Nova palette. */
#nova-wrapper .status.status-open,
#nova-wrapper .status.status-answered {
  background-color: #3fb950 !important;
}
#nova-wrapper .status.status-customer-reply,
#nova-wrapper .status.status-pending-transfer,
#nova-wrapper .status.status-grace,
#nova-wrapper .status.status-delivered {
  background-color: #d29922 !important;
}
#nova-wrapper .status.status-redemption,
#nova-wrapper .status.status-expired {
  background-color: #f85149 !important;
}
#nova-wrapper .status.status-in-progress {
  background-color: #e07850 !important;
}
/* Dark text on the vivid badges (incl. inner colour-class spans). */
#nova-wrapper .status.status-paid, #nova-wrapper .status.status-paid *,
#nova-wrapper .status.status-completed, #nova-wrapper .status.status-completed *,
#nova-wrapper .status.status-accepted, #nova-wrapper .status.status-accepted *,
#nova-wrapper .status.status-unpaid, #nova-wrapper .status.status-unpaid *,
#nova-wrapper .status.status-suspended, #nova-wrapper .status.status-suspended *,
#nova-wrapper .status.status-terminated, #nova-wrapper .status.status-terminated *,
#nova-wrapper .status.status-cancelledpending, #nova-wrapper .status.status-cancelledpending *,
#nova-wrapper .status.status-draft, #nova-wrapper .status.status-draft *,
#nova-wrapper .status.status-paymentpending, #nova-wrapper .status.status-paymentpending *,
#nova-wrapper .status.status-open, #nova-wrapper .status.status-open *,
#nova-wrapper .status.status-answered, #nova-wrapper .status.status-answered *,
#nova-wrapper .status.status-customer-reply, #nova-wrapper .status.status-customer-reply *,
#nova-wrapper .status.status-pending-transfer, #nova-wrapper .status.status-pending-transfer *,
#nova-wrapper .status.status-grace, #nova-wrapper .status.status-grace *,
#nova-wrapper .status.status-delivered, #nova-wrapper .status.status-delivered *,
#nova-wrapper .status.status-redemption, #nova-wrapper .status.status-redemption *,
#nova-wrapper .status.status-expired, #nova-wrapper .status.status-expired *,
#nova-wrapper .status.status-in-progress, #nova-wrapper .status.status-in-progress * {
  color: #0f1419 !important;
}
/* Readable light text on the neutral (grey) badges. */
#nova-wrapper .status.status-cancelled, #nova-wrapper .status.status-cancelled *,
#nova-wrapper .status.status-closed, #nova-wrapper .status.status-closed *,
#nova-wrapper .status.status-refunded, #nova-wrapper .status.status-refunded *,
#nova-wrapper .status.status-collections, #nova-wrapper .status.status-collections *,
#nova-wrapper .status.status-fraud, #nova-wrapper .status.status-fraud *,
#nova-wrapper .status.status-lost, #nova-wrapper .status.status-lost *,
#nova-wrapper .status.status-on-hold, #nova-wrapper .status.status-on-hold *,
#nova-wrapper .status.status-transferred-away, #nova-wrapper .status.status-transferred-away * {
  color: #c0c8d0 !important;
}
/* Ticket system */
#nova-wrapper .ticket-reply,
#nova-wrapper .ticket-message {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .ticket-reply.staff {
  background-color: #212830;
  border-left: 3px solid #e07850;
}
#nova-wrapper .view-ticket .posted-by {
  background-color: #212830;
  color: #8893a0;
}
#nova-wrapper .view-ticket .card-body {
  border-bottom-color: #2d3540;
}
#nova-wrapper .view-ticket .attachments {
  border-top-color: #2d3540;
}
#nova-wrapper .view-ticket .attachment-list li span {
  border-color: #2d3540;
}
#nova-wrapper .view-ticket .attachment-list li figure {
  background-color: #212830;
}
#nova-wrapper [class*="requestor-type-"] {
  background-color: #2d3540;
}
#nova-wrapper .requestor-type-operator {
  background-color: #e07850;
  color: #0f1419;
}
#nova-wrapper .product-status-active {
  background-color: #3fb950;
}
#nova-wrapper .product-status-active .product-status-text {
  color: #0f1419;
}
#nova-wrapper .label[style*="background-color"] {
  background-color: #2d3540 !important;
  color: #e8ecf0;
}
#nova-wrapper .recent-ticket span[style*="color"] {
  color: #8893a0 !important;
}
#nova-wrapper .responsive-tabs-sm .nav-item a:hover {
  background-color: #212830;
}
/* Invoice / quote — these pages also load invoice.min.css, a full Bootstrap 4
   bundle whose light-mode values nothing else here reaches. */
#nova-wrapper .invoice-container,
#nova-wrapper .invoice-header {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .invoice-container td.total-row {
  background-color: #212830;
}
#nova-wrapper .nova-invoice-brand {
  margin-bottom: 0.25rem;
}
/* Invoice/quote status word — plain coloured text, not a badge. */
#nova-wrapper .invoice-status .paid {
  color: #3fb950;
}
#nova-wrapper .invoice-status .unpaid {
  color: #f85149;
}
#nova-wrapper .invoice-status .refunded,
#nova-wrapper .invoice-status .collections {
  color: #d29922;
}
#nova-wrapper .invoice-status .draft,
#nova-wrapper .invoice-status .cancelled {
  color: #8893a0;
}
/* KB */
#nova-wrapper .article-list .article-link {
  color: #e07850;
}
#nova-wrapper .article-list .article-link:hover {
  color: #f08a62;
}

/* ---- Bootstrap Text Utilities (color overrides for dark bg) ---- */
#nova-wrapper .text-success {
  color: #3fb950 !important;
}
#nova-wrapper .text-danger {
  color: #f85149 !important;
}
#nova-wrapper .text-warning {
  color: #d29922 !important;
}
#nova-wrapper .text-info {
  color: #58a6ff !important;
}
#nova-wrapper .text-primary {
  color: #e07850 !important;
}
#nova-wrapper .text-secondary {
  color: #8893a0 !important;
}
#nova-wrapper .text-white {
  color: #e8ecf0 !important;
}

/* ---- Misc Utilities ---- */
#nova-wrapper .bg-white,
#nova-wrapper .bg-light {
  background-color: #1a2028 !important;
}
#nova-wrapper .border {
  border-color: #2d3540 !important;
}
#nova-wrapper .text-dark {
  color: #e8ecf0 !important;
}
#nova-wrapper hr {
  border-color: #2d3540;
}
/* ---- Return to Admin (floating button) ---- */
#nova-wrapper .btn-return-to-admin {
  background-color: #e07850;
  color: #0f1419;
}

/* ============================================================
   Elements OUTSIDE #nova-wrapper
   Modals, overlays, and floating elements that Bootstrap
   appends to <body> or that live outside the wrapper
   ============================================================ */

/* Modals (appended to body by Bootstrap JS) */
body.nova-body .modal-content {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
/* Stock ships .modal .modal-header{background-color:#eee}. */
body.nova-body .modal-header,
body.nova-body .modal .modal-header {
  background-color: #212830;
  border-color: #2d3540;
  color: #e8ecf0;
}
body.nova-body .modal-header .close,
body.nova-body .modal-header .close span {
  color: #e8ecf0;
  text-shadow: none;
  opacity: 1;
}
body.nova-body .modal-header .close:hover span {
  color: #e07850;
}
body.nova-body .modal-footer {
  border-color: #2d3540;
}

/* Controls inside modals. WHMCS appends modals as children of <body>, outside
   #nova-wrapper, so every rule scoped to it misses them. */
body.nova-body .modal-title,
body.nova-body .modal label,
body.nova-body .modal p,
body.nova-body .modal li,
body.nova-body .modal td,
body.nova-body .modal th,
body.nova-body .modal small {
  color: #e8ecf0;
}
body.nova-body .modal a {
  color: #e07850;
}
body.nova-body .modal .form-control,
body.nova-body .modal input[type="text"],
body.nova-body .modal input[type="email"],
body.nova-body .modal input[type="password"],
body.nova-body .modal input[type="number"],
body.nova-body .modal select,
body.nova-body .modal textarea {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
  color-scheme: dark;
}
body.nova-body .modal .form-control:focus {
  background-color: #212830;
  border-color: #e07850;
  box-shadow: 0 0 0 2px rgba(224, 120, 80, 0.25);
}
body.nova-body .modal .btn-default,
body.nova-body .modal .btn-secondary,
body.nova-body .modal .btn-light {
  background-color: #212830;
  border-color: #2d3540;
  color: #e8ecf0;
}
body.nova-body .modal .btn-default:hover,
body.nova-body .modal .btn-secondary:hover,
body.nova-body .modal .btn-light:hover {
  background-color: #2d3540;
  border-color: #3d4550;
  color: #e8ecf0;
}
body.nova-body .modal .btn-primary {
  background-color: #e07850;
  border-color: #e07850;
  color: #0f1419;
}
body.nova-body .modal .btn-primary:hover {
  background-color: #c86840;
  border-color: #c86840;
  color: #0f1419;
}
body.nova-body .modal .input-group-text,
body.nova-body .modal .list-group-item {
  background-color: #212830;
  border-color: #2d3540;
  color: #e8ecf0;
}
body.nova-body .modal hr {
  border-color: #2d3540;
}
body.nova-body .modal-backdrop {
  background-color: #0a0e12;
}

/* Full-page overlay (outside wrapper) */
body.nova-body #fullpage-overlay {
  background-color: rgba(15, 20, 25, 0.85);
}
body.nova-body #fullpage-overlay .msg {
  color: #e8ecf0;
}

/* Popover (appended to body by Bootstrap) */
body.nova-body .popover {
  background-color: #1a2028;
  border-color: #2d3540;
}
body.nova-body .popover-body {
  color: #e8ecf0;
}
body.nova-body .bs-popover-bottom .arrow::after {
  border-bottom-color: #1a2028;
}
body.nova-body .bs-popover-top .arrow::after {
  border-top-color: #1a2028;
}

/* Tooltip (appended to body) */
body.nova-body .tooltip-inner {
  background-color: #212830;
  border: 1px solid #2d3540;
  color: #e8ecf0;
}

/* ---- Domain Register Page Fixes ---- */

/* C1: TLD promo images — darken white backgrounds */
#nova-wrapper .domain-promo-image,
#nova-wrapper .spotlight-tlds img,
#nova-wrapper .domain-checker-result-price img,
#nova-wrapper .primary-content .card-body > .row > div > a > img,
#nova-wrapper .primary-content img[src*="verisign"],
#nova-wrapper .primary-content .text-center > a > img {
  border-radius: 8px;
  filter: brightness(0.85) contrast(1.1);
  background: #1a2028;
  padding: 8px;
}

/* C2: Currency & sidebar select dropdowns — dark theme */
#nova-wrapper select,
#nova-wrapper .sidebar select,
#nova-wrapper select.form-control {
  background-color: #1a2028 !important;
  color: #e8ecf0 !important;
  border-color: #2d3540 !important;
}

/* C3: Hide reCAPTCHA badge — attribution added to footer */
.grecaptcha-badge { visibility: hidden !important; }

/* H3: TLD pricing table — ensure all rows readable */
#nova-wrapper .domain-pricing-table .tld-row,
#nova-wrapper .domain-pricing .panel-body > div,
#nova-wrapper .primary-content .card-body > div > div[class*="row"] {
  opacity: 1 !important;
  color: #e8ecf0 !important;
}
#nova-wrapper .domain-pricing-table .tld-row:nth-child(even),
#nova-wrapper .primary-content .card-body > div > div:nth-child(even) {
  color: #c0c8d0 !important;
}

/* H4: Category filter badges — Nova style */
#nova-wrapper .domain-checker-available-filter a,
#nova-wrapper .primary-content .btn-group-sm .btn,
#nova-wrapper .primary-content a.btn-default {
  background: #1a2028 !important;
  border-color: #2d3540 !important;
  color: #e8ecf0 !important;
  border-radius: 9999px !important;
  font-size: 0.8rem !important;
  padding: 4px 14px !important;
}
#nova-wrapper .domain-checker-available-filter a:hover,
#nova-wrapper .primary-content .btn-group-sm .btn:hover,
#nova-wrapper .primary-content a.btn-default:hover {
  border-color: #e07850 !important;
  color: #e07850 !important;
}

/* M1: Bottom CTA cards — increase heading visibility */
#nova-wrapper .primary-content .card h3,
#nova-wrapper .primary-content .card .h3 {
  color: #e8ecf0 !important;
  opacity: 1 !important;
}

/* M3: Domain search button — Nova accent style */
#nova-wrapper .domain-checker-container button,
#nova-wrapper .primary-content .input-group .btn-primary,
#nova-wrapper .primary-content button.btn-primary {
  background-color: #e07850 !important;
  border-color: #e07850 !important;
  color: #0f1419 !important;
  font-weight: 600;
}
#nova-wrapper .domain-checker-container button:hover,
#nova-wrapper .primary-content .input-group .btn-primary:hover,
#nova-wrapper .primary-content button.btn-primary:hover {
  background-color: #c86840 !important;
  border-color: #c86840 !important;
}

/* Domain search input — dark style */
#nova-wrapper .domain-checker-container input,
#nova-wrapper .primary-content .input-group input.form-control {
  background-color: #1a2028 !important;
  color: #e8ecf0 !important;
  border-color: #2d3540 !important;
}

/* ---- Domain Register: white pricing table background ---- */
#nova-wrapper .bg-white,
#nova-wrapper .domain-pricing .bg-white {
  background-color: #1a2028 !important;
  color: #e8ecf0 !important;
}

/* Domain pricing table header */
#nova-wrapper .tld-pricing-header {
  background-color: #212830 !important;
  color: #8893a0 !important;
  font-weight: 600;
  padding: 12px 0;
  border-bottom: 1px solid #2d3540;
}

/* Domain pricing table rows — alternating */
#nova-wrapper .tld-row {
  border-bottom: 1px solid #2d3540 !important;
  color: #e8ecf0 !important;
}
#nova-wrapper .tld-row:nth-child(even) {
  background-color: #161e26 !important;
}
#nova-wrapper .tld-row:nth-child(odd) {
  background-color: #1a2028 !important;
}
#nova-wrapper .tld-row small {
  color: #8893a0 !important;
}

/* TLD sale group badges */
#nova-wrapper .tld-sale-group {
  font-size: 0.7rem !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
}
/* Lightened variants; a token on a 15% tint of itself is ~4.4:1. */
#nova-wrapper .tld-sale-group-hot {
  background: rgba(224, 120, 80, 0.15) !important;
  color: #f09070 !important;
}
#nova-wrapper .tld-sale-group-new {
  background: rgba(63, 185, 80, 0.15) !important;
  color: #56d364 !important;
}
#nova-wrapper .tld-sale-group-sale {
  background: rgba(210, 153, 34, 0.15) !important;
  color: #e3b341 !important;
}

/* ---- TLD pricing table — Nova polish ----
   Beyond the basic dark overrides: replace the heavy blue column underline with
   a slim coral accent, brand the category filter, add a name/price divider, row
   hover, roomier spacing, and price hierarchy. */

/* Category filter pills (Popular / Novelty / Other). The active filter gets
   .badge-success (green) from the order-form JS — make it the Nova accent. */
#nova-wrapper .tld-filters .badge {
  background-color: #1a2028 !important;
  border: 1px solid #2d3540 !important;
  color: #8893a0 !important;
  border-radius: 9999px !important;
  padding: 6px 16px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  margin: 0 6px 6px 0 !important;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
#nova-wrapper .tld-filters .badge:hover {
  border-color: #e07850 !important;
  color: #e07850 !important;
}
/* The selected pill keeps its dark label on hover. This rule must stay AFTER
   the :hover rule above: both are (1,3,0) and !important, so source order is
   what decides. A duplicate of this whole block used to live further down the
   file and inverted that order, making a hovered selected pill coral-on-coral. */
#nova-wrapper .tld-filters .badge.badge-success,
#nova-wrapper .tld-filters .badge.badge-success:hover,
#nova-wrapper .tld-filters .badge.active,
#nova-wrapper .tld-filters .badge.active:hover {
  background-color: #e07850 !important;
  border-color: #e07850 !important;
  color: #0f1419 !important;
}

/* Header: uppercase muted labels; replace the 6px blue underline under the
   price columns with a slim coral accent; divide the name from the prices. */
#nova-wrapper .tld-pricing-header {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
}
#nova-wrapper .tld-pricing-header .col-xs-4 {
  border-bottom: 2px solid #e07850 !important;
}
#nova-wrapper .tld-pricing-header .col-md-8 {
  border-left: 1px solid #2d3540;
}

/* Rows: roomier, clear name/price divider, coral hover accent. The order form
   puts a short, light-blue 2px separator on the name column — drop it in favour
   of the full-height Nova divider on the price group. */
#nova-wrapper .tld-pricing-header .col-md-4,
#nova-wrapper .tld-row .col-md-4,
#nova-wrapper .tld-row .two-row-center {
  border-right: 0 !important;
}
#nova-wrapper .tld-row {
  padding: 8px 0 !important;
  transition: background-color .15s ease, box-shadow .15s ease;
}
#nova-wrapper .tld-pricing-header .col-md-8,
#nova-wrapper .tld-row .col-md-8 {
  border-left: 1px solid #2d3540;
}
#nova-wrapper .tld-row:hover {
  background-color: #212830 !important;
  box-shadow: inset 3px 0 0 0 #e07850;
}

/* TLD name + price hierarchy (tabular figures; accent the headline register
   price; keep the "1 Año" sublabel muted via the existing .tld-row small rule). */
#nova-wrapper .tld-row .col-md-4 strong {
  font-weight: 600;
  font-size: 0.95rem;
  color: #e8ecf0;
}
#nova-wrapper .tld-row .col-xs-4 {
  font-variant-numeric: tabular-nums;
}
#nova-wrapper .tld-row .col-md-8 .row > .col-xs-4:first-child {
  color: #e07850;
  font-weight: 600;
}

/* Domain checker search area background */
#nova-wrapper .domain-checker-bg {
  background: #161e26 !important;
  border-radius: 10px;
}

/* Domain checker search input */
#nova-wrapper .domain-checker-bg .form-control,
#nova-wrapper #inputDomain {
  background-color: #1a2028 !important;
  color: #e8ecf0 !important;
  border-color: #2d3540 !important;
}

/* Featured TLD tiles ship a white container and per-TLD brand-coloured price
   strips (blue .com, yellow .net) that clash with the dark theme and bury the
   price text. Re-theme the whole tile to Nova surfaces. */
#nova-wrapper .featured-tld {
  background-color: #1a2028 !important;
  border: 1px solid #2d3540 !important;
  border-radius: 10px;
}
#nova-wrapper .featured-tld .img-container {
  background: #212830 !important;
  border-radius: 10px;
  padding: 12px;
}
#nova-wrapper .featured-tld .img-container img {
  filter: brightness(0.9);
}
#nova-wrapper .featured-tld .price {
  background-color: #212830 !important;
  color: #e07850 !important;
  font-weight: 700;
}

/* Domain search input-group wrapper ships a white background. */
#nova-wrapper .input-group-box {
  background-color: transparent !important;
}

/* TLD pricing-header columns ship light (#f5f5f5 / #efefef) backgrounds even
   though the header bar itself is dark. */
#nova-wrapper .tld-pricing-header .row,
#nova-wrapper .tld-pricing-header .col-md-4,
#nova-wrapper .tld-pricing-header [class*="col-"] {
  background-color: transparent !important;
  color: #8893a0 !important;
}

/* Domain promo boxes at bottom */
#nova-wrapper .domain-promo-box {
  background: #1a2028 !important;
  border: 1px solid #2d3540 !important;
  border-radius: 10px !important;
  color: #e8ecf0 !important;
}
#nova-wrapper .domain-promo-box h3 {
  color: #e8ecf0 !important;
}
#nova-wrapper .domain-promo-box .text-warning {
  color: #e07850 !important;
}
#nova-wrapper .domain-promo-box .text-primary {
  color: #e07850 !important;
}
#nova-wrapper .domain-promo-box .btn-warning {
  background: #e07850 !important;
  border-color: #e07850 !important;
  color: #0f1419 !important;
}
#nova-wrapper .domain-promo-box .btn-warning:hover {
  background: #c86840 !important;
  border-color: #c86840 !important;
}

/* Domain search results */
#nova-wrapper .domain-checker-result-headline,
#nova-wrapper #searchDomainInfo {
  color: #e8ecf0 !important;
}
#nova-wrapper .domain-checker-available {
  color: #3fb950 !important;
}
#nova-wrapper .domain-checker-unavailable {
  color: #f85149 !important;
}

/* Suggested domains */
#nova-wrapper .suggested-domains .panel-heading,
#nova-wrapper .suggested-domains .card-header {
  background: #212830 !important;
  color: #e8ecf0 !important;
  border-color: #2d3540 !important;
}
#nova-wrapper .suggested-domains .list-group-item,
#nova-wrapper .domain-suggestion {
  background: #1a2028 !important;
  color: #e8ecf0 !important;
  border-color: #2d3540 !important;
}
#nova-wrapper .suggested-domains .panel-footer,
#nova-wrapper .suggested-domains .card-footer {
  background: #161e26 !important;
  border-color: #2d3540 !important;
}

/* Spotlight TLDs */
#nova-wrapper .spotlight-tld {
  background: #1a2028 !important;
  border-color: #2d3540 !important;
  color: #e8ecf0 !important;
}

/* Info well (registro info block) */
#nova-wrapper .well {
  background: #1a2028 !important;
  border-color: #2d3540 !important;
  color: #c0c8d0 !important;
  border-radius: 10px !important;
}
#nova-wrapper .well h4 {
  color: #e8ecf0 !important;
}
#nova-wrapper .well strong {
  color: #e07850 !important;
}

/* ---- WHMCS Development-License banner (local dev only) ----
   WHMCS core injects an unstyled, class-less yellow notice div when running
   under a Development License. It NEVER renders on production (full license),
   so this rule is a harmless no-op there. Hidden in local dev so it doesn't
   disrupt the Nova design preview. Server-side dev-license restrictions are
   unaffected — this only suppresses the visual notice. Targeted via its
   WHMCS-specific inline background colour, since the div carries no id/class. */
#nova-wrapper [style*="background-color:#ffffd2"] {
  display: none !important;
}

/* ---- WHMCS "Powered by" order-form credit (local dev only) ----
   Production uses a branding-removal licence, so WHMCS core does NOT inject
   this credit there — it only appears locally because the Development licence
   forces it. Hidden for dev/prod preview parity. The injected <p> has no
   id/class, so it is matched by the WHMCS link it wraps. */
#nova-wrapper p:has(> a[href^="https://www.whmcs.com"]) {
  display: none !important;
}

/* Email verification banner — stock paints it #f9f9f9 with #333 text. Shows
   on every page while an address is unverified. */
#nova-wrapper .verification-banner {
  background-color: #212830;
  border-bottom-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .verification-banner .text,
#nova-wrapper .verification-banner .fal,
#nova-wrapper .verification-banner .far,
#nova-wrapper .verification-banner .fas {
  color: #e8ecf0;
}
#nova-wrapper .verification-banner .btn.close,
#nova-wrapper .verification-banner .btn.close span {
  color: #8893a0;
  opacity: 1;
}
#nova-wrapper .verification-banner .btn.close:hover,
#nova-wrapper .verification-banner .btn.close:hover span {
  color: #e07850;
}

/* Without .container ($skipMainBodyContainer), .row keeps its -15px margins
   with no padding to cancel them and the page scrolls sideways. */
#nova-wrapper main > div:not(.container) > .row {
  margin-left: 0;
  margin-right: 0;
}

/* ---- Responsive wide tables ----
   Wide tables (client-area DataTables, the domain-pricing feed table) overflow
   the viewport on mobile and force the whole page to scroll horizontally.
   Let the table scroll within its own area instead. overflow-x:auto only
   engages when the content actually overflows, so it's a no-op on desktop. */
#nova-wrapper .nova-table-scroll,
#nova-wrapper .dataTables_wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Pricing card feature lists (#precios) ----
   Specs are dynamic (from tblproducts.description) and vary in length, so the
   markup can't hardcode spacing. These rules give every card the same vertical
   rhythm, wrap-safe icon alignment, and a denser font that keeps long lines
   ("Espacio de Disco: 1024MB") on one row inside the narrow scroll cards.
   flex-1 on the <ul> + flex-col cards already bottom-aligns the CTA, so equal
   card heights fall out for free. */
#nova-wrapper #precios .nova-plan-features {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px — consistent, comfortable for touch */
}
#nova-wrapper #precios .nova-plan-feature {
  display: flex;
  align-items: flex-start; /* icon stays on the first line when text wraps */
  gap: 0.5rem;
  font-size: 0.8125rem; /* 13px — denser than 14px so specs fit one line */
  line-height: 1.5;
  color: #8893a0; /* nova-muted */
}
#nova-wrapper #precios .nova-plan-feature i {
  flex: 0 0 auto;
  margin-top: 0.2em; /* optically centre the check on the first text line */
  font-size: 0.75rem;
  color: #e07850; /* accent */
}
/* Zero-quantity specs ("Bases de Datos: 0", Plan Byte). A coral check here would
   tick a missing feature as a benefit, so mute it and let the × carry meaning. */
#nova-wrapper #precios .nova-plan-feature--off,
#nova-wrapper #precios .nova-plan-feature--off i {
  color: #6b7684;
}
#nova-wrapper #precios .nova-plan-feature span {
  flex: 1 1 auto;
}

/* ---- Pricing card subtitle slot ----
   Byte/Tera carry "Económico"/"Máximo poder"; the others don't. A fixed-height
   slot on every card keeps the price row aligned across the row. */
#nova-wrapper #precios .nova-plan-subtitle {
  display: block;
  min-height: 1.1rem;
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.1;
  color: #8893a0;
}
#nova-wrapper #precios .nova-plan-subtitle.is-accent { color: #e07850; }

/* ---- Homepage currency toggle (navbar) ---- */
#nova-wrapper .nova-currency-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #2d3540;
  border-radius: 9999px;
  overflow: hidden;
}
#nova-wrapper .nova-currency-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.75rem;
  background: transparent;
  border: 0;
  color: #8893a0 !important;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
#nova-wrapper .nova-currency-btn:hover { color: #e8ecf0 !important; }
#nova-wrapper .nova-currency-btn.is-active,
#nova-wrapper .nova-currency-btn.is-active span { background: #e07850; color: #0f1419 !important; }
#nova-wrapper .nova-currency-btn:focus-visible { outline: 2px solid #e07850; outline-offset: 2px; }
#nova-wrapper .nova-flag {
  display: block;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
}
/* On small screens the flags + currency codes make the navbar right cluster
   overflow, so hide the navbar toggle and surface it inside the mobile menu. */
@media (max-width: 639px) {
  #nova-wrapper .nova-currency-toggle {
    display: none;
  }
  #nova-wrapper #nova-mobile-menu .nova-currency-toggle {
    display: inline-flex;
  }
}

/* ---- VES (Bolívar) price sizing ----
   Bolívar amounts have many more digits than USD; shrink the large card amount
   when VES is active so it stays inside the card. tabular-nums keeps digits
   from jittering. */
#nova-wrapper .nova-price-amount { font-variant-numeric: tabular-nums; }
#nova-wrapper[data-currency="ves"] #precios .nova-price-amount { font-size: 1.5rem; }

/* ---- Annual billing saving (plan cards + cart) ----
   Green, not the coral accent: the accent marks actions, and a saving is
   information. Same tint/text pair as .alert-success. */
#nova-wrapper .nova-plan-annual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #8893a0;
}
#nova-wrapper .nova-plan-annual-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border: 1px solid rgba(63, 185, 80, 0.3);
  border-radius: 9999px;
  background-color: rgba(63, 185, 80, 0.1);
  color: #56d364;
  font-weight: 600;
  white-space: nowrap;
}
#nova-wrapper .annual-offer {
  margin: 0.75rem 0 0;
}
#nova-wrapper .annual-offer p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
}
#nova-wrapper .annual-offer .btn {
  margin-left: auto;
}

/* ---- Domain transfer page (Nova) ----
   The global order-form template prints a redundant centered <h2> that just
   repeats the page <h1>. Hide it (Nova only) and turn its tagline into a left
   subtitle, matching the register page's "h1 + subtitle" layout. */
/* Scope to div.text-center (the heading/subtitle block) so the exclusions note
   <p class="text-center"> keeps its centered alignment under the centered form. */
#nova-wrapper #order-standard_cart .cart-body > div.text-center > h2.font-size-30 {
  display: none;
}
#nova-wrapper #order-standard_cart .cart-body > div.text-center {
  text-align: left !important; /* beat Bootstrap's .text-center !important to match register subtitle */
}
#nova-wrapper #order-standard_cart .cart-body > div.text-center > p {
  color: #e8ecf0; /* match register subtitle */
  margin-bottom: 0;
}

/* Value cards above the form (info-transferencias-top.tpl) */
#nova-wrapper .nova-tx-top {
  margin-bottom: 2.25rem;
}

/* ---- Precios de Dominios page (Nova) ---- */
#nova-wrapper .nova-price-lead {
  color: #8893a0;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 60ch;
  margin: 0 0 2rem;
}
#nova-wrapper .nova-price-props {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 640px) {
  #nova-wrapper .nova-price-props { grid-template-columns: 1fr 1fr; }
}
/* Stays 2-up on desktop. At 4 columns the icon-beside-copy flex squeezed the
   body text to ~20 characters per line and wrapped every heading; 3 columns
   leaves an orphan card since there are four of them. */
@media (min-width: 1024px) {
  #nova-wrapper .nova-price-props { gap: 1.25rem; }
}

/* Domain search bar */
#nova-wrapper .nova-domain-search {
  display: flex;
  gap: 0.6rem;
  padding: 0.75rem;
  background: #1a2028;
  border: 1px solid #2d3540;
  border-radius: 0.75rem;
  margin-bottom: 2.5rem;
}
#nova-wrapper .nova-domain-search-input {
  flex: 1;
  min-width: 0;
  background: #0f1419;
  border: 1px solid #2d3540;
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  color: #e8ecf0;
  font-size: 1rem;
}
#nova-wrapper .nova-domain-search-input::placeholder { color: #8893a0; }
#nova-wrapper .nova-domain-search-input:focus {
  border-color: #e07850; /* no outline:none — the global focus-visible ring must survive */
}
#nova-wrapper .nova-domain-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.6rem;
  background: #e07850;
  color: #0f1419;
  border: 0;
  border-radius: 0.5rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s;
}
#nova-wrapper .nova-domain-search-btn:hover { background: #c86840; }
@media (max-width: 560px) {
  #nova-wrapper .nova-domain-search { flex-direction: column; }
  #nova-wrapper .nova-domain-search-btn { justify-content: center; padding: 0.75rem; }
}

/* Price-list caption */
#nova-wrapper .nova-price-note {
  margin: 0 0 1rem;
  color: #8893a0;
  font-size: 0.85rem;
}
#nova-wrapper .nova-price-note i { color: #3fb950; margin-right: 0.4rem; }

/* Reuse the about CTA band, just add top spacing */
#nova-wrapper .nova-price-cta { margin-top: 3rem; }

/* Transfer info section (info-transferencias.tpl) */
#nova-wrapper .nova-tx {
  margin-top: 3rem;
}
#nova-wrapper .nova-tx-line {
  display: block;
  width: 2.5rem;
  height: 3px;
  border-radius: 9999px;
  background: #e07850;
  margin-bottom: 1.25rem;
}
#nova-wrapper .nova-tx-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
  margin-bottom: 3rem;
}
@media (min-width: 992px) {
  #nova-wrapper .nova-tx-intro {
    grid-template-columns: 3fr 2fr;
    gap: 2.5rem;
  }
}
#nova-wrapper .nova-tx-illustration {
  text-align: center;
}
#nova-wrapper .nova-tx-illustration img {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: 0.625rem;
  border: 1px solid #2d3540;
}
#nova-wrapper .nova-tx-benefits {
  margin-bottom: 3rem;
}

#nova-wrapper .nova-tx-reqs {
  background: #1a2028;
  border: 1px solid #2d3540;
  border-radius: 0.625rem;
  padding: 1.75rem;
  margin-bottom: 2rem;
}
#nova-wrapper .nova-tx-reqs-title {
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
}
#nova-wrapper .nova-tx-reqs-sub {
  margin: 0 0 1.5rem;
}
#nova-wrapper .nova-tx-checklist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  #nova-wrapper .nova-tx-checklist {
    grid-template-columns: 1fr 1fr;
    gap: 1.35rem 2.25rem;
  }
}
#nova-wrapper .nova-tx-check {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
#nova-wrapper .nova-tx-check-title {
  display: block;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
  color: #e8ecf0;
  font-size: 0.9rem;
  margin-bottom: 0.15rem;
}
#nova-wrapper .nova-tx-check-desc {
  display: block;
  color: #8893a0;
  font-size: 0.8rem;
  line-height: 1.5;
}

#nova-wrapper .nova-tx-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: rgba(224, 120, 80, 0.08);
  border: 1px solid rgba(224, 120, 80, 0.25);
  border-left: 3px solid #e07850;
  border-radius: 0.625rem;
  padding: 1.1rem 1.25rem;
}
#nova-wrapper .nova-tx-callout i {
  color: #e07850;
  font-size: 1.1rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}
#nova-wrapper .nova-tx-callout p {
  color: #c2cad4;
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
}

/* ---- Nosotros / About page (Nova) ----
   Surface/gutters/rhythm come from .nova-page; only page-specific bits here. */
#nova-wrapper .nova-about-line {
  display: block;
  width: 2.5rem;
  height: 3px;
  border-radius: 9999px;
  background: #e07850;
  margin-bottom: 1.25rem;
}

/* Hero (copy + framed illustration) */
#nova-wrapper .nova-about-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 3.5rem;
}
@media (min-width: 768px) {
  #nova-wrapper .nova-about-hero {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}
#nova-wrapper .nova-about-lead {
  color: #8893a0;
  font-size: 1.15rem;
  line-height: 1.7;
  margin: 0;
  max-width: 46ch;
}
#nova-wrapper .nova-about-hero-art {
  text-align: center;
}
#nova-wrapper .nova-about-hero-art img {
  width: 100%;
  max-width: 460px;
  height: auto;
  border-radius: 0.625rem;
  border: 1px solid #2d3540;
}

/* Stats band */
#nova-wrapper .nova-about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 4rem;
}
@media (min-width: 768px) {
  #nova-wrapper .nova-about-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}
#nova-wrapper .nova-about-stat {
  background: #1a2028;
  border: 1px solid #2d3540;
  border-radius: 0.625rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
}
#nova-wrapper .nova-about-stat-num {
  display: block;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
  color: #e07850;
  font-variant-numeric: tabular-nums;
}
#nova-wrapper .nova-about-stat-label {
  display: block;
  margin-top: 0.4rem;
  color: #8893a0;
  font-size: 0.85rem;
}

/* Sections */
#nova-wrapper .nova-about-section {
  margin-bottom: 4rem;
}
/* Story: narrative + pioneers highlight side by side (fills the right gap) */
#nova-wrapper .nova-about-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: start;
}
@media (min-width: 992px) {
  #nova-wrapper .nova-about-story {
    grid-template-columns: 1.7fr 1fr;
    gap: 3rem;
  }
}
#nova-wrapper .nova-about-prose {
  max-width: 62ch;
}
#nova-wrapper .nova-about-prose p {
  color: #c2cad4;
  line-height: 1.8;
  margin: 0 0 1rem;
}
#nova-wrapper .nova-about-prose strong {
  color: #e8ecf0;
  font-weight: 600;
}

/* Pioneers highlight */
#nova-wrapper .nova-about-highlight {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: 0;
  padding: 1.1rem 1.25rem;
  background: rgba(224, 120, 80, 0.08);
  border: 1px solid rgba(224, 120, 80, 0.25);
  border-left: 3px solid #e07850;
  border-radius: 0.625rem;
}
#nova-wrapper .nova-about-highlight i {
  color: #e07850;
  font-size: 1.25rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}
#nova-wrapper .nova-about-highlight p {
  margin: 0;
  color: #c2cad4;
  line-height: 1.6;
}
#nova-wrapper .nova-about-highlight strong {
  color: #e8ecf0;
}

/* CTA */
#nova-wrapper .nova-about-cta {
  background: #1a2028;
  border: 1px solid #2d3540;
  border-radius: 0.875rem;
  padding: 2.75rem 2rem;
  text-align: center;
}
#nova-wrapper .nova-about-cta h2 {
  margin: 0 0 0.6rem;
  font-size: 1.6rem;
}
#nova-wrapper .nova-about-cta p {
  color: #8893a0;
  margin: 0 0 1.75rem;
}
#nova-wrapper .nova-about-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}
#nova-wrapper .nova-about-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border-radius: 0.625rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
#nova-wrapper .nova-about-btn-primary {
  background: #e07850;
  color: #0f1419;
}
#nova-wrapper .nova-about-btn-primary:hover {
  background: #c86840;
  color: #0f1419;
}
#nova-wrapper .nova-about-btn-secondary {
  background: transparent;
  color: #e8ecf0;
  border: 1px solid #2d3540;
}
#nova-wrapper .nova-about-btn-secondary:hover {
  border-color: #e07850;
  color: #e07850;
}

/* ---- 404 page CTAs (inherited twenty-one/error/page-not-found.tpl) ----
   The two buttons are adjacent inline-blocks with no margin, so they sat ~3px
   apart — under the 8px minimum gap between touch targets. .buttons appears in
   exactly one inherited template, so scoping to it is precise. */
#nova-wrapper .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ---- Shared hosting feature matrix (hosting.tpl) ----
   A comparison table is the right form for "5 plans x 35 attributes" — the cart
   has always shown this data and it is what tells a buyer what they are getting.
   Wrapped in .nova-table-scroll so it scrolls horizontally on mobile instead of
   forcing the whole page sideways. */
#nova-wrapper .nova-features-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.5;
}
#nova-wrapper .nova-features-table th,
#nova-wrapper .nova-features-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #2d3540;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
/* Deliberately NOT position:sticky. Offsetting it past the sticky navbar made it
   float over the first body row and hide it on mobile; leaving it at top:0 puts
   it under the navbar on desktop. The section group rows (Recursos, Correo, …)
   give enough anchoring without a header that can cover data. */
#nova-wrapper .nova-features-table thead th {
  background-color: #212830;
  color: #e8ecf0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
}
/* Row label column: left-aligned, allowed to wrap, widest of the six. */
#nova-wrapper .nova-features-table tbody th[scope="row"],
#nova-wrapper .nova-features-table thead th:first-child {
  text-align: left;
  white-space: normal;
  min-width: 15rem;
  color: #e8ecf0;
  font-weight: 400;
}
#nova-wrapper .nova-features-table td {
  color: #8893a0;
}
#nova-wrapper .nova-features-table tbody tr:hover td,
#nova-wrapper .nova-features-table tbody tr:hover th[scope="row"] {
  background-color: #212830;
}
/* Section dividers keep 35 rows scannable without hiding anything. */
#nova-wrapper .nova-features-table .nova-features-group th {
  text-align: left;
  background-color: #1a2028;
  color: #e07850;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#nova-wrapper .nova-features-table .nova-cell-yes {
  color: #3fb950;
}
#nova-wrapper .nova-features-table .nova-cell-no {
  color: #6b7684;
}
#nova-wrapper .nova-features-table .nova-cell-warn {
  color: #d29922;
}
/* On a 375px screen a 15rem label column leaves room for a single plan. Trade a
   little label wrapping for two plan columns, so it still reads as a comparison. */
@media (max-width: 640px) {
  #nova-wrapper .nova-features-table tbody th[scope="row"],
  #nova-wrapper .nova-features-table thead th:first-child {
    min-width: 10.5rem;
  }
  #nova-wrapper .nova-features-table th,
  #nova-wrapper .nova-features-table td {
    padding: 0.5rem;
  }
}

/* ---- Order forms (universal_slider + standard_cart) ----
   Orderform templates are global, not per-theme, so Nova can only reach them
   through CSS (see CLAUDE.md). Their stylesheets assume a light page: white and
   #f8f8f8 panels with #666 text. Under Nova those panels stayed light while the
   text inherited Nova's light foreground, so the domain-choice step rendered
   light-grey text on near-white — all three purchase paths unreadable.

   Selectors mirror the orderform's own #order-<form> scoping. Those rules are
   ID-scoped AND load after compat.css, so a plain "#nova-wrapper .option" ties
   or loses on specificity. Matching their scope wins without !important. */

/* standard_cart — domain choice (cart.php?a=add&pid=N) */
#nova-wrapper #order-standard_cart .domain-selection-options .option {
  background-color: #1a2028;
  border: 1px solid #2d3540;
  color: #e8ecf0;
}
#nova-wrapper #order-standard_cart .domain-selection-options .option:hover {
  background-color: #212830;
  border-color: #3d4650;
}
#nova-wrapper #order-standard_cart .domain-selection-options .option label,
#nova-wrapper #order-standard_cart .domain-selection-options .option p,
#nova-wrapper #order-standard_cart .domain-selection-options .option span {
  color: #e8ecf0;
}
/* Mark the path the buyer is committing to instead of leaving all three alike. */
#nova-wrapper #order-standard_cart .domain-selection-options .option:has(input:checked) {
  background-color: #212830;
  border-color: #e07850;
}

/* standard_cart — checkout account chooser; the orderform paints .account
   #f6f6f6 and .account.active #fff. */
#nova-wrapper #order-standard_cart .account-select-container {
  border-right-color: #2d3540;
}
#nova-wrapper #order-standard_cart .account-select-container div.account {
  background: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper #order-standard_cart .account-select-container div.account.active {
  background: #212830;
  border-color: #e07850;
}
/* :not(.label) — this outranks .label-info on specificity. */
#nova-wrapper #order-standard_cart .account-select-container div.account strong,
#nova-wrapper #order-standard_cart .account-select-container div.account label,
#nova-wrapper #order-standard_cart .account-select-container div.account span:not(.label) {
  color: #e8ecf0;
}
#nova-wrapper #order-standard_cart .account-select-container div.account span.small {
  color: #a3adba; /* 7.0:1 on #1a2028 — the muted token lands at 4.3:1 here */
}
/* The remove control inherits #444 from the cart sheet. */
#nova-wrapper #order-standard_cart .btn-link,
#nova-wrapper #order-standard_cart .btn-link.btn-xs {
  color: #e07850;
}
#nova-wrapper #order-standard_cart .btn-link:hover {
  color: #f09070;
}

/* standard_cart — addon cards (cart.php?gid=addons); universal_slider has no
   addons.tpl so this route falls back. Stock paints .product #fff, header
   #f8f8f8, header text #333 — the description landed at 1.19:1. */
#nova-wrapper #order-standard_cart .products .product {
  background: #1a2028;
  border: 1px solid #2d3540;
}
#nova-wrapper #order-standard_cart .products .product header {
  background: #212830;
}
#nova-wrapper #order-standard_cart .products .product header span {
  color: #e8ecf0;
}
#nova-wrapper #order-standard_cart .products .product div.product-desc {
  width: 100%;
}
#nova-wrapper #order-standard_cart .products .product footer .btn-success {
  background-color: #e07850;
  border-color: #e07850;
  color: #0f1419;
}
#nova-wrapper #order-standard_cart .products .product footer .btn-success:hover,
#nova-wrapper #order-standard_cart .products .product footer .btn-success:focus {
  background-color: #c86840;
  border-color: #c86840;
}

/* universal_slider — product slider panel (/store/*, cart.php) */
#nova-wrapper #order-universal_slider .product-container {
  background: #1a2028;
  border: 1px solid #2d3540;
  color: #e8ecf0;
}
#nova-wrapper #order-universal_slider .striped-container {
  background: #212830;
  color: #8893a0;
}
#nova-wrapper #order-universal_slider .product-container .container-with-progress-bar span {
  color: #e8ecf0;
}
#nova-wrapper #order-universal_slider .progress,
#nova-wrapper #order-universal_slider .progress.small-progress {
  background-color: #2d3540;
}
/* "Pedir Ahora" paints a blue linear-gradient via the background shorthand, so
   setting background-color alone leaves the gradient on top. Its colour carries
   !important in the orderform sheet, so matching that is unavoidable here. */
#nova-wrapper #order-universal_slider .product-container .order-button,
#nova-wrapper #order-universal_slider .product-container .order-button:hover {
  background: #e07850;
  color: #0f1419 !important;
}
#nova-wrapper #order-universal_slider .product-container .order-button:hover,
#nova-wrapper #order-universal_slider .product-container .order-button:focus {
  background: #c86840;
  box-shadow: 0 0 20px rgba(240, 144, 112, 0.15);
}

/* ---- Markdown editor (ticket submit + ticket reply) ----
   WHMCS's bootstrap-markdown widget hardcodes white surfaces with !important in
   twenty-one's theme.min.css, so the generic dark textarea rule above loses on
   cascade weight rather than specificity — matching !important is unavoidable.
   Without this the message box renders Nova's #e8ecf0 text on #fff: 1.19:1, so
   a client cannot read what they are typing into a support ticket. */
#nova-wrapper .md-editor {
  background-color: #1a2028;
  border-color: #2d3540;
}
#nova-wrapper .md-editor.active {
  border-color: #e07850;
}
#nova-wrapper .md-editor > .btn-toolbar,
#nova-wrapper .md-editor > .md-header,
#nova-wrapper .md-editor .md-footer {
  background-color: #212830 !important;
  border-color: #2d3540;
  color: #8893a0;
}
#nova-wrapper .md-editor > textarea.markdown-editor,
#nova-wrapper .md-editor > .md-preview {
  background-color: #1a2028 !important;
  border-top-color: #2d3540 !important;
  border-bottom-color: #2d3540 !important;
  color: #e8ecf0;
}
#nova-wrapper .md-editor > textarea.markdown-editor::placeholder {
  color: #8893a0;
}

/* Fullscreen ("expand") mode re-declares white on the container, the input and
   the preview pane, each with !important. */
#nova-wrapper .md-editor.md-fullscreen-mode,
#nova-wrapper .md-editor.md-fullscreen-mode .md-input,
#nova-wrapper .md-editor.md-fullscreen-mode .md-input:focus,
#nova-wrapper .md-editor.md-fullscreen-mode .md-input:hover,
#nova-wrapper .md-editor.md-fullscreen-mode .md-preview {
  background: #0f1419 !important;
  color: #e8ecf0 !important;
}

/* Attachment picker — Bootstrap 4 .custom-file, light by default. The visible
   control is the label; the real input is transparent and stacked over it. */
#nova-wrapper .custom-file-label {
  background-color: #1a2028;
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .custom-file-label::after {
  background-color: #212830;
  border-left: 1px solid #2d3540;
  color: #e8ecf0;
}
/* The textarea's top/bottom borders are internal dividers between toolbar and
   footer, not a focus ring — .md-editor.active carries that. The generic
   .form-control:focus rule would otherwise paint them coral, giving two loud
   full-width rules inside the frame on top of the container's own ring. */
#nova-wrapper .md-editor > textarea.markdown-editor:focus {
  border-top-color: #2d3540 !important;
  border-bottom-color: #2d3540 !important;
  box-shadow: none;
}

/* ---- Print ----
   Browsers drop backgrounds when printing, leaving Nova's light text on white
   paper. Invoice and quote both ship a Print button. */
@media print {
  body.nova-body,
  #nova-wrapper,
  #nova-wrapper *,
  #nova-wrapper *::before,
  #nova-wrapper *::after {
    background: transparent !important;
    background-color: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  #nova-wrapper .invoice-container,
  #nova-wrapper table,
  #nova-wrapper th,
  #nova-wrapper td,
  #nova-wrapper .card,
  #nova-wrapper hr {
    border-color: #999 !important;
  }
}

@media (max-width: 767.98px) {
  #nova-wrapper .responsive-tabs-sm {
    background: #1a2028;
    border-color: #2d3540;
  }
  #nova-wrapper .responsive-tabs-sm .nav-item {
    border-bottom-color: #2d3540 !important;
  }
  #nova-wrapper .responsive-tabs-sm .nav-item a.active {
    background-color: #212830 !important;
  }
}

/* ---------------------------------------------------------------------------
   Knowledgebase article header — knowledgebasearticle.tpl (Nova override).

   Stock twenty-one puts the print button inside the <h1> and renders every tag
   as one comma-joined badge-info pill. The Nova template splits those apart;
   these rules give the title real hierarchy (it inherited body size) and style
   the tags as quiet, tappable chips.

   Tags deliberately do NOT use the coral accent as a fill: #e07850 marks
   actions, and metadata that outshouts the buttons inverts the page's
   hierarchy. Coral appears only on hover, as the affordance. */
#nova-wrapper .kb-article-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
#nova-wrapper .kb-article-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: #e8ecf0;
  margin: 0;
}
#nova-wrapper .kb-print {
  flex: 0 0 auto;
}
@media print {
  #nova-wrapper .kb-print,
  #nova-wrapper .kb-vote,
  #nova-wrapper .kb-tags {
    display: none !important;
  }
}
#nova-wrapper .kb-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
}
#nova-wrapper .kb-tags li {
  margin: 0;
}
#nova-wrapper a.kb-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border: 1px solid #2d3540;
  border-radius: 9999px;
  background-color: #212830;
  color: #8893a0;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
#nova-wrapper a.kb-tag:hover,
#nova-wrapper a.kb-tag:focus {
  color: #e8ecf0;
  border-color: #e07850;
  text-decoration: none;
}
#nova-wrapper a.kb-tag:focus-visible {
  outline: 2px solid #e07850;
  outline-offset: 2px;
}
#nova-wrapper .kb-tags + article {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2d3540;
}
#nova-wrapper .kb-vote {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2d3540;
}
#nova-wrapper .kb-vote-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #e8ecf0;
  margin: 0 0 0.75rem;
}
@media (max-width: 575.98px) {
  #nova-wrapper .kb-article-head {
    flex-direction: column;
  }
  #nova-wrapper .kb-article-title {
    font-size: 1.5rem;
  }
}

/* Announcement listing excerpt.
   WHMCS builds $announcement.summary by stripping tags, which silently discarded
   <del> - so a retracted notice rendered on the index as ordinary live prose. ANN
   25's struck BANESCO suspension read as a standing instruction not to pay into a
   working account. The listing therefore renders the real body and clamps it
   visually; "Seguir leyendo" already leads to the full article. */
#nova-wrapper .announcement-excerpt {
  max-height: 11rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 7.5rem, transparent);
  mask-image: linear-gradient(to bottom, #000 7.5rem, transparent);
}
/* The index is a text preview. An announcement's image is 600-1376px wide and
   fills the whole clamp on its own, leaving no prose to preview - so it stays
   on the article, where it is part of the record.

   `article.announcement-excerpt` rather than `.announcement-excerpt`: the
   generic image rule above is `#nova-wrapper article:not(.nova-page) img`, which
   scores (1,1,2). A class-plus-element selector scores (1,1,1) and loses no
   matter where it sits in the file. */
#nova-wrapper article.announcement-excerpt img {
  display: none;
}
/* Hiding the image leaves its wrapping <p> holding open an empty gap. `:has()`
   is deliberate here where `:is()` was rejected for the rhythm rules above: if a
   browser does not support it the rule is dropped and the gap simply returns,
   which is the state before this rule existed. No bug is reintroduced. */
#nova-wrapper article.announcement-excerpt p:has(img) {
  display: none;
}

/* Announcement detail. Nova overrides viewannouncement.tpl for the same reason
   it overrides knowledgebasearticle.tpl: the stock twenty-one markup carries no
   Nova class, so its <h1> inherited body type - 16px at weight 400, measured
   against the knowledgebase article's 30px/600. A title that reads as a
   paragraph is not a title. */
#nova-wrapper .ann-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: #e8ecf0;
  margin: 0;
}
#nova-wrapper .ann-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0.75rem 0 0;
  color: #8893a0;
  font-size: 0.875rem;
}
#nova-wrapper .ann-head + article {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2d3540;
}
@media (max-width: 575.98px) {
  #nova-wrapper .ann-title {
    font-size: 1.5rem;
  }
}

/* The back link is a bare anchor dropped straight after the card in ten
   templates - two of Nova's own and eight inherited - with no wrapper and no
   margin, so it collides with whatever it follows. Fixing it here covers all
   ten rather than the one page a report happens to name. */
#nova-wrapper .primary-content > .card + a.btn,
#nova-wrapper .primary-content > a.btn + a.btn {
  margin-top: 1.5rem;
}

/* <del> marks a retracted notice in stored announcement HTML, so the strike
   carries meaning rather than decoration - it must not depend on the UA
   default surviving a preflight upgrade. See STYLE-GUIDE.md, Announcements. */
#nova-wrapper article:not(.nova-page) del,
#nova-wrapper .card-body.extra-padding .py-5 del,
#nova-wrapper .markdown-content del {
  text-decoration: line-through;
}

/* Domain/service renewal lists ship light-grey rows (#f8f8f8/#f4f4f4) — re-theme to Nova surface. */
#nova-wrapper .domain-renewals,
#nova-wrapper .service-renewals,
#nova-wrapper .addon-renewals .service-renewal {
  background-color: #1a2028;
  border-color: #2d3540;
}
#nova-wrapper .domain-renewals .domain-renewal,
#nova-wrapper .service-renewals .service-renewal {
  border-color: #2d3540;
  color: #e8ecf0;
}
#nova-wrapper .domain-renewals .domain-renewal:nth-child(even),
#nova-wrapper .service-renewals .service-renewal:nth-child(even),
#nova-wrapper .addon-renewals .service-renewal:nth-child(even) {
  background-color: #161b22;
}
#nova-wrapper .domain-renewal-desc,
#nova-wrapper .service-renewals .div-renewal-period-label {
  color: #8893a0 !important;
}
#nova-wrapper .domain-renewals-filter,
#nova-wrapper .service-renewals-filter {
  background-color: #1a2028 !important;
  background-image: none !important;
  padding-left: 10px !important;
  border-color: #2d3540 !important;
  color: #e8ecf0;
}

/* Tailwind preflight makes <canvas> block; jQuery Knob positions its value relative to an inline canvas. */
#nova-wrapper .plesk-usage-stats canvas {
  display: inline-block;
}

/* Service-row pills: 8.13 adds an accent btn-primary (e.g. Sitejet) whose hover bg collided with the pill's amber text. */
#nova-wrapper .primary-content .btn-group-sm .btn-primary:hover,
#nova-wrapper .primary-content .btn-group-sm .btn-primary:focus {
  background-color: #1a2028 !important;
}