/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f5f6f7;
}

/* ===== FONT AWESOME FIX - MUST COME AFTER BODY ===== */
i[class*="fa-"],
[class*="fa-"] {
    font-family: "Font Awesome 7 Free", "Font Awesome 7 Brands", inherit !important;
}

.fa-regular {
    font-weight: 400 !important;
}

.fa-solid {
    font-weight: 900 !important;
}

.fa-brands {
    font-weight: 400 !important;
}

/* Legacy `fa fa-*` icons (old v4/v5 syntax, no fa-solid/fa-regular/fa-brands
   style class) — the FA6 Free kit only ships these glyphs in the "solid"
   (900) weight. Without this they render as an empty box, e.g. the
   Public/Friends/Only Me privacy dropdown icons. */
.fa:not(.fa-regular):not(.fa-solid):not(.fa-brands) {
    font-weight: 900 !important;
}

/* Raw inline SVG icons (Sngine includes the actual <svg> markup from
   images/svg/*.svg with no width/height attributes of their own — every
   icon is wrapped in <div class="svg-container" style="width:Xpx;height:Ypx">
   by __svg_icons.tpl and is meant to be scaled down to fit that box by CSS).
   This base scaling rule used to live only in style.min.css; now that file
   is no longer loaded (it contained stale/conflicting reels CSS), so without
   this rule every such icon renders at its native SVG canvas size (often
   512x512) instead of the small size its wrapper div specifies — e.g. the
   header search icon ballooning to cover the whole feed. */
.svg-container {
    display: inline-block;
    line-height: 0;
}
.svg-container svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
/* User confirmed via live DevTools testing that the real icon SVGs (unlike
   simple test shapes) render a few px low within their own box - likely
   from their individual viewBox paddings not being perfectly symmetric.
   Scoped to .main-header only (not the base .svg-container svg rule above)
   so this nudge doesn't ripple out to every icon site-wide - post icons,
   reel icons, sidebar icons, badges etc. keep their own already-tuned
   position untouched. */
.main-header .svg-container svg {
    transform: translateY(-5px) !important;
}

/* These three base rules got caught by accident when the "strip every
   reel-related rule out of style.min.css" cleanup ran earlier — the
   cleanup matched on the substring "reel" anywhere in a rule, and these
   happened to sit in the same source neighborhood as reel rules despite
   having nothing to do with reels. Restoring them here: base card
   styling for the "no data" empty-state box (used across many pages,
   including the one this project swapped for a Lottie animation) and
   the lightbox/no-data preview width. */
.no-data { padding: 8px 20px; background: #f7f7f7; border-radius: 10px; font-weight: 500; }
body.night-mode .no-data { background: var(--card-dark-input); }
.lightbox-preview.nodata { width: 100%; }

/* ===== HEADER ===== */
.main-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e4e6eb !important;
}

/* Navbar wrapper — right side icon buttons */
.navbar-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
}

.navbar-wrapper > ul {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}

/* ── NAV ICON <li> ──────────────────────────────────────────────────────────
   Sngine sets flex:1 on <li> which makes it grow wider than 40px → oval.
   flex: 0 0 40px prevents all growth/shrink, keeps it exactly 40×40.
   The CIRCLE (background + border-radius) lives on the <a> (not <li>).
   ──────────────────────────────────────────────────────────────────────── */
