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

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

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

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

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

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

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

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

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

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

/* ── NAV ICON <a> — THE ACTUAL CIRCLE ──────────────────────────────────────
   Icon is wrapped in <div class="svg-container"> (display:inline-block).
   Use display:block + line-height + text-align — Sngine's own technique,
   just corrected: 40px height, 0 margin, 0 padding.
   ──────────────────────────────────────────────────────────────────────── */
.navbar-wrapper > ul > li > a:not(.user-menu) {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    background-color: #e4e6eb !important;
    position: relative !important;
    text-decoration: none !important;
    color: #1c1e21 !important;
    flex-shrink: 0 !important;
    transition: background-color 0.2s ease !important;
    overflow: visible !important;
}

.navbar-wrapper > ul > li > a:not(.user-menu):hover {
    background-color: #d8dadf !important;
}

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

/* ── NOTIFICATION — pink circle + red icon when unread ───────────────────── */
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a {
    background-color: #fde8e8 !important;
}
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a .header-icon *,
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a .header-icon path,
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a .header-icon circle,
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a .header-icon polyline,
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a .header-icon ellipse {
    fill: #e74c3c !important;
    stroke: #e74c3c !important;
}

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

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

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

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

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

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

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

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

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

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

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

.logo-w {
    color: #222;
}

.logo-o {
    color: #e74c3c;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.notification i {
    color: #e74c3c;
}

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

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

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

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

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

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

.menu {
    list-style: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

.dropdown-item span {
    flex: 1;
}

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

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

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

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

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

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

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

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

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

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

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


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

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



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

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

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

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

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

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

.header-right {
    position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.friend-info {
    flex: 1;
}

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

.conv-avatar {
    position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== REELS INNER THEME ===== */
.reels-wrapper {
    position: relative;
    height: calc(100vh - 100px);
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.reel-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 70px;
    background: #000;
}

.reel-video-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

.reel-video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.reel-video-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.video-controlls {
    position: absolute;
    right: 20px;
    bottom: 40px;
    z-index: 10;
    left: auto !important;
}

.reel-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.reel-actions .post-avatar-picture {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #fff;
    display: block;
}

.post-author-name-small {
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    margin-top: 6px;
    text-align: center;
    white-space: nowrap;
}

.follow-btn-small {
    font-size: 10px;
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 4px;
    cursor: pointer;
    color: #fff;
    text-align: center;
}

.reel-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #fff;
}

.reel-action-btn .action-btn {
    background: transparent !important;
    border: none;
    padding: 0;
    width: auto;
    height: auto;
    cursor: pointer;
}

.reel-action-btn .action-btn i,
.reel-action-btn .action-btn svg {
    font-size: 28px;
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.reel-action-btn span {
    font-size: 13px;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.video-caption {
    position: absolute;
    left: 20px;
    bottom: 40px;
    max-width: 60%;
    color: #fff;
    z-index: 10;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.video-caption .post-author-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
}

.video-caption .post-text {
    font-size: 14px;
    line-height: 1.4;
}

.video-caption .post-text a[href*="hashtag"] {
    color: #e74c3c !important;
    font-weight: bold;
}

.reels-custom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}

.reels-title {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reels-title i {
    color: #e74c3c;
}

.reels-create-btn {
    background: #e74c3c;
    color: #fff !important;
    font-weight: bold;
    border-radius: 8px;
    padding: 8px 16px;
    border: none;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.reels-create-btn:hover {
    background: #c0392b;
}

.reel-container.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

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

.post-body {
    padding: 16px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* privacy dropdown inside post-time must not be taller than the time text —
   otherwise it grows the row and the timestamp gets pushed down. */
.post-time .btn-group,
.post-time .btn-group .btn,
.post-time .btn-group .dropdown-toggle {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* User menu dropdown items — match trendgo .user-menu-item */
.user-dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #333 !important;
    transition: background 0.2s ease !important;
    white-space: nowrap !important;
}
.user-dropdown-menu .dropdown-item:hover {
    background: linear-gradient(145deg, #fff5f5, #ffecec) !important;
    color: #333 !important;
}
/* Upgrade to Pro — trendgo .pro-item */
.user-dropdown-menu .dropdown-item.upgrade-pro-item {
    background: linear-gradient(145deg, #fff9e6, #fff3cc) !important;
    color: #333 !important;
}
.user-dropdown-menu .dropdown-item.upgrade-pro-item:hover {
    background: linear-gradient(145deg, #fff3cc, #ffe89a) !important;
}
/* Crown icon is gold like trendgo */
.user-dropdown-menu .upgrade-pro-item .main-icon {
    color: #f39c12 !important;
}
.user-dropdown-menu .upgrade-pro-item .main-icon path,
.user-dropdown-menu .upgrade-pro-item .main-icon circle,
.user-dropdown-menu .upgrade-pro-item .main-icon rect {
    fill: #f39c12 !important;
}
/* NEW badge — trendgo .pro-badge: radius 6px, gradient red */
.user-dropdown-menu .upgrade-pro-new {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    background: linear-gradient(145deg, #e74c3c, #c0392b) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    line-height: 1.5 !important;
    display: inline-block !important;
    width: fit-content !important;
    align-self: center !important;
}
/* Points / Wallet value — trendgo .menu-value */
.user-dropdown-menu .dropdown-item-value {
    margin-left: auto !important;
    font-weight: 600 !important;
    color: #e74c3c !important;
    font-size: 14px !important;
}
/* All icons red by default */
.user-dropdown-menu .dropdown-item .main-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    color: #e74c3c !important;
}
.user-dropdown-menu .dropdown-item .main-icon path,
.user-dropdown-menu .dropdown-item .main-icon circle,
.user-dropdown-menu .dropdown-item .main-icon rect {
    fill: #e74c3c !important;
}
.user-dropdown-menu .dropdown-divider {
    margin: 8px 0 !important;
    border-color: #e4e6eb !important;
}

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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