/* ============================================================
   MSQA Profile Page — Styling
   Scoped to .msqa-profile-page-wrap so it won't leak into the
   rest of the site.

   Palette, spacing units, radii, easing, and type stack are
   pulled directly from header.php's design tokens (--bg-base,
   --accent, --surface-glass, etc.) so this page matches the
   header/sidebar/panels exactly in both dark and light mode.
   ============================================================ */

.msqa-profile-page-wrap {
  /* ── Backgrounds ── */
  --msqa-bg:            #07080d;
  --msqa-surface:       #0f111b;
  --msqa-surface-2:     #161a2e;
  --msqa-surface-3:     #1a1f35;
  --msqa-glass:         rgba(15, 17, 27, 0.82);
  --msqa-glass-dark:    rgba(7, 8, 13, 0.9);

  /* ── Borders ── */
  --msqa-border:        rgba(148, 163, 184, 0.2);
  --msqa-border-subtle: rgba(148, 163, 184, 0.1);
  --msqa-divider:       rgba(148, 163, 184, 0.15);

  /* ── Text ── */
  --msqa-text:          #f1f5f9;
  --msqa-text-dim:      #cbd5e1;
  --msqa-text-faint:    #94a3b8;
  --msqa-text-muted:    #64748b;

  /* ── Accent ── */
  --msqa-accent:        #0ea5e9;
  --msqa-accent-hover:  #0284c7;
  --msqa-accent-light:  #38bdf8;
  --msqa-accent-glow:   rgba(14, 165, 233, 0.2);
  --msqa-accent-2:      #f5a524;

  /* ── Status ── */
  --msqa-positive:      #1D9E75;
  --msqa-negative:      #ff4757;

  /* ── Shape / motion ── */
  --msqa-radius:        14px;
  --msqa-radius-sm:     9px;
  --msqa-shadow:        0 12px 32px rgba(0, 0, 0, 0.4);
  --msqa-ease-smooth:   cubic-bezier(0.16, 1, 0.3, 1);
  --msqa-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --msqa-dur-fast:      150ms;
  --msqa-dur-base:      250ms;

  /* ── Type stack — matches header.php exactly ── */
  --msqa-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --msqa-font-meta: 'Exo 2', sans-serif;
  --msqa-font-mono: 'Jetbrains Mono', monospace;

  font-family: var(--msqa-font);
  color: var(--msqa-text);
  background: var(--msqa-bg);
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — mirrors header.php's prefers-color-scheme block
═══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  .msqa-profile-page-wrap {
    --msqa-bg:            #F5F3EE;
    --msqa-surface:       #F0EEE7;
    --msqa-surface-2:     #EAE7DE;
    --msqa-surface-3:     #ffffff;
    --msqa-glass:         rgba(245, 243, 238, 0.88);
    --msqa-glass-dark:    rgba(240, 238, 231, 0.95);

    --msqa-border:        rgba(15, 23, 42, 0.14);
    --msqa-border-subtle: rgba(15, 23, 42, 0.08);
    --msqa-divider:       rgba(15, 23, 42, 0.1);

    --msqa-text:          #0f172a;
    --msqa-text-dim:      #1e293b;
    --msqa-text-faint:    #334155;
    --msqa-text-muted:    #64748b;

    --msqa-accent:        #0284c7;
    --msqa-accent-hover:  #0369a1;
    --msqa-accent-light:  #0ea5e9;
    --msqa-accent-glow:   rgba(2, 132, 199, 0.18);

    --msqa-positive:      #16a34a;
    --msqa-negative:      #e11d48;

    --msqa-shadow:        0 12px 32px rgba(15, 23, 42, 0.12);
  }
}

.msqa-profile-page-wrap * { box-sizing: border-box; }

.msqa-profile-page-wrap a {
  color: var(--msqa-accent);
  text-decoration: none;
  transition: color var(--msqa-dur-fast) var(--msqa-ease-standard);
}
.msqa-profile-page-wrap a:hover { color: var(--msqa-accent-light); text-decoration: none; }
.msqa-profile-page-wrap a:focus-visible,
.msqa-profile-page-wrap button:focus-visible {
  outline: 2px solid var(--msqa-accent);
  outline-offset: 2px;
}

/* ── Flash messages ─────────────────────────────────────── */
.msqa-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0;
  padding: 12px 16px;
  border-radius: var(--msqa-radius-sm);
  font-size: 14px;
  font-family: var(--msqa-font);
}
.msqa-alert--success {
  background: rgba(29, 158, 117, 0.12);
  color: var(--msqa-positive);
  border: 1px solid rgba(29, 158, 117, 0.3);
}
.msqa-alert--error {
  background: rgba(255, 71, 87, 0.12);
  color: var(--msqa-negative);
  border: 1px solid rgba(255, 71, 87, 0.3);
}
.msqa-alert__list { margin: 0; padding-left: 18px; }

