/* ── RepRewards Frontend Styles v1.1.0 ───────────────────────────────────── */
:root {
    --rr-primary:   #111111;
    --rr-accent:    #FF8E00;
    --rr-success:   #16A34A;
    --rr-error:     #DC2626;
    --rr-warning:   #D97706;
    --rr-bg:        #F4F6F9;
    --rr-card:      #FFFFFF;
    --rr-border:    #E2E8F0;
    --rr-text:      #1A202C;
    --rr-muted:     #64748B;
    --rr-radius:    12px;
    --rr-shadow:    0 2px 12px rgba(0,0,0,.08);

    /* Brand-specific tones (POP Smart) */
    --rr-brand-orange:      #FF8E00;
    --rr-brand-black:       #111111;
    --rr-brand-gray-dark:   #666666;
    --rr-brand-gray-light:  #E6E6E6;
}

.rr-wrap { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--rr-text); }

/* ── Header (white bar — identity + logout) ──────────────────────────────── */
.rr-header { background: var(--rr-card); color: var(--rr-primary); border: none; border-radius: var(--rr-radius); padding: 1rem 1.25rem; margin-bottom: .75rem; position: sticky; top: 0; z-index: 50; }
.rr-header-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.rr-header-identity h1 { margin: 0 0 .15rem; font-size: 1.2rem; color: var(--rr-primary); font-weight: 700; }
.rr-subtitle { margin: 0; color: var(--rr-muted); font-size: .8rem; }

