/**
 * Reward points.
 *
 * Uses the plugin's existing tokens, plus one new accent for points only —
 * a bronze that reads as "reward" without fighting the near-black UI.
 *
 * Layout properties are pinned with !important for the same reason the cart
 * pill and checkout rows are: themes style buttons and links aggressively, and
 * Hello Commerce in particular rewrites padding, radius and text-transform
 * through a selector that outranks a single class.
 */

.tsc-points {
    /* One green family for both wallets. Money you already hold reads the
       same whether it is points or credit. */
    --tsc-pts: #1c7a4a;
    --tsc-pts-tint: #eaf3ee;
    --tsc-pts-line: #bcd9c8;
    --tsc-pts-good: #1c7a4a;
    --tsc-pts-ink: #161823;
    --tsc-pts-muted: #8a8b91;
    --tsc-pts-border: #ececef;
    --tsc-pts-card: #ffffff;

    color: var(--tsc-pts-ink);
    font-size: 14px;
    line-height: 1.4;
}
.tsc-points * { box-sizing: border-box; }

/* Balance ------------------------------------------------------------- */
.tsc-points__hero {
    background: var(--tsc-pts-card);
    border: 1px solid var(--tsc-pts-border);
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
}
.tsc-points__balance {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--tsc-pts);
    font-variant-numeric: tabular-nums;
}
.tsc-points__balance-label {
    margin-top: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tsc-pts-muted);
}
.tsc-points__worth {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--tsc-pts) !important;
    border: 1px solid var(--tsc-pts);
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 600;
}
/* wc_price() emits its own spans; force them to inherit the white. */
.tsc-points__worth .amount,
.tsc-points__worth bdi,
.tsc-points__worth span { color: #ffffff !important; }

/* Expiring ------------------------------------------------------------ */
.tsc-points__expiring {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    padding: 12px 16px;
    background: var(--tsc-pts-tint);
    border: 1px solid var(--tsc-pts-line);
    border-radius: 8px;
}
.tsc-points__expiring-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tsc-pts);
}
.tsc-points__expiring-value { font-size: 13px; color: var(--tsc-pts-ink); }

/* History ------------------------------------------------------------- */
/* Section headings.
   Pinned with !important rather than written inline: an inline style is beaten
   by any stylesheet rule that uses !important, and it cannot carry the media
   query below. A class with !important outranks both a theme rule and an inline
   style, and stays editable in one place.
   Padding matters as much as the centring — some themes give the account area
   no horizontal padding at all, which left these sitting on the screen edge. */
