/* ============ PROFILE PAGE ============ */
#profile-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* .topbar-wrap is intentionally excluded here — it's already position:fixed
   (and thus already a positioned element for z-index purposes) via main.css;
   giving it position:relative as well would pull the floating pill nav out
   of its fixed viewport position and into normal document flow. */
.profile-header, .profile-layout, footer {
  position: relative;
  z-index: 1;
}

.profile-header {
  background: none;
  padding: 100px 20px 16px;
  margin: 0;
}
@media (min-width: 480px) {
  .profile-header { padding: 100px 24px 16px; }
}
@media (min-width: 960px) {
  /* topbar-wrap moves from top:12px to top:20px at this breakpoint (main.css) */
  .profile-header { padding: 108px 24px 16px; }
}
.profile-header-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.profile-header h1 {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 900;
  color: var(--heading);
  letter-spacing: -0.02em;
}

.profile-layout {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 56px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
@media (min-width: 480px) {
  .profile-layout { padding: 0 24px 80px; gap: 28px; }
}
@media (min-width: 801px) {
  .profile-layout { grid-template-columns: 280px 1fr; }
}

.profile-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  position: sticky;
  top: 100px;
}
.profile-sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.profile-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-weight: 800;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.profile-sidebar-name { font-size: 14px; font-weight: 800; color: var(--heading); }
.profile-sidebar-email { font-size: 12px; color: var(--muted); }

.profile-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.profile-nav-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.profile-nav-item:hover { background: var(--ivory); }
.profile-nav-item.active { background: var(--crimson-light); color: var(--crimson); }
.profile-nav-logout { color: var(--crimson); margin-top: 8px; border-top: 1px solid var(--border); padding-top: 14px; }

.profile-main { min-width: 0; }
.profile-panel.hidden { display: none; }
.hidden { display: none; }

/* profile hero (matches mobile app top card) */
.profile-card-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--navy);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}
.profile-avatar-lg { width: 56px; height: 56px; font-size: 20px; background: rgba(255,255,255,0.15); }
.profile-hero-name { font-size: 18px; font-weight: 800; color: var(--white); }
.profile-hero-email { font-size: 13px; color: rgba(255,255,255,0.75); }

.profile-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 32px; }
.profile-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
}
.profile-stat-dark { background: var(--navy); border: none; }
.profile-stat-num { font-size: 28px; font-weight: 900; color: var(--heading); }
.profile-stat-dark .profile-stat-num { color: var(--white); }
.profile-stat-num-accent { color: var(--crimson); }
.profile-stat-label { font-size: 13px; color: var(--muted); margin-top: 4px; }
.profile-stat-dark .profile-stat-label { color: rgba(255,255,255,0.7); }

.profile-group-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 24px 0 10px;
}
.profile-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.profile-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.profile-list-item:last-child { border-bottom: none; }
.profile-list-item:hover { background: var(--ivory); }
.profile-list-arrow { color: var(--muted); font-size: 18px; }
.profile-list-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

/* ============ PRIVACY & SECURITY ACCORDION ============
   Matches bhucheq-mobile-mockup.html's Profile frame (.accordion-trigger/
   .accordion-panel) — the mockup never models a desktop frame, but this
   component's container (.profile-list, inside #pfProfile's content) isn't
   mobile-scoped to begin with, so it's built to work at every width rather
   than gated to a media query. Same expand/collapse mechanism as the
   mockup: max-height transition (can't animate to height:auto directly),
   chevron rotation matching its own transition timing (.25s), panel
   duration (.3s) matches the site's other overlay/sheet transitions
   (e.g. services.html's bottom-sheet slide, bhumap's coords/legend). The
   panel is a sibling *after* .profile-list closes, not nested inside it —
   same structure as the mockup — so the trigger stays the real last-child
   of .profile-list and keeps the existing :last-child border-bottom:none
   rule working unmodified. */
.profile-accordion-trigger {
  width: 100%;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.profile-list-arrow-chevron {
  display: inline-block;
  transition: transform 0.25s ease;
}
.profile-accordion-trigger.open .profile-list-arrow-chevron { transform: rotate(90deg); }

.profile-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(10,0,64,0.02);
}
.profile-accordion-panel.open { max-height: 320px; }

.profile-accordion-sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 12px 20px 12px 46px;
  font-size: 13px;
  font-weight: 600;
  color: var(--heading);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.profile-accordion-sublink:last-child { border-bottom: none; }
