/* ============================================
   Ayuni Host — WHMCS Custom Theme
   Child theme of Twenty-One
   ============================================ */

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

:root {
  --ayh-background: #040A14;
  --ayh-card: #091320;
  --ayh-surface: #091320;
  --ayh-surface-2: #101D2B;
  --ayh-border: #213243;
  --ayh-foreground: #F0F6FA;
  --ayh-muted: #98A7B4;
  --ayh-accent-1: #00B3F8;
  --ayh-accent-2: #4CDFC4;
  --ayh-accent-glow: #02CCF2;
}

/* --- Base page background & text --- */
body {
  background-color: var(--ayh-background) !important;
  color: var(--ayh-foreground) !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.page-title {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
  color: var(--ayh-foreground) !important;
}

a {
  color: var(--ayh-accent-1);
}
a:hover {
  color: var(--ayh-accent-2);
}

/* --- Top navigation bar --- */
.navbar,
.navbar-inverse,
.navbar-default,
header.header {
  background-color: var(--ayh-card) !important;
  border-bottom: 1px solid var(--ayh-border) !important;
}

/* --- Panels / cards (order summary boxes, product boxes, etc.) --- */
.panel,
.panel-default,
.card,
.well {
  background: linear-gradient(180deg, #091320EB, #040A14E0) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 1.375rem !important; /* 22px */
  color: var(--ayh-foreground) !important;
}

.panel-heading,
.card-header {
  background-color: var(--ayh-surface-2) !important;
  border-bottom: 1px solid var(--ayh-border) !important;
  border-radius: 1.375rem 1.375rem 0 0 !important;
}

/* Larger containers (e.g. main content wrapper, modals) */
.modal-content,
.container-main,
.content-wrapper {
  border-radius: 1.625rem !important; /* 26px */
}

/* --- Muted / secondary text --- */
.text-muted,
.small,
small {
  color: var(--ayh-muted) !important;
}

/* --- Buttons: Primary (matches "hero" button) --- */
.btn-primary,
.btn-main,
.btn-success,
button[type="submit"] {
  background: linear-gradient(135deg, var(--ayh-accent-1), var(--ayh-accent-2)) !important;
  color: var(--ayh-background) !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 600;
  box-shadow: 0 20px 48px -20px rgba(2, 204, 242, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover,
.btn-main:hover,
.btn-success:hover,
button[type="submit"]:hover {
  filter: brightness(1.05);
  box-shadow: 0 24px 56px -18px rgba(2, 204, 242, 0.65);
}

/* --- Buttons: Outline / secondary --- */
.btn-default,
.btn-outline,
.btn-secondary {
  background: transparent !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 9999px !important;
}
.btn-default:hover,
.btn-outline:hover,
.btn-secondary:hover {
  border-color: #00C4F7 !important;
  background: #01283B !important;
  color: var(--ayh-foreground) !important;
}

/* --- "Glass" style buttons (if any ghost/link-style buttons exist) --- */
.btn-link {
  background: rgba(9, 19, 32, 0.6) !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 9999px !important;
  backdrop-filter: blur(8px);
}
.btn-link:hover {
  border-color: #00C4F7 !important;
  background: var(--ayh-surface) !important;
}

/* --- Form inputs (login, register, cart, checkout fields) --- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  color: var(--ayh-foreground) !important;
  border-radius: 0.75rem !important;
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--ayh-accent-1) !important;
  box-shadow: 0 0 0 2px rgba(0, 179, 248, 0.25) !important;
}
::placeholder {
  color: var(--ayh-muted) !important;
  opacity: 1;
}

/* --- Tables (invoices, order history) --- */
.table {
  color: var(--ayh-foreground) !important;
}
.table > thead {
  background-color: var(--ayh-surface-2) !important;
}
.table > tbody > tr {
  border-color: var(--ayh-border) !important;
}

/* --- Footer --- */
footer,
.footer {
  background-color: var(--ayh-card) !important;
  border-top: 1px solid var(--ayh-border) !important;
  color: var(--ayh-muted) !important;
}

/* --- Alerts (success/error messages) --- */
.alert {
  border-radius: 1rem !important;
  border: 1px solid var(--ayh-border) !important;
}

/* --- List groups (Actions sidebar, category lists, etc.) --- */
.list-group {
  border-radius: 1.375rem !important;
  overflow: hidden;
}
.list-group-item,
.list-group-item-action {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
}
.list-group-item:hover,
.list-group-item-action:hover,
.list-group-item:focus,
.list-group-item-action:focus {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-foreground) !important;
  border-color: #00C4F7 !important;
}
.list-group-item a,
.list-group-item-action a {
  color: var(--ayh-foreground) !important;
}

/* --- Dropdown/select options (native browser rendering can be stubborn) --- */
select,
select.form-control {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
}
select option {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
}

/* --- Breadcrumb bar (e.g. "Shopping Cart" strip at top of pages) --- */
.breadcrumb,
.breadcrumbs,
.page-header,
.content-header {
  background-color: var(--ayh-card) !important;
  border-bottom: 1px solid var(--ayh-border) !important;
}
.breadcrumb li,
.breadcrumb a,
.breadcrumb .active,
.page-header *,
.content-header * {
  color: var(--ayh-foreground) !important;
}

/* --- Universal text color catch-all for readability on dark backgrounds ---
     Specific elements (buttons, badges, alerts) keep their own colors since
     class selectors are more specific than these plain element selectors. */
body, p, span, label, li, td, th, div,
h1, h2, h3, h4, h5, h6 {
  color: var(--ayh-foreground) !important;
}

/* --- Generic content wrappers, in case any container still defaults light --- */
.container,
.container-fluid,
.content,
.content-wrapper,
.main-content,
.cart-body,
.checkout-page,
.order-summary {
  background-color: var(--ayh-background) !important;
}

/* --- Correction: keep text/icons INSIDE primary buttons dark (the broad
     text rule above would otherwise turn nested spans/icons white) --- */
.btn-primary, .btn-primary *,
.btn-main, .btn-main *,
.btn-success, .btn-success *,
button[type="submit"], button[type="submit"] * {
  color: var(--ayh-background) !important;
}

/* --- Body background class used by this theme specifically --- */
body.primary-bg-color {
  background-color: var(--ayh-background) !important;
}

/* --- Master breadcrumb bar (e.g. "Shopping Cart" strip) --- */
nav.master-breadcrumb {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-foreground) !important;
  border-bottom: 1px solid var(--ayh-border) !important;
}
nav.master-breadcrumb * {
  color: var(--ayh-foreground) !important;
}

/* --- Top navigation bar (Bootstrap's "navbar-light" defaults to white) --- */
.navbar-light,
.navbar.navbar-light,
.main-navbar-wrapper {
  background-color: var(--ayh-card) !important;
  border-bottom: 1px solid var(--ayh-border) !important;
}
.navbar-light .navbar-nav .nav-link,
.navbar-light a,
#nav li a {
  color: var(--ayh-foreground) !important;
}
.navbar-light .navbar-nav .nav-link:hover,
#nav li a:hover {
  color: var(--ayh-accent-1) !important;
}

/* --- Domain search page: explicit "bg-white" boxes and promo panels --- */
.bg-white {
  background-color: var(--ayh-surface-2) !important;
}
.domain-checker-container,
.domain-checker-advanced,
.domain-promo-box,
.domain-pricing {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 1.375rem !important;
}
.domain-promo-box * {
  color: var(--ayh-foreground) !important;
}

/* --- Cart / checkout containers --- */
.cart-body,
.cart-sidebar,
.secondary-cart-body,
.secondary-cart-sidebar,
.header-lined,
.sidebar-collapsed {
  background-color: var(--ayh-background) !important;
  color: var(--ayh-foreground) !important;
}
.view-cart-tabs .nav-tabs,
.tab-content {
  background-color: transparent !important;
  border-color: var(--ayh-border) !important;
}
.view-cart-tabs .nav-tabs .nav-link {
  color: var(--ayh-muted) !important;
}
.view-cart-tabs .nav-tabs .nav-link.active {
  color: var(--ayh-foreground) !important;
  background-color: var(--ayh-surface-2) !important;
  border-color: var(--ayh-border) !important;
}

/* --- Order Summary box on checkout --- */
.order-summary,
.summary-container {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 1.375rem !important;
}
.summary-container * {
  color: var(--ayh-foreground) !important;
}
.total-due-today {
  border-top: 1px solid var(--ayh-border) !important;
}

/* ============================================
   Additional fixes — Sept 2026
   Elements left on light/white backgrounds by
   default WHMCS markup, causing invisible text
   under the universal dark text rule above.
   ============================================ */

/* --- Navbar dropdown menus (e.g. "Knowledgebase" submenu items) --- */
.dropdown-menu {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5) !important;
}
.dropdown-menu > li > a,
.dropdown-menu .dropdown-item {
  color: var(--ayh-foreground) !important;
  background-color: transparent !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-accent-1) !important;
}

/* --- Promotional / upsell / cross-sell panels
     (e.g. "Add Web Hosting", "Transfer your domain to us" boxes on the
     domain results page). WHMCS ships these on a plain white background;
     target any class containing "promo", "upsell", "cross-sell", or
     "addon-box" so this applies no matter the exact template markup. --- */
[class*="promo"],
[class*="upsell"],
[class*="cross-sell"],
[class*="addon-box"] {
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 1.375rem !important;
  color: var(--ayh-foreground) !important;
}
[class*="promo"] p,
[class*="promo"] span,
[class*="promo"] li,
[class*="promo"] label,
[class*="promo"] h1,
[class*="promo"] h2,
[class*="promo"] h3,
[class*="promo"] h4,
[class*="upsell"] p,
[class*="upsell"] span,
[class*="upsell"] li,
[class*="upsell"] label,
[class*="upsell"] h1,
[class*="upsell"] h2,
[class*="upsell"] h3,
[class*="upsell"] h4,
[class*="cross-sell"] p,
[class*="cross-sell"] span,
[class*="cross-sell"] li,
[class*="cross-sell"] label,
[class*="cross-sell"] h1,
[class*="cross-sell"] h2,
[class*="cross-sell"] h3,
[class*="cross-sell"] h4,
[class*="addon-box"] p,
[class*="addon-box"] span,
[class*="addon-box"] li,
[class*="addon-box"] label,
[class*="addon-box"] h1,
[class*="addon-box"] h2,
[class*="addon-box"] h3,
[class*="addon-box"] h4 {
  color: var(--ayh-foreground) !important;
}
/* Keep call-to-action buttons inside these boxes on their normal
   gradient/outline styling instead of inheriting plain foreground text */
[class*="promo"] .btn-primary, [class*="promo"] .btn-main, [class*="promo"] .btn-success, [class*="promo"] button[type="submit"],
[class*="upsell"] .btn-primary, [class*="upsell"] .btn-main, [class*="upsell"] .btn-success, [class*="upsell"] button[type="submit"],
[class*="cross-sell"] .btn-primary, [class*="cross-sell"] .btn-main, [class*="cross-sell"] .btn-success, [class*="cross-sell"] button[type="submit"],
[class*="addon-box"] .btn-primary, [class*="addon-box"] .btn-main, [class*="addon-box"] .btn-success, [class*="addon-box"] button[type="submit"] {
  color: var(--ayh-background) !important;
}

/* --- Default Bootstrap header/utility bars left un-themed
     (e.g. the "Product/Options | Price/Cycle" cart table header) --- */
.bg-primary,
.bg-info,
.bg-secondary,
.bg-light {
  background-color: var(--ayh-surface-2) !important;
  border-color: var(--ayh-border) !important;
  color: var(--ayh-foreground) !important;
}
.bg-primary *,
.bg-info *,
.bg-secondary *,
.bg-light * {
  color: var(--ayh-foreground) !important;
}

