/* ------------------------------------------------------------------
   Referral dashboard (account panel)
   ------------------------------------------------------------------ */

.referral-hero,
.referral-share,
.referral-steps {
    --rf-accent: #0f9d76;
    --rf-border: var(--vr-gray-200, #e5e7eb);
    --rf-surface: var(--vr-gray-50, #f9fafb);
    --rf-muted: var(--vr-gray-500, #6b7280);
}

[data-bs-theme="dark"] .referral-hero,
[data-bs-theme="dark"] .referral-share,
[data-bs-theme="dark"] .referral-steps {
    --rf-border: var(--vr-gray-700);
    --rf-surface: rgba(255, 255, 255, .04);
    --rf-muted: var(--vr-gray-400);
}

/* --- Reward rate --------------------------------------------------- */

.referral-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(15, 157, 118, .3);
    border-radius: 12px;
    background: rgba(15, 157, 118, .07);
}

.referral-hero-rate {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    padding-right: 1.25rem;
    border-right: 1px solid rgba(15, 157, 118, .25);
    text-align: center;
}

.referral-hero-value {
    color: var(--rf-accent);
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1;
}

.referral-hero-label {
    margin-top: .25rem;
    color: var(--rf-muted);
    font-size: .6875rem;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.referral-hero-title {
    margin: 0 0 .25rem;
    font-size: 1rem;
    font-weight: 700;
}

.referral-hero-text {
    margin: 0;
    color: var(--rf-muted);
    font-size: .875rem;
    line-height: 1.5;
}

/* --- Code and link ------------------------------------------------- */

.referral-share {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--rf-border);
    border-radius: 12px;
}

.referral-share-label {
    display: block;
    margin-bottom: .5rem;
    font-size: .8125rem;
    font-weight: 600;
}

.referral-code-box,
.referral-link-box {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

.referral-code {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    padding: .875rem 1rem;
    border: 2px dashed rgba(15, 157, 118, .4);
    border-radius: 8px;
    background: rgba(15, 157, 118, .06);
    color: var(--rf-accent);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 5px;
    text-align: center;
    word-break: break-all;
}

.referral-link-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .625rem .875rem;
    border: 1px solid var(--rf-border);
    border-radius: 8px;
    background: var(--rf-surface);
    color: inherit;
    font-size: .8125rem;
}

.referral-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    flex-shrink: 0;
    padding: .625rem 1rem;
    border: 1px solid var(--rf-accent);
    border-radius: 8px;
    background: var(--rf-accent);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all .2s ease;
}

.referral-copy-btn:hover {
    background: transparent;
    color: var(--rf-accent);
}

.referral-copy-btn.is-copied {
    border-color: var(--rf-accent);
    background: transparent;
    color: var(--rf-accent);
}

.referral-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.referral-share-btn {
    padding: .4375rem .875rem;
    border: 1px solid var(--rf-border);
    border-radius: 100px;
    color: inherit;
    font-size: .8125rem;
    text-decoration: none;
    transition: all .2s ease;
}

.referral-share-btn:hover {
    border-color: var(--rf-accent);
    color: var(--rf-accent);
}

/* --- Stats --------------------------------------------------------- */

.referral-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.referral-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.125rem .75rem;
    border: 1px solid var(--vr-gray-200, #e5e7eb);
    border-radius: 12px;
    text-align: center;
}

[data-bs-theme="dark"] .referral-stat {
    border-color: var(--vr-gray-700);
}

.referral-stat.is-highlight {
    border-color: rgba(15, 157, 118, .35);
    background: rgba(15, 157, 118, .06);
}

.referral-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
}

.referral-stat.is-highlight .referral-stat-value {
    color: #0f9d76;
}

.referral-stat-label {
    margin-top: .375rem;
    opacity: .7;
    font-size: .75rem;
}

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

.referral-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--rf-border);
    border-radius: 12px;
    background: var(--rf-surface);
}

.referral-step {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.referral-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rf-accent);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
}

.referral-step-text {
    font-size: .8125rem;
    line-height: 1.5;
}

/* --- History ------------------------------------------------------- */

