/* ══════════════════════════════════════════════════════════════
   ShareBite — Shared Responsive Layer
   Loaded LAST on every page so it refines per-page stylesheets without
   rewriting them.

   Breakpoints:
     ≤1024px  small laptop / large tablet
     ≤900px   tablet — nav collapses to hamburger
     ≤600px   phone
     ≤380px   small phone
══════════════════════════════════════════════════════════════ */


/* ══ 0. GLOBAL SAFETY LAYER ══ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }
p, h1, h2, h3, h4, span, a, td, th, li, strong, label {
  overflow-wrap: break-word; word-wrap: break-word;
}
input, select, textarea, button { font-family: inherit; max-width: 100%; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ══ 1. "Good for your animals" badge ══
   Bottom of the card image, so it never covers the category tag
   (top-left) or the urgent/scheduled badge (top-right). */
.feed-relevant {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background: rgba(33, 138, 110, 0.94);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 50px;
  backdrop-filter: blur(4px);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ══ 2. MOBILE NAV TOGGLE (button injected by auth.js) ══ */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  order: 2;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ══ 3. SMALL LAPTOP / LARGE TABLET (≤1024px) ══ */
@media (max-width: 1024px) {
  nav { padding: 0 24px; }
  .hero { gap: 28px; }
  .feed-grid, .heroes-grid, .leaderboard-grid, .interviews-grid,
  .steps-grid, .team-grid, .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  }
  .report-modal { max-width: 92vw; }
}


/* ══ 4. TABLET (≤900px) — nav collapses ══ */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  nav { position: relative; padding: 0 18px; flex-wrap: wrap; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--teal-dark, #1a6b5a);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 10px;
    margin: 0;
    list-style: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
    border-top: 1px solid rgba(255,255,255,0.1);
    z-index: 999;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 13px 22px; font-size: 0.95rem; }
  .nav-links a::after { display: none; }
  .nav-links a:hover { background: rgba(255,255,255,0.08); }

  .hero { grid-template-columns: 1fr !important; text-align: center; }
  .hero-cta { justify-content: center; }

  .profile-details, .modal-grid, .info-row, .panel-row {
    grid-template-columns: 1fr !important;
  }
}


