/**
 * Gradia POS — Rewards Modals CSS
 * Scoped to #p9-rewards-modal and #p9-earn-modal only.
 * Mobile  : true bottom-sheet, 80dvh, fills screen width.
 * Desktop : centred card, 560px wide, 88dvh max, fade-scale entrance.
 * iOS safe-area, 16px inputs (no zoom), 52px touch targets, dark mode.
 */

/* ── Design tokens ───────────────────────────────────────────── */
#p9-rewards-modal,
#p9-earn-modal {
    --rw-red:       #b91c1c;
    --rw-red-dark:  #1a0a0a;
    --rw-red-soft:  rgba(185,28,28,.09);
    --rw-red-ring:  rgba(185,28,28,.2);
    --rw-r:         22px;
    --rw-r-sm:      14px;
    --rw-pill:      999px;
    --rw-inp:       52px;
    --rw-safe:      env(safe-area-inset-bottom, 0px);
}

/* ================================================================
   OVERLAY — full-screen dimmer
   Mobile  : bottom-sheet  (align-items: flex-end)
   Desktop : centred card  (align-items: center)
   ================================================================ */
#p9-rewards-modal.p9-product-modal-overlay,
#p9-earn-modal.p9-product-modal-overlay {
    position:            fixed !important;
    inset:               0 !important;
    z-index:             9999 !important;
    background:          rgba(0,0,0,.58) !important;
    backdrop-filter:     blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    align-items:         flex-end !important;
    justify-content:     center !important;
    padding:             0 !important;
    overscroll-behavior: none !important;
    touch-action:        none;
}
@media (min-width: 641px) {
    #p9-rewards-modal.p9-product-modal-overlay,
    #p9-earn-modal.p9-product-modal-overlay {
        align-items: center !important;
        padding:     24px !important;
    }
}

/* ================================================================
   CARD SHELL
   Mobile  : 80dvh bottom-sheet, full width, rounded top only,
             slides up from the bottom
   Desktop : 560px wide, 88dvh max, fully rounded, fade-scale entrance
   ================================================================ */
#p9-rewards-modal .p9-rewards-card,
#p9-earn-modal .p9-earn-card {
    width:          100% !important;
    max-width:      100% !important;
    height:         80dvh !important;
    height:         80vh !important;
    max-height:     80dvh !important;
    border-radius:  var(--rw-r) var(--rw-r) 0 0 !important;
    background:     #fff;
    display:        flex !important;
    flex-direction: column !important;
    overflow:       hidden !important;
    box-shadow:     0 -6px 48px rgba(0,0,0,.24) !important;
    box-sizing:     border-box;
    animation:      rwSheetUp .26s cubic-bezier(.32,.72,0,1);
}
body.gradia-pos-dark #p9-rewards-modal .p9-rewards-card,
body.gradia-pos-dark #p9-earn-modal .p9-earn-card {
    background: #0f172a !important;
    box-shadow: 0 -6px 48px rgba(0,0,0,.55) !important;
}

@media (min-width: 641px) {
    #p9-rewards-modal .p9-rewards-card,
    #p9-earn-modal .p9-earn-card {
        width:         calc(100% - 48px) !important;
        max-width:     560px !important;
        height:        auto !important;
        max-height:    88dvh !important;
        border-radius: var(--rw-r) !important;
        box-shadow:    0 24px 80px rgba(0,0,0,.28) !important;
        animation:     rwCardIn .22s cubic-bezier(.22,.68,0,1.1);
    }
}

/* Mobile: slide up from bottom */
@keyframes rwSheetUp {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
/* Desktop: subtle fade + scale */
@keyframes rwCardIn {
    from { transform: scale(.97) translateY(8px); opacity: 0; }
    to   { transform: scale(1)   translateY(0);   opacity: 1; }
}

/* Drag handle — mobile only */
#p9-rewards-modal .p9-rewards-card::before,
#p9-earn-modal .p9-earn-card::before {
    content:      '';
    display:      block;
    width:        36px;
    height:       4px;
    border-radius: 2px;
    background:   rgba(0,0,0,.13);
    margin:       10px auto 0;
    flex-shrink:  0;
}
body.gradia-pos-dark #p9-rewards-modal .p9-rewards-card::before,
body.gradia-pos-dark #p9-earn-modal .p9-earn-card::before {
    background: rgba(255,255,255,.2);
}
@media (min-width: 641px) {
    #p9-rewards-modal .p9-rewards-card::before,
    #p9-earn-modal .p9-earn-card::before { display: none; }
}

