/*
 * Custom CSS Child Theme
 *
 * This template is a child theme override for the custom CSS in WHMCS. It provides a custom design and layout for various elements, including a multi-step form and an informational slider.
 *
 * @package      templates\orderforms\nexus_cart\css\custom.css
 * @version      3.4.1
 * @since        2026-06-12
 * @modified     2026-06-15
 * @author       Héctor Enrique Rojas Cano <hrojas@herc-solutions.com>
 * @link         https://herc-solutions.com
 * @copyright    Copyright (c) 2025 HERC Solutions LLC
 * @license      Proprietary - All Rights Reserved
 *
 * @whmcsVersion 9.0.4 (9.0.4-release.1)
 * @themeParent  standard_cart
 */

/* =============================================
   HERC tokens mapped to Nexus/Vueless variables
   ============================================= */
:host,
:root {
    color-scheme: dark;

    --herc-nexus-brand: var(--herc-primary, #4f46e5);
    --herc-nexus-brand-hover: var(--herc-primary-hover, #4338ca);
    --herc-nexus-brand-strong: #3730a3;

    --herc-nexus-bg: var(--herc-dark-base, #000000);
    --herc-nexus-surface: var(--herc-dark-surface, #0b0b0d);
    --herc-nexus-surface-2: var(--herc-dark-surface-2, #17171b);
    --herc-nexus-surface-3: #1f2029;
    --herc-nexus-text: var(--herc-dark-text, #c4c5c7);
    --herc-nexus-heading: var(--herc-dark-heading, #ffffff);
    --herc-nexus-muted: var(--herc-panel-text-muted, #94a3b8);
    --herc-nexus-border: var(--herc-dark-border, rgba(255, 255, 255, 0.08));
    --herc-nexus-border-strong: var(--herc-panel-header-border, rgba(255, 255, 255, 0.12));

    --herc-nexus-accent-bg: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.12));
    --herc-nexus-accent-border: var(--herc-panel-accent-border, rgba(79, 70, 229, 0.28));
    --herc-nexus-accent-text: var(--herc-panel-accent-text, #c7d2fe);
    --herc-nexus-accent-hover-bg: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18));
    --herc-nexus-accent-hover-border: var(--herc-panel-accent-hover-border, rgba(79, 70, 229, 0.36));
    --herc-nexus-accent-active-bg: var(--herc-panel-accent-active-bg, rgba(79, 70, 229, 0.22));
    --herc-nexus-accent-active-border: var(--herc-panel-accent-active-border, rgba(79, 70, 229, 0.40));

    --herc-nexus-shadow-sm: 0 12px 30px rgba(0, 0, 0, 0.26);
    --herc-nexus-shadow-md: 0 24px 70px rgba(0, 0, 0, 0.38);
    --herc-nexus-radius: 0.375rem;
    --herc-nexus-radius-lg: 0.5rem;
    --herc-nexus-control-height: 2.65rem;

    --vl-primary: var(--herc-nexus-accent-bg);
    --vl-primary-lifted: var(--herc-nexus-accent-hover-bg);
    --vl-primary-accented: var(--herc-nexus-accent-active-bg);
    --vl-secondary: #8b5cf6;
    --vl-secondary-lifted: #7c3aed;
    --vl-secondary-accented: #6d28d9;
    --vl-success: #10b981;
    --vl-success-lifted: #059669;
    --vl-success-accented: #047857;
    --vl-info: #06b6d4;
    --vl-info-lifted: #0891b2;
    --vl-info-accented: #0e7490;
    --vl-notice: #8b5cf6;
    --vl-notice-lifted: #7c3aed;
    --vl-notice-accented: #6d28d9;
    --vl-warning: #f59e0b;
    --vl-warning-lifted: #d97706;
    --vl-warning-accented: #b45309;
    --vl-error: #ef4444;
    --vl-error-lifted: #dc2626;
    --vl-error-accented: #b91c1c;
    --vl-grayscale: #94a3b8;
    --vl-grayscale-lifted: #cbd5e1;
    --vl-grayscale-accented: #e5e7eb;
    --vl-neutral: #94a3b8;
    --vl-neutral-lifted: #cbd5e1;
    --vl-neutral-accented: #e5e7eb;
    --vl-text-inverted: var(--herc-nexus-heading);
    --vl-text-muted: var(--herc-nexus-muted);
    --vl-text-lifted: var(--herc-nexus-text);
    --vl-text-accented: var(--herc-nexus-heading);
    --vl-text: var(--herc-nexus-text);
    --vl-border-muted: rgba(255, 255, 255, 0.055);
    --vl-border: var(--herc-nexus-border);
    --vl-border-lifted: var(--herc-nexus-border-strong);
    --vl-border-accented: var(--herc-nexus-accent-active-border);
    --vl-bg: var(--herc-nexus-surface);
    --vl-bg-muted: var(--herc-nexus-bg);
    --vl-bg-lifted: var(--herc-nexus-surface-2);
    --vl-bg-accented: var(--herc-nexus-surface-3);
    --vl-bg-inverted: var(--herc-nexus-surface);
    --vl-text-xs: 0.625rem;
    --vl-text-sm: 0.75rem;
    --vl-text-md: 0.875rem;
    --vl-text-lg: 1rem;
    --vl-outline-sm: 1px;
    --vl-outline-md: 2px;
    --vl-outline-lg: 3px;
    --vl-rounding-sm: 0.25rem;
    --vl-rounding-md: var(--herc-nexus-radius);
    --vl-rounding-lg: var(--herc-nexus-radius-lg);
    --vl-letter-spacing: 0;
    --vl-disabled-opacity: 35%;
}

:host-context([data-bs-theme="light"]) {
    color-scheme: light;

    --herc-nexus-bg: #f8fafc;
    --herc-nexus-surface: #ffffff;
    --herc-nexus-surface-2: #f1f5f9;
    --herc-nexus-surface-3: #e2e8f0;
    --herc-nexus-text: var(--herc-light-text, #334155);
    --herc-nexus-heading: var(--herc-light-heading, #111827);
    --herc-nexus-muted: var(--herc-light-muted, #6b7280);
    --herc-nexus-border: rgba(15, 23, 42, 0.12);
    --herc-nexus-border-strong: rgba(15, 23, 42, 0.18);
    --herc-nexus-accent-bg: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.10));
    --herc-nexus-accent-border: var(--herc-panel-accent-border, rgba(79, 70, 229, 0.22));
    --herc-nexus-accent-text: var(--herc-panel-accent-text, #3730a3);
    --herc-nexus-accent-hover-bg: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.16));
    --herc-nexus-accent-hover-border: var(--herc-panel-accent-hover-border, rgba(79, 70, 229, 0.30));
    --herc-nexus-accent-active-bg: var(--herc-panel-accent-active-bg, rgba(79, 70, 229, 0.20));
    --herc-nexus-accent-active-border: var(--herc-panel-accent-active-border, rgba(79, 70, 229, 0.34));
    --herc-nexus-shadow-sm: 0 12px 30px rgba(15, 23, 42, 0.08);
    --herc-nexus-shadow-md: 0 24px 70px rgba(15, 23, 42, 0.14);

    --vl-grayscale: #64748b;
    --vl-grayscale-lifted: #475569;
    --vl-grayscale-accented: #334155;
    --vl-neutral: #64748b;
    --vl-neutral-lifted: #475569;
    --vl-neutral-accented: #334155;
    --vl-text-inverted: var(--herc-nexus-heading);
    --vl-border-muted: rgba(15, 23, 42, 0.08);
    --vl-bg-inverted: var(--herc-nexus-surface);
}

/* Expand the cart body only when the sidebar is not rendered for logged-out visitors. */
#order-standard_cart.no-sidebar .cart-body {
    width: 100% !important;
    float: none !important;
}

/* #order-standard_cart.no-sidebar .cart-body {
    width: 100% !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
} */

/* ============================
   Base surfaces and typography
   ============================ */
:host,
.min-h-screen,
.UNotifyPage {
    background: var(--herc-nexus-bg) !important;
    color: var(--herc-nexus-text) !important;
}

:host-context(#order-standard_cart.no-sidebar),
:host(.herc-nexus-public),
:host-context(#order-standard_cart.no-sidebar) .min-h-screen,
:host-context(#order-standard_cart.no-sidebar) .UNotifyPage,
:host(.herc-nexus-public) .min-h-screen,
:host(.herc-nexus-public) .UNotifyPage {
    background: transparent !important;
}

:host-context(#order-standard_cart.no-sidebar) .p-4.mx-auto.min-h-screen.w-full.border,
:host(.herc-nexus-public) .p-4.mx-auto.min-h-screen.w-full.border {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

* {
    letter-spacing: 0 !important;
}

.rounded-4xl,
.rounded-large,
.rounded-medium,
.rounded-small {
    border-radius: var(--herc-nexus-radius) !important;
}

.text-default,
.text-accented,
.text-primary,
.font-semibold,
.font-bold,
h1,
h2,
h3,
h4 {
    color: var(--herc-nexus-heading) !important;
}

.text-lifted,
.text-muted,
.text-neutral,
.text-neutral-lifted,
label.text-lifted,
.group\/label.flex-row {
    color: var(--herc-nexus-muted) !important;
}

.bg-default,
.bg-white,
.bg-lifted {
    background-color: var(--herc-nexus-surface) !important;
}

.bg-muted,
.bg-accented {
    /* background-color: var(--herc-nexus-bg) !important; */
    background-color: var(--herc-dark-surface) !important;
}

.\!bg-inverted,
.bg-inverted {
    background-color: var(--vl-bg-inverted) !important;
    color: var(--vl-text-inverted) !important;
}

.border-default,
.border-muted,
.border-lifted {
    border-color: var(--herc-nexus-border) !important;
}

.border-transparent {
    border-color: transparent !important;
}

.p-4.mx-auto.min-h-screen.w-full.border {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* =============================================
   Buttons, links, icons, and interactive states
   ============================================= */
button,
a {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, opacity 160ms ease !important;
}

button.bg-primary,
button.\!bg-primary,
button.bg-default,
button.\!bg-default,
.sticky.bottom-\[50px\],
[class*="bottom-6"][class*="max-w"] button,
.\!bg-inverted button.\!bg-default {
    --background-color-default: var(--herc-nexus-accent-bg);
    --background-color-primary: var(--herc-nexus-accent-bg);
    --border-color-primary: var(--herc-nexus-accent-border);
    --text-color-primary: var(--herc-nexus-accent-text);
    --color-primary: var(--herc-nexus-accent-text);
    background-color: var(--herc-nexus-accent-bg) !important;
    border-color: var(--herc-nexus-accent-border) !important;
    color: var(--herc-nexus-accent-text) !important;
    font-weight: 700 !important;
}

button.bg-primary:hover,
button.bg-primary:focus,
button.\!bg-primary:hover,
button.\!bg-primary:focus,
button.bg-default:hover,
button.bg-default:focus,
button.\!bg-default:hover,
button.\!bg-default:focus,
[class*="bottom-6"][class*="max-w"] button:hover,
[class*="bottom-6"][class*="max-w"] button:focus {
    background-color: var(--herc-nexus-accent-hover-bg) !important;
    border-color: var(--herc-nexus-accent-hover-border) !important;
    color: var(--herc-nexus-accent-text) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--herc-nexus-accent-hover-border) 32%, transparent) !important;
}

button.bg-primary:active,
button.\!bg-primary:active,
button.bg-default:active,
button.\!bg-default:active {
    background-color: var(--herc-nexus-accent-active-bg) !important;
    border-color: var(--herc-nexus-accent-active-border) !important;
}

button:disabled,
button[disabled],
.cursor-not-allowed {
    opacity: 0.48 !important;
}

button.text-neutral-lifted:hover,
button.text-neutral-lifted:focus,
.hover\:text-primary-lifted:hover,
.hover\:text-lifted:hover {
    color: var(--herc-nexus-accent-text) !important;
}

/* Checkout buttons should read as primary commands, not ghost buttons. */
.sticky.bottom-\[50px\],
button[class*="sticky"][class*="bottom"] {
    background: var(--herc-nexus-heading) !important;
    border-color: var(--herc-nexus-heading) !important;
    color: var(--herc-nexus-bg) !important;
    box-shadow: var(--herc-nexus-shadow-sm) !important;
}

:host-context([data-bs-theme="dark"]) .sticky.bottom-\[50px\],
:host-context([data-bs-theme="dark"]) button[class*="sticky"][class*="bottom"] {
    background: var(--herc-nexus-accent-bg) !important;
    border-color: var(--herc-nexus-accent-border) !important;
    color: var(--herc-nexus-accent-text) !important;
}

/* =========================================
   Cards, panels, tables, and repeated items
   ========================================= */
.rounded-large.border,
/* .rounded-medium.border, */ /* HERC */
/* .border.border-solid, */ /* HERC */
.border.border-default,
.relative.border,
.py-3.px-4,
.py-3.px-4.bg-default,
.p-4.border,
.px-4.hover\:bg-lifted,
.rounded-large.px-4,
.rounded-medium.border.border-solid.border-default.bg-default {
    background: var(--herc-nexus-surface) !important;
    border-color: var(--herc-nexus-border) !important;
    color: var(--herc-nexus-text) !important;
}

.hover\:bg-lifted:hover,
.bg-default.hover\:bg-lifted:hover,
.px-4.hover\:bg-lifted:hover {
    background-color: var(--herc-nexus-surface-2) !important;
}

table,
.table,
[role="table"] {
    color: var(--herc-nexus-text) !important;
    border-color: var(--herc-nexus-border) !important;
}

thead,
th,
.\[\&\>tr\>\*\:first-child\]\:rounded-l-large,
.\[\&\>tr\>\*\:last-child\]\:rounded-r-large {
    background-color: var(--herc-nexus-surface) !important;
    color: var(--herc-nexus-heading) !important;
    border-color: var(--herc-nexus-border) !important;
}

tbody tr,
td {
    border-color: var(--herc-nexus-border) !important;
}

tbody tr:hover,
.bodyRow:hover {
    background-color: var(--herc-nexus-surface-2) !important;
}

/* Recommended TLD filter chips and badges. */
.rounded-small,
.rounded-medium[class*="bg-"],
.bg-primary\/10,
.bg-secondary\/10,
.bg-success\/10,
.bg-warning\/10,
.bg-error\/10 {
    border-color: var(--herc-nexus-accent-border) !important;
}

/* ===========================================
   Forms, selects, checkboxes, and focus rings
   =========================================== */
input,
textarea,
select,
.rounded-medium.border.border-solid.border-default.bg-default,
.flex.gap-3.w-full.relative.bg-default {
    background-color: var(--herc-nexus-surface) !important;
    border-color: var(--herc-nexus-border) !important;
    color: var(--herc-nexus-heading) !important;
}

input::placeholder,
textarea::placeholder,
#v-0::placeholder {
    color: var(--herc-nexus-muted) !important;
    opacity: 1 !important;
}

#v-0,
#v-0:focus {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--herc-nexus-heading) !important;
    outline: 0 !important;
}

.hover\:focus-within\:border-primary:hover,
.focus-within\:border-primary:focus-within,
.rounded-medium.border.border-solid.border-default.bg-default:focus-within,
.rounded-medium.border.border-solid.border-default.bg-default:hover,
.flex.gap-3.w-full.relative.bg-default:focus-within {
    border-color: var(--herc-nexus-accent-active-border) !important;
    outline-color: var(--herc-nexus-accent-hover-border) !important;
}

.outline-neutral-100,
.focus-within\:\!outline-neutral-100:focus-within {
    outline-color: var(--herc-nexus-accent-hover-border) !important;
}

.outline-8,
.focus-within\:\!outline-8:focus-within {
    outline-width: 1px !important;
}

input[type="checkbox"] {
    background-color: var(--herc-nexus-surface) !important;
    border: 1px solid var(--herc-nexus-border) !important;
    border-radius: 0.25rem !important;
}

input[type="checkbox"]:checked,
input[type="checkbox"]:active {
    background-color: var(--herc-nexus-brand) !important;
    border-color: var(--herc-nexus-brand) !important;
}

/* ====================
   Domain register page
   ==================== */
/* [data-test],
.container {
    max-width: 100%;
} */

.my-20 {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
}

/* Large search surface. */
.flex.p-4.items-center.justify-center,
.flex.gap-3.w-full.relative.bg-default {
    box-shadow: none !important;
}

.flex.gap-3.w-full.relative.bg-default {
    border-radius: var(--herc-nexus-radius-lg) !important;
    min-height: 4rem !important;
}

:host-context([data-bs-theme="light"]) .flex.gap-3.w-full.relative.bg-default {
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08) !important;
}

/* Cart strip shown on domain register. */
.\!bg-inverted,
.bg-inverted {
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

:host-context([data-bs-theme="dark"]) .\!bg-inverted,
:host-context([data-bs-theme="dark"]) .bg-inverted {
    background-color: var(--herc-nexus-surface) !important;
    border-color: var(--herc-nexus-border) !important;
    color: var(--herc-nexus-heading) !important;
}

/* ===================================
   View cart page and checkout summary
   =================================== */
.flex.flex-col.md\:flex-row,
.md\:w-3\/5,
.md\:w-2\/5 {
    background-color: transparent !important;
}

.md\:w-2\/5.bg-muted,
.pt-10.pb-6.px-8.w-full.md\:w-2\/5.bg-muted {
    background: var(--herc-nexus-bg) !important;
    border-left: 1px solid var(--herc-nexus-border) !important;
}

:host-context([data-bs-theme="light"]) .md\:w-2\/5.bg-muted,
:host-context([data-bs-theme="light"]) .pt-10.pb-6.px-8.w-full.md\:w-2\/5.bg-muted {
    background: #fbfbfd !important;
}

.py-6.w-full.md\:w-3\/5.bg-default {
    background: transparent !important;
}

.mb-4.max-w-1\/4 {
    max-width: 16rem !important;
}

/* Promo/tax tabs. */
.border-b,
.border-t,
.border-muted {
    border-color: var(--herc-nexus-border) !important;
}

/* =========================================
   Drawer, modal, overlay, and notifications
   ========================================= */
.fixed.inset-0,
[class*="fixed"][class*="inset-0"] {
    background-color: rgba(2, 6, 23, 0.58) !important;
    backdrop-filter: blur(2px) !important;
}

.fixed.right-0,
.fixed.top-0.right-0,
[class*="right-0"][class*="fixed"],
[class*="bottom-6"][class*="max-w"] {
    background: var(--herc-nexus-surface) !important;
    border-color: var(--herc-nexus-border) !important;
    color: var(--herc-nexus-text) !important;
    box-shadow: var(--herc-nexus-shadow-md) !important;
}

:host-context([data-bs-theme="dark"]) .fixed.right-0,
:host-context([data-bs-theme="dark"]) .fixed.top-0.right-0,
:host-context([data-bs-theme="dark"]) [class*="right-0"][class*="fixed"],
:host-context([data-bs-theme="dark"]) [class*="bottom-6"][class*="max-w"] {
    background: var(--herc-nexus-surface) !important;
}

.z-\[9999\],
.z-9999,
.z-\[99999\] {
    color: var(--herc-nexus-text) !important;
}

/* ==========
   Pagination
   ========== */
.w-full.justify-end.\-mt-5 {
    margin-top: 1.25rem !important;
}

.w-full.justify-end.\-mt-5 button,
.w-full.justify-end.\-mt-5 button.bg-default,
.w-full.justify-end.\-mt-5 button.\!bg-default {
    background-color: var(--herc-nexus-surface) !important;
    border-color: var(--herc-nexus-border) !important;
    color: var(--herc-nexus-text) !important;
    font-weight: 600 !important;
}

.w-full.justify-end.\-mt-5 button.bg-primary,
.w-full.justify-end.\-mt-5 button.\!bg-primary,
.w-full.justify-end.\-mt-5 button[aria-current="true"] {
    background-color: var(--herc-nexus-heading) !important;
    border-color: var(--herc-nexus-heading) !important;
    color: var(--herc-nexus-bg) !important;
}

:host-context([data-bs-theme="dark"]) .w-full.justify-end.\-mt-5 button.bg-primary,
:host-context([data-bs-theme="dark"]) .w-full.justify-end.\-mt-5 button.\!bg-primary,
:host-context([data-bs-theme="dark"]) .w-full.justify-end.\-mt-5 button[aria-current="true"] {
    background-color: var(--herc-nexus-accent-bg) !important;
    border-color: var(--herc-nexus-accent-border) !important;
    color: var(--herc-nexus-accent-text) !important;
}

.w-full.justify-end.\-mt-5 button:not(:disabled):not([disabled]):hover,
.w-full.justify-end.\-mt-5 button:not(:disabled):not([disabled]):focus {
    background-color: var(--herc-nexus-accent-hover-bg) !important;
    border-color: var(--herc-nexus-accent-hover-border) !important;
    color: var(--herc-nexus-accent-text) !important;
}

.w-full.justify-end.\-mt-5 button * {
    color: inherit !important;
}

/* =============================================================
   Targeted HERC refinements requested from register/viewcart QA
   ============================================================= */
:host,
:root {
    --herc-nexus-command-bg: var(--herc-nexus-accent-bg);
    --herc-nexus-command-border: var(--herc-nexus-accent-border);
    --herc-nexus-command-text: var(--herc-nexus-accent-text);
    --herc-nexus-command-hover-bg: var(--herc-nexus-accent-hover-bg);
    --herc-nexus-command-hover-border: var(--herc-nexus-accent-hover-border);
    --herc-nexus-command-active-bg: var(--herc-nexus-accent-active-bg);
    --herc-nexus-command-active-border: var(--herc-nexus-accent-active-border);
    --herc-nexus-register-cart-bg: var(--herc-nexus-surface);
    --herc-nexus-register-cart-text: var(--herc-nexus-heading);
    --herc-nexus-register-cart-border: var(--herc-nexus-border);
}

:host-context([data-bs-theme="light"]) {
    --herc-nexus-register-cart-bg: #ffffff;
    --herc-nexus-register-cart-text: var(--herc-nexus-heading);
    --herc-nexus-register-cart-border: var(--herc-nexus-border);
}

button.bg-primary,
button.\!bg-primary,
button[class*="bg-primary"],
.flex.gap-3.w-full.relative.bg-default button,
[class*="bottom-6"][class*="max-w"] button,
.fixed.right-0 button:last-child,
.fixed.top-0.right-0 button:last-child,
[class*="right-0"][class*="fixed"] button:last-child {
    --background-color-primary: var(--herc-nexus-command-bg);
    --background-color-default: var(--herc-nexus-command-bg);
    --border-color-primary: var(--herc-nexus-command-border);
    --text-color-primary: var(--herc-nexus-command-text);
    --color-primary: var(--herc-nexus-command-text);
    background-color: var(--herc-nexus-command-bg) !important;
    border-color: var(--herc-nexus-command-border) !important;
    color: var(--herc-nexus-command-text) !important;
    box-shadow: none !important;
}

button.bg-primary:hover,
button.bg-primary:focus,
button.\!bg-primary:hover,
button.\!bg-primary:focus,
button[class*="bg-primary"]:hover,
button[class*="bg-primary"]:focus,
.flex.gap-3.w-full.relative.bg-default button:hover,
.flex.gap-3.w-full.relative.bg-default button:focus,
[class*="bottom-6"][class*="max-w"] button:hover,
[class*="bottom-6"][class*="max-w"] button:focus,
.fixed.right-0 button:last-child:hover,
.fixed.right-0 button:last-child:focus,
.fixed.top-0.right-0 button:last-child:hover,
.fixed.top-0.right-0 button:last-child:focus,
[class*="right-0"][class*="fixed"] button:last-child:hover,
[class*="right-0"][class*="fixed"] button:last-child:focus {
    background-color: var(--herc-nexus-command-hover-bg) !important;
    border-color: var(--herc-nexus-command-hover-border) !important;
    color: var(--herc-nexus-command-text) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--herc-nexus-command-hover-border) 24%, transparent) !important;
}

button.bg-primary *,
button.\!bg-primary *,
button[class*="bg-primary"] *,
.flex.gap-3.w-full.relative.bg-default button *,
[class*="bottom-6"][class*="max-w"] button *,
.fixed.right-0 button:last-child *,
.fixed.top-0.right-0 button:last-child *,
[class*="right-0"][class*="fixed"] button:last-child * {
    color: inherit !important;
}

/* Bottom cart strip in domain register: dark in dark mode, calm card in light mode. */
div[class*="bottom-6"][class*="max-w"][class*="bg-default"],
div[class*="bottom-6"][class*="max-w"][class*="!bg-inverted"],
div[class*="bottom-6"][class*="max-w"][class*="text-inverted"] {
    background: var(--herc-nexus-register-cart-bg) !important;
    border-color: var(--herc-nexus-register-cart-border) !important;
    color: var(--herc-nexus-register-cart-text) !important;
    box-shadow: var(--herc-nexus-shadow-sm) !important;
}

div[class*="bottom-6"][class*="max-w"] .text-inverted,
div[class*="bottom-6"][class*="max-w"] [class*="text-inverted"] {
    color: var(--herc-nexus-register-cart-text) !important;
}

/* Recommended TLD chips should be soft filters, not primary calls to action. */
button[class*="border-default"][class*="bg-default"],
button[class*="rounded-medium"][class*="bg-default"][class*="border"] {
    background-color: var(--herc-nexus-surface) !important;
    border-color: var(--herc-nexus-border) !important;
    color: var(--herc-nexus-text) !important;
    font-weight: 600 !important;
}

button[class*="border-default"][class*="bg-default"]:hover,
button[class*="border-default"][class*="bg-default"]:focus,
button[class*="rounded-medium"][class*="bg-default"][class*="border"]:hover,
button[class*="rounded-medium"][class*="bg-default"][class*="border"]:focus {
    background-color: var(--herc-nexus-accent-bg) !important;
    border-color: var(--herc-nexus-accent-border) !important;
    color: var(--herc-nexus-accent-text) !important;
}

button[class*="border-default"][class*="bg-primary"] {
    background-color: var(--herc-nexus-command-bg) !important;
    border-color: var(--herc-nexus-command-border) !important;
    color: var(--herc-nexus-command-text) !important;
}

button.bg-primary:active,
button.\!bg-primary:active,
button[class*="bg-primary"]:active,
.flex.gap-3.w-full.relative.bg-default button:active,
div[class*="bottom-6"][class*="max-w"] button:active,
.fixed.right-0 button:last-child:active,
.fixed.top-0.right-0 button:last-child:active,
[class*="right-0"][class*="fixed"] button:last-child:active {
    background-color: var(--herc-nexus-command-active-bg) !important;
    border-color: var(--herc-nexus-command-active-border) !important;
    color: var(--herc-nexus-command-text) !important;
}

/* CTA precedence over generic bg-default chip/card button rules. */
.flex.gap-3.w-full.relative.bg-default button,
div[class*="bottom-6"][class*="max-w"] button,
.fixed.right-0 button:last-child,
.fixed.top-0.right-0 button:last-child,
[class*="right-0"][class*="fixed"] button:last-child {
    background-color: var(--herc-nexus-command-bg) !important;
    border-color: var(--herc-nexus-command-border) !important;
    color: var(--herc-nexus-command-text) !important;
    box-shadow: none !important;
}

.flex.gap-3.w-full.relative.bg-default button:hover,
.flex.gap-3.w-full.relative.bg-default button:focus,
div[class*="bottom-6"][class*="max-w"] button:hover,
div[class*="bottom-6"][class*="max-w"] button:focus,
.fixed.right-0 button:last-child:hover,
.fixed.right-0 button:last-child:focus,
.fixed.top-0.right-0 button:last-child:hover,
.fixed.top-0.right-0 button:last-child:focus,
[class*="right-0"][class*="fixed"] button:last-child:hover,
[class*="right-0"][class*="fixed"] button:last-child:focus {
    background-color: var(--herc-nexus-command-hover-bg) !important;
    border-color: var(--herc-nexus-command-hover-border) !important;
    color: var(--herc-nexus-command-text) !important;
}

.flex.gap-3.w-full.relative.bg-default button *,
div[class*="bottom-6"][class*="max-w"] button *,
.fixed.right-0 button:last-child *,
.fixed.top-0.right-0 button:last-child *,
[class*="right-0"][class*="fixed"] button:last-child * {
    color: inherit !important;
}

/* Keep the left cart list integrated with the page instead of painting a panel. */
.py-6.w-full.md\:w-3\/5.bg-default,
div[class*="py-6"][class*="w-full"][class*="md:w-3/5"][class*="bg-default"] {
    background: transparent !important;
}

/* Explicitly neutralize Vueless inverted utilities on the fixed register cart. */
div[class*="bottom-6"][class*="max-w"][class*="!bg-inverted"] {
    --vl-bg-inverted: var(--herc-nexus-register-cart-bg) !important;
    --vl-text-inverted: var(--herc-nexus-register-cart-text) !important;
    background: var(--herc-nexus-register-cart-bg) !important;
    background-color: var(--herc-nexus-register-cart-bg) !important;
    border-color: var(--herc-nexus-register-cart-border) !important;
    color: var(--herc-nexus-register-cart-text) !important;
}

div[class*="bottom-6"][class*="max-w"][class*="!bg-inverted"] [class*="text-inverted"] {
    --vl-text-inverted: var(--herc-nexus-register-cart-text) !important;
    color: var(--herc-nexus-register-cart-text) !important;
}

/* Paginations - HERC */
.w-full.justify-end.\-mt-5 button.bg-default,
.w-full.justify-end.\-mt-5 button.\!bg-default {
    --background-color-default: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.12));
    --background-color-primary: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.12));
    --background-color-primary-lifted: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18));
    --background-color-primary-accented: var(--herc-panel-accent-active-bg, rgba(79, 70, 229, 0.22));
    --border-color-primary: var(--herc-panel-accent-border, rgba(79, 70, 229, 0.28));
    --border-color-primary-lifted: var(--herc-panel-accent-hover-border, rgba(79, 70, 229, 0.36));
    --border-color-primary-accented: var(--herc-panel-accent-active-border, rgba(79, 70, 229, 0.40));
    --text-color-primary: var(--herc-panel-accent-text, #c7d2fe);
    --color-primary: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.12));
    --color-primary-lifted: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18));
    --color-primary-accented: var(--herc-panel-accent-active-bg, rgba(79, 70, 229, 0.22));
    background-color: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.12)) !important;
    border-color: var(--herc-panel-accent-border, rgba(79, 70, 229, 0.28)) !important;
    color: var(--herc-panel-accent-text, #c7d2fe) !important;
    font-weight: 600 !important;
}