/* ============================================================
   HERO
   ============================================================ */
.msqa-profile-hero {
  position: relative;
  margin: 24px 0 32px;
  border-radius: var(--msqa-radius);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(7,8,13,0) 0%, rgba(7,8,13,0.65) 55%, var(--msqa-surface) 100%),
    radial-gradient(120% 140% at 15% 0%, #0f2744 0%, #0a1628 35%, var(--msqa-bg) 75%);
  box-shadow: var(--msqa-shadow);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--msqa-border-subtle);
}

@media (prefers-color-scheme: light) {
  .msqa-profile-hero {
    background:
      linear-gradient(180deg, rgba(245,243,238,0) 0%, rgba(245,243,238,0.65) 55%, var(--msqa-surface) 100%),
      radial-gradient(120% 140% at 15% 0%, #cfe8f7 0%, #e4eef5 35%, var(--msqa-bg) 75%);
  }
}

.msqa-profile-hero::before {
  content: "";
  display: block;
  height: 190px;
}

.msqa-profile-hero__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 22px;
  padding: 0 28px 20px;
  margin-top: -64px;
  flex-wrap: wrap;
}

.msqa-profile-hero__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.msqa-profile-hero__avatar {
  width: 120px;
  height: 120px;
  border-radius: 20px;
  border: 4px solid var(--msqa-surface);
  background: var(--msqa-surface-3);
  object-fit: cover;
  display: block;
  box-shadow: var(--msqa-shadow);
}

.msqa-profile-hero__vendor-badge {
  position: absolute;
  bottom: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--msqa-accent-2);
  color: #201400;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border-radius: 999px;
  border: 2px solid var(--msqa-surface);
  text-transform: uppercase;
  font-family: var(--msqa-font-meta);
}

.msqa-profile-hero__info {
  flex: 1 1 320px;
  min-width: 0;
  padding-bottom: 4px;
}

.msqa-profile-hero__name {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0 0 2px;
  color: var(--msqa-text);
}

.msqa-profile-hero__username {
  font-size: 14px;
  color: var(--msqa-text-faint);
  margin: 0 0 10px;
  font-family: var(--msqa-font-meta);
}

.msqa-profile-hero__bio {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--msqa-text-dim);
  max-width: 560px;
  margin: 0 0 12px;
}

.msqa-profile-hero__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}

.msqa-profile-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--msqa-text-faint);
  font-family: var(--msqa-font-meta);
}

.msqa-profile-hero__meta-item svg { flex-shrink: 0; opacity: 0.85; }

.msqa-profile-hero__meta-item--link,
.msqa-profile-hero__meta-item--link:visited {
  color: var(--msqa-text-faint);
}
.msqa-profile-hero__meta-item--link:hover { color: var(--msqa-accent); }

.msqa-profile-hero__social {
  color: var(--msqa-text-faint);
  display: inline-flex;
  transition: color var(--msqa-dur-fast);
}
.msqa-profile-hero__social:hover { color: var(--msqa-accent); }

/* ── Action buttons ──────────────────────────────────────── */
.msqa-profile-hero__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 6px;
  margin-left: auto;
}

.msqa-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--msqa-font);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--msqa-radius-sm);
  border: 1px solid var(--msqa-border);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--msqa-dur-fast) var(--msqa-ease-standard);
}
.msqa-btn:hover { text-decoration: none; transform: translateY(-1px); }
.msqa-btn:active { transform: translateY(0); }

/* replace code */
a.msqa-btn.msqa-btn--primary,
.msqa-btn.msqa-btn--primary {
  background: linear-gradient(135deg, var(--msqa-accent), var(--msqa-accent-hover));
  border-color: var(--msqa-accent);
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
}
a.msqa-btn.msqa-btn--primary:hover,
.msqa-btn.msqa-btn--primary:hover {
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

@media (prefers-color-scheme: light) {
  a.msqa-btn.msqa-btn--primary,
  .msqa-btn.msqa-btn--primary,
  a.msqa-btn.msqa-btn--primary:hover,
  .msqa-btn.msqa-btn--primary:hover {
    color: #000000 !important;
  }
}
.msqa-btn--outline {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--msqa-border);
  color: var(--msqa-text-dim);
}
.msqa-btn--outline:hover {
  border-color: var(--msqa-accent);
  color: var(--msqa-accent);
  background: rgba(14, 165, 233, 0.08);
}

@media (prefers-color-scheme: light) {
  .msqa-btn--outline { background: rgba(255, 255, 255, 0.7); }
}

/* ── Stats bar ────────────────────────────────────────────── */
.msqa-profile-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--msqa-surface);
  border-top: 1px solid var(--msqa-border-subtle);
  padding: 16px 28px;
}

