/*slick by default settings*/

/* Map CI3 rewards variable names onto the brand tokens injected by base.php.
   base.php declares --brand-primary on `body`, so scope the alias to body too
   (a :root alias can't resolve a var declared on a descendant).
   Without this the banner / login-now blocks fall back to black. */
body {
    --main-bg-color: var(--brand-primary);
    --secondary-bg-color: var(--brand-secondary);
}

.card-item.card-placeholder {
    filter: grayscale(100%) brightness(90%);
}

.card-item.card-placeholder:before {
    content: "";
    position: absolute;
    background-image: url(https://wla.uengage.in/assets/themes/ue_default/img/lockicon.svg);
    width: 35px;
    height: 35px;
    background-size: cover;
    left: 50%;
    top: 40%;
    z-index: 1;
    transform: translate(-50%, -50%);
}

.loyalty-stats-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.loyalty-stats-card h3 {
    font-weight: 700;
    color: #111;
}

/* Make cards-row show 4.5 items on desktop, 2.5 on mobile */
.cards-row .card-item {
    min-width: calc((100% - 20px) / 4.5) !important;
    max-width: calc((100% - 20px) / 4.5) !important;
    width: calc((100% - 20px) / 4.5) !important;
    flex-shrink: 0;
}

@media only screen and (max-width: 767px) {
    .cards-row .card-item {
        min-width: calc((100% - 20px) / 2.5) !important;
        max-width: calc((100% - 20px) / 2.5) !important;
        width: calc((100% - 20px) / 2.5) !important;
    }
}

/* Hide tier sub heading */
.tier-meta .sub {
    display: none !important;
}

/* Make rewards-placeholder images square */
.rewards-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background: #f5f5f5;
}

.rewards-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Lock icon for locked rewards */
.rewardlocked .rewards-placeholder {
    filter: grayscale(100%);
}




.rewardlocked .rewards-placeholder:before {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    background-image: url("https://wla.uengage.in/assets/themes/ue_default/img/lockicon.svg");
}

/* Promo code coupon style */
.promo-code-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    margin: 8px 0;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.promo-code-box svg {
    flex-shrink: 0;
}

/* Promo code in modal */
.promo-code-box-modal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.promo-code-box-modal svg {
    flex-shrink: 0;
}

/* Milestone card current step styling */
.step.current .circle {
    background: var(--main-bg-color) !important;
    color: #fff !important;
    border-color: var(--main-bg-color) !important;
    width: 50px !important;
    height: 50px !important;
    border: 3px solid #fff !important;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2) !important;
    font-size: 18px !important;
}

.step.current .label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #000 !important;
}

/* Tier info styling */
.tierinfo {
    background-color: #F6F6F6;
    display: flex;
    margin-bottom: 20px;
    border-radius: 15px;
    text-align: center;
    list-style: none;
    padding: 0;
}

.tierinfo li {
    width: 100%;
    max-width: 33.33%;
    padding: 15px 10px;
    border-right: 1px solid #E2E2E2;
}

.tierinfo li:last-child {
    border-right: none;
}

.tierinfo li p {
    margin: 0;
    font-size: 16px;
    line-height: normal;
}

.tierinfo li p span {
    display: block;
    font-size: 25px;
    line-height: normal;
    font-weight: 700;
}

.tierinfo li p.redeemed {
    color: #139000;
}

@media only screen and (max-width: 767px) {
    .tierinfo p {
        font-size: 14px;
    }

    .tierinfo li p span {
        font-size: 20px;
    }

    .tierinfo li {
        padding: 12px 5px;
    }
}

/* Eligibility Criteria Modal Styles */
.eligibility-section {
    margin-bottom: 1.5rem;
}

.section-divider {
    text-align: center;
    margin: 1.5rem 0;
    position: relative;
}

.section-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
    z-index: 0;
}

.section-divider span {
    background: #fdfdfd;
    padding: 0 1rem;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    position: relative;
    z-index: 1;
}

.eligibility-accordion {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.accordion-item {
    border-bottom: none;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    background: #fff;
    transition: background 0.2s;
    font-weight: 500;
    color: #333;
}

.accordion-header:hover {
    background: #f8f8f8;
}

.accordion-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 1.25rem;
    color: #666;
    font-size: 14px;
}

.accordion-item.active .accordion-content {
    max-height: 500px;
    padding: 0 1.25rem 1rem;
}

.accordion-content p {
    margin: 0.5rem 0;
    line-height: 1.6;
}

/* Milestone tier cards in eligibility modal */
.milestone-timeline {
    position: relative;
    padding-left: 0;
}

.milestone-tier-card {
    position: relative;
    padding: 0 0 1.5rem 3.5rem;
    margin-bottom: 0;
}

.milestone-tier-card::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50px;
    bottom: -10px;
    width: 2px;
    background: linear-gradient(to bottom, #4caf50 0%, #4caf50 var(--progress, 0%), #e0e0e0 var(--progress, 0%), #e0e0e0 100%);
}

.milestone-tier-card:last-child::before {
    display: none;
}

.milestone-tier-card.locked::before {
    background: #e0e0e0;
}

.milestone-tier-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    position: relative;
}

.milestone-tier-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--main-bg-color, #DA251C);
    color: var(--main-bg-color, #DA251C);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
    position: absolute;
    left: -3.5rem;
    z-index: 2;
}

.milestone-tier-card.achieved .milestone-tier-number {
    background: #4caf50;
    border-color: #4caf50;
    color: #fff;
}

