/*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 floats centred just above the card. */
#offer-rewards .icon-btn-close {
    position: absolute;
    left: 50%;
    top: -18px;
    transform: translate(-50%, -50%);
    z-index: 5;
    background: var(--surface, #fff);
}

/* .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% !important;
}

.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 !important;
}

.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;
}

.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;
    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;
}

.txn-card__desc {
    font-size: 13px;
    color: #666;
    margin-top: 6px;
    line-height: 1.4;
}

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

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

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

/* Transaction History modal — fixed height + always-visible scroll */
#points-rewards #transactionHistoryList {
    max-height: 400px; /* ~3.5 transaction cards, rest scrolls */
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: #c4c4c4 transparent;
}

#points-rewards #transactionHistoryList::-webkit-scrollbar {
    width: 6px;
    -webkit-appearance: none;
}

#points-rewards #transactionHistoryList::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 4px;
}

#points-rewards #transactionHistoryList::-webkit-scrollbar-track {
    background: transparent;
}

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

.couponxt {
    position: relative;
    width: 100%;
    padding: 12px 12px 46px 30px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #F5F5F5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: visible;
    height: 100%;
}

.couponxt::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 50%;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
    background: #fdfdfd;
    border-radius: 50%;
    z-index: 2;
}

.couponxt::after {
    content: "";
    position: absolute;
    left: -24px;
    top: 50%;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: transparent;
    border: 1px solid #F5F5F5;
    z-index: 1;
    clip-path: inset(0 0 0 24px);
    pointer-events: none;
}

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

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

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

.tag {
    background: #E4FFDD;
    color: #333;
    padding: 0px 6px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    margin-left: 7px;
}

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

.foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #ccc;
    padding-top: 10px;
    font-size: 14px;
    color: #444;
    font-weight: 500;
    position: absolute;
    bottom: 10px;
    width: 89%;
    left: 52%;
    transform: translate(-50%, 0%);
}

#offer-rewards .modal-body {
    padding: 0px !important;
    border-radius: 20px;
    max-height: 70vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c4c4c4 transparent;
}

#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: 20px 30px;
}

.exploreoffersouter.specialoffers {
    background-image: linear-gradient(to top, #B7D4B0, #E4FFDD);
    border-radius: 20px;
}

.exploreoffersouter.specialoffers .couponxt::before,
.exploreoffersouter.specialoffers .couponxt::after {
    display: none;
}

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

.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: 0px;
    }

    .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);
}