/* =========================================================================
   LoyaltyHub – front styles
   Two distinct namespaces:
     .loyaltyhub-*  legacy hook templates (balance, rewards list, etc.)
     .lh-*          new floating widget (FAB + slide-in panel)
   ========================================================================= */

/* ─── Legacy hook blocks ────────────────────────────────────────────────── */

.loyaltyhub-block { color: #1f2937; }

.loyaltyhub-card {
    border: 1px solid #d9dee7;
    border-radius: 8px;
    padding: 16px;
    background: #fff;
}

.loyaltyhub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.loyaltyhub-balance-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.loyaltyhub-muted { color: #667085; }
.loyaltyhub-hidden { display: none; }


/* =========================================================================
   FLOATING WIDGET (FAB + slide-in panel)
   ========================================================================= */

.lh-floating {
    --lh-brand: #6366f1;
    --lh-brand-soft: color-mix(in srgb, var(--lh-brand) 12%, white);
    --lh-fg: #0f172a;
    --lh-fg-muted: #64748b;
    --lh-bg: #ffffff;
    --lh-surface: #f8fafc;
    --lh-border: #e2e8f0;
    --lh-shadow: 0 24px 60px -15px rgba(15, 23, 42, 0.25), 0 12px 24px -12px rgba(15, 23, 42, 0.15);
    --lh-radius: 18px;
    --lh-radius-sm: 12px;

    position: fixed;
    inset: auto 20px 20px auto;
    z-index: 99990;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--lh-fg);
    line-height: 1.4;
}

/* Browsers that don't support color-mix get a hard-coded soft tint */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .lh-floating { --lh-brand-soft: rgba(99, 102, 241, 0.12); }
}


/* ─── FAB button ────────────────────────────────────────────────────────── */

.lh-fab {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--lh-brand) 0%, color-mix(in srgb, var(--lh-brand) 70%, #000) 100%);
    color: #fff;
    box-shadow: var(--lh-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease;
    padding: 0;
}

.lh-fab:hover { transform: scale(1.06); }
.lh-fab:active { transform: scale(0.96); }
.lh-fab:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--lh-brand) 50%, white);
    outline-offset: 3px;
}

.lh-fab__icon {
    display: inline-flex;
    width: 26px;
    height: 26px;
}
.lh-fab__icon svg { width: 100%; height: 100%; }

.lh-fab__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f43f5e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(244, 63, 94, 0.4);
    border: 2px solid #fff;
    line-height: 1;
}

/* Hide FAB while panel is open */
.lh-floating.is-open .lh-fab {
    transform: scale(0.5);
    opacity: 0;
    pointer-events: none;
}


/* ─── Backdrop ─────────────────────────────────────────────────────────── */

.lh-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 240ms ease;
    z-index: 99989;
}
.lh-floating.is-open .lh-backdrop { opacity: 1; }


/* ─── Panel ────────────────────────────────────────────────────────────── */

.lh-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 40px);
    background: var(--lh-bg);
    border-radius: var(--lh-radius);
    box-shadow: var(--lh-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    transform: scale(0.9) translateY(8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
    z-index: 99991;
}

.lh-floating.is-open .lh-panel {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.lh-panel[hidden] { display: flex; } /* override [hidden] when JS toggles */


/* ─── Panel header ─────────────────────────────────────────────────────── */

.lh-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--lh-brand) 0%, color-mix(in srgb, var(--lh-brand) 75%, #000) 100%);
    color: #fff;
    flex-shrink: 0;
}

.lh-panel__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.lh-panel__brand-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.lh-panel__brand-icon svg { width: 100%; height: 100%; }

.lh-panel__title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0;
}

.lh-panel__close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
    padding: 0;
}
.lh-panel__close:hover { background: rgba(255, 255, 255, 0.28); }
.lh-panel__close svg { width: 16px; height: 16px; }


/* ─── Panel body ───────────────────────────────────────────────────────── */

.lh-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lh-panel__body::-webkit-scrollbar { width: 8px; }
.lh-panel__body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}


/* ─── Balance hero ─────────────────────────────────────────────────────── */

.lh-balance {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--lh-brand-soft);
    border-radius: var(--lh-radius-sm);
}

.lh-balance__main { display: flex; flex-direction: column; min-width: 0; }
.lh-balance__value {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    color: var(--lh-brand);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.lh-balance__label {
    font-size: 12px;
    color: var(--lh-fg-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.lh-balance__meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.lh-balance__meta-label {
    font-size: 11px;
    color: var(--lh-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.lh-balance__meta-value {
    font-size: 16px;
    color: var(--lh-fg);
    font-variant-numeric: tabular-nums;
}


/* ─── Tier progression ────────────────────────────────────────────────── */

.lh-tier {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lh-tier__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.lh-tier__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lh-surface);
    border: 1px solid var(--lh-border);
    border-radius: 999px;
    padding: 4px 10px 4px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--lh-fg);
}

.lh-tier__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lh-tier-color, var(--lh-brand));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lh-tier-color, var(--lh-brand)) 20%, transparent);
}

.lh-tier__hint {
    font-size: 11px;
    color: var(--lh-fg-muted);
}
.lh-tier__hint strong { color: var(--lh-fg); font-weight: 700; }

.lh-tier__bar {
    height: 6px;
    background: var(--lh-surface);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.lh-tier__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--lh-tier-color, var(--lh-brand)), color-mix(in srgb, var(--lh-tier-color, var(--lh-brand)) 70%, var(--lh-brand)));
    border-radius: 999px;
    transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* ─── Tabs ─────────────────────────────────────────────────────────────── */

.lh-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background: var(--lh-surface);
    border-radius: var(--lh-radius-sm);
    padding: 4px;
}

.lh-tab {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    border: none;
    background: transparent;
    color: var(--lh-fg-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
    font-size: 11px;
    font-weight: 600;
}
.lh-tab svg { width: 18px; height: 18px; }
.lh-tab:hover { color: var(--lh-fg); }

.lh-tab.is-active {
    background: #fff;
    color: var(--lh-brand);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.lh-tab-panel { display: none; }
.lh-tab-panel.is-active { display: block; }
.lh-tab-panel[hidden] { display: none; }


/* ─── List items ──────────────────────────────────────────────────────── */

.lh-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.lh-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--lh-border);
    border-radius: var(--lh-radius-sm);
    background: #fff;
    transition: border-color 150ms ease, transform 150ms ease;
}
.lh-list__item:hover { border-color: var(--lh-brand); }
.lh-list__item.is-locked { opacity: 0.6; }