.w-full.justify-end.\-mt-5 button.bg-primary,
.w-full.justify-end.\-mt-5 button.\!bg-primary,
.w-full.justify-end.\-mt-5 button:not(:disabled):not([disabled]):hover,
.w-full.justify-end.\-mt-5 button:not(:disabled):not([disabled]):focus,
.w-full.justify-end.\-mt-5 button.bg-default:hover,
.w-full.justify-end.\-mt-5 button.bg-default:focus,
.w-full.justify-end.\-mt-5 button.\!bg-default:hover,
.w-full.justify-end.\-mt-5 button.\!bg-default:focus,
.w-full.justify-end.\-mt-5 button[aria-current="true"] {
    --background-color-default: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18));
    --background-color-primary: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18));
    --background-color-primary-lifted: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18));
    --background-color-primary-accented: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18));
    --border-color-primary: var(--herc-panel-accent-hover-border, rgba(79, 70, 229, 0.36));
    --border-color-primary-lifted: var(--herc-panel-accent-hover-border, rgba(79, 70, 229, 0.36));
    --border-color-primary-accented: var(--herc-panel-accent-hover-border, rgba(79, 70, 229, 0.36));
    --color-primary: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18));
    --color-primary-lifted: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18));
    --color-primary-accented: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18));
    background-color: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18)) !important;
    border-color: var(--herc-panel-accent-hover-border, rgba(79, 70, 229, 0.36)) !important;
    border-style: solid !important;
    border-width: 1px !important;
    color: var(--herc-panel-accent-text, #c7d2fe) !important;
    font-weight: 600 !important;
}

.w-full.justify-end.\-mt-5 button:not(:disabled):not([disabled]):hover *,
.w-full.justify-end.\-mt-5 button[aria-current="true"] * {
    color: inherit !important;
}

.w-full.justify-end.\-mt-5 button[aria-current="true"] {
    box-shadow: inset 0 0 0 1px var(--herc-panel-accent-hover-border, rgba(79, 70, 229, 0.36)) !important;
}

/* Treat the fixed register cart as its own non-inverted variant. */
.fixed.bottom-6.\!bg-inverted,
div.fixed.bottom-6[class*="!bg-inverted"],
div[class*="fixed"][class*="bottom-6"][class*="max-w"][class*="!bg-inverted"] {
    --vl-bg-inverted: var(--herc-nexus-register-cart-bg) !important;
    --vl-text-inverted: var(--herc-nexus-register-cart-text) !important;
    background: var(--herc-nexus-register-cart-bg) !important;
    background-color: var(--herc-nexus-register-cart-bg) !important;
    background-image: none !important;
    border-color: var(--herc-nexus-register-cart-border) !important;
    color: var(--herc-nexus-register-cart-text) !important;
    box-shadow: var(--herc-nexus-shadow-sm) !important;
}

.fixed.bottom-6.\!bg-inverted [class*="text-inverted"],
div.fixed.bottom-6[class*="!bg-inverted"] [class*="text-inverted"],
div[class*="fixed"][class*="bottom-6"][class*="max-w"][class*="!bg-inverted"] [class*="text-inverted"] {
    --vl-text-inverted: var(--herc-nexus-register-cart-text) !important;
    color: var(--herc-nexus-register-cart-text) !important;
}

/* TLD recomendado seleccionado - estado real de Nexus */
button.flex.rounded-medium.bg-primary.text-inverted.\!bg-inverted.border.border-primary\/75.outline-primary\/75 {
    --vl-bg-inverted: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.12)) !important;
    --vl-text-inverted: var(--herc-panel-accent-text, #c7d2fe) !important;

    --color-primary: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.12)) !important;
    --color-primary-lifted: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18)) !important;
    --color-primary-accented: var(--herc-panel-accent-active-bg, rgba(79, 70, 229, 0.22)) !important;

    background: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.12)) !important;
    background-color: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.12)) !important;
    border-color: var(--herc-panel-accent-border, rgba(79, 70, 229, 0.28)) !important;
    outline-color: var(--herc-panel-accent-border, rgba(79, 70, 229, 0.28)) !important;
    color: var(--herc-panel-accent-text, #c7d2fe) !important;
}

button.flex.rounded-medium.bg-primary.text-inverted.\!bg-inverted.border.border-primary\/75.outline-primary\/75:hover,
button.flex.rounded-medium.bg-primary.text-inverted.\!bg-inverted.border.border-primary\/75.outline-primary\/75:focus {
    --vl-bg-inverted: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18)) !important;

    background: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18)) !important;
    background-color: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18)) !important;
    border-color: var(--herc-panel-accent-hover-border, rgba(79, 70, 229, 0.36)) !important;
    outline-color: var(--herc-panel-accent-hover-border, rgba(79, 70, 229, 0.36)) !important;
    color: var(--herc-panel-accent-text, #c7d2fe) !important;
}

