/**
 * PNP Elite Leaders — Public Frontend Styles
 *
 * Premium dark-themed CSS for the Elite Leaders dashboard,
 * application form, leaderboard, and all public-facing components.
 *
 * Color palette:
 *   Background:  #0f1117 (deep dark)
 *   Surface:     #1a1d27 (cards/panels)
 *   Surface Alt: #22263a (hover, alt rows)
 *   Border:      #2a2e3f (subtle)
 *   Text:        #e4e6ef (primary)
 *   Text Muted:  #8b8fa3 (secondary)
 *   Gold Accent: #d4a853 (primary accent)
 *   Gold Light:  #e8c97a (highlights)
 *   Success:     #34d399
 *   Error:       #ef4444
 *   Warning:     #f59e0b
 *
 * Tier badge colors:
 *   Bronze:   #CD7F32
 *   Silver:   #C0C0C0
 *   Gold:     #FFD700
 *   Platinum: #E5E4E2
 *   Diamond:  #B9F2FF
 *
 * @package PNP_Elite_Leaders
 * @since   2.0.0
 */

/* =====================================================================
   CUSTOM PROPERTIES
   ===================================================================== */

:root {
    --pnp-bg:            #0f1117;
    --pnp-surface:       #1a1d27;
    --pnp-surface-alt:   #22263a;
    --pnp-border:        #2a2e3f;
    --pnp-border-light:  #363a4f;
    --pnp-text:          #e4e6ef;
    --pnp-text-muted:    #9fa3b8;
    --pnp-text-dim:      #7a7e93;
    --pnp-gold:          #d4a853;
    --pnp-gold-light:    #e8c97a;
    --pnp-gold-glow:     rgba(212, 168, 83, 0.15);
    --pnp-success:       #34d399;
    --pnp-error:         #ef4444;
    --pnp-warning:       #f59e0b;
    --pnp-radius:        8px;
    --pnp-radius-lg:     12px;
    --pnp-shadow:        0 2px 8px rgba(0, 0, 0, 0.3);
    --pnp-shadow-lg:     0 4px 24px rgba(0, 0, 0, 0.4);
    --pnp-transition:    0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --pnp-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}


/* =====================================================================
   BASE / RESET
   ===================================================================== */

.pnp-dashboard,
.pnp-application,
.pnp-leaderboard-page {
    font-family: var(--pnp-font);
    color: var(--pnp-text);
    line-height: 1.6;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.pnp-dashboard *,
.pnp-application *,
.pnp-leaderboard-page * {
    box-sizing: border-box;
}


/* =====================================================================
   DASHBOARD HEADER
   ===================================================================== */

.pnp-dashboard__header {
    margin-bottom: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, var(--pnp-surface) 0%, var(--pnp-surface-alt) 100%);
    border: 1px solid var(--pnp-border);
    border-left: 4px solid var(--pnp-gold);
    border-radius: var(--pnp-radius-lg);
    box-shadow: var(--pnp-shadow);
}

.pnp-dashboard__greeting {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--pnp-text);
    letter-spacing: -0.02em;
}

.pnp-dashboard__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pnp-dashboard__rank {
    font-size: 0.95rem;
    color: var(--pnp-text-muted);
    font-weight: 500;
}

.pnp-dashboard__status {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pnp-dashboard__status--active {
    background: rgba(52, 211, 153, 0.15);
    color: var(--pnp-success);
    border: 1px solid rgba(52, 211, 153, 0.3);
}


/* =====================================================================
   KPI CARDS
   ===================================================================== */

.pnp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.pnp-kpi-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--pnp-surface);
    border: 1px solid var(--pnp-border);
    border-radius: var(--pnp-radius);
    box-shadow: var(--pnp-shadow);
    transition: border-color var(--pnp-transition), box-shadow var(--pnp-transition);
}

.pnp-kpi-card:hover {
    border-color: var(--pnp-gold);
    box-shadow: var(--pnp-shadow-lg), 0 0 0 1px var(--pnp-gold-glow);
}

.pnp-kpi-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pnp-gold-glow);
    border-radius: var(--pnp-radius);
    color: var(--pnp-gold);
}

.pnp-kpi-card__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pnp-kpi-card__label {
    font-size: 0.8rem;
    color: var(--pnp-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.pnp-kpi-card__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pnp-text);
    line-height: 1.2;
}

.pnp-kpi-card__sub {
    font-size: 0.75rem;
    color: var(--pnp-text-dim);
    margin-top: 0.25rem;
}


/* =====================================================================
   SECTION TITLES
   ===================================================================== */

.pnp-section-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--pnp-gold);
    margin: 0 0 1.25rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--pnp-border);
    letter-spacing: -0.01em;
}

