/* TE Account — My Account panel
   Matches the Timeless Echoes dark aesthetic
   ------------------------------------------------------------------ */

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  --tea-bg:       #0f1311;
  --tea-surface:  #151b18;
  --tea-card:     #1b2320;
  --tea-border:   #2b332e;
  --tea-text:     #d8ded9;
  --tea-muted:    #6b7d72;
  --tea-accent:   #42c07d;
  --tea-accent-h: #38a86c;
  --tea-warn:     #f0b429;
  --tea-danger:   #e05555;
  --tea-radius:   8px;
  --tea-radius-sm:4px;
}

/* ── Wrapper ─────────────────────────────────────────────────────── */
.te-account {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  color: var(--tea-text);
  max-width: 860px;
  margin: 0 auto;
  padding: 0 0 60px;
}

/* ── Guest ───────────────────────────────────────────────────────── */
.te-account--guest .te-guest-box {
  background: var(--tea-card);
  border: 1px solid var(--tea-border);
  border-radius: var(--tea-radius);
  padding: 48px 32px;
  text-align: center;
  max-width: 420px;
  margin: 60px auto;
}
.te-guest-icon { font-size: 40px; margin-bottom: 16px; }
.te-account--guest h2 { margin: 0 0 12px; color: var(--tea-text); }
.te-account--guest p  { color: var(--tea-muted); margin: 0 0 28px; }
.te-guest-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Header ──────────────────────────────────────────────────────── */
.te-account__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: var(--tea-card);
  border: 1px solid var(--tea-border);
  border-radius: var(--tea-radius);
  margin-bottom: 4px;
}
.te-account__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--tea-border);
  flex-shrink: 0;
}
.te-account__meta { flex: 1; min-width: 0; }
.te-account__name {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--tea-text);
  line-height: 1.2;
}
.te-account__email {
  display: block;
  font-size: 13px;
  color: var(--tea-muted);
  margin-bottom: 8px;
}

/* Credit pill in header */
.te-account__credit-pill {
  text-align: center;
  flex-shrink: 0;
}
.te-credit-pill__num {
  display: block;
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tea-accent);
  line-height: 1;
}
.te-credit-pill__lbl {
  font-size: 11px;
  color: var(--tea-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Role badges ─────────────────────────────────────────────────── */
.te-role-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.te-role-badge--admin      { background: rgba(66,192,125,.15); color: var(--tea-accent); border: 1px solid rgba(66,192,125,.3); }
.te-role-badge--family     { background: rgba(240,180,41,.12); color: var(--tea-warn);   border: 1px solid rgba(240,180,41,.3); }
.te-role-badge--friend     { background: rgba(155,89,182,.15); color: #c084fc;           border: 1px solid rgba(155,89,182,.3); }
.te-role-badge--subscriber { background: rgba(77,144,254,.12); color: #74a4fa;           border: 1px solid rgba(77,144,254,.3); }

/* ── Tab nav ─────────────────────────────────────────────────────── */
.te-account__nav {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--tea-border);
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.te-account__nav::-webkit-scrollbar { display: none; }

.te-tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 14px 20px 13px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tea-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.te-tab-btn:hover { color: var(--tea-text); }
.te-tab-btn.active {
  color: var(--tea-accent);
  border-bottom-color: var(--tea-accent);
}
.te-tab-badge {
  background: var(--tea-accent);
  color: #0f1311;
  font-size: 10px;
  font-weight: 700;
  border-radius: 100px;
  padding: 1px 5px;
  min-width: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Panels ──────────────────────────────────────────────────────── */
.te-panel { display: none; }
.te-panel.active { display: block; }

/* ── Cards ───────────────────────────────────────────────────────── */
.te-card {
  background: var(--tea-card);
  border: 1px solid var(--tea-border);
  border-radius: var(--tea-radius);
  padding: 24px;
  margin-bottom: 16px;
}
.te-card__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tea-border);
  color: var(--tea-text);
}

/* ── Profile tab ─────────────────────────────────────────────────── */
.te-profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--tea-border);
}
.te-profile__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--tea-border);
  flex-wrap: wrap;
}
.te-profile__row:last-child { border-bottom: none; }
.te-profile__key {
  width: 130px;
  font-size: 13px;
  color: var(--tea-muted);
  flex-shrink: 0;
}
.te-profile__val { color: var(--tea-text); }