/* Selected TLD chips: neutralize !bg-inverted through the actual Vueless tokens. */
button[class*="bg-primary"][class*="!bg-inverted"] {
    --vl-bg-inverted: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.12)) !important;
    --vl-text-inverted: var(--herc-panel-accent-text, #c7d2fe) !important;
    --background-color-inverted: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.12)) !important;
    --text-color-inverted: var(--herc-panel-accent-text, #c7d2fe) !important;
    --background-color-primary: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.12)) !important;
    --background-color-primary-lifted: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18)) !important;
    --background-color-primary-accented: var(--herc-panel-accent-active-bg, rgba(79, 70, 229, 0.22)) !important;
    --border-color-primary: var(--herc-panel-accent-border, rgba(79, 70, 229, 0.28)) !important;
    --border-color-primary-lifted: var(--herc-panel-accent-hover-border, rgba(79, 70, 229, 0.36)) !important;
    --border-color-primary-accented: var(--herc-panel-accent-active-border, rgba(79, 70, 229, 0.40)) !important;
    --color-primary: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.12)) !important;
    --color-primary-lifted: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18)) !important;
    --color-primary-accented: var(--herc-panel-accent-active-bg, rgba(79, 70, 229, 0.22)) !important;
    background-color: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.12)) !important;
    border-color: var(--herc-panel-accent-border, rgba(79, 70, 229, 0.28)) !important;
    outline-color: var(--herc-panel-accent-border, rgba(79, 70, 229, 0.28)) !important;
    color: var(--herc-panel-accent-text, #c7d2fe) !important;
}