.lh-list__icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--lh-brand-soft);
    color: var(--lh-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lh-list__icon svg { width: 18px; height: 18px; }

.lh-list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.lh-list__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--lh-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.lh-list__sub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.lh-list__locked {
    font-size: 10px;
    color: #b91c1c;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lh-pill {
    display: inline-flex;
    align-items: center;
    background: var(--lh-brand-soft);
    color: var(--lh-brand);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
    gap: 4px;
}
.lh-pill--success {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}
.lh-pill--done {
    background: rgba(16, 185, 129, 0.18);
    color: #047857;
}
.lh-pill--done svg { width: 11px; height: 11px; }
.lh-list__item.is-done { background: rgba(16, 185, 129, 0.04); border-color: rgba(16, 185, 129, 0.18); }
.lh-list__item.is-done .lh-list__icon { background: rgba(16, 185, 129, 0.12); color: #047857; }
.lh-list__item.is-done .lh-list__title { color: var(--lh-fg-muted); }

.lh-list__cta {
    flex-shrink: 0;
    border: none;
    background: var(--lh-brand);
    color: #fff;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease, transform 100ms ease;
    white-space: nowrap;
}
.lh-list__cta:hover:not(:disabled) {
    background: color-mix(in srgb, var(--lh-brand) 85%, #000);
}
.lh-list__cta:active:not(:disabled) { transform: scale(0.96); }
.lh-list__cta:disabled { opacity: 0.5; cursor: not-allowed; }
.lh-list__cta--alt { background: var(--lh-fg); }
.lh-list__cta--alt:hover:not(:disabled) {
    background: color-mix(in srgb, var(--lh-fg) 85%, #000);
}


/* ─── Empty state ─────────────────────────────────────────────────────── */

.lh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 12px;
    color: var(--lh-fg-muted);
    gap: 10px;
}
.lh-empty svg { width: 36px; height: 36px; opacity: 0.5; }
.lh-empty p { margin: 0; font-size: 13px; }


/* ─── Referral ────────────────────────────────────────────────────────── */

.lh-referral { display: flex; flex-direction: column; gap: 12px; }

.lh-referral__intro {
    font-size: 13px;
    color: var(--lh-fg);
    margin: 0;
    line-height: 1.5;
}
.lh-referral__intro strong { color: var(--lh-brand); font-weight: 700; }

.lh-referral__row {
    display: flex;
    gap: 6px;
    background: var(--lh-surface);
    border: 1px solid var(--lh-border);
    border-radius: var(--lh-radius-sm);
    padding: 4px;
}

.lh-referral__input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--lh-fg);
    outline: none;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}

.lh-referral__copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: var(--lh-brand);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease;
    flex-shrink: 0;
}
.lh-referral__copy:hover { background: color-mix(in srgb, var(--lh-brand) 85%, #000); }
.lh-referral__copy svg { width: 14px; height: 14px; }
.lh-referral__copy.is-copied { background: #10b981; }

.lh-referral__hint { font-size: 11px; color: var(--lh-fg-muted); margin: 0; }


/* ─── Panel footer ────────────────────────────────────────────────────── */

.lh-panel__footer {
    flex-shrink: 0;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--lh-border);
    background: var(--lh-bg);
}

.lh-panel__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: var(--lh-fg);
    color: #fff !important;
    border-radius: var(--lh-radius-sm);
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    transition: background 150ms ease, transform 100ms ease;
    border: none;
    cursor: pointer;
}
.lh-panel__cta:hover,
.lh-panel__cta:focus,
.lh-panel__cta:visited {
    background: color-mix(in srgb, var(--lh-fg) 85%, #000);
    color: #fff !important;
    text-decoration: none !important;
}
.lh-panel__cta:active { transform: scale(0.98); }
.lh-panel__cta svg { width: 16px; height: 16px; transition: transform 200ms ease; }
.lh-panel__cta:hover svg { transform: translateX(2px); }


/* ─── Guest state ─────────────────────────────────────────────────────── */

.lh-panel__body--guest {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lh-guest {
    text-align: center;
    padding: 16px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.lh-guest__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--lh-brand-soft);
    color: var(--lh-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lh-guest__icon svg { width: 28px; height: 28px; }

.lh-guest__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--lh-fg);
    margin: 0;
    letter-spacing: -0.01em;
}

.lh-guest__text {
    font-size: 13px;
    color: var(--lh-fg-muted);
    margin: 0;
    max-width: 280px;
    line-height: 1.5;
}


/* ─── Responsive: mobile-first slide-up bottom sheet ──────────────────── */

@media (max-width: 480px) {
    .lh-floating { inset: auto 16px 16px auto; }

    .lh-panel {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        max-height: 88vh;
        border-radius: var(--lh-radius) var(--lh-radius) 0 0;
        transform: translateY(100%);
        transform-origin: bottom center;
    }
    .lh-floating.is-open .lh-panel { transform: translateY(0); }

    .lh-panel__body { padding: 16px; }
    .lh-balance__value { font-size: 32px; }
}


.lh-list__cta--done {
    /* Kept for backward compat; the panel now uses .lh-pill--done in the
       .lh-list__sub instead of replacing the right-side CTA. */
    background: rgba(16, 185, 129, 0.15) !important;
    color: #047857 !important;
    cursor: default;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: none;
}
.lh-list__cta--done svg { width: 14px; height: 14px; }

/* ─── Voucher reveal ─ shown after a successful reward redemption ────── */

.lh-voucher-reveal {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.32);
    border-radius: 10px;
    min-width: 0;
    max-width: 100%;
}
.lh-voucher-reveal__head {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #047857;
}
.lh-voucher-reveal__head svg { width: 13px; height: 13px; flex-shrink: 0; }
.lh-voucher-reveal__row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
}
.lh-voucher-reveal__code {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    background: #fff;
    border: 1px dashed rgba(16, 185, 129, 0.45);
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #0f172a;
    user-select: all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
.lh-voucher-reveal__copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    background: var(--lh-fg, #0f172a);
    color: #fff !important;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: background 150ms ease, transform 100ms ease;
    flex-shrink: 0;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1;
}
.lh-voucher-reveal__copy:hover {
    background: #000;
    color: #fff !important;
}
.lh-voucher-reveal__copy:active { transform: scale(0.96); }
.lh-voucher-reveal__copy.is-copied {
    background: #10b981 !important;
    color: #fff !important;
}
.lh-voucher-reveal__copy svg { width: 13px; height: 13px; flex-shrink: 0; }

/* In the floating panel list, the reward item is a horizontal flex row and
   the reveal needs to take a full second row to fit longer codes. */
.lh-list__item.is-redeemed {
    flex-wrap: wrap;
}
.lh-list__item.is-redeemed .lh-voucher-reveal {
    flex: 1 1 100%;
    margin-top: 4px;
}

/* On the landing card, the footer has [cost | button]; the reveal sits where
   the button was. We let it grow on the right. */
.lh-card-reward__footer .lh-voucher-reveal {
    min-width: 180px;
    flex: 1;
}
.lh-card-reward.is-redeemed .lh-card-reward__footer {
    align-items: stretch;
    flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
    .lh-fab,
    .lh-panel,
    .lh-tier__bar-fill,
    .lh-list__item,
    .lh-list__cta,
    .lh-panel__cta,
    .lh-backdrop {
        transition: none !important;
    }
}


/* =========================================================================
   LANDING PAGE (full-page loyalty space)
   ========================================================================= */

.lh-landing {
    --lh-brand: #6366f1;
    --lh-brand-soft: color-mix(in srgb, var(--lh-brand) 12%, white);
    --lh-fg: #0f172a;
    --lh-fg-muted: #64748b;
    --lh-bg: #ffffff;
    --lh-surface: #f8fafc;
    --lh-border: #e2e8f0;
    --lh-radius: 18px;
    --lh-radius-sm: 12px;

    color: var(--lh-fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0;
}

@supports not (background: color-mix(in srgb, red 10%, white)) {
    .lh-landing { --lh-brand-soft: rgba(99, 102, 241, 0.12); }
}

/* ─── Hero ──────────────────────────────────────────────────────── */

.lh-hero {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--lh-brand) 0%, color-mix(in srgb, var(--lh-brand) 65%, #000) 100%);
    color: #fff;
    padding: 0;
    box-shadow: 0 20px 50px -20px rgba(15, 23, 42, 0.35);
    isolation: isolate;
}

.lh-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.lh-hero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
}
.lh-hero__blob--a {
    width: 400px; height: 400px;
    top: -120px; right: -100px;
    background: rgba(255, 255, 255, 0.4);
}
.lh-hero__blob--b {
    width: 320px; height: 320px;
    bottom: -100px; left: 20%;
    background: color-mix(in srgb, var(--lh-brand) 60%, white);
}

.lh-hero__inner {
    position: relative;
    z-index: 1;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.lh-hero__head { display: flex; flex-direction: column; gap: 8px; }

.lh-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    align-self: flex-start;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.lh-hero__eyebrow svg { width: 14px; height: 14px; }

.lh-hero__title {
    color: #fff !important;
    margin: 0;
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.lh-hero__wave {
    display: inline-block;
    animation: lh-wave 1.6s ease-in-out infinite;
    transform-origin: 70% 70%;
}
@keyframes lh-wave {
    0%, 60%, 100% { transform: rotate(0); }
    20% { transform: rotate(14deg); }
    40% { transform: rotate(-8deg); }
}

.lh-hero__stats {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.lh-hero__balance {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.lh-hero__balance-value {
    font-size: clamp(56px, 9vw, 84px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.9;
    color: #fff !important;
    font-variant-numeric: tabular-nums;
}
.lh-hero__balance-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.85;
    margin-top: 6px;
    font-weight: 600;
    color: #fff;
}

.lh-hero__meta {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}
.lh-hero__meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lh-hero__meta-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
    font-weight: 600;
    color: #fff;
}
.lh-hero__meta-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff !important;
    font-variant-numeric: tabular-nums;
}
.lh-hero__meta-tier {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.lh-hero__tier-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lh-tier-color, #fff);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--lh-tier-color, white) 30%, transparent);
}

.lh-hero__progress {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 14px 18px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lh-hero__progress--max {
    text-align: center;
    font-weight: 600;
}
.lh-hero__progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    gap: 12px;
    color: #fff;
}
.lh-hero__progress-row strong { font-weight: 700; }
.lh-hero__progress-pct {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.lh-hero__progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    overflow: hidden;
}
.lh-hero__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--lh-tier-color, white) 80%, white));
    border-radius: 999px;
    transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lh-hero__guest {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.lh-hero__guest p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    max-width: 540px;
    opacity: 0.95;
}

/* ─── Sections ─────────────────────────────────────────────────── */

.lh-section { display: flex; flex-direction: column; gap: 18px; }

.lh-section__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.lh-section__title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lh-fg);
    line-height: 1.2;
}
.lh-section__sub {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--lh-fg-muted);
}

/* ─── Grid ─────────────────────────────────────────────────────── */

.lh-grid--cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

/* ─── Reward card ──────────────────────────────────────────────── */

.lh-card-reward {
    display: flex;
    flex-direction: column;
    background: var(--lh-bg);
    border: 1px solid var(--lh-border);
    border-radius: var(--lh-radius);
    overflow: hidden;
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease, border-color 200ms ease;
    position: relative;
}
.lh-card-reward:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(15, 23, 42, 0.18);
    border-color: var(--lh-brand);
}
.lh-card-reward.is-locked { opacity: 0.7; }

.lh-card-reward__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--lh-brand-soft);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lh-card-reward__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.lh-card-reward:hover .lh-card-reward__media img { transform: scale(1.05); }