/* ══ 5. PHONE (≤600px) ══ */
@media (max-width: 600px) {
  nav { padding: 0 14px; height: 58px; }
  .nav-logo span { font-size: 1.05rem; }

  .page, .page-body, .doc-wrap, .terms-wrap {
    padding-left: 14px; padding-right: 14px;
  }

  .feed-grid, .heroes-grid, .leaderboard-grid, .interviews-grid,
  .steps-grid, .team-grid, .stat-grid, .category-grid {
    grid-template-columns: 1fr !important;
  }

  h1 { font-size: 1.7rem !important; }
  .section-title { font-size: 1.35rem !important; }
  .hero h1 { font-size: 2rem !important; }

  /* Modals: full-width, scrollable */
  .modal-backdrop { padding: 12px; align-items: flex-start; }
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    margin: 12px auto !important;
    padding: 22px 16px !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  .modal-actions { flex-direction: column-reverse; gap: 8px; }
  .modal-actions button { width: 100%; }

  /* Profile action buttons are handled by the .pa-btn system in profile.html
     (2-across on phones, full width on very small screens). Only legacy
     .btn-edit buttons on other pages need the stacked treatment. */
  .profile-header-actions { flex-direction: column; width: 100%; }
  .profile-header-actions .btn-edit { width: 100%; }

  /* Report */
  .report-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .report-stat-value { font-size: 1.25rem; }
  .report-meta { flex-direction: column; gap: 4px; }
  .report-title { font-size: 1.25rem; }
  .report-section .report-table {
    display: block; overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  #reportRangeTabs { width: 100%; }
  .report-range-btn { flex: 1; min-width: 0; padding: 9px 8px; font-size: 0.8rem; }

  /* ── DONOR: My Food Listings (donor/my-listings.html) ──
     The rules here used to target #postNewBtn, .claimer-row and
     .claimer-actions — markup that no longer exists since the page moved
     out of the animal-owner feed. They matched nothing, so the page fell
     back to desktop layout on phones. */

  /* Header: title block over a full-width post button */
  .feed-header { flex-direction: column; gap: 16px; }
  .feed-header-left p { max-width: none; }
  .btn-post-new,
  #postNewBtn { width: 100%; text-align: center; align-self: stretch; }

  /* Three tabs across one row. They were flex:1 1 100%, which stacked them
     into three full-width bars and pushed the listings below the fold. */
  .donor-tabs { width: 100%; gap: 6px !important; flex-wrap: nowrap !important; }
  .donor-tabs .filter-btn {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 9px 6px;
    font-size: 0.8rem;
  }

  /* Claimer rows: keep name and button side by side, but stop the button
     being squeezed to nothing by a long name. */
  .donor-claimer { gap: 10px; }
  .donor-claimer-info { min-width: 0; flex: 1; }
  .donor-claimer-info strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .donor-btn-confirm, .donor-btn-confirmed, .donor-btn-expired { flex-shrink: 0; }

  /* Card title and category chip stop fighting for the same line */
  .donor-card-top { flex-wrap: wrap; gap: 6px; }
  .donor-card-top h3 { font-size: 1.02rem; line-height: 1.35; }

  .donor-btn-delete { min-height: 44px; }

  /* ── Recent activity rows (animal owner) ──
     The round check icon is purely decorative and eats horizontal space on
     thin screens, squeezing the text. Hide it and let the text breathe. */
  .activity-item {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px 10px !important;
    position: relative;
  }
  .activity-item .activity-icon { display: none !important; }
  .activity-item .activity-text {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  /* Chat button drops below the text, sized to content and right-aligned */
  .activity-item > div:last-child {
    flex: 0 0 auto !important;
    margin-left: auto;
  }
  .activity-item > div:last-child button {
    padding: 8px 16px !important;
  }

  /* Chat widget near-fullscreen.

     This used to size .chat-window directly, which didn't work: the window
     is a flex CHILD of .chat-widget, so its own left/right had no effect,
     while .chat-widget stayed pinned at right:28px. A child of
     width:calc(100vw - 24px) hanging off that anchor put its left edge at
     roughly -4px — the message panel was clipped off the side of the
     screen. Sizing the positioned PARENT is what actually works. */
  .chat-widget {
    left: 12px !important;
    right: 12px !important;
    bottom: 20px !important;
    align-items: stretch !important;
  }
  .chat-window {
    width: 100% !important;
    max-width: none !important;
    height: 70vh !important;
  }
  /* Keep the launcher button on the right, now that the widget spans
     the full width. */
  .chat-fab { align-self: flex-end !important; }

  footer { flex-direction: column; text-align: center; gap: 14px; padding: 22px 16px; }
  .footer-links-row { flex-wrap: wrap; justify-content: center; gap: 12px 18px; }

  table { display: block; overflow-x: auto; white-space: nowrap; }

  button, .btn-primary, .btn-secondary, .btn-submit, .btn-edit { min-height: 44px; }
}


/* ══ 6. SMALL PHONE (≤380px) ══ */
@media (max-width: 380px) {
  /* Below this a long name plus a Confirm button can't share a line */
  .donor-claimer { flex-direction: column; align-items: stretch; gap: 6px; }
  .donor-claimer-info strong { white-space: normal; }
  .donor-btn-confirm, .donor-btn-confirmed, .donor-btn-expired { width: 100%; padding: 8px; }
  .donor-tabs .filter-btn { font-size: 0.74rem; padding: 9px 4px; }

  nav { padding: 0 10px; }
  .nav-logo span { font-size: 0.95rem; }
  .page, .page-body { padding-left: 10px; padding-right: 10px; }
  h1 { font-size: 1.45rem !important; }
  .hero h1 { font-size: 1.7rem !important; }
  .section-title { font-size: 1.2rem !important; }
  .modal { padding: 18px 12px !important; }
  .report-stats { grid-template-columns: 1fr !important; }
  .report-range-btn { font-size: 0.75rem; padding: 8px 6px; }
  .stat-box, .report-stat { padding: 12px; }
}


/* ══ 7. LANDSCAPE PHONES ══ */
@media (max-height: 500px) and (orientation: landscape) {
  .modal { max-height: 94vh; margin: 3vh auto !important; }
  .chat-window { height: 88vh !important; }
  .nav-links { max-height: 70vh; overflow-y: auto; }
}


/* ══ 8. INPUT / ACCESSIBILITY ══ */
/* iOS zooms when focusing inputs under 16px — prevent that */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  html, body { overflow: visible !important; }
}


/* ══════════════════════════════════════════════════════════════════
   NAV ACTIONS — notifications, profile chip, log out
   Injected by renderNavActions() in js/auth.js, so these styles are the
   single definition for all pages. They used to be inline in the JS
   template, which meant no media query could reach them and the layout
   couldn't adapt on phones.
   ══════════════════════════════════════════════════════════════════ */

.nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Round icon buttons, shared look for the bell and the log-out arrow */
.btn-notif,
.btn-logout {
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  position: relative;
  transition: background 0.18s;
}
.btn-notif:hover,
.btn-logout:hover { background: rgba(255,255,255,0.24); }
.btn-notif:focus-visible,
.btn-logout:focus-visible,
.user-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.55);
}

