/*
 * Custom CSS for Nexus Cart Orderform
 *
 * This file allows you to customize the theme colors and styles for the Nexus Cart orderform.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --vl-primary: var(--zinc-900); use --vl-primary: #your-color;
 * - You can also override any CSS properties here.
 *
 * Note: Changes here will apply to the orderform's Shadow DOM.
 */

/* Add you custom styles here */
:host, :root {
    /* Primary colors */
    --vl-primary: var(--primary);
    --vl-primary-lifted: var(--primary-lifted);
    --vl-primary-accented: var(--primary-accented);

    /* Secondary colors */
    --vl-secondary: var(--secondary);
    --vl-secondary-lifted: var(--secondary-lifted);
    --vl-secondary-accented: var(--secondary-accented);

    /* Success colors */
    --vl-success: var(--success);
    --vl-success-lifted: var(--success-lifted);
    --vl-success-accented: var(--success-accented);

    /* Info colors */
    --vl-info: var(--info);
    --vl-info-lifted: var(--info-lifted);
    --vl-info-accented: var(--info-accented);

    /* Notice colors */
    --vl-notice: var(--notice);
    --vl-notice-lifted: var(--notice-lifted);
    --vl-notice-accented: var(--notice-accented);

    /* Warning colors */
    --vl-warning: var(--warning);
    --vl-warning-lifted: var(--warning-lifted);
    --vl-warning-accented: var(--warning-accented);

    /* Error colors */
    --vl-error: var(--error);
    --vl-error-lifted: var(--error-lifted);
    --vl-error-accented: var(--error-accented);

    /* Grayscale colors */
    --vl-grayscale: var(--grayscale);
    --vl-grayscale-lifted: var(--grayscale-lifted);
    --vl-grayscale-accented: var(--grayscale-accented);

    /* Neutral colors */
    --vl-neutral: var(--neutral);
    --vl-neutral-lifted: var(--neutral-lifted);
    --vl-neutral-accented: var(--neutral-accented);

    /* Text neutral colors */
    --vl-text-inverted: var(--text-inverted);
    --vl-text-muted: var(--text-muted);
    --vl-text-lifted: var(--text-lifted);
    --vl-text-accented: var(--text-accented);
    --vl-text: var(--text);

    /* Border neutral colors */
    --vl-border-muted: var(--border-muted);
    --vl-border: var(--border);
    --vl-border-lifted: var(--border-lifted);
    --vl-border-accented: var(--border-accented);

    /* Background neutral colors */
    --vl-bg: var(--bg);
    --vl-bg-muted: var(--bg-muted);
    --vl-bg-lifted: var(--bg-lifted);
    --vl-bg-accented: var(--bg-accented);
    --vl-bg-inverted: var(--bg-inverted);

    /* Additional custom properties */
    /* Font Sizes */
    --vl-text-xs: var(--text-xs);
    --vl-text-sm: var(--text-sm);
    --vl-text-md: var(--text-md);
    --vl-text-lg: var(--text-lg);

    /* Spacing */
    --vl-outline-sm: var(--outline-sm);
    --vl-outline-md: var(--outline-md);
    --vl-outline-lg: var(--outline-lg);

    /* Rounding */
    --vl-rounding-sm: var(--rounding-sm);
    --vl-rounding-md: var(--rounding-md);
    --vl-rounding-lg: var(--rounding-lg);

    /* Other */
    --vl-letter-spacing: var(--letter-spacing);
    --vl-disabled-opacity: var(--disabled-opacity);
}