button[class*="bg-primary"][class*="!bg-inverted"]:hover,
button[class*="bg-primary"][class*="!bg-inverted"]:focus {
    --vl-bg-inverted: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18)) !important;
    --background-color-inverted: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18)) !important;
    background-color: var(--herc-panel-accent-hover-bg, rgba(79, 70, 229, 0.18)) !important;
    border-color: var(--herc-panel-accent-hover-border, rgba(79, 70, 229, 0.36)) !important;
    outline-color: var(--herc-panel-accent-hover-border, rgba(79, 70, 229, 0.36)) !important;
    color: var(--herc-panel-accent-text, #c7d2fe) !important;
}

/* TLD sugeridos en 4 columnas desktop */
.flex.flex-col.w-full.gap-5.items-start.justify-start.content-start:has(> .flex.flex-row.flex-wrap .size-20) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
}

.flex.flex-col.w-full.gap-5.items-start.justify-start.content-start:has(> .flex.flex-row.flex-wrap .size-20) > .text-xl {
    grid-column: 1 / -1 !important;
}

.flex.flex-col.w-full.gap-5.items-start.justify-start.content-start:has(> .flex.flex-row.flex-wrap .size-20) > .flex.flex-row.flex-wrap {
    display: contents !important;
}

.flex.flex-col.w-full.gap-5.items-start.justify-start.content-start:has(> .flex.flex-row.flex-wrap .size-20) > .flex.flex-row.flex-wrap > .rounded-large {
    width: 100% !important;
}

