/* WhiteBox site shared UI helpers */
.wb-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  border:1px solid rgba(0,0,0,0.12);
}

/* --- Auth/nav bootstrap ---
   Avoid a brief "logged out" header flash while Supabase restores the session.
   Keep header layout stable, but hide auth controls until JS finishes init.
*/
#wb-nav-auth { min-height: 36px; }
#wb-userbar { min-height: 24px; }
/* Stable header: do not hide auth controls while JS loads. */
.wb-badge-free{ background:#f3f4f6; color:#111827; }
.wb-badge-pro{ background:#111827; color:#ffffff; border-color:#111827; }

.wb-userbar-inner{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  padding:8px 0;
  font-size:14px;
  color:#374151;
}
.wb-status-pill{
  display:inline-flex;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  border:1px solid rgba(0,0,0,0.12);
}
.wb-status-free{ background:#f3f4f6; color:#111827; }
.wb-status-pro{ background:#111827; color:#ffffff; border-color:#111827; }


/* Responsive top header nav: desktop links + mobile hamburger */
.nav-right{ display:flex; align-items:center; gap:14px; }

/* Desktop link row (Home / Version / Feedback) */
.nav-links-desktop{ display:flex; align-items:center; gap:16px; }
.nav-links-desktop a{ font-weight:700; color:#0d2b4d; text-decoration:none; }
.nav-links-desktop a:hover{ text-decoration:underline; }
.nav-links{ display:flex; align-items:center; gap:18px; }
.nav-toggle{
  display:none;
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:10px;
  padding:8px 10px;
  line-height:1;
  font-size:18px;
  cursor:pointer;
}

/* Keep auth cluster tidy */
#wb-nav-auth{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

@media (max-width: 820px){
  /* Keep logo + hamburger aligned on one row */
  .top-nav-inner{ flex-wrap:nowrap; align-items:center; gap:10px; }

  /* IMPORTANT: hide the desktop link row on real mobile Safari */
  .nav-links-desktop{ display:none !important; }

  .nav-right{
    width:auto;
    margin-left:auto;
    justify-content:flex-end;
    position:relative; /* anchor dropdown */
  }

  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* Dropdown menu under the hamburger */
  .nav-links{
    display:none;
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    width:min(320px, 92vw);
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px;
    background:#fff;
    border:1px solid rgba(0,0,0,0.12);
    border-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
    z-index:20;
  }
  body.wb-nav-open .nav-links{ display:flex; }

  .nav-links a{ padding:6px 0; }
  #wb-nav-auth{ width:100%; justify-content:flex-start; flex-wrap:wrap; }

  /* Make primary button easier to tap */
  .nav-signup{ padding:10px 14px; }
}


/* Footer version stamp */
.wb-version{font-size:12px;color:#9aa6b2;margin-top:6px;}

/* Form validation helpers */
.field-error{
  display:none;
  margin-top:6px;
  font-size:12px;
  color:#c0392b;
}
.input-error{
  border-color:#c0392b !important;
  box-shadow:0 0 0 3px rgba(192,57,43,0.12) !important;
}