/* ============================================================
   member-portal.css — GymBI by Statvo
   PURPOSE: Styles for the member self-serve portal — welcome
   header, membership status card, detail boxes, and stats.
   ============================================================ */

/* ------------------------------------------------------------
   PORTAL WRAPPER
   Centered, max-width content — feels like a personal dashboard
   rather than the dense admin interface.
   ------------------------------------------------------------ */
.member-portal-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--sp-4) 0;
}

/* ------------------------------------------------------------
   WELCOME HEADER
   Avatar + greeting, sits at the top of the portal.
   ------------------------------------------------------------ */
.mp-welcome {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

/* ------------------------------------------------------------
   MEMBERSHIP CARD
   The hero card showing status, plan, dates.
   ------------------------------------------------------------ */
.mp-membership-card {
  border-width: 1.5px;
}

/* Small detail boxes inside the membership card (Started / Expires) */
.mp-detail-box {
  background: var(--glass-1);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
}

.mp-detail-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: 2px;
}

.mp-detail-value {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

/* Days remaining banner */
.mp-days-left {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  text-align: center;
  background: var(--accent-dim);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
}

/* Urgent variant — under 7 days */
.mp-days-urgent {
  background: rgba(255, 179, 71, 0.12);
  color: var(--warning);
}

/* Renewal notice for expired members */
.mp-renew-notice {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.25);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--danger);
  text-align: center;
}

/* ------------------------------------------------------------
   RESPONSIVE
   Mobile: stack the welcome header items, tighten padding.
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .mp-welcome {
    gap: var(--sp-3);
  }
  .mp-welcome .avatar-xl {
    width: 56px;
    height: 56px;
  }
}