/* ═══════════════════════════════════════════════════════════
   Pricing — tier cards, add-ons, billing-cycle toggle

   The configurator surface for a per-seat / per-role pricing funnel:
   role-tier cards (with permission bullets + a quantity stepper),
   add-on cards, and an annual/monthly cycle toggle with a savings
   badge. Pairs with stepper.css (quantities) and cart.css (the live
   Varukorg). Prices are content — drive them from your data.
   ═══════════════════════════════════════════════════════════ */

/* ── Billing-cycle toggle row ──
   Use the segmented control (toggles.css .tn-segmented) for Årsvis /
   Månadsvis, with a savings badge alongside. */
.tn-billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--tn-space-md);
    flex-wrap: wrap;
}

.tn-save-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--tn-success-light);
    color: var(--tn-success-text);
    font-size: var(--tn-font-size-xs);
    font-weight: 600;
}

/* ── Configurator layout — selections column + sticky cart ──
   Two columns on desktop (config | 360px cart), single column on
   narrower viewports where the cart flows below. */
.tn-config-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--tn-space-xl);
    align-items: start;
}

@media (max-width: 960px) {
    .tn-config-layout {
        grid-template-columns: 1fr;
        gap: var(--tn-space-lg);
    }
}

/* ── Product-picker tile (funnel step 1) ──
   A selectable card for "Välj produkt". Apply on a .tn-card (button or
   div); it adds the column layout + selectable behaviour. Selection
   state is .is-active, matching the tier/add-on convention. */
.tn-product-pick {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color var(--tn-transition), box-shadow var(--tn-transition), background var(--tn-transition);
}

.tn-product-pick:hover {
    border-color: var(--tn-accent);
    box-shadow: var(--tn-shadow-md);
}

.tn-product-pick.is-active {
    border-color: var(--tn-accent);
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.12);
    background: var(--tn-accent-light);
}

/* Name (short PRODUCT name — not the configurator header), value-prop, price.
   h3/p kept as aliases so existing markup still styles. */
.tn-product-pick h3,
.tn-product-pick-name {
    margin: 0;
    padding-right: 28px; /* clear the selected check */
    font-size: var(--tn-font-size-lg);
    font-weight: 700;
    color: var(--tn-text-primary);
}

.tn-product-pick p,
.tn-product-pick-desc {
    margin: 0;
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-secondary);
    line-height: 1.45;
}

.tn-product-pick-price {
    margin-top: auto;
    padding-top: var(--tn-space-sm);
    font-size: var(--tn-font-size-sm);
    font-weight: 600;
    color: var(--tn-text-primary);
    font-variant-numeric: tabular-nums;
}

.tn-product-pick-price small {
    font-weight: 400;
    color: var(--tn-text-muted);
}

/* Explicit selected affordance — a check that fills teal when active,
   so selection reads at a glance (not just the background tint). */
.tn-product-pick-check {
    position: absolute;
    top: var(--tn-space-md);
    right: var(--tn-space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--tn-border);
    color: transparent;
    font-size: 0.8rem;
    transition: all var(--tn-transition);
}

.tn-product-pick.is-active .tn-product-pick-check {
    background: var(--tn-accent);
    border-color: var(--tn-accent);
    color: #fff;
}

/* ── Tier grid ── */
.tn-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--tn-space-md);
}

/* ── Role-tier card ── */
.tn-tier {
    display: flex;
    flex-direction: column;
    background: var(--tn-bg-card);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius-lg);
    padding: var(--tn-space-lg);
    transition: border-color var(--tn-transition), box-shadow var(--tn-transition);
}

/* Selected — quantity > 0 */
.tn-tier.is-active {
    border-color: var(--tn-accent);
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.12);
}

/* Recommended tier */
.tn-tier--featured {
    border-color: var(--tn-accent);
}

/* Role icon slot — teal tile at the top of a tier card (counterpart to
   .tn-addon-icon). Bind a bootstrap-icon: bi-shield-lock / bi-person /
   bi-person-plus etc. */