/* --- Domain extension pricing table
     ("Browse extensions by category" — header row and each TLD row) --- */
.tld-pricing-header,
.tld-row,
.domain-pricing .row.no-gutters.tld-pricing-header.text-center,
.domain-pricing .bg-white .row.tld-pricing-header {
  background-color: var(--ayh-card) !important;
  border-bottom: 1px solid var(--ayh-border) !important;
}
.tld-pricing-header,
.tld-row,
.tld-pricing-header *,
.tld-row *,
.domain-pricing .row.no-gutters.tld-pricing-header.text-center *,
.domain-pricing .bg-white .row.tld-pricing-header * {
  color: var(--ayh-foreground) !important;
}
.tld-column {
  color: var(--ayh-foreground) !important;
  font-weight: 600;
}

/* --- domain-promo-box internals: icon, heading, warning-styled paragraph,
     and its "btn-warning" call-to-action button pulled onto the theme --- */
.domain-promo-box i.fas,
.domain-promo-box i.far {
  color: var(--ayh-accent-1) !important;
}
.domain-promo-box h3,
.domain-promo-box p {
  color: var(--ayh-foreground) !important;
}
.domain-promo-box .text-warning {
  color: var(--ayh-accent-2) !important;
}
.domain-promo-box .btn-warning {
  background: linear-gradient(135deg, var(--ayh-accent-1), var(--ayh-accent-2)) !important;
  color: var(--ayh-background) !important;
  border: none !important;
  border-radius: 9999px !important;
}
.domain-promo-box .btn-warning:hover {
  filter: brightness(1.05);
}

/* --- "Powered by WHMCompleteSolution" credit ---
     Starter-tier WHMCS licenses require this credit to stay visible, so
     this only re-colors it to fit the dark theme rather than hiding it. */
p:has(a[href*="whmcs.com"]) {
  color: var(--ayh-muted) !important;
  text-align: center;
}
p:has(a[href*="whmcs.com"]) a {
  color: var(--ayh-accent-1) !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 6)
   ============================================ */

/* --- Domain search results page
     ("Exact Match" heading, the result card beneath it, and the
     "Suggested Domains" / availability-notice messages) --- */
#searchDomainInfo,
.primary-domain-header,
.domain-lookup-message,
.domain-suggestions-warning {
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border) !important;
  color: var(--ayh-foreground) !important;
  border-radius: 1rem !important;
}
#searchDomainInfo *,
.primary-domain-header *,
.domain-lookup-message *,
.domain-suggestions-warning * {
  color: var(--ayh-foreground) !important;
}
.domain-lookup-result.list-group {
  background-color: transparent !important;
}
.panel-footer.card-footer.more-suggestions {
  background-color: var(--ayh-card) !important;
  border-top: 1px solid var(--ayh-border) !important;
  color: var(--ayh-foreground) !important;
}

/* --- Store product listing cards (e.g. Starter/Business/Pro Hosting) --- */
#products .product,
.products .product {
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 1.375rem !important;
  overflow: hidden;
}
#products .product *,
.products .product * {
  color: var(--ayh-foreground) !important;
}
html body #products .product header,
html body .products .product header,
html body #products .product .product-desc,
html body .products .product .product-desc,
html body #products .product footer,
html body .products .product footer {
  background-color: var(--ayh-card) !important;
  border-color: var(--ayh-border) !important;
}
html body #products .product header *,
html body .products .product header * {
  color: var(--ayh-foreground) !important;
}
#products .product .btn-primary,
#products .product .btn-main,
#products .product .btn-success,
#products .product button[type="submit"],
.products .product .btn-primary,
.products .product .btn-main,
.products .product .btn-success,
.products .product button[type="submit"] {
  color: var(--ayh-background) !important;
}

/* --- "I will use my existing domain and update the nameservers" input
     group (example.com split fields) on the product order form --- */
.domain-input-group,
.domain-input-group .input-group,
.domain-input-group .input-group-addon,
.domain-input-group .input-group-prepend,
.domain-input-group .input-group-text {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  color: var(--ayh-foreground) !important;
}
.domain-input-group input.form-control,
.domain-input-group input[type="text"],
.domain-input-group select,
.domain-input-group .form-control {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  color: var(--ayh-foreground) !important;
}

/* --- Extra-high-specificity fallback for the pricing header row --- */
html body .tld-pricing-header,
html body .tld-row {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-foreground) !important;
}
html body .tld-pricing-header *,
html body .tld-row * {
  color: var(--ayh-foreground) !important;
}
/* ============================================
   Additional fixes — Sept 2026 (round 7)
   ============================================ */

/* --- Cart view page: individual line items in the cart list --- */
.view-cart-items .item {
  background-color: var(--ayh-card) !important;
  border-bottom: 1px solid var(--ayh-border) !important;
}
.view-cart-items .item,
.view-cart-items .item * {
  color: var(--ayh-foreground) !important;
}

/* --- "Premium Comparison" order form (a different order-form template
     than Standard Cart, used on some product listing/pricing-comparison
     pages — e.g. #order-premium_comparison, .price-table, and each
     product's feature list li[id$="-description"]) --- */
#order-premium_comparison,
.price-table-container,
.price-table {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-foreground) !important;
}
li[id^="product"][id$="-description"] {
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border) !important;
}
li[id^="product"][id$="-description"] * {
  color: var(--ayh-foreground) !important;
}

/* --- Bootstrap Switch widget (e.g. the "Join our mailing list" Yes/No
     toggle on the registration page) --- */
.bootstrap-switch-container {
  border: 1px solid var(--ayh-border) !important;
  border-radius: 9999px !important;
}
.bootstrap-switch-handle-on.bootstrap-switch-success {
  background: linear-gradient(135deg, var(--ayh-accent-1), var(--ayh-accent-2)) !important;
  color: var(--ayh-background) !important;
}
.bootstrap-switch-handle-off.bootstrap-switch-secondary {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
}
.bootstrap-switch-label {
  background-color: var(--ayh-card) !important;
}
/* ============================================
   Additional fixes — Sept 2026 (round 8)
   ============================================ */

/* --- Checkout section headings (Personal Information, Billing Address,
     Account Security, Payment Details, Additional Notes). WHMCS gives
     these a "primary-bg-color" class to mask the divider line behind
     the text — we'd only handled that class on <body>, not generally,
     so these headings were sitting on a leftover white patch. --- */
.primary-bg-color {
  background-color: var(--ayh-background) !important;
  color: var(--ayh-foreground) !important;
}

/* --- Bootstrap contextual alert boxes (Total Due Today, payment
     gateway errors, checkout security notice, password feedback) --- */
.alert-success {
  background-color: rgba(76, 223, 196, 0.12) !important;
  border-color: var(--ayh-accent-2) !important;
  color: var(--ayh-accent-2) !important;
}
.alert-danger {
  background-color: rgba(255, 99, 99, 0.12) !important;
  border-color: #ff6363 !important;
  color: #ff6363 !important;
}
.alert-warning {
  background-color: rgba(255, 193, 7, 0.12) !important;
  border-color: #ffc107 !important;
  color: #ffc107 !important;
}
.alert-info {
  background-color: rgba(0, 179, 248, 0.12) !important;
  border-color: var(--ayh-accent-1) !important;
  color: var(--ayh-accent-1) !important;
}
.alert-success *,
.alert-danger *,
.alert-warning *,
.alert-info * {
  color: inherit !important;
}

/* --- Password strength meter on the registration/checkout form --- */
.password-strength-meter .progress {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
}
.password-strength-meter .progress-bar {
  background: linear-gradient(135deg, var(--ayh-accent-1), var(--ayh-accent-2)) !important;
}

/* --- Captcha wrapper on domain transfer / registration forms.
     Note: the captcha image itself is generated server-side with a
     white background — that can't be restyled via CSS — this just
     frames it more neatly against the dark card. --- */
.captcha-container,
.default-captcha {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 0.75rem !important;
  padding: 0.5rem !important;
}
/* ============================================
   "Standard Cart" order form (used during product/domain
   configuration at checkout). This step loads its own stylesheet
   (templates/orderforms/standard_cart/css/all.min.css) with class
   names not used anywhere else on the site, so it needs its own
   targeted rules. #frmProductDomain gives us high specificity (ID
   selector) to reliably beat that stylesheet.
   ============================================ */
#frmProductDomain,
.domain-selection-options,
.domain-selection-options .option {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 1.375rem !important;
}
.domain-selection-options .option * {
  color: var(--ayh-foreground) !important;
}
#frmProductDomain textarea,
#frmProductDomain input[type="text"],
#frmProductDomain input[type="email"],
#frmProductDomain select,
#frmProductDomain .form-control {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  color: var(--ayh-foreground) !important;
  border-radius: 0.75rem !important;
}
#frmProductDomain ::placeholder {
  color: var(--ayh-muted) !important;
  opacity: 1;
}
#frmProductDomain .btn,
#frmProductDomain button {
  border-radius: 9999px !important;
}
#frmProductDomain .btn-primary,
#frmProductDomain button[type="submit"] {
  background: linear-gradient(135deg, var(--ayh-accent-1), var(--ayh-accent-2)) !important;
  color: var(--ayh-background) !important;
  border: none !important;
}

/* Catch-all for the rest of the Standard Cart order form (product
   configuration options, pricing tables, add-ons list) which shares
   the same #order-standard_cart wrapper seen in this template. */
#order-standard_cart .panel,
#order-standard_cart .card,
#order-standard_cart .well,
#order-standard_cart .list-group-item {
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border) !important;
  color: var(--ayh-foreground) !important;
}
#order-standard_cart .panel *,
#order-standard_cart .card *,
#order-standard_cart .well *,
#order-standard_cart .list-group-item * {
  color: var(--ayh-foreground) !important;
}

/* --- Homepage hero domain search box ("Secure your domain name") --- */
.home-domain-search {
  background: linear-gradient(180deg, var(--ayh-card), var(--ayh-background)) !important;
}
.home-domain-search h2,
.home-domain-search label,
.home-domain-search p,
.home-domain-search .row * {
  color: var(--ayh-foreground) !important;
}
.home-domain-search .input-group-wrapper,
.home-domain-search .input-group.advanced-input {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 0.75rem !important;
  color: var(--ayh-foreground) !important;
}
.home-domain-search .input-group.advanced-input input,
.home-domain-search .input-group.advanced-input textarea {
  background-color: transparent !important;
  color: var(--ayh-foreground) !important;
  border: none !important;
}
.home-domain-search ::placeholder {
  color: var(--ayh-muted) !important;
}
.home-domain-search .btn-link.float-right {
  color: var(--ayh-accent-1) !important;
}

/* --- Homepage quick-action tiles
     (Announcements, Network Status, Knowledgebase, Downloads,
     Your Account, Manage Services, Manage Domains, Support Requests,
     Make a Payment — all use a "card-accent-<color>" class) --- */
html body [class*="card-accent-"] {
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 1.375rem !important;
  color: var(--ayh-foreground) !important;
  display: block;
}
html body [class*="card-accent-"]:hover {
  border-color: var(--ayh-accent-1) !important;
  background-color: var(--ayh-surface-2) !important;
}
html body [class*="card-accent-"] .ico-container,
html body [class*="card-accent-"] .ico-container svg,
html body [class*="card-accent-"] .ico-container path,
html body [class*="card-accent-"] .ico-container i {
  color: var(--ayh-accent-1) !important;
  fill: var(--ayh-accent-1) !important;
}