.notification-wrapper { position: relative; }

.notif-badge {
  position: absolute;
  top: -2px; right: -2px;
  background: #e06520;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 10px;
  border: 2px solid #1a6b5a;
}

/* Profile chip */
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 4px 14px 4px 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 50px;
  max-width: 220px;
  transition: background 0.18s;
}
.user-chip:hover { background: rgba(255,255,255,0.24); }

.user-avatar {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.user-avatar svg { width: 18px; height: 18px; }
.user-avatar-emoji { font-size: 1.1rem; line-height: 1; }

.user-chip-name {
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Notification dropdown */
.notif-dropdown {
  display: none;
  position: absolute;
  top: 48px;
  right: 0;
  width: 300px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  z-index: 1000;
  overflow: hidden;
}
.notif-dropdown.open { display: block; }

.notif-head {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  font-weight: 700;
  color: #1a6b5a;
  font-size: 0.9rem;
  background: #fcfcfc;
}
.notif-list { max-height: 320px; overflow-y: auto; }
.notif-empty {
  padding: 22px 16px;
  color: #3d4f47;
  font-size: 0.85rem;
  text-align: center;
}


/* ── PHONE (≤600px) ── */
@media (max-width: 600px) {
  .nav-user { gap: 8px; }

  /* Two controls only — bell and profile — sitting together on the right.
     The name is dropped (it pushed the row past the screen edge) and the
     chip collapses to a circle exactly matching the bell, so the pair
     reads as one set rather than a button next to a pill. */
  .user-chip-name { display: none; }
  .user-chip {
    padding: 0;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    justify-content: center;
    overflow: hidden;
  }
  .user-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    background: rgba(255,255,255,0.22);
  }
  /* The photo should fill the circle — this is the account's own avatar
     or chosen emoji, so it doubles as the "you are signed in as" cue. */
  .user-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .user-avatar span { font-size: 1.15rem; }

  .btn-notif { width: 36px; height: 36px; flex-basis: 36px; }

  /* Log out moves into the hamburger menu — see .nav-logout-item below. */
  .btn-logout { display: none; }

  /* Anchored to the bell, a 300px panel ran off the left edge of a small
     screen. Pin it to the viewport instead so it can never be clipped. */
  .notif-dropdown {
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
  .notif-list { max-height: 60vh; }
}

@media (max-width: 380px) {
  .nav-user { gap: 6px; }
  .btn-notif { width: 34px; height: 34px; flex-basis: 34px; }
  .user-chip { width: 34px; height: 34px; flex-basis: 34px; }
  .user-avatar { width: 34px; height: 34px; flex-basis: 34px; }
}


/* ══════════════════════════════════════════════════════════════════
   MOBILE HEADER LAYOUT
   The bar holds a logo plus up to four controls (bell, profile, log out,
   menu). At 360px those were colliding, which is what made the header
   look cramped. Everything below trims the pieces so they sit evenly.
   ══════════════════════════════════════════════════════════════════ */

/* Give the burger the same round treatment as the bell and log-out button
   so the right-hand cluster reads as one group. */
.nav-toggle {
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background 0.18s;
}
.nav-toggle:hover { background: rgba(255,255,255,0.24); }
.nav-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.55);
}

@media (max-width: 900px) {
  nav { gap: 10px; }

  /* Pin the logo left and let everything else pack against the right edge,
     so the bell, avatar and burger end up adjacent.

     The previous approach fought `justify-content: space-between` with a
     margin-left:auto on the slot. That works only while the flex-child
     count stays exactly as expected — add or remove one item (a page
     without a nav-actions slot, say) and the spacing breaks again.
     Switching the axis alignment instead is deterministic: whatever the
     children are, one auto margin after the logo absorbs all free space. */
  nav { justify-content: flex-end; }
  nav .nav-logo { margin-right: auto; }

  #nav-actions-slot,
  nav .nav-actions { margin-left: 0; }
  .nav-user { margin-left: 0; }
}