.msqa-profile-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0 26px 0 0;
  margin-right: 26px;
  border-right: 1px solid var(--msqa-border-subtle);
}
.msqa-profile-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }

.msqa-profile-stat__value {
  font-size: 19px;
  font-weight: 700;
  font-family: var(--msqa-font-mono);
  color: var(--msqa-text);
}
.msqa-profile-stat__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--msqa-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--msqa-font-meta);
}

/* ============================================================
   LAYOUT: TABS + CONTENT
   ============================================================ */
.msqa-profile-page-layout {
  display: block;
  background: var(--msqa-bg);
}

.msqa-profile-tabs {
  border-bottom: 1px solid var(--msqa-border-subtle);
  margin-bottom: 24px;
}

.msqa-profile-tabs__list {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.msqa-profile-tabs__list::-webkit-scrollbar { display: none; }

.msqa-profile-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 16px;
  font-family: var(--msqa-font-meta);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--msqa-text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  transition: color var(--msqa-dur-fast), border-color var(--msqa-dur-fast);
}
.msqa-profile-tab:hover {
  color: var(--msqa-accent);
  text-decoration: none;
}
.msqa-profile-tab--active {
  color: var(--msqa-accent);
  border-bottom-color: var(--msqa-accent);
}

.msqa-profile-tab__count {
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--msqa-font-mono);
  color: var(--msqa-text-muted);
  background: var(--msqa-surface-2);
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--msqa-border-subtle);
}
.msqa-profile-tab--active .msqa-profile-tab__count {
  color: var(--msqa-accent);
  background: rgba(14, 165, 233, 0.15);
  border-color: rgba(14, 165, 233, 0.35);
}

.msqa-profile-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.msqa-profile-panel {
  display: none;
  background: var(--msqa-bg);
  padding: 4px 0;
}
.msqa-profile-panel--active { display: block; }

/* ── Feed & Empty States ──────────────────────────────────── */
.msqa-feed-empty {
  text-align: center;
  padding: 56px 20px;
  background: var(--msqa-glass);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--msqa-border-subtle);
  border-radius: var(--msqa-radius);
}
.msqa-feed-empty__icon { font-size: 34px; margin-bottom: 10px; }
.msqa-feed-empty__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--msqa-text-faint);
  margin: 0 0 18px;
  font-family: var(--msqa-font-meta);
}

/* ============================================================
   QUESTION / ANSWER LISTS
   ============================================================ */
.msqa-profile-question-list,
.msqa-profile-answer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msqa-profile-question-item,
.msqa-profile-answer-item {
  display: flex;
  gap: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--msqa-border-subtle);
  border-radius: var(--msqa-radius-sm);
  padding: 16px 18px;
  transition: border-color var(--msqa-dur-fast), transform var(--msqa-dur-fast);
}
.msqa-profile-question-item:hover,
.msqa-profile-answer-item:hover {
  border-color: var(--msqa-accent);
  transform: translateY(-1px);
}

@media (prefers-color-scheme: light) {
  .msqa-profile-question-item,
  .msqa-profile-answer-item {
    background: rgba(255, 255, 255, 0.85);
  }
}

.msqa-profile-question-item__body,
.msqa-profile-answer-item__body {
  min-width: 0;
  flex: 1;
}

.msqa-profile-question-item__title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--msqa-text);
  margin-bottom: 8px;
}
.msqa-profile-question-item__title:hover { color: var(--msqa-accent); }

/* Hide all tab panels by default */
.msqa-tab-panel {
    display: none;
}

/* Show only the active panel */
.msqa-tab-panel.active {
    display: block;
}

/* ============================================================
   ORDERS TABLE
   ============================================================ */
.msqa-wc-orders__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--msqa-surface);
  border: 1px solid var(--msqa-border-subtle);
  border-radius: var(--msqa-radius-sm);
  overflow: hidden;
  font-size: 13px;
  font-family: var(--msqa-font);
}

.msqa-wc-orders__table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--msqa-text-muted);
  background: rgba(14, 165, 233, 0.1);
  padding: 12px 16px;
  border-bottom: 1px solid var(--msqa-border-subtle);
  font-family: var(--msqa-font-meta);
}

.msqa-wc-orders__table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--msqa-border-subtle);
  color: var(--msqa-text-dim);
}
.msqa-wc-orders__table tbody tr:hover td {
  background: rgba(14, 165, 233, 0.05);
  color: var(--msqa-text);
}
.msqa-wc-orders__table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   ACCOUNT TAB
   ============================================================ */
.msqa-account-section {
  background: var(--msqa-glass);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--msqa-border-subtle);
  border-radius: var(--msqa-radius);
  padding: 24px 26px;
  margin-bottom: 20px;
}

.msqa-account-section__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--msqa-text);
}