.navbar-wrapper > ul > li:not(:has(.user-menu)) {
    flex: 0 0 40px !important;
    width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 2px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* ── NAV ICON <a> — THE ACTUAL CIRCLE ──────────────────────────────────────
   Icon is wrapped in <div class="svg-container"> (display:inline-block).
   Use display:block + line-height + text-align — Sngine's own technique,
   just corrected: 40px height, 0 margin, 0 padding.
   ──────────────────────────────────────────────────────────────────────── */
.navbar-wrapper > ul > li > a:not(.user-menu) {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    /* D9: was a flat grey circle (#e4e6eb) here, which is the actual rule
       winning the cascade over the red-tint block added to _head.tpl for
       D9 — this selector is more specific (3 elements vs 1), so that other
       rule never took visual effect. Setting the real default here instead
       of fighting it with a separate less-specific override. */
    background-color: #fdeceb !important;
    position: relative !important;
    text-decoration: none !important;
    color: #1c1e21 !important;
    flex-shrink: 0 !important;
    transition: background-color 0.2s ease !important;
    overflow: visible !important;
}

.navbar-wrapper > ul > li > a:not(.user-menu):hover {
    background-color: #e74c3c !important;
}
.navbar-wrapper > ul > li > a:not(.user-menu):hover .header-icon *,
.navbar-wrapper > ul > li > a:not(.user-menu):hover .header-icon path,
.navbar-wrapper > ul > li > a:not(.user-menu):hover .header-icon circle,
.navbar-wrapper > ul > li > a:not(.user-menu):hover .header-icon rect,
.navbar-wrapper > ul > li > a:not(.user-menu):hover .header-icon polyline,
.navbar-wrapper > ul > li > a:not(.user-menu):hover .header-icon line,
.navbar-wrapper > ul > li > a:not(.user-menu):hover .header-icon ellipse {
    fill: #fff !important;
    stroke: #fff !important;
}

/* ── CREATE BUTTON — dots grid, circle shape ─────────────────────────────── */
.navbar-wrapper > ul > li.d-none.d-xxl-block > a {
    background-color: #fdeceb !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='0' y='0' width='6' height='6' rx='1.5' fill='%23e74c3c'/%3E%3Crect x='9' y='0' width='6' height='6' rx='1.5' fill='%23e74c3c'/%3E%3Crect x='18' y='0' width='6' height='6' rx='1.5' fill='%23e74c3c'/%3E%3Crect x='0' y='9' width='6' height='6' rx='1.5' fill='%23e74c3c'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1.5' fill='%23e74c3c'/%3E%3Crect x='18' y='9' width='6' height='6' rx='1.5' fill='%23e74c3c'/%3E%3Crect x='0' y='18' width='6' height='6' rx='1.5' fill='%23e74c3c'/%3E%3Crect x='9' y='18' width='6' height='6' rx='1.5' fill='%23e74c3c'/%3E%3Crect x='18' y='18' width='6' height='6' rx='1.5' fill='%23e74c3c'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
}
.navbar-wrapper > ul > li.d-none.d-xxl-block > a:hover {
    background-color: #e74c3c !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='0' y='0' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3Crect x='9' y='0' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3Crect x='18' y='0' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3Crect x='0' y='9' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3Crect x='18' y='9' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3Crect x='0' y='18' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3Crect x='9' y='18' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3Crect x='18' y='18' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3C/svg%3E") !important;
}
.navbar-wrapper > ul > li.d-none.d-xxl-block > a *,
.navbar-wrapper > ul > li.d-none.d-xxl-block > a::before,
.navbar-wrapper > ul > li.d-none.d-xxl-block > a::after {
    display: none !important;
}

/* M81: Bootstrap's `.d-xxl-block` (Add/apps grid button) is meant to stay
   hidden below the xxl breakpoint (1400px) via `.d-none`, but our own
   `li:not(:has(.user-menu)) { display:flex !important }` rule above has
   higher specificity than Bootstrap's `.d-none { display:none !important }`
   utility, so it was forcing the Add button to show at every width —
   including real mobile phones, where it doesn't belong. That pushed every
   icon after it (Requests, Messages, Notifications) one slot to the right,
   shoving the Notifications icon off the right edge of the screen. */
@media (max-width: 1399.98px) {
    body .main-header .navbar-wrapper > ul > li.d-xxl-block {
        display: none !important;
    }
}

/* ── NOTIFICATION — solid red circle + white icon when unread ────────────
   Now that the DEFAULT icon background is a light red tint (D9, above),
   the old "unread" highlight color (#fde8e8) was too close to the new
   default to read as a distinct alert anymore. Bumped to solid red +
   white icon so an unread notification still clearly stands out. */
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a {
    background-color: #e74c3c !important;
}
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a .header-icon *,
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a .header-icon path,
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a .header-icon circle,
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a .header-icon polyline,
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a .header-icon ellipse {
    fill: #fff !important;
    stroke: #fff !important;
}

/* ── SVG ICONS inside nav buttons ───────────────────────────────────────── */
.navbar-wrapper > ul > li > a:not(.user-menu) .header-icon {
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    vertical-align: middle !important;
    pointer-events: none !important;
    line-height: 0 !important;
}
.navbar-wrapper > ul > li > a:not(.user-menu) .header-icon *,
.navbar-wrapper > ul > li > a:not(.user-menu) .header-icon path,
.navbar-wrapper > ul > li > a:not(.user-menu) .header-icon circle,
.navbar-wrapper > ul > li > a:not(.user-menu) .header-icon rect,
.navbar-wrapper > ul > li > a:not(.user-menu) .header-icon polyline,
.navbar-wrapper > ul > li > a:not(.user-menu) .header-icon line,
.navbar-wrapper > ul > li > a:not(.user-menu) .header-icon ellipse {
    fill: #e74c3c !important;
    stroke: #e74c3c !important;
}

/* ── UNREAD BADGE ────────────────────────────────────────────────────────── */
.navbar-wrapper .counter.red {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    background: #e74c3c !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    border: 2px solid #fff !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-align: center !important;
    z-index: 2 !important;
}
.navbar-wrapper .counter.red:not(.x-hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide Bootstrap dropdown caret arrow */
.navbar-wrapper > ul > li > a:not(.user-menu).dropdown-toggle::after {
    display: none !important;
}

/* ===== USER MENU BUTTON (avatar + name + caret) ===== */
.navbar-wrapper .user-menu {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 12px 4px 4px !important;
    border-radius: 22px !important;
    background: #f0f2f5 !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
    margin-left: 4px !important;
    color: #1c1e21 !important;
}

.navbar-wrapper .user-menu:hover {
    background: #e4e6eb !important;
    color: #1c1e21 !important;
}

.navbar-wrapper .user-menu img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.navbar-wrapper .user-menu .title {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    white-space: nowrap !important;
    max-width: 90px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.navbar-wrapper .user-menu-caret {
    font-size: 11px !important;
    color: #555 !important;
    flex-shrink: 0 !important;
}

/* Hide Bootstrap's auto-generated dropdown caret on user-menu */
.navbar-wrapper .user-menu.dropdown-toggle::after {
    display: none !important;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
}

.logo-w {
    color: #222;
}

.logo-o {
    color: #e74c3c;
}

.home-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #e74c3c;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
}

.apps-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: #f0f2f5;
    cursor: pointer;
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.search-box {
    position: relative;
    width: 60%;
}

.search-box input {
    width: 100%;
    padding: 10px 40px 10px 16px;
    border-radius: 25px;
    border: 1px solid #ddd;
    background: #f0f2f5;
    outline: none;
}

.search-box i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    cursor: pointer;
}

.notification .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 50%;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.user-menu img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* ICON BUTTON UPGRADE */
.icon-btn,
.apps-btn {
    background: linear-gradient(145deg, #f6f7f9, #e9ebee);
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
}

.icon-btn i,
.apps-btn i {
    font-size: 16px;
    color: #444;
    transition: all 0.25s ease;
}

.icon-btn:hover,
.apps-btn:hover {
    background: linear-gradient(145deg, #ffffff, #eceff3);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.icon-btn:hover i,
.apps-btn:hover i {
    color: #e74c3c;
}

.notification {
    background: linear-gradient(145deg, #fff1f1, #ffe5e5);
}

.notification i {
    color: #e74c3c;
}

.notification .badge {
    box-shadow: 0 0 0 3px #fff;
    animation: pulse 1.8s infinite;
}

.user-menu {
    padding: 6px 10px;
    border-radius: 20px;
    transition: background 0.2s ease;
}

.user-menu:hover {
    background: #f0f2f5;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ===== LAYOUT ===== */
.layout {
    display: flex;
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px;
    gap: 16px;
}

/* ===== LEFT SIDEBAR ===== */
.left-sidebar {
    width: 260px;
    background: #ffffff;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.menu {
    list-style: none;
}

.menu li {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
margin-bottom: -2px;  /* Changed from 2px to 0px */
border-radius: 12px;
cursor: pointer;
transition: all 0.25s ease;
color: #333;
font-size: 15px;
}

.menu-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #f6f7f9, #eceef2);
    color: #c0392b;
    box-shadow: inset 0 0 0 1px #e5e7eb;
    transition: all 0.25s ease;
}

.menu-icon i {
    font-size: 16px;
    line-height: 1;
    height: 16px;
    width: 16px;
    display: block;
}

.menu li:hover {
    background: #f5f6f8;
}

.menu li:hover .menu-icon {
    transform: scale(1.08);
    background: linear-gradient(145deg, #ffeaea, #ffdcdc);
}

.menu li.active {
    background: linear-gradient(145deg, #fff5f5, #ffecec);
    font-weight: 600;
}

.menu li.active .menu-icon {
    background: linear-gradient(145deg, #e74c3c, #c0392b);
    color: #fff;
    box-shadow: 0 8px 18px rgba(231,76,60,0.35);
}

.menu-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    padding: 16px 14px 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* FIX FOR SUBMENU ITEMS (USE GRID) */
.menu li.has-submenu {
display: grid;
grid-template-columns: 38px 1fr auto; /* Icon | Text | Arrow */
grid-template-rows: auto;             /* Only 1 row when submenu hidden */
align-items: center;
padding: 12px 14px;
gap: 14px;
margin-bottom: 0px;                   /* 👈 REMOVE space between items */
}

/* When submenu is active, add second row */
.menu li.has-submenu.active {
grid-template-rows: auto auto;        /* Row 1: Main | Row 2: Submenu */
}

.menu li.has-submenu .menu-icon {
    grid-column: 1;
    grid-row: 1;
}

.menu li.has-submenu > span {
    grid-column: 2;
    grid-row: 1;
    font-weight: 500;
}

.menu li.has-submenu > .arrow {
    grid-column: 3;
    grid-row: 1;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.menu li.has-submenu .submenu {
    grid-column: 1 / -1;
    grid-row: 2;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    overflow: hidden;
}

.menu li.has-submenu.active .submenu {
    display: block;
}

.menu li.has-submenu .submenu li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #555;
    font-size: 13px;
    border-radius: 8px;
    margin: 2px 8px;
}

.menu li.has-submenu .submenu li:hover {
    background: #f5f6f8;
}

.menu li.has-submenu .submenu li i {
    font-size: 14px;
    color: #e74c3c;
    width: 18px;
    text-align: center;
}

.menu li.has-submenu.active > .arrow {
    transform: rotate(180deg);
}

.menu li.has-submenu:hover {
    background: transparent;
}

.menu li.has-submenu.active {
    background: linear-gradient(145deg, #fff5f5, #ffecec);
    border-radius: 12px;
}

.menu li.has-submenu.active .menu-icon {
    background: linear-gradient(145deg, #e74c3c, #c0392b);
    color: #fff;
}

/* ===== MIDDLE FEED ===== */
.middle-feed {
    margin: 0;
}

/* M7: __feeds_page.tpl (box layout) now wraps the cover photo and avatar
   in <a> tags instead of plain <div>s so they're clickable on the Pages
   listing - anchors are inline by default while the base theme's CSS
   expects these to behave like the old block-level divs, so force that
   back explicitly rather than relying on inherited display rules. */
.page-card-image,
.page-card-avatar {
    display: block;
}

/* ===== RIGHT SIDEBAR ===== */
.right-sidebar {
    height: fit-content;
}

/* M9: several listing-page hero banners repeat the page name as a second
   line right under the big heading ("Pages" -> "Discover pages", "Discover
   Events" -> "Discover events", movies' h2 -> "Discover and watch movies",
   games' banner subtitle) - on a phone that's a whole extra line of
   near-duplicate text eating vertical space before any real content shows.
   Desktop has the room for it; drop it on mobile only. */
@media (max-width: 767.98px) {
    .pages-header-title p,
    .events-header p,
    .game-header-banner p,
    .page-header.mini .inner p {
        display: none !important;
    }
}

/* M4: index.newsfeed.tpl adds "right-sidebar-subview" (see the template
   comment there) when the current tab is a News Feed sub-view (Popular,
   Discover, Saved, Scheduled, Memories) rather than the true home feed -
   hide it only on mobile, where the user wants the suggestion widgets to
   show up on the home page alone. Desktop keeps it everywhere since there's
   plenty of room. */
@media (max-width: 991px) {
    .right-sidebar-subview {
        display: none !important;
    }
}

/* ===== RIGHT SIDEBAR CARDS ===== */
.right-sidebar .card {
    border: 1px solid #e4e6eb !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
    background: #fff !important;
    overflow: hidden !important;
}

.right-sidebar .card-header {
    background: #fff !important;
    border-bottom: none !important;
    padding: 12px 16px 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    line-height: 1.4 !important;
    overflow: hidden !important;
    border-radius: 14px 14px 0 0 !important;
}

.right-sidebar .card-header .float-end {
    float: right !important;
    margin-left: 8px !important;
}

.right-sidebar .card-header .float-end a,
.right-sidebar .card-header small a {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #e74c3c !important;
    text-decoration: none !important;
}

.right-sidebar .card-body.with-list {
    padding: 0 12px 12px !important;
}

/* ===== SUGGESTION LIST ITEMS ===== */
.right-sidebar .feeds-item {
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
}

.right-sidebar .data-container {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 0 !important;
}

/* Avatar */
.right-sidebar .data-avatar {
    flex-shrink: 0 !important;
    display: block !important;
}

.right-sidebar .data-avatar img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Content row — flex so button never overflows */
.right-sidebar .data-content {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Name + subtitle block takes remaining space */
.right-sidebar .data-content > div:not(.float-end) {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Button pinned to the right — cancel the float */
.right-sidebar .data-content .float-end {
    flex-shrink: 0 !important;
    float: none !important;
    margin: 0 !important;
}

/* Name — base rule (specificity 31) */
.right-sidebar .data-content .name,
.right-sidebar .data-content .name a {
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #1c1e21 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}
/* Override higher-specificity rules from style.min.css that set bold */
.right-sidebar .feeds-item .data-content .mt5 .name,
.right-sidebar .feeds-item .data-content .mt5 .name a,
.js_sticky-sidebar .feeds-item .data-content .name,
.js_sticky-sidebar .feeds-item .data-content .name a {
    font-weight: 400 !important;
    font-size: 13.5px !important;
}

.right-sidebar .data-content .name a:hover {
    color: #e74c3c !important;
}

/* Subtitle — mutual friends / Likes / Members count (BLACK per user request) */
.right-sidebar .data-content .mt5 + div,
.right-sidebar .data-content > div:not(.float-end) + div:not(.float-end),
.right-sidebar .data-content > div > span.text-underline,
.right-sidebar .feeds-item .data-content > div:not(.mt5):not(.float-end) {
    font-size: 12px !important;
    color: #1c1e21 !important;
    line-height: 1.3 !important;
    margin-top: 1px !important;
}

/* ===== ACTION BUTTONS — all same size/shape ===== */

/* Shared pill button base — match style.min.css .float-end .btn size (3px 10px / 11px) */
.right-sidebar .btn-custom-add,
.right-sidebar .js_like-page,
.right-sidebar .js_unlike-page,
.right-sidebar .js_join-group,
.right-sidebar .js_leave-group {
    border: none !important;
    border-radius: 50rem !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    min-width: 66px !important;
    height: 30px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}
/* Higher-specificity override to pin Add button at same size as Like/Join */
.right-sidebar .feeds-item .data-content .float-end .btn-custom-add {
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    min-width: 66px !important;
    height: 30px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Add */
.right-sidebar .btn-custom-add { background: #e74c3c !important; }
.right-sidebar .btn-custom-add:hover { background: #c0392b !important; }

/* Like */
.right-sidebar .js_like-page { background: #e74c3c !important; }
.right-sidebar .js_like-page:hover { background: #c0392b !important; }

/* Unlike (already liked state) */
.right-sidebar .js_unlike-page { background: #e74c3c !important; }
.right-sidebar .js_unlike-page:hover { background: #c0392b !important; }

/* Join */
.right-sidebar .js_join-group { background: #27ae60 !important; }
.right-sidebar .js_join-group:hover { background: #1e8449 !important; }

/* Leave/Joined state */
.right-sidebar .js_leave-group { background: #8e9296 !important; }
.right-sidebar .js_leave-group:hover { background: #65676b !important; }

/* ===== ONLINE USERS CARD ===== */
.right-sidebar .online-users-card {
    background: #fff !important;
    border: 1px solid #e4e6eb !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
    padding: 14px 16px 12px !important;
}

.right-sidebar .online-users-card .section-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1c1e21 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.right-sidebar .online-users-card .section-title .online-dot {
    width: 12px !important;
    height: 12px !important;
    background: #e74c3c !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

.right-sidebar .online-users-card .online-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    cursor: pointer !important;
}

.right-sidebar .online-users-card .online-indicator {
    width: 10px !important;
    height: 10px !important;
    background: #2ecc71 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: block !important;
    border: 2px solid #fff !important;
}

.right-sidebar .online-users-card .online-item .online-avatar {
    flex-shrink: 0 !important;
}

.right-sidebar .online-users-card .online-item .online-avatar img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}

.right-sidebar .online-users-card .online-item .online-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    flex: 1 !important;
}

/* ===== CREATE POST / PUBLISHER ===== */
.create-post,
.x-form.publisher {
    background: #fff;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: 1px solid #e4e6eb;
    margin-bottom: 16px;
    overflow: hidden;
}

/* Publisher top row: avatar + input */
.publisher-message.create-top {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 14px !important;
    border-bottom: none !important;
}

.publisher-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover;
    flex-shrink: 0;
}

/* Quill / textarea input area */
.publisher-message .colored-text-wrapper {
    flex: 1;
}

.publisher-message .quill-editor,
.publisher-message .ql-container {
    background: #f0f2f5 !important;
    border-radius: 16px !important;
    border: none !important;
    min-height: 80px !important;
    font-size: 15px !important;
}

.publisher-message .ql-editor {
    min-height: 80px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    color: #1c1e21;
}

.publisher-message .ql-editor.ql-blank::before {
    font-style: normal !important;
    color: #888 !important;
    left: 16px !important;
    right: 16px !important;
}

/* Hide quill toolbar */
.publisher-message .ql-toolbar {
    display: none !important;
}

.create-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.create-top img {
    border-radius: 50%;
}

.create-top input {
    flex: 1;
    border: none;
    background: #f0f2f5;
    padding: 12px 16px;
    border-radius: 30px;
    outline: none;
}

.create-actions {
    display: flex;
    justify-content: space-around;
    margin-top: 12px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.create-actions button {
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    color: #555;
    font-weight: 500;
}

.create-actions i {
    color: #e74c3c;
}

.mind-create {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.mind-create-btn {
    height: 36px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(145deg, #e74c3c, #c0392b);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 6px 14px rgba(231,76,60,0.35);
}

.mind-create-btn i {
    font-size: 13px;
}

.mind-create-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(231,76,60,0.45);
}

.mind-create-btn:active {
    transform: scale(0.96);
}

/* ===== STORIES ===== */
.stories {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.stories::-webkit-scrollbar {
    display: none;
}

.story {
    position: relative;
    min-width: 120px;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.story:not(.seen) {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f29b92, 0 10px 25px rgba(0,0,0,0.08);
}

.story img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Story username — left-aligned at bottom */
.story span.info {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    text-align: left !important;
    display: block !important;
}

.story span.info strong.name {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0,0,0,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fallback for other span children inside .story */
.story > a > span:not(.info):not(.item-preview) {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    text-align: left;
}

/* Add Story — banner card with red pill button */
.add-story-banner {
    position: relative !important;
    width: 110px !important;
    height: 160px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin-bottom: 0 !important;
}

.add-story-banner .img {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    filter: brightness(0.55) !important;
    border-radius: 16px !important;
    width: 100% !important;
    height: 100% !important;
}

/* Red pill overlaid at bottom of banner */
.add-story-pill-red {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(231,76,60,0.18) !important;
    border-radius: 50px !important;
    padding: 5px 10px 5px 5px !important;
    white-space: nowrap !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

.add-story-pill-red-icon {
    width: 28px !important;
    height: 28px !important;
    background: #e74c3c !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    border: 2px solid #fff !important;
}

.add-story-pill-red-text {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}

.story:hover {
    transform: translateY(-4px);
    transition: 0.25s ease;
}

.story-avatar {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    padding: 2px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

.story-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.story-count {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(231, 76, 60, 0.95);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Diamond_pro fix: the StoryBoost plugin injects its own avatar+count badge
   (span.sb-story-avatar-chip, containing its own <img> and .sb-story-count) into each
   story tile once it's active. It renders right next to this theme's original plain
   .story-avatar <div> (from before StoryBoost was installed), and both sit in the same
   top-left corner - two avatar images overlapping ("2 profile photos"). StoryBoost's
   chip is the one with the live unread-count badge, so keep that and hide the old one
   whenever StoryBoost has actually added its chip to a given story. */
.story:has(.sb-story-avatar-chip) > a.item-link > .story-avatar {
    display: none !important;
}

/* ===== FEED TABS ===== */
.feed-tabs {
    position: sticky;
    top: 0px;
    z-index: 20;
    display: flex;
    gap: 10px;
    margin: 14px 0 20px;
    padding: 10px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    overflow-x: auto;
}

.feed-tab {
    border: none;
    background: #f0f2f5;
    color: #444;
    padding: 10px 16px;
    border-radius: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.25s ease;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.2;
}

.feed-tab i {
    font-size: 14px;
    color: #e74c3c;
}

.feed-tab:hover {
    background: #e74c3c;
    color: #fff;
}

.feed-tab:hover i {
    color: #fff;
}

.feed-tab.active {
    background: linear-gradient(145deg, #e74c3c, #c0392b);
    color: #fff;
    box-shadow: 0 6px 16px rgba(231,76,60,0.45);
}

.feed-tab.active i {
    color: #fff;
}

.feed-tab small {
    font-size: 11px;
    opacity: 0.7;
    font-weight: 400;
}

.feed-tab .tab-text {
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

.feed-tab span {
    font-size: 14px;
    font-weight: 600;
}

/* ===== POST CARD ===== */
.post-card {
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.post-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 0 12px 0;
}

.post-header-left {
    display: flex;
    gap: 12px;
    flex: 1;
}

.post-header-left img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.post-header-info {
    flex: 1;
}

.post-header-text {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.post-header-text strong {
    color: #333;
    font-size: 15px;
    font-weight: 600;
}

.post-header-text span {
    color: #555;
    font-size: 14px;
}

.post-meta-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.post-time {
    color: #888;
    font-size: 13px;
}

.post-header i.fa-globe {
    font-size: 12px;
    color: #888;
}

.post-content {
    padding: 0 0 12px 0;
}

.post-content p {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.post-content img {
    width: 100%;
    border-radius: 12px;
    margin-top: 12px;
}

.post-stats {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #e4e6eb;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #888;
    font-size: 13px;
}

.stat-item i {
    font-size: 14px;
}

.post-actions {
    display: flex;
    gap: 8px;
    padding: 8px 0 0 0;
}


/* ===== POST MENU DROPDOWN ===== */
.post-menu {
    position: relative;
}

.post-menu-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.post-menu-btn:hover {
    background: #e4e6eb;
}

.post-menu-btn i {
    font-size: 12px;
    color: #555;
    transition: transform 0.2s ease;
}

.post-menu-btn.active i {
    transform: rotate(180deg);
}

.post-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    min-width: 240px;
    padding: 8px 0;
    z-index: 1000;
    display: none;
    border: 1px solid #e4e6eb;
    animation: slideDown 0.2s ease;
}

.post-dropdown-menu.show {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #333;
    font-size: 14px;
}

.dropdown-item:hover {
    background: #f5f6f8;
}

.dropdown-item i {
    font-size: 16px;
    color: #888;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    font-family: "Font Awesome 7 Free" !important;
    font-weight: 900 !important;
}

.dropdown-item .fa-regular {
    font-weight: 400 !important;
}

.dropdown-item .fa-solid {
    font-weight: 900 !important;
}

.dropdown-item span {
    flex: 1;
}

/* PROFILE PICTURE UPDATE */
.profile-picture-update {
    padding: 20px;
    display: flex;
    justify-content: center;
}

.new-profile-pic {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #e4e6eb;
}

/* VIDEO CONTAINER */
.video-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.video-thumbnail {
    width: 100%;
    height: auto;
    display: block;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(231, 76, 60, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.play-button i {
    color: #fff;
    font-size: 24px;
    margin-left: 4px;
}

.video-container:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(231, 76, 60, 1);
}

.video-duration {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

/* ===== SIDE CARDS ===== */
.side-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.side-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    margin-bottom: 14px;
}

.side-card h4 i {
    color: #e74c3c;
}


.online-dot {
    width: 8px;
    height: 8px;
    background: #2ecc71;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.online-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.4);
    animation: pulse 1.5s infinite;
}



/* ===== APPS BUTTON ===== */
.header-apps-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(145deg, #f6f7f9, #e9ebee);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    margin-right: auto;
    margin-left: 20px;
}

.header-apps-btn i {
    font-size: 16px;
    color: #444;
}

.header-apps-btn:hover {
    background: linear-gradient(145deg, #ffffff, #eceff3);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.header-apps-btn:hover i {
    color: #e74c3c;
}

.header-apps-btn.active {
    background: linear-gradient(145deg, #e74c3c, #c0392b);
}

.header-apps-btn.active i {
    color: #fff;
}

.header-right {
    position: relative;
}

/* CREATE MENU DROPDOWN */
.create-menu {
    position: absolute;
    top: 72px;
    right: 140px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    padding: 12px;
    min-width: 280px;
    display: none;
    z-index: 1000;
    animation: slideDown 0.25s ease;
}

.create-menu.show {
    display: block;
}

.create-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #333;
    font-size: 15px;
    font-weight: 500;
}

.create-menu-item:hover {
    background: linear-gradient(145deg, #fff5f5, #ffecec);
    transform: translateX(4px);
}

.create-menu-item i {
    font-size: 20px;
    color: #e74c3c;
    width: 24px;
    text-align: center;
}

/* ===== FRIEND REQUEST POPUP ===== */
/* ===== FRIEND REQUEST POPUP ===== */
.friend-request-popup {
    position: fixed;
    top: 72px;
    right: 280px;
    width: 380px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    z-index: 1000;
    display: none;
    max-height: 500px;
    overflow-y: auto;
    animation: slideDown 0.25s ease;
}

.friend-request-popup.show {
    display: block;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e4e6eb;
}

.popup-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.close-popup {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.close-popup:hover {
    background: #e4e6eb;
}

.close-popup i {
    font-size: 16px;
    color: #555;
}

/* POPUP TABS */
.popup-tabs {
    display: flex;
    padding: 0 16px;
    border-bottom: 1px solid #e4e6eb;
}

.popup-tab {
    flex: 1;
    padding: 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #65676b;
    position: relative;
    transition: all 0.2s ease;
}

.popup-tab.active {
    color: #e74c3c;
}

.popup-tab.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #e74c3c;
    border-radius: 3px 3px 0 0;
}

/* TAB BADGE */
.tab-badge {
background: #e74c3c;
color: #fff;
font-size: 11px;
padding: 2px 6px;
border-radius: 10px;
margin-left: 6px;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
}

.popup-tab {
flex: 1;
padding: 14px;
border: none;
background: none;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: #65676b;
position: relative;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
white-space: nowrap;
}

/* FRIEND ITEM BUTTONS */
.friend-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 12px;
transition: background 0.2s ease;
}

.friend-actions {
display: flex;
gap: 8px;
margin-left: auto;
}

.confirm-btn,
.delete-btn {
padding: 6px 12px;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}

.confirm-btn {
background: #e74c3c;
color: #fff;
}

.confirm-btn:hover {
background: #c0392b;
}

.delete-btn {
background: #f0f2f5;
color: #555;
}

.delete-btn:hover {
background: #e4e6eb;
}

/* SENT REQUESTS - CANCEL BUTTON */
.cancel-btn {
padding: 6px 12px;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
background: #f0f2f5;
color: #555;
white-space: nowrap;
}

.cancel-btn:hover {
background: #e4e6eb;
}

/* FRIEND INFO */
.friend-info {
flex: 1;
min-width: 0;
}

.friend-info strong {
display: block;
font-size: 15px;
color: #333;
margin-bottom: 4px;
}

.friend-info span {
font-size: 13px;
color: #888;
line-height: 1.3;
}

/* TAB CONTENT */
.tab-content {
    display: none;
    padding: 12px;
}

.tab-content.active {
    display: block;
}

/* FRIEND ITEM */
.friend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    transition: background 0.2s ease;
    margin-bottom: 8px;
}

.friend-item:hover {
    background: #f5f6f8;
}

.friend-item img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.friend-info {
    flex: 1;
}

.friend-info strong {
    display: block;
    font-size: 15px;
    color: #333;
    margin-bottom: 4px;
}

.friend-info span {
    font-size: 13px;
    color: #888;
}

.friend-actions {
    display: flex;
    gap: 8px;
}

.confirm-btn,
.delete-btn,
.cancel-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-btn {
    background: #e74c3c;
    color: #fff;
}

.confirm-btn:hover {
    background: #c0392b;
    transform: translateY(-1px);
}

.delete-btn {
    background: #f0f2f5;
    color: #555;
}

.delete-btn:hover {
    background: #e4e6eb;
}

.cancel-btn {
    background: #f0f2f5;
    color: #555;
    padding: 8px 12px;
}

.cancel-btn:hover {
    background: #e4e6eb;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===== MESSAGE POPUP ===== */
.message-popup {
    position: fixed;
    top: 72px;
    right: 140px;
    width: 360px;
    height: 500px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    z-index: 1000;
    display: none;
    flex-direction: column;
    animation: slideDown 0.25s ease;
    overflow: hidden;
}

.message-popup.show {
    display: flex;
}

.message-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #e4e6eb;
    background: #f9f9f9;
}

.message-search i {
    color: #888;
    font-size: 14px;
}

.message-search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
}

.conversations-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
}

.conversation-item:hover {
    background: #f5f6f8;
}

.conv-avatar {
    position: relative;
}

.conv-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.conv-avatar .online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #2ecc71;
    border: 2px solid #fff;
    border-radius: 50%;
}

.conv-info {
    flex: 1;
    min-width: 0;
}

.conv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.conv-header strong {
    font-size: 15px;
}

.conv-time {
    font-size: 12px;
    color: #888;
}

.conv-preview {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.unread-badge {
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.chat-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #e4e6eb;
}

.back-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    cursor: pointer;
}

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

.chat-user img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.chat-user strong {
    font-size: 15px;
    display: block;
}

.chat-status {
    font-size: 12px;
    color: #2ecc71;
}

.chat-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f9f9f9;
}

.message {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 14px;
}

.message.received {
    background: #fff;
    border: 1px solid #e4e6eb;
    align-self: flex-start;
}

.message.sent {
    background: linear-gradient(145deg, #e74c3c, #c0392b);
    color: #fff;
    align-self: flex-end;
}

.msg-time {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 4px;
    display: block;
}

.chat-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid #e4e6eb;
    background: #fff;
    position: relative;
}

.message-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: #f0f2f5;
    padding: 12px 16px;
    border-radius: 20px;
    outline: none;
    font-size: 14px;
}

.message-input::placeholder {
    color: #999;
}

.chat-input-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.input-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.input-icon-btn:hover {
    background: linear-gradient(145deg, #fff5f5, #ffecec);
}

.input-icon-btn i {
    font-size: 16px;
    color: #e74c3c;
}

.send-message-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(145deg, #e74c3c, #c0392b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.35);
}

.send-message-btn:hover {
    background: linear-gradient(145deg, #c0392b, #a93226);
    transform: scale(1.05);
}

.send-message-btn i {
    font-size: 16px;
    color: #fff;
}

/* ===== NOTIFICATION POPUP ===== */
.notification-popup {
    position: fixed;
    top: 72px;
    right: 200px;
    width: 360px;
    max-height: 500px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    z-index: 1000;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.notification-popup.show {
    display: flex;
}

.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e4e6eb;
}

.notif-header h3 {
    font-size: 18px;
    font-weight: 700;
}

.close-notif {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    cursor: pointer;
}

.close-notif:hover {
    background: #e4e6eb;
}

.notif-list {
    overflow-y: auto;
    max-height: 440px;
}

.notif-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
}

.notif-item:hover {
    background: #f5f6f8;
}

.notif-item.unread {
    background: linear-gradient(145deg, #fff5f5, #ffecec);
}

.notif-item.unread:hover {
    background: linear-gradient(145deg, #ffeaea, #ffdcdc);
}

.notif-item img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* M3: the "Reels" strip injected into the home newsfeed (ajax.load_more.tpl,
   .reels-box-wrapper > a.reel-box > video + .views) only ever had CSS in
   style.rtl.css - _head.tpl only loads that stylesheet when the site's
   language direction is RTL. On this LTR/English site the widget's CSS
   never loaded at all, so every .reel-box rendered with no fixed size, no
   object-fit, and no position:relative - the video just used its native
   aspect ratio (collapsing/squishing unpredictably) and Plyr's big play
   button, which is absolutely positioned, centered itself on the nearest
   *positioned* ancestor (the wrapping card) instead of each individual
   reel, spanning the whole row. Ported the block over from style.rtl.css
   with the left/right sides mirrored back for LTR reading order. */
.reels-box-wrapper {
    height: 400px;
}
.reels-box-wrapper .slick-prev,
.reels-box-wrapper .slick-next {
    width: 40px;
    height: 40px;
    z-index: 2;
}
.reels-box-wrapper .slick-prev {
    left: 10px;
}
.reels-box-wrapper .slick-next {
    right: 10px;
}
.reels-box-wrapper .slick-prev:before,
.reels-box-wrapper .slick-next:before {
    font-size: 40px;
    color: #fff;
    text-shadow: 1px 1px #000000;
}
.reel-box {
    background-color: #000;
    position: relative;
    display: block;
    border-radius: 16px;
    margin-right: 20px;
    width: 260px;
    height: 400px !important;
    overflow: hidden;
}
.reel-box video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    width: 100%;
    height: auto;
    max-height: 400px;
    border-radius: 16px;
}
.reel-box .views {
    position: absolute;
    bottom: 10px;
    left: 15px;
    color: #fff;
    text-shadow: 1px 1px #000000;
    z-index: 2;
}
@media (max-width: 480px) {
    .reels-box-wrapper {
        height: 320px;
    }
    .reel-box {
        width: 200px;
        height: 320px !important;
        margin-right: 6px;
    }
    .reel-box video {
        max-height: 320px;
    }
}

/* M17: the "Reels" card-header (icon + label) and the card-body wrapping
   .reels-box-wrapper both carry the shared .card-header/.card-body Bootstrap
   padding, which stacks up to a big vertical gap between the "Reels" title
   and the actual video row underneath it - much more breathing room than
   any other section on the page. Scoped with :has() to only this specific
   card so every other card on the site keeps its normal padding. */
.card:has(.reels-box-wrapper) > .card-header {
    padding-bottom: 6px !important;
}
.card-body:has(.reels-box-wrapper) {
    padding-top: 0 !important;
}

/* NOTE: the old "REELS INNER THEME" block that used to live here (.reels-wrapper,
   .reel-container, .reel-video-container video { object-fit: contain }, .video-controlls,
   .reel-actions, .reels-custom-header, etc.) has been removed. It was an earlier,
   non-fullscreen draft of the reels player that reused the exact same class names as
   the real, current implementation now living entirely in reels.tpl's own <style>
   block (fullscreen black player, close button, actions rail, comments panel). Having
   both definitions in play was fighting the reels.tpl fixes (object-fit: cover for
   fullscreen video, the comments-panel-closed-by-default fix) silently — edits there
   appeared to do nothing because this file's conflicting rules were also in the
   cascade. Reels styling should only ever live in reels.tpl going forward. */

/* ===== POST CARD REDESIGN ===== */
.post {
    background: #fff;
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: 1px solid #e4e6eb;
    overflow: visible;
    list-style: none;
}

.post-body {
    padding: 16px;
}

.post-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    position: relative;
}

.post-avatar {
    flex-shrink: 0 !important;
    position: relative !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
}

.post-avatar-picture {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding-top: 0 !important;
    border-radius: 50% !important;
    display: block !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #e4e6eb !important;
    overflow: hidden !important;
}

/* Online status dot hidden on post avatars */
.post-avatar .online-dot {
    display: none !important;
}

/* M2: post author avatar was sitting almost flush against the name/caption
   text on narrower phones - shrink it slightly and keep the same 12px gap
   so there's visibly more breathing room between the circle and the text.
   M16 follow-up: 12px still read as "stuck together" compared to the
   Facebook reference photo - opened it up a bit further and gave the
   name/timestamp block a touch more line spacing to match. */
@media (max-width: 480px) {
    .post-avatar,
    .post-avatar-picture {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }
    .post-header {
        gap: 14px !important;
    }
    .post-time {
        margin-top: 3px !important;
    }
}

.post-meta {
    flex: 1;
    min-width: 0;
}

/* Dropdown toggle button in posts */
.post-meta .float-end.dropdown {
    float: none !important;
    position: absolute;
    top: 0;
    right: 0;
}

.post-meta .dropdown-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f0f2f5;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    border: none;
}

.post-meta .dropdown-toggle::after {
    display: none;
}

.post-meta .dropdown-toggle:hover {
    background: #e4e6eb;
}

.post-meta .dropdown-toggle i {
    font-size: 12px;
    color: #555;
    transition: transform 0.2s ease;
}

.post-meta .dropdown-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.post-author,
.post .post-author,
a.post-author,
.post a.post-author {
    font-weight: 700;
    font-size: 15px;
    color: #1c1e21 !important;
    text-decoration: none !important;
}

.post-title {
    font-size: 14px;
    color: #65676b;
    font-weight: 400;
}

.post-time {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 0;
    line-height: 1.2;
    font-size: 13px;
    color: #65676b;
}

.post-time a {
    color: #65676b;
    text-decoration: none;
}

.post-time a:hover {
    text-decoration: underline;
}

/* privacy dropdown inside post-time must not be taller than the time text —
   otherwise it grows the row and the timestamp gets pushed down.
   M17: Bootstrap's default button padding (~0.375rem 0.75rem) was still
   applying horizontally, so the globe/lock/users icon sat far away from the
   "3 days ago" text - a lot of empty clickable space read as a big gap.
   Stripped the horizontal padding too and pulled the button flush against
   the timestamp so the spacing matches the tight Facebook reference. */
.post-time .btn-group,
.post-time .btn-group .btn,
.post-time .btn-group .dropdown-toggle {
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    min-width: 0 !important;
}
.post-time .btn-group {
    margin-left: -2px !important;
}
.post-time {
    gap: 2px !important;
    align-items: center !important;
}
.post-time .btn-group {
    align-self: center !important;
    transform: translateY(1px);
}
.post-time .btn-group .btn-group-icon,
.post-time .btn-group i {
    position: relative;
    top: 1px;
}

/* M18: the base theme's .post-text carries its own padding: 0 16px, ON TOP
   of the 16px left padding already applied by its .post-body/.post-replace
   wrapper - so the caption text sat ~32px in from the card edge while the
   avatar above it only sits in 16px, making the text look indented under
   the name instead of flush-left with the avatar like Facebook. Zero out
   just the left side so it lines up with the avatar; keep the right side
   so text doesn't run to the card edge. */
.post-text {
    padding-left: 0 !important;
}
.post-product-container .post-text,
.post-media-meta .post-text {
    padding-left: 0 !important;
}

/* M18: nudge caption colour/weight to match Facebook's near-black post text
   (Facebook uses rgb(5,5,5) at 15px/400 with 1.333 line-height). */
.post-text {
    color: #050505 !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3333;
}

/* M19: portrait (9:16) reel videos embedded in the normal feed rendered at
   their raw height:auto with no cap - a single reel could be well over
   1000px tall. This is the CSS-only safety net (prevents a flash of huge
   video before JS runs); the real per-video fix, because Plyr sometimes
   sets the wrong 16:9 ratio on these, is the script in _footer.tpl. */
.feed-reel-video-scope {
    max-height: calc(100vh - 350px);
    overflow: hidden;
    display: flex;
    justify-content: center;
    background: #000;
}
.feed-reel-video-scope video,
.feed-reel-video-scope .plyr,
.feed-reel-video-scope .plyr__video-wrapper {
    max-height: calc(100vh - 350px) !important;
}

/* ===== POST STATS ===== */
.post-stats,
.post .post-stats,
li .post-stats {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    visibility: visible !important;
    height: auto !important;
    margin: 8px 16px 0 !important;
    padding: 8px 0 6px !important;
    overflow: visible !important;
    border-top: 1px solid #f0f2f5 !important;
    border-bottom: 0 !important;
    color: #65676b !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.post-stats .float-start,
.post-stats .float-end {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
}

.post-stats .float-start.mr10,
.post-stats .float-end .ml10 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.post-stats .float-end > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

.post-stats i,
.post-stats .fa,
.post-stats .fas,
.post-stats .far {
    color: #65676b !important;
    font-size: 13px !important;
}

body.night-mode .post-stats {
    border-top-color: var(--card-dark-divider) !important;
    color: #9aa8b6 !important;
}

body.night-mode .post-stats i,
body.night-mode .post-stats .fa,
body.night-mode .post-stats .fas,
body.night-mode .post-stats .far {
    color: #9aa8b6 !important;
}

@media (max-width: 575.98px) {
    .post-stats,
    .post .post-stats,
    li .post-stats {
        align-items: flex-start !important;
    }

    .post-stats .float-end {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

/* ===== REACTIONS SUMMARY (the emoji + count under a post that opens the
   "who reacted" popup) — this had zero styling before: the emoji images
   render at whatever raw size they were uploaded at, with no overlap, no
   hover affordance, and nothing to signal it's clickable. ===== */
.reactions-stats {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    padding: 2px 6px 2px 2px !important;
    border-radius: 12px !important;
    transition: background 0.15s ease !important;
}
.reactions-stats:hover {
    background: #f0f2f5 !important;
    text-decoration: underline !important;
}
.reactions-stats-item {
    display: inline-flex !important;
    margin-left: -6px !important;
    position: relative !important;
    z-index: 1 !important;
}
.reactions-stats-item:first-child {
    margin-left: 0 !important;
}
.reactions-stats-item .emoji {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 0 0 2px #fff !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* The base theme's own .emoji rule ships a 120x120 box that it shrinks
       down with transform:scale() + huge negative top/right percentages
       (a trick to re-center it after scaling) - e.g. .inline-emoji .emoji
       uses scale(0.15) with top:-285%/right:285%, meant to shrink a 120px
       box down to ~18px. Since we size this box directly to 18px instead
       of relying on that trick, the leftover scale/offset from the base
       rule was STILL applying on top of our 18px box, shrinking it an
       extra 85% (down to ~2-3px) and flinging it off to the side - which
       is why the reaction icons were rendering as blank white dots.
       Neutralizing the inherited transform/offset here fixes it. */
    transform: none !important;
    top: 0 !important;
    right: auto !important;
}
.reactions-stats-item .emoji img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}
.reactions-stats > span {
    font-size: 13px !important;
    color: #65676b !important;
    margin-left: 2px !important;
    font-weight: 500 !important;
}
body.night-mode .reactions-stats:hover {
    background: rgba(255,255,255,0.06) !important;
}
body.night-mode .reactions-stats-item .emoji {
    box-shadow: 0 0 0 2px #242526 !important;
}

/* ===== TOP-OF-POST reaction count badge — same emoji+count widget as
   the one above, reused up in the post header next to the "..." dropdown
   menu instead of (well, in addition to) the one in the bottom stats
   row, per specific request. Sized down slightly since header real
   estate is tighter than the full-width stats row.
   NOTE: the "..." dropdown trigger next to it is NOT a normal floated
   element - Sngine positions it with position:absolute; top:0; right:0
   against the post header, so it takes itself completely out of normal
   document flow. That means a plain float-end sibling (this badge)
   doesn't get pushed aside by it - it floats into the exact same top-right
   corner and ends up hidden underneath the dropdown button instead of
   beside it. Fixed by absolutely positioning the badge too, offset far
   enough left to clear the ~34px dropdown button. */
.post-header-reactions-badge {
    position: absolute !important;
    top: 4px !important;
    right: 40px !important;
    margin: 0 !important;
    z-index: 1 !important;
}
.post-header-reactions-badge .reactions-stats {
    padding: 1px 5px 1px 1px !important;
}
.post-header-reactions-badge .reactions-stats-item .emoji {
    width: 15px !important;
    height: 15px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.post-header-reactions-badge .reactions-stats > span {
    font-size: 12px !important;
}
/* Small "pop" on hover so the stacked reaction icons feel a bit more alive/3D
   instead of totally static. Scales up + deepens the shadow ring a touch. */
.post-header-reactions-badge .reactions-stats:hover .reactions-stats-item .emoji {
    transform: scale(1.25) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 0 0 2px #fff !important;
    z-index: 2 !important;
}

/* M6: the badge above (and the "..." menu next to it) are position:absolute,
   pulled out of normal document flow — so the author name / "shared ..."
   text in .post-meta has no idea it needs to leave room for them. On
   desktop there's normally enough natural width that this doesn't collide,
   but on a narrow phone a longer name wraps right up into that top-right
   corner and visually sits underneath the emoji/count. Reserve a gutter on
   mobile only so the text always wraps before reaching them. */
@media (max-width: 767.98px) {
    .post-meta {
        padding-right: 88px !important;
    }
}

/* ===== POST ACTIONS — flat buttons with vertical dividers ===== */
.post .post-actions,
.post-actions {
    display: flex !important;
    padding: 2px 0 !important;
    margin-top: 6px !important;
    gap: 0 !important;
    border-top: 1px solid #e4e6eb !important;
    background: transparent !important;
}

.post .post-actions .action-btn,
.post-actions .action-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 12px 4px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    border-right: 1px solid #e4e6eb !important;
    box-shadow: none !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    transition: background 0.15s ease !important;
    min-height: 44px !important;
    position: relative !important;
}

.post .post-actions .action-btn:last-child,
.post-actions .action-btn:last-child {
    border-right: none !important;
}

.post .post-actions .action-btn:hover,
.post-actions .action-btn:hover {
    background: #f0f2f5 !important;
    color: #e74c3c !important;
}

.post .post-actions .action-btn:hover .action-icon,
.post .post-actions .action-btn:hover i,
.post-actions .action-btn:hover .action-icon,
.post-actions .action-btn:hover i {
    color: #e74c3c !important;
}

/* Show button labels always */
.post-actions .action-btn .reaction-btn-name,
.post-actions .action-btn span.d-none {
    display: inline-block !important;
}

/* Icons — dark by default */
.post-actions .action-btn .action-icon,
.post-actions .action-btn i,
.post-actions .action-btn .action-icon * {
    color: #1c1e21 !important;
    fill: #1c1e21 !important;
    font-size: 20px !important;
}

/* Like = red when reacted */
.post-actions .reactions-wrapper.js_unreact-post .reaction-btn-name,
.post-actions .reactions-wrapper.js_unreact-post i {
    color: #e74c3c !important;
}

/* Reaction/Like button inner wrapper */
.post-actions .action-btn .reaction-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

.post-actions .action-btn .reaction-btn-icon {
    display: flex !important;
    align-items: center !important;
}

/* M2: the emoji shown on the Like button once you've reacted was hard to
   see — the base theme renders it from a 120px source icon scaled all the
   way down to an 18px box (.inline-emoji{width:18px;height:18px} +
   .emoji{transform:scale(0.15)}). Bump the box up to ~28px (and rescale the
   120px source to match) on both the normal post feed and reels so the
   chosen reaction actually reads at a glance. */
.post-actions .action-btn .reaction-btn-icon .inline-emoji,
.reel-action-btn .reaction-btn-icon .inline-emoji {
    width: 28px !important;
    height: 28px !important;
    position: relative !important;
    overflow: visible !important;
}
/* Live testing showed the box above wasn't enough on its own: the base
   theme's `.inline-emoji .emoji` rule doesn't just scale the icon down, it
   also nudges it with `top:-285%; right:285%` to re-center the shrunk
   120px source inside the ORIGINAL 18px box. Those percentages are huge
   (285% of 120px) and were only correct for that specific 18px target -
   just changing the scale here (0.15 -> 0.233) left the old offset in
   place, which flung the icon up and to the side instead of centering it
   in the new 28px box (it rendered floating above the Like button instead
   of sitting inside it next to the reaction name). Same fix as everywhere
   else this session: drop the inherited transform/offset entirely and
   just size the icon to fill its own box directly. */
.post-actions .action-btn .reaction-btn-icon .inline-emoji .emoji,
.reel-action-btn .reaction-btn-icon .inline-emoji .emoji {
    width: 28px !important;
    height: 28px !important;
    transform: none !important;
    top: 0 !important;
    right: auto !important;
    position: relative !important;
}
.post-actions .action-btn .reaction-btn-icon .inline-emoji .emoji img,
.reel-action-btn .reaction-btn-icon .inline-emoji .emoji img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* Comment count badge */
.action-btn-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #e74c3c !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 9px !important;
    line-height: 1 !important;
}

/* M70: on mobile/tablet the button label (Like/Comment) is hidden
   (.d-xl-inline-block), leaving just the icon centered in the button — the
   count used to sit inline next to that icon, floating in empty space
   rather than reading as "attached" to anything. Per the user's reference
   photo (a small red circle overlapping the top-right corner of an icon,
   ringed in white, notification-badge style), pin it there instead: since
   the icon is horizontally centered in the button at this width, offsetting
   from the 50% center line lands it consistently on the icon's corner
   regardless of how wide the button itself is. Desktop (xl+, label visible)
   keeps the original inline pill-next-to-text layout untouched below. */
@media (max-width: 1199.98px) {
    .action-btn-badge {
        position: absolute !important;
        top: 2px !important;
        left: 50% !important;
        transform: translateX(4px) !important;
        min-width: 16px !important;
        height: 16px !important;
        padding: 0 4px !important;
        font-size: 10px !important;
        border: 2px solid #fff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.18) !important;
        z-index: 2 !important;
    }
}

/* Emoji reactions popup — let Sngine JS handle positioning */

/* ===== SHARE DROPDOWN ===== */
.post-share-btn {
    position: relative !important;
    cursor: pointer !important;
}

.post-share-dropdown {
    display: none !important;
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    min-width: 180px !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    border: 1px solid #e4e6eb !important;
}

.post-share-btn.share-open .post-share-dropdown {
    display: block !important;
}

.post-share-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1c1e21 !important;
    cursor: pointer !important;
    transition: background 0.12s ease !important;
}

.post-share-item:hover {
    background: #f0f2f5 !important;
}

.post-share-item i {
    width: 18px !important;
    color: #e74c3c !important;
    font-size: 15px !important;
}

/* ===== POST DROPDOWN MENU ===== */
.action-dropdown-menu {
    min-width: 240px;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.16) !important;
    border: 1px solid #e4e6eb !important;
    padding: 6px 0 !important;
    animation: slideDown 0.18s ease;
}

.action-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    color: #1c1e21;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.12s ease;
    border-radius: 0;
}

.action-dropdown-menu .dropdown-item:hover {
    background: #f0f2f5;
}

.action-dropdown-menu .dropdown-item .action.no-desc {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.action-dropdown-menu .dropdown-divider {
    margin: 4px 0;
    border-color: #e4e6eb;
}

/* Pending/pinned icons */
.pending-icon,
.pin-icon,
.boosted-icon {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
}

/* ===== CREATE POST MODAL ===== */
.modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important;
    overflow: hidden;
}
.modal-header {
    border-bottom: 1px solid #e4e6eb !important;
    padding: 14px 16px !important;
    position: relative;
}
.modal-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1c1e21 !important;
    text-align: center !important;
    width: 100% !important;
}
.modal-header .btn-close {
    margin: 0 !important;
    background-color: #e4e6eb !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    padding: 10px !important;
}
.modal-body {
    padding: 0 !important;
}

/* ---- Avatar in publisher message — absolute to avoid Quill JS overriding flex ---- */
#publisher-box .publisher-message {
    position: relative !important;
    display: block !important;
    padding: 14px 16px 14px 74px !important;
    min-height: 80px !important;
}
#publisher-box .publisher-message .publisher-avatar {
    position: absolute !important;
    left: 16px !important;
    top: 14px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    z-index: 1 !important;
    border: 3px solid #e74c3c !important;
    box-shadow: none !important;
}
#publisher-box .publisher-message .colored-text-wrapper {
    display: block !important;
    width: 100% !important;
}

/* ---- Ensure textarea / Quill editor is fully interactive ---- */
#publisher-box .publisher-message .colored-text-wrapper,
#publisher-box .publisher-message .quill-editor,
#publisher-box .publisher-message .ql-editor,
#publisher-box .publisher-message textarea {
    pointer-events: auto !important;
    cursor: text !important;
    user-select: text !important;
}

/* ---- Input field visual styling (Quill editor) inside modal publisher ---- */
#publisher-box .publisher-message .colored-text-wrapper,
#publisher-box .publisher-message .quill-editor,
#publisher-box .publisher-message .ql-container,
#publisher-box .publisher-message .ql-container.ql-snow {
    background: #f0f2f5 !important;
    border-radius: 16px !important;
    border: none !important;
    min-height: 90px !important;
    height: auto !important;
    overflow: hidden !important;
}
#publisher-box .publisher-message .ql-editor {
    min-height: 90px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    color: #1c1e21 !important;
    line-height: 1.5 !important;
}
#publisher-box .publisher-message .ql-editor.ql-blank::before {
    font-style: normal !important;
    color: #8a8d91 !important;
    position: absolute !important;
    top: 14px !important;
    left: 16px !important;
    right: 16px !important;
    pointer-events: none !important;
}

/* ---- Force grid tabs visible in modal ---- */
#publisher-wapper-modal .publisher-slider {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
}
#publisher-wapper-modal .publisher-tools-tabs {
    display: block !important;
    padding: 8px 12px 4px !important;
}

/* Grid tab list */
#publisher-box .publisher-tools-tabs ul.row {
    margin: 0 -4px !important;
    list-style: none !important;
    padding: 0 !important;
}
#publisher-box .publisher-tools-tabs li {
    padding: 0 4px !important;
    margin-bottom: 8px !important;
}
#publisher-box .publisher-tools-tab {
    background: #f0f2f5 !important;
    border-radius: 12px !important;
    padding: 11px 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    cursor: pointer;
    transition: background 0.15s ease !important;
    border: none !important;
    text-decoration: none !important;
    width: 100%;
    position: relative !important;  /* CRITICAL: contains hidden file input for uploader tabs */
    overflow: hidden !important;
}
#publisher-box .publisher-tools-tab:hover {
    background: #e4e6eb !important;
}

/* Contain file input inside the icon square only */
#publisher-box .publisher-tools-tabs .publisher-tools-tab span.js_x-uploader {
    position: relative !important;
    z-index: 1 !important;
}

/* Colored icon squares — ONLY in grid tabs, not toolbar */
#publisher-box .publisher-tools-tabs .publisher-tools-tab .main-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px !important;
    background: #e74c3c !important;
    margin-right: 0 !important;
}
#publisher-box .publisher-tools-tabs .publisher-tools-tab .main-icon *,
#publisher-box .publisher-tools-tabs .publisher-tools-tab .main-icon svg {
    color: #fff !important;
    fill: #fff !important;
}

/* Per-tab icon colors — scoped to grid tabs only */
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="live"] .main-icon        { background: #e74c3c !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="photos"] .main-icon      { background: #27ae60 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="album"] .main-icon       { background: #8e44ad !important; }
#publisher-box .publisher-tools-tabs .js_publisher-feelings .main-icon                       { background: #f39c12 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="colored"] .main-icon     { background: #e91e8c !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="voice_notes"] .main-icon { background: #16a085 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="gif"] .main-icon         { background: #2c3e50 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="blog"] .main-icon        { background: #2980b9 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="product"] .main-icon     { background: #e74c3c !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="funding"] .main-icon     { background: #27ae60 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="location"] .main-icon    { background: #e67e22 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="poll"] .main-icon        { background: #1abc9c !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="reel"] .main-icon        { background: #9b59b6 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="video"] .main-icon       { background: #c0392b !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="audio"] .main-icon       { background: #2ecc71 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="file"] .main-icon        { background: #3498db !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="offer"] .main-icon       { background: #e74c3c !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="job"] .main-icon         { background: #2980b9 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="ai_image"] .main-icon    { background: #6c3483 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="ai"] .main-icon          { background: #6c3483 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="courses"] .main-icon     { background: #d35400 !important; }

/* Load more */
#publisher-box .btn-load-more {
    background: #f0f2f5 !important;
    color: #e74c3c !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    border: none !important;
    padding: 12px !important;
    width: calc(100% - 24px) !important;
    margin: 0 12px 12px !important;
    font-size: 14px !important;
}

/* Footer */
#publisher-box .publisher-footer {
    border-top: 1px solid #e4e6eb !important;
    padding: 12px 16px !important;
}
#publisher-box .form-table-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
#publisher-box .form-table-row .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Send button */
#publisher-box .publisher-footer-buttons .btn-primary {
    background: #e74c3c !important;
    border-color: #e74c3c !important;
    border-radius: 12px !important;
    padding: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    width: 100% !important;
}
#publisher-box .publisher-footer-buttons .btn-primary:hover {
    background: #c0392b !important;
    border-color: #c0392b !important;
}

/* ===== DUMMY PUBLISHER CARD ===== */
.dummy-publisher-trigger {
    cursor: pointer;
}

.dummy-publisher-card {
    padding: 0 !important;
    overflow: hidden;
}

/* Top row: avatar + placeholder input */
.dummy-publisher-top {
    position: relative;
    padding: 10px 14px 10px 66px;
}

.dummy-pub-avatar {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    float: none !important;
    display: block !important;
}

.dummy-publisher-input {
    display: block;
    background: #f0f2f5;
    border-radius: 22px;
    padding: 10px 18px;
    font-size: 15px;
    color: #8a8d91;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    width: 100%;
    box-sizing: border-box;
}

/* Bottom row: Photo / Video / Feeling buttons */
.dummy-publisher-actions {
    display: flex;
    align-items: center;
    border-top: 1px solid #e4e6eb;
    padding: 4px 8px;
    gap: 4px;
}

.dummy-publisher-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #65676b;
    transition: background 0.15s ease;
}

.dummy-publisher-trigger:hover .dummy-publisher-btn {
    background: #f0f2f5;
    color: #1c1e21;
}

.dummy-publisher-btn .dummy-pub-icon,
.dummy-publisher-btn .dummy-pub-icon * {
    color: #e74c3c !important;
    fill: #e74c3c !important;
}

/* ===================================================
   HEADER DROPDOWN WIDGETS
   =================================================== */

/* M5: the base theme ships two conflicting rules for the exact same
   selector — one setting `.navbar-wrapper>ul>li.dropdown{position:static}`
   and another setting `position:relative` right after it. Whichever wins
   the cascade determines whether the notification/messages/add dropdown
   panel anchors to its own icon button or falls back to some other
   positioned ancestor up the page — which is exactly the "menu background
   not at right positions on hover" bug. Force it here so the anchor is
   always correct regardless of stylesheet load order. */
.navbar-wrapper > ul > li.dropdown {
    position: relative !important;
}

/* General dropdown-widget shell — exclude search dropdown */
.dropdown-menu.dropdown-widget:not(.dropdown-search) {
    width: 300px !important;
    max-width: 95vw !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.20) !important;
    border: 1px solid #e4e6eb !important;
    overflow: hidden !important;
    padding: 10px !important;
    margin-top: 8px !important;
}
.dropdown-menu.user-dropdown-menu {
    width: 320px !important;
    max-width: 95vw !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.20) !important;
    border: 1px solid #e4e6eb !important;
    padding: 12px !important;

    margin-top: 8px !important;
}
/* M13: at a fixed 320px this popup is already close to the full 390px
   phone width, but most of its rows (Settings, Admin Panel, Sign Out,
   Keyboard Shortcuts, Theme Switcher) are just an icon + a short label -
   same "wide box, narrow content" gap already fixed for the hamburger
   drawer (M6) and Wallet page (M5). Pull the popup in to fit its own
   content on mobile; desktop keeps the original 320px. */
@media (max-width: 480px) {
    .dropdown-menu.user-dropdown-menu {
        width: 240px !important;
    }
}

/* Widget header */
.dropdown-widget .dropdown-widget-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #e4e6eb !important;
    background: #fff !important;
    gap: 10px !important;
}

.dropdown-widget .dropdown-widget-header .title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1c1e21 !important;
    flex: 1 !important;
    margin: 0 !important;
    float: none !important;
}

