/**
 * License V2 builder — compact V1-inspired sidebar (self-service Corporate,
 * inline tier expansion). Premium dark panel, restrained borders, pink accent
 * reserved for the active state, links, and the primary CTA. No row icons; a
 * cleaner "License Option" feel with less microcopy than earlier iterations.
 */

.figuree-lb {
    /* Neutral charcoal palette — deliberately not plum. Pink is reserved for
       interaction accents, selected borders, links, and prices (aligned to the
       site's Figuree pink so the sidebar matches the V1 license list). */
    --lb-bg: #101012;
    --lb-raise: #17171a;
    --lb-surface: rgba(255, 255, 255, 0.02);
    --lb-surface-strong: rgba(255, 255, 255, 0.045);
    --lb-border: rgba(255, 255, 255, 0.07);
    --lb-text: #ffffff;
    --lb-muted: rgba(255, 255, 255, 0.45);
    --lb-accent: var(--figuree-primary, #f5478d);
    --lb-accent-soft: rgba(245, 71, 141, 0.1);
    --lb-accent-border: rgba(245, 71, 141, 0.6);
    --lb-ok: #46d19a;
    --lb-warn: #e6a24b;
    --lb-no: #ff6b81;

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 0 24px;
    color: var(--lb-text);
    font-size: 15px;
    line-height: 1.4;
}

.figuree-lb *,
.figuree-lb *::before,
.figuree-lb *::after {
    box-sizing: border-box;
}

/* Every vertical flex item in the sidebar can shrink below its content's
   intrinsic min-content width. Without this, a long inline tier label (e.g.
   "Starter — up to 50K followers / 1M impressions") forces the whole column
   wider than a narrow mobile viewport instead of ellipsis-clipping inside its
   row. */
.figuree-lb,
.figuree-lb__section,
.figuree-lb-row,
.figuree-lb-row__panel,
.figuree-lb-tierselect {
    min-width: 0;
}

/**
 * `hidden` is the single collapse authority (markup + JS). Several panels
 * carry `display:` rules with the same specificity as the UA `[hidden]` rule,
 * so this higher-specificity, `!important` reset keeps `hidden` authoritative
 * — a real collapse (display:none), never height clipping, and guarantees
 * collapsed panels never render at once.
 */
.figuree-lb [hidden] {
    display: none !important;
}

.figuree-lb__eyebrow {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lb-accent);
}

/* -------- License Option header (V1-style) --------------------------- */
.figuree-lb__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lb-border);
}

.figuree-lb__title {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--lb-text);
}

/* Restrained pink-outline pill — mirrors the V1 "What are these?" link so it
   never dominates the panel. */
.figuree-lb__help {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--lb-accent-border);
    color: var(--lb-accent);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.figuree-lb__help:hover {
    border-color: var(--lb-accent);
    transform: translateY(-1px);
}

/* -------- Row selection indicator ------------------------------------ */
.figuree-lb-row__indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
    transition: border-color 0.15s ease;
}

.figuree-lb-row.is-selected .figuree-lb-row__indicator {
    border-color: var(--lb-accent);
}

.figuree-lb-row.is-selected .figuree-lb-row__indicator::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--lb-accent);
}