@media (max-width: 600px) {
  /* A 40px logo plus four 38px controls overflowed a 360px screen */
  .nav-logo img { height: 32px !important; }
  .nav-toggle { width: 36px; height: 36px; flex-basis: 36px; }
  nav { gap: 8px; padding: 0 12px; }
}

@media (max-width: 380px) {
  .nav-logo img { height: 28px !important; }
  .nav-toggle { width: 34px; height: 34px; flex-basis: 34px; }
  nav { gap: 6px; padding: 0 10px; }
}


/* ── LOG OUT INSIDE THE MOBILE MENU ──
   Added by syncMobileLogoutItem() in js/auth.js. Hidden on wide screens,
   where the round log-out button in the header is used instead. */
.nav-logout-item { display: none; }

@media (max-width: 600px) {
  .nav-logout-item { display: block; }
  .nav-logout-item a {
    color: #ffd9c2 !important;
    font-weight: 600;
    border-top: 1px solid rgba(255,255,255,0.14);
    margin-top: 4px;
  }
}

@media (max-width: 900px) {
  
  /* 1. Pin the actions block WITHOUT using transform, so the dropdown can escape */
  .nav-actions {
    display: flex !important;
    position: absolute !important;
    right: 65px !important; 
    top: 0 !important;
    bottom: 0 !important;
    height: 36px !important; /* Matches the avatar height */
    margin: auto !important; /* Centers vertically safely */
  }

  /* 2. Position the dropdown relative to the viewport and allow scrolling */
  .notif-dropdown {
    position: fixed !important; 
    top: 70px !important; 
    right: 16px !important; 
    width: 320px !important; 
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 90px) !important; /* Stops it before the bottom of the screen */
    overflow-y: auto !important;               /* Adds a scrollbar if the list is too long */
    z-index: 99999 !important;                 /* Forces it to the very top layer */
  }

  /* 2. Ensure the bell and the avatar sit side-by-side */
  .nav-user {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* 3. Force the profile button wrapper to be visible */
  .user-chip {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
  }

 /* 4. Force the avatar container to perfectly center its contents */
  .user-avatar {
    display: flex !important;
    align-items: center !important;      /* Centers vertically */
    justify-content: center !important;  /* Centers horizontally */
    visibility: visible !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;       /* Keeps the circle shape perfect */
    overflow: hidden !important;         /* Prevents anything from spilling out */
  }
  
  /* Fix image and SVG sizing */
  .user-avatar img, 
  .user-avatar svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Fix emoji text alignment */
  .user-avatar-emoji {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 1.3rem !important;        /* Scales the emoji to fit nicely */
    line-height: 1 !important;           /* Kills any weird text spacing pushing it up/down */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 5. Hide the text name to save space */
  .user-chip-name {
    display: none !important;
  }

  /* 6. Hide the desktop logout button */
  .btn-logout {
    display: none !important;
  }

  /* 7. Break the notification dropdown out of the squished container */
  .notif-dropdown {
    position: fixed !important; 
    top: 70px !important; /* Drops it just below the navbar (adjust if your nav is taller/shorter) */
    right: 16px !important; /* Adds a small gap from the right edge of the screen */
    width: 320px !important; /* Gives the box a healthy width */
    max-width: calc(100vw - 32px) !important; /* Ensures it never overflows on super tiny screens */
  }
}

/* 1. Force the entire nav to lock to the top of the viewport
      :not(.sidebar-nav) — the admin portal's left sidebar also uses a bare
      <nav class="sidebar-nav"> element for its link list. Without this
      exclusion, this same rule matched that <nav> too and forced the
      sidebar's nav to lock to the TOP of the viewport at full width,
      covering the page instead of sitting as the left column. */
nav:not(.sidebar-nav) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9998 !important; /* High enough to stay over content, but below your 99999 modals */
  
  /* A fixed header must have a solid background, or scrolling text will bleed through */
  background-color: #1a6b5a; /* Change this to match your actual ShareBite header color */
}

/* 2. Push the rest of the page down so it doesn't hide behind the fixed header.
      Scoped the same way as the nav rule above — the admin portal (#adminApp)
      uses a fixed left sidebar + topbar, not a fixed top navbar, so it doesn't
      need this offset and shouldn't get an unexplained 75px gap at the top. */
