/* ═══════════════════════════════════════════════════════════
   Cart — live order summary (Varukorg)

   The running total for a configurator/checkout. Splits one-time
   charges (engångskostnad) from recurring licences (löpande licenser),
   highlights the "pay now" figure (0 SEK on a trial), and carries the
   trial note + legal footnotes. Sticky beside the configurator on
   desktop; flows below it on mobile. Numbers are content — recompute
   them live as selections change.
   ═══════════════════════════════════════════════════════════ */

.tn-cart {
    display: flex;
    flex-direction: column;
    background: var(--tn-bg-card);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius-lg);
    overflow: hidden;
}

/* Sticks beside a configurator column on desktop */
.tn-cart--sticky {
    position: sticky;
    top: var(--tn-space-lg);
}

.tn-cart-header {
    display: flex;
    align-items: center;
    gap: var(--tn-space-sm);
    padding: var(--tn-space-md) var(--tn-space-lg);
    border-bottom: 1px solid var(--tn-border);
    background: var(--tn-bg-page);
}

.tn-cart-header h3 {
    margin: 0;
    font-size: var(--tn-font-size-base);
    font-weight: 700;
    color: var(--tn-text-primary);
}

.tn-cart-header .bi {
    color: var(--tn-accent);
    font-size: 1.05rem;
}

/* Item-count badge in the header ("{n} st") */
.tn-cart-count {
    margin-left: auto;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--tn-accent-light);
    color: var(--tn-accent);
    font-size: var(--tn-font-size-xs);
    font-weight: 700;
}

.tn-cart-body {
    display: flex;
    flex-direction: column;
    gap: var(--tn-space-lg);
    padding: var(--tn-space-lg);
}

/* Empty state */
.tn-cart-empty {
    padding: var(--tn-space-lg);
    text-align: center;
    color: var(--tn-text-muted);
    font-size: var(--tn-font-size-sm);
}

/* ── Per-product grouping (multi-product cart) ──
   When one signup buys more than one product, wrap each product's lines in
   a .tn-cart-product with a .tn-cart-product-title; the Recurring/One-time
   .tn-cart-group-title sections then nest under it. Single-product carts
   skip this level entirely. */
.tn-cart-product + .tn-cart-product {
    margin-top: var(--tn-space-lg);
    padding-top: var(--tn-space-lg);
    border-top: 1px solid var(--tn-border);
}

.tn-cart-product-title {
    display: flex;
    align-items: center;
    gap: var(--tn-space-sm);
    margin-bottom: var(--tn-space-sm);
    font-size: var(--tn-font-size-sm);
    font-weight: 700;
    color: var(--tn-text-primary);
}

.tn-cart-product-title .bi {
    color: var(--tn-accent);
}

/* ── A grouped section (Engångskostnad / Licenser, löpande) ── */
.tn-cart-group-title {
    margin-bottom: var(--tn-space-sm);
    font-size: var(--tn-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tn-text-secondary);
}

/* Collapsible group — make the title a .tn-cart-group-toggle button with a
   chevron and put the lines in .tn-cart-group-body; toggle .is-open on the
   wrapping .tn-cart-group. */
.tn-cart-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tn-space-sm);
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tn-cart-chevron {
    color: var(--tn-text-muted);
    transition: transform var(--tn-transition);
}

.tn-cart-group.is-open .tn-cart-chevron {
    transform: rotate(180deg);
}

.tn-cart-group-body {
    display: none;
}

.tn-cart-group.is-open .tn-cart-group-body {
    display: block;
}

.tn-cart-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--tn-space-md);
    padding: 6px 0;
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-primary);
}

/* Line with an inline quantity stepper (.tn-stepper--sm) — centre-align so
   the control sits with the text. */
.tn-cart-line--editable {
    align-items: center;
}

.tn-cart-line-label {
    min-width: 0;
}

/* Secondary line under the label ("{rate}/mån · st · förvald") */
.tn-cart-line-sub {
    display: block;
    margin-top: 1px;
    font-size: var(--tn-font-size-xs);
    font-weight: 400;
    color: var(--tn-text-muted);
}

.tn-cart-line-qty {
    color: var(--tn-text-muted);
    font-variant-numeric: tabular-nums;
}

.tn-cart-line-price {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Secondary line (e.g. a per-seat reg-fee breakdown) */
.tn-cart-line--muted {
    padding: 2px 0;
    color: var(--tn-text-secondary);
    font-size: var(--tn-font-size-xs);
}

/* Per-group subtotal */
.tn-cart-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--tn-space-md);
    margin-top: var(--tn-space-sm);
    padding-top: var(--tn-space-sm);
    border-top: 1px solid var(--tn-border-light);
    font-weight: 600;
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-primary);
}

.tn-cart-subtotal-value {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Inline note under a subtotal, e.g. 'faktureras årsvis i förskott' */
.tn-cart-subtotal-note {
    margin-top: 2px;
    font-size: var(--tn-font-size-xs);
    font-weight: 400;
    color: var(--tn-text-muted);
}

/* ── Pay-now highlight ── the headline figure (0,00 SEK on a trial) ── */
.tn-cart-paynow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--tn-space-md);
    padding: var(--tn-space-md) var(--tn-space-lg);
    background: var(--tn-accent-light);
    border-top: 1px solid var(--tn-border);
}

.tn-cart-paynow-label {
    font-weight: 700;
    color: var(--tn-text-primary);
}

.tn-cart-paynow-value {
    font-size: var(--tn-font-size-xl);
    font-weight: 800;
    color: var(--tn-accent);
    letter-spacing: -0.01em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Trial note ── */
.tn-cart-trial {
    display: flex;
    align-items: center;
    gap: var(--tn-space-sm);
    padding: 10px var(--tn-space-lg);
    background: var(--tn-success-light);
    color: var(--tn-success-text);
    font-size: var(--tn-font-size-sm);
    font-weight: 500;
}

.tn-cart-trial .bi {
    font-size: 1rem;
}

/* ── Footer ── CTA + legal footnotes ── */
.tn-cart-foot {
    display: flex;
    flex-direction: column;
    gap: var(--tn-space-md);
    padding: var(--tn-space-lg);
}

.tn-cart-footnote {
    font-size: var(--tn-font-size-xs);
    line-height: 1.5;
    color: var(--tn-text-muted);
}

/* On narrow viewports the cart flows in document order (not sticky) */
@media (max-width: 960px) {
    .tn-cart--sticky {
        position: static;
    }
}

/* ── Mobile dock — sticky running-total bar ──
   On phones the full cart drops below the configurator, so the live total
   isn't visible while picking seats. Render a .tn-cart-dock alongside the
   cart: it's hidden on desktop and becomes a fixed bottom bar ≤960px,
   keeping the running total (and a Continue/expand action) in view.
   Pair with bottom padding on the page body so it never covers content
   (the funnel shell does this for .tn-funnel-body). */
.tn-cart-dock {
    display: none;
}

.tn-cart-dock-total {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.tn-cart-dock-label {
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
}

.tn-cart-dock-value {
    font-size: var(--tn-font-size-lg);
    font-weight: 800;
    color: var(--tn-text-primary);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 960px) {
    .tn-cart-dock {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--tn-space-md);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        padding: 10px var(--tn-page-pad-x);
        background: var(--tn-bg-card);
        border-top: 1px solid var(--tn-border);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    }

    .tn-cart-dock .tn-btn {
        flex-shrink: 0;
    }
}