/* -------- License Option / rows (clean V1-inspired stack) ------------ */
.figuree-lb__rows,
.figuree-lb__bundles-panel {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.figuree-lb-row {
    position: relative;
    border: 1px solid var(--lb-border);
    border-radius: 16px;
    background: var(--lb-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.figuree-lb-row:hover { background: var(--lb-surface-strong); border-color: rgba(255, 255, 255, 0.12); }

/* Clean pink outline when active — border only, no background tint, no glow. */
.figuree-lb-row.is-selected {
    border-color: var(--lb-accent-border);
}

.figuree-lb-row__head {
    width: 100%;
    appearance: none;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 14px 40px 14px 16px;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.figuree-lb-row__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.figuree-lb-row__name {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--lb-text);
}

.figuree-lb-row__tagline {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lb-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Large, bold, right-aligned Figuree-pink price — the V1 price hierarchy. */
.figuree-lb-row__price {
    justify-self: end;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--lb-accent);
    white-space: nowrap;
}

.figuree-lb-row__info {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--lb-muted);
    font-style: italic;
    font-weight: 700;
    cursor: pointer;
}

.figuree-lb-row__info:hover { color: var(--lb-accent); background: var(--lb-surface-strong); }

/* Desktop uses the hover card; the tap-info trigger is a mobile affordance. */
@media (hover: hover) and (pointer: fine) {
    .figuree-lb-row__info { display: none; }
    .figuree-lb-row__head { padding-right: 16px; }
}

/* Inline tier selector — sits inside the same card, aligned under the name
   (past the selection dot), so the active row reads as one integrated unit. */
.figuree-lb-row__panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 16px 14px 46px;
}

/* -------- Custom tier selector -----------------------------------------
 * Replaces the native <select> look everywhere a tier is chosen (license
 * rows, Standard's Adjust-limits fields). The real <select> stays in the
 * DOM as a headless value-store (hidden, still driving every existing
 * change-listener) — this is purely the presentation + open/close layer.
 */
.figuree-lb-tierselect {
    position: relative;
    max-width: 100%;
}

.figuree-lb-tierselect__native {
    display: none;
}

.figuree-lb-tierselect__trigger {
    appearance: none;
    width: 100%;
    max-width: 100%;
    /* Grid (not flex) with a minmax(0,1fr) label column: this reliably zeroes
       the nowrap label's min-content so a long tier name (e.g. "Starter — up to
       50K followers / 1M impressions") ellipsis-clips inside the row instead of
       forcing the whole sidebar column wider than a narrow mobile viewport. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--lb-text);
    border: 1px solid var(--lb-border);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.figuree-lb-tierselect__trigger:hover {
    background: rgba(255, 255, 255, 0.06);
}

.figuree-lb-tierselect.is-open .figuree-lb-tierselect__trigger,
.figuree-lb-tierselect__trigger:focus-visible {
    border-color: var(--lb-accent-border);
    outline: none;
}

.figuree-lb-tierselect__value {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.figuree-lb-tierselect__chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--lb-muted);
    border-bottom: 1.5px solid var(--lb-muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.figuree-lb-tierselect.is-open .figuree-lb-tierselect__chevron {
    transform: rotate(-135deg);
}

/*
 * Portaled to <body> on enhance (see enhanceTierSelect) so it is never
 * clipped or mis-positioned by a sidebar/product-panel ancestor with
 * overflow or a transform — the same class of bug the coverage hover card
 * hit earlier. Because it leaves .figuree-lb, every --lb-* token its
 * children reference (option text, the active/selected accent) is
 * redeclared directly here rather than relied on via inheritance.
 */
.figuree-lb-tierselect__panel {
    --lb-text: #ffffff;
    --lb-accent: var(--figuree-primary, #f5478d);
    --lb-accent-soft: rgba(245, 71, 141, 0.12);

    position: fixed;
    z-index: 500;
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(23, 23, 25, 0.92);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    font-size: 15px;
}

.figuree-lb-tierselect__panel *,
.figuree-lb-tierselect__panel *::before,
.figuree-lb-tierselect__panel *::after {
    box-sizing: border-box;
}

.figuree-lb-tierselect__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--lb-text);
    cursor: pointer;
    line-height: 1.35;
}

.figuree-lb-tierselect__option:hover,
.figuree-lb-tierselect__option:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    outline: none;
}

.figuree-lb-tierselect__option.is-active {
    color: var(--lb-accent);
    background: var(--lb-accent-soft);
}

.figuree-lb-tierselect__option-label {
    flex: 1 1 auto;
    min-width: 0;
    /* Long tier labels wrap cleanly inside the open panel — only the
       collapsed trigger truncates to a single line. */
    white-space: normal;
    word-break: break-word;
}

.figuree-lb-tierselect__option-check {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    opacity: 0;
}

.figuree-lb-tierselect__option.is-active .figuree-lb-tierselect__option-check {
    opacity: 1;
}

.figuree-lb-tierselect__option.is-active .figuree-lb-tierselect__option-check::after {
    content: "";
    display: block;
    width: 6px;
    height: 10px;
    margin: 1px auto 0 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(40deg);
}

/* -------- Desktop hover card ------------------------------------------
 * Charcoal semi-frosted glass — deliberately neutral grey, not the sidebar's
 * plum surface, with a restrained border and a soft (non-glowing) shadow.
 *
 * `position: fixed` with JS-computed top/left (see positionHovercard) makes
 * this a true viewport-relative floating popover: it is portaled to
 * <body> on first use so no ancestor's overflow/transform can clip it, and
 * its coordinates are clamped against window.innerWidth/innerHeight rather
 * than tied to document flow — the earlier `position: absolute` + a single
 * flow-relative `top` was the root cause of the card running past the
 * bottom of the viewport on lower rows. max-height/overflow below keep tall
 * content scrolling internally instead of spilling off-screen.
 *
 * Because the portal moves this element to <body>, it can no longer inherit
 * the --lb-* design tokens or the box-sizing reset from its .figuree-lb
 * ancestor — every token the card (and buildCoverage's markup) references is
 * redeclared here so the card's colors/sizing never depend on where in the
 * DOM it currently lives.
 */
