/* ================================================================
   MemberBadge — SCMUIKit component styles
   Four modes: Full (admin dialogs), Compact (kiosk/payment),
   Inline (search results), Welcome (BookNow greeting, kiosk lookup).

   ONE COMPONENT, TWO HOSTS
   ------------------------
   * Website-display modules (BookNow, Shop, MyAccount) link this file
     directly and carry the theme bridge's `--scm-*` tokens on `.scm-mod`.
     There the badge must paint in the OPERATOR'S brand — the accent the
     site theme sets, or the one the module's own Theme settings override
     inline (ModuleThemeStyle writes --scm-accent / -contrast / --scm-surface /
     --scm-surface-contrast / --scm-surface-elevated / --scm-border there).
   * AdminShell and the kiosk load it through the SCMUIKit.css bundle, where
     only the `--simx-*` admin palette exists — and flips for dark theme.

   Every colour therefore resolves `--scm-*` first, `--simx-*` second and a
   literal last, through the `--mb-*` layer below. The previous version painted
   a fixed gold gradient with hardcoded olive ink on every surface, so a
   green-branded venue's booking wizard opened with a yellow box that belonged
   to no theme, and the admin dark theme kept the light-mode ink.

   DERIVED TINTS LIVE IN THE @supports BLOCK
   -----------------------------------------
   An unsupported color-mix() is invalid at computed-value time: it does NOT
   fall through to the var() fallback, it unsets the whole declaration. The
   base tier must therefore stand on its own, and every mix is an upgrade.
   ================================================================ */

/* ─── Token layer ─────────────────────────────────────────────── */