.pnp-dashboard__section {
    background: var(--pnp-surface);
    border: 1px solid var(--pnp-border);
    border-radius: var(--pnp-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--pnp-shadow);
}


/* =====================================================================
   TABLES
   ===================================================================== */

.pnp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pnp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.pnp-table thead th {
    background: var(--pnp-surface-alt);
    color: var(--pnp-text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 2px solid var(--pnp-border);
    white-space: nowrap;
}

.pnp-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--pnp-border);
    color: var(--pnp-text);
    vertical-align: middle;
}

.pnp-table tbody tr:nth-child(even) {
    background: rgba(34, 38, 58, 0.4);
}

.pnp-table tbody tr:hover {
    background: var(--pnp-surface-alt);
}

.pnp-table__total-row td {
    border-top: 2px solid var(--pnp-gold);
    background: var(--pnp-gold-glow) !important;
    color: var(--pnp-gold-light);
}

.pnp-table--compact {
    font-size: 0.85rem;
}

.pnp-table--compact thead th,
.pnp-table--compact tbody td {
    padding: 0.5rem 0.75rem;
}


/* =====================================================================
   TIER BADGES
   ===================================================================== */

.pnp-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--badge-color, #C0C0C0);
    color: var(--badge-color, #C0C0C0);
    background: transparent;
}

.pnp-tier-badge svg {
    width: 12px;
    height: 12px;
}

.pnp-tier-badge--silver  { --badge-color: #C0C0C0; }
.pnp-tier-badge--gold    { --badge-color: #FFD700; }
.pnp-tier-badge--diamond {
    --badge-color: #B9F2FF;
    text-shadow: 0 0 8px rgba(185, 242, 255, 0.3);
}


/* =====================================================================
   STATUS BADGES
   ===================================================================== */

.pnp-status {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pnp-status--active {
    background: rgba(52, 211, 153, 0.12);
    color: var(--pnp-success);
}

.pnp-status--pending {
    background: rgba(245, 158, 11, 0.12);
    color: var(--pnp-warning);
}

.pnp-status--inactive,
.pnp-status--removed {
    background: rgba(239, 68, 68, 0.12);
    color: var(--pnp-error);
}

.pnp-badge--level {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--pnp-gold-glow);
    color: var(--pnp-gold);
    border: 1px solid rgba(212, 168, 83, 0.25);
}


/* =====================================================================
   PROGRESS BARS
   ===================================================================== */

.pnp-progress-bar {
    width: 100%;
    height: 12px;
    background: var(--pnp-surface-alt);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--pnp-border);
}

.pnp-progress-bar__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pnp-surface-alt) 0%, var(--pnp-gold) 100%);
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    min-width: 0;
}

.pnp-progress-bar__text {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--pnp-bg);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.pnp-progress-bar--sm {
    height: 8px;
}

.pnp-progress-bar--sm .pnp-progress-bar__text {
    display: none;
}


/* =====================================================================
   TIER PROGRESS SECTION
   ===================================================================== */

.pnp-tier-progress__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.pnp-tier-progress__current,
.pnp-tier-progress__next {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--pnp-text);
}

.pnp-tier-progress__remaining {
    text-align: center;
    margin-top: 0.75rem;
    color: var(--pnp-text-muted);
    font-size: 0.9rem;
}

.pnp-tier-progress__maxed {
    text-align: center;
    margin-top: 0.75rem;
    color: var(--pnp-gold);
    font-weight: 600;
}


/* =====================================================================
   ACTIVITY FEED
   ===================================================================== */

.pnp-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pnp-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--pnp-border);
    position: relative;
}

.pnp-activity-item:last-child {
    border-bottom: none;
}

.pnp-activity-item::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 32px;
    bottom: -1px;
    width: 1px;
    background: var(--pnp-border);
}

.pnp-activity-item:last-child::before {
    display: none;
}

.pnp-activity-item__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pnp-surface-alt);
    color: var(--pnp-gold);
    z-index: 1;
}

.pnp-activity-item--commission .pnp-activity-item__icon {
    color: var(--pnp-success);
}

.pnp-activity-item--team_join .pnp-activity-item__icon {
    color: var(--pnp-gold);
}

.pnp-activity-item--credit .pnp-activity-item__icon {
    color: #a78bfa;
}

.pnp-activity-item__content {
    flex: 1;
    min-width: 0;
}

.pnp-activity-item__text {
    margin: 0;
    font-size: 0.87rem;
    color: var(--pnp-text);
}

.pnp-activity-item__time {
    font-size: 0.72rem;
    color: var(--pnp-text-dim);
}

.pnp-activity-item__amount {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--pnp-success);
}