.lh-card-reward__media-fallback {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    color: var(--lh-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.lh-card-reward__media-fallback svg { width: 28px; height: 28px; }

.lh-card-reward__type {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.lh-card-reward__lock-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.lh-card-reward__lock-icon svg { width: 14px; height: 14px; }

.lh-card-reward__body {
    padding: 16px 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.lh-card-reward__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lh-fg);
    letter-spacing: -0.01em;
}
.lh-card-reward__desc {
    margin: 0;
    font-size: 13px;
    color: var(--lh-fg-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lh-card-reward__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--lh-border);
}
.lh-card-reward__cost {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--lh-brand);
}
.lh-card-reward__cost strong {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.lh-card-reward__cost span {
    font-size: 12px;
    color: var(--lh-fg-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* ─── Mission card ─────────────────────────────────────────────── */

.lh-card-mission {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
    background: var(--lh-bg);
    border: 1px solid var(--lh-border);
    border-radius: var(--lh-radius);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease, border-color 200ms ease;
    position: relative;
}
.lh-card-mission:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -18px rgba(15, 23, 42, 0.18);
    border-color: var(--lh-brand);
}

.lh-card-mission__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--lh-brand-soft);
    color: var(--lh-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lh-card-mission__icon svg { width: 22px; height: 22px; }

.lh-card-mission__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.lh-card-mission__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--lh-fg);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.lh-card-mission__desc {
    margin: 0;
    font-size: 13px;
    color: var(--lh-fg-muted);
    line-height: 1.45;
}

.lh-card-mission__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--lh-border);
}

.lh-card-mission.is-completed { opacity: 0.85; }
.lh-card-mission.is-completed:hover { transform: none; }

.lh-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(15, 23, 42, 0.06);
    color: var(--lh-fg);
}
.lh-pill--success {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}
.lh-pill--done {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
}
.lh-pill--done svg { width: 14px; height: 14px; }

/* ─── Buttons (landing) ────────────────────────────────────────── */

.lh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 150ms ease, transform 100ms ease, color 150ms ease;
    text-decoration: none !important;
    line-height: 1;
    white-space: nowrap;
}
.lh-btn:active:not(:disabled) { transform: scale(0.97); }
.lh-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.lh-btn svg { width: 16px; height: 16px; transition: transform 200ms ease; }
.lh-btn:hover:not(:disabled) svg { transform: translateX(2px); }

.lh-btn--primary {
    background: var(--lh-brand);
    color: #fff !important;
}
.lh-btn--primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--lh-brand) 85%, #000);
    color: #fff !important;
}
.lh-btn--dark {
    background: var(--lh-fg);
    color: #fff !important;
}
.lh-btn--dark:hover:not(:disabled) {
    background: color-mix(in srgb, var(--lh-fg) 85%, #000);
    color: #fff !important;
}
.lh-btn--sm { padding: 8px 14px; font-size: 13px; }

/* ─── Referral card (landing) ──────────────────────────────────── */

.lh-referral-card {
    position: relative;
    border-radius: var(--lh-radius);
    overflow: hidden;
    background: linear-gradient(135deg, var(--lh-fg) 0%, #1e293b 100%);
    color: #fff;
    isolation: isolate;
}
.lh-referral-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    color: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    pointer-events: none;
}
.lh-referral-card__bg svg {
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 320px;
    height: 320px;
}
.lh-referral-card__inner {
    position: relative;
    z-index: 1;
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.lh-referral-card__head { display: flex; flex-direction: column; gap: 8px; max-width: 600px; }
.lh-referral-card__eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lh-brand);
}
.lh-referral-card__title {
    margin: 0;
    color: #fff !important;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.lh-referral-card__sub {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}
.lh-referral-card__sub strong { color: #fff; }

.lh-referral-card__row {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--lh-radius-sm);
    padding: 5px;
    max-width: 600px;
}
.lh-referral-card__input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 12px;
    font-size: 13px;
    color: #fff;
    outline: none;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}
.lh-referral-card__input::selection { background: var(--lh-brand); color: #fff; }

[data-lh-copy-page].is-copied {
    background: #10b981 !important;
}

/* ─── Activity ─────────────────────────────────────────────────── */

.lh-activity {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--lh-bg);
    border: 1px solid var(--lh-border);
    border-radius: var(--lh-radius);
    overflow: hidden;
}
.lh-activity__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--lh-border);
}
.lh-activity__item:last-child { border-bottom: none; }

.lh-activity__icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lh-activity__icon svg { width: 14px; height: 14px; }
.lh-activity__icon.is-credit { background: rgba(16, 185, 129, 0.12); color: #047857; }
.lh-activity__icon.is-debit { background: rgba(244, 63, 94, 0.12); color: #be123c; }

.lh-activity__main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lh-activity__type {
    font-size: 13px;
    font-weight: 600;
    color: var(--lh-fg);
    text-transform: capitalize;
}
.lh-activity__date {
    font-size: 12px;
    color: var(--lh-fg-muted);
}

.lh-activity__delta {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.lh-activity__delta.is-credit { color: #047857; }
.lh-activity__delta.is-debit { color: #be123c; }

/* ─── Responsive ───────────────────────────────────────────────── */

@media (max-width: 640px) {
    .lh-landing { gap: 28px; }
    .lh-hero__inner { padding: 28px 22px; }
    .lh-hero__stats { flex-direction: column; align-items: flex-start; gap: 16px; }
    .lh-hero__meta { gap: 18px; }
    .lh-grid--cards { gap: 14px; }
    .lh-section__title { font-size: 20px; }
    .lh-referral-card__inner { padding: 24px 20px; }
    .lh-referral-card__title { font-size: 22px; }
    .lh-referral-card__row { flex-direction: column; }
    .lh-referral-card__row .lh-btn { justify-content: center; }
}

/* =========================================================================
   SLIDER (horizontal scroll-snap with arrow buttons)
   Used by both the landing page (rewards / missions / unlocked) and any
   future component that wants a row of cards that scrolls horizontally.
   ========================================================================= */

.lh-slider {
    position: relative;
    /* Allow arrows to escape the parent without being clipped by section
       overflow. The track itself clips its own overflow-x. */
}

.lh-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 4px;
    padding: 4px 4px 14px 4px; /* room for card hover translateY + bottom scrollbar */
    scroll-behavior: smooth;
    /* Slim scrollbar on desktop; mobile devices show none by default */
    scrollbar-width: thin;
    scrollbar-color: var(--lh-border) transparent;
}
.lh-slider__track::-webkit-scrollbar { height: 6px; }
.lh-slider__track::-webkit-scrollbar-thumb { background: var(--lh-border); border-radius: 999px; }
.lh-slider__track::-webkit-scrollbar-track { background: transparent; }

.lh-slider__track > * {
    scroll-snap-align: start;
    /* Keep cards at their intrinsic min-width so 1-2 cards don't stretch
       across the whole row. */
    min-width: 0;
}

.lh-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--lh-border);
    background: #fff;
    color: var(--lh-fg);
    cursor: pointer;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.18), 0 2px 4px rgba(15, 23, 42, 0.06);
    transition: background 150ms ease, color 150ms ease, transform 100ms ease, opacity 200ms ease;
    padding: 0;
}
.lh-slider__arrow:hover { background: var(--lh-brand); color: #fff; border-color: var(--lh-brand); }
.lh-slider__arrow:active { transform: translateY(-50%) scale(0.92); }
.lh-slider__arrow:focus-visible { outline: 3px solid color-mix(in srgb, var(--lh-brand) 50%, white); outline-offset: 2px; }
.lh-slider__arrow svg { width: 18px; height: 18px; }
.lh-slider__arrow--prev { left: -8px; }
.lh-slider__arrow--next { right: -8px; }
.lh-slider__arrow[hidden],
.lh-slider__arrow.is-disabled { opacity: 0; pointer-events: none; }

/* Mobile: hide arrows (touch users swipe), let one card peek so users know
   the row scrolls. */
@media (max-width: 760px) {
    .lh-slider__arrow { display: none; }
    .lh-slider__track {
        grid-auto-columns: minmax(78%, 78%);
        scroll-padding-left: 4px;
        padding-right: 22%;
    }
}

/* =========================================================================
   UNLOCKED REWARD CARD ("my unlocked rewards" section on landing)
   ========================================================================= */

.lh-card-unlocked {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 18px 16px;
    background: var(--lh-bg);
    border: 1px solid var(--lh-border);
    border-radius: var(--lh-radius);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease, border-color 200ms ease, opacity 200ms ease;
    position: relative;
}
.lh-card-unlocked:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -18px rgba(15, 23, 42, 0.18);
    border-color: var(--lh-brand);
}
.lh-card-unlocked.is-used {
    opacity: 0.55;
    background: var(--lh-surface);
}
.lh-card-unlocked.is-used:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--lh-border);
}
.lh-card-unlocked.is-expired {
    opacity: 0.7;
    background: rgba(244, 63, 94, 0.04);
    border-color: rgba(244, 63, 94, 0.18);
}

.lh-card-unlocked__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.lh-card-unlocked__type {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lh-fg-muted);
}

.lh-card-unlocked__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lh-card-unlocked__status svg { width: 12px; height: 12px; }
.lh-card-unlocked__status--active {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}
.lh-card-unlocked__status--used {
    background: rgba(15, 23, 42, 0.08);
    color: var(--lh-fg-muted);
}
.lh-card-unlocked__status--expired {
    background: rgba(244, 63, 94, 0.14);
    color: #be123c;
}
.lh-card-unlocked__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
    animation: lh-pulse-dot 2s ease-in-out infinite;
}
@keyframes lh-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25); }
    50%      { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.10); }
}