/* ================================================================
   HEADER
   ================================================================ */
#p9-rewards-modal .p9-pm-header,
#p9-earn-modal .p9-pm-header {
    background:      linear-gradient(135deg, var(--rw-red) 0%, var(--rw-red-dark) 100%) !important;
    padding:         14px 20px 15px !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    gap:             10px;
    flex-shrink:     0 !important;
}
#p9-rewards-modal .p9-pm-header-left,
#p9-earn-modal .p9-pm-header-left {
    display:     flex;
    align-items: center;
    gap:         11px;
    min-width:   0;
    flex:        1;
}
#p9-rewards-modal .p9-pm-header-icon,
#p9-earn-modal .p9-pm-header-icon {
    font-size:   26px;
    line-height: 1;
    flex-shrink: 0;
}
#p9-rewards-modal .p9-pm-title,
#p9-earn-modal .p9-pm-title,
#p9-earn-modal .p9-earn-hdr-title {
    font-size:      15px !important;
    font-weight:    800 !important;
    color:          #fff !important;
    letter-spacing: -.15px;
    line-height:    1.2;
}
#p9-rewards-modal .p9-pm-subtitle,
#p9-earn-modal .p9-pm-subtitle,
#p9-earn-modal .p9-earn-hdr-sub {
    font-size:     11.5px;
    color:         rgba(255,255,255,.62);
    margin-top:    2px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
@media (max-width: 640px) {
    #p9-rewards-modal .p9-pm-subtitle,
    #p9-earn-modal .p9-pm-subtitle,
    #p9-earn-modal .p9-earn-hdr-sub { display: none; }
}
#p9-earn-modal .p9-earn-pts-hl { color: #fde68a; font-weight: 800; }

/* Close / Skip button */
#p9-rewards-modal .p9-pm-close-btn,
#p9-earn-modal .p9-earn-skip-btn {
    flex-shrink:                0;
    display:                    inline-flex;
    align-items:                center;
    gap:                        5px;
    padding:                    9px 16px;
    min-height:                 40px;
    border-radius:              var(--rw-pill);
    border:                     1.5px solid rgba(255,255,255,.28) !important;
    background:                 rgba(255,255,255,.13);
    color:                      rgba(255,255,255,.92);
    font-size:                  13px;
    font-weight:                700;
    font-family:                inherit;
    cursor:                     pointer;
    white-space:                nowrap;
    touch-action:               manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance:         none;
    appearance:                 none;
    transition:                 background .15s;
}
#p9-rewards-modal .p9-pm-close-btn:hover,
#p9-earn-modal .p9-earn-skip-btn:hover  { background: rgba(255,255,255,.22); }
#p9-rewards-modal .p9-pm-close-btn:active,
#p9-earn-modal .p9-earn-skip-btn:active { background: rgba(255,255,255,.3);  }

/* ================================================================
   TABS — full-width segments
   ================================================================ */
#p9-rewards-modal .p9-rw-tabs {
    display:       flex;
    flex-shrink:   0;
    border-bottom: 2px solid #e2e8f0;
    background:    #f8fafc;
    padding:       0 20px;
}
body.gradia-pos-dark #p9-rewards-modal .p9-rw-tabs {
    background:          #1e293b;
    border-bottom-color: rgba(255,255,255,.1);
}
#p9-rewards-modal .p9-rw-tab {
    flex:            1;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    padding:         13px 8px;
    border:          none;
    background:      none;
    font-size:       13px;
    font-weight:     600;
    font-family:     inherit;
    color:           #64748b;
    cursor:          pointer;
    border-bottom:   2.5px solid transparent;
    margin-bottom:   -2px;
    touch-action:    manipulation;
    -webkit-tap-highlight-color: transparent;
    white-space:     nowrap;
    -webkit-appearance: none;
    appearance:      none;
    transition:      color .15s, border-color .15s;
}
#p9-rewards-modal .p9-rw-tab:hover  { color: #1e293b; }
#p9-rewards-modal .p9-rw-tab.active { color: var(--rw-red); border-bottom-color: var(--rw-red); }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-tab        { color: rgba(255,255,255,.45); }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-tab:hover  { color: #e2e8f0; }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-tab.active { color: #fca5a5; border-bottom-color: #fca5a5; }

