/* ==========================================================================
   Radian Rewards

   Two blocks, one file (they share the tier palette and never load together):
     .radian-rw   — the My Account -> Rewards dashboard
     .radian-rwp  — the public /rewards marketing page

   Colours come from main.css tokens, so dark mode is inherited rather than
   restated — the only explicit body.dark-mode rules below are the ones where a
   token genuinely has no dark value (the tier metals, and --color-warning,
   which main.css defines for light mode only).
   ========================================================================== */

/* --- Tier palette ---------------------------------------------------------
   The Cu / Ag / Au / Pt symbols are the one place this program gets to look
   like it belongs to a chemistry supplier, so they carry real metal colours
   rather than the theme's neutrals. Each tier states both a light and a dark
   value: the light-mode metals are too dark to read on the dark surface. */

.radian-rw,
.radian-rwp {
    --tier-bronze: #A97142;
    --tier-silver: #8A8F98;
    --tier-gold:   #B08900;
    --tier-platinum: #4E6E81;
}

body.dark-mode .radian-rw,
body.dark-mode .radian-rwp {
    --tier-bronze: #D69B62;
    --tier-silver: #C2C8D0;
    --tier-gold:   #E3BC3F;
    --tier-platinum: #8FB6C9;
}

/* ==========================================================================
   My Account -> Rewards
   ========================================================================== */

.radian-rw { font-size: 0.95rem; }

.radian-rw__intro { margin-bottom: 1.5rem; }

.radian-rw__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.radian-rw__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-success);
}