/* =====================================================================
   MILESTONES
   ===================================================================== */

.pnp-milestone {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--pnp-border);
}

.pnp-milestone:last-child {
    border-bottom: none;
}

.pnp-milestone__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.pnp-milestone__label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--pnp-text);
}

.pnp-milestone__distance {
    font-size: 0.8rem;
    color: var(--pnp-gold);
    font-weight: 500;
}


/* =====================================================================
   LEADERBOARD
   ===================================================================== */

.pnp-leaderboard__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: leaderboard;
}

.pnp-leaderboard__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--pnp-border);
    transition: background var(--pnp-transition);
}

.pnp-leaderboard__item:hover {
    background: var(--pnp-surface-alt);
}

.pnp-leaderboard__item--current {
    background: var(--pnp-gold-glow);
    border-left: 3px solid var(--pnp-gold);
}

.pnp-leaderboard__rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pnp-surface-alt);
    color: var(--pnp-text-muted);
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.pnp-leaderboard__item:nth-child(1) .pnp-leaderboard__rank {
    background: linear-gradient(135deg, #FFD700, #d4a853);
    color: #0f1117;
}

.pnp-leaderboard__item:nth-child(2) .pnp-leaderboard__rank {
    background: linear-gradient(135deg, #C0C0C0, #a0a0a0);
    color: #0f1117;
}

.pnp-leaderboard__item:nth-child(3) .pnp-leaderboard__rank {
    background: linear-gradient(135deg, #CD7F32, #b06828);
    color: #0f1117;
}

.pnp-leaderboard__name {
    flex: 1;
    font-weight: 500;
    font-size: 0.9rem;
}

.pnp-leaderboard__sales {
    font-weight: 700;
    color: var(--pnp-gold);
    font-size: 0.9rem;
}

/* Full leaderboard page */
.pnp-leaderboard-page__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.pnp-leaderboard-page__header .pnp-section-title {
    margin: 0;
    padding: 0;
    border: none;
}

.pnp-leaderboard-tabs {
    display: flex;
    gap: 0.5rem;
}

.pnp-tab {
    padding: 0.5rem 1rem;
    border: 1px solid var(--pnp-border);
    border-radius: var(--pnp-radius);
    background: var(--pnp-surface);
    color: var(--pnp-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all var(--pnp-transition);
    font-family: var(--pnp-font);
}

.pnp-tab:hover {
    border-color: var(--pnp-gold);
    color: var(--pnp-gold);
}

.pnp-tab--active {
    background: var(--pnp-gold-glow);
    border-color: var(--pnp-gold);
    color: var(--pnp-gold);
}

.pnp-leaderboard__row--current {
    background: var(--pnp-gold-glow) !important;
}

.pnp-leaderboard__row--current td {
    color: var(--pnp-gold-light);
}

.pnp-leaderboard__you {
    font-size: 0.72rem;
    color: var(--pnp-gold);
    font-weight: 600;
    margin-left: 0.25rem;
}

.pnp-leaderboard__rank-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pnp-surface-alt);
    color: var(--pnp-text-muted);
    font-weight: 700;
    font-size: 0.8rem;
}

.pnp-leaderboard__rank-number--top {
    background: linear-gradient(135deg, var(--pnp-gold), #b08930);
    color: #0f1117;
}

.pnp-table__rank-col {
    width: 50px;
    text-align: center;
}


/* =====================================================================
   TWO-COLUMN LAYOUT
   ===================================================================== */

.pnp-dashboard__two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}


/* =====================================================================
   CREDITS SECTION
   ===================================================================== */

.pnp-credits__balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--pnp-gold-glow);
    border: 1px solid rgba(212, 168, 83, 0.25);
    border-radius: var(--pnp-radius);
    margin-bottom: 1rem;
}

.pnp-credits__label {
    font-size: 0.85rem;
    color: var(--pnp-text-muted);
    font-weight: 500;
}

.pnp-credits__amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pnp-gold);
}

.pnp-amount--positive {
    color: var(--pnp-success);
}

.pnp-amount--negative {
    color: var(--pnp-error);
}


/* =====================================================================
   PAYOUTS SECTION
   ===================================================================== */

.pnp-payouts__summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pnp-payouts__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--pnp-surface-alt);
    border-radius: var(--pnp-radius);
}

.pnp-payouts__label {
    font-size: 0.85rem;
    color: var(--pnp-text-muted);
}

.pnp-payouts__value {
    font-weight: 600;
    color: var(--pnp-text);
}

.pnp-payouts__date {
    font-size: 0.72rem;
    color: var(--pnp-text-dim);
    margin-left: 0.5rem;
}


/* =====================================================================
   PENDING / CARD STATES
   ===================================================================== */