.figuree-lb-hovercard {
    --lb-bg: #101012;
    --lb-text: #ffffff;
    --lb-muted: rgba(255, 255, 255, 0.45);
    --lb-border: rgba(255, 255, 255, 0.07);
    --lb-accent: var(--figuree-primary, #f5478d);
    --lb-accent-soft: rgba(245, 71, 141, 0.12);
    --lb-ok: #46d19a;
    --lb-warn: #e6a24b;
    --lb-no: #ff6b81;
    --lb-glass-bg: rgba(23, 23, 25, 0.82);
    --lb-glass-border: rgba(255, 255, 255, 0.12);

    position: fixed;
    width: 340px;
    max-width: min(340px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px;
    border: 1px solid var(--lb-glass-border);
    border-radius: 16px;
    background: var(--lb-glass-bg);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    color: var(--lb-text);
    font-size: 0.86em;
    line-height: 1.4;
    z-index: 9999;
    pointer-events: none;
}

.figuree-lb-hovercard *,
.figuree-lb-hovercard *::before,
.figuree-lb-hovercard *::after {
    box-sizing: border-box;
}

/* -------- Coverage content (hover card + modal) -----------------------
 * Shared by the desktop hover card and the mobile bottom-sheet modal so both
 * surfaces render identical, Core-sourced content.
 */
.figuree-lb-coverage__header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--lb-border);
    min-height: 76px;
}

.figuree-lb-coverage__icon-tile {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--lb-accent-soft);
    color: var(--lb-accent);
}

.figuree-lb-coverage__heading {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
}

.figuree-lb-coverage__title {
    margin: 0 0 4px;
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1.2;
}

.figuree-lb-coverage__desc {
    margin: 0;
    color: var(--lb-muted);
    line-height: 1.4;
    /* Normalizes every license's description to ~2 visual lines so the
       header height stays consistent across license types. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.figuree-lb-coverage__group {
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--lb-border);
}

.figuree-lb-coverage__group:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.figuree-lb-coverage h5 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    font-size: 0.92em;
    font-weight: 700;
}

.figuree-lb-coverage__group-icon,
.figuree-lb-coverage__item-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.figuree-lb-coverage__group--included h5,
.figuree-lb-coverage__group--included .figuree-lb-coverage__group-icon,
.figuree-lb-coverage__group--included .figuree-lb-coverage__item-icon { color: var(--lb-ok); }
.figuree-lb-coverage__group--requires h5,
.figuree-lb-coverage__group--requires .figuree-lb-coverage__group-icon,
.figuree-lb-coverage__group--requires .figuree-lb-coverage__item-icon { color: var(--lb-warn); }
.figuree-lb-coverage__group--prohibited h5,
.figuree-lb-coverage__group--prohibited .figuree-lb-coverage__group-icon,
.figuree-lb-coverage__group--prohibited .figuree-lb-coverage__item-icon { color: var(--lb-no); }

.figuree-lb-coverage__group-icon { border: 1.5px solid currentColor; }

.figuree-lb-coverage ul { list-style: none; margin: 0; padding: 0; }

.figuree-lb-coverage li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 6px 0;
    color: var(--lb-text);
    line-height: 1.35;
}

.figuree-lb-coverage__item-icon { margin-top: 0.1em; }

.figuree-lb-coverage__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--lb-border);
    color: var(--lb-muted);
    font-size: 0.85em;
}

.figuree-lb-coverage__footer-icon {
    flex: 0 0 auto;
    display: inline-flex;
    opacity: 0.7;
}

/* -------- Bundles ---------------------------------------------------- */
.figuree-lb__bundles-toggle {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--lb-surface);
    border: 1px solid var(--lb-border);
    border-radius: 10px;
    padding: 11px 14px;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
}

.figuree-lb__bundles-toggle:hover { background: var(--lb-surface-strong); }

.figuree-lb__bundles-gift {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--lb-accent-soft);
    color: var(--lb-accent);
}

.figuree-lb__bundles-title { flex: 1 1 auto; font-weight: 600; }

