/*--------------------------------------------
    CUSTOMER ACCOUNT: LOYALTY
    My account > Offers and Wallet (account/offers.php, account/wallet.php)
    and the wallet link in the account page header. Builds on account.css.
---------------------------------------------*/
.acc-area [hidden],
.lw-modal [hidden] {
    display: none !important;
}

/* Wallet link at the right of the breadcrumb bar */
.page_header_content.has-wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lw-wallet-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #212121 !important;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 999px;
    transition: border-color .15s, color .15s;
}

.lw-wallet-link i {
    font-size: 16px;
    color: #e7272d;
}

.lw-wallet-link:hover,
.lw-wallet-link:focus {
    color: #e7272d !important;
    border-color: #e7272d;
}

.lw-wallet-link strong {
    font-variant-numeric: tabular-nums;
}

/* Dashboard: four tiles (appointments, points, purchases, offers) */
.acc-stats.is-four {
    grid-template-columns: repeat(4, 1fr);
}

/* Offers: banner with the customer's points */
.lw-hero {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    min-height: 132px;
    margin-bottom: 20px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(120deg, #2b2b2e 0%, #17171a 55%, #101012 100%);
    border-radius: 14px;
    box-shadow: var(--acc-shadow);
}

.lw-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 120%, rgba(231, 39, 45, .32), transparent 46%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 14px);
    pointer-events: none;
}

.lw-hero-text {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    padding: 22px 26px;
}

.lw-hero-tag {
    align-self: flex-start;
    margin-bottom: 10px;
    padding-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-bottom: 3px solid #e7272d;
}

.lw-hero-small {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.lw-hero-text strong {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.lw-hero-points {
    position: relative;
    display: flex;
    flex: 0 0 210px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 22px 18px 44px;
    text-align: center;
    background: #0b0b0c;
    clip-path: polygon(34px 0, 100% 0, 100% 100%, 0 100%);
}

.lw-hero-points::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40px;
    background: #e7272d;
    clip-path: polygon(34px 0, 40px 0, 6px 100%, 0 100%);
}

.lw-hero-points span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
}

.lw-hero-points strong {
    padding-bottom: 6px;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    border-bottom: 3px solid #e7272d;
}

/* Offers: the points filter and the date box, at the right of the greeting */
.lw-welcome > div:first-child {
    flex: 1 1 320px;
    min-width: 0;
}

.lw-welcome-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.lw-filter {
    position: relative;
    margin: 0;
}

.lw-filter-icon,
.lw-filter-arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    margin: 0;
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

.lw-filter-icon {
    left: 16px;
    font-size: 15px;
    color: #e7272d;
}

.lw-filter-arrow {
    right: 16px;
    font-size: 11px;
    color: #555;
}

.lw-filter-select {
    width: 100%;
    min-width: 210px;
    height: 48px;
    padding: 0 38px 0 42px;
    font-size: 14px;
    font-weight: 600;
    color: #212121;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    outline: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .2s, box-shadow .2s;
}

.lw-filter-select::-ms-expand {
    display: none;
}

.lw-filter-select:hover {
    border-color: #212121;
}

.lw-filter-select:focus {
    border-color: #e7272d;
    box-shadow: 0 0 0 3px rgba(231, 39, 45, .12);
}

/* Date box: "Today" until a later day is picked, then an x to go back to today */
.lw-day .lw-filter-select {
    width: 180px;
    min-width: 0;
}

.lw-day .lw-filter-select[readonly] {
    background: #fff;
    caret-color: transparent;
}

.lw-day .lw-filter-select::placeholder {
    color: #212121;
    opacity: 1;
}

.lw-day-clear {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 11px;
    color: #555 !important;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: background .15s, color .15s;
}

.lw-day-clear:hover,
.lw-day-clear:focus {
    color: #e7272d !important;
    background: #fdecec;
}

/* Offers: the list */
.lw-offers {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lw-offer {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 84px;
    padding: 0;
    overflow: hidden;
    font: inherit;
    color: #212121;
    text-align: left;
    background: #fff;
    border: 0;
    border-radius: 14px;
    box-shadow: var(--acc-shadow);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}

.lw-offer:hover,
.lw-offer:focus-visible {
    box-shadow: 0 12px 30px rgba(17, 17, 17, .11);
    transform: translateY(-2px);
}

.lw-offer:focus-visible {
    outline: 2px solid #e7272d;
    outline-offset: 2px;
}

.lw-offer-icon {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 20px;
    color: #e7272d;
    background: #fdecec;
    border-radius: 12px;
}

.lw-offer > .lw-offer-icon {
    align-self: center;
    margin: 0 4px 0 18px;
}

.lw-offer-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 14px 12px;
}