.tsc-points .tsc-points__section-title {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 24px 0 8px !important;
    padding: 0 16px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    color: var(--tsc-pts-muted) !important;
    text-align: center !important;
}
.tsc-points__empty {
    padding: 20px 16px;
    background: var(--tsc-pts-card);
    border: 1px solid var(--tsc-pts-border);
    border-radius: 8px;
    color: var(--tsc-pts-muted);
    text-align: center;
}
.tsc-points__history {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--tsc-pts-card);
    border: 1px solid var(--tsc-pts-border);
    border-radius: 8px;
    overflow: hidden;
}
.tsc-points__row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--tsc-pts-border);
    list-style: none !important;
}
.tsc-points__row:last-child { border-bottom: 0; }
.tsc-points__row-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tsc-points__row-title {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tsc-points__row-meta { font-size: 11.5px; color: var(--tsc-pts-muted); }
.tsc-points__row-amount {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.tsc-points__row-amount.is-plus { color: var(--tsc-pts-good); }
.tsc-points__row-amount.is-minus { color: var(--tsc-pts-muted); }

@media (max-width: 480px) {
    .tsc-points__balance { font-size: 32px; }
}

/* ==========================================================================
   Checkout: the points row, the earn note, and the redemption sheet
   ==========================================================================
   The row reuses .tsc-checkout__select-row, so it inherits the hardening that
   keeps rows full-width and left-aligned on Hello Commerce. Only the accent
   differs. The sheet is pinned the same way — it is built from buttons, which
   themes restyle harder than anything else.
   ========================================================================== */

:root {
    --tsc-pts: #1c7a4a;
    --tsc-pts-tint: #eaf3ee;
    --tsc-pts-line: #bcd9c8;
}

/* Both wallet icons are green — one visual family for "value you already
   hold", regardless of which currency it is. */
.tsc-points-row__icon {
    background: var(--tsc-credit-tint, #eaf3ee) !important;
    color: var(--tsc-credit, #1c7a4a) !important;
}
.tsc-points-row__icon svg,
.tsc-credit-row__icon svg { display: block; }
/* Row text stays black — the green is carried by the icon and the checkbox, so
   the value itself does not need to shout. */
.tsc-wallet-row .tsc-checkout__select-label,
.tsc-wallet-row .tsc-checkout__select-value,
.tsc-points-row__applied,
.tsc-credit-row__applied {
    color: #161823 !important;
    font-weight: 600 !important;
}

/* "You'll earn X points" — same treatment as the cart: plain, green, centred.
   Not a card. It reports a consequence of the order, it is not a control. */
.tsc-points-earn-note,
p.tsc-points-earn-note {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 2px !important;
    padding: 8px 16px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #1c7a4a !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    text-align: center !important;
}
.tsc-points-earn-note b { font-weight: 700; }

/* ==========================================================================
   Product page, cart line and confirmation note
   ========================================================================== */

/* "Earn N points with this item" — under the price on the product page. */
.tsc-points-earn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tsc-pts);
}
.tsc-points-earn__icon { flex: 0 0 auto; }

/* Cart line — plain text, no card or tint. It is a note, not a control, and a
   filled box next to the coupon pill read as a second button.
   Still pinned hard because the logged-out variant is a <button>, which themes
   restyle more aggressively than anything else on the page. */
.tsc-points-cart-line,
button.tsc-points-cart-line,
p.tsc-points-cart-line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 10px 0 2px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #1c7a4a !important;      /* Green: this is money coming back. */
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    justify-content: center !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: normal !important;
    font-family: inherit !important;
    min-height: 0 !important;
}
button.tsc-points-cart-line { cursor: pointer; }
button.tsc-points-cart-line:hover .tsc-points-cart-line__text { text-decoration: underline; }
.tsc-points-cart-line b { font-weight: 700; }
.tsc-points-cart-line__icon { flex: 0 0 auto; }
.tsc-points-cart-line__text { flex: 1 1 auto; }

/* Thank-you note. */
.tsc-points-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--tsc-pts-tint);
    border: 1px solid var(--tsc-pts-line);
    color: var(--tsc-pts);
    font-size: 13px;
}
.tsc-points-note__icon { flex: 0 0 auto; }

/* ==========================================================================
   Store credit
   ==========================================================================
   A separate accent from points — green reads as money already owed, bronze as
   a reward you convert. Same hardening as every other checkout row.
   ========================================================================== */

:root {
    --tsc-credit: #1c7a4a;
    --tsc-credit-tint: #eaf3ee;
    --tsc-credit-line: #bcd9c8;
}

.tsc-credit-row__icon {
    background: var(--tsc-credit-tint) !important;
    color: var(--tsc-credit) !important;
    font-size: 13px !important;
}


/* "No payment needed" — a statement, not a control, so it must not look tappable. */
.tsc-nopay-row { cursor: default !important; }
.tsc-nopay-row__icon {
    background: var(--tsc-credit-tint) !important;
    color: var(--tsc-credit) !important;
    font-size: 14px !important;
}
.tsc-nopay-row__value { color: var(--tsc-credit) !important; font-weight: 600 !important; }

/* Sheet ---------------------------------------------------------------- */
.tsc-credit-sheet { position: fixed; inset: 0; z-index: 99999; display: none; }
.tsc-credit-sheet.is-open { display: block; }
.tsc-credit-sheet__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.tsc-credit-sheet__panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 88vh; overflow-y: auto;
    background: #ffffff; border-radius: 16px 16px 0 0; padding-bottom: 16px;
    animation: tsc-credit-up 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px) {
    .tsc-credit-sheet__panel {
        left: 50%; right: auto; bottom: auto; top: 50%;
        transform: translate(-50%, -50%); width: 420px; border-radius: 14px; animation: none;
    }
}
@keyframes tsc-credit-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .tsc-credit-sheet__panel { animation: none; } }

