/* LoyaltyHub — front-shared.css
   UI partagee entre le widget flottant et les pages de compte.
   Genere depuis front.css — ne pas editer a la main. */
.loyaltyhub-block { color: #1f2937; }
.loyaltyhub-card {
    border: 1px solid #d9dee7;
    border-radius: 8px;
    padding: 16px;
    background: #fff;
}
.loyaltyhub-muted { color: #667085; }
.lh-tier {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.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-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; }
.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-modal {
    position: fixed;
    inset: 0;
    z-index: 99995; 
    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;
}
.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;
}
.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);
}
.lh-modal__fields {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lh-modal__fields .lh-modal__field[hidden] { display: none !important; }
.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;
}
.lh-floating.is-open ~ .lh-modal:not([hidden]) ~ .lh-floating .lh-panel,
.lh-modal:not([hidden]) ~ .lh-floating .lh-panel {
    
}
.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] {
    
    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;
    
    word-wrap: break-word;
    overflow-wrap: anywhere;
    max-height: 4.4em;  
    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; }
.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);
}
.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;
}
.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);
}
.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;
}
.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.is-locked .lh-tier__name {
    color: #64748b;
}
.lh-tier.is-current .lh-tier__perks {
    border-top-color: color-mix(in srgb, var(--lh-tier-color) 18%, #f1f5f9);
}
.lh-tier.is-locked .lh-tier__perk {
    color: #94a3b8;
}
.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.is-locked .lh-tier__benefits {
    color: #94a3b8;
}
.lh-modal__panel.lh-modal__panel--referral {
    max-width: 480px;
}

@media (max-width: 640px) {
.lh-referral-card__row .lh-btn { justify-content: center; }
}

@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; }
.lh-toast {
        bottom: 16px;
        max-width: calc(100vw - 24px);
        font-size: 13px;
        padding: 10px 12px 10px 14px;
    }
.lh-tier {
        padding: 20px 18px 18px;
        gap: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
.lh-toast {
        transition: opacity 100ms ease;
        transform: translateX(-50%) translateY(0);
    }
}

@media (max-width: 760px) {
.lh-tiers > .lh-tier {
        scroll-snap-align: start;
        min-width: 0;
    }
.lh-tier:hover,
    .lh-tier.is-current:hover {
        transform: none;
    }
}