.profile-accordion-sublink:hover { background: var(--ivory); }
.profile-accordion-sublink .profile-list-arrow { font-size: 14px; }

.profile-signout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
  background: var(--crimson-light);
  color: var(--crimson);
  font-weight: 800;
  font-size: 14px;
  border-radius: 14px;
  padding: 16px;
  margin-top: 24px;
  text-decoration: none;
}
.profile-signout:hover { background: #f0d3dd; }

/* ============ ORDERS TAB ============ */
.order-loading { font-size: 14px; color: var(--muted); padding: 24px 4px; }

.order-list { display: flex; flex-direction: column; gap: 10px; }
.order-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.15s, background 0.15s;
}
.order-card:hover { border-color: var(--crimson); background: var(--ivory); }
.order-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.order-card-title { font-size: 14px; font-weight: 800; color: var(--heading); }
.order-card-meta { font-size: 12.5px; color: var(--muted); }

.order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.order-status-badge.processing { background: var(--border); color: var(--muted); }
.order-status-badge.accepted { background: #dcfce7; color: #15803d; }
.order-status-badge.needs_review { background: #fef3c7; color: #b45309; }
.order-status-badge.needs_reupload { background: #fef3c7; color: #b45309; }
.order-status-badge.error { background: var(--crimson-light); color: var(--crimson); }
.order-status-badge .order-status-spinner {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(107,114,128,0.35);
  border-top-color: var(--muted);
  animation: order-spin 0.7s linear infinite;
}
@keyframes order-spin { to { transform: rotate(360deg); } }

.order-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 16px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  padding: 0;
}
.order-detail-back:hover { color: var(--crimson); }

.order-detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}
.order-detail-title { font-size: 17px; font-weight: 800; color: var(--heading); margin-bottom: 4px; }
.order-detail-meta { font-size: 13px; color: var(--muted); margin-bottom: 16px; }

.order-detail-reasons {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-detail-reasons li {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
.order-detail-reasons li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--muted);
}

.order-report-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  width: 100%;
  background: var(--crimson);
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  margin-top: 20px;
  transition: background 0.2s;
}
.order-report-btn:hover { background: var(--crimson-dark); }
.order-report-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.order-detail-error {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--crimson);
}

/* empty states (Orders / Verifications / Requests / Listings) */
.profile-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px 20px;
  text-align: center;
}
@media (min-width: 480px) {
  .profile-empty { padding: 64px 24px; }
}
.profile-empty-icon { font-size: 36px; margin-bottom: 16px; opacity: 0.5; }
.profile-empty-title { font-size: 18px; font-weight: 800; color: var(--heading); margin-bottom: 8px; }
.profile-empty-sub { font-size: 14px; color: var(--muted); max-width: 380px; margin: 0 auto 24px; line-height: 1.6; }
.profile-empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--crimson);
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
}
.profile-empty-btn:hover { background: var(--crimson-dark); }

/* ============ RICH MULTI-COLUMN FOOTER (overrides main.css footer) ============ */
footer { text-align: left; padding: 0; }

.footer-rich { padding: 48px 20px 24px; }
@media (min-width: 560px) {
  .footer-rich { padding: 56px 32px 28px; }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1160px;
  margin: 0 auto;
}
@media (min-width: 560px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr 1.2fr; }
}

.footer-brand-logo { height: 26px; width: auto; display: block; margin-bottom: 16px; opacity: 0.95; }

.footer-brand-desc {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  margin-bottom: 16px;
  max-width: 260px;
}

.footer-trust-line {
  font-size: 12px;
  font-weight: 600;
  color: #86efac;
  margin-bottom: 18px;
}

.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.footer-social a:hover { background: var(--crimson); border-color: var(--crimson); }

.footer-col-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 4px; }
.footer-col a {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-col a:hover { color: var(--white); }

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.footer-contact-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(170,14,65,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
}
.footer-contact-text {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}

.footer-bottom {
  max-width: 1160px;
  margin: 36px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.4);
}

@media (max-width: 559px) {
  .footer-bottom { flex-direction: column; }
}

/* ============ MOBILE — .profile-card-hero matches bhucheq-mobile-mockup.html's
   Profile frame, where the equivalent card (.cheq-card) is white with
   navy-colored name text — navy text on a navy card would be illegible,
   confirming the mockup's intent is a light card. .profile-avatar-lg's
   translucent white background (rgba(255,255,255,0.15)) was only legible
   as a "ghost" avatar against the navy card; it's reset back to the solid
   navy treatment .profile-avatar already uses everywhere else on this
   page, now that the card behind it is white. Scoped to max-width:640px
   only, desktop untouched. ============ */