.figuree-lb-row__chevron {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--lb-muted);
    border-top: 1.5px solid var(--lb-muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.figuree-lb__bundles-toggle[aria-expanded="true"] .figuree-lb-row__chevron { transform: rotate(-135deg); }

.figuree-lb__bundles-panel { margin-top: 6px; }
.figuree-lb-row--bundle .figuree-lb-row__head { padding-right: 12px; }

/* -------- Messages / loading ----------------------------------------- */
.figuree-lb__messages { color: #ff8fb4; font-size: 0.85em; }
.figuree-lb__messages:empty { display: none; }
.figuree-lb__loading { font-size: 0.85em; color: var(--lb-muted); margin-bottom: 8px; }

/**
 * Applied to a row/card price or the summary total the instant a tier or
 * selection change fires, before the preview response arrives. The number
 * stays exactly where it is (no layout shift) — only opacity pulses — so the
 * UI reads as "updating" rather than sitting stale with no feedback.
 */
@keyframes figuree-lb-price-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.85; }
}

.is-pricing-updating {
    animation: figuree-lb-price-pulse 0.9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .is-pricing-updating {
        animation: none;
        opacity: 0.6;
    }
}

/* -------- Purchase summary (Total) ----------------------------------- *
 * One clean V1-style block: a light divider from the bundles above, an
 * optional restrained saving row, then a dominant "Total" line — large white
 * label on the left, larger white amount on the right. No "Your License"
 * heading, no subtotal unless there is a real discount, no line items.        */
.figuree-lb__summary {
    border-top: 1px solid var(--lb-border);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.figuree-lb__subtotal-row,
.figuree-lb__savings {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9em;
}

.figuree-lb__subtotal-row { color: var(--lb-muted); }
.figuree-lb__savings { color: var(--lb-accent); font-weight: 600; }

.figuree-lb__total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 2px;
}

.figuree-lb__total-label {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--lb-text);
}

/* The single most prominent number in the sidebar — large, bold, white. */
.figuree-lb__total-row [data-figuree-lb-total-row] {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--lb-text);
}

/* -------- CTA (stacked Add to Cart + secondary Buy Now — no quantity) - */
.figuree-lb__cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.figuree-lb__cart {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* Secondary Buy Now — full width, same height/radius as Add to Cart but a
   restrained dark/neutral outlined style so it never competes with the pink
   primary. The arrow hints it proceeds to checkout. */
.figuree-lb__buy-now {
    appearance: none;
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--lb-border);
    border-radius: 12px;
    background: var(--lb-surface);
    color: var(--lb-text);
    font-size: 0.9rem;
    font-weight: 700;
    /* !important to win over WooCommerce/theme button resets, matching the
       Add to Cart treatment. */
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.figuree-lb__buy-now:hover { background: var(--lb-surface-strong); border-color: rgba(255, 255, 255, 0.18); }
.figuree-lb__buy-now:focus-visible { outline: none; border-color: var(--lb-accent-border); }
.figuree-lb__buy-now:disabled { opacity: 0.45; cursor: not-allowed; }
.figuree-lb__buy-now-arrow { font-size: 1.05em; line-height: 1; }

/* Dominant primary action — solid Figuree pink, white uppercase label. The
   !important flags are required to win over WooCommerce core's
   higher-specificity button styles (which otherwise force a muted fill,
   text-transform:none, and radius:3px), mirroring how the theme's own .button
   rule already uses !important to override WooCommerce. --lb-accent resolves to
   the site/per-product Figuree pink. */
.figuree-lb__add {
    flex: 1 1 auto;
    width: auto !important;
    appearance: none;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 0 18px !important;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    cursor: pointer;
    background: var(--lb-accent) !important;
    box-shadow: 0 8px 22px rgba(245, 71, 141, 0.26);
    transition: filter 0.15s ease;
}

.figuree-lb__add:hover { filter: brightness(1.06); }

.figuree-lb__add:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; filter: none; }

/* -------- Coverage modal / bottom sheet ------------------------------- */
.figuree-lb-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.figuree-lb-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }

.figuree-lb-modal__sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    max-height: 82vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 22px;
    background: rgba(23, 23, 25, 0.92);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    color: var(--lb-text);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px 18px 0 0;
}

.figuree-lb-modal__close {
    position: absolute;
    top: 12px;
    right: 14px;
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--lb-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

@media (min-width: 769px) {
    .figuree-lb-modal { align-items: center; }
    .figuree-lb-modal__sheet { border-radius: 18px; }
}

/* -------- Mobile ------------------------------------------------------- */
@media (max-width: 768px) {
    .figuree-lb__cta {
        position: sticky;
        bottom: 0;
        z-index: 20;
        padding: 12px 0;
        background: var(--lb-bg);
        border-top: 1px solid var(--lb-border);
        box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.35);
    }
}