/* --- Login card --- */
.card.mw-540 {
  background: linear-gradient(180deg, #091320EB, #040A14E0) !important;
  border: 1px solid var(--ayh-border) !important;
}
.card.mw-540 .card-body,
.card.mw-540 .card-footer {
  background: transparent !important;
  color: var(--ayh-foreground) !important;
}
.card.mw-540 h1,
.card.mw-540 h2,
.card.mw-540 h3,
.card.mw-540 p,
.card.mw-540 label {
  color: var(--ayh-foreground) !important;
}
.card.mw-540 .input-group-text {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  color: var(--ayh-muted) !important;
}
.card.mw-540 .input-group-merge .form-control {
  border-left: none !important;
}

/* --- Extra safety net for domain pricing table cells --- */
.domain-pricing .col-xs-4,
.domain-pricing .col-4 {
  color: var(--ayh-foreground) !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 9)
   ============================================ */

/* --- Maximum-specificity fallback for the pricing table header row
     and each TLD result row. This row kept losing to the theme's own
     CSS even with earlier specificity bumps, so this uses a full
     tag+class chain (no ID needed) to outrank almost anything short
     of an ID selector. --- */
html body div.domain-pricing div.bg-white div.row.no-gutters.tld-pricing-header.text-center,
html body div.domain-pricing div.bg-white div.row.tld-row {
  background-color: var(--ayh-card) !important;
  border-bottom: 1px solid var(--ayh-border) !important;
}
html body div.domain-pricing div.bg-white div.row.no-gutters.tld-pricing-header.text-center *,
html body div.domain-pricing div.bg-white div.row.tld-row * {
  color: var(--ayh-foreground) !important;
}

/* --- Remove the leftover background image/watermark bleeding through
     the domain search box on the registration/store pages --- */
.domain-checker-container,
.domain-checker-bg {
  background-image: none !important;
  background-color: var(--ayh-card) !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 10)
   ============================================ */

/* --- Announcement article body: was rendering as a solid blank white
     box (not a contrast issue — the container itself had no dark
     background at all). --- */
.announcement article {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-foreground) !important;
  padding: 1rem;
}
.announcement article * {
  color: var(--ayh-foreground) !important;
}

/* --- Last-resort maximum-specificity attempt for the CAPTCHA prompt
     and pricing header row, in case this is genuinely a specificity
     fight and not an iframe/embedded-widget issue. Chains id + many
     classes + tag names, which is close to the practical ceiling for
     a non-ID selector. --- */
html body div#DomainSearchResults,
html body div#DomainSearchResults *:not(.btn):not(button),
html body div.domain-pricing div.captcha-container,
html body div.captcha-container {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-foreground) !important;
  border-color: var(--ayh-border) !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 11)
   ============================================ */

/* --- CAPTCHA prompt box: it carries id="captchaContainer", and an ID
     selector beats any number of chained classes regardless of
     !important on both sides. Matching it with our own ID selector. --- */
#captchaContainer {
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 0.75rem !important;
  color: var(--ayh-foreground) !important;
}
#captchaContainer * {
  color: var(--ayh-foreground) !important;
}

/* --- Pricing header row / TLD rows: these sit under <section
     id="main-body">, and the theme likely scopes its own rule from
     that ID. Anchoring our selector from the same ID (plus more
     classes than the theme's rule) should outrank it. --- */
#main-body .domain-pricing .bg-white .row.no-gutters.tld-pricing-header.text-center,
#main-body .domain-pricing .bg-white .row.tld-row {
  background-color: var(--ayh-card) !important;
  border-bottom: 1px solid var(--ayh-border) !important;
}
#main-body .domain-pricing .bg-white .row.no-gutters.tld-pricing-header.text-center *,
#main-body .domain-pricing .bg-white .row.tld-row * {
  color: var(--ayh-foreground) !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 12)
   DataTables list tables (My Domains, Support Tickets,
   My Invoices, Quotes, My Services) and the sidebar
   "View" status-filter count badges
   ============================================ */

/* --- Shared DataTables list table wrapper
     (table.table-list.w-hidden.dataTable.no-footer, used by
     #tableDomainsList, #tableTicketsList, #tableInvoicesList,
     #tableQuotesList, #tableServicesList, etc.) --- */
table.dataTable.table-list {
  background-color: transparent !important;
  color: var(--ayh-foreground) !important;
  border-color: var(--ayh-border) !important;
}

/* Header row + sortable column headers */
table.dataTable.table-list > thead > tr > th {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
  border-color: var(--ayh-border) !important;
}
table.dataTable.table-list > thead > tr > th.sorting,
table.dataTable.table-list > thead > tr > th.sorting_asc,
table.dataTable.table-list > thead > tr > th.sorting_desc,
table.dataTable.table-list > thead > tr > th.sorting_disabled {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
}
table.dataTable.table-list > thead > tr > th.sorting:hover,
table.dataTable.table-list > thead > tr > th.sorting_asc:hover,
table.dataTable.table-list > thead > tr > th.sorting_desc:hover {
  color: var(--ayh-accent-1) !important;
}

/* Body rows and cells (including the "No Records Found" row) */
table.dataTable.table-list > tbody > tr {
  background-color: var(--ayh-card) !important;
  border-bottom: 1px solid var(--ayh-border) !important;
}
table.dataTable.table-list > tbody > tr.odd {
  background-color: var(--ayh-card) !important;
}
table.dataTable.table-list > tbody > tr.even {
  background-color: var(--ayh-surface) !important;
}
table.dataTable.table-list > tbody > tr:hover {
  background-color: var(--ayh-surface-2) !important;
}
table.dataTable.table-list > tbody > tr > td {
  color: var(--ayh-foreground) !important;
  border-color: var(--ayh-border) !important;
  background-color: transparent !important;
}
table.dataTable.table-list > tbody > tr > td.dataTables_empty {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-muted) !important;
  text-align: center;
}

/* --- Sidebar "View" status-filter badges (Active / Expired /
     Pending, etc. counts) shown next to each filter option --- */
.sidebar-menu-item-badge .badge,
.sidebar-menu-item-badge span.badge {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 9999px !important;
  font-weight: 600;
}
.list-group-item-action:hover .sidebar-menu-item-badge .badge,
.list-group-item-action.active .sidebar-menu-item-badge .badge {
  border-color: var(--ayh-accent-1) !important;
  color: var(--ayh-accent-1) !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 13)
   Client home dashboard quick-stat tiles
   (Services / Domains / Tickets / Invoices —
   a.tile inside div.tiles.mb-4)
   ============================================ */

.tiles .tile {
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border) !important;
  color: var(--ayh-foreground) !important;
  border-radius: 1rem !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tiles .tile:hover {
  background-color: var(--ayh-surface-2) !important;
  border-color: var(--ayh-accent-1) !important;
}
.tiles .tile i {
  color: var(--ayh-accent-1) !important;
}
.tiles .tile .stat {
  color: var(--ayh-foreground) !important;
  font-weight: 700;
}
.tiles .tile .title {
  color: var(--ayh-muted) !important;
}

/* Bottom accent bar on each tile — keep each tile's own accent hue
   while lifting it off the plain white/pale default so it reads
   clearly against the dark card */
.tiles .tile .highlight {
  background-color: var(--ayh-border) !important;
}
.tiles .tile .highlight.bg-color-blue {
  background-color: var(--ayh-accent-1) !important;
}
.tiles .tile .highlight.bg-color-gold {
  background-color: #ffc107 !important;
}
.tiles .tile .highlight.bg-color-green {
  background-color: var(--ayh-accent-2) !important;
}
.tiles .tile .highlight.bg-color-red {
  background-color: #ff6363 !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 14)
   AI-powered domain search box on the domain
   registration page (div.input-group-box inside
   .domain-checker-bg / .domain-checker-container)
   ============================================ */

.input-group-box {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 0.75rem !important;
  color: var(--ayh-foreground) !important;
}
.input-group-box textarea,
.input-group-box input[type="text"],
.input-group-box input[type="search"] {
  background-color: transparent !important;
  color: var(--ayh-foreground) !important;
  border: none !important;
}
.input-group-box ::placeholder {
  color: var(--ayh-muted) !important;
  opacity: 1;
}
.input-group-box label {
  color: var(--ayh-foreground) !important;
}
.input-group-box input[type="checkbox"] {
  accent-color: var(--ayh-accent-1);
}

/* Small pill buttons inside the search box (e.g. "Advanced Options",
   "Common Extensions") — keep the primary "Search" button on its own
   gradient styling from the .btn-primary rule further up this file */
.input-group-box .btn:not(.btn-primary):not(.btn-main):not(.btn-success) {
  background-color: transparent !important;
  border: 1px solid var(--ayh-border) !important;
  color: var(--ayh-foreground) !important;
  border-radius: 9999px !important;
}
.input-group-box .btn:not(.btn-primary):not(.btn-main):not(.btn-success):hover {
  border-color: var(--ayh-accent-1) !important;
  color: var(--ayh-accent-1) !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 15)
   Pricing table header row ("Domain / New Price /
   Transfer / Renewal") on the domain extensions
   table — previous attempts (rounds 5, 9, 11) only
   targeted the row itself, but each column inside it
   (div.tld-column, div.col-xs-4.col-4, etc.) carries
   its own background color from the theme's stylesheet
   that is MORE specific than a row-level rule, so it
   kept winning. This time we also force every
   descendant div inside the header row, not just the
   row wrapper, which is what was actually needed. ---- */

#main-body .domain-pricing .bg-white .row.no-gutters.tld-pricing-header.text-center,
#main-body .domain-pricing .bg-white .row.no-gutters.tld-pricing-header.text-center div,
html body div.domain-pricing div.bg-white div.row.no-gutters.tld-pricing-header.text-center,
html body div.domain-pricing div.bg-white div.row.no-gutters.tld-pricing-header.text-center div {
  background-color: var(--ayh-card) !important;
  background-image: none !important;
  background: var(--ayh-card) !important;
  color: var(--ayh-foreground) !important;
  border-color: var(--ayh-border) !important;
}
#main-body .domain-pricing .bg-white .row.no-gutters.tld-pricing-header.text-center *,
html body div.domain-pricing div.bg-white div.row.no-gutters.tld-pricing-header.text-center * {
  color: var(--ayh-foreground) !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 16)
   Off-shade "boxes" nested inside already-dark
   wrappers: footer's inner container, the
   breadcrumb list itself, the top navbar's inner
   container, and the small utility bar above the
   logo (topbar) — same root cause as round 15:
   a child element carrying its own background that
   is more specific than the wrapper-level rule.
   ============================================ */

/* --- Footer inner container --- */
footer#footer .container,
.footer .container {
  background-color: transparent !important;
  color: var(--ayh-foreground) !important;
}
footer#footer .container *,
.footer .container * {
  color: var(--ayh-foreground) !important;
}

/* --- Breadcrumb list (ol.breadcrumb) — Bootstrap ships this with its
     own light-gray background which can outrank the earlier
     .breadcrumb rule depending on stylesheet load order --- */
nav.master-breadcrumb ol.breadcrumb,
ol.breadcrumb {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-foreground) !important;
}
nav.master-breadcrumb ol.breadcrumb *,
ol.breadcrumb * {
  color: var(--ayh-foreground) !important;
}

/* --- Top navbar's inner container (logo / cart / menu row) --- */
header#header .navbar.navbar-light .container,
.navbar.navbar-light .container {
  background-color: transparent !important;
}

/* --- Small utility bar above the main navbar (language/currency
     flag, "Faith Website" label, etc.) --- */
header#header .topbar,
.topbar {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-foreground) !important;
  border-bottom: 1px solid var(--ayh-border) !important;
}
header#header .topbar *,
.topbar * {
  color: var(--ayh-foreground) !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 17)
   1) Flatten the entire top header area (utility
      bar, topbar, navbar, breadcrumb) to a single
      solid black instead of several very-close-but-
      different dark shades — placed after the
      earlier rules so it wins the cascade without
      deleting them.
   2) DataTables pagination controls (Previous / page
      numbers / Next) — not yet themed anywhere on
      the site, so every list page (Domains, Invoices,
      Tickets, Quotes, Services) still showed default
      light pagination pills.
   3) input[type="search"] — the table search boxes
      use type="search", which wasn't explicitly
      listed alongside type="text" etc. earlier.
   ============================================ */

