/* Bottom navigation for phones (resources/views/frontend/includes/mobile-nav.blade.php).
   Visibility (<=575px) still comes from custom.css .add_newp. */
.sg-bnav.add_newp {
    padding: 0 6px env(safe-area-inset-bottom);
    background: #fff;
    border-top: 1px solid #E3E7EC;
    box-shadow: 0 -4px 16px rgba(18, 22, 28, .08);
    z-index: 1000;
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
    transition: transform .2s ease;
}
.sg-bnav.is-hidden { transform: translateY(110%); }
.sg-bnav ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; margin: 0; padding: 0; list-style: none; }
.sg-bnav li { display: flex; justify-content: center; }
.sg-bnav a { -webkit-tap-highlight-color: transparent; text-decoration: none; }
.sg-bnav-item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    width: 100%; min-height: 60px; padding: 8px 2px 6px; color: #5B6470;
}
.sg-bnav-item:hover, .sg-bnav-item:focus { color: #12161C; text-decoration: none; }
.sg-bnav-item.is-active { color: #157A2C; }
.sg-bnav-item.is-active::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; margin-left: -14px;
    border-radius: 0 0 3px 3px; background: #157A2C;
}
.sg-bnav-ic { position: relative; display: flex; }
.sg-bnav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sg-bnav-item.is-active svg { stroke-width: 2.2; }
.sg-bnav-label { font-size: 11px; font-weight: 500; line-height: 1.2; white-space: nowrap; color: inherit; margin: 0; }
.sg-bnav-item.is-active .sg-bnav-label { font-weight: 600; }
.sg-bnav-badge {
    position: absolute; top: -5px; left: 14px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #D92D20; color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
.sg-bnav-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* Post ad: raised green button */
.sg-bnav-post { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 2px 6px; color: #157A2C; }
.sg-bnav-post:hover, .sg-bnav-post:focus { color: #11662A; text-decoration: none; }
.sg-bnav-fab {
    display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-top: -22px;
    border-radius: 50%; background: #157A2C; color: #fff;
    box-shadow: 0 6px 16px rgba(21, 122, 44, .35), 0 0 0 4px #fff;
    transition: transform .15s ease, background-color .15s ease;
}
.sg-bnav-fab svg { width: 28px; height: 28px; stroke-width: 2.4; }
.sg-bnav-post:active .sg-bnav-fab { transform: scale(.94); }
.sg-bnav-post:hover .sg-bnav-fab, .sg-bnav-post.is-active .sg-bnav-fab { background: #11662A; }
.sg-bnav-post .sg-bnav-label { font-weight: 600; }

.sg-bnav a:focus-visible { outline: 3px solid #0070C0; outline-offset: -3px; border-radius: 10px; }
.sg-bnav-post:focus-visible { outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .sg-bnav, .sg-bnav-fab { transition: none; }
}

/* Header (logged in): notifications + messages buttons and avatar.
   Same look as the designs: 40px round icon buttons, red count badge. */
/* The old wrappers drew their own white circle with padding; the button
   inside is now the circle, so the wrapper is just a 40px box. */
.userNotifications, .userMessages { width: 40px !important; height: 40px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; position: relative; vertical-align: middle; }
.sg-hbtn { position: relative; display: flex !important; align-items: center; justify-content: center; flex: none; width: 40px !important; height: 40px !important; padding: 0 !important; margin: 0 !important; border-radius: 50%; background: #fff; color: #12161C; text-decoration: none; transition: background-color .15s; }
.sg-hbtn:hover, .sg-hbtn:focus { background: #E6F1FA; color: #12161C; text-decoration: none; }
.sg-hbtn:focus-visible { outline: 3px solid #4DA3E0; outline-offset: 2px; }
.sg-hbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sg-hbadge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #C62828; color: #fff; font: 700 11px/18px Poppins, system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px #000; }
.sg-hinitials { width: 36px; height: 36px; border-radius: 50%; background: #0070C0; color: #fff; font: 600 13px/36px Poppins, system-ui, sans-serif; text-align: center; display: block; float: left; margin: 5px 10px 0 0; }
/* Logged in, 769px+: the bell / messages buttons are placed from the right
   edge, so stop the search box before them (they overlapped up to ~1150px). */
@media (min-width: 769px) {
    .hom-nav:has(#userNotification) .top-ser { max-width: calc(100vw - 780px); }
}

/* "Install the app" banner (resources/views/frontend/includes/pwa-install.blade.php) */
.sg-install { position: fixed; left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 999; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 6px 24px rgba(18, 22, 28, .22); font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif; }
.sg-install[hidden] { display: none; }
.sg-install img { flex: none; width: 44px; height: 44px; border-radius: 10px; }
.sg-install-text { flex: 1; min-width: 0; line-height: 1.3; }
.sg-install-text strong { display: block; font-size: 14px; font-weight: 600; color: #12161C; }
.sg-install-text span { display: block; font-size: 12px; color: #5B6470; }
.sg-install-yes { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: #157A2C; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.sg-install-yes:hover, .sg-install-yes:focus { background: #11662A; }
.sg-install-no { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 44px; padding: 0; border: 0; background: none; color: #5B6470; cursor: pointer; }
.sg-install-no svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }