/* Styles for Views/Loyalty/Index.cshtml */
.loyalty-selected-rewards {
    background: var(--home-soft);
}

.loyalty-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 0;
}

.loyalty-card {
    padding: clamp(24px, 5vw, 44px);
    border: 1px solid var(--home-border);
    border-radius: 22px;
    background: var(--home-surface);
    color: var(--home-text);
    text-align: center;
}

.loyalty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--home-soft);
    color: var(--home-accent);
}

.loyalty-card h1 {
    margin: 0 0 16px;
    font-size: 1.8rem;
    font-weight: 800;
}

.loyalty-description {
    margin-bottom: 24px;
    color: var(--home-muted);
    line-height: 1.9;
}

.loyalty-balance {
    margin-bottom: 24px;
    padding: 28px 20px;
    border: 1px solid var(--home-border);
    border-radius: 16px;
    background: var(--home-soft);
}

.loyalty-balance-label, .loyalty-balance-unit {
    margin: 0;
    color: var(--home-muted);
}

.loyalty-balance-value {
    margin: 12px 0;
    color: var(--home-accent);
    font-size: clamp(2.5rem, 7vw, 3.5rem);
    font-weight: 800;
    line-height: 1.2;
}

.loyalty-message {
    margin-bottom: 24px;
    color: var(--home-muted);
    line-height: 1.9;
}

.loyalty-active {
    color: var(--store-success, #267348);
    font-weight: 700;
}

.loyalty-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.loyalty-actions .btn {
    min-height: 44px;
    padding: 10px 20px;
    font-weight: 700;
}

.loyalty-batches {
    margin: 28px 0;
    text-align: start;
}

.loyalty-batches h2 {
    font-size: 1.2rem;
    font-weight: 800;
}

.loyalty-batches-help {
    color: var(--home-muted);
    line-height: 1.9;
}

.loyalty-batches-scroll {
    overflow-x: auto;
    border: 1px solid var(--home-border);
    border-radius: 14px;
}

.loyalty-batches-table {
    width: 100%;
    min-width: 580px;
    border-collapse: collapse;
    font-size: .9rem;
}

.loyalty-batches-table th, .loyalty-batches-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--home-border);
    vertical-align: middle;
}

.loyalty-batches-table th {
    background: var(--home-soft);
    font-weight: 800;
}

.loyalty-batches-table tr:last-child td {
    border-bottom: 0;
}