.lw-offer-main strong {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: #212121;
}

.lw-offer-main span {
    font-size: 13px;
    color: #7a7a7a;
}

.lw-offer-main em {
    margin-top: 2px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    color: #b26a00;
}

/* The note, then "Until Nov 20" when the offer has an end date */
.lw-offer-main .lw-offer-meta {
    margin-top: 2px;
    font-size: 12px;
    color: #7a7a7a;
}

.lw-offer-main .lw-offer-until {
    font-size: inherit;
    font-weight: 500;
}

.lw-offer-meta em + .lw-offer-until::before {
    margin: 0 6px;
    content: "\00b7";
}

/* The points are enough: "Already in your wallet" */
.lw-offer.is-ready .lw-offer-main em {
    color: #1b6b33;
}

.lw-offer.is-limit .lw-offer-main em {
    color: #555;
}

/* Starts after today: "Starts Nov 25" */
.lw-offer.is-upcoming .lw-offer-main em {
    color: #2364aa;
}

.lw-offer-points {
    display: flex;
    flex: 0 0 104px;
    flex-direction: column;
    align-self: center;
    justify-content: center;
    padding: 4px 14px;
    border-left: 2px solid #e7272d;
}

.lw-offer-points span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.lw-offer-points strong {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.lw-offer-image {
    display: flex;
    flex: 0 0 150px;
    align-items: center;
    justify-content: center;
    background: #1b1b1d center / cover no-repeat;
    clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%);
}

.lw-offer-image.is-empty {
    font-size: 26px;
    color: rgba(255, 255, 255, .35);
    background: linear-gradient(120deg, #2b2b2e, #141416);
}

.lw-offer.is-short .lw-offer-points strong {
    color: #9a9a9a;
}

.lw-offer.is-short .lw-offer-image {
    filter: grayscale(.6);
    opacity: .8;
}

/* Wallet: balance */
.lw-balance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 32px;
    margin-bottom: 20px;
    padding: 24px 26px;
    color: #fff;
    background: linear-gradient(120deg, #2b2b2e 0%, #141416 100%);
    border-radius: 14px;
    box-shadow: var(--acc-shadow);
}

.lw-balance-main {
    flex: 0 0 auto;
    padding-left: 16px;
    border-left: 4px solid #e7272d;
}

.lw-balance-main span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.lw-balance-main strong {
    display: block;
    font-size: 46px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.lw-balance-parts {
    display: flex;
    flex: 1 1 280px;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.lw-balance-parts > div {
    flex: 1 1 120px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .07);
    border-radius: 10px;
}

.lw-balance-parts dt {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, .7);
}

.lw-balance-parts dd {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Wallet: captured offers */
.lw-claims {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lw-claim {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    padding: 14px 0;
    border-top: 1px solid var(--acc-line);
}

.lw-claim:first-child {
    padding-top: 0;
    border-top: 0;
}

.lw-claim-main {
    display: flex;
    flex: 1 1 200px;
    flex-direction: column;
    min-width: 0;
}

.lw-claim-main strong {
    font-size: 15px;
    font-weight: 700;
    color: #212121;
}

.lw-claim-main span {
    font-size: 13px;
    color: #6a6a6a;
}

.lw-claim-where i {
    margin-right: 4px;
    color: #e7272d;
}

.lw-claim-main .lw-claim-meta {
    font-size: 12px;
    color: #8a8a8a;
}

.lw-claim-button {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 22px;
    font-size: 13px;
}

.lw-claim-button[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.lw-claim-locked {
    flex: 1 1 100%;
    margin: 0;
    font-size: 13px;
    color: #a3221b;
}

.lw-claim-locked i,
.lw-hint i {
    margin-right: 6px;
}

.lw-claims.is-past .lw-offer-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    font-size: 16px;
    color: #8a8a8a;
    background: #f0f0f0;
}

.lw-hint {
    margin: 14px 0 0;
    padding-top: 14px;
    font-size: 13px;
    color: #6a6a6a;
    border-top: 1px solid var(--acc-line);
}

.lw-more {
    margin-top: 12px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

/* Wallet: points history */
.lw-history {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lw-history li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--acc-line);
}

.lw-history li:first-child {
    padding-top: 0;
    border-top: 0;
}

.lw-history-icon {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 13px;
    border-radius: 50%;
}

.lw-history-icon.is-plus {
    color: #1b6b33;
    background: #e8f5ec;
}

.lw-history-icon.is-minus {
    color: #a3221b;
    background: #fdecea;
}

.lw-history-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.lw-history-main strong {
    font-size: 14px;
    font-weight: 600;
    color: #212121;
}

.lw-history-main span {
    font-size: 12px;
    color: #8a8a8a;
}

.lw-history-points {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lw-history-points.is-plus {
    color: #1b6b33;
}

.lw-history-points.is-minus {
    color: #a3221b;
}

/* Capture and redeem windows */
.lw-modal {
    --ap-primary: #e7272d;
    --ap-primary-soft: #fdecec;
    --ap-ink: #212121;
    --ap-muted: #7a7a7a;
    --ap-line: #eeeeee;
}

.lw-modal .modal-dialog {
    max-width: 440px;
}

.lw-modal .modal-content {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(17, 17, 17, .2);
}

.lw-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 13px;
    color: #212121;
    background: rgba(255, 255, 255, .92);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(17, 17, 17, .15);
    cursor: pointer;
}

.lw-modal-image {
    height: 190px;
    background: #1b1b1d center / cover no-repeat;
}

.lw-modal .modal-body {
    padding: 24px 26px 26px;
}

.lw-modal-merchant {
    display: block;
    margin-bottom: 4px;
    padding-right: 40px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #e7272d;
}

.lw-modal h2 {
    margin: 0 0 8px;
    padding-right: 30px;
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    color: #212121;
}

.lw-modal-where {
    margin: 0 0 10px;
    font-size: 13px;
    color: #7a7a7a;
}

.lw-modal-description {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.55;
    color: #555;
    white-space: pre-line;
}

.lw-modal-sum {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: #f6f6f7;
    border-radius: 10px;
}

.lw-modal-sum > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 14px;
}

.lw-modal-sum dt {
    margin: 0;
    font-weight: 500;
    color: #6a6a6a;
}

.lw-modal-sum dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #212121;
}

.lw-modal-sum .is-total {
    margin-top: 6px;
    padding-top: 9px;
    border-top: 1px solid #e3e3e5;
}

.lw-modal-note {
    margin: 0 0 4px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #855000;
    background: #fff4e0;
    border-radius: 10px;
}

.lw-modal-button {
    width: 100%;
    height: 48px;
    font-size: 14px;
}

.lw-modal-button[disabled] {
    opacity: .6;
    cursor: default;
}

.lw-modal-hint {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #8a8a8a;
    text-align: center;
}

.lw-pin-label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: #212121;
}

