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

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

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

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

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

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

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

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

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

/* ===== HEADER ===== */
/* Mobile only: clean 50px white bar, no styling changes to desktop/webview */
@media (max-width: 767.98px) {
    /* White card bar */
    .main-header {
        background: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.07) !important;
        height: 50px !important;
        padding: 0 !important;
    }
    body {
        padding-top: 50px !important;
    }
    /* Reset icon links to clean default */
    .navbar-wrapper > ul > li > a:not(.user-menu) {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 50% !important;
        height: 36px !important;
        width: 36px !important;
        line-height: 36px !important;
        margin-top: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Dark grey icons */
    .navbar-wrapper > ul > li > a:not(.user-menu) .header-icon *,
    .navbar-wrapper > ul > li > a:not(.user-menu) svg,
    .navbar-wrapper > ul > li > a:not(.user-menu) svg *,
    .navbar-wrapper > ul > li > a:not(.user-menu) path,
    .navbar-wrapper > ul > li > a:not(.user-menu) circle {
        fill: #1c1e21 !important;
        stroke: #1c1e21 !important;
    }
    .navbar-wrapper > ul > li > a:not(.user-menu) .header-icon {
        width: 20px !important;
        height: 20px !important;
    }
    /* Hover: light grey */
    .navbar-wrapper > ul > li > a:not(.user-menu):hover {
        background: #f0f2f5 !important;
    }
    /* Profile avatar clean */
    .navbar-wrapper .user-menu {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: 36px !important;
        height: 36px !important;
    }
    .navbar-wrapper .user-menu img {
        width: 36px !important;
        height: 36px !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 50% !important;
    }
    /* Icon <li> containers */
    .navbar-wrapper > ul > li:not(:has(.user-menu)),
    .navbar-wrapper > ul > li:has(.user-menu) {
        height: 36px !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }
    /* Badge */
    .navbar-wrapper .counter.red {
        min-width: 14px !important;
        height: 14px !important;
        font-size: 9px !important;
        top: -3px !important;
        right: -3px !important;
    }
    /* Hide home button, desktop caret */
    .header-home-btn { display: none !important; }
    .navbar-wrapper > ul > li > a.dropdown-toggle::after { display: none !important; }
    /* Center SVG */
    .main-header .svg-container svg { transform: none !important; }
}

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

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

.logo-w {
    color: #222;
}

.logo-o {
    color: #e74c3c;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.notification i {
    color: #e74c3c;
}

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

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

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

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

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

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

.menu {
    list-style: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Subtitle — mutual friends / Likes / Members count (clean, compact) */
.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: 11px !important;
    color: #65676b !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-decoration: none !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%;
    max-width: 560px;
    border-radius: 12px;
    margin-top: 12px;
}
.pg_1x img {
    max-width: 100%;
    max-height: 400px;
}

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

.dropdown-item span {
    flex: 1;
}

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

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

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

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

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

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

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

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

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

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

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


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

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



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

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

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

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

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

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