.lh-card-unlocked__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lh-fg);
    letter-spacing: -0.01em;
    /* Truncate long names to 2 lines so all cards line up vertically */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lh-card-unlocked__code-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    background: var(--lh-surface);
    border: 1px dashed rgba(99, 102, 241, 0.4);
    border-radius: var(--lh-radius-sm);
    padding: 4px;
}
.lh-card-unlocked.is-used .lh-card-unlocked__code-row {
    border-style: solid;
    border-color: var(--lh-border);
}

.lh-card-unlocked__code {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--lh-fg);
    background: #fff;
    border-radius: 6px;
    padding: 8px 10px;
    user-select: all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
.lh-card-unlocked.is-used .lh-card-unlocked__code {
    text-decoration: line-through;
    color: var(--lh-fg-muted);
}

.lh-card-unlocked__copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    background: var(--lh-fg);
    color: #fff !important;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: background 150ms ease, transform 100ms ease;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
}
.lh-card-unlocked__copy:hover { background: #000; }
.lh-card-unlocked__copy:active { transform: scale(0.96); }
.lh-card-unlocked__copy.is-copied { background: #10b981 !important; }
.lh-card-unlocked__copy svg { width: 13px; height: 13px; flex-shrink: 0; }

.lh-card-unlocked__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--lh-border);
    font-size: 12px;
    color: var(--lh-fg-muted);
    flex-wrap: wrap;
}
.lh-card-unlocked__meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.lh-card-unlocked__meta svg { width: 13px; height: 13px; flex-shrink: 0; }
.lh-card-unlocked__cost {
    font-weight: 700;
    color: var(--lh-fg);
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   REWARD CARD usage hint ("Déjà débloquée N fois")
   ========================================================================= */

.lh-card-reward__usage {
    margin: 6px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #047857;
    background: rgba(16, 185, 129, 0.10);
    padding: 4px 9px;
    border-radius: 999px;
    align-self: flex-start;
    line-height: 1.3;
}
.lh-card-reward__usage svg { width: 12px; height: 12px; flex-shrink: 0; }

/* =========================================================================
   MODAL (confirmation + birthday capture)
   Both [data-lh-confirm-modal] and [data-lh-birthday-modal] use this
   shell. Front.js toggles the [hidden] attribute to show/hide.
   ========================================================================= */

.lh-modal {
    position: fixed;
    inset: 0;
    z-index: 99995; /* above the floating widget panel (99991) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #0f172a;
    --lh-brand: #6366f1;
    --lh-brand-soft: rgba(99, 102, 241, 0.12);
    --lh-fg: #0f172a;
    --lh-fg-muted: #64748b;
    --lh-border: #e2e8f0;
    --lh-surface: #f8fafc;
}
.lh-modal[hidden] { display: none !important; }

.lh-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    animation: lh-modal-fade 200ms ease;
}
@keyframes lh-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lh-modal__panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 18px;
    padding: 28px 26px 22px;
    box-shadow: 0 24px 60px -15px rgba(15, 23, 42, 0.45), 0 12px 24px -12px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    animation: lh-modal-pop 240ms cubic-bezier(0.16, 1, 0.3, 1);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
@keyframes lh-modal-pop {
    from { transform: scale(0.92) translateY(8px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

.lh-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
    padding: 0;
}
.lh-modal__close:hover { background: rgba(15, 23, 42, 0.12); }
.lh-modal__close svg { width: 16px; height: 16px; }

.lh-modal__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--lh-brand-soft);
    color: var(--lh-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 6px;
}
.lh-modal__icon svg { width: 28px; height: 28px; }
.lh-modal__icon--festive {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(251, 191, 36, 0.18));
    color: #ec4899;
}

.lh-modal__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.lh-modal__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #475569;
}
.lh-modal__body strong { color: #0f172a; font-weight: 700; }

.lh-modal__note {
    margin: 0;
    font-size: 12px;
    color: #94a3b8;
    background: var(--lh-surface);
    padding: 8px 12px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.lh-modal__field {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.lh-modal__field label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lh-modal__field input[type="date"],
.lh-modal__field input[type="text"],
.lh-modal__field input[type="tel"],
.lh-modal__field input[type="email"],
.lh-modal__field select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--lh-border);
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    color: var(--lh-fg);
    font-family: inherit;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}
.lh-modal__field input:focus,
.lh-modal__field select:focus {
    outline: none;
    border-color: var(--lh-brand);
    box-shadow: 0 0 0 3px var(--lh-brand-soft);
}

/* Container for multiple field rows in the profile modal. Each row
   has its own .lh-modal__field; this stacks them with comfortable
   spacing and lets JS hide/reveal individual rows via [hidden]. */
.lh-modal__fields {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lh-modal__fields .lh-modal__field[hidden] { display: none !important; }

/* Inline checkbox label — used for the newsletter opt-in row in the
   profile modal. The native checkbox sits flush-left, the label text
   wraps next to it. */
.lh-modal__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    font-size: 13px;
    color: var(--lh-fg);
    line-height: 1.4;
    padding: 10px 12px;
    background: var(--lh-surface);
    border: 1px solid var(--lh-border);
    border-radius: 10px;
    transition: background 120ms ease, border-color 120ms ease;
}
.lh-modal__checkbox:hover {
    background: var(--lh-brand-soft);
    border-color: var(--lh-brand);
}
.lh-modal__checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--lh-brand);
    cursor: pointer;
}
.lh-modal__checkbox span { flex: 1; }

.lh-modal__error {
    width: 100%;
    padding: 8px 12px;
    background: rgba(244, 63, 94, 0.10);
    color: #be123c;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    box-sizing: border-box;
    text-align: left;
}
.lh-modal__error[hidden] { display: none !important; }

.lh-modal__actions {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}
.lh-modal__actions .lh-btn {
    flex: 1;
    justify-content: center;
    padding: 11px 14px;
}

@media (max-width: 480px) {
    .lh-modal__panel { padding: 24px 20px 20px; max-width: 100%; }
    .lh-modal__title { font-size: 17px; }
    .lh-modal__actions { flex-direction: column-reverse; }
}

/* When the floating widget is open and the user opens a modal from inside
   it, dim the widget but keep it visible behind the modal so the user
   doesn't lose context. */
.lh-floating.is-open ~ .lh-modal:not([hidden]) ~ .lh-floating .lh-panel,
.lh-modal:not([hidden]) ~ .lh-floating .lh-panel {
    /* CSS sibling selector limitations make this tricky; instead JS lowers
       the panel z-index when a modal is shown. See showModal() in front.js. */
}

/* ===== Referral recap (widget tab) ====================================
   Compact list inside the floating widget's referral tab. We share status
   colors with the landing recap (.is-success, .is-progress, .is-pending,
   .is-rejected) so the merchant sees a coherent visual language. */