.pnp-pending-card {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--pnp-surface);
    border: 1px solid var(--pnp-border);
    border-radius: var(--pnp-radius-lg);
    box-shadow: var(--pnp-shadow-lg);
    max-width: 640px;
    margin: 2rem auto;
    color: var(--pnp-text);
}

.pnp-pending-card p {
    color: var(--pnp-text-muted);
}

.pnp-pending-card__icon {
    color: var(--pnp-gold);
    margin-bottom: 1rem;
}

.pnp-pending-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pnp-text);
    margin: 0 0 0.75rem 0;
}

.pnp-pending-card__date {
    font-size: 0.9rem;
    color: var(--pnp-text-muted);
    margin-bottom: 1rem;
}

.pnp-pending-card__reason {
    color: var(--pnp-text-muted);
    margin-bottom: 1rem;
}

.pnp-pending-card__body {
    text-align: left;
    margin-top: 1.5rem;
}

.pnp-pending-card__body h3 {
    color: var(--pnp-gold);
    font-size: 1rem;
    margin-bottom: 0.75rem;
}


/* =====================================================================
   BENEFITS LIST & GRID
   ===================================================================== */

.pnp-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pnp-benefits-list li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1.5rem;
    color: var(--pnp-text);
    font-size: 0.9rem;
}

.pnp-benefits-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pnp-gold);
}

.pnp-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.pnp-benefits-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.pnp-benefit-card {
    padding: 1.25rem;
    background: var(--pnp-surface);
    border: 1px solid var(--pnp-border);
    border-radius: var(--pnp-radius);
    transition: border-color var(--pnp-transition);
}

.pnp-benefit-card:hover {
    border-color: var(--pnp-gold);
}

.pnp-benefit-card__icon,
.pnp-benefit-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--pnp-radius);
    background: var(--pnp-gold-glow);
    color: var(--pnp-gold);
    margin-bottom: 0.75rem;
}

.pnp-benefit-card strong {
    display: block;
    color: var(--pnp-text);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.pnp-benefit-card p {
    color: var(--pnp-text-muted);
    font-size: 0.82rem;
    margin: 0;
    line-height: 1.4;
}


/* =====================================================================
   INVITATION PAGE
   ===================================================================== */

.pnp-invitation__header {
    text-align: center;
    padding: 2rem 1rem;
    margin-bottom: 2rem;
}

.pnp-invitation__title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--pnp-gold);
    margin: 0;
    letter-spacing: -0.02em;
}

.pnp-invitation__subtitle {
    font-size: 1.1rem;
    color: var(--pnp-text-muted);
    margin-top: 0.5rem;
}

.pnp-invitation__requirements {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--pnp-surface);
    border: 1px solid var(--pnp-border);
    border-radius: var(--pnp-radius-lg);
}

.pnp-requirement {
    margin-bottom: 1.25rem;
}

.pnp-requirement:last-child {
    margin-bottom: 0;
}

.pnp-requirement__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.pnp-requirement__label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--pnp-text);
}

.pnp-requirement__status {
    font-size: 0.82rem;
    color: var(--pnp-text-muted);
    font-weight: 500;
}

.pnp-requirement__status--met {
    color: var(--pnp-success);
}

.pnp-invitation__cta {
    text-align: center;
    margin-top: 2rem;
    padding: 1.5rem;
}

.pnp-invitation__not-yet {
    color: var(--pnp-text-muted);
    font-style: italic;
}


/* =====================================================================
   APPLICATION PAGE
   ===================================================================== */

.pnp-application__hero {
    text-align: center;
    padding: 3rem 1rem 2rem;
}

.pnp-application__hero-badge {
    color: var(--pnp-gold);
    margin-bottom: 1rem;
}

.pnp-application__hero-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--pnp-gold);
    margin: 0;
    letter-spacing: -0.02em;
}

.pnp-application__hero-subtitle {
    font-size: 1.1rem;
    color: var(--pnp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.5rem;
}

.pnp-application__hero-tagline {
    font-size: 1rem;
    color: var(--pnp-text);
    font-style: italic;
    margin-top: 1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pnp-application__benefits {
    margin-bottom: 2rem;
}

.pnp-application__eligibility {
    padding: 1.5rem;
    background: var(--pnp-surface);
    border: 1px solid var(--pnp-border);
    border-radius: var(--pnp-radius-lg);
    margin-bottom: 2rem;
}

.pnp-eligibility-checks {
    margin-bottom: 1rem;
}

.pnp-eligibility-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--pnp-border);
}

.pnp-eligibility-item:last-child {
    border-bottom: none;
}

.pnp-eligibility-item__check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.pnp-eligibility-item--met .pnp-eligibility-item__check {
    color: var(--pnp-success);
}