/* Hidden everywhere except inside the mobile block below (must come before
   that block in source order — same specificity, so a later unconditional
   rule would otherwise win the cascade tie and hide it at mobile too). */
.profile-pill-scroll-wrap { display: none; }

@media (max-width: 640px) {
  .profile-card-hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 18px 18px 20px;
    box-shadow: 0 8px 22px rgba(10,0,64,0.06);
    gap: 14px;
  }
  .profile-hero-name { color: var(--heading); font-size: 15px; }
  .profile-hero-email { color: var(--muted); font-size: 12px; }
  .profile-avatar-lg { background: var(--navy); }

  .profile-stats-row { gap: 10px; margin-bottom: 18px; }
  .profile-stat {
    border: none;
    box-shadow: 0 6px 18px rgba(10,0,64,0.06);
    border-radius: 16px;
    padding: 16px 14px;
  }
  .profile-stat-num { font-size: 24px; font-weight: 800; }
  .profile-stat-label { font-size: 11px; }

  /* Mockup's group-label mechanism is padding:18px 16px 8px, but this
     element has no horizontal padding of its own today — it relies on
     .profile-layout's page-level padding for its left/right position,
     same as the stat boxes and list groups around it. Applying the
     mockup's 16px horizontal padding literally would push the label
     16px further right than its siblings, breaking alignment. Kept as
     margin (matching the existing mechanism) with only the vertical
     values from the mockup. */
  .profile-group-label { margin: 18px 0 8px; font-size: 11px; letter-spacing: 0.04em; }

  .profile-list {
    border: none;
    box-shadow: 0 8px 22px rgba(10,0,64,0.06);
    border-radius: 16px;
  }
  .profile-list-item {
    padding: 14px 16px;
    font-size: 13.5px;
    font-weight: 600;
    /* --line isn't a real CSS variable in this codebase (mockup-only
       token, rgba(10,0,64,0.08)); using its literal value here, same
       substitution every other page's dividers needed. */
    border-bottom-color: rgba(10,0,64,0.08);
  }
  .profile-list-arrow { font-size: 16px; }
  .profile-accordion-sublink { border-bottom-color: rgba(10,0,64,0.08); }

  /* ---- SECTION NAV — mobile replaces the desktop sidebar (avatar+name+
     email row, which duplicates .profile-card-hero below it, plus the
     full vertical nav list) with a compact horizontal pill row, matching
     bhucheq-mobile-mockup.html's Profile frame (.pill-scroll/.map-pill,
     literal values below) and reusing the exact scroll-fade-cue mechanism
     already built for BhuMap's .bhumap-pill-scroll-wrap. ---- */
  .profile-sidebar { display: none; }

  /* .profile-layout is display:grid — grid items don't shrink below their
     content's intrinsic width by default, so without min-width:0 this
     would grow to the pill row's full unclipped width (measured ~548px)
     and push the whole page into horizontal overflow instead of letting
     .profile-pill-row's own overflow-x:auto clip and scroll internally. */
  .profile-pill-scroll-wrap { display: block; position: relative; min-width: 0; }
  .profile-pill-scroll-wrap::before,
  .profile-pill-scroll-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 2px;
    width: 28px;
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.15s;
  }
  .profile-pill-scroll-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--ivory), transparent);
  }
  .profile-pill-scroll-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--ivory), transparent);
  }
  .profile-pill-scroll-wrap.at-start::before { opacity: 0; }
  .profile-pill-scroll-wrap.at-end::after { opacity: 0; }

  .profile-pill-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .profile-pill-row::-webkit-scrollbar { display: none; }

  .profile-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: auto;
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--surface);
    border: 1.5px solid rgba(10,0,64,0.08);
    color: var(--navy);
    white-space: nowrap;
  }
  .profile-pill.active {
    background: var(--navy);
    color: var(--ivory);
    border-color: var(--navy);
  }
}

/* ============ TOAST (feedback for "coming soon" profile links) ============ */
.toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3000; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { background: var(--navy); color: var(--white); padding: 12px 22px; border-radius: 10px; font-size: 13.5px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,0.18); opacity:0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; max-width: 380px; text-align:center; }
.toast.show { opacity:1; transform: translateY(0); }