.lw-pin {
    display: block;
    width: 100%;
    height: 56px;
    margin-bottom: 14px;
    padding: 0 14px;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .32em;
    text-align: center;
    text-transform: uppercase;
    color: #212121;
    background: #fff;
    border: 2px solid #e3e3e5;
    border-radius: 12px;
    outline: 0;
    transition: border-color .15s, box-shadow .15s;
}

.lw-pin::placeholder {
    color: #cfcfd3;
    letter-spacing: .32em;
}

.lw-pin:focus {
    border-color: #e7272d;
    box-shadow: 0 0 0 4px rgba(231, 39, 45, .12);
}

@media (max-width: 991px) {
    .acc-stats.is-four {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .acc-stats.is-four {
        grid-template-columns: 1fr;
    }

    .lw-welcome-actions {
        width: 100%;
    }

    .lw-welcome-actions .lw-filter {
        flex: 1 1 200px;
    }

    .lw-filter-select,
    .lw-day .lw-filter-select {
        width: 100%;
        min-width: 0;
    }

    .lw-hero-text {
        padding: 18px;
    }

    .lw-hero-text strong {
        font-size: 22px;
    }

    .lw-hero-points {
        flex-basis: 150px;
        padding: 14px 14px 14px 38px;
    }

    .lw-hero-points strong {
        font-size: 34px;
    }

    .lw-offer > .lw-offer-icon {
        margin-left: 12px;
    }

    .lw-offer-main {
        padding: 12px 8px;
    }

    .lw-offer-main strong {
        font-size: 15px;
    }

    .lw-offer-points {
        flex-basis: 78px;
        padding: 4px 10px;
    }

    .lw-offer-points strong {
        font-size: 22px;
    }

    .lw-offer-image {
        flex-basis: 96px;
        clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
    }

    .lw-balance {
        padding: 20px;
    }

    .lw-balance-main strong {
        font-size: 38px;
    }
}

@media (max-width: 420px) {
    .lw-wallet-link span {
        display: none;
    }

    .lw-hero-tag {
        font-size: 11px;
    }

    .lw-hero-points {
        flex-basis: 126px;
    }

    .lw-offer > .lw-offer-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .lw-offer-image {
        flex-basis: 72px;
    }

    .lw-claim-button {
        flex: 1 1 100%;
    }
}