/* "Get WeBook" bar for signed-out visitors, and the small site footer.
   Standalone (needs only brand.css), so any page can use it. */
.wb-appbar {
  position: fixed; left: 50%; bottom: 16px; z-index: 900;
  display: flex; align-items: center; gap: 12px;
  width: min(640px, calc(100vw - 24px)); padding: 10px 10px 10px 14px;
  font-family: var(--font); color: var(--black);
  background: var(--white); border: 2.5px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  transform: translate(-50%, calc(100% + 40px));
  transition: transform 0.25s ease;
}
.wb-appbar.show { transform: translate(-50%, 0); }
.wb-appbar img { width: 34px; height: 34px; flex: none; }
.wb-appbar-text { flex: 1; min-width: 0; line-height: 1.3; }
.wb-appbar-text strong { display: block; font-size: 14px; font-weight: 900; }
.wb-appbar-text span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
.wb-appbar-cta {
  flex: none; padding: 9px 14px; font-size: 13px; font-weight: 800; color: var(--black); text-decoration: none; white-space: nowrap;
  background: var(--lime); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.wb-appbar-cta:hover { background: var(--lime-light); }
.wb-appbar-close {
  flex: none; width: 30px; height: 30px; font-family: inherit; font-size: 20px; line-height: 1; color: var(--muted);
  background: none; border: none; border-radius: var(--radius-sm); cursor: pointer;
}
.wb-appbar-close:hover { color: var(--black); background: var(--muted-light); }
body.wb-has-appbar { padding-bottom: 96px; }

.wb-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
  padding: 9px 12px; text-align: center; font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--muted);
  background: rgba(250, 250, 247, 0.96); border-top: 1.5px solid #e2e8f0;
}
/* Room so the fixed footer never covers the end of the page */
body:has(.wb-footer) { padding-bottom: 48px; }
body:has(.wb-footer) .wb-appbar { bottom: 52px; }
body.wb-has-appbar:has(.wb-footer) { padding-bottom: 150px; }
.wb-footer a { margin: 0 8px; color: inherit; text-decoration: none; }
.wb-footer a:hover { color: var(--black); text-decoration: underline; }

/* Avatar menu in the top bar */
.wb-account { position: relative; flex: none; }
.wb-account-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; overflow: hidden;
  font-family: var(--font); font-size: 16px; font-weight: 900; color: var(--black); cursor: pointer;
  background: var(--lime); border: 2.5px solid var(--border); border-radius: 50%; box-shadow: var(--shadow-sm);
}
.wb-account-btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow); }
.wb-account-btn img { width: 100%; height: 100%; object-fit: cover; }
.wb-account-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 950; min-width: 210px; padding: 6px;
  font-family: var(--font); background: var(--white); border: 2.5px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.wb-account-menu[hidden] { display: none; }
.wb-account-head { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1.5px solid #e2e8f0; }
.wb-account-head strong { display: block; font-size: 14px; font-weight: 900; color: var(--black); overflow-wrap: anywhere; }
.wb-account-head span { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.wb-account-item { display: block; padding: 9px 10px; font-size: 14px; font-weight: 700; color: var(--black); text-decoration: none; border-radius: var(--radius-sm); }
.wb-account-item:hover, .wb-account-item:focus-visible { background: var(--lime-light); }
.wb-account-item.out { margin-top: 4px; border-top: 1.5px solid #e2e8f0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: var(--muted); }

@media (max-width: 520px) {
  .wb-appbar { bottom: 0; width: 100vw; border-width: 2.5px 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: none; }
  .wb-appbar-text span { display: none; }
  body.wb-has-appbar { padding-bottom: 80px; }
  body:has(.wb-footer) .wb-appbar { bottom: 37px; }
  body.wb-has-appbar:has(.wb-footer) { padding-bottom: 125px; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-appbar { transition: none; }
}