/* ── Fields & forms ──────────────────────────────────────────────── */
.te-field { margin-bottom: 16px; }
.te-label {
  display: block;
  font-size: 13px;
  color: var(--tea-muted);
  margin-bottom: 6px;
}
.te-input {
  width: 100%;
  max-width: 340px;
  background: var(--tea-surface);
  border: 1px solid var(--tea-border);
  border-radius: var(--tea-radius-sm);
  padding: 9px 12px;
  color: var(--tea-text);
  font-size: 14px;
  transition: border-color .15s;
  box-sizing: border-box;
}
.te-input:focus {
  outline: none;
  border-color: var(--tea-accent);
}
.te-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.te-field-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.te-field-row .te-input { max-width: 220px; }
.te-form-msg {
  font-size: 13px;
  color: var(--tea-muted);
}
.te-form-msg.success { color: var(--tea-accent); }
.te-form-msg.error   { color: var(--tea-danger); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.te-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  background: var(--tea-accent);
  color: #0f1311 !important;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--tea-radius-sm);
  cursor: pointer;
  text-decoration: none !important;
  transition: background .15s;
  white-space: nowrap;
}
.te-btn:hover,
.te-btn:focus,
.te-btn:visited { color: #0f1311 !important; text-decoration: none !important; }
.te-btn:hover { background: var(--tea-accent-h); }
.te-btn--ghost {
  background: transparent;
  color: var(--tea-text) !important;
  border: 1px solid var(--tea-border);
}
.te-btn--ghost:hover { background: var(--tea-surface); color: var(--tea-text) !important; }
.te-btn--sm  { padding: 6px 14px; font-size: 13px; }
.te-btn--xs  { padding: 3px 10px; font-size: 12px; }
.te-btn--accent { background: var(--tea-accent); }

/* ── Credits tab ─────────────────────────────────────────────────── */
.te-balance-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--tea-card);
  border: 1px solid var(--tea-border);
  border-radius: var(--tea-radius);
  padding: 28px 32px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 20px;
}
.te-balance-card__num {
  font-size: 56px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--tea-accent);
  line-height: 1;
}
.te-balance-card__label {
  font-size: 13px;
  color: var(--tea-muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Tables ──────────────────────────────────────────────────────── */
.te-section-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tea-muted);
  margin: 0 0 12px;
}
.te-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--tea-border);
  border-radius: var(--tea-radius);
}
.te-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.te-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tea-muted);
  padding: 10px 16px;
  background: var(--tea-surface);
  border-bottom: 1px solid var(--tea-border);
  white-space: nowrap;
}
.te-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--tea-border);
  color: var(--tea-text);
}
.te-table tr:last-child td { border-bottom: none; }
.te-table a { color: var(--tea-accent); text-decoration: none; }
.te-table a:hover { text-decoration: underline; }

.te-muted  { color: var(--tea-muted); }
.te-nowrap { white-space: nowrap; }
.te-num    { text-align: right; font-variant-numeric: tabular-nums; }
.te-pos    { color: var(--tea-accent); font-weight: 600; }
.te-neg    { color: var(--tea-danger); font-weight: 600; }

/* ── Status badges ───────────────────────────────────────────────── */
.te-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
}
.te-status--completed { background: rgba(66,192,125,.15); color: var(--tea-accent); }
.te-status--pending   { background: rgba(240,180,41,.12); color: var(--tea-warn); }
.te-status--failed    { background: rgba(224,85,85,.12);  color: var(--tea-danger); }

/* ── Empty state ─────────────────────────────────────────────────── */
.te-empty {
  color: var(--tea-muted);
  padding: 32px;
  text-align: center;
  background: var(--tea-card);
  border: 1px solid var(--tea-border);
  border-radius: var(--tea-radius);
}
.te-empty a { color: var(--tea-accent); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .te-account__header { flex-wrap: wrap; }
  .te-account__credit-pill { order: -1; margin-left: auto; }
  .te-balance-card { padding: 20px; }
  .te-balance-card__num { font-size: 40px; }
  .te-card { padding: 16px; }
  .te-tab-btn { padding: 12px 14px; font-size: 13px; }
  .te-profile__key { width: 100px; font-size: 12px; }
}

/* ── WP admin role badge shim (used in both admin + frontend) ─────── */
.te-role-badge { line-height: 1.4; }