/* Mobile: pill segment style */
@media (max-width: 640px) {
    #p9-rewards-modal .p9-rw-tabs {
        padding:       10px 16px;
        border-bottom: none;
        gap:           8px;
    }
    #p9-rewards-modal .p9-rw-tab {
        border-radius: var(--rw-r-sm);
        padding:       12px 8px;
        margin-bottom: 0;
        border:        1.5px solid #e2e8f0;
        background:    #fff;
        transition:    all .15s;
    }
    body.gradia-pos-dark #p9-rewards-modal .p9-rw-tab {
        background:   rgba(255,255,255,.05);
        border-color: rgba(255,255,255,.12);
        color:        rgba(255,255,255,.5);
    }
    #p9-rewards-modal .p9-rw-tab.active {
        background:   var(--rw-red-soft);
        border-color: var(--rw-red);
        color:        var(--rw-red);
    }
    body.gradia-pos-dark #p9-rewards-modal .p9-rw-tab.active {
        background:   rgba(185,28,28,.18);
        border-color: #fca5a5;
        color:        #fca5a5;
    }
}

/* ================================================================
   BODY — guaranteed padding at all breakpoints.
   !important overrides any conflicting base rules from pos.css.
   flex:1 + min-height:0 forces scrolling inside the card.
   ================================================================ */
#p9-rewards-modal .p9-pm-body,
#p9-earn-modal .p9-pm-body,
#p9-earn-modal .p9-earn-body {
    flex:                    1 !important;
    min-height:              0 !important;
    overflow-y:              auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior:     contain;
    padding:                 18px 20px !important;
    box-sizing:              border-box !important;
}
@media (min-width: 641px) {
    #p9-rewards-modal .p9-pm-body,
    #p9-earn-modal .p9-pm-body,
    #p9-earn-modal .p9-earn-body {
        padding: 22px 28px !important;
    }
}
body.gradia-pos-dark #p9-rewards-modal .p9-pm-body,
body.gradia-pos-dark #p9-earn-modal .p9-pm-body,
body.gradia-pos-dark #p9-earn-modal .p9-earn-body { color: #e2e8f0; }

/* ================================================================
   SEARCH ROW — explicit full-width block with bottom spacing
   ================================================================ */
#p9-rewards-modal .p9-rw-search-row {
    width:         100%;
    box-sizing:    border-box;
    margin-bottom: 2px;
}

/* ================================================================
   SEARCH INPUT
   16px font prevents iOS auto-zoom on focus
   52px min-height = thumb-friendly touch target
   ================================================================ */
#p9-rewards-modal .p9-rw-search-wrap,
#p9-earn-modal .p9-earn-search-wrap {
    position:    relative;
    display:     flex;
    align-items: center;
    width:       100%;
    box-sizing:  border-box;
}
#p9-rewards-modal .p9-rw-search-icon,
#p9-earn-modal .p9-earn-search-ico {
    position:       absolute;
    left:           16px;
    color:          #94a3b8;
    pointer-events: none;
    z-index:        1;
    flex-shrink:    0;
}
#p9-rewards-modal .p9-rw-search-input,
#p9-earn-modal .p9-earn-search-inp {
    width:          100%;
    min-height:     var(--rw-inp);
    padding:        0 48px 0 46px;
    font-size:      16px;
    font-family:    inherit;
    border-radius:  var(--rw-pill);
    border:         1.5px solid #e2e8f0;
    background:     #f1f5f9;
    color:          #1e293b;
    outline:        none;
    box-sizing:     border-box;
    -webkit-appearance: none;
    appearance:     none;
    touch-action:   manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:     border-color .15s, box-shadow .15s, background .15s;
}
#p9-rewards-modal .p9-rw-search-input:focus,
#p9-earn-modal .p9-earn-search-inp:focus {
    background:   #fff;
    border-color: var(--rw-red);
    box-shadow:   0 0 0 3px var(--rw-red-ring);
}
#p9-rewards-modal .p9-rw-search-input::placeholder,
#p9-earn-modal .p9-earn-search-inp::placeholder {
    color:     #94a3b8;
    font-size: 15px;
}
body.gradia-pos-dark #p9-rewards-modal .p9-rw-search-input,
body.gradia-pos-dark #p9-earn-modal .p9-earn-search-inp {
    background:   rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
    color:        #e2e8f0;
}
body.gradia-pos-dark #p9-rewards-modal .p9-rw-search-input:focus,
body.gradia-pos-dark #p9-earn-modal .p9-earn-search-inp:focus {
    background:   rgba(255,255,255,.12);
    border-color: #fca5a5;
    box-shadow:   0 0 0 3px rgba(252,165,165,.18);
}
#p9-rewards-modal .p9-rw-search-clear {
    position:    absolute;
    right:       14px;
    background:  none;
    border:      none;
    color:       #94a3b8;
    cursor:      pointer;
    padding:     8px;
    font-size:   16px;
    line-height: 1;
    display:     flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
