body .et_pb_section .et_pb_row .et_pb_column .et_pb_text .reddit-main-container, .et_pb_text .reddit-main-container, .reddit-main-container { /* FLEXBOX CONTAINER */ display: flex !important; align-items: flex-start !important; /* SMART RESPONSIVE WIDTH - BREAK OUT OF DIVI BUT NO HORIZONTAL SCROLL */ width: 100% !important; max-width: none !important; margin: 0 !important; padding: 20px !important; /* BREAK OUT OF DIVI ON LARGER SCREENS ONLY */ position: relative !important; box-sizing: border-box !important; min-height: 100vh !important; /* RESPONSIVE GAPS */ gap: 0px !important; /* WHITE BACKGROUND */ background: #ffffff !important; } /* BREAK OUT OF DIVI ONLY ON SCREENS THAT CAN HANDLE IT */ /* @media (min-width: 1200px) { body .et_pb_section .et_pb_row .et_pb_column .et_pb_text .reddit-main-container, .et_pb_text .reddit-main-container, .reddit-main-container { /* VIEWPORT BREAKING FOR LARGE SCREENS */ /* width: 100vw !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; position: relative !important; } } */ /* STAY CONTAINED ON SMALLER SCREENS */ @media (max-width: 1199px) { body .et_pb_section .et_pb_row .et_pb_column .et_pb_text .reddit-main-container, .et_pb_text .reddit-main-container, .reddit-main-container { /* CONTAINED LAYOUT - NO VIEWPORT BREAKING */ width: 100% !important; max-width: 100% !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; position: static !important; /* PREVENT HORIZONTAL SCROLL */ overflow-x: hidden !important; } } /* OVERRIDE DIVI TEXT MODULE COMPLETELY */ .et_pb_text .reddit-main-container * { box-sizing: border-box !important; flex: none !important; } /* IMPROVED RESPONSIVE SIDEBAR SYSTEM */ /* LEFT SIDEBAR - FLEXIBLE APPROACH */ .reddit-sidebar-left { background: transparent !important; border: 0px solid #e1e5e9; border-radius: 4px !important; display: block !important; flex-shrink: 0 !important; float: none !important; order: 1 !important; padding: 0 16px 0 0 !important; height: fit-content !important; position: sticky !important; top: 20px !important; overflow: visible !important; /* RESPONSIVE WIDTH - WILL BE OVERRIDDEN AT DIFFERENT BREAKPOINTS */ width: 260px !important; } /* CENTER CONTENT - TRULY FLEXIBLE WITH PROPER TEXT WRAPPING */ body .et_pb_section .et_pb_row .et_pb_column .et_pb_text .reddit-main-content, .et_pb_text .reddit-main-content, .reddit-main-content { background: transparent !important; min-width: 0 !important; display: block !important; order: 2 !important; padding: 0 40px 0 40px !important; /* CHANGED: Reduced right padding from 40px to 20px */ min-height: auto !important; /* FLEXIBLE WIDTH - GROWS AND SHRINKS WITH PROPER TEXT WRAPPING */ flex: 1 !important; max-width: none !important; width: auto !important; min-width: 280px !important; /* ENSURE CONTENT CAN WRAP */ overflow: visible !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } /* RIGHT SIDEBAR - FLEXIBLE APPROACH */ body .et_pb_section .et_pb_row .et_pb_column .et_pb_text .reddit-sidebar-right, .et_pb_text .reddit-sidebar-right, .reddit-sidebar-right { /*background: #f8f9fa !important;*/ border: none !important; border-radius: 4px !important; display: block !important; flex-shrink: 0 !important; float: none !important; order: 3 !important; padding: 0 !important; height: fit-content !important; position: sticky !important; top: 20px !important; overflow: visible !important; /* RESPONSIVE WIDTH */ width: 280px !important; } /* REMOVE THE SPACER - NOT NEEDED WITH FLEX: 1 CENTER */ .reddit-main-container::after { display: none !important; } /* IMPROVED RESPONSIVE BREAKPOINTS - NO MORE HORIZONTAL SCROLLING */ /* EXTRA LARGE SCREENS - SPACIOUS LAYOUT */ @media (min-width: 1600px) { .reddit-main-container { gap: 0px !important; padding: 20px 40px !important; } .reddit-sidebar-left { width: 280px !important; } .reddit-sidebar-right { width: 300px !important; } .reddit-main-content { padding: 0 60px 0 60px !important; } } /* LARGE SCREENS - FULL 3-COLUMN LAYOUT */ @media (min-width: 1400px) and (max-width: 1599px) { .reddit-main-container { gap: 0px !important; padding: 20px 30px !important; } .reddit-sidebar-left { width: 260px !important; } .reddit-sidebar-right { width: 280px !important; } .reddit-main-content { padding: 0 40px 0 40px !important; } } /* MEDIUM-LARGE SCREENS - COMPACT 3-COLUMN */ @media (min-width: 1200px) and (max-width: 1399px) { .reddit-main-container { gap: 40px !important; padding: 20px 20px !important; } .reddit-sidebar-left { width: 240px !important; } .reddit-sidebar-right { width: 260px !important; } .reddit-main-content { padding: 0 30px 0 30px !important; min-width: 350px !important; } } /* MEDIUM SCREENS - STILL 3-COLUMN BUT TIGHT */ @media (min-width: 1024px) and (max-width: 1199px) { .reddit-main-container { gap: 30px !important; padding: 20px 15px !important; } .reddit-sidebar-left { width: 220px !important; } .reddit-sidebar-right { width: 240px !important; } .reddit-main-content { padding: 0 20px 0 20px !important; min-width: 320px !important; } /* Hide less important sidebar content */ .reddit-resources-section { display: none !important; } } /* SMALL-MEDIUM SCREENS - HIDE RIGHT SIDEBAR */ @media (min-width: 961px) and (max-width: 1023px) { .reddit-main-container { gap: 20px !important; padding: 20px 10px !important; } .reddit-sidebar-left { width: 200px !important; } /* HIDE RIGHT SIDEBAR TO PREVENT HORIZONTAL SCROLL */ .reddit-sidebar-right { display: none !important; } .reddit-main-content { padding: 0 20px 0 20px !important; min-width: 300px !important; max-width: none !important; flex: 1 !important; } /* Hide resources section in left sidebar too */ .reddit-resources-section { display: none !important; } } /* MOBILE SCREENS - SINGLE COLUMN WITH HAMBURGER */ @media (max-width: 960px) { /* FORCE HIDE BOTH SIDEBARS IN MAIN LAYOUT - NUCLEAR APPROACH */ body .reddit-sidebar-left, html .reddit-sidebar-left, #page-container .reddit-sidebar-left, #et-main-area .reddit-sidebar-left, .et_pb_section .reddit-sidebar-left, .et_pb_row .reddit-sidebar-left, .et_pb_column .reddit-sidebar-left, .et_pb_text .reddit-sidebar-left, .et_pb_text_inner .reddit-sidebar-left, body.et_divi_theme .reddit-sidebar-left, body .reddit-sidebar-right, html .reddit-sidebar-right, #page-container .reddit-sidebar-right, #et-main-area .reddit-sidebar-right, .et_pb_section .reddit-sidebar-right, .et_pb_row .reddit-sidebar-right, .et_pb_column .reddit-sidebar-right, .et_pb_text .reddit-sidebar-right, .et_pb_text_inner .reddit-sidebar-right, body.et_divi_theme .reddit-sidebar-right { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; opacity: 0 !important; position: absolute !important; left: -9999px !important; } /* MOBILE hamburger menu styling - FORCE SHOW */ body .mobile-hamburger-menu, html .mobile-hamburger-menu, #page-container .mobile-hamburger-menu, #et-main-area .mobile-hamburger-menu, .et_pb_section .mobile-hamburger-menu, .et_pb_row .mobile-hamburger-menu, .et_pb_column .mobile-hamburger-menu, .et_pb_text .mobile-hamburger-menu, .et_pb_text_inner .mobile-hamburger-menu, body.et_divi_theme .mobile-hamburger-menu { display: block !important; visibility: visible !important; position: static !important; background: #f8f9fa !important; border: 1px solid #ddd !important; border-radius: 4px !important; padding: 12px !important; cursor: pointer !important; width: 100% !important; margin-bottom: 16px !important; text-align: right !important; opacity: 1 !important; order: 1 !important; } /* HAMBURGER ICON - FORCE SHOW */ body .hamburger-icon, html .hamburger-icon, .et_pb_section .hamburger-icon, .et_pb_text .hamburger-icon { display: inline-block !important; visibility: visible !important; width: 24px !important; height: 18px !important; position: relative !important; float: right !important; opacity: 1 !important; } /* HAMBURGER LINES */ body .hamburger-icon span, html .hamburger-icon span, .et_pb_section .hamburger-icon span, .et_pb_text .hamburger-icon span { display: block !important; visibility: visible !important; height: 2px !important; width: 100% !important; background: #1c1c1c !important; border-radius: 1px !important; margin-bottom: 4px !important; transition: all 0.3s ease !important; opacity: 1 !important; } body .hamburger-icon span:last-child, html .hamburger-icon span:last-child, .et_pb_section .hamburger-icon span:last-child, .et_pb_text .hamburger-icon span:last-child { margin-bottom: 0 !important; } /* FORCE MOBILE CONTAINER LAYOUT */ body .reddit-main-container, html .reddit-main-container, #page-container .reddit-main-container, #et-main-area .reddit-main-container, .et_pb_section .reddit-main-container, .et_pb_row .reddit-main-container, .et_pb_column .reddit-main-container, .et_pb_text .reddit-main-container, .et_pb_text_inner .reddit-main-container, body.et_divi_theme .reddit-main-container { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; padding: 16px !important; gap: 0 !important; background: #ffffff !important; /* ENSURE NO HORIZONTAL SCROLL ON MOBILE */ overflow-x: hidden !important; /* NO VIEWPORT BREAKING ON MOBILE */ position: static !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* FORCE MOBILE CENTER CONTENT TO BE ONLY VISIBLE ELEMENT */ body .reddit-main-content, html .reddit-main-content, #page-container .reddit-main-content, #et-main-area .reddit-main-content, .et_pb_section .reddit-main-content, .et_pb_row .reddit-main-content, .et_pb_column .reddit-main-content, .et_pb_text .reddit-main-content, .et_pb_text_inner .reddit-main-content, body.et_divi_theme .reddit-main-content { width: 100% !important; max-width: 100% !important; flex: 1 !important; order: 2 !important; padding: 0 !important; margin: 0 !important; min-width: auto !important; display: block !important; visibility: visible !important; opacity: 1 !important; } /* FORCE REMOVE SPACER ON MOBILE */ body .reddit-main-container::after, html .reddit-main-container::after, .et_pb_section .reddit-main-container::after, .et_pb_row .reddit-main-container::after, .et_pb_column .reddit-main-container::after, .et_pb_text .reddit-main-container::after, .et_pb_text_inner .reddit-main-container::after, body.et_divi_theme .reddit-main-container::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; flex: none !important; } .reddit-private-messaging { margin-top: 16px !important; /* NORMAL spacing - same as other sections */ } .reddit-quick-actions { margin-bottom: 16px !important; /* NORMAL spacing */ } /* Remove the minimum heights on mobile */ .reddit-sidebar-right { min-height: auto !important; } .reddit-right-sidebar-content { min-height: auto !important; } } /* EXTRA SMALL MOBILE - COMPACT BUT STILL HORIZONTAL */ @media (max-width: 600px) { .reddit-main-container { padding: 12px !important; } .mobile-sidebar-content { width: 280px !important; } .bbp-activity-item { gap: 8px !important; padding: 12px 0 !important; display: flex !important; flex-direction: row !important; /* Ensure horizontal layout */ } .bbp-activity-voting-section { width: 40px !important; min-width: 40px !important; order: 1 !important; } .bbp-activity-content { flex: 1 !important; order: 2 !important; } .bbp-activity-topic-title { font-size: 15px !important; } .bbp-activity-voting-section .bbp-voting .vote { width: 28px !important; height: 28px !important; padding: 4px !important; } .bbp-activity-voting-section .bbp-voting .vote.up::before, .bbp-activity-voting-section .bbp-voting .vote.down::before { width: 14px !important; height: 14px !important; } .bbp-activity-voting-section .bbp-voting .score { font-size: 11px !important; } } /* ========================================== MOBILE HAMBURGER MENU & SIDEBAR OVERLAY ========================================== */ /* MOBILE SIDEBAR OVERLAY - FULL SCREEN DARK BACKGROUND */ .mobile-sidebar-overlay { display: none !important; /* Hidden by default */ position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0,0,0,0.5) !important; z-index: 9999 !important; /* Very high z-index */ } /* WHEN OVERLAY IS ACTIVE (JavaScript adds this class) */ .mobile-sidebar-overlay.active { display: block !important; } /* MOBILE SIDEBAR CONTENT - SLIDES IN FROM LEFT */ .mobile-sidebar-content { position: fixed !important; top: 0 !important; left: -100% !important; /* Start off-screen */ width: 320px !important; /* Wide enough for content */ height: 100vh !important; background: #ffffff !important; z-index: 10000 !important; /* Higher than overlay */ overflow-y: auto !important; /* Scrollable if content is tall */ padding: 60px 20px 20px 20px !important; /* Top padding for close button */ transition: left 0.3s ease !important; /* Smooth slide animation */ box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important; box-sizing: border-box !important; } /* WHEN SIDEBAR IS ACTIVE (JavaScript adds this class) */ .mobile-sidebar-content.active { left: 0 !important; /* Slide into view */ } /* MOBILE CLOSE BUTTON - TOP RIGHT */ .mobile-close-btn { position: absolute !important; top: 15px !important; right: 15px !important; background: none !important; border: none !important; font-size: 28px !important; cursor: pointer !important; color: #666 !important; padding: 5px !important; line-height: 1 !important; width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .mobile-close-btn:hover { color: #000 !important; background: #f0f0f0 !important; border-radius: 50% !important; } /* MOBILE SIDEBAR SECTIONS - LEFT AND RIGHT CONTENT */ .mobile-sidebar-section { margin-bottom: 40px !important; border: none !important; background: transparent !important; } .mobile-sidebar-section:last-child { margin-bottom: 20px !important; } /* MOBILE SECTION TITLES */ .mobile-section-title { font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; color: #0079d3 !important; /* Reddit blue */ margin: 0 0 20px 0 !important; padding: 0 0 10px 0 !important; border-bottom: 2px solid #0079d3 !important; /* Blue underline */ letter-spacing: 0.5px !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } /* ENSURE MOBILE SIDEBAR CONTENT INHERITS STYLES */ /* Left sidebar content inside mobile overlay */ .mobile-sidebar-content .reddit-left-sidebar-content, .mobile-sidebar-content .reddit-nav-section, .mobile-sidebar-content .reddit-forums-section, .mobile-sidebar-content .reddit-resources-section { background: transparent !important; border: none !important; margin-bottom: 20px !important; padding: 0 !important; } /* Right sidebar content inside mobile overlay */ .mobile-sidebar-content .reddit-right-sidebar-content, .mobile-sidebar-content .reddit-quick-actions, .mobile-sidebar-content .reddit-private-messaging { background: #f8f9fa !important; /* Light background for right sidebar content */ border: 1px solid #e1e5e9 !important; border-radius: 8px !important; margin-bottom: 20px !important; padding: 16px !important; } /* Navigation links in mobile sidebar */ .mobile-sidebar-content .reddit-nav-link, .mobile-sidebar-content .reddit-forum-link, .mobile-sidebar-content .action-link { padding: 12px 16px !important; /* Bigger touch targets */ margin-bottom: 2px !important; border-radius: 6px !important; font-size: 16px !important; /* Larger text for mobile */ display: flex !important; align-items: center !important; } .mobile-sidebar-content .reddit-nav-link:hover, .mobile-sidebar-content .reddit-forum-link:hover, .mobile-sidebar-content .action-link:hover { background-color: rgba(0,121,211,0.1) !important; /* Light blue hover */ } /* Icons in mobile sidebar */ .mobile-sidebar-content .nav-icon, .mobile-sidebar-content .forum-icon, .mobile-sidebar-content .action-link-icon { margin-right: 16px !important; font-size: 20px !important; width: 24px !important; height: 24px !important; } /* Mobile sidebar responsive */ @media (max-width: 480px) { .mobile-sidebar-content { width: 280px !important; /* Narrower on very small screens */ padding: 50px 16px 16px 16px !important; } .mobile-sidebar-content .reddit-nav-link, .mobile-sidebar-content .reddit-forum-link, .mobile-sidebar-content .action-link { padding: 10px 12px !important; font-size: 15px !important; } } /* JavaScript Toggle Classes */ .hamburger-icon.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger-icon.active span:nth-child(2) { opacity: 0; } .hamburger-icon.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } /* ========================================== NUCLEAR OPTION - REMOVE ALL UNWANTED BORDERS ========================================== */ .reddit-left-sidebar-content { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .reddit-left-sidebar-content, .reddit-left-sidebar-content *, .reddit-left-sidebar-content li, .reddit-left-sidebar-content ul, .reddit-left-sidebar-content div, .reddit-left-sidebar-content a, .reddit-left-sidebar-content span, .reddit-left-sidebar-content h3, .reddit-left-sidebar-content h4, .reddit-left-sidebar-content p { border: none !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; } .reddit-left-sidebar-content *::before, .reddit-left-sidebar-content *::after, .reddit-left-sidebar-content li::before, .reddit-left-sidebar-content li::after { border: none !important; content: none !important; display: none !important; background: none !important; box-shadow: none !important; } .reddit-left-sidebar-content .bbp-forum-info, .reddit-left-sidebar-content .bbp-forum-content, .reddit-left-sidebar-content .bbp-forum-title, .reddit-left-sidebar-content .bbp-topic-title, .reddit-left-sidebar-content .forum-content, .reddit-left-sidebar-content .forum-title, .reddit-left-sidebar-content .forum-meta, .reddit-left-sidebar-content .widget, .reddit-left-sidebar-content .widget-content, .reddit-left-sidebar-content .sidebar-widget { border: none !important; background: transparent !important; box-shadow: none !important; } body .et_pb_text .reddit-left-sidebar-content li, body .reddit-left-sidebar-content .reddit-nav-item, body .reddit-left-sidebar-content .reddit-forum-item, body .reddit-left-sidebar-content .resource-item, .et_pb_module .reddit-left-sidebar-content li, .et_pb_section .reddit-left-sidebar-content li { border: none !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; background: transparent !important; box-shadow: none !important; outline: none !important; margin: 0 !important; padding: 0 !important; } body .reddit-left-sidebar-content, html .reddit-left-sidebar-content, .et_pb_section .reddit-left-sidebar-content, .et_pb_row .reddit-left-sidebar-content, .et_pb_column .reddit-left-sidebar-content, .et_pb_text .reddit-left-sidebar-content { border: none !important; background: transparent !important; box-shadow: none !important; } body .reddit-left-sidebar-content *, html .reddit-left-sidebar-content *, .et_pb_section .reddit-left-sidebar-content *, .et_pb_row .reddit-left-sidebar-content *, .et_pb_column .reddit-left-sidebar-content *, .et_pb_text .reddit-left-sidebar-content * { border: none !important; background: transparent !important; box-shadow: none !important; } /* ========================================== LEFT SIDEBAR - EXACT REDDIT DESIGN ========================================== */ .reddit-nav-section, .reddit-forums-section, .reddit-resources-section { max-height: none !important; overflow: visible !important; height: auto !important; } .reddit-nav-section { background: transparent !important; border: none !important; padding: 12px 0 16px 0 !important; margin: 0 !important; } .reddit-forums-section { background: transparent !important; border-top:0px !important; border: 1px solid #e1e5e9 !important; padding: 12px !important; margin: 0 !important; } .reddit-resources-section { background: transparent !important; border-top:0px !important; border: 1px solid #e1e5e9 !important; padding: 12px !important; margin: 0 !important; } body .reddit-forums-section, html .reddit-forums-section, .et_pb_text .reddit-forums-section { border-top: 0px solid #e6e6e6 !important; border-bottom: none !important; border-left: none !important; border-right: none !important; } body .reddit-resources-section, html .reddit-resources-section, .et_pb_text .reddit-resources-section { border-top: 1px solid #e6e6e6 !important; border-bottom: none !important; border-left: none !important; border-right: none !important; margin-bottom: 0 !important; } .reddit-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #878a8c; margin: 0 0 12px 0; padding: 0 12px 0 12px; letter-spacing: 0.5px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; border: none !important; background: transparent !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reddit-forums-section, .reddit-forums-section *, .reddit-forums-content, .reddit-forums-list, .reddit-forums-list *, body .reddit-forums-section, html .reddit-forums-section, .et_pb_text .reddit-forums-section, .et_pb_text .reddit-forums-content, .et_pb_text .reddit-forums-list { max-height: none !important; overflow: visible !important; height: auto !important; overflow-y: visible !important; overflow-x: visible !important; } .reddit-nav-menu ul, .reddit-forums-list, .reddit-nav-menu, .reddit-forums-content, .reddit-resources-content { list-style: none !important; margin: 0 !important; padding: 0 !important; border: none !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; box-shadow: none !important; background: transparent !important; } .reddit-nav-item, .reddit-forum-item, .reddit-nav-item li, .reddit-forum-item li, .reddit-forums-list li, .reddit-nav-menu li { margin: 0 !important; padding: 0 !important; border: none !important; border-bottom: none !important; border-top: none !important; border-left: none !important; border-right: none !important; box-shadow: none !important; background: transparent !important; } .reddit-nav-item::before, .reddit-nav-item::after, .reddit-forum-item::before, .reddit-forum-item::after, .reddit-nav-menu li::before, .reddit-nav-menu li::after, .reddit-forums-list li::before, .reddit-forums-list li::after { display: none !important; border: none !important; content: none !important; background: none !important; box-shadow: none !important; } .reddit-nav-section *, .reddit-forums-section *, .reddit-nav-section li, .reddit-forums-section li { border: none !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; box-shadow: none !important; } .reddit-nav-link, .reddit-forum-link { border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important; display: block !important; padding: 8px 12px !important; margin: 0 !important; text-decoration: none !important; transition: background-color 0.1s ease !important; color: #1c1c1c; font-size: 14px; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; height: auto !important; min-height: auto !important; } .reddit-nav-link:hover, .reddit-forum-link:hover { background-color: rgba(0,0,0,0.04) !important; border: none !important; box-shadow: none !important; text-decoration: none; } .reddit-nav-link .nav-icon { margin-right: 12px; font-size: 20px; width: 20px; display: inline-block; color: #878a8c; } .forum-info { display: flex; align-items: center; } .forum-icon { margin-right: 12px; font-size: 20px; width: 20px; height: 20px; display: inline-block; border-radius: 50%; background: #0079d3; color: white; text-align: center; line-height: 20px; font-size: 12px; } .forum-details { flex: 1; } .forum-name { font-size: 14px; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1c1c1c; display: block; margin-bottom: 2px; } .reddit-prefix { color: #878a8c; } .forum-meta { font-size: 12px; color: #878a8c; display: block; } .reddit-forums-footer { padding: 8px 12px; border: none !important; } .view-all-link { color: #0079d3; font-size: 12px; font-weight: 700; text-decoration: none; border: none !important; } .view-all-link:hover { text-decoration: underline; } .reddit-resources-content { border: none !important; background: transparent !important; } .resource-category { margin-bottom: 12px; border: none !important; background: transparent !important; } .resource-category:last-child { margin-bottom: 0; } .resource-category-title { font-size: 14px; font-weight: 500; color: #1c1c1c; margin: 0 0 6px 0; padding: 8px 12px; display: flex; align-items: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; border: none !important; background: transparent !important; } .resource-category-title:hover { background-color: rgba(0,0,0,0.04) !important; cursor: pointer; border: none !important; } .resource-icon { margin-right: 12px; font-size: 18px; width: 20px; display: inline-block; color: #878a8c; } .resource-list { list-style: none; margin: 0; padding: 0; border: none !important; } .resource-item { margin: 0; border: none !important; background: transparent !important; } .resource-link { display: block; padding: 6px 12px 6px 44px; color: #878a8c; font-size: 12px; font-style: italic; border: none !important; background: transparent !important; } .reddit-left-sidebar-content ul.bbp-forums-list, .reddit-left-sidebar-content ul.bbp-topics-list, .reddit-left-sidebar-content .bbp-forum-content ul, .reddit-left-sidebar-content .widget ul, .reddit-left-sidebar-content .sidebar ul { border: none !important; background: transparent !important; box-shadow: none !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } .et_pb_text .reddit-left-sidebar-content ul, .et_pb_text .reddit-left-sidebar-content li, .et_pb_module .reddit-left-sidebar-content ul, .et_pb_module .reddit-left-sidebar-content li { border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important; } .reddit-left-sidebar-content, .reddit-nav-section, .reddit-forums-section, .reddit-resources-section { overflow: visible !important; max-height: none !important; height: auto !important; } .reddit-sub-menu { list-style: none !important; margin: 0 !important; padding: 0 !important; padding-left: 24px !important; border: none !important; background: transparent !important; } .reddit-sub-menu .reddit-nav-item { margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; } .reddit-sub-menu .reddit-nav-link { padding: 6px 12px !important; font-size: 13px !important; color: #7c7c7c !important; font-weight: 400 !important; margin-left: 12px !important; border-left: 2px solid #e6e6e6 !important; } .reddit-sub-menu .reddit-nav-link:hover { color: #1c1c1c !important; background-color: rgba(0,0,0,0.04) !important; border-left-color: #0079d3 !important; } .reddit-sub-menu .nav-icon { font-size: 14px !important; margin-right: 8px !important; } .reddit-nav-menu .menu-item[class*="bbp-"], .reddit-nav-menu .menu-item[class*="forum"], .reddit-nav-menu .menu-item[class*="topic"], .reddit-nav-menu .menu-item[class*="reply"] { display: none !important; } .reddit-nav-menu li:empty, .reddit-nav-menu li:contains("bbp"), .reddit-nav-menu li:contains("Press") { display: none !important; } /* ========================================== CENTER COLUMN STYLING - CLEAN REDDIT DESIGN ========================================== */ .reddit-feed-container { max-width: none !important; margin: 0; width: 100%; } .reddit-feed-header { display: none !important; } .reddit-activity-container { background: transparent; border: none; border-radius: 0; } .bbp-activity-feed { background: #ffffff !important; color: #1c1c1c; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; border-radius: 0; overflow: visible; max-width: none; margin: 0; width: 100%; } .bbp-activity-list { list-style: none; padding: 0; margin: 0; background: #ffffff !important; } .bbp-activity-item { background: #ffffff !important; border: none !important; border-bottom: 1px solid #e2e8f0 !important; border-radius: 0 !important; margin-bottom: 0 !important; padding: 20px 0 !important; transition: none; position: relative; display: flex; overflow: visible; box-shadow: none !important; align-items: flex-start; gap: 15px; } .bbp-activity-item:not(:last-child) { border-bottom: 1px solid #e2e8f0 !important; } .bbp-activity-item:last-child { border-bottom: none !important; } .bbp-activity-item *, .bbp-activity-item *:before, .bbp-activity-item *:after { background: transparent !important; color: inherit !important; border: none !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; box-shadow: none !important; } .bbp-activity-item:hover { background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; box-shadow: none !important; } .bbp-activity-voting-section { background: #ffffff !important; width: 50px; padding: 0 8px 0 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border-right: none; min-height: auto; flex-shrink: 0; } .bbp-activity-voting-section .vote { background: none; border: none; color: #878a8c; font-size: 16px; cursor: pointer; padding: 2px; border-radius: 2px; transition: all 0.2s ease; text-decoration: none; line-height: 1; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .bbp-activity-voting-section .vote.up:hover { color: #ff4500; background: none; } .bbp-activity-voting-section .vote.up::before { content: "▲"; font-size: 14px; font-weight: bold; } .bbp-activity-voting-section .vote.down:hover { color: #7193ff; background: none; } .bbp-activity-voting-section .vote.down::before { content: "▼"; font-size: 14px; font-weight: bold; } .bbp-activity-voting-section .score { font-size: 12px; font-weight: 700; color: #878a8c; margin: 2px 0; text-align: center; line-height: 1; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .bbp-activity-content { flex: 1; min-width: 0; /* Prevents flex item from overflowing */ padding: 0 16px 0 8px !important; background: #ffffff !important; color: #1c1c1c !important; width: 92%; } .bbp-activity-header { margin-bottom: 8px !important; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; color: #7c7c7c !important; line-height: 1.2; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .bbp-activity-header span:not(:last-child)::after { content: " • "; color: #7c7c7c !important; margin-left: 4px; } .bbp-activity-author::after, .bbp-activity-in-forum::after { content: ""; margin: 0; } .bbp-activity-author { color: #1c1c1c !important; text-decoration: none; font-weight: 500; font-size: 12px; } .bbp-activity-author:hover { text-decoration: underline; color: #0079d3 !important; } .bbp-activity-in-forum { color: #7c7c7c; font-size: 12px; } .bbp-activity-in-forum a { color: #7c7c7c; text-decoration: none; font-weight: 400; font-size: 12px; } .bbp-activity-in-forum a:hover { text-decoration: underline; color: #0079d3; } .bbp-activity-in-forum a::before { content: ""; /* Remove the r/ prefix */ color: #7c7c7c; } .activity-time { color: #7c7c7c; font-size: 12px; } .bbp-activity-topic-title, .bbp-activity-item .bbp-activity-topic-title, .bbp-activity-content .bbp-activity-topic-title, a.bbp-activity-topic-title, .bbp-activity-feed .bbp-activity-topic-title { color: #000000 !important; text-decoration: none !important; font-weight: 700 !important; font-size: 18px !important; line-height: 1.3 !important; display: block !important; margin: 6px 0 10px 0 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } .bbp-activity-topic-title:hover, .bbp-activity-item .bbp-activity-topic-title:hover, .bbp-activity-content .bbp-activity-topic-title:hover, a.bbp-activity-topic-title:hover, .bbp-activity-feed .bbp-activity-topic-title:hover { color: #0079d3 !important; text-decoration: none !important; } .bbp-activity-excerpt { color: #1c1c1c !important; font-size: 14px; line-height: 1.4; margin-bottom: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; max-height: none !important; overflow: visible !important; background: transparent !important; border: none !important; box-shadow: none !important; } .bbp-activity-excerpt *, .bbp-activity-excerpt::before, .bbp-activity-excerpt::after, .bbp-activity-excerpt img, .bbp-activity-excerpt video, .bbp-activity-excerpt iframe, .bbp-activity-excerpt embed, .bbp-activity-excerpt object, .bbp-activity-excerpt hr, .bbp-activity-excerpt div, .bbp-activity-excerpt span { background: transparent !important; color: #1c1c1c !important; border: none !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; box-shadow: none !important; display: none !important; } .bbp-activity-excerpt p { background: transparent !important; color: #1c1c1c !important; font-size: 14px !important; line-height: 1.4 !important; margin: 0 !important; padding: 0 !important; display: block !important; border: none !important; box-shadow: none !important; } .bbp-activity-item hr, .bbp-activity-item .divider, .bbp-activity-item .separator, .bbp-activity-content hr, .bbp-activity-content .divider, .bbp-activity-content .separator { display: none !important; border: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } .reddit-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 0; border-top: none; } .reddit-action-btn { background: none; border: none; color: #878a8c; font-size: 12px; cursor: pointer; padding: 4px 6px; border-radius: 2px; text-decoration: none; font-weight: 700; display: flex; align-items: center; gap: 4px; transition: all 0.2s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .reddit-action-btn:hover { color: #1c1c1c; background: #f6f7f8; text-decoration: none; } .reply-btn::before { content: "💬"; font-size: 12px; } .share-btn::before { content: "📤"; font-size: 12px; } .award-btn::before { content: "🏆"; font-size: 12px; } /* ========================================== RIGHT SIDEBAR STYLING - EXACT REDDIT MATCH ========================================== */ .reddit-right-sidebar-content { padding: 0 !important; } .reddit-user-widget, .reddit-login-widget { border: 1px solid #e1e5e9 !important; border-radius: 4px !important; margin-bottom: 16px !important; background: #ffffff !important; overflow: hidden; } .reddit-quick-actions { border: 1px solid #e1e5e9 !important; border-radius: 4px !important; margin-bottom: 16px !important; margin-top: 0px !important; background: #ffffff !important; padding: 12px; } .reddit-community-info { border: 1px solid #e1e5e9 !important; border-radius: 4px !important; margin-top: 16px !important; background: #ffffff !important; padding: 12px; } .reddit-user-banner, .login-banner { background: #0079d3; color: white; padding: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .reddit-user-profile { padding: 12px; } .user-avatar-section { text-align: center; margin-bottom: 12px; } .user-avatar-section img { border-radius: 50%; border: 2px solid #0079d3; } .user-info-section { text-align: center; } .user-display-name { font-size: 16px; font-weight: 700; color: #1c1c1c; margin: 0 0 4px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .user-username { font-size: 12px; color: #878a8c; margin: 0 0 12px 0; } .user-stats { display: flex; justify-content: space-around; text-align: center; } .user-stat { display: flex; flex-direction: column; } .stat-number { font-size: 16px; font-weight: 700; color: #1c1c1c; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .stat-label { font-size: 12px; color: #878a8c; text-transform: uppercase; } .login-actions { padding: 12px; display: flex; gap: 8px; } .reddit-login-btn, .reddit-register-btn { flex: 1; padding: 8px 16px; border-radius: 20px; text-decoration: none; font-size: 14px; font-weight: 700; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .reddit-login-btn { background: #0079d3; color: white; border: 1px solid #0079d3; } .reddit-register-btn { background: transparent; color: #0079d3; border: 1px solid #0079d3; } .reddit-login-btn:hover, .reddit-register-btn:hover { text-decoration: none; opacity: 0.8; } .reddit-quick-actions .reddit-actions-list { padding: 0; } .actions-group { margin-bottom: 20px; } .actions-group:last-child { margin-bottom: 0; } .actions-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #878a8c; margin: 0 0 8px 0; padding: 0 12px; letter-spacing: 0.5px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .actions-links { list-style: none !important; margin: 0; padding: 0px !important; } .action-link-item { margin: 0; border: none !important; } .action-link { display: flex; align-items: center; padding: 10px 12px; color: #1c1c1c; text-decoration: none; transition: background-color 0.1s ease; border-radius: 4px; margin-bottom: 2px; } .action-link:hover { background-color: rgba(0,0,0,0.04); text-decoration: none; color: #1c1c1c; } .action-link-icon { font-size: 18px; width: 20px; height: 20px; margin-right: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .action-link-content { flex: 1; min-width: 0; } .action-link-title { font-size: 14px; font-weight: 500; color: #1c1c1c; display: block; margin-bottom: 2px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.3; } .action-link-desc { font-size: 12px; color: #7c7c7c; display: block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.2; } .reddit-private-messaging { background: #ffffff !important; border: 1px solid #e1e5e9 !important; border-radius: 4px !important; margin-bottom: 16px !important; padding: 12px !important; /* CREATE LARGE GAP - Like shown in client's image - DESKTOP ONLY */ margin-top: 0px !important; /* Large spacing to create significant gap */ } .reddit-private-messaging .reddit-section-title { padding: 0 0 8px 0; border-bottom: 1px solid #edeff1; margin-bottom: 12px; } .messaging-widget { padding: 0; } .messaging-stats { display: flex; justify-content: space-around; margin-bottom: 12px; padding: 8px 0; border-bottom: 1px solid #edeff1; } .message-stat { display: flex; flex-direction: column; align-items: center; text-align: center; } .message-stat .stat-number { font-size: 18px; font-weight: 700; color: #1c1c1c; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .message-stat .stat-label { font-size: 12px; color: #878a8c; text-transform: capitalize; } .messaging-actions { display: flex; flex-direction: column; gap: 4px; } .messaging-link { display: flex; align-items: center; padding: 8px 12px; color: #1c1c1c; text-decoration: none; transition: background-color 0.1s ease; border-radius: 4px; } .messaging-link:hover { background-color: rgba(0,0,0,0.04); text-decoration: none; color: #1c1c1c; } .messaging-icon { font-size: 16px; margin-right: 8px; width: 20px; display: inline-block; } .messaging-text { font-size: 14px; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .messaging-placeholder, .messaging-login-prompt { text-align: center; padding: 16px 12px; } .placeholder-content, .login-prompt-content { display: flex; flex-direction: column; align-items: center; gap: 8px; } .placeholder-icon, .prompt-icon { font-size: 32px; margin-bottom: 4px; } .placeholder-title, .prompt-title { font-size: 16px; font-weight: 600; color: #1c1c1c; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .placeholder-desc, .prompt-desc { font-size: 12px; color: #7c7c7c; margin: 0; line-height: 1.3; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .placeholder-btn, .prompt-btn { display: inline-block; padding: 6px 16px; background: #0079d3; color: #ffffff; text-decoration: none; border-radius: 20px; font-size: 12px; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; transition: background-color 0.2s ease; margin-top: 4px; } .placeholder-btn:hover, .prompt-btn:hover { background: #0066b3; text-decoration: none; color: #ffffff; } .reddit-community-info .reddit-section-title { padding: 0 0 8px 0; border-bottom: 1px solid #edeff1; margin-bottom: 12px; } .community-stats { display: flex; justify-content: space-around; text-align: center; margin-bottom: 12px; } .community-stat { display: flex; flex-direction: column; } .community-stat .stat-number { font-size: 18px; font-weight: 700; color: #1c1c1c; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .community-stat .stat-label { font-size: 12px; color: #878a8c; text-transform: capitalize; } .community-description { font-size: 12px; color: #7c7c7c; text-align: center; font-style: italic; } /* ========================================== REDDIT-STYLE SUBREDDIT HEADER ========================================== */ .reddit-subreddit-header { background: #ffffff !important; border-bottom: 1px solid #e6e6e6 !important; margin-bottom: 0 !important; position: relative !important; overflow: visible !important; padding-bottom: 0 !important; min-height: 200px !important; } /* EXPANDED BLUE BACKGROUND - Much taller to cover all content */ .reddit-header-background { height: 200px !important; background: #0F3E86 !important; width: 100% !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; } /* ADJUSTED HEADER CONTENT POSITIONING - VERTICALLY CENTERED */ .reddit-header-content { padding: 20px 20px 20px 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; position: relative !important; margin-top: 0 !important; min-height: 200px !important; z-index: 10 !important; } .reddit-header-info { display: flex !important; align-items: center !important; gap: 16px !important; margin-bottom: 0 !important; z-index: 2 !important; } /* PROFILE ICON POSITIONING - Keep same but ensure it's visible */ .reddit-subreddit-icon { width: 80px !important; height: 80px !important; border-radius: 50% !important; border: 4px solid #ffffff !important; overflow: hidden !important; background: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; position: relative !important; z-index: 3 !important; } .subreddit-avatar { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; } .default-subreddit-icon { font-size: 24px !important; font-weight: 700 !important; color: #0F3E86 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } /* HEADER TEXT - Ensure it's fully visible on blue background */ .reddit-header-details { flex: 1 !important; min-width: 0 !important; padding-bottom: 0 !important; } .reddit-subreddit-name { font-size: 28px !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 0 4px 0 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; line-height: 1.2 !important; text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; } .reddit-subreddit-description { font-size: 14px !important; color: #ffffff !important; margin: 0 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; line-height: 1.3 !important; opacity: 0.9 !important; } /* HEADER ACTIONS - Ensure buttons are properly positioned */ .reddit-header-actions { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; padding-bottom: 0 !important; } .reddit-header-btn { padding: 6px 16px !important; border-radius: 20px !important; font-size: 14px !important; font-weight: 600 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; cursor: pointer !important; border: 1px solid !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; transition: all 0.2s ease !important; white-space: nowrap !important; } .reddit-primary-btn { background: #ffffff !important; color: #0F3E86 !important; border-color: #ffffff !important; } .reddit-primary-btn:hover { background: #f0f0f0 !important; border-color: #f0f0f0 !important; color: #0F3E86 !important; } .reddit-secondary-btn { background: transparent !important; color: #ffffff !important; border-color: #ffffff !important; } .reddit-secondary-btn:hover { background: rgba(255,255,255,0.1) !important; color: #ffffff !important; } .reddit-icon-btn { width: 32px; height: 32px; padding: 0; border-radius: 50%; background: transparent; color: #7c7c7c; border-color: #e6e6e6; display: flex; align-items: center; justify-content: center; } .reddit-icon-btn:hover { background: #f6f7f8; color: #1c1c1c; } .reddit-filter-bar { background: #ffffff; border-bottom: 1px solid #e6e6e6; padding: 16px 0; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .filter-group { display: flex; gap: 8px; align-items: center; } .filter-btn { display: inline-block; padding: 4px 12px; border: 1px solid #e6e6e6; border-radius: 16px; background: #ffffff; color: #1c1c1c; text-decoration: none; font-size: 13px; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; transition: all 0.2s ease; white-space: nowrap; cursor: pointer; } .filter-btn:hover { background: #f6f7f8; border-color: #ccc; text-decoration: none; color: #1c1c1c; } .filter-btn.active { background: #e6e6e6; color: #1c1c1c; border-color: #ccc; } .filter-btn.active:hover { background: #d6d6d6; border-color: #bbb; color: #1c1c1c; } /* ========================================== FLOATING CHAT WINDOW ========================================== */ /* Floating Chat Bubble */ .floating-chat-bubble { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: #1877f2; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9999; box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s ease; } .floating-chat-bubble:hover { transform: scale(1.1); } .chat-notification-badge { position: absolute; top: -5px; right: -5px; background: #ff4444; color: white; border-radius: 50%; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; } /* Chat Popup */ .floating-chat-popup { position: fixed; bottom: 90px; right: 20px; width: 320px; height: 400px; background: white; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); display: none; flex-direction: column; z-index: 9998; } .floating-chat-popup.active { display: flex; } .chat-popup-header { background: #1877f2; color: white; padding: 12px 15px; border-radius: 12px 12px 0 0; display: flex; justify-content: space-between; align-items: center; } /* ================================================================ BBPRESS VOTING INTEGRATION - SUBTLE PROFESSIONAL THUMBS ================================================================ */ /* BBPress Voting in Activity Feed */ .bbp-activity-voting-section .bbp-voting { display: flex !important; flex-direction: column !important; align-items: center !important; padding: 0 !important; margin: 0 !important; width: 50px !important; background: transparent !important; border: none !important; } /* CLEAN THUMB BUTTONS */ .bbp-activity-voting-section .bbp-voting .vote { background: none !important; border: none !important; color: transparent !important; cursor: pointer !important; padding: 6px !important; margin: 2px 0 !important; text-decoration: none !important; display: block !important; border-radius: 4px !important; transition: all 0.2s ease !important; width: 32px !important; height: 32px !important; position: relative !important; text-align: center !important; } /* THUMBS UP - Subtle Gray */ .bbp-activity-voting-section .bbp-voting .vote.up::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 16px !important; height: 16px !important; background-image: url('data:image/svg+xml;utf8,') !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; opacity: 0.7 !important; } /* THUMBS DOWN - Subtle Gray */ .bbp-activity-voting-section .bbp-voting .vote.down::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) rotate(180deg) !important; width: 16px !important; height: 16px !important; background-image: url('data:image/svg+xml;utf8,') !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; opacity: 0.7 !important; } /* SUBTLE HOVER EFFECTS - Muted Colors */ .bbp-activity-voting-section .bbp-voting .vote.up:hover { background: rgba(96, 125, 139, 0.08) !important; transform: scale(1.05) !important; } .bbp-activity-voting-section .bbp-voting .vote.up:hover::before { background-image: url('data:image/svg+xml;utf8,') !important; opacity: 1 !important; transform: translate(-50%, -50%) scale(1.1) !important; } .bbp-activity-voting-section .bbp-voting .vote.down:hover { background: rgba(120, 144, 156, 0.08) !important; transform: scale(1.05) !important; } .bbp-activity-voting-section .bbp-voting .vote.down:hover::before { background-image: url('data:image/svg+xml;utf8,') !important; opacity: 1 !important; transform: translate(-50%, -50%) rotate(180deg) scale(1.1) !important; } /* SUBTLE VOTED STATES - Elegant Active Colors */ .bbp-activity-voting-section .bbp-voting.voted-up .vote.up { background: rgba(96, 125, 139, 0.12) !important; transform: scale(1.05) !important; } .bbp-activity-voting-section .bbp-voting.voted-up .vote.up::before { background-image: url('data:image/svg+xml;utf8,') !important; opacity: 1 !important; transform: translate(-50%, -50%) scale(1.1) !important; } .bbp-activity-voting-section .bbp-voting.voted-down .vote.down { background: rgba(120, 144, 156, 0.12) !important; transform: scale(1.05) !important; } .bbp-activity-voting-section .bbp-voting.voted-down .vote.down::before { background-image: url('data:image/svg+xml;utf8,') !important; opacity: 1 !important; transform: translate(-50%, -50%) rotate(180deg) scale(1.1) !important; } /* SUBTLE VOTE SCORE */ .bbp-activity-voting-section .bbp-voting .score { font-size: 14px !important; font-weight: 600 !important; color: #5f6368 !important; text-align: center !important; padding: 4px 0 !important; margin: 2px 0 !important; line-height: 1 !important; min-width: 24px !important; background: transparent !important; border: none !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; transition: color 0.2s ease !important; } /* SUBTLE SCORE COLORS */ .bbp-activity-voting-section .bbp-voting.positive .score { color: #546E7A !important; } .bbp-activity-voting-section .bbp-voting.negative .score { color: #78909C !important; } /* HIDE LABELS */ .bbp-activity-voting-section .bbp-voting .bbp-voting-label { display: none !important; } /* VIEW-ONLY */ .bbp-activity-voting-section .bbp-voting.view-only .vote { opacity: 0.3 !important; cursor: not-allowed !important; pointer-events: none !important; } /* NO FLOATING */ .bbp-activity-voting-section .bbp-voting.bbp-voting-float { float: none !important; position: static !important; margin: 0 !important; } /* REMOVE ::after */ .bbp-activity-voting-section .bbp-voting .vote::after { content: none !important; display: none !important; } /* MOBILE VOTING - FIXED LAYOUT TO PREVENT TOP POSITIONING */ @media (max-width: 768px) { /* FORCE HORIZONTAL LAYOUT ON MOBILE */ .bbp-activity-item { display: flex !important; flex-direction: row !important; /* Keep horizontal layout */ align-items: flex-start !important; gap: 12px !important; padding: 15px 0 !important; border-bottom: 1px solid #e2e8f0 !important; } /* MOBILE VOTING SECTION - STAY ON LEFT */ .bbp-activity-voting-section { width: 45px !important; min-width: 45px !important; flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; order: 1 !important; /* Always first */ background: #ffffff !important; padding: 0 !important; margin: 0 !important; position: relative !important; float: none !important; } /* MOBILE VOTING BUTTONS */ .bbp-activity-voting-section .bbp-voting { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; position: static !important; float: none !important; } .bbp-activity-voting-section .bbp-voting .vote { width: 32px !important; height: 32px !important; padding: 6px !important; margin: 2px 0 !important; display: block !important; position: relative !important; background: none !important; border: none !important; border-radius: 4px !important; transition: all 0.2s ease !important; text-align: center !important; cursor: pointer !important; float: none !important; clear: none !important; } /* MOBILE VOTE SCORE */ .bbp-activity-voting-section .bbp-voting .score { font-size: 12px !important; font-weight: 600 !important; color: #5f6368 !important; text-align: center !important; padding: 2px 0 !important; margin: 1px 0 !important; line-height: 1 !important; min-width: 20px !important; background: transparent !important; border: none !important; display: block !important; position: static !important; float: none !important; } /* MOBILE CONTENT AREA - TAKE UP REMAINING SPACE */ .bbp-activity-content { flex: 1 !important; min-width: 0 !important; order: 2 !important; /* Always second */ padding: 0 !important; margin: 0 !important; display: block !important; background: #ffffff !important; color: #1c1c1c !important; position: relative !important; overflow: visible !important; } /* PREVENT ANY FLOATING OR ABSOLUTE POSITIONING */ .bbp-activity-voting-section, .bbp-activity-voting-section *, .bbp-activity-content, .bbp-activity-content * { position: static !important; float: none !important; clear: none !important; } /* OVERRIDE ANY CONFLICTING STYLES */ .bbp-activity-voting-section .bbp-voting.bbp-voting-float { float: none !important; position: static !important; margin: 0 !important; display: flex !important; flex-direction: column !important; } /* FORCE REMOVE ANY MARGINS/PADDING THAT MIGHT CAUSE ISSUES */ .bbp-activity-item > * { margin-top: 0 !important; margin-bottom: 0 !important; } /* ENSURE PROPER STACKING ORDER */ .bbp-activity-voting-section { z-index: 1 !important; } .bbp-activity-content { z-index: 2 !important; } /* FORCE OVERRIDE ANY THEME OR PLUGIN CONFLICTS */ .bbp-activity-list .bbp-activity-item { display: flex !important; flex-direction: row !important; } .bbp-activity-list .bbp-activity-item .bbp-activity-voting-section { order: 1 !important; flex: 0 0 45px !important; } .bbp-activity-list .bbp-activity-item .bbp-activity-content { order: 2 !important; flex: 1 !important; } /* Ensure no other elements interfere */ .bbp-activity-item > div:not(.bbp-activity-voting-section):not(.bbp-activity-content) { order: 3 !important; } } /* ENSURE VISIBILITY */ .egghead-bbpress-voting .bbp-voting { display: flex !important; visibility: visible !important; } /* ================================================================ BOOKMARK BUTTON STYLES ================================================================ */ .reddit-action-btn.bookmark-btn a { color: #878a8c !important; text-decoration: none !important; font-size: 12px !important; font-weight: 700 !important; padding: 4px 6px !important; border-radius: 2px !important; } .reddit-action-btn.bookmark-btn a:hover { color: #1c1c1c !important; background: #f6f7f8 !important; } /* Reddit-Style Bookmark Button */ .reddit-action-btn.bookmark-btn { outline: none !important; -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } .reddit-action-btn.bookmark-btn .bookmark-text { display: flex !important; align-items: center !important; gap: 4px !important; } .reddit-action-btn.bookmark-btn .bookmark-icon { width: 12px !important; height: 12px !important; flex-shrink: 0 !important; transition: all 0.2s ease !important; } /* Not bookmarked state - outline icon */ .reddit-action-btn.bookmark-btn.not-favorited .bookmark-icon { fill: none !important; stroke: #878a8c !important; stroke-width: 2 !important; } .reddit-action-btn.bookmark-btn.not-favorited { color: transparent !important; } .reddit-action-btn.bookmark-btn.not-favorited:hover .bookmark-icon { stroke: #1c1c1c !important; transform: scale(1.1) !important; } .reddit-action-btn.bookmark-btn.not-favorited:hover { color: #1c1c1c !important; } /* Bookmarked state - filled icon */ .reddit-action-btn.bookmark-btn.favorited .bookmark-icon { fill: #0079d3 !important; stroke: #0079d3 !important; stroke-width: 1 !important; } .reddit-action-btn.bookmark-btn.favorited { color: #0079d3 !important; font-weight: 600 !important; } .reddit-action-btn.bookmark-btn.favorited:hover .bookmark-icon { fill: #0066b3 !important; stroke: #0066b3 !important; transform: scale(1.1) !important; } .reddit-action-btn.bookmark-btn.favorited:hover { color: #0066b3 !important; } /* Loading state */ .reddit-action-btn.bookmark-btn[style*="opacity: 0.6"] .bookmark-icon { animation: bookmarkPulse 1s infinite !important; } @keyframes bookmarkPulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } /* ================================================================ FILTER DROPDOWN STYLES - MATCH FILTER BUTTONS EXACTLY ================================================================ */ /* AGGRESSIVE SELECTORS - Override everything */ .reddit-filter-bar .filter-group .filter-dropdown, .reddit-filter-bar .filter-dropdown, .filter-group .filter-dropdown, body .filter-dropdown, html .filter-dropdown, select.filter-dropdown { /* COPY EXACT STYLES FROM YOUR WORKING FILTER BUTTONS */ display: inline-block !important; padding: 4px 12px !important; border: 1px solid #e6e6e6 !important; border-radius: 16px !important; background: #ffffff !important; color: #1c1c1c !important; text-decoration: none !important; font-size: 13px !important; font-weight: 500 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; transition: all 0.2s ease !important; white-space: nowrap !important; cursor: pointer !important; /* REMOVE ALL SELECT STYLING */ appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; /* MATCH BUTTON HEIGHT EXACTLY */ line-height: normal !important; height: auto !important; min-height: auto !important; box-sizing: border-box !important; vertical-align: middle !important; /* DROPDOWN SPECIFIC */ min-width: 120px !important; max-width: 200px !important; /* CUSTOM ARROW - Same color as border */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23e6e6e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important; background-position: right 8px center !important; background-repeat: no-repeat !important; background-size: 16px !important; padding-right: 32px !important; /* FORCE REMOVE ANY INHERITED STYLING */ margin: 0 !important; outline: none !important; box-shadow: none !important; } /* HOVER STATE - Match filter buttons exactly */ .reddit-filter-bar .filter-group .filter-dropdown:hover, .reddit-filter-bar .filter-dropdown:hover, .filter-group .filter-dropdown:hover, body .filter-dropdown:hover, html .filter-dropdown:hover, select.filter-dropdown:hover { background: #f6f7f8 !important; border-color: #ccc !important; color: #1c1c1c !important; text-decoration: none !important; } /* FOCUS STATE */ .reddit-filter-bar .filter-group .filter-dropdown:focus, .reddit-filter-bar .filter-dropdown:focus, .filter-group .filter-dropdown:focus, body .filter-dropdown:focus, html .filter-dropdown:focus, select.filter-dropdown:focus { outline: none !important; border-color: #999 !important; background: #f6f7f8 !important; color: #1c1c1c !important; box-shadow: none !important; } /* DROPDOWN OPTIONS - Force white background */ .filter-dropdown option, select.filter-dropdown option, body .filter-dropdown option, html .filter-dropdown option { background: #ffffff !important; color: #1c1c1c !important; padding: 8px 12px !important; font-size: 13px !important; font-weight: 500 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; border: none !important; line-height: 1.4 !important; } /* SELECTED OPTION */ .filter-dropdown option:checked, .filter-dropdown option[selected], select.filter-dropdown option:checked, select.filter-dropdown option[selected] { background: #e6e6e6 !important; color: #1c1c1c !important; font-weight: 600 !important; } /* REMOVE DEFAULT SELECT ARROWS IN ALL BROWSERS */ .filter-dropdown::-ms-expand, select.filter-dropdown::-ms-expand { display: none !important; } .filter-dropdown::-webkit-inner-spin-button, .filter-dropdown::-webkit-outer-spin-button, select.filter-dropdown::-webkit-inner-spin-button, select.filter-dropdown::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* FIREFOX SPECIFIC */ @-moz-document url-prefix() { .filter-dropdown, select.filter-dropdown { text-indent: 0.01px !important; text-overflow: '' !important; background-position: calc(100% - 8px) center !important; } } /* ALIGNMENT WITH OTHER BUTTONS */ .reddit-filter-bar .filter-group, .filter-bar .filter-group { display: flex !important; gap: 8px !important; align-items: center !important; flex-wrap: wrap !important; } .reddit-filter-bar .filter-group > *, .filter-bar .filter-group > * { flex-shrink: 0 !important; margin: 0 !important; } /* MOBILE FILTER DROPDOWN */ @media (max-width: 768px) { .reddit-filter-bar .filter-group .filter-dropdown, .reddit-filter-bar .filter-dropdown, .filter-group .filter-dropdown, body .filter-dropdown, html .filter-dropdown, select.filter-dropdown { min-width: 100px !important; font-size: 13px !important; padding-right: 28px !important; } } /* ================================================================ HEART BOOKMARK BUTTON STYLES - Replace existing bookmark styles ================================================================ */ /* Heart Bookmark Button Container */ .reddit-action-btn.bookmark-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: none !important; border: none !important; color: transparent !important; /* Hide any text */ font-size: 0 !important; /* Hide any text */ cursor: pointer !important; padding: 4px 6px !important; /* Match other action buttons */ border-radius: 2px !important; /* Match other action buttons */ text-decoration: none !important; transition: all 0.2s ease !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; vertical-align: baseline !important; /* Align with other buttons */ line-height: 1 !important; /* Match other buttons line height */ height: auto !important; /* Let it match other button heights */ min-height: auto !important; /* Remove fixed height */ } /* Heart Icon Container */ .reddit-action-btn.bookmark-btn .heart-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; transition: transform 0.2s ease !important; vertical-align: middle !important; /* Align with text baseline */ margin: 0 !important; padding: 0 !important; } /* Heart Icon SVG */ .reddit-action-btn.bookmark-btn .heart-icon svg { width: 17px !important; /* Match the size of other action button icons */ height: 17px !important; flex-shrink: 0 !important; transition: all 0.3s ease !important; vertical-align: baseline !important; /* Align with text baseline */ display: inline-block !important; } /* Not favorited state - Gray outline heart */ .reddit-action-btn.bookmark-btn.not-favorited { color: transparent !important; } .reddit-action-btn.bookmark-btn.not-favorited .heart-icon svg { fill: none !important; stroke: #878a8c !important; stroke-width: 2 !important; } .reddit-action-btn.bookmark-btn.not-favorited:hover { background: rgba(135, 138, 140, 0.1) !important; border-radius: 6px !important; } .reddit-action-btn.bookmark-btn.not-favorited:hover .heart-icon svg { stroke: #1c1c1c !important; transform: scale(1.1) !important; } /* Favorited state - Red filled heart */ .reddit-action-btn.bookmark-btn.favorited { color: transparent !important; } .reddit-action-btn.bookmark-btn.favorited .heart-icon svg { fill: #FF4458 !important; stroke: none !important; } .reddit-action-btn.bookmark-btn.favorited:hover { background: rgba(255, 68, 88, 0.1) !important; border-radius: 6px !important; } .reddit-action-btn.bookmark-btn.favorited:hover .heart-icon svg { fill: #E53E3E !important; transform: scale(1.1) !important; } /* Loading state animation */ .reddit-action-btn.bookmark-btn .heart-icon .loading-heart { animation: heartPulse 1s infinite !important; } @keyframes heartPulse { 0% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0.6; transform: scale(1); } } /* Heart beat animation on click */ @keyframes heartBeat { 0% { transform: scale(1); } 25% { transform: scale(1.2); } 50% { transform: scale(1.1); } 75% { transform: scale(1.15); } 100% { transform: scale(1); } } .reddit-action-btn.bookmark-btn .heart-icon.beating { animation: heartBeat 0.6s ease-in-out !important; } /* Mobile heart button */ @media (max-width: 768px) { .reddit-action-btn.bookmark-btn { padding: 4px 6px !important; /* Keep same padding as desktop */ } .reddit-action-btn.bookmark-btn .heart-icon svg { width: 16px !important; /* Change from 12px to 16px */ height: 16px !important; /* Change from 12px to 16px */ } } /* Remove all text content from bookmark button */ .reddit-action-btn.bookmark-btn .bookmark-text, .reddit-action-btn.bookmark-btn .bookmark-icon { display: none !important; } /* Ensure no text shows */ .reddit-action-btn.bookmark-btn::before, .reddit-action-btn.bookmark-btn::after { content: none !important; display: none !important; } .reddit-action-btn.bookmark-btn:focus { outline: none !important; box-shadow: none !important; } /* Fix for AJAX loaded voting buttons */ .bbp-activity-list .bbp-voting .vote { visibility: visible !important; display: block !important; opacity: 1 !important; } /* Ensure voting works in AJAX content */ .bbp-activity-item .bbp-voting { display: flex !important; flex-direction: column !important; align-items: center !important; } /* FORCE VOTING BUTTONS TO SHOW IN SEARCH RESULTS */ .bbp-activity-list .bbp-voting, .bbp-activity-list .bbp-voting .vote, .bbp-activity-list .bbp-voting .score { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } .bbp-activity-list .bbp-voting { flex-direction: column !important; align-items: center !important; } .bbp-activity-list .bbp-voting .vote { display: block !important; } /* Ensure AJAX loaded voting has proper styling */ .bbp-activity-voting-section .bbp-voting .vote.up::before, .bbp-activity-voting-section .bbp-voting .vote.down::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 16px !important; height: 16px !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; opacity: 0.7 !important; } .bbp-activity-voting-section .bbp-voting .vote.up::before { transform: translate(-50%, -50%) !important; background-image: url('data:image/svg+xml;utf8,') !important; } .bbp-activity-voting-section .bbp-voting .vote.down::before { transform: translate(-50%, -50%) rotate(180deg) !important; background-image: url('data:image/svg+xml;utf8,') !important; } .reddit-main-content { overflow-wrap: break-word !important; word-wrap: break-word !important; word-break: break-word !important; hyphens: auto !important; overflow-x: hidden !important; } .reddit-main-content * { max-width: 100% !important; overflow-wrap: break-word !important; word-wrap: break-word !important; } .bbp-activity-voting-section .bbp-voting .score, .bbp-activity-voting-section .score { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1 !important; width: 100% !important; margin: 4px 0 !important; padding: 2px 0 !important; } /* Keep main content padding unchanged, just adjust activity positioning */ .reddit-activity-container { margin-right: -20px !important; /* Negative margin to extend content right */ } /* ADD THIS CSS TO THE TOP OF YOUR reddit-activity.css FILE */ /* ================================================================ CRITICAL FIX: FORCE FORUM LIST TO UPDATE VISUALLY AFTER AJAX ================================================================ */ /* FORCE DISPLAY OF UPDATED FORUM ITEMS */ #forums-list, .reddit-forums-list { display: block !important; visibility: visible !important; opacity: 1 !important; position: static !important; height: auto !important; overflow: visible !important; max-height: none !important; background: transparent !important; border: none !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } #forums-list .reddit-forum-item, .reddit-forums-list .reddit-forum-item { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; height: auto !important; transform: none !important; background: transparent !important; border: none !important; margin: 0 !important; padding: 0 !important; order: unset !important; /* Allow natural DOM order */ } /* ENSURE FORUM CONTENT IS ALWAYS VISIBLE */ .reddit-forum-link, .reddit-forum-link * { display: block !important; visibility: visible !important; opacity: 1 !important; } .forum-info { display: flex !important; visibility: visible !important; opacity: 1 !important; } .forum-details { display: block !important; visibility: visible !important; opacity: 1 !important; } .forum-name { display: block !important; visibility: visible !important; opacity: 1 !important; font-weight: bold !important; color: #1a1a1b !important; } .forum-meta { display: block !important; visibility: visible !important; opacity: 1 !important; color: #787c82 !important; font-size: 12px !important; } /* CLEAR ANY POTENTIAL CONFLICTS */ #forums-container, #forums-container * { box-sizing: border-box !important; } /* FORCE REDRAW AFTER AJAX UPDATE - Animation to trigger browser repaint */ @keyframes forceRedraw { 0% { opacity: 0.99; } 100% { opacity: 1; } } .forums-updated { animation: forceRedraw 0.1s; } /* OVERRIDE ANY HEIGHT RESTRICTIONS ON FORUMS SECTION */ .reddit-forums-section, .reddit-forums-section *, .reddit-forums-content, .reddit-forums-list, .reddit-forums-list * { max-height: none !important; overflow: visible !important; height: auto !important; overflow-y: visible !important; overflow-x: visible !important; } /* FORCE VISIBILITY FOR ALL FORUM ELEMENTS */ .reddit-forums-section .reddit-forum-item, .reddit-forums-content .reddit-forum-item, .reddit-forums-list .reddit-forum-item { display: block !important; visibility: visible !important; opacity: 1 !important; position: static !important; transform: none !important; transition: none !important; /* Prevent transition conflicts */ } /* PREVENT ANY CSS ANIMATIONS FROM INTERFERING */ #forums-list *, .reddit-forums-list * { transition: none !important; animation: none !important; } /* FORCE CONTAINER TO REFRESH */ #forums-container.ajax-updated { transform: translateZ(0); /* Force GPU layer */ } /* REMOVE ANY POTENTIAL FLEXBOX ORDERING CONFLICTS */ .reddit-forum-item { order: initial !important; flex-order: initial !important; } /* CRITICAL: Override any theme/plugin interference */ body #forums-list, html #forums-list, .et_pb_section #forums-list, .et_pb_text #forums-list { display: block !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } body #forums-list .reddit-forum-item, html #forums-list .reddit-forum-item, .et_pb_section #forums-list .reddit-forum-item, .et_pb_text #forums-list .reddit-forum-item { display: block !important; visibility: visible !important; opacity: 1 !important; } /*MOBILE Responsiveness changes*/ /* MOBILE SCREENS - VERTICAL STACK LAYOUT */ /* REPLACE YOUR ENTIRE @media (max-width: 960px) SECTION WITH THIS */ @media (max-width: 960px) { /* COMPLETELY HIDE HAMBURGER MENU SYSTEM */ .mobile-hamburger-menu, .mobile-sidebar-overlay, .mobile-sidebar-content, .hamburger-icon { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; position: absolute !important; left: -9999px !important; } /* MAIN CONTAINER - CHANGE TO VERTICAL FLEX STACK */ body .reddit-main-container, html .reddit-main-container, #page-container .reddit-main-container, #et-main-area .reddit-main-container, .et_pb_section .reddit-main-container, .et_pb_row .reddit-main-container, .et_pb_column .reddit-main-container, .et_pb_text .reddit-main-container, .et_pb_text_inner .reddit-main-container, body.et_divi_theme .reddit-main-container { display: flex !important; flex-direction: column !important; /* KEY CHANGE: Stack vertically */ width: 100% !important; max-width: 100% !important; padding: 16px !important; gap: 20px !important; background: #ffffff !important; overflow-x: hidden !important; position: static !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; min-height: auto !important; } /* LEFT SIDEBAR - SHOW ON TOP (ORDER 1) */ body .reddit-sidebar-left, html .reddit-sidebar-left, #page-container .reddit-sidebar-left, #et-main-area .reddit-sidebar-left, .et_pb_section .reddit-sidebar-left, .et_pb_row .reddit-sidebar-left, .et_pb_column .reddit-sidebar-left, .et_pb_text .reddit-sidebar-left, .et_pb_text_inner .reddit-sidebar-left, body.et_divi_theme .reddit-sidebar-left { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; height: auto !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; position: static !important; left: auto !important; order: 1 !important; /* FIRST IN STACK */ flex: none !important; background: transparent !important; border: none !important; top: auto !important; float: none !important; } /* MAIN CONTENT - SHOW IN MIDDLE (ORDER 2) */ body .reddit-main-content, html .reddit-main-content, #page-container .reddit-main-content, #et-main-area .reddit-main-content, .et_pb_section .reddit-main-content, .et_pb_row .reddit-main-content, .et_pb_column .reddit-main-content, .et_pb_text .reddit-main-content, .et_pb_text_inner .reddit-main-content, body.et_divi_theme .reddit-main-content { width: 100% !important; max-width: 100% !important; flex: 1 !important; order: 2 !important; /* SECOND IN STACK */ padding: 0 !important; margin: 0 !important; min-width: auto !important; display: block !important; visibility: visible !important; opacity: 1 !important; background: transparent !important; float: none !important; position: static !important; } /* RIGHT SIDEBAR - SHOW ON BOTTOM (ORDER 3) */ body .reddit-sidebar-right, html .reddit-sidebar-right, #page-container .reddit-sidebar-right, #et-main-area .reddit-sidebar-right, .et_pb_section .reddit-sidebar-right, .et_pb_row .reddit-sidebar-right, .et_pb_column .reddit-sidebar-right, .et_pb_text .reddit-sidebar-right, .et_pb_text_inner .reddit-sidebar-right, body.et_divi_theme .reddit-sidebar-right { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; height: auto !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; position: static !important; left: auto !important; order: 3 !important; /* THIRD IN STACK */ flex: none !important; background: transparent !important; border: none !important; top: auto !important; float: none !important; min-height: auto !important; } /* REMOVE SPACER ON MOBILE */ body .reddit-main-container::after, html .reddit-main-container::after, .et_pb_section .reddit-main-container::after, .et_pb_row .reddit-main-container::after, .et_pb_column .reddit-main-container::after, .et_pb_text .reddit-main-container::after, .et_pb_text_inner .reddit-main-container::after, body.et_divi_theme .reddit-main-container::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; flex: none !important; } /* MOBILE SIDEBAR CONTENT STYLING */ .reddit-left-sidebar-content, .reddit-right-sidebar-content { background: transparent !important; border: none !important; margin-bottom: 16px !important; padding: 0 !important; display: block !important; width: 100% !important; } /* MOBILE SECTIONS WITH CARDS */ .reddit-forums-section, .reddit-resources-section, .reddit-quick-actions, .reddit-private-messaging { background: #f8f9fa !important; border: 1px solid #e1e5e9 !important; border-radius: 8px !important; margin-bottom: 16px !important; padding: 12px !important; width: 100% !important; box-sizing: border-box !important; } /* MOBILE SECTION TITLES */ .reddit-section-title { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; color: #0079d3 !important; margin: 0 0 12px 0 !important; padding: 0 0 8px 0 !important; border-bottom: 1px solid #e1e5e9 !important; letter-spacing: 0.5px !important; } /* MOBILE LINKS WITH BETTER TOUCH TARGETS */ .reddit-nav-link, .reddit-forum-link, .action-link { padding: 12px 16px !important; margin-bottom: 4px !important; border-radius: 6px !important; font-size: 14px !important; display: flex !important; align-items: center !important; background: white !important; border: 1px solid #e1e5e9 !important; text-decoration: none !important; color: #1c1c1c !important; transition: background-color 0.2s ease !important; } .reddit-nav-link:hover, .reddit-forum-link:hover, .action-link:hover { background-color: rgba(0,121,211,0.1) !important; text-decoration: none !important; } /* MOBILE ICONS */ .nav-icon, .forum-icon, .action-link-icon { margin-right: 12px !important; font-size: 18px !important; width: 20px !important; height: 20px !important; flex-shrink: 0 !important; } /* KEEP ACTIVITY ITEMS HORIZONTAL ON MOBILE */ .bbp-activity-item { gap: 12px !important; padding: 15px 0 !important; display: flex !important; flex-direction: row !important; /* Keep horizontal */ align-items: flex-start !important; border-bottom: 1px solid #e2e8f0 !important; } .bbp-activity-voting-section { width: 45px !important; min-width: 45px !important; flex-shrink: 0 !important; order: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; background: #ffffff !important; padding: 0 !important; margin: 0 !important; position: static !important; float: none !important; } .bbp-activity-content { flex: 1 !important; order: 2 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; display: block !important; background: #ffffff !important; position: static !important; overflow: visible !important; } /* MOBILE HEADER ADJUSTMENTS */ .reddit-subreddit-header { min-height: 150px !important; margin-bottom: 16px !important; } .reddit-header-background { height: 150px !important; } .reddit-header-content { padding: 16px !important; min-height: 150px !important; } .reddit-subreddit-icon { width: 60px !important; height: 60px !important; } .reddit-subreddit-name { font-size: 22px !important; } .reddit-subreddit-description { font-size: 13px !important; } /* MOBILE FILTER BAR */ .reddit-filter-bar { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; padding: 12px 0 !important; } .filter-group { flex-wrap: wrap !important; gap: 8px !important; } /* MOBILE SPACING ADJUSTMENTS */ .reddit-private-messaging { margin-top: 16px !important; } .reddit-quick-actions { margin-bottom: 16px !important; } /* FORCE PROPER STACKING ORDER */ .bbp-activity-voting-section { z-index: 1 !important; } .bbp-activity-content { z-index: 2 !important; } /* ENSURE VOTING BUTTONS WORK ON MOBILE */ .bbp-activity-voting-section .bbp-voting { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; background: transparent !important; position: static !important; float: none !important; } .bbp-activity-voting-section .bbp-voting .vote { width: 32px !important; height: 32px !important; display: block !important; position: relative !important; float: none !important; clear: none !important; } .bbp-activity-voting-section .bbp-voting .score { display: block !important; position: static !important; float: none !important; text-align: center !important; } } /* EXTRA SMALL MOBILE - COMPACT ADJUSTMENTS */ @media (max-width: 600px) { .reddit-main-container { padding: 12px !important; gap: 16px !important; } .reddit-forums-section, .reddit-resources-section, .reddit-quick-actions, .reddit-private-messaging { margin-bottom: 12px !important; padding: 10px !important; } .reddit-header-content { padding: 12px !important; } .reddit-subreddit-icon { width: 50px !important; height: 50px !important; } .reddit-subreddit-name { font-size: 20px !important; } .bbp-activity-item { gap: 10px !important; padding: 12px 0 !important; } .bbp-activity-voting-section { width: 40px !important; min-width: 40px !important; } .bbp-activity-topic-title { font-size: 16px !important; } } /* MOBILE SCREENS - VERTICAL STACK LAYOUT */ /* REPLACE YOUR ENTIRE @media (max-width: 960px) SECTION WITH THIS */ @media (max-width: 960px) { /* COMPLETELY HIDE HAMBURGER MENU SYSTEM */ .mobile-hamburger-menu, .mobile-sidebar-overlay, .mobile-sidebar-content, .hamburger-icon { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; position: absolute !important; left: -9999px !important; } /* HIDE RESOURCES SECTION ON MOBILE */ .reddit-resources-section { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; position: absolute !important; left: -9999px !important; } /* MAIN CONTAINER - CHANGE TO VERTICAL FLEX STACK */ body .reddit-main-container, html .reddit-main-container, #page-container .reddit-main-container, #et-main-area .reddit-main-container, .et_pb_section .reddit-main-container, .et_pb_row .reddit-main-container, .et_pb_column .reddit-main-container, .et_pb_text .reddit-main-container, .et_pb_text_inner .reddit-main-container, body.et_divi_theme .reddit-main-container { display: flex !important; flex-direction: column !important; /* KEY CHANGE: Stack vertically */ width: 100% !important; max-width: 100% !important; padding: 16px !important; gap: 20px !important; background: #ffffff !important; overflow-x: hidden !important; position: static !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; min-height: auto !important; } /* LEFT SIDEBAR - SHOW ON TOP (ORDER 1) */ body .reddit-sidebar-left, html .reddit-sidebar-left, #page-container .reddit-sidebar-left, #et-main-area .reddit-sidebar-left, .et_pb_section .reddit-sidebar-left, .et_pb_row .reddit-sidebar-left, .et_pb_column .reddit-sidebar-left, .et_pb_text .reddit-sidebar-left, .et_pb_text_inner .reddit-sidebar-left, body.et_divi_theme .reddit-sidebar-left { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; height: auto !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; position: static !important; left: auto !important; order: 1 !important; /* FIRST IN STACK */ flex: none !important; background: transparent !important; border: none !important; top: auto !important; float: none !important; } /* MAIN CONTENT - SHOW IN MIDDLE (ORDER 2) */ body .reddit-main-content, html .reddit-main-content, #page-container .reddit-main-content, #et-main-area .reddit-main-content, .et_pb_section .reddit-main-content, .et_pb_row .reddit-main-content, .et_pb_column .reddit-main-content, .et_pb_text .reddit-main-content, .et_pb_text_inner .reddit-main-content, body.et_divi_theme .reddit-main-content { width: 100% !important; max-width: 100% !important; flex: 1 !important; order: 2 !important; /* SECOND IN STACK */ padding: 0 !important; margin: 0 !important; min-width: auto !important; display: block !important; visibility: visible !important; opacity: 1 !important; background: transparent !important; float: none !important; position: static !important; } /* RIGHT SIDEBAR - SHOW ON BOTTOM (ORDER 3) */ body .reddit-sidebar-right, html .reddit-sidebar-right, #page-container .reddit-sidebar-right, #et-main-area .reddit-sidebar-right, .et_pb_section .reddit-sidebar-right, .et_pb_row .reddit-sidebar-right, .et_pb_column .reddit-sidebar-right, .et_pb_text .reddit-sidebar-right, .et_pb_text_inner .reddit-sidebar-right, body.et_divi_theme .reddit-sidebar-right { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; height: auto !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; position: static !important; left: auto !important; order: 3 !important; /* THIRD IN STACK */ flex: none !important; background: transparent !important; border: none !important; top: auto !important; float: none !important; min-height: auto !important; } /* REMOVE SPACER ON MOBILE */ body .reddit-main-container::after, html .reddit-main-container::after, .et_pb_section .reddit-main-container::after, .et_pb_row .reddit-main-container::after, .et_pb_column .reddit-main-container::after, .et_pb_text .reddit-main-container::after, .et_pb_text_inner .reddit-main-container::after, body.et_divi_theme .reddit-main-container::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; flex: none !important; } /* MOBILE SIDEBAR CONTENT STYLING */ .reddit-left-sidebar-content, .reddit-right-sidebar-content { background: transparent !important; border: none !important; margin-bottom: 16px !important; padding: 0 !important; display: block !important; width: 100% !important; } /* MOBILE SECTIONS WITH CARDS */ .reddit-forums-section, .reddit-quick-actions, .reddit-private-messaging { background: #f8f9fa !important; border: 1px solid #e1e5e9 !important; border-radius: 8px !important; margin-bottom: 16px !important; padding: 12px !important; width: 100% !important; box-sizing: border-box !important; } /* MOBILE SECTION TITLES */ .reddit-section-title { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; color: #0079d3 !important; margin: 0 0 12px 0 !important; padding: 0 0 8px 0 !important; border-bottom: 1px solid #e1e5e9 !important; letter-spacing: 0.5px !important; } /* MOBILE LINKS WITH BETTER TOUCH TARGETS */ .reddit-nav-link, .reddit-forum-link, .action-link { padding: 12px 16px !important; margin-bottom: 4px !important; border-radius: 6px !important; font-size: 14px !important; display: flex !important; align-items: center !important; background: white !important; border: 1px solid #e1e5e9 !important; text-decoration: none !important; color: #1c1c1c !important; transition: background-color 0.2s ease !important; } .reddit-nav-link:hover, .reddit-forum-link:hover, .action-link:hover { background-color: rgba(0,121,211,0.1) !important; text-decoration: none !important; } /* MOBILE ICONS */ .nav-icon, .forum-icon, .action-link-icon { margin-right: 12px !important; font-size: 18px !important; width: 20px !important; height: 20px !important; flex-shrink: 0 !important; } /* KEEP ACTIVITY ITEMS HORIZONTAL ON MOBILE */ .bbp-activity-item { gap: 12px !important; padding: 15px 0 !important; display: flex !important; flex-direction: row !important; /* Keep horizontal */ align-items: flex-start !important; border-bottom: 1px solid #e2e8f0 !important; } .bbp-activity-voting-section { width: 45px !important; min-width: 45px !important; flex-shrink: 0 !important; order: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; background: #ffffff !important; padding: 0 !important; margin: 0 !important; position: static !important; float: none !important; } .bbp-activity-content { flex: 1 !important; order: 2 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; display: block !important; background: #ffffff !important; position: static !important; overflow: visible !important; } /* MOBILE HEADER ADJUSTMENTS */ .reddit-subreddit-header { min-height: 150px !important; margin-bottom: 16px !important; } .reddit-header-background { height: 150px !important; } .reddit-header-content { padding: 16px !important; min-height: 150px !important; } .reddit-subreddit-icon { width: 60px !important; height: 60px !important; } .reddit-subreddit-name { font-size: 22px !important; } .reddit-subreddit-description { font-size: 13px !important; } /* MOBILE FILTER BAR */ .reddit-filter-bar { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; padding: 12px 0 !important; } .filter-group { flex-wrap: wrap !important; gap: 8px !important; } /* MOBILE SPACING ADJUSTMENTS */ .reddit-private-messaging { margin-top: 16px !important; } .reddit-quick-actions { margin-bottom: 16px !important; } /* FORCE PROPER STACKING ORDER */ .bbp-activity-voting-section { z-index: 1 !important; } .bbp-activity-content { z-index: 2 !important; } /* ENSURE VOTING BUTTONS WORK ON MOBILE */ .bbp-activity-voting-section .bbp-voting { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; background: transparent !important; position: static !important; float: none !important; } .bbp-activity-voting-section .bbp-voting .vote { width: 32px !important; height: 32px !important; display: block !important; position: relative !important; float: none !important; clear: none !important; } .bbp-activity-voting-section .bbp-voting .score { display: block !important; position: static !important; float: none !important; text-align: center !important; } } /* EXTRA SMALL MOBILE - COMPACT ADJUSTMENTS */ @media (max-width: 600px) { .reddit-main-container { padding: 12px !important; gap: 16px !important; } .reddit-forums-section, .reddit-quick-actions, .reddit-private-messaging { margin-bottom: 12px !important; padding: 10px !important; } .reddit-header-content { padding: 12px !important; } .reddit-subreddit-icon { width: 50px !important; height: 50px !important; } .reddit-subreddit-name { font-size: 20px !important; } .bbp-activity-item { gap: 10px !important; padding: 12px 0 !important; } .bbp-activity-voting-section { width: 40px !important; min-width: 40px !important; } .bbp-activity-topic-title { font-size: 16px !important; } /* HIDE RESOURCES SECTION ON EXTRA SMALL MOBILE TOO */ .reddit-resources-section { display: none !important; } } /* ADD THIS TO YOUR MOBILE CSS SECTION (@media (max-width: 960px)) */ /* HIDE FORUMS AFTER 5TH ON MOBILE */ @media (max-width: 960px) { /* Hide forums after the 5th one on mobile */ .reddit-forums-list .reddit-forum-item:nth-child(n+6) { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /* Show "View All Forums" button more prominently on mobile */ .reddit-forums-footer { padding: 12px 16px !important; background: rgba(0, 121, 211, 0.05) !important; border: 1px solid #0079d3 !important; border-radius: 8px !important; margin-top: 12px !important; text-align: center !important; } .view-all-link { color: #0079d3 !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } .view-all-link:hover { color: #0066b3 !important; text-decoration: none !important; background: rgba(0, 121, 211, 0.1) !important; border-radius: 6px !important; padding: 4px 8px !important; margin: -4px -8px !important; } .view-all-link::before { content: "👁️" !important; font-size: 16px !important; } /* When expanded, show all forums */ .reddit-forums-list.show-all .reddit-forum-item:nth-child(n+6) { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; overflow: visible !important; } /* Show/Hide toggle button */ .mobile-forums-toggle { background: #0079d3 !important; color: white !important; border: none !important; padding: 8px 16px !important; border-radius: 20px !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; margin-top: 8px !important; display: block !important; width: 100% !important; text-align: center !important; transition: background-color 0.2s ease !important; } .mobile-forums-toggle:hover { background: #0066b3 !important; } .mobile-forums-toggle.expanded { background: #666 !important; } .mobile-forums-toggle.expanded:hover { background: #555 !important; } } /* FOR SMALLER MOBILE SCREENS */ @media (max-width: 600px) { .reddit-forums-footer { padding: 10px 12px !important; } .view-all-link { font-size: 13px !important; } .mobile-forums-toggle { font-size: 11px !important; padding: 6px 12px !important; } } /* ================================================================ FIX 1: FORUMS SECTION BORDER ALIGNMENT - AGGRESSIVE OVERRIDE Add top and right borders to align with center/right content ================================================================ */ /* DESKTOP: Remove left border completely */ .reddit-forums-section, body .reddit-forums-section, html .reddit-forums-section, .et_pb_text .reddit-forums-section, .et_pb_section .reddit-forums-section, .et_pb_row .reddit-forums-section, .et_pb_column .reddit-forums-section, .reddit-left-sidebar-content .reddit-forums-section { background: transparent !important; border-top: 1px solid #e1e5e9 !important; /* ADD TOP BORDER */ border-right: 1px solid #e1e5e9 !important; /* ADD RIGHT BORDER */ border-left: none !important; /* REMOVE LEFT BORDER ON DESKTOP */ border-bottom: 1px solid #e1e5e9 !important; padding: 12px !important; margin: 0 !important; } /* HIDE RESOURCES SECTION ENTIRELY */ .reddit-resources-section { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; position: absolute !important; left: -9999px !important; } /* NUCLEAR OVERRIDE: Force remove left border on all possible selectors */ .reddit-forums-section, .reddit-forums-section *, body .reddit-forums-section, html .reddit-forums-section, .et_pb_text .reddit-forums-section, .et_pb_section .reddit-forums-section, .et_pb_row .reddit-forums-section, .et_pb_column .reddit-forums-section, .et_pb_text_inner .reddit-forums-section, body.et_divi_theme .reddit-forums-section, .reddit-left-sidebar-content .reddit-forums-section { border-left: none !important; border-left-width: 0 !important; border-left-style: none !important; border-left-color: transparent !important; } body .reddit-resources-section, html .reddit-resources-section, .et_pb_text .reddit-resources-section { border-top: 1px solid #e1e5e9 !important; /* OVERRIDE: Keep top border */ border-right: 1px solid #e1e5e9 !important; /* OVERRIDE: Keep right border */ border-left: 1px solid #e1e5e9 !important; border-bottom: 1px solid #e1e5e9 !important; margin-bottom: 0 !important; } /* ================================================================ FIX 2: SORT DROPDOWN VERTICAL ALIGNMENT Align sort dropdown with Forums title top ================================================================ */ .reddit-section-header { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; /* CHANGE: from center to flex-start */ margin-bottom: 12px !important; } .forums-sort-container { flex-shrink: 0 !important; margin-top: 0 !important; /* ENSURE no top margin */ padding-top: 0 !important; /* ENSURE no top padding */ } .forums-sort-select { display: inline-block !important; padding: 2px 8px !important; border: 1px solid #e6e6e6 !important; border-radius: 12px !important; background: #ffffff !important; color: #1c1c1c !important; font-size: 11px !important; font-weight: 500 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23e6e6e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important; background-position: right 6px center !important; background-repeat: no-repeat !important; background-size: 12px !important; padding-right: 24px !important; min-width: 90px !important; max-width: 120px !important; /* ALIGNMENT FIXES */ margin-top: 0 !important; /* Remove any top margin */ vertical-align: top !important; /* Align to top of line */ line-height: normal !important; /* Use normal line height */ } .forums-sort-select:hover { background: #f6f7f8 !important; border-color: #ccc !important; } .forums-sort-select:focus { outline: none !important; border-color: #999 !important; } /* ================================================================ FIX 3: ENSURE CONSISTENT TOP ALIGNMENT ACROSS ALL SECTIONS Make sure all three columns start at same vertical position ================================================================ */ /* Left sidebar should align with center and right */ .reddit-sidebar-left { background: transparent !important; border: none !important; /* Remove default border, let sections handle their own */ border-radius: 4px !important; display: block !important; flex-shrink: 0 !important; float: none !important; order: 1 !important; padding: 0 16px 0 0 !important; height: fit-content !important; position: sticky !important; top: 20px !important; overflow: visible !important; width: 260px !important; } /* Ensure center content aligns properly */ .reddit-main-content { background: transparent !important; min-width: 0 !important; display: block !important; order: 2 !important; padding: 0 40px 0 40px !important; min-height: auto !important; flex: 1 !important; max-width: none !important; width: auto !important; min-width: 280px !important; overflow: visible !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } /* Ensure right sidebar aligns properly */ .reddit-sidebar-right { border: none !important; border-radius: 4px !important; display: block !important; flex-shrink: 0 !important; float: none !important; order: 3 !important; padding: 0 !important; height: fit-content !important; position: sticky !important; top: 20px !important; overflow: visible !important; width: 280px !important; } /* ================================================================ FIX 4: SECTION TITLE ALIGNMENT Ensure section titles are properly aligned ================================================================ */ .reddit-section-title { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; color: #878a8c !important; margin: 0 0 12px 0 !important; padding: 0 12px 0 12px !important; letter-spacing: 0.5px !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; border: none !important; background: transparent !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; /* ALIGNMENT FIXES */ line-height: 1.2 !important; /* Consistent line height */ vertical-align: top !important; /* Top alignment */ } /* ================================================================ FIX 5: MOBILE RESPONSIVE ADJUSTMENTS Maintain proper alignment on mobile + Add CTA arrows ================================================================ */ @media (max-width: 960px) { .reddit-section-header { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } .forums-sort-container { width: 100% !important; } .forums-sort-select { width: 100% !important; max-width: none !important; } /* MOBILE - RESTORE LEFT BORDER FOR FORUMS SECTION */ .reddit-forums-section, body .reddit-forums-section, html .reddit-forums-section, .et_pb_text .reddit-forums-section { border-left: 1px solid #e1e5e9 !important; /* RESTORE left border on mobile */ border-top: 1px solid #e1e5e9 !important; border-right: 1px solid #e1e5e9 !important; border-bottom: 1px solid #e1e5e9 !important; } /* MOBILE FORUM ITEMS - AGGRESSIVE ARROW IMPLEMENTATION */ .reddit-forum-item, .reddit-forums-list .reddit-forum-item, body .reddit-forum-item, html .reddit-forum-item, .et_pb_text .reddit-forum-item { position: relative !important; margin-bottom: 4px !important; } .reddit-forum-link, .reddit-forums-list .reddit-forum-link, body .reddit-forum-link, html .reddit-forum-link, .et_pb_text .reddit-forum-link { position: relative !important; min-height: 48px !important; display: flex !important; align-items: center !important; border-radius: 8px !important; padding-right: 50px !important; overflow: visible !important; } /* AGGRESSIVE ARROW SELECTORS - FORCE DISPLAY */ .reddit-forum-link::after, .reddit-forums-list .reddit-forum-link::after, body .reddit-forum-link::after, html .reddit-forum-link::after, .et_pb_text .reddit-forum-link::after, .reddit-forums-section .reddit-forum-link::after { content: "›" !important; display: block !important; position: absolute !important; right: 20px !important; top: 50% !important; transform: translateY(-50%) !important; color: #c7c7c7 !important; font-size: 20px !important; font-weight: 300 !important; transition: all 0.3s ease !important; line-height: 1 !important; z-index: 10 !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; background: none !important; border: none !important; text-decoration: none !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } /* ARROW HOVER EFFECTS - AGGRESSIVE SELECTORS */ .reddit-forum-link:hover::after, .reddit-forum-link:active::after, .reddit-forums-list .reddit-forum-link:hover::after, body .reddit-forum-link:hover::after, html .reddit-forum-link:hover::after, .et_pb_text .reddit-forum-link:hover::after { color: #0079d3 !important; transform: translateY(-50%) translateX(3px) !important; font-weight: 400 !important; } /* ENSURE FORUM CONTENT SPACING */ .forum-info, .reddit-forums-list .forum-info, body .forum-info, html .forum-info, .et_pb_text .forum-info { width: calc(100% - 50px) !important; padding-right: 10px !important; overflow: hidden !important; } /* FORUM LINK ACTIVE STATE */ .reddit-forum-link:active, .reddit-forums-list .reddit-forum-link:active, body .reddit-forum-link:active, html .reddit-forum-link:active, .et_pb_text .reddit-forum-link:active { background-color: rgba(0, 121, 211, 0.05) !important; transform: scale(0.98) !important; transition: all 0.1s ease !important; } /* TOUCH OPTIMIZATION */ .reddit-forum-item, .reddit-forum-link, .reddit-forums-list .reddit-forum-item, .reddit-forums-list .reddit-forum-link, body .reddit-forum-item, body .reddit-forum-link { -webkit-tap-highlight-color: rgba(0, 121, 211, 0.1) !important; -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important; } /* DEBUG: Add background color to test if arrows are being created */ .reddit-forum-link::after { background: rgba(255, 0, 0, 0.1) !important; /* Temporary debug background */ } }