/* Close button */
.dropdown-widget-close {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #f0f2f5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: #555 !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease !important;
    padding: 0 !important;
}
.dropdown-widget-close:hover {
    background: #e4e6eb !important;
}

/* Widget body */
.dropdown-widget .dropdown-widget-body {
    background: #fff !important;
}
.dropdown-widget .dropdown-widget-body .js_scroller {
    max-height: 380px !important;
    overflow-y: auto !important;
    padding: 6px 0 !important;
}

/* Widget footer */
.dropdown-widget .dropdown-widget-footer {
    display: block !important;
    text-align: center !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #e74c3c !important;
    border-top: 1px solid #e4e6eb !important;
    text-decoration: none !important;
    background: #fff !important;
}
.dropdown-widget .dropdown-widget-footer:hover {
    background: #fdf2f2 !important;
    color: #c0392b !important;
}

/* ===== NOTIFICATIONS WIDGET — tg-notif-* classes (no Sngine float inheritance) ===== */
.tg-notif-item {
    list-style: none !important;
    border: none !important;
    padding: 0 !important;
}
.tg-notif-item.tg-notif-unread {
    background: #fff5f5 !important;
}
.tg-notif-link {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    color: inherit !important;
    border-bottom: 1px solid #f5f5f5 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.tg-notif-link:hover {
    background: #f6f7f8 !important;
    text-decoration: none !important;
}
.tg-notif-unread .tg-notif-link:hover {
    background: #ffe8e8 !important;
}
.tg-notif-avatar {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}
.tg-notif-body {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
.tg-notif-name {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1c1e21 !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
}
.tg-notif-unread .tg-notif-name {
    color: #e74c3c !important;
}
.tg-notif-msg {
    font-size: 13px !important;
    color: #65676b !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
    word-break: break-word !important;
}
.tg-notif-reaction {
    margin-right: 4px !important;
}
.tg-notif-time {
    font-size: 11px !important;
    color: #aaa !important;
    margin-left: 4px !important;
    white-space: nowrap !important;
}

/* ── FALLBACK for sites still using original __feeds_notification.tpl ──────── */
/* Keeps working until plugin re-install updates the template to tg-notif-*    */
.js_live-notifications .feeds-item {
    list-style: none !important;
    border: none !important;
    padding: 0 !important;
}
.js_live-notifications .feeds-item.unread {
    background: #fff5f5 !important;
}
.js_live-notifications .feeds-item .data-container {
    display: flex !important;
    float: none !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    color: inherit !important;
    border-bottom: 1px solid #f5f5f5 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.js_live-notifications .feeds-item .data-container:hover {
    background: #f6f7f8 !important;
}
.js_live-notifications .feeds-item .data-avatar {
    flex-shrink: 0 !important;
    float: none !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    display: block !important;
}
.js_live-notifications .feeds-item .data-avatar img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    float: none !important;
}
.js_live-notifications .feeds-item .data-content {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}
.js_live-notifications .feeds-item .data-content .name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1c1e21 !important;
    display: block !important;
    word-break: break-word !important;
}
.js_live-notifications .feeds-item.unread .data-content .name {
    color: #e74c3c !important;
}
.js_live-notifications .feeds-item .data-content > div {
    font-size: 13px !important;
    color: #65676b !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
}
.js_live-notifications .feeds-item .data-content .time {
    font-size: 11px !important;
    color: #aaa !important;
    margin-top: 2px !important;
    display: block !important;
}
.js_live-notifications .feeds-item .data-content > div > i {
    display: none !important;
}

