/* ═══════════════════════════════════════════════════════
   O3Naija Mobile Action Bar — Stylesheet v1.0.0
   Only visible on screens ≤ 768px
   ═══════════════════════════════════════════════════════ */

:root {
  --o3-green:       #1a7a3c;
  --o3-green-dark:  #0f5a2a;
  --o3-green-light: #e8f5ed;
  --o3-white:       #ffffff;
  --o3-gray-50:     #f8f9fa;
  --o3-gray-100:    #f1f3f4;
  --o3-gray-200:    #e8eaed;
  --o3-gray-400:    #9aa0a6;
  --o3-gray-600:    #5f6368;
  --o3-gray-900:    #202124;
  --o3-red:         #e53935;
  --o3-bar-h:       64px;
  --o3-hub-size:    58px;
  --o3-radius:      16px;
  --o3-shadow:      0 -2px 20px rgba(0,0,0,.10);
  --o3-tr:          .22s cubic-bezier(.4,0,.2,1);
}

/* ── Only show on mobile ─────────────────────────── */
.o3mob-bar,
.o3mob-hub-panel,
.o3mob-share-sheet {
  display: none;
}

@media (max-width: 768px) {

/* ════════════════════════════════════════════════
   BOTTOM BAR
════════════════════════════════════════════════ */
.o3mob-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--o3-bar-h);
  background: var(--o3-white);
  border-top: 1px solid var(--o3-gray-200);
  box-shadow: var(--o3-shadow);
  z-index: 9990;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* glassmorphism */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,.95);
}

/* push page content above bar */
body {
  padding-bottom: calc(var(--o3-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── Each bar button ─────────────────────────── */
.o3mob-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  border-radius: 0;
  color: var(--o3-gray-600);
  font-family: inherit;
  position: relative;
  transition: color var(--o3-tr);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.o3mob-btn:active { transform: scale(.91); }

/* ripple on tap */
.o3mob-btn::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  background: var(--o3-green-light);
  opacity: 0;
  transition: opacity .15s;
}
.o3mob-btn:active::after { opacity: 1; }

.o3mob-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.o3mob-icon {
  display: block;
  transition: transform var(--o3-tr), color var(--o3-tr);
}
.o3mob-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  white-space: nowrap;
  transition: color var(--o3-tr);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Love button ─────────────────────────────── */
.o3mob-love { color: var(--o3-gray-600); }
.o3mob-love:hover,
.o3mob-love:focus-visible { color: var(--o3-red); }
.o3mob-loved { color: var(--o3-red) !important; }
.o3mob-loved .o3mob-icon { animation: heartPop .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes heartPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.5); }
  60%  { transform: scale(.88); }
  80%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── Comment, Share, Join ────────────────────── */
.o3mob-comment:hover,
.o3mob-comment:focus-visible { color: var(--o3-green); }
.o3mob-share:hover,
.o3mob-share:focus-visible   { color: #1565c0; }
.o3mob-join:hover,
.o3mob-join:focus-visible    { color: #25d366; }

/* ── Badge ───────────────────────────────────── */
.o3mob-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 17px;
  height: 17px;
  background: var(--o3-red);
  color: var(--o3-white);
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--o3-white);
  line-height: 1;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.36,.07,.19,.97);
}
.o3mob-badge.bump { animation: badgePop .3s ease; }
@keyframes badgePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* ════════════════════════════════════════════════
   HUB (centre) BUTTON
════════════════════════════════════════════════ */
.o3mob-hub {
  flex: 0 0 var(--o3-hub-size);
  width: var(--o3-hub-size);
  height: var(--o3-hub-size);
  border-radius: 50%;
  background: var(--o3-green);
  color: var(--o3-white);
  box-shadow: 0 4px 18px rgba(26,122,60,.45);
  margin-bottom: 12px;
  padding: 0;
  transition: background var(--o3-tr), transform var(--o3-tr), box-shadow var(--o3-tr);
  position: relative;
  z-index: 2;
}
.o3mob-hub::after { display: none; } /* no ripple bg needed */
.o3mob-hub:active { transform: scale(.92); }
.o3mob-hub.is-open {
  background: var(--o3-gray-900);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  transform: rotate(90deg);
}
.o3mob-hub-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.o3mob-hub-icon {
  display: block;
  transition: opacity .15s, transform .25s;
}