#p9-rewards-modal .p9-rw-search-clear:hover { color: var(--rw-red); }

/* ================================================================
   SEARCH RESULTS
   Mobile  : no max-height, card body handles all scrolling
   Desktop : capped at 260px so footer stays visible on screen
   ================================================================ */
#p9-rewards-modal .p9-rw-results,
#p9-earn-modal #p9-earn-results {
    margin-top:    10px;
    border:        1.5px solid #e2e8f0;
    border-radius: var(--rw-r-sm);
    overflow:      hidden;
    background:    #fff;
}
@media (min-width: 641px) {
    #p9-rewards-modal .p9-rw-results,
    #p9-earn-modal #p9-earn-results {
        max-height:              260px;
        overflow-y:              auto;
        -webkit-overflow-scrolling: touch;
    }
}
body.gradia-pos-dark #p9-rewards-modal .p9-rw-results,
body.gradia-pos-dark #p9-earn-modal #p9-earn-results {
    background:   #1e293b;
    border-color: rgba(255,255,255,.1);
}

.rw-result-item {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       13px 16px;
    min-height:    62px;
    cursor:        pointer;
    border-bottom: 1px solid #f1f5f9;
    touch-action:  manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select:   none;
    transition:    background .1s;
    box-sizing:    border-box;
}
.rw-result-item:last-child { border-bottom: none; }
.rw-result-item:hover,
.rw-result-item:active { background: #fef2f2; }
body.gradia-pos-dark .rw-result-item { border-bottom-color: rgba(255,255,255,.06); }
body.gradia-pos-dark .rw-result-item:hover,
body.gradia-pos-dark .rw-result-item:active { background: rgba(185,28,28,.12); }

.rw-result-avatar {
    width:       42px;
    height:      42px;
    border-radius: 50%;
    background:  linear-gradient(135deg, var(--rw-red) 0%, var(--rw-red-dark) 100%);
    color:       #fff;
    font-size:   13px;
    font-weight: 700;
    display:     flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rw-result-info  { flex: 1; min-width: 0; }
.rw-result-name  { font-size: 14px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-result-email { font-size: 12px; color: #64748b; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-result-pts   { text-align: right; flex-shrink: 0; }
.rw-result-pts-num { font-size: 14px; font-weight: 700; color: var(--rw-red); }
.rw-result-pts-lbl { font-size: 11px; color: #94a3b8; margin-top: 2px; }
body.gradia-pos-dark .rw-result-name  { color: #e2e8f0; }
body.gradia-pos-dark .rw-result-email { color: rgba(255,255,255,.45); }
.rw-no-result { padding: 20px 16px; text-align: center; font-size: 14px; color: #94a3b8; }

/* ================================================================
   REGISTER FORM
   Mobile  : single column stack
   Desktop : Name + Email side by side, Phone full width below
   ================================================================ */
#p9-rewards-modal .p9-rw-reg-intro {
    font-size:   13px;
    color:       #64748b;
    text-align:  center;
    margin:      0 0 18px;
    line-height: 1.6;
}
body.gradia-pos-dark #p9-rewards-modal .p9-rw-reg-intro { color: rgba(255,255,255,.5); }

#p9-rewards-modal .p9-rw-reg-fields {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}
@media (min-width: 641px) {
    #p9-rewards-modal .p9-rw-reg-fields {
        display:               grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows:    auto auto;
        gap:                   14px 16px;
    }
    /* Phone field spans both columns */
    #p9-rewards-modal .p9-rw-reg-fields .p9-rw-field-wrap:nth-child(3) {
        grid-column: 1 / -1;
    }
}

#p9-rewards-modal .p9-rw-field-wrap {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    width:          100%;
    box-sizing:     border-box;
}
#p9-rewards-modal .p9-rw-field-label {
    display:        flex;
    flex-direction: row;
    align-items:    center;
    gap:            6px;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color:          #64748b;
    padding:        0 4px;
}
body.gradia-pos-dark #p9-rewards-modal .p9-rw-field-label { color: rgba(255,255,255,.4); }
#p9-rewards-modal .p9-rw-field-label svg { flex-shrink: 0; }

#p9-rewards-modal .p9-rw-reg-input {
    width:          100%;
    min-height:     var(--rw-inp);
    box-sizing:     border-box;
    padding:        0 18px;
    font-size:      16px;
    font-family:    inherit;
    border-radius:  var(--rw-pill);
    border:         1.5px solid #e2e8f0;
    background:     #f1f5f9;
    color:          #1e293b;
    outline:        none;
    -webkit-appearance: none;
    appearance:     none;
    touch-action:   manipulation;
    transition:     border-color .15s, box-shadow .15s, background .15s;
}
#p9-rewards-modal .p9-rw-reg-input:focus {
    background:   #fff;
    border-color: var(--rw-red);
    box-shadow:   0 0 0 3px var(--rw-red-ring);
}
#p9-rewards-modal .p9-rw-reg-input::placeholder { color: #94a3b8; }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-reg-input {
    background:   rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.14);
    color:        #e2e8f0;
}
body.gradia-pos-dark #p9-rewards-modal .p9-rw-reg-input:focus {
    background:   rgba(255,255,255,.11);
    border-color: #fca5a5;
    box-shadow:   0 0 0 3px rgba(252,165,165,.18);
}

