/* 
 * VIKING THEME - Vikinger Aesthetic for ColibriSM
 * Copyright 2025 - ColibriSM Economy Integration
 * Based on Vikinger Social Gaming Community Template
 */

/* ============================================
   SPRITE ICONS
   ============================================ */
   .sX {
    background: url(/themes/default/statics/img/sX.png?v=3) no-repeat;
    height: 10px;
    width: 10px;
    vertical-align: baseline;
    display: inline;
}
.s0b {
    background-position: -2218px 0;
}

/* ============================================
   COLOR PALETTE
   ============================================ */
:root {
    --viking-dark-1: #1a1a2e;
    --viking-dark-2: #16213e;
    --viking-dark-3: #0f3460;
    --viking-purple-1: #533483;
    --viking-purple-2: #9b59b6;
    --viking-gold-1: #f4d03f;
    --viking-gold-2: #f39c12;
    --viking-green-1: #27ae60;
    --viking-green-2: #2ecc71;
    --viking-blue-1: #3498db;
    --viking-blue-2: #5dade2;
    --viking-red-1: #e74c3c;
    --viking-red-2: #c0392b;
    --viking-text: #fff;
    --viking-text-muted: #8b9dc3;
}

/* ============================================
   GLOBAL OVERRIDES
   ============================================ */

/* Main container backgrounds */
body {
    background: linear-gradient(135deg, var(--viking-dark-1) 0%, var(--viking-dark-2) 100%) !important;
    color: var(--viking-text) !important;
}

/* Remove sidebar borders */
.main-container,
.main-container__left,
.main-container__center,
.main-container__right,
.timeline-container,
.left-sidebar,
.right-sidebar,
.sidebar,
.sidebar-item {
    border: none !important;
}

/* Remove all vertical dividers */
.main-container__left,
.main-container__center,
.main-container__right {
    border-left: none !important;
    border-right: none !important;
}

/* Cards and panels - REMOVED GLOBAL BORDERS TO AVOID SIDEBAR ISSUES */
/* .card, .panel, .post-item, .timeline-item {
    background: linear-gradient(135deg, var(--viking-dark-1) 0%, var(--viking-dark-2) 100%) !important;
    border: 2px solid var(--viking-dark-3) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.card:hover, .panel:hover, .post-item:hover, .timeline-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6) !important;
    border-color: var(--viking-purple-1) !important;
} */

/* ============================================
   BUTTONS - VIKING STYLE
   ============================================ */

.btn-viking {
    background: linear-gradient(135deg, var(--viking-purple-1) 0%, var(--viking-purple-2) 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(83, 52, 131, 0.3) !important;
    color: var(--viking-text) !important;
}

.btn-viking:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(83, 52, 131, 0.5) !important;
    color: var(--viking-text) !important;
}

.btn-viking-success {
    background: linear-gradient(135deg, var(--viking-green-1) 0%, var(--viking-green-2) 100%) !important;
    box-shadow: 0 4px 16px rgba(46, 204, 113, 0.3) !important;
}

.btn-viking-success:hover {
    box-shadow: 0 6px 24px rgba(46, 204, 113, 0.5) !important;
}

.btn-viking-info {
    background: linear-gradient(135deg, var(--viking-blue-1) 0%, var(--viking-blue-2) 100%) !important;
    box-shadow: 0 4px 16px rgba(93, 173, 226, 0.3) !important;
}

.btn-viking-info:hover {
    box-shadow: 0 6px 24px rgba(93, 173, 226, 0.5) !important;
}

.btn-viking-danger {
    background: linear-gradient(135deg, var(--viking-red-1) 0%, var(--viking-red-2) 100%) !important;
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.3) !important;
}

.btn-viking-danger:hover {
    box-shadow: 0 6px 24px rgba(231, 76, 60, 0.5) !important;
}

.btn-viking-warning {
    background: linear-gradient(135deg, var(--viking-gold-1) 0%, var(--viking-gold-2) 100%) !important;
    box-shadow: 0 4px 16px rgba(244, 208, 63, 0.3) !important;
    color: var(--viking-dark-1) !important;
}

.btn-viking-warning:hover {
    box-shadow: 0 6px 24px rgba(244, 208, 63, 0.5) !important;
    color: var(--viking-dark-1) !important;
}

/* ============================================
   PROFILE PAGE
   ============================================ */

.user-profile__header {
    position: relative;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.user-profile__header-cover img {
    filter: brightness(0.8) saturate(1.2) !important;
}

.profile-avatar {
    border: 4px solid var(--viking-purple-1) !important;
    box-shadow: 0 8px 32px rgba(83, 52, 131, 0.5) !important;
}

.user-name-holder__name {
    color: var(--viking-text) !important;
    font-weight: 800 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Wallet Badge */
.user-name-holder__wallet {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, var(--viking-gold-1) 0%, var(--viking-gold-2) 100%) !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    color: var(--viking-dark-1) !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    margin-left: 12px !important;
    box-shadow: 0 4px 16px rgba(244, 208, 63, 0.3) !important;
}

/* Achievement Badges */
.achievement-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.3s ease !important;
}

.achievement-badge:hover {
    transform: scale(1.05) !important;
}

.achievement-bronze {
    background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%) !important;
    color: var(--viking-text) !important;
}