/* TLD sugeridos - badge superior y logo */
.flex.flex-col.w-full.gap-5.items-start.justify-start.content-start:has(> .flex.flex-row.flex-wrap .size-20)
    > .flex.flex-row.flex-wrap
    > .rounded-large {
    overflow: visible !important;
}

.flex.flex-col.w-full.gap-5.items-start.justify-start.content-start:has(> .flex.flex-row.flex-wrap .size-20)
    > .flex.flex-row.flex-wrap
    > .rounded-large
    > .flex.flex-row
    > .absolute.top-0.left-6 {
    top: 0.75rem !important;
    left: 1rem !important;
    margin-top: 0 !important;
    border-radius: 0.375rem !important;
    background-color: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.12)) !important;
    border-color: var(--herc-panel-accent-border, rgba(79, 70, 229, 0.28)) !important;
    color: var(--herc-panel-accent-text, #c7d2fe) !important;
    box-shadow: none !important;
}

.flex.flex-col.w-full.gap-5.items-start.justify-start.content-start:has(> .flex.flex-row.flex-wrap .size-20)
    > .flex.flex-row.flex-wrap
    > .rounded-large
    > .flex.flex-row {
    margin-top: 2rem !important;
}

/* TLD sugeridos - fondo del logo DARK */
:host-context([data-bs-theme="dark"])
.flex.flex-col.w-full.gap-5.items-start.justify-start.content-start:has(> .flex.flex-row.flex-wrap .size-20)
    .size-20 {
    background-color: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.12)) !important;
    border: 1px solid var(--herc-panel-accent-border, rgba(79, 70, 229, 0.28)) !important;
}