.pnp-eligibility-item--unmet .pnp-eligibility-item__check {
    color: var(--pnp-text-dim);
}

.pnp-eligibility-item__info strong {
    color: var(--pnp-text);
    font-size: 0.9rem;
    display: block;
}

.pnp-eligibility-item__progress {
    font-size: 0.8rem;
    color: var(--pnp-text-muted);
}


/* =====================================================================
   FORM STYLES
   ===================================================================== */

.pnp-application__form-section {
    padding: 2rem;
    background: var(--pnp-surface);
    border: 1px solid var(--pnp-border);
    border-radius: var(--pnp-radius-lg);
    margin-top: 2rem;
}

.pnp-form__group {
    margin-bottom: 1.5rem;
}

.pnp-form__label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--pnp-text);
    margin-bottom: 0.5rem;
}

.pnp-form__required {
    color: var(--pnp-error);
}

.pnp-form__optional {
    color: var(--pnp-text-dim);
    font-weight: 400;
    font-size: 0.8rem;
}

.pnp-form__textarea,
.pnp-form__input {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--pnp-bg);
    border: 1px solid var(--pnp-border);
    border-radius: var(--pnp-radius);
    color: var(--pnp-text);
    font-size: 0.9rem;
    font-family: var(--pnp-font);
    transition: border-color var(--pnp-transition);
    line-height: 1.5;
}

.pnp-form__textarea:focus,
.pnp-form__input:focus {
    outline: none;
    border-color: var(--pnp-gold);
    box-shadow: 0 0 0 3px var(--pnp-gold-glow);
}

.pnp-form__textarea {
    resize: vertical;
    min-height: 120px;
}

.pnp-form__textarea::placeholder,
.pnp-form__input::placeholder {
    color: var(--pnp-text-dim);
}

.pnp-form__hint {
    display: block;
    font-size: 0.75rem;
    color: var(--pnp-text-dim);
    margin-top: 0.35rem;
}

.pnp-form__group--checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.pnp-form__checkbox-label {
    display: flex;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.87rem;
    color: var(--pnp-text);
    line-height: 1.5;
}

.pnp-form__checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--pnp-gold);
}

.pnp-form__submit {
    text-align: center;
    margin-top: 2rem;
}

.pnp-form__disclaimer {
    font-size: 0.78rem;
    color: var(--pnp-text-dim);
    margin-top: 0.75rem;
}


/* =====================================================================
   BUTTONS
   ===================================================================== */

.pnp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.5rem;
    border: none;
    border-radius: var(--pnp-radius);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--pnp-font);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--pnp-transition);
    line-height: 1.4;
}

.pnp-btn--primary {
    background: linear-gradient(135deg, var(--pnp-gold), #b08930);
    color: #0f1117;
    box-shadow: 0 2px 8px rgba(212, 168, 83, 0.3);
}

.pnp-btn--primary:hover {
    background: linear-gradient(135deg, var(--pnp-gold-light), var(--pnp-gold));
    box-shadow: 0 4px 16px rgba(212, 168, 83, 0.4);
    transform: translateY(-1px);
    color: #0f1117;
    text-decoration: none;
}

.pnp-btn--primary:active {
    transform: translateY(0);
}

.pnp-btn--secondary {
    background: var(--pnp-surface-alt);
    color: var(--pnp-text);
    border: 1px solid var(--pnp-border);
}

.pnp-btn--secondary:hover {
    border-color: var(--pnp-gold);
    color: var(--pnp-gold);
    text-decoration: none;
}

.pnp-btn--lg {
    padding: 0.85rem 2.5rem;
    font-size: 1rem;
}

.pnp-btn:disabled,
.pnp-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}


/* =====================================================================
   NOTICES
   ===================================================================== */

.pnp-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--pnp-radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.pnp-notice p {
    margin: 0;
}

.pnp-notice--success {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.25);
    color: var(--pnp-success);
}

.pnp-notice--error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: var(--pnp-error);
}

.pnp-notice--warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: var(--pnp-warning);
}


/* =====================================================================
   EMPTY STATES
   ===================================================================== */

.pnp-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--pnp-text-dim);
}

.pnp-empty-state p {
    margin: 0;
    font-size: 0.9rem;
}


/* =====================================================================
   INLINE CREDIT BALANCE
   ===================================================================== */

.pnp-inline-credit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.pnp-inline-credit__label {
    color: var(--pnp-text-muted);
    font-weight: 500;
}

.pnp-inline-credit__amount {
    color: var(--pnp-gold);
    font-weight: 700;
}


/* =====================================================================
   TOAST NOTIFICATIONS
   ===================================================================== */