.milestone-tier-card.current .milestone-tier-number {
    background: var(--main-bg-color, #DA251C);
    border-color: var(--main-bg-color, #DA251C);
    color: #fff;
}

.milestone-tier-info {
    flex: 1;
}

.milestone-tier-title {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    margin: 0 0 0.25rem;
}

.milestone-tier-subtitle {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.milestone-tier-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 0.5rem;
}

.milestone-tier-badge.achieved {
    background: #e8f5e9;
    color: #2e7d32;
}

.milestone-tier-badge.current {
    background: #fff3e0;
    color: #e65100;
}

.milestone-tier-body {
    background: #f8f8f8;
    border-radius: 12px;
    padding: 1rem;
    margin-top: 0.5rem;
}

.milestone-tier-expand-btn {
    background: none;
    border: none;
    color: var(--main-bg-color, #DA251C);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 0.5rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.milestone-tier-expand-btn svg {
    transition: transform 0.3s ease;
}

.milestone-tier-expand-btn.active svg {
    transform: rotate(180deg);
}

.milestone-tier-criteria-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.milestone-tier-criteria-content.active {
    max-height: 500px;
}

.milestone-tier-criteria-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
}

.milestone-tier-criteria-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.milestone-tier-criteria-list li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.milestone-tier-criteria-list li::before {
    content: '•';
    position: absolute;
    left: 0.5rem;
    color: var(--main-bg-color, #DA251C);
    font-weight: 700;
}

/* No Milestones Message */
.no-milestones-message {
    padding: 60px 20px;
    text-align: center;
    background: #f8f9fa;
    border-radius: 12px;
    max-width: 600px;
    margin: 0 auto;
}

.no-milestones-message svg {
    opacity: 0.8;
}

.no-milestones-message h3 {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.no-milestones-message p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

/* Single Milestone Card */
.single-milestone-card {
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.single-milestone-header {
    background: linear-gradient(135deg, var(--main-bg-color, #DA251C) 0%, #b01f17 100%);
    color: #fff;
    padding: 30px;
    text-align: center;
}

.single-milestone-header h3 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 15px 0;
    color: #fff;
}

.cashback-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.single-milestone-benefits {
    padding: 30px;
}

.single-milestone-benefits h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.benefits-list li:last-child {
    border-bottom: none;
}

.benefits-list li svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.benefits-list li span {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .no-milestones-message {
        padding: 40px 15px;
    }

    .no-milestones-message h3 {
        font-size: 20px;
    }

    .no-milestones-message p {
        font-size: 14px;
    }

    .single-milestone-header {
        padding: 20px 15px;
    }

    .single-milestone-header h3 {
        font-size: 22px;
    }

    .cashback-badge {
        font-size: 16px;
        padding: 6px 16px;
    }

    .single-milestone-benefits {
        padding: 20px 15px;
    }

    .single-milestone-benefits h4 {
        font-size: 18px;
    }

    .benefits-list li span {
        font-size: 14px;
    }

    /* How It Works - Mobile sticking cards */
    .how-it-works-row .how-it-works-col:not(:last-child) .howItWorks {
        border-bottom: none !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        margin-bottom: 0 !important;
    }

    .how-it-works-row .how-it-works-col:not(:first-child) .howItWorks {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-top: none !important;
    }

    .how-it-works-row .how-it-works-col .howItWorks {
        margin-bottom: 0 !important;
    }
}

/* Banner Carousel Spacing */
.banner-slide-item {
    padding: 0 10px;
}


@media (max-width: 767px) {
    .banner-slide-item {
        padding: 0 5px;
    }

}

/* Clean Milestone Timeline Styles - Matching Screenshot */
.milestone-timeline-clean {
    position: relative;
    padding: 0;
}

/* How it works button styling */
.how-it-works-icon {
    background: var(--main-bg-color, #DA251C) !important;
    color: #fff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    width: 32px;
    height: 32px;
    margin: 0 auto;
}

#howItWorksSection button {
    cursor: pointer;
    transition: all 0.3s ease;
}

#howItWorksSection button:hover .how-it-works-icon {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(218, 37, 28, 0.3);
}

.milestone-item-clean {
    display: flex;
    gap: 1rem;
    padding: 0 0 1.5rem 0;
    position: relative;
}

.milestone-item-clean:last-child {
    padding-bottom: 0;
}

/* Dotted connecting line */
.milestone-item-clean:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 50px;
    bottom: -10px;
    width: 2px;
    border-left: 2px dashed #4CAF50;
}

.milestone-item-clean.locked:not(:last-child)::before {
    border-left-color: #ccc;
}

/* Number Circle */
.milestone-number-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #C9A961;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(201, 169, 97, 0.3);
}

.milestone-item-clean.achieved .milestone-number-circle {
    background: #4CAF50;
}

.milestone-item-clean.current .milestone-number-circle {
    background: #C9A961;
}

.milestone-item-clean.locked .milestone-number-circle {
    background: #C9A961;
    opacity: 0.6;
}

/* Content Area */
.milestone-content-clean {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

/* Header Section */
.milestone-header-clean {
    padding: 1rem 1.25rem;
    background: #F5F5F5;
}

.milestone-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.milestone-name {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}

.milestone-status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.milestone-status-badge.badge-achieved {
    background: #D4EDDA;
    color: #155724;
}

.milestone-status-badge.badge-current {
    background: #4CAF50;
    color: #fff;
}

.milestone-status-badge.badge-locked {
    background: #FFF3CD;
    color: #856404;
}

.milestone-cashback {
    font-size: 15px;
    color: #666;
    font-weight: 500;
}

/* Eligibility Dropdown */
.eligibility-dropdown {
    border-top: 1px solid #E8E8E8;
}

.eligibility-toggle {
    width: 100%;
    padding: 1rem 1.25rem;
    background: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    transition: background 0.2s ease;
}

.eligibility-toggle:hover {
    background: #FAFAFA;
}

.eligibility-toggle svg {
    transition: transform 0.3s ease;
    opacity: 0.6;
}

.eligibility-toggle.active svg {
    transform: rotate(180deg);
}

.eligibility-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #fff;
}

.eligibility-content.active {
    max-height: 1000px;
}

.criteria-list {
    list-style: none;
    padding: 0 1.25rem 1.25rem 1.25rem;
    margin: 0;
}

.criteria-list li {
    padding: 0.5rem 0 0.5rem 1.25rem;
    position: relative;
    color: #555;
    font-size: 13px;
    line-height: 1.5;
}

.criteria-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #333;
    font-weight: 700;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .milestone-item-clean {
        gap: 0.75rem;
    }

    .milestone-number-circle {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .milestone-item-clean:not(:last-child)::before {
        left: 19px;
    }

    .milestone-name {
        font-size: 16px;
    }

    .milestone-header-clean {
        padding: 0.875rem 1rem;
    }

    .eligibility-toggle {
        padding: 0.875rem 1rem;
        font-size: 13px;
    }

    .criteria-list {
        padding: 0 1rem 1rem 1rem;
    }

    .criteria-list li {
        font-size: 12px;
    }
}

.eligibility-criteria-link {
    text-decoration: underline;
    color: var(--main-bg-color, #DA251C);
    cursor: pointer;
    font-size: 14px;
    display: inline-block;
    margin-top: 0.5rem;
}

.eligibility-criteria-link:hover {
    color: #b71c1c;
}

/* Modal Header Styles */
/* .modal-header {
    background-color: var(--main-bg-color, #DA251C) !important;
    border-bottom: none !important;
} */

.modal-header .modal-title {
    /* color: var(--secondary-bg-color, #ffffff) !important; */
    font-weight: 600;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Canonical close button. The .icon-btn-close visual treatment (36px bordered
   circle, stroke "X", :focus-visible ring) lives in theme.css — these rules only
   place it inside the Bootstrap rewards modals so the cross icon matches the
   login / profile / store-picker modals used across the rest of the site. */
.modal-header .icon-btn-close,
.modal-dialog > .icon-btn-close {
    margin-left: auto;
}

/* The mobile close "X" is a direct child of .modal-dialog, which Bootstrap 5
   gives `pointer-events: none` (so empty dialog area passes clicks to the
   backdrop). Without re-enabling it, taps fall straight through the button and
   the X does nothing on mobile (it worked on desktop because that close lives
   inside .modal-content, which is pointer-events:auto). */
.modal-dialog > .icon-btn-close {
    pointer-events: auto;
}

/* Eligibility modal's mobile close floats over a coloured banner — keep an
   opaque, anchored circle so it stays visible (not clipped / low-contrast). */
#eligibility-criteria .modal-dialog > .icon-btn-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    background: var(--surface, #fff);
}

/* Offer/promo modal: close sits top-right inside the header (like the other
   rewards modals), so no absolute float that would overlap the nav. */
#offer-rewards .modal-header {
    padding: 16px 20px 8px;
}

/* .modal-header .close svg,
.modal-header .close svg path {
    fill: var(--secondary-bg-color, #ffffff) !important;
} */

/* ── Align the loyalty-page Bootstrap modals with the site-wide popup design
   (theme.css .popup-sheet / .btn-brand). rewards_*.css loads only on this
   page, so these .modal overrides are page-scoped — the rest of the site's
   .popup-overlay/.popup-sheet popups are untouched. ── */

/* Sheet surface: match .popup-sheet (var(--surface) card, --r-lg radius, soft
   shadow, no Bootstrap hairline border). Also cap the height and make it a
   flex column so the body can scroll — Bootstrap leaves height unset, which is
   why long popups ("How it works"/Eligibility, Transaction history) couldn't
   scroll. #offer-rewards keeps its own overflow via an inline style. */
.modal-content {
    background: var(--surface, #fff);
    border: none;
    border-radius: var(--r-lg, 18px);
    box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.18));
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header + footer stay fixed; the body is the scroll area. */
.modal-header,
.modal-footer {
    flex-shrink: 0;
}

.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-header .modal-title {
    font-weight: 700;
}

/* Desktop: centred card capped to the site popup width (.popup-sheet is 480px). */
@media (min-width: 768px) {
    .modal-dialog {
        max-width: 480px;
        margin: 1.75rem auto;
    }
}

/* Mobile: bottom sheet with a rounded top edge, like .popup-sheet. */
@media (max-width: 767px) {
    .modal-content {
        border-radius: var(--r-lg, 18px) var(--r-lg, 18px) 0 0;
    }
}

/* Primary action (Claim Reward, etc.) → brand pill, matching .btn-brand used
   in the login / cart / checkout flows instead of Bootstrap's flat btn-primary. */
.modal .btn.btn-primary {
    background: var(--brand);
    color: var(--secondary-bg-color, #fff);
    border: none;
    border-radius: var(--r-full, 999px);
    padding: .65rem 1.8rem;
    font-weight: 600;
    transition: filter var(--dur, .2s) var(--ease, ease);
}

.modal .btn.btn-primary:hover,
.modal .btn.btn-primary:focus {
    background: var(--brand);
    filter: brightness(.94);
}

/* Wallet Reward Card Styles */
.wallet-reward-card {
    position: relative;
}

.wallet-reward-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.wallet-reward-container {
    background: #ffffff;
    border: 3px solid transparent;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

.wallet-reward-container:hover {
    border-color: var(--main-bg-color, #DA251C);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.wallet-reward-container.wallet-reward-locked {
    filter: grayscale(100%);
    opacity: 0.6;
    cursor: not-allowed;
}

.wallet-reward-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background: #f5f5f5;
}

.wallet-reward-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.wallet-reward-title {
    padding: 16px 16px 12px;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    text-align: center;
    line-height: 1.3;
}

.wallet-reward-points {
    padding: 0 16px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.wallet-reward-points .points-number {
    font-size: 48px;
    font-weight: 800;
    color: #111827;
    line-height: 1;
}

.wallet-reward-points .points-label {
    font-size: 16px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 2px;
}

.wallet-reward-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--main-bg-color, #DA251C);
    color: #ffffff;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 16px 16px;
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wallet-reward-button:hover {
    opacity: 0.9;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.wallet-reward-button .button-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.wallet-reward-button-locked {
    background: #9ca3af !important;
    cursor: not-allowed;
    pointer-events: none;
}

.wallet-reward-button-claimed {
    background: #10b981 !important;
    cursor: default;
    pointer-events: none;
}

/* Responsive adjustments for wallet reward cards */
@media only screen and (max-width: 767px) {
    .wallet-reward-title {
        font-size: 16px;
        padding: 12px 12px 8px;
    }

    .wallet-reward-points .points-number {
        font-size: 36px;
    }

    .wallet-reward-points .points-label {
        font-size: 14px;
    }

    .wallet-reward-button {
        font-size: 14px;
        padding: 10px 10px;
        margin: 0 12px 12px;
    }

    .wallet-reward-button .button-icon {
        width: 20px;
        height: 20px;
    }
}

/* Collected Reward Card Styles */
.collected-reward-card {
    position: relative;
}

.collected-reward-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.collected-reward-container {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.collected-reward-container:hover {
    border-color: var(--main-bg-color, #DA251C);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.collected-reward-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background: #f5f5f5;
}

.collected-reward-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.collected-reward-content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.collected-reward-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    text-align: center;
    line-height: 1.3;
}

.collected-promo-code {
    width: 100%;
    padding: 10px 16px;
    background: #ffffff;
    border: 2px dashed var(--main-bg-color, #DA251C);
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 16px;
    color: var(--main-bg-color, #DA251C);
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
}

.collected-reward-expiry {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fffbeb;
    border-top: 1px solid #fef3c7;
    font-size: 14px;
    font-weight: 600;
    color: #f59e0b;
}

.collected-reward-expiry svg {
    flex-shrink: 0;
    fill: #f59e0b;
}

/* Responsive adjustments for collected reward cards */
@media only screen and (max-width: 767px) {
    .collected-reward-title {
        font-size: 16px;
        padding: 0;
    }

    .collected-promo-code {
        font-size: 14px;
        padding: 8px 12px;
    }

    .collected-reward-content {
        padding: 12px;
        gap: 10px;
    }

    .collected-reward-expiry {
        font-size: 13px;
        padding: 10px 12px;
    }

    .collected-reward-expiry svg {
        width: 14px;
        height: 14px;
    }
}

/* Claim Confirmation Modal Styles */
.claim-confirmation-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.claim-confirmation-modal.show {
    opacity: 1;
    visibility: visible;
}

.claim-confirmation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.claim-confirmation-content {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.claim-confirmation-modal.show .claim-confirmation-content {
    transform: scale(1);
}

.claim-confirmation-header {
    padding: 24px 24px 16px;
    background-color: var(--main-bg-color, #DA251C);
    border-bottom: none;
}

.claim-confirmation-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--secondary-bg-color, #ffffff);
}

.claim-confirmation-body {
    padding: 24px;
}

.claim-confirmation-body p {
    margin: 0 0 16px;
    font-size: 15px;
    color: #4b5563;
    line-height: 1.6;
}

.reward-title-confirm {
    font-size: 18px !important;
    color: #111827 !important;
    margin-bottom: 20px !important;
    text-align: center;
}

.points-deduction-warning {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #fffbeb;
    border: 2px solid #fcd34d;
    border-radius: 12px;
    margin-top: 16px;
}

.points-deduction-warning svg {
    flex-shrink: 0;
}

.points-deduction-warning span {
    font-size: 14px;
    color: #92400e;
    line-height: 1.5;
}

.claim-confirmation-footer {
    padding: 16px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}


.download-icons a:first-child {
    margin-left: 0px;
}
.download-icons a:last-child {
    margin-right: 0px;
}
.download-icons a {
    margin: 0px 4px;
}
.download-icons img {
    width: 100%;
    max-width: 120px;
}
.download-the-app-section:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--main-bg-color);
    border-radius: 100px;
    left: 0;
    opacity: 0.1;
    top: 0px;
}
.download-the-app-links-icons p {
    font-size: 19px;
}
.download-the-app-section h5 {
    font-size: 26px;
}
.scan-code {
    width: 100%;
    max-width: 270px;
    z-index: 1;
}
.download-the-app-detailed {
    margin-bottom: -40px;
    position: relative;
}
.scan-qr-label {
    position: absolute;
    top: 0;
    left: -10px;
    width: 200px;
    height: auto;
    z-index: 2;
    pointer-events: none;
}
@media (max-width: 767px) {
    .scan-qr-label {
        width: 150px;
        left: -5px;
    }
}
.qr-code {
    position: absolute;
    left: 52%;
    transform: translate(-50%, 0%);
    width: 100%;
    max-width: 150px;
    top: 36%;
}
.download-the-app-section {
    padding: 40px 0;
    background-color: #ffffff;
    border-radius: 100px;
    z-index: 1;
    margin: 30px 0;
}
.logo-scan-bg .logo-scan {
    position: absolute;
    top: 33%;
    width: 100%;
    max-width: 150px;
    left: 50%;
    transform: translate(-50%, 0%);
    border-radius: 50%;
}
.logo-scan-bg {
    left: 210px;
    z-index: 0;
    margin-top: -51px;
    position: absolute;
    width: 330px;
}
.logo-scan-bg svg {
    width: 100%;
    max-width: 100%;
    height: auto;
}
.office-address p {
    font-size: 13px;
    margin: 0 auto;
    width: 100%;
    max-width: 1050px;
    line-height: 20px;
}
@media (max-width: 767px) {
    .download-the-app-section h5 {
        font-size: 20px;
        padding: 0 5px;
    }
    .download-the-app-section:before {
        border-radius: 80px;
    }
    .download-icons img {
        max-width: 110px;
    }
    .download-icons {
        margin-top: 15px;
        margin-bottom: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    /* theme.css sets img{display:block}; keep the store badges in their
       true aspect ratio and side by side rather than stacked/stretched. */
    .download-icons a {
        display: inline-flex;
    }
    .download-icons img {
        width: 110px;
        height: auto;
        max-width: 110px;
    }
    .download-the-app-section {
        border-radius: 80px;
        overflow: hidden;
    }
    .scan-code {
        max-width: 180px;
    }
    .qr-code {
        max-width: 100px;
        top: 37%;
    }
    .download-the-app-detailed {
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
        margin-bottom: -40px;
    }
    .logo-scan-bg {
        left: 190px;
        margin-top: -32px;
        width: 218px;
    }
    .logo-scan-bg .logo-scan {
        top: 28%;
        max-width: 120px;
    }
}
@media (max-width: 767px) {
    .logo-scan-bg {
        left: 160px;
    }
}

.claim-btn-cancel,
.claim-btn-confirm {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
}

.claim-btn-cancel {
    background: #f3f4f6;
    color: #374151;
}

.claim-btn-cancel:hover {
    background: #e5e7eb;
}

.claim-btn-confirm {
    background: var(--main-bg-color, #DA251C);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.claim-btn-confirm:hover {
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

@media only screen and (max-width: 767px) {
    .claim-confirmation-content {
        max-width: 95%;
    }

    .claim-confirmation-header {
        padding: 20px 20px 12px;
    }

    .claim-confirmation-header h3 {
        font-size: 18px;
    }

    .claim-confirmation-body {
        padding: 20px;
    }

    .claim-confirmation-body p {
        font-size: 14px;
    }

    .reward-title-confirm {
        font-size: 16px !important;
    }

    .points-deduction-warning {
        padding: 12px;
        gap: 10px;
    }

    .points-deduction-warning svg {
        width: 20px;
        height: 20px;
    }

    .points-deduction-warning span {
        font-size: 13px;
    }

    .claim-confirmation-footer {
        padding: 12px 20px 20px;
        flex-direction: column;
    }

    .claim-btn-cancel,
    .claim-btn-confirm {
        width: 100%;
        padding: 12px 20px;
        font-size: 14px;
    }
}

.slick-dots li {
    cursor: pointer;
    display: inline-block;
    margin: 0 4px;
    position: relative;
}

.slick-dots li:first-child {
    margin-left: 0;
}

.slick-dots li:last-child {
    margin-right: 0;
}

.slick-dots li button {
    border: 0;
    outline: none;
    line-height: 0px;
    color: transparent;
    display: block;
    font-size: 0;
    width: 12px;
    height: 12px;
    padding: 0;
    background-color: #C8C8C8;
    border: 1px solid #9d9d9d;
    cursor: pointer;
    -webkit-transition: all 0.4scubic-bezier(0.55, 0.085, 0.68, 0.53);
    -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: all 0.4scubic-bezier(0.55, 0.085, 0.68, 0.53);
    border-radius: 50%;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
    background: #fff;
    border-color: var(--main-bg-color);
}

.slick-dots li.slick-active button {
    background: #fff;
    border-color: var(--main-bg-color);
    width: 35px;
    border-radius: 5px;
}

/* The offers rails render the shared home/store promo carousel, dots included.
   The page-wide .slick-dots treatment above (12px bordered circle, 35px active
   pill) belongs to the rewards sliders, so pin the rails back to the carousel's
   own 8px dots. The two !important flags this used to carry were what forced the
   override — dropped rather than answered with a third. */
.banner-slider-neww .slick-dots li {
    margin: 0;
}

.banner-slider-neww .slick-dots li button {
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.18);
}

.banner-slider-neww .slick-dots li.slick-active button {
    width: 8px;
    border: none;
    border-radius: 50%;
    background: var(--main-bg-color);
}

.slick-dots {
    text-align: center;
}

/* NOTE: do NOT force `display: flex` on .slick-track / .slick-list.
   Slick lays slides out with float + an inline pixel width per slide
   (containerWidth / slidesToShow) and translates the track by that exact
   width. A flex track makes each slide resolve its width from flex-basis
   instead of slick's inline width, so the rendered width (e.g. 320px)
   stops matching slick's positioning math (e.g. 392px). The track then
   over-shifts and the leading `infinite` clone peeks in as a confusing
   half-card, and dot/swipe navigation lands on the wrong slide. Leave the
   slick defaults (block + float) in place. */

.need-arrows .slick-arrow.slick-hidden {
    display: none;
}

.need-arrows button.slick-prev.slick-arrow.slick-disabled {
    display: none !important;
}

.need-arrows button.slick-next.slick-arrow.slick-disabled {
    display: none !important;
}

.need-arrows .slick-prev {
    left: 10px;
    z-index: 1;
    font-size: 0px;
    height: 35px;
    width: 35px;
    background: rgb(255, 255, 255);
    box-shadow: rgb(0 0 0 / 20%) 0px 3px 5px -1px, rgb(0 0 0 / 14%) 0px 6px 10px 0px, rgb(0 0 0 / 12%) 0px 1px 18px 0px !important;
    border-radius: 50% !important;
    position: absolute;
    right: unset;
    display: initial;
    border: 4px solid transparent;
    align-self: center;
    cursor: pointer;
}

.need-arrows button.slick-next.slick-arrow {
    display: block !important;
    font-size: 0px;
    height: 35px;
    width: 35px;
    background: rgb(255, 255, 255);
    box-shadow: rgb(0 0 0 / 20%) 0px 3px 5px -1px, rgb(0 0 0 / 14%) 0px 6px 10px 0px, rgb(0 0 0 / 12%) 0px 1px 18px 0px !important;
    border-radius: 50% !important;
    position: absolute;
    z-index: 1;
    left: unset;
    display: initial;
    border: 4px solid transparent;
    align-self: center;
    cursor: pointer;
    right: -28px;
}

.need-arrows .slick-next,
.need-arrows .slick-prev {
    top: 50%;
    transform: translate(-50%, -50%);
}

.need-arrows .slick-next:before {
    left: 6px;
    transform: rotate(-45deg);
    top: 9px;
    position: absolute;
    width: 0.7rem;
    height: 0.7rem;
    content: "";
    border-right: 2px solid rgb(28, 28, 28);
    border-bottom: 2px solid rgb(28, 28, 28);
    border-top: 0px;
    border-left: 0px;
    font-size: 13.5px;
    color: rgb(105, 105, 105);
    font-weight: bold;
}

.need-arrows .slick-prev:before {
    left: 10px;
    transform: rotate(135deg);
    top: 9px;
    position: absolute;
    width: 0.7rem;
    height: 0.7rem;
    content: "";
    border-right: 2px solid rgb(28, 28, 28);
    border-bottom: 2px solid rgb(28, 28, 28);
    border-top: 0px;
    border-left: 0px;
    font-size: 13.5px;
    color: rgb(105, 105, 105);
    font-weight: bold;
}

.need-arrows .slick-prev:before,
.need-arrows .slick-next:before {
    font-size: 40px;
}

/*slick by default settings*/

.common-space {
    padding: 40px 0px;
}

.common-head {
    font-size: 34px;
    margin-bottom: 15px;
    font-weight: 600;
}

.common-para {
    color: #525252;
    font-size: 18px;
}

.howItWorks {
    border: 1px solid #E2E2E2;
    text-align: center;
    padding: 20px 20px;
    border-radius: 15px;
    height: 100%;
    overflow: hidden;
}

.howItWorks p {
    color: #525252;
    font-size: 16px;
    line-height: normal;
}

.howItWorksHead {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.bgcolor::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: var(--main-bg-color);
    opacity: 0.1;
}

.rewardsdv {
    display: flex;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0px 0px 16px rgb(0 0 0 / 4%);
    align-items: center;
    overflow: hidden;
    border: 1px solid #fff;
    height: 100%;
}

.icon-side {
    width: 23%;
    background-color: var(--main-bg-color);
    height: -webkit-fill-available;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px 20px 20px 0px;
}

.text-side {
    width: 77%;
    padding: 25px 20px;
}

.icon-side svg {
    width: 100%;
    max-width: 30px;
}

.text-side h4 {
    font-size: 20px;
    font-weight: 500;
}

.text-side p {
    font-size: 16px;
    color: #525252;
    line-height: normal;
}

.joinmembership .common-head {
    color: var(--secondary-bg-color);
}

.joinmembership .common-para {
    color: var(--secondary-bg-color);
}

.joinprime {
    display: inline-flex;
    background-color: var(--secondary-bg-color);
    padding: 10px 20px;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 16px;
    align-items: center;
}

.joinprime svg {
    width: 100%;
    max-width: 20px;
    margin-right: 6px;
}

.banner-notification {
    background-color: #F2FA7B;
}

.banner-notification svg,
.banner-notification img {
    width: 100%;
    max-width: 100%;
    position: relative;
    top: -1px;
    margin-right: 3px;
}

.banner-notification p {
    line-height: normal;
    text-align: left;
    display: flex;
    justify-content: center;
}

.banner-notification p span:first-child {
    width: 22px;
    padding-right: 5px;
}

.banner-notification p span:last-child {
    width: fit-content;
}

.backgroundgradient {
    /* background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(68, 68, 68, 1) 100%); */


}

.tagline {
    background-color: #2E2E2E;
    color: #fff;
    padding: 7px 20px;
    border-radius: 20px;
}

.banner-head {
    color: var(--secondary-bg-color);
    font-size: 42px;
    letter-spacing: 0px;
}

.backgroundgradient .row .col-md-5 {
    -ms-flex: 0 0 45%;
    flex: 0 0 45%;
    max-width: 45%;
    padding-right: 25px;
}

.backgroundgradient .row .col-md-7 {
    -ms-flex: 0 0 55%;
    flex: 0 0 55%;
    max-width: 55%;
    padding-left: 25px;
}

.taglinep {
    font-size: 16px;
    color: var(--secondary-bg-color);
    line-height: normal;
}

.banner {
    border-radius: 0 0 75px 75px;
    overflow: hidden;
}

.ulctas {
    display: flex;
}

.ulctas li {
    padding: 0 8px;
    width: 33.33%;
}

.ulctas li:first-child {
    padding-left: 0px;
}

.ulctas li:last-child {
    padding-right: 0px;
}

.ulctas li button,
.ulctas li a {
    background-color: #828282;
    display: inline-flex;
    width: 100%;
    text-align: center;
    padding: 10px 10px;
    line-height: normal;
    border-radius: 20px !important;
    color: #fff;
    position: relative;
    height: 100%;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    font-weight: 600;
}

.ulctas li button p,
.ulctas li a p {
    color: #fff;
    font-size: 14px;
    width: 100%;
}

.ptspan {
    position: absolute;
    right: -5px;
    top: -5px;
    background-color: #12B414;
    border-radius: 50px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0 6px;
}

.ulctas li button svg,
.ulctas li button img,
.ulctas li a svg,
.ulctas li a img {
    width: 100%;
    max-width: 30px;
}

.ulctas li.orderbg button,
.ulctas li.orderbg a {
    color: var(--main-bg-color);
    background: var(--secondary-bg-color);
    font-size: 18px;
    font-weight: 600;
}

.howItWorks svg {
    width: 100%;
    max-width: 100px;
    margin-bottom: 10px;
}

.rewardsstarted {
    padding: 10px 15px;
}

.rewards-div {
    background-color: #fff;
    box-shadow: 0px 0px 15px rgb(0 0 0 / 10%);
    border-radius: 20px !important;
    overflow: hidden;
}

.rewards-details {
    padding: 15px 15px;
    text-align: center;
}

.rewardslocked .slick-dots {
    position: absolute;
    width: 100%;
    bottom: -30px;
}

/* ---- Reward card (locked / claimable) ----
   Art and title on one row, the unlock condition on a full-width strip below it.
   The strip is the card's whole message — "you can't have this yet, and here is
   what changes that" — so it gets the width rather than sitting as a chip. */
.rw-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgb(0 0 0 / .08);
    overflow: hidden;
}

.rw-card__top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rw-card__img {
    position: relative;
    flex: none;
    width: 84px;
    height: 84px;
    display: block;
    background: #f1f1f3;
}

.rw-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Desaturated art + a padlock over it: the card reads as "not yours yet" before
   the strip below is read. */
.rw-card--locked .rw-card__img img { filter: grayscale(100%); }

/* Brand-logo stand-in: letterboxed, not cropped, and dialled back so it reads as
   a placeholder rather than as the reward's own artwork. */
.rw-card__img--logo img {
    object-fit: contain;
    padding: 12px;
    opacity: .5;
}

.rw-card__lock {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgb(255 255 255 / .92);
    color: #3d3d3d;
    box-shadow: 0 1px 4px rgb(0 0 0 / .2);
}

.rw-card__text {
    display: block;
    min-width: 0;
    padding-right: 12px;
}

.rw-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
}

.rw-card__code {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #9aa0ab;
}

.rw-card__strip {
    /* One or two lines of condition text shouldn't change the card's height in a
       row of three — the strip keeps a fixed box and centres whatever it holds. */
    display: grid;
    place-items: center;
    min-height: 40px;
    padding: 8px 12px;
    background: #FBF3E2;
    color: #6b5a33;
    font-size: 12.5px;
    line-height: 1.35;
    text-align: center;
}

/* Claimable is an action, not a wait — it takes the brand colour. */
.rw-card--claim .rw-card__strip {
    background: var(--main-bg-color);
    color: var(--secondary-bg-color, #fff);
    font-weight: 600;
}

@media (max-width: 575px) {
    .rw-card__img { width: 72px; height: 72px; }
    .rw-card__title { font-size: 14px; }
}

.unlockbg {
    background-color: #EAEAEA;
    padding: 12px 12px;
    font-size: 14px;
    line-height: normal;
    border-radius: 20px;
}

.rewards-placeholder {
    position: relative;
}

.rewardlocked .lockedimg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

.rewardlocked .rewards-placeholder {
    filter: grayscale(100%);
}

.rewardlocked .rewards-placeholder:before {
    content: "";
    content: "";
    position: absolute;
    background-image: url(lockicon.svg);
    width: 60px;
    height: 60px;
    background-size: cover;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
}

.rewards-div h4 {
    font-size: 16px;
    margin-bottom: 10px;
}

.milestone-card {
    max-width: 650px;
    background: #F8F7F0;
    border-radius: 12px;
    padding: 18px 22px 18px 7px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
}

.viewport {
    overflow: hidden;
    padding-top: 45px;
    padding-left: 15px;
}

.track {
    display: inline-flex;
    align-items: center;
    transition: transform .5s ease;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
    margin: 0 0px;
}

.circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 2px solid #fff;
    background: #fdeff3;
    color: #777;
    position: relative;
    z-index: 1;
}

.step.completed .circle {
    background: var(--main-bg-color);
    color: #fff;
    border-color: var(--main-bg-color);
    width: 50px;
    height: 50px;
    border: 3px solid #fff;
    box-shadow: 0px 0px 16px rgb(0 0 0 / 20%);
}

.step.next .circle {
    background: #ffdfe5;
    width: 50px;
    height: 50px;
    font-size: 20px;
}

.connector {
    height: 8px;
    min-width: 60px;
    background: rgb(255 255 255);
    border-radius: 8px;
    margin: 0 -3px;
    position: relative;
    top: -15px;
}

.connector.wide {
    min-width: 210px;
    margin: 0px -3px;
    background: #fff;
}

.connector.wide .fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 8px;
    background: var(--main-bg-color);
    width: 60%;
    /* adjust progress */
}

.info-bubble {
    position: absolute;
    top: -66px;
    left: 50%;
    transform: translateX(-50%);
    background: #c8f7d0;
    color: #139000;
    font-size: 12px;
    padding: 6px 6px;
    border-radius: 8px;
    width: 100%;
    max-width: 160px;
    text-align: center;
    line-height: normal;
    font-weight: 500;
}

.label {
    margin-top: 5px;
    color: #222;
    font-size: 12px;
}

.txn {
    text-align: center;
    margin-top: 14px;
    text-decoration: underline;
    cursor: pointer;
    font-size: 18px;
    color: #222;
}

/* toggle arrow */
.toggle-arrow {
    position: absolute;
    right: 10px;
    top: 44%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #333333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .4s ease;
    color: #fff;
    z-index: 1;
}

.toggle-arrow.rotate {
    transform: translateY(-50%) rotate(180deg);
}

.info-bubble img {
    width: 100%;
    max-width: 14px;
    margin-right: 2px;
}

.step.next .label {
    font-size: 15px;
    font-weight: 600;
}

.step.completed .label {
    font-size: 15px;
    font-weight: 600;
}

.info-bubble:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #c8f7d0;
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.track>div:last-child {
    margin-right: 70px;
}

.milestone-card.shadowenabled:before {
    position: absolute;
    content: "";
    width: 30%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(270deg, rgb(248 247 240) 0%, rgb(248 247 240) 50%, rgb(255 255 255 / 0%) 100%);
}

.coupon {
    border-radius: 20px;
    border: 1px solid #DEDEDE;
    background-color: #fff;
    color: #333;
    overflow: hidden;
    line-height: 22px;
}

.couponinner {
    display: flex;
    justify-content: space-between;
}

.txn-card {
    padding: 14px 18px 0;
    gap: 16px;
    align-items: flex-start;
}

.txn-card__left,
.txn-card__right {
    display: flex;
    flex-direction: column;
}

.txn-card__right {
    text-align: right;
    align-items: flex-end;
}

.txn-card__title,
.txn-card__value-label {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
}

.txn-card__status {
    font-weight: 500;
    font-size: 14px;
    margin-top: 4px;
}

/* Full-width highlighted remarks box — mirrors the app's grey note strip. */
.txn-card__note {
    margin: 12px 18px 0;
    padding: 11px 13px;
    background: #f1f3f5;
    border-radius: 8px;
    font-size: 14px;
    color: #444444;
    line-height: 1.4;
    word-break: break-word;
}

/* Footer row — date left, action (Remove from Cart) right. */
.txn-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px 14px;
}

.txn-card__date {
    font-size: 13px;
    color: #888;
}

.txn-card__value {
    font-weight: 700;
    font-size: 18px;
    margin-top: 6px;
}

.coupon-outer .coupon {
    margin-bottom: 15px;
}

/* Transaction History list — no inner scroll cap. The modal-body is the single
   scroll region (max-height:90vh) so the whole "LP Coins History" screen scrolls
   as one, exactly like the app; the full history is reachable by scrolling. A
   nested 400px cap here previously clipped long histories on small viewports. */
#points-rewards #transactionHistoryList {
    padding-right: 2px;
}

/* ── LP balance summary card (top of history modal — mirrors the app) ── */
.lp-balance-card {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.lp-balance-card__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.lp-balance-card__amount {
    font-size: 18px;
    font-weight: 600;
    color: #6b7280;
    line-height: 1.2;
}

.lp-balance-card__amount span {
    font-size: 30px;
    font-weight: 800;
    color: #111111;
    margin-right: 4px;
}

.lp-balance-card__rate {
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    white-space: nowrap;
}

.lp-balance-card__expiry {
    margin-top: 6px;
    font-size: 13px;
    color: #6b7280;
}

.lp-balance-card__stats {
    display: flex;
    margin-top: 14px;
    background: #eaf6ec;
    border-radius: 10px;
    overflow: hidden;
}

.lp-balance-card__stat {
    flex: 1 1 50%;
    text-align: center;
    padding: 12px 8px;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.4;
}

.lp-balance-card__stat + .lp-balance-card__stat {
    border-left: 1px solid #cfe6d3;
}

.lp-balance-card__stat span {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: #111111;
}

.lp-txn-heading {
    font-size: 18px;
    font-weight: 700;
    color: #111111;
    text-align: center;
    margin: 4px 0 16px;
}

/* "Remove from Cart" CTA on applied-in-cart transactions */
.lp-remove-cart-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: #017a01;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.lp-remove-cart-btn:hover {
    filter: brightness(0.95);
}

.lp-remove-cart-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.lp-remove-cart-btn:focus-visible {
    outline: 2px solid #017a01;
    outline-offset: 2px;
}

/* ── Result popup (success / error) — clean centered dialog ── */
.lp-result-modal .modal-dialog {
    max-width: 360px;
    margin: 1.75rem auto;
}

.lp-result-modal .modal-content.lp-result-modal__content {
    position: relative;
    border: none;
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* keep the rounded corners on all edges (override sheet) */
}

.lp-result-modal__body {
    text-align: center;
    padding: 34px 24px 26px;
}

.lp-result-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    z-index: 1;
}

.lp-result-modal__close:hover {
    background: #f1f3f2;
}

/* Filled colored circle with a white glyph — mirrors the app notice sheet. */
.lp-result-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    margin-bottom: 18px;
    color: #ffffff;
}

.lp-result-modal__icon--success {
    background: #017a01;
}

.lp-result-modal__icon--error {
    background: #f5a623;
}

.lp-result-modal__msg {
    font-size: 16px;
    color: #333333;
    margin: 0 0 22px;
    line-height: 1.45;
}

.lp-result-modal__btn {
    display: block;
    width: 100%;
    padding: 13px 20px;
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.lp-result-modal__btn--success {
    background: #017a01;
}

.lp-result-modal__btn--error {
    background: #f5a623;
}

.lp-result-modal__btn:hover {
    filter: brightness(0.96);
}

.lp-result-modal__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.exphead {
    font-size: 18px;
    font-weight: 600;
}

/* ---- Offers rail heading ----
   Eyebrow label left, "View all" right, replacing the centred section heading —
   the rail reads as a strip of content rather than a titled section, and the
   link gives the carousel an exit to the full list. */
.offers-rail__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.offers-rail__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6f7683;
    margin: 0;
}

.offers-rail__sub {
    font-size: 13px;
    color: #8b919c;
    margin: 4px 0 0;
}

.offers-rail__all {
    flex: none;
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: underline;
    cursor: pointer;
}

.offers-rail__all:focus-visible {
    outline: 2px solid var(--main-bg-color);
    outline-offset: 3px;
}

/* ---- "Avail now" on the rail card ----
   The shared promo card carries no action line — it's the rails that want one,
   so this is scoped to them rather than added to the card on every page. z-index
   keeps it above the percent blob, which bleeds across the card's lower edge. */
.banner-slider-neww .promo-avail-now,
.banner-slider-neww .promo-visit {
    display: block;
    width: fit-content;
    position: relative;
    z-index: 2;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: underline;
    cursor: pointer;
}

/* ---- Offers & Coupons sheet ---- */
.exphead {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b919c;
    margin: 0 0 10px;
}

.exphead__count {
    font-weight: 600;
}

/* Ticket row: percent mark on a tinted stub, body, Copy. The stub is divided
   from the body by a dashed rule with a punched circle at each end — the two
   circles are the card's own pseudo-elements filled with the sheet background,
   so they read as holes rather than dots. */
.offer-card {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    margin-bottom: 12px;
}

.offer-card:last-child {
    margin-bottom: 0;
}

.offer-card__badge {
    position: relative;
    flex: none;
    width: 82px;
    display: grid;
    place-items: center;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--main-bg-color) 12%, #fff) 0%,
        #fff 85%);
}

.offer-card__badge::after {
    content: '';
    position: absolute;
    right: 0;
    top: 12px;
    bottom: 12px;
    border-right: 1px dashed rgba(0, 0, 0, 0.16);
}

.offer-card::before,
.offer-card::after {
    content: '';
    position: absolute;
    left: 72px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f4f5f7;
}

.offer-card::before {
    top: -10px;
}

.offer-card::after {
    bottom: -10px;
}

.offer-card__mark {
    width: 46px;
    height: auto;
}

.offer-card__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 12px 16px 18px;
}

.offer-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
}

.offer-card__tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #E4FFDD;
    color: #333;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}

.offer-card__sub {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #6f7683;
}

.offer-card__meta {
    margin: 6px 0 0;
    font-size: 12px;
    color: #9aa0ab;
}

.offer-card__copy {
    flex: none;
    align-self: center;
    margin-right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
}

.offer-card__copy:focus-visible {
    outline: 2px solid var(--main-bg-color);
    outline-offset: 2px;
}

.offer-card__copy--done {
    color: var(--main-bg-color);
    border-color: var(--main-bg-color);
}

@media (max-width: 575px) {
    .offer-card__badge { width: 62px; }
    .offer-card::before,
    .offer-card::after { left: 52px; }
    .offer-card__mark { width: 36px; }
    .offer-card__body { padding: 14px 8px 14px 14px; }
    .offer-card__title { font-size: 14px; }
    /* The label is the first thing to go when the row runs out of width — the
       icon still says "copy" on its own. */
    .offer-card__copy { margin-right: 10px; padding: 9px 11px; }
    .offer-card__copy span { display: none; }
}

/* Even, notch-free coupon card for the offers modal list — normal flow so the
   footer sits below variable content (was position:absolute with a fixed 46px
   bottom pad, which made cards uneven when descriptions differed in length).
   The carousel uses the shared home/store promo card instead. */
.couponxt {
    position: relative;
    width: 100%;
    padding: 16px 18px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #ececec;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    margin-bottom: 12px;
}

.exploreoffers .couponxt:last-child {
    margin-bottom: 0px;
}

.head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.code {
    font-weight: 600;
    font-size: 17px;
    color: #000;
}

.tag {
    background: #E4FFDD;
    color: #333;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
}

.desc {
    font-size: 15px;
    color: #444444;
    line-height: 1.4;
    width: 100%;
}

/* Promo description shown inline under the title. */
.promo-subdesc {
    font-size: 13px;
    color: #777777;
    line-height: 1.45;
    margin-top: 4px;
}

.foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px dashed #dcdcdc;
    margin-top: 14px;
    padding-top: 10px;
}

