.loyalty-wheel-content { padding:28px 20px; border:0; border-radius:24px; background:#fffaf1; overflow:hidden; color:#29213f }
.loyalty-wheel-close { position:absolute; right:18px; top:14px }
.loyalty-wheel-tier { margin:0 30px 8px; font-size:13px; font-weight:700; color:#766141 }
#loyalty-wheel-title { font-size:28px; font-weight:800; color:#29213f }
#loyalty-wheel-status { font-size:14px; margin-bottom:0; height:42px; overflow-y:auto }
.loyalty-wheel-frame { position:relative; width:min(78vw,360px); height:min(78vw,360px); margin:24px auto; padding:12px; border-radius:50%; background:#d8a23d; box-shadow:0 8px 0 #a87525,0 14px 28px #3d2a3226 }
.loyalty-wheel-frame::after { content:''; position:absolute; inset:5px; border:3px dotted #fff5c6; border-radius:50%; pointer-events:none }
.loyalty-wheel-pointer { position:absolute; z-index:3; top:-11px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:16px solid transparent; border-right:16px solid transparent; border-top:35px solid #ed5745; filter:drop-shadow(0 3px 2px #0004) }
.loyalty-wheel-art { position:relative; width:100%; height:100%; border-radius:50%; background:conic-gradient(#fff5d6 0deg 59deg,#d8a23d 59deg 60deg,#f7d781 60deg 119deg,#d8a23d 119deg 120deg,#fff5d6 120deg 179deg,#d8a23d 179deg 180deg,#f7d781 180deg 239deg,#d8a23d 239deg 240deg,#fff5d6 240deg 299deg,#d8a23d 299deg 300deg,#f7d781 300deg 359deg,#d8a23d 359deg 360deg); will-change:transform }
.loyalty-wheel-slice { position:absolute; transform:translate(-50%,-50%); width:29%; display:flex; flex-direction:column; align-items:center; gap:5px; font-size:clamp(9px,2.6vw,12px); line-height:1.15; font-weight:700; color:#362b12; text-align:center }
.loyalty-wheel-slice img { display:block; width:clamp(34px,12vw,58px); height:clamp(34px,12vw,58px); object-fit:contain }
.loyalty-wheel-hub { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:16%; height:16%; border-radius:50%; background:#fffaf1; border:4px solid #d8a23d; box-shadow:0 2px 8px #0003; color:#be7c25; font-size:24px }
#loyalty-wheel-prize-image { width:84px; height:84px; object-fit:contain }
/* Reveal the prize by expanding the section below the stationary result wheel. */
.loyalty-wheel-content { max-height:calc(100dvh - 32px); overflow-y:auto }
.loyalty-wheel-result-space { display:grid; grid-template-rows:0fr; margin-bottom:0; transition:grid-template-rows .4s ease,margin-bottom .4s ease }
.loyalty-wheel-result-space.has-result { grid-template-rows:1fr; margin-bottom:16px }
#loyalty-wheel-reveal { min-height:0; overflow:hidden; opacity:1; transform:translateY(0); transition:opacity .35s ease,transform .35s ease; animation:none }
#loyalty-wheel-reveal.is-hidden { opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none }
.loyalty-wheel-result-image { height:88px; display:flex; align-items:center; justify-content:center }
#loyalty-wheel-result { overflow-wrap:anywhere; font-size:20px; line-height:1.3; margin:8px 0 }
#loyalty-wheel-continue { width:100%; min-height:44px }
.loyalty-wheel-hub { z-index:2 }
.loyalty-punch { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; min-height:12px }
.loyalty-progress-image { width:100%; max-width:60px; height:52px; object-fit:contain; opacity:.35; filter:grayscale(1) }
.loyalty-punch.is-earned .loyalty-progress-image { opacity:1; filter:none }
.loyalty-punch-bar { display:block; width:100%; height:12px; border-radius:9px; background:#ffffff55 }
.loyalty-punch.is-earned .loyalty-punch-bar { background:#f8c644 }
@media (max-width:575px) { .loyalty-wheel-content { padding:24px 16px } .loyalty-wheel-frame { width:min(72vw,300px); height:min(72vw,300px); margin:20px auto } }
@media (prefers-reduced-motion:reduce) { #loyalty-wheel-reveal, .loyalty-wheel-result-space { transition:none } }

@media (max-height:740px) { .loyalty-wheel-frame { width:min(65vw,240px); height:min(65vw,240px); margin:16px auto } .loyalty-wheel-content { padding-top:20px;padding-bottom:20px } }

/* Compact menu header: progress and coin balance follow the supplied menu design. */
.menu-loyalty-header { position:fixed; top:130px; left:0; width:100%; z-index:110; padding:0 0 12px }
.menu-loyalty-header[hidden] { display:none }
.menu-loyalty-panel { display:grid; grid-template-columns:minmax(0,3fr) minmax(110px,2fr); width:100%; margin:auto; border-radius:16px; background:linear-gradient(115deg,var(--loyalty-start),var(--loyalty-end)); color:#fff; box-shadow:0 4px 12px #0001; overflow:hidden }
/* The supplied web designs use neutral platinum and icy blue diamond. */
.menu-loyalty-panel[data-tier="4"] { background:linear-gradient(115deg,#60656a,#92999f) }
.menu-loyalty-panel[data-tier="5"] { background:linear-gradient(115deg,#486a78,#829eac) }
.menu-loyalty-progress { padding:12px 16px; min-width:0 }
.menu-loyalty-title { font-size:16px; font-weight:700; line-height:1.3; margin:0 0 6px; color:#fff !important }
.menu-loyalty-title span { font-weight:400 }
.menu-loyalty-punches { display:flex; gap:8px; max-width:280px; height:30px; align-items:center }
.menu-loyalty-punches .loyalty-progress-image { height:30px; max-width:36px }
.menu-loyalty-punches .loyalty-punch-bar { height:8px }
.menu-loyalty-count, .menu-loyalty-note, .menu-loyalty-value { display:block; font-size:12px; line-height:1.4 }
.menu-loyalty-coins { padding:12px 16px; border-left:1px solid #ffffff50; min-width:0 }
.menu-loyalty-coin-name { display:block; font-size:13px; overflow-wrap:anywhere; line-height:1.3 }
.menu-loyalty-balance { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:32px }
.menu-loyalty-balance img { flex-shrink:0; width:30px; height:30px; object-fit:contain }
.menu-loyalty-balance strong { font-size:20px; line-height:1.2; white-space:nowrap; font-variant-numeric:tabular-nums }
.menu-loyalty-balance strong.is-large-balance { font-size:16px }
.menu-loyalty-sign-in { display:inline-flex; align-items:center; min-height:44px; color:#fff !important; font-size:13px; text-decoration:underline; font-weight:600 }
.menu-loyalty-action { grid-column:1 / -1; padding:8px 16px; border-top:1px solid #ffffff50; font-size:13px; overflow-wrap:anywhere }
.menu-loyalty-action > span { display:block; font-size:12px }
.menu-loyalty-spin { background:#fffaf1; color:#382819; min-height:44px; white-space:normal; margin:0 }
.menu-loyalty-spin:hover, .menu-loyalty-spin:focus { background:#fff; color:#382819 }
.menu-loyalty-panel a:focus-visible, .menu-loyalty-panel button:focus-visible { outline:3px solid #fff; outline-offset:2px }
@media(max-width:575px) {
 .menu-loyalty-header .container { padding-left:16px; padding-right:16px }
 .menu-loyalty-progress, .menu-loyalty-coins { padding:10px 12px }
 .menu-loyalty-title { font-size:14px }
 .menu-loyalty-punches { gap:5px }
 .menu-loyalty-coin-name { font-size:12px }
 .menu-loyalty-balance strong { font-size:18px }
 .menu-loyalty-balance strong.is-large-balance { font-size:12px }
}

.menu-rewards-expanded > .menu-search-box-cont { margin-top:0 !important; padding-top:0 !important }

.menu-loyalty-punches { height:30px; margin:6px 0 3px; max-width:200px; gap:6px }
.menu-loyalty-punches .has-progress-image { flex:1; max-width:30px; aspect-ratio:1; height:auto; min-height:0 }
.menu-loyalty-punches .has-progress-image:not(.is-earned) { border-radius:50%; border:1px solid #ffffff66; background:transparent }
.menu-loyalty-punches .has-progress-image:not(.is-earned) .loyalty-progress-image { display:none }
.menu-loyalty-punches .has-progress-image.is-earned .loyalty-progress-image { max-width:30px; height:28px; opacity:1; filter:none }
.menu-loyalty-count { font-weight:400; font-size:11px }
.menu-loyalty-title strong { font-weight:700 }

/* Scope positioning and backdrop changes to the rewards wheel only. */
#loyalty-wheel-modal .modal-dialog { width:calc(100% - 32px); max-width:500px; min-height:calc(100dvh - 32px); margin:16px auto; display:flex; align-items:center }
#loyalty-wheel-modal .modal-dialog::before { display:none }
#loyalty-wheel-modal .modal-content { width:100%; max-height:calc(100dvh - 32px) }
.modal-backdrop.loyalty-wheel-backdrop.show { opacity:.7 }
.loyalty-tier-card { background:linear-gradient(115deg,var(--loyalty-start),var(--loyalty-end)) }
.loyalty-tier-card[data-tier="4"] { background:linear-gradient(115deg,#60656a,#92999f) }
.loyalty-tier-card[data-tier="5"] { background:linear-gradient(115deg,#486a78,#829eac) }
.loyalty-tier-punches .has-progress-image { max-width:52px; aspect-ratio:1; min-height:0 }
.loyalty-tier-punches .has-progress-image:not(.is-earned) { border-radius:50%; border:1px solid #ffffff66 }
.loyalty-tier-punches .has-progress-image:not(.is-earned) .loyalty-progress-image { display:none }