/* ===== MESSAGES WIDGET ===== */
/* Red header — 3-class specificity beats .dropdown-widget .dropdown-widget-header (2-class) */
.dropdown-widget .dropdown-widget-header.messages-widget-header,
.messages-widget-header {
    background: #e74c3c !important;
    border-bottom: none !important;
    padding: 16px 20px !important;
    border-radius: 8px 8px 0 0 !important;
}
.dropdown-widget .dropdown-widget-header.messages-widget-header .title,
.messages-widget-header .title {
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}
/* Close button — white circle */
.messages-close-btn {
    background: rgba(255,255,255,0.85) !important;
    color: #555 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    cursor: pointer !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease !important;
}
.messages-close-btn:hover {
    background: #fff !important;
}

/* Search bar wrapper */
.messages-widget-search {
    padding: 10px 14px !important;
    background: #fff !important;
    border-bottom: 1px solid #e4e6eb !important;
}
/* Pill-shaped search input */
.messages-search-pill {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f0f2f5 !important;
    border-radius: 20px !important;
    padding: 8px 14px !important;
}
.messages-search-pill i {
    color: #bbb !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}
.messages-search-pill input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    font-size: 14px !important;
    color: #555 !important;
    background: transparent !important;
}
.messages-search-pill input::placeholder {
    color: #bbb !important;
}

/* ===== CONVERSATION LIST — tg-conv-* (inline styles handle layout) ===== */
.tg-conv-link:hover {
    background: #f7f8fa !important;
}
.tg-conv-unread .tg-conv-link:hover {
    background: #ffe8e8 !important;
}
.tg-conv-unread .tg-conv-preview {
    font-weight: 600 !important;
    color: #1c1e21 !important;
}

/* ── FALLBACK for sites still using original __feeds_conversation.tpl ──────── */
.js_live-messages .feeds-item {
    list-style: none !important;
    border: none !important;
    padding: 0 !important;
}
.js_live-messages .feeds-item .data-container {
    display: flex !important;
    float: none !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    color: inherit !important;
    border-bottom: 1px solid #f5f5f5 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.js_live-messages .feeds-item .data-container:hover {
    background: #f7f8fa !important;
}
.js_live-messages .feeds-item .data-avatar {
    flex-shrink: 0 !important;
    float: none !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    display: block !important;
}
.js_live-messages .feeds-item .data-avatar img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    float: none !important;
}
.js_live-messages .feeds-item .data-content {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    overflow: hidden !important;
}
.js_live-messages .feeds-item .data-content .name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1c1e21 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.js_live-messages .feeds-item .data-content .time {
    font-size: 11px !important;
    color: #aaa !important;
    display: block !important;
    margin-top: 2px !important;
}
.js_live-messages .feeds-item .data-content > div {
    font-size: 13px !important;
    color: #65676b !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ── FALLBACK for old _header.friend_requests.tpl sent-requests section ─────── */
/* Covers the intermediate version that uses .feeds-item + .data-container */
.js_live-requests #friends-tab-sent .feeds-item {
    list-style: none !important;
    border: none !important;
    padding: 0 !important;
}
.js_live-requests #friends-tab-sent .feeds-item .data-container {
    display: flex !important;
    float: none !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.js_live-requests #friends-tab-sent .feeds-item .data-avatar {
    flex-shrink: 0 !important;
    float: none !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    display: block !important;
    order: 0 !important;
}
.js_live-requests #friends-tab-sent .feeds-item .data-avatar img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    float: none !important;
}
.js_live-requests #friends-tab-sent .feeds-item .data-content {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    overflow: hidden !important;
    order: 1 !important;
}
.js_live-requests #friends-tab-sent .feeds-item .data-content .name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.js_live-requests #friends-tab-sent .feeds-item .float-end,
.js_live-requests #friends-tab-sent .feeds-item [class*="float"] {
    float: none !important;
    flex-shrink: 0 !important;
    order: 2 !important;
}

/* ===== STORY VIEWER — DELETE BUTTON & TEXT OVERLAY ===== */
/* Delete button injected into .head .right of the Zuck viewer */
.story-viewer-delete-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    background: rgba(231, 76, 60, 0.85) !important;
    color: #fff !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 14px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease !important;
    vertical-align: middle !important;
}
.story-viewer-delete-btn:hover {
    background: #c0392b !important;
}

/* Text overlay at the bottom of the story */
.story-viewer-text-wrap {
    position: absolute !important;
    bottom: 70px !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    padding: 0 20px !important;
    z-index: 9999 !important;
    pointer-events: none !important;
}
.story-viewer-text {
    background: rgba(0, 0, 0, 0.55) !important;
    color: #fff !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-align: center !important;
    max-width: 85% !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
}

/* ===== FRIEND REQUESTS WIDGET ===== */

/* Override .navbar-wrapper > ul > li { width:40px !important } which bleeds into dropdowns */
.js_live-requests #friends-tab-requests ul > li {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}
.js_live-requests #friends-tab-sent ul > li {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* M14: this dropdown is a standard Bootstrap ".dropdown-menu-end" popup,
   which positions itself relative to its trigger icon (the people icon in
   the header) rather than the screen - on mobile that trigger sits well
   over to the right, so the popup opens hugging the left edge with a big
   empty gap on the right instead of reading as a centered modal-like
   panel. Override the positioning on mobile only so it centers itself
   horizontally in the viewport regardless of where the trigger icon is. */
@media (max-width: 480px) {
    .js_live-requests.dropdown {
        position: static !important;
    }
    .js_live-requests .dropdown-widget {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 70px !important;
        transform: translateX(-50%) !important;
        width: 90vw !important;
        max-width: 340px !important;
    }
}