.foot .promo-avail-now,
.foot .promo-visit {
    font-weight: 700;
    font-size: 15px;
}

.foot .promo-avail-now {
    cursor: pointer;
    color: var(--main-bg-color);
    text-decoration: underline;
}

#offer-rewards .modal-body {
    padding: 0px !important;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c4c4c4 transparent;
    /* One combined background for the whole offers list — both Special and
       Explore sit on the same tint (no unique per-section colour). */
    background: #f4f5f7;
}

#offer-rewards .modal-body::-webkit-scrollbar {
    width: 6px;
    -webkit-appearance: none;
}

#offer-rewards .modal-body::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 4px;
}

#offer-rewards .modal-body::-webkit-scrollbar-track {
    background: transparent;
}

#offer-rewards .modal-dialog {
    margin-top: 80px;
}

.exploreoffersouter {
    padding: 18px 20px 4px;
}

/* Special Offers use the exact same card treatment as Explore Offers so the two
   sections read as one consistent list. Previously this was a heavy green
   gradient box with the coupon notch suppressed, which looked uneven next to the
   plain Explore list (and hardcoded hex). The Exclusive/Reward tags already mark
   reward coupons, so no separate container is needed. */

#offer-rewards .modal-content {
    max-width: 500px;
    background: #fff;
}