#p9-rewards-modal .p9-rw-reg-status-msg {
    margin-top:    12px;
    padding:       11px 15px;
    border-radius: var(--rw-r-sm);
    font-size:     13px;
    line-height:   1.5;
}
#p9-rewards-modal .p9-rw-reg-status-msg.rw-error   { background: #fef2f2; color: var(--rw-red); border: 1px solid #fecaca; }
#p9-rewards-modal .p9-rw-reg-status-msg.rw-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-reg-status-msg.rw-error   { background: rgba(185,28,28,.14); border-color: rgba(185,28,28,.3); }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-reg-status-msg.rw-success { background: rgba(21,128,61,.14); border-color: rgba(21,128,61,.3); color: #86efac; }

#p9-rewards-modal .p9-rw-reg-submit-btn {
    display:       block;
    width:         100%;
    margin-top:    20px;
    min-height:    var(--rw-inp);
    padding:       0 24px;
    font-size:     15px;
    font-weight:   700;
    font-family:   inherit;
    color:         #fff;
    background:    linear-gradient(135deg, var(--rw-red) 0%, var(--rw-red-dark) 100%);
    border:        none;
    border-radius: var(--rw-pill);
    cursor:        pointer;
    box-shadow:    0 4px 14px rgba(185,28,28,.35);
    touch-action:  manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance:    none;
    transition:    opacity .15s;
}
#p9-rewards-modal .p9-rw-reg-submit-btn:hover:not(:disabled) { opacity: .86; }
#p9-rewards-modal .p9-rw-reg-submit-btn:disabled { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; box-shadow: none; }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-reg-submit-btn:disabled { background: rgba(255,255,255,.1); color: rgba(255,255,255,.25); }

/* ================================================================
   CUSTOMER CARD
   ================================================================ */
#p9-rewards-modal .p9-rw-customer-card {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       14px 16px;
    margin-bottom: 18px;
    background:    #f8fafc;
    border:        1.5px solid #e2e8f0;
    border-radius: var(--rw-r-sm);
    box-sizing:    border-box;
    width:         100%;
}
body.gradia-pos-dark #p9-rewards-modal .p9-rw-customer-card {
    background:   rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.12);
}
#p9-rewards-modal .p9-rw-avatar {
    width:       44px;
    height:      44px;
    border-radius: 50%;
    background:  linear-gradient(135deg, var(--rw-red) 0%, var(--rw-red-dark) 100%);
    color:       #fff;
    font-size:   14px;
    font-weight: 700;
    display:     flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#p9-rewards-modal .p9-rw-cust-info  { flex: 1; min-width: 0; }
#p9-rewards-modal .p9-rw-cust-name  { font-size: 14px; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#p9-rewards-modal .p9-rw-cust-email { font-size: 12px; color: #64748b; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-cust-name  { color: #e2e8f0; }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-cust-email { color: rgba(255,255,255,.45); }

#p9-rewards-modal .p9-rw-balance-pill { text-align: right; flex-shrink: 0; }
#p9-rewards-modal .p9-rw-bal-points   { font-size: 13px; font-weight: 700; color: var(--rw-red); }
#p9-rewards-modal .p9-rw-bal-value    { font-size: 11.5px; color: #64748b; margin-top: 2px; }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-bal-value { color: rgba(255,255,255,.4); }