body:not(:has(#adminApp)) {
  padding-top: 75px !important; /* Adjust this number to match the actual height of your nav bar */
}

/* ---------------------------------------------------
   Lock Navbar Login/Signup Button Sizes Globally
--------------------------------------------------- */
.nav-actions .btn-login,
.nav-actions .btn-signup {
  /* Restrict size and positioning ONLY */
  width: auto !important;
  display: inline-block !important;
  font-size: 0.95rem !important;
  margin: 0 4px !important;
  
  /* Reset the padding back to a normal navbar size in case the login form makes it massive */
  padding: 8px 18px !important; 
}

/* Keep them compact on mobile so they don't crash into the menu */
@media (max-width: 900px) {
  .nav-actions .btn-login,
  .nav-actions .btn-signup {
    font-size: 0.85rem !important;
    padding: 6px 12px !important;
    margin: 0 2px !important;
  }
}

@media (max-width: 900px) {
  /* ---------------------------------------------------
     Scale down "Pet Heroes" (Monthly Contributors)
  --------------------------------------------------- */
  .hero-card {
    min-height: 180px !important; /* Reduces the height of the large photo cards */
  }
  
  .hero-card-overlay {
    padding: 14px !important; /* Tighter padding inside the card */
  }

  .hero-card-overlay strong {
    font-size: 1.1rem !important; /* Smaller contributor name */
  }

  .hero-card-overlay span:last-child {
    font-size: 0.8rem !important; /* Smaller "diverted" text */
  }

  .hero-card-overlay .tag {
    font-size: 0.7rem !important; /* Smaller business type badge */
    padding: 3px 8px !important;
    margin-bottom: 4px !important;
  }

  /* ---------------------------------------------------
     Scale down "Leaderboard" (Weekly Contributors)
  --------------------------------------------------- */
  /* Override the 280px inline style so they can shrink more on phones */
  #leaderboardGrid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 12px !important;
  }

  .lb-card {
    padding: 16px !important; /* Tighter box padding */
  }

  .lb-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.1rem !important;
  }

  .lb-badge {
    font-size: 0.65rem !important;
    padding: 3px 6px !important;
  }

  .lb-name {
    font-size: 1rem !important; /* Smaller name */
  }

  .lb-category, 
  .lb-subtitle, 
  .lb-stat-label {
    font-size: 0.75rem !important; /* Smaller secondary text */
  }

  .lb-kg {
    font-size: 1.25rem !important; /* Slightly smaller weight highlight */
  }
}

@media (max-width: 900px) {
  /* ---------------------------------------------------
     Shrink "Top Contributors of the Month" (Pet Heroes)
  --------------------------------------------------- */
  /* Force the grid to fit multiple smaller cards per row instead of stacking them */
  .heroes-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }

  /* Make the cards themselves much shorter and more compact */
  .hero-card {
    min-height: 140px !important; 
    border-radius: 12px !important;
  }

  .hero-card-overlay {
    padding: 10px !important;
  }

  .hero-card-overlay strong {
    font-size: 0.9rem !important; /* Smaller name */
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }

  .hero-card-overlay span:last-child {
    font-size: 0.65rem !important; /* Tiny description text */
    line-height: 1.2 !important;
  }

  /* ---------------------------------------------------
     Compact the Footer Visually
  --------------------------------------------------- */
  /* Reduce the massive white space padding on the footer */
  footer {
    padding: 30px 20px 15px !important;
  }

  /* Place footer link groups side-by-side in a grid instead of a single long column */
  .footer-top {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 12px !important;
    margin-bottom: 20px !important;
  }

  /* Make the ShareBite logo and description span the full width at the top */
  .footer-brand {
    grid-column: 1 / -1 !important;
    margin-bottom: 5px !important;
  }

  .footer-brand p {
    font-size: 0.8rem !important;
    margin-top: 8px !important;
    line-height: 1.4 !important;
  }

  /* Shrink the footer headings and link text */
  .footer-links h4 {
    font-size: 0.85rem !important;
    margin-bottom: 8px !important;
  }

  .footer-links ul li {
    margin-bottom: 6px !important;
  }

  .footer-links ul li a {
    font-size: 0.8rem !important;
  }

  /* Tighten up the bottom copyright bar */
  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    padding-top: 15px !important;
    font-size: 0.75rem !important;
    text-align: center !important;
  }

  /* Make the ShareBite logo and description span the full width and center them */
  .footer-brand {
    grid-column: 1 / -1 !important;
    margin-bottom: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}
@media (max-width: 560px) {
  /* Stack Chat + Confirm full-width on narrow screens instead of letting
     them squeeze the claimer's name to a single character. */
  .donor-claimer { flex-wrap: wrap; }
  .donor-btn-chat { width: 100%; padding: 8px; }
}