.promocode .exphead {
    margin: 0 0 .8em;
}

.tag.exclusive {
    background-color: #E6D393;
}

.wrap {
    max-width: 1200px;
    margin: 0px auto;
    padding: 0px 10px;
    margin-top: 30px;
}

.tier-rows {
    display: flex;
    flex-direction: column;
    border: 1px solid #E2E2E2;
    border-radius: 15px;
    overflow: hidden;
}

.tier-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: stretch;
    border-bottom: 1px solid #E2E2E2;
}

.tier-rows .tier-row:last-child {
    border-bottom: none;
}

.tier-left {
    background: #F5F5F5;
    padding: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 76px;
    transition: background .2s ease, box-shadow .2s ease, height .18s ease;
    overflow: visible;
    justify-content: center;
}

.tier-row.open .tier-left {
    background: #fff;
    box-shadow: none;
}

.trophy {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: #fff
}

.trophy.current {
    background: linear-gradient(180deg, #ff3b30, #f25b4a);
    color: white
}

.trophy.upcoming {
    filter: grayscale(100%);
    opacity: .45;
    background: #eaeef1
}

.tier-meta {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.tier-meta .title {
    font-weight: 700;
    font-size: 16px;
    margin-top: 5px;
}

.tier-meta .sub {
    font-size: 12px;
    background-color: #3F3F3F;
    padding: 4px 8px;
    color: #fff;
    border-radius: 6px;
    line-height: normal;
}

.tier-right {
    background: #F5F5F5;
    padding: 14px;
    min-height: 76px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background .2s ease, box-shadow .2s ease;
    overflow: hidden;
    position: relative;
    border-left: 1px solid #E2E2E2;
    justify-content: center;
}

.tier-row.open .tier-right {
    background: #fff;
    box-shadow: none;
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
}

.accordion-header .left {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 150px;
}

.accordion-header strong {
    font-size: 16px
}

.accordion-header .muted {
    color: var(--main-bg-color);
    font-size: 13px;
    margin-left: 8px;
    padding: 0px 10px;
    border-radius: 8px;
    overflow: hidden;
    font-weight: 600;
    position: relative;
}

.accordion-header .muted:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: var(--main-bg-color);
    opacity: 0.2;
}

.arrow-icon {
    font-size: 18px;
    color: #333;
    margin-left: 6px
}

.accordion-body {
    padding-top: 0px;
}

.cards-row {
    display: flex;
    gap: 12px;
    padding: 12px 6px;
    padding-right: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    align-items: flex-start;
}

.card {
    min-width: 140px;
    background: #fff;
    border-radius: 10px;
    flex: 0 0 auto;
    border: 1px solid #E5E5E5;
}

.card img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.card .label {
    font-size: 13px;
    margin-top: 6px
}

.card.locked {
    filter: grayscale(100%);
    opacity: .45
}

.cards-row::-webkit-scrollbar {
    height: 8px
}

.cards-row::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 99px
}

.cards-row::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

.view-more {
    display: flex;
    justify-content: center;
    padding: 25px 12px 0px 12px;
}

.btnbg {
    padding: 8px 14px;
    border-radius: 10px;
    border: 0;
    background: #111;
    color: #fff;
    cursor: pointer
}

.btnbg.ghost {
    background: transparent;
    color: #111;
    padding: 0px;
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0px;
    font-size: 15px;
}

.tier-closed .title,
.tier-closed .sub {
    display: none;
}

.tier-closed.open .title,
.tier-closed.open .sub {
    display: block;
}

.titleicon svg {
    width: 100%;
    max-width: 40px;
}

.tier-closed .tier-left svg path {
    fill: #CFCFCF;
}

.tier-currunt .tier-left svg path {
    fill: var(--main-bg-color);
}

.tier-row path {
    fill: #5D5D5D;
}

.muted {
    color: #9aa0a6;
    font-size: 13px
}

.hide-label .label-wrap {
    display: none
}

.tier-closed.open .tier-left svg path {
    fill: #5D5D5D;
}

.tier-currunt.open .sub {
    background-color: #139000;
}

.label-wrap {
    display: flex;
    color: #777777;
}

.accordion-header .muted.expired {
    color: #777777;
}

.accordion-header .muted.expired:before {
    background-color: #CFCFCF;
    opacity: 1;
}

.accordion-header .muted span {
    position: relative;
}

.tierinfo {
    background-color: #F6F6F6;
    display: flex;
    margin-bottom: 20px;
    border-radius: 15px;
    text-align: center;
}

.tierinfo li {
    width: 100%;
    max-width: 33.33%;
    padding: 15px 10px;
    border-right: 1px solid #E2E2E2;
}

.tierinfo li:last-child {
    border-right: none;
}

.tierinfo li p span {
    display: block;
}

.tierinfo li p span {
    display: block;
    font-size: 25px;
    line-height: normal;
    font-weight: 700;
}

.tierinfo p {
    font-size: 16px;
    line-height: normal;
}

.tierinfo li p.redeemed {
    color: #139000;
}

.cardnw {
    display: flex;
    border: 1px solid #E5E5E5;
    border-radius: 13px;
    align-items: center;
    background: #fff;
    box-sizing: border-box;
}

.card-placeholder {
    width: 115px;
    box-sizing: border-box;
    cursor: pointer;
    margin-right: 8px;
}

.card-placeholder button {
    display: block;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    font: inherit;
}

.card-placeholder img {
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: 13px;
}

.card-placeholder p {
    margin: 5px 0 5px 0;
    font-size: 13px;
    font-weight: 600;
    color: #111;
    text-align: center;
}

.right-col {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    box-sizing: border-box;
    margin-right: 5px;
}

.card-item {
    width: 100px;
    box-sizing: border-box;
    text-align: center;
    margin: 0 8px;
}