.header-right {
    position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.friend-info {
    flex: 1;
}

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

.conv-avatar {
    position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* When dropdown is open inside this post, raise it above all siblings */
.post:has(.dropdown-toggle[aria-expanded="true"]) {
    z-index: 50 !important;
}

/* Also match via dropdown-menu.show for Bootstrap's JS-driven dropdowns */
.post:has(.dropdown-menu.show) {
    z-index: 50 !important;
}

.post-body {
    padding: 16px 16px 0 16px;
}

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

/* When dropdown is open, raise this post above all others */
.post-header:has(.dropdown-toggle[aria-expanded="true"]) {
    z-index: 50 !important;
}

/* Ensure the dropdown menu itself floats above everything */
.post-header .dropdown-menu,
.post-header .action-dropdown-menu,
.post-time .dropdown-menu {
    z-index: 1060 !important;
}

/* Mobile: same dropdown z-index fix */
@media (max-width: 767.98px) {
    .post-header:has(.dropdown-toggle[aria-expanded="true"]) {
        z-index: 50 !important;
    }
    .post-header .dropdown-menu,
    .post-header .action-dropdown-menu,
    .post-time .dropdown-menu {
        z-index: 1060 !important;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.post-time {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 3px !important;
    margin-top: 1px !important;
    line-height: 1;
    font-size: 13px;
    color: #65676b;
    white-space: nowrap !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== POST ACTIONS — flat buttons with vertical dividers ===== */
.post .post-actions,
.post-actions {
    display: flex !important;
    padding: 6px 0 0 0 !important;
    margin: 0 !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: 6px !important;
    padding: 10px 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: 40px !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;
}

/* Icon-only buttons — hide text labels everywhere */
.post-actions .action-btn .reaction-btn-name,
.post-actions .action-btn span.d-none,
.post-actions .action-btn span.d-xl-inline-block {
    display: none !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;
}

/* Inline reactions stats — moved from post header to post-actions bar, next to share.
   Small emoji icons + count on one line, same visual weight as the comment badge. */
.post-reactions-stats-inline {
    flex: 0 0 auto !important;
    min-width: auto !important;
    border-right: none !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
}
.reactions-stats-inline-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    line-height: 1 !important;
}
.reactions-stats-inline-emoji {
    display: inline-flex !important;
    align-items: center !important;
}
.reactions-stats-inline-emoji .inline-emoji {
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    overflow: visible !important;
}
.reactions-stats-inline-emoji .inline-emoji .emoji {
    width: 18px !important;
    height: 18px !important;
    transform: none !important;
    top: 0 !important;
    right: auto !important;
    position: relative !important;
}
.reactions-stats-inline-emoji .inline-emoji .emoji img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}
.reactions-stats-inline-count {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #65676b !important;
    margin-left: 2px !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)}). Now sizes it at 20px — same as the other
   action icons (comment/share) so the bar reads as uniform. */
.post-actions .action-btn .reaction-btn-icon .inline-emoji,
.reel-action-btn .reaction-btn-icon .inline-emoji {
    width: 20px !important;
    height: 20px !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 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: 20px !important;
    height: 20px !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/reaction count badge — always absolute so it never pushes
   buttons out of alignment. On desktop the badge overlays the top-right
   corner of the button; on mobile it pins to the icon center. */
.action-btn-badge {
    position: absolute !important;
    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;
    top: 4px !important;
    right: 4px !important;
    z-index: 2 !important;
    border: 2px solid #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18) !important;
}

/* Icon-only buttons on ALL screens — badge pins to icon top-right */
.action-btn-badge {
    top: 2px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(4px) !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
}

/* ===== VIEWS CIRCLE BUTTON — creative circular accent next to Share ===== */
.action-btn-views {
    position: relative !important;
}
.views-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}
.views-circle-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    transition: background 0.2s ease !important;
}
.views-circle-inner .action-icon {
    color: #64748b !important;
    font-size: 12px !important;
}
.action-btn-views:hover .views-circle-inner {
    background: #e2e8f0 !important;
}
/* Views badge — same positioning as other action badges, subtle grey tint */
.action-btn-views .views-badge {
    background: #64748b !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;
    z-index: 1060 !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== USER MENU DROPDOWN ===== */
.user-dropdown-menu {
    min-width: 240px !important;
    height: auto !important;
    min-height: 0 !important;
}
/* Profile header — gradient card like trendgo */
.user-dropdown-profile {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !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: 8px !important;
    padding: 9px 10px !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;
    margin-right: 0 !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: 4px 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;
}

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


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





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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Diamond_pro fix: base theme's own reaction-emoji picker (the popup that opens when you
   press-and-hold/click the Like button on a normal post - feed, watch, marketplace, etc.)
   has a rule at max-width:480px that shrinks it to a fixed width:144px box. At 48px per
   emoji, 144px is exactly 3 columns, so on any phone the picker wraps into a 2-row grid
   instead of staying the single horizontal strip it is on desktop. This puts it back to a
   single row on mobile too. Reels have their own separate picker with more specific
   .reel-container-scoped !important rules in reels.tpl, so those still win there and this
   doesn't need to exclude them. */
/* Diamond_pro: desktop z-index fix --- base theme sets z-index:4
   which is too low; profile photos render on top of the emoji
   popup. This runs globally for both desktop and mobile. */
.reactions-container {
    z-index: 99999 !important;
}

