/* loyalty.css — coins-saldo och belöningstrappa i kundportalen */

.loyalty-balance-card {
    padding: var(--space-4);
    text-align: center;
    background: var(--gradient-accent);
}
.loyalty-balance-value {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}
.loyalty-balance-label {
    display: block;
    margin-top: .5rem;
    font-size: .9rem;
    opacity: .9;
}

.loyalty-ladder {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.loyalty-tier {
    opacity: .6;
}
.loyalty-tier--reached { opacity: 1; }
.loyalty-tier-bar {
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    overflow: hidden;
}
.loyalty-tier-bar-fill {
    height: 100%;
    background: var(--gradient-accent);
    transition: width .4s ease;
}
.loyalty-tier-meta {
    display: flex;
    justify-content: space-between;
    margin-top: .3rem;
    font-size: .85rem;
}
.loyalty-tier--reached .loyalty-tier-status { color: #50dc8c; font-weight: 600; }
.loyalty-tier-status { color: var(--color-text-faint); }

/* Enkel tabellstil återanvänd här så den funkar utan att ladda admin.css */
table.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
table.admin-table th, table.admin-table td {
    padding: .75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-surface-border);
    font-size: .9rem;
}
table.admin-table th { color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; }
table.admin-table tr:last-child td { border-bottom: none; }

/* Medlemsrang-kort */
.membership-rank-card { padding: var(--space-3); margin-top: var(--space-2); }
.membership-rank-badge {
    display: inline-block;
    padding: .3rem .9rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: .6rem;
}
.membership-rank-card--volunteer .membership-rank-badge { background: rgba(255,255,255,.1); }
.membership-rank-card--monthly_donor .membership-rank-badge { background: var(--gradient-accent); }
.membership-rank-card--sponsor .membership-rank-badge { background: linear-gradient(135deg,#f0b43c,#f0783c); }
.membership-privileges { margin-top: .75rem; padding-left: 1.2rem; font-size: .85rem; color: var(--color-text-muted); }
.membership-privileges li { margin-bottom: .25rem; }

/* Sponsorpanel i kundportalen */
.sponsor-panel {
    padding: var(--space-3);
    margin-top: var(--space-2);
    border: 1px solid rgba(240,180,60,.35);
    background: linear-gradient(135deg, rgba(240,180,60,.06), rgba(240,120,60,.04));
}

/* Badge-grid */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: .75rem;
    margin-bottom: var(--space-3);
}
.badge-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .8rem .4rem;
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid var(--color-surface-border);
    background: var(--color-surface);
}
.badge-tile--earned {
    border-color: rgba(240,180,60,.4);
    box-shadow: 0 0 14px rgba(240,180,60,.12);
}
.badge-tile--locked { opacity: .45; }
.badge-tile-icon { font-size: 1.8rem; }
.badge-tile-label { font-size: .68rem; color: var(--color-text-muted); line-height: 1.2; }

/* Referral */
.referral-panel { padding: var(--space-3); }
.referral-link-box { display: flex; gap: .5rem; margin-top: .75rem; }
.referral-link-box input {
    flex: 1;
    padding: .6rem .8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-surface-border);
    background: rgba(255,255,255,.03);
    color: var(--color-text);
    font-size: .82rem;
}

/* Badge-upplåsning: overlay + konfetti */
.badge-unlock-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(11,13,18,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .6s ease;
    overflow: hidden;
}
.badge-unlock-overlay--fading { opacity: 0; pointer-events: none; }
.badge-unlock-card {
    background: var(--color-bg-alt);
    border: 1px solid rgba(240,180,60,.4);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
    max-width: 340px;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 60px rgba(240,180,60,.25);
    animation: badgeCardPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badgeCardPop {
    0% { transform: scale(.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.badge-unlock-icon { font-size: 3.5rem; margin-bottom: .5rem; animation: badgeIconBounce 1s ease infinite; }
@keyframes badgeIconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.badge-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.confetti-piece {
    position: absolute;
    top: -20px;
    width: 8px;
    height: 14px;
    opacity: .9;
    animation-name: confettiFall;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(600deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .badge-unlock-icon, .confetti-piece, .badge-unlock-card { animation: none; }
}

/* Banner för aktiv coins-kampanj (t.ex. "Dubbla coins i helgen") */
.coin-campaign-banner {
    text-align: center;
    padding: .75rem 1rem;
    background: rgba(240, 180, 60, .12);
    border: 1px solid rgba(240, 180, 60, .35);
    border-radius: var(--radius-md);
    color: #f0b43c;
    font-size: .92rem;
    margin-bottom: var(--space-3);
}
.coin-campaign-banner strong { color: inherit; }