/* --- 1) Single flat black across the whole header/nav/breadcrumb --- */
header#header,
header#header .topbar,
.topbar,
.navbar,
.navbar-inverse,
.navbar-default,
.navbar-light,
.navbar.navbar-light,
.main-navbar-wrapper,
header.header,
nav.master-breadcrumb {
  background-color: var(--ayh-background) !important;
  border-color: var(--ayh-border) !important;
}

/* --- 2) DataTables / Bootstrap pagination controls --- */
.dataTables_paginate .pagination,
ul.pagination {
  background-color: transparent !important;
}
.dataTables_paginate .paginate_button,
.pagination .page-item {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 0.5rem !important;
  overflow: hidden;
}
.dataTables_paginate .paginate_button > a,
.dataTables_paginate .paginate_button .page-link,
.pagination .page-item .page-link {
  background-color: transparent !important;
  color: var(--ayh-foreground) !important;
  border: none !important;
}
.dataTables_paginate .paginate_button.disabled,
.pagination .page-item.disabled {
  opacity: 0.55;
}
.dataTables_paginate .paginate_button.disabled > a,
.dataTables_paginate .paginate_button.disabled .page-link,
.pagination .page-item.disabled .page-link {
  color: var(--ayh-muted) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.active,
.pagination .page-item.active {
  background: linear-gradient(135deg, var(--ayh-accent-1), var(--ayh-accent-2)) !important;
  border-color: transparent !important;
}
.dataTables_paginate .paginate_button.current > a,
.dataTables_paginate .paginate_button.active > a,
.dataTables_paginate .paginate_button.current .page-link,
.pagination .page-item.active .page-link {
  color: var(--ayh-background) !important;
}
.dataTables_paginate .paginate_button:not(.disabled):not(.current):not(.active):hover,
.pagination .page-item:not(.disabled):not(.active):hover {
  border-color: var(--ayh-accent-1) !important;
}
.dataTables_paginate .paginate_button:not(.disabled):not(.current):not(.active):hover > a,
.pagination .page-item:not(.disabled):not(.active):hover .page-link {
  color: var(--ayh-accent-1) !important;
}

/* --- 3) Search-type inputs (table search boxes) --- */
input[type="search"] {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  color: var(--ayh-foreground) !important;
  border-radius: 0.75rem !important;
}
input[type="search"]::placeholder {
  color: var(--ayh-muted) !important;
  opacity: 1;
}

/* ============================================
   Additional fixes — Sept 2026 (round 18)
   ============================================ */

/* --- 1) Breadcrumb bar: force pure solid black
       (was still on --ayh-card from round 16) --- */
nav.master-breadcrumb ol.breadcrumb,
ol.breadcrumb {
  background-color: var(--ayh-background) !important;
}

/* --- 2) Table search box ("Status" filter search etc.):
       black background + a clearly visible search icon --- */
.dataTables_filter,
.dataTables_filter input[type="search"],
input[type="search"] {
  background-color: var(--ayh-background) !important;
}
.dataTables_filter .input-group-prepend,
.dataTables_filter .input-group-text {
  background-color: var(--ayh-background) !important;
  border-color: var(--ayh-border) !important;
}
.dataTables_filter i,
.dataTables_filter .fa,
.dataTables_filter .fas,
.dataTables_filter svg,
.dataTables_filter .search-icon,
.dataTables_filter .fa-search {
  color: var(--ayh-accent-1) !important;
  opacity: 1 !important;
}

/* --- 3) Knowledgebase search box in the header: drop the
       border around the search-icon prepend --- */
.input-group.search .input-group-prepend,
.input-group.search .input-group-text,
.input-group-search .input-group-prepend,
.input-group-search .input-group-text {
  border: none !important;
  background-color: transparent !important;
}
.input-group.search .input-group-prepend .fa-search,
.input-group.search .input-group-text .fa-search,
.input-group-search .fa-search {
  color: var(--ayh-accent-1) !important;
}

/* --- 4) Low-contrast text made clearly visible:
       the "Hello, Faith!" account dropdown, and the
       table pagination controls (Previous / 1 / Next) --- */
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .dropdown-toggle,
#Secondary_Navbar-Account,
#Secondary_Navbar-Account .dropdown-toggle,
a.dropdown-toggle {
  color: #ffffff !important;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .dropdown-toggle:hover,
a.dropdown-toggle:hover {
  color: var(--ayh-accent-1) !important;
}
.dataTables_paginate .paginate_button > a,
.dataTables_paginate .paginate_button .page-link,
.pagination .page-item .page-link {
  color: #ffffff !important;
  font-weight: 600;
}
.dataTables_paginate .paginate_button.disabled > a,
.dataTables_paginate .paginate_button.disabled .page-link,
.pagination .page-item.disabled .page-link {
  color: #ffffff !important;
  opacity: 0.65;
}

/* --- 5) Remove the "Powered by WHMCompleteSolution" line
       under each list table completely --- */
.primary-content .table-container.clearfix + p,
.table-container.clearfix + p {
  display: none !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 19)
   1) Remove every horizontal divider border that
      currently chops the page into visibly separate
      strips (topbar / navbar / breadcrumb / footer),
      so the whole page reads as one continuous
      black surface from top to bottom.
   2) Lay the footer's language selector, nav links
      and copyright line out on one continuous row
      instead of three stacked blocks.
   3) Fully borderless search boxes (header
      knowledgebase search + table filter search) —
      the earlier round only removed the border on the
      icon portion, not the whole component.
   4) Extra-strength reinforcement (ID-anchored, so it
      cannot lose the cascade) for the account dropdown
      and pagination text color in case the previous
      round's rule is being outranked somewhere.
   ============================================ */

/* --- 1) No more seams between header sections --- */
header#header,
header#header .topbar,
.topbar,
.navbar,
.navbar-inverse,
.navbar-default,
.navbar-light,
.navbar.navbar-light,
.main-navbar-wrapper,
header.header,
nav.master-breadcrumb,
ol.breadcrumb,
footer#footer,
.footer {
  border: none !important;
  box-shadow: none !important;
}

/* --- 2) Footer: one continuous row --- */
footer#footer .container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem 2rem !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
footer#footer .container > * {
  margin: 0 !important;
  float: none !important;
}
footer#footer ul.list-inline,
footer#footer ul.nav {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
footer#footer .copyright {
  margin: 0 !important;
}

/* --- 3) Fully borderless search boxes --- */
.input-group.search,
.input-group.search .form-control,
.input-group.search input,
.input-group-search,
.input-group-search .form-control,
.input-group-search input {
  border: none !important;
  box-shadow: none !important;
}
.dataTables_filter,
.dataTables_filter input[type="search"],
input[type="search"] {
  border: none !important;
  box-shadow: none !important;
}

/* --- 4) Reinforced text color (ID-anchored for max priority) --- */
#header a.dropdown-toggle,
#header #Secondary_Navbar-Account,
#header #Secondary_Navbar-Account .dropdown-toggle,
#header .navbar-nav .nav-link,
#header .navbar-nav .dropdown-toggle {
  color: #ffffff !important;
}
#main-body .dataTables_paginate .paginate_button > a,
#main-body .dataTables_paginate .paginate_button .page-link,
#main-body .pagination .page-item .page-link {
  color: #ffffff !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 20)
   1) Hide "Powered by WHMCompleteSolution" more
      robustly (structure-independent) — the
      sibling-selector approach from round 18 missed
      it on some pages where the markup nests it
      differently.
   2) Bring back a tasteful border on the search
      boxes (header knowledgebase search + table
      filter search) — going fully borderless made
      them hard to spot as inputs. Keeps everything
      else (topbar/navbar/breadcrumb/footer) seamless
      as requested in round 19.
   ============================================ */

/* --- 1) Robust "Powered by" removal, anywhere it appears --- */
p:has(> a[href*="whmcompletesolution"]),
p:has(a[href*="whmcompletesolution"]) {
  display: none !important;
}

/* --- 2) Elegant borders back on search inputs --- */
.input-group.search,
.input-group-search {
  border: 1px solid var(--ayh-border) !important;
  border-radius: 9999px !important;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.input-group.search:focus-within,
.input-group-search:focus-within {
  border-color: var(--ayh-accent-1) !important;
  outline: 2px solid var(--ayh-accent-1) !important;
  outline-offset: 2px;
}
.input-group.search .form-control,
.input-group.search input,
.input-group-search .form-control,
.input-group-search input {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.dataTables_filter input[type="search"],
input[type="search"] {
  border: 1px solid var(--ayh-border) !important;
  border-radius: 9999px !important;
  transition: border-color 0.15s ease;
}
.dataTables_filter input[type="search"]:focus,
input[type="search"]:focus {
  border-color: var(--ayh-accent-1) !important;
  outline: 2px solid var(--ayh-accent-1) !important;
  outline-offset: 2px;
}

/* ============================================
   Additional fixes — Sept 2026 (round 21)
   Correct the "Powered by" removal: the earlier
   rule matched on href*="whmcompletesolution", but
   the real markup (confirmed identical across every
   page — dashboard, hosting store, addons, domains,
   domain renew, domain transfer) is:
     <p style="text-align:center;">
       Powered by
       <a href="https://www.whmcs.com/" target="_blank">
         WHMCompleteSolution
       </a>
     </p>
   i.e. the link points to whmcs.com, not
   whmcompletesolution.com — so it never matched.
   ============================================ */
p:has(> a[href*="whmcs.com"]) {
  display: none !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 22)
   ============================================ */

/* --- 1) Footer: collapse the oversized empty space
       above its content down to a sensible height --- */
footer#footer,
.footer {
  padding: 1.5rem 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* --- 2 & 3) Dashboard cards (Register a New Domain,
       Contacts, Shortcuts, Recent Support Tickets, etc.):
       consistent breathing room between stacked cards
       and between controls inside them --- */
#main-body .card {
  margin-bottom: 1.5rem !important;
}
#main-body .sidebar .card:last-child,
#main-body .sidebar-secondary .card:last-child,
#main-body .client-home-cards .card:last-child {
  margin-bottom: 0 !important;
}
#main-body .client-home-cards .row {
  row-gap: 1.5rem !important;
}
#main-body .card-body,
#main-body .card-header,
#main-body .card-footer {
  padding: 1rem 1.25rem !important;
}
#registerDomainPanel .card-body {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}
#registerDomainPanel .input-group {
  flex: 1 1 200px !important;
  gap: 0.5rem !important;
}
#registerDomainPanel .btn {
  margin-left: 0.25rem !important;
}
#main-body .card-sidebar .card-footer a,
#main-body .card-sidebar .card-body a {
  padding: 0.5rem 0 !important;
  display: block !important;
}

/* --- 4) Remove the "Recent News" / announcements
       panel entirely --- */
#announcementsPanel {
  display: none !important;
}

/* --- 5) Table search filter + pagination — reinforced
       with attribute selectors matched against
       DataTables' predictable ID suffixes
       (…_filter / …_paginate), which carry more
       specificity than the plain class rules used
       earlier and should finally stick everywhere --- */