.radian-rw__title {
    margin: 0 0 0.2rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.radian-rw__sub {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Expiry warning. Amber rather than the error red — points lapsing is a
   deadline, not a failure. main.css's --color-warning has no dark value, so
   both surfaces are stated here. */
.radian-rw__alert {
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid #FCD34D;
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: #FFFBEB;
    color: #854D0E;
    font-size: 0.88rem;
}

body.dark-mode .radian-rw__alert {
    border-color: #B45309;
    background: #2B2411;
    color: #FCD34D;
}

/* --- Top three cards --- */

.radian-rw__top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (max-width: 900px) {
    .radian-rw__top { grid-template-columns: 1fr; }
}

.radian-rw__card {
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-alt);
}

.radian-rw__label {
    margin: 0 0 0.6rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.radian-rw__figure {
    margin: 0 0 0.4rem;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-primary);
}

.radian-rw__unit {
    margin-left: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

.radian-rw__note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.radian-rw__note .woocommerce-Price-amount { color: var(--color-text); font-weight: 600; }

.radian-rw__tier {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 0.4rem;
}

.radian-rw__tier-name {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}

/* The element badge. Sized off a fixed px box rather than the font, so
   two-letter symbols ("Cu") and the badge stay square at every zoom level. */
.radian-rw__symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1.5px solid currentColor;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.radian-rw__symbol--bronze   { color: var(--tier-bronze); }
.radian-rw__symbol--silver   { color: var(--tier-silver); }
.radian-rw__symbol--gold     { color: var(--tier-gold); }
.radian-rw__symbol--platinum { color: var(--tier-platinum); }

.radian-rw__progress-head {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
}

.radian-rw__progress-head .woocommerce-Price-amount { font-weight: 800; }

.radian-rw__bar {
    height: 6px;
    margin-bottom: 0.55rem;
    border-radius: var(--radius-full);
    background: var(--color-border);
    overflow: hidden;
}

.radian-rw__bar span {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--color-primary);
}

.radian-rw__bar--full span { background: var(--tier-platinum); }

/* --- Sections --- */

.radian-rw__section { margin-bottom: 2.25rem; }

.radian-rw__h3 {
    margin: 0 0 0.9rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.radian-rw__section-note {
    margin: -0.4rem 0 1rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.radian-rw__empty {
    margin: 0;
    padding: 1.25rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

/* --- Lifetime metrics --- */

.radian-rw__metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-border);
    overflow: hidden;
}

@media (max-width: 700px) {
    .radian-rw__metrics { grid-template-columns: repeat(2, 1fr); }
}

.radian-rw__metric {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem;
    background: var(--color-bg);
}

.radian-rw__metric-num {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
}

.radian-rw__metric-val {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}

.radian-rw__metric-lbl {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* --- Redemption grid --- */

.radian-rw__redeem {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

@media (max-width: 700px) {
    .radian-rw__redeem { grid-template-columns: repeat(2, 1fr); }
}

.radian-rw__redeem.is-busy { opacity: 0.6; pointer-events: none; }

.radian-rw__tile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.radian-rw__tile:hover:not(:disabled) {
    border-color: var(--color-primary);
    background: var(--color-bg-alt);
    transform: translateY(-1px);
}

.radian-rw__tile:disabled,
.radian-rw__tile.is-locked {
    cursor: default;
    opacity: 0.55;
    background: var(--color-bg-alt);
}

.radian-rw__tile-val {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}

.radian-rw__tile-val .woocommerce-Price-amount { color: inherit; }

.radian-rw__tile-pts {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.radian-rw__tile-lock {
    margin-top: 0.15rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
}

/* --- Redemption result --- */

.radian-rw__result {
    margin-top: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-alt);
}

/* The `hidden` attribute only gets display:none from the UA stylesheet, which
   any author display value outranks. Nothing above sets one on this element
   today, but the same omission cost a debugging round on the quick view
   overlay — state it rather than depend on that staying true. */
.radian-rw__result[hidden] { display: none; }

.radian-rw__result--success { border-color: var(--color-success); }
.radian-rw__result--error { border-color: var(--color-error); color: var(--color-error); }

.radian-rw__result-head {
    margin: 0 0 0.8rem;
    font-weight: 700;
    color: var(--color-primary);
}

.radian-rw__result-code {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.radian-rw__result-code code {
    padding: 0.55rem 0.9rem;
    border: 1px dashed var(--color-text-light);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--color-primary);
}

.radian-rw__copy {
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

.radian-rw__copy:hover { border-color: var(--color-primary); color: var(--color-primary); }
.radian-rw__copy.is-copied { border-color: var(--color-success); color: var(--color-success); }

.radian-rw__result-note {
    margin: 0 0 0.7rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.radian-rw__result-link {
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
}

/* --- Tables (codes + ledger) --- */

.radian-rw__table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-size: 0.85rem;
}

.radian-rw__table th {
    padding: 0.6rem 0.75rem;
    background: var(--color-bg-alt);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    color: var(--color-text-muted);
}

.radian-rw__table td {
    padding: 0.7rem 0.75rem;
    border-top: 1px solid var(--color-border);
    vertical-align: top;
}

.radian-rw__num { text-align: right; }

.radian-rw__event { display: block; font-weight: 600; color: var(--color-primary); }

.radian-rw__event-note {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.radian-rw__delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.radian-rw__delta--up { color: var(--color-success); }
.radian-rw__delta--down { color: var(--color-text-muted); }

.radian-rw__code {
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-primary);
}

.radian-rw__status {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
}

.radian-rw__status--active { background: rgba(22, 163, 74, 0.12); color: var(--color-success); }

/* Tables are the one thing here that can't shrink to a phone. Give them their
   own scroller rather than letting the account content scroll sideways. */
@media (max-width: 600px) {
    .radian-rw__table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* --- Pager --- */

.radian-rw__pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.9rem;
    font-size: 0.82rem;
}

.radian-rw__pager-pos { color: var(--color-text-muted); }
.radian-rw__pager-link { font-weight: 600; text-decoration: underline; }

/* --- Dashboard banner (My Account landing page) --- */

.radian-rw__banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-alt);
    font-size: 0.9rem;
}

.radian-rw__banner .radian-rw__symbol { width: 34px; height: 34px; font-size: 0.8rem; }
.radian-rw__banner-link { margin-left: auto; font-weight: 600; text-decoration: underline; }

/* ==========================================================================
   Public /rewards page
   ========================================================================== */

.radian-rwp__section { padding: 64px 0; }
.radian-rwp__section--alt { background: var(--color-bg-alt); }

@media (max-width: 640px) {
    .radian-rwp__section { padding: 44px 0; }
}

.radian-rwp__label {
    margin: 0 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.radian-rwp__h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.radian-rwp__body {
    max-width: 62ch;
    margin: 0 0 2rem;
    color: var(--color-text-muted);
}

.radian-rwp__note {
    margin: 1.5rem 0 0;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

/* --- How it works --- */

.radian-rwp__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (max-width: 860px) {
    .radian-rwp__steps { grid-template-columns: 1fr; }
}

.radian-rwp__step {
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.radian-rwp__step-num {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
}

.radian-rwp__step h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.radian-rwp__step p { margin: 0; font-size: 0.92rem; color: var(--color-text-muted); }

/* --- Tiers --- */

.radian-rwp__tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 860px) {
    .radian-rwp__tiers { grid-template-columns: repeat(2, 1fr); }
}

.radian-rwp__tier {
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    text-align: center;
}

/* The top rule is the only per-tier colour on the card. Tinting the whole
   surface made four cards that fight each other for attention; a 3px edge
   reads as a set. */
.radian-rwp__tier { border-top-width: 3px; }
.radian-rwp__tier--bronze   { border-top-color: var(--tier-bronze); }
.radian-rwp__tier--silver   { border-top-color: var(--tier-silver); }
.radian-rwp__tier--gold     { border-top-color: var(--tier-gold); }
.radian-rwp__tier--platinum { border-top-color: var(--tier-platinum); }

.radian-rwp__tier-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 0.85rem;
    border: 2px solid currentColor;
    border-radius: var(--radius-md);
    font-size: 1.2rem;
    font-weight: 700;
}

.radian-rwp__tier--bronze   .radian-rwp__tier-symbol { color: var(--tier-bronze); }
.radian-rwp__tier--silver   .radian-rwp__tier-symbol { color: var(--tier-silver); }
.radian-rwp__tier--gold     .radian-rwp__tier-symbol { color: var(--tier-gold); }
.radian-rwp__tier--platinum .radian-rwp__tier-symbol { color: var(--tier-platinum); }

.radian-rwp__tier h3 { margin: 0 0 0.3rem; font-size: 1.1rem; }

.radian-rwp__tier-req {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.radian-rwp__tier-mult {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* --- Redemption ladder --- */

.radian-rwp__ladder {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-top: 2rem;
}

@media (max-width: 900px) {
    .radian-rwp__ladder { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 520px) {
    .radian-rwp__ladder { grid-template-columns: repeat(2, 1fr); }
}

.radian-rwp__rung {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    text-align: center;
}

.radian-rwp__rung-pts {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.radian-rwp__rung-val {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}

.radian-rwp__rung-val .woocommerce-Price-amount { color: inherit; }

.radian-rwp__cta-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2.25rem 0 0;
}

.radian-rwp__cta {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.radian-rwp__cta:hover { background: var(--color-primary-hover); color: var(--color-primary-contrast); }

.radian-rwp__cta-note { font-size: 0.85rem; color: var(--color-text-muted); }

/* --- Fine print --- */

.radian-rwp__terms {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2rem;
    margin-top: 2rem;
}

@media (max-width: 900px) {
    .radian-rwp__terms { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .radian-rwp__terms { grid-template-columns: 1fr; }
}

.radian-rwp__term h3 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.radian-rwp__term p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.radian-rwp__legal {
    margin: 2rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.radian-rwp__legal a { text-decoration: underline; }