/* ════════════════════════════════════════════════
   HUB PANEL — bottom sheet
════════════════════════════════════════════════ */
.o3mob-hub-panel {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9995;
  pointer-events: none;
  visibility: hidden;
}
.o3mob-hub-panel.is-open {
  pointer-events: all;
  visibility: visible;
}

.o3mob-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background .3s;
}
.o3mob-hub-panel.is-open .o3mob-panel-backdrop {
  background: rgba(0,0,0,.45);
}

.o3mob-panel-sheet {
  position: absolute;
  bottom: var(--o3-bar-h);
  left: 0;
  right: 0;
  background: var(--o3-white);
  border-radius: 20px 20px 0 0;
  max-height: 80vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -6px 30px rgba(0,0,0,.14);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  scrollbar-width: none;
}
.o3mob-panel-sheet::-webkit-scrollbar { display: none; }
.o3mob-hub-panel.is-open .o3mob-panel-sheet {
  transform: translateY(0);
}

/* drag handle */
.o3mob-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--o3-gray-200);
  border-radius: 4px;
  margin: 10px auto 6px;
  flex-shrink: 0;
}

/* ── Panel Search ────────────────────────────── */
.o3mob-panel-search {
  padding: 10px 16px 6px;
}
.o3mob-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--o3-gray-100);
  border-radius: 12px;
  padding: 10px 14px;
  border: 1.5px solid transparent;
  transition: border-color var(--o3-tr), background var(--o3-tr);
}
.o3mob-search-wrap:focus-within {
  border-color: var(--o3-green);
  background: var(--o3-white);
}
.o3mob-search-wrap svg { color: var(--o3-gray-400); flex-shrink: 0; }
.o3mob-search-wrap input {
  flex: 1;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--o3-gray-900);
  outline: none;
  font-family: inherit;
}
.o3mob-search-wrap input::placeholder { color: var(--o3-gray-400); }
.o3mob-search-wrap button {
  background: none;
  border: none;
  padding: 0;
  color: var(--o3-green);
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Quick Nav Pills ─────────────────────────── */
.o3mob-quick-nav {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.o3mob-quick-nav::-webkit-scrollbar { display: none; }
.o3mob-qnav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--o3-gray-100);
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--o3-gray-700, #444);
  white-space: nowrap;
  transition: all var(--o3-tr);
  text-decoration: none;
  border: 1.5px solid transparent;
  flex-shrink: 0;
}
.o3mob-qnav-item:hover,
.o3mob-qnav-item:active { background: var(--o3-green-light); border-color: var(--o3-green); color: var(--o3-green); }
.o3mob-qnav-icon { display: flex; align-items: center; }
.o3mob-qnav-item strong { font-weight: 700; }

/* ── Section Title ───────────────────────────── */
.o3mob-panel-section { padding: 0 16px 16px; }
.o3mob-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--o3-gray-400);
  margin-bottom: 12px;
  padding: 6px 0 8px;
  border-top: 1px solid var(--o3-gray-100);
}

/* ── Category Grid ───────────────────────────── */
.o3mob-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.o3mob-cat-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  background: var(--o3-gray-50);
  border-radius: 12px;
  border: 1.5px solid var(--o3-gray-200);
  text-decoration: none;
  color: var(--o3-gray-900);
  font-size: 13px;
  font-weight: 600;
  transition: all var(--o3-tr);
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.o3mob-cat-item:active,
.o3mob-cat-item:hover {
  background: var(--o3-green-light);
  border-color: var(--o3-green);
  color: var(--o3-green);
  transform: scale(.97);
}
.o3mob-cat-active {
  background: var(--o3-green) !important;
  border-color: var(--o3-green) !important;
  color: var(--o3-white) !important;
}
.o3mob-cat-active .o3mob-cat-count { background: rgba(255,255,255,.25) !important; color: var(--o3-white) !important; }
.o3mob-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--o3-gray-200);
  border-radius: 8px;
  flex-shrink: 0;
  transition: background var(--o3-tr);
}
.o3mob-cat-item:hover .o3mob-cat-icon,
.o3mob-cat-item:active .o3mob-cat-icon { background: rgba(26,122,60,.15); }
.o3mob-cat-active .o3mob-cat-icon { background: rgba(255,255,255,.2); }
.o3mob-cat-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o3mob-cat-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--o3-gray-400);
  background: var(--o3-gray-200);
  border-radius: 8px;
  padding: 2px 6px;
  flex-shrink: 0;
  transition: all var(--o3-tr);
}
.o3mob-cat-item:hover .o3mob-cat-count { background: rgba(26,122,60,.15); color: var(--o3-green); }