[id$="_filter"] input[type="search"],
[id$="_filter"] .form-control {
  background-color: var(--ayh-background) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 9999px !important;
  color: var(--ayh-foreground) !important;
}
[id$="_filter"] input[type="search"]:focus,
[id$="_filter"] .form-control:focus {
  border-color: var(--ayh-accent-1) !important;
  outline: 2px solid var(--ayh-accent-1) !important;
  outline-offset: 2px;
}
[id$="_paginate"] .pagination,
[id$="_paginate"] ul.pagination {
  background: transparent !important;
}
[id$="_paginate"] .paginate_button,
[id$="_paginate"] li.page-item {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 0.5rem !important;
}
[id$="_paginate"] .paginate_button > a,
[id$="_paginate"] li.page-item a {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
}
[id$="_paginate"] .paginate_button.disabled,
[id$="_paginate"] li.page-item.disabled {
  opacity: 0.55 !important;
}
[id$="_paginate"] .paginate_button.disabled > a,
[id$="_paginate"] li.page-item.disabled a {
  color: #ffffff !important;
}
[id$="_paginate"] .paginate_button.active,
[id$="_paginate"] li.page-item.active {
  background: linear-gradient(135deg, var(--ayh-accent-1), var(--ayh-accent-2)) !important;
  border-color: transparent !important;
}
[id$="_paginate"] .paginate_button.active > a,
[id$="_paginate"] li.page-item.active a {
  color: var(--ayh-background) !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 23)
   The white circular search icon is very likely a
   background-image (an icon sprite baked in by the
   theme) layered on top of input[type="search"],
   not a separate <i>/<svg> element. Our earlier
   rounds only overrode background-color, which sits
   BEHIND a background-image in the CSS box model —
   so the white icon graphic kept showing through.
   This explicitly clears it, and also covers the
   case where it IS a separate icon/button element.
   ============================================ */
[id$="_filter"] input[type="search"],
.dataTables_filter input[type="search"],
input[type="search"] {
  background-image: none !important;
}
.dataTables_filter button,
.dataTables_filter .btn,
.dataTables_filter .search-btn,
.dataTables_filter .input-group-text,
.dataTables_filter .input-group-prepend,
.dataTables_filter .input-group-append,
[id$="_filter"] button,
[id$="_filter"] .btn,
[id$="_filter"] .input-group-text,
[id$="_filter"] .input-group-prepend,
[id$="_filter"] .input-group-append {
  background-color: var(--ayh-accent-1) !important;
  border: none !important;
  color: var(--ayh-background) !important;
}
.dataTables_filter svg,
.dataTables_filter i,
[id$="_filter"] svg,
[id$="_filter"] i {
  color: var(--ayh-background) !important;
  fill: var(--ayh-background) !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 24)
   Redesign of the "Register Domain" page
   (domainregister.tpl) toward the reference layout:
   full-width feel, horizontal toolbar instead of a
   left sidebar, tab-style category pills, a bolder
   hero heading, and a cleaner pricing table.
   Requires the accompanying domainregister.tpl edit
   (adds the "cart-layout-toolbar" class — no include
   removed, "Actions" links still fully functional).
   ============================================ */

/* --- Sidebar becomes a horizontal toolbar row above
       the search hero, instead of a left column --- */
.cart-layout-toolbar {
  display: flex !important;
  flex-direction: column !important;
}
.cart-layout-toolbar .cart-sidebar {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  margin-bottom: 1.5rem !important;
}
.cart-layout-toolbar .cart-sidebar .card {
  flex: 1 1 260px !important;
  margin-bottom: 0 !important;
}
.cart-layout-toolbar .cart-sidebar .card-body,
.cart-layout-toolbar .cart-sidebar .card-header {
  padding: 0.75rem 1rem !important;
}
.cart-layout-toolbar .cart-body {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* --- Bolder hero heading --- */
.header-lined h1.font-size-36 {
  font-size: 2.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  border: none !important;
}

/* --- Category pills → tab-style row --- */
.tld-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  margin: 1.25rem 0 1.5rem !important;
}
.tld-filters a.badge {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 9999px !important;
  padding: 0.6rem 1.25rem !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  transition: all 0.15s ease;
}
.tld-filters a.badge:hover {
  border-color: var(--ayh-accent-1) !important;
  color: var(--ayh-accent-1) !important;
}
.tld-filters a.badge.badge-success {
  background: linear-gradient(135deg, var(--ayh-accent-1), var(--ayh-accent-2)) !important;
  color: var(--ayh-background) !important;
  border-color: transparent !important;
}

/* --- Pricing table: more breathing room + row hover --- */
.domain-pricing .bg-white .row.no-gutters.tld-row {
  padding: 0.9rem 0 !important;
  transition: background-color 0.15s ease;
}
.domain-pricing .bg-white .row.no-gutters.tld-row:hover {
  background-color: var(--ayh-surface-2) !important;
}
.domain-pricing .bg-white .row.no-gutters.tld-pricing-header.text-center {
  padding: 0.9rem 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  font-weight: 700;
}

/* ============================================
   Additional fixes — Sept 2026 (round 25)
   Domain pricing table: remove the leftover vertical
   divider borders ("white dashes") between the domain
   name column and the price columns, and align every
   cell (single-line domain name vs. two-line
   price + "1 Year") on the same vertical center with
   consistent padding.
   ============================================ */
.domain-pricing .bg-white .row.no-gutters.tld-row,
.domain-pricing .bg-white .row.no-gutters.tld-pricing-header.text-center {
  display: flex !important;
  align-items: center !important;
  padding: 1rem 0 !important;
  border-left: none !important;
  border-right: none !important;
}
.domain-pricing .bg-white .row.no-gutters.tld-row > div,
.domain-pricing .bg-white .row.no-gutters.tld-row .col-md-8 > .row > div,
.domain-pricing .bg-white .row.no-gutters.tld-pricing-header.text-center > div {
  border-left: none !important;
  border-right: none !important;
  padding: 0 1rem !important;
}
.domain-pricing .bg-white .row.no-gutters.tld-row .two-row-center {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
  border: none !important;
}
.domain-pricing .bg-white .row.no-gutters.tld-row .col-xs-4.col-4.text-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 26)
   Round 24's .tld-filters flex rule didn't explicitly
   set flex-direction, so the parent theme's mobile
   rule (which stacks pills in a column and stretches
   them full-width) was still winning on narrow
   viewports. Also wraps the heading + category pills
   + pricing table in one consistent card so they read
   as a single section, not a floating heading above a
   separately-boxed table.
   ============================================ */
.domain-pricing {
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 1rem !important;
  padding: 1.5rem !important;
}
.domain-pricing .bg-white {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.tld-filters {
  flex-direction: row !important;
  align-items: flex-start !important;
}
.tld-filters a.badge {
  flex: 0 1 auto !important;
  width: auto !important;
  align-self: flex-start !important;
  white-space: nowrap;
}

/* ============================================
   Additional fixes — Sept 2026 (round 27)
   Login page: strip the icon-in-a-box look on the
   email/password fields to match the plain,
   label-above-input reference design (no template
   edit needed for this part — same markup, different
   presentation).
   Register page: style the new two-column split
   added in clientregister.tpl (form left, benefits
   card right).
   ============================================ */

/* --- Login card --- */
.login-form .card {
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 1rem !important;
}
.login-form .input-group-prepend {
  display: none !important;
}
.login-form .input-group-merge .form-control {
  border-radius: 0.75rem !important;
  border: 1px solid var(--ayh-border) !important;
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
  padding-left: 1rem !important;
}
.login-form .btn-reveal-pw {
  background: transparent !important;
  border: none !important;
  color: var(--ayh-muted) !important;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.login-form .input-group-merge {
  position: relative;
}
.login-form .form-control-label {
  color: var(--ayh-foreground) !important;
  font-weight: 600;
}
.login-form .btn-primary {
  background: linear-gradient(135deg, var(--ayh-accent-1), var(--ayh-accent-2)) !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 0.85rem 1.5rem !important;
  font-weight: 700 !important;
  width: 100%;
}
.login-form .card-footer {
  background-color: transparent !important;
  border-top: 1px solid var(--ayh-border) !important;
}

/* --- Register page: two-column split --- */
.register-split {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5rem 0 !important;
  align-items: flex-start !important;
}
.register-form-col,
.register-benefits-col {
  width: 100% !important;
}
@media (min-width: 992px) {
  .register-form-col { flex: 0 0 58% !important; max-width: 58% !important; padding-right: 1rem; }
  .register-benefits-col { flex: 0 0 42% !important; max-width: 42% !important; padding-left: 1rem; }
}
.register-benefits-card {
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 1rem !important;
  position: sticky;
  top: 1.5rem;
}
.register-benefits-card .card-title {
  color: var(--ayh-foreground) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  margin-bottom: 1.25rem !important;
}
.register-benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--ayh-foreground) !important;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ayh-border);
}
.register-benefits-list li:last-child {
  border-bottom: none;
}
.register-benefits-list i {
  color: var(--ayh-accent-1) !important;
  margin-top: 0.2rem;
}

/* ============================================
   Additional fixes — Sept 2026 (round 28)
   Register page: merge the separate "Personal
   Information" / "Billing Address" / "Account
   Security" cards into one continuous form panel
   (no internal borders or section headings), matching
   the reference design. Styles the new "Already have
   an account? Login" callout added at the bottom of
   the form in clientregister.tpl.
   ============================================ */
.register-form-col {
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 1rem !important;
  padding: 2rem !important;
}
.register-form-col .card {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}
.register-form-col .card-body {
  padding: 0 0 1.5rem 0 !important;
}
.register-form-col .card-title {
  display: none !important;
}
.register-login-callout {
  margin-top: 1.5rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid var(--ayh-border) !important;
}
.register-login-callout small {
  color: var(--ayh-muted) !important;
  margin-right: 0.4rem;
}
.register-login-callout a {
  color: var(--ayh-accent-1) !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 29)
   Register form: hide the "Generate Password" button
   and password-strength meter (visual helpers only,
   safe to hide — no effect on form submission or the
   underlying JS, which keeps running harmlessly in
   the background).
   ============================================ */
.generate-password,
.password-strength-meter {
  display: none !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 30)
   Client-area navbar redesign, matching the two-row
   reference layout: a thin utility bar on top, and
   ONE combined row below holding logo + main nav
   links + search + cart + account menu (previously
   these last four lived in a separate third row).
   Pairs with the header.tpl merge of the two navbar
   wrappers into a single .main-navbar-wrapper.
   ============================================ */

.main-navbar-wrapper {
  padding: 0.9rem 0 !important;
}
.main-navbar-wrapper .navbar-brand img {
  max-height: 34px;
}
.main-navbar-wrapper .navbar-collapse {
  align-items: center !important;
}
.main-navbar-wrapper #nav.navbar-nav {
  gap: 0.25rem;
}
.main-navbar-wrapper #nav.navbar-nav .nav-link {
  color: var(--ayh-foreground) !important;
  font-weight: 600;
  padding: 0.5rem 0.9rem !important;
}
.main-navbar-wrapper #nav.navbar-nav .nav-link:hover {
  color: var(--ayh-accent-1) !important;
}
.main-navbar-wrapper .input-group.search {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 9999px !important;
  overflow: hidden;
}
.main-navbar-wrapper .cart-btn {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 9999px !important;
  width: 42px;
  height: 42px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
}
.main-navbar-wrapper .cart-btn .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, var(--ayh-accent-1), var(--ayh-accent-2)) !important;
  color: var(--ayh-background) !important;
}

/* --- Topbar: compact pill styling closer to the
       reference's thin utility bar --- */
.topbar .btn {
  color: var(--ayh-foreground) !important;
  font-size: 0.85rem;
}
.topbar .input-group.active-client {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 9999px !important;
  overflow: hidden;
}
.topbar .input-group.active-client .btn-active-client {
  color: var(--ayh-foreground) !important;
  font-weight: 600;
}