#p9-rewards-modal .p9-rw-change-btn {
    flex-shrink:  0;
    padding:      8px 14px;
    min-height:   36px;
    border-radius: var(--rw-pill);
    border:       1.5px solid #e2e8f0;
    background:   none;
    color:        #64748b;
    font-size:    12px;
    font-weight:  600;
    font-family:  inherit;
    cursor:       pointer;
    touch-action: manipulation;
    transition:   border-color .15s, color .15s;
}
#p9-rewards-modal .p9-rw-change-btn:hover { border-color: var(--rw-red); color: var(--rw-red); }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-change-btn { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.55); }

#p9-rewards-modal .p9-rw-empty-state { text-align: center; padding: 28px 16px; color: #64748b; }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-empty-state { color: rgba(255,255,255,.4); }

/* ================================================================
   REDEMPTION SLIDER
   ================================================================ */
#p9-rewards-modal .p9-rw-slider-wrap {
    width:      100%;
    box-sizing: border-box;
}

#p9-rewards-modal .p9-pm-section-label {
    font-size:      11.5px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:          #64748b;
    margin-bottom:  10px;
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    flex-wrap:      wrap;
    gap:            4px;
}
body.gradia-pos-dark #p9-rewards-modal .p9-pm-section-label { color: rgba(255,255,255,.4); }

#p9-rewards-modal .p9-rw-max-note {
    font-size:      11px !important;
    font-weight:    400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color:          #94a3b8 !important;
}
#p9-rewards-modal .p9-rw-rate-note {
    font-size:      11px !important;
    color:          #94a3b8 !important;
    margin-bottom:  10px !important;
}
body.gradia-pos-dark #p9-rewards-modal .p9-rw-rate-note { color: rgba(255,255,255,.4) !important; }

#p9-rewards-modal .p9-rw-pts-display {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    padding:         18px 0 14px;
}
#p9-rewards-modal .p9-rw-pts-big,
#p9-rewards-modal .p9-rw-pts-value {
    text-align: center;
    min-width:  80px;
}
#p9-rewards-modal .p9-rw-pts-num  { display: block; font-size: 38px; font-weight: 800; color: #1e293b; line-height: 1; }
#p9-rewards-modal .p9-rw-disc-num { display: block; font-size: 32px; font-weight: 800; color: #15803d; line-height: 1; }
#p9-rewards-modal .p9-rw-pts-label {
    display:        block;
    font-size:      10.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          #94a3b8;
    margin-top:     5px;
}
#p9-rewards-modal .p9-rw-pts-arrow { font-size: 20px; color: #cbd5e1; flex-shrink: 0; }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-pts-num  { color: #e2e8f0; }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-disc-num { color: #86efac; }

#p9-rewards-modal .p9-rw-slider {
    width:              100% !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    height:             6px !important;
    border-radius:      3px !important;
    background:         #e2e8f0 !important;
    outline:            none !important;
    cursor:             pointer;
    margin:             14px 0 12px;
    touch-action:       manipulation;
    box-sizing:         border-box;
    pointer-events:     auto !important;
}
#p9-rewards-modal .p9-rw-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width:       28px !important;
    height:      28px !important;
    border-radius: 50% !important;
    background:  var(--rw-red) !important;
    cursor:      pointer;
    box-shadow:  0 2px 8px rgba(185,28,28,.4);
}
#p9-rewards-modal .p9-rw-slider::-moz-range-thumb {
    width:       28px !important;
    height:      28px !important;
    border-radius: 50% !important;
    border:      none !important;
    background:  var(--rw-red) !important;
    cursor:      pointer;
    box-shadow:  0 2px 8px rgba(185,28,28,.4);
}
body.gradia-pos-dark #p9-rewards-modal .p9-rw-slider { background: rgba(255,255,255,.15) !important; }

#p9-rewards-modal .p9-rw-quick-btns {
    display:       flex;
    flex-wrap:     wrap;
    gap:           8px;
    margin-bottom: 14px;
}
#p9-rewards-modal .p9-rw-quick-btns button {
    flex:          1;
    min-height:    42px;
    padding:       0 10px;
    border-radius: var(--rw-pill);
    border:        1.5px solid #e2e8f0;
    background:    #f8fafc;
    color:         #1e293b;
    font-size:     12.5px;
    font-weight:   600;
    font-family:   inherit;
    cursor:        pointer;
    white-space:   nowrap;
    touch-action:  manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance:    none;
    transition:    all .14s;
}
#p9-rewards-modal .p9-rw-quick-btns button:hover,
#p9-rewards-modal .p9-rw-quick-btns button.rw-active {
    border-color: var(--rw-red);
    background:   var(--rw-red-soft);
    color:        var(--rw-red);
}
body.gradia-pos-dark #p9-rewards-modal .p9-rw-quick-btns button {
    background:   rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
    color:        #e2e8f0;
}

