/*
 * The members' account page.
 *
 * Two things are styled here: MemberPress's own markup, which this plugin does
 * not control and can only reach by class name, and the blocks this plugin adds
 * on the home tab.
 *
 * No hex values: colours come from tokens.css.
 */

.bp-account-page .bp-container { max-width: 1280px; }

/*
 * Ordinary pages hold their text to a reading measure of about 68 characters.
 * That is right for prose and wrong for this page, where it squeezed a
 * seven-tab row and a grid of course cards into a 646px column. Undone for the
 * account page only.
 */
.bp-account-page .bp-container > * { max-width: none; }

/*
 * Courses and Logout are hidden, as they are on the sister site: Courses
 * repeats a link that is already in the site menu, and Logout is already in the
 * header. Both are hidden twice over -- the link for browsers without :has(),
 * and the item itself for those with it. Hiding only the link is what leaves
 * the sister site with two 10px gaps in its tab row.
 */
#mepr-account-courses,
#mepr-account-logout { display: none; }

.mepr-nav-item:has( #mepr-account-courses ),
.mepr-nav-item:has( #mepr-account-logout ) { display: none; }

/* ── The tab row ───────────────────────────────────────────────────────── */

.bp-account-page .mepr-account-nav,
.bp-account-page #mepr-account-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 40px;
  padding: 0;
  background: none;
  border: 0;
}

.bp-account-page .mepr-nav-item {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.bp-account-page .mepr-nav-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 92px;
  padding: 13px 16px;
  border: 1px solid var(--bp-hair);
  border-radius: var(--bp-radius-btn);
  background: var(--bp-page);
  font-family: var(--bp-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bp-muted);
  text-decoration: none;
  text-align: center;
}

.bp-account-page .mepr-nav-item a:hover { color: var(--bp-ink); }

/* MemberPress marks the open tab on the item, not the link. */
.bp-account-page .mepr-nav-item.mepr-active-nav-tab a,
.bp-account-page .mepr-nav-item a.mepr-active-nav-tab {
  border-color: var(--bp-ink);
  color: var(--bp-ink);
}

.bp-nav-icon {
  width: 19px;
  height: 19px;
  display: block;
}

/* ── Home blocks ───────────────────────────────────────────────────────── */

.bp-account-block { margin: 0 0 52px; }

.bp-account-title {
  font-family: var(--bp-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--bp-ink);
  margin: 0 0 6px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--bp-gold);
  display: inline-block;
}

.bp-account-count { color: var(--bp-muted); font-weight: 400; }

.bp-account-empty,
.bp-account-more {
  font-size: 15px;
  line-height: 1.65;
  color: var(--bp-muted);
  margin: 16px 0 0;
}
.bp-account-more { text-align: center; }
.bp-account-empty a,
.bp-account-more a { color: var(--bp-gold-deep); }

.bp-greeting { text-align: center; margin-bottom: 44px; }

.bp-greeting-heading {
  font-family: var(--bp-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.15;
  color: var(--bp-ink);
  margin: 0;
}

.bp-greeting-text {
  font-size: 16px;
  color: var(--bp-muted);
  margin: 10px 0 0;
}

.bp-membership-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
}

.bp-tier-badge {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--bp-band);
  border: 1px solid var(--bp-hair);
  color: var(--bp-ink);
}
.bp-tier-student { background: var(--bp-gold-tint); border-color: var(--bp-gold-deep); }

.bp-upgrade {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--bp-muted);
}

/* Hover reveals the two billing periods. It is also opened by keyboard focus
   landing inside it, so this is not a mouse-only control. */
.bp-upgrade-option { position: relative; }

.bp-upgrade-name {
  display: inline-block;
  font-weight: 700;
  padding: 7px 14px;
  border: 1px solid var(--bp-gold-deep);
  border-radius: 999px;
  color: var(--bp-gold-deep);
  cursor: pointer;
}

.bp-upgrade-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  min-width: 118px;
  padding: 6px;
  background: var(--bp-page);
  border: 1px solid var(--bp-hair);
  border-radius: var(--bp-radius-btn);
  box-shadow: 0 8px 22px var(--bp-overlay);
  z-index: 5;
}

.bp-upgrade-option:hover .bp-upgrade-menu,
.bp-upgrade-option:focus-within .bp-upgrade-menu { display: flex; }

.bp-upgrade-menu a {
  padding: 7px 10px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--bp-ink);
  text-decoration: none;
}
.bp-upgrade-menu a:hover { background: var(--bp-band); }

/* ── Latest additions ──────────────────────────────────────────────────── */

.bp-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 24px;
  margin: 26px 0 0;
  text-align: center;
}

.bp-timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--bp-hair);
  position: relative;
}