/* ============================================
   Additional fixes — Sept 2026 (round 31)
   Site-wide typography: Plus Jakarta Sans for
   headings/logo-style display text, Inter for body
   copy and UI text. Assumes both variable woff2 files
   are uploaded to /fonts/ at the site root (absolute
   paths, so they resolve correctly regardless of
   where this stylesheet itself is served from).
   ============================================ */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/plus-jakarta-sans-600-800.woff2') format('woff2');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400-600.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ayh-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ayh-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  font-family: var(--ayh-font-body) !important;
}
h1, h2, h3, h4, h5, h6,
.navbar-brand,
.card-title,
.header-lined h1,
.register-benefits-card .card-title,
.tld-pricing-header,
.tile .title {
  font-family: var(--ayh-font-display) !important;
}
h1, h2, .header-lined h1 {
  font-weight: 800 !important;
}
h3, h4, .card-title {
  font-weight: 700 !important;
}
.btn, .form-control, input, select, textarea, label, p, li, td, th, a {
  font-family: var(--ayh-font-body) !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 32)
   Remove the knowledgebase search bar from the main
   navbar (both the desktop and mobile-collapse
   versions share the same form action, so one
   selector catches both) and enlarge the logo now
   that there's more room in the row.
   ============================================ */
.main-navbar-wrapper form[action*="knowledgebase-search"] {
  display: none !important;
}
.main-navbar-wrapper .navbar-brand img {
  max-height: 52px;
}

/* ============================================
   Additional fixes — Sept 2026 (round 33)
   Fix round 32: the form[action*="knowledgebase-search"]
   selector never matched because routePath() renders
   an actual URL (likely "/knowledgebase/search" with a
   slash, not the literal route name), so the search
   bar never actually hid. Target the real element
   directly instead. Also stop the horizontal
   page-width overflow (visible as a bottom scrollbar
   and the "shaking" effect) that the still-visible
   search bar was causing in the merged navbar row.
   ============================================ */
.main-navbar-wrapper .input-group.search,
.main-navbar-wrapper form:has(.input-group.search) {
  display: none !important;
}
html, body {
  overflow-x: hidden !important;
}
.main-navbar-wrapper .container {
  flex-wrap: wrap !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 33)
   Round 32's selector matched against the search
   form's "action" attribute, assuming it would
   contain the literal text "knowledgebase-search" —
   but {routePath('knowledgebase-search')} actually
   resolves to a URL like ".../knowledgebase/search"
   (slash, not hyphen), so the attribute selector never
   matched and the search bar stayed visible. This
   targets the forms directly by their real classes
   instead. The mismatch was also likely the cause of
   the "shaking": the still-visible search bar pushed
   the navbar row wider than the viewport, creating a
   horizontal scrollbar, which some themes' resize
   listeners can fight with in a loop.
   ============================================ */
.main-navbar-wrapper .input-group.search {
  display: none !important;
}
.main-navbar-wrapper form.form-inline.ml-xl-3,
.main-navbar-wrapper .navbar-collapse form.d-xl-none {
  display: none !important;
}
.main-navbar-wrapper .container {
  flex-wrap: nowrap !important;
  max-width: 100%;
}
.main-navbar-wrapper,
.main-navbar-wrapper .container {
  overflow-x: hidden;
}

/* ============================================
   Additional fixes — Sept 2026 (round 34)
   Ticket/reply forms: markdown editor (toolbar,
   preview, footer, textarea) and the file-upload
   input. The parent theme forces white backgrounds
   with !important on these, so the selectors below are
   ID-anchored (#main-body) as well as plain, to win.
   Also: round 31's font rule no longer overrides the
   Font Awesome icon font on span.fas etc. (that was
   turning the editor toolbar icons into blank boxes).
   ============================================ */

/* --- Markdown editor shell --- */
.md-editor,
#main-body .md-editor {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 0.75rem !important;
  overflow: hidden;
  max-width: 100%;
}
.md-editor.active,
#main-body .md-editor.active {
  border-color: var(--ayh-accent-1) !important;
}

/* --- Toolbar --- */
.md-editor > .md-header,
.md-editor > .btn-toolbar,
#main-body .md-editor > .md-header,
#main-body .md-editor > .btn-toolbar {
  background-color: var(--ayh-card) !important;
  border-bottom: 1px solid var(--ayh-border) !important;
  padding: 0.5rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
}
.md-editor .btn-group {
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.md-editor .btn-toolbar .btn,
.md-editor .md-header .btn {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 0.5rem !important;
  min-width: 34px;
  height: 34px;
  padding: 0 0.6rem !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.md-editor .btn-toolbar .btn:hover,
.md-editor .md-header .btn:hover {
  border-color: var(--ayh-accent-1) !important;
  color: var(--ayh-accent-1) !important;
}
.md-editor .btn-toolbar .btn.active,
.md-editor .md-header .btn.active {
  background: linear-gradient(135deg, var(--ayh-accent-1), var(--ayh-accent-2)) !important;
  color: var(--ayh-background) !important;
  border-color: transparent !important;
}
.md-editor .btn-toolbar .btn i,
.md-editor .btn-toolbar .btn span,
.md-editor .md-header .btn i,
.md-editor .md-header .btn span {
  color: inherit !important;
}

/* --- Editing textarea + preview pane (theme uses
       !important white here, and an inline width in px
       on the preview that overflows narrow screens) --- */
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview,
#main-body .md-editor > textarea.markdown-editor,
#main-body .md-editor > .md-preview {
  background: var(--ayh-surface-2) !important;
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
  border-top: 1px solid var(--ayh-border) !important;
  border-bottom: 1px solid var(--ayh-border) !important;
  border-left: none !important;
  border-right: none !important;
  padding: 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.md-editor > .md-preview *,
#main-body .md-editor > .md-preview * {
  color: var(--ayh-foreground) !important;
}
.md-editor > .md-preview a {
  color: var(--ayh-accent-1) !important;
}
.md-editor > .md-preview code,
.md-editor > .md-preview pre {
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border);
  border-radius: 0.4rem;
}
.md-editor > .md-preview blockquote {
  border-left: 3px solid var(--ayh-accent-1) !important;
}

/* --- Footer strip under the editor --- */
.md-editor .md-footer,
#main-body .md-editor .md-footer {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-muted) !important;
  border-top: 1px solid var(--ayh-border) !important;
  padding: 0.4rem 0.75rem !important;
}
.md-editor .md-fullscreen-controls a {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-foreground) !important;
}
.md-editor.md-fullscreen-mode {
  background-color: var(--ayh-background) !important;
}

/* --- File upload input ("Choose file" / "Browse") ---
       The real <input> is an invisible overlay; what you
       see is the label and its ::after "Browse" button. */
.custom-file,
.attachment-group .custom-file {
  flex: 1 1 auto;
  min-width: 0;
}
.custom-file-label,
#main-body .custom-file-label {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 0.75rem !important;
}
.custom-file-label::after,
#main-body .custom-file-label::after {
  background-color: var(--ayh-border) !important;
  color: var(--ayh-foreground) !important;
  border-left: 1px solid var(--ayh-border) !important;
  border-radius: 0 0.75rem 0.75rem 0 !important;
}
.custom-file-input:focus ~ .custom-file-label {
  border-color: var(--ayh-accent-1) !important;
  box-shadow: none !important;
}
.attachment-group .input-group-append {
  margin-left: 0.5rem;
}

/* ============================================
   Additional fixes — Sept 2026 (round 35)
   View Ticket page.
   1) "Posted by … on …" bar: the theme gives it a
      #f6f6f6 background, which left our light text
      invisible on it.
   2) Requestor badges (Operator / Owner): dark text
      for contrast on their cyan / green backgrounds.
   3) The rating strip at the bottom of each staff reply
      (div.clearfix holding the row of star glyphs, which
      rendered as blank boxes) is hidden entirely.
   Also: <span> removed from round 31's font rule. Spans
   inherit the body font anyway, and forcing a font on
   them was what broke icon/star glyphs inside spans.
   ============================================ */

/* --- 1) Posted-by bar --- */
.view-ticket .posted-by,
#main-body .view-ticket .posted-by {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-muted) !important;
  border-bottom: 1px solid var(--ayh-border) !important;
  padding: 0.6rem 1rem !important;
}
.view-ticket .posted-by .posted-by-name {
  color: var(--ayh-foreground) !important;
  font-weight: 700;
}
.view-ticket .posted-by .posted-on {
  color: var(--ayh-muted) !important;
}

/* --- Reply blocks: no leftover light panels or borders --- */
.view-ticket .ticket-reply,
.view-ticket .ticket-reply.staff,
.view-ticket .ticket-reply .message {
  background-color: transparent !important;
  border-color: var(--ayh-border) !important;
  color: var(--ayh-foreground) !important;
}

/* --- 2) Requestor badges --- */
.view-ticket .requestor-badge {
  color: #04121c !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  padding: 0.3em 0.85em !important;
}

/* --- 3) Hide the rating strip under each reply --- */
.view-ticket .ticket-reply .message > .clearfix,
.view-ticket .ticket-reply .rating {
  display: none !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 36)
   1) Dropdown menus (e.g. "Support" > "Tickets")
      opening BEHIND page content — a stacking-context
      issue from the navbar merge in round 30. Raises
      the navbar's own stacking context and the
      dropdown menus' z-index so they always render on
      top of everything below them.
   2) Notification popover: it's a plain white Bootstrap
      popover, but our global `li { color: var(--ayh-
      foreground) }` rule (a light colour) was leaking
      into it, making its near-white text invisible on
      its own white background. Themed the whole popover
      dark to match the rest of the site instead.
   3) Mobile hamburger menu: on the merged single-row
      navbar, the expanded menu was overlapping the logo/
      cart row instead of pushing content down cleanly.
      Forces it to lay out as a normal full-width block
      beneath the row, with proper spacing and a solid
      background.
   4) Tighten the gap between "Open Ticket" and "Hello,
      Faith!" (was stretching edge-to-edge), and enlarge
      the logo a bit further.
   ============================================ */

/* --- 1) Dropdown stacking --- */
.main-navbar-wrapper {
  position: relative;
  z-index: 30;
}
.dropdown-menu {
  z-index: 1050 !important;
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border) !important;
}
.dropdown-menu .dropdown-item {
  color: var(--ayh-foreground) !important;
}
.dropdown-menu .dropdown-item:hover {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-accent-1) !important;
}

/* --- 2) Notification popover, themed dark --- */
.popover {
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border) !important;
  max-width: 320px;
}
.popover .popover-header {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
  border-bottom: 1px solid var(--ayh-border) !important;
}
.popover .popover-body,
.popover .popover-body * {
  color: var(--ayh-foreground) !important;
}
.popover.bs-popover-bottom > .arrow::after,
.popover.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
  border-bottom-color: var(--ayh-card) !important;
}
.popover.bs-popover-top > .arrow::after,
.popover.bs-popover-auto[x-placement^="top"] > .arrow::after {
  border-top-color: var(--ayh-card) !important;
}
.popover-user-notifications ul.client-alerts li {
  border-bottom: 1px solid var(--ayh-border) !important;
}
.popover-user-notifications ul.client-alerts li a {
  color: var(--ayh-accent-1) !important;
}