.pnp-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.pnp-toast {
    pointer-events: all;
    padding: 0.75rem 1.25rem;
    border-radius: var(--pnp-radius);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--pnp-font);
    color: var(--pnp-text);
    box-shadow: var(--pnp-shadow-lg);
    animation: pnp-toast-in 0.3s ease forwards;
    max-width: 360px;
}

.pnp-toast--success {
    background: var(--pnp-surface);
    border-left: 4px solid var(--pnp-success);
}

.pnp-toast--error {
    background: var(--pnp-surface);
    border-left: 4px solid var(--pnp-error);
}

.pnp-toast--info {
    background: var(--pnp-surface);
    border-left: 4px solid var(--pnp-gold);
}

.pnp-toast--out {
    animation: pnp-toast-out 0.3s ease forwards;
}

@keyframes pnp-toast-in {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pnp-toast-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(30px);
    }
}


/* =====================================================================
   LOADING SPINNER
   ===================================================================== */

.pnp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.pnp-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--pnp-border);
    border-top-color: var(--pnp-gold);
    border-radius: 50%;
    animation: pnp-spin 0.8s linear infinite;
}

@keyframes pnp-spin {
    to { transform: rotate(360deg); }
}


/* =====================================================================
   RESPONSIVE — TABLET
   ===================================================================== */

@media (max-width: 960px) {
    .pnp-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pnp-dashboard__two-col {
        grid-template-columns: 1fr;
    }

    .pnp-benefits-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =====================================================================
   RESPONSIVE — MOBILE
   ===================================================================== */

@media (max-width: 640px) {
    .pnp-dashboard,
    .pnp-application,
    .pnp-leaderboard-page {
        padding: 1rem 0.75rem;
    }

    .pnp-kpi-grid {
        grid-template-columns: 1fr;
    }

    .pnp-kpi-card {
        padding: 1rem;
    }

    .pnp-kpi-card__value {
        font-size: 1.25rem;
    }

    .pnp-dashboard__header {
        padding: 1.25rem;
    }

    .pnp-dashboard__greeting {
        font-size: 1.3rem;
    }

    .pnp-dashboard__section {
        padding: 1rem;
    }

    .pnp-benefits-grid,
    .pnp-benefits-grid--3col {
        grid-template-columns: 1fr;
    }

    .pnp-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        /* Fade hint for scrollable tables */
        mask-image: linear-gradient(to right, transparent 0, black 0.75rem, black calc(100% - 0.75rem), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, black 0.75rem, black calc(100% - 0.75rem), transparent 100%);
    }

    .pnp-table {
        font-size: 0.8rem;
        min-width: 480px;
    }

    .pnp-table thead th,
    .pnp-table tbody td {
        padding: 0.5rem 0.6rem;
        white-space: nowrap;
    }

    .pnp-tier-progress__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .pnp-leaderboard-page__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pnp-application__hero-title {
        font-size: 1.5rem;
    }

    .pnp-pending-card {
        padding: 2rem 1.25rem;
    }

    .pnp-application__form-section {
        padding: 1.25rem;
    }

    .pnp-invitation__header {
        padding: 1rem 0.5rem;
    }

    .pnp-invitation__title {
        font-size: 1.5rem;
    }

    .pnp-milestone__info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .pnp-leaderboard__item {
        padding: 0.5rem 0.75rem;
    }

    .pnp-payouts__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}


/* =====================================================================
   DASHBOARD UTILITY CLASSES (extracted from inline styles)
   ===================================================================== */

/* ── Auth / Empty State ── */

.pnp-auth-gate {
    text-align: center;
    padding: 60px 20px;
}

.pnp-auth-gate p {
    color: #9898a8;
    font-size: 1rem;
}