/* DCX presentation inside Nexus' supported Shadow DOM stylesheet. */
:host {
 --vl-primary:#b10d28; --vl-primary-lifted:#920b22; --vl-primary-accented:#76091b;
 --vl-text:#2f2f31; --vl-text-accented:#0f172b; --vl-text-muted:#526174;
 --vl-text-lifted:#526174; --vl-text-inverted:#fff;
 --vl-bg:#fff; --vl-bg-muted:#f8fafc; --vl-bg-lifted:#f8fafc;
 --vl-border:#cbd5e1; --vl-border-muted:#dce2e9;
 --vl-rounding-sm:4px; --vl-rounding-md:6px; --vl-rounding-lg:8px;
 font-family:inherit; color:#0f172b; font-size:15px; line-height:1.6;
}
:host [data-test="cart-item"] { border-radius:8px; padding:24px; background:#fff; border-color:#dce2e9; }
:host [data-test="cart-order-summary"] { width:100%; }
:host [data-test="cart-checkout-button"] { background:#b10d28; border-color:#b10d28; color:#fff; min-height:48px; border-radius:6px; }
:host [data-test="cart-checkout-button"]:hover { background:#920b22; border-color:#920b22; }
:host [data-test="cart-item-configure-link"], :host [data-test="cart-header-browse-link"] { color:#526174; text-underline-offset:3px; }
:host [data-test="cart-item-remove-button"] { color:#526174; min-width:44px; min-height:44px; }
:host [role="combobox"] { border-radius:6px; min-height:44px; background:#fff; }
:host .text-2xl { font-size:24px; line-height:1.35!important; font-weight:700; }
:host .text-xl { font-size:19px; line-height:1.4!important; }
:host button { transition:color 150ms,background-color 150ms,border-color 150ms; }
@media(min-width:768px) {
 :host [class~="md:w-3/5"] { width:calc(100% - 432px); padding-top:0; }
 :host [class~="md:w-2/5"] { width:400px; height:auto; position:sticky; top:24px; align-self:flex-start; border:1px solid #dce2e9; border-radius:8px; }
 :host [class~="md:w-2/5"] > div { padding:24px; overflow:visible; }
}
@media(max-width:767px) {
 :host [data-test="cart-item"] { padding:16px; }
 :host [class~="md:w-2/5"] { border:1px solid #dce2e9; border-radius:8px; }
 :host [class~="md:w-2/5"] > div { padding:20px; }
 :host .text-2xl { font-size:22px; }
 :host [data-test="cart-item"] .w-56 { width:100%; max-width:14rem; }
}

:host [data-test="cart-checkout-button"] { white-space:normal; font-size:15px; line-height:22px!important; height:auto; padding:12px 16px; overflow-wrap:anywhere; }
:host [data-test="cart-checkout-button"] svg { flex-shrink:0; }
:host [class~="md:w-2/5"] .justify-between > :last-child { flex-shrink:0; white-space:nowrap; }
:host [class~="md:w-2/5"] .flex-grow { flex-grow:0; }
@media (min-width:768px) and (max-width:1023px) {
 :host [class~="md:w-3/5"] { width:55%; }
 :host [class~="md:w-2/5"] { width:45%; }
 :host [class~="md:w-2/5"] > div { padding:16px; }
 :host [class~="md:w-2/5"] .justify-between { flex-wrap:wrap; gap:8px; }
}
/* Keep mobile confirmation below the totals rather than over the product list. */
@media(max-width:767px) {
 :host [data-test="cart-checkout-button"][class~="md:flex"] { display:flex!important;position:static;margin:20px 0 0; }
 :host [class~="md:hidden"]:has(> [data-test="cart-checkout-button"]) { display:none!important; }
}

/* WHMCS 9.1 Nexus offer panel only. Keep purchased items and their actions intact. */
:host([data-dcx-server-cart="1"]) .bg-accented:has([data-test="last-chance-billing-cycle-select-toggle"]) {display:none !important}

/* One native summary, without nested gray cards. The Nexus component owns its data/actions. */
:host [class~="md:w-2/5"] {background:#fff;color:#0f172b}
:host [class~="md:w-2/5"] > div {background:transparent;gap:20px}
:host [data-test="cart-order-summary"] .text-2xl {font-size:20px;line-height:28px!important}
:host [class~="md:w-2/5"] .rounded-large {border:0;border-radius:0;background:transparent;box-shadow:none}
:host [class~="md:w-2/5"] .rounded-large + .rounded-large {border-top:1px solid #dce2e9}
:host [class~="md:w-2/5"] [class~="md:sticky"] {position:static}
:host [class~="md:w-2/5"] .justify-between {gap:12px;font-variant-numeric:tabular-nums}
:host [class~="md:w-2/5"] .justify-between > :first-child {min-width:0;overflow-wrap:anywhere}

/* Nexus places its important padding utility in the utilities layer. */
@layer utilities {
 :host [class~="md:w-2/5"] .rounded-large {padding:0!important}
 :host [class~="md:w-2/5"] .rounded-large + .rounded-large {padding-top:16px!important}
}