#p9-rewards-modal .p9-rw-manual-row {
    display:       flex;
    align-items:   center;
    gap:           10px;
    margin-bottom: 10px;
}
#p9-rewards-modal .p9-rw-manual-label {
    font-size:   12px;
    color:       #64748b;
    white-space: nowrap;
    flex-shrink: 0;
}
body.gradia-pos-dark #p9-rewards-modal .p9-rw-manual-label { color: rgba(255,255,255,.45); }

#p9-rewards-modal .p9-rw-manual-input {
    flex:           1;
    min-height:     44px;
    padding:        0 14px;
    font-size:      16px;
    font-family:    inherit;
    border-radius:  var(--rw-pill);
    border:         1.5px solid #e2e8f0;
    background:     #f1f5f9;
    color:          #1e293b;
    outline:        none;
    box-sizing:     border-box;
    -webkit-appearance: none;
    appearance:     none;
    touch-action:   manipulation;
    transition:     border-color .15s;
}
#p9-rewards-modal .p9-rw-manual-input:focus { background: #fff; border-color: var(--rw-red); }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-manual-input {
    background:   rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.14);
    color:        #e2e8f0;
}

#p9-rewards-modal .p9-rw-order-context {
    display:       flex;
    align-items:   center;
    gap:           7px;
    padding:       10px 14px;
    background:    var(--rw-red-soft);
    border-radius: var(--rw-r-sm);
    font-size:     12px;
    color:         #64748b;
    margin-bottom: 8px;
    box-sizing:    border-box;
    width:         100%;
}
body.gradia-pos-dark #p9-rewards-modal .p9-rw-order-context { color: rgba(255,255,255,.45); }

#p9-rewards-modal #p9-rw-status {
    margin-top:    10px;
    padding:       10px 14px;
    border-radius: var(--rw-r-sm);
    font-size:     13px;
    line-height:   1.5;
    box-sizing:    border-box;
    width:         100%;
}
#p9-rewards-modal #p9-rw-status.rw-error   { background: #fef2f2; color: var(--rw-red); border: 1px solid #fecaca; }
#p9-rewards-modal #p9-rw-status.rw-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
body.gradia-pos-dark #p9-rewards-modal #p9-rw-status.rw-error   { background: rgba(185,28,28,.14); border-color: rgba(185,28,28,.3); }
body.gradia-pos-dark #p9-rewards-modal #p9-rw-status.rw-success { background: rgba(21,128,61,.14); border-color: rgba(21,128,61,.3); color: #86efac; }

/* ================================================================
   FOOTER — redeem modal
   ================================================================ */
#p9-rewards-modal .p9-pm-footer {
    padding:       14px 20px;
    padding-bottom: calc(14px + var(--rw-safe));
    border-top:    1px solid #e2e8f0;
    background:    #fff;
    display:       flex !important;
    align-items:   center;
    gap:           12px;
    flex-shrink:   0 !important;
    box-sizing:    border-box;
}
@media (min-width: 641px) {
    #p9-rewards-modal .p9-pm-footer {
        padding:        16px 28px;
        padding-bottom: 16px;
    }
}
body.gradia-pos-dark #p9-rewards-modal .p9-pm-footer {
    background:        #0f172a;
    border-top-color:  rgba(255,255,255,.1);
}

#p9-rewards-modal .p9-rw-footer-summary {
    font-size:     13px;
    color:         #64748b;
    flex:          1;
    min-width:     0;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
#p9-rewards-modal .p9-rw-footer-summary strong { color: #1e293b; }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-footer-summary        { color: rgba(255,255,255,.45); }
body.gradia-pos-dark #p9-rewards-modal .p9-rw-footer-summary strong { color: #e2e8f0; }

#p9-rewards-modal .p9-pm-pill-primary {
    flex-shrink:    0;
    padding:        12px 22px;
    min-height:     46px;
    font-size:      13.5px;
    font-weight:    700;
    font-family:    inherit;
    color:          #fff;
    background:     linear-gradient(135deg, var(--rw-red) 0%, var(--rw-red-dark) 100%);
    border:         none !important;
    border-radius:  var(--rw-pill) !important;
    cursor:         pointer;
    box-shadow:     0 3px 10px rgba(185,28,28,.32);
    touch-action:   manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance:     none;
    white-space:    nowrap;
    transition:     opacity .15s;
}
#p9-rewards-modal .p9-pm-pill-primary:hover:not(:disabled) { opacity: .86; }
#p9-rewards-modal .p9-pm-pill-primary:disabled { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; box-shadow: none; }
body.gradia-pos-dark #p9-rewards-modal .p9-pm-pill-primary:disabled { background: rgba(255,255,255,.1); color: rgba(255,255,255,.25); }