.tsc-credit-sheet__grab { width: 36px; height: 4px; border-radius: 2px; background: #d5d5da; margin: 10px auto 2px; }
.tsc-credit-sheet__title { text-align: center; font-size: 15px; font-weight: 700; color: #161823; padding: 8px 16px 12px; }
.tsc-credit-sheet__body { padding: 4px 16px 0; display: grid; gap: 8px; }

.tsc-credit-opt {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    background: #f5f5f7 !important;
    color: #161823 !important;
    border: 1px solid #ececef !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
    text-transform: none !important;
    cursor: pointer;
    font-family: inherit !important;
}
.tsc-credit-opt.is-on {
    background: var(--tsc-credit-tint) !important;
    border-color: var(--tsc-credit) !important;
    color: var(--tsc-credit) !important;
    font-weight: 700 !important;
}
.tsc-credit-opt:disabled { opacity: 0.5; cursor: not-allowed; }
.tsc-credit-opt__tick {
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid currentColor; font-size: 11px; line-height: 1;
}

/* ==========================================================================
   Wallet rows — store credit and reward points, as switches
   ==========================================================================
   Both are things the customer already owns, so the question is only "use it?".
   A switch answers that in one tap; the points row keeps a small link through
   to the stepper for anyone who wants to spend only part of a balance.
   ========================================================================== */

.tsc-wallet-row { cursor: default !important; }
.tsc-wallet-row .tsc-checkout__select-body { gap: 3px !important; }
.tsc-wallet-row__note { font-size: 11.5px; color: #8a8b91; }


/* The switch. A real checkbox underneath, so it is keyboard reachable and
   announces its state — the visible track is decoration. */
.tsc-switch {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.tsc-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.tsc-switch__track {
    display: block;
    width: 46px;
    height: 27px;
    border-radius: 999px;
    background: #d5d5da;
    transition: background 0.18s ease;
}
.tsc-switch__knob {
    display: block;
    width: 23px;
    height: 23px;
    margin: 2px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease;
}
.tsc-switch input:checked + .tsc-switch__track { background: var(--tsc-credit); }
.tsc-switch input:checked + .tsc-switch__track .tsc-switch__knob { transform: translateX(19px); }
.tsc-points-row .tsc-switch input:checked + .tsc-switch__track { background: var(--tsc-pts); }
.tsc-switch input:focus-visible + .tsc-switch__track { outline: 2px solid currentColor; outline-offset: 2px; }
.tsc-switch input:disabled + .tsc-switch__track { opacity: 0.5; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
    .tsc-switch__track, .tsc-switch__knob { transition: none; }
}


/* ==========================================================================
   Checkbox — a nonce-protected link, not an input
   ==========================================================================
   Rendered as <a role="checkbox" aria-checked>. Deliberately not a real
   checkbox: a form control needs JavaScript to do anything on change, and two
   attempts at that failed on a live site. A link always works.
   ========================================================================== */

.tsc-check {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border: 2px solid #c9c9ce !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: transparent !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.tsc-check:hover,
.tsc-check:focus { border-color: var(--tsc-credit, #1c7a4a) !important; }
.tsc-check:focus-visible { outline: 2px solid var(--tsc-credit, #1c7a4a); outline-offset: 2px; }
.tsc-check.is-on {
    background: var(--tsc-credit, #1c7a4a) !important;
    border-color: var(--tsc-credit, #1c7a4a) !important;
    color: #ffffff !important;
}
.tsc-check__box { display: inline-flex; align-items: center; justify-content: center; }
.tsc-check svg { display: block; }

@media (prefers-reduced-motion: reduce) { .tsc-check { transition: none; } }

/* Section headings, needed once the tab carries two balances. */
.tsc-points .tsc-points__section-title--major {
    margin-top: 28px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: var(--tsc-pts-ink, #161823) !important;
    text-align: center !important;
}
.tsc-points .tsc-points__section-title--first { margin-top: 0 !important; }

/* The balance and history panels sit flush to the edge on themes with no
   account padding. Give them the same gutter as the headings so the column
   lines up instead of one element hugging the screen. */
@media (max-width: 600px) {
    /* Breathing room above the first heading — on a phone it otherwise sits
       tight under the account tab row. padding, not margin, so it cannot
       collapse into the tab row's own margin. */
    .tsc-points .tsc-points__section-title--first {
        padding-top: 2em !important;
    }

    .tsc-points .tsc-points__hero,
    .tsc-points .tsc-points__history,
    .tsc-points .tsc-points__empty,
    .tsc-points .tsc-points__expiring {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}