.zartab-loyalty-panel {
    margin: 28px 0;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid #e4e7f0;
    border-radius: 24px;
    background: linear-gradient(135deg, #f8f7ff 0%, #fff9f4 100%);
    box-shadow: 0 12px 30px rgba(39, 47, 91, .06);
}

.zartab-loyalty-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.zartab-loyalty-panel__eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #ef4056;
    font-size: .8rem;
    font-weight: 800;
}

.zartab-loyalty-panel h2,
.zartab-loyalty-panel h3,
.zartab-loyalty-panel h4 { margin: 0; color: #283050; }
.zartab-loyalty-panel h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.zartab-loyalty-panel p { margin: 8px 0 0; color: #687087; }

.zartab-loyalty-balance {
    display: grid;
    min-width: 100px;
    padding: 12px 16px;
    border-radius: 18px;
    background: #283050;
    color: #fff;
    text-align: center;
}

.zartab-loyalty-balance strong { font-size: 1.55rem; line-height: 1.2; }
.zartab-loyalty-balance span { color: #fbd16a; font-size: .8rem; font-weight: 700; }

.zartab-loyalty-ways {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0;
}

.zartab-loyalty-ways span {
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    color: #596078;
    font-size: .78rem;
}

.zartab-loyalty-rewards {
    padding-top: 18px;
    border-top: 1px solid rgba(39, 47, 91, .1);
}

.zartab-loyalty-rewards__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.zartab-loyalty-rewards__heading span { color: #687087; font-size: .8rem; }
.zartab-loyalty-rewards__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); gap: 12px; }

.zartab-loyalty-reward {
    padding: 16px;
    border: 1px solid rgba(39, 47, 91, .1);
    border-radius: 17px;
    background: #fff;
}

.zartab-loyalty-reward.is-locked { opacity: .72; }
.zartab-loyalty-reward__top { display: flex; justify-content: space-between; gap: 8px; color: #ef4056; font-size: .8rem; font-weight: 800; }
.zartab-loyalty-reward__top strong { color: #596078; font-size: .76rem; }
.zartab-loyalty-reward h4 { margin-top: 12px; font-size: 1rem; }
.zartab-loyalty-reward p { min-height: 1.4em; font-size: .82rem; }
.zartab-loyalty-reward button { width: 100%; margin-top: 14px; border: 0; border-radius: 10px; padding: 10px 12px; background: #ef4056; color: #fff; cursor: pointer; font: inherit; font-weight: 700; }
.zartab-loyalty-reward__locked { display: block; margin-top: 14px; color: #8b91a2; font-size: .78rem; }
.zartab-loyalty-empty { padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, .75); color: #687087; text-align: center; }

@media (max-width: 600px) {
    .zartab-loyalty-panel { margin: 20px 0; border-radius: 18px; }
    .zartab-loyalty-panel__header { align-items: stretch; flex-direction: column; }
    .zartab-loyalty-balance { width: 100%; }
    .zartab-loyalty-rewards__heading { align-items: flex-start; flex-direction: column; }
}