/* Scoped loyalty components: follows the existing theme token system. */
.loyalty-modal .modal-content { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--ui-radius-square); }
.loyalty-modal .modal-header { border-bottom-color: var(--border); }
.loyalty-modal .form-control, .loyalty-modal .form-select { background: var(--surface2); color: var(--text); border-color: var(--border); border-radius: var(--ui-radius-square); }
.loyalty-modal .form-control:focus, .loyalty-modal .form-select:focus { border-color: var(--accent2); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent2) 25%, transparent); }
.loyalty-wallet, .loyalty-quote { display: grid; gap: var(--ui-control-gap); }
.loyalty-balance { display: grid; gap: 2px; padding: var(--ui-safe-inset); background: var(--surface2); border: 1px solid var(--border); border-left: 4px solid var(--accent); }
.loyalty-balance strong { color: var(--accent2); font-size: 1.35rem; }
.loyalty-balance small, .loyalty-muted { color: var(--text-muted); }
.loyalty-warning { padding: var(--ui-safe-inset); border: 1px solid var(--warning-ink); color: var(--warning-ink); background: var(--surface2); }
.loyalty-error { padding: var(--ui-safe-inset); border: 1px solid var(--neon-red); color: var(--neon-red); background: var(--surface2); }
.loyalty-loading { color: var(--text-muted); padding: var(--ui-safe-inset); }
.loyalty-rewards { display: flex; flex-wrap: wrap; gap: var(--ui-control-gap); }
.loyalty-modal .btn { border-radius: var(--ui-radius-square); min-height: var(--ui-control-height); }
.loyalty-list, .loyalty-rules { margin: 0; padding-left: 1.2rem; }
.loyalty-list li { margin-bottom: .45rem; }
.loyalty-list span { display: block; font-size: .82rem; }
.loyalty-totals { margin: 0; border: 1px solid var(--border); }
.loyalty-totals div, .loyalty-order-summary dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ui-control-gap); min-width: 0; padding: .45rem var(--ui-safe-inset); }
.loyalty-totals dt, .loyalty-totals dd, .loyalty-order-summary dt, .loyalty-order-summary dd { min-width: 0; overflow-wrap: anywhere; }
.loyalty-totals div:nth-child(odd), .loyalty-order-summary dl div:nth-child(odd) { background: var(--surface2); }
.loyalty-totals dt, .loyalty-totals dd, .loyalty-order-summary dt, .loyalty-order-summary dd { margin: 0; }
.loyalty-total { border-top: 1px solid var(--accent); color: var(--accent); font-weight: 700; }
.loyalty-order-summary dl { margin: 0 0 var(--ui-control-gap); border: 1px solid var(--border); }
.loyalty-modal textarea { min-height: 5rem; }
@media (max-width: 576px) { .loyalty-rewards .btn { width: 100%; } .loyalty-modal .modal-dialog { margin: var(--ui-safe-inset); } }
body[data-mobile-chrome="1"] .loyalty-rewards .btn { width: 100%; }
body[data-mobile-chrome="1"] .loyalty-modal .modal-dialog { margin: var(--ui-safe-inset); }