.card-item img {
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.card-item p {
    margin: 5px 0 0 0;
    font-size: 12px;
    color: #222;
    line-height: normal;
}

.more-badge {
    display: none;
    margin-top: 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #111;
}

.cardnw.collapsed {
    align-items: center;
}

.cardnw.collapsed .right-col {
    flex-direction: column;
    align-items: center;
    width: 67px;
}

.cardnw.collapsed .right-col .card-item {
    display: none;
    width: 50px;
}

.cardnw.collapsed .right-col .card-item:nth-child(-n+2) {
    display: block;
    margin-bottom: 6px;
}

.cardnw.collapsed .card-placeholder {
    margin-right: 6px;
}

.cardnw.collapsed .right-col .card-item p {
    display: none;
    /* hide small captions in collapsed; remove if you want them visible */
}

.cardnw.collapsed .more-badge {
    display: block;
    line-height: normal;
}

.cardnw:not(.collapsed) .right-col {
    flex-direction: row;
}

.cardnw:not(.collapsed) .right-col .card-item {
    display: block;
}

.cardnw:not(.collapsed) .right-col .card-item p {
    display: block;
}

.cardnw.collapsed .card-placeholder span {
    display: none;
}

.tier-upcoming .cardnw {
    filter: grayscale(100%);
}

.tier-upcoming .card-placeholder button {
    position: relative;
}

.tier-upcoming .card-placeholder button:before {
    content: "";
    position: absolute;
    background-image: url(lockicon.svg);
    width: 35px;
    height: 35px;
    background-size: cover;
    left: 50%;
    top: 40%;
    z-index: 1;
    transform: translate(-50%, -50%);
}

#rewardsdv {
    scroll-margin-top: 63px;
}

.pstep-modal-phone {
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.pstep-header {
    background: var(--main-bg-color);
    color: var(--secondary-bg-color);
    padding: 18px;
}

.pstep-progress-bar-wrapper {
    background: rgba(255, 255, 255, 0.25);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 6px;
    width: 100%;
}

.pstep-progress-fill {
    height: 8px;
    background: #fff;
    width: 0;
    transition: width .28s ease;
}

.pstep-step-card {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    min-height: 320px;
}

.pstep-step-card.active {
    display: flex !important;
}

.pstep-btn-red,
.pstep-btn-red:hover {
    background: var(--main-bg-color);
    color: var(--secondary-bg-color);
    border-color: var(--main-bg-color);
    border-radius: 13px !important;
}

.pstep-success-icon {
    width: 80px;
    height: 80px;
    background: #ffe6e6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.pstep-header h4 {
    color: var(--secondary-bg-color);
}

#pstepOnboardingModal .form-control {
    border-radius: 13px !important;
}

.pstep-step-card button.btn-outline-danger {
    border-color: var(--main-bg-color);
    border-radius: 13px !important;
}

.btn-group-vertical .pstepGenderBtn {
    margin-bottom: 12px;
}

.btn-group-vertical .pstepGenderBtn:last-child {
    margin-bottom: 0px;
}

.btn-group-vertical .pstepGenderBtn {
    margin-bottom: 12px;
    border-color: #f8f9fb;
    background-color: #f8f9fb;
    padding: 10px 10px !important;
    border-radius: 13px !important;
    color: #000;
}

.howzitwithimgenabled {
    margin: -20px -20px 0px -20px;
}

.howzitwithimgenabled {
    position: relative;
}

.howzitwithimgenabled:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(255 255 255 / 25%) 50%, rgb(255 255 255) 100%);
}

.rewardsdvig .icon-side {
    background: none;
    width: 35%;
    position: relative;
}

.rewardsdvig .icon-side:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: linear-gradient(88deg, rgb(0 0 0 / 0%) 0%, rgb(255 255 255 / 25%) 50%, rgb(255 255 255) 100%);
}

.rewardsdvig .text-side {
    background: none;
    width: 65%;
    padding-left: 0px;
    margin-left: -10px;
    position: relative;
}

.icon-side img {
    height: 100%;
}

.offersstarted {
    padding: 0 15px;
}

.banner-slide a {
    padding: .3em;
}

.banner-slide .slick-list {
    padding: 0 14% 0 0 !important;
}

.offersSection .slick-dots {
    margin-top: 10px;
}

.nw-div {
    background-color: #fff;
    padding: 15px 15px;
    border-radius: 15px;
}

.nw-subheadibng svg {
    width: 100%;
    max-width: 16px;
}

.nw-headibng {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 7px;
}

.nw-subheadibng {
    color: var(--main-bg-color);
    font-size: 15px;
}

.fadediv {
    background-color: #f5f5f5;
    text-align: center;
    border-radius: 12px;
    margin-bottom: 10px;
}

.fadediv p {
    padding: 10px 0;
    font-size: 14px;
    line-height: normal;
}

.fadediv p span {
    display: block;
    font-size: 18px;
    font-weight: 600;
}

.fadediv .row>div:first-child {
    border-right: 1px solid #E2E2E2;
}

.ankers {
    border-bottom: 1px solid;
}

.order-tracking p {
    color: #929292;
    font-size: 16px;
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 20px;
    font-weight: 600;
}

.order-tracking.current,
.order-tracking.completed {
    color: #929292 !important;
}

.order-tracking.completed p,
.order-tracking.completed p span,
.order-tracking.current p,
.order-tracking.current p span {
    color: #000 !important;
}

.you-are-here {
    content: 'You are here';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 92px;
    background-color: #43a047;
    border-radius: 8px;
    font-size: 12px;
    padding: 0px 2px;
    display: none;
    font-weight: 600;
    color: #fff;
}

/* The "You are here" pill renders with Bootstrap's .d-none (display:none
   !important) and nothing strips it, so plain display:block can't win. */
#milestoneCardColumn .order-tracking.current .you-are-here {
    display: block !important;
}

.you-are-here:before {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #43a047;
    top: 24px;
    left: 50%;
    transform: translate(-50%, 0%);
}

.bg-color-dv i {
    font-size: 18px;
}

.coins-top-left-dv {
    padding-bottom: 50px;
    position: relative;
}

.coins-top-left-dv:before {
    position: absolute;
    content: "";
    right: 0px;
    top: 0px;
    background: #EAEAEA;
    width: 1px;
    height: 100%;
    z-index: 1;
}

.coins-jurney-dv {
    margin: 15px 0 20px !important;
    justify-content: center;
}

.imgspannew {
    width: 50px;
    height: 50px;
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.imgunavail:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid var(--main-bg-color);
    left: 0px;
    border-radius: 50%;
    background-color: #fff;
}

.reward-blocks {
    overflow-x: autos;
    width: 100%;
    display: flex;
    overflow-y: hidden;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-top: 5px;
    margin-left: -5px;
}

.reward-blocks li {
    padding: 0 4px;
    padding-bottom: 10px;
}

#append_unscratch li {
    padding-bottom: 0px;
}

.reward-blocks li>div {
    height: 100%;
}

#append_unscratch li>div {
    margin-bottom: 10px;
}

.reward-blocks li:first-child {
    padding-left: 0px;
}

.reward-blocks li:last-child {
    padding-right: 0px;
}

.reward-blocks::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
}

.reward-blocks::-webkit-scrollbar {
    height: 5px;
    background-color: #F5F5F5;
}

.reward-blocks::-webkit-scrollbar-thumb {
    background-color: #898989;
}

#upcoming_reward li>div {
    height: 100%;
}

.reward-block-inner {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0.7725321054458618px 1.5450642108917236px 7.725320816040039px 0px rgba(0, 0, 0, 0.10);
    background-color: var(--main-bg-color);
    position: relative;
    width: 180px;
    height: 100%;
    color: #fff;
    padding: 15px 15px;
    border: 1px solid var(--main-bg-color);
    transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
    cursor: pointer;
}

.reward-block-inner:hover {
    background-color: #fff;
}

.reward-block-inner:hover .scatchnow {
    color: var(--main-bg-color);
}

.reward-block-inner:hover .gift-svg:after {
    border-color: var(--main-bg-color);
}

.reward-block-inner:hover .gift-svg:before {
    background: var(--main-bg-color);
    opacity: 1;
}

.order-tracking {
    text-align: center;
    width: 25%;
    position: relative;
    display: block;
}

.progress-dv {
    background: #dedede;
    background-position: top;
    background-size: 11px 3.5px;
    background-repeat: repeat-x;
    height: 6px;
    position: absolute;
    width: 100%;
    max-width: 77.5%;
    top: 34%;
    transform: translate(-50%, -50%);
    left: 100%;
}

.order-tracking img {
    position: relative;
    z-index: 1;
    width: 100%;
    object-fit: cover;
    border-radius: 50px;
    filter: grayscale(100%);
}

.order-tracking.current img,
.order-tracking.completed img {
    filter: grayscale(0%);
}

/* Wallet milestone badges — the global legacy theme.css (loaded in base.php)
   also styles .order-tracking: it shrinks the badge to a 32px chip and, for
   achieved tiers, whites out the image with `brightness(0) invert(1)`, which
   made the ACE/PRIME/ELITE/LEGEND badges vanish once logged in. Scope the
   intended 50px photo-badge design under #milestoneCardColumn so the id
   selector wins over theme.css's class selectors (no !important needed). */
#milestoneCardColumn .order-tracking .imgspannew {
    width: 50px;
    height: 50px;
    background: transparent;
    border: 0;
    border-radius: 50%;
}
#milestoneCardColumn .order-tracking .imgspannew img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    filter: grayscale(100%);
}
#milestoneCardColumn .order-tracking.completed .imgspannew img,
#milestoneCardColumn .order-tracking.current .imgspannew img {
    filter: none;
}
#milestoneCardColumn .order-tracking.current .imgspannew {
    box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.18);
}
/* Achieved-tier tick badge (bottom-right of the photo badge). overflow is
   set visible so the badge isn't clipped; the photo stays round via the
   img's own border-radius. */
#milestoneCardColumn .order-tracking.completed .imgspannew {
    overflow: visible;
}
#milestoneCardColumn .order-tracking.completed .imgspannew::after {
    content: "";
    position: absolute;
    /* above the badge image (.order-tracking img is z-index:1) so the tick
       sits in front of the photo, not behind it */
    z-index: 2;
    right: -2px;
    top: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-sizing: border-box;
    background-color: var(--main-bg-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 11px 11px;
    background-position: center;
    background-repeat: no-repeat;
}

.order-tracking.completed p,
.order-tracking.completed p span,
.order-tracking.current p,
.order-tracking.current p span {
    color: #000 !important;
}

.progress-dv:after {
    content: "";
    position: absolute;
    height: 6px;
    width: var(--fill-width, 0%);
    left: 0px;
    top: 0px;
    background: var(--main-bg-color);
}

.order-tracking.completed .progress-dv:after {
    width: 100%;
}
/* Campaign_slogans css */

.campaign-slogans-DC .f-wrapper {
    position: relative;
    background: #ffffff;
    padding: 40px 0;
    padding-top: 0;
}
.campaign-slogans-DC .common-head {
  
    margin-bottom: 5px;
}
.campaign-slogans-DC .title .span-one {
   font-size: 22px;
}
.campaign-slogans-DC .sections-content {
    background: var(--main-bg-color);
    padding: 30px 40px;
   
}
.campaign-slogans-DC .sections-content p , .campaign-slogans-DC .sections-content .title{
 
    color: #fff;
}

.campaign-slogans-DC .font-weight-semibold {
    font-weight: 600;
}

.campaign-slogans-DC .title:after {
     content: "";
    position: absolute;
    width: 100%;
    max-width: 130px;
    background-color: var(--main-bg-color);
    height: 1px;
    bottom: -7px;
    left: 0px;
    right: 0;
    margin: auto;
}
.campaign-slogans-DC .sections-content p {
    font-size: 14px;
    line-height: 24px;
    margin-top: 10px;
        margin-bottom: 0;
    font-weight: 300;
}
.campaign-slogans-DC .title {
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 30px;
    text-transform: uppercase;
}
.backgroundgradient{
    position: relative
}
.Bannercontent{
        z-index: 1;
}
.backgroundgradient:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    top: 0;
    opacity: 0.5;
    z-index: 0;
}
.campaign-slogans-DC .site-forms .form-group
{
    margin-bottom: 10px
}
.campaign-slogans-DC .site-forms .form-control {
    height: auto;
    border-color: #ddd;
    padding: 15px 15px;
}
.campaign-slogans-DC .site-forms textarea.form-control
{
   height: 120px;
    padding: 15px;
    background-color: hsl(var(--background));
    border-width: 2px;
    border-radius: 0.75rem !important;
}
.f-box{
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    padding-bottom: 30px;
        border-radius: 12px;
    overflow: hidden;

}
.winner-text{
    font-size: 11px;
    margin-bottom: 0;
    font-weight: 400;
}
.f-box .form-group {
    padding: 2rem;
        padding-bottom: 0;

}
.ctawinner{
        padding: 0 2rem;
}
.campaign-slogans-DC .f-wrapper .btnAction:disabled {
  
    opacity: 0.5;
    pointer-events: none;
}
.campaign-slogans-DC .offers-coupon p
{
  margin-top: 5px;
}
.campaign-slogans-DC .p-code
{
  border: 1px dashed #000;
  padding: 10px;
  text-align: center;
  margin-top: 10px;
}
.campaign-slogans-DC .offers-coupon
{
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.campaign-slogans-DC .btn-success {
    background: var(--main-bg-color) !important;
    border: 2px solid var(--main-bg-color) !important;
    border-radius: 80px !important;
    padding: 10px 35px !important;
    font-weight: normal !important;
    color: #fff !important;
}
.campaign-slogans-DC .f-wrapper .btnAction {
    margin-top: 20px;
    font-size: 16px !important;
    box-shadow: 0 2px 8px var(--main-bg-color), 0 0px 0px var(--main-bg-color) !important;

}
#campaignSloganMsgModal .modal-body .successIcon img{
    z-index: 9;
        position: relative;
}
#campaignSloganMsgModal .modal-body .successIcon{
    z-index: 9;
    position: relative;
    display: inline-block;
    width: 100px;
}
#campaignSloganMsgModal .modal-body {
    padding: 20px 30px 40px;
}
#campaignSloganMsgModal .modal-body p{
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
    color: #333;
}

.campaign-slogans-DC .site-forms textarea.form-control:disabled {
    opacity: 0.4;
    color: #000 !important;
}
.message-info {
    display: block;
    margin-top: 8px;
    font-size: 1rem;
    color: #388e3c;
    background: #e8f5e9;
    border-radius: 4px;
    padding: 8px 12px;
    text-align: left;
    min-height: 24px;
    transition: background 0.3s, color 0.3s;
}
.message-info.error {
    color: #c62828;
    background: #ffebee;
}

@media only screen and (max-width: 767px) {
    .backgroundgradient .row .col-md-5 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 15px;
    }

    .backgroundgradient .row .col-md-7 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 15px;
    }

    .ulctas li {
        padding: 0 5px;
    }

    .ulctas li.orderbg button,
    .ulctas li.orderbg a {
        font-size: 12px;
    }

    .ulctas li button,
    .ulctas li a {
        padding: 8px 5px;
    }

    .ulctas li button svg,
    .ulctas li button img,
    .ulctas li a svg,
    .ulctas li a img {
        max-width: 21px;
    }

    .ptspan {
        min-width: 15px;
        height: 15px;
        font-size: 9px;
        padding: 0 4px;
        right: -2px;
    }

    .ulctas li button p,
    .ulctas li a p {
        font-size: 10px;
    }

    .banner-head {
        font-size: 32px;
    }

    .tagline {
        padding: 5px 15px;
        font-size: 12px;
    }

    .taglinep {
        font-size: 14px;
        color: var(--secondary-bg-color);
    }

    .banner {
        border-radius: 0 0 20px 20px;
    }

    .rewardsstarted {
        padding: 10px 10px;
    }

    .rewards-details {
        padding: 10px 10px;
    }

    .unlockbg {
        padding: 5px 5px;
        font-size: 12px;
        border-radius: 13px;
    }

    .rewards-div h4 {
        font-size: 13px;
    }

    .common-space {
        padding: 30px 0px;
    }

    .common-head {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .common-para {
        font-size: 15px;
    }

    .rewardslocked .slick-dots {
        bottom: -20px;
    }

    .menu-scrolling-with-text {
        margin: 0 -10px;
    }

    .howItWorks svg {
        max-width: 40px;
    }

    .howItWorksHead {
        font-size: 15px;
    }

    .howItWorks p {
        font-size: 13px;
    }

    .howItWorks {
        padding: 10px 5px;
    }

    .howitworksection .col-4 {
        padding: 0 5px;
    }

    .howitworksection .row {
        padding: 0 10px;
    }

    .text-side {
        padding: 10px 15px;
    }

    .text-side h4 {
        font-size: 15px;
    }

    .text-side p {
        font-size: 13px;
    }

    .icon-side svg {
        max-width: 20px;
    }

    .icon-side {
        width: 20%;
    }

    .text-side {
        width: 80%;
    }

    .txn {
        margin-top: 10px;
        font-size: 16px;
    }

    .milestone-card {
        padding: 15px 10px 15px 0px;
    }

    .connector.wide {
        min-width: 185px;
    }

    .info-bubble {
        top: -56px;
        font-size: 11px;
        padding: 5px 5px;
        max-width: 160px;
    }

    .viewport {
        padding-top: 38px;
    }

    #offer-rewards .modal-header {
        padding: 14px 16px 6px;
    }

    .exploreoffersouter {
        padding: 15px 20px;
    }

    .wrap {
        padding: 8px;
        margin-top: 20px;
    }

    .tier-row {
        display: grid;
        grid-template-columns: 70px 1fr;
        align-items: start;
        position: relative;
    }

    .tier-left {
        display: flex;
        align-items: center;
        min-height: 64px;
        padding: 8px 8px;
        border-radius: 0;
        width: 100%;
        box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
    }

    .trophy {
        width: 36px;
        height: 36px;
        border-radius: 8px
    }

    .tier-meta .title {
        font-size: 12px;
    }

    .tier-meta .sub {
        font-size: 10px;
        padding: 4px 4px;
    }

    .tier-right {
        margin-left: 0;
        min-height: 80px;
        padding: 8px 0px 8px 8px;
    }

    .card {
        min-width: 150px
    }

    .card img {
        height: 92px
    }

    .accordion-header {
        justify-content: space-between;
    }

    .accordion-header .left {
        max-width: max-content;
    }

    .tierinfo p {
        font-size: 14px;
    }

    .tierinfo li p span {
        font-size: 20px;
    }

    .tierinfo li {
        padding: 12px 5px;
    }

    .titleicon svg {
        max-width: 30px;
    }

    .accordion-header .muted {
        font-size: 11px;
        padding: 0px 6px;
    }

    .cards-row {
        padding: 12px 6px 12px 4px;
        gap: 10px;
    }

    #pstepOnboardingModal .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    .modal-content {
        height: 100%;
        border-radius: 0;
    }

    .pstep-modal-phone {
        width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    .pstep-step-card {
        min-height: calc(100vh - 150px);
    }

    #pstepOnboardingModal .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    #pstepOnboardingModal .modal-content {
        height: 100%;
        border-radius: 0;
    }

    .pstep-modal-phone {
        width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    .pstep-step-card {
        min-height: calc(100vh - 150px);
    }

    .foot {
        width: 89%;
        left: 52%;
    }

    .couponxt {
        padding: 12px 12px 45px 30px;
    }

    .nw-headibng {
        font-size: 22px;
    }

    .nw-subheadibng {
        font-size: 14px;
    }

    .nw-subheadibng svg {
        max-width: 15px;
    }

    /* The ".you-are-here" badge is absolutely positioned 40px above its tier step. On mobile
       the card is narrow and the badge sits over the centred tiers, so without enough top
       clearance it overlaps the "DT Coins" title (worse when balance <= 0 and the "expiring"
       subheading is hidden, removing its buffer). Give the tier row room for the badge. */
    .coins-jurney-dv {
        margin-top: 45px !important;
    }

}

/* ---- FAQ accordion (loyalty/rewards) ---- */
.faqsmodal .card-header,
.faqsmodal .card {
    padding: 0;
    background: #fff;
    border: none;
}
.faqsmodal .card {
    border: 1px solid #E2E2E2;
    border-radius: 15px;
    margin-bottom: 10px;
}
.faqsmodal .card:last-child {
    margin-bottom: 0;
}
.faqsmodal .card-header .btn {
    width: 100%;
    padding: 15px;
    color: #333;
    border: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
}
.faqsmodal .card-header .btn:hover,
.faqsmodal .card-header .btn:active,
.faqsmodal .card-header .btn:focus {
    color: var(--main-bg-color);
    text-decoration: none;
}
.faqsmodal .card-body {
    padding: 0 20px 15px 20px;
}
.faqsmodal .card-header .btn .bi-chevron-down {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.faqsmodal .card-header .btn[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}
.faqsmodal .plight {
    line-height: normal;
    margin-bottom: 7px;
}

/* Loyalty feedback toast — shown e.g. when the Rewards button is tapped but the user
   has no rewards yet (see showRewardsToast in loyalty.js). */
.loyalty-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(12px);
    width: max-content;
    max-width: min(360px, calc(100% - 32px));
    background: rgba(0, 0, 0, 0.88);
    color: #fff;
    padding: 12px 20px;
    /* Rounded rectangle, not a pill — a pill radius turns multi-line text into a blob on mobile. */
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.loyalty-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* ── Wallet block ─────────────────────────────────────────────────────────
   The spine of the loyalty page (design 12a·W·L0 / ·D0 / ·Dn). One card, three
   states, and a min-height that holds across all of them — signing in must not
   reflow the page, which is the whole reason the states are siblings inside one
   card rather than separate blocks.
   Brand colour stays tokenised (var(--brand)): this page serves every white-label
   site, so the design's own red can't be baked in. Gold means points and green
   means earn, the same roles the menu and checkout already use. */
.wb { display: block; }
/* No padding on the card itself: the expiry strip runs edge to edge along its
   bottom (design ref), so the inset belongs to the states inside it and the card
   is just the clipped surface they sit on. */
.wb__card {
    background: #fff;
    border: 1px solid var(--border-subtle, #ececec);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgb(0 0 0 / .05);
    padding: 0;
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
}
/* Logged out — a promise, not a balance. The dashed border is what says so. */
.wb--empty .wb__card {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--brand) 40%, #fff);
    background: color-mix(in srgb, var(--brand) 4%, #fff);
    box-shadow: none;
    align-items: flex-start; gap: .7rem;
}
.wb__state { width: 100%; padding: .85rem 1.15rem; }
.wb__rate { margin: 0; font-size: .95rem; font-weight: 700; color: var(--fg-1, #1a1a1a); }
.wb__login {
    display: inline-block; padding: .5rem 1.4rem;
    background: var(--brand); color: #fff; border-radius: 999px;
    font-size: .9rem; font-weight: 700; text-decoration: none;
}
.wb__login:hover { color: #fff; opacity: .92; }

.wb__top { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
/* The figure carries the screen, so it gets the size — everything else is support. */
.wb__amount { margin: 0; font-variant-numeric: tabular-nums; color: var(--fg-1, #1a1a1a); }
.wb__amount strong { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; }
.wb__amount span { font-size: .95rem; font-weight: 600; margin-left: .2rem; }
/* Pushed to the far right of the row, whatever the figure's width. Near-black,
   not the earn-green used elsewhere: the design ref treats this as a plain text
   link on a white card, and green read as a second call to action next to the
   balance it's only meant to annotate. */
.wb__history { flex: none; margin-left: auto; font-size: .88rem; font-weight: 700; color: var(--fg-1, #1a1a1a); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.wb__history:hover { color: #000; }
/* The line that makes the number mean something — inline with it, not under it.
   It carries its own separator ("Worth ₹1,031 · redeem at checkout"), so no
   middot is drawn in front of it. */
.wb__worth { margin: 0 0 0 .35rem; font-size: .92rem; color: var(--fg-2, #444); }

/* No rule under the balance row: the cream expiry strip below is the separation
   the design ref draws, and both together stacked two lines across the card. */
.wb__top { padding-bottom: 0; border-bottom: 0; }

@media (max-width: 575px) {
    /* Phone: the worth line drops beneath the figure — three items won't fit. On its
       own line it starts at the card's inset, not at the inline gap it carried when
       it sat beside the balance. */
    .wb__worth { flex: 0 0 100%; order: 3; margin: .15rem 0 0; }
}

/* Day zero only: the hint and the way out of an empty balance. */
/* No border here: .wb__top already draws the single rule the reference shows.
   Both drawing one put a double line across the card with dead space between. */
.wb__foot {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    margin-top: .75rem;
}
.wb__hint { margin: 0; font-size: .88rem; color: var(--fg-3, #6b6b6b); }
/* Same treatment as "View History" above it: two text links in one card reading in
   two colours looked like one of them meant something the other didn't. */
.wb__howto { flex: none; font-size: .88rem; font-weight: 700; color: var(--fg-1, #1a1a1a); text-decoration: underline; text-underline-offset: 3px; }
.wb__howto:hover { color: #000; }

/* Day n only: the single piece of urgency on the screen. A cream strip along the
   card's bottom edge (design ref), full-bleed — hence the negative margins that
   cancel the state's padding — so it reads as a footnote under the balance rather
   than a chip competing with it. The card clips it to its own radius. */
.wb__expiry {
    display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
    margin: .85rem -1.15rem -.85rem; padding: .6rem 1.15rem;
    background: #FEF3D6;
    font-size: .84rem; font-weight: 600; color: #2b2b2b;
}
/* The middot belongs to the action, not the sentence before it. */
.wb__use { font-weight: 700; color: #2b2b2b; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.wb__use::before { content: "\00B7"; margin-right: .3rem; text-decoration: none; display: inline-block; }
.wb__use:hover { color: #000; }

@media (max-width: 767px) {
    .wb { margin-top: 1rem; }
    .wb__state { padding: .9rem 1rem; }
    .wb__expiry { margin: .9rem -1rem -.9rem; padding: .55rem 1rem; }
    .wb__amount strong { font-size: 1.9rem; }
}

/* ── How it works — split card (design 12a·W·X) ───────────────────────────
   Was a centred stack with a 120px icon above the copy. The design reads the
   claim first and treats the illustration as support, so the copy goes left and
   the icon shrinks and moves right. Scoped to --split so any brand still on the
   old centred layout is untouched. */
.howItWorks--split {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    text-align: left;
    background: #fff;
    border: 1px solid var(--border-subtle, #ececec);
    border-radius: 14px;
    padding: 1.1rem 1.15rem;
    height: 100%;
}
.howItWorks--split .howItWorks__text { flex: 1 1 auto; min-width: 0; }
.howItWorks--split .howItWorks__icon { order: 0; flex: none; display: block; line-height: 0; }
.howItWorks--split .howItWorks__icon svg,
.howItWorks--split .howItWorks__icon img { width: 52px; height: 52px; max-width: 52px; }
.howItWorks--split .howItWorksHead {
    margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 700;
    color: var(--fg-1, #1a1a1a);
}
.howItWorks--split p { font-size: .88rem; line-height: 1.5; color: var(--fg-3, #6b6b6b); }
/* Equal-height cards across the row, so three claims of different lengths still
   line up — the design shows them as one band, not three ragged boxes. */
.how-it-works-row { align-items: stretch; }
/* Bootstrap's own mb-0 / mb-md-5 keeps the row spacing — no !important fight. */
.how-it-works-col { display: flex; }

@media (max-width: 767px) {
    .howItWorks--split { padding: .95rem 1rem; }
    .howItWorks--split .howItWorks__icon svg,
    .howItWorks--split .howItWorks__icon img { width: 44px; height: 44px; max-width: 44px; }
}

/* ── Loyalty hero (design 12a·W·Dn / ·D0 / ·L0) ───────────────────────────
   The band was the biggest mismatch with the reference: a dark greeting pill and
   grey #828282 action tiles read as a different product. The reference keeps the
   whole band in the brand colour and lets the tiles sit ON it as translucent
   white, so the hero reads as one surface with the CTA raised out of it. */

/* The band itself is flat brand colour. The dotted texture belongs to the loop
   strip alone (see below) — the reference keeps everything under it plain, so the
   greeting, title and CTA row sit on clean colour. */

/* Greeting: plain white line, not a chip. The chip competed with the title. */
.banner .tagline {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    opacity: .95;
}

/* Display title. Sized against the design ref, where the programme name sits a
   little above the body copy rather than dominating the band — at 3.4rem it ran
   nearly twice the ref's height and pushed the greeting, description and CTA row
   into the bottom third of the hero. */
.banner .banner-head { font-size: clamp(1.9rem, 3.2vw, 2.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.banner .taglinep { opacity: .9; font-size: .95rem; }

/* Action row: the CTA is wide, the rest are square tiles. */
.ulctas { align-items: stretch; gap: .5rem; position: relative; }
/* Tiles share the column's width rather than claiming a fixed size — at col-md-5
   the row is ~45% of the container, and fixed widths pushed the last tile out from
   under the balance card sitting beside it. They stop growing at the design ref's
   square, though: stretched across the whole column they read as four equal
   buttons rather than one action with shortcuts beside it. */
.ulctas li { padding: 0; width: auto; flex: 1 1 0; min-width: 0; max-width: 76px; }
.ulctas li.orderbg { flex: 1.8 1 0; min-width: 0; max-width: 280px; }

/* Tiles: translucent white on the band, not a grey that ignores the brand. */
.ulctas li button,
.ulctas li a {
    background-color: rgb(255 255 255 / .16);
    border: 1px solid rgb(255 255 255 / .22);
    border-radius: 16px !important;
    padding: .7rem .4rem;
    min-width: 0;
    flex-direction: column;
    gap: .25rem;
    backdrop-filter: blur(2px);
}
.ulctas li button:hover,
.ulctas li a:hover { background-color: rgb(255 255 255 / .24); color: #fff; }
.ulctas li button p,
.ulctas li a p { font-size: .76rem; font-weight: 600; margin: 0 !important; overflow-wrap: anywhere; }
.ulctas li button svg, .ulctas li button img,
.ulctas li a svg, .ulctas li a img { max-width: 22px; }

/* The primary: a raised panel carrying the label and its sub-pill. */
.ulctas li.orderbg a,
.ulctas li.orderbg button {
    background: rgb(255 255 255 / .2);
    border-color: rgb(255 255 255 / .3);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    padding: .85rem .5rem;
}
.ulctas li.orderbg a:hover { color: #fff; }

/* Animated ring (design pack: a conic sweep on `ebSpin 2.8s linear infinite`).
   A light runs round the CTA's edge, which is what marks it as THE action on a
   band where every tile is the same translucent white. Built from the anchor's
   own pseudo-elements so the markup stays a plain link: ::before is the sweep,
   ::after is the panel laid back over it leaving 1.5px of ring showing. Both sit
   behind the label via negative z-index, contained by `isolation`. */
.ulctas li.orderbg a,
.ulctas li.orderbg button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: transparent;
    border-color: transparent;
}
.ulctas li.orderbg a::before,
.ulctas li.orderbg button::before {
    content: '';
    position: absolute; inset: -60%; z-index: -2;
    background: conic-gradient(from 0deg, transparent 0deg 285deg, rgb(255 255 255 / .98) 330deg, transparent 360deg);
    animation: ebSpin 2.8s linear infinite;
}
/* The panel must be OPAQUE or the sweep shows straight through it and lights up
   the whole button face instead of its edge — hence the band's own colour under
   the translucent white, exactly as the pack stacks it. 2.5px, not the pack's
   1.5px: the pack draws on a near-black green where a hair of white reads
   clearly; on a mid-tone brand band it vanished. */
.ulctas li.orderbg a::after,
.ulctas li.orderbg button::after {
    content: '';
    position: absolute; inset: 2.5px; z-index: -1;
    border-radius: 13.5px;
    background: linear-gradient(rgb(255 255 255 / .2), rgb(255 255 255 / .2)), var(--main-bg-color, var(--brand));
}
.ulctas li.orderbg a:hover::after,
.ulctas li.orderbg button:hover::after {
    background: linear-gradient(rgb(255 255 255 / .3), rgb(255 255 255 / .3)), var(--main-bg-color, var(--brand));
}
@keyframes ebSpin { to { transform: rotate(360deg); } }
/* A light circling the screen is exactly what a motion-sensitive visitor asked
   not to see — the ring stays, it just stops. */
@media (prefers-reduced-motion: reduce) {
    .ulctas li.orderbg a::before,
    .ulctas li.orderbg button::before { animation: none; }
}

/* Guest Profile tile: present but not yet usable (reference keeps it in the row
   rather than letting the row reshuffle on login). */
.ulctas li.ordernrml--locked button { opacity: .58; }

/* "Log In →" is one text run and stays on one line at every width. */
.ulctas li.orderbg a { white-space: nowrap; }

/* Badges keep their corner but sit inside the tile's new radius. */
.ulctas .ptspan { right: -2px; top: -6px; }

@media (min-width: 768px) {
    /* Desktop has the room the design ref assumes: the CTA becomes a solid raised
       panel, sized against the tiles beside it rather than filling the column. */
    .ulctas { padding-bottom: 0; }
    .ulctas li.orderbg { flex: 2.6 1 0; position: relative; }
    .ulctas li.orderbg a, .ulctas li.orderbg button {
        background: rgb(255 255 255 / .3);
        border-color: rgb(255 255 255 / .45);
        box-shadow: 0 3px 10px rgb(0 0 0 / .12);
        padding: .95rem .6rem;
    }
    .ulctas li button p, .ulctas li a p { font-size: .7rem; }
}

@media (max-width: 767px) {
    /* Reference scrolls the row rather than shrinking every tile to nothing. */
    .ulctas { overflow-x: auto; padding-bottom: .25rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .ulctas::-webkit-scrollbar { display: none; }
    .ulctas li.orderbg { min-width: 172px; }
    .banner { border-radius: 0 0 28px 28px; }
}

/* An unconfigured title/description must not reserve space. #loyalty-desc renders
   unconditionally and stays empty when the brand sets no description, leaving a
   1.5rem hole between the greeting and the action row that reads as broken
   spacing rather than absent copy. */
.banner .taglinep:empty { display: none; }

/* Fit the whole action row instead of clipping the last tile. The reference shows
   three tiles; this page carries five (Rewards and How it works are still wired to
   live sections), so they share the width rather than scrolling a tile half out of
   view — a tile cut mid-word reads as a bug, not as an affordance. */
@media (max-width: 767px) {
    .ulctas { overflow: visible; }
    .ulctas li { flex: 1 1 0; min-width: 0; }
    .ulctas li.orderbg { flex: 1.9 1 0; min-width: 0; }
    .ulctas li button, .ulctas li a { padding: .6rem .25rem; min-width: 0; }
    .ulctas li button p, .ulctas li a p {
        font-size: .62rem; line-height: 1.15;
        /* Two short words ("How it works") wrap rather than truncate. */
        overflow-wrap: anywhere; hyphens: auto;
    }
    .ulctas li button svg, .ulctas li button img,
    .ulctas li a svg, .ulctas li a img { max-width: 18px; }
    .ulctas li.orderbg a, .ulctas li.orderbg button { font-size: .95rem; padding: .7rem .4rem; }
}

/* The headline row ships with a decorative phone/gift SVG in a col-4 beside the
   title. The reference gives the programme name the full width and puts nothing
   next to it, and at col-md-5 the illustration squeezed "GIPL Revamp" onto two
   lines. Hidden rather than deleted — it's still in the markup for any brand that
   wants it back. */
.banner .welcomerow > .col-4 { display: none; }
.banner .welcomerow > .col-8 { flex: 0 0 100%; max-width: 100%; padding-right: 0; }
/* The greeting sits directly above the headline, tight — they're one block. */
.banner .tagline { margin-bottom: .35rem !important; }
.banner .welcomerow { margin-bottom: .5rem !important; }

/* ── "How it works" modal (design 12a·W·X / B.1) ──────────────────────────
   The brand's own scheme, restyled: cream sheet, rows on a white panel, and the
   tier ladder underneath for brands that run tiers. Scoped to the existing
   #eligibility-criteria modal, and to the .hiw class the view only puts there under
   ?eb=1 — off the flag the explainer keeps the tier-criteria design that is live
   today, so the cream sheet must not reach it. */
#eligibility-criteria.hiw .modal-content { border: none; border-radius: 22px; overflow: hidden; }
#eligibility-criteria.hiw .modal-header { background: #FFF8E7; padding-bottom: 0; }
#eligibility-criteria.hiw .modal-title { font-size: .9rem; font-weight: 700; color: var(--fg-3, #6b6b6b); }
.hiw-body { background: #FFF8E7; padding: .5rem 1.25rem 1.5rem; }

.hiw-head { text-align: center; }
/* The mark is an illustration, not a glyph — it needs room to read. */
.hiw-head__mark { display: inline-grid; place-items: center; margin-bottom: .5rem; }
.hiw-head__mark img { display: block; width: auto; height: auto; max-width: 92px; max-height: 66px; }
.hiw-head__title { margin: 0; font-size: 1.35rem; font-weight: 800; line-height: 1.2; color: var(--fg-1, #1a1a1a); }
.hiw-head__sub { margin: .45rem auto 0; max-width: 30ch; font-size: .88rem; line-height: 1.45; color: var(--fg-3, #6b6b6b); }

/* One action out of the modal, matching the page's own primary. */
.hiw-cta {
    display: block; margin-top: 1.1rem; padding: .85rem 1rem;
    background: var(--brand); color: #fff; text-align: center;
    border-radius: 12px; font-size: 1rem; font-weight: 700; text-decoration: none;
}
.hiw-cta:hover, .hiw-cta:focus { color: #fff; opacity: .93; text-decoration: none; }

/* On a brand with tiers the ladder makes this list ~1100px inside a sheet capped
   at 90vh, so the action at its end was effectively unreachable — and the sheet
   read as cut off rather than scrollable, because a tier card was sliced flat at
   its bottom edge. Sticking the action to the foot of the scroll area fixes both:
   it is always in reach, and it covers the slice so the cut reads as "more
   below". The shadow fades the rows into the sheet's own cream as they pass
   under it. Flat-scheme brands have a short list, where sticky is a no-op. */
#eligibility-criteria .hiw-body { padding-bottom: 0; }

#eligibility-criteria .hiw-cta {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-bottom: 1.25rem;
    box-shadow: 0 -14px 18px -8px #FFF8E7;
}

/* Breathing room under the last tier so it doesn't sit flush against the action. */
#eligibility-criteria .milestone-timeline-clean { padding-bottom: .5rem; }

/* Rows sit on white so they read as the substance, not the frame. */
.hiw-rows {
    list-style: none; margin: 1.1rem 0 0; padding: 1rem;
    background: #fff; border-radius: 16px;
}
.hiw-row { display: flex; align-items: flex-start; gap: .8rem; padding: .6rem 0; }
.hiw-row + .hiw-row { border-top: 1px solid var(--border-subtle, #f0f0f0); }
.hiw-row__icon {
    flex: none; display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 11px;
    background: color-mix(in srgb, var(--brand) 10%, #fff);
}
/* Illustrations keep their own proportions inside the tile — forcing them square
   squashed the wide ones (the hand and the wallet). */
.hiw-row__art { display: block; width: auto; height: auto; max-width: 30px; max-height: 26px; }
.hiw-row__text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.hiw-row__title { font-size: .95rem; font-weight: 700; color: var(--fg-1, #1a1a1a); }
.hiw-row__body { font-size: .85rem; line-height: 1.45; color: var(--fg-3, #6b6b6b); }

/* The ladder below the terms — tier brands only. */
.hiw-tiers-title {
    margin: 1.4rem 0 .6rem; font-size: .78rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3, #6b6b6b);
}

/* The band runs straight into the page — the reference has no rounded bottom on
   the loyalty hero at any width. The old 75px sweep is what made the page read as
   a different product from the new design. */
.banner { border-radius: 0; }
@media (max-width: 767px) { .banner { border-radius: 0; } }

/* Logged-out joining incentive. Was a full-bleed lime #DFF25F band, centred; the
   reference makes it a contained cream card sitting in the page's own column, read
   left-to-right like the content beneath it rather than announced across the page. */
.banner-notification { background: transparent; border: 0; padding: 1.1rem 0 0 !important; }
.banner-notification p {
    background: #FFF8E7;
    border: 1px solid color-mix(in srgb, #C9971E 22%, #fff);
    border-radius: 10px;
    padding: .7rem 1rem;
    /* An earlier rule makes this p a centred flex row, so text-align never applied —
       the alignment has to be set on the flex axis instead. */
    justify-content: flex-start; align-items: center; gap: .4rem;
    text-align: left;
    font-size: .88rem; font-weight: 600; color: #6b5310;
}
.banner-notification p img { margin-right: .15rem; }

/* The dashed logged-out slot holds the same height as the signed-in card, but its
   contents shouldn't float in the middle of all that space — the reference keeps
   them top-left, reading as a slot waiting to be filled. */
/* The card carries no padding of its own any more (the expiry strip is full-bleed),
   so the logged-out slot's inset comes from its state, like every other state. */
.wb--empty .wb__card { justify-content: center; }
.wb--empty .wb__state { padding: 1.1rem 1.15rem; }
.wb--empty .wb__rate { font-size: 1rem; margin-bottom: .1rem; }

/* ── Spend → Earn points → Burn (design 12a·W·L0) ─────────────────────────
   Sits on its own tinted band above the greeting: with no balance to report it's
   the first thing a logged-out visitor reads, and it states the whole loop in
   three words before any copy asks them to log in. */
/* The strip is the first thing in the band, so the band's own top padding has to
   go — it left a dead stripe of colour above it. Scoped with :has so a signed-in
   band (no strip) keeps the breathing room above the greeting. */
.banner #topBackground:has(#loyaltyLoopStrip:not([hidden])) { padding-top: 0; }
/* Dotted texture, brand-agnostic — pure alpha over whatever the band's colour is.
   It stops with the strip: no divider rule underneath, since the texture ending is
   the only separation the reference draws between the strip and the hero. */
.loop-strip {
    background-color: rgb(0 0 0 / .06);
    background-image: radial-gradient(rgb(255 255 255 / .11) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    padding: .9rem 0;
    margin: -1px 0 1.4rem;
}
.loop-strip__steps {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: flex-start; justify-content: center;
    gap: .9rem; flex-wrap: nowrap;
}
.loop-strip__step {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    text-align: center; color: #fff; min-width: 0; flex: 0 1 auto;
}
/* The art is line work drawn in black for a light surface, so the tile has to BE
   a light surface — the reference does the same, a cream square on the band. A
   translucent white tile leaves the outlines invisible against the brand colour. */
.loop-strip__icon {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 13px;
    background: var(--surface-cream, #F6F1E7);
    border: 1px solid rgb(255 255 255 / .5);
    margin-bottom: .15rem;
}
.loop-strip__icon img { display: block; width: auto; height: auto; max-width: 30px; max-height: 26px; }
.loop-strip__label { font-size: .88rem; font-weight: 800; }
.loop-strip__sub { font-size: .72rem; opacity: .88; }
/* The arrows sit against the icons, not the sublabels. */
.loop-strip__arrow { display: grid; place-items: center; color: rgb(255 255 255 / .6); margin-top: 14px; flex: none; }

@media (max-width: 767px) {
    .loop-strip { padding: .7rem 0; margin-bottom: 1rem; }
    .loop-strip__steps { gap: .35rem; }
    .loop-strip__icon { width: 38px; height: 38px; border-radius: 11px; }
    .loop-strip__label { font-size: .76rem; }
    .loop-strip__sub { font-size: .62rem; line-height: 1.2; }
    .loop-strip__arrow { margin-top: 11px; }
    .loop-strip__arrow svg { width: 12px; height: 12px; }
}

/* Logged out: the action row takes the right-hand column, where the balance card
   lives once there is one. Right-aligned so it hugs the band's edge as designed. */
.wallet-col--actions .ulctas { justify-content: flex-end; }
@media (min-width: 768px) {
    .wallet-col--actions .ulctas { max-width: 420px; margin-left: auto; }
}

/* "HOW IT WORKS" is a section label in the reference, not a page heading: small,
   uppercase, letter-spaced and left-aligned over the cards. The big centred h2 it
   replaced competed with the hero title for the same job. */
.howitworksection .text-center { text-align: left !important; }
.howitworksection .common-head {
    font-size: .78rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--fg-2, #444);
    margin-bottom: .75rem;
}
.howitworksection .common-para { text-align: left; font-size: .85rem; }
/* Tighter cards to match: the reference fits three across without the airiness. */
.howitworksection .howItWorks--split { padding: .95rem 1rem; }
.howitworksection .howItWorks--split .howItWorksHead { font-size: .98rem; }
.howitworksection .howItWorks--split p { font-size: .84rem; }

/* Tier card sitting under the wallet block: it repeats the balance, the expiry,
   the conversion and the transaction-history link, all of which the block above
   already states. Keep the tier track — that's the part only this card has. */
.has-wallet-block .nw-headibng,
.has-wallet-block .nw-subheadibng,
.has-wallet-block .nw-wallet-dupe { display: none; }

/* …and with those rows gone the tier card is just a track, so it shouldn't sit in
   a second white panel under the first. The two join into one card: the wallet
   card squares its bottom corners, the track squares its top, and the gap closes.
   A rule between them is the only thing separating the two halves. */
.wb:has(+ .has-wallet-block) .wb__card {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    border-bottom: 0; box-shadow: none; margin-bottom: 0;
}
.has-wallet-block { margin-top: 0; }
.has-wallet-block .nw-div {
    border-radius: 0 0 16px 16px;
    border: 1px solid var(--border-subtle, #ececec);
    border-top: 1px solid var(--border-subtle, #eee);
    box-shadow: 0 2px 10px rgb(0 0 0 / .05);
    padding: 1rem 1.15rem;
    margin-top: 0;
}

/* ── Eligible items rail (design 12a·W·D0 / ·Dn) ──────────────────────────
   A horizontal rail of what the balance can buy. Scrolls rather than wrapping:
   the reference shows a partial card at the edge as the affordance that there
   are more. */
.eligible-rail { padding-top: 1.6rem; }
/* The reference frames the whole rail in one white panel, and lets the last card
   run off its right edge as the "there's more" affordance — hence the negative
   margin + matching padding on the track rather than a clipped container. */
.eligible-rail .container {
    background: #fff; border-radius: 16px;
    box-shadow: 0 2px 10px rgb(0 0 0 / .05);
    padding: 1.15rem 0 1.25rem 1.25rem; overflow: hidden;
}
.eligible-rail__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; padding-right: 1.25rem; }
.eligible-rail__title { margin: 0; font-size: .86rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-1, #2a2a2a); }
.eligible-rail__all { font-size: .9rem; font-weight: 600; color: var(--brand); text-decoration: none; }
.eligible-rail__all:hover { text-decoration: underline; }

/* No outlet chosen: items differ per outlet, so the rail asks instead of guessing. */
.eligible-rail__pick {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-right: 1.25rem;
    background: #fff; border: 1px dashed color-mix(in srgb, var(--brand) 35%, #fff);
    border-radius: 14px; padding: 1rem 1.15rem;
}
.eligible-rail__pick-text { margin: 0; font-size: .9rem; color: var(--fg-2, #444); }
.eligible-rail__pick-btn {
    flex: none; border: none; border-radius: 10px;
    background: var(--brand); color: #fff;
    padding: .6rem 1.1rem; font-size: .88rem; font-weight: 700;
}
.eligible-rail__empty { margin: 0 1.25rem 0 0; font-size: .88rem; color: var(--fg-3, #6b6b6b); }

.eligible-rail__track {
    display: flex; gap: .75rem;
    overflow-x: auto; padding: 0 1.25rem .4rem 0;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.eligible-rail__track::-webkit-scrollbar { display: none; }

.er-card {
    flex: 0 0 214px; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--border-subtle, #ececec);
    border-radius: 12px; overflow: hidden; text-decoration: none;
}
.er-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, #fff); }

/* Image well — the badges the menu card carries, in the same corners, so an item
   reads the same here as it does on the menu. */
.er-card__img { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--bg-2, #f4f4f4); }
.er-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Item with no photo: the brand mark, greyed back and inset — menu-card parity. */
.er-card__img img.er-card__logo { object-fit: contain; padding: 22%; filter: grayscale(1); opacity: .35; }
.er-card__veg {
    position: absolute; top: .45rem; left: .45rem; z-index: 1;
    display: grid; place-items: center; width: 20px; height: 20px;
    background: #fff; border-radius: 4px;
}
.er-card__prep {
    position: absolute; top: .45rem; right: .45rem; z-index: 1;
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .2rem .45rem; border-radius: 6px;
    background: rgb(0 0 0 / .62); color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 1.5;
}
.er-card__add {
    position: absolute; right: .5rem; bottom: .5rem; z-index: 1;
    display: grid; place-items: center; width: 30px; height: 30px;
    background: #fff; color: var(--brand); border: 1px solid var(--border-subtle, #ececec);
    border-radius: 8px; box-shadow: 0 2px 6px rgb(0 0 0 / .12);
}

/* Live add control: same footprint as the decorative badge so the card doesn't
   shift when an item turns out to be addable. */
.er-card__add--live { cursor: pointer; }
.er-card__add--live:focus-visible,
.er-card__step-btn:focus-visible {
    outline: 2px solid var(--brand); outline-offset: 2px;
}

/* Stepper — the add badge grown sideways, anchored to the same corner so the
   card's geometry is unchanged whether the item is in the cart or not. */
.er-card__step {
    position: absolute; right: .5rem; bottom: .5rem; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    width: 76px; height: 30px;
    background: var(--brand); color: var(--brand-secondary, #fff);
    border-radius: 8px; box-shadow: 0 2px 6px rgb(0 0 0 / .12);
    font-weight: 700; overflow: hidden;
}
.er-card__step-btn {
    display: grid; place-items: center;
    width: 26px; height: 100%;
    font-size: 15px; line-height: 1; cursor: pointer; user-select: none;
}
.er-card__step-btn:active { transform: scale(.85); transition: transform 80ms; }
.er-card__step-qty {
    min-width: 20px; text-align: center;
    font-size: .8rem; font-variant-numeric: tabular-nums;
}

/* Same horizontal inset as the band below, so the name, the price and the points
   figure all start on one line down the card's left edge. */
.er-card__body { display: block; padding: .6rem .8rem .8rem; }
.er-card__tag {
    display: inline-flex; align-items: center; gap: .2rem; margin-bottom: .2rem;
    font-size: .7rem; font-weight: 700; color: var(--accent-warm, #E07B2C);
}
.er-card__name {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden; font-size: .93rem; font-weight: 700; line-height: 1.3; color: var(--fg-1, #1a1a1a);
}
.er-card__price { display: block; margin-top: .35rem; font-size: .95rem; font-weight: 700; color: var(--fg-1, #1a1a1a); }

/* The claim band. Brand-coloured and full width because it's the reason the card
   is on this page at all — everything above it is just the item. */
.er-card__foot {
    margin-top: auto; display: flex; align-items: center; gap: .45rem;
    padding: .7rem .8rem; background: var(--brand); color: #fff;
    font-size: .8rem; line-height: 1.5;
}
.er-card__coin { display: inline-flex; color: var(--gold, #E8B84B); flex: none; }
/* A flex row, so the two halves below are wrappable items — written as one text
   run they had no break opportunity between them and the earn figure clipped. */
.er-card__pts { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: .45rem; row-gap: .1rem; }
.er-card__pts b { font-weight: 800; color: var(--gold, #FFD98A); }
/* The OR is a divider, not a word in either figure — it keeps its own air on both
   sides so the two numbers read as a choice rather than one run of characters. */
.er-card__pts i { font-style: normal; margin: 0 .3rem 0 .15rem; font-size: .7rem; opacity: .75; letter-spacing: .02em; }
.er-card__pts em { font-style: normal; font-weight: 800; }
/* Two halves on one band: what the item costs in points, and what it earns. Each
   stays on one line and the pair wraps between them, so a narrow card breaks
   between the figures rather than inside one of them. */
.er-card__half { display: inline-flex; align-items: center; white-space: nowrap; }
.er-card__heart { display: inline-flex; margin-left: .25rem; }

@media (max-width: 767px) {
    .eligible-rail .container { border-radius: 14px; padding: 1rem 0 1.1rem 1rem; }
    .eligible-rail__head { padding-right: 1rem; }
    .er-card { flex: 0 0 168px; }
    .er-card__name { font-size: .86rem; }
    .er-card__body { padding: .55rem .7rem .7rem; }
    .er-card__foot { font-size: .76rem; padding: .6rem .7rem; gap: .35rem; }
    .eligible-rail__pick { flex-direction: column; align-items: stretch; }
    .eligible-rail__pick-btn { width: 100%; }
}

/* ── Sticky cart bar ──────────────────────────────────────────────────────
   The eligible-items rail adds to the cart in place, so this page needs the
   same exit the menu offers. Deliberately NOT .menu-cart-bar: that component
   is defined across menu.css (animation, share-open, z-index, two media
   queries) and this page never loads that sheet — importing it for one bar
   would drag the whole menu cascade onto a page whose widgets share none of
   its class names. Same tokens, so the two read as one component.

   Desktop: a centred pill floating clear of the fold. Mobile: a full-width
   strip pinned to the bottom edge, which is where the thumb already is. */
.lty-cart-bar {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, calc(100% + 32px));
    z-index: var(--z-sticky-cta);
    transition: transform var(--dur-3, .3s) var(--ease-out, ease);
    max-width: 360px;
    width: max-content;
}
.lty-cart-bar.is-visible { transform: translate(-50%, 0); }
.lty-cart-bar[hidden] { display: none; }
.lty-cart-bar__inner {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 6px 18px 6px 6px;
    border: 0;
    border-radius: var(--r-cart-bar);
    background: var(--brand-primary);
    color: #fff;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    font: inherit; text-align: left;
    transition: box-shadow var(--dur-2, .2s);
}
.lty-cart-bar__inner:hover { box-shadow: var(--shadow-xl, var(--shadow-lg)); }
.lty-cart-bar__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}
.lty-cart-bar__info { display: flex; flex-direction: column; min-width: 0; }
.lty-cart-bar__title { font-size: 1rem; font-weight: 700; letter-spacing: .01em; }
.lty-cart-bar__meta { font-size: .82rem; font-weight: 500; opacity: .85; margin-top: 1px; }
.lty-cart-bar__sep { opacity: .55; margin: 0 3px; }
.lty-cart-bar__chev { display: inline-flex; margin-left: auto; flex: none; }

/* Nudge on add, so a tap on a rail card two-thirds up the page registers. */
@keyframes lty-cart-bump { 0% { scale: 1 } 40% { scale: 1.06 } 100% { scale: 1 } }
.lty-cart-bar.is-bumped .lty-cart-bar__inner { animation: lty-cart-bump 240ms var(--ease-out, ease); }
@media (prefers-reduced-motion: reduce) {
    .lty-cart-bar { transition: none; }
    .lty-cart-bar.is-bumped .lty-cart-bar__inner { animation: none; }
}

@media (max-width: 767px) {
    .lty-cart-bar {
        left: 0; right: 0; bottom: 0;
        max-width: none; width: auto;
        transform: translateY(100%);
    }
    .lty-cart-bar.is-visible { transform: translateY(0); }
    .lty-cart-bar__inner {
        border-radius: 0;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
    }
    .lty-cart-bar__icon { display: none; }
    .lty-cart-bar__info { flex-direction: row; align-items: center; gap: 8px; }
    .lty-cart-bar__meta { font-size: .9rem; font-weight: 600; opacity: 1; margin-top: 0; }
}

/* The bar covers the foot of the page while it's up — give the last section
   room so the app-download block isn't sitting under it. */
body:has(.lty-cart-bar.is-visible) .download-the-app-section { margin-bottom: 96px; }