/* The dot that makes a row of dates read as one timeline. */
.bp-timeline-item::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--bp-page);
  border: 3px solid var(--bp-gold-deep);
}

.bp-timeline-date {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--bp-muted);
}

.bp-timeline-title {
  font-family: var(--bp-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--bp-ink);
  text-decoration: none;
}
.bp-timeline-title:hover { color: var(--bp-gold-deep); }

.bp-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--bp-gold-tint);
  color: var(--bp-gold-deep);
  text-decoration: none;
}

/* ── Course cards ──────────────────────────────────────────────────────── */

.bp-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
  margin: 26px 0 0;
}

.bp-course-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bp-page);
  border: 1px solid var(--bp-hair);
  border-radius: var(--bp-radius);
  text-decoration: none;
  color: inherit;
}
.bp-course-card:hover { border-color: var(--bp-gold-deep); }

.bp-course-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--bp-band);
}
.bp-course-thumb--blank { aspect-ratio: 16 / 10; }

.bp-course-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--bp-gold);
  color: var(--bp-dark);
}

.bp-course-body {
  display: block;
  padding: 16px 16px 18px;
}

.bp-course-title {
  display: block;
  font-family: var(--bp-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--bp-ink);
}

.bp-progress {
  display: block;
  height: 6px;
  margin: 12px 0 7px;
  border-radius: 999px;
  background: var(--bp-hair);
  overflow: hidden;
}

.bp-progress-bar {
  display: block;
  height: 100%;
  background: var(--bp-gold-deep);
}
.bp-progress-bar.is-complete { background: var(--bp-success-fg); }

.bp-progress-text {
  display: block;
  font-size: 12.5px;
  color: var(--bp-muted);
}

/* ── Lesson list, orders, downloads ────────────────────────────────────── */

.bp-lesson-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.bp-lesson-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 0;
  border-bottom: 1px solid var(--bp-hair);
  font-size: 15px;
}
.bp-lesson-list a { color: var(--bp-ink); text-decoration: none; font-weight: 600; }
.bp-lesson-list a:hover { color: var(--bp-gold-deep); }
.bp-lesson-date { font-size: 12.5px; color: var(--bp-muted); min-width: 92px; }

/* A table narrower than its content must scroll inside its own box, or it
   pushes the whole page sideways on a phone. */
.bp-table-scroll { overflow-x: auto; margin: 24px 0 0; }

.bp-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.bp-orders-table th,
.bp-orders-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--bp-hair);
  white-space: nowrap;
}
.bp-orders-table th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-muted);
}
.bp-orders-table a { color: var(--bp-gold-deep); }

.bp-account-btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 15px;
  border-radius: var(--bp-radius-btn);
  background: var(--bp-gold);
  color: var(--bp-dark);
  text-decoration: none;
  white-space: nowrap;
}

.bp-downloads { margin: 24px 0 0; }

.bp-download {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px solid var(--bp-hair);
}

.bp-download-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--bp-hair);
  flex: none;
}

.bp-download-body { flex: 1 1 200px; }
.bp-download-body strong { display: block; color: var(--bp-ink); }

.bp-download-meta {
  display: block;
  font-size: 12.5px;
  color: var(--bp-muted);
  margin-top: 3px;
}

.bp-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 22px 0 0;
}

.bp-page {
  min-width: 34px;
  padding: 7px 10px;
  border: 1px solid var(--bp-hair);
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  color: var(--bp-ink);
  text-decoration: none;
}
.bp-page.is-current { background: var(--bp-ink); border-color: var(--bp-ink); color: var(--bp-page); }

/* ── MemberPress's own forms ───────────────────────────────────────────── */

.bp-account-page .mp-form-row,
.bp-account-page .mepr-form-row { margin: 0 0 16px; }

.bp-account-page input[type="text"],
.bp-account-page input[type="email"],
.bp-account-page input[type="password"],
.bp-account-page select {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--bp-body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--bp-hair);
  border-radius: var(--bp-radius-btn);
  background: var(--bp-page);
  color: var(--bp-ink);
}

.bp-account-page input[type="submit"],
.bp-account-page .mepr-submit,
.bp-account-page button[type="submit"] {
  font-family: var(--bp-body);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 26px;
  border: 0;
  border-radius: var(--bp-radius-btn);
  background: var(--bp-gold);
  color: var(--bp-dark);
  cursor: pointer;
}

.bp-account-page table { max-width: 100%; }

@media (max-width: 640px) {
  .bp-greeting-heading { font-size: 26px; }
  .bp-account-title { font-size: 20px; }
  .bp-account-page .mepr-nav-item a { min-width: 80px; padding: 11px 12px; font-size: 11.5px; }
}