/*
 * Custom CSS for the SB2026 order form (Nexus Cart based)
 * -------------------------------------------------------------------------
 * 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 follow the serverbuilds.nl 2026 design: dark surfaces, green accent
 * (#649900), sharp corners. The client area theme (templates/sb2026) defines
 * the same palette in css/custom.css.
 */

:host, :root {
    /* Primary: serverbuilds green */
    --vl-primary: #649900;
    --vl-primary-lifted: #76b312;
    --vl-primary-accented: #558200;

    /* Secondary colors */
    --vl-secondary: #8a8a84;
    --vl-secondary-lifted: #b8b8b2;
    --vl-secondary-accented: #c9c9c3;

    /* Success colors */
    --vl-success: #649900;
    --vl-success-lifted: #76b312;
    --vl-success-accented: #8fce2e;

    /* Info colors */
    --vl-info: #3b8fd1;
    --vl-info-lifted: #4f9fdc;
    --vl-info-accented: #2f78b3;

    /* Notice colors */
    --vl-notice: #9b7bff;
    --vl-notice-lifted: #ad92ff;
    --vl-notice-accented: #8460f5;

    /* Warning colors */
    --vl-warning: #e0a052;
    --vl-warning-lifted: #f0c27a;
    --vl-warning-accented: #c98a3c;

    /* Error colors */
    --vl-error: #e05252;
    --vl-error-lifted: #f08080;
    --vl-error-accented: #c43c3c;

    /* Grayscale colors */
    --vl-grayscale: #232323;
    --vl-grayscale-lifted: #2c2c2c;
    --vl-grayscale-accented: #3a3a3a;

    /* Neutral colors */
    --vl-neutral: #8a8a84;
    --vl-neutral-lifted: #b8b8b2;
    --vl-neutral-accented: #c9c9c3;

    /* Text neutral colors: light on dark */
    --vl-text-inverted: #161616;
    --vl-text-muted: #8a8a84;
    --vl-text-lifted: #b8b8b2;
    --vl-text-accented: #c9c9c3;
    --vl-text: #e8e8e4;

    /* Border neutral colors */
    --vl-border-muted: #232323;
    --vl-border: #2c2c2c;
    --vl-border-lifted: #3a3a3a;
    --vl-border-accented: #4a4a4a;

    /* Background neutral colors: dark surfaces */
    --vl-bg: #1c1c1c;
    --vl-bg-muted: #1a1a1a;
    --vl-bg-lifted: #232323;
    --vl-bg-accented: #2c2c2c;
    --vl-bg-inverted: #e8e8e4;

    /* Font Sizes */
    --vl-text-xs: var(--text-xs, 0.625rem);
    --vl-text-sm: var(--text-sm, 0.75rem);
    --vl-text-md: var(--text-md, 0.875rem);
    --vl-text-lg: var(--text-lg, 1rem);

    /* Spacing */
    --vl-outline-sm: var(--outline-sm, 1px);
    --vl-outline-md: var(--outline-md, 2px);
    --vl-outline-lg: var(--outline-lg, 3px);

    /* Rounding: the design uses sharp corners */
    --vl-rounding-sm: 0;
    --vl-rounding-md: 0;
    --vl-rounding-lg: 0;

    /* Other */
    --vl-letter-spacing: var(--letter-spacing, 0em);
    --vl-disabled-opacity: var(--disabled-opacity, 25%);
}

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

/* The billing-cycle / domain-term dropdowns (the only .w-56 elements in the
   cart) 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). */
.sb-discount-amount {
    color: #f08080 !important;
}

/* Addon upsell "add" button inside cart item cards: the bundle renders an
   icon-only 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). viewcart.tpl
   injects the language-correct label at runtime as well. */
.justify-between > button.bg-primary.gap-0 svg {
    display: none;
}
.justify-between > button.bg-primary.gap-0::after {
    content: 'TOEVOEGEN';
    font-weight: 800;
    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). */
.sb-addon-details {
    margin-top: 3px;
}
.sb-addon-details-summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    font-weight: 700;
    color: #a9dcf9;
    user-select: none;
}
.sb-addon-details-summary::-webkit-details-marker {
    display: none;
}
.sb-addon-details-summary::after {
    content: '';
    width: 7px;
    height: 7px;
    border: solid #a9dcf9;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s;
}
.sb-addon-details[open] .sb-addon-details-summary::after {
    transform: rotate(-135deg) translateY(-2px);
}
.sb-addon-desc-lines {
    white-space: pre-line;
    font-size: 12px;
    line-height: 1.7;
    color: #b8b8b2;
    padding: 6px 0 2px;
    max-width: 52ch;
}