/* Force the <ul> to fill the full dropdown width */
.js_live-requests .dropdown-widget-body ul {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Each <li> must be full-width (block, not shrink-to-content) */
.js_live-requests .feeds-item {
    list-style: none !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Row container: full-width flex, avatar + content side by side */
.js_live-requests .feeds-item .data-container {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #f0f2f5 !important;
    transition: background 0.12s !important;
    cursor: pointer !important;
}
.js_live-requests .feeds-item .data-container:hover {
    background: #fafafa !important;
}

/* Avatar: fixed 44px circle */
.js_live-requests .feeds-item .data-avatar {
    flex-shrink: 0 !important;
    display: block !important;
    line-height: 0 !important;
}
.js_live-requests .feeds-item .data-avatar img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}

/* data-content: fills remaining width after avatar+gap */
.js_live-requests .feeds-item .data-content {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden !important;
}

/* Friend Requests tab: name (order 1, grows) | buttons (order 2, fixed) */
.js_live-requests #friends-tab-requests .feeds-item .data-content .mt5 {
    flex: 1 !important;
    order: 1 !important;
    min-width: 0 !important;
}
.js_live-requests #friends-tab-requests .feeds-item .data-content .mt5 .name a {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}
.js_live-requests #friends-tab-requests .feeds-item .data-content .mt5 .name a:hover {
    color: #e74c3c !important;
}

/* Buttons group: pushed to the right */
.js_live-requests #friends-tab-requests .feeds-item .data-content .float-end {
    order: 2 !important;
    float: none !important;
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
}

/* Hide mutual friends / extra info divs in the dropdown (too cluttered) */
.js_live-requests #friends-tab-requests .feeds-item .data-content > div:not(.float-end):not(.mt5) {
    display: none !important;
}

/* Confirm button — red accent */
.js_live-requests .js_friend-accept {
    background: #e74c3c !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 5px 11px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.15s !important;
    line-height: 1.4 !important;
}
.js_live-requests .js_friend-accept:hover {
    background: #c0392b !important;
}

/* Decline button — neutral grey */
.js_live-requests .js_friend-decline {
    background: #f0f2f5 !important;
    color: #444 !important;
    border: 1px solid #dde0e8 !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.15s !important;
    line-height: 1.4 !important;
}
.js_live-requests .js_friend-decline:hover {
    background: #e4e6eb !important;
}

/* ===== USER MENU DROPDOWN ===== */
.user-dropdown-menu {
    min-width: 240px !important;
    height: auto !important;
    min-height: 0 !important;
}
/* Profile header — gradient card like trendgo */
.user-dropdown-profile {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, #fff5f5, #ffecec) !important;
    text-decoration: none !important;
    border: none !important;
    margin-bottom: 0 !important;
    transition: background 0.2s ease !important;
}
.user-dropdown-avatar {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    border: 3px solid #e74c3c !important;
    box-shadow: none !important;
}
.user-dropdown-info {
    flex: 1 !important;
    min-width: 0 !important;
}
.user-dropdown-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.user-dropdown-handle {
    font-size: 13px !important;
    color: #888 !important;
    margin-top: 2px !important;
}
.user-dropdown-profile:hover {
    background: linear-gradient(145deg, #ffeaea, #ffdcdc) !important;
}

/* User menu dropdown items — match trendgo .user-menu-item */
.user-dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #333 !important;
    transition: background 0.2s ease !important;
    white-space: nowrap !important;
}
.user-dropdown-menu .dropdown-item:hover {
    background: linear-gradient(145deg, #fff5f5, #ffecec) !important;
    color: #333 !important;
}
/* Upgrade to Pro — trendgo .pro-item */
.user-dropdown-menu .dropdown-item.upgrade-pro-item {
    background: linear-gradient(145deg, #fff9e6, #fff3cc) !important;
    color: #333 !important;
}
.user-dropdown-menu .dropdown-item.upgrade-pro-item:hover {
    background: linear-gradient(145deg, #fff3cc, #ffe89a) !important;
}
/* Crown icon is gold like trendgo */
.user-dropdown-menu .upgrade-pro-item .main-icon {
    color: #f39c12 !important;
}
.user-dropdown-menu .upgrade-pro-item .main-icon path,
.user-dropdown-menu .upgrade-pro-item .main-icon circle,
.user-dropdown-menu .upgrade-pro-item .main-icon rect {
    fill: #f39c12 !important;
}
/* Verified/PRO name badges (verified_badge.svg, pro_badge.svg) — both SVG
   source files carry a hardcoded width="512" height="512" on the root
   <svg> tag, so the width="20px" height="20px" passed into the
   __svg_icons.tpl include never actually reaches them; whatever DOES
   constrain them on screen is a global sizing rule elsewhere, tuned for
   icons in general rather than a small inline badge sitting right next to
   a username, so it renders oversized relative to the text next to it. */
.pro-badge, .verified-badge {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}
.pro-badge svg, .verified-badge svg {
    width: 15px !important;
    height: 15px !important;
}

/* NEW badge — trendgo .pro-badge: radius 6px, gradient red */
.user-dropdown-menu .upgrade-pro-new {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    background: linear-gradient(145deg, #e74c3c, #c0392b) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    line-height: 1.5 !important;
    display: inline-block !important;
    width: fit-content !important;
    align-self: center !important;
}
/* Points / Wallet value — trendgo .menu-value */
.user-dropdown-menu .dropdown-item-value {
    margin-left: auto !important;
    font-weight: 600 !important;
    color: #e74c3c !important;
    font-size: 14px !important;
}
/* All icons red by default */
.user-dropdown-menu .dropdown-item .main-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    color: #e74c3c !important;
}
.user-dropdown-menu .dropdown-item .main-icon path,
.user-dropdown-menu .dropdown-item .main-icon circle,
.user-dropdown-menu .dropdown-item .main-icon rect {
    fill: #e74c3c !important;
}
.user-dropdown-menu .dropdown-divider {
    margin: 8px 0 !important;
    border-color: #e4e6eb !important;
}

/* Create dropdown menu */
.navbar-wrapper .d-none.d-xxl-block .dropdown-menu {
    width: 280px !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15) !important;
    border: 1px solid #e4e6eb !important;
    padding: 8px 0 !important;
    margin-top: 10px !important;
}
.navbar-wrapper .d-none.d-xxl-block .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1c1e21 !important;
    transition: background 0.15s ease !important;
}
.navbar-wrapper .d-none.d-xxl-block .dropdown-item:hover {
    background: #fff5f5 !important;
    color: #e74c3c !important;
}
.navbar-wrapper .d-none.d-xxl-block .dropdown-item .main-icon {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
}
.navbar-wrapper .d-none.d-xxl-block .dropdown-item .main-icon path,
.navbar-wrapper .d-none.d-xxl-block .dropdown-item .main-icon circle,
.navbar-wrapper .d-none.d-xxl-block .dropdown-item .main-icon rect {
    fill: #e74c3c !important;
}

/* ===== SIDEBAR EMPTY STATE ===== */
.right-sidebar .sidebar-empty {
    color: #aaa !important;
    font-size: 13px !important;
    text-align: center !important;
    padding: 12px 0 !important;
    margin: 0 !important;
}

/* ===== CREATE NEW STORY MODAL ===== */
form.publisher-mini .modal-body {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

form.publisher-mini .modal-footer {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* ===== SIDEBAR NAV HOVER ===== */
.side-nav li > a,
.side-nav li > .static {
    border-radius: 10px !important;
    margin: 1px 8px !important;
    padding: 12px 16px !important;
    transition: background 0.15s ease !important;
}

.side-nav li > a:hover {
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
    color: #e74c3c !important;
    text-decoration: none !important;
}

.side-nav li.active > a {
    background: #fff5f5 !important;
    color: #e74c3c !important;
}

/* ===================================================
   FRIENDS WIDGET TABS
   =================================================== */
.friends-widget-tabs {
    display: flex !important;
    border-bottom: 2px solid #f0f2f5 !important;
    padding: 0 8px !important;
    background: #fff !important;
}
.friends-tab {
    flex: 1 !important;
    background: none !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #65676b !important;
    cursor: pointer !important;
    margin-bottom: -2px !important;
    transition: color 0.2s, border-color 0.2s !important;
    white-space: nowrap !important;
}
.friends-tab.active {
    color: #e74c3c !important;
    border-bottom-color: #e74c3c !important;
}
.friends-tab .tab-badge {
    display: inline-block !important;
    background: #e74c3c !important;
    color: #fff !important;
    border-radius: 20px !important;
    padding: 1px 7px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin-left: 4px !important;
    vertical-align: middle !important;
}
.friends-tab-content {
    display: none !important;
}
.friends-tab-content.active {
    display: block !important;
}

/* ===== SENT REQUESTS — tg-sr-* classes (li is the flex container, no float) ===== */
.tg-sr-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    list-style: none !important;
    border-bottom: 1px solid #f5f5f5 !important;
}
.tg-sr-avatar {
    flex-shrink: 0 !important;
    display: block !important;
    text-decoration: none !important;
}
.tg-sr-avatar img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}
.tg-sr-info {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
.tg-sr-name {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.tg-sr-name:hover {
    text-decoration: underline !important;
    color: #e74c3c !important;
}
.tg-sr-mutual {
    display: block !important;
    font-size: 12px !important;
    color: #8a8d91 !important;
    margin-top: 2px !important;
}
.tg-sr-cancel {
    flex-shrink: 0 !important;
    background: #f0f2f5 !important;
    border: 1px solid #d0d3d8 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.15s, color 0.15s !important;
}
.tg-sr-cancel:hover {
    background: #e74c3c !important;
    color: #fff !important;
    border-color: #e74c3c !important;
}

/* ===================================================
   LOGO WRAPPER — flex row so logo + home btn sit side by side
   =================================================== */
.logo-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: visible !important;
}

/* ===================================================
   HEADER HOME BUTTON
   =================================================== */
.header-home-btn {
    display: none !important;
}
@media (min-width: 768px) {
    .header-home-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 14px !important;
        margin-left: -6px !important;
        background: #e74c3c !important;
        color: #fff !important;
        border-radius: 20px !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        transition: background 0.2s ease !important;
    }
    .header-home-btn:hover {
        background: #c0392b !important;
        color: #fff !important;
        text-decoration: none !important;
    }
}

/* ===================================================
   MOBILE HEADER ALIGNMENT
   Pulls the offcanvas menu icon closer to the left edge and gives the
   right-side nav icons (notifications etc.) more breathing room so the
   last one isn't pushed against/clipped at the screen edge.
   =================================================== */
@media (max-width: 767.98px) {
    /* A little breathing room from the very top edge for the whole row
       (logo on the left, grid/add-friend/messages/bell icons on the right)
       instead of sitting flush against the top. */
    .main-header {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        /* .main-header is position:fixed with a base height:70px sized for
           the desktop logo (line-height:70px etc). The mobile icon row only
           actually needs ~50px (38px row + 6+6 padding), but nothing here
           was shrinking the box itself - so .container (the row) sat at the
           TOP of a still-70px-tall bar, leaving ~20px of dead empty space
           between the icon row and the header's own bottom edge. That's
           the "gap" under the logo/icons: not spacing to the page content,
           spacing INSIDE the header that was never reclaimed. */
        height: 62px !important;
    }
    body {
        padding-top: 62px !important;
    }
    /* The page content wrapper below the header carries a core "mt20"
       (margin-top: 20px) utility class, which reads as a noticeably big
       gap before the stories card on a small phone screen. Tighten it up
       on mobile only — desktop keeps the original spacing. */
    .sg-offcanvas.mt20 {
        margin-top: 8px !important;
    }
    /* M82: post/video cards were sitting inside the default Bootstrap
       .container side padding (12px each side), on top of the mobile
       browser's own scrollbar allowance — leaving a wide dead strip of
       whitespace down both edges of every card. Shrinking just this
       outer container's padding widens every card at once (they all
       inherit their width from it), giving a tighter, more Facebook-like
       edge-to-edge feed on phones. Desktop is untouched (media-scoped). */
    .sg-offcanvas.container {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .main-header .container,
    .main-header .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
        overflow: visible !important;
    }
    .main-header .row {
        overflow: visible !important;
        align-items: center !important;
    }
    /* Belt-and-braces: align-items on the row should already vertically
       center both the logo column and the icon-row column, but force it
       on the columns themselves too (align-self) in case anything upstream
       (a stale base rule, a fixed height/padding on the column) stops that
       from reaching them. */
    .main-header .row > [class*="col-"] {
        align-self: center !important;
        display: flex !important;
    }
    /* Both the logo (left) and icon row (right) sit in separate Bootstrap
       columns; giving them the exact same height keeps them on the same
       visual line regardless of any padding/line-height differences
       between them (both already center their own content via
       align-items: center above). */
    .logo-wrapper,
    .navbar-wrapper {
        height: 44px !important;
        min-height: 44px !important;
    }
    /* The hamburger button picks up the generic .menu-icon style meant for
       sidebar submenu icons (gray gradient box + inset border) — looks like
       a boxed button next to the plain logo text. Strip that down to a
       clean transparent icon here in the header specifically; sidebar
       usages of .menu-icon are untouched. */
    .logo-wrapper .menu-icon {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 8px !important;
        color: #1c1e21 !important;
        transition: background 0.15s ease !important;
    }
    /* M5 (v2): user reported that hovering the hamburger revealed a grey
       box sitting in a different spot than the visible icon/logo — a sign
       that this hover fill (an artifact of the old boxed-button style) was
       exposing a stale hit-box. Removed entirely per explicit request. */
    .logo-wrapper .menu-icon:hover,
    .logo-wrapper .menu-icon:active {
        background: transparent !important;
    }
    .logo-wrapper .menu-icon i {
        width: auto !important;
        height: auto !important;
    }
    .logo-wrapper {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        gap: 8px !important;
        overflow: visible !important;
    }
    /* Smaller logo, forced into normal (non-overlapping) flex flow after
       the menu icon, with its own higher stacking context so it can never
       render underneath the icon even if something else on the page
       tries to position either of them absolutely. */
    .logo-wrapper .menu-icon {
        position: static !important;
        flex: 0 0 auto !important;
        width: 32px !important;
        height: 32px !important;
        z-index: 1 !important;
        order: 1 !important;
    }
    .logo-wrapper .logo {
        position: static !important;
        /* M5 (v6): every margin-top guess (0, -3, -6, -12) missed, because
           flexbox align-items:center on a single text node depends on exact
           font-metric details that are impossible to nail blind. Switching
           technique entirely: line-height set equal to the wrapper's own
           fixed height (38px) makes the text's line box EXACTLY fill that
           height, which centers it using the browser's normal text-layout
           math instead of a guessed offset stacked on top of flex
           centering. No more margin-top needed - removed. */
        display: block !important;
        flex: 0 1 auto !important;
        order: 2 !important;
        z-index: 2 !important;
        margin-left: 3px !important;
        margin-top: 0 !important;
        font-size: 22px !important;
        line-height: 44px !important;
        white-space: nowrap !important;
        overflow: visible !important;
        min-width: 0 !important;
        /* M5 (v2, superseded): the 14px value here was tuned against the
           OLD 70px-tall header before the height fix that trimmed it to
           50px - once that shipped, the frame it was measured against no
           longer existed, so it was pushing the logo well past center. */
    }
    .logo-wrapper .logo img {
        max-height: 26px !important;
        width: auto !important;
    }
    .logo-wrapper .header-home-btn {
        order: 3 !important;
    }
    .navbar-wrapper {
        justify-content: flex-end !important;
        overflow: visible !important;
    }
    /* Facebook-style icon row: evenly spaced circles instead of the cramped
       0-gap/1px-margin row from before. */
    .navbar-wrapper > ul {
        gap: 8px !important;
        overflow: visible !important;
    }
    .navbar-wrapper > ul > li:not(:has(.user-menu)) {
        margin: 0 !important;
        width: 44px !important;
        height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
    }
    /* NOTE: the "Add" (dots-grid) button draws its icon via a CSS
       background-image data-URI, not an inline SVG — an earlier version of
       this rule forced background-image:none on every nav icon (chasing
       what turned out to be a caching artifact, not a real dark-background
       bug) and that wiped out the dots-grid glyph entirely, leaving a
       blank circle. Excluded here via :not(.d-xxl-block). */
    /* M5 / D9 consistency: was a plain grey circle here regardless of what
       D9 set the same icons to on desktop (light-red chip, red icon, solid
       red on hover). Match that here so the header looks the same design
       across breakpoints instead of switching to plain grey on mobile. */
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a {
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
        background-color: #fdeceb !important;
        border: none !important;
        box-shadow: none !important;
        transition: background-color 0.15s ease !important;
    }
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a:hover,
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a:active,
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a:focus {
        background-color: #e74c3c !important;
    }
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a:hover .header-icon,
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a:hover .header-icon *,
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a:active .header-icon,
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a:active .header-icon * {
        color: #fff !important;
        fill: #fff !important;
    }
    /* The dots-grid Add button still gets the same circle size/spacing,
       just keeping its own background-image icon intact. */
    body .main-header .navbar-wrapper > ul > li.d-xxl-block > a {
        width: 44px !important;
        height: 44px !important;
        background-size: 22px 22px !important;
    }
    .navbar-wrapper > ul > li > a:not(.user-menu) .header-icon {
        width: 22px !important;
        height: 22px !important;
    }
    /* Force the glyph itself dark-on-light no matter what colored it was
       inheriting before — covers both SVG (path/circle/rect/polyline) and
       any icon-font (i) based icons. */
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)) > a .header-icon,
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)) > a .header-icon *,
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)) > a i {
        color: #e74c3c !important;
        fill: #e74c3c !important;
        stroke: #e74c3c !important;
    }
}

/* ===================================================
   MOBILE OFFCANVAS SIDEBAR MENU
   On mobile the sidebar column (.sg-offcanvas-sidebar, holding the News
   Feed / Mine / Saved / Scheduled... nav card) renders as a full-width
   panel, but the nav list itself only takes up its old desktop-card width
   — leaving a large blank strip down the right side of the drawer. Cap the
   drawer at a normal mobile "drawer" width and make the card/list actually
   fill it, so there's no dead space.
   M6 follow-up: capping at 340px still left a wide gap after the nav
   labels (icon + longest label "Discover Posts" only needs ~190px) - pull
   the cap down further so the drawer hugs its own content instead of
   sitting mostly empty.
   =================================================== */