.referral-history-title {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.referral-badge {
    display: inline-block;
    padding: .1875rem .625rem;
    border-radius: 100px;
    background: rgba(128, 128, 128, .16);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.referral-badge-converted {
    background: rgba(15, 157, 118, .16);
    color: #0f9d76;
}

.referral-badge-pending {
    background: rgba(255, 193, 7, .2);
    color: #997404;
}

.referral-badge-rejected {
    background: rgba(220, 53, 69, .14);
    color: #dc3545;
}

.referral-reward-code {
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: 1px;
}

@media (max-width: 575.98px) {
    .referral-hero {
        flex-direction: column;
        text-align: center;
    }

    .referral-hero-rate {
        padding-right: 0;
        padding-bottom: 1rem;
        border-right: 0;
        border-bottom: 1px solid rgba(15, 157, 118, .25);
        width: 100%;
    }

    .referral-code {
        font-size: 1.125rem;
        letter-spacing: 3px;
    }

    .referral-code-box,
    .referral-link-box {
        flex-direction: column;
    }
}

/* ------------------------------------------------------------------
   Promotions — the member's marketing kit
   ------------------------------------------------------------------ */

.promo-card,
.promo-block,
.promo-stats {
    --pr-accent: #0f9d76;
    --pr-border: var(--vr-gray-200, #e5e7eb);
    --pr-surface: var(--vr-gray-50, #f9fafb);
    --pr-muted: var(--vr-gray-500, #6b7280);
}

[data-bs-theme="dark"] .promo-card,
[data-bs-theme="dark"] .promo-block,
[data-bs-theme="dark"] .promo-stats {
    --pr-border: var(--vr-gray-700);
    --pr-surface: rgba(255, 255, 255, .04);
    --pr-muted: var(--vr-gray-400);
}

/* --- Share card ---------------------------------------------------- */

.promo-card {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--pr-border);
    border-radius: 12px;
}

.promo-card-preview {
    overflow: hidden;
    border: 1px solid var(--pr-border);
    border-radius: 10px;
    line-height: 0;
}

.promo-card-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.promo-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    margin-top: 1rem;
}

.promo-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1.125rem;
    border: 1px solid var(--pr-border);
    border-radius: 8px;
    color: inherit;
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
}

.promo-btn:hover {
    border-color: var(--pr-accent);
    color: var(--pr-accent);
}

.promo-btn-primary {
    border-color: var(--pr-accent);
    background: var(--pr-accent);
    color: #fff;
}

.promo-btn-primary:hover {
    background: transparent;
    color: var(--pr-accent);
}

/* --- Blocks -------------------------------------------------------- */

.promo-block {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--pr-border);
    border-radius: 12px;
}

.promo-block-title {
    margin: 0 0 .25rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.promo-block-hint {
    margin: 0 0 1.125rem;
    color: var(--pr-muted);
    font-size: .8125rem;
    line-height: 1.5;
}

/* --- Network buttons ----------------------------------------------- */

.promo-networks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .625rem;
}

.promo-network {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem .875rem;
    border: 1px solid var(--pr-border);
    border-radius: 8px;
    color: inherit;
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
}

.promo-network svg {
    flex-shrink: 0;
}

.promo-network:hover {
    color: #fff;
    transform: translateY(-2px);
}

.promo-network-whatsapp:hover { background: #25d366; border-color: #25d366; }
.promo-network-telegram:hover { background: #229ed9; border-color: #229ed9; }
.promo-network-facebook:hover { background: #1877f2; border-color: #1877f2; }
.promo-network-x:hover        { background: #000;    border-color: #000; }
.promo-network-linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.promo-network-reddit:hover   { background: #ff4500; border-color: #ff4500; }
.promo-network-email:hover    { background: var(--pr-accent); border-color: var(--pr-accent); }

/* --- Copy fields --------------------------------------------------- */

.promo-field {
    margin-bottom: 1rem;
}

.promo-field:last-child {
    margin-bottom: 0;
}

.promo-field-label {
    display: block;
    margin-bottom: .375rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--pr-muted);
}

.promo-field-row {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.promo-field-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .625rem .875rem;
    border: 1px solid var(--pr-border);
    border-radius: 8px;
    background: var(--pr-surface);
    color: inherit;
    font-size: .8125rem;
    line-height: 1.55;
    resize: vertical;
}

.promo-copy {
    flex-shrink: 0;
    padding: .625rem 1rem;
    border: 1px solid var(--pr-accent);
    border-radius: 8px;
    background: transparent;
    color: var(--pr-accent);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all .2s ease;
}

.promo-copy:hover,
.promo-copy.is-copied {
    background: var(--pr-accent);
    color: #fff;
}

/* --- Stats --------------------------------------------------------- */

.promo-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .75rem;
}

.promo-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.125rem .75rem;
    border: 1px solid var(--pr-border);
    border-radius: 12px;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.promo-stat.is-highlight {
    border-color: rgba(15, 157, 118, .35);
    background: rgba(15, 157, 118, .06);
}

.promo-stat.is-highlight .promo-stat-value {
    color: var(--pr-accent);
}

.promo-stat-link:hover {
    border-color: var(--pr-accent);
    color: var(--pr-accent);
}

.promo-stat-value {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
}

.promo-stat-label {
    margin-top: .375rem;
    opacity: .7;
    font-size: .75rem;
}

@media (max-width: 575.98px) {
    .promo-field-row {
        flex-direction: column;
    }

    .promo-copy {
        width: 100%;
    }
}

/* --- Promotions: refined layout ------------------------------------ */

.promo-block-share {
    --pr-accent: #0f9d76;
}

.promo-block-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.125rem;
}

.promo-rate-pill {
    flex-shrink: 0;
    padding: .375rem .875rem;
    border: 1px solid rgba(15, 157, 118, .35);
    border-radius: 100px;
    background: rgba(15, 157, 118, .08);
    color: #0f9d76;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Tighter, more uniform network buttons */
.promo-networks {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: .5rem;
}

.promo-network {
    padding: .625rem .5rem;
    font-size: .78125rem;
}

.promo-link-row {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pr-border);
}

/* The kit: compact preview beside the copy, never full bleed */
.promo-kit {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.promo-kit-media {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.promo-kit .promo-card-preview {
    overflow: hidden;
    border: 1px solid var(--pr-border);
    border-radius: 10px;
    line-height: 0;
}

.promo-kit .promo-card-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.promo-btn-block {
    justify-content: center;
    width: 100%;
}

.promo-kit-meta {
    color: var(--pr-muted);
    font-size: .6875rem;
    letter-spacing: .4px;
    text-align: center;
    text-transform: uppercase;
}

.promo-kit-copy .promo-field:last-child {
    margin-bottom: 0;
}

.promo-block-hint.mb-0 {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .promo-kit {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .promo-kit-media {
        max-width: 320px;
    }

    .promo-block-head {
        flex-direction: column;
        gap: .625rem;
    }
}

/* Reading tier granted by a subscription rather than earned by reading */
.rr-plan-badge {
    display: inline-block;
    margin-left: .5rem;
    padding: .1875rem .625rem;
    border: 1px solid rgba(15, 157, 118, .35);
    border-radius: 100px;
    background: rgba(15, 157, 118, .1);
    color: #0f9d76;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .2px;
    vertical-align: middle;
    white-space: nowrap;
}