.loyalty-batch-status {
    display: inline-block;
    padding: 5px 9px;
    border: 1px solid var(--home-border);
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

.loyalty-batch-status.is-valid {
    color: var(--store-success, #267348);
}

.loyalty-batch-status.is-expired {
    color: var(--home-accent);
}

.loyalty-batch-status.is-used {
    color: var(--home-muted);
}

.loyalty-batch-original {
    display: block;
    margin-top: 4px;
    color: var(--home-muted);
    font-size: .78rem;
}

.loyalty-batches-empty {
    padding: 20px;
    background: var(--home-soft);
    border-radius: 12px;
    color: var(--home-muted);
}

.loyalty-page {
    max-width:1180px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:24px;
    align-items:start
}

.loyalty-card {
    grid-column:2;
    grid-row:1;
    text-align:initial;
    box-shadow:var(--home-shadow)
}

.loyalty-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px
}

.loyalty-head h1 {
    margin:0
}

.loyalty-info-button {
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid var(--home-border);
    background:var(--home-soft);
    color:var(--home-accent);
    font-weight:800;
    font-size:1.3rem
}

.loyalty-head {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    margin-bottom:22px
}

.loyalty-head h1 {
    text-align:center
}

.loyalty-greeting {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0
}

.loyalty-greeting .loyalty-icon {
    width:58px;
    height:58px;
    margin:0;
    flex:none
}

.loyalty-greeting span {
    display:block;
    color:var(--home-muted);
    font-size:.8rem
}

.loyalty-greeting strong {
    display:block;
    overflow-wrap:anywhere;
    line-height:1.35
}

.loyalty-head .loyalty-info-button {
    justify-self:end
}

.loyalty-balance {
    position:relative;
    isolation:isolate;
    max-width:390px;
    margin:0 auto 26px;
    padding:19px 24px;
    text-align:center;
    overflow:hidden;
    background:linear-gradient(135deg,#43231e,#753629 50%,#3e201b);
    border:1px solid #c6784c;
    color:#fff;
    box-shadow:0 12px 28px #9e493d33
}

.loyalty-balance::before,.loyalty-balance::after {
    content:'✦';
    position:absolute;
    color:#ffcf7d;
    opacity:.75;
    font-size:1.4rem;
    animation:loyalty-ember 3.2s ease-in-out infinite
}

.loyalty-balance::before {
    inset:10px auto auto 14px
}

.loyalty-balance::after {
    inset:auto 18px 12px auto;
    animation-delay:1.1s
}

.loyalty-balance-label,.loyalty-balance-unit {
    color:#ffe9da
}

.loyalty-balance-value {
    font-size:clamp(2.4rem,6vw,3.3rem);
    margin:3px 0;
    color:#ffd280;
    text-shadow:0 0 14px #ffba69b5;
    animation:loyalty-glow 3s ease-in-out infinite
}

@keyframes loyalty-ember {
    50% {
        transform:translateY(-9px) rotate(30deg);
        opacity:.35
    }

}

@keyframes loyalty-glow {
    50% {
        text-shadow:0 0 27px #ffce94
    }

}

.loyalty-icon {
    position:relative;
    background:radial-gradient(circle,#ffe9d7,var(--home-soft));
    animation:loyalty-float 3s ease-in-out infinite
}

.loyalty-icon:before,.loyalty-icon:after {
    content:'✦';
    position:absolute;
    color:var(--home-accent);
    font-size:1.2rem;
    animation:loyalty-spark 2.8s ease-in-out infinite
}

.loyalty-icon:before {
    inset:-10px auto auto -12px
}

.loyalty-icon:after {
    inset:auto -12px -8px auto;
    animation-delay:1s
}

@keyframes loyalty-float {
    50% {
        transform:translateY(-7px)
    }

}

@keyframes loyalty-spark {
    50% {
        opacity:.4;
        transform:scale(.6) rotate(25deg)
    }

}

.loyalty-batches-scroll {
    overflow:visible
}

.loyalty-batches-table {
    min-width:0
}

.loyalty-batches-table td {
    overflow-wrap:anywhere
}

.loyalty-activity {
    margin-top:30px;
    text-align:start
}

.loyalty-activity h2 {
    font-size:1.2rem
}

.loyalty-activity-list {
    display:grid;
    gap:10px
}

.loyalty-activity-item {
    display:flex;
    justify-content:space-between;
    gap:15px;
    align-items:center;
    padding:15px;
    border:1px solid var(--home-border);
    border-radius:14px;
    background:var(--home-bg)
}

.loyalty-activity-item small {
    display:block;
    color:var(--home-muted);
    margin-top:4px
}

.loyalty-activity-amount {
    font-weight:800;
    color:var(--store-success)
}

.loyalty-activity-amount.is-negative {
    color:var(--home-accent)
}

.loyalty-dialog {
    max-width:min(760px,calc(100vw - 28px));
    max-height:85vh;
    border:1px solid var(--home-border);
    border-radius:22px;
    background:var(--home-bg);
    color:var(--home-text);
    padding:22px;
    overflow:auto
}

.loyalty-dialog::backdrop {
    background:#17110fd0;
    backdrop-filter:blur(5px)
}

.loyalty-dialog .loyalty-policy {
    margin:10px 0 0
}

.loyalty-rewards {
    grid-column:1;
    grid-row:1;
    margin-top:0
}

.loyalty-rewards h2 {
    font-size:1.5rem;
    margin-bottom:8px
}

.loyalty-rewards>p {
    color:var(--home-muted)
}

.loyalty-reward-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(225px,1fr));
    gap:16px;
    margin-top:20px
}

.loyalty-reward-card {
    border:1px solid var(--home-border);
    border-radius:20px;
    background:var(--home-surface);
    overflow:hidden;
    box-shadow:var(--home-shadow);
    transition:transform .2s,box-shadow .2s
}

.loyalty-reward-card:hover {
    transform:translateY(-4px);
    box-shadow:0 20px 35px #25150c20
}

.loyalty-reward-card img {
    width:100%;
    height:190px;
    object-fit:cover
}

.loyalty-reward-placeholder {
    height:190px;
    display:grid;
    place-items:center;
    background:radial-gradient(circle,var(--home-soft),var(--home-bg));
    color:var(--home-accent);
    font-size:3rem
}

.loyalty-reward-card-body {
    padding:18px
}

.loyalty-reward-card h3 {
    font-size:1.12rem;
    margin:0 0 6px
}

.loyalty-reward-card p {
    color:var(--home-muted);
    font-size:.85rem
}

.loyalty-reward-cost {
    display:block;
    color:var(--home-accent);
    font-size:1.1rem;
    margin-bottom:12px
}

@media(prefers-reduced-motion:reduce) {
    .loyalty-reward-card {
        transition:none
    }

}

@media(max-width:700px) {
    .loyalty-batches-table thead {
        display:none
    }

    .loyalty-batches-table,.loyalty-batches-table tbody,.loyalty-batches-table tr {
        display:block
    }

    .loyalty-batches-table tr {
        padding:9px;
        border-bottom:1px solid var(--home-border)
    }

    .loyalty-batches-table td {
        display:flex;
        justify-content:space-between;
        gap:15px;
        padding:8px;
        border:0
    }

    .loyalty-batches-table td:before {
        content:attr(data-label);
        font-weight:700;
        color:var(--home-muted)
    }

    .loyalty-activity-item {
        align-items:start
    }

}

@media(max-width:1000px) {
    .loyalty-page {
        display:block
    }

    .loyalty-rewards {
        margin-top:28px
    }

}

@media(max-width:600px) {
    .loyalty-head {
        grid-template-columns:1fr auto;
        gap:14px
    }

    .loyalty-head h1 {
        grid-column:1/-1;
        grid-row:2
    }

    .loyalty-head .loyalty-info-button {
        grid-column:2;
        grid-row:1
    }

    .loyalty-greeting {
        grid-column:1;
        grid-row:1
    }

}

@media(prefers-reduced-motion:reduce) {
    .loyalty-icon,.loyalty-icon:before,.loyalty-icon:after,.loyalty-balance::before,.loyalty-balance::after,.loyalty-balance-value {
        animation:none
    }

}