@media (max-width: 767.98px) {
    .sg-offcanvas-sidebar {
        width: 66% !important;
        max-width: 240px !important;
    }
    .sg-offcanvas-sidebar .card,
    .sg-offcanvas-sidebar .main-side-nav-card,
    .sg-offcanvas-sidebar .card-body,
    .sg-offcanvas-sidebar .main-side-nav {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ===== MARKETPLACE GRID ===== */
.marketplace-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 4px 0 20px;
}
.marketplace-item {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1px solid #e4e6eb;
    position: relative;
}
.marketplace-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(231,76,60,0.2);
    border-color: #e74c3c;
}
.marketplace-photo {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.marketplace-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.marketplace-item:hover .marketplace-photo img {
    transform: scale(1.05);
}
.marketplace-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.marketplace-badge.new    { background: linear-gradient(145deg,#2ecc71,#27ae60); }
.marketplace-badge.used   { background: linear-gradient(145deg,#f39c12,#e67e22); }
.marketplace-badge.digital{ background: linear-gradient(145deg,#3b82f6,#2563eb); }
.marketplace-badge.service{ background: linear-gradient(145deg,#8b5cf6,#7c3aed); }
.marketplace-info {
    padding: 14px 16px 16px;
}
.marketplace-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.marketplace-price {
    font-size: 20px;
    font-weight: 700;
    color: #e74c3c;
    margin: 0 0 8px 0;
}
.marketplace-location {
    font-size: 13px;
    color: #888;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.marketplace-location i { font-size: 12px; color: #e74c3c; }
.mkt-save-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}
.mkt-save-btn button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: color 0.2s;
}
.mkt-save-btn button:hover, .mkt-save-btn button .fas { color: #e74c3c; }
@media (max-width: 1200px) { .marketplace-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 900px)  { .marketplace-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 576px)  { .marketplace-grid { grid-template-columns: 1fr; } }





/* ===== TRENDGO AUTH PAGES (sign-in / sign-up / landing) ===== */
/* Scoped to .sng-auth-page body to avoid affecting the main app */

/* Lock auth pages to viewport — no page scroll; zero the 70px sticky-nav padding */
html:has(.sng-sign-page-wrap),body.sng-auth-page{min-height:100vh!important;height:auto!important;padding-top:0!important;overflow-x:hidden!important;}

/* Wrapper */
.sng-sign-page-wrap{min-height:100vh;box-sizing:border-box;padding:0;background:linear-gradient(135deg,#f5f6f7 0%,#e9ebee 100%);display:flex;align-items:stretch;justify-content:center;overflow-x:hidden;}
/* hide the site footer links bar on the auth page only */
body.sng-auth-page .footer,body.sng-auth-page .footer-bottom-bar{display:none!important;}

/* Two-column container */
.login-container{display:grid;grid-template-columns:minmax(0,540px) 1fr;width:100%;max-width:none;min-height:100vh;background:#fff;border-radius:0;overflow:hidden;box-shadow:none;animation:sngContainerIn 0.8s ease;}
@keyframes sngContainerIn{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

/* Left form panel */
.login-form{padding:40px 50px;display:flex;flex-direction:column;justify-content:center;min-width:0;animation:sngFormIn 0.8s ease 0.2s both;}
/* short sign-in form stays centered; tall sign-up form anchors to top so the bottom link is never clipped */
.login-form:has(.js_panel:not(.x-hidden) form[data-url="core/signup.php"]){justify-content:flex-start;}
@keyframes sngFormIn{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:translateX(0);}}

/* Logo */
.sng-login-logo{display:block;margin-bottom:28px;font-size:30px;font-weight:800;color:#222;animation:sngLogoPop 0.6s ease 0.4s both;}
.sng-login-logo img{max-height:44px;width:auto;display:block;}
.sng-login-logo .logo-accent{color:#e74c3c;}
@keyframes sngLogoPop{0%{opacity:0;transform:scale(0.8);}50%{transform:scale(1.05);}100%{opacity:1;transform:scale(1);}}

/* Heading */
.login-title{font-size:36px;font-weight:800;color:#222;margin:0 0 8px;letter-spacing:-.5px;line-height:1.15;}
.login-title-accent{color:#e74c3c;}
.login-subtitle{font-size:14px;color:#666;line-height:1.6;margin:0 0 24px;}
.login-subtitle a{color:#e74c3c;text-decoration:none;font-weight:600;}
/* red-filled Google button (matches reference) */
.sng-social-section a[href*="connect/google"]{background:#e74c3c!important;border-color:#e74c3c!important;color:#fff!important;}
.sng-social-section a[href*="connect/google"]:hover{background:#c0392b!important;border-color:#c0392b!important;color:#fff!important;transform:translateY(-2px)!important;}
.sng-social-section a[href*="connect/google"] .main-icon,.sng-social-section a[href*="connect/google"] img{background:#fff;border-radius:50%;padding:2px;}

/* Social login section */
.sng-social-section{margin-bottom:20px;}
.sng-social-section a,.sng-social-section button:not(.sng-pw-toggle):not([type=submit]){display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;padding:13px 20px!important;border:2px solid #e4e6eb!important;border-radius:12px!important;background:#fff!important;cursor:pointer!important;transition:all 0.3s ease!important;font-size:14px!important;font-weight:600!important;color:#333!important;text-decoration:none!important;width:100%!important;box-sizing:border-box!important;margin-bottom:10px!important;}
.sng-social-section a:hover,.sng-social-section button:not(.sng-pw-toggle):not([type=submit]):hover{border-color:#e74c3c!important;background:linear-gradient(145deg,#fff5f5,#ffecec)!important;transform:translateY(-2px)!important;box-shadow:0 4px 12px rgba(231,76,60,0.15)!important;color:#333!important;}
.sng-social-section a i,.sng-social-section button i{font-size:18px!important;}

/* Divider */
.sng-divider{display:flex;align-items:center;margin:0 0 20px;}
.sng-divider::before,.sng-divider::after{content:'';flex:1;height:1px;background:#e4e6eb;}
.sng-divider span{padding:0 16px;color:#888;font-size:13px;}

/* Form fields */
.sng-form-group{margin-bottom:20px;}
.sng-form-row{display:flex;gap:12px;margin-bottom:20px;}
.sng-form-row>.sng-form-group{flex:1;margin-bottom:0;}
.sng-input-wrap{position:relative;}
.sng-input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#aaa;font-size:15px;transition:color 0.3s;pointer-events:none;}
.sng-input-wrap:focus-within .sng-input-icon{color:#e74c3c;}
.sng-form-input{width:100%;padding:15px 15px 15px 46px;border:2px solid #e4e6eb;border-radius:12px;font-size:14px;outline:none;transition:all 0.3s;background:#f8f9fa;color:#333;box-sizing:border-box;}
.sng-form-input:focus{border-color:#e74c3c;background:#fff;box-shadow:0 0 0 4px rgba(231,76,60,0.08);}
.sng-form-input-plain{width:100%;padding:15px;border:2px solid #e4e6eb;border-radius:12px;font-size:14px;outline:none;transition:all 0.3s;background:#f8f9fa;color:#333;box-sizing:border-box;}
.sng-form-input-plain:focus{border-color:#e74c3c;background:#fff;box-shadow:0 0 0 4px rgba(231,76,60,0.08);}
.sng-form-select{width:100%;padding:14px 15px;border:2px solid #e4e6eb;border-radius:12px;font-size:14px;outline:none;transition:all 0.3s;background:#f8f9fa;color:#333;}
.sng-form-select:focus{border-color:#e74c3c;background:#fff;box-shadow:0 0 0 4px rgba(231,76,60,0.08);}
.sng-pw-toggle{position:absolute;right:13px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#aaa;transition:color 0.3s;padding:4px;display:flex;align-items:center;}
.sng-pw-toggle:hover{color:#e74c3c;}
.sng-pw-toggle svg{width:20px;height:20px;fill:currentColor;}
.sng-form-options{display:flex;justify-content:space-between;align-items:center;margin:4px 0 20px;font-size:13px;}
.sng-remember-me{display:flex;align-items:center;gap:7px;color:#666;cursor:pointer;transition:color 0.3s;margin:0;}
.sng-remember-me:hover{color:#e74c3c;}
.sng-remember-me input{width:15px;height:15px;accent-color:#e74c3c;cursor:pointer;margin:0;}
.sng-forgot-link{color:#e74c3c;text-decoration:none;font-weight:600;transition:all 0.3s;position:relative;}
.sng-forgot-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:#e74c3c;transition:width 0.3s;}
.sng-forgot-link:hover{color:#c0392b;}
.sng-forgot-link:hover::after{width:100%;}
.sng-signin-btn{width:100%;padding:15px;background:linear-gradient(145deg,#e74c3c,#c0392b);border:none;border-radius:12px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:all 0.3s;box-shadow:0 4px 12px rgba(231,76,60,0.35);position:relative;overflow:hidden;display:block;}
.sng-signin-btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.3);transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s;}
.sng-signin-btn:hover::before{width:300px;height:300px;}
.sng-signin-btn:hover{background:linear-gradient(145deg,#c0392b,#a93226);transform:translateY(-2px);box-shadow:0 6px 16px rgba(231,76,60,0.45);}
.sng-signin-btn:active{transform:translateY(0);}
.sng-switch-link{text-align:center;margin-top:18px;font-size:13px;color:#666;}
.sng-switch-link a{color:#e74c3c;text-decoration:none;font-weight:700;transition:color 0.3s;}
.sng-switch-link a:hover{color:#c0392b;}
.sng-sign-page-wrap .alert-danger{margin-top:14px;border-radius:10px;font-size:13px;}
.sng-sign-page-wrap .alert-warning{border-radius:10px;margin-bottom:14px;font-size:13px;}

/* Right hero panel */
.login-hero{position:relative;background:linear-gradient(135deg,#e74c3c 0%,#c0392b 62%,#a93226 100%);display:flex;align-items:center;padding:52px 50px;color:#fff;overflow:hidden;}
.login-hero::before{content:'';position:absolute;top:-140px;right:-140px;width:380px;height:380px;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);border-radius:50%;pointer-events:none;}
.lh-content{position:relative;z-index:3;max-width:58%;animation:sngHeroIn .8s ease .2s both;}
@keyframes sngHeroIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.lh-title{font-size:38px;font-weight:800;line-height:1.16;margin:0 0 16px;letter-spacing:-.5px;}
.lh-title .gold{color:#ffd166;}
.lh-sub{font-size:15px;line-height:1.6;color:rgba(255,255,255,.9);margin:0 0 26px;max-width:430px;}
.lh-features{display:flex;flex-direction:column;gap:16px;margin-bottom:26px;}
.lh-feature{display:flex;align-items:flex-start;gap:14px;}
.lh-feature-icon{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);color:#fff;font-size:17px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);}
.lh-feature-title{font-size:16px;font-weight:700;margin-bottom:2px;}
.lh-feature-desc{font-size:13px;color:rgba(255,255,255,.85);line-height:1.45;max-width:290px;}
.lh-pill{display:inline-flex;align-items:center;gap:13px;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);border-radius:40px;padding:7px 24px 7px 7px;max-width:100%;}
.lh-pill-star{width:42px;height:42px;flex-shrink:0;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);}
.lh-pill-star i{color:#ffd166;font-size:17px;}
.lh-pill-txt{font-size:13px;font-weight:600;line-height:1.35;color:#fff;}
/* floating bubbles */
.lh-bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),rgba(255,255,255,.1));pointer-events:none;z-index:1;}
.lh-bubble.b1{width:90px;height:90px;top:12%;right:22%;animation:lhFloat 9s ease-in-out infinite;}
.lh-bubble.b2{width:56px;height:56px;bottom:16%;right:8%;animation:lhFloat 7s ease-in-out infinite 1s;}
.lh-bubble.b3{width:120px;height:120px;bottom:-30px;right:34%;opacity:.5;animation:lhFloat 11s ease-in-out infinite .5s;}
.lh-bubble.b4{width:40px;height:40px;top:42%;right:2%;animation:lhFloat 6s ease-in-out infinite 2s;}
/* floating icons */
.lh-float{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;border-radius:18px;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.2);}
.lh-float i{font-size:22px;}
.lh-heart-1{width:58px;height:58px;background:linear-gradient(145deg,#ff7a6b,#e74c3c);top:15%;right:6%;animation:lhFloat 6s ease-in-out infinite;}
.lh-heart-2{width:72px;height:72px;background:linear-gradient(145deg,#ff9a8b,#e74c3c);bottom:20%;right:38%;animation:lhFloat 8s ease-in-out infinite 1s;}
.lh-heart-2 i{font-size:32px;}
.lh-chat{width:50px;height:50px;background:rgba(255,255,255,.92);color:#e74c3c;top:5%;right:32%;animation:lhFloat 7s ease-in-out infinite .5s;}
.lh-bell{width:50px;height:50px;background:rgba(255,255,255,.92);color:#e74c3c;top:54%;right:3%;animation:lhFloat 7.5s ease-in-out infinite 1.5s;}
@keyframes lhFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
/* phone mockup */
.lh-phone{position:absolute;z-index:2;right:100px;top:50%;transform:translateY(-50%) rotate(3deg);width:196px;height:396px;background:#111;border-radius:36px;padding:10px;box-shadow:0 30px 60px rgba(0,0,0,.35);}
.lh-phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:74px;height:18px;background:#111;border-radius:0 0 12px 12px;z-index:2;}
.lh-phone-screen{width:100%;height:100%;background:#f3f4f6;border-radius:28px;overflow:hidden;padding:26px 10px 10px;}
.lh-app-tabs{display:flex;gap:3px;background:#fff;border-radius:12px;padding:6px;margin-bottom:8px;box-shadow:0 2px 6px rgba(0,0,0,.06);}
.lh-app-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:7px;font-weight:600;color:#888;padding:5px 1px;border-radius:8px;}
.lh-app-tab i{font-size:11px;color:#e74c3c;}
.lh-app-tab.active{background:#e74c3c;color:#fff;}
.lh-app-tab.active i{color:#fff;}
.lh-app-post{background:#fff;border-radius:12px;padding:8px;box-shadow:0 2px 6px rgba(0,0,0,.06);}
.lh-app-head{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.lh-app-ava{width:22px;height:22px;border-radius:50%;background:linear-gradient(145deg,#e74c3c,#c0392b);flex-shrink:0;}
.lh-app-name{font-size:9px;font-weight:700;color:#222;}
.lh-app-time{font-size:7px;color:#999;}
.lh-app-media{height:118px;background:linear-gradient(135deg,#c0392b,#e74c3c);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:800;margin-bottom:6px;}
.lh-app-actions{display:flex;justify-content:space-between;font-size:8px;color:#888;font-weight:600;}
.lh-app-actions i{color:#e74c3c;margin-right:2px;}

/* App store badges. Two copies, only one ever visible at a time:
   .lh-stores-desktop lives inside .login-hero, centered right under the
   feature icons (moved up from the bottom of the panel, per request) -
   glassy pill style matching .lh-pill so it reads as part of the hero,
   not bolted on. .lh-stores-mobile is a second copy sitting outside
   .login-hero as a fallback, because that whole panel - and everything
   in it, including the desktop badges - is display:none below 968px
   (see the media query below); without a second copy mobile visitors
   would never see the badges at all. It's hidden by default and only
   switched on inside that same breakpoint, styled as a solid dark pill
   since it sits on the plain page background there instead of the red
   gradient. */
.sng-sign-stack{display:flex;flex-direction:column;align-items:center;width:100%;}
.lh-stores{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
.lh-stores-desktop{margin:18px 0 0;justify-content:flex-start;}
.lh-stores-mobile{display:none;width:100%;max-width:520px;margin:18px auto 0;}
.lh-store-badge{display:inline-flex;align-items:center;gap:10px;border-radius:12px;padding:8px 16px 8px 12px;text-decoration:none;transition:background .15s ease,transform .15s ease;}
.lh-store-badge:hover{transform:translateY(-2px);}
.lh-store-badge i{font-size:22px;flex-shrink:0;}
.lh-store-badge span{display:flex;flex-direction:column;line-height:1.2;font-size:13px;font-weight:700;}
.lh-store-badge span small{font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.03em;opacity:.85;}
.lh-stores-desktop .lh-store-badge{background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);color:#fff;}
.lh-stores-desktop .lh-store-badge:hover{background:rgba(255,255,255,.24);color:#fff;}
.lh-stores-desktop .lh-store-badge span small{color:#fff;}
.lh-stores-mobile .lh-store-badge{background:#1c1c1e;border:1px solid #1c1c1e;color:#fff;}
.lh-stores-mobile .lh-store-badge:hover{background:#000;color:#fff;}
.lh-stores-mobile .lh-store-badge span small{color:#ccc;}
@media(max-width:480px){.lh-stores-mobile{padding:0 8px;}.lh-stores-mobile .lh-store-badge{padding:7px 12px 7px 10px;}.lh-stores-mobile .lh-store-badge span{font-size:12px;}}

/* Responsive */
@media(max-width:1180px){.login-hero{padding:44px 34px;}.lh-content{max-width:64%;}.lh-phone{width:172px;height:348px;right:14px;}.lh-phone-screen{padding:22px 8px 8px;}.lh-app-media{height:96px;}}
@media(max-width:968px){.sng-sign-page-wrap{padding:14px;align-items:flex-start;}.login-container{grid-template-columns:1fr;min-height:auto;border-radius:16px;max-width:520px;}.login-hero{display:none;}.login-form{padding:36px 28px;}.lh-stores-mobile{display:flex;}}
@media(max-width:480px){.login-form{padding:26px 18px;}.login-title{font-size:22px;}.sng-form-row{flex-direction:column;}}

/* ===== MOVIES PAGE (trendgo layout) ===== */
.mv-wrap{display:flex;max-width:1400px;margin:0 auto;padding:28px 20px;gap:28px;align-items:flex-start;}
.mv-sidebar{width:220px;flex-shrink:0;position:sticky;top:84px;}
.mv-category-list{background:#fff;border-radius:16px;padding:16px 0;box-shadow:0 2px 10px rgba(0,0,0,0.05);}
.mv-category-item{display:block;padding:12px 24px;cursor:pointer;transition:all 0.2s;color:#555;font-weight:500;font-size:14px;text-decoration:none;border-left:3px solid transparent;}
.mv-category-item:hover{background:#f8f9fa;color:#e74c3c;text-decoration:none;}
.mv-category-item.active{background:linear-gradient(135deg,rgba(231,76,60,0.08),rgba(192,57,43,0.06));color:#e74c3c;border-left-color:#e74c3c;font-weight:600;}
.mv-main{flex:1;min-width:0;}
.mv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px;}
.mv-card{display:block;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.07);transition:all 0.3s;text-decoration:none;color:inherit;}
.mv-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px rgba(0,0,0,0.14);text-decoration:none;color:inherit;}
.mv-poster-wrap{position:relative;overflow:hidden;}
.mv-poster{width:100%;height:300px;object-fit:cover;display:block;transition:transform 0.4s ease;}
.mv-card:hover .mv-poster{transform:scale(1.04);}
.mv-paid-badge{position:absolute;top:10px;right:10px;background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:8px;}
.mv-card-info{padding:14px;}
.mv-card-title{font-size:15px;font-weight:600;color:#333;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mv-card-year{color:#888;font-size:13px;margin-bottom:4px;}
.mv-card-views{display:flex;align-items:center;gap:5px;color:#aaa;font-size:12px;}
.mv-card-views i{font-size:12px;}
.mv-pager{margin-top:28px;}
/* Diamond_pro fix: .mv-grid uses grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) -
   on a phone-width screen there isn't room for even two 200px columns, so auto-fill collapses
   to a SINGLE column and that one card stretches to the full row width (1fr). Combined with
   .mv-poster's fixed height:300px, that turned each poster into an oddly wide/short landscape
   box instead of a normal movie-poster portrait shape - which is what read as "misaligned" in
   the mobile screenshot. Forcing an explicit 2-column grid with a shorter poster height keeps
   normal poster proportions instead of one stretched card per row. */
@media (max-width: 480px) {
  .mv-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .mv-poster { height: 220px !important; }
  .mv-card-info { padding: 10px !important; }
  .mv-card-title { font-size: 13px !important; }
  .mv-card-year { font-size: 12px !important; }
}
.mv-search-notice{background:#fff;border-radius:12px;padding:14px 20px;margin-bottom:20px;font-size:14px;color:#555;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.mv-search-notice .mv-search-count{display:inline-block;background:#e74c3c;color:#fff;font-weight:700;font-size:12px;padding:2px 10px;border-radius:20px;margin-right:6px;}
@media(max-width:900px){.mv-wrap{flex-direction:column;padding:16px;}.mv-sidebar{width:100%;position:static;}.mv-category-list{display:flex;overflow-x:auto;padding:10px;gap:6px;}.mv-category-item{white-space:nowrap;border-left:none;border-bottom:3px solid transparent;padding:8px 14px;border-radius:8px;}.mv-category-item.active{border-left:none;border-bottom-color:#e74c3c;background:rgba(231,76,60,0.07);}.mv-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}.mv-poster{height:220px;}}

/* M8: mobile nav drawer opened by the header hamburger on the Movies page
   (see the script + markup in movies.tpl) — fully self-contained, doesn't
   touch/depend on the shared .sg-offcanvas rules. */
.mv-nav-drawer{display:none;}
@media(max-width:900px){
  .mv-nav-drawer{display:block;position:fixed;inset:0;z-index:1200;pointer-events:none;}
  .mv-nav-drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.45);opacity:0;transition:opacity .25s ease;}
  .mv-nav-drawer-panel{position:absolute;top:0;left:0;height:100%;width:86%;max-width:320px;background:#fff;transform:translateX(-100%);transition:transform .25s ease-out;overflow-y:auto;box-shadow:4px 0 20px rgba(0,0,0,.2);}
  .mv-nav-drawer.active{pointer-events:auto;}
  .mv-nav-drawer.active .mv-nav-drawer-backdrop{opacity:1;}
  .mv-nav-drawer.active .mv-nav-drawer-panel{transform:translateX(0);}
}

/* ===== MOVIE DETAIL PAGE (trendgo style) ===== */
.mvd-card{background:#fff;border-radius:20px;padding:32px;box-shadow:0 2px 16px rgba(0,0,0,0.07);}
.mvd-header{display:flex;align-items:flex-start;gap:20px;margin-bottom:24px;}
.mvd-poster-small{width:88px;height:88px;border-radius:12px;object-fit:cover;flex-shrink:0;box-shadow:0 4px 14px rgba(0,0,0,0.15);}
.mvd-title-section{flex:1;}
.mvd-title{font-size:24px;font-weight:700;color:#1a1a1a;margin:0 0 8px;}
.mvd-meta{color:#666;font-size:14px;line-height:1.5;}
.mvd-media{position:relative;border-radius:16px;overflow:hidden;margin-bottom:24px;background:#000;}
.mvd-media img{width:100%;display:block;}
.mvd-media video{width:100%;display:block;}
.mvd-media .youtube-player{position:relative;cursor:pointer;}
.mvd-media .youtube-player img{width:100%;display:block;max-height:480px;object-fit:cover;}
.mvd-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;background:rgba(231,76,60,0.95);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(231,76,60,0.55);pointer-events:none;}
.mvd-play-btn i{color:#fff;font-size:24px;margin-left:4px;}
.mvd-media .youtube-player:hover .mvd-play-btn{transform:translate(-50%,-50%) scale(1.1);transition:transform 0.25s ease;}
.mvd-media-poster img{max-height:420px;object-fit:cover;width:100%;}
.mvd-description{color:#555;font-size:15px;line-height:1.75;margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid #f0f0f0;}
.mvd-info{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid #f0f0f0;}
.mvd-info-row{display:flex;align-items:flex-start;gap:16px;padding:10px 0;border-bottom:1px solid #f8f8f8;}
.mvd-info-row:last-child{border-bottom:none;}
.mvd-info-label{font-weight:600;color:#1a1a1a;font-size:14px;min-width:90px;flex-shrink:0;}
.mvd-info-value{color:#555;font-size:14px;flex:1;}
.mvd-info-value a{color:#e74c3c;text-decoration:none;}
.mvd-info-value a:hover{text-decoration:underline;}
.mvd-genre-tags{display:flex;flex-wrap:wrap;gap:8px;}
.mvd-genre-tag{background:#f0f2f5;color:#555;padding:5px 14px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;text-decoration:none;transition:all 0.2s;}
.mvd-genre-tag:hover{background:#e74c3c;color:#fff;text-decoration:none;}
.mvd-share{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.mvd-share-label{font-weight:600;color:#1a1a1a;font-size:14px;flex-shrink:0;}
.mvd-share-btns{display:flex;gap:10px;flex-wrap:wrap;}
.mvd-share-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;text-decoration:none;transition:transform 0.2s ease;}
.mvd-share-btn:hover{transform:scale(1.15);color:#fff;text-decoration:none;}
.mvd-share-btn.fb{background:#1877f2;}
.mvd-share-btn.tw{background:#000;}
.mvd-share-btn.vk{background:#4a76a8;}
.mvd-share-btn.li{background:#0a66c2;}
.mvd-share-btn.wa{background:#25d366;}
.mvd-share-btn.rd{background:#ff4500;}
.mvd-share-btn.pt{background:#e60023;}
/* Rating on listing cards */
.mv-card-rating{display:flex;align-items:center;gap:5px;margin-top:2px;}
.mv-star-icon{color:#f4b942;font-size:12px;}
.mv-rating-val{color:#888;font-size:12px;font-weight:600;}
@media(max-width:768px){.mvd-card{padding:20px;}.mvd-header{gap:14px;}.mvd-poster-small{width:64px;height:64px;}.mvd-title{font-size:20px;}}
/* ===== Pro Packages Page Layout ===== */
.pkg-page-layout{display:flex;gap:20px;max-width:1440px;margin:20px auto;padding:0 20px;align-items:flex-start;}
.pkg-sidebar{width:260px;flex-shrink:0;position:sticky;top:80px;}
.pkg-main{flex:1;min-width:0;}
@media(max-width:900px){.pkg-sidebar{display:none;}.pkg-page-layout{padding:0 12px;}}
/* ===== Pro Packages Page ===== */
.pro-packages-page{padding:0 0 40px;}
.packages-header{background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);padding:40px 20px;text-align:center;margin-bottom:0;}
.payment-demo-bar{background:linear-gradient(135deg,#f8c4b8,#e8a090);padding:18px 30px;margin:-22px 40px 32px;border-radius:16px;box-shadow:0 8px 24px rgba(231,76,60,0.15);position:relative;z-index:10;min-height:28px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#7a2010;font-weight:500;gap:8px;}
.packages-header h1{color:#fff;font-size:28px;font-weight:700;margin:0 0 8px;}
.packages-header h1 i{color:#f9ca24;margin-right:8px;}
.packages-header p{color:rgba(255,255,255,0.85);font-size:15px;margin:0;}
.packages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;max-width:1140px;margin:0 auto;padding:0 20px;}
.package-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 16px rgba(0,0,0,0.07);border:2px solid #e4e6eb;position:relative;display:flex;flex-direction:column;gap:0;}
.package-card.featured{border-color:#e74c3c;box-shadow:0 8px 32px rgba(231,76,60,0.18);}
.popular-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;font-size:11px;font-weight:700;padding:5px 16px;border-radius:20px;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;}
.package-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.package-badge{display:inline-block;color:#fff;font-size:11px;font-weight:700;padding:5px 14px;border-radius:20px;text-transform:uppercase;letter-spacing:0.5px;}
.package-icon img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #e4e6eb;}
.package-price{text-align:center;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f0f0f0;}
.price-amount{display:block;font-size:32px;font-weight:800;color:#1a1a1a;line-height:1.1;}
.price-duration{display:block;font-size:13px;color:#888;margin-top:4px;}
.package-features{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:0;}
.package-features li{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;color:#333;border-bottom:1px solid #f8f8f8;}
.package-features li:last-child{border-bottom:none;}
.feature-included i{color:#27ae60;font-size:18px;flex-shrink:0;}
.feature-excluded i{color:#e74c3c;font-size:18px;flex-shrink:0;}
.feature-excluded span{color:#aaa;}
.feature-all-permissions{background:#eef2ff;border-radius:8px;padding:10px 12px !important;margin-top:4px;border-bottom:none !important;font-weight:600;color:#4a6cf7 !important;}
.feature-all-permissions i{color:#4a6cf7;font-size:16px;flex-shrink:0;}
.package-perms-list{margin-top:4px;padding:8px 12px;background:#f8f9ff;border-radius:8px;}
.package-message{background:#f8f8f8;border-radius:10px;padding:12px 14px;margin:12px 0;font-size:13px;color:#777;text-align:center;flex:1;}
.package-message p{margin:0;}
.package-btn{display:block;width:100%;padding:13px;border:none;border-radius:30px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;cursor:pointer;text-align:center;text-decoration:none;margin-top:auto;transition:all 0.2s ease;}
.trial-btn{background:#3d5af1;color:#fff;}
.trial-btn:hover{background:#2d49e0;color:#fff;}
.buy-btn{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;}
.buy-btn:hover{background:linear-gradient(135deg,#c0392b,#a93226);color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(231,76,60,0.35);}
.wallet-action-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:13px;font-weight:600;color:#444;background:#f5f6f7;border:1px solid #e4e6eb;border-radius:20px;cursor:pointer;transition:background 0.15s ease,border-color 0.15s ease,color 0.15s ease;white-space:nowrap;line-height:1.4;}
.wallet-action-btn:hover{background:#fff0ee;border-color:#e74c3c;color:#e74c3c;}
.wallet-action-btn:hover .wallet-action-icon svg path,.wallet-action-btn:hover .wallet-action-icon svg circle,.wallet-action-btn:hover .wallet-action-icon svg rect{fill:#e74c3c;}
.wallet-action-icon{display:flex;align-items:center;flex-shrink:0;}
.wallet-action-icon svg{display:block;}

/* M5: Wallet page mobile cleanup. wallet.tpl builds the demo-gateway
   notice, the balance panel and the transactions table almost entirely
   with inline styles sized for desktop (40px vertical padding on the
   balance card, 15px padding + 14px/12px text on 4 stacked demo-credential
   boxes, a dense data table) - on a 390px phone that reads as a wall of
   dense red/purple blocks before the user reaches anything useful. Tighten
   padding/font sizes and shrink the balance panel so it reads as a compact
   card instead of a half-screen-tall banner. Inline styles win on
   specificity ties, so these need !important. */
@media (max-width: 480px) {
  .wallet-demo-notice {
    padding: 12px !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .wallet-demo-card {
    padding: 10px !important;
    min-width: 100% !important;
  }
  .wallet-demo-card div {
    font-size: 11px !important;
  }
  .wallet-demo-card div:first-child {
    font-size: 13px !important;
  }
  .stat-panel {
    padding: 20px 16px !important;
  }
  .stat-panel .h1 {
    font-size: 26px !important;
  }
  .wallet-action-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .table-responsive .table {
    font-size: 12px !important;
  }
  .table-responsive .table td,
  .table-responsive .table th {
    padding: 8px 6px !important;
    white-space: nowrap;
  }
}
@media(max-width:768px){.packages-grid{grid-template-columns:1fr;max-width:400px;}.packages-header{padding:30px 16px;}.packages-header h1{font-size:22px;}}

/* ===== Stories Wrapper — force white card (higher specificity beats inline <style> block) ===== */
body .card.stories-wrapper-container{background:#fff !important;box-shadow:0 2px 8px rgba(0,0,0,0.07) !important;border:1px solid #e4e6eb !important;overflow:visible !important;}
/* Uniform padding inside the stories card-body */
body .card.stories-wrapper-container .card-body{padding:6px 12px 2px !important;}
/* Zuck renders #stories as a <ul class="stories"> — make it a proper flex row.
   padding-top:8px > hover translateY(-4px) so the hover never clips at the top.
   padding-bottom:12px gives shadow room at the bottom. */
body .card.stories-wrapper-container #stories > ul.stories,
body .card.stories-wrapper-container .stories{display:flex !important;flex-direction:row !important;gap:10px !important;overflow-x:auto !important;align-items:flex-start !important;margin:0 !important;padding:8px 2px 12px !important;list-style:none !important;}
/* Consistent card size: make Add Story banner same height as story cards */
.add-story-banner{height:200px !important;width:110px !important;}

/* ===== Post Share Modal ===== */
#post-share-modal .modal-dialog{max-width:360px;}
#post-share-modal .modal-content.post-share-modal-content{border:none;border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.18);}
#post-share-modal .modal-body{padding:0;}
.post-share-modal-title{font-size:15px;font-weight:700;color:#1a1a1a;text-align:center;padding:16px 20px 12px;margin:0;border-bottom:1px solid #f0f2f5;}
.post-share-modal-option{display:flex;align-items:center;gap:14px;padding:13px 20px;font-size:14px;font-weight:500;color:#1a1a1a;cursor:pointer;text-decoration:none !important;border-bottom:1px solid #f0f2f5;transition:background 0.12s;}
.post-share-modal-option:hover{background:#f7f8fa;color:#1a1a1a;}
.post-share-modal-option i{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;color:#fff;}
.js_post-share-copy i{background:#e74c3c;}
.js_post-share-facebook i{background:#1877f2;}
.js_post-share-twitter i{background:#000;}
.js_post-share-whatsapp i{background:#25d366;}
.post-share-modal-cancel{display:block;width:100%;padding:13px 20px;font-size:14px;font-weight:600;color:#e74c3c;background:none;border:none;text-align:center;cursor:pointer;transition:background 0.12s;}
.post-share-modal-cancel:hover{background:#fff5f5;}

/* ===== SUPPRESS SNGINE PUBLISHER OVERLAY INSIDE MODAL =====
   When publisher loads in modal mode (#publisher-wapper-modal), Bootstrap's
   own backdrop already dims the page. Sngine's .publisher-overlay (fixed,
   black, opacity 0.6 on body.publisher-focus) creates a second dark layer.
   Hide it unconditionally in modal context. */
#publisher-wapper-modal .publisher-overlay,
body.publisher-focus #publisher-wapper-modal .publisher-overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ===== PUBLISHER TOOLBAR — left-aligned gray circles ===== */

/* Move icons to the left (template has margin-left:auto which pushes them right) */
#publisher-box .publisher-toolbar-icons {
    margin-left: 0 !important;
}

/* Privacy pill — gray bg, red text/icon */
#publisher-box .publisher-privacy-btn .btn {
    background: #f0f2f5 !important;
    color: #e74c3c !important;
    padding: 7px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: none !important;
}
#publisher-box .publisher-privacy-btn .btn:hover,
#publisher-box .publisher-privacy-btn .btn:focus,
#publisher-box .publisher-privacy-btn .btn:active {
    background: #e4e6eb !important;
    color: #e74c3c !important;
    box-shadow: none !important;
}
#publisher-box .publisher-privacy-btn .btn i {
    color: #e74c3c !important;
}
/* Show a small red caret after the label */
#publisher-box .publisher-privacy-btn .btn::after {
    content: "" !important;
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid #e74c3c !important;
    margin-left: 2px !important;
    vertical-align: middle !important;
}

/* Icon buttons — gray circle, perfectly centered content */
#publisher-box .publisher-toolbar-icons .pub-icon-btn {
    background: #f0f2f5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
}
#publisher-box .publisher-toolbar-icons .pub-icon-btn:hover {
    background: #e4e6eb !important;
}
/* Center the uploader span without shrinking it — it auto-sizes to the SVG */
#publisher-box .publisher-toolbar-icons .pub-icon-btn > span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
}
/* Ensure SVG icons have no extra margin/padding that would offset them */
#publisher-box .publisher-toolbar-icons .pub-icon-btn .main-icon {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    line-height: 0 !important;
    background: none !important;
    border-radius: 0 !important;
}

/* Diamond_pro fix: right-sidebar widget — keep Add/Like button on the right, name on the left (newer Sngine outputs button before name; float is ignored in flex) */
.right-sidebar .data-content{align-items:center;}
.right-sidebar .data-content .float-end{order:2;margin-left:auto;}
.right-sidebar .data-content .name,.right-sidebar .data-content .mt5{order:1;}
.right-sidebar .data-container{align-items:center;}
.right-sidebar .data-content{padding-left:0 !important;}

/* Diamond_pro fix: keep comment/message send controls visible on desktop */
.x-form-tools-post {
    display: inline-block !important;
}
.x-form-tools-post .fa-paper-plane {
    color: #e74c3c !important;
}

/* Diamond_pro fix: header Messages icon swapped to an outline SVG (header-messages-outline.svg,
   fill="none" in the source file) so it visually matches the other header icons' thin weight
   instead of looking like a solid dark button - see __svg_icons.tpl. But several earlier rules
   force fill:#e74c3c !important on every header icon path (default state, hover state, unread
   state) which would paint this "fill:none" path solid red again, undoing the whole point.
   This runs last in the file so it wins the tie against those same-specificity !important
   rules, keeping this one icon hollow (stroke only) in every state. */
.navbar-wrapper li.js_live-messages .header-icon path,
.navbar-wrapper li.js_live-messages:hover .header-icon path,
.navbar-wrapper li.js_live-messages > a:hover .header-icon path {
    fill: none !important;
}

/* Diamond_pro fix: base theme's own reaction-emoji picker (the popup that opens when you
   press-and-hold/click the Like button on a normal post - feed, watch, marketplace, etc.)
   has a rule at max-width:480px that shrinks it to a fixed width:144px box. At 48px per
   emoji, 144px is exactly 3 columns, so on any phone the picker wraps into a 2-row grid
   instead of staying the single horizontal strip it is on desktop. This puts it back to a
   single row on mobile too. Reels have their own separate picker with more specific
   .reel-container-scoped !important rules in reels.tpl, so those still win there and this
   doesn't need to exclude them. */
@media (max-width: 480px) {
    .reactions-container {
        width: auto !important;
        white-space: nowrap !important;
        border-radius: 40px !important;
        /* v2: first attempt fought the base theme's own positioning JS
           (which sets top/left inline via element.style, using
           position:fixed) by forcing position:absolute + a custom script
           to recalculate bottom/left - the two fights produced the wrong
           spot. User found the real fix via DevTools: leave the base
           theme's fixed-position JS alone entirely and just restyle the
           box itself. No custom JS needed here at all. */
        position: fixed !important;
        background: #2b28283b !important;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2) !important;
        z-index: 4 !important;
    }
    .reactions-container .reactions_item {
        float: none !important;
        display: inline-block !important;
    }
    /* M85: this box is ~360px wide (8 reaction emojis in a single row) but
       the base theme's positioning JS anchors it via an inline `left` that's
       just calculated from the trigger button's own X position, with no
       clamp against the viewport edge. That's fine for the post-level Like
       button (sits close to the left edge of the action bar), but comment
       reaction buttons live inside the narrower, indented comment thread —
       confirmed via DevTools that their computed `left` regularly pushed
       the box's right edge ~50px past the screen, cutting off the last few
       reaction options. Scoped to comment reactions only (identified by
       their .js_react-comment items, vs .js_react-post on the post-level
       picker) so the already-working post picker keeps its JS-computed
       position untouched — comment/reply pickers now just dock to a fixed
       distance from the right edge instead, guaranteeing every reaction is
       reachable regardless of how deep the comment/reply is indented. */
    .reactions-container:has(.js_react-comment) {
        left: auto !important;
        right: 8px !important;
    }
}

/* Diamond_pro fix: event cards (Discover/Interested/Going/My Events tabs, __feeds_event.tpl
   box-tpl) sit inside the base theme's shared .ui-box class, which carries a base
   margin-top:50px meant for card styles elsewhere that have an avatar overlapping the top
   edge of the box. Event cards don't have that overlap - their icon is drawn normally inside
   the box's own padding - so that 50px became a big dead gap between the tab filter row and
   the card grid on every Events tab, most noticeable on mobile where the filter row wraps to
   two lines and the empty space below it reads as a broken layout. Scoped to the
   event-box-card class added in the template (not .ui-box itself) so this doesn't touch any
   other card type across the site that still relies on the 50px for its own overlap. */
.event-box-card {
    margin-top: 0 !important;
}


/* M26: the base theme's style.min.css defines a CSS variable used site-wide -
   including on form inputs - as:
     --body-font-family: Poppins, Helvetica, "sans-serif";
   That last fallback is QUOTED. Per the CSS spec, a quoted value is always
   treated as a literal font name to look up, never as the generic keyword -
   so the browser was really looking for a font literally named "sans-serif",
   which doesn't exist, leaving Poppins+Helvetica with no real fallback at
   all. Any character neither of those two fonts covers (Tamil and other
   non-Latin scripts typed into the registration form, per client report)
   rendered as a missing/tofu glyph instead of silently falling back to a
   system font that has it. Redeclaring the variable unquoted here (this
   file loads after style.min.css, so it wins) restores normal per-glyph
   font fallback everywhere the variable is used across the theme. */
:root {
    --body-font-family: Poppins, Helvetica, sans-serif;
}

/* M25: on narrow/mobile post cards the privacy dropdown (Public/Friends/Only Me)
   could render BEHIND the post's photo/video instead of floating cleanly over it.
   Root cause: the post's media wrapper establishes its own stacking context
   (it carries an explicit z-index further up in this file), while the header
   row that contains the dropdown had no competing stacking context of its own -
   so despite the dropdown-menu's own z-index:1000, the media painted on top of
   it wherever the two visually overlapped (common on mobile where the media
   sits close beneath the header). Fix: give the post header row its own
   higher stacking context so the open dropdown always floats above any media
   in the post body, and bump the menu's own z-index above Bootstrap's other
   1000-level UI (nav dropdowns etc.) for good measure. */
.post .post-header {
    position: relative !important;
    z-index: 30 !important;
}
.post-time .btn-group .dropdown-menu {
    z-index: 1060 !important;
}

/* M28: header icons (add-friend/chat/notification) already got a bigger
   circular background in M20, but the icon glyph itself still looked small
   floating inside that larger 44px circle - user asked for the icon itself
   to fill the shape a bit more. */
@media (max-width: 767.98px) {
    .navbar-wrapper > ul > li > a:not(.user-menu) .header-icon {
        width: 24px !important;
        height: 24px !important;
    }
    body .main-header .navbar-wrapper > ul > li.d-xxl-block > a {
        background-size: 24px 24px !important;
    }
}


/* M27 (partial): remove the Google Play / App Store badges from the mobile
   sign-in page per request. sign.tpl's .login-hero panel (which holds the
   desktop badges, .lh-stores-desktop) is already hidden below 968px, but it
   also has a separate .lh-stores-mobile fallback block specifically so
   mobile visitors would still see the badges somewhere - hiding that too
   removes them from mobile entirely, as requested. The full visual redesign
   of the mobile sign-in page (Welcome Back / secure-login badge / stats row
   with a real reel count) is still open - needs real member/post/reel
   numbers, which weren't available through this session's tooling. */
.lh-stores-mobile {
    display: none !important;
}


/* M29: the reaction emoji picker on the post-level Like button (js_react-post)
   opens ~10px above the button with a real empty gap between them (confirmed
   live via getBoundingClientRect: picker bottom sat ~10px above the button's
   top). The base theme's show/hide JS lives in the core bundle, not this
   theme, so its exact hover-tracking logic can't be edited here - but
   regardless of whether it's an instant mouseleave or a short timeout, that
   empty gap is dead space the cursor has to cross to get from the button up
   to an emoji, and crossing it is exactly when users reported the picker
   disappearing. Nudging the picker down so it touches/slightly overlaps the
   button removes that dead zone entirely. Scoped to the post-level picker
   only (:has(.js_react-post)) so this doesn't touch the reel or comment
   reaction pickers, which already have their own tuned positioning from
   earlier fixes. */
.reactions-container:has(.js_react-post) {
    margin-top: 12px !important;
}

/* M33: on the home feed, the small "X added blog/video CategoryName" line
   under a post's author name showed the category as a clickable pill right
   next to "added blog"/"added video"/"sent merit" - takes up real width,
   especially on mobile where that line can already be tight next to the
   timestamp/privacy icons. This only targets the category link/badge INSIDE
   a feed post's .post-title line (__feeds_post.body.tpl) - it does NOT touch
   .blog-category on the dedicated Blogs listing/carousel pages, where
   showing the category is the actual point of that UI. */
.post .post-title .blog-category,
.post .post-title > .badge {
    display: none !important;
}

/* M35: mobile sign-in page redesign per the "Welcome Back!" reference mockup -
   tagline under the logo, red accent on "Back!", subtitle, a "Secure login"
   trust badge under the button, and the Remember-me checkbox restyled as a
   toggle switch. Scoped to .fr_auth_form (the elengine sign/signup include)
   so nothing else on the site is affected. The stats row (Members/Posts/
   Worldwide) from the mockup is deliberately left out - it needs real numbers
   we don't have safe access to pull ourselves. */
.fr_tagline {
    text-align: center;
    color: #999;
    font-size: 14px;
    margin: 2px 0 18px;
}
.fr_welcome_accent {
    color: #e74c3c;
}
.fr_welcome_subtitle {
    color: #888;
    font-size: 14px;
    margin: 6px 0 0;
}
.fr_secure_badge {
    text-align: center;
    color: #999;
    font-size: 12.5px;
    margin-top: 14px;
}
.fr_secure_badge i {
    color: #e74c3c;
    margin-right: 4px;
}
.fr_secure_dot {
    margin: 0 4px;
    opacity: .6;
}
/* remember-me toggle switch */
.fr_auth_form .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 0;
}
.fr_auth_form .form-check-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 40px;
    height: 22px;
    border-radius: 20px;
    background: #ddd;
    border: none;
    position: relative;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    transition: background-color .2s ease-in-out;
}
.fr_auth_form .form-check-input::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: transform .2s ease-in-out;
}
.fr_auth_form .form-check-input:checked {
    background: linear-gradient(135deg,#ff5c5c 0%,#e74c3c 100%);
}
.fr_auth_form .form-check-input:checked::before {
    transform: translateX(18px);
}
.fr_auth_form .form-check-label {
    margin: 0;
    font-size: 14px;
}

/* M-header: the top-right profile pill (avatar + name + chevron) per the
   user's reference photo of the header - was a flat, pale pink pill with
   dark text; redesigned as a filled red gradient pill with a white-bordered
   avatar and white text, matching the site's red brand gradient used
   elsewhere (e.g. the sign-in hero panel). */
.navbar-wrapper .user-menu {
    display: flex !important;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg,#ff5c5c 0%,#e74c3c 100%) !important;
    border-radius: 999px !important;
    padding: 4px 18px 4px 4px !important;
    box-shadow: 0 4px 14px rgba(231,76,60,.35);
}
.navbar-wrapper .user-menu img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 2px solid #fff;
    object-fit: cover;
}
.navbar-wrapper .user-menu .title {
    color: #fff !important;
    font-weight: 600 !important;
}
.navbar-wrapper .user-menu .user-menu-caret {
    color: #fff !important;
}

/* M36: the "Reels" suggestion card header had its icon and label text
   baseline-misaligned (icon sat lower than the text). Also added a "See All"
   link matching the pattern used by the other suggestion cards (Pages you
   might like, Suggested Groups, Suggested Events) with a small chevron icon
   per request. */
.reels-card-header {
    display: flex;
    align-items: center;
}
/* M38: display:flex on the header neutralizes Bootstrap's .float-end (floats
   do nothing to flex items), which was leaving "See All" stuck on the left
   next to "Reels" instead of pushed to the right. order + margin-left:auto
   pins it to the end of the flex row instead. */
.reels-card-header .float-end {
    order: 2;
    margin-left: auto;
    float: none !important;
}
.reels-card-header .svg-container.main-icon {
    display: flex;
    align-items: center;
}
.reels-card-header .text-lg {
    line-height: 1;
    margin-top: -5px;
}
.reels-card-header .float-end small a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* M39: left sidebar nav - tighten the gap between menu items a little
   further (base theme uses margin-bottom: 5px per item), and replace the
   plain grey hover background with the same light red tint/colour already
   used for the "active" News Feed sub-item elsewhere in this same menu, so
   hover and active read as one consistent style instead of two different
   languages (red for active, grey for hover). */
.main-side-nav > li:not(.ptb5) {
    margin-bottom: 2px !important;
}
.main-side-nav > li:not(.ptb5):has(> a:hover):not(:has(> a[aria-expanded="true"])) {
    background: rgba(231, 76, 60, 0.08) !important;
}
.main-side-nav > li:not(.ptb5) > a:hover {
    background: rgba(231, 76, 60, 0.08) !important;
    color: rgb(231, 76, 60) !important;
}

/* M39: top header profile pill showed a flat grey background on hover
   (base theme default) which looked like an unrelated colour flash against
   our red gradient pill. Keep the same gradient on hover instead of
   switching to grey. */
.navbar-wrapper .user-menu:hover {
    background: linear-gradient(135deg,#ff5c5c 0%,#e74c3c 100%) !important;
    color: #fff !important;
}

/* M39: right-sidebar suggestion widgets (People you might know, Pages you
   might like, Suggested Groups) showed names in the theme's default link
   colour/weight - made them match the same near-black Facebook-style text
   already applied to post captions (M18: rgb(5,5,5)), bumped to semibold
   since these are name labels rather than body copy. */
.suggestion-card .name a {
    color: #050505 !important;
    font-size: 15px;
    font-weight: 600;
}

/* M40: found the actual cause of the grey sidebar hover still showing - a
   third-party plugin (stories widget) injects its own inline <style> block
   at runtime containing a copy of the old grey hover rule, and because it
   loads into the page AFTER our stylesheet with identical selector
   specificity, it was winning the tie and silently overriding the M39 fix
   above. Doubling the class selector here bumps our rule's specificity
   just enough to beat it regardless of load order, without touching the
   plugin's own file. */
.main-side-nav.main-side-nav > li:not(.ptb5):has(> a:hover):not(:has(> a[aria-expanded="true"])) {
    background: rgba(231, 76, 60, 0.08) !important;
}
.main-side-nav.main-side-nav > li:not(.ptb5) > a:hover {
    background: rgba(231, 76, 60, 0.08) !important;
    color: rgb(231, 76, 60) !important;
}


/* M41: user wants the mobile/webview top header to match the desktop
   reference photo's icon row (round pink circles, red icons) - the "Add"
   (dots-grid) button was fully hidden below 1400px (M81), so mobile/tablet
   webview widths only ever showed 3 icons (Requests/Messages/Notifications)
   instead of the same set desktop has. Per explicit follow-up, the profile
   dropdown pill stays OUT of the mobile header - it already lives in the
   bottom nav, no need to duplicate it up top. */
@media (max-width: 1399.98px) {
    body .main-header .navbar-wrapper > ul > li.d-xxl-block {
        display: flex !important;
    }
}
@media (max-width: 767.98px) {
    .main-header .row > .col-7.col-md-4.col-lg-3 {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: 55% !important;
    }
    .main-header .row > .col-5.col-md-8.col-lg-9 {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: 60% !important;
    }
    body .main-header .navbar-wrapper > ul {
        gap: 6px !important;
        justify-content: flex-end !important;
    }
}


/* M42: M41's fix above still left the icon row sitting well left of the
   true right edge (confirmed via user screenshot on the Marketplace page -
   a big empty gap after the bell icon). Root cause: .navbar-wrapper's real
   parent is an UNNAMED nested Bootstrap column (`col-md-5 col-lg-4`, no
   bare `col-*` class) inside a SECOND nested row (search column + icon
   column) - that inner column has no width/grid rules below the md
   breakpoint, so it just sizes to its own content and sits at the START
   of its own flex row instead of stretching to the right edge. Patching
   every nested column individually (M41's own approach) is fragile;
   instead, pull the icon row out of that nested-column flow entirely and
   pin it directly to the header container's own right edge with absolute
   positioning - immune to whatever the nested Bootstrap grid math does at
   any width. This supersedes/overrides M41's col-7/col-5 rebalance rules
   above (left in place, now harmless no-ops since .navbar-wrapper is
   pulled out of that flow). Verified via computed getBoundingClientRect()
   that the icon row's right edge now exactly matches the container's
   right edge at 320px, 390px and 1024px. */
@media (max-width: 1399.98px) {
    .main-header .container,
    .main-header .container-fluid {
        position: relative !important;
    }
    .navbar-wrapper {
        position: absolute !important;
        top: 50% !important;
        right: 0 !important;
        transform: translateY(-50%) !important;
        width: auto !important;
    }
}


/* M43: M42's fix above used `transform:translateY(-50%)` on .navbar-wrapper
   to vertically center it - but a `transform` on any ANCESTOR makes that
   ancestor the containing block for `position:fixed` DESCENDANTS (per the
   CSS spec), instead of the real viewport. The Friend Requests popup
   (M14, .js_live-requests .dropdown-widget) uses `position:fixed; left:50%`
   to center itself on screen - with the transform in place, it was
   centering itself relative to the tiny ~194px-wide .navbar-wrapper box
   (which itself sits pinned to the right edge) instead of the actual
   screen width, landing it far over to the right and cut off (confirmed
   via user screenshot - Friends popup text clipped at the screen edge,
   unlike the Messages popup which uses default absolute positioning and
   wasn't affected by this). Fixed by dropping the transform entirely and
   using top:0/bottom:0 (stretch to the container's full height) instead -
   .navbar-wrapper's own existing `display:flex; align-items:center` (set
   earlier in this file) still centers its content vertically without
   needing a transform anywhere in the ancestor chain. Verified via
   getBoundingClientRect() that the Friend Requests popup now centers on
   the true viewport while the icon row still sits flush against the
   container's right edge exactly as before. */
.navbar-wrapper {
    transform: none !important;
}
@media (max-width: 1399.98px) {
    .navbar-wrapper {
        top: 0 !important;
        bottom: 0 !important;
    }
}


/* M44: user reported Notifications and the "4 dot" Add/create menu each
   opened in a different, inconsistent spot (one hugging the left, one
   cut off on the right) while Friends (M14 above) and Messages looked
   correctly centered - wanted all four to match. Measured via
   getBoundingClientRect() on a 390px-wide screen: Notifications was
   rendering almost entirely off-screen to the right (left:326px,
   right:626px - only ~64px actually visible), and the Add menu started
   over the logo and spilled past the right edge (left:176px,
   right:456px) - both broken, just in different directions, because
   both still use Bootstrap's default dropdown-menu-end positioning
   (anchored to their own trigger icon) rather than M14's fixed-and-
   centered approach. Applying the exact same fix here for all-four
   consistency. Verified via getBoundingClientRect() after the fix:
   Notifications now left:35px/right:335px, Add menu left:45px/
   right:325px - both centered and fully on-screen on a 390px viewport,
   matching Friends and Messages. */
@media (max-width: 480px) {
    .js_live-notifications.dropdown,
    .navbar-wrapper > ul > li.d-xxl-block.dropdown {
        position: static !important;
    }
    .js_live-notifications .dropdown-widget,
    .navbar-wrapper > ul > li.d-xxl-block .dropdown-menu {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 70px !important;
        transform: translateX(-50%) !important;
        width: 90vw !important;
        max-width: 340px !important;
    }
}


/* M45: per request, nudge the icon row a small amount off the true right
   edge - the notification bell sitting perfectly flush against the screen
   edge read as "stuck". A small 8px breathing gap softens that without
   meaningfully affecting the layout room freed up by M41/M42. */
@media (max-width: 1399.98px) {
    .navbar-wrapper {
        right: 8px !important;
    }
}