/*
 * The html the loyalty layer renders into the customer app (App\Loyalty\ModulesHandler,
 * App\Loyalty\Scanner): the amounts a scan announces, the levels of a tiered cashback,
 * the locked items of the points shop, and the little forms of the birthday and
 * referral cards. The scanner page has its own copy of the amount colours.
 */

/* amounts in the messages of a scan */
.amount-plus { color: #a5dc86; }
.amount-minus { color: red; }
.amount-redeemed { color: #a5dc86; }

/* the levels of a tiered cashback, drawn in the popup under the note */
.cashback-levels { width: 100%; margin: 0 auto; }
.cashback-level { display: flex; align-items: center; margin-bottom: 4px; padding: 4px 12px; border: 1px solid #e0e0e0; border-radius: 12px; background: #fff; }
.cashback-level:last-child { margin-bottom: -12px; }
.cashback-level.tone-0 { --level-bg: #e8f5e9; --level-text: #2e7d32; }
.cashback-level.tone-1 { --level-bg: #e3f2fd; --level-text: #1565c0; }
.cashback-level.tone-2 { --level-bg: #fff3e0; --level-text: #ef6c00; }
.cashback-level.tone-3 { --level-bg: #fdecea; --level-text: #c62828; }
.cashback-level.tone-4 { --level-bg: #f3e5f5; --level-text: #6a1b9a; }
.cashback-level-text { flex: 1; }
.cashback-level-name { margin-bottom: 1px; font-size: 14px; font-weight: bold; color: #222; }
.cashback-level-hint { margin-bottom: -2px; font-size: 11px; color: #777; }
.cashback-level-spent { font-size: 18px; font-weight: bold; color: var(--level-text); }
.cashback-level-bubble { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 54px; margin-left: 15px; border-radius: 50%; background: var(--level-bg); color: var(--level-text); font-weight: bold; text-align: center; }
.cashback-level-rate { font-size: 16px; line-height: 1; }
.cashback-level-caption { margin-top: 2px; font-size: 7px; letter-spacing: .5px; }
/* the levels need the whole note: no fold, no fade */
#popup .popup-bottom:has(.cashback-levels) { max-height: none !important; overflow-y: visible !important; mask-image: none !important; }

/* an item of the points shop the customer cannot afford yet */
.points-item.points-item-locked { filter: blur(.75px); opacity: .4; background: #ddd; }

/* the forms in a popup: the birthday, the referral link */
.popup-form { padding: 16px; border-radius: 16px; background: #fff; }
.popup-form h4 { margin: 0 0 10px; font-family: 'Inter'; }
.popup-form-row { display: flex; margin-bottom: 10px; }
.popup-form-input { flex: 1; min-width: 150px; padding: 8px; border: 1px solid #ccc; border-radius: 8px 0 0 8px; font-size: 14px; color: #333; }
.popup-form-input.popup-form-link { min-width: 200px; font-size: 11px; color: #aaa; }
.popup-form-button { padding: 8px 12px; border: 1px solid #ccc; border-left: none; border-radius: 0 8px 8px 0; background-color: #f0f0f0; font-size: 16px; cursor: pointer; }
.popup-form-share { width: 50%; padding: 8px; border: none; border-radius: 8px; background-color: #007bff; color: #fff; font-family: 'Inter'; font-size: 16px; cursor: pointer; }