@media (max-width: 480px) {
    .reactions-container {
        width: auto !important;
        white-space: nowrap !important;
        border-radius: 40px !important;
        position: fixed !important;
        background: #ffffff !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18) !important;
        z-index: 99999 !important;
        padding: 4px 6px !important;
    }
    /* Kill inline-block whitespace gaps between emoji items */
    .reactions-container {
        font-size: 0 !important;
        line-height: 1 !important;
    }
    .reactions-container .reactions_item {
        float: none !important;
        display: inline-block !important;
        width: 43px !important;
        height: 38px !important;
        font-size: 0 !important;
        margin: 0 2px !important;
        padding: 0 !important;
    }
    /* Reset the base theme's scale+offset trick — the 120x120 emoji div
       gets scaled to 0.325 and shifted, which clips our resized img.
       Remove the transform and position offset so the img fills the item. */
    .reactions-container .reactions_item .emoji {
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        top: 0 !important;
        right: 0 !important;
        position: static !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .reactions-container .reactions_item .emoji img {
        width: 38px !important;
        height: 38px !important;
        display: block !important;
    }
    .reactions-container .reactions_item:hover {
        transform: scale(1.2) translate(0, -4px) !important;
    }
    /* Night-mode overrides for white popup bg */
    body.night-mode .reactions-container {
        background: #ffffff !important;
    }
    /* M85: this box is ~360px wide (8 reaction emojis in a single row) but
       the base theme's positioning JS anchors it via an inline `left` that's
       just calculated from the trigger button's own X position, with no
       clamp against the viewport edge. That's fine for the post-level Like
       button (sits close to the left edge of the action bar), but comment
       reaction buttons live inside the narrower, indented comment thread —
       confirmed via DevTools that their computed `left` regularly pushed
       the box's right edge ~50px past the screen, cutting off the last few
       reaction options. Scoped to comment reactions only (identified by
       their .js_react-comment items, vs .js_react-post on the post-level
       picker) so the already-working post picker keeps its JS-computed
       position untouched — comment/reply pickers now just dock to a fixed
       distance from the right edge instead, guaranteeing every reaction is
       reachable regardless of how deep the comment/reply is indented. */
    .reactions-container:has(.js_react-comment) {
        left: auto !important;
        right: 8px !important;
    }
}

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


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

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

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


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


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

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

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

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

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

/* M39: top header profile — no background, plain avatar. */
.navbar-wrapper .user-menu:hover {
    background: transparent !important;
    color: #1c1e21 !important;
    opacity: 0.85 !important;
}

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

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


/* M41: show the "Add" (dots-grid) button on tablet widths (768-1400px)
   where there's room for 4 icons, but NOT on actual phone screens (<768px)
   where it eats valuable icon-row space and looks oversized. */
@media (min-width: 768px) and (max-width: 1399.98px) {
    body .main-header .navbar-wrapper > ul > li.d-xxl-block {
        display: flex !important;
    }
}

/* ========================================================================
   DESKTOP HEADER — white card, centered content
   ======================================================================== */
.desktop-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1001 !important;
}
.desktop-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1140px !important;
    padding: 10px 0 !important;
    gap: 20px !important;
}
.desktop-header-left {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    padding-left: 0 !important;
    margin-left: -70px !important;
    gap: 12px !important;
}
.desktop-logo-link {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}
.desktop-logo-link img {
    max-height: 52px !important;
    width: auto !important;
}
.desktop-logo-text {
    font-size: 42px !important;
    font-weight: 700 !important;
    color: #e74c3c !important;
    line-height: 1 !important;
}
.desktop-home-link {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    background: #fff !important;
    border: 1px solid #e4e6eb !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
    color: #1c1e21 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    flex-shrink: 0 !important;
}
.desktop-home-link:hover { background: #f0f2f5 !important; }
.desktop-home-link .header-icon,
.desktop-home-link svg,
.desktop-home-link svg *,
.desktop-home-link path {
    fill: #e74c3c !important;
    stroke: #e74c3c !important;
}
.desktop-profile-link {
    overflow: hidden !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.desktop-profile-link img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    border: 3px solid #e74c3c !important;
    box-sizing: border-box !important;
}

/* middle: search */
.desktop-header-search {
    flex: 1 1 auto !important;
    max-width: 680px !important;
    min-width: 250px !important;
}
.desktop-header-search .search-wrapper {
    display: block !important;
}
.desktop-header-search .search-wrapper form {
    position: relative !important;
}
.desktop-header-search .search-wrapper .form-control {
    height: 48px !important;
    border-radius: 8px !important;
    background: #f0f2f5 !important;
    border: 1px solid #e4e6eb !important;
    padding: 0 48px 0 18px !important;
    font-size: 15px !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.desktop-header-search .search-wrapper .form-control:focus {
    background: #fff !important;
    box-shadow: 0 0 0 2px #e74c3c !important;
}
.desktop-header-search .search-input-icon {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
}

/* right: 5 icons */
.desktop-header-icons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}
.desktop-icon-link {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid #e4e6eb !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
    transition: background 0.15s !important;
    text-decoration: none !important;
}
.desktop-icon-link:hover { background: #f0f2f5 !important; }
.desktop-icon-link .header-icon { width: 22px !important; height: 22px !important; }
.desktop-icon-link .header-icon,
.desktop-icon-link svg,
.desktop-icon-link svg *,
.desktop-icon-link path {
    fill: #e74c3c !important;
    stroke: #e74c3c !important;
}
.desktop-icon-link .counter {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    text-align: center !important;
    padding: 0 5px !important;
    background: #e74c3c !important;
    color: #fff !important;
    border-radius: 50px !important;
    z-index: 5 !important;
}
/* hide old main-header + only show desktop-header on md+ */
html, body { margin: 0 !important; padding: 0 !important; }
.main-header { display: none !important; }
.desktop-header { display: none !important; margin: 0 !important; }
.main-wrapper { padding-top: 0 !important; margin-top: 0 !important; }
/* kill the ad banner margin below the fixed header */
.main-wrapper > .container.mtb20,
.main-wrapper > .container-fluid.mtb20 { margin-top: 0 !important; margin-bottom: 0 !important; }
@media (min-width: 768px) {
    .desktop-header { display: flex !important; }
    .main-wrapper { padding-top: 74px !important; }
}

@media (max-width: 767.98px) {

    /* --- hide entire header on mobile --- */
    .main-header { display: none !important; }
    body { padding-top: 0 !important; }
    .main-header .svg-container svg { transform: none !important; }

    /* --- mobile-header: white card, hamburger left, icons right --- */
    .mobile-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1001 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #fff !important;
        padding: 12px 16px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
        min-height: 70px !important;
    }
    .mobile-header-left {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    .mobile-logo {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        color: #e74c3c !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }
    .mobile-logo img {
        max-height: 30px !important;
        width: auto !important;
    }
    .mobile-menu-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px !important;
        border-radius: 4px !important;
        flex-shrink: 0 !important;
    }
    .mobile-menu-icon .header-icon,
    .mobile-menu-icon .svg-container svg,
    .mobile-menu-icon svg,
    .mobile-menu-icon svg *,
    .mobile-menu-icon path {
        fill: #1c1e21 !important;
        stroke: #1c1e21 !important;
        width: 26px !important;
        height: 26px !important;
    }
    .mobile-menu-icon:hover {
        background: rgba(0,0,0,0.05) !important;
    }

    /* right-side icon row */
    .mobile-header-icons {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    .mobile-header-icons > .dropdown {
        position: relative !important;
    }
    .mobile-icon-link {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        background: #fff !important;
        border: 1px solid #e4e6eb !important;
        border-radius: 50% !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
        flex-shrink: 0 !important;
    }
    .mobile-icon-link .header-icon {
        width: 20px !important;
        height: 20px !important;
    }
    .mobile-icon-link .header-icon,
    .mobile-icon-link .svg-container svg,
    .mobile-icon-link svg,
    .mobile-icon-link svg *,
    .mobile-icon-link path {
        fill: #e74c3c !important;
        stroke: #e74c3c !important;
    }
    .mobile-icon-link:hover {
        background: #f0f2f5 !important;
    }
    .mobile-profile-link {
        overflow: hidden !important;
        padding: 0 !important;
        width: 36px !important;
        height: 36px !important;
    }
    .mobile-profile-link img {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        display: block !important;
        border: 3px solid #e74c3c !important;
    }
    .mobile-icon-link .counter {
        position: absolute !important;
        top: -5px !important;
        right: -5px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        min-width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
        text-align: center !important;
        padding: 0 5px !important;
        background: #e74c3c !important;
        color: #fff !important;
        border-radius: 50px !important;
        z-index: 5 !important;
    }
    .mobile-header-icons .dropdown-menu {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 60px !important;
        transform: translateX(-50%) !important;
        width: 90vw !important;
        max-width: 340px !important;
    }

    /* Hide "added a photo/video/link" text from ALL post cards */
    .post-body .post-title {
        display: none !important;
    }

    /* --- left column: hamburger + logo in a row --- */
    .logo-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }
    .logo-wrapper .menu-icon {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0 !important;
        width: 28px !important;
        height: 28px !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .logo-wrapper .menu-icon svg,
    .logo-wrapper .menu-icon svg * { fill: #1c1e21 !important; }
    .logo-wrapper .logo img { max-height: 22px !important; width: auto !important; }
    .logo-wrapper .logo { pointer-events: none !important; }

    /* --- hide home-btn, search, 9-dot --- */
    .header-home-btn { display: none !important; }
    .main-header .col-5 > .row > .col-md-6:first-child { display: none !important; }
    .navbar-wrapper > ul > li.d-xxl-block { display: none !important; }

    /* --- navbar fills right column, icons to the right --- */
    .main-header .col-5 > .row > .col-md-6:last-child {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .navbar-wrapper { width: 100% !important; }
    .navbar-wrapper > ul { gap: 4px !important; justify-content: flex-end !important; }

    /* --- all navbar icons (including profile) = 30px --- */
    .navbar-wrapper > ul > li:not(:has(.user-menu)) {
        width: 30px !important; height: 30px !important;
        flex: 0 0 30px !important; margin: 0 !important;
    }
    body .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a {
        width: 30px !important; height: 30px !important; line-height: 30px !important;
        background: #fff !important; border: 1px solid #e4e6eb !important;
        border-radius: 50% !important; box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
    }
    .navbar-wrapper > ul > li > a:not(.user-menu) .header-icon { width: 16px !important; height: 16px !important; }
    body .navbar-wrapper > ul > li:not(:has(.user-menu)) > a .header-icon,
    body .navbar-wrapper > ul > li:not(:has(.user-menu)) > a .header-icon * {
        fill: #e74c3c !important; stroke: #e74c3c !important;
    }

    /* --- profile: 30px, box-shadow ring = same visual as 30px circles --- */
    .navbar-wrapper > ul > li:has(.user-menu) {
        width: 30px !important; height: 30px !important;
        flex: 0 0 30px !important; margin: 0 !important;
    }
    .navbar-wrapper .user-menu {
        width: 30px !important; height: 30px !important; line-height: 30px !important;
        border-radius: 50% !important; border: none !important;
        background: transparent !important; box-shadow: none !important;
        overflow: visible !important;
    }
    .navbar-wrapper .user-menu img {
        width: 30px !important; height: 30px !important; border-radius: 50% !important;
        border: none !important; box-shadow: 0 0 0 2px #e74c3c !important;
    }
    .navbar-wrapper .user-menu:hover { background: transparent !important; opacity: 0.85 !important; }

}


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


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


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


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

/* Reviews: icon only, hide text label everywhere */
.pas-item .pas-label { display: none !important; }

/* M48: Fix comment card clipping on mobile — when comment section expands,
   the post card should stay contained and not cut off at the top.
   Prevent overflow and add smooth scrolling context. */
@media (max-width: 767.98px) {
    .post-comments {
        max-height: none !important;
        overflow: visible !important;
        padding-bottom: 8px !important;
    }
    .post {
        overflow: visible !important;
    }
    .post-body {
        overflow: visible !important;
    }
    /* Ensure comment form doesn't get clipped */
    .comment-form {
        margin-bottom: 4px !important;
    }
    .comment {
        padding: 4px 0 !important;
    }
    /* Smooth scroll into view when clicking comment button */
    html {
        scroll-behavior: smooth;
    }
}