.achievement-silver {
    background: linear-gradient(135deg, #C0C0C0 0%, #808080 100%) !important;
    color: var(--viking-text) !important;
}

.achievement-gold {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    color: var(--viking-dark-1) !important;
}

.achievement-platinum {
    background: linear-gradient(135deg, #B9F2FF 0%, #00CED1 100%) !important;
    color: var(--viking-text) !important;
}

/* ============================================
   POSTS & TIMELINE
   ============================================ */

.post-item, .timeline-item {
    margin-bottom: 24px !important;
}

.post-header {
    border-bottom: 2px solid var(--viking-dark-3) !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
}

.post-author {
    color: var(--viking-text) !important;
    font-weight: 700 !important;
}

.post-time {
    color: var(--viking-text-muted) !important;
}

.post-content {
    color: var(--viking-text) !important;
    line-height: 1.6 !important;
}

.post-actions {
    border-top: 2px solid var(--viking-dark-3) !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
}

.post-action-btn {
    background: transparent !important;
    border: 2px solid var(--viking-dark-3) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    color: var(--viking-text) !important;
    transition: all 0.3s ease !important;
}

.post-action-btn:hover {
    background: var(--viking-purple-1) !important;
    border-color: var(--viking-purple-1) !important;
    color: var(--viking-text) !important;
}

/* ============================================
   SIDEBAR
   ============================================ */

.sidebar, .left-sidebar, .right-sidebar {
    background: linear-gradient(135deg, var(--viking-dark-1) 0%, var(--viking-dark-2) 100%) !important;
    border: 2px solid var(--viking-dark-3) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Fix sidebar positioning - prevent jumping on scroll */
.left-sb-container,
.right-sb-container {
    position: sticky !important;
    top: 20px !important;
    align-self: flex-start !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
}

.left-sb-container.is-affixed,
.right-sb-container.is-affixed {
    position: sticky !important;
    top: 20px !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

.sidebar-title, .widget-title {
    color: var(--viking-text) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--viking-purple-1) !important;
}

.sidebar-link, .widget-link {
    color: var(--viking-text-muted) !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.sidebar-link:hover, .widget-link:hover {
    background: var(--viking-dark-3) !important;
    color: var(--viking-text) !important;
    transform: translateX(8px) !important;
}

.sidebar-link.active {
    background: linear-gradient(135deg, var(--viking-purple-1) 0%, var(--viking-purple-2) 100%) !important;
    color: var(--viking-text) !important;
    box-shadow: 0 4px 16px rgba(83, 52, 131, 0.3) !important;
}

/* ============================================
   NAVIGATION
   ============================================ */

.navbar, .top-nav {
    background: linear-gradient(135deg, var(--viking-dark-1) 0%, var(--viking-dark-2) 100%) !important;
    border-bottom: 2px solid var(--viking-dark-3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.nav-link {
    color: var(--viking-text-muted) !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
}

.nav-link:hover {
    background: var(--viking-dark-3) !important;
    color: var(--viking-text) !important;
}

.nav-link.active {
    background: linear-gradient(135deg, var(--viking-purple-1) 0%, var(--viking-purple-2) 100%) !important;
    color: var(--viking-text) !important;
}

/* ============================================
   FORMS
   ============================================ */

.form-control, .form-input, input, textarea, select {
    background: var(--viking-dark-3) !important;
    border: 2px solid var(--viking-purple-1) !important;
    border-radius: 8px !important;
    color: var(--viking-text) !important;
    padding: 12px !important;
    transition: all 0.3s ease !important;
}

.form-control:focus, .form-input:focus, input:focus, textarea:focus, select:focus {
    background: var(--viking-dark-2) !important;
    border-color: var(--viking-purple-2) !important;
    box-shadow: 0 0 0 3px rgba(83, 52, 131, 0.2) !important;
    outline: none !important;
}

.form-label, label {
    color: var(--viking-text-muted) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 8px !important;
}

/* ============================================
   MODALS
   ============================================ */

.modal-content {
    background: linear-gradient(135deg, var(--viking-dark-1) 0%, var(--viking-dark-2) 100%) !important;
    border: 2px solid var(--viking-dark-3) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6) !important;
}

.modal-header {
    border-bottom: 2px solid var(--viking-dark-3) !important;
    padding: 20px 24px !important;
}

.modal-title {
    color: var(--viking-text) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.modal-body {
    padding: 24px !important;
    color: var(--viking-text) !important;
}

.modal-footer {
    border-top: 2px solid var(--viking-dark-3) !important;
    padding: 20px 24px !important;
}

.close, .modal-close {
    color: var(--viking-text) !important;
    opacity: 0.8 !important;
    transition: all 0.3s ease !important;
}

.close:hover, .modal-close:hover {
    opacity: 1 !important;
    transform: rotate(90deg) !important;
}

/* ============================================
   BADGES & LABELS
   ============================================ */

.badge, .label {
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 12px !important;
}

.badge-primary, .label-primary {
    background: linear-gradient(135deg, var(--viking-purple-1) 0%, var(--viking-purple-2) 100%) !important;
    color: var(--viking-text) !important;
}

.badge-success, .label-success {
    background: linear-gradient(135deg, var(--viking-green-1) 0%, var(--viking-green-2) 100%) !important;
    color: var(--viking-text) !important;
}

.badge-info, .label-info {
    background: linear-gradient(135deg, var(--viking-blue-1) 0%, var(--viking-blue-2) 100%) !important;
    color: var(--viking-text) !important;
}

.badge-warning, .label-warning {
    background: linear-gradient(135deg, var(--viking-gold-1) 0%, var(--viking-gold-2) 100%) !important;
    color: var(--viking-dark-1) !important;
}

.badge-danger, .label-danger {
    background: linear-gradient(135deg, var(--viking-red-1) 0%, var(--viking-red-2) 100%) !important;
    color: var(--viking-text) !important;
}

/* ============================================
   PROGRESS BARS
   ============================================ */

.progress {
    background: var(--viking-dark-3) !important;
    height: 12px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--viking-purple-1) 0%, var(--viking-purple-2) 100%) !important;
    border-radius: 6px !important;
    transition: width 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.progress-bar::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    animation: shimmer 2s infinite !important;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */

.alert, .notification {
    border-radius: 12px !important;
    padding: 16px 20px !important;
    border: 2px solid !important;
    font-weight: 600 !important;
}

.alert-success {
    background: rgba(46, 204, 113, 0.1) !important;
    border-color: var(--viking-green-2) !important;
    color: var(--viking-green-2) !important;
}

.alert-info {
    background: rgba(93, 173, 226, 0.1) !important;
    border-color: var(--viking-blue-2) !important;
    color: var(--viking-blue-2) !important;
}

.alert-warning {
    background: rgba(244, 208, 63, 0.1) !important;
    border-color: var(--viking-gold-1) !important;
    color: var(--viking-gold-1) !important;
}

.alert-danger {
    background: rgba(231, 76, 60, 0.1) !important;
    border-color: var(--viking-red-1) !important;
    color: var(--viking-red-1) !important;
}

/* ============================================
   TABS
   ============================================ */

.nav-tabs {
    border-bottom: 2px solid var(--viking-dark-3) !important;
}

.nav-tabs .nav-link {
    color: var(--viking-text-muted) !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
}

.nav-tabs .nav-link:hover {
    color: var(--viking-text) !important;
    border-bottom-color: var(--viking-purple-1) !important;
}

.nav-tabs .nav-link.active {
    color: var(--viking-text) !important;
    border-bottom-color: var(--viking-purple-2) !important;
    background: transparent !important;
}

/* ============================================
   TABLES
   ============================================ */

.table {
    color: var(--viking-text) !important;
}

.table thead th {
    background: var(--viking-dark-3) !important;
    color: var(--viking-text) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 2px solid var(--viking-purple-1) !important;
}

.table tbody tr {
    border-bottom: 1px solid var(--viking-dark-3) !important;
    transition: all 0.3s ease !important;
}

.table tbody tr:hover {
    background: rgba(83, 52, 131, 0.1) !important;
    transform: scale(1.01) !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination .page-link {
    background: var(--viking-dark-3) !important;
    border: 2px solid var(--viking-dark-3) !important;
    color: var(--viking-text) !important;
    padding: 10px 16px !important;
    margin: 0 4px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.pagination .page-link:hover {
    background: var(--viking-purple-1) !important;
    border-color: var(--viking-purple-1) !important;
    transform: translateY(-2px) !important;
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--viking-purple-1) 0%, var(--viking-purple-2) 100%) !important;
    border-color: var(--viking-purple-2) !important;
    box-shadow: 0 4px 16px rgba(83, 52, 131, 0.3) !important;
}

/* ============================================
   LOADING & SPINNERS
   ============================================ */

.loader, .spinner {
    border: 4px solid var(--viking-dark-3) !important;
    border-top: 4px solid var(--viking-purple-2) !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   TOOLTIPS
   ============================================ */

.tooltip-inner {
    background: var(--viking-dark-1) !important;
    color: var(--viking-text) !important;
    border: 2px solid var(--viking-purple-1) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-weight: 600 !important;
}

/* ============================================
   SCROLLBAR
   ============================================ */

::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
}

::-webkit-scrollbar-track {
    background: var(--viking-dark-3) !important;
    border-radius: 6px !important;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--viking-purple-1) 0%, var(--viking-purple-2) 100%) !important;
    border-radius: 6px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--viking-purple-2) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .card, .panel, .post-item, .timeline-item {
        margin-bottom: 16px !important;
    }
    
    .btn-viking {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
    
    .section-title {
        font-size: 24px !important;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.viking-glow {
    box-shadow: 0 0 20px rgba(83, 52, 131, 0.5) !important;
}

.viking-glow-gold {
    box-shadow: 0 0 20px rgba(244, 208, 63, 0.5) !important;
}

.viking-gradient-bg {
    background: linear-gradient(135deg, var(--viking-dark-1) 0%, var(--viking-dark-2) 100%) !important;
}

.viking-gradient-purple {
    background: linear-gradient(135deg, var(--viking-purple-1) 0%, var(--viking-purple-2) 100%) !important;
}

.viking-gradient-gold {
    background: linear-gradient(135deg, var(--viking-gold-1) 0%, var(--viking-gold-2) 100%) !important;
}

/* ============================================
   HOME FEED - VIKING STYLING
   ============================================ */

/* Post Creation Box (Pubbox) */
.timeline-pubbox {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border: 2px solid #533483 !important;
    border-radius: 20px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 8px 32px rgba(83, 52, 131, 0.3) !important;
    transition: all 0.3s ease !important;
}

.timeline-pubbox:hover {
    border-color: #9b59b6 !important;
    box-shadow: 0 12px 48px rgba(155, 89, 182, 0.4) !important;
    transform: translateY(-2px) !important;
}

.timeline-pubbox__textinput {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
}

.pubbox-avatar {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 3px solid #533483 !important;
    box-shadow: 0 4px 12px rgba(83, 52, 131, 0.4) !important;
    flex-shrink: 0 !important;
}

.pubbox-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.pubbox-input {
    flex: 1 !important;
}

.pubbox-input textarea {
    width: 100% !important;
    min-height: 80px !important;
    background: rgba(15, 52, 96, 0.6) !important;
    border: 2px solid #533483 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    resize: none !important;
    transition: all 0.3s ease !important;
}

.pubbox-input textarea:focus {
    outline: none !important;
    border-color: #9b59b6 !important;
    box-shadow: 0 0 20px rgba(155, 89, 182, 0.3) !important;
    background: rgba(15, 52, 96, 0.8) !important;
}

.pubbox-input textarea::placeholder {
    color: #8b9dc3 !important;
}

/* Media attachment icons */
.timeline-pubbox__body {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.timeline-pubbox__media-attachments {
    display: flex !important;
    gap: 8px !important;
}

.pubbox-media-attachment {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(83, 52, 131, 0.3) !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.pubbox-media-attachment:hover {
    background: rgba(155, 89, 182, 0.4) !important;
    border-color: #9b59b6 !important;
    transform: translateY(-2px) !important;
}

.pubbox-media-attachment svg {
    width: 20px !important;
    height: 20px !important;
    fill: #9b59b6 !important;
}

/* Publish button */
.timeline-pubbox__footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 15px !important;
    flex-wrap: wrap !important;
}

/* Auto-Embed Styling (YouTube, TikTok, Twitter, Instagram) */
.auto-embed {
    margin: 15px 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(155, 89, 182, 0.3) !important;
    border: 2px solid #533483 !important;
}

/* REMOVED - conflicting with readmore plugin */

/* Fix dropdown menu overflow */
body {
    overflow-x: hidden !important;
}

/* Ensure parent containers don't clip dropdowns - VERY AGGRESSIVE */
.timeline-pub,
.timeline-pub__body,
.post-list-item,
.timeline-pub__content,
.timeline-pub__actions,
.timeline-container,
.main-content-container,
.main-content-container-inner,
.timeline-pub__header,
.timeline-posts-container,
.timeline-posts-ls,
.post-list-item__content,
.post-data,
.post-data__body,
.timeline-container-wrapper,
.timeline-container-inner,
.post-list-item__header,
.post-data__content,
.post-data__content-inner,
.post-data-layout {
    overflow: visible !important;
}

/* Specifically target the post wrapper */
.timeline-pub__body {
    overflow: visible !important;
    max-height: none !important;
}

/* Force dropdown to render outside any container - MAXIMUM SPECIFICITY */
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item {
    overflow: visible !important;
}

body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content {
    overflow: visible !important;
}

/* Override any overflow: hidden on post-list-item with maximum specificity */
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item.post-list-item {
    overflow: visible !important;
}

/* Force overflow visible on base state (not hover) - OVERRIDE CUSTOM CSS */
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item:not(:hover),
.post-list-item {
    overflow: visible !important;
}

/* Also ensure the dropdown menu itself has proper positioning */
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item .dropdown-menu {
    position: absolute !important;
    z-index: 99999 !important;
    overflow: visible !important;
}

/* Force the dropdown to be visible when it's open */
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item .dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    z-index: 999999 !important;
    overflow: visible !important;
}

/* Ensure the dropdown button has proper z-index */
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item .dropdown-toggle {
    z-index: 100000 !important;
    position: relative !important;
}

/* Fix z-index issue with post-list-item__content - OVERRIDE CUSTOM CSS */
.post-list-item__content {
    position: relative !important;
    z-index: 0 !important;
}

/* Ensure dropdown stays visible even when hovering over post */
.post-list-item:hover .dropdown-menu.show,
.post-list-item:hover .dropdown-menu {
    z-index: 999999 !important;
}

/* CRITICAL: Override custom CSS overflow hidden on post-list-item */
.post-list-item {
    overflow: visible !important;
}

/* FLEXR Custom Dropdown Menu Styling */
.dropdown-menu {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.98)) !important;
    border: 2px solid #533483 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(83, 52, 131, 0.5) !important;
    padding: 8px 0 !important;
    min-width: 220px !important;
    backdrop-filter: blur(10px) !important;
    z-index: 999999 !important;
    position: absolute !important;
    isolation: isolate !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

.dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dropdown-item {
    color: #e0e0e0 !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    border-radius: 6px !important;
    margin: 2px 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active {
    background: linear-gradient(135deg, rgba(83, 52, 131, 0.3) 0%, rgba(155, 89, 182, 0.3) 100%) !important;
    color: #fff !important;
    transform: translateX(4px) !important;
}

.dropdown-item-icon {
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dropdown-item-icon svg {
    width: 100% !important;
    height: 100% !important;
}

.dropdown-item-icon svg path {
    fill: #9b59b6 !important;
}

.dropdown-item:hover .dropdown-item-icon svg path,
.dropdown-item:focus .dropdown-item-icon svg path {
    fill: #fff !important;
}

.dropdown-divider {
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(155, 89, 182, 0.3), transparent) !important;
    margin: 6px 12px !important;
    border: none !important;
}

/* Dropdown toggle button styling */
.dropdown-toggle {
    color: #9b59b6 !important;
    transition: all 0.3s ease !important;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
    color: #fff !important;
    background: rgba(155, 89, 182, 0.2) !important;
    border-radius: 6px !important;
}

/* Dropdown portal styling */
.dropdown-menu.portaled {
    position: fixed !important;
    z-index: 999999 !important;
}

/* ============================================
   FLEXR AUTH PAGES (Login & Sign Up)
   ============================================ */

/* Auth Container Background */
.auth-container,
.auth-page-container {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    min-height: 100vh !important;
}

/* Auth Form Styling */
.form {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95)) !important;
    border: 2px solid #533483 !important;
    border-radius: 20px !important;
    padding: 40px !important;
    box-shadow: 0 8px 32px rgba(83, 52, 131, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.form:hover {
    border-color: #9b59b6 !important;
    box-shadow: 0 16px 64px rgba(155, 89, 182, 0.6) !important;
    transform: translateY(-4px) !important;
}

/* Form Title */
.form-title h2 {
    color: #fff !important;
    font-weight: 700 !important;
    text-shadow: 0 0 20px rgba(155, 89, 182, 0.5) !important;
    margin-bottom: 10px !important;
}

.form-title p {
    color: #e0e0e0 !important;
}

/* Input Labels */
.input-label,
.form-group label {
    color: #fff !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

/* Form Controls (Inputs) */
.form-control {
    background: rgba(83, 52, 131, 0.2) !important;
    border: 2px solid #533483 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    color: #fff !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.form-control:focus {
    background: rgba(155, 89, 182, 0.2) !important;
    border-color: #9b59b6 !important;
    box-shadow: 0 0 20px rgba(155, 89, 182, 0.4) !important;
    outline: none !important;
}

/* Password Control Button */
.password-ctrl {
    color: #9b59b6 !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.password-ctrl:hover {
    color: #fff !important;
    transform: scale(1.1) !important;
}

.password-ctrl svg path {
    fill: #9b59b6 !important;
}

.password-ctrl:hover svg path {
    fill: #fff !important;
}

/* Submit Buttons - ENHANCED */
.btn-custom,
.btn-custom.main-inline {
    background: linear-gradient(135deg, #533483 0%, #9b59b6 100%) !important;
    border: 2px solid #9b59b6 !important;
    border-radius: 12px !important;
    padding: 16px 32px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(155, 89, 182, 0.4) !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.btn-custom::before,
.btn-custom.main-inline::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    transition: left 0.5s ease !important;
}

.btn-custom:hover::before,
.btn-custom.main-inline:hover::before {
    left: 100% !important;
}

.btn-custom:hover,
.btn-custom.main-inline:hover {
    background: linear-gradient(135deg, #9b59b6 0%, #533483 100%) !important;
    border-color: #fff !important;
    box-shadow: 0 8px 32px rgba(155, 89, 182, 0.8) !important;
    transform: translateY(-3px) scale(1.02) !important;
}

.btn-custom:active,
.btn-custom.main-inline:active {
    transform: translateY(-1px) scale(0.98) !important;
}

/* Form CTA Links */
.form-cta-link {
    color: #e0e0e0 !important;
}

.form-cta-link a {
    color: #9b59b6 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.form-cta-link a:hover {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(155, 89, 182, 0.5) !important;
}

/* Invalid Feedback */
.invalid-main-feedback {
    color: #ff6b6b !important;
    background: rgba(255, 107, 107, 0.1) !important;
    border: 1px solid rgba(255, 107, 107, 0.3) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    margin-top: 6px !important;
    font-size: 13px !important;
}

/* Checkbox Styling - FUTURISTIC CUSTOM DESIGN */
.form-group input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
    background: rgba(83, 52, 131, 0.2) !important;
    border: 2px solid #533483 !important;
    border-radius: 6px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 0 10px rgba(83, 52, 131, 0.3) !important;
}

.form-group input[type="checkbox"]:hover {
    border-color: #9b59b6 !important;
    box-shadow: 0 0 20px rgba(155, 89, 182, 0.5) !important;
    transform: scale(1.1) !important;
}

.form-group input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #533483 0%, #9b59b6 100%) !important;
    border-color: #9b59b6 !important;
    box-shadow: 0 0 25px rgba(155, 89, 182, 0.8) !important;
}

/* Custom Checkmark - Futuristic Design */
.form-group input[type="checkbox"]:checked::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
    width: 6px !important;
    height: 12px !important;
    border: solid #fff !important;
    border-width: 0 3px 3px 0 !important;
    animation: checkmarkAppear 0.3s ease-out !important;
}

/* Alternative: X-style checkmark */
.form-group input[type="checkbox"]:checked::after {
    content: '✓' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important;
    animation: checkmarkAppear 0.3s ease-out !important;
}

@keyframes checkmarkAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(180deg);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

/* Social Login Buttons */
.social-login-btn,
.oauth-button {
    background: rgba(83, 52, 131, 0.2) !important;
    border: 2px solid #533483 !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
}

.social-login-btn:hover,
.oauth-button:hover {
    background: rgba(155, 89, 182, 0.3) !important;
    border-color: #9b59b6 !important;
    transform: translateY(-2px) !important;
}

/* Divider */
.form-divider,
.or-divider {
    color: #9b59b6 !important;
}

.form-divider::before,
.form-divider::after,
.or-divider::before,
.or-divider::after {
    background: linear-gradient(90deg, transparent, #533483, transparent) !important;
}

/* Auth Page Logo */
.auth-logo img {
    filter: drop-shadow(0 0 20px rgba(155, 89, 182, 0.5)) !important;
    transition: all 0.3s ease !important;
}

.auth-logo img:hover {
    filter: drop-shadow(0 0 30px rgba(155, 89, 182, 0.8)) !important;
    transform: scale(1.05) !important;
}

/* Loading Spinner */
.btn-custom[disabled] {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

.btn-custom[disabled]:hover {
    transform: none !important;
}

/* Form Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form {
    animation: fadeInUp 0.6s ease-out !important;
}

/* ============================================
   FLEXR AUTH FOOTER STYLING - ENHANCED
   ============================================ */

/* Welcome Page Footer - GAMING STYLE */
.welcome-page__footer {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95)) !important;
    border-top: 3px solid #533483 !important;
    padding: 20px 0 !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0 -8px 32px rgba(83, 52, 131, 0.5) !important;
    position: relative !important;
}

.welcome-page__footer::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #9b59b6, transparent) !important;
    animation: footerGlow 3s ease-in-out infinite !important;
}

@keyframes footerGlow {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

.welcome-page__bp-wrapper {
    background: transparent !important;
}

.welcome-page__bp {
    background: transparent !important;
}

/* Footer Links - GAMING STYLE */
.welcome-page__bp a,
.footer-link,
.footer-menu a {
    color: #fff !important;
    font-family: 'TT Supermolot Neue Regular', 'Arial', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    position: relative !important;
    display: inline-block !important;
}

.welcome-page__bp a::before,
.footer-link::before,
.footer-menu a::before {
    content: '' !important;
    position: absolute !important;
    bottom: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #9b59b6, transparent) !important;
    transition: width 0.3s ease !important;
}

.welcome-page__bp a:hover,
.footer-link:hover,
.footer-menu a:hover {
    color: #9b59b6 !important;
    text-shadow: 0 0 15px rgba(155, 89, 182, 0.8) !important;
    transform: translateY(-2px) !important;
    background: rgba(155, 89, 182, 0.1) !important;
}

.welcome-page__bp a:hover::before,
.footer-link:hover::before,
.footer-menu a:hover::before {
    width: 80% !important;
}

/* Footer Text */
.welcome-page__bp,
.footer-text,
.footer-copyright {
    color: #d0d0d0 !important;
    font-family: 'TT Supermolot Neue Regular', 'Arial', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
}

/* Footer Dividers */
.footer-divider {
    border-color: #533483 !important;
    opacity: 0.6 !important;
    height: 2px !important;
}

/* Language Selector */
.welcome-page__bp select,
.footer-menu select {
    background: rgba(83, 52, 131, 0.3) !important;
    border: 2px solid #533483 !important;
    border-radius: 8px !important;
    color: #fff !important;
    padding: 6px 12px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.welcome-page__bp select:hover,
.footer-menu select:hover {
    background: rgba(155, 89, 182, 0.3) !important;
    border-color: #9b59b6 !important;
    box-shadow: 0 0 15px rgba(155, 89, 182, 0.4) !important;
}

/* Copyright Text */
.welcome-page__bp .copyright,
.footer-copyright {
    color: #9b59b6 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(155, 89, 182, 0.5) !important;
}

/* ============================================
   ADDITIONAL AUTH PAGE ENHANCEMENTS
   ============================================ */

/* Slider Overlay */
.welcome-page__slider::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.4) 0%, rgba(22, 33, 62, 0.4) 100%) !important;
    pointer-events: none !important;
}

/* Form Container Glow */
.welcome-page-form {
    position: relative !important;
}

.welcome-page-form::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(135deg, #533483, #9b59b6, #533483) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    opacity: 0.5 !important;
    filter: blur(10px) !important;
}

/* Auth Form Holder */
.auth-form-holder {
    animation: fadeInUp 0.8s ease-out 0.2s both !important;
}

/* Logo Animation */
.logo img {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.logo:hover img {
    transform: scale(1.1) rotate(5deg) !important;
    filter: drop-shadow(0 0 30px rgba(155, 89, 182, 0.8)) !important;
}

/* Welcome Heading Animation */
.welcome-page-form__header h1 {
    animation: fadeInUp 0.6s ease-out 0.4s both !important;
}

/* ============================================
   CUSTOM FONT FOR "WELCOME TO FLEXR"
   ============================================ */

@font-face {
    font-family: 'TT Supermolot Neue ExtraBold';
    src: url('../fonts/TT-Supermolot-Neue-Expanded-ExtraBold.BWe-v52G.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Supermolot Neue Regular';
    src: url('../fonts/TT-Supermolot-Neue-Expanded-Regular.V3ENQXgC.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.welcome-page-form__header h1 {
    font-family: 'TT Supermolot Neue ExtraBold', 'Arial Black', sans-serif !important;
    font-weight: 900 !important;
    font-size: 2.8rem !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, #fff 0%, #9b59b6 50%, #533483 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: 0 0 30px rgba(155, 89, 182, 0.8) !important;
    position: relative !important;
}

.welcome-page-form__header h1::before {
    content: attr(data-text) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    background: linear-gradient(135deg, #9b59b6 0%, #fff 50%, #9b59b6 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: textShimmer 3s ease-in-out infinite !important;
    z-index: -1 !important;
    filter: blur(2px) !important;
}

@keyframes textShimmer {
    0%, 100% {
        opacity: 0.5;
        transform: translateX(0);
    }
    50% {
        opacity: 1;
        transform: translateX(2px);
    }
}

/* Input Focus Glow */
.form-control:focus {
    animation: inputGlow 0.3s ease-out !important;
}

@keyframes inputGlow {
    0% {
        box-shadow: 0 0 20px rgba(155, 89, 182, 0.4) !important;
    }
    50% {
        box-shadow: 0 0 30px rgba(155, 89, 182, 0.6) !important;
    }
    100% {
        box-shadow: 0 0 20px rgba(155, 89, 182, 0.4) !important;
    }
}

/* Button Pulse Animation */
@keyframes buttonPulse {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(155, 89, 182, 0.4) !important;
    }
    50% {
        box-shadow: 0 6px 24px rgba(155, 89, 182, 0.6) !important;
    }
}

.btn-custom:not(:hover) {
    animation: buttonPulse 2s ease-in-out infinite !important;
}

/* Sign Up Link Styling */
.welcome-page__bp a[href*="signup"],
.welcome-page__bp a[href*="register"] {
    color: #9b59b6 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.welcome-page__bp a[href*="signup"]:hover,
.welcome-page__bp a[href*="register"]:hover {
    color: #fff !important;
    text-shadow: 0 0 15px rgba(155, 89, 182, 0.8) !important;
}

/* ============================================
   FLEXR LEFT SIDEBAR STYLING
   ============================================ */

/* Left Sidebar Container */
.left-sb-container {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95)) !important;
    border: 2px solid #533483 !important;
    border-radius: 20px !important;
    padding: 20px !important;
    box-shadow: 0 8px 32px rgba(83, 52, 131, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}

/* Left Sidebar Navigation Items */
.sidebar__nav-item {
    background: rgba(83, 52, 131, 0.15) !important;
    border: 1px solid rgba(83, 52, 131, 0.3) !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin-bottom: 3px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

.sidebar__nav-item .text {
    flex: 1 !important;
    padding: 4px 8px !important;
}

.sidebar__nav-item .text a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 0 !important;
}

.sidebar__nav-item:hover {
    background: rgba(155, 89, 182, 0.2) !important;
    border-color: #9b59b6 !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 16px rgba(155, 89, 182, 0.4) !important;
}

.sidebar__nav-item.active {
    background: linear-gradient(135deg, rgba(83, 52, 131, 0.3) 0%, rgba(155, 89, 182, 0.3)) !important;
    border-color: #9b59b6 !important;
    box-shadow: 0 4px 16px rgba(155, 89, 182, 0.5) !important;
}

/* Navigation Icons */
.sidebar__nav-item .icon {
    color: #9b59b6 !important;
    transition: all 0.3s ease !important;
}

.sidebar__nav-item:hover .icon,
.sidebar__nav-item.active .icon {
    color: #fff !important;
    filter: drop-shadow(0 0 8px rgba(155, 89, 182, 0.6)) !important;
    transform: scale(1.1) !important;
}

/* Navigation Text/Links */
.sidebar__nav-item .text a {
    color: #e0e0e0 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.sidebar__nav-item:hover .text a,
.sidebar__nav-item.active .text a {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(155, 89, 182, 0.5) !important;
}

/* Wallet Balance */
.sidebar__nav-item .wallet {
    color: #FFD700 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5) !important;
}

/* Navigation Dividers */
.sidebar__nav-item-devider {
    border-color: #533483 !important;
    opacity: 0.5 !important;
    margin: 4px 0 !important;
}

/* Info Indicators (Notifications, Messages) */
.sidebar__nav-item .info-indicators {
    background: linear-gradient(135deg, #533483 0%, #9b59b6 100%) !important;
    color: #fff !important;
    border-radius: 50% !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    box-shadow: 0 0 10px rgba(155, 89, 182, 0.6) !important;
}

/* More button styling */
.sidebar__nav-group_toggle .sidebar__nav-item {
    cursor: pointer !important;
}

/* ============================================
   FLEXR MORE MENU POPUP MODAL
   ============================================ */

/* Modal Overlay */
.more-menu-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    animation: fadeIn 0.3s ease !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.more-menu-modal[style*="flex"],
.more-menu-modal.show {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.more-menu-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(5px) !important;
}

/* Modal Content */
.more-menu-content {
    position: relative !important;
    z-index: 1000000 !important;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.98)) !important;
    border: 2px solid #533483 !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(83, 52, 131, 0.5) !important;
    backdrop-filter: blur(20px) !important;
    max-width: 400px !important;
    width: 90% !important;
    max-height: 80vh !important;
    overflow: hidden !important;
    animation: slideUp 0.3s ease !important;
}

/* Modal Header */
.more-menu-header {
    padding: 20px 25px !important;
    border-bottom: 2px solid #533483 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.more-menu-header h3 {
    color: #fff !important;
    font-family: 'TT Supermolot Neue Regular', 'Arial', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin: 0 !important;
    text-shadow: 0 0 10px rgba(155, 89, 182, 0.3) !important;
}

.more-menu-close {
    background: rgba(83, 52, 131, 0.3) !important;
    border: 2px solid #533483 !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    color: #fff !important;
    font-size: 24px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.more-menu-close:hover {
    background: rgba(155, 89, 182, 0.3) !important;
    border-color: #9b59b6 !important;
    transform: rotate(90deg) !important;
    box-shadow: 0 0 20px rgba(155, 89, 182, 0.6) !important;
}

/* Modal Body */
.more-menu-body {
    padding: 15px !important;
    overflow-y: auto !important;
    max-height: calc(80vh - 80px) !important;
}

.more-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 15px !important;
    margin-bottom: 8px !important;
    background: rgba(83, 52, 131, 0.15) !important;
    border: 1px solid rgba(83, 52, 131, 0.3) !important;
    border-radius: 10px !important;
    color: #e0e0e0 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.more-menu-item:hover {
    background: rgba(155, 89, 182, 0.2) !important;
    border-color: #9b59b6 !important;
    transform: translateX(8px) !important;
    box-shadow: 0 4px 16px rgba(155, 89, 182, 0.4) !important;
    color: #fff !important;
    text-shadow: 0 0 10px rgba(155, 89, 182, 0.5) !important;
}

.more-menu-item .icon {
    color: #9b59b6 !important;
    transition: all 0.3s ease !important;
}

.more-menu-item:hover .icon {
    color: #fff !important;
    filter: drop-shadow(0 0 8px rgba(155, 89, 182, 0.6)) !important;
    transform: scale(1.1) !important;
}

/* Logout button special styling */
.more-menu-item-logout {
    background: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
}

.more-menu-item-logout .icon {
    color: #dc3545 !important;
}

.more-menu-item-logout:hover {
    background: rgba(220, 53, 69, 0.3) !important;
    border-color: #dc3545 !important;
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.5) !important;
}

.more-menu-item-logout:hover .icon {
    color: #fff !important;
    filter: drop-shadow(0 0 8px rgba(220, 53, 69, 0.8)) !important;
}

.more-menu-divider {
    border-color: #533483 !important;
    opacity: 0.5 !important;
    margin: 12px 0 !important;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Custom scrollbar for modal */
.more-menu-body::-webkit-scrollbar {
    width: 8px !important;
}

.more-menu-body::-webkit-scrollbar-track {
    background: rgba(83, 52, 131, 0.1) !important;
    border-radius: 10px !important;
}

.more-menu-body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #533483 0%, #9b59b6 100%) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 8px rgba(155, 89, 182, 0.4) !important;
}

.more-menu-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #9b59b6 0%, #533483 100%) !important;
    box-shadow: 0 0 12px rgba(155, 89, 182, 0.6) !important;
}

.more-menu-body {
    scrollbar-width: thin !important;
    scrollbar-color: #9b59b6 rgba(83, 52, 131, 0.1) !important;
}

/* ============================================
   FLEXR RIGHT SIDEBAR STYLING
   ============================================ */

/* Make sidebars sticky like Twitter */
.right-sb-container,
.left-sb-container,
.sidebar {
    position: sticky !important;
    top: 20px !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Prevent is-affixed from breaking sidebars */
.right-sb-container.is-affixed,
.left-sb-container.is-affixed,
.sidebar.is-affixed {
    position: sticky !important;
    top: 20px !important;
    left: auto !important;
    width: auto !important;
    transform: none !important;
}

/* Also target the inner wrapper */
.right-sb-container.is-affixed .inner-wrapper-sticky,
.left-sb-container.is-affixed .inner-wrapper-sticky,
.sidebar.is-affixed .inner-wrapper-sticky {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    transform: none !important;
}

/* Sidebar Section Titles */
.sidebar__section-title,
.sidebar-content__header h3 {
    color: #fff !important;
    font-family: 'TT Supermolot Neue Regular', 'Arial', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #533483 !important;
    text-shadow: 0 0 10px rgba(155, 89, 182, 0.3) !important;
}

/* Who to Follow Section */
.sidebar-content_users,
.sidebar-content__users {
    background: transparent !important;
}

/* User Profile Cards */
.sidebar-content__item,
.sidebar-user-card {
    background: rgba(83, 52, 131, 0.15) !important;
    border: 1px solid rgba(83, 52, 131, 0.3) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    transition: all 0.3s ease !important;
}

.sidebar-content__item:hover,
.sidebar-user-card:hover {
    background: rgba(155, 89, 182, 0.2) !important;
    border-color: #9b59b6 !important;
    transform: translateX(-4px) !important;
    box-shadow: 0 4px 16px rgba(155, 89, 182, 0.4) !important;
}

/* User Avatar */
.sidebar-content__item .avatar-holder,
.sidebar-user-card .avatar-holder {
    border: 2px solid #533483 !important;
    box-shadow: 0 4px 12px rgba(83, 52, 131, 0.4) !important;
    transition: all 0.3s ease !important;
}

.sidebar-content__item:hover .avatar-holder,
.sidebar-user-card:hover .avatar-holder {
    border-color: #9b59b6 !important;
    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.6) !important;
    transform: scale(1.05) !important;
}

/* Username */
.sidebar-content__item .username,
.sidebar-user-card .username {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

.sidebar-content__item:hover .username,
.sidebar-user-card:hover .username {
    color: #9b59b6 !important;
    text-shadow: 0 0 10px rgba(155, 89, 182, 0.5) !important;
}

/* Followers Count */
.sidebar-content__item .followers-count,
.sidebar-user-card .followers-count {
    color: #b0b0b0 !important;
    font-size: 12px !important;
}

/* Verified Badge */
.sidebar-content__item .verified-badge,
.sidebar-user-card .verified-badge {
    color: #FFD700 !important;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5)) !important;
}

/* Remove overflow from sidebar username */
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-users div.sidebar-users__item div.sidebar-users__item-data div.sidebar-users__item-name span {
    overflow: visible !important;
}

/* Custom Verified Badge Icon */
.user-name-holder__badge svg,
.sidebar-content__item .verified-badge svg,
.sidebar-user-card .verified-badge svg,
.timeline-pub__header .verified-badge svg,
.post-data__header .verified-badge svg {
    display: none !important;
}

/* Override badge container size */
body span.user-name-holder span.user-name-holder__badge {
    width: 38px !important;
    height: 28px !important;
    line-height: 24px !important;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.3)) !important;
}

.user-name-holder__badge::before,
.sidebar-content__item .verified-badge::before,
.sidebar-user-card .verified-badge::before,
.timeline-pub__header .verified-badge::before,
.post-data__header .verified-badge::before {
    content: '' !important;
    display: inline-block !important;
    width: 25px !important;
    height: 28px !important;
    background-image: url('https://materialsofwar.com/themes/default/statics/img/verified.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 6px !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
    margin-top: -2px !important;
}

/* Follow Button */
.sidebar-content__item .btn-follow,
.sidebar-user-card .btn-follow {
    background: linear-gradient(135deg, #533483 0%, #9b59b6 100%) !important;
    border: 1px solid #9b59b6 !important;
    border-radius: 8px !important;
    padding: 6px 16px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3) !important;
}

.sidebar-content__item .btn-follow:hover,
.sidebar-user-card .btn-follow:hover {
    background: linear-gradient(135deg, #9b59b6 0%, #533483 100%) !important;
    border-color: #fff !important;
    box-shadow: 0 4px 16px rgba(155, 89, 182, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* Show More Link */
.sidebar-content__show-more,
.sidebar-show-more {
    color: #9b59b6 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

.sidebar-content__show-more:hover,
.sidebar-show-more:hover {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(155, 89, 182, 0.5) !important;
    transform: translateX(4px) !important;
}

/* Hot Topics / Trending Section */
.sidebar-content__topics,
.sidebar-content__hashtags {
    background: transparent !important;
}

/* Topic/Hashtag Items */
.sidebar-topic-item,
.sidebar-hashtag-item {
    background: rgba(83, 52, 131, 0.15) !important;
    border: 1px solid rgba(83, 52, 131, 0.3) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin-bottom: 8px !important;
    transition: all 0.3s ease !important;
    display: block !important;
    text-decoration: none !important;
}

.sidebar-topic-item:hover,
.sidebar-hashtag-item:hover {
    background: rgba(155, 89, 182, 0.2) !important;
    border-color: #9b59b6 !important;
    transform: translateX(-4px) !important;
    box-shadow: 0 4px 16px rgba(155, 89, 182, 0.4) !important;
}

/* Hashtag Text */
.sidebar-topic-item .hashtag-text,
.sidebar-hashtag-item .hashtag-text,
.sidebar-topic-item a,
.sidebar-hashtag-item a {
    color: #9b59b6 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

.sidebar-topic-item:hover .hashtag-text,
.sidebar-hashtag-item:hover .hashtag-text,
.sidebar-topic-item:hover a,
.sidebar-hashtag-item:hover a {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(155, 89, 182, 0.5) !important;
}

/* Trending Count */
.sidebar-topic-item .trending-count,
.sidebar-hashtag-item .trending-count {
    color: #b0b0b0 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* Search Bar in Sidebar */
.sidebar-search,
.sidebar-search__input {
    background: rgba(83, 52, 131, 0.2) !important;
    border: 2px solid #533483 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    color: #fff !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

.sidebar-search:focus,
.sidebar-search__input:focus {
    background: rgba(155, 89, 182, 0.2) !important;
    border-color: #9b59b6 !important;
    box-shadow: 0 0 20px rgba(155, 89, 182, 0.4) !important;
    outline: none !important;
}

.sidebar-search::placeholder,
.sidebar-search__input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Sidebar Divider */
.sidebar-divider,
.sidebar__divider {
    border-color: #533483 !important;
    opacity: 0.5 !important;
    margin: 20px 0 !important;
}

/* Sidebar Links */
.sidebar-link,
.sidebar__link {
    color: #b0b0b0 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
}

.sidebar-link:hover,
.sidebar__link:hover {
    color: #9b59b6 !important;
    background: rgba(155, 89, 182, 0.1) !important;
    text-shadow: 0 0 8px rgba(155, 89, 182, 0.4) !important;
}

/* Sidebar User Items Hover Effects */
.sidebar-users__item:hover {
    background: rgba(155, 89, 182, 0.2) !important;
    border-color: #9b59b6 !important;
    transform: translateX(-4px) !important;
    box-shadow: 0 4px 16px rgba(155, 89, 182, 0.4) !important;
}

.sidebar-users__item:hover .sidebar-users__item-avatar {
    border-color: #9b59b6 !important;
    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.6) !important;
    transform: scale(1.05) !important;
}

.sidebar-users__item:hover .block-link {
    color: #9b59b6 !important;
    text-shadow: 0 0 10px rgba(155, 89, 182, 0.5) !important;
}

/* Sidebar Hashtag Items Hover Effects */
.sidebar-hashtags__item:hover {
    background: rgba(155, 89, 182, 0.2) !important;
    border-color: #9b59b6 !important;
    transform: translateX(-4px) !important;
    box-shadow: 0 4px 16px rgba(155, 89, 182, 0.4) !important;
}

.sidebar-hashtags__item:hover .sidebar-hashtags__item-data,
.sidebar-hashtags__item:hover .icon,
.sidebar-hashtags__item:hover .text {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(155, 89, 182, 0.5) !important;
}

/* Search Bar Container */
.sidebar-searchbar {
    width: 100% !important;
    padding: 0 !important;
}

.sidebar-searchbar__input {
    width: 100% !important;
    padding: 0 !important;
}

/* Search Input Base Styling */
.sidebar-searchbar__input input {
    width: 100% !important;
    padding: 14px 20px !important;
    background: rgba(83, 52, 131, 0.2) !important;
    border: 2px solid #533483 !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

/* Search Input Focus Effect */
.sidebar-searchbar__input input:focus {
    background: rgba(155, 89, 182, 0.2) !important;
    border-color: #9b59b6 !important;
    box-shadow: 0 0 20px rgba(155, 89, 182, 0.4) !important;
    outline: none !important;
}

.sidebar-searchbar__input input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Search Bar Header */
.right-sidebar__header {
    padding: 0 !important;
    margin-bottom: 25px !important;
}

/* ============================================
   FLEXR SIDEBARS - NO SCROLLBAR
   ============================================ */

/* Hide scrollbars completely - all content visible */
.right-sb-container,
.left-sb-container,
.sidebar {
    scrollbar-width: none !important;
}

/* Webkit browsers - Hide scrollbar */
.right-sb-container::-webkit-scrollbar,
.left-sb-container::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

/* Show More Link Hover */
.sidebar-content__footer a:hover {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(155, 89, 182, 0.5) !important;
    transform: translateX(4px) !important;
}

.timeline-pub__action-item {
    position: relative !important;
    z-index: 1000 !important;
}

/* Fix dropdown menus being cut off - target all possible dropdown classes */
.dropdown-menu,
.dropdown-menu.show,
.dropdown-menu[x-placement],
body .dropdown div.dropdown-menu,
body .dropleft div.dropdown-menu,
body .dropright div.dropdown-menu,
body .dropup div.dropdown-menu {
    z-index: 9999 !important;
    position: absolute !important;
    overflow: visible !important;
}

/* Ensure dropdown parent has proper positioning */
.dropdown,
.dropdown-toggle {
    position: relative !important;
}

/* Prevent post items from clipping dropdowns */
.timeline-pub__body {
    position: relative !important;
}

.youtube-embed {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
    height: 0 !important;
    background: #000 !important;
}

.youtube-embed iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
}

.tiktok-embed,
.twitter-embed,
.instagram-embed {
    max-width: 600px !important;
    margin: 15px auto !important;
}

.btn-publish {
    background: linear-gradient(135deg, #533483 0%, #9b59b6 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 25px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(83, 52, 131, 0.4) !important;
}

.btn-publish:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(155, 89, 182, 0.6) !important;
    background: linear-gradient(135deg, #9b59b6 0%, #533483 100%) !important;
}

/* Individual Posts */
.post-list-item {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    /* border: 2px solid #533483 !important; */
    /* border-radius: 20px !important; */
    /* padding: 20px !important; */
    /* margin-bottom: 20px !important; */
    /* box-shadow: 0 8px 32px rgba(83, 52, 131, 0.2) !important; */
    position: relative !important;
    overflow: hidden !important;
}

/* OVERRIDE BACKEND CUSTOM CSS - Remove all post styling and animations */
.post-list-item {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    /* border: 2px solid #533483 !important; */
    /* border-radius: 20px !important; */
    /* padding: 20px !important; */
    /* margin-bottom: 20px !important; */
    /* box-shadow: 0 8px 32px rgba(83, 52, 131, 0.2) !important; */
    /* transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; */
    position: relative !important;
    overflow: hidden !important;
}

/* COMPLETELY DISABLE ALL ::before and ::after pseudo-elements on posts */
.post-list-item::before,
.post-list-item::after {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Disable hover effects on post container */
.post-list-item:hover {
    /* border-color: #9b59b6 !important; */
    /* box-shadow: 0 16px 64px rgba(155, 89, 182, 0.5) !important; */
    /* transform: translateY(-4px) scale(1.01) !important; */
}

/* Also disable on child elements that might have animated effects */
.post-list-item *::before,
.post-list-item *::after {
    pointer-events: none !important;
}

/* Post Text Styling - Let readmore plugin handle the height */
.publication-text {
    /* max-height: 300px !important; */
    /* overflow: hidden !important; */
    height: auto !important;  /* FIX: Remove fixed height that cuts off embeds */
}

/* Ensure post layout doesn't clip content */
.post-data-layout__content,
.post-data-layout__controls {
    overflow: visible !important;
    max-height: none !important;
}

/* Fix YouTube video embeds being cut off */
.publication-video,
.lozad-video,
.lozad-media,
.publication-og,
.embeded-iframe,
.publication-og__inner {
    overflow: visible !important;
    max-height: none !important;
}

.publication-video iframe,
.lozad-video iframe,
.lozad-media iframe,
.publication-og iframe,
.embeded-iframe iframe {
    overflow: visible !important;
    max-height: none !important;
    display: block !important;
}

/* Fix publication-og image container */
.publication-og__image {
    overflow: visible !important;
    max-height: none !important;
}

.publication-og__image .lozad-media {
    overflow: visible !important;
    max-height: none !important;
}

.publication-og__image img {
    overflow: visible !important;
    max-height: none !important;
}

/* Read More Button Styling - DISABLED */
.readmore-toggle {
    display: none !important;
    visibility: hidden !important;
}

/* Hide any readmore buttons that might already be rendered */
span.readmore-toggle,
a.readmore-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* FLEXR View Post Button */
.post-view-button-container {
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-bottom: 8px !important;
}

.post-view-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: linear-gradient(135deg, #533483 0%, #9b59b6 100%) !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 2px solid transparent !important;
    box-shadow: 0 4px 16px rgba(83, 52, 131, 0.3) !important;
}

.post-view-button:hover {
    background: linear-gradient(135deg, #9b59b6 0%, #533483 100%) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(155, 89, 182, 0.5) !important;
    border-color: #9b59b6 !important;
}

.post-view-button__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.3s ease !important;
}

.post-view-button:hover .post-view-button__icon {
    transform: translateX(4px) !important;
}

.post-view-button__text {
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* Sidebar User Avatars - Circular with border */
.sidebar-users__item-avatar {
    border-radius: 50% !important;
    border: 1px solid #533483 !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.sidebar-users__item-avatar:hover {
    border-color: #9b59b6 !important;
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.4) !important;
    transform: scale(1.05) !important;
}

.sidebar-users__item-avatar img {
    border-radius: 50% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Override master.styles.css for sidebar avatars */
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-users div.sidebar-users__item div.sidebar-users__item-avatar {
    border-radius: 50% !important;
    overflow: visible !important;
    flex-basis: auto !important;
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
}

body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-users div.sidebar-users__item div.sidebar-users__item-avatar img {
    border-radius: 50% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Ensure online indicator works with circular avatars */
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-users div.sidebar-users__item div.sidebar-users__item-avatar-online {
    border-radius: 50% !important;
    overflow: visible !important;
}

body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-users div.sidebar-users__item div.sidebar-users__item-avatar-online:before {
    border: 2px solid #1a1a2e !important;
}

/* Post header with avatar and username */
.post-data {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
}

.post-data__avatar {
    flex-shrink: 0 !important;
}

.post-data__avatar .avatar-holder {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: 3px solid #533483 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(83, 52, 131, 0.4) !important;
    transition: all 0.3s ease !important;
}

.post-data__avatar .avatar-holder:hover {
    border-color: #9b59b6 !important;
    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.5) !important;
    transform: scale(1.05) !important;
}

.post-data__avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Online indicator */
.avatar-holder-online::after {
    background: #27ae60 !important;
    border: 3px solid #1a1a2e !important;
    box-shadow: 0 0 10px rgba(39, 174, 96, 0.6) !important;
}

/* Post username and info */
.post-data__content {
    flex: 1 !important;
}

.post-username {
    margin-bottom: 5px !important;
}

.user-name-holder__name {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.user-name-holder__name:hover {
    color: #9b59b6 !important;
}

.user-name-holder__badge {
    margin-left: 5px !important;
}

.user-name-holder__badge svg {
    width: 18px !important;
    height: 18px !important;
    fill: #f4d03f !important;
    filter: drop-shadow(0 0 4px rgba(244, 208, 63, 0.2)) !important;
}

.post-time {
    color: #8b9dc3 !important;
    font-size: 13px !important;
}

/* Post content text */
.post-data__content-inner {
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
}

/* Hashtags */
a[href*="/hashtag/"] {
    color: #9b59b6 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

a[href*="/hashtag/"]:hover {
    color: #f4d03f !important;
    text-shadow: 0 0 10px rgba(244, 208, 63, 0.6) !important;
}

/* Post media (images, videos) */
.post-media {
    margin: 15px 0 !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    border: 2px solid #533483 !important;
}

.post-media img,
.post-media video {
    width: 100% !important;
    display: block !important;
}

/* Engagement buttons */
.post-engagement {
    display: flex !important;
    justify-content: space-around !important;
    padding-top: 15px !important;
    border-top: 2px solid rgba(83, 52, 131, 0.3) !important;
}

.engagement-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 15px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    border: none !important;
    color: #8b9dc3 !important;
}

.engagement-item:hover {
    background: rgba(83, 52, 131, 0.2) !important;
    color: #9b59b6 !important;
    transform: translateY(-2px) !important;
}

.engagement-item.active {
    color: #9b59b6 !important;
}

.engagement-item svg {
    width: 20px !important;
    height: 20px !important;
}

.engagement-item span {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Pinned post badge */
.post-list-item__alert {
    background: linear-gradient(135deg, #f4d03f 0%, #f39c12 100%) !important;
    color: #1a1a2e !important;
    padding: 10px 15px !important;
    border-radius: 10px !important;
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 12px !important;
}

.post-list-item__alert_admin {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    color: #fff !important;
}

/* Repost indicator */
.publication-repost {
    background: rgba(83, 52, 131, 0.2) !important;
    padding: 10px 15px !important;
    border-radius: 10px !important;
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #8b9dc3 !important;
    font-size: 13px !important;
}

.publication-repost a {
    color: #9b59b6 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.publication-repost a:hover {
    color: #f4d03f !important;
}

/* Timeline header */
.timeline-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border-bottom: 2px solid #533483 !important;
    padding: 15px 20px !important;
    margin-bottom: 20px !important;
}

.timeline-header__botline {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.timeline-header__botline .cp img {
    max-height: 40px !important;
    filter: drop-shadow(0 0 10px rgba(83, 52, 131, 0.6)) !important;
}

/* Empty state */
.post-placeholder {
    background: rgba(83, 52, 131, 0.1) !important;
    border: 2px dashed #533483 !important;
    border-radius: 15px !important;
    padding: 30px !important;
    text-align: center !important;
    color: #8b9dc3 !important;
}

.post-placeholder .icon svg {
    width: 40px !important;
    height: 40px !important;
    fill: #533483 !important;
    margin-bottom: 15px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .timeline-pubbox {
        padding: 15px !important;
    }
    
    .pubbox-avatar {
        width: 40px !important;
        height: 40px !important;
    }
    
    .post-data__avatar .avatar-holder {
        width: 40px !important;
        height: 40px !important;
    }
    
    .engagement-item {
        padding: 8px 10px !important;
    }
    
    .engagement-item span {
        font-size: 12px !important;
    }
}

/* ============================================
   VIKING HOME PAGE - EPIC GAMING DESIGN
   ============================================ */

/* Timeline Header */
.viking-homepage .timeline-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border-bottom: 3px solid #533483 !important;
    box-shadow: 0 8px 32px rgba(83, 52, 131, 0.4) !important;
}

/* Viking Nav Link */
.viking-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    background: rgba(83, 52, 131, 0.3) !important;
    border-radius: 15px !important;
    text-decoration: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
}

.viking-nav-link:hover {
    background: rgba(155, 89, 182, 0.4) !important;
    border-color: #9b59b6 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4) !important;
}

.viking-icon {
    font-size: 24px !important;
    filter: drop-shadow(0 0 8px rgba(244, 208, 63, 0.6)) !important;
}

.viking-text {
    font-weight: 700 !important;
}

/* Viking Logo */
.viking-logo-link {
    transition: transform 0.3s ease !important;
}

.viking-logo {
    max-height: 50px !important;
    filter: drop-shadow(0 0 15px rgba(83, 52, 131, 0.8)) !important;
    transition: transform 0.3s ease !important;
}

.viking-logo-link:hover .viking-logo {
    transform: scale(1.1) !important;
}

/* Viking Options Button */
.viking-options-btn {
    background: rgba(83, 52, 131, 0.3) !important;
    border: 2px solid #533483 !important;
    border-radius: 15px !important;
    padding: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.viking-options-btn:hover {
    background: rgba(155, 89, 182, 0.4) !important;
    border-color: #9b59b6 !important;
    transform: translateY(-2px) !important;
}

.viking-options-btn .go-options__icon svg {
    fill: #fff !important;
    width: 24px !important;
    height: 24px !important;
}

/* Homepage Container */
.homepage {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Swift Stories */
.viking-stories {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.8) 0%, rgba(22, 33, 62, 0.8) 100%) !important;
    border: 2px solid #533483 !important;
    border-radius: 20px !important;
    padding: 20px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 8px 32px rgba(83, 52, 131, 0.3) !important;
}

.viking-swift-item {
    transition: all 0.3s ease !important;
}

.viking-swift-item:hover {
    transform: translateY(-5px) !important;
}

.viking-story-avatar {
    border: 3px solid #533483 !important;
    box-shadow: 0 4px 15px rgba(83, 52, 131, 0.5) !important;
    transition: all 0.3s ease !important;
}

.viking-swift-item:hover .viking-story-avatar {
    border-color: #9b59b6 !important;
    box-shadow: 0 6px 25px rgba(155, 89, 182, 0.6) !important;
    transform: scale(1.05) !important;
}

.viking-add-icon svg {
    fill: #9b59b6 !important;
    filter: drop-shadow(0 0 10px rgba(155, 89, 182, 0.8)) !important;
}

.viking-story-footer {
    color: #fff !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Posts Container */
.timeline-posts-container {
    max-width: 900px !important;
    margin: 0 auto !important;
}

.timeline-posts-ls {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* Enhanced Post Styling for Viking Theme - ONLY ON HOMEPAGE */
.viking-homepage .post-list-item {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    /* border: 2px solid #533483 !important; */
    /* border-radius: 20px !important; */
    /* padding: 25px !important; */
    /* box-shadow: 0 8px 32px rgba(83, 52, 131, 0.2) !important; */
    position: relative !important;
    overflow: hidden !important;
}

/* OVERRIDE BACKEND CUSTOM CSS - Remove all homepage post styling and animations */
.viking-homepage .post-list-item {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    /* border: 2px solid #533483 !important; */
    /* border-radius: 20px !important; */
    /* padding: 25px !important; */
    /* box-shadow: 0 8px 32px rgba(83, 52, 131, 0.2) !important; */
    /* transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; */
    position: relative !important;
    overflow: hidden !important;
}

/* COMPLETELY DISABLE ALL ::before and ::after pseudo-elements on homepage posts */
.viking-homepage .post-list-item::before,
.viking-homepage .post-list-item::after {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Disable hover effects on homepage post container */
.viking-homepage .post-list-item:hover {
    /* border-color: #9b59b6 !important; */
    /* box-shadow: 0 16px 64px rgba(155, 89, 182, 0.5) !important; */
    /* transform: translateY(-4px) scale(1.01) !important; */
}

/* Enhanced Avatar Styling - ONLY ON HOMEPAGE */
.viking-homepage .post-data__avatar .avatar-holder {
    width: 55px !important;
    height: 55px !important;
    border-radius: 50% !important;
    border: 3px solid #533483 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(83, 52, 131, 0.5) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.viking-homepage .post-data__avatar .avatar-holder::after {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    border-radius: 50% !important;
    background: linear-gradient(45deg, #533483, #9b59b6, #f4d03f, #9b59b6, #533483) !important;
    background-size: 300% 300% !important;
    z-index: -1 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    animation: gradient-rotate 3s ease infinite !important;
}

.viking-homepage .post-list-item:hover .avatar-holder::after {
    opacity: 1 !important;
}

@keyframes gradient-rotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.viking-homepage .post-data__avatar .avatar-holder:hover {
    border-color: #9b59b6 !important;
    box-shadow: 0 6px 25px rgba(155, 89, 182, 0.7) !important;
    transform: scale(1.08) rotate(5deg) !important;
}

/* Enhanced Engagement Buttons - ONLY ON HOMEPAGE */
.viking-homepage .post-engagement {
    border-top: 2px solid rgba(83, 52, 131, 0.4) !important;
    padding-top: 20px !important;
}

.viking-homepage .engagement-item {
    padding: 12px 18px !important;
    border-radius: 15px !important;
    background: rgba(83, 52, 131, 0.1) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.viking-homepage .engagement-item::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(155, 89, 182, 0.3) !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.6s ease, height 0.6s ease !important;
}

.viking-homepage .engagement-item:hover::before {
    width: 200% !important;
    height: 200% !important;
}

.viking-homepage .engagement-item:hover {
    background: rgba(155, 89, 182, 0.3) !important;
    color: #9b59b6 !important;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4) !important;
}

.viking-homepage .engagement-item svg {
    position: relative !important;
    z-index: 1 !important;
    transition: transform 0.3s ease !important;
}

.viking-homepage .engagement-item:hover svg {
    transform: scale(1.2) rotate(10deg) !important;
}

.viking-homepage .engagement-item span {
    position: relative !important;
    z-index: 1 !important;
    font-weight: 700 !important;
}

/* Enhanced Pinned Post Badge - ONLY ON HOMEPAGE */
.viking-homepage .post-list-item__alert {
    background: linear-gradient(135deg, #f4d03f 0%, #f39c12 100%) !important;
    color: #1a1a2e !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 13px !important;
    box-shadow: 0 4px 15px rgba(244, 208, 63, 0.4) !important;
    animation: pulse-glow 2s ease-in-out infinite !important;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 4px 15px rgba(244, 208, 63, 0.4); }
    50% { box-shadow: 0 6px 25px rgba(244, 208, 63, 0.7); }
}

.viking-homepage .post-list-item__alert_admin {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    color: #fff !important;
    animation: pulse-glow-red 2s ease-in-out infinite !important;
}

@keyframes pulse-glow-red {
    0%, 100% { box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4); }
    50% { box-shadow: 0 6px 25px rgba(231, 76, 60, 0.7); }
}

/* Enhanced Hashtags - ONLY ON HOMEPAGE */
.viking-homepage a[href*="/hashtag/"] {
    color: #9b59b6 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    background: rgba(155, 89, 182, 0.1) !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

.viking-homepage a[href*="/hashtag/"]:hover {
    color: #f4d03f !important;
    background: rgba(244, 208, 63, 0.2) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(244, 208, 63, 0.4) !important;
}

/* Enhanced Post Media - ONLY ON HOMEPAGE */
.viking-homepage .post-media {
    border: 3px solid #533483 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(83, 52, 131, 0.3) !important;
    transition: all 0.3s ease !important;
}

.viking-homepage .post-media:hover {
    border-color: #9b59b6 !important;
    box-shadow: 0 12px 48px rgba(155, 89, 182, 0.5) !important;
    transform: scale(1.02) !important;
}

/* Responsive Design for Viking Home */
@media (max-width: 768px) {
    .viking-feed {
        padding: 0 15px !important;
    }
    
    .viking-posts-wrapper {
        padding: 0 15px !important;
    }
    
    .post-list-item {
        padding: 20px !important;
    }
    
    .post-data__avatar .avatar-holder {
        width: 45px !important;
        height: 45px !important;
    }
    
    .viking-nav-link {
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
    
    .viking-icon {
        font-size: 20px !important;
    }
}