/* ── Header right (bell + credit pill) ──────────────────────────── */
.te-account__header-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Notification bell ───────────────────────────────────────────── */
.te-notif-bell { position: relative; }
.te-notif-bell__btn {
  background: none;
  border: 1px solid var(--tea-border);
  border-radius: var(--tea-radius-sm);
  color: var(--tea-muted);
  cursor: pointer;
  padding: 6px 8px;
  position: relative;
  display: flex;
  align-items: center;
  transition: color .15s, border-color .15s;
}
.te-notif-bell__btn:hover { color: var(--tea-text); border-color: var(--tea-accent); }
.te-notif-bell__badge {
  position: absolute;
  top: -5px; right: -5px;
  background: var(--tea-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 100px;
  padding: 1px 4px;
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
}
.te-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--tea-card);
  border: 1px solid var(--tea-border);
  border-radius: var(--tea-radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  z-index: 1000;
  overflow: hidden;
}
.te-notif-panel[hidden] { display: none; }
.te-notif-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tea-border);
}
.te-notif-panel__title { font-size: 13px; font-weight: 600; color: var(--tea-text); }
.te-notif-read-all {
  background: none; border: none; color: var(--tea-accent);
  font-size: 12px; cursor: pointer; padding: 0;
}
.te-notif-read-all:hover { text-decoration: underline; }
.te-notif-panel__list { max-height: 380px; overflow-y: auto; }
.te-notif-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--tea-border);
  cursor: pointer;
  transition: background .12s;
}
.te-notif-item:last-child { border-bottom: none; }
.te-notif-item:hover { background: var(--tea-surface); }
.te-notif-item--unread { border-left: 3px solid var(--tea-accent); }
.te-notif-item--unread .te-notif-item__title { color: var(--tea-accent); }
.te-notif-item__title { font-size: 13px; font-weight: 600; color: var(--tea-text); margin-bottom: 3px; }
.te-notif-item__msg   { font-size: 12px; color: var(--tea-muted); line-height: 1.4; }
.te-notif-item__date  { font-size: 11px; color: var(--tea-muted); margin-top: 4px; }
.te-notif-empty { padding: 24px; text-align: center; color: var(--tea-muted); font-size: 13px; margin: 0; }

/* ── Membership tier grid ────────────────────────────────────────── */
.te-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.te-tier {
  background: var(--tea-surface);
  border: 1px solid var(--tea-border);
  border-radius: var(--tea-radius);
  padding: 16px;
  position: relative;
}
.te-tier--active {
  border-color: var(--tea-accent);
  background: rgba(66,192,125,.05);
}
.te-tier--past { opacity: .55; }
.te-tier__current-label {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tea-accent);
  letter-spacing: .06em;
}
.te-tier__desc   { font-size: 12px; color: var(--tea-muted); margin: 10px 0 6px; line-height: 1.4; }
.te-tier__credits { font-size: 12px; color: var(--tea-muted); margin: 0; }

/* ── Content gate ────────────────────────────────────────────────── */
.te-gate {
  background: var(--tea-card);
  border: 1px solid var(--tea-border);
  border-radius: var(--tea-radius);
  padding: 40px 32px;
  text-align: center;
  margin: 24px 0;
}
.te-gate__icon  { font-size: 36px; margin-bottom: 12px; }
.te-gate__title { font-size: 20px; font-weight: 600; color: var(--tea-text); margin: 0 0 10px; }
.te-gate__desc  { color: var(--tea-muted); margin: 0 0 24px; }
.te-gate__teaser { color: var(--tea-muted); font-style: italic; border-left: 3px solid var(--tea-border); padding-left: 16px; margin-bottom: 0; }
.te-gate__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Coupon form (Credits tab) ───────────────────────────────────── */
.te-coupon-form { display: flex; flex-direction: column; gap: 8px; }
.te-coupon-form .te-input { text-transform: uppercase; letter-spacing: .08em; }

/* ── Membership request status ───────────────────────────────────── */
.te-req-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
}
.te-req-status__icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1.4;
}
.te-req-status--pending {
  background: rgba(240,180,41,.08);
  border-color: rgba(240,180,41,.3);
}
.te-req-status--top {
  background: rgba(66,192,125,.06);
  border-color: rgba(66,192,125,.25);
}
.te-req-status--top .te-req-status__icon { color: var(--tea-accent); }

@media (max-width: 600px) {
  .te-notif-panel { width: calc(100vw - 32px); right: -8px; }
  .te-tier-grid   { grid-template-columns: 1fr; }
  .te-gate        { padding: 28px 20px; }
}