/* =========================================================
   CAMPUS MARKETPLACE — UNIFIED NAVIGATION
   Consistent, proportional, accessible across every page.
   ========================================================= */

:root {
  --nav-blue: #1457d9;
  --nav-blue-dark: #0e43ad;
  --nav-blue-soft: #edf4ff;
  --nav-blue-border: #d8e6ff;
  --nav-ink: #25324a;
  --nav-muted: #667085;
  --nav-border: #e7ebf1;
  --nav-white: #ffffff;
}

.bottom-nav,
.bottom-navigation {
  box-sizing: border-box;
  font-family: inherit;
}

.bottom-nav *,
.bottom-navigation * { box-sizing: border-box; }

/* ----- Shared item treatment ----- */
.bottom-nav .nav-item,
.bottom-navigation .nav-item {
  position: relative;
  border: 1px solid transparent;
  background: transparent;
  color: var(--nav-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease, background .18s ease, border-color .18s ease,
              transform .12s ease, box-shadow .18s ease;
}

.bottom-nav .nav-item svg,
.bottom-navigation .nav-item svg {
  width: 22px;
  height: 22px;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.bottom-nav .nav-item span,
.bottom-navigation .nav-item span {
  line-height: 1.1;
}

.bottom-nav .nav-item:hover,
.bottom-navigation .nav-item:hover {
  color: var(--nav-blue);
  background: #f7f9fc;
}

.bottom-nav .nav-item.active,
.bottom-navigation .nav-item.active {
  color: var(--nav-blue);
  background: var(--nav-blue-soft);
  border-color: var(--nav-blue-border);
  font-weight: 700;
}

.bottom-nav .nav-item.active svg,
.bottom-navigation .nav-item.active svg {
  stroke-width: 2.05 !important;
}

.bottom-nav .nav-item:focus-visible,
.bottom-navigation .nav-item:focus-visible,
.bottom-nav .sell-button:focus-visible,
.bottom-navigation .add-button:focus-visible {
  outline: 3px solid rgba(20,87,217,.18);
  outline-offset: 2px;
}

.bottom-nav .nav-item:active,
.bottom-navigation .nav-item:active { transform: scale(.97); }

/* ----- Post button ----- */
.bottom-nav .sell-button,
.bottom-navigation .add-button {
  position: relative;
  border: 0;
  cursor: pointer;
  background: var(--nav-blue);
  color: #fff;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav .sell-button:hover,
.bottom-navigation .add-button:hover {
  background: var(--nav-blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(20,87,217,.24);
}

.bottom-nav .sell-button:active,
.bottom-navigation .add-button:active {
  transform: translateY(0) scale(.98);
}

.sell-plus {
  display: inline-grid;
  place-items: center;
  font-weight: 400;
  line-height: 1;
}

.sell-label { display: inline; }

/* =========================================================
   MOBILE / TABLET — bottom navigation
   ========================================================= */
@media (max-width: 768px) {
  .bottom-nav,
  .bottom-navigation {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: 78px !important;
    min-height: 78px !important;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(120px, 1.5fr) repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(255,255,255,.97) !important;
    border-top: 1px solid var(--nav-border) !important;
    border-right: 0 !important;
    box-shadow: 0 -6px 22px rgba(16,24,40,.06) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 1000 !important;
  }

  .nav-brand { display: none !important; }

  .bottom-nav .nav-item,
  .bottom-navigation .nav-item {
    width: 100% !important;
    height: 60px !important;
    min-width: 0 !important;
    padding: 5px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 13px !important;
    font-size: 10.5px !important;
    font-weight: 550;
  }

  .bottom-nav .nav-item svg,
  .bottom-navigation .nav-item svg {
    width: 23px !important;
    height: 23px !important;
  }

  .bottom-nav .sell-button,
  .bottom-navigation .add-button {
    width: 100% !important;
    height: 46px !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 9px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    box-shadow: 0 6px 16px rgba(20,87,217,.18) !important;
  }

  .bottom-nav .sell-plus,
  .bottom-navigation .sell-plus {
    width: auto;
    height: auto;
    font-size: 19px !important;
    font-weight: 700 !important;
  }

  .bottom-nav .sell-label,
  .bottom-navigation .sell-label {
    display: inline !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    white-space: nowrap;
  }

  /* Every page keeps itself clear of the fixed bar with its own bottom
     padding, so the body adds none (extra space here made short pages,
     like Favorites and Messages, scroll into blank space). */
  body { padding-bottom: 0 !important; }
}

/* =========================================================
   DESKTOP — compact, elegant left navigation
   ========================================================= */
@media (min-width: 769px) {
  .bottom-nav,
  .bottom-navigation {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 244px !important;
    max-width: 244px !important;
    height: 100vh !important;
    padding: 104px 15px 26px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px !important;
    background: rgba(255,255,255,.98) !important;
    border: 0 !important;
    border-right: 1px solid var(--nav-border) !important;
    box-shadow: 5px 0 24px rgba(16,24,40,.035) !important;
    z-index: 1000 !important;
  }

  .nav-brand {
    position: absolute;
    top: 28px;
    left: 25px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: .92;
    user-select: none;
  }

  .nav-brand-campus,
  .nav-brand-marketplace {
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.65px;
    white-space: nowrap;
  }

  /* Matches the original header branding: blue CAMPUS + dark MARKETPLACE. */
  .nav-brand-campus { color: var(--nav-blue); }
  .nav-brand-marketplace { color: #211E7A; }

  .nav-brand::after {
    content: '';
    width: 34px;
    height: 3px;
    margin-top: 10px;
    border-radius: 99px;
    background: var(--nav-blue);
  }

  .bottom-nav .nav-item,
  .bottom-navigation .nav-item {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 15px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 13px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    text-align: left !important;
  }

  .bottom-nav .nav-item svg,
  .bottom-navigation .nav-item svg {
    width: 21px !important;
    height: 21px !important;
  }

  .bottom-nav .sell-button,
  .bottom-navigation .add-button {
    order: 5;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 8px 0 0 !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    box-shadow: 0 6px 16px rgba(20,87,217,.18) !important;
  }

  .bottom-nav .sell-plus,
  .bottom-navigation .sell-plus {
    font-size: 20px !important;
  }

  .bottom-nav .sell-label,
  .bottom-navigation .sell-label {
    display: inline !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
  }

  /* Make the four destinations occupy a comfortable visual group. */
  .bottom-nav .nav-item:nth-child(1),
  .bottom-nav .nav-item:nth-child(2),
  .bottom-nav .nav-item:nth-child(4),
  .bottom-nav .nav-item:nth-child(5),
  .bottom-navigation .nav-item:nth-child(1),
  .bottom-navigation .nav-item:nth-child(2),
  .bottom-navigation .nav-item:nth-child(4),
  .bottom-navigation .nav-item:nth-child(5) {
    flex: 0 0 52px;
  }
}

@media (min-width: 769px) {
  body { padding-bottom: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav *, .bottom-navigation * { transition: none !important; }
}

/* =========================================================
   FINAL POST ACTION FIX
   One real label on desktop; one clean circular + on mobile.
   Prevents legacy pseudo-elements from creating duplicate text.
   ========================================================= */
.sell-plus::before,
.sell-plus::after,
.sell-label::before,
.sell-label::after,
.bottom-navigation .add-button::before,
.bottom-navigation .add-button::after {
  content: none !important;
}

@media (max-width: 768px) {
  .bottom-nav,
  .bottom-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 64px repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .bottom-nav .sell-button,
  .bottom-navigation .add-button {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    justify-self: center !important;
    align-self: center !important;
    margin: -18px 0 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    gap: 0 !important;
  }

  .bottom-nav .sell-plus,
  .bottom-navigation .sell-plus {
    display: block !important;
    width: auto !important;
    height: auto !important;
    font-size: 34px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }

  .bottom-nav .sell-label,
  .bottom-navigation .sell-label {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .bottom-nav .sell-button,
  .bottom-navigation .add-button {
    flex: 0 0 48px !important;
  }

  .bottom-nav .sell-plus,
  .bottom-navigation .sell-plus {
    font-size: 20px !important;
    transform: none !important;
  }

  .bottom-nav .sell-label,
  .bottom-navigation .sell-label {
    display: inline !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
  }
}

/* =========================================================
   FINAL — POST ACTION IS OWNED BY nav.css
   This block intentionally targets only the Post button.
   It overrides legacy page-specific button rules without
   changing the other navigation items.
   ========================================================= */
.bottom-nav .sell-button,
.bottom-navigation .add-button {
  box-sizing: border-box !important;
  font-family: inherit !important;
  border: 0 !important;
  background: var(--nav-blue) !important;
  color: #fff !important;
  overflow: hidden !important;
}

.bottom-nav .sell-button .sell-plus,
.bottom-navigation .add-button .sell-plus {
  display: inline-grid !important;
  place-items: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transform: none !important;
}

.bottom-nav .sell-button .sell-label,
.bottom-navigation .add-button .sell-label {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

/* Never generate a second plus or label through CSS. */
.bottom-nav .sell-button::before,
.bottom-nav .sell-button::after,
.bottom-nav .sell-button .sell-plus::before,
.bottom-nav .sell-button .sell-plus::after,
.bottom-nav .sell-button .sell-label::before,
.bottom-nav .sell-button .sell-label::after,
.bottom-navigation .add-button::before,
.bottom-navigation .add-button::after,
.bottom-navigation .add-button .sell-plus::before,
.bottom-navigation .add-button .sell-plus::after,
.bottom-navigation .add-button .sell-label::before,
.bottom-navigation .add-button .sell-label::after {
  content: none !important;
}

@media (min-width: 769px) {
  .bottom-nav .sell-button,
  .bottom-navigation .add-button {
    width: 100% !important;
    height: 48px !important;
    min-width: 0 !important;
    min-height: 48px !important;
    flex: 0 0 48px !important;
    margin: 8px 0 0 !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
  }
}

@media (max-width: 768px) {
  .bottom-nav .sell-button,
  .bottom-navigation .add-button {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    justify-self: center !important;
    align-self: center !important;
    margin: -18px 0 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    gap: 0 !important;
  }

  .bottom-nav .sell-button .sell-plus,
  .bottom-navigation .add-button .sell-plus {
    font-size: 34px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }

  .bottom-nav .sell-button .sell-label,
  .bottom-navigation .add-button .sell-label {
    display: none !important;
  }
}

/* =========================================================
   FINAL NAV MASTER OVERRIDES
   nav.css is loaded last on every page. These rules are the
   single source of truth for the shared navigation.
   ========================================================= */
.bottom-nav {
  box-sizing: border-box !important;
  font-family: inherit !important;
}

.bottom-nav .nav-item {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  color: var(--nav-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
}

.bottom-nav .nav-item svg {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.bottom-nav .nav-item.active {
  color: var(--nav-blue) !important;
  background: var(--nav-blue-soft) !important;
  border-color: var(--nav-blue-border) !important;
}

.bottom-nav .nav-item:hover {
  color: var(--nav-blue) !important;
  background: #f7f9fc !important;
}

.bottom-nav .sell-button {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  border: 0 !important;
  background: var(--nav-blue) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.bottom-nav .sell-button::before,
.bottom-nav .sell-button::after,
.bottom-nav .sell-button .sell-plus::before,
.bottom-nav .sell-button .sell-plus::after,
.bottom-nav .sell-button .sell-label::before,
.bottom-nav .sell-button .sell-label::after {
  content: none !important;
}

.bottom-nav .sell-button .sell-plus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transform: none !important;
}

.bottom-nav .sell-button .sell-label {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (min-width: 769px) {
  .bottom-nav {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    transform: none !important;
    width: 236px !important;
    max-width: 236px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 94px 16px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    background: #fff !important;
    border: 0 !important;
    border-right: 1px solid var(--nav-border) !important;
    border-radius: 0 !important;
    box-shadow: 4px 0 20px rgba(16,24,40,.04) !important;
    z-index: 100 !important;
  }

  .bottom-nav .nav-item {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    flex: 0 0 56px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 13px !important;
    padding: 0 16px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  .bottom-nav .nav-item svg {
    width: 21px !important;
    height: 21px !important;
  }

  .bottom-nav .sell-button {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    flex: 0 0 48px !important;
    margin: 8px 0 0 !important;
    padding: 0 16px !important;
    border-radius: 13px !important;
  }
}

@media (max-width: 768px) {
  .bottom-nav {
    position: fixed !important;
    left: 50% !important;
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 430px !important;
    height: 78px !important;
    min-height: 78px !important;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.05fr 1fr 1fr !important;
    align-items: center !important;
    gap: 0 !important;
    background: rgba(255,255,255,.98) !important;
    border: 0 !important;
    border-top: 1px solid #e8ebf0 !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 18px rgba(16,24,40,.04) !important;
    z-index: 100 !important;
  }

  .bottom-nav .nav-item {
    width: 100% !important;
    height: 62px !important;
    min-height: 62px !important;
    flex: none !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 !important;
    border-radius: 13px !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
  }

  .bottom-nav .nav-item svg {
    width: 24px !important;
    height: 24px !important;
  }

  .bottom-nav .sell-button {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    justify-self: center !important;
    align-self: center !important;
    margin: -20px 0 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    gap: 0 !important;
  }

  .bottom-nav .sell-button .sell-plus {
    font-size: 34px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }

  .bottom-nav .sell-button .sell-label {
    display: none !important;
  }
}


/* =========================================================
   MESSAGES replaces PROFILE in the navigation (phone bar and
   desktop sidebar). Profile opens from the header's profile
   button on every page. Red badge = unread messages.
   ========================================================= */
.bottom-nav .nav-item[data-nav="profile"],
.bottom-navigation .nav-item[data-nav="profile"] {
  display: none !important;
}

.bottom-nav .nav-badge,
.bottom-navigation .nav-badge {
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #d92d20;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* Phone bar: the badge sits on the corner of the Messages icon. */
@media (max-width: 768px) {
  .bottom-nav .nav-badge,
  .bottom-navigation .nav-badge {
    position: absolute;
    top: 6px;
    left: calc(50% + 4px);
    min-width: 18px;
    height: 18px;
    margin: 0;
    padding: 0 5px;
    border: 2px solid #fff;
    font-size: 10px;
  }
}


/* =========================================================
   SIDEBAR FOOTER — About, Campus Tour, Terms (stacked), and the
   "Not affiliated with NORSU." note (desktop sidebar only;
   phones find the same links in the header profile menu).
   ========================================================= */
.bottom-nav .nav-footer,
.bottom-navigation .nav-footer {
  display: none;
}

@media (min-width: 769px) {
  .bottom-nav .nav-footer,
  .bottom-navigation .nav-footer {
    order: 6;
    display: block;
    margin-top: auto;
    padding: 14px 4px 0;
    border-top: 1px solid var(--nav-border);
    font-family: inherit;
  }

  .nav-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    color: var(--nav-muted);
    font-size: 12.5px;
    line-height: 1.4;
  }

  .nav-footer-links a {
    color: var(--nav-muted);
    text-decoration: none;
  }

  .nav-footer-links a:hover {
    color: var(--nav-blue);
    text-decoration: underline;
  }

  .nav-footer-note {
    margin: 8px 0 0;
    color: var(--nav-muted);
    font-size: 11.5px;
  }
}


/* =========================================================
   SIDEBAR — one font, one type scale, one left edge (desktop)
   Logo, icons and footer all start 32px from the left
   (16px sidebar padding + 16px item padding).
   ========================================================= */
@media (min-width: 769px) {
  .bottom-nav,
  .bottom-nav *,
  .bottom-navigation,
  .bottom-navigation * {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  }

  .bottom-nav .nav-brand,
  .bottom-navigation .nav-brand {
    left: 32px !important;
  }

  .bottom-nav .nav-item,
  .bottom-navigation .nav-item {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.1px;
  }

  /* Same weight on every page, so labels never get wider when they
     become the current page. The current page shows by colour only. */
  .bottom-nav .nav-item.active,
  .bottom-navigation .nav-item.active {
    font-weight: 600 !important;
  }

  /* Nothing moves or shrinks on hover or click: no lift, no press-scale.
     Only colours change. */
  .bottom-nav .nav-item,
  .bottom-navigation .nav-item,
  .bottom-nav .nav-item:hover,
  .bottom-navigation .nav-item:hover,
  .bottom-nav .nav-item:active,
  .bottom-navigation .nav-item:active,
  .bottom-nav .sell-button,
  .bottom-navigation .add-button,
  .bottom-nav .sell-button:hover,
  .bottom-navigation .add-button:hover,
  .bottom-nav .sell-button:active,
  .bottom-navigation .add-button:active {
    transform: none !important;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease !important;
  }

  .bottom-nav .sell-button:hover,
  .bottom-navigation .add-button:hover,
  .bottom-nav .sell-button:active,
  .bottom-navigation .add-button:active {
    box-shadow: 0 6px 16px rgba(20,87,217,.18) !important;
  }

  .bottom-nav .sell-button .sell-label,
  .bottom-navigation .add-button .sell-label {
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  .bottom-nav .nav-footer,
  .bottom-navigation .nav-footer {
    padding: 16px 16px 0 !important;
  }

  .bottom-nav .nav-footer-links,
  .bottom-navigation .nav-footer-links {
    gap: 9px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .bottom-nav .nav-footer-links a,
  .bottom-navigation .nav-footer-links a {
    font-weight: 500;
  }

  .bottom-nav .nav-footer-note,
  .bottom-navigation .nav-footer-note {
    margin-top: 14px !important;
    font-size: 12px !important;
    line-height: 1.3;
  }
}

/* =========================================================
   POST AN ITEM — identical on every page
   Old page styles (from the original round "+" button) used to
   lift the text 2px on Marketplace and Favorites.
   ========================================================= */
.bottom-nav .sell-button .sell-plus,
.bottom-nav .sell-button .sell-label,
.bottom-navigation .add-button .sell-plus,
.bottom-navigation .add-button .sell-label {
  transform: none !important;
}

/* Desktop hover: a darker blue only. The button doesn't move. */
@media (min-width: 769px) {
  .bottom-nav .sell-button:hover,
  .bottom-navigation .add-button:hover {
    background: var(--nav-blue-dark) !important;
  }
}


/* =========================================================
   LINE ICONS in cards, details and dialogs (CampusIcons.icon)
   Sized to the text around them and drawn in its colour, so
   they match the sidebar icons in light and dark mode.
   ========================================================= */
svg.ui-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.16em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

svg.ui-icon.filled { fill: currentColor; }

/* Icon + text side by side (location, time, condition rows) */
.icon-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.icon-text > svg.ui-icon { opacity: .85; }


/* ===== DARK THEME (generated by tools/dark-theme.py — do not edit by hand) ===== */
:root[data-theme="dark"] { --nav-blue: #1457d9; --nav-blue--fg: #6796f1; --nav-blue--bd: #1457d9; --nav-blue-dark: #0e43ad; --nav-blue-dark--fg: #6b98f3; --nav-blue-dark--bd: #2052b6; --nav-blue-soft: #1a273b; --nav-blue-soft--fg: #edf4ff; --nav-blue-soft--bd: #213657; --nav-blue-border: #202e46; --nav-blue-border--fg: #d8e6ff; --nav-blue-border--bd: #23385d; --nav-ink: #33415f; --nav-ink--fg: #c3cad7; --nav-ink--bd: #c3cad7; --nav-muted: #4f5767; --nav-muted--fg: #9ba3b2; --nav-muted--bd: #9ba3b2; --nav-border: #282f3e; --nav-border--fg: #e7ebf1; --nav-border--bd: #282e3c; --nav-white: #171b24; --nav-white--fg: #ffffff; --nav-white--bd: #181d25; }
:root[data-theme="dark"] .bottom-nav .nav-item, :root[data-theme="dark"] .bottom-navigation .nav-item { border-color: transparent; background-color: transparent; background-image: none; color: var(--nav-muted--fg); }
:root[data-theme="dark"] .bottom-nav .nav-item svg, :root[data-theme="dark"] .bottom-navigation .nav-item svg { fill: none !important; stroke: currentColor !important; }
:root[data-theme="dark"] .bottom-nav .nav-item:hover, :root[data-theme="dark"] .bottom-navigation .nav-item:hover { color: var(--nav-blue--fg); background-color: #1e232f; background-image: none; }
:root[data-theme="dark"] .bottom-nav .nav-item.active, :root[data-theme="dark"] .bottom-navigation .nav-item.active { color: var(--nav-blue--fg); background-color: var(--nav-blue-soft); background-image: none; border-color: var(--nav-blue-border--bd); }
:root[data-theme="dark"] .bottom-nav .nav-item:focus-visible, :root[data-theme="dark"] .bottom-navigation .nav-item:focus-visible, :root[data-theme="dark"] .bottom-nav .sell-button:focus-visible, :root[data-theme="dark"] .bottom-navigation .add-button:focus-visible { outline-color: rgba(20, 87, 217, 0.18); }
:root[data-theme="dark"] .bottom-nav .sell-button, :root[data-theme="dark"] .bottom-navigation .add-button { border-color: currentColor; background-color: var(--nav-blue); background-image: none; color: #ffffff; }
:root[data-theme="dark"] .bottom-nav .sell-button:hover, :root[data-theme="dark"] .bottom-navigation .add-button:hover { background-color: var(--nav-blue-dark); background-image: none; box-shadow: 0 9px 22px rgba(20, 87, 217, 0.24); }
@media (max-width: 768px) {
  :root[data-theme="dark"] .bottom-nav, :root[data-theme="dark"] .bottom-navigation { background-color: rgba(23, 27, 36, 0.97) !important; background-image: none !important; border-top-color: var(--nav-border--bd) !important; border-right-color: currentColor !important; box-shadow: 0 -6px 22px rgba(16, 24, 40, 0.148) !important; }
  :root[data-theme="dark"] .bottom-nav .sell-button, :root[data-theme="dark"] .bottom-navigation .add-button { box-shadow: 0 6px 16px rgba(20, 87, 217, 0.18) !important; }
}
@media (min-width: 769px) {
  :root[data-theme="dark"] .bottom-nav, :root[data-theme="dark"] .bottom-navigation { background-color: rgba(23, 27, 36, 0.98) !important; background-image: none !important; border-color: currentColor !important; border-right-color: var(--nav-border--bd) !important; box-shadow: 5px 0 24px rgba(16, 24, 40, 0.103) !important; }
  :root[data-theme="dark"] .nav-brand-campus { color: var(--nav-blue--fg); }
  :root[data-theme="dark"] .nav-brand-marketplace { color: #bdbcd7; }
  :root[data-theme="dark"] .nav-brand::after { background-color: var(--nav-blue); background-image: none; }
  :root[data-theme="dark"] .bottom-nav .sell-button, :root[data-theme="dark"] .bottom-navigation .add-button { box-shadow: 0 6px 16px rgba(20, 87, 217, 0.18) !important; }
}
:root[data-theme="dark"] .bottom-nav .sell-button, :root[data-theme="dark"] .bottom-navigation .add-button { border-color: currentColor !important; background-color: var(--nav-blue) !important; background-image: none !important; color: #ffffff !important; }
:root[data-theme="dark"] .bottom-nav .nav-item { color: var(--nav-muted--fg) !important; background-color: transparent !important; background-image: none !important; border-color: transparent !important; }
:root[data-theme="dark"] .bottom-nav .nav-item svg { fill: none !important; stroke: currentColor !important; }
:root[data-theme="dark"] .bottom-nav .nav-item.active { color: var(--nav-blue--fg) !important; background-color: var(--nav-blue-soft) !important; background-image: none !important; border-color: var(--nav-blue-border--bd) !important; }
:root[data-theme="dark"] .bottom-nav .nav-item:hover { color: var(--nav-blue--fg) !important; background-color: #1e232f !important; background-image: none !important; }
:root[data-theme="dark"] .bottom-nav .sell-button { border-color: currentColor !important; background-color: var(--nav-blue) !important; background-image: none !important; color: #ffffff !important; }
@media (min-width: 769px) {
  :root[data-theme="dark"] .bottom-nav { background-color: #171b24 !important; background-image: none !important; border-color: currentColor !important; border-right-color: var(--nav-border--bd) !important; box-shadow: 4px 0 20px rgba(16, 24, 40, 0.112) !important; }
}
@media (max-width: 768px) {
  :root[data-theme="dark"] .bottom-nav { background-color: rgba(23, 27, 36, 0.98) !important; background-image: none !important; border-color: currentColor !important; border-top-color: #282e3c !important; box-shadow: 0 -4px 18px rgba(16, 24, 40, 0.112) !important; }
}
:root[data-theme="dark"] .bottom-nav .nav-badge, :root[data-theme="dark"] .bottom-navigation .nav-badge { background-color: #d92d20; background-image: none; color: #ffffff; }
@media (max-width: 768px) {
  :root[data-theme="dark"] .bottom-nav .nav-badge, :root[data-theme="dark"] .bottom-navigation .nav-badge { border-color: #181d25; }
}
@media (min-width: 769px) {
  :root[data-theme="dark"] .bottom-nav .nav-footer, :root[data-theme="dark"] .bottom-navigation .nav-footer { border-top-color: var(--nav-border--bd); }
  :root[data-theme="dark"] .nav-footer-links { color: var(--nav-muted--fg); }
  :root[data-theme="dark"] .nav-footer-links a { color: var(--nav-muted--fg); }
  :root[data-theme="dark"] .nav-footer-links a:hover { color: var(--nav-blue--fg); }
  :root[data-theme="dark"] .nav-footer-note { color: var(--nav-muted--fg); }
}
@media (min-width: 769px) {
  :root[data-theme="dark"] .bottom-nav .sell-button:hover, :root[data-theme="dark"] .bottom-navigation .add-button:hover, :root[data-theme="dark"] .bottom-nav .sell-button:active, :root[data-theme="dark"] .bottom-navigation .add-button:active { box-shadow: 0 6px 16px rgba(20, 87, 217, 0.18) !important; }
}
@media (min-width: 769px) {
  :root[data-theme="dark"] .bottom-nav .sell-button:hover, :root[data-theme="dark"] .bottom-navigation .add-button:hover { background-color: var(--nav-blue-dark) !important; background-image: none !important; }
}
/* ===== END DARK THEME ===== */


/* =========================================================
   GUESTS (not logged in): no Messages in the sidebar or the
   bottom bar — it only works with an account. auth.js sets
   <html data-account="guest|user">.
   ========================================================= */
:root[data-account="guest"] .bottom-nav [data-nav="messages"],
:root[data-account="guest"] .bottom-navigation [data-nav="messages"] {
  display: none !important;
}

/* Phones: four buttons fill the bar instead of leaving an empty slot. */
@media (max-width: 768px) {
  :root[data-account="guest"] .bottom-nav,
  :root[data-account="guest"] .bottom-navigation {
    grid-template-columns: 1fr 1fr 1.05fr 1fr !important;
  }
}


/* =========================================================
   "PAY WITH …" box in item details (Home preview and the
   Marketplace). Built by CampusCatalog.paymentBox().
   ========================================================= */
.pay-box {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #f8fafc;
}

.pay-box-head { display: flex; align-items: center; gap: 8px; color: #101828; font-size: 14px; }
.pay-box-head svg.ui-icon { width: 18px; height: 18px; color: #1457d9; }

.pay-qr-link { display: block; width: 150px; margin-top: 12px; border-radius: 12px; }
.pay-qr {
  width: 150px;
  height: 150px;
  display: block;
  padding: 6px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #ffffff;
  object-fit: contain;
}
.pay-qr-link:hover .pay-qr { border-color: #1457d9; }
.pay-qr-link:focus-visible { outline: 3px solid rgba(20, 87, 217, .3); outline-offset: 2px; }

.pay-note { margin: 10px 0 0; color: #667085; font-size: 12.5px; line-height: 1.5; }
.pay-note a { color: #1457d9; font-weight: 700; }

:root[data-theme="dark"] .pay-box { border-color: #2b3240; background: #1d232e; }
:root[data-theme="dark"] .pay-box-head { color: #e4e8ef; }
:root[data-theme="dark"] .pay-box-head svg.ui-icon { color: #6796f1; }
:root[data-theme="dark"] .pay-qr { border-color: #2b3240; }   /* QR stays on white so it scans */
:root[data-theme="dark"] .pay-note { color: #9ba3b2; }
:root[data-theme="dark"] .pay-note a { color: #6796f1; }

/* Profile photo inside an avatar circle (CampusAuth.avatar); initials show when there is none */
.avatar-photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
:has(> .avatar-photo) { overflow: hidden; padding: 0 !important; }