/* --- 3) Mobile hamburger menu: clean full-width block --- */
@media (max-width: 1199.98px) {
  .main-navbar-wrapper .navbar-collapse {
    position: static !important;
    width: 100% !important;
  }
  .main-navbar-wrapper .navbar-collapse.show {
    display: block !important;
    background-color: var(--ayh-card) !important;
    border-top: 1px solid var(--ayh-border) !important;
    padding: 1rem !important;
    margin-top: 0.75rem;
  }
  .main-navbar-wrapper .navbar-collapse .navbar-nav {
    flex-direction: column !important;
    width: 100%;
  }
  .main-navbar-wrapper .navbar-collapse .nav-link {
    padding: 0.65rem 0.25rem !important;
    border-bottom: 1px solid var(--ayh-border);
    width: 100%;
  }
  .main-navbar-wrapper .container {
    flex-wrap: wrap !important;
  }
}

/* --- 4) Tighter gap + bigger logo --- */
.main-navbar-wrapper #nav.navbar-nav.mr-auto {
  margin-right: 1.5rem !important;
}
.main-navbar-wrapper .navbar-brand img {
  max-height: 64px;
}

/* ============================================
   Additional fixes — Sept 2026 (round 37)
   1) The real cause of the dropdown rendering behind
      the breadcrumb bar: round 36 gave the dropdown a
      high z-index, but that only wins comparisons
      inside its OWN local stacking context
      (.main-navbar-wrapper). The breadcrumb bar below
      it is a separate sibling section that was never
      part of that comparison, so — regardless of the
      dropdown's z-index — the browser was still just
      painting header before breadcrumb in plain DOM
      order. Elevating <header> itself (not just the
      navbar inside it) fixes this at the source: once
      header has its own explicit stacking position, its
      entire subtree (topbar, navbar, and any dropdown
      inside it) paints above every later sibling section
      on the page, dropdown z-index or not.
   2) Center the main nav links between the logo and the
      cart/account group, with even, consistent spacing.
   ============================================ */

/* --- 1) Elevate the whole header --- */
header#header {
  position: relative;
  z-index: 1000;
}

/* --- 2) Centered, evenly-spaced nav links --- */
.main-navbar-wrapper .container {
  justify-content: space-between !important;
}
.main-navbar-wrapper #nav.navbar-nav.mr-auto {
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  flex: 1 1 auto;
  gap: 0.5rem;
}

/* ============================================
   Additional fixes — Sept 2026 (round 38)
   Found the actual cause of the dropdown still being
   clipped: round 33 set overflow-x: hidden on
   .main-navbar-wrapper as a safety net against an
   earlier (now-resolved) horizontal-scrollbar bug. But
   per the CSS spec, setting overflow-x alone forces
   overflow-y to silently become "auto" instead of
   staying "visible" — which clips anything (like a
   dropdown menu) that extends below the row. That
   safety net is no longer needed now that the search
   bar that caused the original shake is gone, so this
   removes the clipping entirely.
   ============================================ */
.main-navbar-wrapper,
.main-navbar-wrapper .container {
  overflow: visible !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 39)
   Checkout "existing account" selector
   (div#containerExistingAccountSelect.row.account-select-container
    > div.col-sm-12 > div.account.border-bottom).
   The account cards were rendering with a light/default
   background and washed-out text (name, currency badge and
   address were barely readable on the dark theme). All rules
   are scoped to the account selector so no other .row,
   .col-sm-12 or .border-bottom elements are affected.
   ============================================ */

#containerExistingAccountSelect.account-select-container,
.row.account-select-container {
  background-color: transparent !important;
  color: var(--ayh-foreground) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#containerExistingAccountSelect.account-select-container > .col-sm-12,
.account-select-container > .col-sm-12 {
  background-color: transparent !important;
  color: var(--ayh-foreground) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.account-select-container .account,
.account-select-container .account.border-bottom {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
  border-bottom: 1px solid var(--ayh-border) !important;
  border-radius: 0.875rem !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 0.75rem !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease,
              box-shadow 0.2s ease;
}
.account-select-container .account:last-child {
  margin-bottom: 0 !important;
}

.account-select-container .account:hover {
  background-color: var(--ayh-surface-2) !important;
  border-color: var(--ayh-accent-1) !important;
}

/* Selected account */
.account-select-container .account.active,
.account-select-container .account.selected,
.account-select-container .account:has(input:checked) {
  background-color: var(--ayh-surface-2) !important;
  border-color: var(--ayh-accent-2) !important;
  box-shadow: 0 0 0 1px var(--ayh-accent-2),
              0 0 18px rgba(76, 223, 196, 0.15) !important;
}

/* Account name, address lines and any nested text */
.account-select-container .account,
.account-select-container .account label,
.account-select-container .account .address,
.account-select-container .account span,
.account-select-container .account strong,
.account-select-container .account div {
  color: var(--ayh-foreground) !important;
}
.account-select-container .account .address,
.account-select-container .account .small,
.account-select-container .account small,
.account-select-container .account .text-muted {
  color: var(--ayh-muted) !important;
}

/* Currency badge (e.g. USD) */
.account-select-container .account .badge,
.account-select-container .account .label {
  background-color: rgba(0, 179, 248, 0.15) !important;
  color: var(--ayh-accent-1) !important;
  border: 1px solid var(--ayh-accent-1) !important;
}

/* Radio / check indicator */
.account-select-container .account .fa-check-circle,
.account-select-container .account .fa-circle,
.account-select-container .account i {
  color: var(--ayh-accent-2) !important;
}
.account-select-container .account input[type="radio"] {
  accent-color: var(--ayh-accent-2);
}

/* ============================================
   Additional fixes — Sept 2026 (round 40)
   1) Configure Product page: "Email Starter" product title
      block (div.product-info > p.product-title) had a light
      default background with near-invisible text.
   2) Remove-item confirmation modal (div.modal-remove-item >
      .modal-content > .modal-body > h4.modal-title): light
      panel, invisible title/message/X icon and No button.
   3) Checkout form fields (input#inputNewPassword1,
      input#inputPostcode and every other input.field.form-control):
      Chrome autofill was painting them white/pale-blue with dark
      dots/text. Overridden with the :-webkit-autofill states.
   4) Checkout form: removed the white horizontal divider lines
      next to the section headings (Personal Information, Billing
      Address, Account Security, Payment Details, Additional
      Notes). Headings stay; only the lines go.
   ============================================ */

/* --- 1) Product info block --- */
.secondary-cart-body .product-info,
div.product-info {
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 1rem !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1rem !important;
  color: var(--ayh-foreground) !important;
}
div.product-info .product-title,
p.product-title {
  background: transparent !important;
  color: var(--ayh-foreground) !important;
  font-family: var(--ayh-font-display, "Plus Jakarta Sans", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  margin: 0 !important;
}
div.product-info p:not(.product-title) {
  color: var(--ayh-muted) !important;
  margin: 0 !important;
}

/* --- 2) Remove item modal --- */
.modal-remove-item .modal-content {
  background: linear-gradient(180deg, var(--ayh-card), var(--ayh-background)) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 1.375rem !important;
  color: var(--ayh-foreground) !important;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7) !important;
}
.modal-remove-item .modal-body {
  background-color: transparent !important;
  color: var(--ayh-foreground) !important;
  text-align: center;
  padding: 1.75rem 1.5rem !important;
}
.modal-remove-item .modal-body h4.modal-title,
.modal-remove-item .modal-body .modal-title {
  color: var(--ayh-foreground) !important;
  font-weight: 700 !important;
  background: transparent !important;
}
.modal-remove-item .modal-body i,
.modal-remove-item .modal-body .fa-times,
.modal-remove-item .modal-body .fa-3x {
  color: #ff6363 !important;
}
.modal-remove-item .modal-body .float-right,
.modal-remove-item .modal-body .float-right .close,
.modal-remove-item .modal-body .close {
  color: var(--ayh-foreground) !important;
  opacity: 0.8;
  text-shadow: none !important;
}
.modal-remove-item .modal-body .close:hover {
  opacity: 1;
}
.modal-remove-item .modal-body .btn {
  min-width: 90px;
  margin: 0 0.25rem;
}
.modal-remove-item .modal-body .btn-default,
.modal-remove-item .modal-body .btn-secondary,
.modal-remove-item .modal-body .btn-outline-secondary {
  background: transparent !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
}
.modal-remove-item .modal-body .btn-default:hover,
.modal-remove-item .modal-body .btn-secondary:hover {
  border-color: var(--ayh-accent-1) !important;
  color: var(--ayh-accent-1) !important;
}

/* --- 3) Browser autofill override on checkout fields --- */
#frmCheckout input.field.form-control:-webkit-autofill,
#frmCheckout input.field.form-control:-webkit-autofill:hover,
#frmCheckout input.field.form-control:-webkit-autofill:focus,
#frmCheckout input.field.form-control:-webkit-autofill:active,
input.field.form-control:-webkit-autofill,
input.field.form-control:-webkit-autofill:hover,
input.field.form-control:-webkit-autofill:focus,
input.field.form-control:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--ayh-surface-2) inset !important;
  box-shadow: 0 0 0 1000px var(--ayh-surface-2) inset !important;
  -webkit-text-fill-color: var(--ayh-foreground) !important;
  caret-color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 0.75rem !important;
  transition: background-color 9999s ease-in-out 0s;
}
#frmCheckout input.field.form-control:-webkit-autofill:focus,
input.field.form-control:-webkit-autofill:focus {
  border-color: var(--ayh-accent-1) !important;
}
#frmCheckout input.field.form-control:-moz-autofill {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
}
/* Field icons (lock, pin, building, etc.) stay visible */
#frmCheckout .prepend-icon .field-icon,
#frmCheckout .prepend-icon .field-icon i {
  color: var(--ayh-muted) !important;
}

/* --- 4) No white divider lines beside checkout section headings --- */
#frmCheckout .sub-heading,
#frmCheckout .sub-heading-borderless {
  border-top: none !important;
  border-bottom: none !important;
  height: auto !important;
}
#frmCheckout .sub-heading::before,
#frmCheckout .sub-heading::after {
  display: none !important;
  content: none !important;
}
#frmCheckout .sub-heading span,
#frmCheckout .sub-heading .primary-bg-color {
  position: static !important;
  top: auto !important;
  background-color: transparent !important;
  padding: 0 !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 41)
   Mass Payment page (clientarea.php?action=masspay):
   the "Sub Total" and "Total Due" rows (tr.masspay-total)
   kept the theme's light-grey background, so the light
   label and amount text were invisible.
   ============================================ */
tr.masspay-total,
tr.masspay-total > td,
.table tr.masspay-total td,
#main-body tr.masspay-total,
#main-body tr.masspay-total > td {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
  border-color: var(--ayh-border) !important;
  font-weight: 700;
}
tr.masspay-total > td.text-right {
  color: var(--ayh-muted) !important;
}
tr.masspay-total:last-child > td,
tr.masspay-total:last-child > td:last-child {
  color: var(--ayh-accent-2) !important;
  font-size: 1.05rem;
}

/* ============================================
   Additional fixes — Sept 2026 (round 42)
   1) Upgrade page: "Service being upgraded" block
      (div.product-to-be-upgraded > .row > .col-sm-9 h5 /
      .col-sm-3.text-right) had a light background with
      near-invisible product name and button.
   2) Product details page: the white product icon tile
      (div.product-icon.text-center with h3 / h4 and the
      ACTIVE status bar) — white text on a white tile.
   3) Product details tabs (ul.nav-tabs.responsive-tabs-sm >
      a.nav-link.active, e.g. "Domain") and the tab panel
      beneath them (.product-details-tab-container).
   ============================================ */

