/*
 * Custom CSS for Nexus Cart Orderform — Etheron 2026
 * -------------------------------------------------------------------------
 * The cart view (cart.php?a=view) is the Nexus Cart SPA. It is themed entirely
 * through these CSS custom properties, applied inside its Shadow DOM via :host.
 *
 * Values below are set to the Etheron brand (teal #0c94ab). Previously they
 * inherited the theme's --primary, which is still Bootstrap blue (#007bff),
 * so the cart rendered off-brand. Adjust the hex values here to tweak.
 */

:host, :root {
    /* Primary — Etheron teal */
    --vl-primary: #0c94ab;
    --vl-primary-lifted: #2aa6bb;
    --vl-primary-accented: #0a7a8f;

    /* 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 — Etheron dark ink */
    --vl-text-inverted: #ffffff;
    --vl-text-muted: #7a8584;
    --vl-text-lifted: #565f5e;
    --vl-text-accented: #1f2625;
    --vl-text: #343e3d;

    /* Border neutral colors — subtle */
    --vl-border-muted: #eef0f0;
    --vl-border: #e2e6e6;
    --vl-border-lifted: #d4d9d9;
    --vl-border-accented: #c4cbca;

    /* Background neutral colors — clean white surfaces */
    --vl-bg: #ffffff;
    --vl-bg-muted: #f4f6f6;
    --vl-bg-lifted: #fafbfb;
    --vl-bg-accented: #eceff0;
    --vl-bg-inverted: #343e3d;

    /* 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 — brand rounded corners */
    --vl-rounding-sm: 6px;
    --vl-rounding-md: 10px;
    --vl-rounding-lg: 16px;

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

/* Use the site font inside the cart's Shadow DOM (font-family inherits to
   shadow children unless a component overrides it). */
:host {
    font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* The billing-cycle / domain-term dropdowns (the only .w-56 elements in the
   cart) now show the per-month price and discount in each option, e.g.
   "Jaarlijks — €2,50/mnd (-20%)" — give them room to render untruncated. */
.w-56 {
    width: 20rem;
    max-width: 100%;
}

/* Modals (e.g. the remove-item confirmation) use Tailwind z-50/z-40, which
   loses to the theme's sticky header — lift them above it and anchor the
   dialog near the top of the viewport. */
.fixed.inset-0.z-50 {
    z-index: 5000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.fixed.inset-0.z-40 {
    z-index: 4990;
}
/* The mini-cart drawer sits at z-999/998 — lift it above the header too. */
.z-\[999\] {
    z-index: 5010;
}
.z-\[998\] {
    z-index: 5005;
}

/* Discount amounts in the cart totals: red + negative (the bundle prefixes
   the minus sign and adds this class to negative amounts). */
.etheron-discount-amount {
    color: #d6336c !important;
}

/* Addon upsell "add" button inside cart item cards: the bundle renders an
   icon-only teal button (cart glyph, no label). Replace the glyph with the
   label TOEVOEGEN. Selector: the only icon-only solid-primary button in the
   upsell row (bg-primary + gap-0, inside a justify-between row). */
.justify-between > button.bg-primary.gap-0 svg {
    display: none;
}
.justify-between > button.bg-primary.gap-0::after {
    content: 'TOEVOEGEN';
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .4px;
}
/* English sites get ADD (host page's <html lang> is set by header.tpl;
   :host-context is supported in Chromium, Dutch stays the fallback). */
:host-context(html[lang="en"]) .justify-between > button.bg-primary.gap-0::after {
    content: 'ADD';
}

/* Addon description dropdown inside cart item cards (native <details>,
   injected by the bundle patches from the store's addon data). */
.etheron-addon-details {
    margin-top: 3px;
}
.etheron-addon-details-summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    font-weight: 500;
    color: #0c94ab;
    user-select: none;
}
.etheron-addon-details-summary::-webkit-details-marker {
    display: none;
}
.etheron-addon-details-summary::after {
    content: '';
    width: 7px;
    height: 7px;
    border: solid #0c94ab;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s;
}
.etheron-addon-details[open] .etheron-addon-details-summary::after {
    transform: rotate(-135deg) translateY(-2px);
}
.etheron-addon-desc-lines {
    white-space: pre-line;
    font-size: 12px;
    line-height: 1.7;
    color: #607466;
    padding: 6px 0 2px;
    max-width: 52ch;
}