.pnp-auth-gate .pnp-btn-login {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #d4a017, #a67612);
    color: #0a0a0f;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

/* ── Flex Utilities ── */

.pnp-flex {
    display: flex;
}

.pnp-flex-center {
    display: flex;
    align-items: center;
}

.pnp-flex-between {
    display: flex;
    justify-content: space-between;
}

.pnp-flex-wrap {
    flex-wrap: wrap;
}

.pnp-gap-4  { gap: 4px; }
.pnp-gap-6  { gap: 6px; }
.pnp-gap-8  { gap: 8px; }
.pnp-gap-10 { gap: 10px; }
.pnp-gap-14 { gap: 14px; }
.pnp-gap-20 { gap: 20px; }

/* ── Alert / Info Boxes ── */

.pnp-alert {
    padding: 14px 18px;
    border-radius: var(--radius-md, 8px);
    border-left: 3px solid;
    margin-top: 18px;
}

.pnp-alert--sm {
    padding: 12px 18px;
    margin-top: 10px;
}

.pnp-alert--success {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08), rgba(232, 179, 43, 0.04));
    border-color: var(--success, #34d399);
    border-left-color: var(--success, #34d399);
}

.pnp-alert--gold {
    background: linear-gradient(135deg, rgba(232, 179, 43, 0.08), rgba(232, 179, 43, 0.03));
    border-color: rgba(232, 179, 43, 0.25);
    border-left-color: var(--gold-300, #e8c97a);
}

.pnp-alert--muted {
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--border-subtle, #2a2e3f);
    border-left-color: var(--text-muted, #8b8fa3);
}

.pnp-alert--warning {
    background: rgba(255, 122, 0, 0.06);
    border-color: rgba(255, 122, 0, 0.2);
    border-left-color: var(--warning, #f59e0b);
}

.pnp-alert--danger {
    background: rgba(248, 113, 113, 0.06);
    border-color: rgba(248, 113, 113, 0.2);
    border-left-color: var(--danger, #ef4444);
}

.pnp-alert__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.pnp-alert__body {
    font-size: 0.78rem;
    color: var(--text-secondary, #9fa3b8);
    line-height: 1.6;
}

.pnp-alert__body--sm {
    font-size: 0.72rem;
}

/* ── Text Utilities ── */

.pnp-text-xs     { font-size: 0.72rem; }
.pnp-text-sm     { font-size: 0.78rem; }
.pnp-text-base   { font-size: 0.85rem; }
.pnp-text-md     { font-size: 1rem; }
.pnp-text-lg     { font-size: 1.1rem; }
.pnp-text-xl     { font-size: 1.5rem; }

.pnp-font-bold   { font-weight: 700; }
.pnp-font-heavy  { font-weight: 800; }

.pnp-text-muted     { color: var(--text-muted, #8b8fa3); }
.pnp-text-secondary { color: var(--text-secondary, #9fa3b8); }
.pnp-text-primary   { color: var(--text-primary, #e4e6ef); }
.pnp-text-gold      { color: var(--text-gold, #e8c97a); }
.pnp-text-success   { color: var(--success, #34d399); }
.pnp-text-warning   { color: var(--warning, #f59e0b); }
.pnp-text-danger    { color: var(--danger, #ef4444); }

.pnp-text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pnp-lh-16 { line-height: 1.6; }

/* ── Badge Overlay (positioned above tier icons) ── */

.pnp-badge-overlay {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 0.48rem;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 8px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.pnp-badge-overlay--success {
    background: var(--success, #34d399);
}

.pnp-badge-overlay--tier {
    top: -8px;
    font-size: 0.55rem;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    color: #000;
}

/* ── Progress Bar ── */

.pnp-progress-track {
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
}

.pnp-progress-fill {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--gold-400, #d4a853), var(--gold-200, #e8c97a));
    transition: width 1s ease;
}

.pnp-progress-fill--success {
    background: linear-gradient(90deg, var(--success, #34d399), #6ee7b7);
}

/* ── Section Card (gold bordered) ── */

.pnp-section-gold {
    background: linear-gradient(135deg, rgba(232, 179, 43, 0.08), rgba(232, 179, 43, 0.02));
    border: 1px solid var(--border-gold, rgba(232, 179, 43, 0.25));
    border-radius: var(--radius-lg, 12px);
    padding: 24px;
    margin-bottom: 36px;
}

/* ── Icon Container ── */

.pnp-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.pnp-icon-box--gold {
    background: linear-gradient(135deg, var(--gold-400, #d4a853), var(--gold-700, #a67c1a));
}

/* ── Spacing Utilities ── */

.pnp-mt-6  { margin-top: 6px; }
.pnp-mt-10 { margin-top: 10px; }
.pnp-mt-18 { margin-top: 18px; }
.pnp-mt-20 { margin-top: 20px; }
.pnp-mb-4  { margin-bottom: 4px; }
.pnp-mb-6  { margin-bottom: 6px; }
.pnp-mb-8  { margin-bottom: 8px; }
.pnp-mb-20 { margin-bottom: 20px; }


/* =====================================================================
   SLICEWP / AFFILIATE PAGE DARK-THEME OVERRIDES
   Ensures all text on dark-background affiliate pages is visible.
   ===================================================================== */

.slicewp-form-register,
.slicewp-form-login,
.slicewp-affiliate-account,
.slicewp-section {
    color: var(--pnp-text, #e4e6ef);
}

.slicewp-form-register h1,
.slicewp-form-register h2,
.slicewp-form-register h3,
.slicewp-form-register h4,
.slicewp-form-login h1,
.slicewp-form-login h2,
.slicewp-affiliate-account h1,
.slicewp-affiliate-account h2,
.slicewp-affiliate-account h3 {
    color: var(--pnp-text, #e4e6ef);
}

.slicewp-form-register label,
.slicewp-form-login label,
.slicewp-affiliate-account label,
.slicewp-form-register p,
.slicewp-form-login p,
.slicewp-affiliate-account p {
    color: var(--pnp-text-muted, #9fa3b8);
}

/*
 * Force light text on dark-background Elementor sections that contain SliceWP forms.
 * The .pnp-dark-page class can be added to the body via WPCode or Elementor page settings
 * for targeted override; the descendant selectors below also catch common patterns.
 */
body.pnp-dark-page h1,
body.pnp-dark-page h2,
body.pnp-dark-page h3,
body.pnp-dark-page h4,
body.pnp-dark-page p,
body.pnp-dark-page label,
body.pnp-dark-page li {
    color: var(--pnp-text, #e4e6ef);
}

/* Elementor headings/text inside sections with a dark background that contain SliceWP forms */
.elementor-section:has(.slicewp-form-register) .elementor-heading-title,
.elementor-section:has(.slicewp-form-login) .elementor-heading-title,
.elementor-section:has(.slicewp-affiliate-account) .elementor-heading-title,
.e-con:has(.slicewp-form-register) .elementor-heading-title,
.e-con:has(.slicewp-form-login) .elementor-heading-title,
.e-con:has(.slicewp-affiliate-account) .elementor-heading-title {
    color: var(--pnp-text, #e4e6ef);
}

.elementor-section:has(.slicewp-form-register) .elementor-widget-text-editor,
.e-con:has(.slicewp-form-register) .elementor-widget-text-editor,
.elementor-section:has(.slicewp-affiliate-account) .elementor-widget-text-editor,
.e-con:has(.slicewp-affiliate-account) .elementor-widget-text-editor {
    color: var(--pnp-text-muted, #9fa3b8);
}

/* SliceWP form field inputs on dark backgrounds */
.slicewp-form-register input[type="text"],
.slicewp-form-register input[type="email"],
.slicewp-form-register input[type="url"],
.slicewp-form-register input[type="password"],
.slicewp-form-register textarea,
.slicewp-form-register select,
.slicewp-form-login input[type="text"],
.slicewp-form-login input[type="password"] {
    background: var(--pnp-surface, #1a1d27);
    color: var(--pnp-text, #e4e6ef);
    border: 1px solid var(--pnp-border, #2a2e3f);
    border-radius: var(--pnp-radius, 8px);
    padding: 10px 14px;
}

.slicewp-form-register input::placeholder,
.slicewp-form-login input::placeholder {
    color: var(--pnp-text-dim, #7a7e93);
}

/* SliceWP submit button */
.slicewp-form-register .slicewp-submit,
.slicewp-form-login .slicewp-submit {
    background: linear-gradient(135deg, var(--pnp-gold, #d4a853), #b08930);
    color: #0f1117;
    border: none;
    border-radius: var(--pnp-radius, 8px);
    padding: 12px 28px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--pnp-transition, 0.25s);
}

.slicewp-form-register .slicewp-submit:hover,
.slicewp-form-login .slicewp-submit:hover {
    background: linear-gradient(135deg, var(--pnp-gold-light, #e8c97a), var(--pnp-gold, #d4a853));
    box-shadow: 0 4px 16px rgba(212, 168, 83, 0.4);
}

/* SliceWP account navigation tabs */
.slicewp-affiliate-account .slicewp-account-navigation a {
    color: var(--pnp-text-muted, #9fa3b8);
}

.slicewp-affiliate-account .slicewp-account-navigation a.active,
.slicewp-affiliate-account .slicewp-account-navigation a:hover {
    color: var(--pnp-gold, #d4a853);
}

/* SliceWP tables */
.slicewp-affiliate-account table th {
    color: var(--pnp-text-muted, #9fa3b8);
    border-bottom: 1px solid var(--pnp-border, #2a2e3f);
}

.slicewp-affiliate-account table td {
    color: var(--pnp-text, #e4e6ef);
    border-bottom: 1px solid var(--pnp-border, #2a2e3f);
}

/* Pending/not-affiliate card text */
.pnp-pending-card {
    color: var(--pnp-text, #e4e6ef);
}

.pnp-pending-card p {
    color: var(--pnp-text-muted, #9fa3b8);
}


/* =====================================================================
   PRINT STYLES
   ===================================================================== */

@media print {
    .pnp-dashboard,
    .pnp-application,
    .pnp-leaderboard-page {
        color: #000;
        background: #fff;
    }

    .pnp-btn,
    .pnp-leaderboard-tabs,
    .pnp-toast-container {
        display: none !important;
    }
}