/* --- 1) Service being upgraded --- */
.upgrade .product-to-be-upgraded,
div.product-to-be-upgraded {
  background-color: var(--ayh-surface-2) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 1rem !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1rem !important;
  color: var(--ayh-foreground) !important;
}
div.product-to-be-upgraded .row {
  align-items: center;
  margin: 0 !important;
}
div.product-to-be-upgraded h5,
div.product-to-be-upgraded h5 * {
  color: var(--ayh-foreground) !important;
  background: transparent !important;
  margin: 0 !important;
  font-weight: 700;
}
div.product-to-be-upgraded h5 small,
div.product-to-be-upgraded h5 .text-muted,
div.product-to-be-upgraded p,
div.product-to-be-upgraded .text-muted {
  color: var(--ayh-muted) !important;
}
div.product-to-be-upgraded .text-right .btn,
div.product-to-be-upgraded .btn-default,
div.product-to-be-upgraded .btn-secondary {
  background: transparent !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 9999px !important;
}
div.product-to-be-upgraded .text-right .btn:hover {
  border-color: var(--ayh-accent-1) !important;
  color: var(--ayh-accent-1) !important;
}

/* --- 2) Product icon tile + status bar --- */
.product-details .product-status .product-icon,
div.product-icon.text-center,
div.product-icon {
  background-color: var(--ayh-surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--ayh-border) !important;
  border-bottom: none !important;
  border-radius: 1rem 1rem 0 0 !important;
  color: var(--ayh-foreground) !important;
}
div.product-icon h3 {
  color: var(--ayh-foreground) !important;
  font-weight: 800 !important;
  background: transparent !important;
}
div.product-icon h4 {
  color: var(--ayh-muted) !important;
  font-weight: 600 !important;
  background: transparent !important;
}
div.product-icon .fa-stack .fa-circle,
div.product-icon .fa-stack .fa-inverse {
  color: var(--ayh-card) !important;
}
div.product-icon .fa-stack i:not(.fa-circle) {
  color: var(--ayh-accent-1) !important;
}
.product-status .product-status-text {
  border-radius: 0 0 1rem 1rem !important;
  color: var(--ayh-background) !important;
  font-weight: 700;
}
.product-status-active .product-status-text {
  background-color: var(--ayh-accent-2) !important;
}

/* --- 3) Product details tabs + panel --- */
ul.nav.nav-tabs.responsive-tabs-sm {
  border-bottom: 1px solid var(--ayh-border) !important;
  background: transparent !important;
}
ul.nav-tabs.responsive-tabs-sm .nav-link {
  background-color: transparent !important;
  color: var(--ayh-muted) !important;
  border: 1px solid transparent !important;
  border-radius: 0.75rem 0.75rem 0 0 !important;
}
ul.nav-tabs.responsive-tabs-sm .nav-link:hover {
  color: var(--ayh-accent-1) !important;
  border-color: var(--ayh-border) !important;
}
ul.nav-tabs.responsive-tabs-sm .nav-link.active,
a.nav-link.active[data-toggle="tab"] {
  background-color: var(--ayh-card) !important;
  color: var(--ayh-accent-1) !important;
  border: 1px solid var(--ayh-border) !important;
  border-bottom-color: var(--ayh-card) !important;
}
ul.nav-tabs.responsive-tabs-sm .nav-link.active *,
a.nav-link.active[data-toggle="tab"] * {
  color: var(--ayh-accent-1) !important;
}
.responsive-tabs-sm-connector,
.responsive-tabs-sm-connector .channel {
  background-color: transparent !important;
  border-color: var(--ayh-border) !important;
}
.tab-content.product-details-tab-container,
.product-details-tab-container {
  background-color: var(--ayh-card) !important;
  border: 1px solid var(--ayh-border) !important;
  border-top: none !important;
  border-radius: 0 0 1rem 1rem !important;
  color: var(--ayh-foreground) !important;
}
.product-details-tab-container * {
  color: var(--ayh-foreground) !important;
}
.product-details-tab-container .btn {
  background: transparent !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 9999px !important;
}
.product-details-tab-container .btn:hover {
  border-color: var(--ayh-accent-1) !important;
  color: var(--ayh-accent-1) !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 43)
   Domain renewal page (index.php?rp=/cart/domain/renew):
   div#domainRenewals.domain-renewals > div.domain-renewal.
   The renewal cards kept the order form's light background,
   so the domain name, description, expiry badge, period
   dropdown and "Add to cart" button were hard to read.
   ============================================ */
#order-standard_cart .domain-renewals,
#domainRenewals.domain-renewals {
  background-color: transparent !important;
  color: var(--ayh-foreground) !important;
}
#order-standard_cart .domain-renewal,
div.domain-renewal {
  background-color: var(--ayh-card) !important;
  background-image: none !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 1.125rem !important;
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 1rem !important;
  color: var(--ayh-foreground) !important;
  position: relative;
  transition: border-color 0.2s ease;
}
div.domain-renewal:hover {
  border-color: var(--ayh-accent-1) !important;
}
div.domain-renewal h3,
div.domain-renewal h4,
div.domain-renewal strong {
  color: var(--ayh-foreground) !important;
  background: transparent !important;
  font-weight: 700 !important;
}
div.domain-renewal p,
div.domain-renewal span:not(.badge):not(.label),
div.domain-renewal label,
div.domain-renewal div {
  color: var(--ayh-foreground) !important;
}
div.domain-renewal .text-muted,
div.domain-renewal small,
div.domain-renewal p.text-muted {
  color: var(--ayh-muted) !important;
}

/* Expiry badge (Expiring in 360 days) */
div.domain-renewal .badge,
div.domain-renewal .label,
div.domain-renewal .badge-success,
div.domain-renewal .badge-warning,
div.domain-renewal .badge-danger {
  border-radius: 9999px !important;
  padding: 0.35em 0.8em !important;
  font-weight: 700 !important;
  color: var(--ayh-background) !important;
}
div.domain-renewal .badge-success,
div.domain-renewal .label-success {
  background-color: var(--ayh-accent-2) !important;
}
div.domain-renewal .badge-warning,
div.domain-renewal .label-warning {
  background-color: #ffc107 !important;
}
div.domain-renewal .badge-danger,
div.domain-renewal .label-danger {
  background-color: #ff6363 !important;
}

/* Renewal period dropdown */
div.domain-renewal select,
div.domain-renewal select.form-control,
div.domain-renewal .custom-select {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 0.75rem !important;
}
div.domain-renewal select option {
  background-color: var(--ayh-surface-2) !important;
  color: var(--ayh-foreground) !important;
}

/* Add-to-cart / remove button */
div.domain-renewal .btn,
div.domain-renewal button {
  border-radius: 9999px !important;
}
div.domain-renewal .btn-primary,
div.domain-renewal .btn-primary * {
  background: linear-gradient(135deg, var(--ayh-accent-1), var(--ayh-accent-2)) !important;
  color: var(--ayh-background) !important;
  border: none !important;
}
div.domain-renewal .btn-default,
div.domain-renewal .btn-secondary,
div.domain-renewal .btn-outline-secondary,
div.domain-renewal .btn-light {
  background: transparent !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
}
div.domain-renewal .btn-default:hover,
div.domain-renewal .btn-secondary:hover {
  border-color: var(--ayh-accent-1) !important;
  color: var(--ayh-accent-1) !important;
}

/* ============================================
   Additional fixes — Sept 2026 (round 44)
   Store product cards redesigned to match the frontend
   pricing cards (Starter / Pro / Business): dark rounded
   card, big price with "/mo", a "Total for the year"
   box, full-width pill button, and "label ... value"
   feature rows. Pairs with the new
   templates/orderforms/standard_cart/products.tpl
   (cards use .ay-plan, not .product, so none of the
   older #products .product rules interfere).
   ============================================ */
#order-standard_cart .ay-plans {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 1.5rem;
  background: transparent !important;
}

#order-standard_cart .ay-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #091320EB, #040A14E0) !important;
  border: 1px solid var(--ayh-border) !important;
  border-radius: 1.375rem !important;
  padding: 2rem 1.75rem !important;
  color: var(--ayh-foreground) !important;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
#order-standard_cart .ay-plan:hover {
  border-color: var(--ayh-accent-1) !important;
  transform: translateY(-3px);
}
#order-standard_cart .ay-plan-popular {
  border-color: var(--ayh-accent-1) !important;
  box-shadow: 0 0 0 1px var(--ayh-accent-1), 0 24px 56px -24px rgba(2, 204, 242, 0.45);
}

#order-standard_cart .ay-plan-badge {
  position: absolute;
  top: -0.8rem;
  left: 1.75rem;
  background: linear-gradient(135deg, var(--ayh-accent-1), var(--ayh-accent-2)) !important;
  color: var(--ayh-background) !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
}

#order-standard_cart .ay-plan-name {
  font-family: var(--ayh-font-display, "Plus Jakarta Sans", sans-serif) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.35rem !important;
  color: var(--ayh-foreground) !important;
}
#order-standard_cart .ay-plan-qty,
#order-standard_cart .ay-plan-tagline {
  color: var(--ayh-muted) !important;
  font-size: 0.95rem;
  margin: 0 0 0.5rem !important;
}

#order-standard_cart .ay-plan-price {
  margin: 1rem 0 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.4rem;
}
#order-standard_cart .ay-plan-from {
  flex: 0 0 100%;
  color: var(--ayh-muted) !important;
  font-size: 0.85rem;
}
#order-standard_cart .ay-price-main {
  font-family: var(--ayh-font-display, "Plus Jakarta Sans", sans-serif) !important;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ayh-foreground) !important;
}
#order-standard_cart .ay-price-cycle {
  color: var(--ayh-muted) !important;
  font-size: 1rem;
}
#order-standard_cart .ay-price-setup {
  flex: 0 0 100%;
  color: var(--ayh-muted) !important;
}

/* "Total for the year, billed today" box */
#order-standard_cart .ay-plan-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--ayh-border);
  border-radius: 1rem;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
}
#order-standard_cart .ay-plan-total span {
  color: var(--ayh-muted) !important;
}
#order-standard_cart .ay-plan-total strong {
  color: var(--ayh-foreground) !important;
  white-space: nowrap;
}

/* Buttons */
#order-standard_cart .ay-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.95rem 1.25rem !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  text-decoration: none !important;
  margin-bottom: 1.25rem;
  transition: filter 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#order-standard_cart .ay-btn-primary,
#order-standard_cart .ay-btn-primary * {
  background: linear-gradient(135deg, var(--ayh-accent-1), var(--ayh-accent-2)) !important;
  color: var(--ayh-background) !important;
  border: none !important;
  box-shadow: 0 20px 48px -20px rgba(2, 204, 242, 0.55) !important;
}
#order-standard_cart .ay-btn-primary:hover {
  filter: brightness(1.06);
}
#order-standard_cart .ay-btn-outline {
  background: transparent !important;
  color: var(--ayh-foreground) !important;
  border: 1px solid var(--ayh-border) !important;
  box-shadow: none !important;
}
#order-standard_cart .ay-btn-outline:hover {
  border-color: var(--ayh-accent-1) !important;
  color: var(--ayh-accent-1) !important;
}

/* Feature rows */
#order-standard_cart .ay-plan-features {
  margin-top: auto;
  border-top: 1px solid var(--ayh-border);
  padding-top: 1rem;
}
#order-standard_cart .ay-features {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#order-standard_cart .ay-features li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.6rem 0;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
  font-size: 0.97rem;
}
#order-standard_cart .ay-features li + li {
  border-top: 1px solid rgba(33, 50, 67, 0.55) !important;
}
#order-standard_cart .ay-f-label {
  color: var(--ayh-muted) !important;
}
#order-standard_cart .ay-f-value {
  color: var(--ayh-foreground) !important;
  text-align: right;
  font-weight: 500;
  max-width: 60%;
}
/* Fallback shown only if the script cannot split the text */
#order-standard_cart .ay-features-raw {
  color: var(--ayh-muted) !important;
  font-size: 0.95rem;
  text-align: left;
  line-height: 1.7;
}