.tn-tier-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin-bottom: var(--tn-space-sm);
    border-radius: var(--tn-radius);
    background: var(--tn-accent-light);
    color: var(--tn-accent);
    font-size: 1.15rem;
}

.tn-tier-badge {
    align-self: flex-start;
    margin-bottom: var(--tn-space-sm);
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--tn-accent);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tn-tier-name {
    font-size: var(--tn-font-size-lg);
    font-weight: 700;
    color: var(--tn-text-primary);
}

.tn-tier-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: var(--tn-space-sm) 0 2px;
}

.tn-tier-amount {
    font-size: var(--tn-font-size-2xl);
    font-weight: 800;
    color: var(--tn-text-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.tn-tier-period {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    font-weight: 500;
}

/* Secondary price note, e.g. monthly equivalent or 'Reg. 295 SEK engång' */
.tn-tier-fee {
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-secondary);
}

/* Permission bullets */
.tn-tier-perms {
    list-style: none;
    margin: var(--tn-space-md) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tn-space-sm);
    flex: 1;
}

.tn-tier-perms li {
    display: flex;
    align-items: flex-start;
    gap: var(--tn-space-sm);
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-secondary);
}

.tn-tier-perms li .bi {
    color: var(--tn-success);
    font-size: 0.95rem;
    margin-top: 1px;
    flex-shrink: 0;
}

/* Footer — quantity stepper aligned with a label */
.tn-tier-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tn-space-sm);
    margin-top: var(--tn-space-md);
    padding-top: var(--tn-space-md);
    border-top: 1px solid var(--tn-border-light);
}

.tn-tier-foot-label {
    font-size: var(--tn-font-size-sm);
    font-weight: 600;
    color: var(--tn-text-primary);
}

/* ── Add-on card — horizontal: icon · body · price · control ── */
.tn-addon {
    display: flex;
    align-items: center;
    gap: var(--tn-space-md);
    background: var(--tn-bg-card);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius-lg);
    padding: var(--tn-space-md) var(--tn-space-lg);
    transition: border-color var(--tn-transition), box-shadow var(--tn-transition);
}

.tn-addon.is-active {
    border-color: var(--tn-accent);
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.12);
}

.tn-addon-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--tn-radius);
    background: var(--tn-accent-light);
    color: var(--tn-accent);
    font-size: 1.2rem;
}

.tn-addon-body {
    flex: 1;
    min-width: 0;
}

.tn-addon-name {
    font-weight: 600;
    color: var(--tn-text-primary);
}

.tn-addon-desc {
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-secondary);
    line-height: 1.45;
}

.tn-addon-price {
    text-align: right;
    white-space: nowrap;
    font-size: var(--tn-font-size-sm);
    font-weight: 600;
    color: var(--tn-text-primary);
    font-variant-numeric: tabular-nums;
}

.tn-addon-price small {
    display: block;
    font-size: var(--tn-font-size-xs);
    font-weight: 400;
    color: var(--tn-text-muted);
}

.tn-addon-control {
    flex-shrink: 0;
}

/* Add/remove toggle for a no-quantity add-on (e.g. Uppstart) — a button
   instead of a stepper. Outline "Lägg till" by default; teal-filled
   "✓ Tillagd" when .is-added (toggle it together with .tn-addon.is-active). */
.tn-addon-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--tn-accent);
    border-radius: var(--tn-radius);
    background: transparent;
    color: var(--tn-accent);
    font: inherit;
    font-size: var(--tn-font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--tn-transition), color var(--tn-transition);
}

.tn-addon-add:hover {
    background: var(--tn-accent-light);
}

.tn-addon-add.is-added {
    background: var(--tn-accent);
    border-color: var(--tn-accent);
    color: #fff;
}

/* Add-on stacks on phones so the price/control don't crush the body */
@media (max-width: 560px) {
    .tn-addon {
        flex-wrap: wrap;
    }

    .tn-addon-body {
        flex-basis: calc(100% - 44px - var(--tn-space-md));
    }

    .tn-addon-price {
        text-align: left;
        margin-left: calc(44px + var(--tn-space-md));
    }

    .tn-addon-control {
        margin-left: auto;
    }
}