/* ===== 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 6 Free", "Font Awesome 6 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;
}

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

/* ===== 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 6 Free" !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%;
}

/* 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;
}

.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: flex-start;
    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. */
.post-time .btn-group,
.post-time .btn-group .btn,
.post-time .btn-group .dropdown-toggle {
    padding-top: 0 !important;
    padding-bottom: 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;
}

/* ===== 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;
}

/* 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;
}

/* 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: 3px !important;
        padding-bottom: 9px !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: 50px !important;
    }
    /* body's padding-top reserves space for the fixed header (70px to
       match its base height) so page content starts right below it
       instead of sliding underneath. Has to shrink by the same 20px the
       header just did, or content would now start 20px too low. */
    body {
        padding-top: 50px !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: 38px !important;
        min-height: 38px !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: 38px !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: 38px !important;
        height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !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: 38px !important;
        height: 38px !important;
        line-height: 38px !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: 38px !important;
        height: 38px !important;
        background-size: 20px 20px !important;
    }
    .navbar-wrapper > ul > li > a:not(.user-menu) .header-icon {
        width: 20px !important;
        height: 20px !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.
   =================================================== */
@media (max-width: 767.98px) {
    .sg-offcanvas-sidebar {
        width: 86% !important;
        max-width: 340px !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;}
@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;
}