/*
 * Referrals — My Account "Polecenia" page styling.
 * Brand: primary #24317C, accent #5CC9F5. Lightweight, mobile-first.
 *
 * Page-specific layout only. The .wdlp-copy / .wdlp-coupons__code styles are provided
 * by loyalty.css, which is also enqueued on account pages; a minimal defensive
 * fallback for those classes is restated below.
 *
 * @package Waterdrop_Referrals
 */

.wdref-points {
    --wdref-primary: #24317C;
    --wdref-accent: #5CC9F5;
    --wdref-ink: #1f2430;
    --wdref-muted: #6b7280;
    --wdref-line: #e3e7ef;
    --wdref-surface: #f6f8fc;
    color: var(--wdref-ink);
}

.wdref-points section {
    margin-bottom: 28px;
}

.wdref-login-prompt {
    padding: 16px 18px;
    background: var(--wdref-surface);
    border: 1px solid var(--wdref-line);
    border-radius: 6px;
}

.wdref-intro__heading {
    margin: 0 0 8px;
    font-size: 1.25rem;
    color: var(--wdref-primary);
}

.wdref-intro p {
    margin: 0 0 10px;
    line-height: 1.6;
}

.wdref-intro p:last-child {
    margin-bottom: 0;
}

/* The "Polecenia" account-menu icon lives in menu-icon.css (loaded site-wide so
 * it also shows in the header account dropdown). */

/* ── Code card ──────────────────────────────────────────────── */
.wdref-code__heading {
    margin: 0 0 12px;
    font-size: 1.05rem;
    color: var(--wdref-primary);
}

.wdref-code__box {
    padding: 20px;
    background: var(--wdref-surface);
    border: 1px solid var(--wdref-line);
    border-radius: 10px;
}

.wdref-stats__awarded {
    margin: 0;
    font-weight: 600;
    color: var(--wdref-primary);
}

.wdref-note {
    margin: 0;
    font-size: 0.875rem;
    color: var(--wdref-muted);
}

/* ── Defensive fallback for the shared loyalty copy markup ──────
 * loyalty.css already styles these; restated minimally in case the
 * loyalty stylesheet is ever absent on this page.
 */
.wdref-points .wdlp-coupons__code-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wdref-points .wdlp-coupons__code {
    padding: 8px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--wdref-primary);
    background: #fff;
    border: 1px solid var(--wdref-line);
    border-radius: 8px;
}

.wdref-points .wdlp-copy {
    padding: 6px 14px;
    font-size: 0.875rem;
    color: #fff;
    background: var(--wdref-primary);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.wdref-points .wdlp-copy:hover,
.wdref-points .wdlp-copy:focus {
    background: #1b2660;
}