.lh-referral__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 8px;
}
.lh-referral__list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.lh-referral__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 13px;
}
.lh-referral__item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.lh-referral__item-name {
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lh-referral__item-date {
    font-size: 11px;
    color: #64748b;
}
.lh-referral__item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.lh-referral__item-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}
.lh-referral__item-status.is-success {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}
.lh-referral__item-status.is-progress {
    background: rgba(99, 102, 241, 0.14);
    color: #4338ca;
}
.lh-referral__item-status.is-rejected {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
}
.lh-referral__item-points {
    font-size: 12px;
    font-weight: 700;
    color: #047857;
}
.lh-referral__more {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    text-decoration: underline;
    color: var(--lh-brand, #6366f1);
}

/* ===== Referral recap (landing page) ==================================
   Full list, richer layout with avatars and big stats up top. */
.lh-referral-recap__stats {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.lh-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.04);
    border-radius: 12px;
    min-width: 90px;
}
.lh-stat strong {
    font-size: 22px;
    line-height: 1;
    color: #0f172a;
    font-weight: 800;
}
.lh-stat span {
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.lh-stat.lh-stat--success { background: rgba(16, 185, 129, 0.12); }
.lh-stat.lh-stat--success strong { color: #047857; }
.lh-stat.lh-stat--accent { background: rgba(99, 102, 241, 0.12); }
.lh-stat.lh-stat--accent strong { color: var(--lh-brand, #4338ca); }
.lh-referral-recap {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 720px) {
    .lh-referral-recap { grid-template-columns: 1fr 1fr; }
}
.lh-referral-recap__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    transition: border-color 200ms ease, transform 200ms ease;
}
.lh-referral-recap__item:hover { transform: translateY(-1px); }
.lh-referral-recap__item.is-success { border-color: rgba(16, 185, 129, 0.35); }
.lh-referral-recap__item.is-rejected { opacity: 0.65; }
.lh-referral-recap__avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.12);
    color: var(--lh-brand, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lh-referral-recap__avatar svg { width: 22px; height: 22px; }
.lh-referral-recap__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lh-referral-recap__name {
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lh-referral-recap__date,
.lh-referral-recap__hint {
    font-size: 12px;
    color: #64748b;
}
.lh-referral-recap__hint { color: #b45309; }
.lh-referral-recap__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.lh-referral-recap__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}
.lh-referral-recap__status svg { width: 14px; height: 14px; }
.lh-referral-recap__status.is-success { background: rgba(16, 185, 129, 0.14); color: #047857; }
.lh-referral-recap__status.is-progress { background: rgba(99, 102, 241, 0.14); color: #4338ca; }
.lh-referral-recap__status.is-rejected { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }
.lh-referral-recap__points {
    font-size: 14px;
    font-weight: 700;
    color: #047857;
}

/* ===== VIP Tier Medal (0.3.3) =========================================
   Used on reward cards to surface the minimum VIP tier required to
   redeem. Two visual states:
     - .is-earned : customer has reached (or surpassed) the tier. The
       medal looks « gagnée » : full color disc with gold ribbons and a
       soft glow. The reward is unlockable (points permitting).
     - .is-locked : customer hasn’t reached the tier yet. The medal is
       desaturated, ribbons grayed out, with a subtle padlock hint via
       a dashed border on the disc — conveys « à conquérir ».

   The tier color is passed as a CSS variable from the template:
     style="--lh-medal-color: #fbbf24;"
   so each medal uses its own tier color (silver / gold / platinum).

   Positioned absolutely in the top-RIGHT of the reward card media block.
   Moved from top-LEFT to top-RIGHT in 0.3.4 to avoid overlap with the
   reward type pill (« BON D'ACHAT » / « CADEAU »), which lives in the
   top-LEFT corner. The padlock-icon was hidden on tier-requirement
   cards to keep the right corner clean. */
.lh-medal {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 3;
    pointer-events: none;
}
.lh-medal__disc {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
        circle at 30% 28%,
        color-mix(in srgb, var(--lh-medal-color, #6366f1) 25%, white) 0%,
        var(--lh-medal-color, #6366f1) 55%,
        color-mix(in srgb, var(--lh-medal-color, #6366f1) 70%, black 30%) 100%
    );
    /* Fallback for browsers without color-mix() (Safari < 16.4, older FF) */
    background-color: var(--lh-medal-color, #6366f1);
    box-shadow:
        0 6px 14px rgba(0,0,0,0.22),
        inset 0 1px 1px rgba(255,255,255,0.55),
        inset 0 -2px 4px rgba(0,0,0,0.18);
    color: #fff;
}
.lh-medal__disc::before {
    /* Subtle highlight on top — makes the disc look 3D / metallic */
    content: '';
    position: absolute;
    inset: 3px 3px 50% 3px;
    border-radius: 50% 50% 40% 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.45), transparent);
    pointer-events: none;
}
.lh-medal__disc svg {
    position: relative;
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}
.lh-medal__ribbon {
    position: absolute;
    top: -2px;
    width: 0;
    height: 0;
    z-index: -1;
    /* Triangle ribbon-end pointing down. Two triangles meet behind the
       disc to form a V-shape, like a real medal. */
    border-style: solid;
}
.lh-medal__ribbon--left {
    left: 4px;
    border-width: 24px 0 0 12px;
    border-color: transparent transparent transparent var(--lh-medal-color, #6366f1);
    filter: brightness(0.85);
    transform: rotate(8deg);
}
.lh-medal__ribbon--right {
    right: 4px;
    border-width: 24px 12px 0 0;
    border-color: transparent var(--lh-medal-color, #6366f1) transparent transparent;
    filter: brightness(0.85);
    transform: rotate(-8deg);
}
.lh-medal__label {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    margin-top: 2px;
    white-space: nowrap;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Locked variant: desaturated, dashed border on the disc, ribbons faded.
   Communicates clearly that this is a goal to reach, not a current
   achievement. */
.lh-medal.is-locked .lh-medal__disc {
    background: radial-gradient(
        circle at 30% 28%,
        rgba(255,255,255,0.85) 0%,
        rgba(241, 245, 249, 0.95) 55%,
        rgba(203, 213, 225, 1) 100%
    );
    background-color: #e2e8f0;
    box-shadow:
        0 4px 10px rgba(0,0,0,0.10),
        inset 0 1px 1px rgba(255,255,255,0.7);
    color: var(--lh-medal-color, #6366f1);
    border: 2px dashed color-mix(in srgb, var(--lh-medal-color, #6366f1) 50%, #94a3b8);
}
.lh-medal.is-locked .lh-medal__disc::before { opacity: 0.4; }
.lh-medal.is-locked .lh-medal__disc svg { opacity: 0.65; }
.lh-medal.is-locked .lh-medal__ribbon { opacity: 0.35; filter: grayscale(0.6); }
.lh-medal.is-locked .lh-medal__label { background: rgba(71, 85, 105, 0.85); }

/* When the medal is earned, give the disc a subtle pulse animation
   the first time the card enters the viewport — reinforces « tu peux
   utiliser celle-ci ». We use a one-shot animation triggered by adding
   the .is-earned class; reduced-motion users get nothing. */
@keyframes lh-medal-shine {
    0%   { box-shadow: 0 6px 14px rgba(0,0,0,0.22), inset 0 1px 1px rgba(255,255,255,0.55), inset 0 -2px 4px rgba(0,0,0,0.18), 0 0 0 0 color-mix(in srgb, var(--lh-medal-color, #6366f1) 50%, transparent); }
    50%  { box-shadow: 0 6px 14px rgba(0,0,0,0.22), inset 0 1px 1px rgba(255,255,255,0.55), inset 0 -2px 4px rgba(0,0,0,0.18), 0 0 0 8px color-mix(in srgb, var(--lh-medal-color, #6366f1) 0%, transparent); }
    100% { box-shadow: 0 6px 14px rgba(0,0,0,0.22), inset 0 1px 1px rgba(255,255,255,0.55), inset 0 -2px 4px rgba(0,0,0,0.18), 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: no-preference) {
    .lh-card-reward:hover .lh-medal.is-earned .lh-medal__disc {
        animation: lh-medal-shine 1.2s ease-out;
    }
}

/* ===== Reward card — tier-locked state =================================
   Distinct from points-locked (.is-locked). Tier-locked = « vous ne pouvez
   PAS débloquer cette récompense tant que votre niveau VIP n’est pas
   atteint ». We grey the card slightly and replace the CTA with an
   explanatory callout (see .lh-card-reward__tier-gate). */
.lh-card-reward.is-tier-locked {
    /* Slightly desaturated but still clickable for the medal hover */
    filter: saturate(0.85);
}
.lh-card-reward.is-tier-locked .lh-card-reward__media {
    opacity: 0.75;
}
.lh-card-reward.is-tier-locked .lh-card-reward__media img,
.lh-card-reward.is-tier-locked .lh-card-reward__media-fallback {
    filter: grayscale(0.35);
}

.lh-card-reward__tier-gate {
    margin-top: 10px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--lh-medal-color, #6366f1) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--lh-medal-color, #6366f1) 25%, transparent);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    /* No gap on purpose — the hint manages its own top margin so it can
       collapse to zero when hidden. */
    gap: 0;
    /* Fallback bg for older browsers */
    background-color: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.25);
}
.lh-card-reward__tier-gate-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--lh-medal-color, #6366f1);
}
.lh-card-reward__tier-gate-title svg { width: 14px; height: 14px; }

/* Hint deployed on card hover.
   Hidden by default to keep the callout compact (just « Niveau Gold
   requis »), revealed on hover with a smooth height + opacity transition.
   - max-height instead of height:auto for transitionability
   - margin-top animated alongside so there's no awkward jump
   - pointer-events:none when hidden, so the hidden text doesn't intercept
     clicks accidentally
   - hint stays visible when the tier-gate itself is :focus-within so
     keyboard users can read it (it's nested in an article that's
     focusable when the card has interactive children) */
.lh-card-reward__tier-gate-hint {
    font-size: 12px;
    color: #475569;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
        max-height 260ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 200ms ease 60ms,
        margin-top 220ms ease;
}
.lh-card-reward:hover .lh-card-reward__tier-gate-hint,
.lh-card-reward:focus-within .lh-card-reward__tier-gate-hint,
.lh-card-reward__tier-gate:hover .lh-card-reward__tier-gate-hint {
    max-height: 42px;
    opacity: 1;
    margin-top: 6px;
    pointer-events: auto;
}
.lh-card-reward__tier-gate-hint strong {
    color: #0f172a;
    font-weight: 700;
}

/* Respect reduced-motion: snap instead of animating. */
@media (prefers-reduced-motion: reduce) {
    .lh-card-reward__tier-gate-hint {
        transition: none;
    }
}

/* ===== Reward card — out-of-stock state (0.3.14) ======================
   Triggered when the merchant has enabled CONFIG_DISABLE_OOS_REWARDS
   AND the underlying gift product is unavailable (qty<=0 + product not
   configured to accept OOS orders). Mirrors the tier-locked visual
   language so customers learn the convention quickly:
     - Card slightly grayed out (saturate 0.6, opacity reduce)
     - Media block desaturated
     - Body shows a clear « Temporairement indisponible » callout
     - CTA is suppressed entirely (the callout is the explanation)

   Unlike tier-locked, OOS doesn't grow the card on hover — there's no
   action the customer can take, so the hover lift would be misleading. */
.lh-card-reward.is-oos {
    filter: saturate(0.6);
    opacity: 0.78;
}
.lh-card-reward.is-oos:hover {
    /* Override the default :hover translateY — nothing actionable to
       suggest, so we keep the card visually static. */
    transform: none;
    box-shadow: none;
    border-color: var(--lh-border);
}
.lh-card-reward.is-oos .lh-card-reward__media {
    opacity: 0.65;
}
.lh-card-reward.is-oos .lh-card-reward__media img,
.lh-card-reward.is-oos .lh-card-reward__media-fallback {
    filter: grayscale(0.55);
}

/* OOS callout in the card body — same shell as the tier-gate, neutral
   slate palette to differentiate from the tier color but still feel
   integrated with the card. */
.lh-card-reward__oos {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(100, 116, 139, 0.10);
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lh-card-reward__oos-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}
.lh-card-reward__oos-title svg { width: 14px; height: 14px; flex-shrink: 0; }
.lh-card-reward__oos-hint {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

/* Compact OOS state in the widget reward list */
.lh-list__item.is-oos {
    opacity: 0.7;
    filter: saturate(0.7);
}
.lh-list__item.is-oos:hover {
    /* Same rationale as the landing card: no actionable hover state */
    border-color: var(--lh-border);
}
.lh-list__locked--oos {
    background: rgba(100, 116, 139, 0.14) !important;
    color: #475569 !important;
    font-weight: 600;
    /* The base .lh-list__locked is red; override here. */
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
}

/* ===== Mini-medal in the widget reward list ============================ */
.lh-list__medal {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: radial-gradient(
        circle at 30% 28%,
        color-mix(in srgb, var(--lh-medal-color, #6366f1) 25%, white) 0%,
        var(--lh-medal-color, #6366f1) 55%,
        color-mix(in srgb, var(--lh-medal-color, #6366f1) 70%, black 30%) 100%
    );
    background-color: var(--lh-medal-color, #6366f1);
    box-shadow:
        0 3px 8px rgba(0,0,0,0.15),
        inset 0 1px 1px rgba(255,255,255,0.5);
}
.lh-list__medal svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }
.lh-list__medal.is-locked {
    background: #e2e8f0;
    color: var(--lh-medal-color, #6366f1);
    border: 2px dashed color-mix(in srgb, var(--lh-medal-color, #6366f1) 50%, #94a3b8);
    box-shadow: none;
}
.lh-list__medal.is-locked svg { opacity: 0.65; }

/* Tier-locked status pill in the widget */
.lh-list__locked--tier {
    background: color-mix(in srgb, var(--lh-medal-color, #6366f1) 14%, transparent) !important;
    color: var(--lh-medal-color, #6366f1) !important;
    font-weight: 600;
    /* Fallbacks */
    background-color: rgba(99, 102, 241, 0.14);
}
.lh-list__item.is-tier-locked {
    /* Slightly muted to signal the locked state without graying out completely
       (the user should still be able to read everything). */
    opacity: 0.82;
}

/* ===== Referral capture banner (0.3.12) ================================
   Sticky banner at the top of the viewport, shown to logged-out visitors
   who just clicked a referral link. Confirms the capture, lists the
   concrete benefits, and CTA-s them to create an account. Position
   fixed so it works on every theme without requiring a specific hook
   on the merchant's side.

   Visibility is JS-controlled (data-lh-referral-banner with [hidden]
   attribute by default, JS removes [hidden] + adds .is-visible). The
   `code` attr is read by JS to detect new captures (different code = re-
   show banner even if user previously dismissed an older code).

   z-index: very high (10^10) so the banner sits above merchant themes
   that use aggressive z-index on their sticky headers (some shops reach
   z-index 9999+). No conflict with our own modals (99995) / toasts
   (99996) because those only appear for LOGGED-IN customers, while this
   banner only renders for logged-OUT visitors — the two surfaces are
   mutually exclusive at render time. */
.lh-referral-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999999999;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease;
    pointer-events: none;
    /* Brand gradient — the CSS var is injected from the template using
       CONFIG_BRAND_COLOR. We darken slightly on the right side to add
       visual depth without making it look like a separate band. */
    background: linear-gradient(
        90deg,
        var(--lh-banner-brand, #6366f1) 0%,
        color-mix(in srgb, var(--lh-banner-brand, #6366f1) 80%, black 20%) 100%
    );
    /* Fallback flat color for browsers without color-mix() */
    background-color: var(--lh-banner-brand, #6366f1);
    color: #fff;
    box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.45);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.lh-referral-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.lh-referral-banner[hidden] {
    /* The HTML5 [hidden] default of display:none would skip the slide
       transition; keep it laid out but invisible via translate+opacity
       until JS lifts the [hidden] attribute. */
    display: block !important;
}

.lh-referral-banner__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.lh-referral-banner__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.lh-referral-banner__icon svg { width: 20px; height: 20px; }

.lh-referral-banner__content {
    flex: 1;
    min-width: 0;
}
.lh-referral-banner__title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.2px;
}
.lh-referral-banner__msg {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
    /* Long messages on narrow screens wrap onto multiple lines rather
       than overflowing horizontally. */
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.lh-referral-banner__msg strong {
    color: #fff;
    font-weight: 700;
    /* Subtle highlight pill effect on the benefit numbers without a
       full background — just a slight darkening so they stand out. */
    background: rgba(0, 0, 0, 0.14);
    padding: 1px 6px;
    border-radius: 999px;
    white-space: nowrap;
}

.lh-referral-banner__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: #fff;
    color: var(--lh-banner-brand, #6366f1);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 999px;
    transition: transform 180ms ease, box-shadow 180ms ease;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}
.lh-referral-banner__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
    text-decoration: none;
}
.lh-referral-banner__cta svg { width: 14px; height: 14px; }

.lh-referral-banner__close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 150ms ease;
}
.lh-referral-banner__close:hover {
    background: rgba(255, 255, 255, 0.24);
}
.lh-referral-banner__close svg { width: 14px; height: 14px; }

@media (max-width: 720px) {
    /* Mobile layout completely rethought to drop the banner height from
       ~150px to ~70-80px:
         - Close button absolutely positioned in the top-right corner
           (no longer takes a flex slot, no longer pushes the CTA below)
         - Icon shrinks (28px) and stays beside the text
         - Title + msg keep their 2-line stacking but with tighter
           line-height and font-size
         - CTA wraps to a full-width row UNDER the text+icon block (via
           flex-wrap + flex-basis 100% + order:3)
       Result on a 380px wide phone:
         ┌─────────────────────────────────────────────┐
         │ [icon] Vous avez été parrainé !         [×] │
         │        Créez votre compte pour recevoir     │
         │        100 points offerts.                  │
         │ [          Créer mon compte    →          ] │
         └─────────────────────────────────────────────┘
    */
    .lh-referral-banner__inner {
        padding: 9px 42px 9px 12px; /* right pad reserves space for the absolute close btn */
        gap: 10px;
        flex-wrap: wrap;
        position: relative; /* anchor for the absolute close button */
        align-items: flex-start; /* icon aligned with first line of text */
    }
    .lh-referral-banner__icon {
        width: 28px;
        height: 28px;
    }
    .lh-referral-banner__icon svg { width: 15px; height: 15px; }

    .lh-referral-banner__content {
        /* Take the rest of the row (between icon and absolute close). */
        flex: 1;
        min-width: 0;
    }
    .lh-referral-banner__title {
        font-size: 13px;
        line-height: 1.25;
    }
    .lh-referral-banner__msg {
        font-size: 12px;
        line-height: 1.35;
        margin-top: 1px;
    }
    .lh-referral-banner__msg strong {
        padding: 0 5px;
    }

    .lh-referral-banner__cta {
        order: 3;          /* push below the text+icon row */
        flex: 1 1 100%;    /* full-width tap target */
        justify-content: center;
        padding: 8px 14px;
        font-size: 12px;
        margin-top: 2px;
    }

    .lh-referral-banner__close {
        /* Pulled out of the flex flow so it doesn't reserve a slot that
           would force everything else to wrap awkwardly. */
        position: absolute;
        top: 6px;
        right: 6px;
        width: 28px;
        height: 28px;
        background: rgba(255, 255, 255, 0.10);
    }
    .lh-referral-banner__close svg { width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .lh-referral-banner {
        transition: opacity 100ms ease;
        transform: translateY(0);
    }
}

/* ===== Repeatable mission counter (0.3.6) ===============================
   Inline pill rendered inside .lh-card-mission__body when the customer
   has already claimed a repeatable mission at least once. Shows either
   « Validée 2/5 fois » (when limit_per_customer > 1) or « Validée 3 fois »
   (when limit_per_customer = 0, ie unlimited).

   Discreet visual treatment so it doesn't compete with the title or the
   points pill in the footer; just enough emphasis to confirm « oui, tu
   l'as déjà validé X fois, voici où tu en es ». */
.lh-card-mission__counter {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: #047857;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.22);
    font-weight: 500;
    line-height: 1.3;
}
.lh-card-mission__counter svg { width: 12px; height: 12px; flex-shrink: 0; }
.lh-card-mission__counter strong {
    color: #065f46;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Compact counter pill in the floating widget. Inherits .lh-pill
   base styling, just tweaks the color to match the success theme so
   it lines up visually with the « +50 pts » pill next to it without
   blending in. */
.lh-pill--counter {
    background: rgba(16, 185, 129, 0.12);
    color: #065f46;
    font-variant-numeric: tabular-nums;
}
.lh-pill--counter svg { width: 11px; height: 11px; }

/* ===== Floating toast (0.3.6) ===========================================
   Used to surface server-side error messages (typically the `reason`
   field returned by mission claim / reward redeem when not_eligible)
   without overflowing the button label.

   Why a toast rather than inline error in the card?
   - Mission/reward buttons have small, fixed-ish widths inside slider
     tracks. Writing a 12-word reason into the button via
     button.textContent stretched the row (or got clipped depending on
     theme CSS), making the message invisible.
   - The same toast works for any source (button, modal close action,
     etc.) so we centralize the surface in one element.

   Positioning:
   - Desktop: bottom-center, just above the floating widget FAB which
     lives bottom-right. Centered horizontally to balance the FAB.
   - Mobile: bottom-center across the full width (minus margin).

   z-index notes:
   - lh-modal       = 99995
   - lh-fab open    = 99991
   - lh-toast       = 99996  ← above modals so a claim inside a modal
                                can still surface its toast.
*/
.lh-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    z-index: 99996;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 16px;
    max-width: min(520px, calc(100vw - 32px));
    background: #0f172a;
    color: #f8fafc;
    border-radius: 14px;
    box-shadow:
        0 24px 50px -15px rgba(15, 23, 42, 0.55),
        0 12px 24px -12px rgba(15, 23, 42, 0.35);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.lh-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.lh-toast[hidden] {
    /* Browser default display:none from [hidden] would skip the
       transition; we keep it laid out but invisible until is-visible. */
    display: flex !important;
}
.lh-toast__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}
.lh-toast__icon svg { width: 14px; height: 14px; }
.lh-toast__msg {
    flex: 1;
    min-width: 0;
    /* Allow long messages to wrap onto multiple lines instead of
       overflowing horizontally. Limit to a reasonable height with
       ellipsis on very long content. */
    word-wrap: break-word;
    overflow-wrap: anywhere;
    max-height: 4.4em;  /* ~3 lines */
    overflow: hidden;
}
.lh-toast__close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.10);
    color: #f8fafc;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 150ms ease;
}
.lh-toast__close:hover { background: rgba(255, 255, 255, 0.20); }
.lh-toast__close svg { width: 14px; height: 14px; }

/* Type variants. Default (no class) = neutral dark like above.
   Error variant uses a warm red border accent so it stands out from
   info/success without being aggressive. */
.lh-toast--error {
    background: #1f1115;
    border: 1px solid rgba(248, 113, 113, 0.45);
}
.lh-toast--error .lh-toast__icon { background: rgba(248, 113, 113, 0.22); color: #fecaca; }
.lh-toast--success {
    background: #0b1f1a;
    border: 1px solid rgba(52, 211, 153, 0.45);
}
.lh-toast--success .lh-toast__icon { background: rgba(52, 211, 153, 0.22); color: #a7f3d0; }
.lh-toast--info {
    background: #0e1a2e;
    border: 1px solid rgba(96, 165, 250, 0.45);
}
.lh-toast--info .lh-toast__icon { background: rgba(96, 165, 250, 0.22); color: #bfdbfe; }

@media (max-width: 480px) {
    .lh-toast {
        bottom: 16px;
        max-width: calc(100vw - 24px);
        font-size: 13px;
        padding: 10px 12px 10px 14px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .lh-toast {
        transition: opacity 100ms ease;
        transform: translateX(-50%) translateY(0);
    }
}

/* =========================================================================
   Wallet block (0.4.0 BETA)

   Lives inside the .lh-hero of the landing page. We render:
     - an optional flash banner (.lh-hero__wallet-error) when the URL
       carries ?wallet_status=wallet_error or wallet_unavailable
     - a one-line hint paragraph
     - the official-style "Add to Google Wallet" button

   THEME RESISTANCE STRATEGY
   PrestaShop themes (Classic, Hummingbird, Warehouse, etc.) commonly
   inject very broad anchor rules that override our button styling:
     a, .btn { background: ...; color: ...; padding: ...; border-radius: ...; }
   Some of those use !important. To bulletproof our button we combine:
     1. Selector specificity: .lh-wallet-btn.lh-wallet-btn--google
        (chained class → specificity 0,2,0 vs the typical 0,0,1 of `a`).
     2. !important on color-critical properties (background, color,
        border, font) where themes are most aggressive.
     3. Resetting every inheritable text style (line-height, text-
        decoration, text-transform, font-weight) so the button looks
        the same regardless of what the theme set on the parent.
     4. A wrapping `all: unset` on the inner spans would be ideal but
        breaks ARIA reading on some screen readers, so we go property
        by property.
   ========================================================================= */
.lh-hero__wallet {
    margin-top: 24px;
    text-align: center;
}
.lh-hero__wallet-hint {
    margin: 0 0 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
/* Error banner shown when the front controller redirected back with
   a status. White on a translucent red so it stays legible on the
   gradient hero background. */
.lh-hero__wallet-error {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 0 0 12px;
    font-size: 13px;
    color: #fff;
    background: rgba(220, 38, 38, 0.85);
    border-radius: 8px;
}
.lh-hero__wallet-error svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
}

/* =================  THE BUTTON  =================
   .lh-wallet-btn (doubled with --google) wins the specificity battle
   against most theme anchor rules. Everything color-critical carries
   !important so even themes that use !important on `a { ... }` can't
   override us. */
.lh-wallet-btn.lh-wallet-btn--google,
.lh-wallet-btn.lh-wallet-btn--google:link,
.lh-wallet-btn.lh-wallet-btn--google:visited {
    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 22px !important;
    min-width: 220px;
    min-height: 56px;
    box-sizing: border-box !important;

    /* Color — brand-compliant black pill */
    background: #000 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 1px solid #000 !important;
    border-radius: 999px !important;
    outline: none;

    /* Typography reset — themes love to inherit weird values here */
    font-family: 'Google Sans', 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: left;
    white-space: nowrap;

    /* Interaction */
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);

    /* Defensive: kill any inherited transforms / opacity that may come
       from theme card/button base rules. */
    opacity: 1 !important;
    transform: none;
    text-shadow: none !important;
}
.lh-wallet-btn.lh-wallet-btn--google:hover,
.lh-wallet-btn.lh-wallet-btn--google:focus,
.lh-wallet-btn.lh-wallet-btn--google:focus-visible {
    /* Brand guidelines forbid changing the BG color on hover — we
       just elevate. Re-asserting color because most themes change
       link color on hover via !important. */
    background: #000 !important;
    color: #FFFFFF !important;
    border-color: #000 !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
    outline: none;
}
.lh-wallet-btn.lh-wallet-btn--google:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.20);
}
.lh-wallet-btn.lh-wallet-btn--google:focus-visible {
    /* Accessible focus ring (keyboard nav) without breaking the brand. */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 4px 14px rgba(0, 0, 0, 0.32);
}

/* The icon wrapper: fixed size, prevents the SVG from being squeezed
   by flex when the parent shrinks on mobile. */
.lh-wallet-btn .lh-wallet-btn__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 32px;
    height: 32px;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
.lh-wallet-btn .lh-wallet-btn__icon svg {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    max-width: none !important;
    max-height: none !important;
}

/* The text block: two stacked lines */
.lh-wallet-btn .lh-wallet-btn__text {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
}
.lh-wallet-btn .lh-wallet-btn__text-top {
    display: block !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    line-height: 1.2 !important;
    color: #FFFFFF !important;
    opacity: 0.85;
    margin: 0 !important;
    padding: 0 !important;
}
.lh-wallet-btn .lh-wallet-btn__text-bottom {
    display: block !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.2 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
}

/* Tiny screens: keep the button readable but shrink the right side. */
@media (max-width: 360px) {
    .lh-wallet-btn.lh-wallet-btn--google {
        min-width: 0;
        padding: 8px 14px !important;
    }
    .lh-wallet-btn .lh-wallet-btn__text-bottom {
        font-size: 14px !important;
    }
}


/* =========================================================================
   Apple Wallet button (0.4.1 BETA)

   Same lockup architecture as Google's button — black pill, white
   two-line text, square icon on the left — with Apple's brand
   refinements:
     - SF Pro / -apple-system font stack (Apple's preferred font; on
       non-Apple OS it falls back gracefully)
     - Slightly tighter letter-spacing on the bottom text (Apple's
       lockup uses kerning typical of their interface)
     - The icon is the Wallet "stacked cards" glyph (white card on
       black bg — rendered inline as SVG in landing.tpl)

   We use the same chained-class specificity trick + !important on
   color-critical properties so the button survives aggressive theme
   anchor rules. See the Google variant above for the full rationale.

   Stacking on the landing: when both Google and Apple are enabled,
   the templates render two separate .lh-hero__wallet blocks stacked
   vertically. The merchant gets one button per platform without us
   trying to be clever about which OS the visitor uses (the OS sniff
   is unreliable on shared family devices, browsers with privacy
   shields, kiosk computers, etc. — better to let the user pick).
   ========================================================================= */

/* Block spacing when stacking after the Google block. */
.lh-hero__wallet + .lh-hero__wallet,
.lh-hero__wallet.lh-hero__wallet--apple {
    margin-top: 14px;
}

.lh-wallet-btn.lh-wallet-btn--apple,
.lh-wallet-btn.lh-wallet-btn--apple:link,
.lh-wallet-btn.lh-wallet-btn--apple:visited {
    /* Layout (mirrors the Google variant for visual consistency when
       both buttons are stacked) */
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 22px !important;
    min-width: 220px;
    min-height: 56px;
    box-sizing: border-box !important;

    /* Color — Apple's lockup is pure black with white text. We do
       NOT use the merchant's brand color here per Apple Brand
       Guidelines: the "Add to Apple Wallet" button MUST be solid
       black to be brand-compliant. */
    background: #000 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 1px solid #000 !important;
    border-radius: 999px !important;
    outline: none;

    /* Typography reset — prefer the system Apple font when available,
       fall back to a neutral sans on other platforms. */
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, 'Segoe UI', Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: left;
    white-space: nowrap;

    /* Interaction */
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);

    opacity: 1 !important;
    transform: none;
    text-shadow: none !important;
}
.lh-wallet-btn.lh-wallet-btn--apple:hover,
.lh-wallet-btn.lh-wallet-btn--apple:focus,
.lh-wallet-btn.lh-wallet-btn--apple:focus-visible {
    background: #000 !important;
    color: #FFFFFF !important;
    border-color: #000 !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
    outline: none;
}
.lh-wallet-btn.lh-wallet-btn--apple:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.20);
}
.lh-wallet-btn.lh-wallet-btn--apple:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 4px 14px rgba(0, 0, 0, 0.32);
}

/* Apple's bottom text uses slightly tighter letter-spacing for that
   distinctive Apple feel — narrows the kerning by ~10%. */
.lh-wallet-btn.lh-wallet-btn--apple .lh-wallet-btn__text-bottom {
    letter-spacing: -0.2px !important;
}

@media (max-width: 360px) {
    .lh-wallet-btn.lh-wallet-btn--apple {
        min-width: 0;
        padding: 8px 14px !important;
    }
}

/* ============================================================
   VIP TIERS LADDER (0.4.2)
   Premium-feel tier cards on the landing. Three states:
     .lh-tier.is-current   → strong tier-color accent + gradient bg + glow shadow
     .lh-tier.is-unlocked  → subtle tier-color border, white bg
     .lh-tier.is-locked    → muted gray, still readable

   Layout choices:
     - Status pill is absolutely positioned in the top-right
       corner (out of flow) so the tier name takes the full card
       width. The previous 3-column grid in the header squeezed
       the heading to ~70px and forced browser hyphenation
       (« Décou-verte », « Habi-tué », « Ex-pert »).
     - Header stacks vertically: badge on top, then name +
       threshold underneath — mirrors premium loyalty card
       designs (Sephora, Starbucks) and gives the name room to
       breathe at a larger font size (1.35rem vs 1.05rem).
     - Top accent bar uses --lh-tier-color so each tier is
       instantly recognizable at a glance.
     - Badge has a metallic gradient + inset highlight, with the
       current tier rendered in full saturated color and a soft
       glow shadow to draw the eye.
     - Perks have colored icon containers (instead of bare icons)
       so the visual link to the tier color is reinforced.
   ============================================================ */
.lh-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 8px;
}
.lh-tier {
    --lh-tier-color: #6366f1;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 22px 22px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lh-tier:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.16);
}

/* Top accent bar — instant visual identity per tier.
   Strongest on current, faintest on locked. */
.lh-tier::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--lh-tier-color);
    opacity: 0.55;
}
.lh-tier.is-current::before {
    opacity: 1;
    height: 5px;
}
.lh-tier.is-locked::before {
    opacity: 0.18;
}

/* State styling */
.lh-tier.is-unlocked {
    border-color: color-mix(in srgb, var(--lh-tier-color) 24%, #e5e7eb);
}
.lh-tier.is-locked {
    background: #fafbfc;
}
.lh-tier.is-locked:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.lh-tier.is-current {
    border-color: var(--lh-tier-color);
    box-shadow:
        0 16px 40px -12px color-mix(in srgb, var(--lh-tier-color) 32%, transparent),
        0 0 0 4px color-mix(in srgb, var(--lh-tier-color) 8%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--lh-tier-color) 6%, #fff) 0%,
        #fff 55%);
}
.lh-tier.is-current:hover {
    transform: translateY(-3px);
    box-shadow:
        0 22px 48px -12px color-mix(in srgb, var(--lh-tier-color) 36%, transparent),
        0 0 0 4px color-mix(in srgb, var(--lh-tier-color) 10%, transparent);
}

/* Status pill — absolute top-right, OUT of flow */
.lh-tier__status {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}
.lh-tier__status svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.lh-tier__status strong {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.lh-tier.is-current .lh-tier__status {
    color: #fff;
    background: var(--lh-tier-color);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--lh-tier-color) 45%, transparent);
}
.lh-tier.is-unlocked .lh-tier__status {
    color: var(--lh-tier-color);
    background: color-mix(in srgb, var(--lh-tier-color) 12%, #fff);
}
.lh-tier.is-locked .lh-tier__status {
    color: #94a3b8;
    background: #f1f5f9;
}

/* Header — vertical stack: badge on top, heading below.
   Top-padding on the badge clears the absolute status pill
   (which lives at top:16px right:16px). */
.lh-tier__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lh-tier__badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    color: var(--lh-tier-color);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--lh-tier-color) 22%, #fff) 0%,
        color-mix(in srgb, var(--lh-tier-color) 10%, #fff) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 2px 4px rgba(15, 23, 42, 0.05);
}
.lh-tier.is-current .lh-tier__badge {
    color: #fff;
    background: linear-gradient(135deg,
        var(--lh-tier-color) 0%,
        color-mix(in srgb, var(--lh-tier-color) 72%, #000) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 8px 22px color-mix(in srgb, var(--lh-tier-color) 42%, transparent);
}
.lh-tier.is-locked .lh-tier__badge {
    color: #cbd5e1;
    background: #f1f5f9;
    box-shadow: none;
}
.lh-tier__badge svg {
    width: 28px;
    height: 28px;
}

/* Heading — full card width below the badge */
.lh-tier__heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lh-tier__name {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #0f172a;
    /* No hyphens, no word-break: tier names are short and the
       status pill is no longer competing for horizontal space,
       so names render cleanly on a single line. */
}
.lh-tier.is-locked .lh-tier__name {
    color: #64748b;
}
.lh-tier__threshold {
    display: block;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.45;
}
.lh-tier__threshold strong {
    color: #0f172a;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Description (optional, merchant-supplied) */
.lh-tier__desc {
    margin: 0;
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.55;
}

/* Perks list — colored icon containers tie each perk visually
   to the tier's accent color. */
.lh-tier__perks {
    list-style: none;
    margin: 0;
    padding: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
    border-top: 1px solid #f1f5f9;
}
.lh-tier.is-current .lh-tier__perks {
    border-top-color: color-mix(in srgb, var(--lh-tier-color) 18%, #f1f5f9);
}
.lh-tier__perk {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 0.88rem;
    color: #0f172a;
    line-height: 1.4;
}
.lh-tier.is-locked .lh-tier__perk {
    color: #94a3b8;
}
.lh-tier__perk-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    color: var(--lh-tier-color);
    background: color-mix(in srgb, var(--lh-tier-color) 11%, #fff);
}
.lh-tier.is-current .lh-tier__perk-icon {
    background: color-mix(in srgb, var(--lh-tier-color) 16%, #fff);
}
.lh-tier.is-locked .lh-tier__perk-icon {
    color: #cbd5e1;
    background: #f8fafc;
}
.lh-tier__perk-icon svg {
    width: 16px;
    height: 16px;
}
.lh-tier__perk-label {
    flex: 1;
    min-width: 0;
}

/* Benefits — free-form merchant copy under the structured perks */
.lh-tier__benefits {
    margin: 0;
    padding-top: 14px;
    border-top: 1px dashed #e5e7eb;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.55;
    white-space: pre-wrap;
}
.lh-tier.is-locked .lh-tier__benefits {
    color: #94a3b8;
}

/* Mobile (≤ 760px): convert the tier grid into a horizontal
   scroll-snap slider, mirroring the .lh-slider__track behavior
   used by the rewards / missions sections below. Tap-and-swipe
   is the natural mobile pattern and avoids forcing the customer
   to scroll vertically through 4-5 stacked tier cards before
   reaching the next section. The 22% right padding leaves the
   next card peeking through so users know the row scrolls.

   Implementation notes:
     - grid-template-columns: none cancels the desktop auto-fit
       template so grid-auto-flow:column takes over.
     - grid-auto-columns: minmax(78%, 78%) pins each card to 78%
       of the viewport, identical to .lh-slider__track on mobile.
     - Bottom padding (18px) leaves room for the is-current glow
       shadow, which would otherwise be clipped by overflow-x:auto
       (browsers force overflow-y to clip when overflow-x clips). */
@media (max-width: 760px) {
    .lh-tiers {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(78%, 78%);
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 4px;
        scroll-behavior: smooth;
        padding: 6px 22% 18px 4px;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }
    .lh-tiers::-webkit-scrollbar { height: 6px; }
    .lh-tiers::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }
    .lh-tiers::-webkit-scrollbar-track { background: transparent; }
    .lh-tiers > .lh-tier {
        scroll-snap-align: start;
        min-width: 0;
    }
    /* Disable the hover-lift transform: on touch devices :hover
       sticks after tap and the card would stay weirdly translated.
       Other sliders (rewards/missions) have the same issue and
       it's tolerable, but here the is-current shadow is heavier so
       a lifted state would look broken. */
    .lh-tier:hover,
    .lh-tier.is-current:hover {
        transform: none;
    }
}

@media (max-width: 480px) {
    .lh-tier {
        padding: 20px 18px 18px;
        gap: 16px;
    }
    .lh-tier__head {
        gap: 12px;
    }
    .lh-tier__badge {
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }
    .lh-tier__badge svg {
        width: 24px;
        height: 24px;
    }
    .lh-tier__name {
        font-size: 1.2rem;
    }
}