.scm-member-badge {
    --mb-card: var(--scm-surface-elevated, var(--simx-bg-raised, #ffffff));
    --mb-ink: var(--scm-surface-contrast, var(--simx-text-primary, #1c2b3a));
    --mb-ink-secondary: var(--scm-text-secondary, var(--simx-text-secondary, #55697d));
    --mb-ink-muted: var(--scm-text-muted, var(--simx-text-tertiary, #607080));

    --mb-accent: var(--scm-accent, var(--simx-accent, #2563eb));
    --mb-border: var(--scm-border, var(--simx-border-default, #dee2e6));

    /* Semantics stay semantic on the admin surfaces that scan them for meaning.
       The customer-facing Welcome card deliberately does not use them: a green
       and a blue stat beside a branded accent is three hues on one card. */
    --mb-success: var(--scm-success, var(--simx-success-text, #0f5132));
    --mb-info: var(--scm-info, var(--simx-info-text, #055160));

    /* Neutral stand-ins for the accent tints below. Neutral rather than a pale
       blue on purpose — a literal blue would clash with a red or green brand on
       the browsers that never reach the @supports block. */
    --mb-wash: var(--mb-card);
    --mb-hairline: var(--mb-border);
    --mb-chip-bg: var(--simx-bg-sunken, #f0f2f5);
    --mb-chip-border: var(--mb-border);
    --mb-chip-ink: var(--mb-accent);
    --mb-crest-bg: var(--simx-bg-sunken, #f0f2f5);
    --mb-crest-ring: none;

    --mb-radius-sm: var(--simx-radius-md, 0.375rem);
    --mb-radius-md: var(--simx-radius-lg, 0.5rem);
    --mb-radius-lg: var(--simx-radius-xl, 0.75rem);
    --mb-radius-pill: 999px;

    --mb-shadow: var(--simx-shadow-sm, 0 1px 2px rgba(15, 23, 32, 0.06));

    font-family: var(--scm-font-sans, inherit);
}

/* Corner style follows the SITE theme's own radius, but only on the storefront —
   scoped to `.scm-mod` for the same reason the theme bridge is. A venue theme
   with `--border-radius: 16px` would otherwise put one pill-shaped card in the
   middle of admin chrome that is uniformly 6px. */
.scm-mod .scm-member-badge {
    --mb-radius-md: var(--border-radius, 0.5rem);
    --mb-radius-lg: var(--border-radius, 0.75rem);
}

@supports (color: color-mix(in srgb, red 50%, blue 50%)) {
    .scm-member-badge {
        /* A whisper of the brand, not a wash of it: enough to lift the card off
           the page as "yours" without competing with the content on it. */
        --mb-wash: color-mix(in srgb, var(--mb-accent) 6%, var(--mb-card));
        --mb-hairline: color-mix(in srgb, var(--mb-accent) 24%, var(--mb-border));

        --mb-chip-bg: color-mix(in srgb, var(--mb-accent) 10%, var(--mb-card));
        --mb-chip-border: color-mix(in srgb, var(--mb-accent) 26%, transparent);
        --mb-crest-bg: color-mix(in srgb, var(--mb-accent) 12%, var(--mb-card));
        --mb-crest-ring: 0 0 0 1px color-mix(in srgb, var(--mb-accent) 24%, transparent);

        /* Ink is the accent pulled toward the surface's own ink, so it darkens on a
           light card and lightens on a dark one. The accent used RAW as ink on its
           own tint measures 3.1:1 for this venue's emerald and 2.9:1 for amber —
           the operator picks the colour, so the badge has to stay legible whichever
           one it is. 38% over a 10% tint is the pairing that clears 4.5:1 for every
           light accent tested (emerald, amber, cyan, lime, yellow: 4.52–5.07) while
           still reading as the brand rather than as grey. */
        --mb-chip-ink: color-mix(in srgb, var(--mb-accent) 38%, var(--mb-ink));

        --mb-shadow: 0 1px 2px color-mix(in srgb, var(--mb-ink) 6%, transparent),
                     0 6px 16px color-mix(in srgb, var(--mb-ink) 5%, transparent);
    }
}

/* ─── Shared ──────────────────────────────────────────────────── */

.scm-member-badge__icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: var(--mb-chip-ink);
}

.scm-member-badge__plan {
    font-weight: 600;
    color: var(--mb-ink);
}

/* The verified mark: one glyph, used at three sizes, in place of the emoji star
   the three compact modes used to carry. An emoji renders in the platform's own
   colours and cannot be themed at all. */
.scm-member-badge__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--mb-chip-ink);
    line-height: 1;
}

/* ─── Full Mode (Admin dialogs) ───────────────────────────────── */

.scm-member-badge--full {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--mb-radius-md);
    background: var(--mb-wash);
    border: 1px solid var(--mb-hairline);
}

.scm-member-badge--full .scm-member-badge__mark {
    font-size: 1.125rem;
    margin-top: 0.05rem;
}

.scm-member-badge--full .scm-member-badge__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.scm-member-badge--full .scm-member-badge__header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem 0.5rem;
    font-size: 0.875rem;
}

.scm-member-badge--full .scm-member-badge__details {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    font-size: 0.75rem;
    color: var(--mb-ink-secondary);
}

.scm-member-badge--full .scm-member-badge__number {
    font-family: var(--simx-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.01em;
    color: var(--mb-ink-muted);
}

.scm-member-badge--full .scm-member-badge__entitlements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-weight: 600;
}

.scm-member-badge--full .scm-member-badge__credit,
.scm-member-badge--full .scm-member-badge__guest-pass {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.4rem;
    border-radius: var(--mb-radius-sm);
    font-size: 0.7rem;
    background: var(--simx-success-bg, #e8f6ed);
    color: var(--mb-success);
}

.scm-member-badge--full .scm-member-badge__guest-pass {
    background: var(--simx-info-bg, #e7f3fb);
    color: var(--mb-info);
}

/* ─── Compact Mode (Kiosk / Payment dialogs) ──────────────────── */

.scm-member-badge--compact {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--mb-radius-pill);
    background: var(--mb-chip-bg);
    border: 1px solid var(--mb-chip-border);
    font-size: 0.85rem;
    color: var(--mb-ink);
    line-height: 1.35;
}

.scm-member-badge--compact .scm-member-badge__icon {
    font-size: 0.9rem;
}

.scm-member-badge--compact .scm-member-badge__credits-compact {
    display: inline-flex;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.125rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--mb-chip-border);
    color: var(--mb-ink-secondary);
}

/* ─── Inline Mode (Search results) ────────────────────────────── */

.scm-member-badge--inline {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.45rem;
    border-radius: var(--mb-radius-pill);
    background: var(--mb-chip-bg);
    border: 1px solid var(--mb-chip-border);
    font-size: 0.7rem;
    color: var(--mb-chip-ink);
    vertical-align: middle;
    margin-left: 0.375rem;
    white-space: nowrap;
}

.scm-member-badge--inline .scm-member-badge__icon {
    font-size: 0.65rem;
}

.scm-member-badge--inline .scm-member-badge__plan {
    color: inherit;
    font-size: 0.7rem;
}

/* ─── Welcome Mode (BookNow greeting, kiosk lookup) ───────────── */

.scm-member-badge--welcome {
    display: flex;
    flex-direction: column;
    border-radius: var(--mb-radius-lg);
    background: var(--mb-wash);
    border: 1px solid var(--mb-hairline);
    box-shadow: var(--mb-shadow);
    overflow: hidden;
    text-align: left;
    animation: scm-member-badge-rise 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.scm-member-badge__welcome-head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    min-width: 0;
}

/* The crest replaces the 2.5rem emoji star. A monogram is the one piece of
   identity the badge already has that reads as "this is your account" rather
   than as decoration, and it inherits the brand instead of being gold.

   Tinted rather than filled with the accent, for two reasons: it echoes the
   booking wizard's own category tiles, whose icons sit on the same soft accent
   square; and a filled crest would have to take its ink from the theme's
   --contrast-color, which is chosen for the site's buttons and lands at 2.5:1
   against a light accent like this venue's emerald. */
.scm-member-badge__crest {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--mb-radius-pill);
    background: var(--mb-crest-bg);
    box-shadow: var(--mb-crest-ring);
    color: var(--mb-chip-ink);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    user-select: none;
}

.scm-member-badge__crest-check {
    position: absolute;
    right: -0.15rem;
    bottom: -0.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mb-radius-pill);
    background: var(--mb-wash);
    box-shadow: 0 0 0 0.125rem var(--mb-wash);
    color: var(--mb-chip-ink);
    font-size: 0.9rem;
    line-height: 1;
}

.scm-member-badge__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    min-width: 0;
    flex: 1;
}

.scm-member-badge__welcome-title {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--mb-ink);
    overflow-wrap: anywhere;
}

.scm-member-badge__plan-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.1rem 0.55rem;
    border-radius: var(--mb-radius-pill);
    background: var(--mb-chip-bg);
    border: 1px solid var(--mb-chip-border);
    color: var(--mb-chip-ink);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Entitlements sit on their own band rather than beside the name: the booking
   wizard's column is 520px, and a member with both credits and guest passes
   would otherwise crush the greeting into two words. */
.scm-member-badge__welcome-entitlements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.25rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--mb-hairline);
    background: var(--mb-card);
}

.scm-member-badge__perk {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--mb-ink-secondary);
}

.scm-member-badge__perk .scm-member-badge__mark {
    font-size: 0.8rem;
}

.scm-member-badge__perk-count {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mb-ink);
    font-variant-numeric: tabular-nums;
}

@keyframes scm-member-badge-rise {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scm-member-badge--welcome {
        animation: none;
    }
}

/* Narrow phones: the greeting keeps the crest, the perks stack. */
@media (max-width: 380px) {
    .scm-member-badge__welcome-head {
        gap: 0.625rem;
        padding: 0.75rem 0.75rem;
    }

    .scm-member-badge__crest {
        width: 2.375rem;
        height: 2.375rem;
        font-size: 0.85rem;
    }

    .scm-member-badge__welcome-title {
        font-size: 1rem;
    }

    .scm-member-badge__welcome-entitlements {
        flex-direction: column;
        gap: 0.375rem;
        padding: 0.625rem 0.75rem;
    }
}