/* Logout button pinned top-right */
.rr-logout { font-size: .8rem; padding: .65rem 1.75rem; white-space: nowrap; flex-shrink: 0; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.rr-card { background: var(--rr-card) !important; border: none !important; border-radius: var(--rr-radius); padding: 1rem; margin-bottom: 1rem; box-shadow: var(--rr-shadow), inset 0 0 0 1px rgba(0,0,0,.06) !important; }
.rr-section-title { font-size: 1rem; font-weight: 700; color: var(--rr-primary); margin: 0 0 1rem; display: flex; align-items: center; gap: .5rem; border-bottom: 2px solid var(--rr-border); padding-bottom: .6rem; }
.rr-section-icon { font-size: 1.1rem; }

/* ── My Stats grid ───────────────────────────────────────────────────────── */
.rr-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.rr-stat-card { background: var(--rr-bg); border: 1.5px solid var(--rr-border); border-radius: 10px; padding: .9rem .75rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.rr-stat-icon { font-size: 1.4rem; line-height: 1; }
.rr-stat-num { font-size: 1.75rem; font-weight: 700; color: var(--rr-primary); line-height: 1.1; }
.rr-stat-label { font-size: .72rem; color: var(--rr-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.rr-stat-sub { width: 100%; margin-top: .4rem; }
.rr-stat-sub-text { font-size: .72rem; color: var(--rr-muted); display: block; margin-top: .3rem; }
.rr-progress-bar--sm { height: 6px; background: var(--rr-border); border-radius: 99px; overflow: hidden; }
.rr-progress-fill--draw { background: #D97706; }
.rr-rewards-heading { font-size: 1.1rem; font-weight: 500; color: var(--rr-primary); margin: 0 0 .75rem; text-transform: uppercase; letter-spacing: .03em; }
.rr-draw-heading-row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.rr-draw-heading-row .rr-rewards-heading { margin-bottom: .75rem; }
.rr-draw-next-label { margin: 0 0 .75rem; }
.rr-gb-status .rr-empty { text-align: center; color: var(--rr-primary); font-style: normal; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.rr-btn { display: inline-block !important; padding: .6rem 1.25rem !important; border-radius: 8px !important; font-size: .9rem !important; font-weight: 700 !important; cursor: pointer; border: none !important; text-decoration: none !important; transition: all .15s; text-transform: uppercase; letter-spacing: .03em; box-shadow: none !important; -webkit-appearance: none; appearance: none; }
.rr-btn-primary { background: var(--rr-accent) !important; color: #fff !important; border: none !important; box-shadow: none !important; }
.rr-btn-primary:hover { background: #E07E00 !important; color: #fff !important; }
.rr-btn-secondary { background: var(--rr-bg) !important; color: var(--rr-primary) !important; border: 1px solid var(--rr-border) !important; }
.rr-btn-secondary:hover { background: var(--rr-border) !important; }
.rr-btn-outline { background: transparent !important; color: var(--rr-primary) !important; border: 1.5px solid var(--rr-border) !important; }
.rr-btn-outline:hover { background: var(--rr-bg) !important; }
.rr-logout { background: #f5f5f5 !important; color: #000000 !important; border: none !important; }
.rr-logout:hover { background: #e8e8e8 !important; color: #000000 !important; }
.rr-btn-full { width: 100% !important; justify-content: center; display: block !important; text-align: center; }
.rr-btn-link { background: none !important; border: none !important; padding: 0 !important; color: var(--rr-accent) !important; font-size: inherit !important; font-weight: 600 !important; cursor: pointer; text-decoration: underline !important; text-underline-offset: 2px; text-transform: none !important; }
.rr-btn-link:hover { color: var(--rr-primary) !important; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.rr-form-row { margin-bottom: 1rem; }
.rr-popup-modal-inner form > .rr-btn-full { margin-top: 1.5rem; }
.rr-popup-modal-inner form .rr-form-group { margin-bottom: 1rem; }
.rr-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rr-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* Password reveal toggle — always visible, replaces the native browser icon */
.rr-password-wrap { position: relative; }
.rr-password-wrap .rr-input { padding-right: 2.75rem; }
.rr-password-toggle { position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); background: none !important; border: none !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; cursor: pointer; padding: .25rem; color: var(--rr-accent) !important; display: flex; align-items: center; }
.rr-password-toggle:hover { color: var(--rr-accent) !important; }
.rr-eye-icon { display: block; }

/* Suppress native browser password reveal/clear icons so ours is the only one shown */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-strong-password-auto-fill-button { display: none !important; visibility: hidden; pointer-events: none; }
.rr-input-error { border-color: var(--rr-error) !important; }

/* Landing-page login/registration popups */
.rr-popup-modal { z-index: 100000; }
.rr-popup-modal-inner { max-width: 420px; width: 100%; text-align: left; max-height: 90vh; overflow-y: auto; }
.rr-popup-modal-inner--wide { max-width: 640px; }
.rr-popup-modal-inner h2 { color: var(--rr-muted); text-align: center; margin-bottom: 1rem; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.rr-popup-switch { text-align: center; font-size: .85rem; color: var(--rr-muted); margin-top: 1.5rem; }
.rr-popup-hint { font-size: .85rem; color: var(--rr-muted); margin: 0 0 1rem; }

/* Post-registration welcome banner above login form */
.rr-login-reg-banner {
    background: #fff8e1;
    border: 1px solid var(--rr-brand-orange);
    border-radius: 8px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .88rem;
    color: var(--rr-primary);
    line-height: 1.5;
}
.rr-login-reg-banner p { margin: 0 0 .4rem; }
.rr-login-reg-banner p:last-child { margin-bottom: 0; }
.rr-login-reg-banner ul, .rr-login-reg-banner ol { margin: .3rem 0 .4rem 1.25rem; padding: 0; }
.rr-login-reg-banner li { margin-bottom: .2rem; }
.rr-popup-switch a { color: var(--rr-accent); font-weight: 600; text-decoration: none; }
.rr-popup-switch a:hover { text-decoration: underline; }
.rr-form-group { display: flex; flex-direction: column; gap: .35rem; position: relative; }
.rr-form-group label { font-size: .85rem; font-weight: 600; color: var(--rr-primary); }
.rr-input { padding: .6rem .85rem; border: 1.5px solid var(--rr-border); border-radius: 8px; font-size: .9rem; width: 100%; box-sizing: border-box; transition: border-color .15s; }
.rr-input:focus { outline: none; border-color: var(--rr-accent); }
.rr-input-readonly { background: var(--rr-bg); color: var(--rr-muted); }
.rr-input-file { padding: .5rem 0; border: none; font-size: .85rem; color: var(--rr-muted); }
.rr-input-file::file-selector-button,
.rr-input-file::-webkit-file-upload-button {
    background: var(--rr-accent); color: #fff; border: none; padding: .6rem 1.25rem;
    border-radius: 8px; font-weight: 700; font-size: .85rem; text-transform: uppercase;
    letter-spacing: .03em; cursor: pointer; margin-right: .85rem; transition: background .15s;
}
.rr-input-file::file-selector-button:hover,
.rr-input-file::-webkit-file-upload-button:hover { background: #E07E00; }

/* Sell & Earn card layout */
.rr-sell-card { background: var(--rr-brand-gray-light); border-radius: var(--rr-radius); padding: 1.5rem; box-sizing: border-box; width: 100%; max-width: 100%; overflow: hidden; min-width: 0; }
.rr-sell-innerbox { background: #fff; border-radius: 10px; padding: 1.5rem; box-sizing: border-box; width: 100%; max-width: 100%; overflow: hidden; min-width: 0; }
.rr-sell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.rr-form-group { width: 100%; box-sizing: border-box; }
.rr-input, .rr-input-file, select.rr-input { width: 100%; max-width: 100%; box-sizing: border-box; }
.rr-sell-eyebrow { font-size: 1.15rem; color: var(--rr-muted); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .5rem; }
.rr-sell-headline { font-size: 1.2rem; font-weight: 700; color: var(--rr-primary); margin: 0 0 .2rem; line-height: 1.4; }
.rr-sell-note { font-size: .85rem; color: var(--rr-muted); font-style: italic; margin: 0; }
.rr-sell-fields { display: flex; flex-direction: column; gap: 1rem; }
.rr-btn-upload { background: #2C9FE0 !important; color: #fff !important; border: none !important; }
.rr-btn-upload:hover { background: #2489C7 !important; color: #fff !important; }

/* Info button pinned to top-right of white section cards */
.rr-section-info-btn {
    flex-shrink: 0;
    z-index: 2;
}

/* Full-width row for View Previous Boards */
.rr-home-card-row--full { grid-template-columns: 1fr !important; }
.rr-home-card-row--full .rr-home-inner-block { background: none; padding: .25rem 0; }

/* Gameboard row: always 3 cols */
.rr-home-gb-row { grid-template-columns: repeat(3, 1fr); }
.rr-home-gb-history-block { display: flex; flex-direction: column; align-items: center; gap: .5rem; justify-content: center; background: var(--rr-brand-orange) !important; border-radius: 10px; padding: .65rem .5rem !important; }
.rr-home-gb-play-label { font-size: .62rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .03em; }
.rr-home-gb-view-row { text-align: center; margin-top: .4rem; }
.rr-home-gb-view-link {
    font-size: 12px !important; font-weight: 700; color: #000 !important;
    text-transform: uppercase; letter-spacing: .03em;
    text-decoration: none !important; cursor: pointer;
    background: none !important; border: none !important; padding: 0 !important;
    display: inline-block;
}
.rr-home-gb-view-link:hover { color: #000 !important; }
/* Underline only the word "View" via a span */
.rr-home-gb-view-link .rr-underline { text-decoration: underline; }

.rr-btn-orange { background: var(--rr-brand-orange) !important; color: #fff !important; border: none !important; }
.rr-btn-orange:hover { background: #e07b00 !important; color: #fff !important; }

@media (max-width: 640px) {
    /* Labels wrap so numbers align across blocks */
    .rr-home-inner-label { white-space: normal; line-height: 1.3; }
}

@media (max-width: 640px) {
    .rr-sell-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .rr-sell-card  { padding: 1rem; }
    .rr-sell-innerbox { padding: 1.25rem; }
}
.rr-required { color: var(--rr-error); }
.rr-optional { color: var(--rr-muted); font-weight: 400; }
.rr-field-hint { font-size: .78rem; color: var(--rr-muted); margin: 0; }

/* Autocomplete */
.rr-autocomplete-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--rr-border); border-radius: 8px; background: #fff; position: absolute; z-index: 100; width: 100%; box-shadow: var(--rr-shadow); max-height: 200px; overflow-y: auto; top: 100%; }
.rr-autocomplete-list li { padding: .6rem .85rem; cursor: pointer; font-size: .9rem; }
.rr-autocomplete-list li:hover { background: var(--rr-bg); }
#rr-username-status.available { color: var(--rr-success); }
#rr-username-status.taken { color: var(--rr-error); }

/* ── Notices ─────────────────────────────────────────────────────────────── */
.rr-notice { padding: .85rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem; }
.rr-notice.success, .rr-notice-success { background: #DCFCE7; color: #166534; border: 1px solid #BBF7D0; }
.rr-notice.error,   .rr-notice-error   { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.rr-table-wrap { overflow-x: auto; }
.rr-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.rr-table th { background: var(--rr-brand-gray-dark); color: #fff; padding: .65rem .85rem; text-align: left; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.rr-table td { padding: .6rem .85rem; border-bottom: 1px solid var(--rr-border); vertical-align: middle; }
.rr-table tr:last-child td { border-bottom: none; }
.rr-table tr:hover td { background: var(--rr-bg); }
.rr-history-table th, .rr-history-table td { font-size: .8rem; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.rr-badge { display: inline-block; padding: .2rem .6rem; border-radius: 99px; font-size: .75rem; font-weight: 600; }
.rr-badge-success { background: #DCFCE7; color: #166534; }
.rr-badge-error   { background: #FEE2E2; color: #991B1B; }
.rr-badge-neutral { background: var(--rr-bg); color: var(--rr-muted); }
.rr-badge-star    { background: #FEF3C7; color: #92400E; margin-left: .35rem; }

/* ── Upload tabs ─────────────────────────────────────────────────────────── */
.rr-upload-tabs { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.rr-tab-btn { padding: .55rem 1.1rem; border: 1.5px solid var(--rr-border); border-radius: 8px; background: var(--rr-bg); font-size: .875rem; font-weight: 600; cursor: pointer; color: var(--rr-muted); transition: all .15s; }
.rr-tab-btn.rr-active { background: var(--rr-primary); color: #fff; border-color: var(--rr-primary); }
.rr-upload-info { font-size: .9rem; color: var(--rr-muted); margin-bottom: 1rem; }
.rr-pos-quota-lines { margin: .75rem 0 1.25rem; }
.rr-pos-quota-lines p { margin: 0 0 .25rem; font-size: .85rem; color: var(--rr-primary); }
.rr-pos-quota-lines p:last-child { margin-bottom: 0; }
.rr-quota-num { font-weight: 700; }
.rr-pos-upload-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.rr-pos-upload-row .rr-form-group { margin-bottom: 0; flex: 1; min-width: 200px; }
.rr-pos-upload-row .rr-btn-upload { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 640px) {
    .rr-pos-upload-row { flex-direction: column; align-items: stretch; }
    .rr-pos-upload-row .rr-btn-upload { width: 100%; text-align: center; }
}
.rr-subsection-title { font-size: 1rem; margin: 1.25rem 0 .75rem; color: var(--rr-primary); }

/* ── Quiz ────────────────────────────────────────────────────────────────── */
.rr-question-card { border: 1.5px solid var(--rr-border); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.rr-question-text { font-size: .95rem; font-weight: 600; margin: 0 0 .35rem; }
.rr-question-points { font-size: .8rem; color: var(--rr-muted); margin: 0 0 .85rem; }
.rr-answers { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.rr-answer-label { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .9rem; padding: .5rem .75rem; border: 1.5px solid var(--rr-border); border-radius: 8px; transition: border-color .15s; }
.rr-answer-label:hover { border-color: var(--rr-accent); }
.rr-answer-label input[type="radio"] { accent-color: var(--rr-accent); }
.rr-answer-result { margin-top: .75rem; padding: .65rem .9rem; border-radius: 8px; font-size: .875rem; font-weight: 600; }
.rr-answer-result.correct   { background: #DCFCE7; color: #166534; }
.rr-answer-result.incorrect { background: #FEE2E2; color: #991B1B; }
.rr-history-toggle { margin-top: 1.25rem; }
.rr-history-toggle summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--rr-primary); padding: .5rem 0; list-style: none; display: flex; align-items: center; justify-content: flex-start; }
.rr-history-toggle summary::-webkit-details-marker { display: none; }
.rr-history-toggle summary::marker { content: ''; }
.rr-history-toggle summary::after { content: ''; width: 10px; height: 10px; margin-left: .5rem; border-right: 2px solid var(--rr-brand-gray-dark); border-bottom: 2px solid var(--rr-brand-gray-dark); transform: rotate(45deg); transition: transform .2s; flex-shrink: 0; }
.rr-history-toggle[open] summary::after { transform: rotate(-135deg); }

/* ── Leaderboards ────────────────────────────────────────────────────────── */
.rr-leaderboard-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.rr-lb-panel { background: var(--rr-bg); border-radius: 10px; padding: 1rem 1.25rem; display: flex; flex-direction: column; }
.rr-lb-panel h3 { margin: 0 0 .85rem; font-size: 1.1rem; color: var(--rr-primary); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.rr-lb-panel--store { grid-column: auto; }

/* White inner box for list content, matching the My Dashboard "rank box" pattern */
.rr-lb-innerbox { background: #fff; border-radius: 10px; padding: .6rem .9rem; min-height: 7.5rem; box-sizing: border-box; flex: 1; }

/* Colour-coded panels matching the brand mockup — heading colour only now; list content sits on white */
.rr-lb-panel--orange { background: var(--rr-brand-orange); }
.rr-lb-panel--orange h3 { color: var(--rr-primary); }

.rr-lb-panel--gray { background: var(--rr-brand-gray-light); }
.rr-lb-panel--gray h3 { color: var(--rr-brand-gray-dark); }

.rr-lb-panel--dark { background: var(--rr-brand-gray-dark); }
.rr-lb-panel--dark h3 { color: #fff; }

.rr-lb-list { list-style: none; padding: 0; margin: 0; }
.rr-lb-item { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; flex-wrap: wrap; }
.rr-lb-item:last-child { border-bottom: none; }
.rr-lb-rank { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--rr-primary); color: #fff; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rr-lb-list--podium .rr-lb-item:nth-child(1) .rr-lb-rank { background: #D4AF37; }
.rr-lb-list--podium .rr-lb-item:nth-child(2) .rr-lb-rank { background: #A8A9AD; }
.rr-lb-list--podium .rr-lb-item:nth-child(3) .rr-lb-rank { background: #CD7F32; }

/* Numbered circle badges (Pharmacy Ranking / Top Participants panels) */
.rr-lb-badge { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--rr-brand-orange); color: #fff; font-size: .65rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Top 10 Participants: 1-3 orange, 4-6 light grey, 7-10 dark grey */
.rr-lb-panel--dark .rr-lb-list--badge .rr-lb-item:nth-child(n+4) .rr-lb-badge { background: #B3B3B3; }
.rr-lb-panel--dark .rr-lb-list--badge .rr-lb-item:nth-child(n+7) .rr-lb-badge { background: var(--rr-brand-gray-dark); }

/* Pharmacy Ranking: 1st orange, rest dark grey */
.rr-lb-panel--gray .rr-lb-list--badge .rr-lb-item:nth-child(n+2) .rr-lb-badge { background: var(--rr-brand-gray-dark); }

.rr-lb-name { flex: 1; font-weight: 500; color: var(--rr-primary); }
.rr-lb-pts { font-size: 1.3rem; font-weight: 800; color: var(--rr-primary); white-space: nowrap; }
.rr-lb-overall { display: inline; font-size: .7rem; color: var(--rr-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; margin-left: .4rem; }
.rr-lb-location { font-size: .78rem; color: var(--rr-muted); font-weight: 400; }

/* ── New 4-column leaderboard blocks ──────────────────────────────────────── */
.rr-lb-four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.rr-lb-rank-block { background: var(--rr-bg); border-radius: 10px; padding: .9rem 1rem; }
.rr-lb-rank-block-title { margin: 0 0 .7rem; font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--rr-primary); border-bottom: 2px solid var(--rr-brand-orange); padding-bottom: .4rem; }
.rr-lb-rank-list { list-style: none; padding: 0; margin: 0; }
.rr-lb-rank-row { display: flex; align-items: center; gap: .4rem; padding: .3rem 0; border-bottom: 1px solid var(--rr-border); font-size: .82rem; }
.rr-lb-rank-row:last-child { border-bottom: none; }
.rr-lb-hidden { display: none; }
.rr-lb-rank-num { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fff; border: 1.5px solid #ddd; color: #000; font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rr-lb-rank-name { flex: 1; color: var(--rr-primary); font-weight: 500; cursor: pointer; }
.rr-lb-rank-name:hover { color: var(--rr-brand-orange); text-decoration: underline; }
.rr-lb-rank-val { font-weight: 700; color: var(--rr-brand-orange); white-space: nowrap; }
.rr-lb-show-more { background: none; border: none; color: var(--rr-brand-orange); font-size: .78rem; cursor: pointer; padding: .35rem 0 0; font-weight: 600; }
.rr-lb-show-more:hover { text-decoration: underline; }

@media (max-width: 900px) { .rr-lb-four-col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .rr-lb-four-col { grid-template-columns: 1fr; } }

/* ── Draw Winners section ─────────────────────────────────────────────────── */
.rr-winners-list { display: flex; flex-direction: column; gap: 1.25rem; }
.rr-winners-draw-block { background: var(--rr-bg); border-radius: 10px; overflow: hidden; }

/* ── Progress bars (standalone) ──────────────────────────────────────────── */
.rr-progress-bar { height: 12px; background: #E2E8F0; border-radius: 99px; overflow: hidden; margin-bottom: .5rem; }
.rr-progress-fill { height: 100%; background: var(--rr-accent); border-radius: 99px; transition: width .4s ease; }
.rr-progress-fill--store { background: var(--rr-success); }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.rr-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.rr-modal-inner { background: #fff; border-radius: var(--rr-radius); padding: 2rem; text-align: center; max-width: 380px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.2); position: relative; }
.rr-image-viewer-inner { max-width: 90vw; max-height: 90vh; padding: 1rem; overflow: auto; }
.rr-image-viewer-inner img { max-width: 100%; max-height: 80vh; display: block; margin: 0 auto; border-radius: 8px; }
.rr-modal-wide { max-width: 700px; text-align: left; max-height: 85vh; overflow-y: auto; }
.rr-modal-icon { font-size: 3rem; margin-bottom: .75rem; }
.rr-modal-inner h2 { color: var(--rr-primary); margin: 0 0 .5rem; }
.rr-modal-inner p { color: var(--rr-muted); margin: 0 0 1.25rem; }
.rr-modal-close { position: absolute; top: .35rem; right: .5rem; background: none !important; border: none !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; font-size: 2.75rem !important; cursor: pointer; color: var(--rr-brand-gray-dark) !important; line-height: 1; padding: 0; border-radius: 0; }
.rr-modal-close:hover { background: none !important; color: var(--rr-primary) !important; }

/* Staff detail modal sections */
.rr-modal-staff-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 2px solid var(--rr-border); }
.rr-modal-staff-name { font-size: 1.25rem; font-weight: 700; color: var(--rr-primary); margin: 0; }
.rr-modal-staff-store { color: var(--rr-muted); font-size: .9rem; margin: .2rem 0 0; }
.rr-modal-points-badge { background: var(--rr-primary); color: #fff; border-radius: 10px; padding: .5rem .9rem; text-align: center; flex-shrink: 0; }
.rr-modal-points-badge span:first-child { display: block; font-size: 1.5rem; font-weight: 700; }
.rr-modal-points-badge span:last-child { font-size: .7rem; opacity: .8; }
.rr-modal-section { margin-bottom: 1.5rem; }
.rr-modal-section h3 { font-size: .95rem; font-weight: 700; color: var(--rr-primary); margin: 0 0 .75rem; }
.rr-pos-preview img { max-width: 100%; border-radius: 8px; border: 1px solid var(--rr-border); }
.rr-pos-uploader-note { font-size: .85rem; color: var(--rr-success); font-weight: 600; margin-top: .5rem; }

/* ── Login ───────────────────────────────────────────────────────────────── */
.rr-login-wrap { display: flex; justify-content: center; align-items: flex-start; padding: 3rem 1rem; min-height: 60vh; }
.rr-login-box { background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: var(--rr-radius); padding: 2.25rem 2rem; width: 100%; max-width: 400px; box-shadow: var(--rr-shadow); }
.rr-login-logo { text-align: center; margin-bottom: 1.75rem; }
.rr-login-logo h1 { font-size: 1rem; color: var(--rr-primary); margin: 0 0 .35rem; font-weight: 700; }
.rr-login-logo p { color: var(--rr-muted); margin: 0; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.rr-login-form .rr-form-group { margin-bottom: 1rem; }
.rr-login-remember { margin-bottom: 1.25rem; font-size: .875rem; color: var(--rr-muted); }
.rr-login-remember label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }

/* PWA install button */
.rr-btn-install { background: #F0F7FF !important; color: var(--rr-accent) !important; border: 1.5px solid var(--rr-accent) !important; margin-top: .85rem; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.rr-btn-install:hover { background: var(--rr-accent) !important; color: #fff !important; }
.rr-install-icon { font-size: 1rem; }

/* iOS install modal */
.rr-ios-modal-inner { max-width: 360px; text-align: left; padding: 1.75rem; }
.rr-ios-modal-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--rr-border); padding-bottom: 1.25rem; }
.rr-ios-app-icon { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; }
.rr-ios-modal-header h2 { margin: 0 0 .2rem; font-size: 1.1rem; color: var(--rr-primary); }
.rr-ios-modal-header p { margin: 0; font-size: .8rem; color: var(--rr-muted); }
.rr-ios-steps { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.rr-ios-step { display: flex; align-items: flex-start; gap: .85rem; }
.rr-ios-step-icon { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--rr-primary); color: #fff; font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .1rem; }
.rr-ios-step-text { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .9rem; line-height: 1.5; }
.rr-ios-step-text strong { flex-basis: 100%; }
.rr-ios-symbol { display: inline-flex; align-items: center; }
.rr-ios-symbol svg { width: 1.1rem; height: 1.1rem; color: var(--rr-accent); vertical-align: middle; }
.rr-ios-pill { background: var(--rr-bg); border: 1px solid var(--rr-border); border-radius: 6px; padding: .15rem .5rem; font-size: .85rem; font-weight: 600; color: var(--rr-primary); white-space: nowrap; }
.rr-ios-footer { font-size: .8rem; color: var(--rr-muted); margin: 0 0 1.25rem; text-align: center; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.rr-empty { color: var(--rr-muted); font-style: italic; font-size: .9rem; }

/* ── Stats Bar ───────────────────────────────────────────────────────────── */
.rr-stats-bar { background: var(--rr-primary); border-radius: var(--rr-radius); margin-bottom: .5rem; padding: .75rem 1rem; }
.rr-stats-bar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.rr-sbar-card { background: rgba(255,255,255,.1); border-radius: 8px; padding: .65rem .75rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.rr-sbar-num { font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1.1; }
.rr-sbar-label { font-size: .65rem; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.rr-sbar-progress { width: 100%; height: 4px; background: rgba(255,255,255,.2); border-radius: 99px; overflow: hidden; margin-top: .25rem; }
.rr-sbar-progress .rr-progress-fill { height: 100%; border-radius: 99px; }
.rr-sbar-sub { font-size: .65rem; color: rgba(255,255,255,.6); }

/* ── Tab nav (rep dashboard) ─────────────────────────────────────────────── */
.rr-main-tabs { display: flex; gap: 0; margin-bottom: 0; border-bottom: 2px solid var(--rr-border); }
.rr-main-tab-btn { flex: 1; padding: .65rem .4rem; border: 1.5px solid var(--rr-border); border-bottom: none; border-right: none; background: var(--rr-bg); font-size: .75rem; font-weight: 600; cursor: pointer; color: var(--rr-muted); transition: all .15s; text-align: center; }
.rr-main-tab-btn:last-child { border-right: 1.5px solid var(--rr-border); }
.rr-main-tab-btn:hover { background: #fff4e6 !important; color: var(--rr-brand-orange) !important; border-color: var(--rr-brand-orange) !important; }
.rr-main-tab-btn.rr-active { background: var(--rr-card); color: var(--rr-primary); border-bottom-color: var(--rr-card); margin-bottom: -2px; z-index: 1; position: relative; }
.rr-main-tab-btn.rr-active:hover { background: var(--rr-card) !important; color: var(--rr-primary) !important; border-color: var(--rr-border) !important; border-bottom-color: var(--rr-card) !important; }
.rr-pending-count { display: inline-block; background: var(--rr-accent); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 99px; padding: .05rem .45rem; margin-left: .3rem; }

/* Pending Approvals (rep dashboard) */
.rr-pending-card { border: 1px solid var(--rr-border); border-radius: var(--rr-radius); padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.rr-pending-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .85rem; }
.rr-pending-meta { font-size: .8rem; color: var(--rr-muted); }
.rr-pending-card-body .rr-form-group { max-width: 320px; margin-bottom: .5rem; }
.rr-pending-detail { font-size: .82rem; color: var(--rr-muted); margin: 0 0 1rem; }
.rr-pending-card-actions { display: flex; gap: .75rem; margin-top: .85rem; }
.rr-pending-card-actions .rr-btn { width: auto; padding: .55rem 1.5rem; }
.rr-pending-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem .75rem; margin-bottom: .1rem; }
.rr-pending-detail-item { display: flex; flex-direction: column; gap: .1rem; }
.rr-pending-detail-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rr-muted); }
.rr-pending-editable-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem .75rem; margin-bottom: .75rem; }
@media (max-width: 640px) {
    .rr-pending-detail-grid,
    .rr-pending-editable-grid { grid-template-columns: 1fr; }
}
.rr-main-tab-panel.rr-card { border-radius: 0 0 var(--rr-radius) var(--rr-radius); border-top: none; }
.rr-dashboard-heading { font-size: 1rem; font-weight: 700; color: var(--rr-primary); margin: 0 0 .9rem; }
.rr-welcome-block { padding: .9rem 1rem; background: #EFF6FF; border-radius: 8px; border-left: 3px solid var(--rr-accent); margin-bottom: .75rem; }
.rr-welcome-heading { font-size: .95rem; font-weight: 700; color: var(--rr-primary); margin: 0 0 .35rem; }
.rr-welcome-text { font-size: .875rem; color: var(--rr-muted); margin: 0; line-height: 1.5; }
.rr-instructions-block { padding: .9rem 1rem; background: #F0FDF4; border-radius: 8px; border-left: 3px solid #16A34A; }
.rr-instructions-heading { font-size: .95rem; font-weight: 700; color: #166534; margin: 0 0 .35rem; }
.rr-instructions-text { font-size: .875rem; color: #166534; margin: 0; line-height: 1.6; }
.rr-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.rr-product-tile { background: var(--rr-brand-gray-light); border: none; border-radius: 10px; padding: .9rem .8rem; text-align: left; cursor: pointer; transition: all .15s; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.rr-product-tile:hover { box-shadow: 0 2px 10px rgba(0,0,0,.15); transform: translateY(-2px); }
.rr-product-tile--done { opacity: .5; pointer-events: none; }
/* Colour rotation matching the brand mockup: orange, light gray, dark gray, black */
.rr-product-tile:nth-child(4n+1) { background: var(--rr-brand-orange); }
.rr-product-tile:nth-child(4n+3) { background: var(--rr-brand-gray-dark); }
.rr-product-tile:nth-child(4n+4) { background: var(--rr-brand-black); }
.rr-product-tile:nth-child(4n+1) .rr-product-tile-name,
.rr-product-tile:nth-child(4n+3) .rr-product-tile-name,
.rr-product-tile:nth-child(4n+4) .rr-product-tile-name { color: #fff; }
.rr-product-tile:nth-child(4n+1) .rr-product-tile-count,
.rr-product-tile:nth-child(4n+3) .rr-product-tile-count { color: rgba(255,255,255,.8); }
.rr-product-tile:nth-child(4n+4) .rr-product-tile-count { color: rgba(255,255,255,.65); }
.rr-product-tile:nth-child(4n+1) .rr-product-tile-cta { color: var(--rr-primary); }
.rr-product-tile:nth-child(4n+3) .rr-product-tile-cta,
.rr-product-tile:nth-child(4n+4) .rr-product-tile-cta { color: #fff; }
.rr-product-tile-img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 6px; }
.rr-product-tile-placeholder { width: 100%; aspect-ratio: 1; background: rgba(0,0,0,.08); border-radius: 6px; }
.rr-product-tile-name { font-size: .82rem; font-weight: 800; color: var(--rr-primary); line-height: 1.2; text-transform: uppercase; }
.rr-product-tile-count { font-size: .7rem; color: var(--rr-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.rr-product-tile-cta { font-size: .75rem; font-weight: 700; color: var(--rr-accent); text-decoration: underline; margin-top: .2rem; text-transform: uppercase; letter-spacing: .02em; }
.rr-product-modal-inner { max-width: 420px; text-align: left; padding: 1.5rem 1.25rem; max-height: 85vh; overflow-y: auto; }
.rr-pm-section { margin-bottom: 1rem; }
.rr-pm-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rr-accent); margin: 0 0 .4rem; }
.rr-pm-learning-text { font-size: .875rem; color: var(--rr-text); line-height: 1.5; background: #EFF6FF; border-radius: 8px; padding: .75rem; margin: 0; }
.rr-pm-question { font-size: .95rem; font-weight: 700; color: var(--rr-primary); margin: 0 0 .25rem; }
.rr-pm-answers { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .75rem; }
.rr-answer-letter-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--rr-primary); color: #fff; font-size: .7rem; font-weight: 700; flex-shrink: 0; }
.rr-pm-explanation { background: #DCFCE7; border-radius: 8px; padding: .75rem; font-size: .85rem; color: #166534; margin-top: .75rem; line-height: 1.4; }
.rr-answer-letter { font-weight: 700; font-size: .85rem; }
.rr-answer-clickable { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.rr-answer-wrong { color: var(--rr-error); }
.rr-answer-correct { color: var(--rr-success); }
.rr-answer-tip { display: inline-block; background: #FEF3C7; border: 1px solid #FCD34D; border-radius: 6px; padding: .2rem .5rem; font-size: .78rem; color: #92400E; margin-left: .5rem; }

/* ── Sequential quiz UI ───────────────────────────────────────────────────── */
.rr-quiz-progress-bar-wrap { height: 6px; background: var(--rr-brand-gray-light); border-radius: 3px; margin: .75rem 0 .4rem; overflow: hidden; }
.rr-quiz-progress-bar { height: 100%; background: var(--rr-brand-orange); border-radius: 3px; transition: width .35s ease; }
.rr-quiz-progress-label { font-size: .78rem; color: var(--rr-muted); margin: 0 0 .9rem; text-align: right; }
.rr-quiz-counter { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rr-accent); margin: 0 0 .5rem; }
.rr-quiz-product-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; padding-bottom: .75rem; border-bottom: 1px solid var(--rr-border); }
.rr-quiz-product-img-wrap { position: relative; flex-shrink: 0; width: 52px; }
.rr-quiz-product-img { width: 52px; height: 52px; object-fit: contain; border-radius: 6px; border: 1px solid var(--rr-border); display: block; }
.rr-quiz-product-img-wrap .rr-quiz-product-img:hover { opacity: .85; }
.rr-quiz-img-zoom {
    position: absolute; top: -7px; right: -7px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #f0f0f0; border: 1px solid #ddd;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.rr-quiz-product-name { font-size: .8rem; font-weight: 700; color: var(--rr-primary); text-transform: uppercase; letter-spacing: .04em; }
.rr-quiz-product-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rr-muted); margin: 0 0 .6rem; }
.rr-quiz-loading { color: var(--rr-muted); font-size: .9rem; padding: 1rem 0; }
.rr-quiz-all-done { text-align: center; padding: 2rem 1rem; }
.rr-quiz-all-done-icon { display: none; }
.rr-quiz-all-done-msg { font-size: .95rem; font-weight: 600; color: var(--rr-primary); line-height: 1.5; max-width: 340px; margin: 0 auto; }

/* ── Weekly Lucky Draw — winner list (nickname + prize, ranked by sales) ──── */
.rr-draw-winners { display: flex; flex-direction: column; gap: .5rem; }
.rr-draw-winner-row { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: 10px; background: var(--rr-bg); font-size: .95rem; }
.rr-draw-winner-medal { font-size: 1.05rem; font-weight: 700; min-width: 60px; }
.rr-draw-winner-name { font-weight: 600; color: var(--rr-primary); flex: 1; }
.rr-draw-winner-prize { font-size: .85rem; color: var(--rr-muted); }
.rr-draw-win-msg { background: linear-gradient(135deg,#FFD700,#FFA500); color: #1E3A5F; border-radius: 10px; padding: 1rem; font-size: 1rem; margin-top: .75rem; font-weight: 600; text-align: center; }
.rr-btn-outline-dark { background: transparent !important; color: var(--rr-primary) !important; border: 1.5px solid var(--rr-border) !important; display: block; width: 100%; }
.rr-btn-outline-dark:hover { background: var(--rr-bg) !important; }
.rr-btn-outline-accent { background: #fff !important; color: var(--rr-brand-orange) !important; border: 1.5px solid var(--rr-brand-orange) !important; display: block; width: 100%; text-align: center; }
.rr-btn-outline-accent:hover { background: #fff4e6 !important; color: var(--rr-brand-orange) !important; }
.rr-btn-view-receipt { display: inline-block !important; width: auto !important; padding: .35rem .85rem !important; font-size: .72rem !important; white-space: nowrap; }

/* ── My Rewards ──────────────────────────────────────────────────────────── */
.rr-rewards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.rr-reward-card { background: var(--rr-bg); border: 1.5px solid var(--rr-border); border-radius: 10px; padding: 1.1rem; text-align: center; }
.rr-reward-card--draw { border-color: #FFD700; background: #FFFBEB; }
.rr-reward-icon { font-size: 1.75rem; margin-bottom: .4rem; }
.rr-reward-label { font-size: .9rem; font-weight: 700; color: var(--rr-primary); margin-bottom: .25rem; }
.rr-reward-pts { font-size: .8rem; color: var(--rr-accent); font-weight: 600; }
.rr-reward-date { font-size: .75rem; color: var(--rr-muted); margin-top: .25rem; }

/* ── Carousel (staff dashboard main nav: 4 swipeable cards) ─────────────── */
.rr-carousel { margin-top: .25rem; }
.rr-carousel-nav { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.rr-carousel-arrow { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 0; border: none !important; outline: none !important; background: transparent !important; -webkit-appearance: none; appearance: none; color: var(--rr-brand-gray-light) !important; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; padding: 0; box-shadow: none !important; }
.rr-carousel-arrow:hover, .rr-carousel-arrow:focus { color: var(--rr-accent) !important; background: transparent !important; border: none !important; outline: none !important; }
.rr-carousel-arrow svg { width: 28px; height: 28px; }
.rr-carousel-dots { flex: 1; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; }
.rr-carousel-dots::-webkit-scrollbar { display: none; }
.rr-carousel-dot { flex: 1; min-width: 0; white-space: nowrap; padding: .55rem .5rem; border: 1.5px solid var(--rr-brand-gray-dark) !important; border-radius: 8px; background: #fff !important; font-size: .72rem; font-weight: 700; color: var(--rr-brand-gray-dark) !important; cursor: pointer; text-align: center; transition: all .15s; text-transform: uppercase; letter-spacing: .02em; box-shadow: none !important; -webkit-appearance: none; appearance: none; }
.rr-carousel-dot.rr-active { background: var(--rr-accent) !important; color: #fff !important; border-color: var(--rr-accent) !important; }
.rr-carousel-viewport { overflow-x: hidden; overflow-y: visible; border-radius: var(--rr-radius); }
.rr-carousel-track { display: flex; transition: transform .3s ease; }
.rr-carousel-slide { flex: 0 0 100%; width: 100%; box-sizing: border-box; margin-bottom: 0; min-height: 200px; }
.rr-card-title { font-size: 1.05rem; font-weight: 800; color: var(--rr-primary); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .02em; }

/* My Dashboard: all sections stacked as individual cards (no sub-tabs) */
.rr-dashboard-card { background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: var(--rr-radius); padding: 1.25rem; margin-bottom: 1rem; }
.rr-dashboard-card:last-child { margin-bottom: 0; }

/* My Dashboard persistent summary section (3 cards, above the carousel) */
.rr-dashboard-summary { background: var(--rr-card); border-radius: var(--rr-radius); box-shadow: var(--rr-shadow); padding: 1.25rem; margin-bottom: 1rem; }
.rr-dashboard-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.rr-dashboard-summary-grid .rr-dashboard-card { margin-bottom: 0; border: none; }
.rr-stats-list { list-style: none; margin: 0; padding: 0 .9rem; display: flex; flex-direction: column; gap: .6rem; }
.rr-stats-list li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.rr-stats-label { font-size: .72rem; font-weight: 600; color: var(--rr-primary); line-height: 1.3; }
.rr-stats-label-sub { font-size: .95rem; font-weight: 800; }
.rr-stats-value { font-size: 1.3rem; font-weight: 800; color: var(--rr-primary); text-align: right; white-space: nowrap; }
.rr-stats-sub { font-size: .75rem; font-weight: 500; }

/* Card 1 — "My Stats": solid orange card w/ white inset box for ranks */
.rr-dashboard-card--stats { background: var(--rr-brand-orange); border-color: var(--rr-brand-orange); display: flex; flex-direction: column; }
.rr-dashboard-card--stats .rr-rewards-heading { color: var(--rr-primary); margin-bottom: .85rem; }
.rr-dashboard-card--stats .rr-stats-list { margin-top: 0; }
.rr-dashboard-card--stats .rr-stats-countdown-row { margin-top: auto; padding-top: .75rem; }
.rr-dashboard-card--stats .rr-stats-label,
.rr-dashboard-card--stats .rr-stats-value { color: var(--rr-primary); }
.rr-dashboard-card--gameboard { background: var(--rr-brand-gray-light); }
.rr-dashboard-card--gameboard .rr-rewards-heading { color: var(--rr-brand-gray-dark); }
.rr-dashboard-card--draw { background: var(--rr-brand-gray-dark); display: flex; flex-direction: column; }
.rr-dashboard-card--draw .rr-rewards-heading,
.rr-dashboard-card--draw .rr-draw-next-label { color: #fff; }
.rr-dashboard-card--draw .rr-empty { color: rgba(255,255,255,.85); }
.rr-dashboard-card--draw .rr-stats-countdown-row { margin-top: auto; padding-top: .75rem; }
.rr-stats-rankbox { background: #fff; border-radius: 10px; padding: .75rem .9rem; min-height: 7.5rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.rr-stats-rankbox-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .4rem 0; }
.rr-stats-rankbox-row .rr-stats-label { color: var(--rr-primary); }
.rr-stats-rankbox-row .rr-stats-value { color: var(--rr-primary); font-size: 1.4rem; }

.rr-gb-history-nav { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1rem; }
.rr-gb-history-nav .rr-btn { flex: 1; }

/* Weekly / Quarterly Draw countdown */
.rr-draw-countdown { display: flex; gap: .5rem; justify-content: center; align-items: flex-start; }
.rr-countdown-unit { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0; }
.rr-countdown-box { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 10px; padding: .6rem .4rem; width: 100%; min-height: 7.5rem; box-sizing: border-box; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.rr-countdown-num { font-size: 2rem; font-weight: 700; color: #000; font-variant-numeric: tabular-nums; }
.rr-countdown-label { font-size: .68rem; color: rgba(255,255,255,.85); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; margin-top: .35rem; }

/* ── Stats card subheading ───────────────────────────────────────────────── */
.rr-stats-subheading { font-size: .9rem; font-weight: 700; color: var(--rr-primary); margin: .9rem 0 .4rem; padding: 0 .9rem; text-transform: uppercase; letter-spacing: .03em; }
.rr-dashboard-card--stats .rr-stats-subheading { color: var(--rr-primary); margin-top: .75rem; }

/* White label on rankbox row (for the "This Week" label, bigger) */
.rr-stats-label--week { font-size: .85rem !important; font-weight: 700; }

/* Divider row in rankbox (no value, centred text) */
.rr-stats-rankbox-row--divider { justify-content: center; border-top: 1px solid rgba(0,0,0,.08); margin-top: .2rem; padding-top: .5rem; }
.rr-stats-rankbox-row--divider .rr-stats-label { font-size: .75rem; color: #555; font-weight: 600; text-align: center; }

/* Inline weekly-draw countdown inside the stats card (smaller boxes) */
.rr-stats-countdown-row { margin-top: .75rem; }
.rr-stats-countdown-label { display: block; font-size: .7rem; font-weight: 600; color: var(--rr-primary); text-align: center; margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .03em; }
.rr-draw-countdown--inline .rr-countdown-box { min-height: 3.5rem; padding: .4rem .25rem; }
.rr-draw-countdown--inline .rr-countdown-num { font-size: 1.3rem; }
.rr-draw-countdown--inline .rr-countdown-label { color: var(--rr-primary); font-size: .6rem; }

/* ── Game Board earn labels ──────────────────────────────────────────────── */
.rr-gb-earn-labels { font-size: .82rem; color: var(--rr-brand-gray-dark); margin: -.35rem 0 .75rem; line-height: 1.5; }
.rr-gb-earn-labels strong { font-weight: 800; }
.rr-gb-earn-row { font-size: .9rem; font-weight: 600; color: var(--rr-primary); text-transform: uppercase; letter-spacing: .03em; margin: .45rem 0 0; }
.rr-gb-earn-row strong { font-weight: 800; }
.rr-gb-earn-row--center { text-align: center; }
.rr-gb-tagline { font-size: .78rem !important; }
.rr-btn-gb-play { font-size: 1rem !important; font-weight: 700 !important; }

/* ── Overall Ranking card (dark card) ───────────────────────────────────── */
.rr-draw-towards-label { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .04em; margin: -.4rem 0 .65rem; }
.rr-stats-rankbox--dark { background: rgba(255,255,255,.12); border-radius: 10px; padding: .75rem .9rem; margin-bottom: 0; }
.rr-stats-rankbox--dark .rr-stats-label { color: #fff; }
.rr-stats-rankbox--dark .rr-stats-value { color: #fff; font-size: 1.4rem; }
.rr-stats-label--white { color: #fff !important; }
.rr-stats-value--white { color: #fff !important; }
.rr-stats-subheading--white { color: #fff !important; }
.rr-stats-list .rr-stats-label--white { color: #fff !important; }
.rr-stats-list--tight { gap: .3rem; }
.rr-dashboard-card--draw .rr-stats-subheading { margin-top: .75rem; }
.rr-stats-rankbox-row--divider-dark { border-top-color: rgba(255,255,255,.2) !important; }
.rr-stats-rankbox-row--divider-dark .rr-stats-label { font-size: .75rem !important; color: rgba(255,255,255,.75) !important; font-weight: 600; }
.rr-stats-rankbox-row--divider-top { border-top: none !important; margin-top: 0 !important; padding-top: 0 !important; }
.rr-dashboard-card--draw .rr-stats-rankbox-row .rr-stats-label { font-size: .72rem; font-weight: 600; }
.rr-dashboard-card--draw .rr-draw-countdown--inline .rr-countdown-label { color: rgba(255,255,255,.85); }
.rr-dashboard-card--draw .rr-stats-countdown-label { color: rgba(255,255,255,.85); }

@media (max-width: 640px) {
    .rr-carousel-dot { font-size: .68rem; padding: .5rem .35rem; }
    .rr-countdown-unit { min-width: 2.75rem; padding: .5rem .6rem; }
    .rr-countdown-num { font-size: 1.1rem; }
}

/* ── POS image ───────────────────────────────────────────────────────────── */


/* ── Game Board ──────────────────────────────────────────────────────────── */
.rr-gb-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.rr-gb-stat { background: var(--rr-brand-black); border-radius: 10px; padding: .9rem .75rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 7.5rem; box-sizing: border-box; }
.rr-gb-stat:nth-child(2) { background: var(--rr-brand-gray-dark); }
.rr-gb-stat-num { display: block; font-size: 2rem; font-weight: 400; color: #fff; }
.rr-gb-stat-label { display: block; font-size: .72rem; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; margin-top: .2rem; }

.rr-gb-modal-inner { max-width: 420px; text-align: center; padding: 1.5rem; max-height: 85vh; overflow-y: auto; }
.rr-gb-instructions { color: var(--rr-muted); font-size: .875rem; margin: 0 0 1rem; }
.rr-gb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.rr-gb-tile {
    aspect-ratio: 1; border-radius: 10px; background-color: var(--rr-bg);
    background-size: cover; background-position: center; border: 2px solid var(--rr-border);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform .15s, box-shadow .15s; position: relative; overflow: hidden;
}
.rr-gb-tile:hover { transform: scale(1.04); box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.rr-gb-tile--locked { cursor: default; }
.rr-gb-tile--locked:hover { transform: none; box-shadow: none; }
.rr-gb-tile--revealed { background-image: none !important; }
.rr-gb-tile--revealed img { width: 100%; height: 100%; object-fit: cover; }
.rr-gb-tile--prize { background: #FFFBEB; border-color: #FFD700; }
.rr-gb-tile--points { background: var(--rr-bg); }
.rr-gb-tile--draw-entry { background: var(--rr-bg); }
/* Grey out all non-selected tiles after reveal */
.rr-gb-tile--revealed:not(.rr-gb-tile--picked) { opacity: .25; filter: grayscale(1); }
.rr-gb-tile--picked { border-color: var(--rr-accent); box-shadow: 0 0 0 3px rgba(255,142,0,.3); opacity: 1 !important; filter: none !important; }
.rr-gb-tile-icon { font-size: 1.4rem; }
.rr-gb-result { margin-top: 1rem; padding: .85rem 1rem; background: var(--rr-brand-orange); border-radius: 10px; color: #fff; }
.rr-gb-prize-title { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 700; color: #fff; }
.rr-gb-result p { margin: 0 0 .5rem; font-size: .9rem; color: rgba(255,255,255,.9); }
.rr-gb-result p:last-child { margin-bottom: 0; }
.rr-gb-convert-question { font-size: .85rem; margin: .25rem 0 .6rem; }
.rr-gb-convert-wrap { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .rr-wrap { padding: .75rem 1rem; }
    .rr-app-slider .rr-main-tabs { display: none; }
    .rr-two-col { grid-template-columns: 1fr; }
    .rr-three-col { grid-template-columns: 1fr; }
    .rr-leaderboard-grid { grid-template-columns: 1fr; }
    .rr-dashboard-summary-grid { grid-template-columns: 1fr; }
    .rr-lb-panel--store { grid-column: auto; }
    .rr-stats-bar-grid { grid-template-columns: repeat(2, 1fr); }
    .rr-sbar-num { font-size: 1.2rem; }
    .rr-lucky-draw-banner { padding: .75rem 1rem; }
    .rr-header { padding: .85rem 1rem; margin-bottom: .5rem; }
    .rr-header-identity h1 { font-size: 1.05rem; }
    .rr-product-grid { grid-template-columns: repeat(2, 1fr); }
    .rr-gb-grid { gap: .35rem; }
    .rr-sell-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .rr-sell-card  { padding: 1rem; }
    .rr-sell-innerbox { padding: 1.25rem; }

    /* Draw card on mobile: 2-row layout */
    .rr-home-card--draw-wide .rr-home-card-row {
        grid-template-columns: 1fr 2fr;
        grid-template-rows: auto auto;
    }
    .rr-home-card--draw-wide .rr-home-inner-block:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }
    .rr-home-card--draw-wide .rr-home-inner-block--countdown {
        grid-column: 2;
        grid-row: 1;
    }
    .rr-home-card--draw-wide .rr-home-inner-block--winners {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* Reduce space above TOTAL DRAW ENTRIES row */
    #rr-app-slider { margin-top: 0; }
    .rr-sub-header { margin-top: .1rem; }
}

#rr-app-slider {
    margin-top: .5rem;
}

/* ── Platform content gate ─────────────────────────────────────────────────── */
.rr-platform-content--hidden { display: none !important; }

/* ── Onboarding overlay ────────────────────────────────────────────────────── */
body.rr-overlay-open { overflow: hidden; }

.rr-onboarding-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: #f5f5f5;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
}

.rr-onboarding-modal {
    background: #fff; border-radius: 16px; padding: 2rem 1.5rem;
    max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
    text-align: center; position: relative;
}

.rr-onboarding-logout {
    position: absolute;
    top: .85rem;
    right: .85rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--rr-muted);
    text-decoration: none !important;
    border: 1px solid var(--rr-border);
    border-radius: 6px;
    padding: .25rem .6rem;
    transition: color .12s, border-color .12s;
}
.rr-onboarding-logout:hover { color: var(--rr-brand-orange) !important; border-color: var(--rr-brand-orange) !important; }

.rr-onboarding-title { font-size: 1.25rem; font-weight: 800; color: var(--rr-primary); margin-bottom: .4rem; }
.rr-onboarding-intro { font-size: .85rem; color: #555; margin-bottom: 1.25rem; }

.rr-onboarding-lights {
    display: flex; gap: 1rem; justify-content: center; margin-bottom: 1.5rem;
}

.rr-ob-light {
    width: 36px; height: 36px; border-radius: 50%;
    background: #d00; box-shadow: 0 0 0 3px rgba(0,0,0,.12);
    transition: background .35s, box-shadow .35s;
}
.rr-ob-light--green { background: #22c55e; box-shadow: 0 0 12px rgba(34,197,94,.6); }
.rr-ob-light--red   { background: #d00;   box-shadow: 0 0 12px rgba(220,0,0,.5); }

.rr-ob-question-text { font-size: .95rem; font-weight: 600; margin-bottom: 1rem; }

.rr-ob-answers { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }

.rr-ob-answer-btn { text-align: left; padding: .6rem 1rem; font-size: .85rem; border-radius: 8px; }
.rr-ob-answer-btn.rr-ob-correct   { background: #22c55e !important; color: #fff !important; border-color: #22c55e !important; }
.rr-ob-answer-btn.rr-ob-incorrect { background: #ef4444 !important; color: #fff !important; border-color: #ef4444 !important; }
.rr-ob-answer-btn:disabled { opacity: .85; cursor: not-allowed; }

.rr-ob-explanation { font-size: .8rem; color: #555; background: #f3f4f6; border-radius: 8px; padding: .6rem .9rem; text-align: left; }
.rr-ob-success { font-size: 1rem; font-weight: 700; color: #22c55e; margin-bottom: 1rem; }

/* ── Flash question popup ──────────────────────────────────────────────────── */
.rr-flash-overlay {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,.65);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}

.rr-flash-modal {
    background: #fff; border-radius: 16px; padding: 1.75rem 1.5rem;
    max-width: 420px; width: 100%;
    box-shadow: 0 8px 40px rgba(0,0,0,.3);
    text-align: center;
}

.rr-flash-title    { font-size: 1.1rem; font-weight: 800; color: var(--rr-primary); margin-bottom: .2rem; }
.rr-flash-subtitle { font-size: .78rem; color: #888; margin-bottom: 1rem; }
.rr-flash-question-text { font-size: .92rem; font-weight: 600; margin-bottom: .9rem; }
.rr-flash-answers  { display: flex; flex-direction: column; gap: .45rem; }
.rr-flash-answer-btn { text-align: left; padding: .55rem .9rem; font-size: .83rem; border-radius: 8px; }
.rr-flash-explanation { font-size: .8rem; color: #555; background: #f3f4f6; border-radius: 8px; padding: .55rem .9rem; margin-top: .6rem; }

/* ── App Slider ────────────────────────────────────────────────────────────── */
.rr-app-slider {
    overflow: hidden;
    width: 100%;
    /* iOS Safari: prevent horizontal overflow */
    max-width: 100%;
}

.rr-app-slider-track {
    display: flex;
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    will-change: transform;
    min-width: 0;
}

.rr-app-slide {
    min-width: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem;
    overflow: hidden;
    /* iOS Safari flex child fix — prevents content from bleeding past the slide */
    flex-shrink: 0;
}

/* Section slides (Sell, Learn, Display) */
.rr-app-slide--section {
    background: transparent;
}

.rr-app-slide-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--rr-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 1rem;
}

.rr-home-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: 1rem;
}

.rr-home-stat {
    background: #fff;
    border-radius: 14px;
    padding: 1rem .75rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.rr-home-stat--accent {
    background: var(--rr-brand-orange);
}

.rr-home-stat-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--rr-primary);
    line-height: 1;
}

.rr-home-stat--accent .rr-home-stat-num { color: #fff; }

.rr-home-stat-label {
    font-size: .72rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.rr-home-stat--accent .rr-home-stat-label { color: rgba(255,255,255,.85); }

.rr-home-countdown {
    background: #fff;
    border-radius: 14px;
    padding: .9rem .75rem .75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    margin-bottom: 1rem;
    text-align: center;
}

.rr-home-countdown-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rr-primary);
    margin-bottom: .5rem;
}

.rr-home-countdown .rr-draw-countdown--inline { justify-content: center; }
.rr-home-countdown .rr-countdown-label { color: #666; }

.rr-home-nav {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.rr-home-nav-btn {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: .85rem 1rem;
    font-size: .88rem;
    font-weight: 700;
    color: var(--rr-primary);
    cursor: pointer;
    text-align: center;
    width: 100%;
    transition: background .15s, border-color .15s, transform .1s;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.rr-home-nav-btn:hover,
.rr-home-nav-btn:active { background: var(--rr-brand-orange); border-color: var(--rr-brand-orange); color: #fff; transform: scale(.98); }

/* ── Home slide ── */
.rr-app-slide--home {
    background: transparent;
    padding-right: 1rem;
}

.rr-slide-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: #555555;
    color: #fff;
    padding: .6rem .9rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    min-height: 52px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.rr-slide-back {
    background: #fff !important;
    border: 2px solid #fff !important;
    border-radius: 8px;
    color: #111111 !important;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    padding: .3rem .7rem;
    flex-shrink: 0;
    transition: background .12s, color .12s;
    text-decoration: none !important;
    position: relative;
    z-index: 1;
}
.rr-slide-back:hover { background: var(--rr-brand-orange) !important; border-color: var(--rr-brand-orange) !important; color: #fff !important; }

.rr-slide-topbar-title {
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
    margin: 0;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Home topbar — same height as section topbars, no burger ── */
.rr-slide-topbar--home {
    justify-content: flex-start;
    padding-left: 1.25rem;
    min-height: 52px;
    background: #555555;
}
.rr-slide-topbar--home .rr-slide-topbar-title {
    font-size: 1.05rem;
    color: #fff;
    text-align: left;
    flex: none;
}
.rr-slide-topbar--home .rr-slide-topbar-title {
    font-size: 1.05rem;
    color: #fff;
}

/* ── Section slide burger ── */
.rr-slide-burger-wrap {
    position: relative;
    flex-shrink: 0;
}

.rr-slide-burger {
    background: rgba(255,255,255,.18);
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    transition: background .15s;
}

.rr-slide-burger:hover { background: rgba(255,255,255,.35); }

.rr-slide-burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

/* Dropdown styled to match Image 1 — dark background, white text, orange hover */
.rr-slide-burger-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--rr-primary);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
    min-width: 180px;
    z-index: 100;
    overflow: hidden;
}

.rr-burger-open .rr-slide-burger-menu { display: block; }

.rr-slide-burger-menu button {
    display: block;
    width: 100%;
    padding: .85rem 1.1rem;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
    font-size: .86rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .03em;
    transition: background .12s, color .12s;
}

.rr-slide-burger-menu button:last-child { border-bottom: none; }
.rr-slide-burger-menu button:hover { background: rgba(255,255,255,.08); color: var(--rr-brand-orange); }

/* ── Leaderboard stacked layout ── */
.rr-leaderboard-stack {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.rr-lb-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.rr-lb-panel-head h3 { margin: 0; }

.rr-lb-info-btn {
    background: #000000 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 22px !important;
    height: 22px !important;
    font-size: .85rem !important;
    font-style: italic !important;
    font-weight: 700 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    cursor: pointer;
    color: #ffffff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: none !important;
    padding: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

/* ── Leaderboard info popup ── */
.rr-lb-info-popup {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.rr-lb-info-popup-inner {
    background: #fff;
    border-radius: 14px;
    padding: 1.5rem;
    max-width: 380px;
    width: 100%;
    text-align: left;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
}

#rr-lb-info-popup-text { text-align: left; }
#rr-lb-info-popup-text p,
#rr-lb-info-popup-text h1,
#rr-lb-info-popup-text h2,
#rr-lb-info-popup-text h3,
#rr-lb-info-popup-text h4,
#rr-lb-info-popup-text h5,
#rr-lb-info-popup-text h6 {
    font-size: .9rem; color: #333; line-height: 1.6;
    margin-top: 0; margin-bottom: .6rem; text-align: left;
}
#rr-lb-info-popup-text h1,
#rr-lb-info-popup-text h2,
#rr-lb-info-popup-text h3 { font-size: .95rem; color: #111; }
/* First strong acts as a heading — display as its own line */
#rr-lb-info-popup-text > strong:first-child,
#rr-lb-info-popup-text > b:first-child {
    display: block; margin-bottom: .35rem; font-size: .95rem; color: #111;
}
/* Add breathing room between the loose text and the list */
#rr-lb-info-popup-text > ul,
#rr-lb-info-popup-text > ol { margin-top: .5rem; }
.rr-lb-info-popup-inner p {
    font-size: .9rem; color: #333; margin-bottom: .6rem; line-height: 1.6; text-align: left;
}
.rr-lb-info-popup-inner strong,
.rr-lb-info-popup-inner b { color: #000; font-weight: 700; }
.rr-lb-info-popup-inner em,
.rr-lb-info-popup-inner i { font-style: italic; }
.rr-lb-info-popup-inner a { color: var(--rr-brand-orange); }
.rr-lb-info-popup-inner ul,
.rr-lb-info-popup-inner ol { text-align: left; padding-left: 1.25rem; margin: 0 0 .75rem; }
.rr-lb-info-popup-inner ul li { list-style: disc; font-size: .9rem; color: #333; line-height: 1.6; margin-bottom: .25rem; }
.rr-lb-info-popup-inner ol li { list-style: decimal; font-size: .9rem; color: #333; line-height: 1.6; margin-bottom: .25rem; }

/* ── Home slide — Game Board card ─────────────────────────────────────────── */
.rr-home-gb-card {
    background: #fff;
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    margin-bottom: .75rem;
}

.rr-home-gb-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.rr-home-gb-card-title {
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rr-primary);
}

.rr-home-gb-card .rr-lb-info-btn {
    background: #000000 !important;
    color: #ffffff !important;
}

.rr-home-gb-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: .5rem;
}

.rr-home-gb-stat {
    background: #f5f5f5;
    border-radius: 10px;
    padding: .65rem .5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.rr-home-gb-stat--ready {
    background: var(--rr-brand-orange);
}

.rr-home-gb-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--rr-primary);
    line-height: 1;
}

.rr-home-gb-stat--ready .rr-home-gb-num { color: #fff; }

.rr-home-gb-label {
    font-size: .65rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.rr-home-gb-stat--ready .rr-home-gb-label { color: rgba(255,255,255,.85); }

/* ── Home slide — Latest Winners ──────────────────────────────────────────── */
.rr-home-winners {
    background: #fff;
    border-radius: 14px;
    padding: .9rem 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    margin-bottom: .75rem;
}

.rr-home-winners-head {
    margin-bottom: .6rem;
}

.rr-home-winners-title {
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rr-primary);
}

.rr-home-winners-label {
    font-size: .72rem;
    color: #888;
    margin-bottom: .5rem;
}

.rr-home-winners-empty {
    font-size: .8rem;
    color: #aaa;
    text-align: center;
    margin: 0;
    padding: .5rem 0;
}

.rr-home-winners-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.rr-home-winner-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .2rem 0;
}

.rr-home-winner-row--me .rr-home-winner-name { color: var(--rr-brand-orange); font-weight: 700; }

.rr-home-winner-place {
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    background: var(--rr-primary);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rr-home-winner-name {
    font-size: .78rem;
    font-weight: 600;
    color: var(--rr-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rr-home-winner-congrats {
    font-size: .85rem;
    font-weight: 700;
    color: var(--rr-brand-orange);
    text-align: center;
    margin-top: .6rem;
    padding: .5rem;
    background: #fff8e1;
    border-radius: 8px;
}

/* ── Header burger menu ────────────────────────────────────────────────────── */
.rr-header-actions { display: flex; align-items: center; gap: .6rem; }
.rr-header-burger-wrap { position: relative; }
.rr-header-burger {
    background: var(--rr-brand-orange) !important; border: none !important; border-radius: 8px;
    width: 42px; height: 42px; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.rr-header-burger-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.18); min-width: 200px;
    z-index: 200; overflow: hidden;
}
.rr-header-burger-wrap.rr-burger-open .rr-header-burger-menu { display: block; }
.rr-header-menu-item,
a.rr-header-menu-item {
    display: block; width: 100%; padding: 8px 16px;
    box-sizing: border-box; margin: 0;
    background: none !important; border: none !important; outline: none !important;
    text-align: left; font-size: 16px; font-weight: 900; color: #000000 !important;
    cursor: pointer; text-transform: uppercase; letter-spacing: .02em; transition: background .12s, color .12s;
    text-decoration: none !important; font-family: 'Roboto', sans-serif;
}
a.rr-header-menu-item {
    font-weight: 400;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    box-sizing: border-box !important;
}
.rr-header-menu-item:hover,
.rr-header-menu-item:focus,
.rr-header-menu-item:active,
a.rr-header-menu-item:hover,
a.rr-header-menu-item:focus,
a.rr-header-menu-item:active { background: #fff4e6 !important; color: var(--rr-brand-orange) !important; }

/* Neutralise ALL theme link states inside the burger menu */
.rr-header-burger-menu a,
.rr-header-burger-menu a:link,
.rr-header-burger-menu a:visited,
.rr-header-burger-menu a:active,
.rr-header-burger-menu a.current-menu-item,
.rr-header-burger-menu a.current_page_item,
.rr-header-burger-menu a.active {
    color: #000000 !important;
    background: none !important;
    background-color: transparent !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    box-sizing: border-box !important;
}
.rr-header-burger-menu a:hover,
.rr-header-burger-menu a:focus {
    color: var(--rr-brand-orange) !important;
    background: #fff4e6 !important;
    background-color: #fff4e6 !important;
}

/* ── Home slide topbar ─────────────────────────────────────────────────────── */
.rr-slide-topbar--home {
    justify-content: center;
}
.rr-slide-topbar-title--home { color: #fff; }

/* ── Home cards ────────────────────────────────────────────────────────────── */
.rr-home-card {
    background: #fff; border-radius: 14px;
    padding: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.08); margin-bottom: .75rem;
}
.rr-home-card-head {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.rr-home-card-title {
    font-size: 1rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; color: var(--rr-primary);
}
.rr-home-card-desc {
    font-size: .72rem; color: #888; font-style: normal;
}
.rr-home-card-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .5rem;
}
.rr-home-card-row:last-child { margin-bottom: 0; }

/* Inner blocks */
.rr-home-inner-block {
    background: #f5f5f5; border-radius: 10px; padding: .65rem .5rem;
    text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
}
.rr-home-inner-block--accent { background: var(--rr-brand-orange); justify-content: center; }
.rr-home-inner-block--ready  { background: #f5f5f5; }
.rr-home-inner-block--countdown { background: #f5f5f5; justify-content: flex-start; }
.rr-home-inner-block--winners { background: #f5f5f5; align-items: center; text-align: center; }
/* Draw entries block — label on top, large number below, matching countdown alignment */
.rr-home-card--draw-wide .rr-home-inner-block:first-child {
    justify-content: flex-start;
}
.rr-home-inner-label--top { color: #666; margin-bottom: .25rem; text-align: center; font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.rr-draw-entries-num { font-size: 1.5rem; font-weight: 800; color: var(--rr-primary); line-height: 1; }
.rr-home-inner-num {
    font-size: 1.5rem; font-weight: 800; color: var(--rr-primary); line-height: 1;
}
.rr-home-inner-block--accent .rr-home-inner-num,
.rr-home-inner-block--ready  .rr-home-inner-num { color: var(--rr-primary); }
.rr-home-inner-label {
    font-size: .62rem; font-weight: 600; color: #888;
    text-transform: uppercase; letter-spacing: .03em; text-align: center;
}
.rr-home-inner-label--top { color: #666; margin-bottom: .25rem; text-align: center; }
.rr-home-inner-block--accent .rr-home-inner-label,
.rr-home-inner-block--ready  .rr-home-inner-label { color: #888; }
.rr-home-inner-block--winners .rr-home-inner-label--top { text-align: center; width: 100%; }

/* Mini countdown inside card */
.rr-draw-countdown--mini {
    display: flex; align-items: center; gap: 2px; justify-content: center;
}
.rr-mini-cd-unit { display: flex; flex-direction: column; align-items: center; }
.rr-mini-cd-num  { font-size: 1.5rem; font-weight: 800; color: var(--rr-primary); line-height: 1; }
.rr-mini-cd-label { font-size: .55rem; color: #aaa; text-transform: uppercase; }
.rr-mini-cd-sep  { font-size: 1.5rem; font-weight: 700; color: #aaa; align-self: flex-start; margin-top: 2px; }

/* Winners inside card */
.rr-home-winners-empty { font-size: .8rem; color: #aaa; margin: 0; text-align: center; }
.rr-home-winner-row    { font-size: .75rem; color: var(--rr-primary); margin-bottom: .15rem; text-align: center; }
.rr-home-winner-row--me { font-weight: 700; color: var(--rr-brand-orange); }

/* Entry/limit two-line sub-label inside buttons */
.rr-home-link-pts,
.rr-section-nav-btn .rr-home-link-pts {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.rr-btn-sub-entry {
    font-size: .65rem; font-weight: 700; color: var(--rr-brand-orange);
    text-transform: uppercase; letter-spacing: .02em; line-height: 1.2;
}
.rr-btn-sub-limit {
    font-size: .58rem; font-weight: 400; color: #888;
    text-transform: none; letter-spacing: 0; line-height: 1.2;
}
/* White entry/limit text only inside home card buttons */
.rr-home-card--links .rr-btn-sub-entry { color: #fff; }
.rr-home-card--links .rr-btn-sub-limit { color: rgba(255,255,255,.8); }

/* White button for inside orange blocks */
.rr-btn-white { background: #fff !important; color: var(--rr-brand-orange) !important; border: none; font-size: .75rem; padding: .3rem .6rem; }

/* Card 3 — section link blocks */
.rr-home-card--links { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; padding: 0; background: none; box-shadow: none; }
.rr-home-link-block {
    border-radius: 12px; padding: .75rem .5rem .65rem;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0;
    text-decoration: none !important; cursor: pointer;
    transition: background .15s; text-align: center;
    background: var(--rr-brand-orange); border: none;
    box-sizing: border-box; width: 100%; min-width: 0;
}
.rr-home-link-block *, .rr-home-link-block:hover * { text-decoration: none !important; }
.rr-home-link-block:hover { background: #d96e10; }
.rr-home-link-block--white,
.rr-home-link-block--orange,
.rr-home-link-block--dark { background: var(--rr-brand-orange); border: none; }

.rr-home-link-icon {
    width: 36px; height: 36px; border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden; background: none;
    margin-bottom: .35rem;
}
/* White icon filter only on home card buttons, not section nav tabs */
.rr-home-card--links .rr-home-link-icon img { filter: brightness(0) invert(1); }
.rr-home-link-icon img { width: 100%; height: 100%; object-fit: contain; }
.rr-home-link-text {
    display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%;
}
.rr-home-link-chevron { display: none; }

.rr-home-link-title {
    font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; line-height: 1.15;
    color: #000; text-align: center; white-space: normal; word-break: break-word; overflow-wrap: anywhere;
    display: block; width: 100%; margin-bottom: .25rem;
}
/* White title only on home card buttons */
.rr-home-card--links .rr-home-link-title { color: #fff; }
.rr-home-link-block--orange .rr-home-link-title,
.rr-home-link-block--dark   .rr-home-link-title,
.rr-home-link-block--white  .rr-home-link-title { color: #000; }
.rr-home-card--links .rr-home-link-block--orange .rr-home-link-title,
.rr-home-card--links .rr-home-link-block--dark   .rr-home-link-title,
.rr-home-card--links .rr-home-link-block--white  .rr-home-link-title { color: #fff; }

.rr-home-link-pts {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    width: 100%; text-align: center;
}
.rr-home-link-block--orange .rr-home-link-pts,
.rr-home-link-block--white  .rr-home-link-pts,
.rr-home-link-block--dark   .rr-home-link-pts { color: #444; }
/* White pts only on home card buttons */
.rr-home-card--links .rr-home-link-pts { color: rgba(255,255,255,.85); }

.rr-rep-tab-info-trigger { width: 22px !important; height: 22px !important; border-radius: 50% !important; background: #000000 !important; color: #fff !important; border: none !important; cursor: pointer; font-size: .85rem !important; font-style: italic !important; font-weight: 700 !important; font-family: Georgia, serif !important; display: flex !important; align-items: center; justify-content: center; line-height: 1 !important; padding: 0 !important; box-shadow: none !important; flex-shrink: 0; }

.rr-section-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: .75rem;
    border-top: none;
}
.rr-section-nav-btn {
    background: #fff !important;
    color: #000 !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: .75rem .5rem .65rem !important;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: center;
}
.rr-section-nav-btn .rr-home-link-icon { margin-bottom: .35rem; flex-shrink: 0; }
.rr-section-nav-btn .rr-home-link-title {
    display: block;
    margin-bottom: .25rem;
    width: 100%;
}
.rr-section-nav-btn .rr-home-link-pts {
    display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%;
}
.rr-section-nav-btn:hover { background: #fafafa !important; }
.rr-section-nav-btn.rr-nav-active {
    background: #fff !important;
    color: #000 !important;
    border: 1.5px solid transparent !important;
    box-shadow: inset 0 0 0 1px var(--rr-brand-orange), inset 0 -3px 0 0 var(--rr-brand-orange) !important;
    border-radius: 12px !important;
}

/* ── Sub-header row (back link + draw entries) ── */
.rr-sub-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .5rem; margin-top: .2rem; min-height: 1.2rem;
}
.rr-back-to-dash {
    background: none; border: none; padding: 0; margin: 0; cursor: pointer;
    color: var(--rr-brand-orange); font-size: .8rem; font-weight: 400;
    font-family: 'Roboto', sans-serif; text-decoration: none;
    outline: none; box-shadow: none; -webkit-appearance: none; appearance: none;
    display: inline; line-height: 1;
}
.rr-back-to-dash:hover { text-decoration: underline; color: var(--rr-brand-orange); }
.rr-sub-header-entries {
    font-size: .8rem; font-weight: 700; color: var(--rr-primary);
    text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
/* Home slide (slide 0) — hide the entries count but keep the space so buttons don't shift */
.rr-app-slide--home .rr-sub-header-entries {
    visibility: hidden;
}

/* Info button row — right-aligned, sits below the nav tabs */
.rr-section-info-row {
    display: flex; justify-content: flex-end; margin: .4rem 0 .25rem;
}

/* ── Display & Earn — upload type cards ── */
.rr-pos-type-card {
    background: #fff;
    border: 1.5px solid var(--rr-border);
    border-radius: 12px;
    padding: .85rem 1rem;
    margin-bottom: .6rem;
    transition: opacity .2s;
}
.rr-pos-type-card--done {
    opacity: .5;
    pointer-events: none;
}
.rr-pos-type-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .6rem;
}
.rr-pos-type-label {
    font-size: .88rem;
    font-weight: 700;
    color: var(--rr-primary);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.rr-pos-type-meta {
    font-size: .72rem;
    color: var(--rr-muted);
    font-weight: 500;
}
.rr-pos-done-msg {
    font-size: .8rem;
    color: var(--rr-muted);
    margin: 0;
    font-style: italic;
}
.rr-pos-upload-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.rr-pos-upload-row .rr-input-file { flex: 1; min-width: 0; font-size: .8rem; }

/* ── Home three-column card row ── */
.rr-home-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-bottom: .75rem;
}
.rr-home-col-card { margin-bottom: 0 !important; }
.rr-home-col-stats {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
}
.rr-home-inner-block--ranking {
    background: #f5f5f5;
    border-radius: 10px;
    padding: .6rem .5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
}

@media (max-width: 700px) {
    .rr-home-three-col { grid-template-columns: 1fr; }
}

/* ── Topbar home icon ── */
.rr-topbar-home-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Clickable home icon button in section topbars */
.rr-topbar-home-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: .85;
}
.rr-topbar-home-btn:hover { opacity: 1; }