/* ════════════════════════════════════════════════
   SHARE SHEET
════════════════════════════════════════════════ */
.o3mob-share-sheet {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  visibility: hidden;
}
.o3mob-share-sheet.is-open {
  pointer-events: all;
  visibility: visible;
}
.o3mob-share-sheet.is-open .o3mob-panel-backdrop {
  background: rgba(0,0,0,.45);
}
.o3mob-share-inner {
  position: absolute;
  bottom: var(--o3-bar-h);
  left: 0;
  right: 0;
  background: var(--o3-white);
  border-radius: 20px 20px 0 0;
  padding: 0 16px 24px;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -6px 30px rgba(0,0,0,.14);
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.o3mob-share-sheet.is-open .o3mob-share-inner {
  transform: translateY(0);
}
.o3mob-share-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--o3-gray-900);
  margin: 4px 0 18px;
}

.o3mob-share-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.o3mob-share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 8px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--o3-gray-800, #333);
  border: none;
  background: var(--o3-gray-100);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--o3-tr);
  -webkit-tap-highlight-color: transparent;
}
.o3mob-share-item:active { transform: scale(.94); }

.o3mob-share-item-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--o3-tr);
}
.o3mob-share-item:active .o3mob-share-item-icon { transform: scale(.9); }

/* platform colours */
.o3mob-share-fb .o3mob-share-item-icon  { background: #1877f2; color: #fff; }
.o3mob-share-tw .o3mob-share-item-icon  { background: #111;    color: #fff; }
.o3mob-share-wa .o3mob-share-item-icon  { background: #25d366; color: #fff; }
.o3mob-share-tg .o3mob-share-item-icon  { background: #229ed9; color: #fff; }
.o3mob-share-copy .o3mob-share-item-icon{ background: var(--o3-gray-200); color: var(--o3-gray-700, #444); }
.o3mob-share-email .o3mob-share-item-icon{ background: var(--o3-green); color: #fff; }

/* ════════════════════════════════════════════════
   TOAST NOTIFICATION
════════════════════════════════════════════════ */
.o3mob-toast {
  position: fixed;
  bottom: calc(var(--o3-bar-h) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--o3-gray-900);
  color: var(--o3-white);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 22px;
  z-index: 99998;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
}
.o3mob-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════════════════════
   EMOJI BURST
════════════════════════════════════════════════ */
.o3mob-burst-emoji {
  position: absolute;
  pointer-events: none;
  font-size: 24px;
  animation: o3burstFly 1s ease forwards;
  will-change: transform, opacity;
}
@keyframes o3burstFly {
  0%   { opacity: 1;  transform: translateY(0)     scale(1); }
  100% { opacity: 0;  transform: translateY(-110px) scale(1.7); }
}

/* ════════════════════════════════════════════════
   ACTIVE INDICATOR DOTS on bar (when on matching cat)
════════════════════════════════════════════════ */
.o3mob-btn.is-active-page::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--o3-green);
}

/* ════════════════════════════════════════════════
   ACCESSIBILITY
════════════════════════════════════════════════ */
.o3mob-btn:focus-visible,
.o3mob-cat-item:focus-visible,
.o3mob-share-item:focus-visible {
  outline: 2px solid var(--o3-green);
  outline-offset: 2px;
}

} /* end @media (max-width: 768px) */