/* TLD sugeridos - fondo del logo LIGHT */
:host-context([data-bs-theme="light"])
.flex.flex-col.w-full.gap-5.items-start.justify-start.content-start:has(> .flex.flex-row.flex-wrap .size-20)
    .size-20 {
    background-color: var(--herc-panel-accent-bg, rgba(79, 70, 229, 0.10)) !important;
    border: 1px solid var(--herc-panel-accent-border, rgba(79, 70, 229, 0.22)) !important;
}

/* TLD sugeridos - fondo del logo LIGHT */
:host-context([data-bs-theme="light"])
.flex.flex-col.w-full.gap-5.items-start.justify-start.content-start:has(> .flex.flex-row.flex-wrap .size-20)
    .size-20 {
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* =================
   Responsive polish
   ================= */
@media (max-width: 767.98px) {
    .p-4.mx-auto.min-h-screen.w-full.border {
        padding: 1rem !important;
    }

    .flex.gap-3.w-full.relative.bg-default {
        min-height: 0 !important;
    }

    .md\:w-2\/5.bg-muted,
    .pt-10.pb-6.px-8.w-full.md\:w-2\/5.bg-muted {
        border-left: 0 !important;
        border-top: 1px solid var(--herc-nexus-border) !important;
    }

    .sticky.bottom-\[50px\] {
        left: 1rem !important;
        right: 1rem !important;
        width: calc(100% - 2rem) !important;
    }
}

/* TLD sugeridos en 4 columnas desktop */
@media (max-width: 1199.98px) {
    .flex.flex-col.w-full.gap-5.items-start.justify-start.content-start:has(> .flex.flex-row.flex-wrap .size-20) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    .flex.flex-col.w-full.gap-5.items-start.justify-start.content-start:has(> .flex.flex-row.flex-wrap .size-20) {
        grid-template-columns: 1fr !important;
    }
}