/* ================================================================
   EARN MODAL — customer card, footer, award button
   ================================================================ */
#p9-earn-modal .p9-earn-selected-card {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       14px 16px;
    margin-bottom: 14px;
    background:    #f8fafc;
    border:        1.5px solid #e2e8f0;
    border-radius: var(--rw-r-sm);
    width:         100%;
    box-sizing:    border-box;
}
body.gradia-pos-dark #p9-earn-modal .p9-earn-selected-card {
    background:   rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.12);
}
#p9-earn-modal .p9-earn-avatar {
    width:       44px;
    height:      44px;
    border-radius: 50%;
    background:  linear-gradient(135deg, var(--rw-red) 0%, var(--rw-red-dark) 100%);
    color:       #fff;
    font-size:   14px;
    font-weight: 700;
    display:     flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#p9-earn-modal .p9-earn-selected-info { flex: 1; min-width: 0; }
#p9-earn-modal .p9-earn-selected-name { font-size: 14px; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#p9-earn-modal .p9-earn-selected-sub  { font-size: 12px; color: #64748b; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.gradia-pos-dark #p9-earn-modal .p9-earn-selected-name { color: #e2e8f0; }
body.gradia-pos-dark #p9-earn-modal .p9-earn-selected-sub  { color: rgba(255,255,255,.45); }

#p9-earn-modal .p9-earn-change-btn {
    flex-shrink:  0;
    padding:      8px 14px;
    min-height:   36px;
    border-radius: var(--rw-pill);
    border:       1.5px solid #e2e8f0;
    background:   none;
    color:        #64748b;
    font-size:    12px;
    font-weight:  600;
    font-family:  inherit;
    cursor:       pointer;
    touch-action: manipulation;
    transition:   border-color .15s, color .15s;
}
#p9-earn-modal .p9-earn-change-btn:hover { border-color: var(--rw-red); color: var(--rw-red); }
body.gradia-pos-dark #p9-earn-modal .p9-earn-change-btn { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.5); }

#p9-earn-modal .p9-pm-footer,
#p9-earn-modal .p9-earn-ftr {
    padding:       14px 20px;
    padding-bottom: calc(14px + var(--rw-safe));
    border-top:    1px solid #e2e8f0;
    background:    #fff;
    display:       flex !important;
    align-items:   center;
    flex-shrink:   0 !important;
    box-sizing:    border-box;
}
@media (min-width: 641px) {
    #p9-earn-modal .p9-pm-footer,
    #p9-earn-modal .p9-earn-ftr {
        padding:        16px 28px;
        padding-bottom: 16px;
    }
}
body.gradia-pos-dark #p9-earn-modal .p9-pm-footer,
body.gradia-pos-dark #p9-earn-modal .p9-earn-ftr {
    background:        #0f172a;
    border-top-color:  rgba(255,255,255,.1);
}

#p9-earn-modal .p9-earn-award-btn {
    display:       block !important;
    width:         100%;
    min-height:    52px;
    padding:       0 24px;
    font-size:     15px;
    font-weight:   700;
    font-family:   inherit;
    color:         #fff;
    background:    linear-gradient(135deg, var(--rw-red) 0%, var(--rw-red-dark) 100%);
    border:        none;
    border-radius: var(--rw-pill);
    cursor:        pointer;
    box-shadow:    0 4px 14px rgba(185,28,28,.38);
    touch-action:  manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance:    none;
    text-align:    center;
    transition:    opacity .15s, transform .1s;
}
#p9-earn-modal .p9-earn-award-btn:hover:not(:disabled)  { opacity: .86; transform: translateY(-1px); }
#p9-earn-modal .p9-earn-award-btn:active:not(:disabled) { transform: translateY(0); }
#p9-earn-modal .p9-earn-award-btn:disabled {
    background: #e2e8f0;
    color:      #94a3b8;
    cursor:     not-allowed;
    box-shadow: none;
    transform:  none;
}
body.gradia-pos-dark #p9-earn-modal .p9-earn-award-btn:disabled { background: rgba(255,255,255,.1); color: rgba(255,255,255,.25); }